:root{
  --bg:#0a1a26;
  --bg-deep:#061019;
  --panel:#0f2838;
  --panel-2:#12324a;
  --line:#204054;
  --line-soft:#173347;
  --text:#e9f3f5;
  --text-dim:#8fadbd;
  --cyan:#4fd1c5;
  --amber:#ffb84d;
  --hit:#e4572e;
  --miss:#2c5b78;
  --sunk:#ffd23f;
  --board-hit:#ffd23f;
  --board-sunk:#e4572e;
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;
  --board-size: 25;
  --cell-size: 22px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  /* Merelahingu taustapilt (images/merelahing.webp) jääb tumeda
     kihi alla kõigi paneelide/mänguvälja taha — need on ise
     läbipaistmatud, nii et pilt paistab ainult vahedest ja
     servadest, segamata loetavust. */
  background:
    radial-gradient(circle at 20% -10%, #133149 0%, transparent 45%),
    radial-gradient(circle at 90% 10%, #0d2635 0%, transparent 40%),
    linear-gradient(rgba(6,16,25,.55), rgba(6,16,25,.72)),
    url("../images/merelahing.webp") center center / cover no-repeat fixed,
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  padding:24px 16px 60px;
}
/* iframe-resize.js lisab selle klassi, kui leht on iframe'is — vt
   selle faili kommentaari. 100vh iframe'is põhineb iframe'i ENDA
   praegusel vaateaknal, mis tekitaks kõrguse-raporteerimisega
   ringsõltuvuse (kasvab lõputult); ilma min-height'ita sõltub body
   kõrgus ainult päris sisust. */
html.in-iframe body{min-height:0;}
.wrap{max-width:1320px;margin:0 auto;}

/* ---- Header ---- */
header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin-bottom:28px;
  position:relative;
}
.radar{
  width:64px;height:64px;border-radius:50%;
  border:1px solid var(--line);
  position:relative;
  flex:none;
  background:
    repeating-radial-gradient(circle, transparent 0 10px, var(--line-soft) 10.5px 11px),
    var(--panel);
  overflow:hidden;
}
.radar::after{
  content:"";
  position:absolute; inset:0;
  background:conic-gradient(from 0deg, rgba(79,209,197,.55), transparent 55%);
  animation:sweep 3.4s linear infinite;
}
@keyframes sweep{ to{ transform:rotate(360deg);} }
.titles{text-align:center;}
h1{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:clamp(24px,4vw,36px);
  margin:0;
  color:var(--text);
}
h1 span{color:var(--amber);}
.subtitle{
  color:var(--text-dim);
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-top:6px;
  font-family:var(--font-mono);
}

/* ---- Panels / forms (shared by admin + settings) ---- */
.panel{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px 20px;
  margin-bottom:22px;
}
.panel-title{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cyan);
  margin:0 0 14px 0;
}
.settings-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:14px;
  align-items:end;
}
.field label{
  display:block;
  font-size:11px;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:6px;
}
select, input[type=text], input[type=password], input[type=number], textarea{
  width:100%;
  background:var(--bg-deep);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:6px;
  padding:9px 10px;
  font-size:14px;
  font-family:var(--font-body);
}
select:focus, input:focus, textarea:focus{outline:2px solid var(--cyan);outline-offset:1px;}
.btn-row{
  display:flex;
  gap:10px;
  margin-top:16px;
  flex-wrap:wrap;
  align-items:center;
}
.numchips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:4px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:var(--bg-deep);
  border:1px solid var(--line);
  border-radius:6px;
  padding:6px 11px;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text-dim);
  cursor:pointer;
  user-select:none;
  transition:border-color .15s, color .15s, background .15s;
}
.chip input{
  accent-color:var(--cyan);
  cursor:pointer;
}
.chip:hover{border-color:var(--cyan);}
.chip:has(input:checked){
  border-color:var(--amber);
  color:var(--text);
  background:rgba(255,184,77,.08);
}
button, .btn-link{
  cursor:pointer;
  font-family:var(--font-body);
  font-weight:600;
  border-radius:7px;
  border:1px solid transparent;
  padding:11px 18px;
  font-size:14px;
  transition:transform .08s ease, filter .15s ease;
  text-decoration:none;
  display:inline-block;
}
button:active, .btn-link:active{transform:translateY(1px);}
.btn-primary{
  background:var(--amber);
  color:#2a1a00;
}
.btn-primary:hover{filter:brightness(1.08);}
.btn-secondary{
  background:transparent;
  color:var(--cyan);
  border-color:var(--cyan);
}
.btn-secondary:hover{background:rgba(79,209,197,.1);}
.btn-danger{
  background:transparent;
  color:var(--hit);
  border-color:var(--hit);
}
.btn-danger:hover{background:rgba(228,87,46,.12);}
button:disabled{opacity:.45; cursor:not-allowed; filter:none;}

