@font-face { font-family: TsangerYuMo; src: url('TsangerYuMo-W05-Web.woff2') format('woff2'); font-display: swap; }
:root { color-scheme: dark; font-family: TsangerYuMo, sans-serif; background: #203f35; color: #f2e8bd; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
#unity-container { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; overflow: hidden; }
#unity-canvas { display: block; width: 100%; height: 100%; background: #203f35; touch-action: none; -webkit-user-select: none; user-select: none; }
#unity-loading-bar { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: radial-gradient(ellipse at 50% 40%, #315647 0%, #203f35 65%); transition: opacity .35s ease; overflow: auto; }
#unity-loading-bar.is-ready { opacity: 0; pointer-events: none; }
.loading-content { width: min(100%, 420px); text-align: center; }
.loading-kicker { display: block; color: #bac8a5; font-size: 14px; letter-spacing: .28em; }
.loading-art { display: block; width: min(100%, 360px); height: auto; margin: 8px auto 0; animation: arrive .7s ease-out both; }
h1 { margin: 0; font-size: clamp(26px, 4.8vw, 36px); font-weight: normal; letter-spacing: .04em; }
.shelf-life { display: inline-flex; align-items: center; gap: 5px; margin: 14px 0 28px; padding: 5px 15px; border: 1px solid #a99b63; border-radius: 24px; color: #e4c775; font-size: 17px; }
.shelf-life span { font-size: 26px; line-height: 1; }
.loading-progress { width: 80%; margin: 0 auto; }
#unity-progress-bar-empty { height: 6px; overflow: hidden; border-radius: 8px; background: #142f27; }
#unity-progress-bar-full { width: 0; height: 100%; background: #dec47e; border-radius: inherit; transition: width .25s linear; }
.loading-readout { display: flex; justify-content: space-between; gap: 10px; margin-top: 11px; color: #d4d9be; font-size: 14px; }
#loading-percent { font-variant-numeric: tabular-nums; }
.loading-caption { margin: 26px 0 0; color: #a7bba4; font-size: 13px; }
#loading-retry { margin-top: 20px; padding: 10px 24px; border: 1px solid #e1cf91; border-radius: 6px; background: #e8dcac; color: #203f35; min-height: 44px; }
#unity-warning { position: absolute; z-index: 20; left: 50%; top: max(12px, env(safe-area-inset-top)); transform: translateX(-50%); width: min(90%, 600px); background: #f1dfb1; color: #713e27; border: 1px solid #be9352; border-radius: 6px; padding: 12px; text-align: center; }
#unity-fullscreen-button { position: absolute; bottom: 16px; right: 16px; width: 40px; height: 40px; border: 1px solid #d0d6b580; border-radius: 6px; background: #203f35c7; color: #eee1b6; }
#unity-fullscreen-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: middle; }
#diagnostics-icon { position: absolute; bottom: 16px; right: 64px; width: 36px; }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-height: 540px) and (min-width: 600px) {
  .loading-content { width: min(100%, 700px); display: grid; grid-template-columns: 42% 58%; align-items: center; }
  .loading-art { grid-column: 1; grid-row: 1 / 7; margin: 0; }
  .loading-kicker, h1, .shelf-life, .loading-progress, .loading-caption, #loading-retry { grid-column: 2; }
  .loading-kicker { font-size: 12px; margin-bottom: 12px; }
  h1 { font-size: 28px; }
  .shelf-life { justify-self: center; margin: 12px 0 20px; }
  .loading-caption { margin-top: 20px; }
}
@media (max-width: 900px), (pointer: coarse) { #unity-fullscreen-button { display: none; } }
@media (max-height: 540px) and (max-width: 599px) { .loading-art { width: 210px; } .shelf-life { margin: 10px 0 18px; } .loading-caption { margin-top: 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.toy-connect { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: #10291edf; }
.toy-connect section { box-sizing: border-box; width: min(100%, 440px); padding: 26px; border: 2px solid #bb9650; border-radius: 10px; background: #eee3b8; color: #203f35; text-align: center; }
.toy-connect h2 { margin: 0 0 16px; font-size: 25px; }
.toy-connect p { font-size: 17px; line-height: 1.65; }
.toy-connect button { min-height: 48px; padding: 10px 20px; margin: 6px; border: 1px solid #203f35; border-radius: 6px; background: #203f35; color: #eee3b8; font: inherit; cursor: pointer; }
.toy-connect button:last-child { background: transparent; color: #203f35; }
.toy-connect button:disabled { opacity: .55; cursor: wait; }