:root { --orange: #f97316; --bg: #fb923c; }
* { margin:0; padding:0; box-sizing:border-box; user-select:none; -webkit-tap-highlight-color: transparent; }
body { background: #ea580c; font-family: 'Fredoka', sans-serif; overflow: hidden; height: 100dvh; display: flex; justify-content: center; align-items: center; }
#game-container { position: relative; background: #fb923c; overflow: hidden; box-shadow: 0 0 100px rgba(0,0,0,0.6); border-radius: 40px; border: 12px solid #9a3412; aspect-ratio: 9 / 19.5; width: auto; height: 100%; max-width: 100%; max-height: 100%; }
@media (max-width: 480px) {
    #game-container { border: none; border-radius: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; aspect-ratio: auto; }
}
#login-screen { position: absolute; inset: 0; background: #fb923c; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.logo-box { width: 85%; max-width: 320px; margin-bottom: 25px; animation: float 3s ease-in-out infinite; }
.logo-box img { width: 100%; height: auto; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.35)); }
.login-box { width: 80%; background: rgba(255,255,255,0.95); padding: 25px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); border: 2.2px solid #ea580c; text-align: center; }
.login-box h2 { font-size: 1.4rem; color: #ea580c; margin-bottom: 12px; }
.login-box input { width: 100%; padding: 12px; font-size: 1.2rem; border: 2px solid #ddd; border-radius: 10px; text-align: center; margin-bottom: 15px; outline: none; font-family: 'Fredoka', sans-serif; }
.login-box button { width: 100%; padding: 12px; background: #ea580c; color: #fff; font-weight: 800; border: none; border-radius: 10px; cursor: pointer; font-size: 1.1rem; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
canvas { width: 100%; height: 100%; display: none; background: #fb923c; }
#game-ui { display: none; }
#header { position: absolute; top: calc(6px + env(safe-area-inset-top, 0px)); left: 0; width: 100%; padding: 0 calc(12px + env(safe-area-inset-right, 0px)) 0 calc(12px + env(safe-area-inset-left, 0px)); display: flex; align-items: center; justify-content: space-between; z-index: 500; height: 50px; }
#exit-btn, #settings-btn, .icon-btn-wr { width: 44px; height: 44px; background: transparent !important; border: none !important; box-shadow: none !important; color: #ea580c; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0 !important; transition: transform 0.1s; }
#exit-btn:active, #settings-btn:active, .icon-btn-wr:active { transform: scale(0.9); }
.header-ico-img { width: 100%; height: 100%; object-fit: contain; }
#hud-group { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score-box { font-size: 1.25rem; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); font-weight: 800; background: rgba(234, 88, 12, 0.95); padding: 0px 15px; border-radius: 12px; border: 2.2px solid #fff; line-height: 1.4; }
#goal-bar-bg { width: 110px; height: 5px; background: rgba(0,0,0,0.3); border-radius: 3px; overflow: hidden; margin-top: 2px; border: 1.5px solid #fff; }
#goal-fill { width: 0%; height: 100%; background: #fbbf24; transition: width 0.3s ease; }
.stage-info { font-size: 0.6rem; color: #fff; font-weight: 900; }
#control-area { position: absolute; bottom: 0; left: 0; width: 100%; height: calc(260px + env(safe-area-inset-bottom, 0px)); pointer-events: auto; background: transparent; cursor: pointer; }
#winder-stick { position: absolute; bottom: calc(15px + env(safe-area-inset-bottom, 0px)); left: 50%; width: 145px; height: 145px; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; transform: translate(-50%, 0); pointer-events: none; }
#rainbow-ring { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(red, #ff0, #0f0, #0ff, #00f, #f0f, red); opacity: 0.85; z-index: 5; mask: radial-gradient(transparent 58%, black 61%); -webkit-mask: radial-gradient(transparent 58%, black 61%); }
#winder-gear { width: 84%; height: 84%; background-image: url('../assets/gear.png'); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 10; }
#winder-needle { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 25; }
#needle-core { width: 4.8px; height: 38%; background: linear-gradient(to top, #ff2200, #b91d1d); border-radius: 4px; transform: translateY(-38%); border: 1.4px solid #fff; }
#needle-pivot { width: 14px; height: 14px; background: #262626; border-radius: 50%; border: 2.2px solid #fff; position: absolute; z-index: 30; }
.winder-arrow { position: absolute; top: 50%; transform: translateY(-50%); font-size: 1.85rem; color: #fff; text-shadow: 0 4px 8px rgba(0,0,0,0.5); font-weight: 900; opacity: 0.6; }
#arrow-left { left: -32px; } #arrow-right { right: -32px; }
#version { position: absolute; bottom: 6px; right: 12px; color: rgba(255,255,255,0.4); font-size: 0.6rem; }

/* Settings Overlay (Tetris Base) */
.overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.8); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.3s; }
.overlay.hidden { display: none; opacity: 0; pointer-events: none; }
.card { background: rgba(255, 255, 255, 0.1); width: 85%; max-width: 320px; padding: 25px; border-radius: 20px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 8px 32px rgba(0,0,0,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-secondary { background: #1e293b; color: white; width: 100%; height: 50px; font-weight: bold; border: none; border-radius: 12px; font-size: 1.1rem; box-shadow: 0 4px 0 #0f172a; margin-top: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.btn-pink { background: #e11d48; box-shadow: 0 4px 0 #9f1239; margin-top: 15px; }
.setting-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.2); }
.setting-item span { color: white; font-weight: bold; font-size: 1.1rem; }
.setting-item button { width: 80px; height: 40px; margin: 0; }

/* --- Stage Clear Overlay --- */
#stage-clear-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); display: none; flex-direction: column; justify-content: center; align-items: center; z-index: 2500; padding: 20px; box-sizing: border-box; }
.stage-clear-card { background: white; width: 85%; max-width: 340px; border-radius: 40px; padding: 30px; text-align: center; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3); animation: cardSlideUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; flex-direction: column; align-items: center; }
@keyframes cardSlideUp { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
#sc-title { color: #ea580c; font-size: 28px; margin: 0 0 15px 0; font-weight: 900; }
.sc-sticker-vessel { width: 150px; height: 150px; background: #fff7ed; border-radius: 30px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; border: 3px solid #ffedd5; overflow: hidden; }
#sc-sticker-img { width: 85%; height: 85%; object-fit: contain; animation: stickerDance 2s infinite ease-in-out; }
@keyframes stickerDance { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.1) rotate(5deg); } }
#sc-message { color: #555; font-size: 16px; font-weight: 600; line-height: 1.5; margin-bottom: 25px; white-space: pre-line; }
.btn-next { background: #ea580c; color: white; border: none; padding: 15px 40px; border-radius: 30px; font-size: 18px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 20px rgba(234, 88, 12, 0.3); width: 100%; }
.shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translate3d(-2px, 0, 0); } 20%, 80% { transform: translate3d(4px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-6px, 0, 0); } 40%, 60% { transform: translate3d(6px, 0, 0); } }