/* =====================================================================
   Toy Tanks: a painted toy box. Glossy blue boards with a yellow stencil
   name; inside, the play mat in its red rim (drawn on the canvas). The
   cards are toy-box labels: cream with a yellow border and a red button.
   ===================================================================== */

:root {
  --blue: #2457b0;
  --blue-hi: #3b73d1;
  --blue-deep: #143877;
  --navy: #0f2a5c;
  --yellow: #ffd23f;
  --yellow-deep: #d9a514;
  --red: #d63a2b;
  --red-deep: #8e2216;
  --cream: #fff8e8;
  --ink: #13284f;
  --ink-dim: #4a5a7a;
  --face: "Paytone One", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--face); color: var(--cream);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.16), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0 2px, rgba(255, 255, 255, 0.05) 2px 4px, transparent 4px 92px),
    linear-gradient(180deg, var(--blue-hi), var(--blue) 45%, var(--blue-deep));
  background-attachment: fixed;
  overflow: hidden;
  padding: 54px 8px 8px;
}
.nav-back-games {
  position: fixed; top: 12px; left: 12px; z-index: 50;
  font-family: var(--face); font-size: 15px; font-weight: 400;
  color: var(--ink); text-decoration: none;
  background: var(--yellow); border: 2px solid var(--blue-deep); border-radius: 8px;
  box-shadow: 0 3px 0 var(--blue-deep);
  padding: 6px 13px;
}

#box { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lid { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; }
.title {
  font-family: var(--face); font-weight: 400; font-size: 30px; line-height: 1.1; letter-spacing: 0.02em;
  color: var(--yellow); text-transform: uppercase;
  text-shadow: 0 3px 0 var(--red-deep), 0 5px 0 rgba(0, 0, 0, 0.25);
}
.hud { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
/* (off the menu's screen, the HUD keeps its room: nothing moves as a run starts) */
.hud[hidden] { visibility: hidden; }
/* the name always in the middle: the HUD on a row of its own under it, or,
   where there's room, beside it to the right */
@media (min-width: 1120px) and (hover: hover) {
  .lid { display: grid; grid-template-columns: 1fr auto 1fr; width: 100%; }
  .title { grid-column: 2; }
  .hud { grid-column: 3; justify-self: start; }
}
.chip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 28px;
  font-size: 14px; color: var(--ink); background: var(--cream);
  border: 2px solid var(--blue-deep); border-radius: 999px; padding: 2px 11px;
  box-shadow: 0 2px 0 var(--blue-deep);
}
.chip b { font-weight: 400; color: var(--red); font-size: 16px; font-variant-numeric: tabular-nums; }
.chip.lives { gap: 2px; padding: 2px 8px; }
.chip.lives:empty { display: none; }
.tk { display: block; }

#stage { position: relative; }
#arena { display: block; border-radius: 6px; box-shadow: 0 6px 0 var(--navy), 0 10px 22px rgba(0, 0, 0, 0.35); touch-action: none; }
body.run #arena { cursor: none; }
/* paused: the box's lid over the arena, so the battle can't be studied mid-shot */
body.paused #stage::after {
  content: ""; position: absolute; inset: 0; border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 46px),
    linear-gradient(180deg, var(--blue-hi), var(--blue-deep));
  border: 6px solid var(--red); box-shadow: inset 0 0 0 2px var(--red-deep);
}
/* the banner: placed by game.js (placeBanner) where it covers no tank, off
   the arena where the window has room; a card, or set closer in a strip */
#banner {
  position: fixed; left: 0; top: 0; z-index: 45;
  display: none; flex-direction: column; align-items: center; gap: 4px;
  min-width: min(300px, 80vw); padding: 12px 22px 14px; text-align: center;
  color: var(--ink); background: var(--cream); border: 4px solid var(--yellow); border-radius: 12px;
  box-shadow: 0 5px 0 var(--yellow-deep), 0 10px 20px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
