/* ============================================================================
   site.css — chrome every page wears, whatever it is showing.
   Top bar + account menu, buttons, herald, tool cards, the Arms/Campaign charts, bands, the shared empty state, the demo banner, the game player, the arms toast.
   Order in this file: DESKTOP, then MOBILE, then MOBILE-LANDSCAPE.
   ========================================================================== */
/* --- top brand bar (den.js injects the crest + a rotating home link) --- */
.den-bar{display:flex;align-items:center;gap:11px;max-width:1080px;margin:0 auto;
  padding:14px 24px 14px 8px;font-family:var(--den-head);flex-wrap:wrap}  /* small left pad: crest hugs the edge */
.den-bar .crest{flex:0 0 auto;display:block}
.den-bar .wm{font-size:22px;color:var(--den-ink);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px}
.den-bar .wm b{color:var(--den-gold)}
/* back-nav is an icon breadcrumb: an optional parent step, then the grounds emblem (always) */
.den-bar .den-nav{margin-left:auto;display:inline-flex;align-items:center;gap:12px}
.den-bar .den-nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.den-bar .up,.den-bar .home{opacity:.85;transition:opacity .15s}
.den-bar .up:hover,.den-bar .home:hover{opacity:1}
.den-bar .up img,.den-bar .home-emblem{display:block;width:26px;height:26px}
/* Desktop room nav (2026-08-24) — the five rooms made first-class, roomier than the mobile register
   (full text labels, no bottom-bar constraint). Supersedes the icon breadcrumb on desktop: retired
   below, since a Grounds room link already gets you home and every other room is now one click away.
   Hidden/shown by paintAccount exactly like .coin/.den-acct — it belongs to a session. Mobile keeps
   the breadcrumb and gets the register instead (max-width:560px block below). Design record:
   _Overview/chessden/design/desktop-nav-mockup.html. */
.den-bar .den-nav .up,.den-bar .den-nav .home{display:none}
.den-bar .rooms{display:flex;gap:4px;margin-left:auto}
.den-bar .room{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;
  color:var(--den-mut);font-size:14px;font-weight:600;text-decoration:none;border:1px solid transparent;
  font-family:'Segoe UI',system-ui,sans-serif;min-height:44px}
.den-bar .room .ic{font-size:16px;line-height:1}
.den-bar .room.on{color:var(--den-gold);background:rgba(224,179,76,.1);border-color:rgba(224,179,76,.25)}
.den-bar .room.center{color:var(--den-parch2)}
.den-bar .room.center.on{color:var(--den-gold)}
.den-bar .room:hover:not(.on){color:var(--den-ink);background:rgba(255,255,255,.04)}
/* Pricing link — the one bar entry a signed-OUT visitor gets (hidden once signed in; the menu carries Coin) */
.den-bar .coin{color:var(--den-gold);font-size:14.5px;font-weight:700;letter-spacing:.2px;opacity:.9}
.den-bar .coin:hover{opacity:1;text-decoration:underline}
/* signed-in: the account MENU rides up here in the bar — a compact trigger + dropdown (mountAccountBar) */
/* the account chip rides just right of the icon nav (which now carries the bar's margin-left:auto) */
.den-bar .den-acct{margin-left:14px;position:relative;font-family:'Segoe UI',system-ui,sans-serif}
.den-acct-trigger{font:inherit;font-size:14px;cursor:pointer;background:transparent;border:1px solid var(--den-line);
  border-radius:9px;padding:8px 12px;min-height:44px;color:var(--den-ink);display:flex;align-items:center;gap:8px}
.den-acct-trigger:hover{border-color:var(--den-gold2)}
.den-acct-who{color:var(--den-mut)}
.den-acct-caret{color:var(--den-gold);font-size:10px}
.den-acct-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:224px;background:var(--den-bg2);
  border:1px solid var(--den-line);border-radius:10px;padding:6px;display:none;z-index:80;box-shadow:0 16px 36px rgba(0,0,0,.55)}
.den-acct-menu.open{display:block}
.den-acct-item{display:block;width:100%;text-align:left;font:inherit;font-size:14px;background:transparent;border:0;
  border-radius:7px;padding:11px;min-height:44px;box-sizing:border-box;color:var(--den-ink);cursor:pointer;text-decoration:none}
