/* OGNIWO — motyw jasny domyślny, ciemny przez [data-theme="dark"] */
:root[data-theme="light"], :root:not([data-theme]) {
  --bg:#E9EEF0; --card:#FDFEFE; --card2:#F1F5F6; --line:#C3D1D6; --line2:#DDE6E9;
  --ink:#152229; --ash:#5D7480; --brass:#8E6218; --red:#B23F26;
  --a:#A96A12; --a-bg:#FBF0DC; --a-dim:#EBD7AE;
  --b:#0F6C79; --b-bg:#DFF0F2; --b-dim:#AFD8DD;
  --sq:#E2EAEC; --sq2:#CFDBDF;
  --shadow:0 1px 2px rgba(21,34,41,.09),0 4px 14px rgba(21,34,41,.06);
}
:root[data-theme="dark"] {
  --bg:#0A1014; --card:#111A20; --card2:#16222A; --line:#25373F; --line2:#1C2A32;
  --ink:#E4EDEF; --ash:#7C939C; --brass:#B4813C; --red:#D9603F;
  --a:#F2B035; --a-bg:#2A1E06; --a-dim:#5C4415;
  --b:#38B6C4; --b-bg:#062024; --b-dim:#14454C;
  --sq:#16232A; --sq2:#0E161B; --shadow:none;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:14px;line-height:1.45;padding:12px;transition:background .3s,color .3s}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
a{color:var(--brass)}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
.disp{font-family:'Chakra Petch',sans-serif;font-weight:700;letter-spacing:.1em}
.hide{display:none!important}

/* ---------- belka górna ---------- */
.top{max-width:1280px;margin:0 auto 10px;background:var(--card);border:1px solid var(--line);
  border-radius:3px;box-shadow:var(--shadow);display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:12px;padding:9px 14px}
@media(max-width:820px){.top{grid-template-columns:1fr;gap:8px}.top .rt{justify-content:flex-start}}
.brand{display:flex;align-items:baseline;gap:9px;min-width:0}
.brand .lg{font-family:'Chakra Petch';font-weight:700;font-size:22px;letter-spacing:.18em}
.brand .gn{font-family:'IBM Plex Mono';font-size:11px;color:var(--ash);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ctr{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center}
.turnchip{display:flex;align-items:center;gap:8px;padding:4px 11px;border-radius:2px;
  border:1px solid currentColor}
.turnchip.p0{color:var(--a);background:var(--a-bg)}
.turnchip.p1{color:var(--b);background:var(--b-bg)}
.turnchip .nm{font-family:'Chakra Petch';font-weight:700;font-size:13px;letter-spacing:.1em}
.ap{display:flex;gap:3px}
.ap i{width:11px;height:11px;border:1px solid currentColor;transform:rotate(45deg);display:block}
.ap i.f{background:currentColor}
.btn{border:1px solid var(--brass);color:var(--brass);background:var(--card);padding:6px 13px;
  border-radius:2px;font-family:'Chakra Petch';font-weight:700;font-size:11.5px;
  letter-spacing:.11em;text-transform:uppercase;transition:.15s}
.btn:hover:not(:disabled){background:var(--brass);color:var(--card)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.q{border-color:var(--line);color:var(--ash)}
.btn.pri{background:var(--brass);color:var(--card)}
.btn.sm{padding:3px 9px;font-size:10.5px}
.rt{display:flex;justify-content:flex-end;gap:6px;align-items:center}
.ico{width:30px;height:30px;border:1px solid var(--line);border-radius:2px;display:grid;
  place-items:center;color:var(--ash);background:var(--card)}
.ico:hover{border-color:var(--brass);color:var(--brass)}

/* ---------- pasek energii ---------- */
.tug{max-width:1280px;margin:0 auto 12px;background:var(--card);border:1px solid var(--line);
  border-radius:3px;box-shadow:var(--shadow);overflow:hidden}
.tug .hd{display:flex;justify-content:space-between;padding:5px 12px 4px;
  font-family:'IBM Plex Mono';font-size:10.5px;letter-spacing:.05em;color:var(--ash);text-transform:uppercase}
.tug .hd b{font-size:14px}
.pa b{color:var(--a)} .pb b{color:var(--b)}
.bar{display:flex;height:24px;position:relative;border-top:1px solid var(--line2)}
.seg{display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono';
  font-size:10px;transition:width .5s cubic-bezier(.4,0,.2,1);overflow:hidden}
.g1{background:var(--a);color:var(--card)} .g2{background:var(--a-dim);color:var(--a)}
.g3{background:var(--b-dim);color:var(--b)} .g4{background:var(--b);color:var(--card)}
.mid{position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed var(--ink);opacity:.45}

/* ---------- ostrzeżenia ---------- */
.alert{max-width:1280px;margin:0 auto 12px;border:1px solid var(--brass);background:var(--card);
  border-left:3px solid var(--brass);border-radius:3px;padding:9px 13px;font-size:12.5px;
  display:flex;gap:10px;align-items:center;box-shadow:var(--shadow)}
.alert b{font-family:'Chakra Petch';letter-spacing:.05em}
.alert.err{border-color:var(--red);border-left-color:var(--red);color:var(--red)}

/* ---------- układ ---------- */
.wrap{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:252px minmax(0,1fr) 272px;
  gap:12px;align-items:start}
@media(max-width:1040px){.wrap{grid-template-columns:1fr}}
.pnl{background:var(--card);border:1px solid var(--line);border-radius:3px;box-shadow:var(--shadow)}
.pnl h2{font-family:'Chakra Petch';font-weight:700;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass);padding:8px 11px;border-bottom:1px solid var(--line2);
  display:flex;justify-content:space-between;gap:8px}
.pnl .in{padding:9px}

/* ---------- karty i chmurki ---------- */
.card{position:relative;border:1px solid var(--line2);background:var(--card2);border-radius:2px;
  padding:6px 8px;margin-bottom:5px;display:flex;gap:8px;align-items:center;width:100%;text-align:left}
.card:hover:not(:disabled){border-color:var(--brass)}
.card:disabled{opacity:.34;cursor:not-allowed}
.card.on{border-color:var(--a);background:var(--a-bg)}
.sig{width:26px;height:26px;flex:none}
.card .txt{flex:1;min-width:0}
.card .nm{font-family:'Chakra Petch';font-weight:700;font-size:12.5px;letter-spacing:.04em;display:block}
.card .st{font-family:'IBM Plex Mono';font-size:9.5px;color:var(--ash);display:block}
.card .cst{font-family:'IBM Plex Mono';font-size:14px;color:var(--a);font-weight:600}
.tip{position:absolute;left:calc(100% + 9px);top:-6px;width:252px;background:var(--card);
  border:1px solid var(--brass);border-radius:3px;padding:10px 11px;z-index:30;
  box-shadow:0 6px 24px rgba(21,34,41,.18);text-align:left}
.tip::before{content:"";position:absolute;left:-6px;top:16px;width:10px;height:10px;
  background:var(--card);border-left:1px solid var(--brass);border-bottom:1px solid var(--brass);
  transform:rotate(45deg)}
.tip h4{font-family:'Chakra Petch';font-size:14px;letter-spacing:.06em;margin-bottom:5px}
.tip .grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;font-family:'IBM Plex Mono';
  font-size:10px;color:var(--ash);margin-bottom:7px}
.tip .grid b{color:var(--ink);float:right}
.tip p{font-size:11.5px;line-height:1.5;margin-bottom:6px}
.tip .warn{font-size:10.5px;color:var(--brass);border-top:1px solid var(--line2);padding-top:5px}
@media(max-width:1040px){.tip{position:static;width:auto;margin-top:7px}.tip::before{display:none}}

/* ---------- plansza ---------- */
.bwrap{display:flex;justify-content:center}
.board{position:relative;display:grid;width:100%;max-width:560px;aspect-ratio:1;
  border:1px solid var(--brass);border-radius:2px;overflow:hidden;background:var(--line);gap:1px}
.sq{background:var(--sq2);position:relative;display:grid;place-items:center;cursor:default}
.sq.lt{background:var(--sq)}
.sq.src::after{content:"";position:absolute;inset:26%;border:1.5px solid var(--brass);
  border-radius:50%;opacity:.5}
.sq.src.held::after{opacity:1;box-shadow:0 0 10px var(--brass)}
.sq.mv,.sq.at,.sq.tg{cursor:pointer}
.sq.mv::before{content:"";width:24%;height:24%;border-radius:50%;background:var(--ink);
  opacity:.26;position:absolute}
.sq.at{box-shadow:inset 0 0 0 2px var(--red)}
.sq.tg{box-shadow:inset 0 0 0 2px var(--brass)}
.sq.sel{box-shadow:inset 0 0 0 3px var(--ink)}
.cd{position:absolute;bottom:1px;right:3px;font-family:'IBM Plex Mono';font-size:7.5px;
  color:var(--ash);opacity:.6;pointer-events:none}
.pc{width:80%;height:80%;border-radius:50%;display:grid;place-items:center;position:relative}
.pc.p0{background:var(--a-bg);border:1.5px solid var(--a);color:var(--a)}
.pc.p1{background:var(--b-bg);border:1.5px solid var(--b);color:var(--b)}
.pc.k{border-width:3px;border-style:double}
.pc.done{opacity:.45}
.pc svg{width:52%;height:52%}
.pc .e{position:absolute;bottom:-3px;right:-5px;background:var(--card);border:1px solid currentColor;
  border-radius:7px;font-family:'IBM Plex Mono';font-size:8.5px;font-weight:600;padding:0 3px;line-height:1.35}
.pc .e.over{background:var(--brass);color:var(--card)}
.pc .mk{position:absolute;top:-2px;right:-2px;width:8px;height:8px;background:var(--red);border-radius:50%}
.pc.hit{animation:hit .34s ease}
@keyframes hit{0%{transform:scale(1)}35%{transform:scale(1.2)}100%{transform:scale(1)}}
.pc.hidden-unit{border-style:dashed;opacity:.5}

/* nakładka animacji */
.shot{position:absolute;inset:0;pointer-events:none;z-index:8}
.tracer{stroke:var(--red);stroke-width:2.5;stroke-linecap:round;animation:trace .5s ease-out forwards}
@keyframes trace{0%{stroke-dasharray:0 999}60%{stroke-dasharray:999 0;opacity:1}100%{opacity:0}}
.impact{fill:none;stroke:var(--red);stroke-width:2.5;animation:bang .6s ease-out forwards}
@keyframes bang{0%{r:2;opacity:1}100%{r:22;opacity:0}}
.float{position:absolute;font-family:'IBM Plex Mono';font-size:13px;font-weight:600;
  pointer-events:none;z-index:9;animation:fl 1s ease-out forwards}
@keyframes fl{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-28px)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- panele prawe ---------- */
.info .h{font-family:'Chakra Petch';font-weight:700;font-size:15px;letter-spacing:.05em}
.row{display:flex;justify-content:space-between;font-family:'IBM Plex Mono';font-size:10.5px;
  color:var(--ash);padding:1.5px 0;border-bottom:1px dotted var(--line2);gap:8px}
.row b{color:var(--ink);text-align:right}
.hintbox{margin-top:8px;padding:7px 9px;background:var(--card2);border-left:2px solid var(--brass);
  font-size:11.5px;line-height:1.5}
.log{height:172px;overflow:auto;font-family:'IBM Plex Mono';font-size:10px;line-height:1.55;padding:7px 10px}
.log div{padding:1px 0}
.log .p0{color:var(--a)} .log .p1{color:var(--b)} .log .sys{color:var(--ash)}

/* ---------- formularze ---------- */
.field{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;
  border-bottom:1px dotted var(--line2);font-size:12.5px}
.field:last-child{border:none}
.field .lb{color:var(--ash);font-size:11.5px}
.inp{border:1px solid var(--line);background:var(--card2);border-radius:2px;padding:5px 9px;
  font-family:'IBM Plex Mono';font-size:12px;color:var(--ink);min-width:150px}
.seg2{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.seg2 button{padding:4px 10px;font-family:'IBM Plex Mono';font-size:10.5px;color:var(--ash);
  border-right:1px solid var(--line)}
.seg2 button:last-child{border-right:none}
.seg2 button.on{background:var(--brass);color:var(--card)}

/* ---------- modale ---------- */
.modal{position:fixed;inset:0;background:rgba(10,16,20,.62);display:grid;place-items:center;
  z-index:60;padding:16px}
.sheet{background:var(--card);border:1px solid var(--line);border-radius:4px;max-width:760px;
  width:100%;max-height:92vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.sheet header{padding:14px 18px;border-bottom:1px solid var(--line2);display:flex;
  justify-content:space-between;align-items:center;gap:12px}
.sheet header h3{font-family:'Chakra Petch';font-size:20px;letter-spacing:.1em}
.sheet .body{padding:16px 18px}
.mvp{display:flex;gap:9px;align-items:center;padding:8px 0;border-bottom:1px dotted var(--line2)}
.mvp .t{flex:1;font-size:12px}
.mvp .t i{display:block;font-style:normal;font-family:'IBM Plex Mono';font-size:9.5px;color:var(--ash)}
.mvp .v{font-family:'IBM Plex Mono';font-size:14px;font-weight:600}
.scrub{display:flex;align-items:center;gap:9px;margin-top:10px}
.track{flex:1;height:5px;background:var(--line2);border-radius:3px;position:relative;cursor:pointer}
.track i{position:absolute;left:0;top:0;bottom:0;background:var(--brass);border-radius:3px}

/* ---------- zasłona hot-seat ---------- */
.curtain{position:fixed;inset:0;background:var(--bg);display:grid;place-items:center;z-index:70;
  text-align:center;padding:24px}
.curtain h3{font-family:'Chakra Petch';font-size:28px;letter-spacing:.12em;margin-bottom:8px}
.curtain p{color:var(--ash);max-width:420px;margin:0 auto 18px;font-size:13px}

/* ---------- kod partii na belce ---------- */
.joincode{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--brass);
  border-radius:2px;padding:3px 10px;background:var(--card2)}
.joincode .lb{font-family:'IBM Plex Mono';font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ash)}
.joincode b{font-family:'IBM Plex Mono';font-size:16px;font-weight:600;color:var(--brass);
  letter-spacing:.06em;user-select:all}

/* ---------- legenda ustawień i kod partii ---------- */
.help{font-size:11px;color:var(--ash);line-height:1.5;margin:-2px 0 8px;padding-left:2px}
.help b{color:var(--ink);font-weight:600}
.setting{border-bottom:1px dotted var(--line2);padding:8px 0}
.setting:last-child{border:none}
.setting .field{border:none;padding:0 0 3px}
details.rules{border:1px solid var(--line);border-radius:3px;background:var(--card2);margin-top:12px}
details.rules>summary{cursor:pointer;padding:9px 12px;font-family:'Chakra Petch';font-weight:700;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);list-style:none}
details.rules>summary::-webkit-details-marker{display:none}
details.rules>summary::before{content:"▸ ";display:inline-block;transition:transform .15s}
details.rules[open]>summary::before{content:"▾ "}
details.rules .rbody{padding:0 14px 14px;font-size:12.5px;line-height:1.6}
details.rules .rbody h4{font-family:'Chakra Petch';font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brass);margin:12px 0 4px}
details.rules .rbody ul{margin:4px 0 0 18px}
details.rules .rbody li{margin-bottom:4px}
.code{font-family:'IBM Plex Mono';font-size:22px;font-weight:600;letter-spacing:.22em;
  color:var(--brass);background:var(--card2);border:1px dashed var(--brass);border-radius:3px;
  padding:5px 12px;display:inline-block}