/* ---- Tunni mäng — üks-nupp-liitumine (mitmik.php) ---- */
.official-panel{text-align:center;}
.btn-huge{
  display:block;
  width:100%;
  font-size:clamp(18px,3.2vw,26px);
  padding:26px 20px;
  border-radius:12px;
}
.official-hint{margin-top:12px;margin-bottom:0;}
.more-options{padding:0;}
.more-options > summary{
  cursor:pointer;
  padding:18px 20px;
  list-style:none;
}
.more-options > summary::-webkit-details-marker{display:none;}
.more-options > summary::before{content:"▸ ";color:var(--cyan);}
.more-options[open] > summary::before{content:"▾ ";}
.more-options-body{padding:0 20px 18px 20px;}

/* ---- Active room list (mitmik.php) ---- */
.room-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.room-list-empty{
  color:var(--text-dim);
  font-size:13px;
  margin:0;
}
.room-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  background:var(--bg-deep);
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 14px;
  color:var(--text);
  font-family:var(--font-body);
  flex-wrap:wrap;
}
.room-item:hover{border-color:var(--cyan);}
.room-item-main{
  display:flex;
  align-items:baseline;
  gap:10px;
  min-width:0;
}
.room-name{
  font-weight:700;
  color:var(--amber);
  flex:none;
}
.room-code{
  font-family:var(--font-mono);
  color:var(--text-dim);
  letter-spacing:.04em;
}
.room-preset{
  color:var(--text-dim);
  font-size:13px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.room-item-meta{
  display:flex;
  gap:12px;
  font-size:12px;
  font-family:var(--font-mono);
  color:var(--text-dim);
  white-space:nowrap;
  flex:none;
}

/* ---- Stats bar ---- */
.stats{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:22px;
}
.stat{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 16px;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--text-dim);
  flex:1;
  min-width:140px;
  text-align:center;
}
.stat b{display:block;font-size:20px;color:var(--text);font-family:var(--font-body);margin-top:2px;}

/* ---- Main layout ---- */
main{
  display:flex;
  gap:24px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.board-panel, .tasks-panel{
  /* Pooleldi läbipaistev (mitte var(--panel) täisvärv) — kõigil
     otseselt siin sees olevatel elementidel (.grid/.cell,
     .task-current, .task-history-item) on oma täisläbipaistmatu
     taust, nii et see mõjutab ainult paneeli enda raami/tausta
     (.fleet-status, .legend, tühjad kohatäite-tekstid) — seal
     paistab body taustapilt rohkem läbi. */
  background:rgba(15,40,56,.5);
  border:1px solid var(--line);
  border-radius:10px;
  padding:16px;
}
.board-panel{
  flex:none;
  max-width:100%;
  /* Laius tuleb otse mänguvälja tegelikust suurusest (tulbad + .grid-scroll
     ja .board-panel enda ääred/vahed), mitte lapselementide "loomuliku"
     laiuse järgi — muidu venitab nt .legend rida paneeli mänguväljast
     laiemaks ja mänguvälja kõrvale jääb tühi riba. */
  width:calc((var(--board-size) + 2) * var(--cell-size) + 36px);
}
.tasks-panel{flex:1;min-width:320px;}
.section-label{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cyan);
  margin:0 0 12px 2px;
}

/* ---- Grid ---- */
.grid-scroll{
  position:relative;
  overflow:auto;
  max-width:100%;
  border-radius:6px;
  border:1px solid var(--line-soft);
  -webkit-overflow-scrolling:touch;
}
.grid{
  position:relative;
  display:grid;
  grid-template-columns:var(--cell-size) repeat(var(--board-size), var(--cell-size)) var(--cell-size);
  grid-template-rows:var(--cell-size) repeat(var(--board-size), var(--cell-size));
  /* Sama fixed-taustapilt, samas positsioonis, mis body-l — kuna
     "fixed" paigutus arvestatakse alati vaateava (viewport), mitte
     elemendi enda kasti järgi, klapib see pikslitäpselt body taustaga.
     Tavamängus on see peidus (kõik lahtrid on ise läbipaistmatud) —
     nähtavale tuleb ainult uputatud laeva enda ruutude kaudu (vt
     .cell.sunk), nagu aken taustapildi lahingusse. */
  background:
    linear-gradient(rgba(6,16,25,.25), rgba(6,16,25,.35)),
    url("../images/merelahing.webp") center center / cover no-repeat fixed;
  touch-action:pan-x pan-y;
}

