@font-face { font-family: "Fredoka"; src: url("../../vendor/fonts/fredoka-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
:root { --ink: #fff; --red: #ff2d4b; --gold: #ffc61a; --bg: #140f1c; --ui: "Fredoka", "Arial Rounded MT Bold", "Hiragino Sans", "Apple SD Gothic Neo", Thonburi, sans-serif; --cap: "Arial Black", "Helvetica Neue", "Hiragino Sans", "Apple SD Gothic Neo", Thonburi, sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; font-family: var(--ui); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#c { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; }

/* meters */
.hud { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 12px; right: 12px; display: grid; gap: 6px; pointer-events: none; opacity: 0; transform: translateY(-20px); transition: .5s cubic-bezier(.3,1.5,.5,1); }
.hud.on { opacity: 1; transform: none; }
.meter { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; background: rgba(12,10,24,.72); border: 2px solid rgba(255,255,255,.14); border-radius: 999px; padding: 5px 12px 5px 12px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.lab { font-weight: 700; font-size: 12px; letter-spacing: .06em; white-space: nowrap; }
.bar { height: 14px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,.5); }
.fill { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); border-radius: 99px; }
.fill.prod { background: linear-gradient(90deg, #2bd46b, #ffe11a 60%, #ff4a3a); box-shadow: 0 0 14px rgba(255,225,26,.7); }
.fill.story { background: linear-gradient(90deg, #ffd27a, #ffb030); box-shadow: 0 0 14px rgba(255,190,80,.9); }
.val { font: 900 15px/1 var(--cap); min-width: 62px; text-align: right; }
.meter.dead .lab, .meter.dead .val { color: #8d8a9a; }
.meter.gold { border-color: #ffc61a; box-shadow: 0 0 24px rgba(255,198,26,.6); }
.meter.gold .lab, .meter.gold .val { color: #ffd27a; }

/* the CEO's caption: viral-caption style */
.ceo { position: fixed; top: calc(84px + env(safe-area-inset-top)); left: 14px; right: 14px; text-align: center; pointer-events: none; opacity: 0; transform: scale(.9); transition: opacity .18s, transform .25s cubic-bezier(.3,1.7,.5,1); }
.ceo.on { opacity: 1; transform: none; }
.ceoTag { display: inline-block; font: 900 11px/1 var(--cap); letter-spacing: .2em; background: #9df3ff; color: #0a1030; padding: 4px 8px 3px; border-radius: 6px; margin-bottom: 6px; box-shadow: 0 0 14px rgba(157,243,255,.7); }
.ceoLine { font: 900 clamp(22px, 6.6vw, 34px)/1.12 var(--cap); color: #fff; -webkit-text-stroke: 2px #000; paint-order: stroke fill; text-shadow: 0 4px 0 #000, 0 0 22px rgba(0,0,0,.65); text-transform: none; }
.ceo.loud .ceoLine { font-size: clamp(24px, 7.4vw, 40px); }
.ceoLine .w { display: inline-block; animation: pop .22s cubic-bezier(.3,1.8,.5,1) both; }
.ceoLine .w.hl { color: #ffe11a; }
@keyframes pop { from { transform: scale(.3) translateY(10px) rotate(-6deg); opacity: 0 } to { transform: none; opacity: 1 } }

/* order ticket: icons + a timer */
.ticket { position: fixed; top: calc(190px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%) scale(.6) rotate(-3deg); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 300px; padding: 8px 12px 14px; background: #fbf6ea; border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,.5), 0 0 0 3px #16141a; opacity: 0; pointer-events: none; transition: .3s cubic-bezier(.3,1.7,.5,1); }
.ticket.on { opacity: 1; transform: translateX(-50%) rotate(-3deg); }
.ticket.bump { transform: translateX(-50%) rotate(2deg) scale(1.12); }
.ticket .ico { width: 44px; height: 44px; background: #16141a; border-radius: 9px; padding: 3px; }
.tbar { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 5px; border-radius: 9px; background: #e8213a; transform-origin: left; }

.bubbles { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.bub { position: absolute; left: 0; top: 0; max-width: 210px; padding: 9px 13px 10px; border-radius: 16px; background: #fff; color: #16141a; font: 700 15px/1.2 var(--ui); box-shadow: 0 8px 20px rgba(0,0,0,.4), 0 0 0 3px #16141a; animation: bub .35s cubic-bezier(.3,1.8,.5,1) both; transition: opacity .3s; --tail: 50%; }
.bub::after { content: ""; position: absolute; left: calc(var(--tail) - 9px); bottom: -11px; border: 9px solid transparent; border-top-color: #fff; border-bottom: 0; filter: drop-shadow(0 3px 0 #16141a); }
.bub.out { opacity: 0; }
.bub.talk { font-size: 12px; background: #e8f4ff; max-width: 170px; }
.bub.talk::after { border-top-color: #e8f4ff; }
.bub.rebel { font: 900 16px/1.15 var(--cap); }
.bub.gold { background: #ffe7a6; box-shadow: 0 0 26px rgba(255,200,90,.9), 0 0 0 3px #16141a; }
.bub.gold::after { border-top-color: #ffe7a6; }
@keyframes bub { from { transform: scale(.2); opacity: 0 } }

.stamp { position: fixed; top: 46%; left: 50%; transform: translate(-50%, -50%) rotate(-8deg); font: 900 clamp(40px, 13vw, 84px)/1 var(--cap); color: var(--c, #ff2d4b); -webkit-text-stroke: 3px #16141a; paint-order: stroke fill; text-shadow: 0 6px 0 #16141a, 0 0 30px var(--c); pointer-events: none; animation: stamp .5s cubic-bezier(.2,1.8,.4,1) both; white-space: nowrap; }
@keyframes stamp { from { transform: translate(-50%, -50%) rotate(-8deg) scale(2.4); opacity: 0 } to { transform: translate(-50%, -50%) rotate(-8deg) scale(1); opacity: 1 } }
.prompt { position: fixed; left: 54px; right: 54px; bottom: calc(18px + env(safe-area-inset-bottom)); text-align: center; font: 700 15px/1.2 var(--ui); color: #fff; text-shadow: 0 2px 6px #000; opacity: 0; transition: opacity .4s; pointer-events: none; }
.prompt.on { opacity: 1; animation: breathe 1.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: translateY(-4px); } }
.forgeTitle { position: fixed; top: 22%; left: 16px; right: 16px; text-align: center; font: 900 clamp(26px, 8vw, 46px)/1.05 var(--cap); color: #ffe7a6; text-shadow: 0 0 30px rgba(255,170,60,.9), 0 4px 0 #3a1a08; opacity: 0; transition: opacity .6s, transform .6s; transform: translateY(10px); pointer-events: none; }
.forgeTitle.on { opacity: 1; transform: none; }
.mute { position: fixed; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); background: rgba(0,0,0,.4) center/20px no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4z'/%3E%3C/svg%3E"); cursor: pointer; }
.mute.off { opacity: .45; }

/* title */
.title { position: fixed; inset: 0; display: grid; align-items: end; justify-items: center; text-align: center; padding: 24px 16px calc(46px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(20,15,28,.0) 30%, rgba(20,15,28,.55) 62%, rgba(12,8,20,.92) 100%); transition: opacity .8s ease; }
.title.gone { opacity: 0; pointer-events: none; }
.title__inner { max-width: 560px; }
.logo { margin: 0; line-height: .9; }
.logo span { display: block; font: 900 clamp(46px, 14vw, 96px)/.9 var(--cap); color: #ffe11a; -webkit-text-stroke: 3px #16141a; paint-order: stroke fill; text-shadow: 0 7px 0 #16141a, 0 0 40px rgba(255,200,40,.5); transform: rotate(-3deg); letter-spacing: -.02em; }
.logo b { display: inline-block; margin-top: 10px; font: 900 clamp(20px, 6vw, 34px)/1 var(--cap); color: #fff; background: #e8213a; padding: 7px 14px 6px; border-radius: 8px; transform: rotate(2deg); box-shadow: 0 5px 0 #16141a; letter-spacing: .04em; }
.tag { margin: 18px 0 22px; font-size: clamp(16px, 4.4vw, 20px); font-weight: 600; color: #f4ecff; text-shadow: 0 2px 10px #000; }
.enter { font: 900 22px/1 var(--cap); color: #16141a; background: linear-gradient(#fff27a, #ffc61a); border: 0; border-radius: 16px; padding: 18px 44px; box-shadow: 0 6px 0 #a87a00, 0 0 0 3px #16141a, 0 16px 40px rgba(255,190,40,.4); cursor: pointer; letter-spacing: .04em; animation: nudge 2.2s ease-in-out infinite; }
.enter:active { transform: translateY(4px); box-shadow: 0 2px 0 #a87a00, 0 0 0 3px #16141a; }
@keyframes nudge { 0%, 80%, 100% { transform: none } 85% { transform: rotate(-3deg) scale(1.04) } 90% { transform: rotate(3deg) scale(1.04) } }
.hint { margin-top: 16px; font-size: 13px; opacity: .75; }

/* the report */
.card { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: calc(14px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); background: rgba(10,8,18,.88); animation: fadein .8s ease both; }
@keyframes fadein { from { opacity: 0 } }
.cardImg { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; }
.report { max-height: 100%; max-width: 100%; height: auto; width: auto; border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.6); animation: drop .7s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes drop { from { transform: translateY(-40px) rotate(-4deg) scale(.9); opacity: 0 } }
.cardBtns { display: grid; gap: 8px; width: min(360px, 100%); }
.btn { font: 800 16px/1 var(--ui); width: 100%; padding: 15px; border-radius: 14px; border: 2px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.btn--main { background: linear-gradient(#fff27a, #ffc61a); color: #16141a; border: 0; box-shadow: 0 4px 0 #a87a00; }
.bootfail { position: fixed; inset: auto 16px 40px; text-align: center; background: #000; padding: 14px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .ceoLine .w, .stamp, .bub, .enter, .prompt.on { animation: none } }

/* ── STREAMER MODE (?stream=<channel>): chat's ballot is a CEO order ticket. HOOK red vs STORY gold, a red countdown ── */
.sv { position: fixed; z-index: 4; left: 14px; right: 14px; top: calc(216px + env(safe-area-inset-top)); max-width: 380px; margin: 0 auto; padding: 10px 10px 9px; border-radius: 12px; background: #fbf6ea; color: #16141a; box-shadow: 0 12px 28px rgba(0,0,0,.5), 0 0 0 3px #16141a; transform: rotate(-1.5deg); }
.sv.on { animation: svIn .4s cubic-bezier(.3,1.7,.5,1) both; }
@keyframes svIn { from { transform: rotate(-4deg) scale(.6); opacity: 0; } }
.sv__head { display: flex; align-items: center; gap: 8px; margin: 0 2px 7px; }
.sv__k { font: 900 15px/1 var(--cap); letter-spacing: .06em; color: #e8213a; white-space: nowrap; }
.sv__hint { flex: 1; min-width: 0; font: 700 13px/1.1 var(--ui); color: #5a5566; }
.sv__n { flex: none; width: 44px; height: 44px; margin: -4px 0; border-radius: 50%; display: grid; place-items: center; font: 900 24px/1 var(--cap); color: #fff; background: #16141a; box-shadow: 0 3px 0 #000; }
.sv.urgent .sv__n { background: #e8213a; animation: svTick 1s ease-in-out infinite; }
.sv.done .sv__n { visibility: hidden; animation: none; }
@keyframes svTick { 50% { transform: scale(1.14) rotate(6deg); } }
.sv__opts { display: grid; gap: 6px; }
.sv__opt { position: relative; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 9px; width: 100%; min-height: 52px; padding: 5px 11px 5px 6px; border: 0; border-radius: 10px; background: #ece4d2; color: #16141a; overflow: hidden; text-align: left; font: inherit; cursor: pointer; transition: opacity .3s; }
.sv__opt > :not(.sv__bar) { position: relative; z-index: 1; }
.sv__bar { position: absolute; inset: 0; z-index: 0; transform-origin: left; transition: transform .35s cubic-bezier(.3,1.4,.5,1); opacity: .38; }
.sv__key { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 9px; font: 900 24px/1 var(--cap); color: #fff; box-shadow: 0 3px 0 #16141a; }
.sv__lab { display: grid; gap: 2px; min-width: 0; }
.sv__lab small { font: 900 11px/1 var(--cap); letter-spacing: .12em; }
.sv__lab em { font: 700 17px/1.1 var(--ui); font-style: normal; }
.sv__pct { font: 900 22px/1 var(--cap); min-width: 2.6em; text-align: right; }
.sv__opt--a .sv__key, .sv__opt--a .sv__bar { background: #ff2d4b; } .sv__opt--a small, .sv__opt--a .sv__pct { color: #d8142f; }
.sv__opt--b .sv__key, .sv__opt--b .sv__bar { background: #ffb030; } .sv__opt--b small, .sv__opt--b .sv__pct { color: #b86e00; }
.sv__opt--b .sv__key { color: #16141a; }
.sv__opt.lead { box-shadow: inset 0 0 0 3px #16141a; }
.sv.done .sv__opt:not(.win) { opacity: .35; }
.sv__votes { margin: 5px 4px 0; font: 700 12px/1 var(--ui); color: #5a5566; }
.sv__res { margin: 7px 0 1px; text-align: center; font: 900 19px/1.1 var(--cap); color: #e8213a; }
.svtag { position: fixed; z-index: 4; left: 12px; bottom: calc(62px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 99px; background: rgba(12,10,24,.72); border: 2px solid rgba(255,255,255,.14); font: 700 12px/1 var(--ui); color: #fff; pointer-events: none; white-space: nowrap; }
.svtag__dot { width: 8px; height: 8px; border-radius: 50%; background: #ff2d4b; box-shadow: 0 0 8px #ff2d4b; animation: svTick 1.4s ease-in-out infinite; }
.svEnd { margin: 0; text-align: center; font: 900 16px/1.2 var(--cap); color: #ffc61a; text-shadow: 0 2px 0 #16141a; }
.card:not([hidden]) ~ .sv, .card:not([hidden]) ~ .svtag { display: none !important; } /* the report owns the screen */
/* a captured desktop window (OBS): the ballot docks right, the tag bottom-left */
@media (orientation: landscape) and (min-width: 820px) {
  .stream .sv { left: auto; right: 14px; top: calc(216px + env(safe-area-inset-top)); width: min(400px, 34vw); max-width: none; } /* under the CEO's caption, never over it */
  .stream .svtag { bottom: 14px; }
}
@media (orientation: landscape) and (min-height: 900px) { .stream .sv, .stream .svtag, .stream .hud { zoom: 1.35; } .stream .ceo { top: 110px; } .stream .sv { top: 190px; } }
/* group-chat line (11-09): the quip under the report + "Send to the group chat" with explicit LINE / WhatsApp links.
   .cardImg flexes, so the report shrinks to make the room and the real exit stays on a 390x844 phone. */
.tsQuip { margin: 0; width: min(360px, 100%); text-align: center; font: 800 14px/1.25 var(--ui); color: #fff; }
.tsRow { display: flex; gap: 6px; }
.tsRow .btn { flex: 1; min-width: 0; padding: 13px 10px; border-color: rgba(255,198,26,.7); }
.tsLink { flex: 0 0 auto; display: flex; align-items: center; padding: 0 11px; border-radius: 14px; border: 2px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06); color: #fff; font: 800 12px/1 var(--ui); text-decoration: none; }
.card:has(#tsRow:not([hidden])) { gap: 9px; }
.card:has(#tsRow:not([hidden])) .cardBtns .btn { padding-top: 13px; padding-bottom: 13px; }