:root { color-scheme: dark; font-family: Inter, Arial, sans-serif; background: #07080a; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; height: var(--viewport-height, 100dvh); margin: 0; overflow: hidden; overscroll-behavior: none; }
body { min-height: 100%; background: radial-gradient(circle at 50% 20%, #23262d 0, #0b0c0f 46%, #050506 100%); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#game-shell { width: 100%; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) 38px; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#unity-container { position: relative; width: auto; height: min(calc(100vh - 38px), 56.25vw); aspect-ratio: 16 / 9; align-self: center; justify-self: center; margin: auto; overflow: hidden; background: #050506; box-shadow: 0 0 60px #000; }
#unity-canvas { display: block; width: 100% !important; height: 100% !important; background: #050506; outline: 0; touch-action: none; }
#loading-screen, #fatal-error { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px; text-align: center; background: radial-gradient(circle, rgba(35,38,43,.92), rgba(3,3,4,.99)); }
#loading-screen[hidden], #fatal-error[hidden] { display: none; }
.brand { width: min(340px, 58%); max-height: 38%; object-fit: contain; filter: drop-shadow(0 8px 22px #000); }
#loading-label { margin: 8px 0 0; letter-spacing: .22em; font-weight: 900; }
.progress-track { width: min(430px, 76%); height: 8px; overflow: hidden; background: #272a30; transform: skewX(-12deg); }
#progress-bar { width: 0; height: 100%; background: linear-gradient(90deg, #b41419, #ef3338); box-shadow: 0 0 18px #d71920; transition: width .15s linear; }
#progress-label { color: #ddd; }
#loading-screen small { color: #8e939d; }
#fullscreen-button { position: absolute; z-index: 3; right: 14px; bottom: 14px; width: 44px; height: 44px; border: 1px solid #ffffff40; border-radius: 4px; color: white; background: #090a0dbf; font-size: 25px; cursor: pointer; }
#fullscreen-button:hover { border-color: #d71920; background: #211012; }
#focus-hint { position: absolute; z-index: 2; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 8px 14px; color: #c8cbd2; background: #050506d9; border: 1px solid #ffffff24; font-size: 12px; font-weight: 800; letter-spacing: .06em; pointer-events: none; transition: opacity .2s; white-space: nowrap; }
#focus-hint.hidden { opacity: 0; }
#unity-warning { display: none; position: absolute; z-index: 8; top: 12px; left: 50%; transform: translateX(-50%); width: min(760px, 90%); padding: 12px; color: #111; background: #f0b429; border-radius: 3px; text-align: center; }
#unity-warning.warning { display: block; }
#fatal-error h1 { color: #ef3338; font-size: clamp(22px, 3vw, 38px); }
#fatal-error p { max-width: 720px; color: #c9cbd0; }
#fatal-error button { padding: 12px 24px; border: 0; color: white; background: #bc171c; font-weight: 900; cursor: pointer; }
footer { display: flex; align-items: center; justify-content: space-between; padding: 0 18px; color: #7f848e; background: #050506; border-top: 1px solid #ffffff12; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
#rotate-device { display: none; }
@media (pointer: coarse) {
  #game-shell { grid-template-rows: minmax(0, 1fr); }
  #unity-container { max-width: 100%; max-height: 100%; box-shadow: none; }
  footer { display: none; }
  #focus-hint { display: none; }
  #fullscreen-button { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); touch-action: manipulation; }
}
@media (orientation: portrait) and (pointer: coarse) {
  #rotate-device { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); color: white; background: #07080af7; font-size: clamp(20px, 7vw, 36px); font-weight: 900; letter-spacing: .08em; text-align: center; }
  #rotate-device strong { color: #ef3338; font-size: 64px; line-height: 1; }
}
@media (max-width: 720px) { footer span:last-child { display: none; } #focus-hint { font-size: 10px; } }