*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;font-family:'Roboto',sans-serif}

:root{
  --bg:#e8f4fd;
  --bg2:#ffffff;
  --sidebar:#f0f7ff;
  --bdr:#b8d4ec;
  --bdr2:#d1e6f5;
  --text:#1e3a5f;
  --muted:#5a7a9a;
  --accent:#1565c0;
  --acc2:#1976d2;
  --sea:#2196f3;
  --sea-bdr:#1976d2;
  --sea-hov:#42a5f5;
  --miss-bg:#bbdefb;
  --miss-bdr:#90caf9;
  --hit-bg:#ef5350;
  --hit-bdr:#c62828;
  --sunk-bg:#90a4ae;
  --sunk-bdr:#607d8b;
}

/* ═══ SCREENS ══════════════════════════════════════════════════════════════ */
.screen{display:none;width:100%;height:100%}
.screen.active{display:flex}

/* ═══ SETUP ════════════════════════════════════════════════════════════════ */
#setup-screen{
  background:var(--bg);
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;
  padding:24px 16px;
}
.setup-card{
  background:var(--bg2);
  border:1px solid var(--bdr);
  border-radius:20px;
  padding:32px 28px;
  width:100%;
  max-width:480px;
  box-shadow:0 8px 40px rgba(21,101,192,.12);
  flex-shrink:0;
}
.setup-icon{font-size:48px;text-align:center;margin-bottom:6px}
.setup-title{
  font-family:'Roboto',sans-serif;
  color:var(--accent);
  text-align:center;
  font-size:clamp(18px,5vw,26px);
  letter-spacing:2px;
  margin-bottom:4px;
}
.setup-sub{color:var(--muted);text-align:center;font-size:13px;margin-bottom:24px}
.sec-lbl{display:block;font-size:11px;color:var(--muted);letter-spacing:1px;margin-bottom:8px;font-weight:600}
.accent-val{color:var(--accent);font-weight:700}

.cnt-btns{display:flex;gap:8px;margin-bottom:20px}
.cnt-btn{
  flex:1;padding:14px 0;border-radius:8px;
  border:2px solid var(--bdr);background:transparent;
  color:var(--muted);cursor:pointer;font-weight:700;font-size:22px;
  font-family:'Roboto',sans-serif;transition:all .15s;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.team-grp{margin-bottom:12px}
.team-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:1px;margin-bottom:4px}
.team-inp{
  width:100%;padding:12px 14px;
  background:#f7fafd;border-radius:8px;color:var(--text);
  font-size:16px;font-family:'Roboto',sans-serif;
  outline:none;border:1.5px solid var(--bdr);transition:border-color .15s;
}
.team-inp:focus{border-color:var(--accent)}
input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;margin-top:6px;height:28px}
.start-btn{
  display:block;width:100%;padding:18px 0;margin-top:20px;
  background:linear-gradient(135deg,var(--acc2),var(--accent));
  border:none;border-radius:12px;color:#fff;font-weight:700;
  font-size:clamp(16px,4vw,18px);
  cursor:pointer;font-family:'Roboto',sans-serif;letter-spacing:2px;
  box-shadow:0 4px 20px rgba(21,101,192,.3);transition:opacity .2s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.start-btn:active{opacity:.85}

/* ═══ GAME SCREEN ══════════════════════════════════════════════════════════ */
#game-screen{
  background:var(--bg);
  flex-direction:row;   /* desktop: row */
  overflow:hidden;
}

/* ═══ DESKTOP SIDEBAR (≥ 640px) ════════════════════════════════════════════ */
#sidebar{
  width:260px;
  background:var(--sidebar);
  border-right:1.5px solid var(--bdr);
  padding:14px 13px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex-shrink:0;
  overflow:hidden;
}
.fs-btn{
  padding:11px 14px;background:#fff;
  border:1px solid var(--bdr);border-radius:8px;
  color:var(--muted);cursor:pointer;font-size:13px;
  text-align:left;font-family:'Roboto',sans-serif;
  transition:background .15s;font-weight:600;
  white-space:nowrap;overflow:hidden;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.fs-btn:hover{background:var(--bdr2);color:var(--accent)}
#active-box{
  padding:13px;border-radius:10px;
  border:2px solid var(--bdr);background:#fff;transition:all .3s;
  flex-shrink:0;
}
.micro-lbl{font-size:11px;color:var(--muted);letter-spacing:1px;margin-bottom:4px;font-weight:700}
#active-nm{font-weight:700;font-size:18px;word-break:break-word;margin-top:3px}
.scores-hd{font-size:11px;color:var(--muted);letter-spacing:1px;margin-bottom:8px;font-weight:700}
.score-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 12px;margin-bottom:5px;border-radius:9px;
  border:1.5px solid var(--bdr2);background:#fff;transition:all .25s;
}
.score-nm{font-weight:600;font-size:14px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.score-n{font-weight:700;font-size:24px;margin-left:8px;flex-shrink:0}

/* ── Ship counter ─────────────────────────────────────────────────────────── */
#ships-panel{
  background:#fff;border:1.5px solid var(--bdr2);
  border-radius:10px;padding:10px 12px;flex-shrink:0;
}
.ships-hd{font-size:11px;color:var(--muted);letter-spacing:1px;margin-bottom:8px;font-weight:700}
.ship-line{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:6px;
}
.ship-line:last-child{margin-bottom:0}
.ship-squares{display:flex;gap:3px;align-items:center}
.ship-sq{
  width:16px;height:16px;border-radius:3px;
  border:1.5px solid var(--sea-bdr);background:var(--sea);
  transition:background .3s,border-color .3s;
}
.ship-sq.dead{background:var(--sunk-bg);border-color:var(--sunk-bdr)}
.ship-count{font-size:13px;font-weight:700;color:var(--muted);min-width:32px;text-align:right}
.ship-count.zero{color:#cbd5e1;text-decoration:line-through}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.sb-footer{
  margin-top:auto;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding-top:6px;border-top:1px solid var(--bdr2);
}

