/* False Colors 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);
  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 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;display:flex;align-items:baseline;gap:1.4vw;padding-bottom:.8vh;border-bottom:1px solid var(--rule)}
.tvbrand{font-family:var(--black);font-size:2.1em;line-height:1;color:var(--red-ink)}
.tvstatus{flex:1 1 auto;font-family:var(--caps);font-size:1.25em;letter-spacing:.05em;color:var(--ink-soft)}
.tvstatus b{font-family:var(--glyph);font-weight:800;color:var(--red-ink);letter-spacing:0}
.tvstatus .truce{color:var(--harbor)}
.tvtools{display:flex;gap:.6em}
.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}
.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}
.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)}
.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}
.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)}