/* Fleet Score: the whole screen is a page of a school exercise book. Paper #f5f1e4, rules #b9c7e6, ballpoint #1f3d99,
   red pen #d1232a, graphite #5b5b5b. No dark background anywhere, menus included. */
:root{ --paper:#f5f1e4; --rule:rgba(160,180,222,.55); --ink:#1f3d99; --red:#d1232a; --lead:#5b5b5b; --hand:'Caveat',cursive; --mono:'PT Mono',ui-monospace,monospace;
  --sketch:255px 14px 225px 14px/14px 225px 14px 255px; color-scheme:light }
*{ box-sizing:border-box }
html,body{ height:100%; margin:0; overflow:hidden; overscroll-behavior:none }
body{ background-color:var(--paper);
  background-image:linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size:24px 24px; color:var(--ink); font:500 22px/1.25 var(--hand); -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent }
#app{ position:fixed; inset:0 }
.screen{ position:absolute; inset:0; display:none }
.screen.on{ display:flex }
/* an overlay taller than the frame must scroll under a thumb: content is centred by its own auto margins, never by
   align-items (a centred flex child that overflows is clipped at the top and cannot be scrolled to) */
.screen.over{ z-index:5; background:rgba(245,241,228,.9); align-items:flex-start; justify-content:center; overflow-y:auto; padding:16px; -webkit-overflow-scrolling:touch; touch-action:pan-y }
.screen.over > .sheet{ margin:auto; flex:none }
[hidden]{ display:none !important }

h2{ font:700 34px/1.05 var(--hand); margin:0 0 10px; color:var(--ink) }
h3{ font:700 20px/1.1 var(--hand); margin:0 0 6px; color:var(--lead); text-transform:uppercase; letter-spacing:.06em; display:flex; justify-content:space-between; gap:8px }
.note{ font:500 22px/1.2 var(--hand); color:var(--lead); margin:4px 0 }
.ink{ font:400 16px var(--mono); color:var(--ink); text-transform:none; letter-spacing:0 }

/* a button is a pencil box drawn round a word in ballpoint */
button{ font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent }
.pen{ font:700 23px/1 var(--hand); color:var(--ink); background:rgba(255,253,246,.55); border:2px solid var(--lead); border-radius:var(--sketch);
  padding:9px 18px; min-height:40px; transition:transform .08s }
