:root{ --ink:#2a1f1a; --paper:#f4ecd8; --paper2:#e9dcc0; --desk:#2f4f4f; --desk2:#223a3a; --verm:#c8553d; --ochre:#d9a441; --teal:#2f6f6b; --sky:#8fb8c9; --sap:#6a8d4e; --rose:#e8a7b8;
  --hand:'Patrick Hand','Comic Sans MS',cursive; --title:'Fredericka the Great',Georgia,serif; --type:'Courier Prime','Courier New',monospace; --topH:46px; --crewH:118px; color-scheme:light; }
@media (max-height:560px){ :root{ --topH:32px; --crewH:78px; } }
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; overflow:hidden; color:var(--ink); font:400 17px/1.3 var(--hand); overscroll-behavior:none; }
body{ background:var(--desk2) radial-gradient(ellipse at 50% 30%, var(--desk), var(--desk2) 75%); }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0; touch-action:manipulation; }
button:disabled{ opacity:.4; cursor:default; }
[hidden]{ display:none !important; }
/* the hand-drawn button: gouache fill, an ink line that boils */
.btn{ position:relative; display:inline-block; padding:8px 16px; font:400 1.05em var(--hand); background:var(--paper); border-radius:255px 15px 225px 15px/15px 225px 15px 255px; }
.btn::after{ content:''; position:absolute; inset:0; border:2.5px solid var(--ink); border-radius:inherit; filter:url(#boil); pointer-events:none; }
.btn:active{ transform:translateY(2px) scale(.98); }
.cta{ display:block; width:100%; margin-top:10px; padding:10px; background:var(--verm); color:#fff8ec; font:400 1.35em var(--title); letter-spacing:.04em; box-shadow:0 4px 0 #7a2f22; }
#side .cta{ position:sticky; bottom:0; z-index:3; }
.cta.alt{ background:var(--teal); box-shadow:0 4px 0 #1d4644; } .cta.dim{ background:var(--paper2); color:var(--ink); box-shadow:none; }
.chip{ padding:3px 12px; } .chip.on{ background:var(--ochre); }
/* ======================= THE HOST: the camera stand ======================= */
#host{ position:fixed; inset:0; display:grid; grid-template-rows:var(--topH) minmax(0,1fr) var(--crewH); }
#top{ display:flex; align-items:center; gap:12px; padding:0 12px; background:linear-gradient(#1b2d2d,#203838); color:var(--paper); box-shadow:0 2px 0 #0004; min-width:0; }
.pegs{ display:flex; gap:6px; } .pegs i{ display:block; width:22px; height:9px; border-radius:5px; background:#c9c2ae; box-shadow:inset 0 -2px 0 #8d8672; } .pegs i:nth-child(2){ width:10px; border-radius:50%; height:10px; }
.logo{ font:400 calc(var(--topH) * .62) var(--title); color:var(--ochre); white-space:nowrap; }
.tagline{ font-size:13px; color:#c9d6cf; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; }
#roomTag{ font:700 calc(var(--topH) * .42) var(--type); color:var(--paper); letter-spacing:.12em; white-space:nowrap; }
#top .btn{ font-size:14px; padding:3px 10px; color:var(--ink); }
#top a{ color:#c9d6cf; font-size:14px; text-decoration:none; white-space:nowrap; }
@media (max-height:560px){ .tagline{ display:none; } .pegs{ display:none; } }
#stage{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px; padding:6px 8px; min-height:0; }
#stand{ align-self:center; width:min(64vw, calc((100dvh - var(--topH) - var(--crewH) - 12px - 12px) * 16 / 9)); padding:6px; background:#141a1a; border-radius:10px; box-shadow:0 0 0 2px #0008, 0 16px 40px #0009, inset 0 0 0 1px #ffffff14; }
#screen{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:4px; overflow:hidden; container-type:size; }
#vids video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; opacity:0; }
#vids video.on{ opacity:1; }
#slate, #paper{ position:absolute; inset:0; }
#paper{ background:var(--desk) radial-gradient(ellipse at 50% 40%, #3b6262, var(--desk2)); display:grid; place-items:center; padding:3cqh 3cqw; }
#cap{ position:absolute; left:0; right:0; bottom:0; padding:5cqh 6% 2.5cqh; text-align:center; font:400 6.2cqh/1.2 var(--hand); color:#fff; text-shadow:0 2px 0 #000, 0 0 10px #000; background:linear-gradient(transparent,#000a); pointer-events:none; }
#cap:empty{ display:none; }
#bug{ position:absolute; left:2cqw; top:3cqh; right:2cqw; display:flex; gap:1.4cqw; align-items:flex-start; pointer-events:none; font:400 4.2cqh/1.05 var(--hand); }
#bug:empty{ display:none; }
#bug > span{ background:var(--paper); color:var(--ink); padding:.5cqh 1.2cqw; border-radius:3px; box-shadow:0 2px 0 #0006; transform:rotate(-1deg); }
#bug .onair{ background:var(--verm); color:#fff; font-family:var(--title); animation:blink 1.1s steps(2) infinite; }
#bug .sp{ flex:1; background:none; box-shadow:none; } #bug .left{ font:700 6cqh var(--type); transform:rotate(1.5deg); }
@keyframes blink{ 50%{ opacity:.55; } }
#log{ position:absolute; right:2cqw; bottom:14cqh; display:flex; flex-direction:column; align-items:flex-end; gap:.8cqh; pointer-events:none; font:400 3.9cqh var(--hand); }
#log div{ background:var(--paper); color:var(--ink); padding:.3cqh 1.2cqw; border-radius:2px; box-shadow:0 2px 0 #0006; animation:slip 4s forwards; }
#log div:nth-child(2n){ transform:rotate(1deg); }
@keyframes slip{ 0%{ opacity:0; transform:translateX(8cqw) rotate(4deg); } 8%{ opacity:1; transform:none; } 80%{ opacity:1; } 100%{ opacity:0; } }
.mini{ display:inline-block; width:1.15em; height:1.35em; vertical-align:-.3em; } .mini svg{ width:100%; height:100%; }
/* the multiplane card: painted planes that truck in at their own speeds, then drift */
.card{ position:absolute; inset:0; overflow:hidden; }
.card .l{ position:absolute; inset:0; animation:truck 1.25s cubic-bezier(.18,.75,.22,1) both; }
.card .dr{ position:absolute; inset:0 -14%; animation:drift 16s ease-in-out infinite alternate; }
.card .dr svg{ position:absolute; inset:0; width:100%; height:100%; }
@keyframes truck{ from{ transform:translateX(calc(var(--d) * 70%)); } to{ transform:none; } }
@keyframes drift{ from{ transform:translateX(calc(var(--d) * 7%)); } to{ transform:translateX(calc(var(--d) * -7%)); } }
.card .txt{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:0 8cqw; }
.big{ font:400 13cqh/1.02 var(--title); color:var(--paper); text-shadow:0 .5cqh 0 #0006; }
.big small{ display:block; margin-top:2.5cqh; font:400 5.4cqh/1.2 var(--hand); color:var(--paper); text-shadow:0 2px 0 #0007; }
.card.light .big, .card.light .big small, .card.dawn .big, .card.gold .big, .card.dawn .big small, .card.gold .big small{ color:var(--ink); text-shadow:0 .4cqh 0 #fff6; }
.card .l.words{ z-index:2; }
.big .who{ display:inline-flex; align-items:center; gap:1.5cqw; } .big .who .mini{ width:12cqh; height:14cqh; vertical-align:middle; }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:2cqw; margin-top:4cqh; font:400 4.4cqh/1.15 var(--hand); color:var(--ink); }
.steps div{ background:var(--paper); padding:1.5cqh 1cqw; border-radius:3px; box-shadow:0 .6cqh 0 #0005; transform:rotate(-1.5deg); }
.steps div:nth-child(2n){ transform:rotate(1.2deg); } .steps b{ display:block; font:400 7cqh var(--title); color:var(--verm); }
/* the clapboard: chalk on slate; the sticks anticipate, then snap */
.clap{ width:62cqw; font:400 5.4cqh/1.15 var(--hand); color:#f3f0e6; text-align:left; filter:drop-shadow(0 1.2cqh 0 #0006); }
.clap .sticks{ height:9cqh; background:repeating-linear-gradient(-50deg,#f3f0e6 0 4cqw,#1f1f1f 4cqw 8cqw); border:.5cqh solid var(--ink); border-radius:1cqh 1cqh 0 0; transform-origin:0 100%; transform:rotate(-16deg); }
.clap.shut .sticks{ animation:snap .42s both; }
@keyframes snap{ 0%{ transform:rotate(-16deg); } 55%{ transform:rotate(-27deg); } 82%{ transform:rotate(2.5deg); } 100%{ transform:rotate(0); } }
.clap .body{ background:#26302c; border:.5cqh solid var(--ink); border-top:0; padding:2cqh 2.4cqw; display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.2cqh 2cqw; border-radius:0 0 1cqh 1cqh; }
.clap small{ display:block; font:700 2.6cqh var(--type); letter-spacing:.2em; color:#a9b7ae; } .clap .w{ grid-column:1/-1; } .clap .n{ font:400 7.5cqh var(--title); }
/* paper on the stand */
.sheet{ background:var(--paper); color:var(--ink); font:400 13px/1.3 var(--type); padding:12px 14px; border-radius:2px; box-shadow:0 6px 0 #0004, 0 12px 26px #0005; position:relative; }
.sheet::before{ content:''; position:absolute; top:6px; left:50%; width:44px; height:8px; margin-left:-22px; border-radius:5px; background:#00000022; box-shadow:-30px 1px 0 -1px #00000022, 30px 1px 0 -1px #00000022; }
#paper .sheet{ width:100%; max-height:100%; overflow:hidden; font-size:3.6cqh; padding:3.4cqh 3cqw 2.6cqh; animation:cel .8s cubic-bezier(.2,.8,.3,1.1) both; }
@keyframes cel{ from{ transform:translateY(60%) rotate(5deg); opacity:.2; } to{ transform:rotate(-.6deg); opacity:1; } }
.sheet h3{ margin:0; font:700 1.5em var(--type); letter-spacing:.06em; display:flex; justify-content:space-between; border-bottom:2px solid var(--ink); padding-bottom:2px; }
.sheet .g{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px 14px; margin-top:4px; }
.sheet .k{ font-weight:700; letter-spacing:.12em; font-size:.78em; margin-top:5px; color:#7a6a58; }
.sheet .call{ margin-top:6px; padding:3px 8px; border:2px solid var(--ink); font-weight:700; letter-spacing:.08em; text-align:center; font-size:1.12em; }
.sheet .note{ margin-top:4px; color:#b3261e; font-weight:700; } .sheet .no{ text-decoration:line-through; color:#b3261e; } .sheet .sm{ font-size:.85em; color:#6d6052; }
.ledger{ width:100%; max-height:100%; overflow:hidden; background:var(--paper); color:var(--ink); font:400 3.6cqh/1.35 var(--type); padding:3cqh 3cqw; box-shadow:0 6px 0 #0004; animation:cel .8s cubic-bezier(.2,.8,.3,1.1) both; }
.ledger div{ border-bottom:1px dashed #b9ab92; padding:.6cqh 0; } .ledger .hd{ border:0; font-weight:700; letter-spacing:.14em; color:var(--verm); }
/* the exposure sheet */
#side{ min-height:0; overflow:auto; background:var(--paper) repeating-linear-gradient(transparent 0 23px, #c9b99a66 23px 24px); border-radius:4px; padding:10px 12px 12px 30px; box-shadow:0 10px 26px #0007; position:relative; scrollbar-width:thin; }
#side::before{ content:''; position:absolute; top:0; bottom:0; left:20px; width:2px; background:#d3746288; }
.ph{ font:700 13px var(--type); letter-spacing:.16em; text-transform:uppercase; margin:0 0 6px; display:flex; justify-content:space-between; align-items:baseline; gap:8px; border-bottom:2px solid var(--ink); padding-bottom:2px; }
.ph small{ font:400 14px var(--hand); letter-spacing:0; text-transform:none; color:#7a6a58; }
.guide{ width:100%; border-collapse:collapse; font:400 16px/1 var(--hand); }
.guide td{ border-bottom:1px solid #c9b99a; padding:2px 3px; vertical-align:middle; }
.guide .no{ font:700 13px var(--type); color:var(--teal); width:24px; } .guide .nm{ max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.guide .th{ width:44px; } .guide .th i{ display:block; width:42px; aspect-ratio:4/3; background:#000 center/cover; border:1.5px solid var(--ink); border-radius:2px; }
.guide .th i.q{ display:grid; place-items:center; background:var(--paper2); font-style:normal; color:#7a6a58; }
.guide .vis{ color:var(--verm); font-size:12px; letter-spacing:-.1em; width:30px; }
.guide tr.cur td{ background:#c8553d26; } .guide tr.cur .nm{ color:var(--verm); }
.guide tr.off td{ color:#8b7d6a; text-decoration:line-through; } .guide tr.off .rs{ text-decoration:none; color:var(--verm); font-size:13px; }
.guide .hd td{ font:700 10px var(--type); letter-spacing:.12em; color:#7a6a58; border-bottom:2px solid var(--ink); }
.guide .sec td{ font:700 11px var(--type); letter-spacing:.16em; padding-top:8px; color:var(--teal); }
.guide .mine td{ background:#2f6f6b14; }
@media (max-height:560px){ .tk .strip i{ max-width:30px; } .tk .n{ font-size:20px; flex-basis:22px; } .tk{ padding:2px 4px; } .lob .url{ display:none; } .code{ font-size:30px; } .guide{ font-size:14px; } .guide .th{ width:34px; } .guide .th i{ width:32px; } .guide .nowc{ display:none; } #side{ padding:6px 8px 8px 26px; } }
.hint{ color:#7a6a58; font-size:14px; text-align:center; margin-top:5px; }
.lob{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:center; }
.qr{ background:#fff; padding:6px; border:2px solid var(--ink); border-radius:4px; width:min(30dvh,190px); } .qr svg{ display:block; width:100%; height:auto; }
.code{ font:700 clamp(26px,7dvh,44px) var(--type); letter-spacing:.14em; color:var(--verm); line-height:1; }
.url{ font:400 13px var(--type); word-break:break-all; color:#5c4f43; }
.row{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
input[type=text]{ font:400 18px var(--hand); padding:6px 10px; border:2px solid var(--ink); border-radius:4px; background:#fffaf0; color:var(--ink); min-width:0; flex:1; }
.takes{ display:grid; gap:5px; } .tk{ display:flex; align-items:center; gap:6px; padding:4px; background:#fffaf0aa; border:2px solid transparent; border-radius:4px; }
.tk .n{ flex:0 0 30px; font:400 26px var(--title); color:var(--verm); text-align:center; } .tk .strip{ flex:1; display:flex; gap:3px; min-width:0; } .tk .strip i{ flex:1; max-width:48px; aspect-ratio:4/3; background:#000 center/cover; border:1.5px solid var(--ink); border-radius:2px; }
.tk .by{ flex:0 0 auto; text-align:right; font-size:14px; } .tk .vs .mini{ width:1em; height:1.2em; } .tk.win{ border-color:var(--ochre); background:#f7e3a8; } .tk.now{ border-color:var(--verm); }
.vrow{ display:flex; gap:5px; align-items:center; margin-top:6px; } .vrow span{ min-width:84px; }
.rk{ display:flex; align-items:center; gap:8px; padding:2px 0; font-size:18px; } .rk .mini{ width:28px; height:32px; } .rk b{ margin-left:auto; font:400 22px var(--title); color:var(--verm); }
.stack{ display:grid; gap:10px; margin-top:6px; } .stack .sheet{ transform:rotate(-.5deg); font-size:12px; } .stack .sheet:nth-child(2n){ transform:rotate(.6deg); }
/* the local remote, on the exposure sheet */
.lrem{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:4px 0 8px; } .lrem .btn{ padding:6px 2px; font-size:16px; text-align:center; }
.lrem .rec{ background:var(--verm); color:#fff; } .lrem .on{ background:var(--ochre); }
/* the crew on the ground plane */
#crew{ position:relative; overflow:hidden; background:linear-gradient(#9bb7a4, #7c9a7a 55%, #5d7a52 56%, #4d6a44); }
#crew .pl{ position:absolute; inset:0; pointer-events:none; } #crew .pl svg{ position:absolute; left:-10%; width:120%; height:100%; }
#toons{ position:absolute; left:0; right:0; bottom:4px; display:flex; justify-content:center; align-items:flex-end; gap:clamp(4px,1.4vw,18px); padding:0 10px; }
.tw{ position:relative; width:var(--tw,78px); display:flex; flex-direction:column; align-items:center; }
.tw .jump{ transform-origin:50% 100%; } .tw .rig{ transform-origin:50% 100%; animation:breathe 2.8s ease-in-out infinite; }
.tw .rig svg{ display:block; height:calc(var(--crewH) - 34px); width:auto; overflow:visible; }
.tw .tag{ margin-top:-3px; background:var(--paper); border:1.5px solid var(--ink); border-radius:2px; padding:0 6px; font-size:13px; line-height:1.25; white-space:nowrap; max-width:110%; overflow:hidden; text-overflow:ellipsis; transform:rotate(-2deg); }
.tw .tag b{ font-family:var(--title); color:var(--verm); margin-left:4px; } .tw:nth-child(2n) .tag{ transform:rotate(2deg); }
.tw.off{ opacity:.45; filter:grayscale(.8); }
.tw.air::before{ content:''; position:absolute; left:50%; bottom:12px; width:220%; height:260%; transform:translateX(-50%); background:radial-gradient(ellipse at 50% 100%, #fff6c8cc, #fff6c800 62%); pointer-events:none; }
.tw.air .jump{ translate:0 -6px; }
.tw .bubble, .tw .sign{ position:absolute; bottom:calc(100% - 22px); left:50%; transform:translateX(-50%) rotate(-3deg); background:var(--paper); border:2px solid var(--ink); border-radius:12px; padding:1px 8px; font-size:14px; white-space:nowrap; opacity:0; transition:opacity .15s; pointer-events:none; z-index:2; }
.tw .sign{ border-radius:2px; background:#fffaf0; color:var(--verm); font-weight:700; }
.tw.say .bubble, .tw.voted .sign{ opacity:1; animation:pop .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop{ from{ transform:translateX(-50%) scale(.3) rotate(-10deg); } }
.tw.enter{ animation:enter 1.1s cubic-bezier(.25,.8,.35,1) both; }
@keyframes enter{ 0%{ transform:translateX(70vw); } 60%{ transform:translateX(-8px); } 80%{ transform:translateX(3px); } 100%{ transform:none; } }
@keyframes breathe{ 0%,100%{ transform:scale(1,1); } 50%{ transform:scale(1.025,.975); } }
.jump.hop{ animation:hop .8s both; } .jump.cheer{ animation:hop .72s 3 both; } .jump.hit{ animation:hit .26s; } .jump.catch{ animation:catchit .5s; } .jump.slump{ animation:slump 2s both; } .jump.bow{ animation:bow 1.3s both; }
@keyframes hop{ 0%{ transform:none; } 16%{ transform:scale(1.2,.76); } 36%{ transform:translateY(-34%) scale(.84,1.22); } 54%{ transform:translateY(-46%) scale(.98,1.03); } 74%{ transform:translateY(0) scale(1.17,.82); } 87%{ transform:scale(.95,1.06); } 100%{ transform:none; } }
@keyframes hit{ 40%{ transform:scale(1.12,.86); } }
@keyframes catchit{ 0%{ transform:none; } 25%{ transform:translateY(6%) scale(1.15,.82) rotate(-6deg); } 60%{ transform:scale(.96,1.05) rotate(3deg); } 100%{ transform:none; } }
@keyframes slump{ 0%{ transform:none; } 20%{ transform:translateY(4%) scale(1.06,.88) rotate(-5deg); } 80%{ transform:translateY(4%) scale(1.06,.88) rotate(-5deg); } 100%{ transform:none; } }
@keyframes bow{ 0%{ transform:none; } 30%{ transform:scale(1.04,.96); } 55%{ transform:rotate(14deg) scale(1,.9); } 80%{ transform:rotate(14deg) scale(1,.9); } 100%{ transform:none; } }
.toon .eyes{ transform-box:fill-box; transform-origin:center; animation:blinkE 5s infinite; }
@keyframes blinkE{ 0%,93%,100%{ transform:none; } 95%{ transform:scaleY(.1); } }
.toon .aL, .toon .aR{ transform-box:fill-box; transform-origin:50% 0; }
.jump.cheer .aL{ animation:armL .72s 3; } .jump.cheer .aR{ animation:armR .72s 3; }
@keyframes armL{ 30%,70%{ transform:rotate(140deg); } } @keyframes armR{ 30%,70%{ transform:rotate(-140deg); } }
.prop{ position:fixed; left:0; top:0; width:26px; height:40px; z-index:50; pointer-events:none; }
@media (orientation:portrait){ #stage{ grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); } #stand{ width:100%; } }
/* the crowd on the screen: splats, placards, the tally */
#splats{ position:absolute; inset:0; pointer-events:none; z-index:4; }
.splat{ position:absolute; width:20cqh; height:20cqh; margin:-10cqh 0 0 -10cqh; animation:splat 3.4s forwards; } .splat svg{ width:100%; height:100%; }
@keyframes splat{ 0%{ transform:scale(.2); } 7%{ transform:scale(1.2,.85); } 13%{ transform:scale(1); } 75%{ opacity:1; transform:none; } 100%{ opacity:0; transform:translateY(4cqh) scale(1,1.1); } }
.sticker{ position:absolute; width:12cqh; height:12cqh; margin:-6cqh 0 0 -6cqh; animation:splat 3s forwards; } .sticker svg{ width:100%; height:100%; }
.placard{ position:absolute; left:50%; top:42%; transform:translate(-50%,-50%) rotate(-6deg); background:var(--paper); border:.7cqh solid var(--ink); padding:1cqh 4cqw; font:400 18cqh/1 var(--title); color:var(--verm); z-index:5; animation:plac 1.5s forwards; text-align:center; pointer-events:none; }
.placard small{ display:flex; align-items:center; justify-content:center; gap:1cqw; font:400 4.5cqh var(--hand); color:var(--ink); } .placard.bravo{ color:#b8860b; background:#fff6d0; }
@keyframes plac{ 0%{ transform:translate(-50%,-50%) scale(.2) rotate(-24deg); } 12%{ transform:translate(-50%,-50%) scale(1.12) rotate(-3deg); } 22%{ transform:translate(-50%,-50%) scale(1) rotate(-6deg); } 80%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%,-38%) rotate(-6deg); } }
#crowd{ position:absolute; left:2cqw; bottom:3cqh; display:flex; gap:1.2cqw; z-index:3; pointer-events:none; }
#crowd:empty{ display:none; } #crowd span{ display:flex; align-items:center; gap:.4cqw; background:var(--paper); padding:.2cqh 1cqw; border-radius:3px; font:400 4.6cqh var(--hand); box-shadow:0 2px 0 #0006; } #crowd svg{ width:5.4cqh; height:5.4cqh; }
#crowd span.bump{ animation:hit .3s; }
.tw{ transition:translate .35s cubic-bezier(.3,1.4,.5,1); }
.jump.dance{ animation:dance 1.6s; }
@keyframes dance{ 0%,100%{ transform:none; } 12%{ transform:rotate(-10deg) translateY(-6%); } 25%{ transform:rotate(10deg); } 37%{ transform:rotate(-10deg) translateY(-6%); } 50%{ transform:rotate(10deg) scale(1.05,.95); } 62%{ transform:rotate(-8deg) translateY(-6%); } 75%{ transform:rotate(8deg); } 88%{ transform:scale(1.1,.9); } }
#bug .left.tick{ background:var(--ochre); }
/* ======================= THE PHONE: a character, then a remote ======================= */
.phone{ position:fixed; inset:0; display:flex; flex-direction:column; padding:max(10px,env(safe-area-inset-top)) 14px max(12px,env(safe-area-inset-bottom)); background:var(--paper) repeating-linear-gradient(transparent 0 27px, #c9b99a55 27px 28px); }
.phone .me{ display:flex; align-items:center; gap:8px; font-size:20px; border-bottom:2px solid var(--ink); padding-bottom:4px; }
.phone .me .mini{ width:30px; height:36px; } .phone .me b{ margin-left:auto; font:400 22px var(--title); color:var(--verm); }
.phone h1{ margin:2px 0; font:400 clamp(30px,10vw,46px)/1 var(--title); color:var(--verm); text-align:center; }
.phone .center{ flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; min-height:0; }
.phone .say{ font:400 clamp(28px,8vw,40px)/1.05 var(--title); } .phone .sub{ font-size:18px; color:#6d6052; margin-top:8px; }
.phone .hero{ height:min(32dvh,220px); } .phone .hero svg{ height:100%; width:auto; overflow:visible; } .phone .hero .jump{ transform-origin:50% 100%; height:100%; } .pane .hero{ height:min(24dvh,170px); margin:auto; } .phone .hero .rig{ animation:breathe 2.8s ease-in-out infinite; transform-origin:50% 100%; height:100%; }
.pick{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:6px 0; flex:1; min-height:0; }
.pick button{ border:2px solid transparent; border-radius:8px; display:grid; place-items:center; padding:2px; min-height:0; } .pick button svg{ height:100%; max-height:11dvh; width:auto; overflow:visible; }
.pick button.on{ border-color:var(--ink); background:#f7e3a8; }
.remote{ flex:1; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:minmax(0,1fr); gap:9px; margin-top:8px; min-height:0; }
.remote .btn{ font-size:clamp(18px,5.4vw,24px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2px; line-height:1.05; }
.remote .btn small{ font-size:12px; color:#6d6052; }
.remote .cam{ background:#bfe0d8; } .remote .snd{ background:#f3d898; } .remote .slip{ background:#cfe2ec; } .remote .tog{ background:#e4ddd0; } .remote .tog.on{ background:var(--ochre); }
.remote .rec{ grid-column:1/-1; background:var(--verm); color:#fff; font:400 clamp(26px,8vw,36px) var(--title); }
.remote .gd{ grid-column:1/-1; background:#efe6d3; font-size:18px; }
.chs{ grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:5px; } .chs .btn{ font-size:15px; padding:4px 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; } .chs .btn.on{ background:var(--ochre); }
.scr{ background:#26302c; color:#f3f0e6; border-radius:6px; padding:6px 10px; font:400 17px/1.2 var(--hand); border:2px solid var(--ink); }
.scr .t{ float:right; font:700 20px var(--type); color:var(--ochre); }
.vote{ display:grid; grid-template-columns:repeat(auto-fit,minmax(78px,1fr)); gap:12px; width:100%; margin-top:16px; }
.vote button{ position:relative; aspect-ratio:1; font:400 44px var(--title); }
.vote button svg{ position:absolute; inset:-6%; width:112%; height:112%; overflow:visible; }
.vote button svg ellipse{ fill:none; stroke:var(--verm); stroke-width:5; stroke-linecap:round; stroke-dasharray:260; stroke-dashoffset:260; }
.vote button.on svg ellipse{ animation:draw .45s ease-out forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.vote button:disabled{ opacity:.3; }
.status{ margin-top:6px; padding:5px 10px; background:#26302c; color:#f3f0e6; border-radius:6px; font-size:16px; line-height:1.25; border:2px solid var(--ink); }
.tabs{ display:flex; gap:6px; margin-top:8px; } .tabs .btn{ flex:1; padding:6px 4px; font-size:16px; text-align:center; } .tabs .btn.on{ background:var(--ochre); }
.pane{ flex:1; min-height:0; display:flex; flex-direction:column; margin-top:8px; overflow:auto; }
.throws{ flex:1; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:minmax(0,1fr); gap:10px; min-height:0; }
.throws .btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; overflow:hidden; font-size:20px; }
.throws .btn svg{ height:min(14dvh,96px); width:auto; } .throws .btn .n{ font-size:13px; color:#6d6052; min-height:1em; }
.throws .th-tomato{ background:#f6d2c8; } .throws .th-rose{ background:#f3d6dc; } .throws .th-cut{ background:#efe6d3; } .throws .th-bravo{ background:#f6e7b0; }
.throws .btn.cool::before{ content:''; position:absolute; inset:0; background:#2a1f1a26; transform-origin:left; animation:cool .6s linear forwards; border-radius:inherit; }
@keyframes cool{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
.throws .btn.fly svg{ animation:toss .45s ease-out; } @keyframes toss{ 40%{ transform:translateY(-35%) rotate(-30deg) scale(1.2); } }
.planbar{ display:flex; gap:4px; flex-wrap:wrap; min-height:34px; align-items:center; padding:4px; border:2px dashed #b9ab92; border-radius:6px; }
.planbar .st{ background:#fffaf0; border:1.5px solid var(--ink); border-radius:4px; padding:1px 6px; font-size:14px; }
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.tile{ position:relative; border:2px solid var(--ink); border-radius:4px; overflow:hidden; background:#000; aspect-ratio:4/3; }
.tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.tile span{ position:absolute; left:0; right:0; bottom:0; background:#000b; color:#fff; font-size:12px; padding:1px 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; }
.tile.on{ box-shadow:inset 0 0 0 4px var(--verm); } .tile.on span{ background:var(--verm); } .tile.q{ box-shadow:inset 0 0 0 4px var(--ochre); animation:hit .3s; }
.snds{ display:grid; grid-template-columns:1fr 1fr; gap:6px; } .snds .btn{ font-size:14px; padding:6px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; display:block; } .snds .btn.on{ background:var(--ochre); } .snds .btn.q{ background:#f3d898; }
.lbl{ font:700 10px var(--type); letter-spacing:.14em; color:#7a6a58; margin:6px 0 3px; text-transform:uppercase; }
.rhead{ display:flex; justify-content:space-between; align-items:center; gap:8px; background:#26302c; color:#f3f0e6; border:2px solid var(--ink); border-radius:6px; padding:4px 10px; font-size:16px; }
.rhead #rt{ font:700 26px var(--type); color:var(--ochre); }
.beats{ display:grid; grid-template-columns:repeat(16,1fr); gap:2px; margin-top:5px; } .beats i{ height:12px; border-radius:2px; background:#e3d7bd; border:1px solid #b9ab92; transition:transform .1s; } .beats i:nth-child(4n+1){ background:#cdbd9c; } .beats i.past{ background:var(--teal); } .beats i.now{ background:var(--verm); transform:scaleY(1.7); }
.next{ width:100%; margin-top:6px; background:var(--ochre); font-size:19px; padding:8px; } .next small{ font-size:13px; }
.tools{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:8px; } .tools .btn{ padding:8px 2px; text-align:center; font-size:16px; } .tools .btn.on{ background:var(--ochre); }
.rem2 .tiles{ flex:1 1 auto; min-height:0; grid-auto-rows:minmax(0,1fr); } .rem2 .tile{ aspect-ratio:auto; } .rem2 .tile span{ font-size:14px; padding:2px 5px; } .rem2 .snds .btn{ padding:9px 6px; font-size:15px; } .rem2 .tools .btn{ padding:12px 2px; }
.rem2 .rec{ width:100%; margin-top:8px; background:var(--verm); color:#fff; font:400 30px var(--title); padding:8px; }
.rem2 .btn.hit{ animation:hit .2s; }
.pad{ flex:1; display:grid; grid-template-columns:1fr 1fr 1fr; grid-auto-rows:minmax(48px,1fr); gap:8px; margin-top:8px; } .pad .btn{ font-size:19px; display:flex; align-items:center; justify-content:center; }
.phone .hero .jump.dance{ animation:dance 1.6s; } .phone .hero .jump.bow{ animation:bow 1.3s both; } .phone .hero .jump.hit{ animation:hit .26s; } .phone .hero .jump.hop{ animation:hop .8s both; } .phone .hero .jump.cheer{ animation:hop .72s 3 both; }

/* the lobby's games; the phone's gate */
.game{ display:flex; gap:8px; align-items:center; padding:6px 0; border-bottom:1px dashed #b9ab92; } .game > div{ flex:1; min-width:0; } .game b{ display:block; font:400 20px var(--title); color:var(--verm); } .game span{ font-size:14px; color:#6d6052; } .game .cta{ width:auto; margin:0; padding:6px 14px; font-size:1.1em; }
.gate{ width:100%; margin-top:6px; background:var(--teal); color:#fff8ec; font:400 24px var(--title); padding:10px; animation:gatePulse 1.6s ease-in-out infinite; }
@keyframes gatePulse{ 50%{ transform:scale(1.02); box-shadow:0 0 0 4px #2f6f6b44; } }
#side #gateB{ animation:gatePulse 1.6s ease-in-out infinite; }
.answers{ display:grid; gap:8px; flex:1; min-height:0; grid-auto-rows:minmax(0,1fr); } .answers.pics{ grid-template-columns:1fr 1fr 1fr; grid-auto-rows:auto; } .answers .btn{ font-size:18px; text-align:left; padding:10px 12px; } .answers .btn.on{ background:var(--ochre); } .answers .btn.ok{ background:#bfe0c4; } .answers .btn.no{ background:#f3c4bc; } .answers .k{ font:400 22px var(--title); color:var(--verm); margin-right:8px; }
.answers .tile.ok{ box-shadow:inset 0 0 0 5px #3c8a4a; } .answers .tile.no{ box-shadow:inset 0 0 0 5px var(--verm); } .answers .tile.on{ box-shadow:inset 0 0 0 5px var(--ochre); }
.hand{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; } .hand .cd{ position:relative; background:#fffaf0; border:2px solid var(--ink); border-radius:6px; padding:3px; font-size:13px; line-height:1.15; text-align:left; min-height:44px; }
.hand .cd img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:3px; } .hand .cd.on{ background:var(--ochre); } .hand .cd:disabled{ opacity:.5; } .hand .cd .stamp{ position:absolute; top:30%; left:50%; transform:translate(-50%,-50%) rotate(-14deg); border:2px solid var(--verm); color:var(--verm); background:#fff8f0dd; font-weight:700; padding:0 4px; font-size:12px; }
.hand .cd b{ display:block; font-size:14px; } .hand .cd.edit{ text-align:center; } .problem{ border:3px double var(--verm); padding:4px 8px; text-align:center; background:#fff8f0; margin:4px 0; } .problem b{ display:block; font:400 20px var(--title); color:var(--verm); }
.answers.pics{ grid-template-columns:1fr; } .answers.pics .tile{ aspect-ratio:16/9 !important; } .answers.pics .tile span{ font:400 22px var(--title); padding:0 10px; background:#000b; }
@media (max-height:560px){ .game span{ display:none; } .game b{ font-size:17px; } }
#vids img.still{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; opacity:0; } #vids img.still.on{ opacity:1; }
.answers.compact{ flex:0 0 auto; grid-auto-rows:auto; } .answers.compact .btn{ padding:8px 12px; }
/* the cut: a card on the stand, the strip and the editing rows on a phone */
#cardv{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:0 8%; background:#000; color:var(--paper); opacity:0; font:400 9cqh/1.15 var(--title); z-index:3; pointer-events:none; } #cardv.on{ opacity:1; }
#screen video{ transition:none; }
.cutp .pane{ overflow:auto; }
.cstrip{ display:flex; gap:3px; overflow-x:auto; padding:4px 2px; margin-top:6px; background:#26302c; border-radius:6px; min-height:62px; scrollbar-width:thin; }
.cc{ position:relative; flex:0 0 auto; height:52px; border:2px solid #0000; border-radius:3px; overflow:hidden; background:#000; color:#fff; padding:0; }
.cc img{ width:100%; height:100%; object-fit:cover; display:block; } .cc .ct{ display:grid; place-items:center; height:100%; padding:2px; font:400 11px/1.1 var(--title); background:#111; }
.cc b{ position:absolute; right:2px; bottom:1px; font:700 10px var(--type); background:#000a; padding:0 2px; } .cc i{ position:absolute; left:2px; top:1px; font-style:normal; font-size:11px; color:var(--ochre); } .cc u{ position:absolute; left:2px; bottom:1px; text-decoration:none; font-size:11px; color:#9fd; }
.cc.sel{ border-color:var(--ochre); box-shadow:0 0 0 2px var(--ochre); } .cc.now{ outline:2px solid var(--verm); }
.ed{ display:flex; align-items:center; gap:4px; margin:5px 0; flex-wrap:wrap; } .ed > span{ min-width:72px; font-size:15px; color:#6d6052; } .ed b{ font:700 15px var(--type); min-width:52px; text-align:center; }
.ed button{ position:relative; padding:6px 9px; font:400 16px var(--hand); background:#fffaf0; border:1.5px solid var(--ink); border-radius:6px; } .ed button.on{ background:var(--ochre); } .ed button:active{ transform:translateY(1px); }
.ed.snd > span{ flex:1 1 100%; color:var(--ink); }

/* ---- THE SHOW: the stand */
#showv{ position:absolute; inset:0; z-index:0; } #showv[hidden]{ display:none; }
#bug .onair{ display:flex; align-items:center; gap:.6cqw; background:#c8553d; color:#fff; border-radius:99px; padding:.6cqh 1.4cqw .6cqh .6cqw; animation:pulse 1s ease-in-out infinite; }
#bug .onair .mini{ width:5cqh; height:6cqh; } #bug .onair svg{ width:4.4cqh; height:4.4cqh; }
.stiles{ display:flex; flex-direction:column; gap:5px; }
.stile{ display:grid; grid-template-columns:22px 72px 26px 1fr auto; gap:6px; align-items:center; padding:3px; border-radius:5px; background:#fffaf0; border:1.5px solid transparent; }
.stile.cur{ border-color:var(--ink); } .stile.now{ background:#f6dfa8; }
.stile .n{ font:400 18px var(--title); color:var(--verm); text-align:center; } .stile img{ width:72px; aspect-ratio:16/9; object-fit:cover; border-radius:3px; background:#222; }
.stile .who .mini{ width:24px; height:28px; } .stile .tx{ font-size:14px; line-height:1.15; min-width:0; overflow:hidden; } .stile .tx .rib{ display:block; width:100%; height:12px; margin-top:2px; }
.stile .ic{ display:flex; align-items:center; gap:2px; font-size:13px; color:#6d6052; } .stile .ic svg{ width:16px; height:16px; }
@keyframes pulse{ 50%{ transform:scale(1.06); } }

/* ---- THE SHOW: a phone (a scene, a hand, a microphone; no words) */
.showp .pane{ overflow:hidden; margin-top:4px; }
.showp .me{ font-size:16px; padding-bottom:2px; } .showp .me .mini{ width:24px; height:28px; }
.sh{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:8px; }
.shl,.shr{ display:flex; flex-direction:column; gap:6px; min-height:0; }
.hstage{ position:relative; width:100%; max-height:58dvh; aspect-ratio:16/9; background:#1d1915; border:2px solid var(--ink); border-radius:6px; overflow:hidden; touch-action:none; margin:0 auto; }
.hstage .hg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .hstage.empty .hg{ opacity:0; }
.hfigs{ position:absolute; inset:0; } .hf{ position:absolute; transform:translate(-50%,-50%); touch-action:none; filter:drop-shadow(0 0 0 var(--c,#fff)) drop-shadow(0 2px 4px #000a); }
.hf img{ display:block; width:100%; height:auto; pointer-events:none; user-select:none; -webkit-user-drag:none; } .hf.flip img{ transform:scaleX(-1); }
.hf.held{ filter:drop-shadow(0 0 3px var(--c,#fff)) drop-shadow(0 0 3px var(--c,#fff)); } .hf.gone{ opacity:.35; filter:grayscale(1); }
.hbin{ position:absolute; right:6px; top:6px; width:34px; height:34px; color:#fff; background:#c8553d; border-radius:50%; padding:5px; opacity:0; transition:opacity .2s; pointer-events:none; z-index:200; } .hstage.binning .hbin{ opacity:1; }
.hsnd{ position:absolute; left:6px; bottom:6px; display:flex; gap:6px; z-index:150; }
.hrib{ display:flex; align-items:center; gap:6px; height:28px; } .hrib .mini{ width:22px; height:26px; flex:none; } .hrib .rib{ flex:1; height:24px; } .hrib .dots svg{ width:22px; height:22px; color:#6d6052; animation:pulse 1s infinite; }
.hstrip{ display:flex; gap:5px; align-items:center; overflow-x:auto; overflow-y:hidden; flex:none; padding-bottom:2px; scrollbar-width:none; }
.hstrip button{ flex:none; padding:0; border:0; background:none; }
.hstrip .pl{ width:44px; height:44px; border-radius:50%; background:var(--verm); color:#fff; padding:10px; }
.hstrip .tl{ position:relative; width:64px; aspect-ratio:16/9; border-radius:4px; overflow:hidden; border:2px solid transparent; box-shadow:inset 0 -4px 0 var(--c); }
.hstrip .tl img{ width:100%; height:100%; object-fit:cover; display:block; } .hstrip .tl i{ position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--c); }
.hstrip .tl.cur{ border-color:var(--ink); transform:translateY(-2px); } .hstrip .tl.now{ border-color:var(--verm); }
.hstrip .ops{ display:flex; gap:3px; margin-left:4px; } .hstrip .ops button{ width:36px; height:36px; border-radius:8px; background:#fffaf0; border:1.5px solid var(--ink); padding:6px; color:var(--ink); }
.hmic{ display:flex; align-items:center; gap:8px; flex:none; }
.bigmic{ position:relative; flex:none; width:min(22dvh,96px); height:min(22dvh,96px); border-radius:50%; border:3px solid var(--ink); background:var(--verm); color:#fff; padding:22px; box-sizing:border-box; touch-action:none; -webkit-user-select:none; user-select:none; }
.bigmic svg{ position:relative; z-index:1; width:100%; height:100%; } .bigmic i{ position:absolute; inset:-4px; border-radius:50%; border:4px solid var(--verm); opacity:0; transition:transform .06s; }
.bigmic.on{ background:#a3301c; } .bigmic.on i{ opacity:.7; } .bigmic.busy{ opacity:.55; }
.faces{ display:flex; flex-wrap:wrap; gap:4px; min-width:0; } .faces button{ position:relative; width:42px; height:46px; border-radius:10px; border:2px solid var(--c); background:#fffaf0; padding:2px; }
.faces button .mini{ width:100%; height:100%; } .faces button.up{ background:#f6dfa8; animation:pulse 1s infinite; } .faces button b{ position:absolute; right:-6px; top:-8px; width:22px; height:22px; color:var(--verm); }
.holder{ box-sizing:border-box; position:relative; width:64px; height:70px; border-radius:12px; border:3px solid var(--c); background:#fffaf0; padding:3px; } .holder .mini{ width:100%; height:100%; }
.holder span{ position:absolute; right:-10px; bottom:-8px; width:30px; height:30px; border-radius:50%; background:#26302c; color:#fff; padding:5px; } .holder span.live{ background:var(--verm); animation:pulse .8s infinite; }
.raise{ box-sizing:border-box; width:62px; height:62px; border-radius:50%; border:3px solid var(--ink); background:#fffaf0; color:var(--ink); padding:12px; margin-left:auto; } .raise.on{ background:#ecc94b; animation:pulse 1s infinite; }
.htabs{ display:flex; gap:4px; flex:none; } .htabs button{ flex:1; height:40px; border-radius:8px; border:2px solid var(--ink); background:#fffaf0; color:#6d6052; padding:6px; } .htabs button.on{ background:var(--ink); color:#f4ecd8; }
.htray{ flex:1; min-height:0; overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); grid-auto-rows:64px; gap:6px; align-content:start; }
.htray .it{ position:relative; padding:3px; border-radius:8px; border:2px solid #c9b99a; background:#f9f3e3 repeating-conic-gradient(#efe6d0 0 25%, transparent 0 50%) 0 0/12px 12px; touch-action:none; -webkit-user-select:none; user-select:none; }
.htray .it img{ width:100%; height:100%; object-fit:contain; pointer-events:none; -webkit-user-drag:none; } .htray .it.gr img{ object-fit:cover; border-radius:4px; }
.htray .it.more,.htray .it.ask{ background:#fffaf0; color:var(--ink); padding:14px; border-style:dashed; } .htray .it.ask.on{ background:var(--verm); color:#fff; border-style:solid; }
.disc{ position:relative; border-radius:50% !important; overflow:hidden; padding:0 !important; width:52px; height:52px; border:3px solid var(--c,#1d6bff) !important; background:#000 !important; }
.htray .disc{ width:auto; height:auto; } .htray .disc.bed{ --c:#1d6bff; } .htray .disc.echo{ --c:#ff5a1f; }
.disc img{ width:100%; height:100%; object-fit:cover !important; opacity:.75; } .disc b{ position:absolute; inset:22%; color:#fff; filter:drop-shadow(0 1px 2px #000); }
.disc.hearing{ animation:pulse .7s infinite; } .hsnd .disc{ width:40px; height:40px; }
.wait{ grid-column:1/-1; display:grid; place-items:center; color:#a89a84; } .wait svg{ width:48px; height:48px; animation:pulse 1.2s infinite; }
.ghost{ position:fixed; z-index:999; transform:translate(-50%,-50%) scale(1.25); pointer-events:none; opacity:.9; filter:drop-shadow(0 6px 10px #0008); } .ghost img{ width:100%; } .ghost.over{ transform:translate(-50%,-50%) scale(1.5); }
.ghost.bed,.ghost.echo{ border-radius:50%; overflow:hidden; aspect-ratio:1; } .ghost.bed img,.ghost.echo img{ height:100%; object-fit:cover; } .ghost b{ display:none; }
@media (orientation:portrait){ .sh{ grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); } .hstage{ max-height:34dvh; } }
.htabs button svg,.hstrip button svg,.raise svg,.holder span svg,.htray .it.more svg,.htray .it.ask svg,.faces b svg{ display:block; width:100%; height:100%; }
.hempty{ position:absolute; inset:0; display:none; place-items:center; color:#5d5246; } .hempty svg{ width:22%; height:auto; animation:pulse 1.4s infinite; } .hstage.empty .hempty{ display:grid; }

/* ---- every takeover game keeps the crowd: a strip of things to throw */
.tstrip{ display:flex; gap:6px; justify-content:center; flex:none; padding-top:4px; }
.tstrip button{ width:46px; height:40px; border:2px solid var(--ink); border-radius:10px; background:#fffaf0; padding:3px; } .tstrip button svg{ width:100%; height:100%; }
#top #earsB.on{ background:#ecc94b; }

/* ---- THE JAM: the stand */
#jamv{ position:absolute; inset:0; z-index:0; background:#141210; } #jamv[hidden]{ display:none; }
.jcard{ position:absolute; left:0; right:0; top:0; z-index:5; text-align:center; padding:1.6cqh 4% 1.2cqh; font:400 6.4cqh/1.05 var(--title); color:#f4ecd8; background:linear-gradient(#000c,#0000); pointer-events:none; }
.jcard small{ display:block; font:700 2.2cqh var(--mono,monospace); letter-spacing:.2em; color:#ecc94b; margin-bottom:.6cqh; }
.jtiles{ position:absolute; left:2%; right:2%; top:15cqh; bottom:2cqh; display:grid; grid-template-columns:repeat(var(--n),1fr); grid-template-rows:repeat(var(--rows),1fr); gap:1.4cqh; }
.jtiles[hidden]{ display:none; }
.jt{ position:relative; background:#000; border-radius:6px; overflow:hidden; border:3px solid #0000; min-height:0; }
.jt.spot{ border-color:#ecc94b; box-shadow:0 0 0 4px #ecc94b55; }
.jt video,.jsolo video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.jt .jb,.jsolo .jb{ position:absolute; inset:0; background:#000; opacity:0; transition:opacity .15s; } .jt .jx,.jsolo .jx{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
.jt .jl{ position:absolute; left:0; right:0; bottom:0; display:flex; gap:.6cqw; padding:.8cqh; background:linear-gradient(#0000,#000c); }
.jt .jl span{ display:flex; align-items:center; gap:2px; background:#f4ecd8; color:var(--ink); border-radius:99px; padding:1px 6px 1px 1px; height:3.6cqh; } .jt .jl span.no{ opacity:.35; }
.jt .jl span svg{ width:2.8cqh; height:2.8cqh; } .jt .jl span[style*="--f"] svg{ color:var(--f); } .jt .jl .kp{ background:#ecc94b; margin-left:auto; }
.jchip{ display:inline-grid; place-items:center; width:2.8cqh; height:2.8cqh; min-width:18px; min-height:18px; border-radius:50%; background:var(--c); color:#fff; font:700 1.8cqh/1 var(--hand); font-style:normal; text-shadow:0 1px 0 #0006; }
.jt .jw{ position:absolute; right:.8cqh; top:.8cqh; display:flex; align-items:center; } .jt .jw .mini{ width:5cqh; height:6cqh; } .jt .jw b{ width:3.6cqh; height:3.6cqh; color:#ecc94b; animation:pulse 1s infinite; }
.jsolo{ position:absolute; inset:0; z-index:4; background:#000; } .jsolo[hidden]{ display:none; }
.jauth{ position:absolute; left:2%; bottom:3cqh; display:flex; gap:1cqw; z-index:6; } .jauth span{ display:flex; align-items:center; gap:.5cqw; background:#f4ecd8ee; color:var(--ink); border-radius:99px; padding:.5cqh 1.4cqw .5cqh .5cqh; font:400 3.2cqh var(--hand); }
.jauth svg{ width:3.6cqh; height:3.6cqh; } .jauth em{ font-style:normal; }
.jps{ display:flex; flex-direction:column; gap:4px; } .jp{ display:flex; align-items:center; gap:6px; background:#fffaf0; border-radius:5px; padding:2px 6px; font-size:15px; }
.jp .m .mini{ width:24px; height:28px; } .jp .i svg{ width:20px; height:20px; color:#6d6052; } .jp img{ width:46px; aspect-ratio:16/9; object-fit:cover; border-radius:3px; } .jp small{ color:#6d6052; } .jp .ok{ margin-left:auto; color:#3f7a3a; font-weight:700; max-width:45%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.jworld{ display:flex; flex-wrap:wrap; gap:6px; } .jw1{ position:relative; display:flex; flex-direction:column; align-items:center; width:74px; font-size:12px; color:#6d6052; }
.jw1 img{ width:74px; aspect-ratio:16/9; object-fit:cover; border-radius:4px; border:2px solid var(--ink); } .jw1 .jchip{ position:absolute; right:-4px; top:-6px; width:20px; height:20px; font-size:12px; } .jw1 b{ position:absolute; right:-4px; top:-6px; width:22px; height:22px; background:#fff; border-radius:50%; padding:2px; }
.jw1.debt img{ filter:blur(3px) grayscale(1); } .jw1 em{ font-style:normal; text-transform:uppercase; letter-spacing:.08em; }
.jlog{ margin-top:6px; font-size:13px; display:flex; flex-direction:column; gap:3px; } .jlog .jchip{ width:18px; height:18px; font-size:11px; vertical-align:middle; }

/* ---- THE JAM: a phone (point at things, talk to the archive) */
.jamp .pane{ overflow:hidden; margin-top:4px; } .jamp .me{ font-size:16px; padding-bottom:2px; } .jamp .me .mini{ width:24px; height:28px; }
.jm{ flex:1; min-height:0; display:flex; flex-direction:column; gap:6px; }
.jhd{ display:flex; align-items:center; gap:8px; flex:none; } .jpi{ width:34px; height:34px; flex:none; color:var(--verm); } .jpi svg{ width:100%; height:100%; }
.jq{ font:400 clamp(18px,4.6vh,26px)/1.05 var(--title); color:var(--ink); flex:1; min-width:0; }
.jcrew{ display:flex; gap:3px; } .jcrew i{ width:24px; height:28px; border-radius:6px; border:2px solid var(--c); background:#fffaf0; opacity:.5; } .jcrew i.ok{ opacity:1; background:#d9efc9; } .jcrew .mini{ width:100%; height:100%; }
.jbd{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:8px; }
.jlf,.jrt{ display:flex; flex-direction:column; gap:6px; min-height:0; }
.jprev{ position:relative; width:100%; aspect-ratio:16/9; max-height:62dvh; background:#1d1915; border:2px solid var(--ink); border-radius:6px; overflow:hidden; }
.jprev video,.jprev img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .jprev .jop{ position:absolute; right:6px; top:6px; width:36px; height:36px; background:#f4ecd8; border-radius:50%; padding:5px; color:var(--ink); }
.jby{ display:flex; flex-wrap:wrap; gap:4px; } .jby span{ display:flex; align-items:center; gap:3px; border:2px solid var(--c); border-radius:99px; padding:1px 8px 1px 2px; font-size:14px; background:#fffaf0; } .jby svg{ width:20px; height:20px; color:var(--c); }
.jbig{ flex:1; display:grid; place-items:center; color:var(--verm); } .jbig svg{ width:min(30%,90px); height:auto; } .jbig.dim{ color:#c9b99a; font-size:40px; }
.jgrid{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:minmax(0,1fr); gap:5px; }
.jc{ position:relative; padding:0; border:3px solid #c9b99a; border-radius:7px; background:#1d1915; overflow:hidden; min-height:0; }
.jc img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; } .jc.on{ border-color:var(--verm); box-shadow:0 0 0 3px #c8553d55; } .jc.gold{ border-color:#ecc94b; }
.jd{ border-color:var(--f); } .jd img{ opacity:.6; } .jd b{ position:absolute; inset:22%; color:#fff; filter:drop-shadow(0 1px 2px #000); } .jd.motif{ box-shadow:0 0 0 3px #ecc94b; }
.jo{ background:#fffaf0; color:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; } .jo svg{ width:44%; height:auto; } .jo small{ font:700 12px var(--mono,monospace); letter-spacing:.04em; }
.jgrid.spoil{ grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; }
.jtools{ display:flex; align-items:center; gap:8px; flex:none; }
.jmic{ position:relative; width:54px; height:54px; border-radius:50%; border:3px solid var(--ink); background:var(--verm); color:#fff; padding:11px; box-sizing:border-box; touch-action:none; flex:none; } .jmic svg{ width:100%; height:100%; position:relative; z-index:1; }
.jmic i{ position:absolute; inset:-4px; border-radius:50%; border:4px solid var(--verm); opacity:0; } .jmic.on{ background:#a3301c; } .jmic.on i{ opacity:.7; }
.jfar{ width:54px; height:44px; border-radius:10px; border:2px dashed var(--ink); background:#fffaf0; color:var(--ink); padding:7px; box-sizing:border-box; flex:none; } .jfar svg{ width:100%; height:100%; }
.jheard{ flex:1; min-width:0; font-size:15px; color:#6d6052; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.jkeeps{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:6px; } .jko{ display:flex; gap:5px; align-items:stretch; height:58px; flex:none; }
.jko button{ position:relative; border:3px solid #c9b99a; border-radius:8px; background:#fffaf0; padding:6px; color:var(--ink); } .jko button:first-child{ padding:0; width:96px; overflow:hidden; } .jko button:first-child img{ width:100%; height:100%; object-fit:cover; }
.jko button.snd{ color:var(--f); width:58px; } .jko button.op,.jko button.all{ width:58px; } .jko button svg{ width:100%; height:100%; } .jko button.on{ border-color:var(--verm); background:#f6dfa8; } .jko button.all{ color:var(--verm); margin-left:auto; }
.jko button i{ position:absolute; right:-5px; top:-5px; width:14px; height:14px; border-radius:50%; background:var(--c); border:2px solid #fff; }
@media (orientation:portrait){ .jbd{ grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); } .jprev{ max-height:28dvh; } }
.jd b svg{ width:100%; height:100%; display:block; }
.jt:not(:has(video[src])) { background:#1d1915 repeating-linear-gradient(45deg,#ffffff06 0 10px,transparent 10px 20px); }

/* ---- THE JAM phone, second pass: look, then send; talk or type to find; a real upright layout */
.jgrid{ flex:1; min-height:0; overflow-y:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:auto; align-content:start; gap:6px; padding:2px; }
.jgrid .jc{ aspect-ratio:16/9; } .jgrid.spoil{ grid-template-columns:repeat(3,minmax(0,1fr)); } .jgrid.spoil .jc{ aspect-ratio:1/.8; }
.jc.sent::after{ content:'✓'; position:absolute; left:4px; top:2px; color:#fff; background:#3f7a3a; border-radius:50%; width:22px; height:22px; display:grid; place-items:center; font-size:14px; }
.jc.on{ border-color:var(--verm); transform:scale(.97); } .jd small{ position:absolute; left:3px; right:3px; bottom:2px; font-size:11px; line-height:1.1; color:#fff; text-shadow:0 1px 2px #000; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.jfind{ display:flex; align-items:center; gap:6px; flex:none; }
.jtype{ flex:1; min-width:0; display:flex; border:2px solid var(--ink); border-radius:24px; background:#fffaf0; overflow:hidden; height:44px; }
.jtype input{ flex:1; min-width:0; border:0; background:none; padding:0 12px; font:400 17px var(--hand); color:var(--ink); outline:none; }
.jtype button{ border:0; background:var(--ink); color:#f4ecd8; padding:0 14px; font:400 16px var(--hand); }
.jmic{ width:48px; height:48px; padding:10px; } .jfar{ width:48px; height:44px; padding:8px; }
.jnote{ flex:none; min-height:20px; font-size:15px; color:#6d6052; padding-left:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .jnote.busy{ color:var(--verm); animation:pulse 1.2s infinite; }
.jsend{ flex:none; height:52px; border-radius:12px; border:3px solid var(--ink); background:var(--verm); color:#fff; font:400 22px var(--title); box-shadow:0 3px 0 var(--ink); }
.jsend:disabled{ background:#e8dcc3; color:#8a7c66; box-shadow:none; } .jsend.sent{ background:#3f7a3a; color:#fff; border-color:#2b5a27; }
.jprev .jop.big{ left:50%; top:50%; right:auto; width:38%; height:auto; aspect-ratio:1; transform:translate(-50%,-50%); background:#f4ecd8dd; padding:10%; }
.jprev .jsd{ position:absolute; left:6px; bottom:6px; width:38px; height:38px; border-radius:50%; background:#000a; color:var(--f); padding:6px; border:2px solid var(--f); }
.jbig.dim{ flex-direction:column; gap:6px; font-size:15px; color:#a89a84; } .jbig.dim svg{ width:64px; }
.jlf{ justify-content:flex-start; }
@media (orientation:portrait){
  .jm{ gap:4px; } .jq{ font-size:clamp(20px,6vw,28px); }
  .jbd{ display:flex; flex-direction:column; gap:6px; }
  .jlf{ flex:none; } .jprev{ max-height:none; } .jrt{ flex:1; min-height:0; }
  .jgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .jgrid.spoil{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .jby{ display:none; } .jsend{ height:56px; }
  .jkeeps{ gap:8px; } .jko{ height:64px; }
}
.jgrid{ grid-auto-rows:max-content; } .jgrid .jc{ min-height:auto; height:auto; aspect-ratio:auto; } .jgrid .jc img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.jgrid.spoil .jc{ aspect-ratio:1/.8; }
.jamp .gate{ font-size:22px; padding:4px 10px; margin-top:4px; min-height:0; }
@media (orientation:landscape){ .jamp .gate{ font-size:18px; padding:2px 10px; } .jamp .jhd{ gap:6px; } .jamp .jq{ font-size:20px; } }
.jprev .jop.big{ display:block; width:30%; }
.htype{ display:flex; flex:1; min-width:120px; height:40px; border:2px solid var(--ink); border-radius:20px; overflow:hidden; background:#fffaf0; }
.htype input{ flex:1; min-width:0; border:0; background:none; padding:0 10px; font:400 16px var(--hand); color:var(--ink); outline:none; } .htype button{ border:0; background:var(--ink); color:#f4ecd8; padding:0 12px; font:400 15px var(--hand); }
.htray .htype.wide{ grid-column:1/-1; }
.hmic{ flex-wrap:wrap; }

/* ======================= CINEOSIS: night-blue, neon players */
#host.cin{ --cbg:#0b1120; --cpan:#111a2e; --cline:#22304d; --ctx:#dfe7f5; --cdim:#8a98b3; background:#070b16; }
#host.cin #top{ background:linear-gradient(#0b1120,#0e1628); } #host.cin #logo{ font-family:'Courier Prime',monospace; letter-spacing:.18em; color:#fff; }
#host.cin #stand{ background:none; } #host.cin #screen{ background:#070b16; border:1px solid var(--cline); border-radius:8px; }
#host.cin #side{ background:var(--cpan); color:var(--ctx); border:1px solid var(--cline); box-shadow:none; background-image:none; }
#host.cin #side .ph{ color:#fff; border-color:var(--cline); font-family:'Courier Prime',monospace; letter-spacing:.14em; text-transform:uppercase; } #host.cin #side .ph small{ color:var(--cdim); letter-spacing:0; text-transform:none; }
#host.cin #side .btn{ background:#18233c; color:var(--ctx); border-color:#2e3f64; } #host.cin #side .hint{ color:var(--cdim); }
#host.cin #crew{ background:#070b16; } #host.cin #crew .pl{ opacity:.25; }
#cinv{ position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse at 50% 0%,#14203a,#070b16 70%); color:#dfe7f5; font-family:'Courier Prime',monospace; } #cinv[hidden]{ display:none; }
.chead{ position:absolute; left:2.4%; right:2.4%; top:2cqh; display:flex; align-items:baseline; gap:2cqw; z-index:5; white-space:nowrap; }
.chead b{ font-size:4.4cqh; letter-spacing:.2em; color:#fff; } .chead .m{ font-size:3.4cqh; color:#ffc93c; text-transform:uppercase; letter-spacing:.1em; }
.chead .s{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; font:400 3.8cqh var(--hand); color:#dfe7f5; } .chead .r{ font-size:2.6cqh; color:#8a98b3; }
.cboard{ position:absolute; left:2.4%; right:2.4%; top:10cqh; bottom:17cqh; } .cboard[hidden]{ display:none; }
.cwait{ display:grid; place-items:center; height:100%; color:#8a98b3; font-size:3cqh; }
.cfoot{ position:absolute; left:2.4%; right:2.4%; bottom:1.6cqh; height:14cqh; display:flex; flex-direction:column; gap:.8cqh; z-index:5; }
.cstrip{ flex:1; display:flex; gap:.6cqw; border:1px solid #2e3f64; border-radius:6px; padding:.8cqh; background:#0b1120cc; overflow:hidden; } .cstrip em{ margin:auto; color:#8a98b3; font-size:2.4cqh; }
.cstrip span{ flex:0 0 auto; height:100%; aspect-ratio:16/9; border-radius:3px; overflow:hidden; box-shadow:inset 0 -3px 0 var(--c); position:relative; } .cstrip img{ width:100%; height:100%; object-fit:cover; display:block; }
.cstrip span.now{ outline:2px solid #ffc93c; } .cstrip span::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--c); }
.cdots{ display:flex; align-items:center; gap:.8cqw; } .cdots i{ width:1.6cqh; height:1.6cqh; border-radius:50%; background:var(--c); box-shadow:0 0 8px var(--c); } .cdots small{ margin-left:auto; color:#8a98b3; font-size:2.2cqh; }
.cchip{ display:inline-grid; place-items:center; width:2.8cqh; height:2.8cqh; min-width:18px; min-height:18px; border-radius:50%; background:var(--c); color:#0b1120; font:700 1.8cqh/1 'Courier Prime',monospace; font-style:normal; box-shadow:0 0 6px var(--c); }
/* chains */
.cchains{ height:100%; display:flex; flex-direction:column; gap:1.2cqh; overflow:hidden; }
.cchain{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:1.4cqw; align-items:center; background:#0f182b; border:1px solid #22304d; border-radius:6px; padding:.8cqh 1cqw; }
.ccells{ display:flex; align-items:center; gap:.6cqw; min-width:0; } .ccells .arr{ color:#3c4e74; font-style:normal; font-size:2.6cqh; }
.ccell{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:.3cqh; color:#5d6c89; padding:.4cqh; border-radius:6px; border:1px solid transparent; }
.ccell .who .mini{ width:4.4cqh; height:5.2cqh; opacity:.55; } .ccell b{ width:3.2cqh; height:3.2cqh; color:#5d6c89; } .ccell small{ font-size:1.8cqh; text-align:center; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.ccell.d{ color:var(--c); } .ccell.d .who .mini{ opacity:1; } .ccell.d b{ color:var(--c); } .ccell.cur{ border-color:var(--c); box-shadow:0 0 10px -2px var(--c); } .ccell.cur b{ color:var(--c); animation:pulse 1s infinite; }
.cthumbs{ display:flex; gap:.6cqw; height:100%; align-items:center; min-width:0; overflow:hidden; }
.cthumbs span{ position:relative; height:86%; aspect-ratio:16/9; border-radius:4px; overflow:hidden; border:2px solid var(--c); box-shadow:0 0 10px -3px var(--c); flex:none; background:#000; display:grid; place-items:center; }
.cthumbs img{ width:100%; height:100%; object-fit:cover; } .cthumbs em{ font-size:5cqh; color:#3c4e74; font-style:normal; } .cthumbs .sn,.cthumbs .op{ position:absolute; right:3px; bottom:3px; width:2.8cqh; height:2.8cqh; background:#0b1120cc; border-radius:50%; padding:2px; color:#fff; } .cthumbs .op{ left:3px; right:auto; }
.cthumbs .pos{ border-style:dashed; color:#ffc93c; flex-direction:column; } .cthumbs .pos svg{ width:3cqh; } .cthumbs .pos small{ font-size:1.8cqh; }
/* surf wall */
.cwall{ height:100%; display:grid; grid-template-columns:repeat(8,1fr); grid-auto-rows:1fr; gap:.6cqh; }
.cwall span{ position:relative; border-radius:4px; overflow:hidden; border:2px solid #0000; opacity:.7; } .cwall img{ width:100%; height:100%; object-fit:cover; } .cwall span.past{ opacity:.35; border-color:var(--c); }
.cwall span.at{ opacity:1; border-color:var(--c); box-shadow:0 0 14px var(--c); grid-column:span 2; grid-row:span 2; } .cwall .pin{ position:absolute; left:4px; top:4px; width:5cqh; height:6cqh; } .cwall .recd{ position:absolute; right:4px; top:4px; background:#ff3b3b; color:#fff; font:700 1.8cqh monospace; padding:1px 5px; border-radius:3px; font-style:normal; }
/* molecule */
.cmol{ position:relative; height:100%; } .cmol svg{ position:absolute; inset:0; width:100%; height:100%; }
.cmol .atom{ position:absolute; width:12%; aspect-ratio:16/9; transform:translate(-50%,-50%); border-radius:5px; overflow:hidden; border:2px solid var(--c); box-shadow:0 0 12px -2px var(--c); background:#000; padding:0; }
.cmol .atom img{ width:100%; height:100%; object-fit:cover; display:block; } .cmol .atom.seed{ width:15%; border-color:#fff; } .cmol .atom b{ position:absolute; right:2px; bottom:2px; width:30%; aspect-ratio:1; background:#0b1120cc; border-radius:50%; padding:2px; color:#3aa0ff; }
.cmol .bl{ position:absolute; transform:translate(-50%,-50%); font:700 1.8cqh 'Courier Prime',monospace; color:var(--c); background:#0b1120; border:1px solid var(--c); border-radius:10px; padding:0 6px; font-style:normal; text-transform:uppercase; }
/* votes, keeps, next */
.cvote,.ckeep{ height:100%; display:flex; gap:1.4cqw; align-items:center; justify-content:center; flex-wrap:wrap; }
.cvote span,.ckeep span{ position:relative; width:22%; aspect-ratio:16/9; border-radius:6px; overflow:hidden; border:3px solid var(--c); box-shadow:0 0 14px -3px var(--c); }
.cvote img,.ckeep img{ width:100%; height:100%; object-fit:cover; } .cvote b{ position:absolute; right:6px; top:4px; font-size:5cqh; color:#fff; text-shadow:0 2px 6px #000; } .cvote small{ position:absolute; left:6px; bottom:4px; font-size:2.2cqh; color:#fff; text-shadow:0 1px 3px #000; }
.ckeep span.rej img{ filter:grayscale(1) brightness(.7); } .ckeep .stamp{ position:absolute; right:6%; top:10%; transform:rotate(-8deg); border:3px solid #ff3b3b; color:#ff3b3b; font:700 3cqh 'Courier Prime',monospace; padding:0 8px; font-style:normal; background:#0008; }
.ckeep .kp{ position:absolute; left:4px; bottom:4px; display:flex; align-items:center; gap:2px; color:#ffc93c; } .ckeep .kp svg{ width:3cqh; height:3cqh; }
.cnext{ height:100%; display:flex; gap:2cqw; align-items:center; justify-content:center; } .cnext span{ width:28%; height:70%; border:2px solid #2e3f64; border-radius:10px; background:#0f182b; display:flex; flex-direction:column; justify-content:center; gap:1.4cqh; padding:2cqh 2cqw; }
.cnext small{ color:#ffc93c; font-size:3cqh; } .cnext b{ font-size:4cqh; color:#fff; text-transform:uppercase; letter-spacing:.06em; } .cnext em{ color:#8a98b3; font-size:2.4cqh; font-style:normal; text-transform:uppercase; } .cnext i{ display:flex; gap:4px; min-height:3cqh; }
/* playback */
.csolo{ position:absolute; inset:0; z-index:4; background:#000; overflow:hidden; } .csolo[hidden]{ display:none; }
.cly{ position:absolute; inset:0; opacity:0; } .cly video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .3s; } .cly.tf{ transform:scale(1.15); filter:blur(6px); }
.cly .cb{ position:absolute; inset:0; background:#000; opacity:0; } .cly .cx{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
.cflash{ position:absolute; inset:0; z-index:5; opacity:0; pointer-events:none; } .cflash.rhyme{ background:#fff; } .cflash.contrast{ background:#000; } .cflash.go{ animation:cflash .3s ease-out; }
@keyframes cflash{ from{ opacity:1; } to{ opacity:0; } }
.cauth{ position:absolute; left:2.4%; bottom:3cqh; display:flex; gap:1cqw; align-items:center; z-index:6; flex-wrap:wrap; } .cauth span{ display:flex; align-items:center; gap:.5cqw; background:#0b1120dd; color:#fff; border:2px solid var(--c); border-radius:99px; padding:.4cqh 1.2cqw .4cqh .6cqw; font-size:2.8cqh; }
.cauth svg{ width:3.4cqh; height:3.4cqh; color:var(--c); } .cauth em{ color:#8a98b3; font-size:2.2cqh; font-style:normal; }
/* side panel */
.cps{ display:flex; flex-direction:column; gap:4px; } .cp{ display:flex; align-items:center; gap:6px; background:#0b1120; border:1px solid #22304d; border-left:3px solid var(--c); border-radius:5px; padding:2px 6px; font-size:15px; }
.cp .m .mini{ width:24px; height:28px; } .cp .i{ display:flex; align-items:center; gap:4px; color:#8a98b3; } .cp .i svg{ width:18px; height:18px; color:var(--c); } .cp .ok{ margin-left:auto; color:#32d17c; font-weight:700; max-width:45%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.cworld{ display:flex; flex-wrap:wrap; gap:6px; } .cw{ position:relative; display:flex; flex-direction:column; align-items:center; width:72px; font-size:11px; color:#8a98b3; text-transform:uppercase; letter-spacing:.08em; }
.cw img{ width:72px; aspect-ratio:16/9; object-fit:cover; border-radius:4px; border:1px solid #2e3f64; } .cw .cchip,.cw b{ position:absolute; right:-4px; top:-6px; width:20px; height:20px; } .cw b{ background:#0b1120; border-radius:50%; padding:2px; } .cw em{ font-style:normal; }
.cw.debt img{ filter:blur(3px); } .cw.lost img{ filter:grayscale(1); }
.cfilms{ display:flex; flex-direction:column; gap:3px; } .cfilms div{ display:flex; align-items:center; gap:6px; font-size:14px; padding:2px 4px; border-radius:4px; } .cfilms div.on{ background:#18233c; } .cfilms b{ flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .cfilms small{ color:#8a98b3; }
.clog{ margin-top:6px; font-size:13px; display:flex; flex-direction:column; gap:3px; color:#b9c4da; } .clog .cchip{ width:18px; height:18px; font-size:11px; vertical-align:middle; }

/* ======================= CINEOSIS phone */
.cinp{ background:#0b1120 !important; color:#dfe7f5; } .cinp .me{ color:#dfe7f5; border-color:#22304d; font-size:15px; padding-bottom:2px; } .cinp .me .mini{ width:22px; height:26px; }
.cinp .pane{ overflow:hidden; margin-top:4px; } .cinp .tstrip button{ background:#111a2e; border-color:#2e3f64; }
.cm{ flex:1; min-height:0; display:flex; flex-direction:column; gap:6px; font-family:'Courier Prime',monospace; }
.chd{ display:flex; align-items:center; gap:8px; flex:none; } .cmode{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#ffc93c; white-space:nowrap; }
.csay{ flex:1; min-width:0; font:400 clamp(17px,4.6vh,24px)/1.1 var(--hand); color:#fff; } .ccrew{ display:flex; gap:3px; } .ccrew i{ width:20px; height:20px; border-radius:50%; background:var(--c); color:#0b1120; font:700 11px/20px monospace; text-align:center; font-style:normal; box-shadow:0 0 6px var(--c); }
.cbd{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:8px; }
.cl,.cr{ display:flex; flex-direction:column; gap:6px; min-height:0; }
.cprev{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border:1px solid #2e3f64; border-radius:8px; overflow:hidden; flex:none; }
.cprev video,.cprev img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .cprev img.dim{ opacity:.45; } .cprev img.fig{ object-fit:contain; background:repeating-conic-gradient(#141e33 0 25%,#0f182b 0 50%) 0 0/16px 16px; }
.cprev .prov{ position:absolute; left:6px; bottom:6px; display:flex; align-items:center; gap:4px; background:#0b1120dd; color:#ffc93c; font-size:12px; padding:2px 8px; border-radius:99px; font-style:normal; } .cprev .prov svg{ width:14px; height:14px; }
.cprev .cop{ position:absolute; left:50%; top:50%; width:30%; aspect-ratio:1; transform:translate(-50%,-50%); background:#0b1120cc; border-radius:50%; padding:6%; color:#fff; display:block; } .cprev .csd{ position:absolute; left:6px; bottom:6px; width:38px; height:38px; border-radius:50%; background:#000a; color:var(--f); padding:6px; border:2px solid var(--f); }
.cempty{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#5d6c89; font-size:13px; } .cempty svg{ width:56px; }
.clisten{ position:absolute; inset:0; border:0; background:radial-gradient(#1c2a48,#0b1120); color:#3aa0ff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; } .clisten svg{ width:30%; animation:pulse 1.2s infinite; } .clisten small{ color:#8a98b3; }
.cfrom{ font-size:13px; color:var(--c); display:flex; gap:4px; align-items:center; } .cfrom svg{ width:14px; height:14px; }
.cpass{ flex:none; height:54px; display:flex; align-items:center; justify-content:center; gap:10px; border-radius:28px; border:0; background:#32d17c; color:#06210f; font:700 18px 'Courier Prime',monospace; text-transform:uppercase; letter-spacing:.06em; box-shadow:0 0 18px -4px #32d17c; }
.cpass svg{ width:28px; height:28px; } .cpass:disabled{ background:#18233c; color:#5d6c89; box-shadow:none; } .cpass span{ min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.clen{ display:flex; align-items:center; gap:8px; color:#dfe7f5; } .clen svg{ width:22px; height:22px; color:#ffc93c; } .clen input{ flex:1; accent-color:#ffc93c; } .clen b{ font-size:14px; min-width:3.5em; }
.cfind{ display:flex; align-items:center; gap:6px; flex:none; }
.ctype{ flex:1; min-width:0; display:flex; border:1px solid #2e3f64; border-radius:22px; background:#111a2e; overflow:hidden; height:42px; } .ctype input{ flex:1; min-width:0; border:0; background:none; padding:0 12px; font:400 16px var(--hand); color:#fff; outline:none; } .ctype input::placeholder{ color:#5d6c89; }
.ctype button{ border:0; background:#3aa0ff; color:#04111f; padding:0 14px; font:700 14px 'Courier Prime',monospace; text-transform:uppercase; }
.cmic{ position:relative; flex:none; width:46px; height:46px; border-radius:50%; border:0; background:#b06bff; color:#fff; padding:10px; box-sizing:border-box; touch-action:none; box-shadow:0 0 14px -3px #b06bff; } .cmic svg{ width:100%; height:100%; position:relative; z-index:1; }
.cmic i{ position:absolute; inset:-4px; border-radius:50%; border:3px solid #b06bff; opacity:0; } .cmic.on{ background:#7e3ad6; } .cmic.on i{ opacity:.8; }
.cfar{ flex:none; width:46px; height:42px; border-radius:10px; border:1px dashed #3aa0ff; background:none; color:#3aa0ff; padding:8px; box-sizing:border-box; } .cfar svg{ width:100%; height:100%; }
.cnote{ flex:none; min-height:18px; font-size:13px; color:#8a98b3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cnote.busy{ color:#b06bff; animation:pulse 1.2s infinite; }
.cgrid{ flex:1; min-height:0; overflow-y:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:max-content; align-content:start; gap:6px; padding:2px; }
.ci{ position:relative; padding:0; border:2px solid #22304d; border-radius:6px; background:#000; overflow:hidden; } .ci img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; pointer-events:none; }
.ci.on{ border-color:#32d17c; box-shadow:0 0 10px #32d17c88; } .ci.gold{ border-color:#ffc93c; } .ci small{ position:absolute; left:3px; right:3px; bottom:2px; font-size:10px; color:#fff; text-shadow:0 1px 2px #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ci.cd{ border-color:var(--f); } .ci.cd img{ opacity:.55; } .ci.cd b{ position:absolute; inset:25%; color:#fff; } .ci.cd b svg{ width:100%; height:100%; } .ci.motif{ box-shadow:0 0 0 2px #ffc93c; }
.ci.co{ background:#111a2e; color:#dfe7f5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; aspect-ratio:1/.8; } .ci.co svg{ width:42%; } .ci.co small{ position:static; font-size:11px; letter-spacing:.04em; }
.ci.cf{ background:repeating-conic-gradient(#141e33 0 25%,#0f182b 0 50%) 0 0/12px 12px; } .ci.cf img{ object-fit:contain; aspect-ratio:1; }
.ci.static img{ filter:grayscale(1) contrast(1.4); } .ci.static::after{ content:'?'; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:28px; }
.cgrid.place{ display:flex; flex-wrap:wrap; align-items:center; gap:3px; } .cgrid.place .cs{ width:64px; aspect-ratio:16/9; border-radius:3px; overflow:hidden; box-shadow:inset 0 -3px 0 var(--c); } .cgrid.place .cs img{ width:100%; height:100%; object-fit:cover; }
.cslot{ width:18px; height:40px; border:1px dashed #3c4e74; border-radius:4px; background:none; padding:0; } .cslot.on{ width:30px; border:2px solid #32d17c; background:#32d17c33; }
.cgrid.surf{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.ctrail{ position:absolute; left:4px; right:4px; bottom:4px; display:flex; gap:3px; } .ctrail img{ position:static !important; width:16% !important; height:auto !important; aspect-ratio:16/9; border-radius:2px; opacity:.85; border:1px solid #fff6; }
.crec{ flex:none; height:50px; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:26px; border:2px solid #ff3b3b; background:#2a0f16; color:#fff; font:700 15px 'Courier Prime',monospace; text-transform:uppercase; } .crec svg{ width:24px; height:24px; } .crec.done{ background:#ff3b3b; }
.cdone{ grid-column:1/-1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#32d17c; } .cdone svg{ width:70px; } .cdone b{ font-size:20px; color:#fff; } .cdone small{ color:#8a98b3; }
.cby{ display:flex; flex-wrap:wrap; gap:4px; } .cby span{ display:flex; align-items:center; gap:4px; border:1px solid var(--c,#2e3f64); border-radius:99px; padding:1px 8px 1px 3px; font-size:13px; } .cby svg{ width:18px; height:18px; color:var(--c,#fff); }
.cthrowhint{ display:grid; place-items:center; color:#2e3f64; } .cthrowhint svg{ width:60px; }
.ccards,.cvotes,.ckeeps{ grid-column:1/-1; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; align-content:center; overflow-y:auto; }
.ccard{ border:1px solid #2e3f64; border-radius:10px; background:#111a2e; color:#fff; padding:14px 10px; display:flex; flex-direction:column; gap:6px; text-align:left; } .ccard b{ font-size:18px; text-transform:uppercase; letter-spacing:.05em; } .ccard small{ color:#8a98b3; font-size:12px; text-transform:uppercase; }
.ccard.on{ border-color:#ffc93c; box-shadow:0 0 14px -3px #ffc93c; }
.cvo,.ckp{ position:relative; padding:0; border:2px solid var(--c,#2e3f64); border-radius:8px; overflow:hidden; background:#000; color:#fff; } .cvo img,.ckp img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.cvo small{ position:absolute; left:6px; top:4px; font-size:12px; text-shadow:0 1px 2px #000; } .cvo b{ display:block; padding:6px; background:#ff4fa3; font-size:14px; letter-spacing:.1em; } .cvo.on b{ background:#32d17c; color:#06210f; }
.ckp b{ position:absolute; right:6px; top:6px; width:28px; height:28px; color:#5d6c89; } .ckp.on b{ color:#ffc93c; } .ckp.on{ border-color:#ffc93c; box-shadow:0 0 14px -3px #ffc93c; } .ckp.rej img{ filter:grayscale(1); } .ckp i{ position:absolute; left:6px; bottom:6px; color:#ff3b3b; border:2px solid #ff3b3b; font:700 12px monospace; padding:0 4px; font-style:normal; background:#0008; }
.ckp.go{ background:#111a2e; color:#8a98b3; font:700 15px 'Courier Prime',monospace; text-transform:uppercase; min-height:70px; } .ckp.go.on{ color:#fff; }
.cmol.p{ height:auto; aspect-ratio:16/9; background:#0f182b; border:1px solid #22304d; border-radius:8px; flex:none; } .cmol.p .atom{ width:17%; } .cmol.p .bl{ font-size:9px; padding:0 4px; } .cmol.p .atom.on,.cmol.p .bl.on{ outline:2px solid #fff; outline-offset:1px; }
.ctabs{ display:flex; gap:4px; align-items:center; } .ctabs button{ flex:1; height:34px; border-radius:8px; border:1px solid #2e3f64; background:#111a2e; color:#dfe7f5; font:700 13px 'Courier Prime',monospace; text-transform:uppercase; } .ctabs button.on{ background:#3aa0ff; color:#04111f; } .cmoves{ font-size:12px; color:#ffc93c; padding-left:4px; white-space:nowrap; }
.cbonds{ display:flex; flex-wrap:wrap; gap:4px; } .cbonds button{ flex:1 0 30%; height:30px; border-radius:15px; border:1px solid var(--c); background:none; color:var(--c); font:700 11px 'Courier Prime',monospace; text-transform:uppercase; } .cbonds button.on{ background:var(--c); color:#0b1120; }
@media (orientation:portrait){ .cbd{ display:flex; flex-direction:column; } .cl{ flex:none; } .cr{ flex:1; min-height:0; } .cgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .cgrid.surf{ grid-template-columns:repeat(2,minmax(0,1fr)); } .cpass{ height:58px; } }
.ci.cf,.cprev img.fig{ background:repeating-conic-gradient(#e6eaf2 0 25%,#c9d1e0 0 50%) 0 0/14px 14px !important; }

/* ======================= CINEOSIS phone, simple: one thing, ‹ ›, one big button */
.cinp .cm{ position:relative; }
.cmag{ flex:none; width:40px; height:40px; border-radius:50%; border:1px solid #2e3f64; background:#111a2e; color:#dfe7f5; padding:9px; } .cmag svg{ width:100%; height:100%; display:block; } .cmag[hidden]{ display:none; }
.cstage{ position:relative; flex:1; min-height:0; background:#000; border:1px solid #2e3f64; border-radius:12px; overflow:hidden; touch-action:pan-y; }
.cmedia{ position:absolute; inset:0; } .cmedia > video,.cmedia > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.cmedia img.fig{ object-fit:contain; background:repeating-conic-gradient(#e6eaf2 0 25%,#c9d1e0 0 50%) 0 0/16px 16px; }
.cmedia .cb{ position:absolute; inset:0; background:#000; opacity:0; } .cmedia .cx{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
.cmedia .prov{ position:absolute; left:8px; top:8px; display:flex; align-items:center; gap:4px; background:#0b1120dd; color:#ffc93c; font-size:13px; padding:3px 10px; border-radius:99px; font-style:normal; } .cmedia .prov svg{ width:14px; height:14px; }
.csd2{ position:absolute; left:10px; bottom:10px; width:54px; height:54px; border-radius:50%; background:#000b; color:var(--f); padding:10px; border:3px solid var(--f); animation:pulse 1.2s infinite; }
.cline{ position:absolute; left:74px; right:10px; bottom:16px; color:#fff; font:400 18px var(--hand); text-shadow:0 2px 4px #000; font-style:normal; }
.copw{ position:absolute; left:10px; top:10px; display:flex; align-items:center; gap:6px; background:#0b1120dd; color:#fff; border-radius:99px; padding:4px 12px 4px 6px; font:700 14px 'Courier Prime',monospace; } .copw svg{ width:26px; height:26px; color:#ffc93c; }
.cpair{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; padding:10px; } .cpair img{ width:38%; aspect-ratio:16/9; object-fit:cover; border-radius:6px; border:1px solid #2e3f64; } .cpair em{ width:38%; text-align:center; color:#5d6c89; font-style:normal; }
.cpair b{ display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--c,#ffc93c); font:700 15px 'Courier Prime',monospace; text-transform:uppercase; } .cpair b svg{ width:40px; height:40px; } .cpair b.slot{ width:44px; height:70px; border:3px dashed #32d17c; border-radius:8px; justify-content:center; color:#32d17c; } .cpair b.slot svg{ width:26px; }
.cnav{ position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; border:0; background:#0b1120aa; color:#fff; padding:12px; z-index:3; } .cnav svg{ width:100%; height:100%; display:block; } .cnav.l{ left:8px; } .cnav.r{ right:8px; } .cnav[hidden]{ display:none; }
.cdots2{ position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:6px; z-index:3; pointer-events:none; } .cdots2 i{ width:7px; height:7px; border-radius:50%; background:#ffffff55; } .cdots2 i.on{ background:#fff; width:18px; border-radius:4px; }
.cmeta{ flex:none; min-height:26px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .cmeta span{ display:flex; align-items:center; gap:4px; border:1px solid var(--c,#2e3f64); color:#dfe7f5; border-radius:99px; padding:2px 10px 2px 4px; font-size:14px; } .cmeta svg{ width:18px; height:18px; color:var(--c,#fff); }
.chear{ display:flex; align-items:center; gap:6px; border:1px solid #3aa0ff; background:none; color:#3aa0ff; border-radius:99px; padding:4px 12px; font:700 14px 'Courier Prime',monospace; } .chear svg{ width:20px; height:20px; }
.cbig{ flex:none; height:62px; border-radius:31px; border:0; background:#32d17c; color:#06210f; font:700 20px 'Courier Prime',monospace; letter-spacing:.04em; box-shadow:0 0 18px -4px #32d17c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 18px; }
.cbig:disabled{ background:#18233c; color:#8a98b3; box-shadow:none; } .cbig.gold-o{ background:none; border:3px solid #ffc93c; color:#ffc93c; box-shadow:none; } .cbig.gold{ background:#ffc93c; color:#2a1d00; } .cbig.rec{ background:#ff3b3b; color:#fff; box-shadow:0 0 18px -4px #ff3b3b; } .cbig.pink{ background:#ff4fa3; color:#fff; }
.csheet{ position:absolute; left:0; right:0; top:46px; z-index:20; background:#111a2e; border:1px solid #2e3f64; border-radius:12px; padding:10px; box-shadow:0 10px 30px #000a; } .csheet[hidden]{ display:none; }
.cx2{ flex:none; width:40px; height:40px; border-radius:50%; border:1px solid #2e3f64; background:none; color:#dfe7f5; font-size:18px; }
.cdone{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#32d17c; text-align:center; padding:12px; } .cdone svg{ width:64px; } .cdone b{ font-size:22px; color:#fff; } .cdone small{ color:#8a98b3; font-size:14px; }
.cinp .chd{ min-height:40px; } .cinp .csay{ font-size:clamp(19px,5vw,26px); }
@media (orientation:landscape){ .cinp .csay{ font-size:20px; } .cbig{ height:52px; } }
/* stand: between rounds */
.cbetween{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2cqh; } .cbs{ display:flex; gap:.6cqw; flex-wrap:wrap; justify-content:center; max-width:100%; }
.cbs span{ width:13cqw; aspect-ratio:16/9; border-radius:4px; overflow:hidden; border-bottom:3px solid var(--c); } .cbs img{ width:100%; height:100%; object-fit:cover; }
.cbetween b{ font-size:3.4cqh; color:#fff; letter-spacing:.06em; } .cbetween em{ font:400 4.4cqh var(--hand); color:#ffc93c; font-style:normal; }

/* ======================= CINEOSIS LIVE: the stand (program, monitors, timeline) */
#livev{ position:absolute; inset:0; z-index:0; background:#05080f; color:#dfe7f5; font-family:'Courier Prime',monospace; } #livev[hidden]{ display:none; }
.lhead{ position:absolute; left:2%; right:2%; top:1.6cqh; height:6cqh; display:flex; align-items:center; gap:2cqw; white-space:nowrap; }
.lhead b{ background:#ff3b3b; color:#fff; padding:.2cqh 1.2cqw; border-radius:4px; font-size:3.6cqh; letter-spacing:.14em; } .lhead .reel{ font-size:3cqh; color:#ffc93c; letter-spacing:.14em; }
.lhead .rec{ font-size:3cqh; color:#8a98b3; letter-spacing:.1em; } .lhead .rec.on{ color:#ff3b3b; animation:pulse 1s infinite; } .lhead .tm{ font-size:3.4cqh; color:#fff; } .lhead .song{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; color:#8a98b3; font-size:2.6cqh; }
.beatlamp{ width:3cqh; height:3cqh; border-radius:50%; background:#1b2540; } #livev.beat .beatlamp{ background:#ffc93c; box-shadow:0 0 14px #ffc93c; }
.lprog{ position:absolute; left:2%; top:9cqh; width:62%; aspect-ratio:16/9; background:#000; border:3px solid #22304d; border-radius:6px; overflow:hidden; } #livev.beat .lprog{ border-color:#3c4e74; }
.lprog .ll{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
.lair{ position:absolute; left:1.4cqw; top:1.4cqh; z-index:5; display:flex; align-items:center; gap:.6cqw; } .lair b{ background:var(--c,#ff3b3b); color:#05080f; padding:.2cqh 1cqw; border-radius:4px; font-size:2.6cqh; letter-spacing:.12em; } .lair .mini{ width:4.6cqh; height:5.4cqh; }
.lair.hog b{ animation:pulse .4s infinite; background:#ff3b3b; color:#fff; } .lair.hog b::after{ content:' · CUT AWAY!'; }
.lpops{ position:absolute; inset:0; pointer-events:none; z-index:6; } .lpop{ position:absolute; left:50%; transform:translateX(-50%); color:var(--c); font:700 5.4cqh 'Courier Prime',monospace; text-shadow:0 0 12px var(--c),0 2px 0 #000; animation:lpop 1.4s ease-out forwards; white-space:nowrap; }
@keyframes lpop{ from{ opacity:1; transform:translate(-50%,0) scale(1.3); } to{ opacity:0; transform:translate(-50%,-8cqh) scale(1); } }
.lcount{ position:absolute; inset:0; display:grid; place-items:center; font:700 30cqh 'Courier Prime',monospace; color:#fff; opacity:0; z-index:7; text-shadow:0 0 30px #ff3b3b; } .lcount.on{ opacity:1; animation:lpop .8s ease-out; }
.lmons{ position:absolute; left:66%; right:2%; top:9cqh; display:grid; grid-template-columns:repeat(2,1fr); gap:1cqh; align-content:start; }
.lmon{ position:relative; aspect-ratio:16/9; background:#000; border:3px solid var(--c); border-radius:5px; overflow:hidden; opacity:.85; } .lmon video{ width:100%; height:100%; object-fit:cover; display:block; }
.lmon b{ position:absolute; left:3px; bottom:2px; display:flex; align-items:center; gap:4px; color:#fff; font-size:2.6cqh; text-shadow:0 1px 3px #000; } .lmon b .mini{ width:3.8cqh; height:4.4cqh; } .lmon b span{ color:var(--c); }
.lmon.on{ opacity:1; box-shadow:0 0 18px var(--c); } .lmon.on .tally{ position:absolute; right:4px; top:4px; width:2.4cqh; height:2.4cqh; border-radius:50%; background:#ff3b3b; box-shadow:0 0 10px #ff3b3b; } .lmon.ready::after{ content:'✓'; position:absolute; right:6px; top:2px; color:#32d17c; font-size:4cqh; }
.ltl{ position:absolute; left:2%; right:2%; bottom:2cqh; height:8cqh; background:#0b1120; border:1px solid #22304d; border-radius:5px; overflow:hidden; } .ltrack{ position:absolute; inset:1cqh 0; }
.ltrack span{ position:absolute; top:0; bottom:0; background:var(--c); border-right:2px solid #05080f; opacity:.85; } .ltrack span.mix{ background:linear-gradient(90deg,transparent,var(--c) 30%); }
.lph{ position:absolute; top:0; bottom:0; width:3px; background:#fff; box-shadow:0 0 8px #fff; }
.lattract{ position:absolute; left:2%; top:9cqh; width:62%; aspect-ratio:16/9; display:none; align-items:center; justify-content:space-around; z-index:8; background:#05080fdd; border-radius:6px; }
.lattract.on{ display:flex; } .la1{ display:flex; flex-direction:column; align-items:center; gap:2cqh; color:#dfe7f5; } .la1 b{ font-size:3cqh; letter-spacing:.1em; text-transform:uppercase; }
.la1 .pad{ position:relative; width:16cqh; height:16cqh; color:#3aa0ff; animation:lwig 1.6s ease-in-out infinite; } .la1 .pad svg{ width:100%; height:100%; } .la1 .pad.h{ animation-name:lwag; color:#ffc93c; } .la1 .pad i{ display:none; }
.la1 .btn1{ width:15cqh; height:15cqh; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ff7b7b,#d61f1f 60%,#7a0d0d); box-shadow:0 1.2cqh 0 #5a0808; animation:lpress 1.2s infinite; } .la1 .btn1.hold{ animation:lhold 2.4s infinite; }
@keyframes lwig{ 0%,100%{ transform:translateY(0); } 25%{ transform:translateY(-1.4cqh); } 75%{ transform:translateY(1.4cqh); } } @keyframes lwag{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-1.4cqh); } 75%{ transform:translateX(1.4cqh); } }
@keyframes lpress{ 0%,60%,100%{ transform:translateY(0); box-shadow:0 1.2cqh 0 #5a0808; } 70%{ transform:translateY(1cqh); box-shadow:0 .2cqh 0 #5a0808; } } @keyframes lhold{ 0%,20%,100%{ transform:translateY(0); box-shadow:0 1.2cqh 0 #5a0808; } 30%,80%{ transform:translateY(1cqh); box-shadow:0 .2cqh 0 #5a0808; filter:brightness(1.3); } }
.lrows{ display:flex; flex-direction:column; gap:4px; } .lrow{ display:flex; align-items:center; gap:8px; background:#0b1120; border:1px solid #22304d; border-left:4px solid var(--c); border-radius:5px; padding:3px 8px; } .lrow.on{ box-shadow:0 0 12px -2px var(--c); }
.lrow .m .mini{ width:26px; height:30px; } .lrow b{ flex:1; } .lrow .pts{ font:700 22px 'Courier Prime',monospace; color:var(--c); letter-spacing:.06em; } .lrow i{ color:#32d17c; font-style:normal; }

/* ======================= CINEOSIS LIVE: the gamepad */
.livep .pane{ overflow:hidden; } .gp{ flex:1; min-height:0; display:grid; grid-template-columns:1fr 1.25fr 1fr; grid-template-rows:1fr; align-items:center; gap:10px; }
.gmon{ position:relative; grid-column:2; width:100%; aspect-ratio:16/9; background:#000; border:3px solid var(--c,#2e3f64); border-radius:10px; overflow:hidden; } .gmon video{ width:100%; height:100%; object-fit:cover; display:block; }
.gmon.on{ border-color:#ff3b3b; box-shadow:0 0 20px #ff3b3b; } .glamp{ position:absolute; right:8px; top:8px; width:14px; height:14px; border-radius:50%; background:#1b2540; } .gmon.on .glamp{ background:#ff3b3b; box-shadow:0 0 10px #ff3b3b; }
.gpts{ position:absolute; left:8px; top:6px; font:700 18px 'Courier Prime',monospace; color:var(--c,#fff); text-shadow:0 1px 3px #000; }
.gmsg{ position:absolute; left:0; right:0; bottom:0; padding:4px 8px; background:#05080fcc; color:#fff; font:700 14px 'Courier Prime',monospace; text-align:center; letter-spacing:.06em; text-transform:uppercase; } .gmsg.bad{ background:#ff3b3b; }
.gpad{ grid-column:1; grid-row:1; position:relative; width:min(100%,38vh); aspect-ratio:1; justify-self:center; color:#3aa0ff; touch-action:none; } .gpad svg{ width:100%; height:100%; pointer-events:none; }
.gnub{ position:absolute; left:50%; top:50%; width:34%; height:34%; margin:-17% 0 0 -17%; border-radius:50%; background:radial-gradient(circle at 35% 30%,#7ec2ff,#2a6fd0); box-shadow:0 4px 0 #173c73; pointer-events:none; transition:transform .06s; }
.gfire{ grid-column:3; grid-row:1; justify-self:center; width:min(100%,36vh); aspect-ratio:1; border-radius:50%; border:0; background:radial-gradient(circle at 35% 30%,#ff7b7b,#d61f1f 60%,#7a0d0d); box-shadow:0 10px 0 #5a0808,0 0 24px #ff3b3b55; touch-action:none; transition:transform .05s, box-shadow .05s; }
.gfire.down{ transform:translateY(8px); box-shadow:0 2px 0 #5a0808,0 0 40px #ff3b3b; } .gfire.ready{ background:radial-gradient(circle at 35% 30%,#7dffb4,#1fae5c 60%,#0d5a2d); box-shadow:0 10px 0 #0a3d1f; } .gfire.dim{ filter:grayscale(.7) brightness(.6); }
@media (orientation:portrait){ .gp{ grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr; } .gmon{ grid-column:1/-1; grid-row:1; } .gpad{ grid-column:1; grid-row:2; width:min(100%,40vw); } .gfire{ grid-column:2; grid-row:2; width:min(100%,40vw); } }
.la1 .pad{ display:block; } .la1 .pad svg{ display:block; }
.lprog,.lattract{ width:auto; height:76cqh; aspect-ratio:16/9; }
.lmons{ left:calc(2% + 76cqh * 16 / 9 + 1.6cqw); grid-template-columns:repeat(auto-fill,minmax(28cqh,1fr)); max-height:76cqh; overflow:hidden; }
.ltl{ height:7cqh; bottom:1.6cqh; }
#top #newB.sure{ background:#c8553d; color:#fff; } #top #goneB{ background:#ecc94b; }
.tw.off{ cursor:pointer; } .tw.bye .rig{ filter:grayscale(1) opacity(.4); } .tw.bye .bubble{ color:#c8553d; }