/* Label League — the shared shell pieces every page carries (9/28): the site footer (02 §0.11, the ink block) and the public nav's
   "Coming soon" menu (Blog · Shop in one tab, Lake 9/28). Markup is stamped into each page by tools/sync_shell.py; tokens from site.css. */

/* ---- Coming soon: one nav tab, Blog · Shop behind it ---- */
.nav .nav-soon,.nav .nav-more{position:relative}
.nav .nav-soon>summary,.nav .nav-more>summary{list-style:none;cursor:pointer;padding:6px 0;white-space:nowrap}
.nav .nav-soon>summary::-webkit-details-marker,.nav .nav-more>summary::-webkit-details-marker{display:none}
.nav .nav-soon>summary::after{content:"▾";margin-left:5px;font-size:.85em}
.nav .nav-soon>summary .s{display:inline}.nav .nav-soon>summary .l{display:none}
.nav .nav-soon.on>summary,.nav .nav-more.on>summary{color:var(--ink)}
.nav .nav-soon .nav-menu,.nav .nav-more .nav-menu{position:absolute;top:calc(100% + 10px);left:-12px;z-index:40;display:grid;gap:2px;min-width:132px;padding:6px;background:var(--card);border:1px solid var(--rule);border-radius:10px;box-shadow:0 18px 34px -20px rgba(0,0,0,.45)}
.nav .nav-soon .nav-menu a,.nav .nav-more .nav-menu a{display:block;padding:8px 10px;border-radius:7px;color:var(--ink2,#4A4A48);text-decoration:none;white-space:nowrap;border-bottom:0}
.nav .nav-soon .nav-menu a:hover,.nav .nav-soon .nav-menu a:focus-visible,.nav .nav-more .nav-menu a:hover,.nav .nav-more .nav-menu a:focus-visible{background:var(--paper);color:var(--ink)}
.nav .nav-soon .nav-menu a[aria-current],.nav .nav-more .nav-menu a[aria-current]{color:var(--ink);background:var(--paper)}
.nav .nav-soon .nav-menu .soon,.nav .nav-more .nav-menu .soon{display:block;padding:2px 10px 6px;font-size:9.5px;letter-spacing:.14em;color:var(--mute)}
@media(min-width:900px){
  .nav .nav-soon>summary .s{display:none}.nav .nav-soon>summary .l{display:inline}
  .nav .nav-soon.on>summary{border-bottom:1px solid var(--ink);padding-bottom:2px}
}
/* the 900–1239 band is tight (nine links): the tab reads SOON there */
@media(min-width:900px) and (max-width:1239px){.nav .nav-soon>summary .s{display:inline}.nav .nav-soon>summary .l{display:none}}
@media(max-width:767px){.mast .nav .nav-soon:not(.on){display:none}.nav .nav-soon .nav-menu{left:auto;right:-8px}}

/* ---- the site footer: 02 §0.11, desktop ink block, four columns ---- */
.ll-foot{background:#111;color:#F2F0EB;margin-top:64px}
.ll-foot-in{max-width:1280px;margin:0 auto;padding:36px 40px 44px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;box-sizing:border-box}
.ll-foot-lockup{display:flex;align-items:center;gap:12px;color:#F2F0EB;text-decoration:none}
.ll-foot-tile{width:36px;height:36px;border-radius:9px;background:#F2F0EB;display:grid;place-items:center;flex:none}
.ll-foot-tile svg{width:24px;height:24px}
.ll-foot-tile svg g{fill:none;stroke:#111;stroke-width:24;stroke-linecap:round}
.ll-foot-word{font-weight:700;font-size:15px;letter-spacing:.22em;text-transform:uppercase}
.ll-foot-tag{font-family:var(--mono,"DM Mono",ui-monospace,Menlo,monospace);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8B8A86;margin-top:14px}
.ll-foot-col{font-family:var(--mono,"DM Mono",ui-monospace,Menlo,monospace);font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:2.2;display:flex;flex-direction:column;align-items:flex-start}
.ll-foot-col .h{color:#8B8A86;font-size:9.5px;letter-spacing:.16em;margin-bottom:4px;line-height:2.2}
.ll-foot-col a,.ll-foot-col button{color:#F2F0EB;text-decoration:none;font:inherit;letter-spacing:inherit;text-transform:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.ll-foot-col a:hover,.ll-foot-col button:hover{text-decoration:underline;text-underline-offset:3px}
.ll-foot a:focus-visible,.ll-foot button:focus-visible{outline:2px solid #F2F0EB;outline-offset:3px;border-radius:2px}
.ll-foot-col .c{color:#8B8A86}
.ll-foot [hidden]{display:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .ll-foot{border-top:1px solid var(--rule,#2A2A2E)}}
:root[data-theme="dark"] .ll-foot{border-top:1px solid var(--rule,#2A2A2E)}
@media(max-width:899px){
  .ll-foot{margin-top:48px}
  .ll-foot-in{grid-template-columns:1fr 1fr;gap:28px 20px;padding:30px 18px 36px}
  .ll-foot-brand{grid-column:1 / -1}
}
@media(max-width:374px){.ll-foot-in{grid-template-columns:1fr}}
/* ---- the legal lines (10/8, Claude Design 52.1): the company credit under the tagline, and a full-width fine-print strip under the
   columns — © · Privacy · Terms · Official rules · Support · the support address, then the disclaimer. Phones: the © line, a 2×2 grid of
   44px links, a 44px email row, the disclaimer. The strip is the footer's last line now, so it carries the bar clearance below. ---- */
.ll-foot-in{padding-bottom:0}
.ll-foot-credit{margin:14px 0 0;font-size:13px;line-height:1.5;color:#C8C6C0;max-width:32ch;text-wrap:pretty}
.ll-foot-credit b{font-weight:700;color:#F2F0EB}
.ll-foot-fine{max-width:1280px;margin:0 auto;padding:28px 40px 0;box-sizing:border-box}
.ll-foot-fine .in{border-top:1px solid #3A3A40;padding:16px 0 calc(44px + var(--ll-foot-clear,0px));display:grid;gap:8px}
.ll-foot-fine .row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:4px;font:400 10px/1.6 var(--mono,"DM Mono",ui-monospace,Menlo,monospace);letter-spacing:.1em;text-transform:uppercase;color:#8B8A86}
.ll-foot-fine .row i{font-style:normal}
.ll-foot-fine .lk{display:contents}
.ll-foot-fine a{color:#F2F0EB;text-decoration:none}
.ll-foot-fine a:hover{text-decoration:underline;text-underline-offset:3px}
.ll-foot-fine .em{text-transform:none;letter-spacing:.04em}
.ll-foot-fine .dis{margin:0;font-size:12px;line-height:1.5;color:#8B8A86;text-wrap:pretty}
@media(max-width:899px){
  .ll-foot-in{padding:30px 18px 0}
  .ll-foot-credit{margin-top:12px;max-width:none}
  .ll-foot-fine{padding:26px 18px 0}
  .ll-foot-fine .in{padding:14px 0 calc(36px + var(--ll-foot-clear,0px));display:block}
  .ll-foot-fine .row{display:block}
  .ll-foot-fine .row>i{display:none}
  .ll-foot-fine .co{display:block}
  .ll-foot-fine .lk{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;margin-top:6px}
  .ll-foot-fine .lk i{display:none}
  .ll-foot-fine .lk a,.ll-foot-fine .em{min-height:44px;display:flex;align-items:center;border-bottom:1px solid #3A3A40;font-size:11px;letter-spacing:.1em}
  .ll-foot-fine .em{font-size:12px;letter-spacing:.04em}
  .ll-foot-fine .dis{margin-top:14px}
}
/* /guides below 1024: the footer rides at the end of main#gd's scroll (ll-shell.js moves it), edge to edge */
@media(max-width:1023px){body.guides .gd>.ll-foot{margin:44px -18px -18px}}
/* phones: the tab is the bare word, like the other links (the caret made /blog and /shop overflow at 320) */
@media(max-width:767px){.nav .nav-soon>summary::after{display:none}}

/* ---- More (9/29, Lake: "on the phone screen, you can't see the full top menu … hit a 'More' button"): phones only. Below 768 the row is
   Roulette · Games · Wire · Join · More; Demos · Rules · Guides · Blog · Shop (and the page's own tab among them) live behind More. ---- */
.nav .nav-more{display:none}
.nav .nav-more .nav-menu{left:auto;right:-8px;min-width:150px}
.nav .nav-more .nav-menu .soon{padding-top:8px;border-top:1px solid var(--rule);margin-top:4px}
@media(max-width:767px){
  .mast .nav .nav-more{display:block}
  .mast .nav>a[href="/demos"],.mast .nav>a[href="demos.html"],.mast .nav>a[href="/rules"],.mast .nav>a[href="rules.html"],.mast .nav>a[href="/guides"],.mast .nav>a[href="guides.html"],.mast .nav>a[href="/blog"],.mast .nav>a[href="blog.html"],.mast .nav>a[href="/shop"],.mast .nav>a[href="shop.html"],.mast .nav .nav-soon{display:none}
}
/* the games sub-nav on phones: Roulette joins Wire behind More (it's the first item in that page's More) */
@media(max-width:429px){.mast .nav:has(.nav-more[data-sub])>a[href="roulette.html"]{display:none}}
/* the game pages hide their row's Wire link below 430 (.mast .nav a[href="wire.html"], inline); its copy inside More stays */
.mast .nav .nav-more .nav-menu a[href="wire.html"]{display:block}

/* ---- Sign up / Sign in (10/9, Lake: "the button on the top right should say sign up or sign in … Shouldn't it be a drop-down? why would
   someone be asked to sign up again after they've already signed up?"): signed out, the top-right tab opens both; signed in, account.js hides
   it for the crest. Wide screens read SIGN UP / SIGN IN ▾; below 1240 (and on phones) the bare word — account.js makes it Sign in on a
   device that has signed in before. The menu is the nav menus' card. ---- */
.mast .sign-menu{position:relative}
.mast .sign-menu>summary{list-style:none;cursor:pointer;white-space:nowrap}
.mast .sign-menu>summary::-webkit-details-marker{display:none}
.mast .sign-menu>summary::after{content:"▾";margin-left:5px;font-size:.85em}
.mast .sign-menu>summary .l{display:none}
.mast .sign-pop{position:absolute;top:calc(100% + 10px);right:-8px;z-index:40;display:grid;gap:2px;min-width:150px;padding:6px;background:var(--card);border:1px solid var(--rule);border-radius:10px;box-shadow:0 18px 34px -20px rgba(0,0,0,.45)}
.mast .sign-pop a{display:block;padding:9px 10px;border-radius:7px;color:var(--ink2,#4A4A48);text-decoration:none;white-space:nowrap}
.mast .sign-pop a:hover,.mast .sign-pop a:focus-visible{background:var(--paper);color:var(--ink);outline:none}
.mast .sign-pop a[aria-current]{color:var(--ink);background:var(--paper)}
@media(min-width:1240px){.mast .sign-menu>summary .l{display:inline}.mast .sign-menu>summary .s{display:none}}
@media(max-width:767px){.mast .sign-menu>summary::after{display:none}}

/* ---- the account menu (9/29): under the top-right account button on every page — Your account · Console (commissioner) · Sign out ---- */
.acct-menu{position:fixed;z-index:80;display:grid;gap:2px;min-width:168px;padding:6px;background:var(--card);border:1px solid var(--rule);border-radius:10px;box-shadow:0 18px 34px -20px rgba(0,0,0,.45);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.acct-menu a,.acct-menu button{display:block;width:100%;margin:0;text-align:left;padding:9px 10px;border-radius:7px;border:0;background:none;color:var(--ink2,#4A4A48);font:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:none;white-space:nowrap;cursor:pointer}
.acct-menu a:hover,.acct-menu a:focus-visible,.acct-menu button:hover,.acct-menu button:focus-visible{background:var(--paper);color:var(--ink);outline:none}
.acct-menu a[aria-current]{color:var(--ink);background:var(--paper)}
.acct-menu button:disabled{opacity:.5;cursor:default}

/* ---- 54 · the consent line + 52.12 · the phone foot rows (10/8; live October 9, 2026) — /signin step A and /signup. Here rather than in
   site.css so this round never bumps site.css's version on every page (the self-host-fonts branch bumps it too). /join's line is in join.css.
   The line: DM Mono sentence case under the email field; --eyebrow ink (4.6:1 light · 5.4:1 dark); the two links ink, underlined, with a
   padded hit area that doesn't move the line. The foot rows: "© 2026 Context Creative LLC" left, "Rules · Privacy" right, both links. ---- */
.si-consent{margin:12px 0 2px;font:400 10.5px/1.6 var(--mono);color:var(--eyebrow);text-wrap:balance}
.su .si-consent{margin:12px 0 0}
.si-consent a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;padding:12px 0}
.si-foot,.su .foot{color:var(--eyebrow);align-items:baseline;gap:12px}
.si-foot a,.su .foot span+span a{color:inherit;text-decoration:underline;text-underline-offset:2px;padding:14px 0}
.si-foot span:last-child,.su .foot span:last-child{white-space:nowrap}