/* ═══ MOBILE TOP BAR (< 640px) ════════════════════════════════════════════ */
#topbar{
  display:none;
  flex-shrink:0;
  background:var(--sidebar);
  border-bottom:1.5px solid var(--bdr);
  padding:0 10px;
  height:52px;
  align-items:center;
  gap:8px;
  overflow:hidden;
}
#mob-active{
  display:flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:20px;
  border:2px solid var(--bdr);background:#fff;
  flex-shrink:0;
  max-width:140px;
  overflow:hidden;
}
#mob-active-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
#mob-active-nm{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mob-scores{display:flex;gap:5px;flex:1;overflow:hidden;align-items:center}
.mob-chip{
  display:flex;align-items:center;gap:3px;
  padding:4px 8px;border-radius:14px;
  border:1.5px solid var(--bdr2);background:#fff;
  font-size:12px;font-weight:600;flex-shrink:0;
  white-space:nowrap;
}
.mob-chip-score{font-weight:700;font-size:15px}
#mob-menu-btn{
  margin-left:auto;flex-shrink:0;
  background:#fff;border:1px solid var(--bdr);border-radius:8px;
  width:36px;height:36px;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}

/* ═══ BOARD ════════════════════════════════════════════════════════════════ */
#board-area{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  overflow:hidden;
  min-width:0;
}
.col-lbl{text-align:center;color:var(--muted);font-weight:700;flex-shrink:0;user-select:none}
.row-lbl{
  text-align:right;color:var(--muted);font-weight:700;
  display:flex;align-items:center;justify-content:flex-end;
  padding-right:4px;flex-shrink:0;user-select:none;
}
.cell{
  border-radius:3px;
  background:var(--sea);
  border:1.5px solid var(--sea-bdr);
  cursor:crosshair;
  display:flex;align-items:center;justify-content:center;
  transition:background .1s;
  user-select:none;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.cell:active:not(.shot){background:#0d47a1}
@media(hover:hover){.cell:hover:not(.shot){background:var(--sea-hov);border-color:#0d47a1}}
.cell.shot{cursor:default}
.cell.miss{background:var(--miss-bg);border-color:var(--miss-bdr)}
.cell.hit{background:var(--hit-bg);border-color:var(--hit-bdr)}
.cell.sunk{background:var(--sunk-bg);border-color:var(--sunk-bdr)}

/* ═══ MODAL ════════════════════════════════════════════════════════════════ */
#modal{
  display:none;position:fixed;inset:0;
  background:rgba(13,71,161,.6);
  align-items:center;justify-content:center;
  z-index:200;
  padding:16px;
}
#modal.active{display:flex}
#modal-box{
  background:#fff;
  border:2px solid var(--bdr);
  border-radius:20px;
  padding:28px 32px;
  max-width:860px;
  width:100%;
  box-shadow:0 20px 60px rgba(13,71,161,.25);
  max-height:calc(100vh - 32px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
#modal-hdr{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:20px;gap:12px;
}
#modal-team-wrap{flex:1;min-width:0}
.modal-team-lbl{font-size:10px;color:var(--muted);letter-spacing:1px;font-weight:700;margin-bottom:4px}
#modal-team{font-weight:700;font-size:clamp(16px,4vw,22px);word-break:break-word}

#timer-wrap{position:relative;flex-shrink:0}
#timer-wrap svg{display:block}
#timer-arc{transition:stroke-dashoffset 1s linear,stroke .3s}
#timer-num{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#2e7d32;transition:color .3s;
}

.q-box{
  background:#e3f2fd;border-radius:12px;
  padding:clamp(14px,3vw,24px) clamp(14px,3vw,28px);
  border:1.5px solid #90caf9;margin-bottom:16px;
}
.q-box-lbl{font-size:10px;color:#1565c0;letter-spacing:1px;font-weight:700;margin-bottom:8px}
#q-txt{color:#0d2a4f;font-size:clamp(17px,3.5vw,26px);line-height:1.5;font-weight:600;font-family:'Roboto',sans-serif}

.a-box{
  background:#e8f5e9;border-radius:12px;
  padding:clamp(14px,3vw,24px) clamp(14px,3vw,28px);
  border:1.5px solid #a5d6a7;margin-bottom:16px;
}
.a-box-lbl{font-size:10px;color:#2e7d32;letter-spacing:1px;font-weight:700;margin-bottom:8px}
#a-txt{color:#1b5e20;font-size:clamp(16px,3vw,24px);line-height:1.5;font-weight:600;font-family:'Roboto',sans-serif}

.show-ans{
  display:block;width:100%;
  padding:clamp(14px,3vw,18px) 0;
  background:linear-gradient(135deg,var(--acc2),var(--accent));
  border:none;border-radius:12px;color:#fff;font-weight:700;
  font-size:clamp(16px,3.5vw,20px);
  cursor:pointer;font-family:'Roboto',sans-serif;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.show-ans:active{opacity:.85}

.verdict{display:flex;gap:10px;margin-top:0}
.ok-btn,.ko-btn{
  flex:1;
  padding:clamp(14px,3vw,18px) 0;
  border-radius:12px;font-weight:700;
  font-size:clamp(17px,3.5vw,22px);
  cursor:pointer;font-family:'Roboto',sans-serif;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.ok-btn{background:#2e7d32;border:2px solid #1b5e20;color:#fff}
.ko-btn{background:#c62828;border:2px solid #b71c1c;color:#fff}
.ok-btn:active{opacity:.85}.ko-btn:active{opacity:.85}

/* ═══ GAME OVER ════════════════════════════════════════════════════════════ */
#gameover-screen{
  background:var(--bg);
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;
  padding:24px 16px;
}
.go-card{
  background:#fff;border:1.5px solid var(--bdr);border-radius:20px;
  padding:36px 28px;width:100%;max-width:460px;
  text-align:center;box-shadow:0 8px 40px rgba(21,101,192,.12);
  flex-shrink:0;
}
.go-title{font-family:'Roboto',sans-serif;color:var(--accent);font-size:clamp(22px,6vw,30px);letter-spacing:2px;margin:8px 0 4px}
.go-sub{color:var(--muted);margin-bottom:24px;font-size:14px}
.res-row{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  margin-bottom:8px;border-radius:12px;border:1.5px solid var(--bdr2);
  background:#f7fafd;text-align:left;
}
.res-row.first{background:#e3f2fd;border-color:#90caf9}
.res-medal{font-size:26px;flex-shrink:0}
.res-nm{font-weight:700;flex:1;font-size:16px;word-break:break-word;min-width:0}
.res-score{font-weight:700;font-size:28px;color:var(--accent);flex-shrink:0}
.res-pts{color:var(--muted);font-size:13px;margin-left:3px;flex-shrink:0}
.ng-btn{
  margin-top:20px;padding:12px 32px;background:transparent;
  border:2px solid var(--accent);border-radius:10px;color:var(--accent);
  font-size:15px;cursor:pointer;font-family:'Roboto',sans-serif;letter-spacing:1px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.ng-btn:active{background:#e3f2fd}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════ */
@media(max-width:639px){
  /* Game screen: column layout */
  #game-screen{flex-direction:column}
  #sidebar{display:none}
  #topbar{display:flex}

  /* Modal: edge-to-edge */
  #modal{padding:0}
  #modal-box{
    border-radius:0;border:none;
    max-height:100vh;
    border-top:3px solid var(--bdr);
  }
  /* Align modal to bottom on small screens */
  #modal{align-items:flex-end}
  #modal-box{border-radius:20px 20px 0 0}
}

@media(min-width:640px) and (max-width:899px){
  #sidebar{width:200px}
}

/* Landscape phone: reduce topbar, let board breathe */
@media(max-width:639px) and (orientation:landscape){
  #topbar{height:44px}
  #modal{align-items:center;padding:8px}
  #modal-box{border-radius:14px;max-height:calc(100vh - 16px)}
}

/* ═══ WARIANT SP 1-3 (mode-young) ══════════════════════════════════════════
   Większe pytania/odpowiedzi, większe kwadraty statków i przyciski liczby
   drużyn — łatwiejsze w obsłudze dla najmłodszych na tablicy multimedialnej. */
body.mode-young #q-txt{font-size:clamp(20px,4.5vw,34px)}
body.mode-young #a-txt{font-size:clamp(19px,4vw,30px)}
body.mode-young .setup-title{font-size:clamp(20px,6vw,30px)}
body.mode-young .cnt-btn{padding:18px 0;font-size:26px}
body.mode-young .ship-sq{width:22px;height:22px;border-radius:4px}
body.mode-young .show-ans,
body.mode-young .ok-btn,
body.mode-young .ko-btn{font-size:clamp(18px,4vw,24px)}