#banner.show { display: flex; }
.title.under-banner { visibility: hidden; }
html.fx-on #banner.show { animation: drop-in 0.32s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes drop-in { from { transform: translateY(-24px) scale(0.88); opacity: 0; } to { transform: none; opacity: 1; } }
.b-title { font-size: 30px; line-height: 1.1; color: var(--red); }
.b-line { font-size: 17px; }
.b-kinds { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin-top: 2px; }
.b-kind { display: inline-flex; align-items: center; gap: 2px; font-size: 16px; }
.b-kind b { font-weight: 400; }
/* the strip: the same label set closer, its parts side by side, wrapping */
#banner.strip { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 10px; min-width: 0; padding: 3px 12px 4px; border-width: 3px; border-radius: 10px; box-shadow: 0 3px 0 var(--yellow-deep), 0 6px 14px rgba(0, 0, 0, 0.3); }
#banner.strip .b-title { font-size: 19px; line-height: 1.05; }
#banner.strip .b-line, #banner.strip .b-kind { font-size: 14px; line-height: 1.25; }
#banner.strip .b-kinds { margin-top: 0; gap: 0 8px; }
#banner.strip .b-kind .tk { width: 17px; height: 17px; }

/* ---- under the arena: the touch pad, and how to play ------------------------------ */
.foot { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.hint { max-width: 760px; font-size: 13px; line-height: 1.5; text-align: center; color: rgba(255, 248, 232, 0.9); }
.hint .gs-kbd { font-family: var(--face); font-weight: 400; }
/* (a stick's label hangs under it: the pad keeps room for it) */
#box { --stick: clamp(88px, 29vw, 116px); }
#pad { display: none; width: 100%; max-width: 520px; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 20px; }
@media (hover: none) { #pad { display: flex; } }
.stick {
  position: relative; flex: none; width: var(--stick); height: var(--stick); border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.18));
  border: 3px solid var(--blue-deep); box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.3);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.stick i {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%;
  background: var(--yellow); border: 3px solid var(--yellow-deep); box-shadow: 0 3px 0 var(--yellow-deep);
}
.stick.aim i { background: var(--red); border-color: var(--red-deep); box-shadow: 0 3px 0 var(--red-deep); }
.stick span { position: absolute; left: -10px; right: -10px; bottom: -20px; font-size: 12px; line-height: 16px; text-align: center; color: rgba(255, 248, 232, 0.85); pointer-events: none; }
.stick.held { border-color: var(--yellow); }
#mine-btn {
  flex: none; width: clamp(60px, 18vw, 72px); height: clamp(60px, 18vw, 72px); border-radius: 50%; font-family: var(--face); font-size: 16px;
  color: var(--ink); background: var(--yellow); border: 3px solid var(--yellow-deep); box-shadow: 0 4px 0 var(--yellow-deep);
  touch-action: manipulation;
}
#mine-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--yellow-deep); }
#mine-btn:disabled { opacity: 0.5; }
@media (hover: none) { .hint { font-size: 12px; } }