.den-acct-item:hover{background:#2a2238;color:var(--den-gold)}
.den-acct-item .den-gloss{display:block;color:var(--den-mut);font-size:11.5px;margin-top:1px}
.den-acct-item:hover .den-gloss{color:var(--den-parch2)}
/* rank header at the top of the dropdown — the subscription level, moved off the always-visible chip */
.den-acct-plan{padding:7px 11px 9px;margin-bottom:4px;border-bottom:1px solid var(--den-line)}
.den-acct-plan .den-gloss{display:block;color:var(--den-mut);font-size:11.5px}
.den-acct-plan b{display:block;color:var(--den-gold);font-family:var(--den-head);font-weight:400;font-size:16px;line-height:1.15}
/* jargon glosses — hover/focus any [data-gloss] element to see plain wording in a small popup (den.js) */
.den-tip{position:fixed;z-index:200;background:#100b18;color:var(--den-ink);border:1px solid var(--den-gold2);
  border-radius:8px;padding:7px 11px;font:400 12.5px/1.45 'Segoe UI',system-ui,sans-serif;max-width:260px;
  box-shadow:0 10px 26px rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .1s;pointer-events:none}
.den-tip.on{opacity:1;visibility:visible}
[data-gloss]{cursor:help}
button[data-gloss],a[data-gloss]{cursor:pointer}

/* --- buttons --- */
.den-btn{font:inherit;cursor:pointer;border-radius:10px;padding:12px 22px;font-weight:800;
  font-size:15.5px;letter-spacing:.3px;border:1px solid #e0505f;
  background:linear-gradient(180deg,var(--den-crim),var(--den-crim2));color:#ffe9e2;
  box-shadow:0 5px 18px rgba(200,40,60,.32)}
.den-btn:hover{filter:brightness(1.12)}
.den-btn.ghost{background:transparent;color:var(--den-gold);border:1px solid var(--den-gold2);box-shadow:none}
.den-btn.gold{background:linear-gradient(180deg,var(--den-gold),var(--den-gold2));color:#241302;border-color:#f0cd77}

/* --- herald ticker (rotating cryptic proclamations) --- */
.den-herald{background:#241d33;border:1px solid var(--den-line);border-radius:999px;overflow:hidden;
  white-space:nowrap;font-size:13.5px;padding:8px 0;color:var(--den-mut);font-style:italic}
.den-herald div{display:inline-block;animation:den-tick 30s linear infinite;padding-left:100%}
.den-herald:hover div{animation-play-state:paused}
@keyframes den-tick{to{transform:translateX(-100%)}}
.den-herald b{color:var(--den-gold);font-style:normal}

/* --- tool cards ("a.k.a." real name) --- */
.aka{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--den-mut);margin:0 0 10px}
/* on-point movie epigraph under a tool title — a little framed plaque, so the cameo has an edge to
   hang off of. overflow stays visible: the whole point is the photo escaping the frame. */
.den-epigraph{font-family:'IM Fell English',Georgia,serif;font-style:italic;color:var(--den-gold);
  font-size:15px;line-height:1.5;margin:14px 0 22px;padding:11px 18px;
  background:linear-gradient(160deg,rgba(224,179,76,.06),rgba(200,40,60,.05));
  border:1px solid var(--den-line);border-radius:4px;
  position:relative;overflow:visible;opacity:.95;min-height:1.2em}
.den-epigraph:empty{display:none;border:none;background:none;margin:2px 0 14px;padding:0}
.den-epigraph .den-src{color:var(--den-mut);font-size:.85em;font-style:normal}

/* --- cameo: a tiny "photo" of the quote's source, tilted and pinned to the frame's corner like a
   snapshot taped to the side of a mirror. No real portraits — a monogram card instead (most sources
   are copyrighted characters, or real people we have no licensed photo of); den.js can drop a real
   <img> in per source later via its PORTRAITS override. --- */
.den-cameo{position:absolute;top:-13px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:var(--den-parch);border:2px solid var(--den-parch2);border-radius:2px;
  box-shadow:0 6px 14px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.35) inset;
  font-family:'Segoe UI',sans-serif;font-size:11px;font-weight:800;letter-spacing:.02em;
  z-index:2;pointer-events:none}