.codebox{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* ---------- telefon i tablet ---------- */
@media (max-width:700px){
  body{padding:7px}
  .top{padding:8px 10px;gap:7px}
  .brand .lg{font-size:18px}
  .brand .gn{font-size:10px}
  .ctr{gap:6px}
  .btn{padding:7px 11px;font-size:11px}      /* większy cel dotyku */
  .board{max-width:100%}
  .pc .e{font-size:9.5px;bottom:-2px;right:-3px}
  .sq{min-height:0}
  .card{padding:8px 9px}                     /* karty łatwiejsze do trafienia palcem */
  .sig{width:30px;height:30px}
  .log{height:130px}
  .tip{display:none!important}               /* opis idzie do panelu, chmurka byłaby nieosiągalna */
  .sheet header h3{font-size:17px}
  .code{font-size:18px;letter-spacing:.16em}
}
@media (max-width:700px) and (orientation:landscape){
  .board{max-width:74vh}                     /* w poziomie plansza ma się mieścić w wysokości */
}

/* ================= 1. baner tury ================= */
.turnbar{max-width:1280px;margin:0 auto 12px;border-radius:3px;border:1px solid var(--line);
  background:var(--card);box-shadow:var(--shadow);display:flex;align-items:center;gap:14px;
  padding:11px 16px;position:relative;overflow:hidden}
.turnbar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--ash)}
.turnbar.mine::before{background:var(--a)}
.turnbar.theirs::before{background:var(--b)}
.turnbar .who{font-family:'Chakra Petch';font-weight:700;font-size:19px;letter-spacing:.1em;
  text-transform:uppercase;line-height:1}