/* ---- the cards: toy-box labels ---------------------------------------------------- */
.panel { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 58px 14px 16px; overflow-y: auto; background: rgba(15, 42, 92, 0.45); }
.panel[hidden] { display: none; }
.panel > .card { margin: auto; }
.card {
  width: min(460px, 100%); text-align: center; color: var(--ink);
  background: var(--cream); border: 5px solid var(--yellow); border-radius: 16px;
  box-shadow: 0 6px 0 var(--yellow-deep), 0 14px 30px rgba(0, 0, 0, 0.35);
  padding: 16px 20px 18px;
}
.card h2 { font-weight: 400; font-size: 32px; line-height: 1.1; color: var(--red); text-shadow: 0 2px 0 rgba(142, 34, 22, 0.25); }
.card .how { margin: 10px 0 14px; font-family: var(--face); font-size: 15px; line-height: 1.45; color: var(--ink-dim); }
.card .how b { font-weight: 400; color: var(--ink); }
.seg { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.seg button {
  display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer;
  font-family: var(--face); color: var(--ink); background: #fff; border: 3px solid var(--blue); border-radius: 10px; padding: 7px 12px;
  box-shadow: 0 3px 0 var(--blue-deep);
}
.seg button[hidden] { display: none; }
.seg button b { font-weight: 400; font-size: 17px; }
.seg button small { font-size: 13px; color: var(--ink-dim); }
.seg button.on { color: var(--cream); background: var(--blue); border-color: var(--blue-deep); }
.seg button.on small { color: rgba(255, 248, 232, 0.85); }
/* the mission to start from: the one picked, then all hundred in a grid,
   ten to a row (five on a phone, in a box of its own that scrolls), the
   hand-made ones yellow; beside the rest on a wide screen */
.pick-row { display: flex; gap: 8px; margin-bottom: 12px; }
.pick { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.pick > .stage-read { flex: 1 1 auto; }
.pick[hidden] { display: none; }
/* the way to the tank guide: three of the tanks over its name, beside the
   mission picked (the whole row to itself with a mission of your own) */
.ghost.guide-btn {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 4px 10px; font-size: 14px; line-height: 1.15; border-radius: 10px;
}
.pick[hidden] + .ghost.guide-btn { flex: 1 1 auto; }
.guide-btn .gb-tanks { display: flex; gap: 2px; }
.guide-btn .gb-tanks .tk { width: 17px; height: 17px; }
.guide-btn .gb-label { white-space: nowrap; }
.guide-btn .gb-label .gs-kbd, .guide-btn .gb-label[data-gs-key]::after { font-family: var(--face); font-weight: 400; }
/* (the narrowest phones: the tanks stacked beside the name, on two lines,
   so the mission picked keeps its one line) */
@media (max-width: 340px) {
  #menu .pick .stage-read { padding-left: 6px; padding-right: 6px; }
  .ghost.guide-btn { flex-direction: row; gap: 5px; padding: 3px 6px; }
  .guide-btn .gb-tanks { flex-direction: column; gap: 1px; }
  .guide-btn .gb-tanks .tk { width: 14px; height: 14px; }
  .guide-btn .gb-label { white-space: normal; width: min-content; }
}
.stage-read {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-family: var(--face); color: var(--cream); background: var(--blue); border: 3px solid var(--blue-deep); border-radius: 10px; padding: 7px 10px;
}
.stage-read b { font-weight: 400; font-size: 17px; }
.stage-read small { font-size: 13px; color: rgba(255, 248, 232, 0.85); }
.missions { margin-bottom: 12px; }
.missions[hidden] { display: none; }
.missions-k { display: flex; align-items: center; justify-content: center; margin-bottom: 6px; font-weight: 400; font-size: 17px; line-height: 1.2; color: var(--ink); }
.missions-k .gs-kbd { font-family: var(--face); font-weight: 400; }
.mbox { position: relative; padding: 6px; margin: -6px; }   /* (room for the keys' ring, which a scrolling box would clip) */
.mgrid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; --gs-pick: var(--red); }
.mt {
  height: 32px; min-width: 0; padding: 0; cursor: pointer; font-family: var(--face); font-size: 14px; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--ink); background: #fff; border: 2px solid var(--blue); border-radius: 7px; box-shadow: 0 2px 0 var(--blue-deep);
  touch-action: manipulation;
}
.mt.fixed { background: var(--yellow); border-color: var(--yellow-deep); box-shadow: 0 2px 0 var(--yellow-deep); }
.mt.on { color: var(--cream); background: var(--blue); border-color: var(--blue-deep); box-shadow: 0 2px 0 var(--navy); }
.mt.fixed.on { border-color: var(--yellow); }
/* a mission cleared at least once: a tick in its top right corner, drawn
   (the same on every device), in the tile's own ink */
.mt { position: relative; }
.mt.done { padding-right: 7px; }   /* (its number a little to the left, clear of the tick) */
.mt.done::after, .mlegend .tick::after { content: ""; position: absolute; right: 3px; top: 2px; width: 3.5px; height: 7.5px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mt:active { transform: translateY(2px); box-shadow: none; }
.mlegend { margin-top: 8px; font-size: 13px; line-height: 1.3; color: var(--ink-dim); }
.mlegend .key { white-space: nowrap; margin-left: 8px; }   /* (the tick never parted from its word) */
.mlegend .tick { position: relative; display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; color: var(--ink); }
.mlegend .tick::after { right: 4px; top: 1px; }
.mlegend .swatch { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; border-radius: 4px; background: var(--yellow); border: 2px solid var(--yellow-deep); }
@media (min-width: 820px) {
  #menu .card.has-grid {
    width: min(800px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 396px; grid-template-rows: repeat(7, auto) 1fr;
    column-gap: 24px; align-items: start;
  }
  #menu .card.has-grid > * { grid-column: 1; }
  #menu .card.has-grid > .missions { grid-column: 2; grid-row: 1 / -1; margin-bottom: 0; }
}
.playbtn {
  width: 100%; cursor: pointer; font-family: var(--face); font-size: 22px; color: var(--cream);
  background: var(--red); border: 3px solid var(--red-deep); border-radius: 12px; padding: 9px 12px;
  box-shadow: 0 4px 0 var(--red-deep);
}
.playbtn:active, .seg button:active, .ghost:active { transform: translateY(3px); box-shadow: none; }
.ghost {
  cursor: pointer; font-family: var(--face); font-size: 17px; color: var(--blue-deep);
  background: #fff; border: 3px solid var(--blue); border-radius: 12px; padding: 8px 16px;
  box-shadow: 0 3px 0 var(--blue-deep);
}
.card .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.card .row .playbtn { width: auto; flex: 1 1 180px; }
.bests { margin-top: 10px; min-height: 18px; font-size: 14px; color: var(--ink-dim); }
.card .big { margin: 4px 0; font-size: 34px; color: var(--blue); }
.tally { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; min-height: 0; }
.tally:empty { display: none; }
.stats { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--ink-dim); }

