@font-face { font-family: "Pretendard"; src: url("/assets/fonts/PretendardVariable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
.game-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.game-header { display: flex; flex: 0 0 auto; align-items: center; gap: 24px; min-height: 64px; padding: calc(8px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); }
.game-home { font-family: Arial, sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -.07em; white-space: nowrap; }
.game-home span { color: var(--brand-blue); }
.game-header h1 { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-fullscreen { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); cursor: pointer; }
.game-fullscreen svg { width: 24px; height: 24px; }
.game-fullscreen:hover:not(:disabled) { border-color: var(--accent); }
.game-fullscreen:disabled { opacity: .35; cursor: default; }
.game-stage { position: relative; flex: 1; min-width: 0; min-height: 0; padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: #f8f4e9; }
.game-page:fullscreen { width: 100vw; height: 100vh; height: 100dvh; }
#unity-canvas { display: block; width: 100%; height: 100%; background: #f8f4e9; touch-action: none; outline: none; }
.game-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 32px; color: #352e49; background: #f8f4e9; }
.game-logo { width: min(520px, 80vw); max-height: 38vh; object-fit: contain; }
.game-start { min-width: 200px; min-height: 52px; padding: 12px 32px; border: 2px solid #352e49; border-radius: 12px; color: #352e49; background: #f7b94f; font-size: 18px; font-weight: 650; cursor: pointer; box-shadow: 0 3px 0 #352e49; transition: transform .16s, background .16s; }
.game-start:hover { background: #ffc86a; }
.game-start:active { transform: translateY(2px); }
.game-status-text { max-width: 480px; color: #645c75; font-size: 14px; text-align: center; line-height: 1.7; }
.game-status-text:empty { display: none; }
#game-progress { appearance: none; width: min(320px, 100%); height: 10px; border: 0; border-radius: 8px; overflow: hidden; background: #e4deeb; accent-color: #7e6daa; }
#game-progress::-webkit-progress-bar { background: #e4deeb; border-radius: 8px; }
#game-progress::-webkit-progress-value { background: #7e6daa; border-radius: 8px; }
#game-progress::-moz-progress-bar { background: #7e6daa; border-radius: 8px; }
[hidden] { display: none !important; }
@media (max-width: 600px) { .game-header { gap: 16px; min-height: 56px; padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); } .game-home { font-size: 16px; } .game-header h1 { font-size: 12px; } .game-loading { gap: 24px; padding: 24px; } }
@media (max-height: 500px) { .game-header { min-height: 48px; padding-block: 2px; } .game-loading { gap: 16px; padding: 16px; } .game-logo { max-height: 35vh; } }
@media (prefers-reduced-motion: reduce) { .game-start { transition: none; } }