* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #041824;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #e8f2f8;
  -webkit-user-select: none; user-select: none;
  touch-action: none; overscroll-behavior: none;
}
/* The platform button bar, measured on a live page. It sits on one of two
   sides: on a narrow phone in portrait it is a 96px bar across the bottom,
   while on its side and on a wide screen it is a column on the right up to
   80px wide. Anything under it gets no taps and is not visible, so we keep an
   allowance on that side: --dock at the bottom, --rail on the right. Measured
   on a live page: 390x844 and 768x1024 gave a bottom bar, 844x390, 899x500,
   900x1200 and 1280x800 gave a right column. Outside the frame there is no
   allowance. */
html { --dock: 0px; --rail: 0px; }
@media (orientation: portrait) and (max-width: 899px) {
  html.embed { --dock: 96px; }
}
@media (orientation: landscape), (min-width: 900px) {
  html.embed { --rail: 80px; }
}

#cv { position: fixed; inset: 0; display: block; touch-action: none; }

/* ---------- readouts ---------- */
#hud {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 10px;
  padding: max(6px, env(safe-area-inset-top)) 10px 6px 10px;
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: calc(max(10px, env(safe-area-inset-right)) + var(--rail));
  /* No backing: the line lies right on the sky and the field behind it shows.
     A reviewer twice read the gradient band as plates covering the field, though
     there are only four groups of figures and two small buttons. */
  background: none;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  z-index: 5;
}
#hud .grp { display: flex; align-items: baseline; gap: 5px; }
/* The weapons line belongs to the battle: its visibility is derived from the state */
#hud { display: none; }
body.playing #hud { display: flex; }
/* On the left only the convoy and torpedoes, at the person's request: the
   other nodes are hidden with hidden, no auto-hide needed. The idle rule is
   left zeroed. */
#hud[hidden] { display: none; }
#hud .grp[hidden] { display: none; }
#hud.idle { opacity: 1; }
#hud { transition: opacity .4s; }
#hud .lbl { font-size: 9px; letter-spacing: .09em; color: #8fb8ca; text-transform: uppercase; }
#hud .val { font-size: 18px; font-weight: 800; color: #ffe07a; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
#hud .spacer { flex: 1; }
/* Pause lives on its own button at the top right: the line on the left is
   gone, and the button has nowhere else to live. */
#pauseBtn {
  position: fixed;
  top: calc(max(6px, env(safe-area-inset-top)) + var(--rail));
  right: calc(max(10px, env(safe-area-inset-right)) + var(--rail));
  z-index: 5;
}
#hud .ico, #pauseBtn.ico {
  pointer-events: auto; flex: 0 0 auto;
  /* The buttons are small and translucent: pause and sound are needed on the
     field but must not read as plates. The finger size is held by the whole
     touch line. */
  width: 28px; height: 28px; border-radius: 9px;
  border: 1px solid rgba(160,215,235,.22);
  background: rgba(6,34,50,.28); color: #cfe8f3;
  font-size: 14px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
#hull { display: inline-flex; gap: 3px; }
#hull i {
  display: block; width: 15px; height: 8px; border-radius: 2px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(180,220,235,.3);
}
#hull i.on { background: linear-gradient(180deg, #6ef0a8, #1d9a63); border-color: rgba(140,255,200,.6); }

/* shield: a dome by the hull, bright when up, with a countdown while it recharges */
/* The magazine: the key number of a level, so it is removed on no screen.
   Yellow while there is stock, orange below a third, red on the last three. */
#hud .lbl b { font-weight: inherit; }
#hud .lbl .n { display: none; }
#hud #ammo { font-variant-numeric: tabular-nums; min-width: 1.1em; text-align: right; }
#hud #ammo.half { color: #ffb066; }
#hud #ammo.low { color: #ff8f78; }
#hud .ammogrp.warn { animation: ammowarn 1s ease-in-out infinite; }
/* The upper duplicates of convoy and torpedoes are removed: the figures live
   at the bottom left. The nodes are hidden with hidden rather than deleted so
   setHud and setAmmo do not fall over. */
#hud .lvlgrp[hidden], #hud .ammogrp[hidden], #hud #muteBtn[hidden] { display: none; }
@keyframes ammowarn { 0%, 100% { opacity: 1; } 50% { opacity: .48; } }
#hud .shieldgrp { display: none; }
#hud .shieldgrp.has { display: inline-flex; align-items: center; margin-left: 4px; }
#shield { display: inline-flex; align-items: center; gap: 4px; }
#shield i {
  display: block; width: 18px; height: 10px;
  border: 1.5px solid rgba(150,220,240,.34);
  border-bottom: none; border-radius: 10px 10px 0 0;
  background: rgba(150,220,240,.07);
}
#shield.up i {
  border-color: rgba(175,244,255,.95);
  background: linear-gradient(180deg, rgba(175,244,255,.72), rgba(120,210,240,.18));
  box-shadow: 0 0 8px rgba(150,235,255,.55);
}
#shield em {
  font-style: normal; font-size: 10px; font-weight: 800; color: #9fe8ff;
  font-variant-numeric: tabular-nums;
}
#shield.up em { display: none; }

/* narrow screen: the readouts squeeze, the buttons stay put */
@media (max-width: 600px) {
  #hud { gap: 5px; }
  #hud .grp { gap: 4px; }
  #hud .lbl { font-size: 8px; letter-spacing: .05em; }
  #hud .val { font-size: 16px; }
  #hud .ico, #pauseBtn.ico { width: 30px; height: 30px; font-size: 13px; border-radius: 9px; }
  #hull {
    display: grid; grid-template-columns: repeat(3, 1fr);
    width: 36px; flex: 0 0 auto; gap: 2px; row-gap: 2px;
  }
  #hull i { width: auto; height: 7px; }
  /* TARGETS stays on a narrow screen too: it is the only target counter at
     the top and must not be hidden. The label is short, the number is the key
     thing. */
  /* the magazine stays, but its label is shorter: the line is narrow and the number is what matters */
  #hud .ammogrp .lbl .w { display: none; }
  #hud .ammogrp .lbl .n { display: inline; }
  /* The stage's Roman numeral joined the convoy count, and at 390px the line
     overflowed from it (measured: scrollWidth larger than clientWidth). The
     convoy label is short here: the number and the stage numeral matter
     anyway. */
  #hud .lvlgrp .lbl .w { display: none; }
  #hud .lvlgrp .lbl .n { display: inline; }
  /* the hull compartments read without a label too */
  #hud .hullgrp .lbl { display: none; }
  #shield i { width: 13px; height: 8px; }
  #shield em { font-size: 9px; }
}
@media (max-width: 360px) {
  #hud { gap: 3px; padding-left: max(7px, env(safe-area-inset-left)); padding-right: calc(max(7px, env(safe-area-inset-right)) + var(--rail)); }
  #hud .grp { gap: 2px; }
  #hud .val { font-size: 15px; }
}
/* the narrowest phone: the score is known by the large yellow number even without a label */
@media (max-width: 320px) {
  /* the convoy reads from the "1/3" counter itself, the label is not needed here */
  #hud .lvlgrp .lbl { display: none; }
  #hud .val { font-size: 14px; }
  #hull { width: 30px; gap: 2px; }
  #shield i { width: 12px; height: 7px; }
}

