/* SillyFight world kit: TV + phone styles shared by the three secret-orders world games */
.timer{font-family:var(--head);font-size:22px;letter-spacing:1px;background:var(--ink);color:var(--accent);padding:2px 10px;display:inline-block}
.phase-h{font-family:var(--head);font-size:28px;letter-spacing:1px;color:var(--primary);margin:6px 0 4px}
.rules{padding-left:0;list-style:none;margin:6px 0}.rules li{margin:6px 0}
.waitbox{text-align:center;padding:12px 6px}.waitbox .e{font-size:60px;line-height:1.1}.waitbox h2{margin:6px 0}
.rolebadge{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:3px solid;background:#fbf5e4;font-size:21px;vertical-align:middle;margin-right:6px}
.newscard{border:3px solid var(--ink);background:#1f1a15;color:#f3e8cf;padding:8px 10px;margin:6px 0 10px;display:flex;gap:10px;align-items:center;font-size:14px;line-height:1.3;box-shadow:3px 3px 0 var(--accent)}
.newscard .ce{font-size:36px;line-height:1}.newscard b{display:block;font-family:var(--head);font-weight:400;font-size:21px;letter-spacing:.5px;color:var(--accent)}
.sealed{border:3px dashed var(--ink);padding:8px 10px;margin:8px 0;font-size:15px}
.evlines{list-style:none;padding:0;margin:8px 0;font-size:15px}.evlines li{padding:4px 0;border-bottom:2px dashed rgba(31,26,21,.3)}
.row2{display:flex;gap:8px;margin-top:8px}.row2 .btn{flex:1}
.gobtn{font-size:28px!important;min-height:64px!important}
.meters{display:flex;gap:8px;flex-wrap:wrap;font-size:14px;margin:8px 0}.meters span{border:2px solid var(--ink);padding:2px 8px;background:var(--paper)}
/* order lists on the phone */
.olist{margin:4px 0}.olist h4{font-family:var(--head);font-weight:400;font-size:19px;letter-spacing:.5px;margin:10px 0 4px;border-bottom:2px solid var(--ink)}
.orow{display:flex;align-items:center;gap:8px;border-bottom:2px dashed rgba(31,26,21,.25);padding:5px 0;min-height:52px}
.orow .on{flex:1;min-width:0;line-height:1.15}.orow .on b{font-size:17px}.orow .on small{display:block;font-size:13px;opacity:.8}
.orow.sel{background:rgba(226,167,46,.25)}.orow.off{opacity:.45}
.step{display:flex;align-items:center;gap:4px}.step button{width:46px;height:46px;font-size:24px;border:3px solid var(--ink);background:var(--paper);box-shadow:2px 2px 0 var(--ink);cursor:pointer;font-family:var(--head);touch-action:manipulation;color:var(--ink)}
.step button[disabled]{opacity:.35}.step .n{min-width:30px;text-align:center;font-family:var(--head);font-size:26px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.chip{border:3px solid var(--ink);background:var(--paper);padding:6px 10px;font-size:16px;cursor:pointer;box-shadow:2px 2px 0 var(--ink);min-height:44px;color:var(--ink);font-family:var(--font);touch-action:manipulation}
.chip.on{background:var(--accent);color:#1f1a15}.chip[disabled]{opacity:.4;cursor:default}
.left{font-family:var(--head);font-size:22px;letter-spacing:.5px}
/* ---------------- TV ---------------- */
body.wktv{padding:0;overflow:hidden;font-size:clamp(14px,1.1vw,22px)}
.tv{display:grid;grid-template-columns:1fr clamp(280px,27vw,520px);grid-template-rows:auto 1fr auto;gap:clamp(8px,1vw,18px);height:100vh;padding:clamp(8px,1.1vw,22px)}
.tvtop{grid-column:1/3;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:6px double var(--ink);padding-bottom:6px}
.tvlogo{font-family:var(--logo);font-size:clamp(26px,3.2vw,60px);line-height:1}.tvlogo .s{color:var(--ink);text-shadow:3px 3px 0 var(--accent)}.tvlogo .f{color:var(--primary);text-shadow:3px 3px 0 var(--ink)}
.tvtitle{font-family:var(--head);font-size:clamp(22px,2.6vw,52px);letter-spacing:2px;color:var(--primary)}
.roomcode{font-family:var(--head);font-size:clamp(22px,2.4vw,48px);letter-spacing:4px;background:var(--ink);color:var(--accent);padding:2px 16px}
.bwrap{position:relative;border:4px solid var(--ink);background:#f3e8cf;overflow:hidden;display:flex;flex-direction:column;min-height:0}
#fieldBody{flex:1;display:flex;flex-direction:column;position:relative;min-height:0}
.news{background:var(--ink);color:var(--paper);padding:6px 14px 8px;min-height:3.4em}
.news .now{font-family:var(--head);font-size:clamp(20px,1.9vw,40px);letter-spacing:1px;line-height:1.1;display:flex;align-items:center;gap:12px}
.news .now .timer{font-size:inherit;background:var(--primary);color:var(--primary-ink);margin-left:auto;flex:none}
.news .prev{font-size:clamp(12px,.95vw,19px);opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side{display:flex;flex-direction:column;gap:clamp(8px,1vw,16px);min-height:0}
.panel{border:3px solid var(--ink);background:url(../shared/grain.png) 0 0/200px repeat,#f6ecd4;padding:clamp(8px,.9vw,16px);box-shadow:5px 5px 0 var(--ink)}
.panel h3{font-family:var(--head);font-weight:400;font-size:clamp(20px,1.7vw,36px);letter-spacing:1px;margin:0 0 6px;color:var(--primary)}
.qr svg{width:100%;height:auto;display:block;background:#fff;max-height:34vh;width:auto;max-width:100%;margin:0 auto}
body[data-phase=orders] .qr,body[data-phase=reveal] .qr{display:none}
body[data-phase=final] .qr svg{max-height:16vh}body[data-phase=final] .qr h3{display:none}
body[data-phase=lobby] .logp{display:none}
.logp{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.log{flex:1;min-height:0;overflow:hidden;font-size:clamp(15px,1.25vw,27px);line-height:1.2;-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
.le{border-left:6px solid rgba(31,26,21,.35);padding:2px 0 2px 10px;margin:0 0 10px}.le.cur{border-left-color:var(--primary)}
.le .lh{font-family:var(--head);font-size:120%;letter-spacing:.5px;line-height:1}.le.cur .lh{color:var(--primary)}
.le ul{list-style:none;margin:2px 0 0;padding:0}.le li{margin:3px 0}.le li.new{animation:logIn .35s ease-out}
@keyframes logIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.joinurl{font-family:var(--font);font-size:clamp(12px,.9vw,18px);word-break:break-all;text-align:center;margin-top:4px}
.plist{list-style:none;padding:0;margin:0}
.plist li{display:flex;align-items:center;gap:8px;border-bottom:2px dashed rgba(31,26,21,.35);padding:5px 2px;font-size:clamp(14px,1.1vw,23px);position:relative}
.plist li.on{background:var(--accent);color:#1f1a15;font-weight:600}
.plist .pp{flex:none;width:1.9em;height:1.9em;border-radius:50%;border:4px solid;display:flex;align-items:center;justify-content:center;background:#fbf5e4}
.plist .nmw{flex:1;min-width:0;line-height:1.1}.plist .nm{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.plist .rl{font-size:75%;opacity:.8;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plist .meta{font-size:85%;white-space:nowrap;font-family:var(--head);letter-spacing:.5px}
.plist .rdy{font-size:105%}.plist .rdy.wait{animation:bob 1.4s infinite;display:inline-block}
.tvctl{grid-column:1/3;display:flex;gap:12px;justify-content:center;align-items:center}
.tvctl .btn{font-size:clamp(18px,1.6vw,30px);min-height:44px}.tvctl .mute{position:static}
.diffbtns{display:flex;gap:8px}.diffbtns .btn{width:auto;min-height:44px;font-size:clamp(16px,1.4vw,26px)}.diffbtns .btn.on{background:var(--accent);color:#1f1a15}
.lobbyv{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2%;background:rgba(243,232,207,.9)}
.lobbyv p{font-size:clamp(14px,1.25vw,26px);margin:6px 4%}
.lobbyv .roles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 4%;font-size:clamp(13px,1.05vw,20px)}.lobbyv .roles span{border:2px solid var(--ink);background:#fbf5e4;padding:2px 8px}
.lobbyp{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:2% 4%}
.lobbyp span{font-family:var(--head);font-size:clamp(22px,2.2vw,46px);background:var(--accent);border:3px solid var(--ink);padding:4px 14px;transform:rotate(-2deg);box-shadow:4px 4px 0 var(--ink);animation:pop .3s}
.lobbyp span:nth-child(2n){transform:rotate(2deg);background:var(--paper)}
.bigcode{font-family:var(--head);font-size:clamp(60px,9vw,200px);letter-spacing:12px;color:var(--primary);text-shadow:5px 5px 0 var(--ink);line-height:1}
.overlay{position:absolute;inset:0;background:rgba(31,26,21,.9);color:#f3e8cf;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;text-align:center;padding:2%;animation:pop .4s}
.overlay h2{font-family:var(--head);font-size:clamp(34px,4.4vw,96px);color:var(--accent);margin:0;line-height:1}
.overlay .big{font-size:clamp(70px,10vw,220px);line-height:1;animation:bob 1.6s infinite}
.overlay .why{font-size:clamp(16px,1.5vw,32px);max-width:75%}
.overlay table{border-collapse:collapse;margin-top:12px;font-size:clamp(14px,1.3vw,28px)}.overlay td{border-bottom:1px solid rgba(243,232,207,.3);padding:4px 14px;text-align:left}
.overlay tr.w td{color:var(--accent)}
/* status row under the map */
.status{display:flex;gap:clamp(8px,1vw,16px);align-items:stretch;padding:clamp(6px,.6vw,12px) clamp(8px,1vw,18px);flex:none;background:rgba(31,26,21,.06);border-top:3px solid var(--ink)}
.rbox{background:#1f1a15;color:#f3e8cf;font-family:var(--head);font-size:clamp(12px,.9vw,18px);letter-spacing:1px;line-height:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:4px 14px;min-width:clamp(80px,7vw,140px);border:3px solid var(--ink)}
.rbox b{font-weight:400;font-size:220%;color:var(--accent)}
.evcard{flex:1;border:3px solid var(--ink);background:#1f1a15;color:#f3e8cf;display:flex;align-items:center;gap:12px;padding:4px 14px;min-height:clamp(50px,6.4vh,84px)}
.evcard .ce{font-size:clamp(28px,2.8vw,56px);line-height:1}.evcard .cn{font-family:var(--head);font-size:clamp(17px,1.55vw,32px);letter-spacing:.5px;line-height:1.05;color:var(--accent)}
.evcard .cn small{display:block;font-family:var(--font);font-size:62%;color:#f3e8cf;letter-spacing:0;opacity:.9;margin-top:2px}
.evcard.flip{animation:flip .7s}
@keyframes flip{0%{transform:rotateX(90deg)}100%{transform:none}}
/* the map */
.mapwrap{position:relative;flex:1;min-height:0;overflow:hidden;background:#9cc7d9}
.mapwrap svg.world{position:absolute;inset:0;width:100%;height:100%;display:block}
svg.world .sea{fill:#9cc7d9}svg.world .wave{stroke:#7fb2c8;stroke-width:2;opacity:.55}
svg.world .land path,svg.world path.land{fill:#e8d9b8;stroke:#1f1a15;stroke-width:2.2;stroke-linejoin:round}
svg.world path.ice{fill:#f4f1ea}
svg.world .lbl{font-family:"Bebas Neue",Impact,sans-serif;font-size:15px;letter-spacing:.5px;fill:#1f1a15;paint-order:stroke;stroke:#f3e8cf;stroke-width:4px;stroke-linejoin:round;text-anchor:middle}
svg.world .contlbl{font-family:"Bebas Neue",Impact,sans-serif;font-size:20px;letter-spacing:3px;fill:#1f1a15;opacity:.28;text-anchor:middle}
svg.world .node{cursor:default;transform-box:fill-box;transform-origin:center}
svg.world .node circle.ring{fill:#fbf5e4;stroke:#1f1a15;stroke-width:3}
svg.world .node text.em{font-size:22px;text-anchor:middle;dominant-baseline:central}
svg.world .node.pulse{animation:npulse .9s 2}
@keyframes npulse{50%{transform:scale(1.35)}}
svg.world .node.shake{animation:nshake .45s 3}
@keyframes nshake{25%{transform:translate(-3px,1px) rotate(-6deg)}75%{transform:translate(3px,-1px) rotate(6deg)}}
.flyer{position:absolute;z-index:6;transform:translate(-50%,-50%);font-size:clamp(20px,2.2vw,44px);line-height:1;pointer-events:none;filter:drop-shadow(2px 3px 0 rgba(31,26,21,.6))}
.flyer .cnt{font-family:var(--head);font-size:55%;background:#1f1a15;color:#f3e8cf;padding:0 4px;margin-left:2px;vertical-align:top}
.wfloat{position:absolute;z-index:9;font-family:var(--head);font-size:clamp(16px,1.6vw,34px);color:#1f1a15;background:#e2a72e;border:3px solid #1f1a15;padding:0 8px;white-space:nowrap;pointer-events:none;animation:floatup 1.6s ease-out forwards;transform:translate(-50%,-50%);box-shadow:3px 3px 0 #1f1a15}
.wfloat.bad{background:#b3261e;color:#f3e8cf}.wfloat.cool{background:#d9e8f0}
@keyframes floatup{0%{opacity:0;transform:translate(-50%,-10%) scale(.6)}18%{opacity:1;transform:translate(-50%,-80%) scale(1.15)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
.burst{position:absolute;z-index:8;width:0;height:0;pointer-events:none}
.burst .pow{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font-size:clamp(40px,4.6vw,96px);animation:pow 2.4s ease-out forwards}
.burst .bit{position:absolute;left:0;top:0;font-size:clamp(20px,2.2vw,46px);transform:translate(-50%,-50%);animation:bit 2.2s ease-in-out forwards}
@keyframes pow{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}15%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}30%{transform:translate(-50%,-50%) scale(1)}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
@keyframes bit{0%{transform:translate(-50%,-50%) rotate(0) translateX(0)}40%{transform:translate(-50%,-50%) rotate(calc(var(--a) + 200deg)) translateX(calc(3.2vw * var(--d)))}70%{transform:translate(-50%,-50%) rotate(calc(var(--a) + 420deg)) translateX(calc(2vw * var(--d)))}100%{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--a) + 600deg)) translateX(calc(4.5vw * var(--d)))}}
@media (prefers-reduced-motion: reduce){.burst .bit,.lobbyp span,.overlay .big,svg.world .node.pulse,svg.world .node.shake,.evcard.flip,.plist .rdy.wait{animation:none}.flyer{transition-duration:.25s!important}}
@media (max-aspect-ratio:1/1){.tv{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;height:auto}body.wktv{overflow:auto}.tvtop,.tvctl{grid-column:1}.bwrap{min-height:62vh}.logp{max-height:50vh}.log{font-size:18px}}
@media (max-width:900px) and (min-aspect-ratio:1/1){.tv{grid-template-columns:1fr 260px}.log{font-size:15px}}
/* ---------- the round countdown (TV clock + draining bar, phone sticky clock). Inline only, never over the board ---------- */
.wkbar{height:12px;background:rgba(31,26,21,.18);overflow:hidden;flex:none}
.wkbar i{display:block;height:100%;background:#e2a72e;transform-origin:0 50%;transition:transform .25s linear,background-color .4s}
.tvbar{height:clamp(12px,1.6vh,26px);border-top:3px solid var(--ink)}
.wkclock{flex:none;width:clamp(250px,24vw,470px);border:3px solid var(--ink);background:#1f1a15;color:#f3e8cf;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:clamp(8px,.8vw,16px);padding:0 clamp(8px,.8vw,16px);text-align:left;transition:background-color .4s,color .4s;transform-origin:50% 50%}
.wkclock .cl-n{font-family:var(--head);font-size:clamp(40px,4.3vw,90px);line-height:1;letter-spacing:2px;color:#e2a72e;flex:none;min-width:1.6em;text-align:center}
.wkclock .cl-w{flex:1;min-width:0;font-family:var(--head);font-size:clamp(15px,1.3vw,27px);letter-spacing:.5px;line-height:1.05;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
body.wktv:not([data-phase=orders]) .wkclock{opacity:.45}
body.wktv[data-clock=warn] .wkclock{background:#e2a72e;color:#1f1a15}body.wktv[data-clock=warn] .wkclock .cl-n{color:#1f1a15}
body.wktv[data-clock=low] .wkclock,body.wktv[data-clock=zero] .wkclock{background:#b3261e;color:#f3e8cf}
body.wktv[data-clock=low] .wkclock .cl-n,body.wktv[data-clock=zero] .wkclock .cl-n{color:#f3e8cf}
body.wktv[data-clock=low] .wkclock{animation:wkbeat 1s ease-in-out infinite}
body[data-clock=low] .wkbar i,body[data-clock=zero] .wkbar i{background:#b3261e}
body[data-clock=warn] .wkbar i{background:#d0661f}
body.wktv[data-clock=low] .plist .rdy.wait,body.wktv[data-clock=zero] .plist .rdy.wait{background:#b3261e;border-radius:50%;padding:0 .15em}
body.wktv[data-clock=low] .plist li:has(.rdy.wait) .nm{color:#b3261e;font-weight:600}
@keyframes wkbeat{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.ptimer{position:sticky;top:0;z-index:5;margin:0 -6px 8px;background:#1f1a15;color:#f3e8cf;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--accent);transition:background-color .4s}
.ptimer[hidden]{display:none}
.ptimer .pt-row{display:flex;align-items:center;gap:10px;padding:4px 10px}
.ptimer .pt-n{font-family:var(--head);font-size:30px;letter-spacing:1px;color:#e2a72e;flex:none;min-width:2.6em}
.ptimer .pt-t{font-size:15px;line-height:1.2;font-weight:600}
.ptimer .wkbar{height:8px;background:rgba(243,232,207,.2)}
.ptimer[data-lvl=warn]{background:#e2a72e;color:#1f1a15}.ptimer[data-lvl=warn] .pt-n{color:#1f1a15}
.ptimer[data-lvl=low],.ptimer[data-lvl=zero]{background:#b3261e;color:#f3e8cf;box-shadow:3px 3px 0 #1f1a15}.ptimer[data-lvl=low] .pt-n,.ptimer[data-lvl=zero] .pt-n{color:#f3e8cf}
.ptimer[data-lvl=low]:not(.sealed) .pt-n{animation:wkbeat 1s ease-in-out infinite;display:inline-block}
.ptimer.sealed[data-lvl=low],.ptimer.sealed[data-lvl=warn]{background:#1f1a15;color:#f3e8cf}.ptimer.sealed .pt-n{color:#e2a72e}
.gobtn.hurry{background:#b3261e!important;color:#f3e8cf!important;animation:wkbeat 1s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){body.wktv[data-clock=low] .wkclock,.ptimer[data-lvl=low]:not(.sealed) .pt-n,.gobtn.hurry{animation:none}.wkbar i{transition:none}}
/* layout stability: the news strip and the status row keep a fixed height, so the map never resizes mid-animation */
.news .now{height:2.2em;overflow:hidden}
.status{height:clamp(68px,9vh,120px);box-sizing:border-box}.status>*{min-height:0;overflow:hidden}

/* map layers: the static backdrop and the live layer are separate compositor layers (the backdrop is painted once) */
.mapwrap svg.world.wkfg{background:none}
.mapwrap svg.world{will-change:transform}
/* lightweight mode (html.wk-lite: Chromecast & other weak TV hardware, see WK.lite): no endless decorative animations, no filters */
.wk-lite .flyer{filter:none}
.wk-lite .plist .rdy.wait,.wk-lite .overlay .big,.wk-lite .lobbyp span{animation:none}
.wk-lite .flyer,.wk-lite .wfloat,.wk-lite .burst .bit,.wk-lite .burst .pow{will-change:transform,opacity}