:root{
  --ink:#1f2430;
  --paper:#f4efe6;
  --paper-2:#ece4d6;
  --board:#fbf8f2;
  --line:#d8cdb8;
  --gold:#b07c2e;
  --found:#2f8a4c;
  --found-soft:rgba(47,138,76,.20);
  --wrong:#d23b3b;
  --t1:#3a4cb5;
  --t2:#d9952b;
  --t3:#10897e;
  --t4:#8e44ad;
  --shadow:0 10px 30px rgba(31,36,48,.12);
  --cellgap:clamp(3px,.55vw,6px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:'Nunito',sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 50% -10%, #fbf7ef 0%, var(--paper) 55%, var(--paper-2) 100%);
  min-height:100%;
  -webkit-font-smoothing:antialiased;
}
/* Tryb pełnoekranowy: kontener nigdy nie wychodzi poza ekran. Gdyby treść była
   wyższa niż okno (np. proporcje 16:9 4K + duża skala systemu Windows),
   pojawia się WŁASNY, kontrolowany scroll w środku — strona nigdy nie "ucieka"
   poza widoczny obszar i nie zostaje obcięta bez możliwości przewinięcia. */
html:fullscreen body, html:-webkit-full-screen body{
  height:100vh; max-height:100vh; overflow-y:auto; overflow-x:hidden;
}
.wrap{max-width:1180px;margin:0 auto;padding:18px clamp(12px,3vw,28px) 40px}
html:fullscreen .wrap, html:-webkit-full-screen .wrap{
  max-width:none; width:100%; min-height:100vh; padding:12px clamp(12px,2vw,24px) 14px;
}
h1,h2,h3,.disp{font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.5px}
button{font-family:'Oswald',sans-serif;cursor:pointer;border:none;letter-spacing:.6px}
.hidden{display:none !important}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px;padding-right:52px}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.brand .game-name{font-family:'Oswald';font-weight:700;font-size:clamp(22px,3.4vw,32px);text-transform:uppercase;letter-spacing:.5px;color:var(--ink)}
.brand .set{font-size:14px;color:#7a7060;font-weight:700;text-transform:uppercase;letter-spacing:1.5px}
/* stopka „Powered by" — spójna identyfikacja ze Statkami */
.sb-footer{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line)}
.sb-footer .pb-label{font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#9a8f7c;font-weight:700}
.sb-footer .pb-link{display:inline-flex;align-items:center;opacity:.85;transition:opacity .2s}
.sb-footer .pb-link:hover{opacity:1}
.sb-footer .pb-logo{height:28px;width:auto;display:block}
/* przycisk pełnego ekranu — standard każdej gry */
.fs-btn{position:fixed;top:12px;right:12px;z-index:60;width:42px;height:42px;border-radius:10px;background:#fff;border:1px solid #ece2cf;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);transition:.15s}
.fs-btn:hover{background:#fbf0d6;color:var(--gold)}
.fs-btn svg{width:22px;height:22px;display:block}
.fs-btn .ic-compress{display:none}
.fs-btn.is-fs .ic-expand{display:none}
.fs-btn.is-fs .ic-compress{display:block}
.scoreboard{display:flex;flex-direction:column;gap:6px}
.team-chip{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;background:#fff;border:1.5px solid #ece2cf;transition:.2s;width:100%}
.team-chip .dot{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.team-chip .nm{font-weight:800;font-size:15px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-chip .sc{font-family:'Oswald';font-weight:700;font-size:20px;min-width:28px;text-align:right}
.team-chip.active{border-color:currentColor;box-shadow:0 4px 12px rgba(31,36,48,.12)}

/* ---------- play row ---------- */
.playrow{display:grid;grid-template-columns:280px 1fr;gap:20px;align-items:stretch}
.board-area{display:flex;flex-direction:column;gap:14px;min-width:0}
@media(max-width:820px){.playrow{grid-template-columns:1fr}}

/* ---------- board ---------- */
.board-card{background:var(--board);border-radius:18px;padding:clamp(12px,2.4vw,22px);box-shadow:var(--shadow);border:1px solid #ece2cf}
/* Tryb pełnoekranowy: plansza jest kwadratowa względem SZEROKOŚCI (patrz .cell
   aspect-ratio), ale na szerokich-i-niskich ekranach (4K 16:9 + skala Windows)
   szerokość kolumny bywa większa niż dostępna wysokość -> plansza "chce" być
   wyższa niż ekran. Ograniczamy więc max-width planszy do dostępnej wysokości,
   żeby kwadratowe komórki same się zmniejszyły i całość zawsze zmieściła się
   w jednym ekranie bez przewijania. */
html:fullscreen .board-card, html:-webkit-full-screen .board-card{
  width: min(calc(100vh - 200px), calc(100vw - 360px));
  max-width:none; max-height:none; overflow:visible;
  margin-left:auto; margin-right:auto;
}
/* pytanie kompaktowe i wyrównane do szerokości planszy; całość wyśrodkowana w pionie */
html:fullscreen .board-area, html:-webkit-full-screen .board-area{ justify-content:center; }
html:fullscreen .clue-card, html:-webkit-full-screen .clue-card{
  width: min(calc(100vh - 200px), calc(100vw - 360px));
  margin-left:auto; margin-right:auto; padding:12px 18px;
}
/* ramka z osiami: róg | litery kolumn / liczby wierszy | plansza */
.boardframe{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;gap:6px}
.col-axis{display:grid;gap:var(--cellgap)}
.row-axis{display:grid;gap:var(--cellgap);grid-auto-flow:row}
.axis-cell{display:flex;align-items:center;justify-content:center;font-family:'Oswald';font-weight:700;
  font-size:clamp(11px,1.6vw,18px);color:#a8977a;line-height:1;
  transition:color .12s,background .12s;border-radius:6px}
.row-axis .axis-cell{min-width:clamp(16px,2.4vw,30px)}
.axis-cell.on{color:#fff;background:var(--axis-on,var(--gold))}
.board{position:relative;width:100%;touch-action:none;user-select:none;-webkit-user-select:none}
.capsule-layer{position:absolute;inset:0;pointer-events:none;z-index:1}
.capsule{position:absolute;border-radius:999px;box-sizing:border-box}
.capsule.active{background:var(--cap-active,rgba(58,76,181,.20));border:3px solid var(--cap-line,#3a4cb5)}
.capsule.found{background:var(--found-soft);border:3px solid var(--found)}
.capsule.wrong{background:rgba(210,59,59,.18);border:3px solid var(--wrong);animation:wrongpulse .55s ease}
.capsule.hint{background:rgba(176,124,46,.20);border:3px dashed var(--gold);animation:hintpulse 1.2s ease}
.cell.hintcell{background:rgba(176,124,46,.18);color:var(--gold);animation:cellhint 1.1s ease infinite}
@keyframes wrongpulse{0%{opacity:1}70%{opacity:1}100%{opacity:0}}
@keyframes hintpulse{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes cellhint{0%,100%{box-shadow:inset 0 0 0 3px rgba(176,124,46,.25)}50%{box-shadow:inset 0 0 0 3px rgba(176,124,46,1)}}
.grid{position:relative;z-index:2;display:grid;gap:var(--cellgap)}
.cell{
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  background:#fff;border-radius:8px;border:1px solid #efe7d6;
  font-family:'Oswald';font-weight:600;
  font-size:clamp(15px,2.4vw,30px);color:var(--ink);
  line-height:1;transition:background .12s, color .12s;
}
.cell.lit{background:#eef1ff}
.cell.foundcell{color:var(--found)}
/* tryb młodszy (klasy 1-3): większe, zaokrąglone litery, szersze odstępy (mniej crowdingu) */
.grid.young{gap:clamp(7px,1.3vw,14px)}
.grid.young .cell{font-family:'Nunito',sans-serif;font-weight:800;font-size:clamp(26px,5vw,52px);border-radius:12px}
.board.young .axis-cell{font-size:clamp(14px,2.2vw,24px)}
/* boks punktów bez zegara (klasy 1-2) */
.lab-flat{display:none}
.timer-box.no-timer .ring{display:none}
.timer-box.no-timer .lab-timer{display:none}
.timer-box.no-timer .lab-flat{display:inline}

/* ---------- side panel ---------- */
.side{display:flex;flex-direction:column;gap:12px;order:-1;
  background:#fbf7ef;border:1px solid #ece2cf;border-radius:16px;padding:14px 13px;box-shadow:var(--shadow)}
/* przycisk pełnego ekranu w panelu (jak w Statkach) */
.fs-btn-panel{width:100%;padding:11px 14px;background:#fff;border:1px solid #ece2cf;border-radius:10px;
  color:#7a7060;cursor:pointer;font-size:13px;text-align:left;font-family:'Oswald',sans-serif;font-weight:600;
  letter-spacing:.5px;transition:.15s;white-space:nowrap;overflow:hidden}
.fs-btn-panel:hover{background:#fbf0d6;color:var(--gold)}
/* aktywna drużyna */
.active-box{background:#fff;border:2px solid #ece2cf;border-radius:12px;padding:12px 14px}
.micro-lbl{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:1px;color:#9a8f7c;font-weight:700;text-transform:uppercase}
.active-nm{font-family:'Oswald',sans-serif;font-weight:700;font-size:20px;margin-top:3px;word-break:break-word;line-height:1.1}
/* wyniki */
.scores-hd{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:1px;color:#9a8f7c;font-weight:700;text-transform:uppercase;margin-bottom:6px}
/* stopka panelu: licznik + logo na dole */
.sb-foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:14px;border-top:1px solid var(--line)}
.sb-foot .pb-label{font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#9a8f7c;font-weight:700}
.sb-foot .pb-link{display:inline-flex;align-items:center;opacity:.85;transition:opacity .2s}
.sb-foot .pb-link:hover{opacity:1}
.sb-foot .pb-logo{height:28px;width:auto;display:block}
.count-box{text-align:center;background:#fbf0d6;border:1.5px solid #e3c98a;border-radius:10px;padding:8px 12px;width:100%}
.count-num{font-family:'Oswald',sans-serif;font-size:26px;font-weight:700;color:var(--gold);line-height:1}
.count-lbl{font-size:9px;color:#9a8f7c;letter-spacing:.5px;margin-top:2px;font-weight:700;text-transform:uppercase}
.clue-card{background:#fff;border-radius:16px;padding:18px 18px 20px;box-shadow:var(--shadow)}
.clue-card .lab{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:2px;font-size:12px;color:#9a8f7c}
.clue-card .turn-team{font-family:'Oswald';font-weight:700;font-size:22px;margin:2px 0 10px;display:flex;align-items:center;gap:8px}
.clue-card .turn-team .dot{width:16px;height:16px;border-radius:50%}
.clue-text{font-size:clamp(17px,2vw,21px);font-weight:700;line-height:1.4}
.timer-box{display:flex;align-items:center;gap:16px;background:#fff;border-radius:16px;padding:16px 18px;box-shadow:var(--shadow)}
.ring{position:relative;width:78px;height:78px;flex:none}
.ring svg{transform:rotate(-90deg)}
.ring .t{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Oswald';font-weight:700;font-size:26px}
.pts{flex:1}
.pts .lab{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:1.5px;font-size:11px;color:#9a8f7c}
.pts .val{font-family:'Oswald';font-weight:700;font-size:40px;line-height:1}
.pts .val small{font-size:18px;color:#9a8f7c;margin-left:4px}
.note{font-size:13px;color:#a8482f;font-weight:800;min-height:18px}
.coords-card{background:#fff;border-radius:14px;padding:12px 16px;box-shadow:var(--shadow)}
.coords-card .lab{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:1.5px;font-size:11px;color:#9a8f7c}
.coords{font-family:'Oswald';font-weight:700;font-size:30px;letter-spacing:2px;min-height:36px;color:var(--gold)}
.hintbtn{align-self:flex-start;background:transparent;color:#9a8f7c;border:2px solid var(--line);border-radius:999px;padding:8px 16px;font-size:13px;text-transform:uppercase;transition:.2s}
.hintbtn:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- overlays / screens ---------- */
.screen{background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:clamp(22px,4vw,40px)}
.screen h2{font-size:clamp(26px,4vw,40px);margin:0 0 6px;text-transform:uppercase}
.screen .sub{color:#7a7060;font-weight:700;font-size:16px;margin-bottom:26px}
.field{margin-bottom:24px}
.field>.lab{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:1.5px;font-size:13px;color:#9a8f7c;margin-bottom:10px}
.seg{display:flex;gap:10px;flex-wrap:wrap}
.seg button{background:#f3eee3;color:var(--ink);border-radius:12px;padding:14px 22px;font-size:20px;border:2px solid transparent;min-width:60px}
.seg button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.teamsetup{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.teamsetup .tcard{display:flex;align-items:center;gap:10px;background:#f7f3ea;border-radius:12px;padding:10px 12px;border:2px solid transparent}
.teamsetup .tcard .dot{width:18px;height:18px;border-radius:50%;flex:none}
.teamsetup input{flex:1;min-width:0;border:none;background:transparent;font-family:'Nunito';font-weight:800;font-size:16px;color:var(--ink);outline:none}
.btn-primary{background:var(--gold);color:#fff;border-radius:14px;padding:16px 34px;font-size:22px;text-transform:uppercase;box-shadow:0 8px 18px rgba(176,124,46,.35);transition:.15s}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--line);border-radius:14px;padding:15px 28px;font-size:18px;text-transform:uppercase}
.actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* turn-intro */
.intro-team{font-size:clamp(30px,6vw,56px);font-family:'Oswald';font-weight:700;text-transform:uppercase;display:flex;align-items:center;gap:14px}
.intro-team .dot{width:26px;height:26px;border-radius:50%}
.intro-clue{font-size:clamp(20px,3vw,28px);font-weight:800;line-height:1.4;margin:18px 0 28px;max-width:720px}

/* found overlay */
.foundwrap{text-align:center}
.foundwrap .big{font-size:clamp(30px,6vw,52px);font-family:'Oswald';font-weight:700;text-transform:uppercase;color:var(--found)}
.foundwrap .word{font-family:'Oswald';font-weight:700;font-size:clamp(22px,3vw,30px);letter-spacing:3px;margin:6px 0 4px}
.foundwrap .gain{font-size:22px;font-weight:800}

/* results */
.rank{display:flex;flex-direction:column;gap:12px;margin:20px 0 28px}
.rank .row{display:flex;align-items:center;gap:14px;background:#f7f3ea;border-radius:14px;padding:14px 18px}
.rank .row.first{background:linear-gradient(90deg,#fff6e3,#fbf0d6);box-shadow:0 6px 16px rgba(176,124,46,.18)}
.rank .pos{font-family:'Oswald';font-weight:700;font-size:26px;width:40px;color:#b9ac95}
.rank .row.first .pos{color:var(--gold)}
.rank .dot{width:18px;height:18px;border-radius:50%}
.rank .nm{font-weight:800;font-size:20px;flex:1}
.rank .sc{font-family:'Oswald';font-weight:700;font-size:28px}
.crown{font-size:22px}

/* wyłączone liczby drużyn (reguła min 5 haseł/drużynę) */
.seg button:disabled,.seg button.disabled{opacity:.32;cursor:not-allowed;filter:grayscale(.4)}

/* ============================================================
   UKŁAD MOBILNY — pytanie przyklejone nad planszą, plansza z pełnym kryciem,
   panel pod planszą, podpowiedź pływająca na najwyższej warstwie.
   ============================================================ */
@media(max-width:820px){
  .playrow{display:flex;flex-direction:column;gap:14px}
  .board-area{gap:10px}
  .side{position:static;order:0}                              /* panel pod planszą na telefonie */
  .clue-card{position:sticky;top:8px;z-index:40}              /* PYTANIE zawsze widoczne */
  .board-card{position:relative;z-index:1;background:var(--board)} /* 100% krycia */
  .hintbtn{position:fixed;right:14px;bottom:14px;left:auto;z-index:60;margin:0;
    align-self:auto;background:var(--gold);color:#fff;border-color:var(--gold);
    box-shadow:0 6px 18px rgba(176,124,46,.45);padding:13px 22px;font-size:15px}
}