@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/press-start-2p-latin-400.woff2") format("woff2")}
@font-face{font-family:"VT323";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/vt323-latin-400.woff2") format("woff2")}
/* Squipy Risk: original stylised world map in Squipy colours. No animated CSS filters anywhere (WebKit stability). */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0612;--text:#f0e6ff;--muted:rgba(232,210,255,.74);
  --gold:#ffe566;--gold-frame:#c9a227;--gold-lo:#4a2c12;--pink:#ff4ecd;--cyan:#3df0ff;--violet:#c084fc;
  --pixel:"Press Start 2P",ui-monospace,monospace;--display:"VT323","Courier New",monospace;--ui:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);
  --vh:calc(100dvh - var(--rg-bar));--side-w:clamp(260px,30vw,360px);
}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:calc(100vh - var(--rg-bar));background:var(--bg);color:var(--text);font-family:var(--display);font-size:20px;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
button,select,input{font:inherit;color:inherit}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
#app{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"hud" "map" "side" "foot";min-height:var(--vh);
  background:radial-gradient(ellipse 90% 55% at 50% -8%,rgba(255,78,205,.14),transparent 50%),radial-gradient(ellipse 50% 40% at 100% 80%,rgba(61,240,255,.08),transparent 50%),#0a0612}
.stage{display:contents}
#hud{grid-area:hud;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;min-height:3.2rem;padding:.4rem max(.8rem,var(--safe-r)) .4rem max(.8rem,var(--safe-l));border-bottom:3px solid var(--gold-frame);box-shadow:0 3px 0 var(--gold-lo);background:linear-gradient(180deg,#1b0d33,#0d0619);text-align:center}
.marquee{font-family:var(--pixel);font-size:clamp(.55rem,1.6vw,.75rem);letter-spacing:.08em;color:var(--gold);text-shadow:0 0 8px rgba(255,229,102,.7),2px 2px 0 #4a2c12;animation:glow 2.6s ease-in-out infinite}
@keyframes glow{50%{opacity:.78}}
.message{font-size:clamp(1.05rem,3.6vw,1.3rem);line-height:1.1;min-height:1.1em}

/* ── Map ── */
.map-area{grid-area:map;display:flex;flex-direction:column;gap:4px;padding:6px max(6px,var(--safe-r)) 2px max(6px,var(--safe-l));min-width:0}
.map-wrap{position:relative;width:100%;aspect-ratio:1/1;max-height:calc(var(--vh) - 9rem);min-height:240px;border:3px solid var(--gold-frame);box-shadow:3px 3px 0 var(--gold-lo);background:#0d1030;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.map-wrap.zoomed{touch-action:none}
#map{display:block;width:100%;height:100%}
.sea{fill:#101640}
.sea-grid{stroke:rgba(120,140,255,.08);stroke-width:1}
.land{stroke-width:3;stroke-linejoin:round}
.link{stroke:rgba(255,255,255,.55);stroke-width:1.6;stroke-dasharray:5 5;fill:none}
.link.hot{stroke:var(--gold);stroke-width:2.6}
.cont-label{font-family:var(--pixel);font-size:11px;fill:rgba(255,229,102,.9);paint-order:stroke;stroke:#101640;stroke-width:3px;letter-spacing:.06em;pointer-events:none}
.terr{cursor:pointer;outline:none}
.terr .cell{stroke:#0b0718;stroke-width:1.6;stroke-linejoin:round;transition:fill .25s}
.terr .tok{pointer-events:none}
.terr .shape{stroke:#0b0718;stroke-width:2.2}
.terr .n{font-family:var(--ui);font-weight:800;font-size:15px;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.terr .nm{font-family:var(--ui);font-weight:600;font-size:9px;text-anchor:middle;fill:#fff;paint-order:stroke;stroke:#0b0718;stroke-width:2.5px;pointer-events:none;display:none}
#map.names .terr .nm{display:block}
.terr.sel .cell{stroke:var(--gold);stroke-width:4.5}
.terr.tgt .cell{stroke:var(--cyan);stroke-width:3.6;stroke-dasharray:6 4}
.terr.tgt2 .cell{stroke:var(--cyan);stroke-width:5}
.terr.dim .cell{fill-opacity:.42}
.terr.flash .cell{stroke:#fff;stroke-width:4}
.terr:focus-visible .cell{stroke:var(--pink);stroke-width:4.5}
.zoom{position:absolute;right:6px;top:6px;display:flex;flex-direction:column;gap:6px}
.zbtn{width:40px;height:40px;border:2px solid var(--gold-frame);background:rgba(20,10,40,.88);color:var(--gold);font-family:var(--ui);font-size:22px;line-height:1;cursor:pointer;touch-action:manipulation}
.zbtn:hover{background:#2b1752}
.zbtn:focus-visible{outline:3px solid var(--cyan);outline-offset:1px}
.map-tip{font-size:.95rem;color:var(--muted);text-align:center;line-height:1.1}

/* ── Side panel ── */
.side{grid-area:side;display:flex;flex-direction:column;gap:.6rem;padding:.4rem max(.7rem,var(--safe-r)) .8rem max(.7rem,var(--safe-l));min-width:0}
.turn{border:2px solid rgba(255,229,102,.3);background:rgba(10,4,22,.6);padding:.5rem .6rem}
.turn-who{display:flex;align-items:center;gap:.5rem;font-size:1.2rem;min-width:0}
#turn-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.swatch{width:22px;height:22px;flex:0 0 auto;display:inline-block}
.swatch svg{display:block;width:22px;height:22px}
.turn-clock{margin-left:auto;font-size:1rem;color:var(--gold);white-space:nowrap}
.phases{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:.4rem 0 .3rem}
.phases li{font-family:var(--pixel);font-size:.45rem;text-align:center;padding:.4rem .2rem;border:2px solid rgba(192,132,252,.35);color:var(--muted)}
.phases li[aria-current="step"]{border-color:var(--gold);color:#120a24;background:var(--gold)}
.hint-line{font-size:1.05rem;color:var(--text);min-height:1.2em;line-height:1.15}
.panel-box{border:2px solid rgba(61,240,255,.35);background:rgba(10,4,22,.6);padding:.55rem;display:flex;flex-direction:column;gap:.5rem}
.panel-box[hidden]{display:none}
.big{font-family:var(--pixel);font-size:.7rem;color:var(--gold);line-height:1.5}
.sub{font-size:1.02rem;color:var(--muted);line-height:1.15}
.sub.small{font-size:.92rem;margin-top:.6rem}
.sub a,.help a{color:var(--cyan)}
.row2,.row3{display:grid;gap:.45rem;align-items:end}
.row2{grid-template-columns:repeat(2,minmax(0,1fr))}
.row3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wide{width:100%}
.stepper{display:grid;grid-template-columns:56px 1fr 56px;align-items:center;gap:.4rem}
.stepper[hidden]{display:none}
.stepper output{font-family:var(--pixel);font-size:.9rem;color:var(--gold);text-align:center}
.odds{align-self:stretch;justify-content:flex-end}
.odds .label{font-family:var(--pixel);font-size:.45rem;letter-spacing:.06em;color:var(--cyan);text-transform:uppercase}
#odds{font-size:1.2rem;min-height:44px;display:flex;align-items:center}
.btn{font-family:var(--pixel);font-size:.52rem;line-height:1.35;letter-spacing:.03em;cursor:pointer;border:3px solid var(--gold-frame);background:linear-gradient(180deg,#3b1f6e,#1e0f3a);color:var(--gold);text-decoration:none;display:inline-grid;place-items:center;text-align:center;min-height:44px;padding:.45rem .5rem;box-shadow:3px 3px 0 #2a1508;border-radius:0;touch-action:manipulation}
.btn.primary{background:linear-gradient(180deg,#ff4ecd,#9d174d);border-color:#ffb3e0;color:#fff}
.btn.ghost{background:linear-gradient(180deg,#2a1848,#12081f)}
.btn.small{min-height:44px;font-size:.48rem}
.btn:hover{border-color:#ffe9a3}
.btn.primary:hover{background:linear-gradient(180deg,#ff6ad6,#b01e5a)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #2a1508}
.btn:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.field{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.field label{font-family:var(--pixel);font-size:.45rem;letter-spacing:.06em;color:var(--cyan);text-transform:uppercase}
.field select,.field input{width:100%;min-height:44px;padding:0 .4rem;background:#1a0e30;border:2px solid rgba(192,132,252,.6);border-radius:0;font-family:var(--display);font-size:1.1rem;color:var(--text)}
.field select:focus-visible,.field input:focus-visible{outline:3px solid var(--cyan);outline-offset:1px}
.code-input{font-family:var(--pixel)!important;font-size:.9rem!important;letter-spacing:.2em;text-transform:uppercase;text-align:center}
.battle{border:2px solid rgba(255,78,205,.4);background:rgba(10,4,22,.6);padding:.45rem .55rem;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;font-size:1.05rem}
.battle[hidden]{display:none}
.dice{display:inline-flex;gap:4px}
.die{width:26px;height:26px;display:inline-grid;place-items:center;font-family:var(--ui);font-weight:800;font-size:15px;border:2px solid #0b0718}
.die.a{background:#ffd1e8;color:#5c0b33}
.die.d{background:#cfe8ff;color:#0b2a5c}
.vs{color:var(--muted)}
.stats,.log,.help{border:2px solid rgba(255,229,102,.22);background:rgba(10,4,22,.5);padding:.45rem .55rem}
.stats h2,.log h2,.lobby h2{font-family:var(--pixel);font-size:.5rem;letter-spacing:.1em;color:var(--pink);margin-bottom:.35rem}
.stats-table{width:100%;border-collapse:collapse;font-size:1.02rem}
.stats-table th{font-family:var(--pixel);font-size:.4rem;color:var(--cyan);text-align:right;padding:.2rem .25rem;font-weight:400}
.stats-table th:first-child,.stats-table td:first-child{text-align:left}
.stats-table td{padding:.18rem .25rem;text-align:right;border-top:1px solid rgba(255,255,255,.07);white-space:nowrap}
.stats-table td:first-child{display:flex;align-items:center;gap:.35rem;max-width:11rem;overflow:hidden;text-overflow:ellipsis}
.stats-table tr.cur td{background:rgba(255,229,102,.1)}
.stats-table tr.out td{opacity:.55;text-decoration:line-through}
.stats-table .swatch,.stats-table .swatch svg{width:18px;height:18px}
abbr{text-decoration:none}
.conts{font-size:.95rem;color:var(--muted);margin-top:.3rem;line-height:1.2}
.controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}
.help{font-size:1.02rem;line-height:1.2;display:flex;flex-direction:column;gap:.35rem}
.help[hidden]{display:none}
.help strong{color:var(--gold);font-weight:400}
.log-list{list-style:none;max-height:9.5rem;overflow:auto;font-size:1rem;line-height:1.15;display:flex;flex-direction:column;gap:.15rem}
.log-list li{color:var(--muted)}
.log-list li.me{color:var(--text)}
.log-list li.big{color:var(--gold)}
.log-list:focus-visible{outline:3px solid var(--cyan)}
.lobby .seats{list-style:none;display:flex;flex-direction:column;gap:.3rem}
.seats li{display:flex;align-items:center;gap:.45rem;font-size:1.1rem;padding:.25rem .4rem;border:1px solid rgba(255,255,255,.12)}
.seats .dot{width:10px;height:10px;border-radius:50%;background:#555;flex:0 0 auto}
.seats .dot.on{background:#46e58a}
.seats .tag{margin-left:auto;font-size:.95rem;color:var(--muted)}
.room-status{font-size:1rem;color:var(--muted);min-height:1.1em}
.footer-bar{grid-area:foot;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.45rem max(.85rem,var(--safe-r)) calc(.5rem + var(--safe-b)) max(.85rem,var(--safe-l));border-top:3px solid var(--gold-frame);background:linear-gradient(180deg,#160c28,#0a0612)}
.hint{font-family:var(--pixel);font-size:.4rem;letter-spacing:.05em;color:var(--muted);line-height:1.6}
.version{font-family:var(--pixel);font-size:.42rem;color:rgba(232,210,255,.62);flex-shrink:0}

/* ── Dialogs ── */
.overlay{position:fixed;inset:var(--rg-bar,0px) 0 0 0;z-index:90;display:grid;place-items:center;background:rgba(5,2,12,.76);padding:.8rem;overflow:auto}
.overlay[hidden]{display:none}
.overlay .panel{width:min(26rem,100%);padding:1.2rem 1rem;border:4px solid var(--gold-frame);background:linear-gradient(180deg,#2a1848,#12081f);box-shadow:6px 6px 0 #1a0c04;text-align:center;display:flex;flex-direction:column;gap:.7rem}
.panel-tag{font-family:var(--pixel);font-size:.5rem;letter-spacing:.16em;color:var(--pink)}
.panel h2{font-family:var(--pixel);font-size:clamp(.8rem,3vw,1.05rem);line-height:1.4;color:var(--gold);text-shadow:3px 3px 0 #4a2c12}
.subtitle{color:var(--muted);font-size:1.25rem}
.actions{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center}
.actions .btn{min-width:7rem}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;text-align:left}
.span2{grid-column:1/-1}
.on-view[hidden]{display:none}
.on-view{display:flex;flex-direction:column;gap:.7rem}
.err{color:#ffb3c1;font-size:1.05rem;min-height:1.1em}
.cards-panel{width:min(30rem,100%)!important}
.hand{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(5.6rem,1fr));gap:.45rem}
.card{width:100%;min-height:96px;border:3px solid rgba(192,132,252,.6);background:#1a0e30;color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;padding:.35rem .25rem;cursor:pointer;font-size:.95rem;line-height:1.05;touch-action:manipulation}
.card[aria-pressed="true"]{border-color:var(--gold);background:#3b2a10}
.card:focus-visible{outline:3px solid var(--cyan);outline-offset:1px}
.card .ct{font-family:var(--pixel);font-size:.4rem;color:var(--cyan)}
.card.own .tn{color:var(--gold)}
.card svg{width:30px;height:30px}

/* ── Wide / landscape: map left, panel right ── */
@media (min-aspect-ratio:1/1) and (min-width:600px){
  #app{grid-template-columns:minmax(0,1fr) var(--side-w);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"hud hud" "map side" "foot foot";height:var(--vh);min-height:0}
  .map-area{min-height:0;padding:8px 4px 6px max(8px,var(--safe-l))}
  .map-wrap{aspect-ratio:auto;flex:1 1 auto;max-height:none;min-height:0}
  .side{overflow-y:auto;min-height:0;padding-top:.5rem}
}
@media (min-aspect-ratio:1/1) and (min-width:600px) and (max-height:520px){
  #hud{min-height:0;padding:.2rem 1rem;flex-direction:row;gap:1rem}
  .map-tip{display:none}
  .footer-bar{display:none}
  #app{grid-template-areas:"hud hud" "map side" "map side"}
}
@media (max-width:380px){
  .btn,.btn.small{font-size:.44rem;padding:.4rem .3rem}
  .phases li{font-size:.4rem}
  .hint{font-size:.36rem}
  .stats-table{font-size:.95rem}
  .stats-table td:first-child{max-width:7.5rem}
}
@media (prefers-reduced-motion:reduce){
  .marquee{animation:none}
  .terr .cell{transition:none}
  .btn:active{transform:none}
}