/* The stage's Roman numeral next to the convoy count: stages of three
   convoys, and the area of the battle is visible with no caption at all. */
#hud .actb {
  font-style: normal; font-weight: 800; font-size: 9px; letter-spacing: .04em;
  margin-left: 3px; padding: 1px 4px 2px; border-radius: 5px;
  background: rgba(160, 215, 235, .18); color: #cfe8f3;
}
#hud .actb.two { background: rgba(255, 224, 122, .22); color: #ffe07a; }

/* the "new" mark on a gear button: a fresh option is seen at once */
.chip .nw {
  display: inline-block; margin-left: 6px; padding: 1px 5px;
  border-radius: 5px; background: #ffd968; color: #23180a;
  font-size: 9px; font-weight: 800; letter-spacing: .06em; vertical-align: middle;
}

/* ---------- fire button ---------- */
#fireBtn {
  position: fixed;
  right: calc(max(14px, env(safe-area-inset-right)) + var(--rail));
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + var(--dock));
  width: 84px; height: 84px; border-radius: 50%;
  border: 2px solid rgba(255,206,120,.75);
  background: radial-gradient(circle at 35% 30%, #c9503a, #8a2a1f 70%);
  box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 -4px 10px rgba(0,0,0,.35);
  color: #fff2d8; cursor: pointer;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; z-index: 6;
  transition: transform .07s, opacity .12s;
}
body.playing #fireBtn { display: flex; }
#fireBtn:active { transform: scale(.93); }
#fireBtn.cool { opacity: .45; }
#fireBtn .t {
  width: 0; height: 0;
  border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-bottom: 15px solid #ffe8bf;
}
#fireBtn .cap { font-size: 11px; font-weight: 800; letter-spacing: .1em; }

/* ---------- screens ---------- */
.screen {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 14px calc(14px + var(--rail)) calc(14px + var(--dock)) 14px;
  background: radial-gradient(ellipse at 50% 40%, rgba(4,26,42,.72), rgba(2,14,24,.92));
  backdrop-filter: blur(2px);
  overflow: auto;
}
.screen.hidden { display: none; }
/* Low screen: the margin around the panel eats height that is not there
   anyway. Measured at 600x280: the panel fit, the top and bottom margins did
   not. */