.cell{
  /* Suurus tuleb .grid-i tulba/rea laiusest (stretch) — mitte eraldi
     width/height'ist — et vältida ümardamislahknevust võrgu ja lahtri vahel. */
  display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--cell-size) * 0.38);
  box-sizing:border-box;
  border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  position:relative;
}

/* ---- Tabamuse/uputamise/mööda animatsioon ---- */
.fx{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:calc(var(--cell-size) * 0.7);
  pointer-events:none;
  z-index:6;
}
.fx.hit{animation:fx-pop .5s ease-out forwards;}
.fx.miss{font-size:calc(var(--cell-size) * 0.45);animation:fx-splash .5s ease-out forwards;}
.fx.sunk{font-size:calc(var(--cell-size) * 0.85);animation:fx-boom .65s ease-out forwards;}
@keyframes fx-pop{
  0%{transform:scale(.2);opacity:0;}
  30%{transform:scale(1.35);opacity:1;}
  100%{transform:scale(1.7);opacity:0;}
}
@keyframes fx-splash{
  0%{transform:scale(.3);opacity:0;}
  40%{transform:scale(1);opacity:.9;}
  100%{transform:scale(1.5);opacity:0;}
}
@keyframes fx-boom{
  0%{transform:scale(.2) rotate(0deg);opacity:0;}
  25%{transform:scale(1.5) rotate(-8deg);opacity:1;}
  55%{transform:scale(1.2) rotate(6deg);opacity:1;}
  100%{transform:scale(2) rotate(0deg);opacity:0;}
}
@keyframes cell-shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-2px);}
  40%{transform:translateX(2px);}
  60%{transform:translateX(-1px);}
  80%{transform:translateX(1px);}
}
.cell.shake{animation:cell-shake .3s ease;}

/* ---- Laeva uputamise animatsioon (üle laeva enda ruutude) ---- */
.ship-sink-fx{
  --ship-rotate: 0deg;
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:7;
  font-size:calc(var(--cell-size) * 0.85);
  animation:ship-sink 1.7s cubic-bezier(.55,0,.85,.4) forwards;
  transform-origin:center center;
  filter:drop-shadow(0 0 6px rgba(0,0,0,.5));
}
@keyframes ship-sink{
  0%   { transform:translateY(0) rotate(var(--ship-rotate)); opacity:1; }
  35%  { transform:translateY(2px) rotate(calc(var(--ship-rotate) + 6deg)); opacity:1; }
  70%  { transform:translateY(14px) rotate(calc(var(--ship-rotate) + 22deg)); opacity:.85; }
  100% { transform:translateY(38px) rotate(calc(var(--ship-rotate) + 35deg)) scale(.8); opacity:0; }
}
.ship-sink-ripple{
  position:absolute;
  pointer-events:none;
  z-index:6;
  border-radius:50%;
  border:2px solid rgba(143,216,232,.55);
  animation:ship-sink-ripple 1.7s ease-out forwards;
}
@keyframes ship-sink-ripple{
  0%   { transform:scale(.3); opacity:.8; }
  100% { transform:scale(2.2); opacity:0; }
}

