/* Concept: risograph poster. Inks come from the physical cards: red=risk, green=measure, yellow=event, blue=resource */
:root{--paper:#f3ead6;--ink:#161a3a;--red:#e5322d;--yel:#f5e12a;--blu:#2338c9;--grn:#27b04a;--card:#fffaf0;
 --disp:'Rubik Mono One',Impact,'Arial Black',sans-serif}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font:16px/1.4 Rubik,system-ui,sans-serif;background:var(--paper);
 background-image:radial-gradient(rgba(35,56,201,.16) 1.2px,transparent 1.6px);background-size:9px 9px}
main{max-width:980px;margin:0 auto;padding:16px 16px 60px}
.card{background:var(--card);border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink);padding:16px;margin:0 0 22px;position:relative}
h2,h3{font-family:var(--disp);text-transform:uppercase;margin:0 0 12px;line-height:1.1}
h2{font-size:clamp(20px,4vw,30px)}h3{font-size:16px}
.poster{overflow:hidden;background:var(--yel);padding:14px 16px 6px;margin-bottom:22px;border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink)}
.poster b{display:block;font:clamp(44px,13vw,120px)/.82 var(--disp);letter-spacing:-.03em;text-transform:uppercase;color:var(--ink)}
.poster b+b{color:var(--red);margin-left:.4em;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.poster i{display:block;font:600 13px Rubik;font-style:normal;padding:10px 0 8px;letter-spacing:.14em;text-transform:uppercase}
.bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:var(--ink);color:var(--paper);
 padding:10px 14px;margin-bottom:22px;box-shadow:7px 7px 0 var(--red)}
.bar .logo{font:16px var(--disp);color:var(--yel)}.bar .who{font-weight:800;text-transform:uppercase}
.bar .rd{background:var(--yel);color:var(--ink);padding:2px 10px;font:14px var(--disp)}
button{font:800 15px Rubik;text-transform:uppercase;letter-spacing:.04em;padding:10px 16px;margin:3px 3px 3px 0;color:var(--ink);background:var(--card);
 border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);cursor:pointer;transition:transform .08s,box-shadow .08s}