@media (max-height: 340px) {
  .screen { padding: 8px calc(10px + var(--rail)) calc(8px + var(--dock)) 10px; }
}
.panel {
  width: 100%; max-width: 460px; margin: auto;  /* centred, but with too little height the top shows too */
  background: linear-gradient(180deg, rgba(9,44,64,.94), rgba(5,26,40,.96));
  border: 1px solid rgba(140,210,235,.28);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
  padding: 16px 16px 18px;
  text-align: center;
}
h1 {
  font-size: clamp(24px, 7vw, 40px); font-weight: 900; letter-spacing: .04em;
  color: #ffe07a; text-shadow: 0 2px 0 #7a4a12, 0 4px 14px rgba(0,0,0,.5);
  line-height: 1;
}
h1 .two {
  display: inline-block; margin-left: 8px; padding: 2px 7px;
  font-size: .46em; vertical-align: super;
  background: #c9503a; color: #fff2d8; border-radius: 6px; text-shadow: none;
}
h2 { font-size: clamp(18px, 5.4vw, 26px); font-weight: 800; color: #ffe07a; letter-spacing: .03em; }
.sub { margin-top: 5px; font-size: 13px; color: #a8cfdf; }
.how { margin: 12px 0 10px; text-align: left; font-size: 12.5px; line-height: 1.42; color: #d3e7f0; }
.how .row { margin: 5px 0; }
.how .row b { color: #ffe07a; }
.how .dim { color: #9dc0d1; }
.fleet { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 12px; }
.fleet td { padding: 3px 4px; border-bottom: 1px solid rgba(140,200,225,.12); text-align: left; }
.fleet td:first-child { color: #e8f2f8; font-weight: 700; white-space: nowrap; }
.fleet .d { color: #9dc0d1; }
.fleet .n { width: 40px; }
.fleet .sh { display: inline-flex; gap: 2px; }
.fleet .sh i {
  display: block; width: 8px; height: 8px; border-radius: 2px;
  background: linear-gradient(180deg, #d6ebf6, #8db2c5);
  border: 1px solid rgba(8,26,40,.55);
}
.fleet .c { color: #ffe07a; font-weight: 800; width: 2.2em; text-align: center; }
.fleet .hd td { color: #7fa4b7; font-weight: 600; font-size: .86em; letter-spacing: .04em; }
.fleet .hd td:first-child { color: #7fa4b7; font-weight: 600; }
.fleet .p { color: #ffe07a; font-weight: 800; text-align: right; }
/* the enter button holds at the bottom edge even when the rules did not fit by height */
.foot {
  position: sticky; bottom: -18px;
  margin: 0 -16px -18px; padding: 8px 16px 12px;
  background: linear-gradient(180deg, rgba(6,32,48,0), rgba(6,32,48,.97) 40%, #06202f 60%);
  border-radius: 0 0 15px 15px;
}
button.big {
  width: 100%; margin-top: 4px; padding: 13px 16px;
  font-size: 16px; font-weight: 800; letter-spacing: .05em;
  color: #06212f; cursor: pointer;
  background: linear-gradient(180deg, #ffe07a, #f0b73f);
  border: none; border-radius: 12px;
  box-shadow: 0 5px 0 #9a6f18, 0 8px 18px rgba(0,0,0,.35);
}
button.big:active { transform: translateY(3px); box-shadow: 0 2px 0 #9a6f18; }
button.small {
  margin-top: 10px; padding: 9px 14px; width: 100%;
  font-size: 13px; font-weight: 700; color: #cfe8f3; cursor: pointer;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(160,215,235,.3); border-radius: 10px;
}
.best { margin-top: 9px; font-size: 12px; color: #a8cfdf; }
.stats { margin-top: 6px; font-size: 12px; color: #9dc0d1; }
.bigscore {
  margin: 8px 0 2px; font-size: clamp(38px, 13vw, 64px); font-weight: 900;
  color: #ffe07a; line-height: 1; font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 0 #7a4a12, 0 6px 18px rgba(0,0,0,.5);
}

/* little height (small screen, phone on its side): the panel is more compact */
@media (max-height: 620px) {
  .panel { padding: 12px 13px 14px; }
  h1 { font-size: clamp(20px, 6vw, 32px); }
  .how { margin: 7px 0 7px; font-size: 12px; line-height: 1.34; }
  .how .row { margin: 4px 0; }
  .fleet { font-size: 11.5px; margin-bottom: 9px; }
  .fleet td { padding: 2px 4px; }
  .sub { font-size: 12px; }
  button.big { padding: 11px 14px; font-size: 15px; }
  button.small { margin-top: 7px; padding: 8px 12px; font-size: 12.5px; }
}
@media (max-height: 460px) {
  .panel { max-width: 620px; padding: 11px 13px 13px; }
  h1 { font-size: clamp(20px, 5vw, 30px); }
  .how { margin: 7px 0 6px; font-size: 11.5px; line-height: 1.32; }
  .fleet { font-size: 11px; margin-bottom: 8px; }
  .fleet td { padding: 1px 4px; }
  .sub { font-size: 11.5px; }
  button.big { padding: 10px 14px; font-size: 14px; }
  #fireBtn { width: 66px; height: 66px; }
  #fireBtn .cap { font-size: 9.5px; }
  .bigscore { font-size: clamp(30px, 9vh, 46px); }
}
@media (max-height: 380px) {
  .fleet { display: none; }
}

/* pause: a light plate over the frozen scene, the screen is not covered */
.badge {
  position: fixed; inset: 0; z-index: 9;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.badge.hidden { display: none; }
.badge .pill {
  background: rgba(4, 22, 36, .78);
  border: 1px solid rgba(150, 215, 240, .3);
  border-radius: 14px;
  padding: 10px 18px 12px;
  text-align: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .45);
}
.badge .pill b {
  display: block;
  font-size: clamp(20px, 5.4vw, 30px); font-weight: 900; letter-spacing: .1em;
  color: #ffe07a; text-shadow: 0 2px 0 #7a4a12;
}
.badge .pill span {
  display: block; margin-top: 3px;
  font-size: clamp(10.5px, 2.6vw, 13px); color: #b8d6e6;
}

/* the view toggle in pause: the only button inside the plate, so taps are
   given back to it while the whole plate still does not need them */
.badge .pill .tgl {
  pointer-events: auto;
  display: inline-block; margin-top: 10px;
  padding: 7px 14px; border-radius: 9px;
  border: 1px solid rgba(150, 215, 240, .45);
  background: rgba(10, 40, 60, .85);
  color: #dff0fb; font: inherit;
  font-size: clamp(11px, 2.8vw, 14px); font-weight: 700; letter-spacing: .05em;
  cursor: pointer;
}
.badge .pill .tgl.shopb {
  display: block; margin: 8px auto 0;
  border-color: rgba(255, 224, 122, .55);
  background: rgba(52, 40, 12, .85);
  color: #ffe07a;
}
.badge .pill .tgl.shopb b { display: inline; font-size: inherit; text-shadow: none; color: #fff2c4; }
.badge .pill .tgl.on {
  border-color: rgba(255, 217, 104, .7);
  background: rgba(60, 44, 10, .85);
  color: #ffe07a;
}

/* The convoy fleet list: a ship by cells for its decks, as in sea battle.
   The composition is exactly classic (1x4 decks, 2x3, 3x2, 4x1), and it shows
   this is sea battle, so the line is labelled and holds contrast: before it
   merged with the sky and read as a random plate. */
#roster {
  position: fixed;
  left: max(10px, env(safe-area-inset-left));
  top: calc(max(6px, env(safe-area-inset-top)) + 42px);
  display: none; align-items: center; gap: 7px;
  padding: 4px 8px; border-radius: 9px;
  background: rgba(3, 16, 26, .72);
  border: 1px solid rgba(140, 200, 225, .22);
  z-index: 5; pointer-events: none;
}
/* The top left stays clear: the fleet and rank are removed at the person's
   request, they duplicate the status line. The rule is zeroed, not deleted. */
body.playing #roster { display: none; }
#roster[hidden] { display: none; }
#roster .cap {
  flex: 0 0 auto;
  font-size: 9px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: #8fb8ca;
}
#roster .sh { position: relative; display: flex; gap: 2px; }
#roster .sh i {
  display: block; width: 8px; height: 8px; border-radius: 2px;
  background: linear-gradient(180deg, #eaf6fc, #9cc2d4);
  border: 1px solid rgba(6,22,34,.7);
  box-shadow: 0 1px 2px rgba(0,0,0,.45);
}
#roster .sh.sunk i {
  background: rgba(255,255,255,.10);
  border-color: rgba(160,215,235,.22);
  box-shadow: none;
}
#roster .sh.sunk::after {
  content: ''; position: absolute; left: -1px; right: -1px; top: 50%;
  height: 2px; margin-top: -1px; border-radius: 1px;
  background: #e0563c;
}
@media (max-width: 430px) {
  #roster { top: calc(max(6px, env(safe-area-inset-top)) + 38px); gap: 6px; }
  #roster .sh i { width: 7px; height: 7px; }
}
@media (max-width: 360px) {
  #roster { left: max(7px, env(safe-area-inset-left)); gap: 5px; }
  #roster .sh i { width: 6px; height: 6px; border-radius: 1.5px; }
}
/* A narrow line: twenty cells and the label no longer fit together, and the
   cells matter most, so the word goes first. Measured at 320px and 280px. */
@media (max-width: 380px) {
  #roster .cap { display: none; }
}

/* The award plate now sits in the very corner, and on a narrow screen its
   left edge reaches the convoy fleet. So on a narrow but not low screen the
   fleet and rank go lower: the card comes for a few seconds while those two
   lines stand all the time and must not be covered. On a low screen (phone on
   its side) the width is over 520px, the card does not reach them, and there is
   nothing to shift. */
@media (max-width: 520px) and (min-height: 461px) {
  #roster { top: calc(max(6px, env(safe-area-inset-top)) + 106px); }
}
/* A very narrow screen: the caption in the card wraps to a third line and
   the card grows. Measured at 280px: 61px against 53px, so here the fleet and
   rank go another 14px lower. */
@media (max-width: 300px) and (min-height: 461px) {
  #roster { top: calc(max(6px, env(safe-area-inset-top)) + 120px); }
}

/* rank: a short plate with a bar to the next */
#rank {
  position: fixed;
  left: max(10px, env(safe-area-inset-left));
  top: calc(max(6px, env(safe-area-inset-top)) + 64px);
  display: none; align-items: center; gap: 7px;
  padding: 3px 9px 4px; border-radius: 9px;
  background: rgba(4, 20, 32, .45);
  font-size: 10px; letter-spacing: .05em; color: #cfe8f3;
  z-index: 5; pointer-events: none;
}
/* The rank is removed from the water with the fleet: the same request, the same duplicate. */
body.playing #rank { display: none; }
#rank[hidden] { display: none; }
#rank .bar {
  display: block; width: 66px; height: 4px; border-radius: 2px;
  background: rgba(255, 255, 255, .16); overflow: hidden;
}
#rank .bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #6ef0a8, #ffe07a);
  transition: width .25s;
}
#rank .bar.full i { background: #ffe07a; }

/* boons in play: on the right under the buttons so as not to argue with the convoy list */
/* The right column: the award plate on top, boons in play under it. An award
   comes here, to the corner, not the middle of the frame: in the middle it
   covered the aim and the ships. The column is a plain flex, so the boons rise
   by themselves when the plate is gone, and no height needs measuring. */
#rail {
  position: fixed;
  right: calc(max(10px, env(safe-area-inset-right)) + var(--rail));
  top: calc(max(6px, env(safe-area-inset-top)) + 46px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  z-index: 8; pointer-events: none;
  max-width: min(62vw, 240px);
}
/* The score plate: first in the right corner, the award and boons stand
   under it. Pressed to the edge and rounded only on the left, like the award
   card and the point lines, so the whole corner reads as one column, not three
   captions. */
#tally {
  display: none; align-items: baseline; gap: 6px;
  margin-right: calc(-1 * max(0px, 10px - env(safe-area-inset-right, 0px)));
  padding: 3px 10px 4px 9px; border-radius: 11px 0 0 11px;
  background: linear-gradient(180deg, rgba(7, 34, 50, .88), rgba(4, 22, 34, .92));
  border: 1px solid rgba(255, 224, 122, .38); border-right: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
  white-space: nowrap;
}
/* The plates are removed at the person's request: the upper right of the
   water stays clear. The rule is left and zeroed, not deleted, so the display
   can be returned with one value. */
body.playing #tally { display: none; }
#tally[hidden] { display: none; }
/* The award card comes to the same corner and must sit in the corner itself,
   as the person asked. While it is on screen the score plate gives way to it:
   that way nothing shifts and the fleet and rank on the left keep their
   insets. */
#award:not(.hidden) + #tally { display: none; }
#tally .k {
  font-size: 8.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #8fb8ca;
}
#tally b {
  font-size: 17px; font-weight: 900; color: #ffe07a;
  font-variant-numeric: tabular-nums; line-height: 1;
}
#tally i {
  font-style: normal; font-size: 9px; font-weight: 700; color: #7fa8bd;
  letter-spacing: .04em;
}
#tally i em { font-style: normal; color: #cfe8f3; font-variant-numeric: tabular-nums; }
/* narrow phone: the bank goes, the score stays */
@media (max-width: 400px) {
  #tally i { display: none; }
}
@media (max-width: 320px) {
  #tally { padding: 2px 8px 3px 7px; }
  #tally b { font-size: 15px; }
}

#boons {
  display: none; flex-direction: column; align-items: flex-end; gap: 4px;
}
body.playing #boons { display: flex; }
#boons i {
  display: flex; align-items: center; gap: 5px;
  padding: 2px 7px 3px; border-radius: 8px;
  background: rgba(4, 20, 32, .5);
  border: 1px solid currentColor;
  font-size: 9px; letter-spacing: .06em; font-weight: 700; font-style: normal;
  text-transform: uppercase;
}
#boons i b { font-size: 11px; color: #eef7fc; font-variant-numeric: tabular-nums; }
#boons i.low { animation: boonlow .5s steps(2, end) infinite; }
@keyframes boonlow { 50% { opacity: .35; } }

/* Lines of what was earned: points for a ship, a hit, a boon collected. They
   go into the same right column, not as text at the ship's place in the middle
   of the water: the user asked to take the award notice to the corner because
   in the middle it gets in the way during battle. They grow down from the
   plates, so nothing above them jerks, and each lives about a second and a
   half. */
#feed {
  display: none; flex-direction: column; align-items: flex-end; gap: 3px;
  margin-top: 2px;
}
body.playing #feed { display: none; }
#feed[hidden] { display: none; }
#feed span {
  /* The line is pressed to the very right edge and rounded only on the left:
     it reads as having slid in from the edge, not as a caption hanging in the
     frame. A negative margin removes the same 10px the column is moved by; if
     the phone has a notch, safe-area leaves an allowance. */
  display: block; padding: 2px 9px 3px 8px;
  margin-right: calc(-1 * max(0px, 10px - env(safe-area-inset-right, 0px)));
  border-radius: 9px 0 0 9px;
  background: rgba(4, 20, 32, .62);
  border: 1px solid rgba(255, 224, 122, .38); border-right: none;
  color: #ffe07a;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
  white-space: nowrap;
  animation: feedin .16s ease-out both;
  transition: opacity .32s, transform .32s;
}
#feed span em {
  font-style: normal; font-weight: 700; font-size: 9.5px;
  letter-spacing: .05em; text-transform: uppercase;
  color: #bcdcea; margin-left: 5px;
}
#feed span.out { opacity: 0; transform: translateX(14px); }
@keyframes feedin { from { opacity: 0; transform: translateX(16px); } }
@media (max-width: 360px) {
  #feed span { font-size: 11px; padding: 1px 7px 2px; }
  #feed span em { font-size: 9px; margin-left: 4px; }
}
/* Phone on its side: the column is tight by height, and the full set (plate,
   boons, lines) reached the fire button. The boons lie in one row there, and we
   keep the last two lines: the fresh one is always visible while the column
   ends above the button. */
@media (max-height: 460px) {
  #boons { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
  #feed span:nth-last-child(n+3) { display: none; }
}
@media (max-height: 340px) {
  #feed span:nth-last-child(n+2) { display: none; }
}

/* weapons aboard: torpedo stock and everything the boat is firing right now.
   It sits at the bottom left: the top line is narrow, while here there is room
   and the figure shows without looking away from the aim. Taps pass through the
   plate. */
#arsenal {
  position: fixed;
  left: max(10px, env(safe-area-inset-left));
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + var(--dock));
  display: none; flex-direction: column; align-items: flex-start; gap: 3px;
  z-index: 5; pointer-events: none;
  max-width: 46vw;
}
/* The plate is removed whole at the person's request: the bottom left is
   empty. The rule is zeroed, not deleted. */
