/* Secret Sails network pages (lobby and game). The palette and faces of web/fc-ui-template.html, with a night
   chart for dark mode. Phones first: one column, the board the full width, controls of 44 px. */
:root{
  --paper:#e9dcc0;--paper-deep:#d6c39d;--card:#efe4cb;--card-edge:#c9b48f;--water:#9fb8b3;--ink:#2b2420;--ink-soft:#5a4d42;
  --rule:#8c7a60;--rule-soft:rgba(140,122,96,.35);--red-ink:#8e2a1f;--red-ink-hover:#a8382b;--on-red:#f3ead3;--harbor:#c9952a;
  --storm:#6c6a78;--closing:#9a8a92;--island:#a08f66;--capital:#c1b58c;--sail:#f3ead3;--cell-line:rgba(60,50,40,.35);
  --btn:#f6eedb;--btn-hover:#fffaf0;--field:#fbf6ea;--ok:#2f6b3a;--veil:rgba(40,30,20,.3);--shadow:rgba(40,25,10,.3);
  --black:"UnifrakturMaguntia","Pirata One",Georgia,serif;--display:"New Rocker",Georgia,serif;--display-track:-.035em;--caps:"IM Fell English SC",Georgia,serif;
  --serif:"EB Garamond",Georgia,serif;--glyph:"Alegreya Sans","Gill Sans",sans-serif;--rating:"Pirata One","Alegreya Sans","Gill Sans",sans-serif;
  /* headings and labels in New Rocker, never in capitals; a ship's rating, and a number standing alone in a label, in
     Pirata One (owner, 10 October 2026) */
  --numeral:"Pirata One","Alegreya Sans","Gill Sans",sans-serif;
  /* the paper's grain, drawn in code (art/make_paper.py), the top layer of the tan surfaces; none in the dark */
  --grain:url(/img/paper-grain.webp);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#1b1814;--paper-deep:#2a241d;--card:#25201a;--card-edge:#4a3f31;--water:#3b4a4c;--ink:#ece0c6;--ink-soft:#b3a487;
    --rule:#6b5c46;--rule-soft:rgba(160,140,110,.25);--red-ink:#e07b63;--red-ink-hover:#ec917b;--on-red:#1b1814;--harbor:#e0ac3e;
    --storm:#3b3944;--closing:#5e4c57;--island:#6a5c3f;--capital:#5d5640;--cell-line:rgba(0,0,0,.45);
    --halo:rgba(236,224,198,.85);
    --btn:#2f2922;--btn-hover:#3a3229;--field:#211d18;--ok:#7fc08a;--veil:rgba(0,0,0,.45);--shadow:rgba(0,0,0,.5);
    --grain:none;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:16px;line-height:1.4;-webkit-tap-highlight-color:transparent;
  background-image:var(--grain),radial-gradient(ellipse at 20% 0%,rgba(255,250,235,.45),transparent 55%),radial-gradient(ellipse at 80% 100%,rgba(120,90,50,.16),transparent 60%);background-repeat:repeat,no-repeat,no-repeat;min-height:100vh;min-height:100dvh}
html{background:var(--grain),var(--paper)}
@media (prefers-color-scheme:dark){ body{background-image:radial-gradient(ellipse at 20% 0%,rgba(224,172,62,.07),transparent 55%)} }
a{color:var(--red-ink)}
#app{max-width:1400px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 6px) calc(env(safe-area-inset-right) + 8px) calc(env(safe-area-inset-bottom) + 16px) calc(env(safe-area-inset-left) + 8px)}

/* ---------- header ---------- */
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:4px 2px 8px;border-bottom:1px solid var(--rule);margin-bottom:8px}
.brand{font-family:var(--black);font-weight:400;font-size:26px;line-height:1;color:var(--red-ink);text-decoration:none;margin:0}
h1.brand{font-size:clamp(34px,9vw,52px)}
.bar .tools{margin-left:auto;display:flex;gap:6px}
.status{flex-basis:100%;font-family:var(--caps);font-size:14px;letter-spacing:.05em;color:var(--ink-soft);min-height:20px}
.status b{font-family:var(--glyph);font-weight:800;color:var(--red-ink);font-size:16px;letter-spacing:0}
.status .stormnow{color:var(--red-ink)}
/* the status as a picture: the voyage, then small matched chips in the paper and ink of the page */
.status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.st-voyage{display:inline-flex;align-items:center;gap:9px;min-width:0}
.st-round{font-family:var(--caps);font-size:14px;letter-spacing:.05em;color:var(--ink-soft);white-space:nowrap}
.st-round .short{display:none}
.st-track{position:relative;display:block;width:clamp(130px,20vw,280px);height:9px;margin:6px 0 2px;border-radius:5px;overflow:visible;
  background-color:color-mix(in srgb,var(--paper-deep) 70%,var(--card));box-shadow:inset 0 0 0 1px var(--rule-soft);
  background-image:repeating-linear-gradient(90deg,transparent 0 calc(100% / var(--n) - 1px),color-mix(in srgb,var(--rule) 45%,transparent) calc(100% / var(--n) - 1px) calc(100% / var(--n)))}
/* the storm: the sea a stage darker after each ring closes */
.st-sea{position:absolute;top:0;bottom:0;border-radius:0 5px 5px 0}
.st-sea.s1{background:color-mix(in srgb,var(--water) 55%,transparent)}
.st-sea.s2{background:color-mix(in srgb,var(--water) 70%,var(--ink-soft) 30%)}
.st-sea.s3{background:color-mix(in srgb,var(--water) 45%,var(--ink) 55%)}
/* the rounds sailed, filled in over it */
.st-fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px 0 0 5px;background:color-mix(in srgb,var(--ink) 38%,transparent);transition:width .5s ease}
/* a ring over each storm round, filled once it has closed */
.st-storm{position:absolute;top:-7px;width:7px;height:7px;margin-left:-3.5px;border:1.4px solid var(--ink-soft);border-radius:50%;background:var(--paper)}
.st-storm::after{content:"";position:absolute;left:50%;top:6px;width:1px;height:10px;margin-left:-.5px;background:var(--ink-soft);opacity:.6}
.st-storm.past{background:var(--ink-soft)}
/* the handle on the round under way */
.st-thumb{position:absolute;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--red-ink);box-shadow:0 0 0 2px var(--paper),0 1px 4px var(--shadow);transition:left .5s ease}
.st-thumb.setup{background:var(--ink-soft)}
.st-chips{display:inline-flex;flex-wrap:wrap;gap:5px}
.st-chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border:1px solid var(--rule-soft);border-radius:999px;background:color-mix(in srgb,var(--btn) 70%,transparent);
  font-family:var(--caps);font-size:13px;letter-spacing:.04em;color:var(--ink);white-space:nowrap}