.pen:active{ transform:translateY(1px) rotate(-.4deg) }
.pen:disabled{ opacity:.45; cursor:default }
.pen.big{ font-size:30px; padding:10px 26px; border-width:2.5px }
.pen.small{ font-size:23px; padding:7px 14px }
.pen.on{ border-color:var(--red); color:var(--red) }
@media (pointer:coarse){ .pen, .slot, .offer, #sticker, #langs button{ min-height:44px } }
.row{ display:flex; gap:8px; flex-wrap:wrap }
.col{ display:flex; flex-direction:column; gap:10px; align-items:stretch }
.rewardTag{ font:700 18px/1 var(--hand); color:var(--red); text-transform:uppercase; letter-spacing:.08em; border-bottom:2px solid var(--red); padding:0 2px 1px; white-space:nowrap }

.sheet{ background:rgba(255,253,246,.92); border:2px solid var(--lead); border-radius:var(--sketch); padding:20px 22px; max-width:min(440px, 94vw); width:100% }
.sheet.wide{ max-width:min(620px, 94vw) }
.lines{ margin:0 0 14px; padding-left:22px; color:var(--ink) }
.lines li{ margin:6px 0 }

/* ---- the cover ---- */
#menu{ align-items:center; justify-content:center; gap:28px; padding:16px; flex-direction:column }
#cover{ position:relative; width:min(64vh, 84vw, 560px); aspect-ratio:1; flex:none; filter:drop-shadow(3px 5px 0 rgba(91,91,91,.22)); transform:rotate(-1.2deg) }
#coverImg{ width:100%; height:100%; display:block; border-radius:6px 14px 14px 6px }
#wordmark{ position:absolute; left:23.5%; top:21.5%; width:62.5%; height:28.5% }
#doors{ display:flex; flex-direction:column; gap:12px; align-items:center; width:min(340px, 90vw); container-type:inline-size }   /* the doors size their words from this column (cqw), not the window: sideways it is 280px wide */
#doors .pen{ width:100%; max-width:340px }
#rankRow{ display:flex; align-items:center; gap:10px }
.badge{ width:58px; height:66px; display:inline-flex; align-items:flex-start; justify-content:center; padding-top:13px; background-repeat:no-repeat; background-size:contain; background-position:center top }
.badge b{ font:400 18px var(--mono); color:var(--ink) }
#corner{ display:flex; gap:10px }
#menu{ overflow-y:auto }
#cover{ width:min(44vh, 80vw, 560px) }
@media (min-aspect-ratio:1/1){ #menu{ flex-direction:row } #cover{ width:min(78vh, 50vw, 600px) } #doors{ width:min(340px, 42vw) } }
@media (max-height:520px) and (min-aspect-ratio:1/1){ #cover{ width:min(86vh, 44vw) } #doors{ gap:8px } .pen.big{ font-size:26px; padding:8px 20px } }

/* ---- the seas ---- */
#seaList{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:6px 0 14px }
.sea{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 8px; text-align:center; min-height:44px }
.sea .stampImg{ width:76px; height:76px }
.sea b{ font:700 22px var(--hand) }
.sea small{ font:500 20px/1.15 var(--hand); color:var(--lead) }
.sea.locked{ opacity:.55 }

/* ---- the page ---- */
#page{ display:none }
#page.on{ display:grid; grid-template-columns:auto minmax(250px, 1fr); grid-template-rows:100%; height:100% }
#boardBox{ position:relative; display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; height:100%; aspect-ratio:1; max-width:66vw; padding:8px }
#board{ display:block; touch-action:none; cursor:crosshair }
#margin{ position:relative; display:flex; flex-direction:column; gap:10px; padding:14px 16px 14px 20px; overflow:auto; border-left:2px solid rgba(209,35,42,.62); min-width:0 }
#strip{ display:flex; flex-direction:column; gap:8px }
.pencilbox{ border:2px solid var(--lead); border-radius:var(--sketch); padding:8px 12px; font:700 22px/1.15 var(--hand); color:var(--ink); text-transform:uppercase; letter-spacing:.03em }
#shotsRow{ display:flex; align-items:center; gap:10px; font:700 19px var(--hand); color:var(--lead); text-transform:uppercase; letter-spacing:.05em }
#tally{ flex:1; min-width:60px; height:32px }
#shotsNum{ font:400 20px var(--mono); color:var(--ink) }
#fireRow{ display:flex; gap:8px; align-items:stretch }
#fire{ flex:1 }
#fire.close{ color:var(--red); border-color:var(--red) }
#pauseBtn{ display:flex; align-items:center; justify-content:center; padding:6px 12px; min-width:48px }
#more{ display:flex; flex-direction:column; gap:12px }
.group{ position:relative }
#caseRow, #passRow, #offers{ display:flex; gap:8px; flex-wrap:wrap }
.slot{ position:relative; width:62px; height:62px; border:2px dashed rgba(91,91,91,.6); border-radius:var(--sketch); background:transparent; padding:0; display:flex; align-items:center; justify-content:center }
.slot.full{ border-style:solid; border-color:var(--lead) }
.slot.armed{ border-color:var(--red); border-width:3px; background:rgba(209,35,42,.06) }
.slot .key{ position:absolute; left:4px; top:1px; font:400 14px var(--mono); color:var(--lead) }
.slot .axis{ position:absolute; right:3px; bottom:0; font:700 15px var(--hand); color:var(--red) }
#passRow .slot{ width:48px; height:48px }
.icon{ display:block; background-repeat:no-repeat; pointer-events:none }
.offer{ position:relative; width:84px; padding:6px 4px 4px; border:2px solid var(--lead); border-radius:var(--sketch); background:rgba(255,253,246,.5); display:flex; flex-direction:column; align-items:center; gap:2px }
.offer .price{ font:400 16px var(--mono); color:var(--ink) }
.offer .nm{ font:700 18px/1 var(--hand); color:var(--lead); text-align:center; max-width:80px; overflow-wrap:anywhere }
.offer.sel{ border-color:var(--red); border-width:3px }
.offer.poor .price{ color:var(--red); text-decoration:line-through }
.offer.taken{ visibility:hidden }
#ledger{ width:100%; height:auto; max-height:110px }
#hint{ min-height:1.2em; color:var(--ink); font-size:23px }
#armed{ color:var(--red) }

/* the rewarded offer is a sticker in the margin: its sprite behind, the action, and the word for an advert inside it */
.sticker{ position:relative; width:auto; min-width:220px; max-width:100%; height:90px; border:0; padding:6px 22px 14px; white-space:nowrap; background-color:transparent; background-repeat:no-repeat; background-size:100% 100%;
  display:flex; align-items:center; justify-content:center; gap:10px; font:700 26px/1 var(--hand); color:var(--ink); transform:rotate(-2deg) }
.sticker.watching, .sticker.empty{ color:var(--lead) }
.sticker-like{ display:flex; align-items:center; justify-content:center; gap:10px }

/* ---- the summary and the end ---- */
.card{ text-align:center }
#stamp{ width:110px; height:110px; display:block; margin:-4px auto 2px; transform:rotate(-8deg) }
#sumLines, #endLines{ list-style:none; padding:0; margin:4px 0 16px; font:500 23px/1.35 var(--hand); color:var(--ink) }
#sumLines li b, #endLines li b{ font:400 18px var(--mono); color:var(--ink) }
#sumLines li.red, #endLines li.red{ color:var(--red) }

#langRow h3{ justify-content:center }
#langs{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center }
#langs button{ font:700 22px var(--hand); padding:6px 10px; border:2px solid var(--lead); border-radius:var(--sketch); background:transparent; color:var(--ink) }
#langs button.on{ border-color:var(--red); color:var(--red) }
#tabs{ display:flex; gap:8px; justify-content:center; margin-bottom:8px }
#rows{ list-style:none; padding:0; margin:0 0 14px; text-align:left; max-height:52vh; overflow:auto }
#rows li{ display:flex; justify-content:space-between; gap:10px; padding:5px 4px; border-bottom:1px solid var(--rule); font:500 22px var(--hand) }
#rows li.me{ color:var(--red) }
#rows li b{ font:400 17px var(--mono) }

#toast{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%) rotate(-1deg); z-index:9; background:#fffdf6; border:2px solid var(--lead); border-radius:var(--sketch);
  padding:8px 16px; font:700 21px var(--hand); color:var(--ink); max-width:90vw; text-align:center; pointer-events:none }

/* a phone held upright, or any frame taller than wide: the grid on top, the strip under it, the rest of the margin scrolls */
@media (max-aspect-ratio:1/1){
  #page.on{ grid-template-columns:100%; grid-template-rows:auto auto minmax(0, 1fr) }
  /* the board leaves room for the strip (score, shots, Fire): about 150 px, and a little of the margin below it */
  #boardBox{ width:min(100vw, calc(100vh - 205px)); height:auto; max-width:none; aspect-ratio:1; justify-self:center; padding:6px 4px }
  #margin{ display:contents }
  #strip{ padding:4px 12px 6px; border-top:2px solid rgba(209,35,42,.62); display:flex; flex-direction:column; gap:5px; min-width:0 }
  #scoreBox{ font-size:19px; padding:5px 10px }
  #shotsRow{ font-size:18px; gap:8px }
  #fire{ padding:6px 16px; font-size:26px }
  #more{ overflow:auto; padding:6px 14px 18px; min-height:0; -webkit-overflow-scrolling:touch }
  .sticker{ min-width:200px; height:82px; font-size:23px }
}
@media (max-aspect-ratio:1/1) and (max-height:560px){ #boardBox{ width:min(100vw, calc(100vh - 175px)) } #scoreBox{ font-size:18px; padding:4px 8px } .pen.big{ font-size:24px } }
/* a short, wide frame (a phone on its side, a small portal iframe): every row a little tighter */
@media (min-aspect-ratio:1/1) and (max-height:520px){
  #margin{ padding:8px 10px 8px 14px; gap:6px } .pencilbox{ font-size:18px; padding:5px 9px } .pen.big{ font-size:24px; padding:7px 16px }
  .slot{ width:50px; height:50px } #passRow .slot{ width:40px; height:40px } .offer{ width:72px } h3{ font-size:18px } .note{ font-size:20px } #hint{ font-size:21px }
  .sticker{ min-width:180px; height:74px; font-size:21px }
}
/* a short frame held upright (Yandex's mobile frame is 360×500): a smaller cover and tighter doors, so the menu fits
   without scrolling */
@media (max-aspect-ratio:1/1) and (max-height:600px){
  #menu{ gap:10px; padding:8px } #cover{ width:min(30vh, 64vw) } #doors{ gap:6px } #doors .pen.big{ font-size:24px; padding:7px 18px } #doors .pen{ padding:6px 14px }
  .badge{ width:46px; height:52px; padding-top:10px } #dailyNote{ font-size:20px; margin:0 }
}
/* a phone 640-700px tall: the bigger type (2026-10-14) made the cover 6px taller than a 360×640 frame, so it scrolled */
@media (max-aspect-ratio:1/1) and (min-height:601px) and (max-height:700px){ #menu{ gap:16px } }
#seas{ align-items:flex-start; justify-content:center; overflow-y:auto; padding:16px }
#seas.on > .sheet{ margin:auto; flex:none }

/* ---- the onboarding and the guide ---- */
#introBoard{ display:block; width:min(330px, 74vw, 46vh); height:auto; aspect-ratio:4/5; margin:2px auto 6px }
.caption{ font:700 23px/1.2 var(--hand); color:var(--ink); min-height:2.5em; margin:4px 0 8px }
#introDots{ display:flex; gap:7px; justify-content:center; margin:0 0 10px }
#introDots i{ width:9px; height:9px; border-radius:50%; border:1.5px solid var(--lead) }
#introDots i.on{ background:var(--red); border-color:var(--red) }
.row.center{ justify-content:center }
.pen.link{ border-color:transparent; background:transparent; margin-top:6px; color:var(--lead) }
/* the cover's three small doors: readable first (17px Caveat read like 12px type; Vadim, 2026-10-14). One row of three
   where they fit; a door never narrower than its longest word ("Leaderboard" ran out of its box on a sideways phone and
   "Clasificación" nearly everywhere), so where three do not fit the row wraps and the doors share the second line */
#corner{ flex-wrap:wrap; justify-content:center; gap:6px; width:100%; max-width:340px }
#corner .pen.small{ flex:1 1 0; width:auto; max-width:none; font-size:clamp(18px, 6.6cqw, 23px); line-height:1.05; padding:7px 8px; white-space:normal; min-width:min-content }
.qmark{ width:28px; height:28px; min-height:0; padding:0; border:2px solid var(--lead); border-radius:50%; background:transparent; font:700 20px/1 var(--hand); color:var(--ink); vertical-align:middle }
@media (pointer:coarse){ .qmark{ width:40px; height:40px } }
.guide{ text-align:left }
.guide h3{ margin-top:12px }
.glist{ list-style:none; padding:0; margin:0 }
.glist li{ display:flex; align-items:center; gap:12px; padding:6px 0; border-bottom:1px solid var(--rule) }
.glist canvas{ flex:none; width:44px; height:44px }
.glist .gicon{ flex:none; width:48px; height:48px; display:flex; align-items:center; justify-content:center }
.glist b{ display:block; font:700 23px/1.1 var(--hand); color:var(--ink) }
.glist span.d{ display:block; font:500 21px/1.2 var(--hand); color:var(--lead) }
.glist .tag{ display:inline-block; margin-top:2px; font:700 17px/1 var(--hand); color:var(--red); text-transform:uppercase; letter-spacing:.06em }
.ggroup{ font:700 19px var(--hand); color:var(--lead); text-transform:uppercase; letter-spacing:.06em; margin:10px 0 0 }

/* ---- a preview from the guide ---- */
#pvBoard{ display:block; width:min(310px, 72vw, 44vh); height:auto; aspect-ratio:4/5; margin:2px auto 4px }
.pvtag{ font:700 17px/1 var(--hand); color:var(--red); text-transform:uppercase; letter-spacing:.06em; margin:0 0 10px }
#pvCount{ align-self:center; min-width:52px; text-align:center; font:400 15px var(--mono) }
#preview .row{ align-items:center }
.glist li{ cursor:pointer }
.glist li:hover b{ text-decoration:underline }
.glist .play{ margin-left:auto; flex:none; width:32px; height:32px; border:2px solid var(--lead); border-radius:50%; display:flex; align-items:center; justify-content:center; font:12px var(--mono); color:var(--ink) }
/* a saved run adds Continue above New run: the notebook gives up the room so the cover still fits a phone */
#menu.hascont #play{ font-size:24px; padding:8px 18px }
@media (max-aspect-ratio:1/1){ #menu.hascont #cover{ width:min(34vh, 70vw) } }
@media (max-aspect-ratio:1/1) and (max-height:600px){ #menu.hascont #cover{ width:min(22vh, 50vw) } #menu.hascont{ gap:8px } }
@media (min-aspect-ratio:1/1) and (max-height:520px){ #menu.hascont #doors{ gap:6px } #menu.hascont #dailyNote{ display:none } }
/* Continue in big type and where it continues on a smaller line under it: "Продолжить: Обманки, стр. 10" was wider than the
   button in ru, es and pt at every phone width (2026-10-15) */
#cont{ font-size:clamp(19px, 8.6cqw, 30px); display:flex; flex-direction:column; align-items:center; gap:2px; line-height:1 }
#cont small{ font:500 clamp(18px, 6.4cqw, 22px)/1.05 var(--hand); color:var(--lead); white-space:normal }

/* ---- the classic battle ---- */
.two{ display:flex; gap:8px; width:100%; max-width:340px }
.two .pen{ flex:1; padding-left:8px; padding-right:8px }
.duelOnly{ display:none }
#page.duel .duelOnly{ display:block }
#page.duel #shotsRow, #page.duel #more .group, #page.duel #sticker{ display:none }
#mineBox h3{ margin-bottom:2px }
/* the player's fleet and, beside it, the enemy's ships as the run's ledger draws them (sunk ones hatched) */
#page.duel #mineBox{ display:flex; gap:12px; align-items:flex-start }
#mineBox .fleetCol{ min-width:0 }
#themCol{ flex:0 1 128px; width:128px }
#themLedger{ display:block; width:100%; height:auto }
#mine{ display:block; width:min(100%, 250px); height:auto; aspect-ratio:1 }
#shuffle{ margin-top:6px }
.pick{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 12px }
.pick b{ font:700 24px var(--hand) }
.pick small{ font:500 20px/1.15 var(--hand); color:var(--lead) }
.pick .rec{ font:400 15px var(--mono); color:var(--ink) }
#duelStamp{ width:100px; height:100px; display:block; margin:-4px auto 2px; transform:rotate(-8deg) }
#duelLines{ list-style:none; padding:0; margin:4px 0 16px; font:500 23px/1.35 var(--hand); color:var(--ink) }
/* a phone held upright: the fleet beside Fire, the board on top */
@media (max-aspect-ratio:1/1){
  #page.duel #strip{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto 1fr auto; gap:6px 10px; align-items:start }
  #page.duel #mineBox{ grid-column:1; grid-row:1 / 4 }
  #page.duel #scoreBox{ grid-column:2; grid-row:1 }
  #page.duel #fireRow{ grid-column:2; grid-row:3 }
  #page.duel #mine{ width:clamp(104px, min(44vw, calc(100vh - 100vw - 60px)), 240px) }
  #page.duel #mineBox h3{ font-size:18px }
  #page.duel #shuffle{ font-size:18px; padding:5px 8px }
}
/* a short frame held upright (Yandex's 360×500): a match gives the board a little less height so the fleet and Fire fit */
@media (max-aspect-ratio:1/1) and (max-height:600px){
  #page.duel #boardBox{ width:min(100vw, calc(100vh - 240px)) }
  #page.duel #strip{ gap:4px 8px; padding-top:2px } #page.duel #mineBox h3{ display:none } #page.duel #shuffle{ margin-top:3px; padding:4px 8px; min-height:40px }
  #page.duel #scoreBox{ font-size:18px }
}

/* placing the fleet: the margin's fleet is hidden (the fleet is on the big board), Shuffle stands beside Start */
#page.setup #mineBox{ display:none }
#page.setup #board{ cursor:grab }
#shuffle{ white-space:nowrap }
@media (max-aspect-ratio:1/1){ #page.duel.setup #strip{ display:flex; flex-direction:column } }

/* ---- a phone held upright: the controls ABOVE the board (Vadim, 2026-10-14) ----
   A run: the score line, the tally, Fire and pause on top, the board, then the rest of the margin.
   A classic battle: the turn line, Fire and pause on top, the board, the player's fleet under it. */
@media (max-aspect-ratio:1/1){
  #page.on{ grid-template-areas:"strip" "board" "more"; grid-template-rows:auto auto minmax(0, 1fr) }
  #strip{ grid-area:strip; border-top:0; border-bottom:2px solid rgba(209,35,42,.62); padding:8px 12px 6px }
  #boardBox{ grid-area:board }
  #more{ grid-area:more }

  #page.duel.on{ grid-template-areas:"score" "fire" "board" "mine" "more"; grid-template-rows:auto auto auto auto minmax(0, 1fr) }
  #page.duel #strip, #page.duel.setup #strip{ display:contents }
  #page.duel #scoreBox{ grid-area:score; margin:8px 12px 5px }
  #page.duel #fireRow{ grid-area:fire; margin:0; padding:0 12px 7px; border-bottom:2px solid rgba(209,35,42,.62) }
  #page.duel #mineBox{ grid-area:mine; justify-self:center; padding:6px 0 2px }
  #page.duel #mineBox h3{ display:block; text-align:center; justify-content:center }
  #page.duel #boardBox{ width:min(100vw, calc(100vh - 270px)) }
  #page.duel #mine{ width:clamp(104px, calc(100vh - 100vw - 130px), 220px) }
  #page.duel.setup #boardBox{ width:min(100vw, calc(100vh - 150px)) }
}
@media (max-aspect-ratio:1/1) and (max-height:600px){
  #page.duel #boardBox{ width:min(100vw, calc(100vh - 230px)) }
  #page.duel #mineBox h3{ display:none }
  #page.duel #mine{ width:clamp(96px, calc(100vh - 100vw - 120px), 160px) }
}

/* ---- a run on a phone held upright (Vadim, 2026-10-14): the score line with pause beside it, the tally, the board, Fire
   under the board, then the rest of the margin. #strip and #fireRow step aside (display:contents) so their buttons take
   their own places in the page's grid. */
@media (max-aspect-ratio:1/1){
  #page.on:not(.duel){ grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"score pause" "shots shots" "board board" "fire fire" "more more"; grid-template-rows:auto auto auto auto minmax(0, 1fr) }
  #page:not(.duel) #strip, #page:not(.duel) #fireRow{ display:contents }
  #page:not(.duel) #scoreBox{ grid-area:score; margin:8px 0 4px 12px }
  #page:not(.duel) #pauseBtn{ grid-area:pause; margin:8px 12px 4px 8px; align-self:stretch }
  #page:not(.duel) #shotsRow{ grid-area:shots; margin:0 12px; padding-bottom:6px; border-bottom:2px solid rgba(209,35,42,.62) }
  #page:not(.duel) #boardBox{ grid-area:board; justify-self:center }
  #page:not(.duel) #fire{ grid-area:fire; margin:4px 12px 6px }
  #page:not(.duel) #more{ grid-area:more }
}

/* ---- placing the fleet on a phone held upright (Vadim, 2026-10-14): "Place your fleet" with pause beside it, the board,
   Shuffle and Start the battle under the board, then the hint. The battle itself keeps the turn line, Fire and pause on top. */
@media (max-aspect-ratio:1/1){
  #page.duel.setup.on{ grid-template-columns:auto minmax(0, 1fr) auto; grid-template-areas:"score score pause" "board board board" "shuffle start start" "more more more"; grid-template-rows:auto auto auto minmax(0, 1fr) }
  #page.duel.setup #fireRow{ display:contents }
  #page.duel.setup #scoreBox{ grid-area:score; margin:8px 0 6px 12px }
  #page.duel.setup #pauseBtn{ grid-area:pause; margin:8px 12px 6px 8px; align-self:stretch }
  #page.duel.setup #boardBox{ grid-area:board; justify-self:center; width:min(100vw, calc(100vh - 175px)); border-top:2px solid rgba(209,35,42,.62) }
  #page.duel.setup #shuffle{ grid-area:shuffle; margin:6px 0 6px 12px }
  #page.duel.setup #fire{ grid-area:start; margin:6px 12px 6px 8px }
  #page.duel.setup #more{ grid-area:more }
}
@media (max-aspect-ratio:1/1){ #page.duel.setup #shuffle{ font-size:20px; padding:8px 12px } }

/* ---- a TABLET held upright (iPad mini 768×1024 and up; Vadim, 2026-10-14: "the field takes a lot of space and the button is
   too small"; "in classic my board is too small and everything is not visible under it"). The phone rules above shrink type
   and give the board the whole width; on a tablet that pushed the margin off the screen. Here the board leaves room, the
   margin under it runs in two columns so the pencil case and the shop are both in sight, the player's fleet in a battle gets
   a real size, and the buttons and lines are desktop-sized again. */
@media (max-aspect-ratio:1/1) and (min-width:600px){
  .pen.big, #fire{ font-size:30px; padding:11px 24px }
  .pen.small{ font-size:24px; padding:8px 16px }
  #scoreBox, #page:not(.duel) #scoreBox, #page.duel #scoreBox, #page.duel.setup #scoreBox{ font-size:23px; padding:8px 14px }
  #shotsRow{ font-size:19px } #shotsNum{ font-size:22px } #tally{ height:36px }
  #pauseBtn{ min-width:58px }
  .slot{ width:68px; height:68px } #passRow .slot{ width:54px; height:54px } .offer{ width:96px }

  /* a run: score and pause, the tally, the board, Fire, then the margin in two columns */
  #page:not(.duel) #boardBox{ width:min(100vw, calc(100vh - 430px)) }
  #page:not(.duel) #more{ display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; align-content:start; padding:8px 22px 18px; overflow:auto }
  #page:not(.duel) #more #hint, #page:not(.duel) #more #sticker{ grid-column:1 / -1 }
  #page:not(.duel) #more > .group:nth-of-type(1){ grid-column:1 } #page:not(.duel) #more #passGroup{ grid-column:1 }
  #page:not(.duel) #more #shop{ grid-column:2; grid-row:span 3 }

  /* a battle: the turn line, Fire and pause, the board, and the player's fleet at a size worth looking at */
  #page.duel #boardBox{ width:min(100vw, calc(100vh - 470px)) }
  #page.duel #mine{ width:min(320px, calc(100vh - min(100vw, calc(100vh - 470px)) - 190px)) }
  #page.duel #mineBox h3{ display:block; font-size:18px }
  /* placing the fleet: the big board, and full-size Shuffle and Start under it */
  #page.duel.setup #boardBox{ width:min(100vw, calc(100vh - 230px)) }
  #page.duel.setup #shuffle{ font-size:24px; padding:10px 18px }
}
/* tablet upright, second pass: Fire a real thumb target, the margin all in sight under the board */
@media (max-aspect-ratio:1/1) and (min-width:600px){
  #fire{ font-size:36px; min-height:72px }
  #page.duel.setup #fire{ font-size:32px; min-height:64px }
  .slot{ width:76px; height:76px } #passRow .slot{ width:58px; height:58px } .offer{ width:104px } .offer .nm{ font-size:20px } .offer .price{ font-size:17px }
  #page:not(.duel) #boardBox{ width:min(100vw, calc(100vh - 560px)) }
  #page:not(.duel) #more{ padding-top:4px }
  #page.duel #boardBox{ width:min(100vw, calc(100vh - 520px)) }
  #page.duel #mine{ width:min(360px, calc(100vh - min(100vw, calc(100vh - 520px)) - 200px)) }
}
@media (max-aspect-ratio:1/1) and (min-width:600px){
  #page:not(.duel) #more > .group:nth-of-type(1){ grid-column:1; grid-row:2 }
  #page:not(.duel) #more #passGroup{ grid-column:1; grid-row:3 }
  #page:not(.duel) #more > .group:nth-of-type(4){ grid-column:1; grid-row:4 }
  #page:not(.duel) #more #shop{ grid-column:2; grid-row:2 / span 3 }
}
/* a phone on its side (667×375): the margin is narrow, so Start the battle takes its own full-width row under Shuffle and pause */
@media (min-aspect-ratio:1/1) and (max-height:520px){
  #page.duel.setup #fireRow{ flex-wrap:wrap }
  #page.duel.setup #fire{ order:3; flex:1 1 100%; font-size:22px; padding:7px 12px; white-space:nowrap }
  #page.duel.setup #shuffle{ flex:1 }
}

/* ---- touch screens (Vadim, 2026-10-14: "for phone, tablet and all touch screens we don't need the Fire button"): the second
   tap on a cell fires, so Fire only repeats it. It stays where it does something a tap cannot: "Close the page" when the
   shots are gone (#fire.close) and "Start the battle" while the fleet is placed. In a battle, pause moves up beside the
   turn line, as it sits beside the score line in a run. A device whose main pointer is a mouse keeps the button. */
@media (pointer:coarse){
  #fire:not(.close){ display:none }
  #page.duel.setup #fire{ display:block }
}
@media (pointer:coarse) and (max-aspect-ratio:1/1){
  #page.duel:not(.setup).on{ grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"score pause" "board board" "mine mine" "more more"; grid-template-rows:auto auto auto minmax(0, 1fr) }
  #page.duel:not(.setup) #fireRow{ display:contents }
  #page.duel:not(.setup) #scoreBox{ grid-area:score; margin:8px 0 6px 12px }
  #page.duel:not(.setup) #pauseBtn{ grid-area:pause; margin:8px 12px 6px 8px; align-self:stretch }
  #page.duel:not(.setup) #boardBox{ border-top:2px solid rgba(209,35,42,.62) }
}
/* a touch tablet upright, without the Fire row: the board takes the room back */
@media (pointer:coarse) and (max-aspect-ratio:1/1) and (min-width:600px){
  #page:not(.duel) #boardBox{ width:min(100vw, calc(100vh - 470px)) }
  #page.duel:not(.setup) #boardBox{ width:min(100vw, calc(100vh - 460px)) }
  #page.duel:not(.setup) #mine{ width:min(360px, calc(100vh - min(100vw, calc(100vh - 460px)) - 150px)) }
}

/* ---- a touch screen on its side (Vadim, 2026-10-14): pause on the score line's row, not alone under the margin. With Fire
   hidden on touch it stood by itself; now #strip is a two-column grid, the score (or turn, or "Place your fleet") line and
   pause share the first row, and the rest (the fleet, the tally, Shuffle, Start the battle, Close the page) take full rows. */
@media (pointer:coarse) and (min-aspect-ratio:1/1){
  #strip, #page.duel #strip, #page.duel.setup #strip{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:8px; align-items:stretch }
  #fireRow, #page.duel.setup #fireRow{ display:contents }
  #scoreBox{ grid-column:1; grid-row:1; min-width:0 }
  #pauseBtn{ grid-column:2; grid-row:1; min-width:52px }
  #mineBox, #shotsRow, #shuffle, #fire{ grid-column:1 / -1 }
  #page.duel.setup #fire, #page.duel.setup #shuffle{ order:0; flex:none; width:100% }
}
@media (pointer:coarse) and (min-aspect-ratio:1/1){ #scoreBox, #page.duel #scoreBox, #page.duel.setup #scoreBox{ font-size:clamp(17px, 1.9vw, 21px); letter-spacing:.01em; padding:7px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } }
@media (pointer:coarse) and (min-aspect-ratio:1/1){ #page.duel #scoreBox, #page.duel.setup #scoreBox{ white-space:normal; overflow:visible; line-height:1.2 } }

/* ---- the pause veil: shown while the game is paused from outside (a hidden tab, a lost focus, a host pause), over the page
   only, never over an advert and never with the pause menu; a tap anywhere lifts it (presence.js takes a gesture in our
   document as proof we are in front) */
#veil{ position:fixed; inset:0; z-index:8; display:flex; align-items:center; justify-content:center; background:rgba(245,241,228,.82); cursor:pointer; touch-action:manipulation }
#veil .sheet{ max-width:min(320px, 86vw); padding:18px 24px 16px; pointer-events:none }
#veilMark{ display:block; width:64px; height:64px; margin:0 auto 4px }
#veil h2{ margin-bottom:4px }
/* store art (&art): the margin is gone, so the board stands in the middle of the page instead of its left column */
#page.art.on{ grid-template-columns:1fr; grid-template-rows:auto; grid-template-areas:"board"; justify-items:center; align-items:start } #page.art #boardBox{ grid-area:board; justify-self:center; width:min(96vw, 70vh) !important; max-width:none; height:auto; aspect-ratio:1 }   /* above the title band, whatever the shape */
/* the margin scrolls on a short frame; on a desktop its scrollbar is a thin pencil line, not a grey bar (Playgama/Poki review, 2026-10-15) */
#margin, #more{ scrollbar-width:thin; scrollbar-color:rgba(91,91,91,.35) transparent }