body.playing #arsenal { display: none; }
#arsenal[hidden] { display: none; }
#arsenal .ar {
  display: flex; align-items: center; gap: 5px;
  padding: 2px 7px 3px; border-radius: 8px;
  background: rgba(4, 20, 32, .52);
  border: 1px solid rgba(150, 215, 240, .3);
  color: #a7c8da;
  font-size: 9px; letter-spacing: .06em; font-weight: 700;
  text-transform: uppercase; white-space: nowrap;
}
#arsenal .ar b {
  font-size: 14px; font-weight: 900; color: #eef7fc;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
#arsenal .ar em {
  font-style: normal; font-size: 9px; font-weight: 700; color: #7fa8bd;
  text-transform: none; letter-spacing: .02em;
}
/* stock: the same rule as in the top line so the figures do not disagree */
#arsenal .ar.torp b { font-size: 17px; color: #ffe07a; }
#arsenal .ar.torp.half b { color: #ffc46b; }
#arsenal .ar.torp.low { border-color: rgba(255, 120, 96, .8); }
#arsenal .ar.torp.low b { color: #ff8a72; }
/* tubes: the one ready to take a torpedo is lit */
#arsenal .pips { display: flex; gap: 2px; }
#arsenal .pips i {
  width: 7px; height: 11px; border-radius: 2px;
  background: rgba(160, 205, 225, .22);
  border: 1px solid rgba(160, 205, 225, .45);
}
#arsenal .pips i.on { background: #9fe8ff; border-color: #cdf3ff; }
#arsenal .ar.on { border-color: rgba(255, 217, 104, .6); color: #ffd968; }
/* shop bank: the same gold as the counter prices so the link reads */
/* Shop, the only button on this plate: the other lines only display. A finger
   is bigger than the 18px line, so it has its own height allowance, a brighter
   frame and a chevron on the right so it is taken for a button at all. */