@media (max-width: 520px) {
  body { padding-top: 52px; }
  .lid { gap: 4px 10px; }
  .title { font-size: 22px; }
  .hud { gap: 4px; }
  .chip { font-size: 12px; min-height: 24px; padding: 1px 7px; gap: 4px; }
  .chip b { font-size: 14px; }
  .chip.lives { padding: 1px 6px; }
  .chip.lives .tk { width: 15px; height: 15px; }
  .card { padding: 12px 14px 14px; }
  .card h2 { font-size: 26px; }
  .card .how { font-size: 14px; margin: 8px 0 10px; }
  .b-title { font-size: 22px; }
  .b-line, .b-kind { font-size: 14px; }
  #banner { padding: 8px 14px 10px; border-width: 3px; }
  /* (five to a row, big enough to tap, in a box that scrolls: as many rows
     in sight as leave the whole card on the screen (--fit, game.js), from
     two and a third on a short phone to four and a half on a tall one) */
  .mgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .mt { height: 36px; font-size: 15px; }
  .mbox { overflow-y: auto; overscroll-behavior: contain; min-height: 96px; max-height: min(194px, var(--fit, 194px)); }
}
@media (max-height: 600px) and (max-width: 520px) {
  .card .how { font-size: 13px; line-height: 1.35; }
  #menu .card .how { line-height: 1.3; }
  .seg button, .stage-read { padding: 5px 10px; }
  .playbtn { padding: 7px 10px; font-size: 20px; }
}
/* a phone short of room: the menu closer set and a little wider, Roll out
   and Build a mission side by side, so the whole card is on the screen */
@media (max-height: 700px) and (max-width: 520px) {
  #menu { padding: 54px 10px 10px; }
  #menu .card.has-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; padding: 8px 12px 12px; }
  #menu .card.has-grid > * { grid-column: 1 / -1; }
  #menu .card.has-grid > .playbtn { grid-column: 1; }
  #menu .card.has-grid > .more-row { grid-column: 2; margin-top: 0; }
  #menu .card h2 { font-size: 24px; }
  #menu .card .how { margin: 5px 0 7px; }
  #menu .pick-row, #menu .missions { margin-bottom: 8px; }
  #menu .stage-read { padding: 4px 10px; }
  #menu .bests { margin-top: 4px; }
}
/* the shortest phones (an SE's 568 px less the browser's bars, and less):
   closer still, so the card stays whole in the game's own lettering too */
@media (max-height: 600px) and (max-width: 520px) {
  #menu .card.has-grid { padding: 6px 12px 10px; }
  #menu .card .how { margin: 3px 0 5px; }
  #menu .pick-row, #menu .missions { margin-bottom: 6px; }
  #menu .missions-k { margin-bottom: 4px; }
  #menu .mlegend { margin-top: 5px; }
  #menu .stage-read { padding: 3px 10px; }
  #menu .bests { margin-top: 2px; }
}
/* a short, wider window (a phone on its side): the grid scrolls in its box */
@media (max-height: 520px) and (min-width: 521px) {
  .mbox { max-height: 160px; overflow-y: auto; overscroll-behavior: contain; }
}

/* ---- a touch screen on its side: the sticks either side of the arena --------------
   (left: the HUD over Drive; right: Mine over Aim & fire; the name up
   between the corner buttons) */
@media (hover: none) and (orientation: landscape) {
  body { padding-top: 50px; }
  #box {
    --stick: clamp(84px, 13vw, 108px);
    display: grid; justify-content: center; align-items: center; gap: 6px 14px;
    grid-template-columns: auto auto auto;
    grid-template-areas: "hud stage mine" "move stage aim" "hint hint hint";
  }
  .lid, .foot, #pad { display: contents; }
  .title { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); font-size: 21px; z-index: 40; }
  .hud { grid-area: hud; flex-direction: column; align-items: stretch; align-self: end; gap: 4px; }
  .chip { justify-content: center; white-space: nowrap; font-size: 12px; min-height: 22px; padding: 1px 8px; }
  .chip b { font-size: 13px; }
  .chip.lives .tk { width: 14px; height: 14px; }
  #stage { grid-area: stage; grid-row: 1 / 3; }
  #move-stick { grid-area: move; justify-self: center; align-self: start; margin-bottom: 18px; }
  #mine-btn { grid-area: mine; justify-self: center; align-self: end; }
  #aim-stick { grid-area: aim; justify-self: center; align-self: start; margin-bottom: 18px; }
  .hint { grid-area: hint; }
}

