/* Squishy's Party - TV / laptop screen. Everything scales with --u (1% of the width, or of the height on ultra-wide screens). */
:root {
  --u: min(1vw, 1.78vh);
  --brown: #4a2e22; --cream: #fff4dc; --gold: #ffd84a; --wood: #b87a48;
  --ink: #1a1430; --plum: #2b2145; --sky: #78c4f6;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Trebuchet MS", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--cream); font-family: var(--font); font-weight: 800; -webkit-user-select: none; user-select: none; }
body { position: fixed; inset: 0; }
#bg { position: fixed; inset: 0; background:
    radial-gradient(circle at 15% 20%, rgba(255,216,74,.16), transparent 32%),
    radial-gradient(circle at 85% 80%, rgba(120,196,246,.16), transparent 34%),
    linear-gradient(160deg, #3a2c68 0%, #241a44 55%, #1a1430 100%); }
#bg::after { content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(255,244,220,.18) 1.5px, transparent 2px); background-size: calc(var(--u) * 5) calc(var(--u) * 5); animation: drift 30s linear infinite; }
@keyframes drift { to { background-position: calc(var(--u) * 5) calc(var(--u) * -5); } }
#c { position: fixed; left: 0; top: 0; display: block; outline: none; visibility: hidden; }
body[data-phase="intro"] #c, body[data-phase="count"] #c, body[data-phase="play"] #c { visibility: visible; }
#safe { position: fixed; visibility: hidden; pointer-events: none; }

#ui { position: fixed; inset: 0; pointer-events: none; }
.scene { position: absolute; inset: 0; display: none; padding: calc(var(--u) * 3); }
.scene.on { display: flex; }
.scene * { pointer-events: none; }
.soft { opacity: .75; }
.logo { height: calc(var(--u) * 14); image-rendering: pixelated; filter: drop-shadow(0 calc(var(--u) * .6) 0 rgba(0,0,0,.35)); }

/* ---- boot */
#s-boot { flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 2); }
.boot-title { font-size: calc(var(--u) * 8); color: var(--gold); text-shadow: 0 calc(var(--u) * .5) 0 var(--brown); letter-spacing: .04em; }
.bar { width: calc(var(--u) * 30); height: calc(var(--u) * 1.4); border-radius: 99px; background: rgba(255,255,255,.15); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .2s; }

/* ---- cards and chips */
.card { background: var(--cream); color: var(--brown); border: calc(var(--u) * .5) solid var(--brown); border-radius: calc(var(--u) * 2.2); box-shadow: 0 calc(var(--u) * .9) 0 rgba(0,0,0,.28); }
.pill { display: inline-flex; align-items: center; gap: calc(var(--u) * .8); padding: calc(var(--u) * .5) calc(var(--u) * 1.4); border-radius: 99px; background: var(--pc, #999); color: #fff; border: calc(var(--u) * .3) solid rgba(0,0,0,.35); text-shadow: 0 calc(var(--u) * .2) 0 rgba(0,0,0,.4); }
.av { image-rendering: pixelated; display: block; }
#chips { position: fixed; right: calc(var(--u) * 2); top: calc(var(--u) * 1.6); display: flex; gap: calc(var(--u) * 1); align-items: center; z-index: 5; }
.chip { font: 800 calc(var(--u) * 1.3) var(--font); padding: calc(var(--u) * .6) calc(var(--u) * 1.4); border-radius: 99px; border: calc(var(--u) * .25) solid rgba(255,255,255,.35); background: rgba(20,12,40,.72); color: var(--cream); cursor: pointer; }
.chip.room { cursor: default; letter-spacing: .15em; color: var(--gold); }
.chip.net { background: #b03a3a; cursor: default; }
#toast { position: fixed; left: 50%; bottom: calc(var(--u) * 3); transform: translate(-50%, 200%); background: rgba(20,12,40,.9); color: var(--cream); padding: calc(var(--u) * 1) calc(var(--u) * 2.4); border-radius: 99px; font-size: calc(var(--u) * 1.8); transition: transform .35s cubic-bezier(.2,1.4,.4,1); z-index: 6; opacity: 0; }
#toast.on { transform: translate(-50%, 0); opacity: 1; }

/* ---- lobby (the start screen) */
#s-lobby { gap: calc(var(--u) * 3); align-items: stretch; padding: calc(var(--u) * 2.2) calc(var(--u) * 3); }
.lob-left { width: 33%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1); min-width: 0; }
.lob-left .logo { height: auto; max-height: calc(var(--u) * 8.5); max-width: 100%; object-fit: contain; }
.party-word { font-size: calc(var(--u) * 4.4); line-height: .9; color: var(--gold); letter-spacing: .28em; margin: 0 -.28em calc(var(--u) * .6) 0; text-shadow: 0 calc(var(--u) * .5) 0 var(--brown), 0 0 calc(var(--u) * 3) rgba(255,216,74,.35); }
.join-card { width: 100%; flex: 1; min-height: 0; padding: calc(var(--u) * 1.6) calc(var(--u) * 2); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: calc(var(--u) * .8); }
.join-card .jk { font-size: calc(var(--u) * 1.6); letter-spacing: .22em; color: var(--wood); }
#qr { width: calc(var(--u) * 13); height: calc(var(--u) * 13); background: #fff; padding: calc(var(--u) * .9); border-radius: calc(var(--u) * 1.2); border: calc(var(--u) * .3) solid var(--brown); }
#qr svg { width: 100%; height: 100%; display: block; }
.join-card .or { font-size: calc(var(--u) * 1.4); opacity: .85; line-height: 1.35; }
.join-card .or b { word-break: break-all; }
.code { font-size: calc(var(--u) * 6); letter-spacing: .12em; line-height: 1; color: var(--brown); margin-right: -.12em; background: #f3dfb8; border-radius: calc(var(--u) * 1.4); padding: calc(var(--u) * .5) calc(var(--u) * 2); width: 100%; }
.lob-right { flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); min-width: 0; }
.lob-head { display: flex; align-items: baseline; justify-content: space-between; padding-top: calc(var(--u) * 2.6); }
.lob-head h1 { margin: 0; font-size: calc(var(--u) * 3.8); color: var(--gold); text-shadow: 0 calc(var(--u) * .5) 0 var(--brown); }
.lob-head .count { font-size: calc(var(--u) * 2.4); opacity: .8; }
.slots { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: calc(var(--u) * 1.4); min-height: 0; }
.slot { container-type: inline-size; position: relative; border-radius: calc(var(--u) * 2); border: calc(var(--u) * .35) dashed rgba(255,244,220,.25); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .5); color: rgba(255,244,220,.4); min-height: 0; padding: calc(var(--u) * 1.4) 0 calc(var(--u) * 1.3); }
.slot .q { font-size: calc(var(--u) * 4.4); opacity: .6; } .slot .w { font-size: calc(var(--u) * 1.6); }
.slot.full { border-style: solid; border-color: rgba(0,0,0,.35); background: linear-gradient(180deg, var(--pc), var(--pd)); color: #fff; animation: pop .5s cubic-bezier(.2,1.6,.4,1); box-shadow: 0 calc(var(--u) * .7) 0 rgba(0,0,0,.25); }
.slot .av { width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4); }
.slot .nm { font-size: min(calc(var(--u) * 2.4), 12.5cqw); max-width: 96%; white-space: nowrap; text-shadow: 0 calc(var(--u) * .25) 0 rgba(0,0,0,.4); }
.slot .sub { font-size: min(calc(var(--u) * 1.3), 8cqw); opacity: .9; white-space: nowrap; max-width: 96%; }
.slot .gmtag { position: absolute; top: calc(var(--u) * -1.1); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: min(calc(var(--u) * 1.2), 8cqw); background: var(--gold); color: var(--brown); padding: calc(var(--u) * .25) calc(var(--u) * 1); border-radius: 99px; border: calc(var(--u) * .25) solid var(--brown); letter-spacing: .06em; }
.slot.off { filter: grayscale(.85) brightness(.75); }
@keyframes pop { 0% { transform: scale(.4) rotate(-6deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.gm-bar { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); background: rgba(20,12,40,.55); border: calc(var(--u) * .25) solid rgba(255,244,220,.22); border-radius: calc(var(--u) * 2); padding: calc(var(--u) * 1.1) calc(var(--u) * 1.8); }
.gm-who { font-size: calc(var(--u) * 2); line-height: 1.25; } .gm-who b { color: var(--gold); } .gm-who small { display: block; font-size: calc(var(--u) * 1.4); opacity: .8; font-weight: 700; }
.gm-rounds { display: flex; gap: calc(var(--u) * .9); }
.rc { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: calc(var(--u) * 8); padding: calc(var(--u) * .6) calc(var(--u) * 1); border-radius: calc(var(--u) * 1.4); background: rgba(255,255,255,.1); border: calc(var(--u) * .25) solid rgba(255,255,255,.2); }
.rc b { font-size: calc(var(--u) * 3.4); line-height: 1; } .rc span { font-size: calc(var(--u) * 1.15); opacity: .8; white-space: nowrap; }
.rc.sel { background: var(--gold); color: var(--brown); border-color: var(--brown); transform: translateY(calc(var(--u) * -.4)); box-shadow: 0 calc(var(--u) * .5) 0 rgba(0,0,0,.3); } .rc.sel span { opacity: 1; }
.lineup { display: flex; flex-direction: column; gap: calc(var(--u) * .6); }
.lu-t { font-size: calc(var(--u) * 1.25); letter-spacing: .1em; opacity: .7; }
.lu-r { display: flex; gap: calc(var(--u) * .5); flex-wrap: wrap; }
.lu { flex: 0 1 auto; min-width: 0; text-align: center; white-space: nowrap; font-size: calc(var(--u) * 1); padding: calc(var(--u) * .3) calc(var(--u) * .8); border-radius: calc(var(--u) * .9); background: color-mix(in srgb, var(--gc) 85%, #000 0%); color: #fff; text-shadow: 0 calc(var(--u) * .18) 0 rgba(0,0,0,.45); border-bottom: calc(var(--u) * .3) solid rgba(0,0,0,.3); }
.kbd { display: inline-block; padding: 0 calc(var(--u) * .8); border-radius: calc(var(--u) * .6); background: rgba(255,255,255,.18); border: calc(var(--u) * .2) solid rgba(255,255,255,.35); }
.bounce { animation: bob 1.1s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(calc(var(--u) * -.8)); } }

/* ---- intro card (over the frozen game) */
#s-intro { align-items: center; justify-content: center; background: rgba(20,12,40,.62); }
.intro-card { width: 80%; max-height: 96%; border-top-width: calc(var(--u) * 1.4); border-top-color: var(--gc, var(--brown)); padding: calc(var(--u) * 2) calc(var(--u) * 3); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.1); text-align: center; animation: pop .5s cubic-bezier(.2,1.4,.4,1); }
.intro-card .kick { font-size: calc(var(--u) * 2); color: var(--wood); letter-spacing: .12em; }
.intro-card h1 { margin: 0; font-size: calc(var(--u) * 6.4); line-height: 1; white-space: nowrap; }
.intro-card .tag { font-size: calc(var(--u) * 2.3); color: #7a4a30; }
.how { display: flex; gap: calc(var(--u) * 1.6); width: 100%; margin-top: calc(var(--u) * 1); }
.how > div { flex: 1; background: #f3dfb8; border-radius: calc(var(--u) * 1.4); padding: calc(var(--u) * 1) calc(var(--u) * 1.2); font-size: calc(var(--u) * 1.5); line-height: 1.3; }
.how b { display: block; font-size: calc(var(--u) * 2.2); color: var(--brown); margin-bottom: calc(var(--u) * .3); }
.intro-row { display: flex; gap: calc(var(--u) * 1.2); flex-wrap: wrap; justify-content: center; margin-top: calc(var(--u) * .6); }
.intro-row .av { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); }
.mult { background: var(--gold); border-radius: 99px; padding: calc(var(--u) * .4) calc(var(--u) * 1.6); font-size: calc(var(--u) * 2); }

/* ---- 3-2-1 */
#s-count { align-items: center; justify-content: center; }
#s-count .big { font-size: calc(var(--u) * 28); color: #fff; text-shadow: 0 calc(var(--u) * 1) 0 var(--brown), 0 0 calc(var(--u) * 4) rgba(0,0,0,.5); animation: zoom .9s ease-out both; }
@keyframes zoom { 0% { transform: scale(2.2); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(.8); opacity: .9; } }

/* ---- round results */
#s-results { flex-direction: column; gap: calc(var(--u) * 1.6); }
.res-head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 2); }
.res-head h1 { margin: 0; font-size: calc(var(--u) * 5); color: var(--gold); text-shadow: 0 calc(var(--u) * .5) 0 var(--brown); }
.res-head .sub { font-size: calc(var(--u) * 2); opacity: .9; }
.rows { flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * .9); min-height: 0; }
.row { flex: 1; min-height: 0; display: grid; grid-template-columns: calc(var(--u) * 6) calc(var(--u) * 7) 1fr calc(var(--u) * 11) calc(var(--u) * 12) calc(var(--u) * 6); align-items: center; gap: calc(var(--u) * 1.4); padding: 0 calc(var(--u) * 2) 0 calc(var(--u) * 1); border-radius: calc(var(--u) * 1.6); background: linear-gradient(90deg, var(--pc), var(--pd)); border: calc(var(--u) * .3) solid rgba(0,0,0,.35); color: #fff; text-shadow: 0 calc(var(--u) * .2) 0 rgba(0,0,0,.4); animation: slidein .6s cubic-bezier(.2,1.2,.4,1) both; animation-delay: var(--d, 0s); }
@keyframes slidein { from { transform: translateX(-8%); opacity: 0; } }
.row .plc { font-size: calc(var(--u) * 3.6); text-align: center; }
.row .av { width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6); justify-self: center; }
.row .who { min-width: 0; display: flex; flex-direction: column; }
.row .who b { font-size: calc(var(--u) * 2.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .who span { font-size: calc(var(--u) * 1.5); opacity: .9; font-weight: 700; }
.row .add { white-space: nowrap; font-size: calc(var(--u) * 3); color: var(--gold); text-align: right; }
.row .tot { font-size: calc(var(--u) * 3.4); text-align: right; }
.row .tot small { display: block; font-size: calc(var(--u) * 1.2); opacity: .8; font-weight: 700; }
.row .mv { font-size: calc(var(--u) * 2.2); text-align: center; }
.res-foot { display: flex; align-items: center; justify-content: space-between; font-size: calc(var(--u) * 1.9); }
.next-ring { display: inline-flex; align-items: center; gap: calc(var(--u) * 1); }

/* ---- final */
#s-final { flex-direction: column; gap: calc(var(--u) * 1.4); }
.fin-head { display: flex; align-items: center; justify-content: space-between; }
.fin-head h1 { margin: 0; font-size: calc(var(--u) * 5.4); color: var(--gold); text-shadow: 0 calc(var(--u) * .5) 0 var(--brown); }
.dots { display: flex; gap: calc(var(--u) * .8); }
.dots i { width: calc(var(--u) * 1.3); height: calc(var(--u) * 1.3); border-radius: 50%; background: rgba(255,255,255,.3); }
.dots i.on { background: var(--gold); }
.page { flex: 1; min-height: 0; display: none; }
.page.on { display: flex; }
/* podium */
#pg-podium { padding-top: calc(var(--u) * 5); padding-bottom: calc(var(--u) * 8) !important; align-items: flex-end; justify-content: center; gap: calc(var(--u) * 1.4); }
.pod { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: calc(var(--u) * 13.5); opacity: 0; transform: translateY(calc(var(--u) * 6)) scale(.9); transition: all .7s cubic-bezier(.2,1.4,.4,1); }
.pod.on { opacity: 1; transform: none; }
.pod .av { width: calc(var(--u) * 6.5); height: calc(var(--u) * 6.5); }
.pod.first .av { width: calc(var(--u) * 9.5); height: calc(var(--u) * 9.5); }
.pod .nm { font-size: calc(var(--u) * 2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: calc(var(--u) * .4) 0; }
.pod .sc { font-size: calc(var(--u) * 1.6); opacity: .9; margin-bottom: calc(var(--u) * .6); }
.pod .blk { width: 100%; border-radius: calc(var(--u) * 1.2) calc(var(--u) * 1.2) 0 0; background: linear-gradient(180deg, var(--pc), var(--pd)); border: calc(var(--u) * .3) solid rgba(0,0,0,.35); border-bottom: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: calc(var(--u) * .8); font-size: calc(var(--u) * 4); text-shadow: 0 calc(var(--u) * .3) 0 rgba(0,0,0,.4); }
.pod .cr { font-size: calc(var(--u) * 4); height: calc(var(--u) * 4.4); animation: bob 1s ease-in-out infinite; }
.champ { position: absolute; left: 0; right: 0; top: 0; text-align: center; font-size: calc(var(--u) * 3); color: var(--gold); text-shadow: 0 calc(var(--u) * .4) 0 var(--brown); opacity: 0; transition: opacity .5s; pointer-events: none; }
.champ.on { opacity: 1; }
/* awards */
#pg-awards.on { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: calc(var(--u) * 1.6); }
.award { padding: calc(var(--u) * 1.4) calc(var(--u) * 1.8); display: flex; flex-direction: column; gap: calc(var(--u) * .5); opacity: 0; transform: translateY(calc(var(--u) * 3)) rotate(-1.5deg); transition: all .55s cubic-bezier(.2,1.5,.4,1); min-height: 0; }
.award.on { opacity: 1; transform: none; }
.award .em { font-size: calc(var(--u) * 4.2); line-height: 1; }
.award .tt { font-size: calc(var(--u) * 2.5); line-height: 1.05; }
.award .wh { display: flex; align-items: center; gap: calc(var(--u) * 1); margin-top: auto; }
.award .wh .av { width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); }
.award .wh b { font-size: calc(var(--u) * 2.3); }
.award .ln { font-size: calc(var(--u) * 1.5); color: #7a4a30; font-weight: 700; }
/* story page */
#pg-story { gap: calc(var(--u) * 2); }
.story-l { flex: 1.15; padding: calc(var(--u) * 1.4); display: flex; flex-direction: column; min-width: 0; }
.story-r { flex: 1; padding: calc(var(--u) * 1.4); display: flex; flex-direction: column; min-width: 0; }
.story-l h3, .story-r h3 { margin: 0 0 calc(var(--u) * .6); font-size: calc(var(--u) * 2); }
.story-l svg { flex: 1; min-height: 0; width: 100%; }
.grid { display: grid; gap: calc(var(--u) * .5); align-items: center; font-size: calc(var(--u) * 1.5); flex: 1; min-height: 0; }
.grid .cell { text-align: center; }
.grid .nmc b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid .nmc { display: flex; align-items: center; gap: calc(var(--u) * .6); overflow: hidden; }
.grid .nmc .av { width: calc(var(--u) * 3); height: calc(var(--u) * 3); flex: none; }
.grid .hd { color: var(--wood); font-size: calc(var(--u) * 1.3); }
.foot { display: flex; justify-content: space-between; font-size: calc(var(--u) * 1.8); opacity: .9; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 4; }

body[data-phase="play"] #chip-room, body[data-phase="count"] #chip-room { display: none; }

/* connection status pill in the lobby */
.conn { align-self: flex-start; display: inline-flex; align-items: center; gap: calc(var(--u) * .8); padding: calc(var(--u) * .5) calc(var(--u) * 1.6); border-radius: 99px; font-size: calc(var(--u) * 1.6); font-weight: 800; border: calc(var(--u) * .25) solid rgba(255,255,255,.3); }
.conn i { width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2); border-radius: 50%; background: currentColor; }
.conn.ok { background: #2f9e44; color: #fff; border-color: #a6e879; } .conn.wait { background: #8a6d12; color: #fff; border-color: #ffd84a; } .conn.wait i { animation: bob .8s infinite; }

.lu.off { opacity: .28; filter: grayscale(.8); text-decoration: line-through; }
.rc.bots { opacity: .85; }