@font-face { font-family: 'Lilita One'; src: url(../assets/fonts/LilitaOne-Regular.woff?v=029b74f248) format('woff'); font-display: swap; }
:root {
  --ink: #1d1838; --red: #e6332a; --yellow: #ffc93c; --cream: #fff6e5; --sky: #7fd3ff;
  --display: 'Lilita One', system-ui, sans-serif; --ui: 'Fredoka', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--ink); font-family: var(--ui); -webkit-tap-highlight-color: transparent; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#stage { position: fixed; inset: 0; touch-action: none; }
#stage canvas { display: block; cursor: grab; }
#stage canvas:active { cursor: grabbing; }

/* ink-outlined sticker look for all UI, to match the 3D */
.chip, .soon, .hint, .brand {
  background: var(--cream); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 4px 0 var(--ink);
}
.top { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); pointer-events: none; }
.top > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 8px; padding: 4px 16px 4px 6px; text-decoration: none; color: var(--ink); font: 22px/1 var(--display); letter-spacing: .3px; }
.brand img { display: block; }
.top-right { display: flex; gap: 10px; align-items: center; }
.soon { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; font: 600 15px/1 var(--ui); }
.soon i { width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(230,51,42,.6); animation: ping 1.6s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(230,51,42,0); } 100% { box-shadow: 0 0 0 0 rgba(230,51,42,0); } }
.chip { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--ink); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.chip:hover { transform: translateY(-1px); }
.chip:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.chip:focus-visible, .brand:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
#sound .on { display: none; } #sound[aria-pressed="true"] .on { display: inline; } #sound[aria-pressed="true"] .off { display: none; }
#sound[aria-pressed="true"] { background: var(--yellow); }

.bottom { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  padding: 0 max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); pointer-events: none; }
.tagline { margin: 0; font: 30px/1.05 var(--display); color: var(--cream); letter-spacing: .3px;
  text-shadow: 3px 0 var(--ink), -3px 0 var(--ink), 0 3px var(--ink), 0 -3px var(--ink), 2px 2px var(--ink), -2px 2px var(--ink), 2px -2px var(--ink), -2px -2px var(--ink), 0 6px 0 var(--ink); }
.hint { padding: 10px 18px; font: 600 16px/1.2 var(--ui); white-space: nowrap; transition: opacity .3s, transform .3s; }
.hint.swap { opacity: 0; transform: translateY(6px); }
.hint:empty { opacity: 0; }

/* speech bubbles over the 3D crew and cards */
#bubbles { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
/* left/top = the anchor point (set from JS); translate puts the tail tip on it, so the pop scales from the speaker */
.bubble { position: absolute; left: 0; top: 0; translate: -50% calc(-100% - 11px); padding: 7px 14px 8px; background: #fff; border: 3px solid var(--ink); border-radius: 18px;
  font: 20px/1 var(--display); color: var(--ink); white-space: nowrap; opacity: 0; transform-origin: 50% calc(100% + 11px); }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -11px; width: 14px; height: 14px; background: #fff; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: translateX(-50%) rotate(45deg); }
.bubble.show { opacity: 1; }
.bubble.pop { animation: pop .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { from { scale: .3; } to { scale: 1; } }

#loader { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; background: var(--ink); color: var(--cream); font: 20px var(--display); transition: opacity .6s; z-index: 5; }
#loader img { animation: bob 0.9s ease-in-out infinite alternate; }
#loader p { margin: 0; }
#loader.done { opacity: 0; pointer-events: none; }
#loader.err p { font: 500 16px var(--ui); max-width: 300px; text-align: center; }
@keyframes bob { from { transform: translateY(6px) rotate(-4deg); } to { transform: translateY(-10px) rotate(4deg); } }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; color: var(--cream); text-align: center; background: var(--ink); z-index: 9; }

@media (max-width: 720px) {
  .brand span { display: none; } .brand { padding: 4px; }
  .soon { font-size: 14px; padding: 8px 12px; }
  .bottom { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  .tagline { font-size: 24px; }
  .hint { font-size: 14px; white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .soon i, #loader img { animation: none; } }

/* room style picker */
#themes { position: fixed; top: max(16px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px;
  background: var(--cream); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 4px 0 var(--ink); max-width: calc(100vw - 32px); overflow-x: auto; }
#themes .lbl { font: 600 13px/1 var(--ui); color: rgba(29,24,56,.55); padding: 0 6px 0 10px; align-self: center; }
#themes button { font: 600 14px/1 var(--ui); color: var(--ink); background: none; border: 0; border-radius: 999px; padding: 9px 13px; cursor: pointer; white-space: nowrap; }
#themes button:hover { background: rgba(29,24,56,.08); }
#themes button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
@media (max-width: 720px) { #themes { top: auto; bottom: 130px; } }
#fade { position: fixed; inset: 0; background: var(--ink); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
#fade.on { opacity: .85; }