.st-chip .ic{font-size:15px;color:var(--ink-soft)}
.st-chip .st-arrow{transition:transform .3s ease}
.st-chip.stormnow{border-color:color-mix(in srgb,var(--red-ink) 45%,transparent);color:var(--red-ink)}
.st-chip.stormnow .ic{color:var(--red-ink)}
.st-chip.truce{border-color:color-mix(in srgb,var(--harbor) 55%,transparent);color:var(--harbor)}
.st-chip.truce .ic{color:var(--harbor)}
.st-chip.wind .st-arrow{color:var(--red-ink)}
.st-chip.ending .ic{color:var(--harbor)}
@media (max-width:599px){ .st-round .long{display:none} .st-round .short{display:inline} .st-track{width:min(42vw,170px)} }
@media (prefers-reduced-motion:reduce){ .st-chip .st-arrow,.st-fill,.st-thumb{transition:none} }
.bar .sub#variantline{margin:0;font-size:14px}
button.icon{padding:6px 9px}
button.icon svg{display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
button.icon .spk{fill:currentColor}
#soundbtn .waves{display:none}
#soundbtn[aria-pressed=true] .waves{display:inline}
#soundbtn[aria-pressed=true] .mute{display:none}
#soundbtn[aria-pressed=true]{border-color:var(--harbor)}
#view3d[aria-pressed=true]{border-color:var(--harbor)}
#notifybtn[aria-pressed=true]{border-color:var(--harbor)}
#notifybtn[aria-pressed=true] .bell{fill:currentColor}
.notify-row{margin:10px 0 14px}
.notify-row h4{margin:0 0 4px}
.notify-row .qr svg{width:148px;height:148px;display:block;margin:8px 0}
.notify-row code{word-break:break-all}
/* a phone keeps the brand and the three header buttons on one line */
@media (max-width:430px){
  .bar{column-gap:8px} .bar .tools{gap:4px} .bar .brand{font-size:24px}
  .bar .tools button.small{padding:6px 8px} .bar .tools button.icon{padding:6px 7px}
}
.sub{margin:4px 0 0;font-style:italic;color:var(--ink-soft);flex-basis:100%}

/* ---------- controls ---------- */
button,select,input,.btn{font-family:var(--serif);font-size:16px;color:var(--ink);background:var(--btn);border:1px solid var(--rule);border-radius:6px;min-height:44px;padding:8px 14px;touch-action:manipulation}
button,.btn{cursor:pointer;line-height:1.1;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}
button:hover,.btn:hover{background:var(--btn-hover)}
button.primary,.btn.primary{background:var(--red-ink);color:var(--on-red);border-color:var(--red-ink);font-weight:600}
button.primary:hover,.btn.primary:hover{background:var(--red-ink-hover)}
button.ghost{background:transparent;border-color:transparent;text-decoration:underline;color:var(--ink-soft);padding:8px 6px}
/* beside a filled button, a quiet one is still a button, so the row is matched: an outline, not a link (owner) */
.dock button.ghost,.sheet .actions button.ghost{background:transparent;border-color:var(--rule);text-decoration:none;color:var(--ink);padding:8px 14px}
.dock button.ghost:hover,.sheet .actions button.ghost:hover{background:var(--btn-hover)}
button:disabled{opacity:.5;cursor:default}
button.small{min-height:40px;padding:6px 10px;font-size:15px}
select{padding-right:8px;max-width:100%;min-width:0;width:100%}
input[type=text],input:not([type]),input[type=url]{background:var(--grain),var(--field);cursor:text;width:100%}
input[type=checkbox]{width:24px;height:24px;min-height:0;margin:0;accent-color:var(--red-ink);flex:none}
:focus-visible{outline:3px solid var(--harbor);outline-offset:2px}
label{cursor:pointer}

/* ---------- cards ---------- */
.card{position:relative;background:var(--grain),var(--card);border:1px solid var(--card-edge);border-radius:8px;padding:10px 12px;margin:0 0 10px}
.card h2{font-family:var(--caps);font-weight:400;font-size:17px;letter-spacing:.08em;margin:0 0 8px;padding-bottom:4px;border-bottom:1px solid var(--rule-soft);display:flex;justify-content:space-between;align-items:baseline;gap:8px}
#reportcard h2 button{min-height:36px;font-family:var(--serif);letter-spacing:0;font-size:15px}
.card h2 .aside{font-family:var(--serif);font-style:italic;font-size:14px;letter-spacing:0;color:var(--ink-soft)}
.note{font-size:14.5px;font-style:italic;color:var(--ink-soft);margin:6px 0}
.err{color:var(--red-ink);font-weight:600;margin:6px 0}
.okmsg{color:var(--ok);margin:6px 0}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.row.end{justify-content:flex-end}
.grow{flex:1 1 auto}

/* ---------- lobby ---------- */
.lobby{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:900px){ .lobby{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start} #newcard{grid-row:span 2} #shipscard{grid-column:2}
  .lobbytabs{display:none !important} #lobby > .offtab{display:block !important} }
/* a wide lobby: the new game, my games and the ships side by side */
@media (min-width:1300px){ .lobby{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)} #newcard{grid-row:auto} #minecard{grid-column:2;grid-row:1} #shipscard{grid-column:3;grid-row:1} body:not(.game) #app{max-width:1560px} }
.field{display:grid;grid-template-columns:104px minmax(0,1fr);gap:8px;align-items:center;margin:8px 0}
.field > label,.field > .lbl{font-family:var(--caps);font-size:14px;letter-spacing:.06em;color:var(--ink-soft)}
.field.stack{grid-template-columns:minmax(0,1fr);gap:4px}
#endopts .note{margin:0 0 6px}
.check{display:flex;gap:10px;align-items:center;margin:10px 0;min-height:44px}
.check label{flex:1}
.seats{margin:10px 0 4px}
.seat{display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 10px;align-items:center;padding:8px 0;border-top:1px solid var(--rule-soft)}
.seat .emblem{grid-row:span 2;width:48px;height:52px;display:block}
.seat .who{font-size:15px}
.seat .who b{font-family:var(--display);font-weight:400;font-size:18px;color:var(--c);letter-spacing:var(--display-track)}
@media (prefers-color-scheme:dark){ .seat .who b,.fleet .fname{filter:brightness(1.6) saturate(.8)} }
.seat .pick{display:flex;flex-wrap:wrap;gap:6px}
.seat .pick{position:relative}
.seat .pick select,.seat .pickbtn{flex:1 1 170px;width:auto}
/* the seat picker: a button and its small menu */
.pickbtn{justify-content:flex-start;gap:8px;text-align:left}
.pickbtn .pn,.pickopt .pn{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickbtn .chev{transform:rotate(90deg);color:var(--ink-soft);font-size:14px}
.pips{display:inline-flex;gap:3px}
.pip{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--red-ink)}
.pip.on{background:var(--red-ink)}
.pickmenu{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;display:flex;flex-direction:column;padding:4px;background:var(--grain),var(--card);border:1px solid var(--card-edge);border-radius:8px;box-shadow:0 12px 28px -10px var(--shadow)}
.pickopt{justify-content:flex-start;gap:8px;border:0;background:transparent;text-align:left;border-radius:5px}
.pickopt[aria-checked=true]{background:var(--btn-hover);font-weight:600}
.pickopt .lv{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-soft)}
.pickopt.off{opacity:.45;cursor:not-allowed}
.seat .pick input{flex:1 1 140px;width:auto}
.games{list-style:none;margin:0;padding:0}
.games li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;align-items:center;padding:8px 0;border-top:1px solid var(--rule-soft)}
.games li:first-child{border-top:0}
.games a.open{font-family:var(--display);font-size:19px;text-decoration:none;color:var(--ink);min-height:40px;display:flex;align-items:center;letter-spacing:var(--display-track)}
.games .meta{grid-column:1;font-size:14px;color:var(--ink-soft)}
.games .due{color:var(--red-ink);font-weight:600}
.games .acts{grid-row:1 / span 2;grid-column:2;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
details.variants{margin:10px 0 4px;border-top:1px solid var(--rule-soft);padding-top:4px}
details.variants summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;font-family:var(--caps);font-size:15px;letter-spacing:.06em;color:var(--ink-soft)}
details.variants summary .aside{font-family:var(--serif);font-style:italic;font-size:14px;letter-spacing:0}
/* saved fleet layouts, in setup */
details.layouts{margin:10px 0 4px;border-top:1px solid var(--rule-soft);padding-top:4px}
details.layouts summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;font-family:var(--caps);font-size:15px;letter-spacing:.06em;color:var(--ink-soft)}
details.layouts summary .aside{font-family:var(--serif);font-style:italic;font-size:14px;letter-spacing:0}
.layoutlist{list-style:none;margin:4px 0 8px;padding:0;display:grid;gap:6px}
.layoutlist li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.layoutlist .ln{flex:1 1 140px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
details.layouts .row.save{display:flex;gap:8px;flex-wrap:wrap}
details.layouts .row.save input{flex:1 1 180px;width:auto}
.variant .note{margin:0 0 8px}
.variant.check{margin:6px 0}

/* ---------- game page layout ---------- */
.play{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
#stagewrap{position:relative}
#stage{position:relative;width:100%;aspect-ratio:var(--ar,1);overflow:auto;border-radius:6px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:var(--paper-deep)}
#stage.z1{overflow:hidden}
#board{display:block;width:calc(var(--zoom,1) * 100%);aspect-ratio:var(--ar,1);height:auto;touch-action:manipulation;user-select:none;-webkit-user-select:none}
/* the 3D table (fc-board3d.js) fills the chart's frame, on a studio sweep by day and lamplight by night; the flat
   chart stays under it, unseen, for screen readers */
.fc3d{position:absolute;inset:0;overflow:hidden;border-radius:inherit;user-select:none;-webkit-user-select:none;
  background:radial-gradient(ellipse 95% 85% at 50% 30%,#f2e8d3 0%,#e2d1ae 50%,#c7b089 100%)}
.fc3d canvas{display:block;width:100%;height:100%;touch-action:none;cursor:pointer}
.fc3d.still canvas{cursor:default;touch-action:auto}
.fc3d .fc3d-reset{position:absolute;top:8px;right:8px;min-height:34px;padding:3px 10px;font-size:14px;box-shadow:0 2px 8px var(--shadow)}
@media (prefers-color-scheme:dark){ .fc3d{background:radial-gradient(ellipse 95% 85% at 50% 30%,#3b3228 0%,#261f19 55%,#15120f 100%)} }
#stage.three #board,#tvstage.three #board{opacity:0;pointer-events:none}
/* a ship's rating and name over her on the 3D table (hover, or the ship in hand) */
.fc3d-tag{position:absolute;left:0;top:0;margin-top:-8px;pointer-events:none;display:flex;align-items:center;gap:7px;padding:4px 12px 4px 5px;border-radius:999px;
  background:var(--card);border:1px solid var(--card-edge);box-shadow:0 8px 18px -8px var(--shadow);color:var(--ink);white-space:nowrap;z-index:2}
.fc3d-tag::after{content:'';position:absolute;left:50%;bottom:-6px;width:10px;height:10px;margin-left:-5px;transform:rotate(45deg);background:var(--card);border-right:1px solid var(--card-edge);border-bottom:1px solid var(--card-edge)}
.fc3d-tag .nm{font-family:var(--display);font-size:18px;line-height:1;letter-spacing:var(--display-track)}
.fc3d-tag .unk{font-style:italic;font-size:14px;color:var(--ink-soft)}
.fc3d-tag .rc{min-width:24px;height:24px;font-size:16px}
/* a neutral port (three captains on the square chart): a dashed ring in a quiet ink, and the word */
#board .ring.neutral{stroke:var(--ink-soft);stroke-dasharray:.09 .06;stroke-opacity:.85}
#board .coord.neutral{font-style:italic;font-family:var(--serif);letter-spacing:.02em;opacity:.85}
/* the chart's compass rose (fc-board.js), as the wooden board's: north in red */
#board .rose{pointer-events:none}
#board .rose-ring{fill:none;stroke:var(--ink);stroke-opacity:.5}
#board .rose-dark{fill:var(--ink);fill-opacity:.6;stroke:var(--ink);stroke-opacity:.6;stroke-linejoin:round}
#board .rose-light{fill:var(--paper);fill-opacity:.65;stroke:var(--ink);stroke-opacity:.6;stroke-linejoin:round}
#board .rose-n{fill:var(--red-ink);stroke:var(--red-ink);stroke-linejoin:round}
#board .rose-n.light{fill:var(--paper);fill-opacity:.75}
#board .rose-t{fill:var(--red-ink);font-family:var(--caps);text-anchor:middle;dominant-baseline:central}
#stage.three{overflow:hidden}
/* the fleets as a compact strip: shown beside the orders on a wide screen */
.fstrip{display:none}
.fs{display:flex;align-items:center;gap:6px;min-width:0;padding:4px 8px;border:1px solid var(--rule-soft);border-left:5px solid var(--c);border-radius:6px;background:var(--btn);font-size:13.5px}
.fs.me{box-shadow:0 0 0 2px var(--harbor)}
.fs.out{opacity:.6;filter:grayscale(.75)}
.fs .fsn{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--display);font-size:15px;color:var(--c);letter-spacing:var(--display-track)}
.fs .score{font-family:var(--glyph);font-weight:800;font-size:15px;white-space:nowrap}
.fs .score small{font-weight:700;font-size:12px;color:var(--ink-soft)}
.fs .score.band{font-family:var(--caps);font-weight:400;font-size:12.5px;letter-spacing:.04em;color:var(--ink-soft)}
.fs .ic{font-size:15px;color:var(--ink-soft)}
@media (prefers-color-scheme:dark){ .fs .fsn{filter:brightness(1.6) saturate(.8)} }
@media (min-width:900px){
  /* A wide screen: the chart as large as the height allows on the left; beside it the orders, always in view, under
     a strip of the fleets; then the other panels under their tabs. The page itself does not scroll: a column does. */
  body.game{overflow:hidden}
  .game #app{max-width:none;height:100vh;height:100dvh;display:flex;flex-direction:column;padding-bottom:10px}
  .game .bar{flex:none}
  /* the panel about two thirds of its old width (owner, 9 October): the board column takes the rest. The flat chart
     stays its own shape, centred, as large as the height allows; the 3D table fills the whole column and height. */
  .play{--panel:clamp(280px,30vw,440px);flex:1 1 auto;min-height:0;grid-template-columns:minmax(0,1fr) var(--panel);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"board dock" "board side";gap:8px 14px;align-items:start}
  #stagewrap{grid-area:board;min-width:0}
  #stage{width:min(calc((100vh - var(--hdr,64px) - 30px) * var(--ar,1)),100%);width:min(calc((100dvh - var(--hdr,64px) - 30px) * var(--ar,1)),100%);margin-inline:auto;box-shadow:0 14px 30px -12px var(--shadow)}
  #stage.three{width:100%;aspect-ratio:auto;height:calc(100vh - var(--hdr,64px) - 30px);height:calc(100dvh - var(--hdr,64px) - 30px)}
  /* sleeker: tighter cards, quieter headings and rules */
  .game .card{padding:8px 10px;margin-bottom:8px;border-radius:7px}
  .game .card h2{font-size:15px;margin-bottom:6px;padding-bottom:3px}
  .game .fs{padding:3px 7px;font-size:13px}
  .game .fs .fsn{font-size:14px}
  .game .ev{padding:4px 4px;min-height:32px;font-size:13.5px}
  .game button.ev{min-height:34px;padding:4px}
  .game .olist li{font-size:14px;padding:3px 0}
  #dockcol{grid-area:dock;position:relative;max-height:54vh;max-height:54dvh;overflow-y:auto;padding:0 2px}
  #side{grid-area:side;position:relative;align-self:stretch;min-height:0;overflow-y:auto;padding:0 2px}
  .fstrip{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:5px;margin:0 0 8px}
  #dockcol > section.offtab:not([hidden]){display:block !important}
  #tabs button[data-tab=orders]{display:none}
}
@media (min-width:1500px){
  /* three columns: the orders column also holds the full fleet list (moved there by the page), so no Fleets tab */
  .play{grid-template-columns:minmax(0,1fr) clamp(280px,16vw,330px) clamp(280px,17vw,340px);grid-template-rows:minmax(0,1fr);grid-template-areas:"board dock side"}
  body.wide3 .fstrip,body.wide3 #tabs button[data-tab=fleets]{display:none}
  #dockcol{max-height:none;align-self:stretch;min-height:0}
}
.notice{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top) + 8px);z-index:60;background:var(--ink);color:var(--paper);padding:6px 14px;border-radius:20px;font-size:14px;box-shadow:0 4px 14px var(--shadow)}

/* ---------- the board ---------- */
#board .cell{fill:var(--water);stroke:var(--cell-line);stroke-width:.02}
#board .cell.anch{fill:color-mix(in srgb,var(--ac) 26%,var(--water))}
/* on a night chart an anchorage is a faint wash and a light border in its fleet's colour, so no fleet sits colour on
   colour */
@media (prefers-color-scheme:dark){ #board .cell.anch{fill:color-mix(in srgb,var(--ac) 10%,var(--water));stroke:color-mix(in srgb,var(--ac) 55%,#ece0c6);stroke-width:.05;stroke-opacity:.7} }
/* during setup, the cells of a wider setup zone (the wings) outside the anchorage: a lighter wash */
#board .cell.zone{fill:color-mix(in srgb,var(--ac) 13%,var(--water))}
@media (prefers-color-scheme:dark){ #board .cell.zone{fill:color-mix(in srgb,var(--ac) 6%,var(--water));stroke:color-mix(in srgb,var(--ac) 40%,#ece0c6);stroke-width:.03;stroke-opacity:.6} }
#board .cell.island{fill:var(--island);stroke:rgba(50,40,25,.7);stroke-width:.04}
#board .cell.capital{fill:var(--capital)}
#board .cell.storm{fill:var(--storm)}
/* The ring that closes after this round breathes dark, slowly; with reduced motion it is a still, darker shade. */
#board .cell.closing{fill:var(--closing);animation:fc-closing 2.4s ease-in-out infinite}
@keyframes fc-closing{0%,100%{fill:#9a8a92}50%{fill:#5b4a57}}
@keyframes fc-closing-night{0%,100%{fill:#5e4c57}50%{fill:#30232c}}
@media (prefers-color-scheme:dark){ #board .cell.closing{animation-name:fc-closing-night} }
@media (prefers-reduced-motion:reduce){ #board .cell.closing{animation:none;fill:#76656f} }
@media (prefers-reduced-motion:reduce) and (prefers-color-scheme:dark){ #board .cell.closing{fill:#3f313a} }
#board .ring{fill:none;stroke:var(--harbor);stroke-width:.07}
#board .ring.cap{stroke-width:.05}
#board .coord{fill:var(--ink-soft);font-family:var(--caps);text-anchor:middle;dominant-baseline:central}
#board .marks,#board .under{pointer-events:none}
#board .mk-sel{fill:none;stroke:var(--harbor)}
#board .mk-dot{fill:var(--harbor);stroke:var(--ink)}
#board .mk-attack{fill:none;stroke:var(--red-ink)}
#board .mk-spy{fill:none;stroke:var(--red-ink)}
#board .mk-follow{fill:none;stroke:var(--harbor)}
#board .mk-line{fill:none;stroke-linecap:round;stroke-linejoin:round}
#board .mk-wake{fill:none;stroke:var(--ink);stroke-opacity:.4;stroke-linecap:round}
#board .mk-fight{fill:var(--red-ink);stroke:var(--paper);opacity:.9}
#board .mk-warn{fill:var(--red-ink);stroke:var(--paper)}
#board .mk-warn-bang{stroke:var(--on-red);stroke-linecap:round}
#board .mk-warn-dot{fill:var(--on-red)}
#board .piece{cursor:pointer}
/* a ship in hand: lifted (larger and raised over a soft shadow) while selected, pressed down a little under a finger,
   eased; with reduced motion only the shadow shows */
#board .piece .lift{transform-box:fill-box;transform-origin:50% 60%;transition:transform .15s cubic-bezier(.2,.8,.3,1.2)}
#board .piece.lifted .lift{transform:translateY(-6%) scale(1.08)}
#board .piece.pressed .lift{transform:scale(.94);transition-duration:.08s}
#board .piece.lifted.pressed .lift{transform:translateY(-3%) scale(1.02)}
#board .piece .lift-shadow{opacity:0;transition:opacity .15s ease-out;pointer-events:none}
#board .piece.lifted .lift-shadow{opacity:1}
@media (prefers-reduced-motion:reduce){
  #board .piece .lift,#board .piece .lift-shadow{transition:none}
  #board .piece.lifted .lift,#board .piece.pressed .lift,#board .piece.lifted.pressed .lift{transform:none}
}
/* the ghost of an ordered ship: faint where she will be, brighter while she glides there */
#board .piece.ghost{opacity:.34;pointer-events:none;cursor:default}
#board .piece.ghost.gliding{opacity:.85}
#board .piece.dim{opacity:.55}
/* The ship tiles keep their printed colours on a night chart. --hull-ink, when a page sets it (art/ships.js hullInk: the
   Buccaneers), outlines what is painted in the fleet's colour; sails and spars keep --ink. */
.piece,.emblem{--ink:#2b2420;--sail:#f3ead3}
.piece .sky,.emblem .sky{stroke:var(--ink);stroke-width:.8;opacity:.14}.piece .horizon,.emblem .horizon{stroke:var(--ink);stroke-width:1;opacity:.3}.piece .farwave,.emblem .farwave{stroke:var(--ink);stroke-width:.9;opacity:.25;fill:none}
.piece .sea,.emblem .sea{fill:var(--c);stroke:var(--hull-ink,var(--ink));stroke-width:2.2;stroke-linejoin:round}.piece .wave,.emblem .wave{fill:none;stroke:var(--cb);stroke-width:1.5;opacity:.75}
.piece .hull,.emblem .hull{fill:var(--c);stroke:var(--hull-ink,var(--ink));stroke-width:2.4;stroke-linejoin:round}.piece .deck,.emblem .deck{fill:none;stroke:var(--cb);stroke-width:1.4;opacity:.85}
.piece .gunport,.emblem .gunport{fill:var(--sail);stroke:var(--ink);stroke-width:.6}.piece .sail,.emblem .sail{fill:var(--sail);stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}.piece .patch,.emblem .patch{fill:#d3c4a0;stroke:var(--ink);stroke-width:.6;stroke-linejoin:round}
.piece .seam,.emblem .seam{fill:none;stroke:var(--ink);stroke-width:.8;opacity:.35}.piece .spar,.emblem .spar{stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;fill:none}
.piece .shroud,.emblem .shroud{stroke:var(--ink);stroke-width:.7;opacity:.55;fill:none}.piece .pennant,.emblem .pennant{fill:var(--c);stroke:var(--hull-ink,var(--ink));stroke-width:.8}
.piece .batten,.emblem .batten{stroke:var(--ink);stroke-width:1.3;fill:none;opacity:.8}.piece .oar,.emblem .oar{stroke:var(--hull-ink,var(--ink));stroke-width:2;stroke-linecap:round}.piece .top,.emblem .top{fill:var(--c);stroke:var(--hull-ink,var(--ink));stroke-width:1.2;stroke-linejoin:round}.piece .band,.emblem .band{fill:var(--c);stroke:var(--hull-ink,var(--ink));stroke-width:2.2;stroke-linejoin:round}
.piece .flame{fill:#e0702a;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}.piece .flamecore{fill:#f8d36a;stroke:none}.piece .smoke{fill:#8f8a82;stroke:none;opacity:.78}.piece .ember{fill:#f3a340}
.piece .cabin{fill:var(--c);stroke:var(--hull-ink,var(--ink));stroke-width:2;stroke-linejoin:round}.piece .window{fill:var(--cb);stroke:var(--ink);stroke-width:.7}.piece .taffrail{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round}.piece .lantern{fill:var(--cb);stroke:var(--ink);stroke-width:.9}.piece .valance{fill:none;stroke:var(--ink);stroke-width:.9}.piece .canopy{fill:var(--cb);stroke:var(--ink);stroke-width:1.6}
.piece .field,.piece .ensign .field,.emblem .field{fill:var(--c);stroke:var(--hull-ink,var(--ink));stroke-width:1.2}.piece .charge,.emblem .charge{stroke:var(--cb);stroke-width:3;fill:none}.piece .chargefill,.emblem .chargefill{fill:var(--cb)}
.piece .glyph{font-family:var(--rating);font-weight:400;font-size:21.0px;fill:var(--cb);text-anchor:middle;dominant-baseline:central}
/* A pale halo around every ship on a night chart (dark mode and the party screen): the ship's main shapes drawn once
   more underneath, thick and pale, so the shape stands out from the water whatever the fleet's colour. Contrast only:
   the hidden ship's halo is the one silhouette, the same for every rank. */
.piece .halo{display:none}
#board .piece .halo *{fill:var(--halo);stroke:var(--halo);stroke-width:9;stroke-linejoin:round;stroke-linecap:round;opacity:1}
#board .piece .halo .sky,#board .piece .halo .horizon,#board .piece .halo .farwave,#board .piece .halo .wave,#board .piece .halo .deck,#board .piece .halo .seam,
#board .piece .halo .gunport,#board .piece .halo .shroud,#board .piece .halo .glyph,#board .piece .halo .window,#board .piece .halo .valance,#board .piece .halo .ember,
#board .piece .halo .flamecore,#board .piece .halo .charge,#board .piece .halo .chargefill,#board .piece .halo .batten,#board .piece .halo .lantern,#board .piece .halo .taffrail,#board .piece .halo .patch{display:none}
@media (prefers-color-scheme:dark){ #board .piece .halo{display:inline} }
/* an unwitnessed ship: one silhouette in the fleet's colour, outlined as the hull is */
.piece.fog .sail,.piece.fog .flame,.piece.fog .canopy,.piece.fog .gunport,.piece.fog .cabin,.piece.fog .smoke{fill:var(--c);stroke:var(--hull-ink,var(--ink))}
.piece.fog .deck,.piece.fog .glyph,.piece.fog .field,.piece.fog .charge,.piece.fog .chargefill,.piece.fog .batten,.piece.fog .seam,.piece.fog .wave,.piece.fog .flamecore,.piece.fog .ember,.piece.fog .window,.piece.fog .valance,.piece.fog .lantern{display:none}
.piece.fog .oar,.piece.fog .patch{display:none}

/* ---------- tabs ---------- */
/* On a phone: a bar fixed at the foot, icon over one word, a dot for something new; the chart shows on Orders only.
   On a wide screen: a strip above the panels, the chart stays large on the left. */
.tabs{display:flex;gap:2px}
.tabs button{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px;padding:6px 2px 5px;border:0;border-radius:0;background:transparent;color:var(--ink-soft);font-family:var(--caps);font-size:12.5px;letter-spacing:.03em;line-height:1}
.tabs button:hover{background:transparent;color:var(--ink)}
.tabs button .ic{font-size:23px}
.tabs button[aria-selected=true]{color:var(--red-ink)}
.tabs button[aria-selected=true]::before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;border-radius:0 0 3px 3px;background:var(--red-ink)}
.tabs .dot{position:absolute;top:7px;left:calc(50% + 7px);width:10px;height:10px;border-radius:50%;background:var(--red-ink);border:2px solid var(--card)}
.offtab{display:none !important}
@media (max-width:899px){
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--grain),var(--card);border-top:1px solid var(--card-edge);box-shadow:0 -6px 18px -12px var(--shadow);
    padding:0 calc(env(safe-area-inset-right) + 2px) env(safe-area-inset-bottom) calc(env(safe-area-inset-left) + 2px)}
  #app{padding-bottom:calc(env(safe-area-inset-bottom) + 70px)}
  #app:not([data-tab=orders]) #stagewrap{display:none}
  .dock{bottom:calc(env(safe-area-inset-bottom) + 55px);padding-bottom:10px}
}
@media (min-width:900px){
  .tabs{position:sticky;top:0;z-index:6;margin:0 0 10px;background:var(--grain),var(--card);border:1px solid var(--card-edge);border-radius:8px;overflow:hidden}
  .tabs button{min-height:50px;font-size:12.5px}
  .tabs button .ic{font-size:19px}
  .tabs button[aria-selected=true]{background:var(--btn)}
  .tabs button[aria-selected=true]::before{top:auto;bottom:0;left:12%;right:12%;border-radius:3px 3px 0 0}
  .tabs .dot{top:6px}
}

/* ---------- side panel ---------- */
#acttitle .count{font-family:var(--glyph);font-weight:800;color:var(--red-ink);font-size:16px}
.hint{margin:4px 0 8px;min-height:1.4em}
.warn{margin:4px 0 8px;padding:6px 10px;border-left:4px solid var(--red-ink);border-radius:0 4px 4px 0;background:color-mix(in srgb,var(--red-ink) 11%,transparent);font-size:15px}
.choice{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
.olist{list-style:none;margin:6px 0;padding:0}
.olist li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--rule-soft);font-size:15px}
.olist li:last-child{border-bottom:0}
.olist .who{font-family:var(--caps);font-size:13px;letter-spacing:.05em;color:var(--ink-soft);display:block}
.olist b{font-family:var(--glyph);font-weight:800;color:var(--red-ink)}
.dock{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center;margin:8px -12px -10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--grain),var(--card);border-top:1px solid var(--rule-soft);border-radius:0 0 8px 8px}
@media (min-width:900px){ .dock{padding-bottom:10px} }
.dock .primary{flex:1 1 auto;max-width:280px}
.waiting{margin:8px 0 0;font-size:15px}
.waiting.sent{color:var(--ok)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.chip{font-size:13.5px;border:1px solid var(--rule);border-radius:14px;padding:3px 10px;background:var(--btn)}
.chip.on{border-color:var(--ok);color:var(--ok)}
.fleets{display:grid;grid-template-columns:1fr;gap:6px}
@media (min-width:520px) and (max-width:899px){ .fleets{grid-template-columns:1fr 1fr} }
.fleet{border:1px solid var(--rule-soft);border-left:6px solid var(--c);border-radius:6px;padding:6px 10px;background:var(--btn);font-size:14.5px}
.fleet.me{box-shadow:0 0 0 2px var(--harbor)}
.fleet .top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.fleet .fname{font-family:var(--display);font-size:17px;color:var(--c);letter-spacing:var(--display-track)}
.fleet .score{font-family:var(--glyph);font-weight:800;font-size:19px;white-space:nowrap}
.fleet .score small{font-weight:700;font-size:13px;color:var(--ink-soft)}
.fleet .score.band{font-family:var(--caps);font-weight:400;font-size:14px;letter-spacing:.05em;color:var(--ink-soft)}
.fleet .meta{font-size:13.5px;color:var(--ink-soft);font-style:italic}
/* a captain who has left the board */
.fleet.out{opacity:.62;filter:grayscale(.75)}
.fleet .outw{font-style:normal;font-weight:600;color:var(--ink)}
.olist .behind{white-space:nowrap;color:var(--ink-soft);font-style:italic}
.olist .behind .ic{color:var(--harbor)}
.invite{padding:8px 0;border-top:1px solid var(--rule-soft)}
.invite:first-of-type{border-top:0}
.invite .who{font-weight:600}
.invite input{margin:6px 0;font-size:14px;font-family:ui-monospace,Menlo,Consolas,monospace}
.confirm{border:1px solid var(--red-ink);border-radius:6px;padding:8px 10px;margin:8px 0}
/* the party screen section of the Host tab */
.party{padding:2px 0 10px;margin:0 0 8px;border-bottom:1px solid var(--rule-soft)}
.party h3{font-family:var(--caps);font-weight:400;font-size:16px;letter-spacing:.06em;margin:4px 0 6px}
.partybig{font-size:17px;margin:6px 0 8px;padding:8px 10px;border-radius:8px;background:var(--btn);border:1px solid var(--harbor)}
.partybig b{display:block;font-family:var(--glyph);font-weight:800;font-size:clamp(22px,7vw,34px);letter-spacing:.02em;color:var(--red-ink);word-break:break-all}
#pcode{width:7.5em;flex:none;font-family:var(--glyph);font-weight:800;font-size:22px;letter-spacing:.3em;text-transform:uppercase}
details.partylink summary{cursor:pointer;min-height:40px;display:flex;align-items:center;font-family:var(--caps);font-size:15px;letter-spacing:.05em;color:var(--ink-soft)}
.partylink input{margin:4px 0;font-size:14px;font-family:ui-monospace,Menlo,Consolas,monospace}
.partyqr .qr{display:block;width:170px;height:auto;margin:8px 0;border-radius:6px}
details.log summary{cursor:pointer;min-height:40px;display:flex;align-items:center;gap:8px;font-family:var(--caps);font-size:17px;letter-spacing:.08em}
details.log summary .aside{margin-left:auto;font-family:var(--serif);font-style:italic;font-size:14px;letter-spacing:0;color:var(--ink-soft)}

/* ---------- icons and chips ---------- */
.ic{width:1em;height:1em;display:inline-block;vertical-align:-.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic .f{fill:currentColor;stroke:none}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* a rank chip: the glyph on the fleet's colour, like the band of a tile */
.rc{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 3px;border-radius:5px;background:var(--c);color:var(--cb);font-family:var(--glyph);font-weight:800;font-size:13px;line-height:1;border:1px solid rgba(20,15,10,.45);flex:none}
.rc.unk .ic{width:15px;height:15px}
/* loses: a hollow chip, struck through; marked chips keep room for their badge */
.rc.m-lose,.rc.m-captured{background:transparent;color:var(--ink-soft);border:1.5px solid var(--c)}
.rc.m-lose::after,.rc.m-captured::after{content:"";position:absolute;left:-3px;right:-3px;top:50%;height:2px;margin-top:-1px;background:var(--red-ink);transform:rotate(-32deg);border-radius:1px}
.rc.m-both,.rc.m-capture,.rc.m-captured{margin-right:5px}
.rc .mk{position:absolute;right:-7px;top:-7px;min-width:13px;height:13px;border-radius:7px;background:var(--paper);color:var(--ink);border:1px solid var(--rule);font-size:11px;line-height:11px;text-align:center}
.rc .ic.mk{width:14px;height:14px;padding:1px;color:var(--red-ink);stroke-width:2.6}
.pc{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:10px;background:var(--c);color:var(--cb);font-family:var(--glyph);font-weight:800;font-size:13px;line-height:1;border:1px solid rgba(20,15,10,.45);flex:none}
.ct{display:inline-flex;align-items:center;height:20px;padding:0 5px;border-radius:4px;border:1px solid var(--rule);font-family:var(--glyph);font-weight:700;font-size:12.5px;line-height:1;color:var(--ink-soft);background:var(--field);flex:none}
.iw{display:inline-flex;align-items:center;gap:4px}

/* ---------- losses ---------- */
.lossfleet{border-left:6px solid var(--c);padding:4px 0 6px 10px;margin:8px 0}
.lossfleet .top{display:flex;justify-content:space-between;gap:4px 10px;align-items:center;flex-wrap:wrap}
.lossfleet .fname{font-family:var(--display);font-size:17px;color:var(--c);letter-spacing:var(--display-track)}
.tally > span{display:inline-flex;gap:10px;font-family:var(--glyph);font-weight:700;font-size:13.5px;color:var(--ink-soft)}
.tally .ic{font-size:15px}
.losses{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px}
.losses li{display:flex;flex-direction:column;align-items:center;min-width:44px}
.losses svg.tile{width:42px;height:46px;display:block}
.losses .lmeta{display:inline-flex;align-items:center;gap:3px;font-family:var(--glyph);font-weight:700;font-size:12.5px;color:var(--ink-soft);height:17px}
.losses .lmeta .ic{font-size:13px}
.losses .lmeta .pc{height:16px;font-size:11px;padding:0 4px}

/* ---------- the ship legend ---------- */
.lkey{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px;color:var(--ink-soft);margin:4px 0 8px}
.lkey > span{display:inline-flex;align-items:center;gap:9px}
.legend{list-style:none;margin:0;padding:0}
.legend li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 8px;padding:7px 0;border-top:1px solid var(--rule-soft);align-items:center}
.legend li:first-child{border-top:0}
.legend li > svg{width:40px;height:44px;display:block}
.legend .lname{display:flex;gap:6px;align-items:baseline;font-family:var(--caps);font-size:14px;letter-spacing:.04em;color:var(--ink);line-height:1.1}
.legend .lcount{font-family:var(--glyph);font-weight:700;font-size:12px;color:var(--ink-soft)}
.legend .lrow{grid-column:1 / -1;display:flex;align-items:flex-start;gap:4px}
.legend .lk{width:82px;flex:none;height:20px;font-family:var(--caps);font-size:12px;letter-spacing:.02em;color:var(--ink-soft)}
.legend .lk .ic{font-size:15px;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px 7px}
.chips .grp{display:inline-flex;flex-wrap:wrap;gap:6px 4px}
.legend .rc{min-width:19px;height:19px}
.legend .never{font-style:italic;color:var(--ink-soft);font-size:13.5px;line-height:20px}
.badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.bdg{display:inline-flex;align-items:center;gap:4px;padding:1px 7px 1px 5px;border-radius:12px;border:1px solid var(--rule-soft);background:var(--btn);font-size:12.5px;line-height:1.3}
.bdg .ic{font-size:15px;color:var(--red-ink)}
.bdg .rc{height:17px;min-width:17px;font-size:11.5px}
.lgrid{display:none;border-collapse:collapse;margin:12px auto 4px}
.lgrid caption{font-family:var(--caps);font-size:12.5px;color:var(--ink-soft);padding-bottom:6px}
.lgrid th,.lgrid td{padding:3px 4px;text-align:center}
.lgrid tr + tr th,.lgrid tr + tr td{border-top:1px solid var(--rule-soft)}
.lgrid td.never{font-style:italic;color:var(--ink-soft);font-size:13px}
@media (min-width:900px){ .lgrid{display:table} }

/* ---------- the round in icons ---------- */
.evs{list-style:none;margin:2px 0 6px;padding:0}
.ev{display:flex;align-items:center;width:100%;gap:8px;padding:5px 6px;min-height:36px;border-bottom:1px solid var(--rule-soft);font-size:14px;color:var(--ink);text-align:left}
button.ev{min-height:38px;border:0;border-bottom:1px solid var(--rule-soft);border-radius:0;background:transparent;justify-content:flex-start;padding:5px 6px}
button.ev:hover{background:var(--btn-hover)}
.evv{display:flex;align-items:center;gap:8px;width:100%}
.ev .evi{font-size:21px;color:var(--red-ink)}
.ev .evb{display:inline-flex;align-items:center;flex-wrap:wrap;gap:7px 8px}
.ev .eva{font-size:13px;color:var(--ink-soft);margin:0 -3px}
.ev .evw{font-style:italic;color:var(--ink-soft)}
.ev .eye{font-size:17px;color:var(--ink-soft);margin-left:auto}
.ev.priv{background:color-mix(in srgb,var(--harbor) 10%,transparent)}

/* ---------- the replay, and a report row's cell ---------- */
#board .mk-flash{fill:none;stroke:var(--harbor);animation:fc-flash .6s ease-in-out 4 alternate}
@keyframes fc-flash{from{stroke-opacity:1}to{stroke-opacity:.2}}
@media (prefers-reduced-motion:reduce){ #board .mk-flash{animation:none} }
#board .rp-icon .ic{color:var(--red-ink);stroke-width:2.6}
#board .rp-icon .ic.halo{color:#f3ead3;stroke-width:6.5}
#board .rp-puff{fill:#f3ead3}
#board .rp-wave{fill:#2b2333;opacity:.92}
#board .rp-ring{fill:var(--storm)}
#board .rp-spy{fill:none;stroke:var(--red-ink)}
#board .rp-spy .ic{color:var(--ink);stroke-width:2.2}
#board .rp-chip text{font-family:var(--glyph);font-weight:800;text-anchor:middle;dominant-baseline:central}
#stage.replaying{cursor:pointer}
.logr{margin:8px 0 2px;font-family:var(--glyph);font-weight:800;color:var(--red-ink);font-size:14px}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.seg button{border:0;border-radius:0;min-height:40px}
.seg button[aria-pressed=true],.seg button[aria-checked=true]{background:var(--ink);color:var(--paper)}
.result-lead{font-family:var(--display);font-size:24px;color:var(--red-ink);margin:2px 0 6px;letter-spacing:var(--display-track)}

/* ---------- sheets ---------- */
.veil{position:fixed;inset:0;z-index:50;background:var(--veil);display:flex;align-items:flex-end;justify-content:center}
/* the report: a small sheet over a light veil; a tap outside it closes it */
.sheet{background:var(--grain),var(--paper);color:var(--ink);width:100%;max-width:600px;max-height:60vh;max-height:60dvh;overflow-y:auto;border-radius:14px 14px 0 0;padding:12px 14px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px var(--shadow);border-top:3px solid var(--red-ink)}
@media (min-width:700px){ .veil{align-items:center;padding:20px} .sheet{max-width:480px;max-height:75vh;border-radius:10px;border:2px solid var(--ink);padding:16px 20px} }
.sheet h3{font-family:var(--display);font-weight:400;margin:0 0 4px;font-size:22px;color:var(--red-ink);letter-spacing:var(--display-track)}
.sheet h4{font-family:var(--caps);font-weight:400;letter-spacing:.08em;font-size:15px;margin:12px 0 4px;color:var(--ink-soft)}
.sheet ul:not(.evs){margin:0;padding-left:20px}
.sheet ul:not(.evs) li{margin:4px 0}
.sheet .actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:8px;position:sticky;bottom:-12px;background:var(--grain),var(--paper);padding:6px 0}

/* ---------- hovertips ---------- */
.tip{position:fixed;z-index:80;max-width:min(300px,calc(100vw - 16px));padding:6px 10px;border-radius:6px;background:var(--ink);color:var(--paper);font-family:var(--serif);font-size:14px;line-height:1.3;box-shadow:0 6px 18px -6px var(--shadow);pointer-events:none}
[data-tip],[data-tipfn]{-webkit-touch-callout:none}
#board .marks .mk-warnb{pointer-events:auto;cursor:pointer}

/* ---------- Pirates! ---------- */
/* a fleet near black (the Buccaneers): chips edged in bone; on a dark page its name and marks take its second colour */
.rc.dk,.pc.dk{border-color:var(--cb)}
.rc.m-taken{margin-right:5px}

@media (prefers-color-scheme:dark){
  .fleet,.fs,.lossfleet{border-left-color:var(--cd,var(--c))}
  .fleet .fname,.fs .fsn,.lossfleet .fname,.seat .who b{color:var(--cd,var(--c))}
  .rc.m-lose,.rc.m-captured{border-color:var(--cd,var(--c))}
}
/* a prize on the chart: a black flag at her masthead; an hourglass while her crew comes aboard */
#board .piece .pmark circle{fill:var(--c);stroke:var(--cb);stroke-width:.035}
#board .piece .pmark .ic{color:var(--cb);stroke-width:2.6}
#board .piece .cmark circle{fill:var(--cb);stroke:var(--c);stroke-width:.035}
#board .piece .cmark .ic{color:var(--c);stroke-width:2.6}
@media (prefers-color-scheme:dark){ #board .piece .pmark circle{stroke:var(--halo)} }
/* the plunder against the target, under the status line */
.plunderbar{flex-basis:100%}
.plunder{display:flex;align-items:center;gap:6px 10px;font-size:14px;line-height:1.2}
.plunder .pl-who{display:inline-flex;align-items:center;gap:5px;font-family:var(--glyph);font-weight:800;white-space:nowrap;color:var(--ink)}
.plunder .pl-who .ic{font-size:17px}
.plunder .pl-bar{flex:1 1 60px;min-width:40px;max-width:260px;height:10px;border-radius:5px;background:var(--rule-soft);border:1px solid var(--c);overflow:hidden}
.plunder .pl-fill{display:block;height:100%;background:var(--c)}
.plunder .pl-ally{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;color:var(--ink-soft);font-style:italic}
@media (prefers-color-scheme:dark){ .plunder .pl-bar{border-color:var(--cd,var(--c))} .plunder .pl-fill{background:var(--cd,var(--c))} }
/* the fleets: the alliance as one side, then the pirate */
.fleets .side{display:flex;align-items:center;gap:6px;margin:6px 0 2px;font-family:var(--caps);letter-spacing:.05em;font-size:14px;color:var(--ink-soft)}
.fleets .side .sn{flex:1 1 auto}
.fleets .side .score{font-family:var(--glyph);font-weight:800;font-size:17px;letter-spacing:0;color:var(--ink)}
.fs.side{border-left-color:var(--rule);font-style:italic}
.fs.side .fsn{color:var(--ink-soft)}
/* the losses: a prize under the fleet she came from */
.losses li.taken .lmeta .ic{color:var(--ink)}
/* the legend's Pirates! rules */
.pirrules{margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--rule-soft)}
.pirrules h3{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-family:var(--display);font-weight:400;font-size:19px;letter-spacing:var(--display-track)}
.pirrules h3 .ic{color:var(--red-ink)}
.pirrules ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pirrules li{display:grid;grid-template-columns:7.8em minmax(0,1fr);gap:8px;font-size:14px;align-items:start}
.pirrules .prh{display:inline-flex;align-items:center;gap:7px}
/* each rule's icon in a small scarlet ring, as the lobby draws the endings */
.pirrules .prh .ic{box-sizing:content-box;width:15px;height:15px;padding:5px;border-radius:50%;color:var(--red-ink);stroke-width:1.8;vertical-align:middle;
  background:color-mix(in srgb,var(--red-ink) 9%,transparent);border:1px solid color-mix(in srgb,var(--red-ink) 38%,transparent)}
.pirrules .prt{color:var(--ink-soft);padding-top:4px}
@media (max-width:420px){ .pirrules li{grid-template-columns:minmax(0,1fr);gap:0} .pirrules .prt{padding-top:2px} }
/* the lobby */
.seat .who .role{font-style:italic;color:var(--ink-soft)}

/* ---------- the players' bar (pbar.js): the lobby's and the game page's, in the site header's paper, type and scarlet icons ---------- */
.pbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:clamp(10px,2vw,22px);
  width:100vw;margin:0 0 18px calc(50% - 50vw);padding:6px max(16px,calc(50vw - 660px));padding-top:max(6px,env(safe-area-inset-top));
  background:var(--grain),var(--paper);border-bottom:1px solid var(--rule);box-shadow:0 8px 20px -16px var(--shadow)}
.pb-mark{flex:none;line-height:0}
.pb-mark img{height:44px;width:auto}
.pb-links{display:flex;gap:4px;flex-wrap:wrap}
.pb-links a{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 10px;font:17px/1 var(--serif);color:var(--ink);text-decoration:none;
  border-bottom:2px solid transparent}
.pb-links a:hover{border-bottom-color:var(--rule)}
.pb-links a:focus-visible,.pb-siterow a:focus-visible,.pb-mark:focus-visible{outline:2px solid var(--scarlet,var(--red-ink));outline-offset:2px}
.pb-links .ic{font-size:18px;color:var(--scarlet,var(--red-ink))}
.pb-sea{display:flex;align-items:center;gap:8px;margin:0 0 0 auto;font:italic 15px/1.2 var(--serif);color:var(--ink-soft);white-space:nowrap}
.pb-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 25%,transparent);animation:pb-pulse 2.4s ease-in-out infinite}
@keyframes pb-pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--ok) 0%,transparent)}}
@media (prefers-reduced-motion:reduce){ .pb-dot{animation:none} }
@media (max-width:899px){
  .pbar{gap:10px;padding-left:12px;padding-right:6px;margin-bottom:12px}
  .pb-mark img{height:36px}
  .pb-links{display:none} /* the tabs at the foot are the players' bar on a phone */
  .pb-sea{font-size:14px}
}

/* on a game page: the slim bar's My games, the dot when another table waits, and the drawer of this device's games */
.pb-games-btn{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 10px;border:0;border-bottom:2px solid transparent;border-radius:0;
  background:none;font:17px/1 var(--serif);color:var(--ink);cursor:pointer;box-shadow:none}
.pb-games-btn:hover{border-bottom-color:var(--rule);background:none}
.pb-games-btn .ic{font-size:18px;color:var(--scarlet,var(--red-ink))}
.pb-games-btn:focus-visible{outline:2px solid var(--scarlet,var(--red-ink));outline-offset:2px}
.pb-due{position:absolute;top:8px;left:22px;width:9px;height:9px;border-radius:50%;background:var(--red-ink);box-shadow:0 0 0 2px var(--paper)}
.game .pbar{margin-bottom:6px;flex:none;padding-left:12px;padding-right:12px}
.game .pbar ~ .bar .brand{display:none} /* the bar's flag is the page's mark */
@media (min-width:900px){ .game .pbar ~ .bar .status{order:-1;flex:1 1 320px;align-self:center} } /* the round beside the tools, where the brand was */
.pb-drawer{margin:0 0 0 auto;width:min(440px,100vw);max-width:100vw;height:100vh;height:100dvh;max-height:none;padding:0;border:0;border-left:1px solid var(--card-edge);
  background:var(--grain),var(--paper);color:var(--ink);box-shadow:-18px 0 40px -24px var(--shadow);overflow-y:auto}
.pb-drawer::backdrop{background:var(--veil)}
.pb-drawer[open]{animation:pb-in .24s ease-out}
@keyframes pb-in{from{transform:translateX(24px);opacity:0}}
@media (prefers-reduced-motion:reduce){ .pb-drawer[open]{animation:none} }
.pb-dhead{position:sticky;top:0;z-index:1;display:flex;align-items:baseline;gap:10px;padding:calc(env(safe-area-inset-top) + 14px) 16px 10px;background:var(--grain),var(--paper);border-bottom:3px double var(--rule)}
.pb-dhead h2{margin:0;font:400 28px/1 var(--display);color:var(--ink);letter-spacing:var(--display-track)}
.pb-dhead .aside{font:italic 15px var(--serif);color:var(--ink-soft)}
.pb-x{margin-left:auto;align-self:center;width:40px;height:40px;border:0;background:none;font:400 30px/1 Georgia,serif;color:var(--ink-soft);cursor:pointer;box-shadow:none}
.pb-x:hover{color:var(--red-ink);background:none}
.pb-glist{margin:0;padding:8px 16px}
.pb-glist li.here{border-left:3px solid var(--red-ink);padding-left:10px}
.pb-this{font:italic 14px var(--serif);color:var(--ink-soft)}
.pb-dfoot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:12px 16px 14px}
.pb-dfoot .btn{flex:1 1 auto;justify-content:center}
@media (max-width:899px){
  .game .pb-links{display:flex} /* a game keeps its own foot tabs: the slim bar shows only My games */
  .game .pb-links > a{display:none}
  .game .pb-gl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .game #pbar:has(#atsea[hidden]) .pb-gl{position:static;width:auto;height:auto;overflow:visible;clip:auto} /* room for the word while the count is hidden */
  .game .pbar{position:sticky;top:0;width:auto;margin:-6px -8px 6px;padding-top:max(6px,env(safe-area-inset-top))}
  .pb-drawer{inset:auto 0 0 0;margin:0;width:100vw;height:auto;max-height:86dvh;border-left:0;border-top:1px solid var(--card-edge);border-radius:14px 14px 0 0}
  @keyframes pb-in{from{transform:translateY(30px);opacity:0}}
}

/* the header's View pop-up, while the table is in 3D: Ships and Finish, the same choices as the View card */
.viewpop{position:relative}
.viewpanel{position:absolute;right:0;top:calc(100% + 8px);z-index:60;display:grid;gap:10px;width:min(300px,calc(100vw - 24px));padding:12px 14px 14px;background:var(--grain),var(--card);
  border:1px solid var(--card-edge);border-radius:10px;box-shadow:0 18px 36px -18px var(--shadow)}
.viewpanel h3{margin:0;font:400 20px/1 var(--display);color:var(--ink);letter-spacing:var(--display-track)}
.vrow{display:grid;gap:5px}
.vrow .vl{font:14px var(--caps);letter-spacing:.05em;color:var(--ink-soft)}
.vrow .seg{display:grid;grid-template-columns:1fr 1fr}
.vrow .seg button{justify-content:center;white-space:normal;line-height:1.15;text-align:center}
.vrow .seg.woods{grid-template-columns:repeat(3,1fr)}
.vrow .seg.woods button{border-top:1px solid var(--rule)}
.vrow .seg.woods button:nth-child(-n+3){border-top:0}
.vrow[hidden]{display:none}
@media (max-width:599px){ .viewpanel{position:fixed;left:12px;right:12px;top:var(--vtop,120px);width:auto;max-height:calc(100dvh - var(--vtop,120px) - 80px);overflow-y:auto} }
#viewbtn[aria-expanded=true]{background:var(--ink);color:var(--paper)}

/* ---------- the game page's panels, tidied (owner, 9 October) ---------- */
/* thin scrollbars in the page's paper and ink, not the system's grey */
body.game *,body.lobby-page *,.pb-drawer{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink-soft) 42%,transparent) transparent}
body.game ::-webkit-scrollbar,body.lobby-page ::-webkit-scrollbar,.pb-drawer::-webkit-scrollbar{width:9px;height:9px}
body.game ::-webkit-scrollbar-track,body.lobby-page ::-webkit-scrollbar-track,.pb-drawer::-webkit-scrollbar-track{background:transparent}
body.game ::-webkit-scrollbar-thumb,body.lobby-page ::-webkit-scrollbar-thumb,.pb-drawer::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink-soft) 42%,transparent);border:2px solid transparent;border-radius:9px;background-clip:padding-box}
body.game ::-webkit-scrollbar-thumb:hover,body.lobby-page ::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--ink-soft) 70%,transparent)}
body.game ::-webkit-scrollbar-corner{background:transparent}
/* a card folds to its heading: the chevron at the heading's right */
.card h2 .fold{margin-left:auto;flex:none;width:30px;min-height:30px;height:30px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--ink-soft);display:inline-grid;place-items:center;box-shadow:none}
.card h2 .fold:hover{background:var(--btn-hover);color:var(--ink)}
.card h2 .fold .ic{font-size:16px;transform:rotate(90deg);transition:transform .2s ease}
.card.folded h2 .fold .ic{transform:rotate(0deg)}
.card.folded > :not(h2){display:none !important}
.card.folded h2{margin-bottom:0;padding-bottom:0;border-bottom:0}
@media (prefers-reduced-motion:reduce){ .card h2 .fold .ic{transition:none} }
/* the end of a game: the chart's two views, then one matched set of buttons, the first full width */
.over-view{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:12px 0 2px}
.over-view .lbl{font-family:var(--caps);font-size:13px;letter-spacing:.06em;color:var(--ink-soft)}
.over-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 6px}
.over-acts > *{width:100%;justify-content:center;text-align:center}
.over-acts > .primary{grid-column:1 / -1}
/* the site's pages, in the My games drawer on a game page */
.pb-site{padding:6px 16px calc(env(safe-area-inset-bottom) + 18px);border-top:3px double var(--rule)}
.pb-site h3{margin:10px 0 6px;font-family:var(--caps);font-weight:400;font-size:14px;letter-spacing:.06em;color:var(--ink-soft)}
.pb-site ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.pb-site a{display:flex;align-items:center;min-height:40px;color:var(--ink);text-decoration:none;font:16px var(--serif)}
.pb-site a:hover{text-decoration:underline;text-underline-offset:3px}
.game .pbar > .pb-sea{margin-left:auto}
/* Your link, beside View: the link to select, Copy, Share and a QR on request, a line of care */
.linkpanel{width:min(340px,calc(100vw - 24px))}
#linkurl{width:100%;min-height:40px;font:14px/1.2 var(--serif);padding:6px 10px;background:var(--grain),var(--field)}
.lrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:6px}
.lrow button{justify-content:center}
.linkqr{display:grid;place-items:center;padding:8px;background:#fff;border-radius:8px}
.linkqr svg{width:180px;height:180px}
.linkpanel .note{margin:0;font-size:14px}
#linkbtn[aria-expanded=true]{background:var(--ink);color:var(--paper)}
/* the lobby's slim row of the site's pages: the landing site's header type and scarlet icons, right-aligned; it scrolls sideways on a phone */
.pb-siterow{width:100vw;margin:0 0 0 calc(50% - 50vw);background:var(--grain),var(--paper);border-bottom:1px solid var(--rule-soft)}
.pb-sr-in{display:flex;justify-content:flex-end;gap:clamp(14px,2vw,28px);max-width:1320px;margin:0 auto;padding:0 max(16px,calc(50vw - 660px));padding-top:env(safe-area-inset-top)}
.pb-siterow a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 2px;font:15px/1 var(--serif);color:var(--ink);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.pb-siterow a:hover{border-bottom-color:var(--rule)}
.pb-siterow .ic{font-size:15px;color:var(--scarlet,var(--red-ink))}
@media (max-width:899px){
  .pb-sr-in{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding-left:12px;padding-right:28px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .pb-sr-in::-webkit-scrollbar{display:none}
  .pb-siterow a{scroll-snap-align:start;min-height:40px}
}