:root{
  --ink:#0b0d10;
  --slate:#151a21;
  --slate-2:#1d242e;
  --hair:rgba(198,214,235,.16);
  --hair-strong:rgba(198,214,235,.34);
  --text:#dce4ee;
  --text-dim:#8c99aa;
  --green:#3fbf6c;
  --green-deep:#1f7a45;
  --yellow:#f3c623;
  --yellow-deep:#a4820c;
  --red:#e2483a;
  --bone:#ece5d8;
  --a-land:#4f8f5a;
  --a-dorp:#b8823f;
  --a-stad:#6d7a8c;
  --a-goud:#d8ab35;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--ink);}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  user-select:none;
}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;}
.disp{
  font-family:"Futura","Century Gothic","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  text-transform:uppercase;letter-spacing:.18em;font-weight:700;
}

#scene{position:fixed;inset:0;z-index:0;}
#scene canvas{display:block;touch-action:none;}

/* ---------- topbar ---------- */
#topbar{
  position:fixed;top:0;left:0;right:0;height:52px;z-index:20;
  display:flex;align-items:center;gap:16px;padding:0 16px;
  background:linear-gradient(180deg,rgba(11,13,16,.92),rgba(11,13,16,0));
  pointer-events:none;
}
#topbar>*{pointer-events:auto}
.brand{display:flex;align-items:baseline;gap:10px;}
.brand .t{font-size:17px;letter-spacing:.32em;}
.brand .sub{font-size:9.5px;letter-spacing:.26em;color:var(--text-dim);}
.spacer{flex:1}
.tbtn{
  background:rgba(29,36,46,.72);border:1px solid var(--hair);color:var(--text-dim);
  white-space:nowrap;flex:0 0 auto;
  padding:7px 12px;border-radius:2px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;font-family:inherit;font-weight:600;
  backdrop-filter:blur(8px);transition:.15s;
}
.tbtn:hover{color:var(--text);border-color:var(--hair-strong);background:rgba(40,50,64,.8)}
.tbtn:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

/* ---------- panels ---------- */
.panel{
  position:fixed;z-index:15;
  background:rgba(14,18,24,.82);backdrop-filter:blur(14px);
  border:1px solid var(--hair);border-radius:3px;
}
#left{top:60px;left:14px;width:288px;max-height:calc(100vh - 340px);display:flex;flex-direction:column;}
#right{top:60px;right:14px;width:252px;max-height:calc(100vh - 160px);display:flex;flex-direction:column;}
#map{left:14px;bottom:14px;width:288px;}
#map .phead{cursor:pointer;user-select:none}
#map .pbody{padding:10px 12px 12px;overflow:visible}
#map.collapsed .pbody{display:none}
body.mapmin #left{max-height:calc(100vh - 160px)}

.phead{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px;border-bottom:1px solid var(--hair);flex:0 0 auto;
}
.phead .lbl{font-size:9.5px;letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase;font-weight:700}
.pbody{padding:11px 12px;overflow-y:auto;overflow-x:hidden;flex:1 1 auto;}
.pbody::-webkit-scrollbar{width:6px}
.pbody::-webkit-scrollbar-thumb{background:rgba(150,170,195,.22);border-radius:3px}

.turnchip{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.06em}
.dot{width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.5) inset}
.dot.green{background:var(--green)} .dot.yellow{background:var(--yellow)}

.sect{margin-bottom:13px}
.sect:last-child{margin-bottom:0}
.slab{
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);
  font-weight:700;margin-bottom:6px;display:flex;justify-content:space-between;align-items:baseline;
}
.slab em{font-style:normal;color:var(--text);letter-spacing:.06em;font-size:10px}