@media (max-width: 640px){
  :root{
    /* Lahtrisuurus arvutatakse otse ekraanilaiusest, et mänguväli mahuks
       tervikuna ekraanile ilma horisontaalse kerimiseta. */
    --cell-size-mobile: clamp(18px, calc((100vw - 50px) / (var(--board-size) + 2)), var(--cell-size));
  }
  .grid{
    grid-template-columns:var(--cell-size-mobile) repeat(var(--board-size), var(--cell-size-mobile)) var(--cell-size-mobile);
    grid-template-rows:var(--cell-size-mobile) repeat(var(--board-size), var(--cell-size-mobile));
  }
  .cell{
    font-size:calc(var(--cell-size-mobile) * 0.42);
  }
  .fx{font-size:calc(var(--cell-size-mobile) * 0.7);}
  .fx.miss{font-size:calc(var(--cell-size-mobile) * 0.45);}
  .fx.sunk{font-size:calc(var(--cell-size-mobile) * 0.85);}
  .ship-sink-fx{font-size:calc(var(--cell-size-mobile) * 0.85);}
  .board-panel{
    padding:8px;
    width:calc((var(--board-size) + 2) * var(--cell-size-mobile) + 20px);
  }
  .stats{gap:6px;margin-bottom:14px;}
  .stat{min-width:auto;padding:8px 6px;font-size:11px;}
  .stat b{font-size:17px;}
  .overlay-expr{font-size:24px;}

  /* Mänguväli ja tehete/ajaloo paneel jäävad mobiilis paratamatult
     üksteise alla (külili ei mahu) — kasutaja tagasiside: "palju
     kerimist". Vastuse sisestamine käib küll fikseeritud
     tehte-aknast (mänguvälja alla kerimist selleks vaja pole), aga
     terve lehe kõrgust vähendades jõuab tehete-ajaloo paneelini
     vähema kerimisega ja pealkiri/statistika söövad vähem ekraani. */
  header{gap:14px;margin-bottom:14px;}
  .radar{width:44px;height:44px;}
  main{gap:12px;}
  .tasks-panel{padding:10px;}
  .fleet-status{margin-top:8px;padding-top:8px;}
  body{padding:12px 10px 40px;}
}
.cell.head{
  color:var(--text-dim);
  font-family:var(--font-mono);
  background:var(--panel-2);
}
.cell.water{
  background:#0d2233;
  cursor:pointer;
  touch-action:manipulation;
  transition:background .1s ease;
}
.cell.water:hover, .cell.water:active{
  background:#123048;
  box-shadow:inset 0 0 0 1px var(--cyan);
}
.cell.selected{
  box-shadow:inset 0 0 0 2px var(--amber);
  z-index:1;
}
.cell.miss{
  background:var(--miss);
}
.cell.miss::after{content:"·";color:#cfe9f2;font-size:13px;}
.cell.hit{
  background:var(--board-hit);
}
.cell.hit::after{content:"×";color:#2a1a00;font-weight:700;}
/* Uputatud laeva enda ruudud on samuti läbipaistvad (vt .grid
   background) — "×" jääb siiski alles, väikese varjuga, et see
   oleks loetav ka pildi heledamate kohtade peal. */
.cell.sunk{
  background:transparent !important;
}
.cell.sunk::after{
  content:"×";
  color:#fff2e0 !important;
  font-weight:700;
  text-shadow:0 1px 4px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.6);
}
.legend{
  display:flex;gap:14px;flex-wrap:wrap;
  margin-top:12px;font-size:11px;color:var(--text-dim);
  font-family:var(--font-mono);
}
.legend span{display:inline-flex;align-items:center;gap:5px;}
.swatch{width:11px;height:11px;border-radius:2px;display:inline-block;}
/* .board-panel ja .tasks-panel taust on pooleldi läbipaistev (vt
   eespool) — kerge vari hoiab otse paneeli taustal oleva teksti
   loetavana, ükskõik mis taustapildi koht sealt paistab. (Oma
   täisläbipaistmatu taustaga elemendid, nagu .task-current ja
   .task-history-item, seda ei vaja.) */
.board-panel .section-label, .board-panel .legend,
.tasks-panel .section-label, .tasks-panel .task-history-empty{
  text-shadow:0 1px 3px rgba(0,0,0,.7);
}

/* ---- Fleet status ---- */
.fleet-status{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line-soft);
}
.fleet-list{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-bottom:10px;
}
.fleet-ship{
  display:flex;
  gap:3px;
}
.fleet-cell{
  width:16px;height:16px;
  border-radius:2px;
  background:#123048;
  border:1px solid var(--line);
  transition:background .15s ease, border-color .15s ease;
}
.fleet-cell.hit{
  background:var(--board-hit);
  border-color:var(--board-hit);
}
.fleet-ship.sunk .fleet-cell{
  background:var(--board-sunk);
  border-color:var(--board-sunk);
  opacity:.6;
}

@media (max-width: 640px){
  .fleet-cell{width:13px;height:13px;}
}