#arsenal .ar.cash {
  border-color: rgba(255, 224, 122, .45);
  pointer-events: auto; cursor: pointer;
  font-family: inherit; color: #a7c8da;
  min-height: 30px; padding: 4px 9px 5px 8px;
  -webkit-tap-highlight-color: transparent;
}
#arsenal .ar.cash b { font-size: 12px; color: #ffe07a; }
#arsenal .ar.cash em { color: #ffd968; }
#arsenal .ar.cash em::after { content: ' \203A'; font-weight: 900; }
#arsenal .ar.cash:hover, #arsenal .ar.cash:focus-visible {
  border-color: rgba(255, 224, 122, .9);
  background: rgba(10, 40, 58, .72);
  outline: none;
}
#arsenal .ar.cash:active { transform: translateY(1px); }
#arsenal .ar.on b { color: #ffe9a8; }

@media (max-width: 360px) {
  #arsenal .ar { font-size: 8px; padding: 1px 5px 2px; gap: 4px; }
  #arsenal .ar b { font-size: 12px; }
  #arsenal .ar.torp b { font-size: 15px; }
  #arsenal .pips i { width: 6px; height: 9px; }
}
@media (max-height: 420px) {
  /* little height on its side: the plates get denser but stay readable */
  #arsenal { gap: 2px; }
  #arsenal .ar { padding: 1px 6px 2px; }
}

