/* False Colors 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:"Pirata One",Georgia,serif;--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;
  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);
    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: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:no-repeat;min-height:100vh;min-height:100dvh}
html{background: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)}
.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)}
#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}
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(--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(--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)}
@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(--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}
.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}
.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 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)}
.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}
  .play{flex:1 1 auto;min-height:0;grid-template-columns:auto minmax(340px,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"board dock" "board side";gap:10px 16px;align-items:start}
  #stagewrap{grid-area:board}
  #stage{width:min(calc((100vh - var(--hdr,64px) - 30px) * var(--ar,1)),calc(100vw - 400px));width:min(calc((100dvh - var(--hdr,64px) - 30px) * var(--ar,1)),calc(100vw - 400px));box-shadow:0 14px 30px -12px var(--shadow)}
  #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(150px,1fr));gap:6px;margin:0 0 10px}
  #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:auto minmax(320px,400px) minmax(360px,1fr);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}
  #stage{width:min(calc((100vh - var(--hdr,64px) - 30px) * var(--ar,1)),calc(100vw - 820px));width:min(calc((100dvh - var(--hdr,64px) - 30px) * var(--ar,1)),calc(100vw - 820px))}
}
.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(--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(--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(--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)}
.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)}
.status .ending,.status .truce,.status .capital{white-space:nowrap}
.status .truce{color:var(--harbor);font-weight:600}
.status .ending .ic{color:var(--harbor)}
.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)}
.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]{background:var(--ink);color:var(--paper)}
.result-lead{font-family:var(--display);font-size:24px;color:var(--red-ink);margin:2px 0 6px}

/* ---------- 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(--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)}
.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(--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)}
#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}
.pirrules ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pirrules li{display:grid;grid-template-columns:6.6em minmax(0,1fr);gap:8px;font-size:14px;align-items:baseline}
.pirrules .prh{display:inline-flex;align-items:center;gap:5px}
.pirrules .prt{color:var(--ink-soft)}
@media (max-width:420px){ .pirrules li{grid-template-columns:minmax(0,1fr);gap:0} }
/* the lobby */
.seat .who .role{font-style:italic;color:var(--ink-soft)}