/* ---------- point cards ---------- */
.cards{display:flex;flex-wrap:wrap;gap:4px}
.pcard{
  width:25px;height:34px;border-radius:2px;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;cursor:default;position:relative;
  background:linear-gradient(160deg,#f4efe2,#ddd3bd);color:#2a2418;
  box-shadow:0 1px 3px rgba(0,0,0,.5);border:1px solid rgba(0,0,0,.25);
  font-family:ui-monospace,Menlo,Consolas,monospace;
}
.pcard::after{content:"";position:absolute;inset:2px;border:1px solid rgba(0,0,0,.13);border-radius:1px}
.pcard.v1{background:linear-gradient(160deg,#f4efe2,#ded4be)}
.pcard.v2{background:linear-gradient(160deg,#e9e5cf,#cfc7a6)}
.pcard.v3{background:linear-gradient(160deg,#e3ddc2,#c2b790)}
.pcard.v4{background:linear-gradient(160deg,#dcd2ac,#b3a577)}
.pcard.sel{cursor:pointer}
.pcard.sel:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(0,0,0,.6)}
.pcard.pay{cursor:pointer;outline:2px solid var(--yellow);outline-offset:1px}
.pcard.dim{opacity:.34}
.pcard.back{background:linear-gradient(160deg,#3a4553,#232b36);color:transparent;border-color:rgba(0,0,0,.5)}
.pcard.back::before{content:"";position:absolute;inset:5px;border:1px solid rgba(198,214,235,.2);border-radius:1px}

/* ---------- action cards ---------- */
.acards{display:flex;flex-wrap:wrap;gap:5px}
.acard{
  width:auto;min-width:30px;height:38px;padding:0 8px;border-radius:2px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#2b3644,#1a212b);border:1px solid var(--hair-strong);
  cursor:pointer;transition:.15s;position:relative;
}
.acard .ltr{font-size:16px;font-weight:700;line-height:1;font-family:ui-monospace,Menlo,monospace;color:var(--bone)}
.acard .tag{font-size:7px;letter-spacing:.1em;color:var(--text-dim);margin-top:2px;text-transform:uppercase}
.acard:hover{border-color:var(--yellow);transform:translateY(-2px)}
.acard.disabled{opacity:.38;cursor:not-allowed;transform:none;border-color:var(--hair)}
.acard.ghost{opacity:.5;cursor:default;transform:none}
.acard.ghost:hover{border-color:var(--hair-strong);transform:none}

/* ---------- pieces stock ---------- */
.stock{display:flex;gap:8px}
.stkitem{
  flex:1;border:1px solid var(--hair);border-radius:2px;padding:6px 7px;
  background:rgba(255,255,255,.02);
}
.stkitem .n{font-size:17px;font-weight:700;line-height:1;font-family:ui-monospace,Menlo,monospace}
.stkitem .k{font-size:8px;letter-spacing:.14em;color:var(--text-dim);text-transform:uppercase;margin-top:3px}

/* ---------- legend / areas ---------- */
.legend{display:flex;flex-direction:column;gap:4px}
.lrow{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--text-dim)}
.lrow b{color:var(--text);font-weight:600;min-width:66px;font-size:10.5px}
.sw{width:9px;height:9px;border-radius:1px;flex:0 0 auto}

/* ---------- log ---------- */
#log{display:flex;flex-direction:column-reverse;gap:0;font-size:10.5px;line-height:1.45}
#log .e{padding:4px 0;border-bottom:1px solid rgba(198,214,235,.07);color:var(--text-dim)}
#log .e b{color:var(--text);font-weight:600}
#log .e.g b{color:var(--green)} #log .e.y b{color:var(--yellow)}
#log .e .co{font-family:ui-monospace,Menlo,monospace;color:var(--bone)}

/* ---------- bottom rail ---------- */
#rail{
  position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:18;
  min-width:400px;max-width:min(760px,calc(100vw - 28px));
  background:rgba(14,18,24,.88);backdrop-filter:blur(14px);
  border:1px solid var(--hair);border-radius:3px;
}
#railmsg{
  padding:10px 16px;font-size:12px;text-align:center;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
}
#railmsg .hint{color:var(--text-dim);font-size:11px}
.btn{
  background:var(--slate-2);border:1px solid var(--hair-strong);color:var(--text);
  padding:8px 15px;border-radius:2px;font-size:10.5px;letter-spacing:.14em;font-weight:700;
  text-transform:uppercase;cursor:pointer;font-family:inherit;transition:.15s;
}
.btn:hover{background:#2b3542;border-color:var(--text-dim)}
.btn:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.btn.go{background:var(--bone);color:#161a10;border-color:var(--bone)}
.btn.go:hover{background:#fff}
.btn.go:disabled{background:rgba(236,229,216,.18);color:rgba(236,229,216,.4);border-color:transparent;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--text-dim)}
.btn.ghost:hover{color:var(--text);background:rgba(255,255,255,.04)}

/* ---------- vakkenkiezer (bovenaanzicht van het bord) ---------- */
#minimap{display:none;padding:2px 16px 13px}
#minimap.on{display:block}
#mapBody .mmhead{display:none}
#mapBody .mmgrid{--mm:44px}
.mmhead{
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);
  font-weight:700;text-align:center;margin-bottom:8px;
}
.mmwrap{display:flex;justify-content:center}
.mmgrid{
  --mm:42px;
  display:grid;grid-template-columns:15px repeat(4,var(--mm));
  grid-auto-rows:var(--mm);gap:3px;
}
.mmgrid .top{grid-template-rows:15px}
.mmlab{
  display:flex;align-items:center;justify-content:center;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;color:var(--text-dim);
  height:15px;align-self:center;
}
.mmcell{
  position:relative;border-radius:2px;border:1px solid var(--hair);
  display:flex;flex-direction:column-reverse;gap:2px;padding:3px;
  transition:.12s;overflow:hidden;
}
.mmcell .lay{flex:1;border-radius:1px;background:rgba(210,225,245,.055)}
.mmcell .lay.g{background:var(--green)}
.mmcell .lay.y{background:var(--yellow)}
.mmcell .lay.w{background:var(--bone)}
.mmcell .lay.r{background:var(--red)}
.mmcell.ok{cursor:pointer}
.mmcell.ok::after{
  content:"";position:absolute;inset:0;border-radius:2px;
  box-shadow:0 0 0 1px currentColor inset, 0 0 9px -1px currentColor;
  opacity:.75;pointer-events:none;
}
.mmcell.ok:hover{transform:translateY(-2px)}
.mmcell.sel::after{opacity:1;box-shadow:0 0 0 2px #fff inset, 0 0 14px -1px currentColor}
.mmcell.dead{opacity:.42}

/* ---------- coordinate pay rail (signature) ---------- */
#pay{border-top:1px solid var(--hair);padding:12px 16px 14px;display:none}
#pay.on{display:block}
.paytop{display:flex;align-items:center;gap:14px;margin-bottom:11px;flex-wrap:wrap}
.coord{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--text-dim);
  border:1px solid var(--hair);padding:5px 10px;border-radius:2px;
}
.coord b{color:var(--bone);font-size:14px}
.axes{display:flex;gap:10px;flex:1;min-width:270px}
.axis{
  flex:1;border:1px dashed var(--hair-strong);border-radius:2px;padding:7px 9px;
  cursor:pointer;transition:.15s;min-height:62px;
}
.axis.active{border-style:solid;border-color:var(--yellow);background:rgba(243,198,35,.05)}
.axis.done{border-style:solid;border-color:var(--green);background:rgba(63,191,108,.06)}
.axis .ah{
  display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);font-weight:700;
}
.axis .ah .sum{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;letter-spacing:0;color:var(--text)}
.axis.done .ah .sum{color:var(--green)}
.axis .slot{display:flex;flex-wrap:wrap;gap:3px;min-height:36px}
.axis .empty{font-size:10px;color:var(--text-dim);opacity:.6;align-self:center;padding:10px 0}
.payhand{display:flex;flex-wrap:wrap;gap:4px;padding-top:11px;border-top:1px solid var(--hair)}
.payfoot{display:flex;gap:8px;justify-content:flex-end;margin-top:11px;align-items:center}
.payfoot .warn{flex:1;font-size:10.5px;color:var(--yellow);opacity:.85}

/* ---------- modal ---------- */
#overlay{
  position:fixed;inset:0;z-index:60;background:rgba(6,8,11,.86);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto;
}
#overlay.on{display:flex}
.modal{
  background:var(--slate);border:1px solid var(--hair-strong);border-radius:3px;
  width:min(720px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;
  box-shadow:0 30px 90px rgba(0,0,0,.7);
}
.mhead{padding:16px 22px;border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;align-items:center;gap:12px}
.mhead h2{margin:0;font-size:14px;letter-spacing:.24em;text-transform:uppercase;font-weight:700}
.mbody{padding:20px 22px;overflow-y:auto;font-size:13px;line-height:1.62;color:var(--text)}
.mbody h3{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin:22px 0 8px;font-weight:700}
.mbody h3:first-child{margin-top:0}
.mbody p{margin:0 0 9px}
.mbody ul{margin:0 0 9px;padding-left:18px}
.mbody li{margin-bottom:5px}
.mbody code{font-family:ui-monospace,Menlo,monospace;background:rgba(255,255,255,.06);padding:1px 5px;border-radius:2px;font-size:12px}
.mfoot{padding:14px 22px;border-top:1px solid var(--hair);display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}
.mbody table{width:100%;border-collapse:collapse;font-size:12px;margin:0 0 10px}
.mbody th,.mbody td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--hair)}
.mbody th{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim)}
.mbody td.l{font-family:ui-monospace,Menlo,monospace;color:var(--bone);width:26px;font-weight:700}
.mbody td.q{font-family:ui-monospace,Menlo,monospace;color:var(--text-dim);width:34px;text-align:right}

.opts{display:flex;flex-direction:column;gap:12px}
.optrow{display:flex;flex-direction:column;gap:6px}
.optrow>span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);font-weight:700}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg.wrap4 button{min-width:calc(50% - 3px);flex:1 1 calc(50% - 3px)}
.seg button{
  flex:1;min-width:96px;background:rgba(255,255,255,.03);border:1px solid var(--hair);
  color:var(--text-dim);padding:11px 10px;border-radius:2px;cursor:pointer;
  font-family:inherit;font-size:11.5px;font-weight:600;transition:.15s;
}
.seg button:hover{border-color:var(--hair-strong);color:var(--text)}
.seg button.on{background:var(--bone);color:#161a10;border-color:var(--bone)}

.pick{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:6px 0 4px}
.bigacard{
  width:132px;padding:14px 12px;border-radius:3px;cursor:pointer;transition:.15s;
  background:linear-gradient(165deg,#2b3644,#171d26);border:1px solid var(--hair-strong);
  display:flex;flex-direction:column;gap:8px;text-align:left;
}
.bigacard:hover{border-color:var(--text-dim);transform:translateY(-2px)}
.bigacard.on{border-color:var(--yellow);background:linear-gradient(165deg,#3a4152,#1e2430);box-shadow:0 0 0 1px var(--yellow) inset}
.bigacard .ltr{font-size:26px;font-weight:700;font-family:ui-monospace,Menlo,monospace;line-height:1;color:var(--bone)}
.bigacard .txt{font-size:10.5px;line-height:1.45;color:var(--text-dim)}
.bigacard.on .txt{color:var(--text)}

.winner{text-align:center;padding:8px 0 4px}
.winner .who{font-size:30px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}
.winner .why{font-size:12.5px;color:var(--text-dim)}

/* ---------- online ---------- */
.netchip{display:flex;align-items:center;gap:6px;cursor:default;color:var(--text)}
.netchip .dot{width:8px;height:8px}
.netchip .dot.off{background:var(--red)}
.netstep{margin:14px 0 4px}
.netlab{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);
  font-weight:700;margin-bottom:6px}
.netcode{
  width:100%;height:78px;resize:vertical;padding:9px 10px;border-radius:2px;
  background:rgba(0,0,0,.35);border:1px solid var(--hair);color:var(--text);
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;line-height:1.4;
  word-break:break-all;user-select:text;
}
.netcode:focus{outline:none;border-color:var(--yellow)}
.netbtns{display:flex;gap:7px;margin-top:7px}
.netnote{font-size:11px;color:var(--text-dim);line-height:1.5;margin-top:14px}
.netnote a{color:var(--yellow);text-decoration:none;border-bottom:1px dotted rgba(243,198,35,.5)}
.linkbox{
  margin:16px 0 10px;padding:11px 12px;border-radius:3px;user-select:all;
  background:rgba(0,0,0,.32);border:1px solid var(--hair-strong);
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.5;
  color:var(--bone);word-break:break-all;text-align:center;
}
.bigcode{
  margin:18px auto 4px;text-align:center;user-select:all;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;
  font-size:clamp(26px,7vw,42px);letter-spacing:.14em;color:var(--bone);
  background:rgba(0,0,0,.32);border:1px solid var(--hair-strong);border-radius:3px;
  padding:14px 10px;
}
.codein{
  display:block;width:100%;margin:16px 0 4px;padding:14px 12px;text-align:center;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;
  font-size:clamp(22px,6vw,34px);letter-spacing:.14em;text-transform:uppercase;
  background:rgba(0,0,0,.32);border:1px solid var(--hair-strong);border-radius:3px;
  color:var(--bone);
}
.codein:focus{outline:none;border-color:var(--yellow)}
.codein::placeholder{color:rgba(198,214,235,.22)}
.netwait{color:var(--text-dim);font-size:12.5px;text-align:center;padding:14px 0}
.matchline{margin-top:12px;font-size:12px;color:var(--text-dim)}


/* ---------- permanente chat ---------- */
#btnChat{display:none}
#chatPanel{
  display:none;position:fixed;right:14px;bottom:14px;width:252px;height:220px;z-index:17;
  background:rgba(14,18,24,.88);backdrop-filter:blur(14px);border:1px solid var(--hair);border-radius:3px;
  flex-direction:column;overflow:hidden;
}
body.online #chatPanel{display:flex}
body.online #right{max-height:calc(100vh - 300px)}
#chatPanel .phead{padding:8px 10px}
#chatList{flex:1;overflow-y:auto;padding:8px 9px;display:flex;flex-direction:column;gap:7px;user-select:text}
.chatmsg{font-size:10.5px;line-height:1.35;padding:6px 7px;border:1px solid var(--hair);border-radius:3px;background:rgba(255,255,255,.025);overflow-wrap:anywhere}
.chatmsg.green{border-left:2px solid var(--green)}
.chatmsg.yellow{border-left:2px solid var(--yellow)}
.chatmsg.mine{background:rgba(255,255,255,.05)}
.chatmeta{font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin-bottom:3px}
.chatempty{font-size:10px;color:var(--text-dim);text-align:center;padding:12px 4px}
#chatForm{display:flex;gap:5px;padding:7px;border-top:1px solid var(--hair)}
#chatInput{flex:1;min-width:0;background:rgba(0,0,0,.30);border:1px solid var(--hair);color:var(--text);border-radius:2px;padding:7px 8px;font:11px inherit;user-select:text}
#chatInput:focus{outline:none;border-color:var(--yellow)}
#chatSend{padding:7px 9px}

/* ---------- zwevende kaartenbalk over het 3D-bord (mobiel) ---------- */
#hud{
  position:fixed;left:7px;z-index:16;display:none;flex-direction:column;gap:7px;
  align-items:center;pointer-events:none;
}
#hud.on{display:flex}
#hud>*{pointer-events:auto}
.hudgrp{
  display:flex;flex-direction:column;gap:5px;padding:6px 5px;border-radius:4px;
  background:rgba(10,13,18,.40);backdrop-filter:blur(7px);
  border:1px solid rgba(198,214,235,.13);
}
.hudpt{
  position:relative;width:30px;height:25px;border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;font-weight:700;
  color:#2a2418;background:rgba(238,232,216,.66);
}
.hudpt i{
  position:absolute;right:-5px;top:-6px;font-style:normal;font-size:9px;font-weight:700;
  min-width:15px;height:15px;line-height:14px;text-align:center;border-radius:8px;
  background:#11161d;color:var(--text);border:1px solid var(--hair-strong);
}
.hudsep{height:1px;background:rgba(198,214,235,.16);margin:1px 0}
.hudact{
  width:34px;height:34px;border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:17px;font-weight:700;
  color:var(--bone);background:rgba(26,33,43,.55);
  border:1px solid rgba(198,214,235,.20);opacity:.66;transition:.14s;
}
.hudact.can{opacity:1;border-color:rgba(243,198,35,.6);box-shadow:0 0 11px -3px var(--yellow)}
.hudact:active{transform:scale(.9)}
.hudempty{font-size:8.5px;letter-spacing:.1em;color:var(--text-dim);text-align:center;padding:2px 0}
@media (min-width:861px){ #hud{display:none !important} }

/* ---------- toast ---------- */
#toast{
  position:fixed;top:64px;left:50%;transform:translateX(-50%) translateY(-14px);z-index:90;
  background:rgba(20,26,34,.95);border:1px solid var(--hair-strong);border-left:2px solid var(--yellow);
  padding:10px 16px;border-radius:2px;font-size:12px;max-width:min(460px,90vw);
  opacity:0;pointer-events:none;transition:.25s;backdrop-filter:blur(10px);
}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

.hidden{display:none !important}

@media (max-width:1080px){
  #left,#right{width:250px}
}
.only-narrow{display:none}
.caret{font-size:13px;color:var(--text-dim);line-height:1}

@media (max-width:860px){
  .only-narrow{display:inline-block}
  #topbar{height:42px;padding:0 5px;gap:3px}
  .netchip{padding:5px 5px;font-size:8.5px;min-width:18px;justify-content:center;cursor:pointer}
  .netchip .dot{width:7px;height:7px}
  #btnChat{display:none !important}
  .netcode{height:96px;font-size:10px}
  .brand .t{font-size:12.5px;letter-spacing:.16em}
  .brand .sub{display:none}
  .tbtn{padding:5px 7px;font-size:8.5px;letter-spacing:.06em}

  #right,#map{display:none !important}
  #chatPanel{display:none !important;left:0;right:0;bottom:0;width:100%;height:240px;border-radius:0;border-left:none;border-right:none;z-index:40}
  body.online.chat-open #chatPanel{display:flex !important}
  #left{
    position:fixed;top:42px;bottom:auto;left:0;right:0;width:100%;
    max-height:44vh;border-radius:0;border-left:none;border-right:none;
  }
  #left .phead{cursor:pointer;padding:8px 12px}
  #left.collapsed{border-bottom:1px solid var(--hair-strong)}
  #left.collapsed .pbody{display:none}

  #rail{min-width:0;left:0;right:0;transform:none;max-width:none;bottom:0;
        border-radius:0;border-left:none;border-right:none;border-bottom:none}
  #railmsg{padding:6px 10px;gap:8px;font-size:11px;flex-wrap:nowrap;
           justify-content:space-between;overflow:hidden}
  #railmsg>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #railmsg .hint{display:none}
  #railmsg .btn{padding:6px 10px;font-size:9px;flex:0 0 auto}

  .mmhead{display:none}
  #minimap{padding:0 10px 7px}
  .mmgrid{--mm:34px;gap:2px}
  #rail.paying .mmgrid{--mm:24px}

  #pay{padding:8px 10px 10px;max-height:58vh;overflow-y:auto;overflow-x:hidden}
  .paytop{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:8px;align-items:stretch}
  .coord{width:100%;font-size:10.5px;padding:6px 8px;white-space:normal}
  .axes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;min-width:0;gap:7px}
  .axis{width:100%;min-width:0;min-height:0;padding:6px 7px}
  .axis .ah{margin-bottom:4px;gap:5px}
  .axis .slot{min-height:36px;flex-wrap:nowrap;overflow:hidden}
  .axis .empty{padding:8px 0;font-size:9px}
  .payhand{padding-top:8px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .payhand .pcard{flex:0 0 auto}
  .payfoot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:8px;gap:6px;align-items:stretch}
  .payfoot .warn{grid-column:1/-1;margin:0;font-size:9.5px;min-height:0}
  .payfoot .btn{width:100%;min-width:0;padding:8px 4px;font-size:8.5px;white-space:nowrap}

  #toast{top:50px}
  .pcard{width:24px;height:33px;font-size:14px}
  .modal{max-height:calc(100vh - 24px)}
  .mbody{padding:16px}
  .sheetinfo .slab{margin-top:14px}
}
@media (max-height:520px) and (orientation:landscape){
  .mmgrid{--mm:20px;gap:2px}
  #minimap{padding:0 8px 5px}
  #railmsg{padding:4px 8px;font-size:10px}
  #left{max-height:70vh}
}
@media (max-width:400px){
  .mmgrid{--mm:30px}
  #rail.paying .mmgrid{--mm:22px}
  .tbtn{padding:5px 6px;font-size:8px}
}
@media (max-height:520px) and (max-width:900px){
  #left{max-height:56vh}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important}
}