.den-cameo::before{content:"";position:absolute;top:-6px;left:50%;margin-left:-9px;
  width:18px;height:7px;border-radius:1px;
  background:linear-gradient(180deg,var(--den-gold),var(--den-gold2));opacity:.9}
.den-cameo img{width:100%;height:100%;object-fit:cover;border-radius:1px}
.den-cameo.img{width:42px;height:42px;top:-16px}   /* real photos get more presence than monograms */
/* trial cards — crimson-bar plaques (the "A Knight's Tale" mockup style). Reused on the landing grid AND
   the war-room dashboard; the dashboard adds .held (entitled but not built yet) and .locked (Pro on Free). */
.den-toolgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.den-tool{background:var(--den-bg2);border:1px solid var(--den-line);border-radius:4px;
  padding:20px 20px 18px;position:relative;text-decoration:none;display:flow-root;color:inherit;transition:.12s}
.den-tool::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;
  background:var(--den-crim);border-radius:0 3px 3px 0}
.den-tool:hover{border-color:var(--den-gold2);transform:translateY(-2px)}
.den-tool h3{margin:0 0 2px;font-size:21px;font-family:var(--den-head);font-weight:400;color:var(--den-gold);padding-right:56px}
.den-tool .aka{margin:0 0 10px}
.den-tool p{margin:0;color:var(--den-mut);font-size:14.5px}
/* ChatGPT illustration medallion, echoing the pricing tier-badge; text wraps beside it */
.den-tool-ico{float:left;width:72px;height:72px;margin:1px 15px 6px 0;border-radius:10px;object-fit:cover;
  border:1px solid var(--den-gold2);background:var(--den-bg);box-shadow:0 4px 12px rgba(0,0,0,.4)}
.den-tool:hover .den-tool-ico{border-color:var(--den-gold)}
.den-tool.locked{opacity:.62}
.den-tool.held{opacity:.5}
.den-tool.held::before{background:var(--den-gold2)}
.den-tool.held:hover{transform:none;border-color:var(--den-line)}
.den-tool .seal{position:absolute;top:14px;right:14px;font-size:11px;font-weight:800;letter-spacing:.1em;
  border-radius:999px;padding:3px 10px;font-family:'Segoe UI',sans-serif}
