/* Sea Battle: dve table 10 × 10 (more sa mrežom u drvenom okviru), sivi brodovi, beli i crveni klinovi. Ostalo je iz base.css. */
.is-game .felt.seab{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.sbwrap{position:absolute;inset:0}
/* tabla se crta u osnovnoj meri (polje 40 px) i skalira; menja mesto glatko (telefon: posle Ready) */
.sbboard{position:absolute;left:0;top:0;transform-origin:0 0}
.sbwrap.slide .sbboard{transition:transform .45s cubic-bezier(.3,.7,.3,1)}
.sbboard[hidden]{display:none}
.sblab{position:absolute;display:flex;align-items:center;justify-content:center;font:700 15px var(--sans);color:var(--cream-3);opacity:.85}
.sbwater{position:absolute;border-radius:4px;overflow:hidden;
  background:
    linear-gradient(rgba(190,225,255,.16) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(190,225,255,.16) 1px,transparent 1px) 0 0/40px 40px,
    radial-gradient(ellipse at 30% 20%,rgba(120,190,240,.25),transparent 60%),
    linear-gradient(160deg,#1d5b8f,#15426e 55%,#0f3256);
  box-shadow:0 0 0 4px #2a1a0e,0 0 0 6px rgba(212,176,106,.55),0 16px 26px rgba(0,0,0,.45),inset 0 0 30px rgba(0,10,30,.45)}
.sbships,.sbpegs,.sbfx{position:absolute;pointer-events:none}
.sbships{z-index:1}
.sbpegs{z-index:2}
.sbfx{z-index:3}
/* tuđe more pre bitke: prigušeno, sa natpisom */
.placing .b1 .sbwater{filter:brightness(.62) saturate(.7)}
.sbnote{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 60px;font:700 30px var(--serif);color:rgba(245,236,217,.8);text-shadow:0 2px 6px rgba(0,0,0,.6)}
.sbnote[hidden]{display:none}
/* brod: SVG vodoravno, uspravni je isti crtež okrenut */
.sbship{position:absolute;margin:0;padding:0;border:0;background:transparent;border-radius:20px;color:inherit;pointer-events:auto}
.sbship[hidden]{display:none}
.sbship svg{position:absolute;left:0;top:0;overflow:visible;filter:drop-shadow(0 3px 3px rgba(0,0,0,.45))}
.sbship.vert svg{transform-origin:0 0;transform:translate(40px,0) rotate(90deg)}
.sbship .hl{fill:#8f9ca5;stroke:#323c43;stroke-width:1.5}
.sbship .hl.sub{fill:#5f6d76}
.sbship .dk{fill:#a8b3ba;stroke:rgba(40,50,56,.4)}
.sbship .tw{fill:#6c7a83;stroke:#323c43}
.sbship .gun{fill:#4e5960}
.sbship .bar{stroke:#4e5960;stroke-width:3.5;stroke-linecap:round}
.sbship .rw{stroke:#f4f1e6;stroke-width:1.5;stroke-dasharray:6 5}
button.sbship:disabled{cursor:default}
.placing button.sbship{cursor:grab}
.sbship.sel{box-shadow:0 0 0 3px var(--brass-hi),0 0 16px rgba(240,212,145,.6)}
.sbship.drag{z-index:5;cursor:grabbing;opacity:.92}
.sbship.drag svg{filter:drop-shadow(0 10px 10px rgba(0,0,0,.5))}
.sbship.bad .hl{fill:#b5554d}
.sbship:focus-visible{outline:3px solid var(--brass-hi);outline-offset:1px}
.sbship.sunk svg{filter:grayscale(.6) brightness(.62)}
.b1 .sbship.afloat{opacity:.9}
.sbship.nope{animation:sbnope .3s}
/* klinovi */
.sbpeg{position:absolute;width:40px;height:40px}
.sbpeg::after{content:'';position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}
.sbpeg.miss::after{width:12px;height:12px;background:radial-gradient(circle at 38% 32%,#fff,#d9dde0 60%,#a9b0b5);box-shadow:0 2px 2px rgba(0,0,0,.45)}
.sbpeg.hit::after{width:17px;height:17px;background:radial-gradient(circle at 38% 32%,#ff8a78,#d8352a 55%,#9c1a14);box-shadow:0 0 0 2px rgba(255,190,150,.35),0 0 10px rgba(255,90,60,.7),0 2px 3px rgba(0,0,0,.5)}
/* nišan */
.sbaim{position:absolute;left:0;top:0;width:40px;height:40px;opacity:0;pointer-events:none;border-radius:50%;box-shadow:inset 0 0 0 3px var(--brass-hi),0 0 10px rgba(240,212,145,.6);transition:left .1s,top .1s}
.sbaim::before,.sbaim::after{content:'';position:absolute;background:var(--brass-hi)}
.sbaim::before{left:50%;top:-6px;bottom:-6px;width:2px;margin-left:-1px}
.sbaim::after{top:50%;left:-6px;right:-6px;height:2px;margin-top:-1px}
.sbaim.on{opacity:1}
.sbaim.bot{box-shadow:inset 0 0 0 3px #ff7a66,0 0 12px rgba(255,100,80,.7);animation:sbaim .38s ease-out}
.sbaim.bot::before,.sbaim.bot::after{background:#ff7a66}
@keyframes sbaim{from{scale:2.2;opacity:0}to{scale:1;opacity:1}}
/* polja tuđe table: prava dugmad */
.sbcell{position:absolute;margin:0;padding:0;border:0;background:transparent;cursor:default;pointer-events:auto;border-radius:3px}
.b1.mine .sbcell:not(.done){cursor:crosshair}
.b1.mine .sbcell:not(.done):hover{background:rgba(255,240,190,.1)}
.sbcell.done{cursor:not-allowed}
.sbcell:focus-visible{outline:3px solid var(--brass-hi);outline-offset:-3px}
.sbcell.hint{box-shadow:inset 0 0 0 3px #8ee09b;background:rgba(142,224,155,.25)}
.sbcell.nope{animation:sbnope .3s}
@keyframes sbnope{25%{translate:-4px 0}75%{translate:4px 0}}
/* udar: prskanje (promašaj) ili plamen (pogodak) */
.sbboom{position:absolute;width:40px;height:40px;pointer-events:none}
.sbboom::before,.sbboom::after{content:'';position:absolute;inset:0;border-radius:50%}
.sbboom.miss::before{border:3px solid rgba(235,248,255,.9);animation:sbring .42s ease-out forwards}
.sbboom.miss::after{border:2px solid rgba(235,248,255,.7);animation:sbring .42s .1s ease-out forwards;opacity:0}
.sbboom.hit::before{background:radial-gradient(circle,#fff6c8,#ffb03a 35%,#e8462a 60%,rgba(200,40,20,0) 72%);animation:sbblast .5s ease-out forwards}
.sbboom.hit::after{border:3px solid rgba(255,180,90,.8);animation:sbring .5s ease-out forwards}
@keyframes sbring{from{scale:.2;opacity:1}to{scale:1.6;opacity:0}}
@keyframes sbblast{0%{scale:.2;opacity:1}60%{scale:1.5;opacity:1}100%{scale:1.8;opacity:0}}
/* pločice */
.sbplate{position:absolute;left:0;top:0;z-index:40;display:flex;align-items:center;gap:6px 12px;min-height:40px;padding:6px 12px;border-radius:20px;
  background:rgba(20,10,4,.72);border:1px solid rgba(212,176,106,.3);box-shadow:0 6px 14px rgba(0,0,0,.35);font-size:14px;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.sbplate[hidden]{display:none}
.sbplate .nm{display:flex;align-items:baseline;gap:8px;min-width:0}
.sbplate b{font:700 15px var(--sans);white-space:nowrap}
.sbplate .who{font-size:14px;color:var(--cream-2);white-space:nowrap}
.sbplate small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cream-3)}
.sbplate .st{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:700;color:var(--brass-hi);white-space:nowrap}
.sbplate.turn{border-color:var(--brass-hi);box-shadow:0 0 0 3px rgba(240,212,145,.25),0 6px 14px rgba(0,0,0,.35)}
.sbros{display:flex;align-items:center;gap:4px;flex:none}
.sbpip{display:block;height:9px;width:calc(var(--n) * 7px);border-radius:5px;background:linear-gradient(#b9c3c9,#7e8b93);box-shadow:0 1px 0 rgba(0,0,0,.4)}
.sbpip.sunk{background:linear-gradient(#e46a5c,#a8261c);opacity:.55}
/* telefon: mala pločica stoji uspravno pored male table */
.sbplate.vert{flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;border-radius:14px;padding:8px 12px}
.sbplate.vert .nm{flex-direction:column;gap:2px}
.sbplate.vert .st{margin-left:0;white-space:normal}
@media (max-width:640px){
  .sbplate{gap:8px;padding:0 10px;font-size:12px}
  .sbplate b{font-size:13px}
  .sbplate .who{font-size:12px}
  .sbplate small{display:none}
  .sbplate .st{font-size:12px}
  .sbpip{height:7px;width:calc(var(--n) * 5px)}
}
/* poruka ide gore: dole je moja tabla */
.toast{bottom:auto;top:calc(var(--bar) + 14px);transform:translate(-50%,-20px)}
.toast.on{transform:translate(-50%,0)}