.turnbar.mine .who{color:var(--a)}
.turnbar.theirs .who{color:var(--b)}
.turnbar .sub{font-size:12px;color:var(--ash);line-height:1.4}
.turnbar .dots{display:flex;gap:4px;margin-left:auto;align-items:center}
.turnbar .dots i{width:14px;height:14px;border:1.5px solid currentColor;transform:rotate(45deg);display:block}
.turnbar .dots i.f{background:currentColor}
.turnbar.mine .dots{color:var(--a)} .turnbar.theirs .dots{color:var(--b)}
.turnbar .wait{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--b);
  margin-right:6px;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes flash{0%{transform:scale(1)}25%{transform:scale(1.012)}100%{transform:scale(1)}}
.turnbar.changed{animation:flash .5s ease}
.board.waiting{opacity:.72;filter:saturate(.65);transition:opacity .3s,filter .3s}

/* ================= 4. ostrzeżenie o Impasie ================= */
.alert.big{align-items:flex-start;padding:13px 16px;border-left-width:5px}
.alert.big .num{font-family:'Chakra Petch';font-size:40px;font-weight:700;line-height:.9;
  color:var(--brass);flex:none;min-width:44px;text-align:center}
.alert.big .txt b{display:block;font-family:'Chakra Petch';font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:3px}
.alert.big .txt span{font-size:12.5px;line-height:1.5;color:var(--ink)}