/* ---- Task cards ---- */
.tasks-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:10px;
  max-height:640px;
  overflow-y:auto;
  padding-right:4px;
}
.task{
  background:var(--bg-deep);
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 12px;
  transition:border-color .2s, background .2s;
}
.task .coord{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--amber);
  letter-spacing:.05em;
  display:block;
  margin-bottom:4px;
}
.task .expr{
  font-size:16px;
  font-weight:600;
  margin-bottom:8px;
  letter-spacing:.02em;
}
.task .row{display:flex;gap:6px;}
.task input{
  width:100%;
  background:var(--bg);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:5px;
  padding:6px 8px;
  font-size:14px;
  min-width:0;
}
.task input:focus{outline:2px solid var(--cyan);}
.task .fire-btn{
  background:var(--cyan);
  color:#04262a;
  padding:6px 10px;
  font-size:12px;
  white-space:nowrap;
}
.task.wrong{border-color:var(--hit);}
.task.wrong input{animation:shake .25s;}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-4px);}
  75%{transform:translateX(4px);}
}
.task.solved-hit{border-color:var(--hit);background:rgba(228,87,46,.08);}
.task.solved-miss{border-color:var(--miss);background:rgba(44,91,120,.15);}
.task .result{
  margin-top:6px;
  font-size:12px;
  font-family:var(--font-mono);
  color:var(--text-dim);
}

/* ---- Current task + task history (side panel) ---- */
.task-current{
  background:var(--bg-deep);
  border:1px solid var(--amber);
  border-radius:8px;
  padding:14px 16px;
  margin-bottom:16px;
}
.task-current .coord{
  font-family:var(--font-mono);
  color:var(--amber);
  font-size:12px;
  letter-spacing:.06em;
  display:block;
  margin-bottom:6px;
}
.task-current .expr{
  font-size:20px;
  font-weight:700;
}
.task-current.empty{
  border-color:var(--line);
  color:var(--text-dim);
  font-family:var(--font-mono);
  font-size:13px;
  text-align:center;
}
.task-history{
  max-height:520px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-right:4px;
}
.task-history-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:var(--bg-deep);
  border:1px solid var(--line);
  border-radius:6px;
  padding:8px 10px;
}
.task-history-item .thi-coord{
  font-family:var(--font-mono);
  color:var(--amber);
  font-weight:700;
  flex:none;
  font-size:13px;
}
.task-history-item .thi-expr{
  flex:1;
  color:var(--text);
  font-size:13px;
  text-align:center;
}
.task-history-item .thi-result{
  flex:none;
  font-size:12px;
  font-family:var(--font-mono);
  color:var(--text-dim);
}
.task-history-item.hit{border-color:var(--board-hit);}
.task-history-item.hit .thi-result{color:var(--board-hit);}
.task-history-item.sunk{border-color:var(--board-sunk);background:rgba(228,87,46,.08);}
.task-history-item.sunk .thi-result{color:var(--board-sunk);}
.task-history-empty{
  color:var(--text-dim);
  font-size:13px;
  text-align:center;
  padding:20px 0;
  font-family:var(--font-mono);
}

/* ---- Targeting overlay (click-to-fire) ---- */
.task-overlay{
  position:fixed;
  inset:0;
  background:rgba(6,16,25,.78);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:200;
}
.task-overlay.hidden{display:none;}
.task-overlay-card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px 26px;
  max-width:320px;
  width:100%;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.task-overlay.wrong .task-overlay-card{
  animation:shake .25s;
  border-color:var(--hit);
}
.overlay-coord{
  display:block;
  font-family:var(--font-mono);
  color:var(--amber);
  font-size:14px;
  letter-spacing:.06em;
  margin-bottom:10px;
}
.overlay-expr{
  font-size:30px;
  font-weight:700;
  margin-bottom:18px;
  letter-spacing:.02em;
}
.task-overlay-card input{
  text-align:center;
  font-size:20px;
  padding:12px 10px;
  margin-bottom:16px;
  caret-color:var(--cyan);
}
.numpad{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-bottom:16px;
}
.numpad-btn{
  padding:14px 0;
  font-size:20px;
  font-weight:600;
  font-family:var(--font-body);
  background:var(--bg-deep);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:8px;
  cursor:pointer;
  transition:background .1s ease, transform .08s ease;
  user-select:none;
}
.numpad-btn:hover, .numpad-btn:active{
  background:var(--panel-2);
}
.numpad-btn:active{transform:translateY(1px);}
.numpad-clear{color:var(--hit);}
.numpad-back{color:var(--amber);font-size:18px;}
.overlay-btn-row{
  display:flex;
  gap:10px;
}
.overlay-btn-row button{flex:1;}

