/* Secret Sails party screen: a 16:9 screen read from the couch. Dark always (the night chart of net.css), type that
   grows with the screen, the chart as large as the height allows, and beside it the fleets and the join codes. */
body.tv{
  --paper:#14110e;--paper-deep:#221d17;--card:#1f1a15;--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;background:var(--paper);background-image:radial-gradient(ellipse at 30% 0%,rgba(224,172,62,.06),transparent 60%);
  margin:0;height:100vh;height:100dvh;overflow:hidden;font-size:clamp(15px,1.05vw + .35vh,30px)}
body.tv.idle,body.tv.idle *{cursor:none !important}
body.tv #board{touch-action:none}
/* the 3D table under lamplight, whatever the TV's own colour scheme */
body.tv .fc3d{background:radial-gradient(ellipse 95% 85% at 50% 30%,#3b3228 0%,#261f19 55%,#15120f 100%)}
#view3d[aria-pressed=true],#ships3d[aria-pressed=true],#finish3d[aria-pressed=true]{border-color:var(--harbor)}
/* the night chart's ships and anchorages, whatever the TV's own colour scheme */
body.tv #board .piece .halo{display:inline}
body.tv #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}
body.tv #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}
body.tv #board .cell.closing{animation-name:fc-closing-night}
@media (prefers-reduced-motion:reduce){ body.tv #board .cell.closing{fill:#3f313a} }
#tvapp{height:100%;display:flex;flex-direction:column;padding:1.2vh 1.6vw}
.tvbar{flex:none;position:relative;display:flex;align-items:center;gap:1.4vw;padding-bottom:.8vh;border-bottom:1px solid var(--rule)}
.tvbrand{flex:none;white-space:nowrap;font-family:var(--black);font-size:2.1em;line-height:1;color:var(--red-ink)}
.tvstatus{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:.5em 1.1em;font-size:1.1em;color:var(--ink-soft)}
/* the game page's voyage and chips (net.css .st-*), read from across the room */
.tv .st-voyage{gap:.7em}
.tv .st-round{font-size:1.05em}
.tv .st-round b{font-family:var(--glyph);font-weight:800;color:var(--red-ink);letter-spacing:0;font-size:1.15em}
.tv .st-track{width:clamp(220px,19vw,520px);height:.55em;margin:.4em 0 .15em;border-radius:.3em}
.tv .st-storm{top:-.6em;width:.5em;height:.5em;margin-left:-.25em;border-width:2px}
.tv .st-storm::after{top:.45em;height:.6em}
.tv .st-thumb{width:.95em;height:.95em;margin:-.475em 0 0 -.475em;box-shadow:0 0 0 3px var(--paper),0 1px 6px var(--shadow)}
.tv .st-chips{gap:.4em}
.tv .st-chip{height:1.8em;padding:0 .7em;gap:.35em;font-size:.9em;border-width:1.5px}
.tv .st-chip .ic{font-size:1.1em}
/* the 3D table's compass, read from across the room too */
body.tv .fc3d-compass .dial{width:clamp(78px,6.5vw,150px);height:clamp(78px,6.5vw,150px)}
body.tv .fc3d-compass .cap{font-size:clamp(11px,.75vw,17px)}
/* the tools show while the mouse moves, over the end of the bar, so the status has its whole width the rest of the time */
.tvtools{position:absolute;right:0;top:50%;transform:translateY(calc(-50% - .4vh));display:flex;gap:.6em;padding-left:1.4em;
  background:linear-gradient(90deg,transparent,var(--paper) 1.2em);transition:opacity .2s}
.tvtools button{font-size:.8em;min-height:0;padding:.35em .8em}
body.tv.idle .tvtools{opacity:0}

/* pairing */
.tvpair{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2vh}
.tvlead{font-size:2em;margin:0;color:var(--ink)}
.tvcode{font-family:var(--glyph);font-weight:800;font-size:min(22vh,16vw);letter-spacing:.12em;line-height:1;margin:0;color:var(--harbor)}
.tvnote{font-style:italic;color:var(--ink-soft);margin:.2em 0;font-size:1em}

/* the game */
.tvgame{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.6vw;padding-top:1.2vh}
#tvstagewrap{position:relative;align-self:start}
#tvstage{position:relative;width:min(calc((100vh - 9.5vh - 3.4vh) * var(--ar,1)),calc(100vw - 34vw));width:min(calc((100dvh - 9.5vh - 3.4vh) * var(--ar,1)),calc(100vw - 34vw));aspect-ratio:var(--ar,1);border-radius:8px;overflow:hidden;background:var(--paper-deep);box-shadow:0 18px 40px -16px var(--shadow)}
body.tv #board{display:block;width:100%;height:auto;aspect-ratio:var(--ar,1)}
.tvside{min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:1.4vh}
.tvside h2{font-family:var(--caps);font-weight:400;font-size:1.15em;letter-spacing:.08em;margin:0 0 .5vh;color:var(--ink-soft)}
/* the fleets */
.tvfleets{display:flex;flex-direction:column;gap:.7vh}
.tvf{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.2em 1em;padding:.45em .8em;border-radius:8px;background:var(--card);border:1px solid var(--card-edge);border-left:.45em solid var(--c)}
.tvf.out{opacity:.5;filter:grayscale(.8)}
.tvf .who{font-family:var(--display);font-size:1.35em;line-height:1.1;color:var(--c);filter:brightness(1.6) saturate(.85);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:var(--display-track)}
.tvf .sub{grid-column:1;font-size:.85em;color:var(--ink-soft);font-style:italic;display:flex;align-items:center;gap:.5em}
.tvf .score{grid-row:span 2;grid-column:2;font-family:var(--glyph);font-weight:800;font-size:1.7em}
.tvf .score.band{font-family:var(--caps);font-weight:400;font-size:1.05em;letter-spacing:.05em;color:var(--ink-soft)}
.tvf .mark{display:inline-flex;align-items:center;gap:.3em;font-style:normal;font-weight:600}
.tvf .mark.sent{color:var(--ok)}
.tvf .mark .ic{font-size:1.1em}
.tvwait{margin:0;font-size:1.2em;color:var(--ink);min-height:1.3em}
/* join codes */
.tvjoin .qrs{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,max-content));gap:1.2vh 1vw}
.qrcard{display:flex;flex-direction:column;align-items:center;gap:.4vh;padding:.8vh .8vw;border-radius:10px;background:#f6f0e2;border:.35em solid var(--c);color:#2b2420}
.qrcard .qr{display:block;width:var(--qrh,24vh);max-width:100%;height:auto}
.qrs.many .qrcard .qrwho{font-size:1.05em}
.qrs.many .qrcard .qrfleet{display:none}
.tvside > *{flex:none}
.tvside > .tvlast{flex:1 1 auto}
.tvside.joining .tvf{padding:.2em .7em}
.tvside.joining .tvf .who{font-size:1.05em}
.tvside.joining .tvf .score{grid-row:auto;font-size:1.1em}
.tvside.joining .tvf .sub{display:none}
.tvside.joining .tvwait{font-size:1em}
.qrcard .qrwho{font-family:var(--display);font-size:1.25em;color:var(--c);line-height:1.1;letter-spacing:var(--display-track)}
.qrcard .qrfleet{font-size:.85em;color:#5a4d42;font-style:italic}
/* the last round, and the report that follows a replay over the chart */
.tvlast{min-height:0;overflow:hidden}
.tvside .evs .ev{font-size:1em;min-height:0;padding:.3em .2em;color:var(--ink)}
.tvside .evs .rc,.tvflash .rc{min-width:1.35em;height:1.35em;font-size:.9em}
.tvside .evs .pc,.tvflash .pc{height:1.35em;font-size:.9em}
.tvside .evs .ct,.tvflash .ct{height:1.35em;font-size:.85em}
.tvflash{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);min-width:46%;max-width:90%;padding:1.2vh 1.4vw;border-radius:12px;background:rgba(20,17,14,.9);border:1px solid var(--card-edge);box-shadow:0 20px 50px -10px rgba(0,0,0,.7)}
.tvflash h2{font-family:var(--display);font-weight:400;font-size:2em;margin:0 0 .4vh;color:var(--red-ink);letter-spacing:var(--display-track)}
.tvflash .ev{font-size:1.2em;padding:.35em .2em;border-bottom:1px solid var(--rule-soft)}
.tvflash .evi{font-size:1.3em}
/* the end */
.tvresult{padding:1vh 1vw;border-radius:10px;background:var(--card);border:2px solid var(--harbor)}
.tvresult .lead{font-family:var(--display);font-size:2.2em;color:var(--red-ink);margin:0 0 .3vh;line-height:1.1;letter-spacing:var(--display-track)}
.tvresult p{margin:.2em 0}
.tvresult ul{margin:.4em 0 0;padding-left:1.2em}
/* Pirates!: the plunder bar big, the alliance and the pirate as headings over their fleets */
.tvplunder .plunder{font-size:1.5em;gap:.4em .8em}
.tvplunder .plunder .pl-who .ic{font-size:1.15em}
.tvplunder .plunder .pl-bar{max-width:none;height:.55em;border-radius:.3em;border-color:var(--cd,var(--c))}
.tvplunder .plunder .pl-fill{background:var(--cd,var(--c))}
.tvside-h{display:flex;align-items:center;gap:.45em;margin:.4vh 0 0;font-family:var(--caps);letter-spacing:.06em;font-size:1.05em;color:var(--ink-soft)}
.tvside-h span:not(.score){flex:1 1 auto}
.tvside-h .score{font-family:var(--glyph);font-weight:800;font-size:1.35em;letter-spacing:0;color:var(--ink)}
.tvf{border-left-color:var(--cd,var(--c))}
.tvf .who{color:var(--cd,var(--c))}
.qrcard .qrwho{color:var(--c)}