/* The shared site.css and warp.js supply the same moving space background as FNDG. */
html, body { width: 100%; height: 100%; overflow: hidden; }
body { min-height: 0; height: 100dvh; display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; }
#warp { pointer-events: none; }
.play-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; min-height: 43px; padding: max(6px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 6px max(14px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); background: rgba(5,5,16,.48); }
.game-info { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.game-info img { flex: 0 0 auto; border-radius: 7px; }
.free-badge { color: var(--frog); font-size: 11px; white-space: nowrap; }
.studio-link { color: var(--ink-2); font-weight: 700; letter-spacing: .08em; }
.play-header a:hover, .play-footer a:hover { color: var(--frog); }
#game-area { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: transparent; }
#unity-canvas { display: block; visibility: hidden; width: 1px; height: 1px; background: #f8f8f2; border-radius: 8px; box-shadow: 0 0 0 1px rgba(174,212,185,.22), 0 14px 54px rgba(0,0,0,.45); touch-action: none; -webkit-tap-highlight-color: transparent; outline-offset: -3px; }
#unity-canvas.ready { visibility: visible; }
#loading { position: absolute; z-index: 3; width: min(300px, calc(100% - 32px)); padding: 26px 24px 22px; border: 1px solid rgba(174,212,185,.42); border-radius: 22px; background: rgba(8,10,22,.94); box-shadow: 0 20px 70px #0007; text-align: center; }
#loading[hidden], #retry[hidden], #notice[hidden] { display: none; }
#loading > img { display: block; margin: 0 auto 16px; border-radius: 22px; }
#loading h1 { margin: 0; font-size: 26px; line-height: 1.2; letter-spacing: -.02em; }
#loading .subtitle { margin: 5px 0 20px; font-size: 13px; color: #aed4b9; letter-spacing: .13em; }
#status { margin: 0 0 13px; color: var(--ink-2); font-size: 13px; }
#progress { display: block; width: 100%; height: 10px; border: 0; border-radius: 8px; accent-color: #aed4b9; overflow: hidden; background: #ffffff13; }
#progress::-webkit-progress-bar { background: #ffffff13; }
#progress::-webkit-progress-value { background: #aed4b9; }
#progress::-moz-progress-bar { background: #aed4b9; }
#retry { margin: 10px auto 0; padding: 11px 22px; border: 0; border-radius: 10px; background: #aed4b9; color: #10271d; font: 700 14px/1.2 inherit; cursor: pointer; }
.load-note { margin: 17px 0 0; color: var(--ink-3); font-size: 11px; }
#notice { position: absolute; z-index: 4; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(360px, calc(100% - 28px)); border: 1px solid #ffc06180; padding: 11px 14px; border-radius: 12px; background: #151324f5; color: var(--ink); font-size: 12px; text-align: center; }
.play-footer { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 6px max(12px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: rgba(5,5,16,.48); color: var(--ink-2); font-size: 10px; text-align: center; }
.play-footer p { margin: 0; max-width: 530px; }
.play-footer a { white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.no-script { position: absolute; z-index: 6; margin: 20px; padding: 20px; background: #0c0d24; }
@media (max-width: 380px) { .play-header { gap: 8px; padding-left: 10px; padding-right: 10px; font-size: 12px; } .free-badge { font-size: 10px; } .play-footer { gap: 8px; font-size: 9px; } }
@media (max-height: 480px) { .play-header { min-height: 34px; padding-top: 3px; padding-bottom: 3px; } .game-info img { width: 24px; height: 24px; } .play-footer { padding-top: 3px; padding-bottom: 3px; } #loading { padding: 14px 20px; } #loading > img { width: 48px; height: 48px; margin-bottom: 10px; } #loading .subtitle { margin-bottom: 10px; } .load-note { display: none; } }