/* ---- Võidu-teade (kõik laevad uputatud) ---- */
#victoryOverlay .overlay-coord{
  font-size:40px;
  display:block;
  margin-bottom:6px;
  animation:victory-bounce 1s ease infinite;
}
@keyframes victory-bounce{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-6px) scale(1.08);}
}
#victoryOverlay .overlay-expr{
  font-size:24px;
  color:var(--sunk);
}
.victory-stats{
  color:var(--text-dim);
  font-family:var(--font-mono);
  font-size:13px;
  line-height:1.7;
  margin:0 0 16px 0;
}
.victory-stats b{color:var(--text);}

/* ---- Toast ---- */
#toast{
  position:fixed;
  bottom:22px;left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--sunk);
  color:#2a1a00;
  font-weight:700;
  padding:12px 22px;
  border-radius:8px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s, transform .3s;
  z-index:50;
  font-family:var(--font-body);
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

footer.note{
  text-align:center;
  color:var(--text-dim);
  font-size:12px;
  margin-top:26px;
  font-family:var(--font-mono);
}

/* ---- Oskuste kataloog (admin) ---- */
.skill-category{margin-bottom:22px;}
.skill-category:last-child{margin-bottom:0;}
.skill-category-label{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--cyan);
  margin:0 0 10px 2px;
}
.skill-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px;
}
.skill-card{
  background:var(--bg-deep);
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px;
  display:flex;
  flex-direction:column;
  transition:border-color .15s ease;
}
.skill-card:hover{border-color:var(--cyan);}
.skill-card-name{
  font-weight:600;
  color:var(--text);
  margin:0 0 4px 0;
  font-size:14px;
}
.skill-card-desc{
  color:var(--text-dim);
  font-size:12px;
  margin:0 0 10px 0;
  flex:1;
}
.skill-card select{margin-bottom:10px;}
.skill-card button{width:100%;padding:8px;font-size:13px;}

/* ---- Preset picker (child landing page) ---- */
.preset-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px;
}
.preset-card{
  display:block;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);
  border-radius:12px;
  padding:22px 20px;
}
.preset-card h2{
  margin:0 0 8px 0;
  font-family:var(--font-display);
  font-size:20px;
  color:var(--text);
}
.preset-card p{
  margin:0;
  color:var(--text-dim);
  font-size:13px;
  line-height:1.5;
}
.preset-size-label{
  margin-top:16px !important;
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-dim);
}
.preset-size-row{
  display:flex;
  gap:10px;
  margin-top:8px;
}
.preset-size-btn{
  flex:1;
  display:block;
  text-align:center;
  text-decoration:none;
  background:var(--bg-deep);
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 8px;
  color:var(--text);
  font-weight:600;
  font-size:14px;
  transition:transform .12s ease, border-color .15s ease, background .15s ease;
}
.preset-size-btn:hover{
  border-color:var(--amber);
  background:rgba(255,184,77,.1);
  transform:translateY(-2px);
}
.preset-size-btn small{
  display:block;
  font-weight:400;
  font-size:11px;
  color:var(--text-dim);
  margin-top:2px;
}
/* Sama .preset-size-btn kasutatakse ka mitmikmängu toa loomise
   vormis, aga <label>+peidetud radio'ga (mitte <a href>), et laps
   saaks kasti valida, mitte kohe navigeerida. :has(input:checked)
   näitab, mis valitud on. */
.preset-size-btn{position:relative;cursor:pointer;}
.preset-size-btn input{
  position:absolute;
  opacity:0;
  width:0;height:0;
}
.preset-size-btn:has(input:checked){
  border-color:var(--amber);
  background:rgba(255,184,77,.12);
}

/* ---- Mängu (tehete seadete) valik kastidena, mitte <select> —
   samamoodi nagu index.php preset-card, aga vormisisese radio-valikuna
   (üksikmäng navigeerib kohe, siin valitakse enne "Loo tuba" vajutust).
   Lastele on kastidest klõpsamine lihtsam kui rippmenüüst valimine. ---- */
.preset-pick-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:10px;
}
.preset-pick-card{
  position:relative;
  display:block;
  cursor:pointer;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 14px;
  transition:border-color .15s ease, background .15s ease;
}
.preset-pick-card:hover{border-color:var(--cyan);}
.preset-pick-card:has(input:checked){
  border-color:var(--amber);
  background:rgba(255,184,77,.1);
}
.preset-pick-card input{
  position:absolute;
  opacity:0;
  width:0;height:0;
}
.preset-pick-name{
  margin:0;
  font-family:var(--font-display);
  font-size:15px;
  color:var(--text);
}
.preset-pick-desc{
  margin:4px 0 0 0;
  color:var(--text-dim);
  font-size:12px;
  line-height:1.4;
}
.preset-empty{
  color:var(--text-dim);
  text-align:center;
  padding:40px 20px;
}
.preset-empty a{color:var(--cyan);}