/* gear on the title screen */
.gear { margin: 10px 0 4px; text-align: left; }
.grow { margin: 7px 0; }
.grow .gt {
  display: block; margin-bottom: 3px;
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: #8fb8ca;
}
.grow .chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 5px; }
.chip {
  display: block; text-align: left; cursor: pointer;
  padding: 5px 7px 6px; border-radius: 9px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(160, 215, 235, .28);
  color: #dceaf2; font: inherit;
}
.chip .pv {
  display: block; width: 100%; height: 34px; margin-bottom: 3px;
  border-radius: 6px; background: rgba(3, 20, 32, .5);
}
.chip b { display: block; font-size: 12px; font-weight: 800; color: #e8f2f8; }
.chip i { display: block; font-size: 10px; font-style: normal; color: #9dc0d1; margin-top: 1px; }
.chip.on {
  background: linear-gradient(180deg, rgba(255, 224, 122, .22), rgba(240, 183, 63, .12));
  border-color: rgba(255, 224, 122, .7);
}
.chip.on b { color: #ffe07a; }
.chip.lock { opacity: .45; cursor: default; }
.chip.lock i { color: #7fa4b7; }
.gsum { margin-top: 7px; font-size: 11px; color: #9dc0d1; }
.gsum b { color: #ffe07a; }

/* ---------- shop ---------- */
/* The shop header: how many points are in the bank. It sits over the display
   because the price on a button reads only together with what is there. */
.shophd {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin: 10px 0 0; padding: 5px 9px 6px; border-radius: 10px;
  background: rgba(255, 224, 122, .10);
  border: 1px solid rgba(255, 224, 122, .38);
  text-align: left;
}
.shophd > b { font-size: 11px; letter-spacing: .12em; color: #ffe07a; }
.shophd > span { font-size: 11px; color: #cfe8f3; }
.shophd > span b { font-size: 13px; font-weight: 800; color: #ffe07a; }
.gear.shop { margin-top: 6px; }
/* a price on a button: what can be taken now glows, the rest is dimmed */
.chip .price {
  display: block; margin-top: 3px; font-style: normal; text-decoration: none;
  font-size: 10px; font-weight: 800; color: #ffd968;
}
.chip.buy {
  border-color: rgba(110, 240, 168, .6);
  background: rgba(110, 240, 168, .10);
}
.chip.buy .price { color: #8fffc0; }
.chip.lock .price { color: #8fb8ca; }

/* magazine tiers: taken one at a time, so each has pips and its own price */
.ups { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 5px; }
.up {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
  padding: 5px 8px 6px; border-radius: 9px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(160, 215, 235, .28);
  color: #dceaf2;
}
.up .un { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.up b { font-size: 12px; font-weight: 800; color: #e8f2f8; }
.up .pips { display: flex; gap: 3px; flex: 0 0 auto; }
.up .pips i {
  display: block; width: 8px; height: 8px; border-radius: 2px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(160, 215, 235, .3);
}
.up .pips i.on { background: #ffd968; border-color: rgba(255, 224, 122, .8); }
.up .ud { display: block; font-size: 10px; color: #9dc0d1; margin-top: 2px; line-height: 1.25; }
.up .uc { display: block; font-size: 10px; font-weight: 800; color: #ffd968; margin-top: 2px; }
.up.buy { border-color: rgba(110, 240, 168, .6); background: rgba(110, 240, 168, .10); }
.up.buy .uc { color: #8fffc0; }
.up.lock { opacity: .55; cursor: default; }
.up.lock .uc { color: #8fb8ca; }
.up.done { cursor: default; border-color: rgba(255, 224, 122, .55); }
.up.done .uc { color: #ffe07a; }
#bankOver { color: #ffe07a; }

/* The shop as a separate screen: it is opened from pause and from the panel
   between stages, so the display must fit a narrow window and scroll inside the
   screen, while the close button stays under the finger at the bottom. */
.panel.shopp { max-width: 500px; }
.panel.shopp .shophd { margin-top: 0; }
.panel.shopp .sub { margin-top: 7px; font-size: 11.5px; line-height: 1.35; }
.panel.shopp .foot { margin-top: 10px; }
/* In the shop from battle the shells come first: people come here to spend,
   and the magazine is what ends a run. On the title screen the order is the
   reverse, there the boat is chosen first. */
#shopScr .gear.shop { display: flex; flex-direction: column; }
#shopScr .gear.shop .grow.ammo { order: -1; margin-top: 2px; }
@media (max-height: 460px) {
  .panel.shopp { padding: 11px 12px 12px; }
  .panel.shopp .sub { margin-top: 5px; font-size: 10.5px; }
  /* the panel insets are tight, so the button stand's overhang is too */
  .panel.shopp .foot { margin: 7px -12px -12px; padding: 7px 12px 10px; }
}
/* A very low screen: the caption under the button and the note go, the button
   is held no lower than 36px. The display scrolls, and it can be closed by
   key. */
@media (max-height: 340px) {
  .panel.shopp { padding: 8px 11px 10px; }
  .panel.shopp .shophd { padding: 3px 8px 4px; }
  .panel.shopp .sub { display: none; }
  .panel.shopp .foot .best { display: none; }
  .panel.shopp .foot { margin: 6px -11px -10px; padding: 6px 11px 8px; }
  .panel.shopp button.big { padding: 9px 12px; font-size: 12.5px; min-height: 36px; }
}

/* run result: what opened */
.opened { margin-top: 8px; font-size: 12px; line-height: 1.4; }
.opened .tot { color: #a8cfdf; }
.opened .tot b { color: #ffe07a; }
.opened .new {
  margin-top: 5px; padding: 6px 9px; border-radius: 9px;
  background: rgba(110, 240, 168, .12);
  border: 1px solid rgba(110, 240, 168, .45);
  color: #d8ffe9;
}
.opened .new b { color: #8fffc0; }
.opened .soon { margin-top: 5px; color: #9dc0d1; }

@media (max-width: 430px) {
  #rank { top: calc(max(6px, env(safe-area-inset-top)) + 58px); }
}
/* the same concession to the award card: the rank bar goes under the convoy fleet */
@media (max-width: 520px) and (min-height: 461px) {
  #rank { top: calc(max(6px, env(safe-area-inset-top)) + 128px); }
}
@media (max-width: 300px) and (min-height: 461px) {
  #rank { top: calc(max(6px, env(safe-area-inset-top)) + 142px); }
}
@media (max-width: 360px) {
  #rank { left: max(7px, env(safe-area-inset-left)); font-size: 9px; }
  #rank .bar { width: 52px; }
  .grow .chips { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .chip { padding: 4px 5px; border-radius: 8px; }
  .chip .pv { height: 26px; }
  .chip b { font-size: 11px; }
  .chip i { font-size: 9px; }
}
/* The narrowest screens (a folded phone is 280px wide): three cards in a row
   leave 70px each, and the name with the note wrap to five lines. In two rows
   each card gets the hundred pixels this grid was built for. */
@media (max-width: 300px) {
  .grow .chips { grid-template-columns: repeat(2, 1fr); }
}
@media (max-height: 620px) {
  .gear { margin: 0 0 7px; }
  .grow { margin: 5px 0; }
  .chip { padding: 4px 6px 5px; }
  .chip .pv { height: 26px; }
  .chip b { font-size: 11.5px; }
}

/* the rules and fleet are put under a collapsible heading: the title stays short */
.more { margin-top: 6px; text-align: left; }
.more > summary {
  cursor: pointer; list-style: none;
  padding: 8px 12px; border-radius: 10px; text-align: center;
  font-size: 12.5px; font-weight: 700; color: #cfe8f3;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(160, 215, 235, .28);
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: '  ▾'; color: #8fb8ca; }
.more[open] > summary::after { content: '  ▴'; }
.more[open] > summary { margin-bottom: 4px; }

/* phone on its side: gear squeezes so all three rows are in view */
@media (max-height: 460px) {
  .gear { margin: 0 0 4px; }
  .grow { margin: 4px 0; }
  .grow .gt { margin-bottom: 2px; font-size: 9px; }
  .chip { padding: 4px 6px 5px; }
  .chip .pv { height: 22px; margin-bottom: 2px; }
  .chip b { font-size: 11px; }
  .chip i { font-size: 9.5px; }
  .gsum { margin-top: 4px; font-size: 10.5px; }
  .more { margin-top: 4px; }
  .more > summary { padding: 6px 10px; font-size: 11.5px; }
}

/* the rank ladder: the same layout as the fleet table */
.fleet.ranks { margin-bottom: 10px; }
.fleet.ranks td:nth-child(2) { width: 3.4em; }
.fleet.ranks td:first-child { white-space: normal; }
/* the magazine ladder: a taken tier is light, a locked one dimmed */
.fleet.shells tr.off td { opacity: .58; }
.fleet.shells em { font-style: normal; color: #7ee0a8; font-weight: 700; font-size: .88em; }

/* very little height but a wide screen: gear in two columns, all four rows visible */
@media (max-height: 460px) and (min-width: 480px) {
  .gear { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .grow { margin: 3px 0; }
  .grow .chips { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .chip { padding: 3px 5px 4px; }
  .chip .pv { height: 20px; }
  .chip b { font-size: 10.5px; }
  .chip i { font-size: 9px; line-height: 1.25; }
}

/* ---------- the panel between stages ---------- */
/* Every three convoys is a stage and the boundary is visible: the battle
   stops, and the panel shows the result of the stage just cleared and what
   waits in the new area. */
.panel.act { max-width: 460px; }
.panel.act .mark {
  display: inline-block; margin-bottom: 4px; padding: 2px 8px 3px; border-radius: 7px;
  background: rgba(110, 240, 168, .16); border: 1px solid rgba(110, 240, 168, .5);
  font-size: 9.5px; font-weight: 800; letter-spacing: .14em; color: #8fffc0;
}
.panel.act h2 { color: #ffe07a; }
.actstats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px;
  margin: 8px 0 0; text-align: left;
}
.actstats span { font-size: 11.5px; color: #a8cfdf; }
.actstats span b { color: #e8f2f8; font-weight: 800; }
.actnext {
  margin-top: 9px; padding: 7px 10px 8px; border-radius: 10px; text-align: left;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(160, 215, 235, .28);
}
.actnext b { display: block; font-size: 12.5px; font-weight: 800; color: #9fe8ff; }
.actnext i {
  display: block; font-style: normal; font-size: 10.5px; color: #9dc0d1;
  line-height: 1.3; margin-top: 2px;
}
.actnext i.fix { color: #8fffc0; }
.actnext i.cash b { display: inline; }
.actnext i.cash { color: #cfe8f3; }
/* A short screen: under the next button there is also a shop line, and with
   the hint about Space the panel stopped fitting (measured: at 320x480 it was
   24px taller than the window, at 844x390 by 8px). The hint goes, the shop line
   is tightened: the panel is read between battles and not scrolled. */
@media (max-height: 560px) {
  .panel.act .foot .best { display: none; }
  .panel.act #actShopBtn { margin-top: 6px; padding: 7px 12px; font-size: 12px; }
}
@media (max-height: 460px) {
  .actstats { grid-template-columns: 1fr 1fr 1fr; margin-top: 5px; gap: 2px 8px; }
  .actstats span { font-size: 10.5px; }
  .actnext { margin-top: 6px; padding: 5px 9px 6px; }
  .actnext b { font-size: 11.5px; }
  .actnext i { font-size: 10px; }
}
/* Narrow and short at once: the stage result does not fit in one column
   (measured at 320x480: the panel was 30px taller than the window), so there it
   is two smaller columns. */
@media (max-height: 560px) and (max-width: 360px) {
  .panel.act .actstats { grid-template-columns: 1fr 1fr; gap: 1px 8px; }
  .panel.act .actstats span { font-size: 10px; }
}
@media (max-width: 360px) {
  .actstats { grid-template-columns: 1fr; }
  .ups { grid-template-columns: 1fr; }
}
/* A very low screen (measured at 600x280: the panel was 7px taller than the
   window). The top mark and the caption under the button go, the lines are
   tightened: the panel must fit whole, it is read between battles and not
   scrolled. */
@media (max-height: 340px) {
  .panel.act { padding: 9px 12px 10px; }
  .panel.act .mark { display: none; }
  .panel.act h2 { font-size: clamp(15px, 4.4vw, 20px); }
  .panel.act .sub { margin-top: 2px; font-size: 11px; }
  .panel.act .foot .best { display: none; }
  .actstats { margin-top: 4px; gap: 1px 8px; }
  .actstats span { font-size: 10px; }
  .actnext { margin-top: 5px; padding: 4px 8px 5px; }
  .actnext b { font-size: 11px; }
  .actnext i { font-size: 9.5px; line-height: 1.25; }
  /* the button stays under the finger: no lower than 36px, that is what holds it */
  .panel.act button.big { padding: 10px 12px; font-size: 13px; min-height: 36px; }
  .panel.act #actShopBtn { margin-top: 4px; padding: 5px 10px; font-size: 11px; }
}
/* A very flat slit (measured at 600x280: with the shop line the panel became
   20px taller than the window): the note about the new area, the button stand
   and the shop line itself are tightened. The button stays no lower than 36px,
   it is pressed with a finger. */
@media (max-height: 300px) {
  .panel.act { padding: 7px 11px 8px; }
  .panel.act h2 { font-size: clamp(14px, 4vw, 18px); }
  .panel.act .actstats { margin-top: 3px; }
  .panel.act .actnext { margin-top: 4px; padding: 3px 8px 4px; }
  .panel.act .actnext b { font-size: 10.5px; }
  .panel.act .actnext i { font-size: 9px; line-height: 1.15; }
  .panel.act .foot { margin: 0 -11px -8px; padding: 5px 11px 7px; }
  .panel.act #actShopBtn { margin-top: 2px; padding: 4px 10px; }
}

/* ---------- awards: medals and orders ---------- */
/* the plate in battle: comes from above, fades by itself, does not cover the game */
#award {
  /* The very corner, not a band across the frame: the card is narrow and hangs
     at the right edge, just under the button line, so the aim, the ships and the
     water under it stay visible. Before, a 36px inset moved it down so it would
     not lie on the convoy fleet and the rank bar on the left; the person asked
     to raise the plate into the corner, so there is no inset, and the fleet and
     rank went down instead (lower in this file). The boons stand under the card
     with no inset and, when it is gone, stay in place. */
  margin-top: 0;
  /* Pressed to the very edge and rounded only on the left, like the point
     lines: the card reads as having slid in from the right edge, not as a
     caption hanging in the frame. */
  margin-right: calc(-1 * max(0px, 10px - env(safe-area-inset-right, 0px)));
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px 7px 8px; border-radius: 13px 0 0 13px;
  background: linear-gradient(180deg, rgba(9,44,64,.94), rgba(5,26,40,.96));
  border: 1px solid rgba(255,224,122,.55); border-right: none;
  box-shadow: 0 10px 28px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none;
  /* slides out of its corner, does not fall from above in the middle */
  transform: translateX(18px);
  transition: opacity .3s, transform .3s;
  max-width: min(58vw, 212px);
}
#award.show { opacity: 1; transform: translateX(0); }
#award.hidden { display: none; }
#award canvas { width: 34px; height: 44px; flex: 0 0 auto; }
#award .txt { text-align: left; min-width: 0; }
#award .k {
  display: block; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  color: #8fb8ca;
}
#award b {
  display: block; font-size: 12.5px; font-weight: 800; color: #ffe07a; line-height: 1.15;
  overflow-wrap: break-word;
}
#award i {
  display: block; font-style: normal; font-size: 10px; color: #a8cfdf; line-height: 1.2;
  margin-top: 1px; overflow-wrap: break-word;
}
/* a rank comes in the same card to the same corner, only with a green stripe */
#award.rk { border-color: rgba(110,240,168,.5); }
#award.rk b { color: #9ff5c4; }

/* the award rack on the title and the award row in the results */
.case { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; margin-top: 4px; }
.mtile { text-align: center; padding: 4px 3px 6px; border-radius: 9px; background: rgba(255,255,255,.05); }
.mtile canvas { display: block; width: 52px; height: 64px; margin: 0 auto 2px; }
.mtile b { display: block; font-size: 10.5px; font-weight: 800; color: #ffe07a; line-height: 1.2; }
.mtile i { display: block; font-style: normal; font-size: 9.5px; color: #9dc0d1; line-height: 1.25; margin-top: 1px; }
.mtile.dim { background: rgba(255,255,255,.03); }
.mtile.dim b { color: #97aebb; }
.mtile.dim i { color: #7fa4b7; }

.medals { margin-top: 8px; }
.mnew {
  padding: 6px 8px; border-radius: 10px;
  background: rgba(255,224,122,.12); border: 1px solid rgba(255,224,122,.5);
}
.mnew .k {
  display: block; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #ffe07a; margin-bottom: 3px;
}
.mrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mrow .mtile { background: none; padding: 0; width: 82px; }
.mtot { margin-top: 6px; font-size: 11.5px; color: #9dc0d1; }
.mtot b { color: #ffe07a; }

@media (max-width: 360px) {
  .case { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .mtile canvas { width: 44px; height: 54px; }
  .mtile b { font-size: 10px; }
  .mtile i { font-size: 9px; }
  #award { max-width: 62vw; padding: 6px 9px 6px 7px; }
  #award canvas { width: 30px; height: 39px; }
  #award b { font-size: 11.5px; }
  #award i { font-size: 9.5px; }
}
/* Little height: the water stands close to the top, so the caption is removed
   from the card. The name remains, the card is half as tall and holds in the
   very corner, above the horizon. Each award's condition is written on the
   title anyway. */
@media (max-height: 520px) {
  #award i { display: none; }
}
@media (max-height: 460px) {
  #award { margin-top: 0; padding: 6px 10px 6px 7px; }
  #award canvas { width: 30px; height: 39px; }
  #award b { font-size: 11.5px; }
  #award i { font-size: 9.5px; }
  .mtile canvas { width: 44px; height: 54px; }
}

/* The narrowest screens (a folded phone is 280px wide): the fleet table came
   out 290px against a 218px panel, the points column was cut off, and it could
   only be reached by shifting the whole screen sideways. Five columns cannot be
   made readable in 218px, so below 380px each ship reads in two lines: name and
   points on top, the hull, count and habits below. Nothing is hidden and
   nothing goes past the edge. */
@media (max-width: 380px) {
  .more table.fleet:last-of-type { display: block; }
  .more table.fleet:last-of-type tbody { display: block; }
  .more table.fleet:last-of-type tr {
    display: grid; grid-template-columns: auto auto 1fr auto;
    grid-template-areas: "name name name pts" "hull qty hab hab";
    align-items: center; column-gap: 6px;
    padding: 4px 0; border-bottom: 1px solid rgba(140, 200, 225, .12);
  }
  .more table.fleet:last-of-type tr.hd { display: none; }
  .more table.fleet:last-of-type td { padding: 0; border: 0; }
  .more table.fleet:last-of-type td:nth-child(1) { grid-area: name; white-space: normal; }
  .more table.fleet:last-of-type td:nth-child(2) { grid-area: hull; }
  .more table.fleet:last-of-type td:nth-child(3) { grid-area: qty; width: auto; }
  .more table.fleet:last-of-type td:nth-child(4) { grid-area: hab; color: #9dc0d1; }
  .more table.fleet:last-of-type td:nth-child(5) { grid-area: pts; text-align: right; }
}
/* The same trouble with the magazine ladder: it has three columns, and at
   280px its row came out 256px against a 252px panel, with the "what it gives"
   column cut off on the last line. Below 380px it reads in two lines too: name
   and award count on top, the note below. The rank ladder was measured nearby
   and fits as it is (221px), so it is left alone. */
@media (max-width: 380px) {
  #shellsTbl { display: block; }
  #shellsTbl tbody { display: block; }
  #shellsTbl tr {
    display: grid; grid-template-columns: auto 1fr;
    grid-template-areas: "name num" "note note";
    align-items: center; column-gap: 6px;
    padding: 4px 0; border-bottom: 1px solid rgba(140, 200, 225, .12);
  }
  #shellsTbl tr.hd { display: none; }
  #shellsTbl td { padding: 0; border: 0; }
  #shellsTbl td:nth-child(1) { grid-area: name; white-space: normal; }
  #shellsTbl td:nth-child(2) { grid-area: num; text-align: right; }
  #shellsTbl td:nth-child(3) { grid-area: note; color: #9dc0d1; }
}