/* Self-hosted (SIL OFL, latin subset): a third-party font stylesheet can stall first paint. */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/dm-sans-latin.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('fonts/space-grotesk-latin.woff2') format('woff2'); }

:root {
  font-family: 'DM Sans', Arial, sans-serif;
  color: #182d43;
  background: #91d9dc;
  font-synthesis: none;
  --blue: #205fc9;
  --panel: #fffefa;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 3px solid #f5b940; outline-offset: 4px; }
#room { position: relative; width: 100%; height: 100svh; min-height: 500px; overflow: hidden; }
#canvas-wrap { position: absolute; inset: 0; }
canvas { display: block; }
#canvas-wrap canvas { touch-action: none; }
#hotspots { pointer-events: none; }
.hotspot { pointer-events: auto; }
#swipe-hint { display: none; }
/* Parked off-screen rather than hidden: YouTube will not buffer a player it
   considers invisible, which made the first TV press wait seconds. */
.tv-mount { position: absolute; left: 0; top: 0; z-index: 1; transform-origin: 0 0; transform: translate(-99999px, -99999px); width: 480px; height: 360px; background: #152c42; pointer-events: none; overflow: hidden; border-radius: 22px; }
.tv-mount.is-live { pointer-events: auto; }
.tv-mount iframe { display: block; border: 0; width: 100%; height: 100%; }

.masthead { position: absolute; z-index: 10; top: 30px; left: 34px; right: 34px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
/* 44 px tap target; the negative margin keeps the wordmark where it was. */
.brand { display: flex; gap: 9px; align-items: center; min-height: 44px; margin: -8px 0; font-family: 'Space Grotesk', Arial, sans-serif; font-size: 23px; letter-spacing: -1px; font-weight: 700; text-decoration: none; color: #172d46; pointer-events: auto; }
.brand-icon { font-size: 29px; line-height: 1; }
.room-label { font-size: 9px; letter-spacing: 2px; font-weight: 700; transition: color .4s; }
.brand { transition: color .4s; }
body.lights-off .brand, body.lights-off .room-label { color: #e6f0f4; }

.room-panel { position: fixed; z-index: 14; right: 24px; bottom: 21px; zoom: 1.15; width: 292px; padding: 19px 18px 10px; background: var(--panel); border: 1px solid #fff; border-radius: 22px; box-shadow: 0 5px 0 #23394c12, 0 14px 32px #23394c16; }
.welcome-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.welcome h1 { font-family: 'DM Sans', Arial, sans-serif; font-size: 31px; line-height: 1.04; letter-spacing: -1.35px; margin: 0; font-weight: 700; }
/* Negative margin: the button is taller than the heading line without growing the panel. */
.buy-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; margin: -5px 0; padding: 0 14px; border: 1px solid #ffffffdf; border-radius: 22px; background: #175bdc; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 0 0 3px #175bdc26, 0 4px 12px #1447a530; transition: background .2s, color .2s; }
.buy-btn:hover:not(:disabled) { background: #154bae; }
.buy-btn:disabled { background: #e3e9ee; color: #7b8a99; border-color: transparent; box-shadow: none; cursor: default; }
.bubble { position: absolute; left: 0; top: 0; z-index: 11; max-width: 220px; pointer-events: none; will-change: transform; }
.bubble[hidden] { display: none; }
.bubble span { position: relative; display: block; padding: 9px 14px; border-radius: 16px; background: #fffefa; color: #182d43; font-size: 13px; font-weight: 600; line-height: 1.3; text-align: center; box-shadow: 0 5px 16px #1447a533; transform-origin: 50% 100%; animation: bubble-pop .24s cubic-bezier(.2, .9, .3, 1.3) both; }
.bubble span::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
@keyframes bubble-pop { from { transform: scale(.6); } }
.welcome h1 span { display: block; }
.welcome p span { display: block; }
.welcome p { font-size: 12px; line-height: 1.45; margin: 0; color: #4a5968; }
.token-row { display: flex; align-items: center; gap: 6px; margin-top: 13px; padding: 6px 6px 6px 10px; background: #f1f4f6; border-radius: 12px; }
.ca-label { font-size: 9px; font-weight: 700; letter-spacing: 1px; color: #6a7a8a; }
#ca-text { flex: 1; min-width: 0; font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 10px; line-height: 1.35; color: #182d43; overflow-wrap: anywhere; user-select: all; }
#ca-text.is-pending { font-family: inherit; color: #6a7a8a; user-select: none; }
.icon-btn { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: #fff; color: #405269; text-decoration: none; transition: background .18s, color .18s; }
.icon-btn:hover:not(:disabled) { background: #e0eaff; color: #205fc9; }
.icon-btn:disabled { opacity: .4; cursor: default; }
.icon-btn svg { grid-area: 1 / 1; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn .x-mark { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.icon-btn .check, .icon-btn.is-copied svg:not(.check) { visibility: hidden; }
.icon-btn.is-copied .check { visibility: visible; }
.icon-btn.is-copied { background: #dff5e8; color: #1f8a4c; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 15px; padding-top: 10px; border-top: 1px solid #dfe5e8; }
.dock button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 56px; min-width: 44px; border: 0; border-radius: 13px; background: transparent; color: #405269; transition: background .18s, color .18s; }
.dock svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dock button span { font-size: 10px; font-weight: 600; }
.dock button:hover { background: #edf1f3; }
.dock button.is-active { background: #e0eaff; color: #205fc9; }
.dock button.is-loading, .hotspot.is-loading { background: #dceaff; color: #205fc9; box-shadow: 0 0 0 2px #8db9ff80, 0 0 18px #5e9cff80; animation: media-loading 1s ease-in-out infinite; }
.dock button.is-loading svg, .hotspot.is-loading .status-dot { animation: media-loading-icon .8s linear infinite; }
.dock button.is-loading span::after { content: ' · Loading'; display: block; color: #205fc9; font-size: 8px; line-height: 1; letter-spacing: .25px; text-transform: uppercase; }
.hotspot.is-loading::after { content: 'Loading…'; margin-left: 2px; font-size: 9px; letter-spacing: .25px; text-transform: uppercase; }

.hotspot { position: absolute; left: 0; top: 0; min-height: 44px; display: flex; gap: 8px; align-items: center; border: 1px solid #ffffffdf; border-radius: 28px; padding: 10px 15px; background: #175bdce8; box-shadow: 0 0 0 3px #ffffff28, 0 5px 16px #1447a530; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; will-change: transform; transition: background .2s; }
.hotspot:hover { background: #154bae; }
.hotspot.is-active { background: #16418b; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 7px #b8d9ff; }
.hotspot.is-active .status-dot { background: #a4f3ce; }
.hotspot-arrow { font-size: 13px; margin-left: 2px; opacity: .75; }
#media-error { position: fixed; left: 28px; bottom: 28px; z-index: 16; max-width: min(430px, calc(100vw - 410px)); background: #fff5dd; border: 1px solid #e4c891; border-radius: 14px; color: #304358; font-size: 13px; line-height: 1.5; padding: 13px 17px; box-shadow: 0 4px 20px #0001; overflow-wrap: anywhere; }
#media-error:empty, #media-error[hidden] { display: none; }
#media-error a { color: #1752ab; }

#loading { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px; background: radial-gradient(circle at 50% 42%, #c4f0ef 0%, #a0dfe0 45%, #86d0d3 100%); transition: opacity .45s ease .2s, visibility .45s ease .2s; }
#loading[hidden] { display: none; }
#loading.is-done { opacity: 0; visibility: hidden; }
.loading-brand { display: flex; align-items: center; gap: 12px; font-family: 'Space Grotesk', Arial, sans-serif; font-size: clamp(34px, 9vw, 46px); font-weight: 700; letter-spacing: -1.8px; color: #172d46; animation: loading-rise .7s cubic-bezier(.2, .8, .3, 1) both; }
.loading-brand .brand-icon { font-size: 1.2em; display: inline-block; animation: loading-star 2.4s ease-in-out infinite; }
.loading-bar { width: min(220px, 60vw); height: 6px; border-radius: 6px; background: #ffffff8c; box-shadow: inset 0 0 0 1px #172d4614; overflow: hidden; animation: loading-rise .7s .12s cubic-bezier(.2, .8, .3, 1) both; }
/* transform-only animations keep running on the compositor while the scene builds */
#loading-fill { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #175bdc, #4b8df0); transform-origin: left; transform: scaleX(.06); animation: loading-trickle 3.6s cubic-bezier(.1, .7, .3, 1) forwards; }
#loading.is-done #loading-fill { transform: scaleX(1); animation: none; transition: transform .25s ease-out; }
#loading p { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: #2c4a60; animation: loading-rise .7s .22s cubic-bezier(.2, .8, .3, 1) both, loading-breathe 1.8s 1s ease-in-out infinite; }
@keyframes loading-rise { from { transform: translateY(10px) scale(.97); } }
@keyframes loading-star { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.08); } }
@keyframes loading-trickle { from { transform: scaleX(.06); } to { transform: scaleX(.88); } }
@keyframes loading-breathe { 50% { opacity: .5; } }
#fallback { position: absolute; inset: 100px 20px 210px; text-align: center; }
#fallback[hidden] { display: none; }
#fallback p { max-width: 430px; margin: 0 auto 20px; line-height: 1.5; }
#fallback img { height: 65%; object-fit: contain; }
body.no-webgl #hotspots, body.no-webgl .welcome h1, body.no-webgl .welcome p { display: none; }
body.no-webgl .welcome-head { margin: 0 0 8px; }
body.no-webgl .buy-btn { width: 100%; margin: 0; }
body.no-webgl .room-panel { padding: 8px; }
body.no-webgl .dock { margin: 0; padding: 0; border: 0; }
.fallback-tv { position: absolute; width: min(80vw, 640px); aspect-ratio: 4/3; left: 50%; top: 18%; transform: translateX(-50%); z-index: 4; }
.fallback-tv:empty { display: none; }
.fallback-tv iframe { width: 100%; height: 100%; border: 0; border-radius: 16px; }
.stereo-audio-host { position: fixed; left: -10000px; top: 0; width: 356px; height: 200px; overflow: hidden; opacity: 0; pointer-events: none; }
.stereo-audio-iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 700px) {
  #room { --panel-height: calc(206px + env(safe-area-inset-bottom, 0px)); min-height: 480px; }
  #canvas-wrap, #hotspots { position: absolute; inset: 0 0 var(--panel-height); }
  .masthead { top: max(23px, env(safe-area-inset-top)); left: 23px; right: 23px; }
  .brand { font-size: 21px; }
  .brand-icon { font-size: 26px; }
  .room-label { display: none; }
  .room-panel { zoom: 1; right: 0; left: 0; bottom: 0; width: 100%; height: var(--panel-height); padding: 16px 20px max(8px, env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; box-shadow: 0 -4px 20px #28394b0a; }
  .welcome-head { margin: 0 0 5px; }
  .welcome h1 { font-size: 25px; line-height: 1.1; letter-spacing: -1px; }
  .bubble { max-width: 200px; }
  .bubble span { font-size: 12px; padding: 8px 12px; }
  .welcome h1 span { display: inline; }
  .welcome p { font-size: 11px; }
  .token-row { margin-top: 9px; gap: 5px; padding: 4px 4px 4px 8px; }
  .ca-label { display: none; }
  #ca-text { font-size: 9px; letter-spacing: -.2px; }
  .icon-btn { width: 32px; height: 32px; }
  .dock { margin-top: 9px; padding-top: 6px; }
  .dock button { height: 48px; }
  .hotspot { min-height: 44px; padding: 8px 12px; font-size: 11px; gap: 6px; }
  .hotspot-arrow { display: none; }

  body.focused #canvas-wrap { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  body.no-webgl .room-panel { left: 15px; right: 15px; bottom: max(12px, env(safe-area-inset-bottom)); width: auto; height: auto; border-radius: 18px; }
  #media-error { left: 16px; right: 16px; bottom: calc(var(--panel-height) + 12px); width: auto; max-width: none; }
  body.focused #media-error { bottom: 90px; }
  #swipe-hint { position: fixed; z-index: 12; left: 50%; bottom: calc(var(--panel-height) + 8px); display: flex; gap: 6px; align-items: center; padding: 7px 13px; border-radius: 20px; background: #172d46cc; color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; pointer-events: none; transform: translateX(-50%); opacity: 0; transition: opacity .4s; }
  #swipe-hint span { font-size: 14px; animation: swipe-nudge 1.4s ease-in-out infinite; }
  body.show-swipe-hint:not(.focused) #swipe-hint { opacity: 1; }
  #fallback { inset: 90px 22px 110px; }
}
@media (max-height: 500px) and (min-width: 701px) {
  #room { min-height: 320px; }
  .masthead { top: 17px; left: 22px; right: 22px; }
  .welcome h1, .welcome p { display: none; }
  .welcome-head { margin: 0 0 6px; }
  .buy-btn { width: 100%; margin: 0; }
  .room-panel { zoom: 1; width: 260px; padding: 8px; right: 20px; bottom: 16px; }
  .dock { border: 0; margin: 0; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@keyframes swipe-nudge { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes media-loading { 0%, 100% { opacity: 1; } 50% { opacity: .68; } }
@keyframes media-loading-icon { to { transform: rotate(360deg); } }