/* ---- Preset bar (play page) ---- */
.preset-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:22px;
}

/* ---- Admin ---- */
.admin-table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
}
.admin-table th, .admin-table td{
  text-align:left;
  padding:10px 8px;
  border-bottom:1px solid var(--line);
  font-size:13px;
  vertical-align:top;
}
.admin-table th{
  color:var(--text-dim);
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.admin-actions{display:flex;gap:8px;flex-wrap:wrap;}
.admin-actions a, .admin-actions button{font-size:12px;padding:7px 12px;}
.login-box{
  max-width:360px;
  margin:80px auto;
}
.error-msg{
  color:var(--hit);
  font-size:13px;
  margin:0 0 12px 0;
}
.hint{
  color:var(--text-dim);
  font-size:12px;
  margin-top:6px;
}

/* ---- Utility ---- */
.hidden{display:none !important;}

/* ---- Mitmikmäng ---- */
.room-code-display{
  font-family:var(--font-mono);
  font-size:16px;
  letter-spacing:.08em;
  color:var(--text);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 16px;
}
.room-code-display strong{color:var(--amber);}
.online-players{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:22px;
  /* Ilma piirita kasvaks see terve klassi (20-30 last "tunni mängus"
     korraga) järjest rohkemate ridadena lõputult kõrgemaks — mängu
     kestel liituvate laste arv kasvatas lehe kõrgust reaalselt (mitte
     tehniline ring, vt iframe-resize.js), mis paistis embeditud
     lehele samamoodi kui piiramatu kasv. Sama muster mis
     .task-history-l (vt allpool). */
  max-height:140px;
  overflow-y:auto;
  padding-right:4px;
}
.online-chip{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-dim);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  padding:5px 12px;
}

/* Meeskonna värviline äär tulistatud ruudul (üle tabamus/mööda/
   uputatud värvi) — näitab, milline meeskond selle ruudu tulistas. */
.cell.hit, .cell.miss, .cell.sunk{
  box-shadow: inset 0 0 0 3px var(--team-color, transparent);
}

.thi-team-dot{
  display:inline-block;
  width:9px;height:9px;
  border-radius:50%;
  margin-right:6px;
  vertical-align:middle;
}

.team-scoreboard{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px;
  margin-bottom:22px;
}
.scoreboard-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  /* Grupp = meeskonna nimi VÕI (kui meeskonda ei valitud) mängija enda
     nimi (vt README "Meeskonnad JA individuaalsed punktid") — kui
     "tunni mäng" täitub kõigi klassi lastega ja enamik ei sisesta
     meeskonda, võib ridade arv küündida terve klassi suuruseni.
     Sama piirang mis .online-players-l ja .task-history-l. */
  max-height:320px;
  overflow-y:auto;
  padding-right:4px;
}
.scoreboard-row{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--bg-deep);
  border:1px solid var(--line);
  border-radius:6px;
  padding:8px 12px;
}
.scoreboard-dot{
  width:12px;height:12px;
  border-radius:50%;
  flex:none;
}
.scoreboard-name{
  flex:1;
  font-weight:600;
  color:var(--text);
}
.scoreboard-score{
  font-family:var(--font-mono);
  font-weight:700;
  color:var(--amber);
}

/* ---- Print ---- */
.print-only-key{display:none;}
.print-only-page1{display:none;}