/* ================= 3. ekran końca partii ================= */
.endscreen{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;
  background:rgba(233,238,240,.93);animation:fade .4s ease}
:root[data-theme="dark"] .endscreen{background:rgba(10,16,20,.94)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.endcard{background:var(--card);border:1px solid var(--line);border-radius:5px;max-width:480px;
  width:100%;text-align:center;padding:34px 28px 26px;box-shadow:0 24px 70px rgba(0,0,0,.22);
  border-top:5px solid var(--ash);animation:rise .45s cubic-bezier(.2,.8,.3,1)}
@keyframes rise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.endcard.win{border-top-color:var(--a)}
.endcard.lose{border-top-color:var(--red)}
.endcard.draw{border-top-color:var(--brass)}
.endcard .verdict{font-family:'Chakra Petch';font-weight:700;font-size:46px;letter-spacing:.14em;
  line-height:1;margin-bottom:8px}
.endcard.win .verdict{color:var(--a)}
.endcard.lose .verdict{color:var(--red)}
.endcard.draw .verdict{color:var(--brass)}
.endcard .versus{font-family:'IBM Plex Mono';font-size:12px;color:var(--ash);margin-bottom:16px}
.endcard .why{font-size:13.5px;line-height:1.55;margin-bottom:18px}
.endcard .tally{display:flex;justify-content:center;gap:26px;padding:13px 0;margin-bottom:20px;
  border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.endcard .tally div{font-family:'IBM Plex Mono'}
.endcard .tally .n{font-size:22px;font-weight:600;display:block}
.endcard .tally .l{font-size:9.5px;color:var(--ash);text-transform:uppercase;letter-spacing:.09em}
.endcard .acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* ================= 5. nazwa postaci nad pionkiem ================= */
.pc[data-name]:hover::after, .pc[data-name].named::after{
  content:attr(data-name);position:absolute;bottom:calc(100% + 5px);left:50%;
  transform:translateX(-50%);background:var(--ink);color:var(--bg);
  font-family:'IBM Plex Sans';font-size:10.5px;font-weight:600;letter-spacing:.02em;
  padding:2px 7px;border-radius:2px;white-space:nowrap;z-index:12;pointer-events:none}
.sq{overflow:visible}
.board{overflow:visible}
@media (max-width:700px){
  .turnbar{padding:9px 12px;gap:10px}
  .turnbar .who{font-size:16px}
  .turnbar .sub{font-size:11px}
  .endcard .verdict{font-size:34px}
  .alert.big .num{font-size:32px;min-width:36px}
}

/* ================= 6. zasłona na jednym urządzeniu ================= */
.curtain{position:fixed;inset:0;z-index:90;display:grid;place-items:center;text-align:center;
  padding:24px;background:var(--bg)}
.curtain .handoff{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ash);margin-bottom:10px}
.curtain h3{font-family:'Chakra Petch';font-weight:700;font-size:38px;letter-spacing:.1em;
  color:var(--brass);margin-bottom:12px;line-height:1}
.curtain p{color:var(--ash);max-width:400px;margin:0 auto 22px;font-size:13px;line-height:1.6}

/* ================= 7. błysk na trafionym polu ================= */
.sq.struck{animation:struck .48s ease-out}
@keyframes struck{
  0%{box-shadow:inset 0 0 0 3px var(--red);background:rgba(196,70,44,.35)}
  100%{box-shadow:inset 0 0 0 0 transparent}
}
.tracer{stroke-width:3.5}