/* ============================================================
   v1.4 — actie-iconen, accounts en tutorial
   ============================================================ */
.aicon{display:flex;align-items:center;justify-content:center;color:var(--bone);line-height:1}
.aicon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.acode{
  position:absolute;top:3px;left:4px;font:700 7px/1 ui-monospace,Menlo,monospace;
  color:rgba(236,229,216,.56);letter-spacing:.04em
}
.atag{font-size:7px;letter-spacing:.08em;color:var(--text-dim);margin-top:1px;text-transform:uppercase;white-space:nowrap}
.acard{width:46px;min-width:46px;height:48px;padding:5px 5px 4px;gap:1px;overflow:hidden}
.acard .aicon{width:25px;height:25px}
.acard:hover .aicon,.acard:not(.disabled) .aicon{color:#fff4db}
.bigacard{width:150px;min-height:172px;padding:13px 12px;position:relative;gap:10px}
.bigaface{height:74px;display:flex;align-items:center;justify-content:center;gap:8px;position:relative;border-bottom:1px solid var(--hair);padding-bottom:8px}
.bigaface .aicon{width:52px;height:52px}
.bigaface .acode{top:0;left:0;font-size:9px}
.bigaface .biganame{font-size:10px;line-height:1.2;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--bone);max-width:64px}
.bigacard .txt{font-size:10.5px;line-height:1.45;color:var(--text-dim);flex:1}
.bigacard.on .aicon{color:var(--yellow)}
.hudact{position:relative;width:40px;height:40px;padding:6px}
.hudact .aicon{width:27px;height:27px}
.hudact .acode{font-size:6px;top:2px;left:3px}
.hudact .atag{display:none}
.a-rule-icon{width:58px;min-width:58px;text-align:center!important;vertical-align:middle}
.a-rule-icon .aicon{width:34px;height:34px;margin:auto}
.a-rule-icon .acode{position:static;display:inline-block;margin-left:3px;font-size:8px}
.a-rule-icon .atag{display:none}