@media(hover:hover){button:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink)}}
button:active:not(:disabled){transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
button.p{background:var(--red);color:#fff}button.g{background:var(--grn)}button.y{background:var(--yel)}button.big{font-size:20px;padding:14px 24px}
button.ghost{background:transparent;color:var(--paper);border-color:var(--paper);box-shadow:none;padding:6px 12px}
input{font:600 16px Rubik;padding:10px;border:3px solid var(--ink);background:#fff;color:var(--ink);min-width:0;flex:1}
input:focus{outline:none;box-shadow:4px 4px 0 var(--blu)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* phase banner coloured by card type */
.banner{border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink);padding:16px;margin:0 0 22px}
.banner h2{margin:0 0 6px}.banner small{font:800 12px Rubik;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:6px}
.t-r{background:var(--red);color:#fff}.t-g{background:var(--grn)}.t-y{background:var(--yel)}.t-b{background:var(--blu);color:#fff}.t-k{background:var(--ink);color:var(--yel)}
.steps{margin-top:10px}.steps span{display:inline-block;padding:2px 9px;margin:3px 4px 0 0;border:2px solid currentColor;font:700 12px Rubik;opacity:.6}
.steps .cur{opacity:1;background:var(--paper);color:var(--ink);border-color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:22px}
.stat{border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:10px 12px}
.stat small{display:block;font:800 11px Rubik;letter-spacing:.14em;text-transform:uppercase}
.stat b{font:30px var(--disp)}
.s-c{background:var(--yel)}.s-r{background:var(--red);color:#fff}.s-m{background:var(--grn)}.s-o{background:var(--blu);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{background:var(--grn);border:3px solid var(--ink);padding:6px 10px;font-weight:800;box-shadow:3px 3px 0 var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.grid button{text-align:left;margin:0;box-shadow:4px 4px 0 var(--ink)}
table{width:100%;border-collapse:collapse}th{font:11px var(--disp);text-transform:uppercase;text-align:left;border-bottom:3px solid var(--ink);padding:6px}
td{padding:8px 6px;border-bottom:2px dashed rgba(22,26,58,.35);font-weight:600}
tr.lead td{background:var(--yel)}.num{font:18px var(--disp)}
.badge{display:inline-block;padding:2px 10px;font:800 12px Rubik;text-transform:uppercase;border:2px solid var(--ink)}
.badge.ok{background:var(--grn)}.badge.wait{background:var(--red);color:#fff;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.55}}
.err{color:var(--red);font-weight:800;min-height:1.4em;margin:-8px 0 14px}
.log{max-height:280px;overflow:auto}.log div{padding:5px 0;border-bottom:2px dashed rgba(22,26,58,.3);font-size:.93em}
.log span{background:var(--ink);color:var(--yel);padding:0 6px;margin-right:6px;font:700 11px Rubik}
.muted{opacity:.6}
html{-webkit-text-size-adjust:100%}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:44px}
details>summary{cursor:pointer;list-style:none;font:16px var(--disp);text-transform:uppercase}details>summary::after{content:' ▾'}details[open]>summary{margin-bottom:12px}
/* bottom action dock (phones and desktop): the one button you need is always under the thumb */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
 background:var(--ink);border-top:4px solid var(--yel)}
.dock button{flex:1;margin:0;font-size:18px;min-height:52px}.dock button.y{flex:0 0 auto}
.dock .dn{flex:1;text-align:center;color:var(--yel);font:800 16px Rubik;padding:14px 0;text-transform:uppercase}
main.hasdock{padding-bottom:110px}
@media(max-width:640px){
 main{padding:10px 10px 24px}
 .card,.banner,.poster{box-shadow:4px 4px 0 var(--ink);padding:12px;margin-bottom:16px}
 .bar{box-shadow:4px 4px 0 var(--red);margin-bottom:16px;padding:8px 10px}
 .bar .logo{display:none}
 .grid{grid-template-columns:1fr}.grid button{min-height:52px}
 .stats{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}.stat{padding:8px 10px;box-shadow:3px 3px 0 var(--ink)}.stat b{font-size:24px}
 .stat .badge-ic{right:6px;bottom:6px}.stat .badge-ic svg.ic{width:24px;height:24px}
 .row>input{flex:1 1 100%}.row>button{flex:1 1 100%}
 .steps span{font-size:11px;padding:2px 7px}
 button.big{font-size:18px}
 table{font-size:14px}th{font-size:10px}td{padding:6px 3px}.num{font-size:15px}
 /* host table -> one card per team */
 table.rt tr:first-child{display:none}
 table.rt tr{display:grid;grid-template-columns:repeat(4,1fr);gap:2px 6px;border-bottom:3px solid var(--ink);padding:8px 0}
 table.rt td{border:0;padding:2px 4px}
 table.rt td:nth-child(-n+2){grid-column:1/-1}table.rt td:first-child{font:800 18px Rubik}
 table.rt td[data-l]::before{content:attr(data-l);display:block;font:700 10px Rubik;text-transform:uppercase;opacity:.6}
}
/* flat icons: ink outline, poster-ink fills */
svg.ic{width:40px;height:40px;flex:none}
svg.ic *{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
svg.ic .y{fill:var(--yel)}svg.ic .r{fill:var(--red)}svg.ic .b{fill:#7d8cf0}svg.ic .g{fill:var(--grn)}svg.ic .w{fill:#fff}
svg.ic text{fill:var(--ink);stroke:none}
.grid button,.chip{display:flex;align-items:center;gap:10px}
.chip svg.ic{width:34px;height:34px}
.stat{position:relative}.stat .badge-ic{position:absolute;right:10px;bottom:10px;background:var(--card);border:3px solid var(--ink);border-radius:50%;padding:4px;display:flex}
.stat .badge-ic svg.ic{width:30px;height:30px}

a.lnk{color:var(--paper);font:800 13px Rubik;text-transform:uppercase;letter-spacing:.06em;border:3px solid var(--paper);padding:6px 12px;text-decoration:none}
.lead2{font-size:1.05em}.rules h2{margin-top:6px}.rules p,.rules li{margin:.3em 0}.rules ul,.rules ol{padding-left:22px}
.tag{display:inline-block;padding:1px 8px;border:2px solid var(--ink);font:800 12px Rubik;text-transform:uppercase}
.hostonly{border-color:var(--red);background:#fff1ec}.hostonly h2{color:var(--red)}
.rules .scroll{overflow-x:auto}.rules table td,.rules table th{vertical-align:top}