.den-tool .seal.free{background:#26331a;color:#9ede63;border:1px solid #3f5a25}
.den-tool .seal.pro{background:#2a1b40;color:#c9a6ff;border:1px solid #4a3568}
/* a live count in the same corner as a seal — a number, not a rank, so it stays neutral */
.den-tool .seal.count{background:#231d33;color:var(--den-gold);border:1px solid var(--den-gold2);letter-spacing:.04em}

/* §e card face: the week's progress dots (top) and the streak heraldry (bottom) on each grounds tile.
   The dot ladder, matching the app's: unseen -> the slot's STAR BAND where the server sent one -> settled ->
   mastered. Star colors are the deck runner's own ramp (drills.css .dot.s0-s3), never a second palette. */
.cf-dots{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 8px}
.cf-dot{width:7px;height:7px;border-radius:50%;border:1px solid var(--den-gold2);opacity:.55}
.cf-dot.on,.cf-dot.s3{background:var(--den-gold);border-color:var(--den-gold);opacity:1}
.cf-dot.s2{background:#3fb950;border-color:#3fb950;opacity:1}
/* 1 star is BLUE (Brian, 2026-08-22) — the board's own partial-credit blue, not a new hue. */
.cf-dot.s1{background:#7cc4ff;border-color:#7cc4ff;opacity:1}
.cf-dot.s0{background:#f85149;border-color:#f85149;opacity:1}
.cf-dot.mastered{background:var(--den-parch);border-color:var(--den-gold);opacity:1;box-shadow:0 0 3px rgba(224,179,76,.9)}
.cf-streak{clear:both;margin-top:10px;font-size:16px;line-height:1;letter-spacing:1px}
.cf-streak.cf-argent .cf-pc{color:var(--den-parch)}                                   /* your pieces — light */
.cf-streak.cf-sable .cf-pc{color:#141018;text-shadow:0 0 2px rgba(240,230,210,.75)}   /* the enemy — dark, haloed */
.cf-x{font-size:12px;margin-left:3px;vertical-align:2px;color:var(--den-mut)}

/* §c the Approach: a compact strip under the drill board — replay, skip, and a chip per road */
.ap-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 0}
.ap-play{background:transparent;color:var(--den-gold);border:1px solid var(--den-gold2);border-radius:999px;
  padding:5px 14px;font-size:13px;cursor:pointer;font-family:'Segoe UI',sans-serif}
.ap-play:hover{border-color:var(--den-gold);background:rgba(224,179,76,.08)}
.ap-roads{display:inline-flex;gap:4px}
.ap-road{width:24px;height:24px;border-radius:50%;border:1px solid var(--den-line);background:var(--den-bg2);
  color:var(--den-mut);cursor:pointer;font-size:12px}
.ap-road.on{border-color:var(--den-gold);color:var(--den-gold)}
.ap-hint{color:var(--den-mut);font-size:12px;font-style:italic}

/* "Recommended for you" spotlight — the personalizer's next pick, above the grid. Gold bar (vs the
   tools' crimson) sets it apart; .pinned gets a steadier double-rule so a held suggestion reads as fixed. */
.den-rec{display:block;background:var(--den-bg2);border:1px solid var(--den-gold2);border-radius:4px;
  padding:16px 20px 15px;margin:0 0 18px;position:relative;text-decoration:none;color:inherit;transition:.12s}
.den-rec::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;
  background:var(--den-gold);border-radius:0 3px 3px 0}
.den-rec:hover{border-color:var(--den-gold);transform:translateY(-2px)}
.den-rec .rec-badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--den-gold);font-family:'Segoe UI',sans-serif;margin:0 0 4px}
.den-rec h3{margin:0 0 3px;font-size:22px;font-family:var(--den-head);font-weight:400;color:var(--den-gold)}
.den-rec p{margin:0;color:var(--den-mut);font-size:14.5px}
.den-rec.pinned{border-width:2px;box-shadow:inset 0 0 0 1px var(--den-gold2)}

/* The Coat of Arms — the war-room skill radar (hand-rolled SVG; three views share one chart) */
.arms{margin:26px 0}
.arms-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.radar-tabs{display:flex;gap:6px}
.radar-tabs .rt{font:inherit;font-size:13px;min-height:34px;padding:6px 13px;cursor:pointer;border-radius:999px;
  background:transparent;border:1px solid var(--den-line);color:var(--den-mut);font-family:'Segoe UI',sans-serif}
.radar-tabs .rt:hover{border-color:var(--den-gold2);color:var(--den-ink)}
.radar-tabs .rt.on{background:#241d33;border-color:var(--den-gold2);color:var(--den-gold)}
.radar{display:block;width:100%;max-width:430px;height:auto;margin:2px auto 0}
.radar .rg{fill:none;stroke:var(--den-line);stroke-width:1}
.radar .rs{stroke:var(--den-line);stroke-width:1}
.radar .rs.lk{stroke-dasharray:3 4;opacity:.55}          /* a mark this tier never earned */
.radar .rl{fill:var(--den-mut);font-size:12.5px;font-family:'Segoe UI',sans-serif}
.radar .rl.lk{opacity:.55}
.radar .rp{fill:rgba(224,179,76,.20);stroke:var(--den-gold);stroke-width:2;stroke-linejoin:round}
.radar .rpPrev{fill:none;stroke:var(--den-mut);stroke-width:1.5;stroke-dasharray:5 4;opacity:.8}
.radar .rd{fill:var(--den-gold)}
/* the whole quarter is the tap target — the grid and the plotted shape must not swallow the tap */
.radar .rg,.radar .rs,.radar .rp,.radar .rpPrev,.radar .rd{pointer-events:none}
.radar .rw{fill:transparent;cursor:pointer}
.radar .rl.link{fill:var(--den-gold);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.arms-note{margin:8px 0 0;color:var(--den-mut);font-size:13.5px;text-align:center}
.arms-note b{color:var(--den-gold)}
/* --- Thy Campaign: hand-rolled longitudinal charts (rating line / results bars / skill arcs) --- */
.camp{display:block;width:100%;max-width:640px;height:auto;margin:2px auto 0}
.camp .cg{stroke:var(--den-line);stroke-width:1}
.camp .cl{fill:var(--den-mut);font-size:11px;font-family:'Segoe UI',sans-serif}
.camp .cp{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.camp .cd{stroke:var(--den-bg2);stroke-width:1}
.camp .cband{fill:rgba(224,179,76,.13);stroke:none}          /* rating min–max band */
.camp .bw{fill:var(--den-good)}                              /* results: won / drawn / lost */
.camp .bd{fill:var(--den-mut)}
.camp .bl{fill:var(--den-crim)}
.camp-pick{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:0 0 8px}
.camp-pick .cs{font:inherit;font-size:12px;min-height:30px;padding:4px 11px;cursor:pointer;border-radius:999px;
  border:1px solid var(--den-line);background:transparent;color:var(--den-mut)}
.camp-pick .cs.on{background:#241d33;border-color:var(--den-gold2);color:var(--den-gold)}
.camp-legend{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}
.arms-note .key{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:baseline}
.arms-note .key.bw{background:var(--den-good)}
.arms-note .key.bd{background:var(--den-mut)}
.arms-note .key.bl{background:var(--den-crim)}

/* --- misc bands --- */
.den-chant{background:linear-gradient(120deg,var(--den-crim2),var(--den-crim));border-radius:8px;
  padding:34px 40px;text-align:center;box-shadow:0 18px 44px rgba(200,40,60,.22);
  position:relative;overflow:visible}
.den-chant .q{font-size:28px;margin:0 0 8px;color:#ffe9e2;font-family:var(--den-head);font-weight:400}
.den-chant .a{color:#f2b9b0;font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.den-decree{background:var(--den-bg2);border:1px dashed var(--den-gold2);border-radius:8px;
  padding:18px 24px;color:var(--den-mut);font-size:13.5px;font-style:italic;text-align:center}
.den-decree b{color:var(--den-gold);font-style:normal}

/* --- shared "not analyzed yet" empty state used by the viewers --- */
.den-empty{display:none;background:var(--den-bg2);border:1px dashed var(--den-gold2);border-radius:12px;
  padding:22px 24px;color:var(--den-ink);margin:18px 0;font-size:15px}
.den-empty a{color:var(--den-gold)}

/* --- staged-demo banner (den.js demoBanner: a gated trial serving /demo sample data) --- */
.den-demo{max-width:1080px;margin:12px auto 0;padding:12px 16px;display:flex;gap:16px;align-items:center;
  justify-content:space-between;flex-wrap:wrap;background:var(--den-bg2);border:1px solid var(--den-gold2);
  border-left:4px solid var(--den-gold);border-radius:10px;font-size:14.5px;color:var(--den-ink);line-height:1.5}
.den-demo b{color:var(--den-gold)}
.den-demo .den-demo-copy{flex:1 1 340px}
.den-demo .den-demo-note{color:var(--den-mut);font-style:italic}
.den-demo .den-btn{flex:0 0 auto;white-space:nowrap;text-decoration:none}

/* ---- shared game player (Den.openPlayer) ---- */
/* Every popup: the way out is pinned, and a panel taller than the screen scrolls under it. */
.den-x{position:fixed;top:10px;right:10px;z-index:2;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--line,#3a3147);border-radius:10px;background:rgba(20,16,30,.86);color:var(--ink,#f4ecdc);font-size:26px;line-height:1;cursor:pointer}
.den-x:hover{background:rgba(58,49,71,.94)}

.den-player{display:flex;position:fixed;inset:0;z-index:60;overflow-y:auto;overscroll-behavior:contain;background:rgba(10,8,16,.82);padding:10px}
.den-player .dp-panel{background:var(--card,#201a2b);border:1px solid var(--line,#3a3147);border-radius:16px;padding:14px;max-width:min(96vw,460px);width:100%;margin:auto;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.den-player .dp-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;font-size:14px;color:var(--ink,#f4ecdc);position:sticky;top:0;z-index:1;background:var(--card,#201a2b)}
.den-player .dp-foot{display:flex;justify-content:flex-end;align-items:center;margin-top:8px;font-size:14px;color:var(--ink,#f4ecdc)}
.den-player .dp-pl b{color:var(--gold,#e0b34c);font-variant-numeric:tabular-nums;margin:0 5px}
.den-player .dp-pl .dp-end{font-style:italic;color:var(--accent2,#c8283c);margin:0 5px}
.den-player .dp-pl .dp-end:empty{display:none}
.den-player .dp-x{background:none;border:none;color:var(--mut,#a89a8a);font-size:26px;line-height:1;cursor:pointer;padding:0;flex:0 0 auto;width:44px;height:44px;margin:-6px -8px -6px 0}
.den-player .dp-boardwrap{display:flex;align-items:stretch;justify-content:center;gap:4px;margin:0 auto;width:fit-content;max-width:100%}
.den-player .dp-clk{position:relative;width:9px;background:#20263a;border:1px solid var(--line,#3a3147);border-radius:6px;display:flex;align-items:flex-end;overflow:visible;flex:0 0 auto}
.den-player .dp-clk > i{display:block;width:100%;height:100%;border-radius:5px;background:linear-gradient(180deg,#ff7a45,#f5b23e);transition:height .15s linear}
/* The advantage bar is YOURS: your share, in your color, always growing from the bottom — the end of the board
   you are sitting at — over the opponent's color as the track. Not white's share anchored to white's end, which
   is what it drew until 2026-08; the eval number the pages print beside it has always been player-POV. */
.den-player .dp-adv{position:relative;width:9px;border:1px solid var(--line,#3a3147);border-radius:6px;display:flex;align-items:flex-end;overflow:hidden;flex:0 0 auto}
.den-player .dp-adv > i{display:block;width:100%;height:50%;transition:height .15s linear}
.den-player .dp-adv.me-white{background:#1b1a20}
.den-player .dp-adv.me-white > i{background:#ece6d6}
.den-player .dp-adv.me-black{background:#ece6d6}
.den-player .dp-adv.me-black > i{background:#241f2b}
.den-player .dp-board{width:min(82vw,380px);height:min(82vw,380px);display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border:6px solid var(--gold,#e0b34c);border-radius:6px;overflow:hidden;flex:0 0 auto}
.den-player .dp-sq{display:flex;align-items:center;justify-content:center;position:relative}
.den-player .dp-sq.l{background:var(--lt,#eeeed2)}.den-player .dp-sq.d{background:var(--dk,#769656)}
.den-player .dp-sq.to{box-shadow:inset 0 0 0 3px #f6d34a}
.den-player .dp-sq.from::before,.den-player .dp-sq.to::before{content:'';position:absolute;inset:0;background:#f6d34a;opacity:.30}
.den-player .dp-sq.from::after{content:'';position:absolute;left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-50%);border:3px solid #f6d34a;border-radius:50%;box-sizing:border-box}
.den-player .dp-sq.chk{box-shadow:inset 0 0 0 4px #e5484d}
.den-player .dp-sq.chk.l{background:#f0a9a9}
.den-player .dp-sq.chk.d{background:#cf6a6a}
.den-player .dp-fate{position:relative;z-index:1;font-size:min(7.5vw,34px);line-height:1}
.den-player .dp-pc{position:relative;z-index:1;width:90%;height:90%;pointer-events:none}
.den-player .dp-meta{text-align:center;margin:8px 0 6px;font-size:15px;color:var(--ink,#f4ecdc);min-height:22px}
.den-player .dp-meta .dp-sub{color:var(--mut,#a89a8a);font-size:13px}
.den-player .dp-seek{width:100%;margin:2px 0 10px}
.den-player .dp-ctrls{display:flex;gap:8px;justify-content:center;align-items:center}
.den-player .dp-ctrls button{padding:8px 14px;font-size:16px;min-width:44px;background:var(--btn,#241d33);color:var(--ink,#f4ecdc);border:1px solid var(--line,#3a3147);border-radius:9px;cursor:pointer}
.den-player .dp-ctrls button.primary{background:var(--gold,#e0b34c);color:#241302;border-color:var(--gold,#e0b34c)}
.den-player .dp-ctrls select{padding:7px 8px;border-radius:8px;background:#232a38;color:var(--ink,#f4ecdc);border:1px solid var(--line,#3a3147)}

/* ---- The Roll of Arms herald toast (Den.cryArms) — shared by the war room, the weekly viewer and the Lineup ---- */
/* the herald toast: cried once, then gone */
.armstoast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:60;background:#201a2b;
  border:1px solid var(--gold);border-radius:12px;padding:12px 18px;box-shadow:0 10px 34px rgba(0,0,0,.55);
  max-width:min(92vw,460px);animation:armsin .35s ease}
.armstoast b{font-family:'Pirata One',Georgia,serif;color:var(--gold);font-size:17px;font-weight:400;display:block}
.armstoast span{font-size:13px;color:var(--mut)}
@keyframes armsin{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------------------------------------------------------------------------
   MOBILE LANDSCAPE. Height is the scarce axis here, so sizes come off dvh/cqh
   rather than vw. Keyed on orientation + a height cap so laptops are excluded.
   --------------------------------------------------------------------------- */
/* Landscape phone — site-wide furniture trim. Every page pays for the epigraph plaque and a
   full-size wordmark; in landscape that is ~80px of a ~350px viewport, so it goes everywhere. */
@media (orientation:landscape) and (max-height:520px){
  /* The bar slims on EVERY landscape page, not just the drills — it is site chrome.
     Filing it under the drill family left a desktop-height bar on reports and lists. */
  /* ONE top row: crest hard left, account chip hard right, the run's dots centred between them.
     The bar carries `margin:0 auto`, and making .wrap a flex COLUMN turned that into CROSS-AXIS
     centering — which is why the wordmark sat mid-bar instead of at the edge. */
  .den-bar{padding:2px 8px;gap:8px;min-height:0;flex-wrap:nowrap;flex:0 0 auto;
    margin:0;max-width:none;width:100%}
  /* A landscape phone is WIDE — often >560px — so it matches the desktop breakpoint above and would
     otherwise show the room nav (which needs real height) while leaving the breadcrumb hidden. Same
     split as portrait: no rooms here, the breadcrumb comes back. */
  .den-bar .rooms{display:none}
  .den-bar .den-nav .up,.den-bar .den-nav .home{display:inline-flex}
  .den-bar .wm{font-size:14px;min-height:0}
  .den-bar .crest{width:18px;height:18px}
  .den-bar .den-nav a,.den-acct-trigger{min-height:0}
  .den-acct-trigger{padding:3px 8px;font-size:12px}
  .den-epigraph{display:none}
  .den-chant{padding:14px 18px}
  .den-chant .q{font-size:19px;margin:0 0 4px}
  .den-toolgrid{gap:8px}
  .den-tool{padding:10px 12px 9px}
  .den-tool h3{font-size:16px;padding-right:40px}
  .den-tool p{font-size:12px}
  .den-tool-ico{width:44px;height:44px;margin:0 10px 4px 0}
  .den-rec{padding:9px 12px;margin:0 0 8px}
  .den-rec h3{font-size:16px}
  .den-rec p{font-size:12px}
  .den-empty{padding:12px 14px;margin:8px 0;font-size:13px}
}

/* ---- site footer: the legal links. NOT .foot — that name is a per-page content footer. ---- */
.den-foot{text-align:center;padding:20px 12px 16px;margin-top:28px;
  border-top:1px solid var(--line);font-size:13px;color:var(--mut)}
.den-foot a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor;padding:0 2px}
.den-foot a:hover{color:var(--gold)}
.den-foot .sep{opacity:.5;padding:0 7px}

/* Hidden wherever the board is fighting for height. */
.den-play .den-foot{display:none}
@media (orientation:landscape) and (max-height:520px){.den-foot{display:none}}

/* ---------------------------------------------------------------------------
   THE REGISTER — the app's five-seat bottom bar, worn by the site on portrait
   phones (den.js mountRegister). Geometry is app.css .ks-tabs verbatim; the
   Grounds seat is wider and bigger-glyphed, the bar's height unchanged.
   Hidden by default: desktop keeps the top bar, landscape keeps its built
   layouts, signed-out keeps the Pricing call. Design record:
   _Overview/chessden/design/mobile-register-mockup.html.
   --------------------------------------------------------------------------- */
.den-register{display:none}
@media (max-width:560px){
  /* The drill shell is a flex COLUMN (drills.css portrait), which turns the bar's margin:0 auto into
     cross-axis centering on a shrink-wrapped box — the same trap the landscape build hit. Full width. */
  body.den-play .den-bar{margin:0;max-width:none;width:100%;flex:0 0 auto}
  /* Desktop's room nav is desktop-only — mobile keeps the icon breadcrumb (undoing the desktop hide
     above) and gets the register at the bottom instead of a second nav row up top. */
  .den-bar .den-nav .up,.den-bar .den-nav .home{display:inline-flex}
  .den-bar .rooms{display:none}
  body.has-register .den-register{position:fixed;left:0;right:0;bottom:0;z-index:70;
    display:flex;background:var(--den-bg2);border-top:1px solid var(--den-line);
    padding-bottom:env(safe-area-inset-bottom,0px)}
  .den-register .seat{flex:1 1 0;min-width:0;background:none;border:0;color:var(--den-mut);
    font:600 9.5px/1.2 'Segoe UI',system-ui,sans-serif;letter-spacing:.2px;
    padding:7px 0 8px;text-align:center;text-decoration:none;cursor:pointer}
  .den-register .seat .ic{display:block;font-size:17px;line-height:1.2}
  .den-register .seat.on{color:var(--den-gold)}
  .den-register .seat.big{flex:1.5 1 0;font-size:10.5px;color:var(--den-parch2)}
  .den-register .seat.big .ic{font-size:25px;line-height:1.1}
  .den-register .seat.big.on{color:var(--den-gold)}
  /* Content clears the bar, and the legal footer yields its seat — Privacy/Terms live behind the Keep. */
  body.has-register{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
  body.has-register .den-foot{display:none}
}
/* Landscape stays register-free: its layouts are height-starved and already built. Hidden-by-default
   makes that free, but the guard is explicit so a wider portrait key can never leak it sideways. */
@media (orientation:landscape) and (max-height:520px){body.has-register .den-register{display:none}
  body.has-register{padding-bottom:0}}
/* Installed (standalone) display: the browser chrome is gone, so the top bar backs the status bar
   and clears the notch. The register already carries the bottom safe-area. */
@media (display-mode:standalone){.den-bar{padding-top:calc(14px + env(safe-area-inset-top,0px))}}

/* "beta" — the tag on a tool or report still in test. Hung off the page's own title, at its right edge:
   every page sheet sets its own .wrap width, so the title is the only anchor that lands correctly on all of
   them. Absolute, so it costs the board no height. Gold like the neutral count seal — beta is a state, not
   an error. */
body.beta h1:first-of-type::after{
  content:'beta';
  /* INLINE, immediately after the title text — not positioned at the h1's right edge, which on a block
     heading is the far side of the whole column. Flowing also means a long title carries it along and wraps
     with it, instead of needing padding reserved to stop the text running underneath. */
  display:inline-block; vertical-align:middle; margin:0 0 .18em .7em;
  /* A transform never affects layout, so the tilt costs the heading no height. */
  transform:rotate(15deg); transform-origin:center;
  font-family:'Segoe UI',sans-serif; font-size:12px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; line-height:1;
  background:#231d33; color:var(--den-gold); border:1px solid var(--den-gold2);
  border-radius:999px; padding:4px 14px;
  box-shadow:0 2px 10px rgba(0,0,0,.45);
  /* Never intercepts a click, never raises the OS copy overlay on a long-press. */
  pointer-events:none; user-select:none; -webkit-user-select:none;
}

/* The "that game has no stored walk" notice — brief, centered, and the reason nothing links off-site. */
.den-nowalk{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:9999;
  max-width:min(92vw,420px);text-align:center;font-family:'Segoe UI',sans-serif;font-size:13px;
  background:#231d33;color:var(--den-ink);border:1px solid var(--den-gold2);border-radius:10px;
  padding:10px 16px;box-shadow:0 6px 26px rgba(0,0,0,.55)}