/* TV + phone chrome, copied from the Screens canvas (key-screens Main / Set 2) */
[hidden]{display:none!important}
/* the display font (Boldonse, SIL OFL), self-hosted with its line spacing evened out so capitals and digits sit in the
   middle of their line (Douwe 2026-10-16: one clean fix instead of a small padding nudge on every number) */
@font-face{font-family:'Boldonse 2055';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/boldonse-2055-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Boldonse 2055';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/boldonse-2055-latinext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
p,h1,h2,h3{margin:0}
button{appearance:none;border:0;margin:0;padding:0;background:none;color:inherit;font:inherit;text-align:center;cursor:pointer}
.tv-moment,.tv-headline,.tv-title,.tv-year,.tv-pin,.tv-pin-square,.lln-stinger,.lln-headline,.lln-logo,.ph-moment,.ph-headline,.ph-result,.ph-title,.ph-number,.ph-name,.ph-button{font-synthesis:none;text-transform:uppercase}
.p1{--c:var(--player-1);--on-c:var(--on-player-1)}.p2{--c:var(--player-2);--on-c:var(--on-player-2)}.p3{--c:var(--player-3);--on-c:var(--on-player-3)}.p4{--c:var(--player-4);--on-c:var(--on-player-4)}.p5{--c:var(--player-5);--on-c:var(--on-player-5)}.p6{--c:var(--player-6);--on-c:var(--on-player-6)}
.you1{--you:var(--player-1);--on-you:var(--on-player-1)}.you2{--you:var(--player-2);--on-you:var(--on-player-2)}.you3{--you:var(--player-3);--on-you:var(--on-player-3)}.you4{--you:var(--player-4);--on-you:var(--on-player-4)}.you5{--you:var(--player-5);--on-you:var(--on-player-5)}.you6{--you:var(--player-6);--on-you:var(--on-player-6)}
.dots{position:absolute;right:var(--tv-safe-x);top:var(--tv-safe-y);display:flex;align-items:center;gap:var(--space-5);background:var(--bar);padding:10px 14px;border-radius:var(--radius-sm)} /* white plate: dots stay visible over land in their own colour */
.d{width:var(--tv-dot);height:var(--tv-dot);border-radius:var(--radius-full);background:var(--c);color:var(--on-c);display:flex;align-items:center;justify-content:center;opacity:var(--opacity-idle)}
.d.on{width:66px;height:66px;opacity:1}
.d.hit{opacity:1;box-shadow:var(--shadow-ring)}
.tk{position:absolute;left:0;right:0;bottom:0;height:var(--tv-ticker);box-sizing:border-box;display:flex;background:var(--lln-ticker);border-top:4px solid var(--lln-red);color:var(--ink)}
.tk .brand{background:var(--lln-red);color:var(--on-lln-red);display:flex;align-items:center;padding:0 var(--space-9) 0 var(--tv-safe-x)}
.tk .brand .lln-mark{height:38px;width:auto;display:block}
.tk .crawl{flex:1;display:flex;align-items:center;gap:var(--space-9);padding-left:var(--space-9);text-transform:uppercase;white-space:nowrap;overflow:hidden}
.tk .crawl i{width:12px;height:12px;background:var(--lln-red);flex:none}
.tk .mkt{background:var(--bar-dark);display:flex;align-items:center;gap:var(--space-9);padding:0 var(--tv-safe-x) 0 var(--space-9);color:var(--ink)}
.fc{position:absolute;left:var(--tv-safe-x);top:var(--tv-safe-y)}
.clock{display:inline-flex;flex-direction:column;gap:var(--space-6);padding:var(--space-9);background:var(--ground);border:8px solid var(--ink);border-radius:22px} /* after Douwe's Karlsson flip clock: a thick white case with round corners (the one place above radius-lg, Douwe 2026-10-15) */
.clock .yr{color:var(--ink)}
.clock .stripes{display:flex;gap:var(--space-3)}
.clock .stripes i{flex:1;height:var(--clock-stripe);background:var(--lln-grey);border-radius:var(--radius-xs)}
.clock .stripes i.p1,.clock .stripes i.p2,.clock .stripes i.p3,.clock .stripes i.p4,.clock .stripes i.p5,.clock .stripes i.p6{background:var(--c)}
.clock .tm{color:var(--ink);align-self:flex-end}
.l3{position:absolute;left:var(--tv-safe-x);right:var(--tv-safe-x);bottom:var(--tv-slot-bottom)}
.tiers{display:flex;height:var(--lln-tab-height);align-items:flex-end}
.tab{background:var(--lln-red);color:var(--on-lln-red);padding:0 var(--space-9);height:var(--lln-tab-height);display:flex;align-items:center;border-radius:var(--radius-md) 0 0 0;white-space:nowrap}
.head{height:var(--lln-bar-height);display:flex;align-items:center;padding:0 0 0 36px;white-space:nowrap;overflow:hidden}
.head.play{background:var(--bar);color:var(--on-bar)}
.head .side{margin-left:auto;align-self:stretch;display:flex;align-items:center;padding:0 30px}
.head .side.who{background:var(--c);color:var(--on-c);text-transform:uppercase}
.sub{background:var(--bar-sub);color:var(--on-bar-sub);height:var(--lln-sub-height);display:flex;align-items:center;padding:0 36px;white-space:nowrap}
.sub .dice{display:flex;align-items:center;gap:var(--space-3)}
.sub .vs{margin:0 var(--space-5)}
.sub .to{display:flex;align-items:center;margin:0 var(--space-5)}
.sub .res{font-weight:800}
.chip{width:var(--die-chip);height:var(--die-chip);box-sizing:border-box;border-radius:var(--radius-xs);background:var(--c);color:var(--on-c);display:flex;align-items:center;justify-content:center;flex:none}
.chip.lost{background:var(--lln-grey);color:var(--ink)}
.chip.neu{--c:var(--neutral);--on-c:var(--ink)}
.tv-moment,.tv-headline,.tv-title,.tv-year,.lln-headline,.lln-die,.ph-moment,.ph-result,.ph-title,.ph-number,.ph-name,.ph-button{font-synthesis:none}

/* the menu (menu.js), one on every page (Douwe 2026-10-17): a button top right, a panel from the right (full screen on a phone).
   The pages live in one list in menu.js, so a new page is one line there; the list scrolls when it grows. */
.mbar{position:fixed;top:var(--space-8);right:var(--space-8);z-index:41;display:flex;gap:var(--space-4)}
.mbtn{box-sizing:border-box;width:56px;height:56px;padding:0;border:0;border-radius:var(--radius-sm);background:var(--bar-dark);color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}
.mbtn svg{width:30px;height:30px}
.mbtn:focus-visible,.mitem:focus-visible,.mlogo:focus-visible{box-shadow:var(--focus-ring);outline:0}
.mbtn.burger i{width:28px;height:4px;border-radius:var(--radius-xs);background:currentColor;transition:transform .3s,opacity .2s}
.mopen .mbtn.burger i:nth-child(1){transform:translateY(11px) rotate(45deg)}
.mopen .mbtn.burger i:nth-child(2){opacity:0}
.mopen .mbtn.burger i:nth-child(3){transform:translateY(-11px) rotate(-45deg)}
.mpanel{position:fixed;top:0;right:0;bottom:0;z-index:40;width:min(480px,100%);box-sizing:border-box;display:flex;flex-direction:column;background:var(--ground);border-left:1px solid var(--lln-grey);
  transform:translateX(100%);visibility:hidden;transition:transform .4s cubic-bezier(.16,1,.3,1),visibility 0s .4s}
.mopen .mpanel{transform:none;visibility:visible;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.mlogo{display:block;align-self:flex-start;margin:var(--space-8);border-radius:var(--radius-xs)}
.mlogo img{display:block;width:140px;height:auto}
.mpanel ul{list-style:none;margin:var(--space-6) 0 0;padding:0;flex:1;overflow-y:auto}
.mitem{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:var(--space-7) var(--space-8) var(--space-6);border-top:1px solid var(--lln-grey);color:var(--ink);text-decoration:none;font:var(--type-ph-title);text-transform:uppercase}
.mitem::after{content:'→';font:800 26px/1 var(--font-body);opacity:.5;transition:transform .2s,opacity .2s}
.mitem:hover{background:var(--surface)}.mitem:hover::after{opacity:1;transform:translateX(4px)}
.mitem.go{background:var(--lln-red);color:var(--on-lln-red);border-top-color:var(--lln-red)}
.mitem.go::after{opacity:1}
.mitem[aria-current="page"]{color:var(--ink-muted)}
.mitem[aria-current="page"]::after{content:'';width:12px;height:12px;border-radius:var(--radius-full);background:var(--lln-red);opacity:1}
.mpanel ul::after{content:'';display:block;border-top:1px solid var(--lln-grey)} /* a line under the last shown page */
.mpanel li[hidden]{display:none}
.mfoot{display:flex;align-items:center;height:var(--tv-ticker);padding:0 var(--space-8);background:var(--lln-red)}
.mfoot .lln-mark{height:34px;width:auto;filter:brightness(0) invert(1)}
.mscrim{position:fixed;inset:0;z-index:39;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .3s}
.mopen .mscrim{opacity:1;pointer-events:auto}
/* Get the app: the two steps on an iPhone (a sheet), and a one-time hint bar on a phone's first visit */
.mapp{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.8);display:flex;align-items:flex-end;justify-content:center;padding:var(--space-6)}
.mapp[hidden]{display:none}
.mapp .mbox{width:100%;max-width:440px;box-sizing:border-box;background:var(--ground);border:1px solid var(--lln-grey);border-radius:var(--radius-md);padding:var(--space-8);margin-bottom:env(safe-area-inset-bottom)}
.mapp .top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-6)}
.mapp .top p{margin:0}
.mapp ol{list-style:none;margin:0;padding:0;counter-reset:s}
.mapp li{display:flex;align-items:center;gap:var(--space-6);padding:var(--space-6) 0;border-top:1px solid var(--lln-grey);font:var(--type-ph-body);color:var(--ink-2)}
.mapp li b{color:var(--ink);font-weight:800}
.mapp .ic{flex:none;width:52px;height:52px;border-radius:var(--radius-sm);background:var(--bar);color:var(--on-bar);display:flex;align-items:center;justify-content:center}
.mapp .ic svg{width:28px;height:28px}
.mhint{position:fixed;left:var(--space-6);right:var(--space-6);bottom:calc(var(--space-11) + env(safe-area-inset-bottom));z-index:38;display:flex;gap:var(--space-4);animation:mhint .5s cubic-bezier(.16,1,.3,1) both}
.mhint .go{flex:1;height:56px;border:0;border-radius:var(--radius-sm);background:var(--lln-red);color:var(--on-lln-red);font:var(--type-ph-button);cursor:pointer}
@keyframes mhint{from{transform:translateY(140%)}to{transform:none}}
@media (max-width:760px){.mbar{top:var(--space-6);right:var(--space-6)}.mpanel{border-left:0}.mitem{font:var(--type-ph-name);text-transform:uppercase;padding:var(--space-8) var(--space-8) var(--space-7)}} /* phone: one line per page */
@media (min-width:1600px){.mbar{top:var(--tv-safe-y);right:var(--tv-safe-x)}.mbtn{width:72px;height:72px;gap:9px}.mbtn svg{width:40px;height:40px}.mbtn.burger i{width:36px;height:5px}
  .mopen .mbtn.burger i:nth-child(1){transform:translateY(14px) rotate(45deg)}.mopen .mbtn.burger i:nth-child(3){transform:translateY(-14px) rotate(-45deg)}
  .mpanel{width:640px}.mlogo{margin:var(--tv-safe-y) var(--space-10)}.mlogo img{width:190px}.mitem{font:var(--type-lln-headline);padding:var(--space-9) var(--space-10) var(--space-8)}.mfoot{padding:0 var(--space-10)}}
/* the LLN logo on a name plate (Douwe 2026-10-18: plates use the logo, not the letters), white on the red block */
.plate .k{display:flex;align-items:center}
.plate .k .lln-mark{height:.8em;width:auto;display:block;filter:brightness(0) invert(1)}

/* a country's value: a land tile, a hexagon with an edge (Douwe 2026-10-27); the coin is cash only. Sized by width/height; the number, if any, in a span */
.vt{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:16px;height:14px;background:var(--value-edge);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.vt::before{content:'';position:absolute;inset:2px;background:var(--value);clip-path:inherit}
.vt > span{position:relative;color:var(--play-ink)}