@page{
  size: A4;
  margin: 10mm;
}
@media print{
  body{background:#fff;color:#000;padding:0;}
  .no-print{display:none !important;}
  .radar{display:none;}
  main{display:block;}
  .board-panel{display:none !important;}
  .tasks-panel{display:none !important;}
  #toast{display:none;}

  .print-title{
    font-family:var(--font-display);
    font-size:20px;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin:0 0 4px 0;
    color:#000;
  }

  .print-only-page1{
    display:block;
  }

  .print-header{
    margin-bottom:10px;
    padding-bottom:6px;
    border-bottom:2px solid #000;
  }
  .print-meta{
    display:flex;
    gap:28px;
    font-size:12px;
    color:#000;
    margin:6px 0 0;
  }
  .print-meta-line{
    display:inline-block;
    width:130px;
    border-bottom:1px solid #333;
    margin-left:4px;
    height:1px;
  }

  .print-columns{
    display:flex;
    align-items:flex-start;
    gap:28px;
  }
  .print-only-grid{flex:none;}
  .print-only-tasks{flex:1;min-width:0;}

  .print-only-grid .key-title{margin-bottom:8px;}
  .print-only-grid .key-grid{
    grid-template-columns:var(--print-cell-size) repeat(var(--board-size), var(--print-cell-size));
    grid-template-rows:var(--print-cell-size) repeat(var(--board-size), var(--print-cell-size));
    margin-bottom:0;
  }
  .print-only-grid .key-cell{
    width:var(--print-cell-size);height:var(--print-cell-size);
    font-size:calc(var(--print-cell-size) * 0.34);
  }

  .print-fleet-title{
    font-size:11px;
    color:#333;
    margin:16px 0 6px;
  }
  .print-fleet-list{
    display:flex;
    flex-direction:column;
    gap:5px;
  }
  .print-fleet-ship{display:flex;gap:2px;}
  .print-fleet-cell{
    width:13px;height:13px;
    border:1px solid #000;
    box-sizing:border-box;
  }

  .print-only-tasks .key-title{margin-bottom:10px;}
  .ptasks-list{
    display:flex;
    flex-direction:column;
  }
  .ptask{
    display:flex;
    align-items:baseline;
    gap:8px;
    font-size:12px;
    line-height:1.2;
    padding:2px 0;
    border-bottom:1px dotted #ccc;
    break-inside:avoid;
  }
  .ptasks-spacious .ptask{
    font-size:16px;
    padding:8px 0;
  }
  .ptask .p-num{
    font-family:var(--font-mono);
    color:#888;
    flex:none;
    min-width:18px;
  }
  .ptask .p-coord{
    font-family:var(--font-mono);
    font-weight:700;
    color:#000;
    flex:none;
    border:1px solid #999;
    border-radius:4px;
    padding:1px 6px;
    font-size:0.85em;
  }
  .ptask .p-expr{
    color:#000;
    flex:none;
    white-space:nowrap;
  }
  .ptask .p-line{
    flex:1;
    border-bottom:1px solid #333;
    min-width:36px;
    height:1px;
    align-self:flex-end;
    margin-bottom:2px;
  }

  .print-only-key{
    display:block;
    page-break-before:always;
  }
  .key-title{
    font-family:var(--font-display);
    font-size:18px;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin:0 0 4px 0;
    color:#000;
  }
  .key-warning{
    font-size:11px;
    color:#900;
    margin:0 0 8px 0;
    font-style:italic;
  }
  .key-columns{
    display:flex;
    align-items:flex-start;
    gap:28px;
  }
  .key-grid-wrap{flex:none;}
  .key-list-wrap{flex:1;min-width:0;}

  .key-grid{
    display:grid;
    grid-template-columns:var(--print-cell-size) repeat(var(--board-size), var(--print-cell-size));
    grid-template-rows:var(--print-cell-size) repeat(var(--board-size), var(--print-cell-size));
    margin-bottom:0;
  }
  .key-cell{
    width:var(--print-cell-size);height:var(--print-cell-size);
    border:1px solid #000;
    box-sizing:border-box;
    font-size:calc(var(--print-cell-size) * 0.3);
    display:flex;align-items:center;justify-content:center;
    color:#000;
  }
  .key-cell.head{background:#fff;color:#000;font-weight:700;}
  .key-cell.ship{
    background:#000 !important;
    color:#fff;
  }
  .key-cell.ship::after{
    content:"▓";
    font-size:calc(var(--print-cell-size) * 0.4);
    color:#fff;
  }

  .key-list{
    display:flex;
    flex-direction:column;
  }
  .key-item{
    display:flex;
    align-items:baseline;
    gap:8px;
    font-size:12px;
    padding:3px 0;
    border-bottom:1px dotted #ddd;
    break-inside:avoid;
  }
  .key-list-spacious .key-item{
    font-size:15px;
    padding:7px 0;
  }
  .key-num{
    font-family:var(--font-mono);
    color:#888;
    flex:none;
    min-width:18px;
  }
  .key-coord{
    font-family:var(--font-mono);
    font-weight:700;
    color:#000;
    flex:none;
    border:1px solid #999;
    border-radius:4px;
    padding:1px 6px;
    font-size:0.85em;
  }
  .key-expr{
    flex:1;
    color:#000;
  }
  .key-expr b{color:#900;}
  .key-result{
    flex:none;
    font-size:0.85em;
    color:#555;
  }
  .key-item.hit .key-result{color:#900;font-weight:600;}
}