.formgrid{display:grid;gap:12px;margin:12px 0}
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);font-weight:700}
.forminput{
  width:100%;padding:11px 12px;border-radius:3px;border:1px solid var(--hair-strong);
  background:rgba(0,0,0,.28);color:var(--text);font:13px inherit;user-select:text
}
.forminput:focus{outline:none;border-color:var(--yellow);box-shadow:0 0 0 2px rgba(243,198,35,.08)}
.formnote{font-size:11.5px;line-height:1.55;color:var(--text-dim);margin:12px 0 0}
.formactions{display:flex;justify-content:flex-end;margin-top:14px}
.authswitch{display:flex;gap:6px;margin-bottom:16px}
.authswitch button{flex:1;padding:9px 10px;border:1px solid var(--hair);background:rgba(255,255,255,.025);color:var(--text-dim);font:600 11px inherit;cursor:pointer;border-radius:3px}
.authswitch button.on{background:var(--bone);color:#161a10;border-color:var(--bone)}
.accountcard{display:flex;align-items:center;gap:13px;padding:14px;border:1px solid var(--hair);background:rgba(255,255,255,.025);border-radius:4px}
.avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--slate-2);border:1px solid var(--hair-strong);font-size:20px;font-weight:800;color:var(--bone)}
.accountname{font-weight:750;font-size:16px}.accountuser{font-size:11px;color:var(--text-dim);margin-top:2px}
.savednote{margin:14px 0 0;padding:8px 10px;border:1px solid rgba(63,191,108,.25);background:rgba(63,191,108,.06);color:#8be7a9;font-size:11px;border-radius:3px}
.savednote.warn{border-color:rgba(243,198,35,.25);background:rgba(243,198,35,.05);color:#efd878}

.gamelist{display:flex;flex-direction:column;gap:8px}
.gamecard{border:1px solid var(--hair);border-radius:4px;background:rgba(255,255,255,.025);padding:11px 12px}
.gamecard.yourturn{border-left:3px solid var(--yellow);background:rgba(243,198,35,.035)}
.gamehead,.gamefoot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.gamehead>div:first-child{min-width:0}.gamehead b{display:block;font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gamehead div>span{display:block;margin-top:3px;font-size:9px;color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase}
.gamestatus{font-size:9px;white-space:nowrap;text-transform:uppercase;letter-spacing:.09em;color:var(--yellow);font-weight:700}
.gamefoot{margin-top:9px;padding-top:8px;border-top:1px solid var(--hair);font-size:10px;color:var(--text-dim)}
.gamefoot>div{display:flex;gap:5px}.btn.small{padding:5px 8px;font-size:8.5px}
.emptybox{padding:28px 16px;text-align:center;border:1px dashed var(--hair-strong);border-radius:4px;color:var(--text-dim)}
.emptybox b{display:block;color:var(--text);margin-bottom:5px}.emptybox span{font-size:11px;line-height:1.45}
.mobilemenu{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.menubtn{padding:13px 10px;border-radius:3px;border:1px solid var(--hair);background:rgba(255,255,255,.025);color:var(--text);font:650 11px inherit;cursor:pointer;text-align:left}
.menubtn.emph{border-color:rgba(243,198,35,.45);color:#ffe17a;background:rgba(243,198,35,.06)}

.tutorial{max-width:620px;margin:auto}
.tutorial>p{font-size:13px;line-height:1.62;margin:15px 0 10px;color:var(--text)}
.tutvisual{min-height:180px;padding:18px;border:1px solid var(--hair);border-radius:5px;background:radial-gradient(circle at 50% 20%,rgba(120,145,175,.13),rgba(0,0,0,.12));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden}
.tutcaption{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);font-weight:700;text-align:center}
.tutdots{display:flex;justify-content:center;gap:6px;margin-top:16px}.tutdots i{width:6px;height:6px;border-radius:50%;background:var(--hair-strong)}.tutdots i.on{background:var(--yellow);box-shadow:0 0 8px rgba(243,198,35,.6)}
.tutstep{text-align:center;margin-top:5px;font-size:9px;color:var(--text-dim);letter-spacing:.12em}
.tutcube{position:relative;width:190px;height:92px;transform:skewY(-12deg)}
.tutcube i{position:absolute;width:44px;height:44px;background:linear-gradient(145deg,#55cc7c,#198a46);border:2px solid rgba(255,255,255,.35);box-shadow:8px 10px 0 rgba(8,30,17,.5)}
.tutcube i:nth-child(1){left:5px;bottom:5px}.tutcube i:nth-child(2){left:50px;bottom:17px}.tutcube i:nth-child(3){left:95px;bottom:29px}.tutcube i:nth-child(4){left:140px;bottom:41px}
.coorddemo{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}.coordcell{width:72px;height:68px;border:2px solid var(--yellow);background:rgba(243,198,35,.07);display:flex;flex-direction:column;align-items:center;justify-content:center}.coordcell b{font:700 20px ui-monospace,monospace}.coordcell span{font-size:9px;color:var(--text-dim);margin-top:3px}.plus,.equals{color:var(--text-dim);font-size:18px}.paydemo{display:flex;align-items:center;gap:5px;color:var(--text-dim);font-size:10px}.paydemo .pcard{display:flex;position:relative}
.areagrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;width:min(430px,100%)}.areagrid>div{border:1px solid color-mix(in srgb,var(--ac),transparent 55%);background:color-mix(in srgb,var(--ac),transparent 87%);border-left:4px solid var(--ac);padding:12px}.areagrid b{display:block;font-size:12px}.areagrid span{display:block;font-size:9.5px;color:var(--text-dim);margin-top:3px}
.stonedemo{display:flex;align-items:flex-end;justify-content:center;gap:18px;flex-wrap:wrap}.stone{width:72px;text-align:center;font-size:9px;color:var(--text-dim)}.stone i{display:block;width:48px;height:34px;margin:0 auto 8px;border:1px solid rgba(255,255,255,.35);box-shadow:0 7px 11px rgba(0,0,0,.35)}.stone.square i{background:#259b53}.stone.round i{background:#dfaf16;border-radius:16px}.stone.red i{background:#ce392c}.stone.swap i{background:linear-gradient(90deg,#dfaf16 0 48%,#259b53 52%);border-radius:16px 3px 3px 16px}
.tutactions{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;width:min(520px,100%)}.tutactions>div{position:relative;min-height:82px;border:1px solid var(--hair);background:rgba(255,255,255,.025);border-radius:4px;padding:9px 6px;text-align:center}.tutactions .aicon{width:34px;height:34px;margin:0 auto 6px}.tutactions .acode{top:4px;left:5px}.tutactions b{font-size:8px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-dim)}
.accountflow{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.accountflow>div{width:120px;min-height:80px;border:1px solid var(--hair);background:rgba(255,255,255,.025);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:4px;font-size:24px}.accountflow b{font-size:9px;letter-spacing:.08em;text-transform:uppercase}.accountflow>span{color:var(--yellow);font-size:20px}

@media (max-width:1250px) and (min-width:861px){
  #topbar{gap:7px;padding:0 10px}.tbtn{padding:7px 8px;font-size:9px;letter-spacing:.09em}.brand .sub{display:none}
}
@media (max-width:860px){
  .desktopctl{display:none !important}
  #btnAccount{padding:5px 7px;max-width:86px;overflow:hidden;text-overflow:ellipsis}
  #btnMobileMenu{display:inline-block}
  .brand{min-width:0}.brand .t{white-space:nowrap}
  .pick{gap:7px}.bigacard{width:calc(50% - 4px);min-height:152px;padding:10px}.bigaface{height:58px}.bigaface .aicon{width:40px;height:40px}.bigaface .biganame{font-size:8.5px}.bigacard .txt{font-size:9.5px}
  .tutorial>p{font-size:12px}.tutvisual{min-height:160px;padding:13px}.tutactions{grid-template-columns:repeat(4,1fr);gap:4px}.tutactions>div{min-height:70px;padding:7px 3px}.tutactions .aicon{width:28px;height:28px}.tutactions b{font-size:6.8px}.accountflow>div{width:92px;min-height:70px;font-size:20px}.accountflow>span{font-size:15px}
  .gamehead,.gamefoot{align-items:flex-start}.gamefoot{flex-direction:column}.gamefoot>div{align-self:flex-end}
}
@media (max-width:430px){
  .mobilemenu{grid-template-columns:1fr}
  .areagrid{grid-template-columns:1fr 1fr}
  .tutactions{grid-template-columns:repeat(4,1fr)}
}

/* ============================================================
   v1.6 — account-online flow, nette actiekaarten en matchmaking
   ============================================================ */
.pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%;margin:8px 0 4px}
.bigacard{width:auto;min-width:0;min-height:252px;padding:12px 13px;display:flex;flex-direction:column;gap:10px}
.bigaface{height:auto;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;position:relative;border-bottom:1px solid var(--hair);padding:5px 4px 11px;text-align:center}
.bigaface .aicon{width:48px;height:48px;flex:0 0 48px}
.bigaface .acode{top:0;left:0;font-size:8px}
.bigaface .biganame{font-size:9.5px;line-height:1.2;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--bone);max-width:100%;overflow-wrap:anywhere}
.bigacard .txt{font-size:10.5px;line-height:1.52;color:var(--text-dim);flex:1}
.bigacard.on{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow) inset,0 0 22px rgba(243,198,35,.08)}
.bigacard.on .aicon{color:var(--yellow)}
.field small{font-size:10px;line-height:1.4;color:var(--text-dim);letter-spacing:0;text-transform:none;font-weight:400}
.formlead{padding:10px 12px;border-left:3px solid var(--yellow);background:rgba(243,198,35,.045);font-size:11.5px;line-height:1.5;color:var(--text-dim)}
.formlead b{color:var(--text)}
.textbtn{display:inline-block;margin-top:8px;padding:0;border:0;background:none;color:var(--yellow);font:600 11px inherit;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.accountpublic{font-size:9px;color:var(--text-dim);margin-top:3px;text-transform:uppercase;letter-spacing:.1em}
.accountdetails{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.accountdetails>div{padding:10px;border:1px solid var(--hair);background:rgba(255,255,255,.02);border-radius:3px;min-width:0}
.accountdetails span,.accountdetails small{display:block;color:var(--text-dim);font-size:9px;line-height:1.35}.accountdetails span{text-transform:uppercase;letter-spacing:.09em;font-weight:700;margin-bottom:5px}.accountdetails b{display:block;font-size:11px;overflow-wrap:anywhere}.accountdetails small{margin-top:5px}
.switchrow{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:11px;border:1px solid var(--hair);border-radius:3px;background:rgba(255,255,255,.02);cursor:pointer}.switchrow input{margin-top:3px}.switchrow b,.switchrow small{display:block}.switchrow b{font-size:11px}.switchrow small{font-size:9.5px;line-height:1.4;color:var(--text-dim);margin-top:3px}
.onlinechoices{display:grid;grid-template-columns:1fr 1fr;gap:9px}.onlinechoices>button{min-height:132px;padding:15px;border:1px solid var(--hair);border-radius:4px;background:rgba(255,255,255,.025);color:var(--text);font:inherit;cursor:pointer;text-align:left;transition:.15s}.onlinechoices>button:hover{border-color:var(--yellow);background:rgba(243,198,35,.04);transform:translateY(-1px)}.onlinechoices b,.onlinechoices small{display:block}.onlinechoices b{font-size:12px;margin-top:8px}.onlinechoices small{font-size:10px;line-height:1.45;color:var(--text-dim);margin-top:5px}.choiceicon{font-size:25px}
.searchbar{display:flex;gap:7px;margin:12px 0}.searchbar .forminput{flex:1}.searchresults{min-height:90px}.playerresults,.invitelist{display:flex;flex-direction:column;gap:7px}.playerrow,.inviterow{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--hair);border-radius:4px;background:rgba(255,255,255,.02)}.playerrow>div:nth-child(2),.inviterow>div:first-child{flex:1;min-width:0}.playerrow b,.playerrow small,.inviterow b,.inviterow small{display:block}.playerrow b,.inviterow b{font-size:12px}.playerrow small,.inviterow small{font-size:9.5px;color:var(--text-dim);margin-top:3px}.playeravatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--slate-2);border:1px solid var(--hair-strong);font-weight:800}.inviterow>div:last-child{display:flex;gap:5px}
.randomwait{text-align:center;padding:30px 12px}.randomwait b,.randomwait span{display:block}.randomwait b{margin-top:13px;font-size:14px}.randomwait span{margin:7px auto 0;max-width:430px;color:var(--text-dim);font-size:10.5px;line-height:1.5}.spinner{width:34px;height:34px;margin:auto;border:3px solid rgba(255,255,255,.12);border-top-color:var(--yellow);border-radius:50%;animation:spin .85s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.invitehero{text-align:center;font-size:42px;margin:4px 0 8px}.inviteheadline{text-align:center!important;font-size:17px!important;letter-spacing:.02em!important;text-transform:none!important;color:var(--text)!important;margin:0 0 12px!important}.inviteas{padding:9px 11px;background:rgba(63,191,108,.055);border:1px solid rgba(63,191,108,.25);border-radius:3px;font-size:11px}.gamesquick{display:flex;gap:6px;justify-content:flex-end;margin-bottom:10px}.seg.wrap3 button{min-width:calc(33.333% - 4px)}

@media(max-width:860px){
  .pick{grid-template-columns:1fr 1fr;gap:7px}.bigacard{min-height:218px;padding:10px}.bigaface{min-height:82px}.bigaface .aicon{width:40px;height:40px;flex-basis:40px}.bigaface .biganame{font-size:8.5px}.bigacard .txt{font-size:9.5px}
  .accountdetails{grid-template-columns:1fr}.onlinechoices{grid-template-columns:1fr}.onlinechoices>button{min-height:96px;padding:12px}.choiceicon{float:left;margin-right:10px}.searchbar{flex-direction:column}.gamesquick{justify-content:stretch}.gamesquick .btn{flex:1}
}
.pickdemo{display:flex;align-items:center;justify-content:center}.pickboard{position:relative;display:grid;grid-template-columns:repeat(2,58px);grid-template-rows:repeat(2,58px);gap:5px;transform:perspective(400px) rotateX(55deg) rotateZ(-28deg);padding:8px;background:#65717f;border:1px solid #83909f;box-shadow:0 18px 25px rgba(0,0,0,.35)}.pickboard>i{display:block;background:#9db3a4;border:2px solid #32404d}.pickstone{position:absolute;width:52px;height:38px;right:13px;top:15px;background:#e3b41d;border:2px solid rgba(255,255,255,.45);box-shadow:0 0 0 6px rgba(255,226,90,.22),0 0 22px rgba(255,226,90,.55)}.pickcursor{position:absolute;right:-34px;top:2px;font-size:32px;color:#fff;transform:rotate(28deg)}.pickboard em{position:absolute;right:-45px;bottom:-22px;font-style:normal;font-size:7px;letter-spacing:.12em;color:#ffe98a;white-space:nowrap}
.privacyflow{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(460px,100%)}.privacyflow>div{padding:16px 12px;border:1px solid var(--hair);border-radius:4px;text-align:center;background:rgba(255,255,255,.025)}.privacyflow span{display:block;font-size:28px}.privacyflow b,.privacyflow small{display:block}.privacyflow b{font-size:11px;margin-top:7px}.privacyflow small{font-size:9px;color:var(--text-dim);margin-top:4px}
.pushdemo{display:flex;align-items:center;gap:12px;width:min(410px,100%);padding:13px 15px;border:1px solid var(--hair-strong);border-radius:8px;background:#1c2330;box-shadow:0 10px 30px rgba(0,0,0,.3)}.pushdemo>span{font-size:27px}.pushdemo b,.pushdemo small{display:block}.pushdemo b{font-size:11px}.pushdemo small{font-size:9.5px;color:var(--text-dim);margin-top:4px}

/* ---------- v1.6 usability / PWA / laatste zet ---------- */
.disabledrow{opacity:.38;filter:saturate(.45)}
.disabledrow>span small{font-weight:400;letter-spacing:0;text-transform:none;margin-left:6px}
.disabledrow .seg button{cursor:not-allowed!important;transform:none!important}
.gamefilters{display:flex;gap:6px;margin:0 0 11px}
.gamefilters button{flex:1;min-width:0}
#lastMoveBadge{position:fixed;z-index:19;top:58px;left:50%;transform:translate(-50%,-8px);display:flex;align-items:center;gap:8px;padding:6px 11px;border-radius:999px;background:rgba(12,16,22,.90);border:2px solid rgba(255,231,115,.72);box-shadow:0 0 22px rgba(255,225,90,.18),0 4px 16px rgba(0,0,0,.42);opacity:0;pointer-events:none;transition:.18s;color:var(--text);font-size:10px;letter-spacing:.04em;white-space:nowrap}
#lastMoveBadge b{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:#ffe98a}
#lastMoveBadge span{font-weight:750}
#lastMoveBadge.on{opacity:1;transform:translate(-50%,0)}
.pushdiag{margin:12px 0;padding:10px 11px;border:1px solid var(--hair);border-left:3px solid var(--yellow);background:rgba(243,198,35,.035);border-radius:3px}
.pushdiag b,.pushdiag span{display:block}.pushdiag b{font-size:9px;text-transform:uppercase;letter-spacing:.13em}.pushdiag span{font-size:9.5px;color:var(--text-dim);margin-top:4px;line-height:1.5}
.accounttools{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 12px}.accounttools .btn{flex:1;min-width:145px}
.languagepick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.languagepick button{background:rgba(255,255,255,.025);border:1px solid var(--hair);color:var(--text);padding:18px 10px;border-radius:4px;cursor:pointer}.languagepick button.on{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow) inset;background:rgba(243,198,35,.05)}.languagepick b,.languagepick span{display:block}.languagepick b{font-size:12px}.languagepick span{font-size:9px;color:var(--text-dim);margin-top:5px;letter-spacing:.14em}
.installhelp{text-align:center;max-width:520px;margin:auto}.installlogo{width:74px;height:74px;margin:5px auto 15px;border-radius:18px;background:linear-gradient(145deg,#263445,#121820);border:1px solid var(--hair-strong);display:flex;align-items:center;justify-content:center;font-size:25px;font-weight:900;letter-spacing:.08em;color:var(--yellow);box-shadow:0 14px 38px rgba(0,0,0,.28)}
@media(max-width:860px){#lastMoveBadge{top:46px;max-width:calc(100vw - 18px)}#lastMoveBadge b{display:none}.languagepick{grid-template-columns:1fr}.accounttools .btn{min-width:100%}}
@media(max-width:1320px) and (min-width:861px){#btnInstall{display:none!important}}


/* ============================================================
   v1.8 — startpagina / dashboard
   ============================================================ */
.brand{cursor:pointer}
.homeguest{text-align:center;padding:6px 2px 2px}.homebrand{font:800 11px ui-monospace,Menlo,monospace;letter-spacing:.28em;color:var(--yellow);margin-bottom:8px}.homeguest h3{margin:0 0 7px;font-size:25px;letter-spacing:.01em;text-transform:none;color:var(--text)}.homeguest>p{max-width:570px;margin:0 auto 18px;color:var(--text-dim);font-size:12px;line-height:1.55}.homeguestactions{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:14px 0}.homechoice{min-height:116px;border:1px solid var(--hair);border-radius:4px;background:rgba(255,255,255,.025);color:var(--text);cursor:pointer;font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:.15s}.homechoice:hover{border-color:var(--yellow);transform:translateY(-2px);background:rgba(243,198,35,.035)}.homechoice.primary{background:var(--bone);color:#161a10;border-color:var(--bone)}.homechoice>span{font-size:28px}.homechoice>b{font-size:11px}.homefootlinks{display:flex;justify-content:center;gap:20px;margin-top:13px}
.homeload{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-dim);font-size:11px}.dashboard{display:flex;flex-direction:column;gap:14px}.dashhero{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:14px 15px;border:1px solid var(--hair);background:linear-gradient(135deg,rgba(243,198,35,.06),rgba(255,255,255,.015));border-radius:5px}.dashhero>div:first-child span,.dashhero>div:first-child b{display:block}.dashhero>div:first-child span{font-size:9px;letter-spacing:.25em;color:var(--yellow);font-weight:800}.dashhero>div:first-child b{font-size:18px;margin-top:5px}.dashstats{display:flex;gap:7px}.dashstats>div{min-width:78px;text-align:center;padding:9px 8px;border:1px solid var(--hair);border-radius:4px;background:rgba(0,0,0,.18)}.dashstats b,.dashstats span{display:block}.dashstats b{font-size:20px}.dashstats span{font-size:8px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}.dashactions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.dashactions>button{min-height:112px;padding:13px;border:1px solid var(--hair);border-radius:4px;background:rgba(255,255,255,.025);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:.15s}.dashactions>button:hover{border-color:var(--yellow);background:rgba(243,198,35,.035);transform:translateY(-1px)}.dashactions span,.dashactions b,.dashactions small{display:block}.dashactions span{font-size:23px}.dashactions b{font-size:11px;margin-top:6px}.dashactions small{font-size:9px;line-height:1.4;color:var(--text-dim);margin-top:4px}.dashsection{border-top:1px solid var(--hair);padding-top:11px}.dashsectionhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}.dashsectionhead>b{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim)}.dashsectionhead>span{min-width:22px;text-align:center;padding:2px 6px;border-radius:12px;background:var(--yellow);color:#17140a;font-size:9px;font-weight:800}.dashgame{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--hair);border-radius:4px;background:rgba(255,255,255,.018);margin-bottom:6px}.dashgame.yourturn{border-left:3px solid var(--yellow);background:rgba(243,198,35,.035)}.dashgameinfo b,.dashgameinfo span{display:block}.dashgameinfo b{font-size:11px}.dashgameinfo span{font-size:9px;color:var(--text-dim);margin-top:3px}.dashgamestatus{font-size:8.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);white-space:nowrap}.dashgame.yourturn .dashgamestatus{color:var(--yellow);font-weight:800}.dashempty{padding:12px;border:1px dashed var(--hair);border-radius:4px;color:var(--text-dim);font-size:10px;text-align:center}.dashfooter{display:flex;gap:7px;justify-content:flex-end;border-top:1px solid var(--hair);padding-top:12px}
@media(max-width:860px){.homeguestactions,.dashactions{grid-template-columns:1fr}.homechoice{min-height:76px;flex-direction:row;justify-content:flex-start;padding:12px 18px}.homechoice>span{font-size:22px}.dashhero{align-items:flex-start;flex-direction:column}.dashstats{width:100%}.dashstats>div{flex:1;min-width:0}.dashactions>button{min-height:82px}.dashgame{grid-template-columns:minmax(0,1fr) auto}.dashgamestatus{grid-column:1}.dashgame>button{grid-column:2;grid-row:1/3}.dashfooter{display:grid;grid-template-columns:1fr 1fr}.dashfooter .btn:last-child{grid-column:1/3}}


.autherror{display:none;margin:10px 0 0;padding:10px 12px;border:1px solid rgba(226,72,58,.55);background:rgba(226,72,58,.08);color:#ffd9d4;border-radius:3px;font-size:12px;line-height:1.45}
.autherror.on{display:block}

/* ============================================================
   Actiekaarten — betere leesbaarheid + hover ook wanneer niet speelbaar
   Alleen visuele aanpassing; spelgedrag blijft ongewijzigd.
   ============================================================ */
.acard{
  width:54px;
  min-width:54px;
  height:58px;
  padding:6px 6px 5px;
  gap:2px;
  overflow:hidden;
  background:linear-gradient(160deg,#3a4655,#26313f);
  border-color:rgba(213,224,238,.42);
  box-shadow:0 2px 7px rgba(0,0,0,.22);
}
.acard .aicon{
  width:30px;
  height:30px;
  color:#fff4dc;
}
.acard .atag{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#f2e8d8;
  font-size:7.5px;
  font-weight:700;
  letter-spacing:.055em;
}
.acard .acode{
  color:rgba(235,242,250,.78);
  font-size:7.5px;
}
.acard:not(.disabled):hover{
  border-color:var(--yellow);
  background:linear-gradient(160deg,#465466,#2d3948);
  box-shadow:0 5px 14px rgba(0,0,0,.34),0 0 0 1px rgba(243,198,35,.20);
  transform:translateY(-2px);
}

/* Niet speelbaar: nog steeds goed leesbaar en altijd hoverbaar voor de uitleg. */
.acard.disabled{
  opacity:1;
  pointer-events:auto;
  cursor:help;
  transform:none;
  background:linear-gradient(160deg,#454d57,#343b44);
  border-color:rgba(210,220,232,.30);
  box-shadow:0 1px 4px rgba(0,0,0,.18);
  filter:saturate(.32);
}
.acard.disabled .aicon{
  color:#cbd2d9;
}
.acard.disabled .atag{
  color:#c6cdd5;
}
.acard.disabled .acode{
  color:#aeb8c2;
}
.acard.disabled:hover{
  opacity:1;
  border-color:#aab4bf;
  background:linear-gradient(160deg,#535d68,#3c4550);
  box-shadow:0 4px 12px rgba(0,0,0,.30);
  transform:translateY(-2px);
}
.acard.disabled:hover .aicon{
  color:#eef2f5;
}
.acard.disabled:hover .atag{
  color:#eef2f5;
}

@media(max-width:860px){
  .acard{width:52px;min-width:52px;height:56px}
  .acard .aicon{width:29px;height:29px}
}