/* Spin & Solve (shared bits come from /water/water.css). The stage picture is 1672 × 941. */
.stv { height: 100vh; overflow: hidden; background: #070b2e; display: grid; place-items: center; }
.sstage {
  position: relative; width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size;
  background: url(/art/spin/stage.jpg) center / 100% 100% no-repeat, #0a1450;
}

/* ---- the puzzle board ---- */
.sboard { position: absolute; inset: 0; z-index: 4;   /* above the wheel, so the pointer never hides a letter */ pointer-events: none; }
.tile {
  position: absolute; width: calc(47 / 1672 * 100%); height: calc(57 / 941 * 100%); border-radius: .25cqw;
  background: linear-gradient(#ffffff, #e9edf3); box-shadow: inset 0 0 0 .1cqw #b9c2cf, 0 0 .5cqw rgba(255,255,255,.35);
  display: grid; place-items: center; font: 400 2.45cqw/1 'Anton', 'Fredoka', sans-serif; color: #0b1030;
  animation: tilein .4s ease-out backwards;
}
.tile.lit { background: linear-gradient(#5fd0ff, #1d7fe6); box-shadow: 0 0 1.4cqw #58c8ff, inset 0 0 0 .14cqw #c9f0ff; color: transparent; animation: none; }
.tile.show { animation: turn .45s ease-out; }
.tile.late { color: #1d4fb8; }
@keyframes tilein { from { transform: rotateY(90deg); opacity: 0; } }
@keyframes turn { 0% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }

.scat {
  position: absolute; left: 50%; top: 7.5%; transform: translateX(-50%); z-index: 4; text-align: center;   /* on the arch above the board, off the wheel */ white-space: nowrap;
  padding: .25cqw 2.6cqw .35cqw; border-radius: .9cqw; background: linear-gradient(#17246e, #0b1446);
  border: .2cqw solid #ffc53d; box-shadow: 0 .5cqw 1.2cqw rgba(0,0,0,.5); font-family: 'Fredoka', sans-serif; line-height: 1;
}
.scat small { display: block; font-size: .8cqw; letter-spacing: .15em; color: #ffd76a; }
.scat b { font-size: 1.8cqw; color: #fff; letter-spacing: .04em; }
.scat.pop { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }

/* letters already called */
.sused { position: absolute; left: 50%; top: 15.2%; transform: translateX(-50%); z-index: 4; display: flex; gap: .2cqw; }
.sused span {
  width: 1.45cqw; height: 1.7cqw; display: grid; place-items: center; border-radius: .25cqw; font: 400 1.05cqw/1 'Anton', sans-serif;
  background: rgba(255,255,255,.92); color: #0b1030; box-shadow: inset 0 0 0 .08cqw #d9a520;
}
.sused span.v { background: #ffe7a3; }
.sused span.gone { opacity: .22; background: #3a4170; color: #9aa3d6; text-decoration: line-through; }
.sused span.hit { background: #3ddc84; color: #04290f; }

/* ---- the wheel ---- */
/* stands on the round gold platform (Kita, 2026-10-02): stood up so the amounts are readable, kept below the letter board, pointer at the bottom */
.swheel { position: absolute; left: 50%; width: 35cqw; aspect-ratio: 1; top: 22.70cqw; transform: translateX(-50%); z-index: 3; }
.swheel .tilt { position: absolute; inset: 0; transform: perspective(110cqw) rotateX(60deg); transform-origin: 50% 50%; }
.swheel .disc { position: absolute; inset: 0; filter: drop-shadow(0 .8cqw 1.4cqw rgba(0,0,0,.6)); will-change: transform; }
.swheel .disc img, .swheel .disc svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the SPIN middle stays still (it is a copy of the wheel picture's centre), so it always reads the right way up */
.swheel .hub { position: absolute; left: 31.58%; top: 31.58%; width: 36.84%; height: 36.84%; pointer-events: none; }
.swheel svg text { font-family: 'Anton', sans-serif; paint-order: stroke; stroke-linejoin: round; }
.swheel .pointer { position: absolute; left: 50%; top: 77.5%; width: 4.2cqw; transform: translate(-50%, 0) rotate(180deg);   /* at the bottom, pointing up */ z-index: 2; filter: drop-shadow(0 .4cqw .5cqw rgba(0,0,0,.6)); }
.swheel.ready .disc { animation: wiggle 2.4s ease-in-out infinite; }
@keyframes wiggle { 50% { filter: drop-shadow(0 0 2cqw rgba(255,214,90,.9)); } }

.scard { position: absolute; left: 65%; top: 40%; height: 46%; z-index: 7; filter: drop-shadow(0 1cqw 1.6cqw rgba(0,0,0,.6)); transform: rotate(6deg); }
.scard.pop { animation: cardpop .55s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes cardpop { from { transform: rotate(6deg) scale(.2); opacity: 0; } }
.smsg { position: absolute; left: 50%; top: 76%; width: 16%; transform: translate(-50%, -50%); z-index: 8; pointer-events: none; filter: drop-shadow(0 .8cqw 1.6cqw rgba(0,0,0,.6)); }
.smsg.pop { animation: msgpop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes msgpop { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } }
.ssaid {
  position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); z-index: 9; padding: .5cqw 1.6cqw; border-radius: 99px; white-space: nowrap;
  background: rgba(5,12,50,.92); border: .2cqw solid #ffc53d; font-weight: 900; font-size: 1.65cqw; color: #fff;
}
.ssaid.pop { animation: pop .4s cubic-bezier(.2, 1.6, .4, 1); }

/* ---- the host ---- */
.shost { position: absolute; right: -1.5%; bottom: -1%; height: 86%; z-index: 5; filter: drop-shadow(0 1cqw 1.6cqw rgba(0,0,0,.55)); transform-origin: 50% 100%; }
.shost.bounce { animation: hostbounce .7s ease-out; }
@keyframes hostbounce { 30% { transform: translateY(-2%) rotate(-1.5deg); } }

/* her video clips (KIE / Grok): the frame has a margin round her, so it's drawn a little bigger to line up with the still */
.shostvid { position: absolute; right: -2.2%; bottom: -4.6%; height: 91%; aspect-ratio: 2 / 3; z-index: 5; pointer-events: none; filter: drop-shadow(0 1cqw 1.6cqw rgba(0,0,0,.55)); }
.shostvid.boxed { border-radius: 1.2cqw; border: .25cqw solid #ffc53d; filter: none; height: 62%; right: 1%; bottom: 12%; }

/* ---- the players (score panels like Kita's UI kit) ---- */
.splayers { position: absolute; left: 1.2%; top: 21%; width: 19.5%; z-index: 6; display: flex; flex-direction: column; gap: .9cqw; }
.sp { border-radius: 1cqw; padding: .25cqw; background: linear-gradient(#ffe08a, #c98a12); box-shadow: 0 .5cqw 1.2cqw rgba(0,0,0,.5); transition: transform .3s; position: relative; }
.sp .hd { display: flex; align-items: center; gap: .6cqw; padding: .35cqw .7cqw; border-radius: .8cqw .8cqw .2cqw .2cqw; font: 700 1.25cqw/1.1 'Fredoka', sans-serif; color: #fff; }
.sp .hd .em { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.2); font-size: 1.6cqw; flex: none; }
.sp .hd .nm { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sp .money { display: flex; justify-content: space-between; align-items: baseline; padding: .3cqw .8cqw .4cqw; margin-top: .2cqw; border-radius: .2cqw .2cqw .8cqw .8cqw; background: linear-gradient(#10194f, #070d33); color: #fff; }
.sp .money b { font: 700 2.1cqw/1 'Fredoka', sans-serif; }
.sp .money small { font-size: .85cqw; color: #ffd76a; font-weight: 800; text-align: right; line-height: 1.1; }
.sp.s0 .hd { background: linear-gradient(#ff4b4b, #b80f1f); }
.sp.s1 .hd { background: linear-gradient(#3b86ff, #1645b8); }
.sp.s2 .hd { background: linear-gradient(#2fd36b, #0d8a3c); }
.sp.s3 .hd { background: linear-gradient(#a956ff, #6420c2); }
.sp.turn { transform: translateX(1.2cqw) scale(1.05); box-shadow: 0 0 2cqw rgba(255,214,90,.95), 0 .5cqw 1.2cqw rgba(0,0,0,.5); }
.sp.turn::after { content: '◀ YOUR TURN'; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: .6cqw; white-space: nowrap; font: 700 1.05cqw 'Fredoka', sans-serif; color: #ffd76a; text-shadow: 0 0 .6cqw #000; }
.sp.off { opacity: .5; }
.sp .bump { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }

.sround { position: absolute; left: 1.2%; top: 14.5%; z-index: 6; padding: .25cqw 1.1cqw; border-radius: 99px; font: 700 1.1cqw 'Fredoka', sans-serif; background: rgba(5,12,50,.85); border: .18cqw solid #ffc53d; color: #ffe08a; }
.sctl { position: absolute; right: 1%; bottom: 9%; z-index: 10; /* above the site’s 🔊 Sound button */ display: flex; flex-direction: column; align-items: flex-end; gap: .4cqw; }
.sctl .btn.small { font-size: .95cqw; padding: .5cqw .9cqw; }

/* ---- lobby + winner ---- */
.slobby { left: 22% !important; right: 22% !important; top: 7% !important; bottom: 7% !important; align-items: center; text-align: center; z-index: 11; }
.slobby .btn { align-self: center; }
.slogo { width: 13cqw; }
.slobbyps { display: flex; flex-wrap: wrap; gap: .5cqw; justify-content: center; min-height: 2.4cqw; }
.slobbyps span { padding: .35cqw 1cqw; border-radius: 99px; background: rgba(255,255,255,.12); font-weight: 800; font-size: 1.1cqw; }
.sbotrow { justify-content: center; gap: 1cqw; }
.swin { left: 26% !important; right: 26% !important; top: 14% !important; bottom: 14% !important; align-items: center; text-align: center; z-index: 11; }
.swin .btn { align-self: center; }
.sstar { width: 8cqw; animation: spinstar 3s ease-in-out infinite; }
@keyframes spinstar { 50% { transform: rotate(12deg) scale(1.08); } }
.swho { display: flex; flex-direction: column; gap: .4cqw; font-size: 1.3cqw; font-weight: 800; }
.stv .row { display: flex; gap: 1cqw; justify-content: center; }

/* ======================================================================================
   the phone
   ====================================================================================== */
.sphone { background: radial-gradient(120% 80% at 50% 0%, #22307e 0%, #0b1240 60%, #070b2e 100%) fixed; min-height: 100vh; }
.sphone main { max-width: 520px; margin: 0 auto; padding: 12px 14px 28px; }
.sphone header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.sphone .me { font-weight: 800; }
.sphone .mymoney { font: 700 1.05rem 'Fredoka', sans-serif; padding: 4px 12px; border-radius: 99px; background: #0b1446; border: 2px solid #ffc53d; color: #ffe08a; }
.sphone .card { text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.sphone h1 { margin: 6px 0 0; font-size: 1.6rem; line-height: 1.15; }
.sphone .catline { font: 700 .85rem 'Fredoka', sans-serif; letter-spacing: .12em; color: #ffd76a; }

/* mini puzzle board */
.mboard { display: grid; grid-template-columns: repeat(13, 1fr); gap: 3px; padding: 8px; border-radius: 12px; background: #0b5a3a; border: 3px solid #ffc53d; box-shadow: inset 0 0 0 2px #2be0c4; }
.mboard i { aspect-ratio: 47 / 57; border-radius: 3px; background: #0d6e47; }
.mboard i.t { background: #fff; color: #0b1030; font: 400 clamp(12px, 4.4vw, 22px)/1 'Anton', sans-serif; display: grid; place-items: center; font-style: normal; }

/* flick-to-spin wheel */
.flick { position: relative; width: min(78vw, 340px); aspect-ratio: 1; margin: 0 auto; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.flick img { width: 100%; height: 100%; pointer-events: none; }
.flick .ptr { position: absolute; left: 50%; top: -4%; width: 13%; height: auto; transform: translateX(-50%); }
.flickhint { font-weight: 800; color: #ffe08a; }

/* letter keyboard made of Kita's tiles */
.keys { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.keys.vowels { grid-template-columns: repeat(5, 1fr); max-width: 360px; margin: 0 auto; width: 100%; }
.keys button { padding: 0; border: 0; background: none; cursor: pointer; aspect-ratio: 96 / 92; transition: transform .1s; }
.keys button img { width: 100%; height: 100%; display: block; }
.keys button:active { transform: scale(.92); }
.keys button:disabled { opacity: .18; filter: grayscale(1); cursor: default; }
.choices { display: flex; flex-direction: column; gap: 10px; }
.choices .btn { font-size: 1.2rem; padding: 16px; }
.choices .btn small { display: block; font-size: .8rem; opacity: .85; }
.solveform { display: flex; flex-direction: column; gap: 10px; }
.solveform input { font: 700 1.2rem 'Fredoka', sans-serif; padding: 14px; border-radius: 12px; border: 3px solid #ffc53d; background: #fff; color: #0b1030; text-transform: uppercase; text-align: center; }
.waitline { font-size: 1.05rem; }
.sphone .stoast { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 20; padding: 10px 16px; border-radius: 14px; font-weight: 800; max-width: 92vw; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.sphone .stoast.good { background: #1f9d55; } .sphone .stoast.bad { background: #c0262f; } .sphone .stoast.info { background: #2a3a8f; }
.sphone .standings { display: flex; flex-direction: column; gap: 6px; }
.sphone .standings div { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.08); font-weight: 800; }
.sphone .standings div.me { outline: 2px solid #ffc53d; }

/* talk + swipe (camera + mic were allowed once when you joined) */
.sphone .mic { border-radius: 20px; padding: 14px 12px; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  font: 900 1.02rem 'Nunito', sans-serif; color: #fff; background: linear-gradient(135deg, #ff4f9a, #c23ad8); cursor: pointer;
  box-shadow: 0 6px 20px rgba(255,60,160,.4); text-align: center; }
.sphone .mic .ico { font-size: 1.7rem; }
.sphone .mic.on { animation: earpulse 1.4s infinite; }
@keyframes earpulse { 50% { box-shadow: 0 0 0 10px rgba(255,79,154,.18), 0 6px 20px rgba(255,60,160,.4); } }
.sphone .mic:disabled { opacity: .75; }
.handnote { text-align: center; font-weight: 800; font-size: .9rem; color: #ffe28a; }
.spincam { position: fixed; left: 10px; bottom: max(10px, env(safe-area-inset-bottom)); width: 22vw; max-width: 110px; aspect-ratio: 3 / 4; object-fit: cover;
  transform: scaleX(-1); border-radius: 12px; border: 3px solid #ffc53d; z-index: 40; background: #000; }
/* a big lobby (up to 50 names) */
.slobbyps.many { gap: .25cqw; max-height: 9.5cqw; overflow: hidden; }
.slobbyps.many span { font-size: .72cqw; padding: .15cqw .5cqw; }