.gs-pause { background: rgba(15, 42, 92, 0.45); }

/* ---- the tank guide: a label card as tall as the window leaves (under the
   corner buttons), its list scrolling inside it where it has to; each tank
   on a scrap of the play mat in the box's red rim, two to a row where
   there's room ---------------------------------------------------------------------- */
#guide { z-index: 35; }
.guide-card {
  width: min(1240px, 100%); display: flex; flex-direction: column; max-height: calc(100vh - 74px);
  padding: 14px 16px 14px;
}
@supports (height: 100dvh) { .guide-card { max-height: calc(100dvh - 74px); } }
.guide-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 8px -6px 0; padding: 0 6px 4px; outline: none; }
.guide-note { margin-bottom: 8px; font-size: 14px; line-height: 1.35; color: var(--ink-dim); }
.tank-list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; text-align: left; }
@media (min-width: 700px) { .tank-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; } }
.tg {
  display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 6px 10px 6px 6px; background: #fff; border: 2px solid rgba(36, 87, 176, 0.3); border-radius: 10px;
}
.tg-art { display: block; width: 58px; height: 46px; border: 3px solid #c63a2c; border-radius: 6px; box-sizing: content-box; }
.tg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.tg-name { font-weight: 400; font-size: 17px; line-height: 1.2; color: var(--ink); }
.tg-from { font-size: 13px; color: var(--red); }
.tg-stats { font-size: 13px; line-height: 1.3; color: var(--blue-deep); }
.tg-way { margin-top: 1px; font-size: 13px; line-height: 1.3; color: var(--ink-dim); }
.guide-card .row { margin-top: 10px; }
.guide-card .row .playbtn { flex: 0 1 220px; padding: 6px 12px; font-size: 19px; }
.guide-card .playbtn .gs-kbd, .guide-card .playbtn[data-gs-key]::after { font-family: var(--face); font-weight: 400; }
/* a phone upright: each tank beside its name, what it carries and how it
   fights the whole width under them */
@media (max-width: 520px) {
  .tg { grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: "art head" "stats stats" "way way"; gap: 4px 10px; padding: 6px 8px; }
  .tg-text { display: contents; }
  .tg-art { grid-area: art; width: 46px; height: 36.5px; border-width: 2px; }
  .tg-head { grid-area: head; flex-direction: column; align-items: flex-start; }
  .tg-stats { grid-area: stats; }
  .tg-way { grid-area: way; margin-top: 0; }
}
/* a short, wide window (a phone on its side, a short laptop): closer set,
   Close up beside the heading so the list has the height */
@media (max-height: 620px) and (min-width: 521px) {
  .guide-card { position: relative; padding: 8px 12px 10px; }
  .guide-card h2 { font-size: 24px; line-height: 34px; }   /* (as tall as Close, so the list starts below it) */
  .guide-scroll { margin-top: 4px; }
  .guide-card .row { position: absolute; top: 8px; right: 12px; margin-top: 0; }
  .guide-card .row .playbtn { padding: 3px 14px; font-size: 17px; }
}

/* ---- on the menu: the way to the mission editor, and a mission of your own ---------- */
.more-row { display: flex; gap: 8px; margin-top: 8px; }
.more-row > * {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  text-align: center; text-decoration: none; font-size: 15px; line-height: 1.2; padding: 5px 10px; border-radius: 10px;
}
.more-row > [hidden] { display: none; }
.shared-box {
  display: flex; flex-direction: column; align-items: center; gap: 1px; margin-bottom: 12px;
  color: var(--cream); background: var(--blue); border: 3px solid var(--blue-deep); border-radius: 10px; padding: 7px 10px;
}
.shared-box[hidden] { display: none; }
.shared-box b { font-weight: 400; font-size: 17px; overflow-wrap: anywhere; }
.shared-box small { font-size: 13px; color: rgba(255, 248, 232, 0.85); }