/* Spellbent.gg theme: teal-to-indigo night, translucent slate panels, cyan accents, system sans titles (600). */
:root {
  --panel: #46464648; --panel-solid: #1b2233; --panel-2: #ffffff0d; --line: #ffffff1f; --text: #eef3f6; --muted: #9fb0bd;
  --cyan: #3fbfb2; --cyan-2: #8fe3da; --cyan-deep: #0f2a2e; --glow: #2a9d93; /* a calm teal, not neon (2026-10-19) */ --violet: #7a5cff; --bad: #ff6b6b; --good: #4fe39a;
  --card-w: clamp(46px, 7.2vh, 92px); --hand-w: clamp(60px, 9.6vh, 116px); --rail-w: 84px;
  --card-h: calc(var(--card-w) * 1.394);
  --display: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; /* titles: the body's sans, set in 600 */
  /* Night: the teal-to-indigo gradient the site had until v0.2, drawn by our product owner (back 2026-10-21: the lit ink read bland) */
  --bg-grad: linear-gradient(45deg, #00212c, #031e31, #040f25, #060824, #0d0042); --bg-base: #040f25;
  color-scheme: dark;
}
/* Themes (Game settings → Table, src/ui/access.js): the page and the accent; Night (the :root values) is the default.
   Every page but the two Plains is a 45° gradient in its own tint, after Night's (our product owner's, back 2026-10-21). Seat colors and mana pips never change with the theme. */
html[data-theme="ember"] { --bg-grad: linear-gradient(45deg, #2a0a0a, #33101a, #3a0f1e, #26082a, #1a0630); --bg-base: #26080f; --cyan: #ff9a5c; --cyan-2: #ffb07a; --glow: #e8672a; --cyan-deep: #3d1608; }
html[data-theme="forest"] { --bg-grad: linear-gradient(45deg, #03201a, #062a20, #0a2a1c, #0a2424, #0b1d2a); --bg-base: #06201a; --cyan: #6be38b; --cyan-2: #8ff0a8; --glow: #2fb85c; --cyan-deep: #0c3018; }
html[data-theme="arcane"] { --bg-grad: linear-gradient(45deg, #160a2e, #1d0c3c, #241048, #170f44, #0a1440); --bg-base: #170c36; --cyan: #b18cff; --cyan-2: #c6a8ff; --glow: #8257f0; --cyan-deep: #24124a; }
/* Light: the one light theme. Beyond the accent it swaps the panel, line and text tokens and the scheme; the block at
   the end of this file recolors what is drawn with fixed dark-theme colors. High contrast keeps its own dark scheme. */
html[data-theme^="light"]:not(.a11y-contrast) { color-scheme: light; --bg-grad: linear-gradient(45deg, #eef4f8, #e8eef5, #e3ebf3, #e6e8f5, #e9e6f6); --bg-base: #e8eef5;
  --panel: #ffffffc4; --panel-solid: #ffffff; --panel-2: #13202b0a; --line: #13202b29; --text: #13202b; --muted: #5b6b78;
  --cyan: #0a8fa3; --cyan-2: #087a8c; --glow: #12b5c9; --cyan-deep: #d6f1f5; --bad: #c8392f; --good: #1f8f55; }
/* The light row: Light's surfaces with each dark theme's accent, darkened enough to read on white, and a tinted page. */
html[data-theme="light-ember"]:not(.a11y-contrast) { --bg-grad: linear-gradient(45deg, #faf1ec, #f8ece8, #f6e8e6, #f4e7ea, #f3e6ee); --bg-base: #f6e9e8; --cyan: #c4572a; --cyan-2: #a8461f; --glow: #e8672a; --cyan-deep: #fbe3d6; }
html[data-theme="light-forest"]:not(.a11y-contrast) { --bg-grad: linear-gradient(45deg, #eef7f1, #eaf4ee, #e7f2ec, #e6f0ef, #e6eff2); --bg-base: #e8f2ed; --cyan: #23894a; --cyan-2: #1b733d; --glow: #2fb85c; --cyan-deep: #d9f2e1; }
html[data-theme="light-arcane"]:not(.a11y-contrast) { --bg-grad: linear-gradient(45deg, #f2eefb, #eeeafa, #ebe7f8, #e8e8f8, #e6e9f7); --bg-base: #ece8f8; --cyan: #6a43d6; --cyan-2: #5833bf; --glow: #8257f0; --cyan-deep: #e8e0fb; }
html[data-theme="light-graphite"]:not(.a11y-contrast) { --bg-grad: linear-gradient(45deg, #f3f4f5, #eff1f2, #eceef0, #e9ebee, #e7e9ec); --bg-base: #eceef0; --cyan: #4a535c; --cyan-2: #3a424a; --glow: #6b757f; --cyan-deep: #e4e7ea; }
/* Plain light: Light's surfaces on a flat neutral page, grey text and accent, no tint at all. */
html[data-theme="light-plain"]:not(.a11y-contrast) { --bg-grad: linear-gradient(#f5f5f5, #f5f5f5); --bg-base: #f5f5f5; --text: #1c1c1c; --muted: #6b6b6b; --line: #00000024; --panel-2: #0000000a; --cyan: #3a3a3a; --cyan-2: #2a2a2a; --glow: #6b6b6b; --cyan-deep: #e8e8e8; }
/* Plain: no color at all, a flat neutral dark page and a grey accent. */
html[data-theme="plain"] { --bg-grad: linear-gradient(#161616, #161616); --bg-base: #161616; --panel-solid: #1e1e1e; --muted: #a3a3a3; --cyan: #d4d4d4; --cyan-2: #ececec; --glow: #a3a3a3; --cyan-deep: #2a2a2a; }
html[data-theme="graphite"] { --bg-grad: linear-gradient(45deg, #0f1114, #14171b, #181b20, #1d2025, #22252b); --bg-base: #15181c; --cyan: #cfd6de; --cyan-2: #e4e9ee; --glow: #9aa4ae; --cyan-deep: #2a2f36; }

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* a component's own display rule must never resurrect a hidden element */
html, body { height: 100%; }
body {
  margin: 0; color: var(--text); font: 14px/1.45 system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  background: var(--bg-grad) fixed, var(--bg-base);
}
a { color: var(--cyan-2); }
/* The spell circle (every theme but the two Plains): the logo's ring redrawn as a hairline engraving (two rings, a
   dial of ticks, five points joined as a pentagon for the five colours), huge and cropped off a corner. A mask painted
   in --cyan-2, the theme's light accent on dark pages and its darker one on light pages, so Ember's is amber and Forest's
   green; fixed, so it never repaints on scroll */
html:not([data-theme="plain"], [data-theme="light-plain"], .a11y-contrast) body::before { content: ''; position: fixed; z-index: -1; pointer-events: none; width: 1240px; height: 1240px; right: -420px; top: -330px;
  background: var(--cyan-2); --spell: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-600 -600 1200 1200' fill='none' stroke='%238fe3da'><circle r='590' stroke-opacity='.14' stroke-width='1.2'/><circle r='548' stroke-opacity='.1'/><circle r='569' stroke-opacity='.16' stroke-width='10' stroke-dasharray='1.2 13'/><circle r='380' stroke-opacity='.07'/><path d='M0-548 521.2-169.3 322.1 443.3-322.1 443.3-521.2-169.3Z' stroke-opacity='.08'/><g fill='%238fe3da' fill-opacity='.22' stroke='none'><circle cy='-548' r='5'/><circle cx='521.2' cy='-169.3' r='5'/><circle cx='322.1' cy='443.3' r='5'/><circle cx='-322.1' cy='443.3' r='5'/><circle cx='-521.2' cy='-169.3' r='5'/></g></svg>"); -webkit-mask: var(--spell) center / contain no-repeat, var(--spell) center / contain no-repeat, var(--spell) center / contain no-repeat;
  mask: var(--spell) center / contain no-repeat, var(--spell) center / contain no-repeat, var(--spell) center / contain no-repeat; /* three times over: one alone barely shows */ }
@media (max-width: 900px) { html:not([data-theme="plain"], [data-theme="light-plain"], .a11y-contrast) body::before { width: 760px; height: 760px; right: auto; top: auto; left: -400px; bottom: -260px; } } /* low and left: clear of the titles */
/* The panels above lay their tint over the page's own base, so the circle never shows through a list or a field; and
   it never draws on the game table, where it competed with the cards (playtests, 2026-10-21) */
body:has(#play:not([hidden]))::before { display: none; }
button, input, select, textarea, .btn, .big {
  font: inherit; color: inherit; background: #0a141f; border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px;
}
/* A dropdown's open list: the OS draws it on white when the select is see-through; give it the theme's surface. */
select option { background-color: var(--panel-solid); color: var(--text); }
button, .btn, .big { cursor: pointer; transition: border-color .15s, background .15s, color .15s, box-shadow .15s; }
button:hover:not(:disabled), .btn:hover, .big:hover { border-color: var(--cyan); }
button:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 2px solid var(--cyan-2); outline-offset: 2px; }
/* Text fields everywhere: a soft border, and on focus the accent with a faint glow instead of a thick outline */
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]), select, textarea { border-color: #ffffff26; border-radius: 6px; padding: 8px 12px; transition: border-color .15s, box-shadow .15s; }
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]):hover, select:hover, textarea:hover { border-color: #ffffff40; }
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]):focus, select:focus, textarea:focus { outline: none; border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); } /* one 2 px accent edge, opened or tabbed to; no outer glow (2026-10-21) */
::placeholder { color: var(--muted); opacity: .75; }
.primary { color: var(--cyan-2); background: var(--cyan-deep); border: 1px solid var(--cyan); font-weight: 600; }
.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--cyan) 18%, var(--cyan-deep)); } /* a fill, not a halo */
.danger:hover:not(:disabled) { border-color: var(--bad); color: var(--bad); }
.chip { padding: 2px 10px; font-size: 12px; border-radius: 4px; }
h1, h2, h3 { margin: 0; font-weight: 600; }
h2 { font-size: 15px; }
.title { font-family: var(--display); font-weight: 600; font-size: 24px; color: #fff; }
.section-title { font-size: 16px; color: #d3d3d3; text-align: center; border-bottom: 2px solid #d3d3d3; width: 150px; margin: 0 auto 10px; padding: 6px; }
.muted { color: var(--muted); }
.bad { color: var(--bad); } .good { color: var(--good); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.field { display: grid; gap: 4px; color: var(--muted); font-size: 13px; }
.field input, .field select { color: var(--text); }
.panel { background: linear-gradient(var(--panel), var(--panel)), var(--bg-base); border-radius: 6px; box-shadow: 0 0 25px #080808; padding: 16px; }

/* Shell: left rail + one screen */
.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail-w); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 0; background: #00000040; border-right: 1px solid var(--line); backdrop-filter: blur(6px);
}
.rail a { display: grid; justify-items: center; gap: 2px; width: 66px; padding: 8px 0; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 12px; }
.rail a svg { width: 24px; height: 24px; fill: currentColor; }
.rail a:hover { color: var(--cyan-2); background: color-mix(in srgb, var(--cyan) 8%, transparent); }
.rail a[aria-current] { color: var(--cyan-2); }
.rail a[aria-current] svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cyan) 70%, transparent)); } /* the page you're on glows */
/* Rail art: your profile's rail art for the game shown (src/ui/rail.js), under a light scrim. railTone measures the art:
   each button sits on its own pill only as opaque as that art needs for 4.5:1 labels (--rail-pill), and a bright art
   (data-tone="dark") drops the scrim for dark labels with a light outline. The art between buttons is never darkened. */
.rail.rail-art { background: linear-gradient(90deg, #050b1640, #050b16a0), var(--rail-art) 40% center / cover no-repeat; border-right-color: color-mix(in srgb, var(--cyan) 35%, transparent); backdrop-filter: none; }
.rail.rail-art a:not([aria-current], .soon, .idle), .rail.rail-art .rail-account:not([aria-current]), .rail.rail-art .rail-friends { color: #dfe8f2; }
.rail.rail-art a, .rail.rail-art .rail-account, .rail.rail-art .rail-friends, .rail.rail-art .game-switch { text-shadow: 0 1px 3px #000; }
.rail.rail-art .rail-friends svg { filter: drop-shadow(0 1px 2px #000); }
.rail.rail-art a[aria-current], .rail.rail-art .rail-account[aria-current] { color: color-mix(in srgb, var(--cyan) 50%, #fff); } /* over the art the page is always dark: light themes' dark teal would vanish */
.rail.rail-art a svg { filter: drop-shadow(0 1px 2px #000); }
.rail.rail-art a[aria-current] svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cyan) 70%, transparent)); }
.rail.rail-art .game-switch span { color: #eef3f6; } .rail.rail-art .game-switch button { color: #c9d4de; } /* light themes' dark text, over the always dark art */
.rail.rail-art[data-tone="dark"] .game-switch :is(span, button) { color: #0b1017; }
/* Pills over the art: dark behind light labels, light behind dark ones; hover makes them a little firmer. */
.rail.rail-art :is(a:not(.rail-logo), .rail-friends, .rail-account, .game-switch) { background: rgb(5 11 22 / var(--rail-pill, 0)); }
.rail.rail-art :is(a:not(.rail-logo, .soon), .rail-friends, .rail-account):hover { background: rgb(5 11 22 / max(var(--rail-pill, 0), .55)); }
.rail.rail-art[data-tone="dark"] { background: var(--rail-art) 40% center / cover no-repeat; }
.rail.rail-art[data-tone="dark"] :is(a:not(.rail-logo), .rail-friends, .rail-account, .game-switch) { background: rgb(244 247 250 / var(--rail-pill, 0)); text-shadow: 0 0 1px #fff, 0 0 3px #fff; }
.rail.rail-art[data-tone="dark"] :is(a:not(.rail-logo, .soon), .rail-friends, .rail-account):hover { background: rgb(244 247 250 / max(var(--rail-pill, 0), .6)); }
.rail.rail-art[data-tone="dark"] :is(a, .rail-friends, .rail-account):not([aria-current]) { color: #0b1017; }
.rail.rail-art[data-tone="dark"] :is(a, .rail-account)[aria-current] { color: color-mix(in srgb, var(--cyan) 30%, #000); font-weight: 600; } /* the page you're on: a deep accent, bold, over a bright art */
.rail.rail-art[data-tone="dark"] :is(a, .rail-friends) svg { filter: drop-shadow(0 0 2px #fff); }
@media (max-width: 900px) { .rail.rail-art[data-tone="dark"] { background: var(--rail-art) center 30% / cover no-repeat; } }
@media (max-width: 900px) { .rail.rail-art { background: linear-gradient(0deg, #050b1660, #050b16b0), var(--rail-art) center 30% / cover no-repeat; border-top-color: color-mix(in srgb, var(--cyan) 35%, transparent); } }
.rail .rail-logo { width: 56px; height: 56px; place-items: center; padding: 0; margin-bottom: 6px; } /* one 56 px slot for art or logo: switching games moves nothing */
.rail .rail-logo svg { width: 56px; height: auto; display: block; } /* not the 24 px rail icons */
/* The game's art as the top icon (src/ui/rail.js): Home's cover, round, close on its subject's face (Eriette's sits at
   51% × 27% of the art); the logo hides. */
.rail .rail-logo.rail-game { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--cyan); background: var(--rail-game) 51% 8% / 300% auto no-repeat; }
.rail .rail-logo.rail-game svg { display: none; }
/* The game switcher: a caption under the game's icon, ‹ MTG ›, no box: the name in small caps between bare chevrons,
   dim until hovered. A fixed width, so switching games moves nothing. */
.game-switch { display: flex; align-items: center; width: 66px; justify-content: space-between; margin: -6px 0 4px; border-radius: 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.game-switch button { padding: 2px 5px; border: 0; border-radius: 0; background: none; color: var(--muted); opacity: .7; font-size: 14px; line-height: 1; }
.game-switch button:hover:not(:disabled) { color: var(--text); opacity: 1; border-color: transparent; }
.game-switch span { flex: 1; padding: 3px 0; text-align: center; color: var(--text); }
.rail a.soon { opacity: .45; cursor: default; }
.rail a.soon:hover { color: var(--muted); background: none; }
.rail a.soon span::after { content: ' · soon'; text-transform: none; }
/* App frame: the window never scrolls; #page (the screen shown and its footer) is the one scrolling area, and only when
   the screen holds more than fits. Screens are as tall as their content; the play screen and the deck room fill #page. */
html, body { height: 100%; }
body { overflow: hidden; }
.page { height: 100dvh; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.page > .site-foot { margin-top: auto; } /* a short screen: the footer rests at the bottom, with nothing to scroll */
.page > .screen { flex: none; }
body.signed-out .page { height: 100dvh; }
.screen { margin-left: var(--rail-w); padding: 16px 20px; }
.room-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.room-bar .title { margin-right: 8px; }
.room-bar .bar-icon { width: 34px; height: 34px; border-radius: 50%; padding: 0; display: inline-grid; place-items: center; font-weight: 700; } /* Action helper (?) and Watch link (eye) */
.room-bar .bar-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.toasts { position: fixed; top: 14px; left: calc(50% + var(--rail-w) / 2); transform: translateX(-50%); z-index: 30; display: grid; gap: 8px; width: min(720px, 90vw); }
.banner { margin: 0; padding: 10px 14px; border: 1px solid var(--cyan); border-radius: 8px; background: #031c26f2; box-shadow: 0 8px 30px #000c; display: flex; gap: 10px; align-items: center; }
.banner.bad { border-color: var(--bad); }

/* Home: the game picker. Slanted panels (a 38 px slant, overlapping by as much) across the screen; the open one (hover,
   focus or tap) grows and shows its buttons on its right side. The art is inline SVG (src/ui/covers.js). */
/* In a contained card, not the whole screen. */
#home:not([hidden]) { display: grid; place-items: center; flex: 1 0 auto; position: relative; } /* the picker sits in the middle of #page, above the footer */
.home-version { position: absolute; top: 8px; right: 14px; display: flex; align-items: center; gap: 6px; padding: 2px 4px; border: 0; background: none; color: var(--muted); font: 12px var(--display); cursor: pointer; } /* "What's new · v0.2.1": it says what it opens (playtests, 2026-10-21) */
/* What's new (src/ui/whatsnew.js): newest release open, older ones folded. */
.ui-dialog.wn-dialog { width: min(640px, 94vw); }
.wn-release { display: grid; gap: 8px; }
.wn-older { padding-top: 10px; border-top: 1px solid var(--line); }
.wn-version { margin: 0; font-size: 16px; font-weight: 600; }
.wn-older > summary { cursor: pointer; font-size: 14px; }
.wn-summary { margin: 0; color: var(--muted); font-size: 13px; }
.wn-tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.wn-tag.major { background: var(--cyan-deep); color: var(--cyan-2); }
.wn-tag.minor { border: 1px solid var(--line); color: var(--muted); }
.wn-list { margin: 6px 0 4px; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; line-height: 1.45; }
.wn-older > .wn-group:last-child, .wn-release > .wn-group:last-child { padding-bottom: 6px; } /* the sheet's last line isn't flush with the screen's edge */
.home-version:hover .home-wn { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.home-ver { font: 11px ui-monospace, Consolas, monospace; }
.home-version:has(.home-new) .home-wn { color: var(--text); } /* notes not read since an update (whatsNewUnseen) */
.home-new { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); } /* the unread dot */
@media (pointer: coarse) { .home-version { top: 0; right: 2px; padding: 14px 12px; } } /* a thumb-sized target (~44 px) in the corner */
@media (max-width: 600px) { .home-ver { display: none; } } /* a phone: the words only */
.legal-version { margin-left: 8px; color: var(--muted); font: 12px ui-monospace, Consolas, monospace; vertical-align: middle; }
.games-card { width: min(1000px, 100%); }
.games-title { margin: 0 0 12px; font: 600 24px var(--display); color: var(--text); }
.games { --slant: 38px; display: flex; height: clamp(360px, 58vh, 520px); border-radius: 14px; overflow: hidden; background: #05080f; box-shadow: 0 16px 40px #0007; }
.game { position: relative; flex: 1; min-width: 0; margin-left: calc(var(--slant) * -1); overflow: hidden; cursor: pointer; outline: none;
  clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); transition: flex .45s cubic-bezier(.2, .8, .2, 1); }
.game:first-child { margin-left: 0; clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); }
.game:last-child { clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%); }
.game.open { flex: 2.6; } /* all equal until one opens */
.games:has(.open) .game:not(.open) { flex: .7; }
.game-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.game-credit { position: absolute; left: 12px; top: 10px; padding: 2px 6px; border-radius: 4px; font-size: 11px; color: #e6edf4; background: #0009; pointer-events: none; } /* the cover art's artist, like .hero-artist */
.game:not(.open) .game-credit { opacity: .5; background: none; text-shadow: 0 1px 3px #000; } /* faint until its panel opens: the title leads */
.game-credit { transition: opacity .25s, background-color .25s; }
@media (min-width: 901px) { .game:not(:first-child) .game-credit { left: calc(var(--slant) + 8px); } } /* clear the slanted left edge */
.game-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, #05080fb3, transparent 38%); pointer-events: none; }
.game-name { position: absolute; left: 56px; bottom: 28px; margin: 0; font: 600 28px var(--display); color: #f4f1ea; white-space: nowrap; text-shadow: 0 2px 12px #000; pointer-events: none; }
.game:first-child .game-name { left: 40px; }
.games:has(.open) .game:not(.open) .game-name { left: 46px; right: 44px; white-space: normal; font-size: 16px; line-height: 1.15; } /* a narrow panel: smaller, wrapping between words, never cut */
.game-name small { display: block; font: 600 11px system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #c9d3da; opacity: .8; }
/* Home's MTG panel: people online and in a game now (GET /api/presence/counts) */
.game-live { display: flex; width: max-content; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: #00000059; font: 500 12px system-ui, sans-serif; color: #eef3f6; text-shadow: none; }
.game-live i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.game-live .live-game { margin-left: 6px; }
.live-on { background: #4fe39a; } .live-game { background: #e0b25a; }
.games:has(.open) .game:not(.open) .game-live { display: none; } /* a narrow panel: the name alone */
.game-acts { position: absolute; right: 76px; top: 50%; translate: 0 -50%; display: grid; gap: 10px; width: 220px; opacity: 0; transition: opacity .25s .1s; pointer-events: none; }
.game-acts::before { content: ''; position: absolute; inset: -46px -56px; z-index: -1; background: radial-gradient(closest-side, #05080f99, transparent); } /* a local glow, not an edge band */
.game.open .game-acts { opacity: 1; pointer-events: auto; }
.game-act { display: block; padding: 10px 0; border: 0; border-radius: 10px; text-align: center; font-size: 14px; color: #f4f1ea; text-decoration: none; background: #ffffff22; backdrop-filter: blur(6px); }
.game-act:hover:not(:disabled) { background: #ffffff38; border-color: transparent; }
.game-act.soon { color: #ffffff7a; background: #ffffff0f; cursor: default; }
/* The last panel mirrors the first: name top right, credit bottom right, scrim from the top */
@media (min-width: 901px) {
  .game:last-child .game-name, .games:has(.open) .game:last-child:not(.open) .game-name { left: auto; right: 40px; bottom: auto; top: 28px; text-align: right; }
  .games:has(.open) .game:last-child:not(.open) .game-name { left: 46px; }
  .game:last-child .game-live { margin-left: auto; }
  .game:last-child .game-acts { right: auto; left: 76px; } /* buttons by the slanted seam, as MTG's are */
  .game:last-child .game-credit { left: auto; top: auto; right: 12px; bottom: 10px; }
  .game:last-child .game-scrim { background: linear-gradient(180deg, #05080fb3, transparent 38%); }
}
.game:focus-visible { box-shadow: inset 0 0 0 2px var(--cyan-2); }
@media (prefers-reduced-motion: reduce) { .game, .game-acts, .game-credit { transition: none; } }
/* Phones: the panels stack, slanted top and bottom; a tap opens one. */
@media (max-width: 900px) {
  #home:not([hidden]) { display: flex; flex-direction: column; justify-content: center; } /* stacked panels, centred in #page */
  .games { flex-direction: column; height: auto; }
  .game, .game:first-child, .game:last-child { margin: calc(var(--slant) * -.6) 0 0; min-height: 200px; clip-path: polygon(0 calc(var(--slant) * .6), 100% 0, 100% calc(100% - var(--slant) * .6), 0 100%); }
  .game:first-child { margin-top: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant) * .6), 0 100%); }
  .game:last-child { clip-path: polygon(0 calc(var(--slant) * .6), 100% 0, 100% 100%, 0 100%); }
  .game.open { min-height: 360px; }
  .game-acts { right: 24px; width: 180px; }
  .game:last-child .game-acts { right: auto; left: 24px; } /* opposite its bottom-right name, as MTG's are */
  .game-name, .game:first-child .game-name { left: 20px; font-size: 26px; }
  .game-credit { left: auto; right: 12px; } /* a closed panel's name reaches its top left */
  /* The last panel mirrors the first across the seam: name bottom right, credit bottom left */
  .game:last-child .game-name { left: auto; right: 20px; text-align: right; }
  .game:last-child .game-live { margin-left: auto; }
  .game:last-child .game-credit { left: 12px; right: auto; top: auto; bottom: 10px; }
}

.big { display: block; padding: 12px 18px; font-size: 16px; text-align: center; text-decoration: none; color: var(--text); }
.deck-row { display: flex; gap: 12px; flex-wrap: wrap; }
.deck-box { display: grid; width: 176px; padding: 0; overflow: hidden; text-align: left; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-solid); box-shadow: 0 6px 18px #0008; }
.deck-box:hover { border-color: var(--cyan); }
.deck-box.selected { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
.deck-art { height: 100px; background: #13202c center / cover; }
.deck-name { padding: 8px 10px 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-format { padding: 0 10px 8px; font-size: 12px; color: var(--muted); }

/* Deck room (Moxfield-style): hero, toolbar, preview | grouped list | search, footer */
#decks:not([hidden]) { display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; height: 100%; padding-bottom: 12px; }
.deck-hero {
  position: relative; display: flex; gap: 16px; align-items: flex-end; min-height: 150px; padding: 18px 20px; border-radius: 8px; overflow: hidden;
  background: linear-gradient(90deg, #040f25f2 0%, #040f25b3 45%, #040f2533 100%), var(--art, none) center 25% / cover, #0a1724;
  box-shadow: 0 0 25px #080808;
}
.hero-text { flex: 1; min-width: 0; display: grid; gap: 6px; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bracket-pick { display: inline-flex; }
.bracket-pick button { min-width: 26px; height: 24px; padding: 0 6px; font-size: 12px; border-radius: 0; }
.bracket-pick button:first-child { border-radius: 4px 0 0 4px; } .bracket-pick button:last-child { border-radius: 0 4px 4px 0; }
.bracket-pick [aria-pressed="true"] { color: var(--cyan-2); border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.bracket-name { font-size: 12px; }
@media (pointer: coarse) { .bracket-pick button { min-width: 36px; height: 32px; } }
.badge { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 4px; background: #ffffff1a; border: 1px solid var(--line); }
.badge.ok { color: var(--good); border-color: #4fe39a66; }
.badge.bad { color: var(--bad); border-color: #ff6b6b66; }
.hero-name { font-family: var(--display); font-weight: 600; font-size: 28px; padding: 0; border: 0; background: none; color: #fff; width: 100%; text-shadow: 0 2px 10px #000; }
.hero-name:focus-visible { outline: 1px dashed var(--cyan); }
.hero-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 50%; }
.hero-actions select { max-width: 220px; }
.deck-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1; min-width: min(260px, 100%); }
/* Search tips: a pill inside the search field's right end (deck room, picture and cover picker) that opens Search help.
   "Search tips" on a computer, "Tips" where the field is narrow (.sh-narrow) or on a phone. */
.sh-field { position: relative; display: flex; flex: 1; min-width: 0; }
.sh-field > input { flex: 1; min-width: 0; padding-right: 96px; }
.sh-field.sh-narrow > input { padding-right: 52px; }
.sh-tips { position: absolute; right: 6px; top: 50%; translate: 0 -50%; height: 22px; padding: 0 9px; border: 1px solid var(--cyan); border-radius: 11px;
  background: transparent; color: var(--cyan-2); font-size: 11px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.sh-tips:hover { background: var(--cyan-deep); }
.sh-tips::after { content: ""; position: absolute; inset: -11px -6px; } /* a thumb-sized tap area */
.sh-short, .sh-narrow .sh-long { display: none; }
.sh-narrow .sh-short { display: inline; }
@media (max-width: 600px) { .sh-field > input { padding-right: 52px; } .sh-long { display: none; } .sh-short { display: inline; } }
/* Search help (ADR 0045): section chips, then one row per key: the key, what it does, an example to try. */
.ui-dialog.sh-dialog { width: min(1040px, 94vw); } /* .ui-dialog's 520 px came later and won: every chip fits now */
.sh-sections { display: grid; gap: 4px 28px; }
@media (min-width: 900px) { /* PC: the sections flow down two columns (a long one leaves no hole beside it), a line between them */
  .sh-sections { display: block; columns: 2; column-gap: 40px; column-rule: 1px solid var(--line); }
  .sh-section { break-inside: avoid; margin-bottom: 14px; } }
.sh-section > .ui-label { color: var(--text); font-size: 13px; font-weight: 700; } /* section titles: the muted label read too faint */
.sh-chips { display: flex; gap: 6px; min-height: 30px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } /* min-height: a scroller in .ui-bd's grid shrinks to nothing */
.sh-chip { flex: none; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 14px; background: none; color: var(--text); font-size: 12px; }
.sh-section { scroll-margin-top: 8px; }
.sh-rows { display: grid; }
.sh-row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 4px 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.sh-key { color: var(--cyan-2); font-size: 12px; }
.sh-try { grid-column: 2; justify-self: start; max-width: 100%; overflow-wrap: anywhere; padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); color: var(--text); font: 12px ui-monospace, Consolas, monospace; } /* under its meaning; a long example wraps */
@media (max-width: 600px) { .sh-row { grid-template-columns: 1fr; } .sh-try { grid-column: auto; } } /* a phone stacks key, meaning, example */
.search input { flex: 1; min-width: 0; } /* an input's default 20-character width would push the switch over the view toggle */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; background: none; padding: 5px 12px; }
.seg button[aria-pressed="true"] { background: var(--cyan-deep); color: var(--cyan-2); }
#status { flex: 0 0 240px; margin: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* a fixed slot: its text changing never resizes the search row */
.deck-body { display: grid; grid-template-columns: 250px 1fr 300px; gap: 14px; min-height: 0; }
.deck-body.read { grid-template-columns: 250px 1fr; }
#viewer:not([hidden]) { display: grid; grid-template-rows: auto auto auto minmax(420px, 72vh) auto; gap: 12px; padding-bottom: 24px; }
a.deck-box { color: inherit; text-decoration: none; }
a.btn { display: inline-block; text-decoration: none; color: var(--text); }
.deck-preview, .deck-board, .results-panel { min-height: 0; overflow: auto; border-radius: 8px; background: linear-gradient(var(--panel), var(--panel)), var(--bg-base); box-shadow: 0 0 25px #080808; }
/* Playmat layers (ADR 0016): each layer is placed by its frame: centre (--mx, --my) and width --mw as fractions of
   its area; opacity and faded-edge masks are set inline per layer. */
.mat-layer { position: absolute; aspect-ratio: 626 / 457; translate: -50% -50%; pointer-events: none; background: var(--playmat) center / cover no-repeat; }
.mat-area { position: relative; overflow: hidden; }
.mat-area > .mat-layer, .mat .field > .playmat > .mat-layer { left: calc(var(--mx) * 100%); top: calc(var(--my) * 100%); width: calc(var(--mw) * 100%); }
/* Deck room: one slice per panel, in the panel's grid cell, under it. Each slice is offset by its panel's position in
   the deck body (--ox, --oy) against the body's size (--bw, --bh), so the three slices line up into one picture. */
#decks .deck-body { position: relative; }
#decks .deck-preview { grid-column: 1; grid-row: 1; }
#decks .deck-board { grid-column: 2; grid-row: 1; position: relative; }
#decks .results-panel { grid-column: 3; grid-row: 1; }
#decks .deck-preview, #decks .results-panel { position: relative; }
.mat-slice { grid-row: 1; position: relative; overflow: hidden; border-radius: 8px; pointer-events: none; opacity: 0; transition: opacity .3s; }
.mat-slice:nth-child(1) { grid-column: 1; } .mat-slice:nth-child(2) { grid-column: 2; } .mat-slice:nth-child(3) { grid-column: 3; }
#decks.has-playmat .mat-slice { opacity: .35; }
.mat-slice > .mat-layer { left: calc(var(--mx) * var(--bw) - var(--ox)); top: calc(var(--my) * var(--bh) - var(--oy)); width: calc(var(--mw) * var(--bw)); }
/* Playmat studio: library | editor (preview, layers top first), then the art picker while picking */
dialog.prints.playmats { height: 90vh; grid-template-rows: auto minmax(0, 1fr); } /* beats dialog.prints, declared later */
dialog.prints.playmats.picking { grid-template-rows: auto minmax(0, 1fr) minmax(0, 42%); }
dialog.prints.playmats.picking.first { grid-template-rows: auto auto minmax(0, 1fr); } /* nothing to edit yet: the studio row shrinks to its text, the arts take the rest */
dialog.playmats:not(.picking) .studio-art { display: none; }
dialog.playmats.picking :is(.pm-cap, .pm-layers, .pm-actions) { display: none; } /* picking: the preview and the arts only */
.studio-msg { margin-right: auto; font-size: 13px; color: var(--muted); }
.studio-msg.bad { color: var(--bad); }
.studio { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-content: start; gap: 16px; padding: 12px 16px; overflow: auto; }
.mat-library { display: grid; align-content: start; gap: 8px; }
.mat-library .row { display: flex; gap: 6px; }
.mat-library ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mat-library li { position: relative; padding: 6px; border-radius: 8px; border: 1px solid transparent; }
.mat-library li.on { border-color: var(--cyan); background: color-mix(in srgb, var(--glow) 7%, transparent); }
.pm-open { display: grid; gap: 6px; width: 100%; padding: 0; border: 0; background: none; text-align: left; font-size: 12px; }
.pm-name { min-height: 22px; display: flex; align-items: center; padding-right: 46px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-thumb { display: block; aspect-ratio: 16 / 5; border-radius: 4px; background: #0b121a; }
.switch.pm-use { position: absolute; right: 6px; bottom: 6px; } /* on the name's line */
.pm-use .slider { width: 34px; height: 20px; }
.pm-use .slider::after { width: 14px; height: 14px; }
.mat-editor { display: grid; gap: 10px; align-content: start; min-width: 0; }
.mat-editor > .muted, .pm-cap { margin: 0; font-size: 12px; }
.pm-head { display: flex; gap: 8px; align-items: center; }
.pm-name-input { flex: 1; min-width: 0; }
.frame-wrap { position: relative; }
.frame-stage { aspect-ratio: 16 / 5; border-radius: 6px; border: 1px dashed #ffffff33; background: #0b121a; cursor: grab; touch-action: none; }
.frame-stage:active { cursor: grabbing; }
.frame-stage > .mat-layer.sel { outline: 1px dashed var(--cyan); outline-offset: -1px; }
.frame-tools { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 4px; }
.frame-tools button, .frame-hint { padding: 3px 10px; font-size: 12px; background: color-mix(in srgb, var(--panel) 85%, transparent); }
.frame-tools [data-frame="out"], .frame-tools [data-frame="in"] { width: 28px; padding: 3px 0; }
.frame-hint { position: absolute; right: 8px; bottom: 8px; border-radius: 4px; color: var(--good); pointer-events: none; }
.frame-hint.bad { color: #f0b35a; }
.frame-hint:empty { display: none; }
.pm-layers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 170px) minmax(80px, 1fr) auto auto auto auto; gap: 4px 10px; }
.pm-layers li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 4px 6px; border-radius: 6px; border: 1px solid transparent; font-size: 12px; }
.pm-layers li.on { border-color: var(--cyan); background: color-mix(in srgb, var(--glow) 7%, transparent); }
.pm-layers button { padding: 3px 9px; font-size: 12px; }
.pm-layer { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 !important; border: 0; background: none; text-align: left; }
.pm-layer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-layer img { width: 44px; flex: none; aspect-ratio: 626 / 457; object-fit: cover; border-radius: 3px; }
.pm-opacity { width: 100%; }
.pm-move { display: flex; gap: 2px; }
.pm-move button { width: 28px; padding: 3px 0; }
.pm-more { display: none; }
.pm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.studio-art { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; border-top: 1px solid var(--line); }
.art-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 16px 0; font-size: 13px; }
.art-head .search { flex: 1; min-width: 220px; }
@media (max-width: 900px) { .studio { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  dialog.prints.playmats { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  dialog.prints.playmats.picking { grid-template-rows: auto minmax(0, 1fr) minmax(0, 55%); }
  .studio { padding: 10px 12px; gap: 12px; }
  .mat-library ul { grid-auto-flow: column; grid-auto-columns: 148px; overflow-x: auto; } /* a strip */
  .pm-head { flex-wrap: wrap; } .pm-name-input { flex: 1 0 100%; }
  .frame-wrap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } /* tools under the small preview, not over it */
  .frame-stage { flex: 1 0 100%; }
  .frame-tools, .frame-hint { position: static; }
  .pm-layers { grid-template-columns: minmax(0, 1fr) auto auto; }
  .pm-opacity, .pm-fade, .pm-remove { display: none; } /* in the row's ⋯ menu */
  .pm-more { display: block; }
  .playmats .prints-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: 12px; }
}
@media (pointer: coarse) { .pm-layers button, .frame-tools button { min-height: 36px; } .pm-move button { width: 36px; } }
.deck-preview { padding: 12px; display: grid; align-content: start; gap: 10px; }
.deck-preview img { width: 100%; border-radius: 8px; box-shadow: 0 6px 20px #000c; aspect-ratio: 488 / 680; object-fit: cover; background: #0a1724; }
.issues { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; color: var(--bad); }
button.badge { cursor: pointer; font: inherit; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; }
button.badge.bad:hover { background: #ff6b6b22; box-shadow: none; }
/* A deck that breaks its format's rules: red marker on its deck box */
.deck-box { position: relative; }
.issue-dot { position: absolute; top: 6px; right: 6px; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: var(--bad); box-shadow: 0 0 0 2px #000a, 0 0 10px #ff6b6b99; }
/* Mana curve under the deck room's preview */
.curve h3 { font-size: 13px; margin: 4px 0 6px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.curve svg { width: 100%; display: block; overflow: visible; }
.curve rect.perm { fill: var(--cyan); }
.curve rect.spell { fill: #7a5cff; }
.curve line { stroke: #ffffff33; }
.curve text { font-size: 11px; text-anchor: middle; fill: var(--muted); }
.curve text.count { fill: var(--text); font-weight: 700; }
.curve .bar { cursor: pointer; outline: none; }
.curve .bar .hit { fill: transparent; }
.curve .bar:hover .hit, .curve .bar:focus-visible .hit { fill: #ffffff0d; }
.curve .bar.on .hit { fill: color-mix(in srgb, var(--glow) 12%, transparent); }
.curve .bar.on text.mv { fill: var(--cyan-2); font-weight: 700; }
.curve-hint { margin: -2px 0 4px; font-size: 11px; color: var(--muted); }
.curve-hint .linklike { font-size: 11px; padding: 0; }
.calc-btn { justify-self: center; margin-top: 8px; font-size: 12px; }
.calc-bd { gap: 12px; } /* a .ui-dialog: its width and phone sheet are the family's */
.calc-bd > p.muted { margin: 0; }
.calc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.calc-fields input { width: 100%; }
.calc-result { margin: 0; font-size: 15px; }
.calc-result strong { font-size: 22px; color: var(--cyan-2); margin-right: 4px; }
.calc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.calc-table th, .calc-table td { padding: 4px 8px; text-align: right; border-bottom: 1px solid #ffffff12; }
.calc-table th:first-child, .calc-table td:first-child { text-align: left; color: var(--muted); }
.curve-legend { display: flex; gap: 14px; justify-content: center; margin: 6px 0 2px; font-size: 12px; color: var(--muted); }
.curve-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; }
.curve-legend .perm::before { background: var(--cyan); }
.curve-legend .spell::before { background: #7a5cff; }
.curve .muted { margin: 4px 0 0; font-size: 12px; line-height: 1.5; text-align: center; }
.curve { display: grid; }
.deck-board { padding: 14px; }
.board-cols { columns: 190px; column-gap: 20px; } /* narrow columns: a card's cost stays near its name; more columns fit */
.board-cols.board-fill { column-fill: auto; } /* top to bottom: free space goes right, not under the cards (fillColumns) */
.deck-board.drop-ok, .group.drop-ok, .results-panel.drop-ok { box-shadow: inset 0 0 0 2px var(--cyan), 0 0 25px #080808; }
.group { break-inside: avoid; margin-bottom: 16px; border-radius: 6px; padding: 2px; }
/* A long group (over 10 rows) may go on in the next column, so it starts right under a short one (the Commander's one
   or two cards) instead of leaving that column empty; its header never ends a column alone. */
.group.long { break-inside: auto; } .group h3 { break-after: avoid; }
.group h3 { font-size: 13px; font-weight: 600; color: #fff; margin: 0 0 4px; padding-bottom: 3px; border-bottom: 1px solid var(--line); }
.group h3 span { color: var(--muted); font-weight: 400; }
.group .empty { font-size: 12px; color: var(--muted); padding: 10px 0; text-align: center; } /* empty states are plain muted text, no box */
/* Sideboard and Considering: outside the deck, never played. A muted heading over a dashed line sets them apart. */
.group-aside h3 { color: var(--muted); border-bottom-style: dashed; }
@media (max-width: 600px) { .deck-title-more { display: none; } } /* the footer says them; the hero line stays one line */
.decklist { list-style: none; margin: 0; padding: 0; }
.decklist li { display: flex; gap: 6px; align-items: center; height: 26px; padding: 0 4px; border-radius: 4px; cursor: grab; break-inside: avoid; } /* a long group breaks between rows, never through one */
.decklist li:hover { background: color-mix(in srgb, var(--cyan) 7%, transparent); }
.decklist .qty { width: 2ch; text-align: right; color: var(--muted); }
.decklist .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cost { display: inline-flex; gap: 1px; flex: none; }
.ms { width: 14px; height: 14px; display: block; }
.decklist .row-btns { display: none; gap: 2px; }
.decklist li:hover .row-btns { display: inline-flex; }
.decklist .cost { order: 1; } /* last: the hover buttons open left of it, so the cost never hides or moves */
.decklist .row-btns button { padding: 0 6px; line-height: 18px; font-size: 12px; }
/* Visual stacks: overlapping cards, only the title bar of each shows */
.deck-board.stacks .board-cols { columns: auto; display: flex; flex-wrap: wrap; gap: 18px; align-content: flex-start; }
.deck-board.stacks { --stack-w: 160px; }
.deck-board.stacks .group { width: var(--stack-w); margin: 0; }
@media (max-width: 600px) { .deck-board.stacks { --stack-w: 104px; } .deck-board.stacks .board-cols { gap: 10px; } } /* three stacks across a phone */
.stack-list { display: grid; }
.stack-card { position: relative; width: var(--stack-w, 160px); aspect-ratio: 488 / 680; border-radius: 8px; overflow: hidden; cursor: grab; box-shadow: 0 2px 8px #000c; }
.stack-card + .stack-card { margin-top: calc(var(--stack-w, 160px) * -1.1625); } /* the name bar of each card stays in view */
.stack-card:hover { z-index: 2; outline: 2px solid var(--cyan); }
.stack-card img { width: 100%; height: 100%; display: block; }
.stack-card .qty-badge { position: absolute; left: 6px; top: 6px; font-size: 11px; font-weight: 700; background: #000c; color: var(--cyan-2); border-radius: 4px; padding: 0 5px; }
.results-panel { padding: 12px; display: grid; align-content: start; gap: 10px; }
.results-panel h2 { font-size: 13px; color: var(--muted); font-weight: 600; }
.results { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.result { position: relative; }
.result img { width: 100%; aspect-ratio: 488 / 680; border-radius: 6px; display: block; cursor: grab; box-shadow: 0 3px 10px #0009; background: #0a1724; }
.result .row { position: absolute; left: 0; right: 0; bottom: 6px; justify-content: center; gap: 4px; opacity: 0; transition: opacity .15s; }
.result:hover .row, .result:focus-within .row { opacity: 1; }
.result button { padding: 1px 6px; font-size: 11px; background: #000d; }
.set-badge { position: absolute; right: 4px; top: 4px; font-size: 10px; font-weight: 700; letter-spacing: .04em; background: #000c; color: var(--cyan-2); border-radius: 3px; padding: 0 4px; }
.check { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); white-space: nowrap; }
.check input { padding: 0; }
.deck-foot { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; padding: 8px 14px; border-radius: 8px; background: #00000059; font-size: 13px; }
.deck-foot strong { color: var(--cyan-2); }
.card-notes { margin: 0 0 16px; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--cyan) 7%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 27%, transparent); }
.card-notes p { margin: 0; line-height: 1.5; }
.card-notes p + p { margin-top: 8px; }
.note-kind { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--cyan-2); }
.note-kind.private { color: #f0c050; }
.decklist .name { cursor: pointer; }
.decklist .name:hover, .decklist .name:focus-visible { color: var(--cyan-2); text-decoration: underline; }

/* Card details and printing picker modals */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
dialog.details, dialog.prints { width: min(1100px, 94vw); max-width: none; max-height: 90vh; padding: 0; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
dialog.details:not([open]), dialog.prints:not([open]) { display: none; }
.details-bar { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 12px 16px 12px 24px; border-bottom: 1px solid var(--line); } /* the .ui-hd of the wide card dialogs */
.details-bar h2 { margin: 0 auto 0 0; font: 600 16px var(--display); }
.details-count { margin-left: 6px; font-weight: 400; color: var(--muted); }
.details-body { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 24px; padding: 20px; overflow: auto; }
.details-img { width: 100%; aspect-ratio: 488 / 680; border-radius: 8px; box-shadow: 0 8px 30px #000c; background: #0a1724; }
.details-text { min-width: 0; }
.face + .face { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.face-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.face-head h3 { font: 600 24px var(--display); color: var(--cyan-2); }
.face-head .ms, .oracle .ms, .rulings .ms { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; }
.oracle .ms, .rulings .ms { width: 15px; height: 15px; }
.type-line { margin: 4px 0 10px; color: var(--muted); }
.oracle { font-size: 16px; line-height: 1.55; margin: 0 0 10px; }
.flavor { font-style: italic; color: var(--muted); margin: 0 0 10px; }
.stat { text-align: right; font-size: 18px; margin: 0; }
.printing { margin: 16px 0; padding: 10px 0; border-block: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.details-text h4 { margin: 18px 0 8px; font-size: 14px; }
.legal-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; font-size: 13px; }
.legal-grid li span[aria-hidden] { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font-size: 10px; font-weight: 700; margin-right: 4px; }
.legal-grid .ok span[aria-hidden] { background: var(--good); color: #00281a; }
.legal-grid .no { color: var(--muted); }
.legal-grid .no span[aria-hidden] { background: #ffffff1f; }
.legal-grid .warn span[aria-hidden] { background: #f0c050; color: #2a1d00; }
.rulings { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.rulings li { padding: 10px 12px; border-radius: 6px; background: #ffffff0a; line-height: 1.5; }
.rulings time { display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.prints-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; padding: 16px; overflow: auto; }
.print { position: relative; padding: 0; border: 2px solid transparent; border-radius: 6px; background: none; }
.print img { width: 100%; aspect-ratio: 488 / 680; display: block; border-radius: 6px; background: #0a1724; }
.mat-tile img { aspect-ratio: 626 / 457; object-fit: cover; }
.playmats .prints-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); align-content: start; }
.print.selected { border-color: var(--cyan); box-shadow: none; }
@media (max-width: 900px) { .details-body { grid-template-columns: 1fr; } .details-img { max-width: 260px; } }

dialog { background: var(--bg-base); color: var(--text); border: 1px solid var(--line); border-radius: 8px; max-width: min(760px, 92vw); } /* the page's dark base and a hairline, like the update card (DESIGN.md: Popups) */
dialog::backdrop { background: #000000b0; }
dialog:focus { outline: none; } /* settle() focuses the dialog itself on open: no ring around the whole card */
textarea { width: min(640px, 80vw); height: 50vh; }

/* Play room: lobby */
.setup { max-width: 820px; margin: 2vh auto; display: grid; gap: 14px; }
.bot-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.bot-card { display: grid; gap: 6px; padding: 10px; border-radius: 6px; background: #ffffff08; border: 1px solid var(--line); }

/* Play room: board. Every zone has a fixed size: cards never resize the layout. */
/* The play screen is exactly one window tall: the board stretches to fill it and the mats share the height
   (their battlefields grow). Sizes depend on the window only, never on how many cards are out. */
#play:not([hidden]) { display: flex; flex-direction: column; height: 100%; }
#play > .room-bar, #play > .toasts { flex: none; }
.arena { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.arena > .board { flex: 1; }
.board { display: flex; flex-direction: column; min-height: 0; gap: 8px; padding: 10px; border-radius: 6px; background: #0c0c0caf; box-shadow: 0 0 25px #080808; }
.opp-tabs { display: flex; gap: 14px; justify-content: flex-end; flex-wrap: wrap; padding-top: 10px; } /* in the top bar, right; room for the life pills */
/* An opponent's tile: commander art in a 64 px square, a 1 px seat-colored border, the life pill on its top border, hand
   (bottom left) and library (bottom right) chips; the name and the rest on hover */
.opp-tab { position: relative; width: 64px; height: 64px; flex: none; }
@media (min-width: 901px) { .opp-tab { width: 76px; height: 76px; } } /* a computer: "AI · Normal" fits on one line */
.opp-open { position: absolute; inset: 0; display: block; padding: 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--seat, #ffffff33); background: #0b1620; }
.opp-open:hover { filter: brightness(1.12); }
.tab-art { position: absolute; inset: 0; background: #1b2233; }
.tab-art .avatar { width: 100%; height: 100%; border: 0; border-radius: 0; }
.tab-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, #000000c0); }
.tab-life { position: absolute; z-index: 2; left: 50%; top: -10px; translate: -50% 0; min-width: 28px; height: 19px; padding: 0 6px; display: grid; place-items: center; border-radius: 5px; border: 1px solid var(--seat, #ffffff33); background: #0a1420; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); pointer-events: none; }
.tab-c { position: absolute; z-index: 1; bottom: 3px; padding: 0 3px; border-radius: 5px; background: #000000a6; font-size: 10px; line-height: 15px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; color: #fff; }
.tab-c i { font-style: normal; font-size: 9px; margin-right: 1px; }
.tab-c.l { left: 2px; } .tab-c.r { right: 2px; }
.tab-mana, .tab-ctr { position: absolute; z-index: 1; top: 3px; left: 3px; padding: 0 3px; border-radius: 5px; background: #000000a6; font-size: 9px; line-height: 13px; color: var(--cyan-2); }
.tab-ctr { left: auto; right: 3px; color: #f0b35a; }
.tab-turn { position: absolute; z-index: 2; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #5ccf6a; box-shadow: 0 0 6px #5ccf6a; pointer-events: none; }
.opp-tab:has(.tab-ctr) .tab-turn { right: 16px; }
.opp-tab.on .opp-open { box-shadow: 0 0 10px var(--seat, var(--cyan)); }
.opp-tab.busy .opp-open { animation: tab-think 1.4s ease-in-out infinite; }
@keyframes tab-think { 50% { box-shadow: 0 0 14px var(--violet); } }
.opp-tab.out .opp-open { filter: grayscale(1) brightness(.6); }
/* Online seat status, inside the tab (ADR 0022): reconnecting dims the art under a countdown; a bot seat gets a corner
   chip. Life (top) and the hand / library counts (bottom) stay readable on top. */
.tab-hold { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 0; border-radius: inherit;
  background: #061325b8; color: #ffd58a; font-size: 15px; line-height: 1.1; pointer-events: none; }
.tab-hold b { font-size: 11px; font-weight: 600; }
.opp-tab.held .tab-c, .opp-tab.held .tab-life { z-index: 2; }
.tab-bot { position: absolute; top: 4px; left: 4px; z-index: 2; padding: 0 4px; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: .04em;
/* Your own status tab among the others (same size): an accent outline and a "You" tag */
.opp-tab.me .opp-open { outline: 2px solid var(--cyan); outline-offset: 1px; }
.tab-bot.tab-you { color: var(--bg-base); background: var(--cyan); border-color: var(--cyan); }
  background: #2d2450; color: #cdbdff; pointer-events: none; white-space: nowrap; }
.watch-strip { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--panel-solid); }
.banner.vote { justify-content: space-between; border-color: var(--cyan); }
.result-line { margin: 0 0 4px; font-size: 18px; font-weight: 600; color: var(--text); text-align: center; }
@media (prefers-reduced-motion: reduce) { .opp-tab.busy .opp-open { animation: none; outline: 1px dashed var(--violet); } }

/* Midline: the stack's drop zone, carrying the step bar */
/* Midline: no height of its own; the stack pill (left) and the step bar (centre) sit on your mat's top border */
.midline { flex: none; position: relative; height: 0; margin-bottom: -8px; z-index: 6; }
.midline-row { position: absolute; left: 50%; top: 0; translate: -50% -50%; display: flex; align-items: center; gap: 10px; max-width: 100%; }

.stack-zone { flex: none; display: flex; gap: 6px; align-items: center; min-height: 32px; padding: 4px 14px; border-radius: 6px; border: 1px dashed var(--line); background: #050c14; /* solid: the battlefield border stops at its edge */ }
.hand-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: 6px; border: 1px solid var(--line); background: #050c14; color: var(--text); font-size: 12px; } /* mirrors Stack; quiet like Add and End turn */
.hand-btn kbd { font: 600 10px/1 ui-monospace, monospace; padding: 2px 4px; border-radius: 3px; border: 1px solid currentColor; opacity: .6; }
.hand-btn:hover { border-color: var(--cyan); }
.stack-zone.has-cards { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--violet); background: #031c26f2; box-shadow: none; }
.midline-hint { font-size: 11px; color: #ffffff59; letter-spacing: .1em; text-transform: uppercase; }

/* Mats: the battlefield takes all the room; the piles stack in one column (yours on the right, an opponent's mirrored
   on the left). Your hand fans over the bottom of your battlefield, your life drawer beside it. */
.mat {
  --pile-col: calc(var(--card-w) * 1.3); --hand-row: calc(var(--card-w) * .6 * 1.394 + 6px);
  position: relative; display: grid; gap: 6px 10px; flex: 1 1 0; min-height: calc(var(--card-h) * 2.4);
  padding: 8px; border-radius: 6px; border: 1px solid transparent;
}
.mat.me { grid-template-columns: minmax(0, 1fr) var(--pile-col); grid-template-areas: "field piles"; }
.mat.opp { grid-template-columns: var(--pile-col) minmax(0, 1fr); grid-template-areas: "piles field"; }
.mat .piles { grid-area: piles; display: flex; flex-direction: column; justify-content: space-between; align-items: center; container-type: size; }
/* Four piles in the column (library, face down, graveyard, exile slot): each shrinks to fit a short mat, card-shaped */
/* Goldfish (one mat, this device): the step bar gets room under the top bar, and the piles sit together at the top
   instead of spreading down the whole screen */
#play:not(.phone-on):has(.board.goldfish) > .room-bar { margin-bottom: 30px; }
#play:not(.phone-on) .board.goldfish .mat.me .piles { justify-content: flex-start; gap: 12px; }
.mat .piles .pile { width: auto; height: min(var(--card-h), calc((100cqh - 36px) / 4)); aspect-ratio: 488 / 680; } /* room for three 12 px gaps (this device puts them between the piles) */
.pile-slot { position: relative; }
.slot-pick { position: absolute; right: -6px; top: -6px; z-index: 2; width: 20px; height: 20px; padding: 0; border-radius: 50%; font-size: 11px; line-height: 1; background: #0a1f2b; border: 1px solid var(--line); }
.slot-pick:hover { border-color: var(--cyan); color: var(--cyan-2); }
/* Your own face-down cards: you see the face, veiled, with a ◐ marker */
.card .down-mark { position: absolute; right: 3px; bottom: 3px; width: 18px; height: 18px; display: grid; place-items: center; font-size: 12px; border-radius: 50%; background: #000b; color: var(--cyan-2); border: 1px solid #ffffff55; }
/* Seat colors (ADR 0017): stack cards wear their owner's color; opponent tabs carry it on the left edge */
.stack-zone .card { box-shadow: 0 0 0 3px var(--owner, transparent), 0 3px 8px #000a; }
/* Your mana pool: bottom right of your battlefield, left of the pile column */
.mat.me .mana-spot { position: absolute; z-index: 4; right: calc(var(--pile-col) + 26px); bottom: 14px; grid-template-columns: repeat(6, 22px); gap: 4px; padding: 5px 7px; border-radius: 6px; background: #050c14cc; border: 1px solid var(--line); }
.mat.me .mana-spot .pip { width: 22px; height: 22px; font-size: 11px; }
.settings form { display: grid; gap: 12px; padding: 20px 22px; min-width: min(420px, 90vw); }
.settings h2 { font: 600 20px var(--display); }
/* Game settings: a header, three columns on wide screens (one scrolling column below 1100 px), a footer */
dialog.settings-wide { width: min(1180px, 94vw); max-width: none; max-height: 90vh; padding: 0; overflow: hidden; } /* only the columns scroll */
dialog.settings-wide form { display: flex; flex-direction: column; gap: 0; padding: 0; min-width: 0; max-height: calc(90vh - 2px); } /* inside the dialog's borders */
.settings-top, .settings-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 20px; }
.settings-top { border-bottom: 1px solid var(--line); }
.settings-top h2 { margin: 0; font: 600 16px var(--display); } /* the .ui-hd title */
.settings-bottom { border-top: 1px solid var(--line); }
.settings-cols { display: grid; grid-template-columns: 1fr; overflow: auto; min-height: 0; }
.settings-cols > section { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; }
.settings-cols .settings-head { margin: 0; }
.settings-cols .settings-head:not(:first-child) { margin-top: 10px; }
.settings-note { margin: 0; font-size: 12px; }
.themes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.themes + .themes { margin-top: 6px; } /* the light row under the dark one */
.theme { display: grid; gap: 4px; padding: 4px; border-radius: 6px; border: 1px solid #ffffff26; font-size: 11px; text-align: center; cursor: pointer; }
.theme:hover { border-color: #ffffff40; }
.theme.on { border-color: var(--cyan); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cyan) 25%, transparent); }
.theme input { position: absolute; opacity: 0; pointer-events: none; }
.theme:has(input:focus-visible) { outline: 2px solid var(--cyan-2); outline-offset: 2px; }
.theme-sw { position: relative; height: 32px; border-radius: 4px; }
.theme-sw i { position: absolute; right: 4px; bottom: 4px; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #ffffffaa; }
.settings-sub { margin-left: 46px; }
/* A switch's ? (touch screens, which have no hover title): tapping it shows the explanation under the row. */
.set-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.help { display: none; width: 22px; height: 22px; padding: 0; border-radius: 50%; font-size: 12px; font-weight: 700; color: var(--muted); }
@media (pointer: coarse) { .help { display: inline-grid; place-items: center; } }
.help-text { display: none; flex-basis: 100%; margin: 0 0 4px 46px; font-size: 12px; color: var(--muted); }
.set-row.open .help-text { display: block; }
.set-row.open .help { color: var(--cyan-2); border-color: var(--cyan); }
.switch-like { font-size: 13px; }
.seg-mini { display: inline-flex; margin-left: auto; }
.seg-mini button { padding: 3px 10px; font-size: 12px; border-radius: 0; }
.seg-mini button:first-child { border-radius: 4px 0 0 4px; } .seg-mini button:last-child { border-radius: 0 4px 4px 0; }
.seg-mini [aria-pressed="true"] { color: var(--text); background: color-mix(in srgb, var(--cyan) 22%, transparent); } /* the .ui-seg pick: a quiet fill */
.settings-tabs { display: flex; gap: 18px; margin: 0 auto 0 24px; align-self: stretch; } /* Settings · Controls, text tabs beside the title */
.settings-tabs button { padding: 0 2px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: none; color: var(--muted); font-size: 13px; }
.settings-tabs button:hover:not(:disabled) { color: var(--text); border-color: transparent; }
.settings-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--cyan); }
/* Controls: every gesture, for a finger and for a mouse. */
.controls-page { display: grid; gap: 4px 28px; overflow: auto; min-height: 0; padding: 12px 20px; }
@media (min-width: 900px) { .controls-page { grid-template-columns: 1fr 1fr; } }
.controls-list { display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: 6px 14px; margin: 8px 0 12px; font-size: 13px; }
.controls-list dt { font-weight: 700; color: var(--text); }
.controls-list dd { margin: 0; color: var(--muted); }
/* A phone held sideways: the settings take the screen, two columns. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  dialog.settings-wide { width: 96vw; max-height: 96dvh; }
  dialog.settings-wide form { max-height: calc(96dvh - 2px); }
  .settings-cols.phone { grid-template-columns: 1fr 1fr; }
  .settings-cols.phone > section { padding: 10px 14px; }
  .settings-cols.phone > section + section { border-left: 1px solid var(--line); }
  .controls-page { grid-template-columns: 1fr 1fr; }
  .controls-list { grid-template-columns: 1fr; gap: 2px; }
  .controls-list dd { margin-bottom: 6px; }
}
.settings-sub select, .settings-sub input[type="range"] { width: 100%; max-width: 220px; }
@media (min-width: 1100px) {
  .settings-cols { grid-template-columns: 1.15fr 1fr 1fr; }
  .settings-cols > section + section { border-left: 1px solid var(--line); }
}
.game-modal .field input, .game-modal .field select { width: 100%; }
.game-modal textarea { width: 100%; height: auto; resize: vertical; } /* not the global 50vh box: Report's and Notes' few lines */
.ui-dialog.notes-editor { width: min(560px, 94vw); }
.game-modal .modal-error { margin: 0; font-size: 13px; }
.ui-dialog.game-modal { width: min(420px, 94vw); }
.game-modal .ui-bd { gap: 12px; }
.game-modal .ui-bd > p { margin: 0; }
.copy-field { width: 100%; font-family: ui-monospace, monospace; font-size: 12px; }
table.keys { width: 100%; border-collapse: collapse; }
table.keys td { padding: 5px 4px; border-bottom: 1px solid #ffffff12; }
table.keys td:last-child { text-align: right; }
.key { min-width: 44px; padding: 3px 10px; font-family: ui-monospace, monospace; }
.key.waiting { border-color: var(--cyan); color: var(--cyan-2); }
/* Add a token: a roomy, fixed-height picker (search, count, then every printing with its name and set under it) */
dialog.tokens { width: min(1040px, 94vw); height: min(760px, 88vh); grid-template-rows: auto auto minmax(0, 1fr); }
.token-search { display: grid; gap: 6px; padding: 16px 20px 4px; }
.token-search input { width: 100%; padding: 12px 14px; font-size: 16px; }
.token-count { margin: 0; font-size: 12px; }
dialog.tokens .prints-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px; padding: 16px 20px 24px; align-content: start; }
.grid-note { grid-column: 1 / -1; justify-self: center; margin: 48px 0; text-align: center; }
.token-print { display: grid; gap: 4px; text-align: left; color: inherit; }
.token-print .print-name { font-size: 13px; font-weight: 700; line-height: 1.2; }
.token-print .print-set { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.token-print:hover img, .token-print:focus-visible img { outline: 2px solid var(--cyan); outline-offset: 2px; }
.deck-color { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; }
.swatch { width: 18px; height: 18px; padding: 0; border-radius: 50%; background: var(--swatch); border: 2px solid #0008; }
.swatch.on { box-shadow: 0 0 0 2px #fff, 0 0 10px var(--swatch); }
.mat .field > .pile.command { position: absolute; z-index: 100000; /* above any moved card */ }
.mat.me .field > .pile.command { left: 8px; top: 8px; }
.mat.opp .field > .pile.command { right: 8px; bottom: 8px; }
.mat .hand { position: absolute; z-index: 3; left: 50%; translate: -50% 0; padding-top: 0; }
.mat.me { --hand-room: min(46%, 640px); }
.mat.me .hand { bottom: 4px; width: fit-content; max-width: var(--hand-room); transition: translate .18s ease; } /* hugs its cards (fitHands) */
/* Tucked (V): the hand slides down so only the cards' tops (name bars and a little more) show over the playmat's bottom
   edge. The hand is drawn above your mat and may spill past its border; the play screen (exactly one window tall) clips
   at the window's edge, so the page never grows a scrollbar. */
.mat.me { --hand-h: calc(var(--hand-w) * 1.394); }
#play:has(.arena) { overflow: clip; } /* only the game table: the lobby may scroll */
.mat.me .hand.tucked { translate: -50% calc(var(--hand-h) * .6); } /* the top 40 % of each card stays in view */
.mat.opp .hand { top: 4px; width: min(40%, 520px); justify-content: center; }
/* Whose turn it is (SPEC: Game table): the active battlefield wears its seat colour (yours: cyan) and a tag on its edge;
   the top bar's turn pill and the step bar's "Waiting for…" say it too; "Your turn" shows over the table for a moment. */
.mat.active { border-color: var(--seat); box-shadow: inset 0 0 0 1px var(--seat), inset 0 0 30px color-mix(in srgb, var(--seat) 14%, transparent); }
.mat.me.active { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }
.turn-pill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 6px; font: 600 15px/1.2 system-ui, sans-serif; color: var(--text); white-space: nowrap;
  background: color-mix(in srgb, var(--seat) 16%, transparent); border: 1px solid var(--seat); }
.turn-pill.mine { background: var(--cyan); border-color: var(--cyan); color: #03261f; }
.turn-wait { flex: none; padding: 6px 12px; font-size: 12px; white-space: nowrap; color: var(--text); border: 1px dashed var(--seat); border-radius: 5px; }
.replaying .turn-wait { display: none; }
.arena { position: relative; }
.act-ticker { position: absolute; top: 8px; left: 50%; translate: -50% 0; z-index: 20; display: flex; align-items: center; gap: 8px; max-width: min(420px, 60%); padding: 3px 10px 3px 3px; border-radius: 6px; border: 1px solid var(--seat); background: var(--panel-solid); color: var(--text); font-size: 12px; white-space: nowrap; animation: dot-pop .25s ease-out; }
.act-ticker img { width: 22px; height: 31px; border-radius: 2px; object-fit: cover; }
.act-ticker > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.act-ticker b { font-weight: 700; }
.tick-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--seat); }
.drawer-tab .tab-dot.act { min-width: 10px; width: 10px; height: 10px; padding: 0; background: var(--violet, #9b7bff); }
.seat-chip.acted button, .opp-tab.acted { animation: acted .6s ease-in-out 2; }
@keyframes acted { 50% { box-shadow: 0 0 0 3px var(--seat); } }
@media (prefers-reduced-motion: reduce) { .act-ticker, .seat-chip.acted button, .opp-tab.acted { animation: none; } .seat-chip.acted button, .opp-tab.acted { box-shadow: 0 0 0 2px var(--seat); } }
.bury-ghost { position: fixed; z-index: 40; border-radius: 4.75% / 3.5%; pointer-events: none; transform-origin: center; }
.mull-bar { gap: 8px; }
.mull-note { padding: 6px 10px; font-size: 12px; color: var(--cyan-2); white-space: nowrap; }
.turn-banner { position: absolute; left: 50%; top: 42%; translate: -50% -50%; z-index: 30; padding: 10px 28px; border-radius: 6px; background: var(--cyan); color: #03261f; font: 700 20px/1.2 system-ui, sans-serif; pointer-events: none; animation: turn-banner 1.3s ease both; }
@keyframes turn-banner { 0% { opacity: 0; scale: .92; } 15%, 75% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .turn-banner { animation: none; } }
.mat.out { opacity: .5; }
/* Battlefield: free placement. --x/--y are the card centre as fractions; clamp keeps the whole card on the board. */
.mat .field { grid-area: field; position: relative; isolation: isolate; /* card z-indexes stay inside the board, under menus */ min-width: 0; border-radius: 6px; border: 1px solid #ffffff14; background: #ffffff05; }
/* Playmat: the seat's layers (sent once as PLAYMAT packets) under the cards, clipped to the battlefield, barely visible */
.mat .field > .playmat { position: absolute; inset: 0; z-index: -100; overflow: hidden; border-radius: inherit; pointer-events: none; opacity: .7; } /* Enzo's pick after testing */
.mat .field > .card {
  position: absolute; margin: 0;
  left: clamp(0px, calc(var(--x) * 100% - var(--card-w) / 2), calc(100% - var(--card-w)));
  top: clamp(0px, calc(var(--y) * 100% - var(--card-h) / 2), calc(100% - var(--card-h)));
  translate: calc(var(--k, 0) * -12px) calc(var(--k, 0) * -14px); /* --k: attachments peek out behind their host */
}
/* Click-to-target: the cards or opponents you may pick. */
.pick-ok { outline: 2px solid var(--cyan); outline-offset: 2px; box-shadow: none; cursor: crosshair; }
.attack-arrows { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 25; overflow: visible; }
.attack-arrows .arrow { fill: none; stroke: var(--bad); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--bad)); }
.attack-arrows marker path { fill: var(--bad); }
/* Targets and blocks (ADR 0039): amber dashed, blue */
:root { --tgt: #ef9f27; --blk: #378add; }
.attack-arrows .arrow.tgt-arrow { stroke: var(--tgt); stroke-dasharray: 7 5; stroke-width: 2.5; filter: none; }
.attack-arrows .arrow.blk-arrow { stroke: var(--blk); stroke-width: 3; filter: none; }
.attack-arrows #tgt-arrow-head path { fill: var(--tgt); }
.attack-arrows #blk-arrow-head path { fill: var(--blk); }
.ability-chip { display: grid; gap: 2px; width: 150px; flex: none; text-align: left; padding: 4px 8px; border-radius: 4px; border: 1px solid #7f77dd;
  background: #26215c; color: #cecbf6; font: 11px/1.25 var(--display); box-shadow: inset 3px 0 0 var(--owner, #7f77dd); cursor: pointer; }
.ability-chip b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ability-chip span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ability-chip .ability-x { color: #afa9ec; }
/* Declare blocks (DESIGN-BACKLOG 9): in the seam between the battlefields, in the step bar's place while your blocks are
   open, so it covers no card; the seam rises above the attack arrows, which pass under it. */
/* The priority bar (ADR 0049): over the seam, just above the step bar; your answer to the stack's top object. */
.prio-bar { position: absolute; left: 50%; bottom: 28px; translate: -50% 0; z-index: 7; display: flex; align-items: center; gap: 10px; max-width: min(760px, 90vw); padding: 6px 8px 6px 8px;
  border-radius: 8px; border: 1px solid #e0b25a; background: var(--panel-solid); box-shadow: 0 10px 28px #000b; font-size: 13px; white-space: nowrap; }
.prio-bar.mine { border-color: var(--cyan); }
.prio-art { width: 34px; aspect-ratio: 488 / 680; object-fit: cover; border-radius: 3px; flex: none; }
.prio-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.prio-text b { font-weight: 600; }
.prio-note { font-size: 11px; color: var(--muted); }
.prio-key { margin-left: 4px; padding: 0 4px; border: 1px solid currentColor; border-radius: 3px; font-size: 10px; opacity: .7; }
.prio-short { display: none; }
/* The countdown ring: the seconds inside a ring that drains clockwise; red and pulsing in the last 10 s */
.prio-ring { position: relative; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; }
.prio-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.prio-ring circle { fill: none; stroke-width: 3.5; }
.prio-ring .ring-bg { stroke: var(--line); }
.prio-ring .ring-run { stroke: #e0b25a; stroke-linecap: round; transition: stroke-dashoffset .25s linear, stroke .3s; }
.prio-ring b { position: relative; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.prio-ring.late .ring-run { stroke: var(--bad); }
.prio-ring.late b { color: var(--bad); }
.prio-ring.late { animation: ring-pulse 1s ease-in-out infinite; }
@keyframes ring-pulse { 50% { transform: scale(1.12); } }
.prio-ring.in-btn { display: none; width: 26px; height: 26px; margin-left: 6px; }
.prio-ring.in-btn b { font-size: 11px; }
.prio-ring.in-btn .ring-bg { stroke: #ffffff59; }
.prio-ring.in-btn .ring-run, .prio-ring.in-btn.late .ring-run { stroke: currentColor; }
.prio-ring.in-btn.late b { color: inherit; }
#play.phone-on .prio-ring.beside { display: none; }
#play.phone-on .prio-ring.in-btn { display: inline-grid; }
#play.phone-on .prio-bar [data-act=no-respond] { display: inline-flex; align-items: center; }
@media (prefers-reduced-motion: reduce) { .prio-ring.late { animation: none; } .prio-ring .ring-run { transition: none; } }
#play.phone-on .prio-bar { bottom: calc(100% + 6px); left: 8px; right: 8px; translate: none; max-width: none; }
#play.phone-on .prio-bar .ui-btn { min-height: 44px; }
#play.phone-on .prio-long, #play.phone-on .prio-key { display: none; }
#play.phone-on .prio-short { display: inline; }
#play.phone-on .prio-text { flex: 1; }
.blocks-bar { position: relative; height: 40px; min-width: 0; max-width: min(960px, 72vw); border-radius: 6px; border: 1px solid var(--blk); display: flex; align-items: center; gap: 10px; padding: 0 10px;
  background: #042c53; color: #b5d4f4; font-size: 13px; }
.midline.blocking { z-index: 26; }
.blocks-title { font-weight: 600; white-space: nowrap; }
.blocks-chips { display: flex; gap: 6px; overflow-x: auto; min-width: 0; flex: 0 1 auto; scrollbar-width: none; } /* as wide as its chips, up to the bar's cap */
.blk-chip { flex: none; border: 1px solid var(--bad); border-radius: 4px; background: #ffffff10; color: inherit; padding: 2px 8px; font-size: 12px; cursor: pointer; }
.blk-chip.held { border-color: var(--blk); }
.blocks-time { font-variant-numeric: tabular-nums; color: #85b7eb; }
.blocks-wait { white-space: nowrap; }
@media (max-width: 900px) and (pointer: coarse) {
  /* Phone (SPEC: Mobile): the same seam bar, the attackers as big tap targets. */
  .blocks-bar { height: 52px; max-width: 100%; }
  .blocks-title { display: none; }
  .blk-chip { min-height: 44px; padding: 0 10px; }
  .blocks-done { min-height: 44px; }
}
/* Resolve by hand: what combat left to the players, a chip in the seam after the blocks window; on desktop its list
   opens above the seam (over the bottom of the battlefield above, until Hide), on a phone it opens as a modal. */
.resolve-chip { flex: none; height: 30px; border-radius: 6px; border: 1px solid var(--tgt); background: #412402; color: #fac775; padding: 0 10px; font-size: 12px; white-space: nowrap; cursor: pointer; }
.resolve-panel { position: absolute; left: 50%; bottom: calc(100% + 26px); translate: -50% 0; width: min(620px, 80vw); z-index: 26; border-radius: 6px; border: 1px solid var(--tgt);
  background: #2a1801f2; color: #fac775; font-size: 13px; text-align: left; }
.resolve-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #ef9f2740; }
.resolve-head span { flex: 1; min-width: 0; color: #ef9f27b3; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resolve-panel ul, .resolve-list { list-style: none; margin: 0; padding: 0; }
.resolve-row { display: flex; gap: 8px; padding: 5px 10px; border-top: 1px solid #ef9f2726; } .resolve-row:first-child { border-top: 0; }
.resolve-icon { width: 14px; flex: none; text-align: center; color: var(--tgt); }
.resolve-list .resolve-row { color: var(--text); padding: 8px 0; }
.resolve-note { color: var(--muted); font-size: 13px; margin: 0 0 6px; }
@media (max-width: 900px) and (pointer: coarse) { .resolve-chip { min-height: 44px; } }
/* The starting-player toss (ADR 0043): the whole screen dims; a gold coin (the logo heads, the wordmark tails) or a
   die racing through the seats' numbers; then the winner's Play first / Draw first. Built by src/ui/toss.js. */
.toss-dim { position: fixed; inset: 0; z-index: 90; background: #000000b8; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; perspective: 700px; color: #e8f1f6; padding: 16px; text-align: center; }
.toss-legend { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; font-size: 13px; }
.toss-seat { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--c); transition: background .1s, transform .1s; }
.toss-seat.on { background: var(--c); color: #06121a; transform: scale(1.08); }
.toss-coin { width: 120px; height: 120px; position: relative; transform-style: preserve-3d; }
.toss-face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #ffe3a1, #e2a63b 55%, #a8701c); box-shadow: inset 0 0 0 5px #c48a2a, inset 0 0 0 7px #ffd98a, inset 0 0 0 9px #9b6418; }
.toss-face::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: repeating-conic-gradient(#00000030 0 2deg, transparent 2deg 5deg);
  -webkit-mask: radial-gradient(circle, transparent 54px, #000 55px); mask: radial-gradient(circle, transparent 54px, #000 55px); }
.toss-back { transform: rotateY(180deg); }
.toss-face path { fill: #5a3608; } .toss-face svg { filter: drop-shadow(0 1px 0 #ffe6a8); }
.toss-mark { width: 92px; height: 92px; background: #5a3608; -webkit-mask: url('assets/logo-mark.webp') center / contain no-repeat; mask: url('assets/logo-mark.webp') center / contain no-repeat; filter: drop-shadow(0 1px 0 #ffe6a8); } /* the logo, struck */ .toss-word { width: 88px; }
.toss-shadow { width: 90px; height: 12px; border-radius: 50%; background: #00000080; filter: blur(4px); margin-top: -6px; }
.toss-die { width: 78px; height: 78px; border-radius: 16px; background: #f3efe6; box-shadow: inset 0 -6px 0 #d8d1c2, 0 6px 0 #0006; display: flex; align-items: center;
  justify-content: center; font-size: 40px; font-weight: 700; color: var(--c, #2c2c2a); border: 3px solid var(--c, #b4b2a9); }
.toss-result { margin: 0; min-height: 24px; font-size: 18px; font-weight: 600; }
.toss-actions { display: flex; gap: 10px; min-height: 36px; }
@media (pointer: coarse) { .toss-actions .ui-btn { min-height: 44px; padding: 0 16px; } }

.drop-ok { outline: 2px solid var(--cyan); outline-offset: 2px; box-shadow: none; }

.nameplate { font-weight: 600; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thinking { color: var(--violet); }
.life-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.life-btn { width: 26px; height: 26px; padding: 0; border-radius: 50%; font-size: 16px; line-height: 1; flex: none; }
.hex {
  display: grid; place-items: center; width: 50px; height: 56px; font: 600 20px var(--display); color: #fff;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: radial-gradient(circle at 50% 35%, #0e3a4a, #061a26); box-shadow: inset 0 0 0 2px var(--cyan);
}
.mana { display: grid; grid-template-columns: repeat(3, 16px); gap: 2px; }
.pip { width: 16px; height: 16px; padding: 0; border-radius: 50%; font-size: 10px; font-weight: 700; color: #111; border: 1px solid #0008; }
.pip-W { background: #f4ecd2; } .pip-U { background: #6fb2e3; } .pip-B { background: #8c8597; }
.pip-R { background: #e7795f; } .pip-G { background: #6cbf7f; } .pip-C { background: #c9c3bb; }
/* Your life drawer: closed it is just your life; open, it adds −/+, counters and mana, frosted like the menus */
.life-drawer {
  position: absolute; z-index: 4; right: calc(var(--pile-col) + 20px); top: 12px; display: grid; justify-items: center; gap: 8px;
  padding: 6px 6px 0; border-radius: 8px; border: 1px solid transparent; overflow: hidden; transition: background .2s, border-color .2s, box-shadow .2s;
}
.life-drawer.open { z-index: 6; /* over the mana pool, which sits right under it on a phone */ padding: 14px 14px 0; background: #06141ee6; border-color: var(--line); box-shadow: 0 10px 30px #000a; backdrop-filter: blur(6px); }
.drawer-more { display: grid; justify-items: center; gap: 10px; width: 100%; }
.drawer-more.opening { animation: drawer-in .2s ease-out; }
.drawer-more .chip { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The drawer's pull: a tab under your life when closed, the panel's whole bottom edge when open */
.drawer-handle { position: relative; z-index: -1; width: 50px; height: 26px; margin-top: -22px; padding: 12px 0 0; display: grid; place-items: center; border-radius: 0 0 9px 9px; background: #061a26; border: 0; box-shadow: inset 2px 0 0 -0.5px var(--cyan), inset -2px 0 0 -0.5px var(--cyan), inset 0 -2px 0 -0.5px var(--cyan); }
.drawer-handle svg { width: 14px; height: 7px; fill: none; stroke: var(--cyan-2); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: rotate .2s; }
.life-drawer:not(.open) { cursor: pointer; } /* closed, the whole die opens the drawer */
.drawer-handle:hover { background: #0b2a3a; }
.life-drawer.open .drawer-handle { width: calc(100% + 28px); margin: 0 -14px; height: 18px; padding: 0; z-index: 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--line); background: #0a1f2b99; }
.life-drawer.open .drawer-handle svg { rotate: 180deg; }

@keyframes drawer-in { from { opacity: 0; translate: 0 -6px; } }

.pile { position: relative; display: grid; place-items: center; width: var(--card-w); height: var(--card-h); padding: 0; border-radius: 6px; background: #0006; border: 1px dashed #ffffff33; overflow: hidden; flex: none; }
.pile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.pile .card.back { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Pile labels fit their pile: the font shrinks with the pile width (cqi) and the longest word (--len, set per label), and
   a long name (custom zones, up to 20 characters) wraps onto a second line. */
.pile { container-type: inline-size; }
.pile-label { position: relative; max-width: 92%; font-size: clamp(5px, calc(100cqi / var(--len, 7)), 9px); line-height: 1.15; text-align: center; text-transform: uppercase; letter-spacing: .02em; overflow-wrap: normal; color: var(--muted); background: #000b; padding: 1px 2px; border-radius: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pile-count { position: absolute; right: 3px; bottom: 3px; font-weight: 700; font-size: 11px; background: #000c; color: var(--cyan-2); padding: 0 5px; border-radius: 999px; }
.library:disabled { opacity: 1; }
.pile.command { border-style: solid; border-color: #7a5cff88; }

/* Zone viewer: a floating panel (not a modal) so its cards can be dragged onto the board */
.zone-panel { position: fixed; right: 24px; top: 80px; z-index: 15; width: min(460px, 60vw); max-height: 70vh; display: grid; grid-template-rows: auto auto 1fr; gap: 6px; padding: 12px; border-radius: 8px; background: var(--panel-solid); border: 1px solid var(--cyan); box-shadow: 0 10px 40px #000c; }
.zone-panel header { display: flex; align-items: center; justify-content: space-between; }
.zone-panel p { margin: 0; font-size: 12px; }
.zone-panel [data-close] { width: 30px; height: 30px; padding: 0; border-radius: 50%; font-size: 18px; }
/* The look tray (ADR 0047): Scry, Surveil, Look at top, Reveal top. It slides up over your hand; the battlefield stays in
   view. On a phone held sideways it covers the whole table until Done. */
.lk-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; max-height: 70vh; overflow-y: auto; padding: 12px 16px 14px; background: var(--panel-solid); border-top: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); box-shadow: 0 -14px 34px #000a; animation: lk-up .18s ease-out; }
@keyframes lk-up { from { transform: translateY(24px); opacity: 0; } }
.lk-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.lk-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 14px; font-weight: 600; }
.lk-hint { font-weight: 400; color: var(--muted); }
.lk-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.lk-cards { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 4px; }
.lk-card { flex: none; width: 104px; }
.lk-card[draggable="true"] { cursor: grab; }
.lk-art { position: relative; aspect-ratio: 488 / 680; border-radius: 6px; overflow: hidden; background: #ffffff0a; }
.lk-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lk-card.away .lk-art { opacity: .55; }
/* A library card revealed to you: its face on the pile, an eye in the corner (ADR 0048). Search library lists by name,
   so it never shows the order. */
.pile.library .lib-face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.pile-eye { position: absolute; top: 2px; right: 2px; z-index: 1; padding: 0 3px; border-radius: 3px; font-size: 10px; line-height: 14px; background: #050c14d9; }
.zone-panel.lib-view { grid-template-rows: auto auto auto 1fr; }
.zone-search { width: 100%; font-size: 13px; }
@media (pointer: coarse) and (max-height: 500px) { .zone-panel.lib-view { grid-template-rows: auto auto 1fr; } .zone-panel.lib-view p { display: none; } } /* a sideways phone: the search field takes the hint's room */
.lk-num { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--cyan-2); background: #050c14e0; border: 1px solid var(--cyan); }
.lk-tg { display: flex; gap: 4px; margin-top: 8px; }
.lk-tg button { flex: 1; min-width: 0; padding: 6px 0; border-radius: 4px; font-size: 12px; }
.lk-tg button.on { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 18%, transparent); color: var(--text); }
.lk-tg .lk-move { display: none; flex: none; width: 26px; }
@media (pointer: coarse) { /* no drag: ‹ › reorder, and only the chosen pile shows (a tap flips it) */
  .lk-tg .lk-move { display: block; } .lk-tg button:not(.on):not(.lk-move) { display: none; } .lk-tg button { padding: 8px 0; } }
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) { .lk-tray { top: 0; max-height: none; } .lk-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .lk-tray { animation: none; } }
.zone-cards { --card-w: 92px; display: flex; flex-wrap: wrap; gap: 8px; overflow: auto; align-content: flex-start; }
/* A search of another player's library (ADR 0057): Done · shuffle at its foot. */
.zone-panel:has(.zone-foot) { grid-template-rows: auto auto auto 1fr auto; }
.zone-foot { display: flex; justify-content: flex-end; }
/* Library and sideboard (ADR 0057): two columns, each a drop target; on a sideways phone a sheet over the whole table. */
.zone-panel.sb-view { width: min(760px, calc(100vw - 48px)); }
.sb-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; min-height: 0; }
.sb-col { display: grid; grid-template-rows: auto 1fr; gap: 6px; min-height: 0; padding: 6px; border: 1px dashed var(--line); border-radius: 8px; }
.sb-col.drop-ok { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 8%, transparent); }
.sb-col .ui-label { margin: 0; }
.sb-col .zone-cards { --card-w: 72px; }
@media (pointer: coarse) and (max-height: 500px) {
  .zone-panel:has(.zone-foot) { grid-template-rows: auto auto 1fr auto; }
  .zone-panel.sb-view { inset: 8px; width: auto; max-height: none; }
  .sb-col .zone-cards { --card-w: 56px; gap: 6px; }
}

/* Cards */
.card { position: relative; width: var(--card-w); height: calc(var(--card-w) * 1.394); border-radius: 5px; cursor: pointer; transition: transform .15s, box-shadow .15s; flex: none; background: #2b3140 center / cover; border: 0; padding: 0; box-shadow: 0 3px 8px #000a; }
.card[draggable="true"] { cursor: grab; }
.card img { width: 100%; height: 100%; border-radius: 5px; display: block; pointer-events: none; }
.card.tapped { transform: rotate(90deg); margin: 0 calc(var(--card-w) * .2); }
.card.attacking { box-shadow: 0 0 0 2px var(--bad), 0 0 16px var(--bad); }
.card.blocking { box-shadow: 0 0 0 2px var(--good), 0 0 16px var(--good); }
.card.dragging { opacity: .35; }
.card .tag { position: absolute; left: 2px; top: 2px; font-size: 9px; background: #000c; border-radius: 3px; padding: 0 3px; }
/* A battlefield card's name across its top, over the printed title (L shows / hides; the card's tooltip keeps its #id).
   Sized from the card's width; two lines at most. */
.card-name { display: none; position: absolute; z-index: 1; left: 3%; right: 3%; top: 3%; padding: 2px 4px; border-radius: 5px; background: #000000c4; color: #fff;
  font: 600 clamp(8px, calc(var(--card-w) * .125), 12px) / 1.15 system-ui, -apple-system, 'Segoe UI', sans-serif; text-align: center; pointer-events: none;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.show-names .card-name { display: -webkit-box; }
.show-names :is(.field, .mat.me .hand) .card > .tag { display: none; }
.card .note-flag { position: absolute; z-index: 2; right: 2px; top: 2px; width: 18px; height: 18px; display: grid; place-items: center; font-size: 11px; border-radius: 50%; background: #031c26; color: var(--cyan-2); border: 1px solid var(--cyan); }
/* Tapped cards: badges stay on their corner but their text stays upright */
/* O (Game settings: Hide / show playmat overlays): a clean look at your side, just your cards (and dice) on the playmat:
   card badges everywhere, your life drawer and your mana pool hidden */
.hide-badges .card > :is(.tag, .pt, .ctr, .symbols, .lock-badge, .ribbon, .cast-tag, .note-flag, .down-mark),
.hide-badges .mat.me :is(.life-drawer, .mana-spot) { display: none; }
.card.tapped > .tag, .card.tapped > .pt, .card.tapped > .ctr, .card.tapped > .note-flag { transform: rotate(-90deg); }
.card .ribbon { position: absolute; left: 0; right: 0; bottom: 18%; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; background: #7a5cffdd; color: #fff; text-align: center; }
/* Badges: P/T or loyalty bottom right, the plain counter bottom left; on your cards each number is a button (click +1, right-click −1) */
.card .pt { position: absolute; right: -4px; bottom: -4px; display: flex; align-items: center; height: 18px; padding: 0 1px; border-radius: 5px; font-size: 11px; font-weight: 800; background: #061a24f2; color: #e8f6fa; border: 1px solid #ffffff40; box-shadow: 0 1px 4px #000d; }
.card .pt.changed { border-color: var(--cyan); color: var(--cyan-2); }
.card .pt b { min-width: 13px; padding: 0 2px; text-align: center; border-radius: 5px; font-weight: inherit; }
.card .pt i { font-style: normal; opacity: .55; font-weight: 600; }
.card .pt.loy { min-width: 22px; justify-content: center; padding: 0 5px; border-radius: 6px 6px 3px 3px; }
.card .live b, .card .live.loy, .card .ctr.live { cursor: pointer; }
.card .live b:hover, .card .live.loy:hover { background: color-mix(in srgb, var(--cyan) 20%, transparent); }
.card .ctr.live:hover { filter: brightness(1.15); box-shadow: 0 0 0 2px var(--cyan), 0 1px 4px #000d; } /* keeps its own fill */
.card .ctr { position: absolute; left: -4px; bottom: -4px; min-width: 20px; height: 20px; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: radial-gradient(circle at 40% 35%, var(--cyan-2), var(--glow)); color: #00222b; border-radius: 999px; padding: 0 4px; border: 1px solid #ffffff80; box-shadow: 0 1px 4px #000d; }
.card .ctr.charge { left: auto; right: -4px; bottom: 17px; font-size: 9px; background: #f0b35a; }
.card.back {
  cursor: default; border: 3px solid #120c08;
  background: radial-gradient(ellipse 30% 36% at 50% 50%, #c4743a 0 92%, #2f8f86 94% 100%, transparent 101%), linear-gradient(160deg, #4a2c19, #1f130b);
}
button.card.back { cursor: grab; }

/* Hand: a fan whose overlap (--step, set from the card count) keeps it inside its fixed strip */
.hand { display: flex; justify-content: center; align-items: flex-end; overflow: visible; padding-top: 16px; min-width: 0; }
/* The fan: each card turns 4° per place from the middle around its bottom centre, and drops --d (place² × 3 px), so the
   hand arches like one held in a hand: the middle highest, the ends lowest, dipping over the playmat's bottom edge down
   to the window's. */
.hand .card { --card-w: var(--hand-w); margin-left: var(--step, calc(var(--hand-w) * -.3)); transform: translateY(var(--d, 0px)) rotate(calc(var(--r, 0) * 4deg)); transform-origin: 50% 100%; }
.hand .card:first-child { margin-left: 0; }
.hand .card:hover { transform: translateY(-20px) scale(1.12); z-index: 2; }
.mat.opp .hand { --hand-w: calc(var(--card-w) * .6); padding-top: 0; align-items: flex-start; }
.mat.opp .hand .card { margin-left: -14px; transform: translateY(calc(var(--d, 0px) * -.5)) rotate(calc(var(--r, 0) * -2deg)); transform-origin: 50% 0%; } /* mirrored: the middle lowest */

/* Step bar: Next step, the steps (click one to go there, or back to it), End turn */
.step-bar { position: relative; z-index: 5; display: flex; align-items: center; gap: 4px; max-width: 100%; overflow-x: auto; padding: 7px 10px; border-radius: 6px; background: #050c14; border: 1px solid var(--line); }
.step-bar > button { font-size: 12px; padding: 6px 12px; white-space: nowrap; }
/* Next: a labelled button ("Next ▶" and its shortcut key), filled with the accent when it's your turn */
.step-bar > .turn-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 10px 6px 12px; border-radius: 5px; font-weight: 700; background: #0a141f; border: 1px solid var(--line); }
.step-bar > .turn-btn span { font-size: 10px; }
.step-bar > .turn-btn kbd { font: 600 10px/1 ui-monospace, monospace; padding: 2px 4px; border-radius: 3px; border: 1px solid currentColor; opacity: .7; }
.step-bar > .turn-btn.ready { color: var(--cyan-2); background: var(--cyan-deep); border-color: var(--cyan); box-shadow: none; }
.step-bar > .step { border-color: transparent; background: none; color: var(--muted); }
.step-bar > .step:hover:not(:disabled) { color: var(--text); border-color: var(--line); }
/* The steps are a read-out, not actions: the current one is lit text (the active seat's colour on someone else's turn),
   the ones already passed dimmer than the ones to come. Next stays the only filled button. */
.step-bar > .step.on { color: var(--cyan-2); background: none; border-color: transparent; font-weight: 700; opacity: 1; }
.step-bar.theirs > .step.on { color: var(--seat); }
.step-bar > .step.done { color: color-mix(in srgb, var(--muted) 55%, transparent); }
.step-arrow { color: #ffffff38; font-size: 12px; }
.step-bar > [data-act="end-turn"] { margin-left: 10px; }

/* Menus: one column; a quick row of icons on top, groups split by separators, › on submenus, a cyan bar on hover */
.menu { position: fixed; z-index: 960; /* above the friend list panel (900) and toasts it opens from */ width: 224px; background: var(--panel-solid); border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 1px; box-shadow: 0 14px 34px #000d; }
/* A phone's card sheet (SPEC: Mobile): the card large on the left, its menu on the right, over a dimmed table. */
.menu-sheet { position: fixed; inset: 0; z-index: 960; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px; background: #000b; }
.menu-sheet .menu { position: static; max-height: calc(100dvh - 16px); overflow-y: auto; }
/* A phone held sideways: two columns of rows so the whole card menu fits (its More and React were below the edge) */
@media (max-height: 500px) {
  .menu-sheet .menu { width: auto; display: grid; grid-template-columns: repeat(2, 200px); column-gap: 4px; align-content: start; }
  .menu-sheet .menu > :is(.menu-quick, .menu-sep, .menu-back, .menu-stepper) { grid-column: 1 / -1; }
}
.sheet-side { display: grid; justify-items: center; gap: 4px; }
.sheet-card { padding: 0; border: 0; background: none; border-radius: 4.75% / 3.5%; overflow: hidden; }
.sheet-card img { display: block; height: min(calc(100dvh - 44px), 360px); aspect-ratio: 488 / 680; object-fit: cover; }
.sheet-hint { margin: 0; font-size: 11px; color: var(--muted); }
.menu > button { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 13px; text-align: left; padding: 6px 10px; border: 0; border-radius: 6px; background: none; }
.menu > button:hover { background: #ffffff10; }
.menu > button:focus-visible { background: #ffffff10; outline: 1px solid var(--cyan-2); outline-offset: -1px; } /* keyboard focus stays visible */
.menu-more { color: var(--muted); font-size: 15px; line-height: 1; }
.menu-sep { height: 1px; margin: 4px 4px; background: #ffffff1a; }
.menu-quick { display: flex; gap: 4px; padding: 0 0 6px; margin-bottom: 4px; border-bottom: 1px solid #ffffff1a; }
.menu-quick button { flex: 1; height: 32px; display: grid; place-items: center; padding: 0; border-radius: 7px; background: #ffffff0a; border: 1px solid #ffffff14; }
.menu-quick button:hover, .menu-quick button:focus-visible { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, transparent); }
.menu-quick .ico { font-size: 16px; line-height: 1; }
.ico-back { display: block; width: 13px; height: 18px; border-radius: 2px; border: 1.5px solid #120c08; background: radial-gradient(ellipse 30% 34% at 50% 50%, #c4743a 0 90%, #2f8f86 93% 100%, transparent 101%), linear-gradient(160deg, #6a4029, #2a1a0e); box-shadow: 0 0 0 1px #ffffff40; }
.menu-stepper { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; font-size: 13px; }
.menu-stepper span { flex: 1; }
.menu-stepper button { width: 26px; height: 24px; padding: 0; border-radius: 6px; font-size: 15px; line-height: 1; }
.menu-stepper .step-value { min-width: 30px; height: 24px; padding: 0 4px; border: 1px solid transparent; background: none; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; border-radius: 6px; }
.menu-stepper .step-value:hover { border-color: var(--line); }
.menu-stepper .step-input { width: 52px; height: 24px; padding: 0 4px; text-align: center; }
#preview { position: fixed; right: 16px; bottom: 16px; width: 260px; border-radius: 8px; pointer-events: none; z-index: 20; box-shadow: 0 10px 40px #000c; }
/* Public notes under the hovered card's preview (one line each, "Name: text"), for every player */
#preview-note { position: fixed; z-index: 20; pointer-events: none; padding: 6px 9px; border-radius: 6px; background: var(--panel-solid); border: 1px solid var(--cyan); color: var(--text); font-size: 13px; line-height: 1.4; white-space: pre-line; box-shadow: 0 10px 30px #000a; }
#preview-note::before { content: "Public notes"; display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
#decks:not([hidden]) ~ #preview, #viewer:not([hidden]) ~ #preview { display: none; } /* the deck room and viewer have their own preview column */
#play:not([hidden]) ~ #preview { right: 50px; bottom: auto; top: 96px; width: min(250px, calc((50vh - 110px) * .717)); } /* the opponent board's top right: hides the least */
#play.drawer-open:not([hidden]) ~ #preview { right: calc(var(--drawer-w) + 50px); } /* never over the open drawer */

@media (max-width: 900px) {
  :root { --card-w: 44px; --hand-w: 58px; --rail-w: 0px; }
  .rail { inset: auto 0 0 0; width: auto; height: 60px; flex-direction: row; justify-content: center; padding: 0; border-right: 0; border-top: 1px solid var(--line); }
  .rail .rail-logo { display: none; }
  .screen { padding: 12px; }
  .page { height: calc(100dvh - 60px); } /* the bottom bar keeps its 60 px */
  #decks:not([hidden]), #viewer:not([hidden]) { height: auto; } /* one column: the deck room scrolls in #page */
  .deck-body.read { grid-template-columns: 1fr; }
  .deck-body { grid-template-columns: 1fr; }
  #decks .deck-preview, #decks .deck-board, #decks .results-panel { grid-column: auto; grid-row: auto; }
  .mat-slice { display: none; } /* one column: no row of panels to span */
  .deck-preview { display: none; }
  .deck-board, .results-panel { max-height: none; overflow: visible; min-width: 0; } /* one scroll, the page's: no list scrolling inside it (group headings stay pinned); min-width 0: without its own scroll a grid item would widen to its content */
  .results-panel { grid-template-columns: minmax(0, 1fr); } .results-panel > * { min-width: 0; } /* long names get their ellipsis instead of widening the panel */
  .results-panel.has-results { order: -1; } /* one scroll: results above the list, never under 100 cards */
  .results-panel .results-close { display: inline-block; float: right; padding: 0 8px; } /* beats the default hiding further down */
  .hero-actions { max-width: none; justify-content: flex-start; }
  .deck-hero { flex-direction: column; align-items: stretch; }
  .mat.me { --hand-room: 70%; }
  .hex { width: 40px; height: 46px; font-size: 16px; }
  .drawer-handle { width: 40px; margin-top: -20px; }
  #preview { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .hand .card:hover { transform: none; }
}

/* Request prompt: someone asks for one of your cards */
.ui-dialog.request { width: min(620px, 94vw); }
.ui-bd.request-bd { grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 22px; } /* beats .ui-bd's one column */
.request-bd .request-back { width: 100%; height: auto; aspect-ratio: 488 / 680; border-radius: 8px; }
.request .request-bd img { width: 100%; aspect-ratio: 488 / 680; border-radius: 8px; box-shadow: 0 10px 30px #000c; animation: request-in .35s ease-out; }
.request-ask { margin: 0 0 4px; font-size: 15px; color: var(--muted); }
.request-card { margin: 0; font: 600 24px var(--display); color: var(--text); }
@keyframes request-in { from { transform: translateY(12px) rotate(-3deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .request .request-bd img { animation: none; } }
@media (max-width: 600px) { .ui-bd.request-bd { grid-template-columns: 1fr; justify-items: center; text-align: center; } .request .request-bd :is(img, .request-back) { max-width: 160px; } }
@media (max-height: 500px) { .ui-bd.request-bd { grid-template-columns: 110px minmax(0, 1fr); } } /* a phone held sideways: the card small, the footer in view */

/* Deck preview: a placeholder until a card is hovered (no broken image) */
.deck-preview img:not([src]), .deck-preview img[src=""] { display: none; }
.preview-empty { display: none; aspect-ratio: 488 / 680; place-items: center; text-align: center; padding: 20px; border-radius: 8px; color: var(--muted); background: linear-gradient(#0a1724e6, #0a1724e6), url('assets/logo-mark.webp') center / 80% no-repeat, #0a1724; } /* the logo, faint */
.deck-preview img:not([src]) + .preview-empty, .deck-preview img[src=""] + .preview-empty { display: grid; }

/* Toggle switch (All printings) */
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); white-space: nowrap; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .slider { position: relative; width: 38px; height: 22px; border-radius: 999px; background: #ffffff26; border: 1px solid var(--line); transition: background .15s; flex: none; }
.switch .slider::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #cfd8dc; transition: transform .15s, background .15s; }
.switch input:checked + .slider { background: var(--cyan-deep); border-color: var(--cyan); }
.switch input:checked + .slider::after { transform: translateX(16px); background: var(--cyan-2); }
.switch input:focus-visible + .slider { outline: 2px solid var(--cyan-2); outline-offset: 2px; }
/* Hover tips on the play table (the "Tips" switch) */
.tip { position: fixed; z-index: 60; max-width: 300px; padding: 8px 12px; border-radius: 6px; font-size: 12px; line-height: 1.5; color: var(--text); background: var(--panel-solid); border: 1px solid var(--line); box-shadow: 0 8px 24px #000c; pointer-events: none; }

/* New deck: format picker */
dialog.format-picker { padding: 22px; background: var(--bg-base); border-color: var(--line); } /* the page's own dark base and a hairline, not the cyan dialog frame: the art carries the colour */
dialog.format-picker form { display: grid; gap: 14px; width: min(560px, 88vw); text-align: center; }
dialog.format-picker h2 { font: 600 24px var(--display); }
.format-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.format-tile { position: relative; overflow: hidden; isolation: isolate; display: grid; align-content: end; gap: 3px; height: 300px; padding: 14px; border-radius: 8px; background: #0d0a2e; border: 1px solid var(--line); text-align: left; }
.format-tile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 45%, #080614eb); } /* keeps the name readable over any art */
.format-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.format-credit { position: absolute; top: 6px; right: 8px; font-size: 11px; color: #e6edf4; text-shadow: 0 1px 2px #000; pointer-events: none; } /* the art's artist, like .game-credit */
.format-tile strong { font: 600 20px var(--display); color: #fff; }
.format-tile span { font-size: 12px; color: #c9c6e0; }
.format-tile:hover, .format-tile:focus-visible { border-color: var(--cyan); box-shadow: none; }
.format-tile:hover .format-art, .format-tile:focus-visible .format-art { transform: scale(1.05); }
dialog.format-picker .row { justify-content: center; }
@media (max-width: 600px) { .format-tiles { grid-template-columns: 1fr; } .format-tile { height: 150px; } }
@media (prefers-reduced-motion: reduce) { .format-art { transition: none; } }

/* Accounts (ADR 0012): sign-in screen, and the account in the rail */
body.signed-out .rail, body.signed-out .screen { display: none; }
.signin-screen { min-height: 100%; display: grid; place-items: center; padding: 16px; }
/* One card on the page's own dark base (2026-10-22): the Home cover's art on the left, the form on the right; on a phone
   the art is a strip on top with the logo over its edge. */
.signin { width: min(700px, 100%); display: grid; grid-template-columns: 280px minmax(0, 1fr); background: var(--bg-base); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: 0 12px 40px #00000059; }
.signin-art { position: relative; min-height: 120px; }
.signin-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.signin-credit { position: absolute; right: 8px; bottom: 6px; font-size: 11px; color: #ffffffb3; text-shadow: 0 1px 2px #000; }
.signin-body { display: grid; gap: 14px; padding: 28px; align-content: center; }
.signin-logo { width: 104px; aspect-ratio: 1; justify-self: center; }
.signin-logo svg { display: block; width: 100%; }
.signin-title { margin: -4px 0 4px; text-align: center; font-size: 20px; font-weight: 600; }
.signin .bad { margin: 0; min-height: 1.2em; font-size: 13px; }
.signin-hint { margin: -6px 0 0; font-size: 12px; }
.signin-hint:empty { display: none; }
.signin-text { margin: 0; font-size: 14px; }
.signin-forgot { justify-self: end; margin-top: -8px; font-size: 12px; }
.signin-links { margin: 0; text-align: center; color: var(--muted); font-size: 13px; }
.signin-code { letter-spacing: 6px; text-align: center; font-size: 18px; }
.signin-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.signin-or::before, .signin-or::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.signin-discord { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; border: 1px solid var(--line); border-radius: 4px; color: var(--text); font-weight: 600; text-decoration: none; }
.signin-discord svg { width: 22px; color: #5865f2; } /* Discord's own blurple: a brand mark, not a theme colour */
.signin-discord:hover { border-color: #5865f2; }
@media (max-width: 600px) {
  .signin-screen:has(.signin) { padding: 0; place-items: stretch; }
  .signin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; border: 0; border-radius: 0; box-shadow: none; }
  .signin-body { padding: 0 20px 24px; align-content: start; }
  .signin-logo { position: relative; width: 88px; margin-top: -44px; border-radius: 50%; background: var(--bg-base); } /* positioned: over the art, not under it */
  .signin-discord { min-height: 44px; }
}
.linklike { background: none; border: 0; padding: 4px; color: var(--cyan-2); text-decoration: underline; text-underline-offset: 3px; }
.linklike:hover:not(:disabled) { color: #fff; }
.rail-user { margin-top: auto; display: grid; justify-items: center; gap: 4px; padding: 8px 4px; font-size: 11px; text-align: center; }
@media (max-width: 900px) { .rail-user { margin: 0 0 0 auto; padding: 0 10px; } }

/* The Fan Content notice (docs/FAN-CONTENT.md, rule 2) under every page that scrolls; the one-window-tall screens (play,
   the deck room) and sign-in have none: the rail's Legal link covers them. */
.site-foot { margin-left: var(--rail-w); padding: 8px 20px 12px; font-size: 11px; color: var(--muted); text-align: center; }
.site-foot a { color: inherit; }
.site-foot a:hover { color: var(--cyan-2); }
body:has(#play:not([hidden]), #decks:not([hidden])) .site-foot, body.signed-out .site-foot { display: none; }
.legal { max-width: 720px; margin: 8px auto; }
.legal h2 { margin: 20px 0 6px; font-size: 14px; font-weight: 600; color: var(--text); }
.legal p { margin: 0; line-height: 1.6; color: var(--muted); }
.legal-licence { margin-top: 8px; color: var(--muted); font-size: 13px; }
.legal-licence summary { cursor: pointer; color: var(--text); }
.legal-licence pre { margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; white-space: pre-wrap; font: 12px/1.5 ui-monospace, monospace; }

/* Public deck social (likes, comments) */
.deck-social { display: flex; gap: 12px; padding: 0 10px 8px; font-size: 12px; color: var(--muted); }
.deck-social .liked { color: #ff6b9a; }
button.like { font-size: 15px; }
button.like.on { color: #ff6b9a; border-color: #ff6b9a; box-shadow: none; }
.comments { display: grid; gap: 12px; }
.comments h2 { font-size: 16px; }
.comment-form { display: flex; gap: 8px; align-items: flex-end; }
.comment-form textarea { flex: 1; width: auto; height: auto; resize: vertical; }
.comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.comment-list li { padding: 10px 12px; border-radius: 8px; background: #ffffff0a; }
.comment-list p { margin: 4px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.comment-head { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.comment-head time { color: var(--muted); font-size: 11px; }
.comment-head .avatar { align-self: center; margin-right: -4px; }
.comment-head .linklike { margin-left: auto; font-size: 12px; }
.comment-like { margin-left: auto; min-height: 28px; padding: 2px 9px; font-size: 12px; white-space: nowrap; }
.comment-head .linklike + .comment-like { margin-left: 0; }
.comment-like.on { color: #ff6b9a; border-color: #ff6b9a; }
.comment-like:disabled { opacity: .55; cursor: default; }
@media (pointer: coarse) { .comment-like { min-height: 32px; } }


/* ---------- ADR 0018: card symbols, lock, NSFW, submenus, history and chat, reactions, dice, commander counters ---------- */
.card .symbols { position: absolute; left: 50%; top: -9px; translate: -50% 0; display: flex; gap: 1px; padding: 1px 4px; border-radius: 4px; font-size: 11px; line-height: 1.3; background: #000c; border: 1px solid #ffffff33; white-space: nowrap; }
.card .lock-badge { position: absolute; right: 2px; top: 22px; font-size: 11px; filter: drop-shadow(0 0 2px #000); }
.card.tapped > .symbols, .card.tapped > .lock-badge, .card.tapped > .cast-tag { transform: rotate(-90deg); }
.card .nsfw-veil { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 5px; backdrop-filter: blur(14px); background: #000a; font-weight: 700; font-size: 11px; letter-spacing: .1em; color: #fff; }
.card .cast-tag, .pile .cast-badge { position: absolute; z-index: 1; left: 2px; bottom: 18px; padding: 0 4px; border-radius: 4px; font-size: 10px; font-weight: 700; background: #7a5cffdd; color: #fff; }
.pile .cast-badge { top: 3px; bottom: auto; left: 50%; translate: -50% 0; white-space: nowrap; }
.menu .menu-back { color: var(--muted); justify-content: flex-start; }

/* The History · Chat panel, docked right over the board: history on top, chat below, the chat input at the bottom */
/* The drawer: a tab on the screen's right edge pulls the panel out over the board; closed, the panel waits off screen */
:root { --drawer-w: min(380px, 92vw); }
.side-panel { position: fixed; z-index: 20; right: 0; top: 70px; bottom: 0; width: var(--drawer-w); display: flex; flex-direction: column; padding: 12px; border-radius: 8px 0 0 0; background: #070d16f5; border: 1px solid var(--line); border-right: 0; box-shadow: -14px 0 40px #000b; transform: translateX(100%); visibility: hidden; transition: transform .26s ease, visibility 0s linear .26s; }
.side-panel.open { transform: none; visibility: visible; transition: transform .26s ease, visibility 0s; }
.drawer-tab { position: fixed; z-index: 21; right: 0; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 34px; padding: 12px 0 10px; border-radius: 8px 0 0 8px; border: 1px solid var(--line); border-right: 0; background: #0a1420f2; box-shadow: -6px 0 18px #0009; transition: right .26s ease, border-color .15s; }
.drawer-tab.open { right: var(--drawer-w); }
.drawer-tab:hover, .drawer-tab:focus-visible { border-color: var(--cyan); }
.drawer-tab .tab-text { writing-mode: vertical-rl; rotate: 180deg; font-size: 12px; letter-spacing: .08em; white-space: nowrap; }
.drawer-tab .tab-ico { font-size: 14px; line-height: 1; color: var(--muted); }
.drawer-tab .tab-chev { font-size: 16px; line-height: 1; color: var(--cyan-2); }
.drawer-tab .tab-dot { min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border-radius: 9px; font-size: 11px; font-weight: 800; background: #ff4d6d; color: #fff; box-shadow: 0 0 0 2px #0a1420; animation: dot-pop .3s ease-out; }
@keyframes dot-pop { from { transform: scale(.4); } }
.h-scope { display: flex; gap: 2px; padding: 2px; border-radius: 4px; background: #ffffff0a; }
.h-scope button { padding: 2px 9px; font-size: 11px; border: 0; border-radius: 3px; background: none; color: var(--muted); }
.h-scope button[aria-pressed="true"] { background: color-mix(in srgb, var(--cyan) 15%, transparent); color: var(--cyan-2); }
.side-panel h2 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.side-history, .side-chat { display: flex; flex-direction: column; gap: 6px; min-height: 0; flex: 1 1 0; }
.side-history { padding-bottom: 6px; }
.side-chat { padding-top: 6px; }
.side-split { flex: none; height: 12px; margin: 0 -10px; cursor: row-resize; touch-action: none; position: relative; }
.side-split::before { content: ''; position: absolute; left: 10px; right: 10px; top: 5px; height: 1px; background: var(--line); }
.side-split::after { content: ''; position: absolute; left: 50%; top: 3px; width: 36px; height: 5px; translate: -50% 0; border-radius: 999px; background: #ffffff33; }
.side-split:hover::after, .side-split:focus-visible::after { background: var(--cyan); }
.side-split:focus-visible { outline: none; }
.side-head { display: flex; align-items: center; gap: 8px; }
/* A phone held sideways (SPEC: Mobile): History and Chat are two tabs, each the drawer's full height, and the drawer
   ends above the on-screen keyboard (--kb, from the visual viewport). */
.side-tabs { display: none; }
#play.phone-on .side-tabs { display: flex; gap: 4px; flex: none; margin-bottom: 6px; }
#play.phone-on .side-tabs button { flex: 1; height: 30px; font-size: 13px; border-color: transparent; background: none; color: var(--muted); }
#play.phone-on .side-tabs [aria-selected="true"] { color: var(--cyan-2); background: color-mix(in srgb, var(--cyan) 10%, transparent); font-weight: 700; }
.side-badge { display: inline-block; min-width: 16px; padding: 0 4px; margin-left: 4px; border-radius: 8px; background: #ff4d6d; color: #fff; font-size: 11px; line-height: 16px; }
#play.phone-on .side-panel { top: 40px; bottom: var(--kb, 0px); padding: 8px; }
#play.phone-on .side-panel :is(.side-history, .side-chat) { flex-grow: 1 !important; padding: 0; }
#play.phone-on .side-panel .side-split, #play.phone-on .side-panel.tab-history .side-chat, #play.phone-on .side-panel.tab-chat .side-history { display: none; }
#play.phone-on .side-panel .side-head h2, #play.phone-on .side-chat > h2 { display: none; } /* the tab names it */
.side-head h2 { flex: 1; }
.h-nav { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; }
.h-nav button { width: 26px; padding: 1px 0; }
.h-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.h-filters button { width: 32px; padding: 3px 0; font-size: 14px; }
.h-filters button[aria-pressed="false"] { opacity: .35; }
.h-list, .chat-list { list-style: none; margin: 0; padding: 0 2px 0 0; overflow: auto; display: flex; flex-direction: column; gap: 4px; min-height: 0; flex: 1; }
.h-turn { margin: 2px 0; padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: #ffffff0d; }
/* Compact history: one 28 px line per action (a 20 px square art), runs of one player's actions under a name header */
.h-entry { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px; min-height: 28px; padding: 2px 6px; border-radius: 4px; background: #ffffff06; }
.h-entry.in-run { min-height: 24px; padding-left: 14px; grid-template-columns: 18px 1fr auto; }
.h-group { margin-top: 4px; padding: 2px 6px 0; font-size: 11px; font-weight: 700; color: var(--muted); }
.h-list > .h-entry + .h-group { margin-top: 6px; }
.h-entry.linking { outline: 1px solid var(--cyan); }
.h-entry.hl { animation: hl 2s ease-out; }
@keyframes hl { 0%, 40% { background: color-mix(in srgb, var(--cyan) 20%, transparent); } 100% { background: #ffffff06; } }
.h-entry img, .h-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 22%; border-radius: 3px; background: #1f130b; } /* square: the card's art region */
.quote img { width: 30px; aspect-ratio: 488 / 680; object-fit: cover; border-radius: 3px; background: #1f130b; }
.h-thumb { display: block; overflow: hidden; } /* the player's profile picture */
.h-thumb .avatar { width: 100%; height: 100%; border: 0; }
/* Who acted: a small dot in the seat color before the name (no colored bars on entries, messages or quotes) */
.seat-dot { display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--seat, var(--muted)); vertical-align: middle; }
.roll-value { font-size: 1.1em; color: var(--text); }
.h-line { font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.h-icon { color: var(--muted); }
.link-chat { padding: 1px 6px; font-size: 12px; opacity: 0; }
.h-entry:hover .link-chat, .link-chat:focus-visible, .h-entry.linking .link-chat { opacity: 1; }
.h-reacts { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 3px; }
.react-chip, .react-add { padding: 0 6px; font-size: 11px; border-radius: 4px; }
.react-chip.mine { border-color: var(--cyan); }
.react-add { opacity: 0; }
.chat-list li:hover .react-add, .react-add:focus-visible { opacity: 1; }
.chat-list > li { flex: none; padding: 6px 8px; border-radius: 6px; background: #ffffff06; font-size: 12px; }
.chat-list > .chat-empty { border-left-color: transparent; }
.chat-list p { margin: 3px 0 0; overflow-wrap: anywhere; font-size: 13px; }
.quote { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 8px; width: 100%; margin-top: 4px; padding: 4px 6px; text-align: left; font: inherit; font-size: 12px; line-height: 1.35; border-radius: 6px; border: 0; background: #ffffff0d; color: inherit; }
button.quote:hover { background: #ffffff1a; }
.chat-form { flex: none; display: grid; gap: 6px; }
/* The chat composer: one field holding the message, a ring that fills as the 200 characters go, and the send button */
.composer { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 5px 0 12px; border-radius: 6px; background: #0a141f; border: 1px solid #ffffff26; transition: border-color .15s, box-shadow .15s; }
.composer:hover { border-color: #ffffff40; }
.composer:focus-within { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }
.composer input[name="msg"], .composer input[name="msg"]:hover, .composer input[name="msg"]:focus { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: none; } /* the composer draws the frame */
.chat-ring { --p: 0%; --ring: var(--cyan); flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--ring) var(--p), #ffffff26 0); }
.chat-ring > span { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: #0a141f; font-size: 9px; font-weight: 800; color: var(--ring); }
.chat-ring.warn { --ring: #f0b35a; } .chat-ring.bad { --ring: var(--bad); }
.composer .send { flex: none; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border-radius: 5px; font-size: 13px; color: var(--cyan-2); background: var(--cyan-deep); border: 1px solid var(--cyan); }
.composer .send:disabled { color: var(--muted); background: none; border-color: #ffffff26; opacity: 1; }
.chat-link { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
.chat-link .quote { margin: 0; }
.chat-link button { width: 26px; padding: 0; }

/* Reactions: the picker, and the flash (a pulse on the target; the emoji pops, rises, holds, fades: about 3 s) */
.emoji-picker { position: fixed; z-index: 55; display: grid; grid-template-columns: repeat(6, 34px); gap: 2px; padding: 6px; border-radius: 6px; background: var(--panel-solid); border: 1px solid var(--cyan); box-shadow: 0 10px 30px #000c; }
.emoji-picker button { padding: 2px 0; font-size: 20px; border: 0; background: none; }
.emoji-picker button:hover { background: #ffffff14; border-radius: 6px; }
.flash { position: fixed; z-index: 45; translate: -50% -50%; pointer-events: none; display: grid; justify-items: center; gap: 4px; animation: flash 3s ease-out forwards; }
.flash-emoji { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; font-size: 40px; line-height: 1; background: radial-gradient(circle at 35% 30%, #1d2a3a, #0a111b); border: 3px solid var(--seat); box-shadow: 0 0 0 6px color-mix(in srgb, var(--seat) 25%, transparent), 0 10px 26px #000c; }
.flash-who { padding: 1px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; background: #070d16e6; border: 1px solid var(--seat); white-space: nowrap; }
@keyframes flash {
  0% { opacity: 0; transform: scale(.2) translateY(0); }
  8% { opacity: 1; transform: scale(1.3) translateY(-20px); }
  16% { transform: scale(1) translateY(-30px); }
  80% { opacity: 1; transform: scale(1) translateY(-44px); }
  100% { opacity: 0; transform: scale(.85) translateY(-70px); }
}
.ping { position: fixed; z-index: 44; pointer-events: none; border-radius: 9px; border: 3px solid var(--seat); box-shadow: 0 0 18px 4px var(--seat), inset 0 0 14px var(--seat); animation: ping 3s ease-out forwards; }
@keyframes ping { 0%, 20%, 40%, 60% { opacity: 1; transform: scale(1.04); } 10%, 30%, 50% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } }
.flash-ring { position: fixed; z-index: 44; pointer-events: none; border-radius: 6px; border: 3px solid var(--seat); animation: flash-ring 1.2s ease-out forwards; }
@keyframes flash-ring {
  0% { opacity: 1; box-shadow: 0 0 0 0 var(--seat); }
  100% { opacity: 0; box-shadow: 0 0 0 18px transparent; transform: scale(1.12); }
}

/* Dice */
/* Dice sit on their own layer over the battlefield, above every card and the hand, so none hides behind them */
.mat .dice-layer { grid-area: field; position: relative; z-index: 4; pointer-events: none; }
.mat .dice-layer > .die { pointer-events: auto; }
/* A die: a shadow on the board, a body in its own shape (d4 triangle, d6 rounded square with pips, d8 diamond, d10 kite,
   d12 pentagon, d20 hexagon, others round) lifted by --z while it flies, and its dN badge */
.mat .dice-layer > .die { --z: 0; position: absolute; z-index: 1; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); translate: -50% -50%; width: 48px; height: 48px; padding: 0; display: block; border: 0; background: none; cursor: grab; touch-action: none; }
.mat .dice-layer > .die:not(.mine) { cursor: default; }
/* the shadow slides down-right as the die rises (light from the top left), shrinking and fading, instead of the die
   ballooning toward you */
.die-shadow { position: absolute; left: 50%; top: 82%; width: 44px; height: 14px; translate: -50% -50%; border-radius: 50%; background: #000000; opacity: max(.1, .45 - var(--z) / 90); filter: blur(calc(2px + var(--z) * 0.08px)); transform: translate(calc(var(--z) * .35px), calc(var(--z) * .55px)) scale(max(.45, 1 - var(--z) / 160)); pointer-events: none; }
/* the seat-colored rim, in the die's shape; it alone turns (--rot, degrees), after its lift, so it spins in place in the air */
.die-lift { position: absolute; inset: 0; clip-path: var(--shape); background: var(--seat); transform: translateY(calc(var(--z) * -1px)) scale(calc(1 + var(--z) / 400)) rotate(calc(var(--rot, 0) * 1deg)); }
.mat .dice-layer > .die { --shape: inset(0 round 18%); }
.die-body { position: absolute; inset: 2.5px; display: grid; place-items: center; clip-path: var(--shape); background: linear-gradient(145deg, #ffffff, #c9d1da 70%, #9aa5b1); color: #10161d;
  /* tipping over to its next face: squashed along the way it travels (--rel, from its own turn), a little darker */
  transform: rotate(var(--rel, 0deg)) scaleX(var(--sq, 1)) rotate(calc(-1 * var(--rel, 0deg))); filter: brightness(calc(.75 + .25 * var(--sq, 1))); }
.mat .dice-layer > .die.d4 { --shape: polygon(50% 4%, 97% 92%, 3% 92%); }
.die.d4 .die-body { padding-top: 30%; }
.mat .dice-layer > .die.d8 { --shape: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.mat .dice-layer > .die.d10 { --shape: polygon(50% 0, 96% 42%, 50% 100%, 4% 42%); }
.die.d10 .die-body { padding-bottom: 12%; }
.mat .dice-layer > .die.d12 { --shape: polygon(50% 0, 98% 36%, 80% 95%, 20% 95%, 2% 36%); }
.die.d12 .die-body { padding-top: 8%; }
.mat .dice-layer > .die.d20 { --shape: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.mat .dice-layer > .die.dx { --shape: inset(0 round 50%); }
.die-value { position: relative; font: 700 19px var(--display); line-height: 1; }
.die-pips { position: absolute; inset: 0; }
.die-pips i { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #10161d; }
/* the end of a roll: a ring in the thrower's color */
.die-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--seat); pointer-events: none; }
.die-faces { position: absolute; right: -6px; bottom: -6px; z-index: 1; padding: 0 4px; border-radius: 4px; font-size: 9px; font-weight: 700; background: var(--seat); color: #000; transform: translate(calc(var(--z) * 0.06px), calc(var(--z) * -1.06px)); } /* rises with the die, its corner pushed out as the die grows (24 px × z / 400), never turns */
/* Dust: puffs kicked up when a card lands on a battlefield, or a die bounces */
.puff { position: fixed; z-index: 43; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, #d8cbb4cc, #b9ab9255 60%, transparent 72%); }

/* Commander damage rows in the life drawer */
.cmd-row { display: grid; grid-template-columns: 1fr auto 28px auto; align-items: center; gap: 4px; width: 100%; padding: 2px 6px; border-radius: 6px; border-left: 3px solid var(--seat); font-size: 12px; }
.cmd-row .life-btn { width: 22px; height: 22px; font-size: 14px; }
.cmd-name { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.cmd-value { text-align: center; font-weight: 700; }
.cmd-row.bad { background: #ff6b6b22; }
.cmd-row.bad .cmd-value { color: var(--bad); }
@media (prefers-reduced-motion: reduce) { .side-panel, .side-panel.open, .drawer-tab, .mat.me .hand { transition: none; } .drawer-tab .tab-dot { animation: none; } }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; translate: -50% -120%; } .flash-ring, .h-entry.hl, .ping { animation: none; } }
/* Import dialog: CSV file, deck link */
.io-sources { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.io-sources input[type="url"] { flex: 1 1 140px; min-width: 0; } /* CSV file, link and Fetch stay on one row on a phone */
.io-sources .io-file { display: inline-flex; align-items: center; cursor: pointer; }
.ui-dialog.io-dialog { width: min(720px, 94vw); }
.io-bd { gap: 12px; }
.io-bd > p { margin: 0; }
#io-text { width: 100%; height: min(46vh, 420px); resize: vertical; box-sizing: border-box; }

/* Accessibility (Game settings, all off by default; classes on <html> from src/ui/access.js) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.settings-head { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--muted); } /* sentence case, like .ui-label */
/* High contrast: brighter muted text and lines, opaque panels, bolder small labels */
.a11y-contrast { --muted: #d7e2ea; --line: #ffffff66; --text: #ffffff; --panel: #0b1220f2; }
/* The five standard piles: one even, readable size (SPEC: Game table); custom zones keep the fitted size above. */
/* One size for all five, from the pile's width: the largest at which the longest word fits (GRAVEYARD; on a phone, where
   it reads Grave, COMMAND), never above 9 px. */
.pile-label.std { max-width: calc(100% - 2px); padding: 1px 2px; letter-spacing: 0; overflow-wrap: normal; font-size: min(9px, calc((100cqi - 6px) / 5.35)); }
#play.phone-on .pile-label.std { font-size: min(9px, calc((100cqi - 6px) / 3.75)); } /* LIBRARY is the longest there */
#play.phone-on .pile.command .pile-label.std { font-size: min(9px, calc((100cqi - 6px) / 5.35)); } /* Command keeps its word, smaller */
.a11y-font .pile-label.std { font-size: min(9px, calc((100cqi - 6px) / 6.5)); } /* Verdana is wider */
.a11y-font #play.phone-on .pile-label.std { font-size: min(9px, calc((100cqi - 6px) / 4.6)); }
.a11y-font #play.phone-on .pile.command .pile-label.std { font-size: min(9px, calc((100cqi - 6px) / 6.5)); }
.a11y-contrast .pile-label, .a11y-contrast .tag, .a11y-contrast .set-badge, .a11y-contrast .chat-left { font-weight: 700; color: #fff; background: #000; }
.a11y-contrast .card .pt, .a11y-contrast .menu, .a11y-contrast .side-panel, .a11y-contrast .step-bar { background: #000; border-color: #fff; }
.a11y-contrast .step-bar > .step { color: #fff; }
.a11y-contrast .step-bar > .step.on { color: var(--cyan-2); text-decoration: underline; } /* still told apart without colour */
/* Readable font: plain, wide letterforms everywhere (the medieval display face too), larger text, roomier lines */
.a11y-font { --display: Verdana, 'Atkinson Hyperlegible', Tahoma, sans-serif; }
.a11y-font body { font: 16px/1.6 Verdana, 'Atkinson Hyperlegible', Tahoma, sans-serif; letter-spacing: .01em; }
.a11y-font .h-line, .a11y-font .menu > button, .a11y-font .chip { font-size: max(13px, .9em); }
/* wider letters: pile labels and card ids keep fitting their small boxes instead of growing */
.a11y-font .pile-label { font-size: clamp(5.5px, calc(86cqi / var(--len, 7)), 9px); letter-spacing: 0; overflow-wrap: normal; word-break: keep-all; }
.a11y-font .card .tag { font-size: 9px; letter-spacing: 0; }
/* Keyboard play: a focus ring no one can miss */
.a11y-keyboard :focus-visible { outline: 3px solid #ffd84d; outline-offset: 3px; }
/* Colorblind mode: mana pips carry their letter (seat colors come from a matching palette, src/colors.js) */
[data-colorblind] .pip { position: relative; }
[data-colorblind] .pip::after { content: attr(data-letter); position: absolute; left: -3px; top: -5px; font-size: 9px; font-weight: 900; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }

/* Decks gallery (ADR 0020): quiet tabs, one soft search field, art-led tiles. Soft fills mix the text color into the
   page, so every theme (dark, light, plain) gets the same calm contrast. */
#gallery:not([hidden]) { display: grid; align-content: start; gap: 12px; padding-bottom: 24px; }
.gallery-head { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.tabs-quiet { display: flex; gap: 18px; }
.tabs-quiet button { padding: 4px 0; border: 0; border-bottom: 1.5px solid transparent; border-radius: 0; background: none; color: var(--muted); }
.tabs-quiet button:hover:not(:disabled) { color: var(--text); border-color: transparent; }
.tabs-quiet button[aria-selected="true"] { color: var(--text); border-bottom-color: color-mix(in srgb, var(--cyan) 70%, transparent); }
.search-soft { flex: 1; min-width: 220px; max-width: 560px; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 5px 0 12px; border-radius: 10px; background: color-mix(in srgb, var(--text) 6%, transparent); transition: box-shadow .15s; }
.search-soft:focus-within { box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyan) 45%, transparent); }
.search-soft svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.search-soft input { flex: 1; min-width: 0; height: 100%; padding: 0 4px; border: 0; background: none; box-shadow: none; outline: none; }
.icon-btn { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 7px; background: none; }
.icon-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 8%, transparent); }
.icon-btn.on svg { stroke: var(--cyan-2); }
.ghost-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--muted); text-decoration: none; }
.ghost-btn:hover:not(:disabled) { color: var(--text); border-color: transparent; background: color-mix(in srgb, var(--text) 7%, transparent); }
.soft-btn { padding: 6px 16px; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); }
.soft-btn:hover:not(:disabled) { border-color: transparent; color: var(--text); }
.pill { padding: 3px 11px; border: 0; border-radius: 999px; font-size: 12px; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--muted); }
.pill:hover:not(:disabled) { color: var(--text); border-color: transparent; }
.pill.on { background: color-mix(in srgb, var(--cyan) 20%, transparent); color: var(--text); }
.gallery-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.gallery-pills:empty, .gallery-status:empty { display: none; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
/* content-visibility skips the off-screen tiles (the precons are ~200); no backdrop-filter on a tile: each one is a
   compositor layer, and hundreds of them made every scroll frame re-layerize (the precons stutter). */
.deck-tile { position: relative; isolation: isolate; aspect-ratio: 4 / 5; content-visibility: auto; contain-intrinsic-size: auto 240px; border-radius: 12px; overflow: hidden; background: var(--art, none) center 22% / cover, color-mix(in srgb, var(--text) 6%, transparent); transition: transform .2s, box-shadow .2s; }
.deck-tile::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, transparent 42%, color-mix(in srgb, var(--bg-base) 94%, transparent) 100%); }
.deck-tile:hover, .deck-tile:focus-within { transform: translateY(-2px); box-shadow: 0 12px 30px #0005; }
.tile-open { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tile-open:focus-visible { outline: 2px solid var(--cyan-2); outline-offset: -2px; }
.tile-text { position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 2; display: grid; gap: 3px; pointer-events: none; }
.tile-name { font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1.15; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); overflow: hidden; white-space: nowrap; }
.tile-meta span { overflow: hidden; text-overflow: ellipsis; }
.dot { display: inline-block; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--pip); }
/* Top-left of a tile: the bracket chip. Top right: the issue dot and the format. A precon's set sits over its name. */
.tile-tags { position: absolute; z-index: 2; top: 10px; left: 10px; display: flex; gap: 4px; pointer-events: none; }
.bracket-chip { padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 700; color: var(--cyan-2); background: #050c14d9; border: 1px solid var(--cyan); }
.bracket-chip.auto { border-style: dashed; color: var(--muted); border-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.gc-tag { flex: none; margin-left: 6px; padding: 0 5px; border-radius: 3px; font-size: 10px; font-weight: 700; line-height: 15px; color: #f0cf8a; border: 1px solid #e0b25a; }
.tile-corner { position: absolute; z-index: 2; top: 10px; right: 10px; display: flex; align-items: center; gap: 5px; pointer-events: none; }
.tile-format { padding: 1px 8px; border-radius: 999px; font-size: 11px; color: #fff; background: #0000008c; border: 1px solid #ffffff2e; }
.tile-issue { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); }
.tile-set { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--text) 75%, transparent); }
.tile-acts { position: absolute; z-index: 3; left: 0; right: 0; bottom: 64px; display: flex; justify-content: center; gap: 8px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.deck-tile:hover .tile-acts, .deck-tile:focus-within .tile-acts { opacity: 1; pointer-events: auto; }
.deck-tile:has(.tile-set) .tile-acts { bottom: 82px; } /* a precon's set line sits over its name: keep the same gap above it */
.tile-acts button { padding: 3px 12px; border: 0; border-radius: 999px; font-size: 12px; color: #fff; background: #3a3f47e0; }
.tile-acts button:hover:not(:disabled) { background: #555b64f0; border-color: transparent; }
/* Design backlog 10: a touch screen has no hover; the tile opens the deck and ⋯ (32 px, bottom right) holds Play and
   Duplicate in a bottom sheet (.menu-bottom), so a tap meant to open the deck never lands on Play. */
.tile-more { display: none; }
@media (pointer: coarse) {
  .tile-acts { display: none; }
  .deck-tile .tile-text { right: 42px; } /* the price stays clear of ⋯ */
  .tile-more { display: grid; place-items: center; position: absolute; z-index: 3; right: 4px; bottom: 4px; width: 32px; height: 32px; padding: 0; border-radius: 8px;
    border: 1px solid #ffffff33; background: #00000066; color: #fff; font-size: 18px; line-height: 1; }
}
.menu.menu-bottom { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; border-radius: 12px 12px 0 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
.menu.menu-bottom > button { min-height: 48px; font-size: 15px; }
.deck-tile.new { display: grid; place-items: center; color: var(--muted); text-decoration: none; }
.deck-tile.new::after { display: none; }
.deck-tile.new:hover { color: var(--text); }
.filter-pop { position: fixed; z-index: 50; width: 300px; display: grid; gap: 12px; padding: 14px; border-radius: 12px; background: var(--panel-solid); box-shadow: 0 14px 40px #0007; }
.fp-row { display: grid; gap: 5px; min-width: 0; }
.filter-pop input { min-width: 0; width: 100%; }
.fp-label { font-size: 11px; color: var(--muted); }
.fp-pills, .fp-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.fp-dot { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: var(--pip); opacity: .35; }
.fp-dot:hover:not(:disabled) { opacity: .7; }
.fp-dot.on { opacity: 1; box-shadow: 0 0 0 2px var(--panel-solid), 0 0 0 3.5px var(--pip); }
.fp-input { padding: 6px 10px; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.fp-foot { display: flex; justify-content: flex-end; }
.tile-price { margin-left: auto; padding-left: 6px; flex: none; font-weight: 600; color: var(--text); }
.fp-split { display: flex; justify-content: space-between; }
.fp-price-label { color: var(--text); }
/* Two thumbs on one track (two stacked range inputs, only their thumbs take the pointer); --a / --b are the thumbs'
   positions as fractions, for the filled part between them. */
.fp-range { position: relative; height: 18px; }
.fp-range::before, .fp-range::after { content: ''; position: absolute; top: 8px; height: 2px; border-radius: 2px; }
.fp-range::before { left: 0; right: 0; background: color-mix(in srgb, var(--text) 12%, transparent); }
.fp-range::after { left: calc(var(--a) * 100%); right: calc((1 - var(--b)) * 100%); background: color-mix(in srgb, var(--cyan) 70%, transparent); }
.fp-range input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 18px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; appearance: none; -webkit-appearance: none; pointer-events: none; }
.fp-range input::-webkit-slider-runnable-track { background: none; }
.fp-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--text); pointer-events: auto; cursor: grab; }
.fp-range input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--text); pointer-events: auto; cursor: grab; }
.fp-range input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--cyan-2); outline-offset: 2px; }
.fp-dates { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.fp-dates .fp-input { flex: 1; min-width: 0; color-scheme: inherit; }
.fp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 8px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.filter-pop .fp-tag-input { flex: 1; width: auto; min-width: 80px; padding: 2px 4px; border: 0; background: none; box-shadow: none; outline: none; }
@media (prefers-reduced-motion: reduce) { .deck-tile, .tile-acts { transition: none; } .deck-tile:hover, .deck-tile:focus-within { transform: none; } }

/* The deck page's hero: the commander art is the backdrop, fading into the page from the left; quiet meta and ghost
   buttons, Save last. */
.back-link { width: fit-content; font-size: 13px; color: var(--muted); text-decoration: none; }
.back-link:hover { color: var(--text); }
.deck-hero.art { min-height: 0; padding: 12px 18px; border-radius: 12px; box-shadow: none; align-items: flex-end;
  background: linear-gradient(90deg, var(--bg-base) 18%, color-mix(in srgb, var(--bg-base) 72%, transparent) 48%, transparent 88%), linear-gradient(180deg, transparent 55%, var(--bg-base)), var(--art, none) center 30% / cover, var(--bg-base); }
.deck-hero.art .hero-name { color: var(--text); text-shadow: none; font-size: 24px; line-height: 1.2; }
.deck-hero.art .hero-text { gap: 2px; }
.hero-artist { position: absolute; right: 12px; top: 10px; z-index: 1; padding: 2px 6px; border-radius: 4px; font-size: 11px; color: #e6edf4; background: #0009; pointer-events: none; }
.hero-artist:empty { display: none; }
.hero-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero-top .back-link::after { content: '·'; margin-left: 10px; color: var(--muted); }
.hero-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.hero-line .hero-name { width: auto; max-width: 100%; }
.hero-line .deck-color { align-self: center; }
.hero-price { font-weight: 600; color: var(--text); }
.deck-hero.art .badge { padding: 0; border: 0; background: none; color: var(--muted); letter-spacing: .08em; }
.deck-hero.art .badge.bad { color: var(--bad); }
.deck-hero.art .badge.ok { color: var(--good); }
.deck-hero.art .hero-actions { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end; padding: 3px; border-radius: 10px;
  background: color-mix(in srgb, var(--bg-base) 62%, transparent); backdrop-filter: blur(8px); } /* readable over bright art */
.hero-meta { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.hero-sub { font-size: 13px; color: var(--muted); }
.ghost-btn.like.on { color: #ff6b9a; }

/* The .ui-* family (Clean × Ant): popups with a header, a body of labelled controls and a footer with one primary button.
   Spacing 4/8/12/16/24; containers 8 px radius, controls 4 px; 1 px borders; theme tokens only. Used by New game, the
   waiting room, Join game and Profile settings. */
.ui-dialog { width: min(520px, 94vw); max-height: 90vh; padding: 0; border: 0; background: none; color: var(--text); overflow: visible; }
.ui-dialog::backdrop { background: #0009; }
.ui-card { display: flex; flex-direction: column; max-height: 90vh; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-base); box-shadow: 0 18px 50px #0008; overflow: hidden; }
.ui-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.ui-hd h2 { margin: 0; font: 600 16px system-ui, -apple-system, 'Segoe UI', sans-serif; }
.ui-x { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--muted); }
.ui-x:hover:not(:disabled) { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); border-color: transparent; }
.ui-bd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; overflow: auto; } /* minmax: a wide control (a long deck name) shrinks instead of scrolling the body sideways */
.ui-ft { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; border-top: 1px solid var(--line); }
.ui-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.ui-cap { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.ui-row .ui-cap, .ui-label .ui-cap { margin: 0; }
.ui-block { display: block; }
.ui-muted { color: var(--muted); }
.ui-empty { margin: 0; padding: 12px 0; font-size: 13px; color: var(--muted); text-align: center; }
.ui-error { margin: 0; font-size: 13px; color: var(--bad); }
/* The loader (busy / loading in src/ui/dom.js): a spinner over the loading container, dimming what it already shows;
   an empty container gets a 120 px area. Near the top, so a tall list keeps it in view. Reduced motion: a still ring. */
.busy-host { position: relative; min-height: 120px; }
.busy-overlay { position: absolute; inset: 0; z-index: 5; display: flex; justify-content: center; align-items: flex-start; padding-top: 40px; border-radius: inherit; background: color-mix(in srgb, var(--bg-base) 70%, transparent); }
.busy-empty { position: relative; min-height: 120px; }
.busy-empty > .busy-overlay { align-items: center; padding: 0; background: none; }
.busy-host > .busy-overlay:only-child { background: none; } /* nothing under it to dim */
.busy-spin { width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--cyan); border-radius: 50%; animation: busy-turn .8s linear infinite; }
@keyframes busy-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .busy-spin { animation: none; border: 3px dashed var(--cyan); } }
.ui-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
/* Two short controls that stay side by side on a phone too (New game: Format and Where, Mulligan and Free mulligans). */
@media (max-width: 600px) { .ui-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .ui-pair .ui-seg button { padding: 0 8px; } }
.ui-inline { display: flex; align-items: center; gap: 8px; }
.ui-inline .ui-input { flex: 1; min-width: 0; }
.ui-inline + * { margin-top: 8px; } /* what follows the input row (a note, the friend list) keeps clear of it */
.ui-btn { height: 32px; padding: 0 16px; border: 1px solid var(--line); border-radius: 4px; background: none; color: var(--text); font-size: 13px; white-space: nowrap; }
.ui-btn:hover:not(:disabled) { border-color: var(--muted); }
.ui-btn.primary { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 35%, var(--bg-base)); color: var(--text); font-weight: 600; } /* a deep accent fill, not the bright accent (2026-10-21) */
.ui-btn.primary:hover:not(:disabled) { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 50%, var(--bg-base)); }
.ui-btn.danger { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 70%, var(--bg-base)); color: #fff; font-weight: 600; } /* the one hot button: solid muted red, flat (playtests: Delete read as calm as Cancel) */
.ui-btn.danger:hover:not(:disabled) { border-color: var(--bad); color: #fff; background: color-mix(in srgb, var(--bad) 82%, var(--bg-base)); }
.ui-btn:disabled { opacity: .45; cursor: not-allowed; }
.ui-link { padding: 0; border: 0; white-space: nowrap; background: none; color: var(--cyan-2); font-size: 13px; text-decoration: none; }
.ui-link:hover:not(:disabled) { text-decoration: underline; border-color: transparent; }
.ui-input, .ui-select { height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; background: color-mix(in srgb, var(--text) 4%, var(--bg-base)); color: var(--text); font-size: 13px; } /* opaque: the spell circle never shows through a field */
.ui-input { width: 100%; }
.ui-select { height: 28px; padding: 0 6px; }
.ui-select.ui-wide { width: 100%; height: 32px; }
.ui-input:hover, .ui-select:hover { border-color: var(--muted); }
.ui-code { font-family: ui-monospace, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; }
.ui-seg { display: inline-flex; max-width: 100%; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.ui-seg button { height: 30px; padding: 0 14px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; color: var(--muted); font-size: 13px; }
.ui-seg button:first-child { border-left: 0; }
.ui-seg button:hover:not(:disabled) { color: var(--text); border-color: var(--line); }
.ui-seg button[aria-checked="true"], .ui-seg button[aria-selected="true"] { color: var(--text); background: color-mix(in srgb, var(--cyan) 22%, transparent); } /* a quiet fill, no accent ring */
.ui-seg button:disabled { opacity: .45; }
.ui-rows { display: grid; grid-template-columns: minmax(0, 1fr); }
.ui-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; }
.ui-rows .ui-row:first-child { border-top: 0; }
.ui-row-name { flex: 1; min-width: 0; }
.ui-row > .ui-select { flex: 1 1 0; min-width: 0; max-width: 280px; } /* a Spellbent AI seat's deck: long names shrink, never widen the popup */
/* A Spellbent AI row (ADR 0041): name, deck, difficulty; on a phone the difficulty takes its own full-width line. */
.ai-row { flex-wrap: wrap; row-gap: 8px; }
.ai-row > .ui-row-name { flex: 1 0 150px; }
.ai-row > .ui-select { min-width: 150px; } /* the name keeps its line; the difficulty wraps under it before the name breaks */
@media (max-width: 600px) { .ai-row > .ui-seg { flex: 1 0 100%; margin-left: 21px; max-width: calc(100% - 21px); } .ai-row > .ui-seg:not(:last-child) { flex-basis: calc(100% - 80px); max-width: calc(100% - 80px); } /* Clear shares the line */ .ai-row > .ui-seg button { flex: 1; height: 40px; } }
.ui-badge { margin-left: 4px; padding: 1px 6px; border-radius: 4px; font-size: 11px; }
.ui-badge.ok { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.ui-badge.warn { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }
.ui-box { display: grid; gap: 8px; margin: 4px 0 8px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.ui-box .ui-cap { margin: 0; }
.ui-key { flex: 1; min-width: 0; overflow-wrap: anywhere; padding: 4px 8px; border-radius: 4px; background: var(--panel-2); font-size: 13px; letter-spacing: 1px; }
.ui-codes { margin: 0; padding: 8px; border-radius: 4px; background: var(--panel-2); font-size: 13px; columns: 2; }
.ui-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--dot); }
.ui-dot.open { background: none; border: 1px dashed var(--muted); }
.ui-note { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; color: var(--muted); }
.ui-note .ui-link { margin-left: auto; }
.ui-ok { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.ui-decks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } /* four narrow tiles a row, filling the width */
.ui-decks.all { max-height: 216px; overflow: auto; padding: 2px; }
.ui-deck { position: relative; height: 72px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--art, none) center 25% / cover, color-mix(in srgb, var(--text) 6%, transparent); overflow: hidden; text-align: left; }
.ui-deck::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #000a, transparent 60%); }
.ui-deck span { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 6px; font-size: 12px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-deck:hover:not(:disabled) { border-color: var(--muted); }
.ui-deck[aria-pressed="true"] { border-color: var(--cyan); }
.ui-dialog :focus-visible { outline: 2px solid var(--cyan-2); outline-offset: 2px; }
.play-wait { display: grid; justify-items: center; align-content: center; gap: 12px; min-height: 60vh; }

/* Light theme: the surfaces drawn with fixed dark colors above, recolored. :where() keeps each override at its original
   rule's specificity, so it wins by coming last and never beats a more specific rule. Chips sitting on card art (tags,
   pile counts, symbols) stay dark on purpose. */
:where(html[data-theme^="light"]:not(.a11y-contrast)) {
  & button, & input, & select, & textarea, & .btn, & .big { background: #ffffff; }
  & .rail { background: #ffffff8c; }
  & .logo-ring { opacity: .55; } /* the tinted logo: its glow ring, softer on a light page */
  /* soft shadows: the dark themes' near-black ones read as smudges on light */
  & .panel, & .deck-preview, & .deck-board, & .results-panel { box-shadow: 0 4px 22px #13202b1a; }
  & .deck-board.drop-ok, & .group.drop-ok, & .results-panel.drop-ok { box-shadow: inset 0 0 0 2px var(--cyan), 0 4px 22px #13202b1a; }
  & .deck-box { box-shadow: 0 4px 14px #13202b1f; }
  & .zone-panel, & .tip, & .emoji-picker { box-shadow: 0 8px 26px #13202b29; }
  & .side-panel { box-shadow: -10px 0 30px #13202b1f; }
  & .pile-label { background: #ffffffd9; }
  & .pile-count { background: #ffffff; box-shadow: 0 0 0 1px var(--line); }
  & .title, & .group h3, & .request-card { color: var(--text); }
  & .section-title { color: var(--muted); border-bottom-color: var(--line); }
  & .hero-name { color: var(--text); text-shadow: 0 1px 8px #ffffff; }
  & .linklike:hover:not(:disabled) { color: var(--text); }
  & .midline-hint, & .step-arrow { color: #13202b59; }
  & .banner { background: #fffffff2; box-shadow: 0 8px 30px #13202b26; }
  & .deck-art, & .pm-thumb, & .frame-stage, & .deck-preview img, & .result img, & .details-img, & .print img, & .opp-open { background-color: #dfe7ee; }
  & .tab-art { background-color: #c9d6e2; }
  & .frame-stage { border-color: #13202b33; }
  & .deck-hero { background: linear-gradient(90deg, #f4f7faf2 0%, #f4f7fab3 45%, #f4f7fa33 100%), var(--art, none) center 25% / cover, #e3ebf3; box-shadow: 0 0 25px #13202b14; }
  & .badge, & .pm-layers li.on, & .rulings li, & .bot-card, & .comment-list li, & .h-scope, & .h-turn, & .h-entry, & .chat-list > li, & .quote { background: var(--panel-2); }
  & .legal-grid .no span[aria-hidden] { background: #13202b1f; }
  & .deck-foot { background: #ffffff99; }
  & dialog::backdrop { background: #13202b66; }
  & .board { background: #ffffffa6; box-shadow: 0 0 25px #13202b14; }
  & .tab-life { background: #ffffff; }
  & .stack-zone { background: #ffffff; }
  & .stack-zone.has-cards { background: #f3f0ff; box-shadow: none; }
  & .slot-pick { background: #ffffff; }
  & .mat.me .mana-spot { background: #ffffffd9; }
  & .mat .field { border-color: #13202b1a; background: #ffffff59; }
  & .hex { background: radial-gradient(circle at 50% 35%, #ffffff, #e3f4f7); color: var(--text); }
  & .life-drawer.open { background: #ffffffeb; box-shadow: 0 10px 30px #13202b26; }
  & .drawer-handle { background: #ffffff; }
  & .drawer-handle:hover { background: #e3f4f7; }
  & .life-drawer.open .drawer-handle { background: #f3f7fa; }
  & .pile { background: #13202b0d; border-color: #13202b33; }
  & .card .pt { background: #fffffff2; color: var(--text); }
  & .step-bar { background: #ffffff; }
  & .step-bar > .turn-btn { background: #ffffff; }
  & .menu > button:hover, & .menu > button:focus-visible { background: #13202b0d; }
  & .menu-sep { background: #13202b1a; }
  & .menu-quick button { background: #13202b08; border-color: #13202b1a; }
  & .preview-empty { background-color: #e8eef5; }
  & .switch .slider { background: #13202b26; }
  & .theme { border-color: var(--line); }
  & .theme:hover { border-color: #13202b4d; }
  & .switch .slider::after { background: #ffffff; box-shadow: 0 1px 3px #13202b40; }
  & .side-panel { background: #fffffff5; }
  & .drawer-tab { background: #fffffff2; box-shadow: -6px 0 18px #13202b26; }
  & .drawer-tab .tab-dot { box-shadow: 0 0 0 2px #ffffff; }
  & .side-split::after { background: #13202b33; }
  & button.quote:hover, & .emoji-picker button:hover { background: #13202b12; }
  & .composer { background: #ffffff; border-color: #13202b26; }
  & .chat-ring { background: conic-gradient(var(--ring) var(--p), #13202b1f 0); }
  & .chat-ring > span { background: #ffffff; }
  & .flash-emoji { background: radial-gradient(circle at 35% 30%, #ffffff, #e6edf3); }
  & .flash-who { background: #ffffffeb; }
  & .puff { background: radial-gradient(circle, #8f8471cc, #7d725f55 60%, transparent 72%); } /* darker dust: beige vanishes on light */
}

/* Plain theme: the navy-tinted fixed surfaces above, in neutral greys (no color anywhere but seats, pips and cards).
   Same :where() trick as Light: each override keeps its original rule's specificity. */
:where(html[data-theme="plain"]:not(.a11y-contrast)) {
  & button, & input, & select, & textarea, & .btn, & .big, & .step-bar > .turn-btn, & .composer, & .chat-ring > span, & .slot-pick { background: #1c1c1c; }
  & .step-bar, & .stack-zone, & .mat.me .mana-spot { background: #111111; }
  & .hex { background: radial-gradient(circle at 50% 35%, #2e2e2e, #181818); }
  & .life-drawer.open { background: #161616eb; }
  & .drawer-handle { background: #1c1c1c; }
  & .drawer-handle:hover { background: #2a2a2a; }
  & .life-drawer.open .drawer-handle { background: #222222; }
  & .side-panel { background: #141414f5; }
  & .drawer-tab { background: #161616f2; }
  & .banner, & .stack-zone.has-cards { background: #1a1a1af2; }
  & .flash-emoji { background: radial-gradient(circle at 35% 30%, #2a2a2a, #121212); }
  & .flash-who { background: #121212e6; }
  & .deck-hero { background: linear-gradient(90deg, #161616f2 0%, #161616b3 45%, #16161633 100%), var(--art, none) center 25% / cover, #1a1a1a; }
}

/* The rail's account button (your picture, the friends badge on it: src/ui/rail.js) and the friend list panel (ADR 0030) */
.rail-account { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px; border: 0; border-radius: 8px; background: none; color: var(--muted); }
.rail-account:hover:not(:disabled), .rail-account[aria-expanded="true"] { color: var(--cyan-2); background: color-mix(in srgb, var(--cyan) 8%, transparent); border-color: transparent; }
.rail-account .avatar { border: 2px solid color-mix(in srgb, var(--cyan) 45%, transparent); }
.rail-account[aria-current] .avatar { border-color: var(--cyan); box-shadow: 0 0 8px color-mix(in srgb, var(--cyan) 60%, transparent); }
.rail-account .rail-label { display: none; } /* the side rail: the picture says it */
.rail-friends { position: relative; display: grid; justify-items: center; gap: 2px; width: 66px; padding: 8px 0; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 12px; }
.rail-friends svg { width: 24px; height: 24px; fill: currentColor; }
.rail-friends:hover:not(:disabled), .rail-friends[aria-expanded="true"] { color: var(--cyan-2); background: color-mix(in srgb, var(--cyan) 8%, transparent); border-color: transparent; }
.friends-count { position: absolute; top: 0; right: 10px; min-width: 14px; padding: 0 3px; border-radius: 7px; background: var(--cyan); color: var(--panel-solid); font-size: 10px; font-weight: 700; line-height: 14px; }
.friends-count:empty { display: none; }
.friends-count.req { background: var(--bad); color: #fff; }
body[data-unread] .phone-bar [data-act="phone-nav"] { position: relative; }
body[data-unread] .phone-bar [data-act="phone-nav"]::after { content: ''; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); } /* requests (red, below) win */
body[data-friend-requests] .phone-bar [data-act="phone-nav"] { position: relative; }
body[data-friend-requests] .phone-bar [data-act="phone-nav"]::after { content: ''; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); }
.friends-panel { position: fixed; z-index: 900; top: 0; right: 0; bottom: 0; width: min(280px, 100vw); overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 8px; padding: 16px; background: var(--panel-solid); border-left: 1px solid var(--line); box-shadow: -12px 0 32px #0006; }
.friends-hd { display: flex; align-items: center; justify-content: space-between; }
.friends-hd h2 { margin: 0; font-size: 16px; }
.friends-label { margin-top: 8px; font-size: 12px; color: var(--muted); }
.friend-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 4px; border: 0; border-radius: 4px; background: none; color: var(--text); text-align: left; font-size: 13px; }
.friend-row:hover:not(:disabled) { background: var(--panel-2); border-color: transparent; }
.friend-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); opacity: .6; }
.friend-dot.s1, .friend-dot.s2, .friend-dot.s3 { background: var(--good); opacity: 1; }
.friend-name { flex: none; }
.friend-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.friend-device { flex: none; font-size: 12px; cursor: help; opacity: .8; } /* a game on their device: nothing to watch (tooltip) */
.friend-pen { flex: none; margin-left: auto; padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; font-size: 11px; color: var(--muted); cursor: help; } /* your private note: its text on hover */
.invite-toast { position: fixed; z-index: 950; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-solid); box-shadow: 0 8px 24px #0006; font-size: 13px; }
/* Friend chat (ADR 0053): docked windows at the bottom right (a full-screen sheet on a phone), never on the game table.
   Unread messages: a teal badge on the friend's row and a teal dot on your picture, the menu's Friends and the ☰. */
.dm-dock { position: fixed; z-index: 920; right: 16px; bottom: 0; display: flex; align-items: flex-end; gap: 8px; max-width: calc(100vw - 32px); pointer-events: none; }
.dm-dock > * { pointer-events: auto; }
body:has(.friends-panel:not([hidden])) .dm-dock { right: 296px; } /* beside the friend list, not under it */
body:has(#play:not([hidden])) .dm-dock { display: none; }
.dm-tab { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--bg-base); color: var(--text); font-size: 13px; } /* the popup surface (DESIGN.md: Popups) */
.dm-count { min-width: 14px; padding: 0 4px; border-radius: 7px; background: var(--cyan); color: var(--panel-solid); font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; }
.dm-win { width: 340px; height: 460px; max-height: calc(100dvh - 16px); display: flex; flex-direction: column; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--bg-base); box-shadow: 0 -8px 30px #0008; color: var(--text); font-size: 13px; } /* the popup surface, lifted off the page by its shadow */
.dm-hd { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border-bottom: 1px solid var(--line); }
.dm-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-st { color: var(--muted); font-size: 11px; } .dm-st.s1 { color: var(--good); }
.dm-ctl, .dm-back { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--muted); }
.dm-back { display: none; }
.dm-log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.dm-msg { align-self: flex-start; max-width: 80%; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow-wrap: anywhere; white-space: pre-wrap; -webkit-user-select: text; user-select: text; }
.dm-msg.out { align-self: flex-end; background: color-mix(in srgb, var(--cyan) 22%, var(--bg-base)); border: 1px solid color-mix(in srgb, var(--cyan) 55%, transparent); } /* the quiet accent fill of a picked option */
.dm-sealed { align-self: center; display: flex; gap: 8px; max-width: 92%; padding: 8px 10px; border: 1px dashed color-mix(in srgb, var(--text) 25%, transparent); border-radius: 8px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.dm-sealed svg { flex: none; width: 14px; height: 14px; margin-top: 2px; fill: currentColor; } .dm-sealed b { color: var(--text); font-weight: 600; }
.dm-challenge { height: 28px; padding: 0 10px; font-size: 12px; } /* a plain .ui-btn: Send is the window's one accent */
/* Reactions (ADR 0054): ☺+ beside a bubble on hover (outside it, in the log's margin; none on touch: a long press
   opens the same menu), chips under it like the table's (.react-chip), the emoji you picked outlined in the menu. */
.dm-msg { position: relative; }
.dm-react-add { position: absolute; top: 50%; right: -30px; width: 26px; height: 22px; padding: 0; transform: translateY(-50%); border-radius: 11px; font-size: 11px; color: var(--muted); opacity: 0; -webkit-user-select: none; user-select: none; }
.dm-msg.out .dm-react-add { right: auto; left: -30px; }
.dm-msg:hover .dm-react-add, .dm-react-add:focus-visible { opacity: 1; }
@media (pointer: coarse) { .dm-react-add { display: none; } }
.dm-reacts { align-self: flex-start; display: flex; gap: 3px; margin: -1px 0 2px; } .dm-reacts.out { align-self: flex-end; }
.dm-reacts .react-chip { line-height: 18px; }
.menu-quick button:has(.dm-picked) { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 20%, transparent); }
.dm-time { align-self: flex-start; margin-bottom: 4px; color: var(--muted); font-size: 10px; } .dm-time.out { align-self: flex-end; }
.dm-day { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; color: var(--muted); font-size: 11px; }
.dm-day::before, .dm-day::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.dm-more { align-self: center; }
.dm-note { margin: 0; padding: 4px 10px; color: var(--bad); font-size: 12px; }
.dm-form { display: flex; align-items: center; gap: 6px; padding: 8px; border-top: 1px solid var(--line); }
.dm-form .ui-input { flex: 1; min-width: 0; }
body:has(.dm-tab) .invite-toast { bottom: 50px; } /* above the dock: a challenge never covers the chat you'd answer in */
body:has(.dm-win) .invite-toast { bottom: 476px; }
.dm-unread { margin-left: auto; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--cyan); color: var(--panel-solid); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
@media (max-width: 600px) {
  .dm-dock, body:has(.friends-panel:not([hidden])) .dm-dock { inset: 0; max-width: none; align-items: stretch; }
  .dm-tab, .dm-win:not(:last-child), .dm-ctl { display: none; }
  .dm-win { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
  .dm-back { display: block; width: 44px; height: 44px; font-size: 22px; }
  .dm-challenge { height: 44px; padding: 0 12px; font-size: 13px; }
  .dm-form .ui-input, .dm-form .ui-btn { min-height: 44px; }
  body:has(.dm-win) .invite-toast { top: 64px; bottom: auto; } /* under the sheet's header, clear of its field */
}

/* Profile page */
.pf-page { max-width: 880px; margin: 0 auto; display: grid; gap: 12px; }
.pf-search { position: relative; max-width: 320px; justify-self: end; width: 100%; }
.pf-hits { position: absolute; z-index: 10; left: 0; right: 0; top: 36px; display: grid; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-solid); }
.pf-hits a { padding: 6px 8px; border-radius: 4px; color: var(--text); text-decoration: none; font-size: 13px; }
.pf-hits a:hover, .pf-hits a:focus { background: var(--panel-2); }
.pf-cover { position: relative; height: clamp(140px, 26vh, 240px); margin-bottom: -48px; border: 1px solid var(--line); border-radius: 8px; background: var(--art, none) center 30% / cover, var(--panel-2);
 }
/* Its foot fades into the page by laying the page's own paint over it (the same fixed gradient as body), not by turning
   see-through: a see-through foot let the spell circle show over the art (2026-10-21). The header overlaps the foot. */
.pf-cover::after { content: ''; position: absolute; inset: -2px; border-radius: 10px; pointer-events: none; background: var(--bg-grad) fixed, var(--bg-base);
  -webkit-mask-image: linear-gradient(transparent 45%, #000); mask-image: linear-gradient(transparent 45%, #000); }
.pf-cover > * { z-index: 1; }
.pf-cover .pf-credit { top: 6px; bottom: auto; } /* the foot is faded out */
.pf-cover + .pf-head { position: relative; align-items: flex-end; padding-left: 16px; }
.pf-cover + .pf-head .pf-name { text-shadow: 0 1px 3px var(--bg-base); }
.pf-cover-add { height: 40px; border: 1px dashed var(--line); border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; } /* yours, without a cover: no empty box */
.pf-cover-add:hover { border-color: var(--cyan); color: var(--cyan-2); }
.pf-find { order: 2; display: grid; gap: 6px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); } /* after the phone's reordered buttons (order 1) */
.pf-find .pf-search { justify-self: start; }
.pf-credit { position: absolute; right: 8px; bottom: 6px; padding: 1px 6px; border-radius: 4px; background: #000a; color: #fff; font-size: 11px; }
.pf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pf-name { display: inline; margin: 0 8px 0 0; font-size: 24px; }
.pf-flag { white-space: nowrap; }
.pf-actions { display: flex; gap: 8px; }
.pf-desc { margin: 0; white-space: pre-wrap; }
.pf-page > :is(.pf-desc, .ui-empty) { padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(var(--panel-2), var(--panel-2)), var(--bg-base); } /* a solid block: the circle stays in the margins (DESIGN.md) */
.pf-decks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pf-decks.pf-others { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-decks-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 4px; }
.pf-decks-head .ui-label { margin: 0; }
.pf-decks-head .ui-seg button { height: 26px; padding: 0 10px; font-size: 12px; }
.pf-more { display: flex; justify-content: center; }
.pf-tile { position: relative; min-width: 0; }
.pf-others .pf-deck { height: 80px; }
.pf-pin { position: absolute; z-index: 2; top: 6px; right: 6px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid #fff4; border-radius: 4px; background: #000a; color: #fff; opacity: 0; }
.pf-pin svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.pf-pin[aria-pressed="true"] { opacity: 1; color: var(--cyan); }
.pf-pin[aria-pressed="true"] svg { fill: currentColor; }
.pf-tile:hover .pf-pin, .pf-tile:focus-within .pf-pin { opacity: 1; }
@media (pointer: coarse) { .pf-pin { opacity: 1; width: 32px; height: 32px; } } /* no hover on touch: the pin always shows */
/* The profile's Stats (ADR 0056): Overall tiles and Per deck cards; the owner's unpinned ones dimmed, dashed. The pin and
   ‹ › show on hover or focus like the deck tiles' pins, always on touch. */
.pfs { display: grid; gap: 10px; }
.pfs-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.pfs-tile { position: relative; display: grid; align-content: start; gap: 4px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(var(--panel-2), var(--panel-2)), var(--bg-base); font-size: 12px; color: var(--muted); }
.pfs-tile b { font-size: 22px; color: var(--text); }
.pfs-decks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pfs-deck { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(var(--panel-2), var(--panel-2)), var(--bg-base); } /* solid: the circle stays in the margins */
.pfs-art { height: 64px; border-radius: 4px; background: var(--art, none) center 25% / cover, var(--panel); }
.pfs-body { min-width: 0; padding-right: 32px; }
.pfs-deck:has(.pfs-move) .pfs-body { padding-right: 56px; } /* clear of the pin and ‹ › */
.pfs-tile:has(.pf-pin) > span:first-child { padding-right: 30px; }
.pfs-name { display: block; overflow: hidden; color: var(--text); font-size: 14px; text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
a.pfs-name:hover { color: var(--cyan-2); }
.pfs-m { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: 11px; color: var(--muted); }
.pfs-m b { display: block; font-size: 15px; color: var(--text); }
.pfs .off { border-style: dashed; }
.pfs .off > :not(.pf-pin) { opacity: .5; } /* the content dims, the block stays solid */
.pfs-move { position: absolute; z-index: 2; right: 6px; bottom: 6px; display: flex; gap: 2px; opacity: 0; }
.pfs-move button { width: 24px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-solid); color: var(--text); font: inherit; line-height: 1; cursor: pointer; }
.pfs-move button:disabled { opacity: .35; cursor: default; }
:is(.pfs-tile, .pfs-deck):is(:hover, :focus-within) :is(.pf-pin, .pfs-move) { opacity: 1; }
@media (pointer: coarse) { .pfs-move { opacity: 1; } .pfs-move button { width: 32px; height: 32px; } .pfs-tile:has(.pfs-move) { padding-bottom: 42px; } .pfs-deck:has(.pfs-move) .pfs-body { padding-right: 72px; } } /* no hover on touch */
@media (max-width: 600px) { .pfs { order: 1; } .pfs > :is(.pf-decks-head, .pf-more) { order: 0; } .pfs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pfs-decks { grid-template-columns: 1fr; } .pfs-deck { grid-template-columns: 52px minmax(0, 1fr); } .pfs-art { height: 52px; } } /* after the buttons, like the decks */
.pf-deck { display: block; position: relative; height: 110px; border: 1px solid var(--line); border-radius: 8px; background: var(--art, none) center 25% / cover, var(--panel-2); overflow: hidden; }
.pf-deck::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, #000c); }
.pf-deck span { position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 8px; color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .pf-decks { grid-template-columns: 1fr; } .pf-pinned .pf-deck { height: 72px; } .pf-decks.pf-others { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-others .pf-deck { height: 64px; } .pf-search { justify-self: stretch; max-width: none; } }
.ui-area { height: auto; min-height: 64px; padding: 8px 10px; resize: vertical; font: inherit; }
.ep-arts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-height: 180px; overflow: auto; margin-top: 8px; padding: 2px; }
.ep-art { height: 56px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--art) center / cover; }
.ep-art[aria-pressed="true"] { outline: 2px solid var(--cyan); }
.ep-art.current { width: 120px; margin-top: 8px; }
/* Profile pictures (ADR 0044): always a square with 2 px corners, so a border can frame it later. */
.avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--av-size); height: var(--av-size);
  border: 1px solid var(--line); border-radius: 2px; background: var(--av, none) center / cover, var(--cyan-deep); color: var(--cyan-2);
  font-size: calc(var(--av-size) * .45); font-weight: 600; line-height: 1; vertical-align: middle; overflow: hidden; }
.avatar.nsfw { filter: blur(6px); }
.avatar.shade { box-shadow: inset 0 0 14px 3px #00000070; } /* 40 px and up: a soft inner fade; small ones stay flat */
.tab-art .avatar.shade { box-shadow: none; } /* the tab has its own gradient */
.pf-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pf-hits a { display: flex; align-items: center; gap: 8px; }
/* Edit profile: Look (a preview of the profile header), About, Showcase. */
.ep-section { margin-top: 4px; font-size: 13px; font-weight: 600; }
.ep-look-row { display: flex; gap: 10px; align-items: flex-start; }
.ep-look { position: relative; flex: 1; min-width: 0; margin-bottom: 30px; }
.ep-rail { position: relative; flex: none; width: 76px; height: 126px; border: 1px solid var(--line); border-radius: 8px;
  background: linear-gradient(90deg, #050b1640, #050b16a0), var(--art, none) 40% center / cover, #00000040; } /* the rail's own scrim (.rail.rail-art); no art: the flat rail's */
.ep-rail[data-tone="dark"] { background: var(--art) 40% center / cover; }
.ep-rail-nav { position: absolute; top: 8px; left: 0; right: 0; display: grid; justify-items: center; gap: 2px; color: #dfe8f2; font-size: 11px; line-height: 1.6; text-shadow: 0 1px 3px #000; }
.ep-rail-nav span { padding: 0 6px; border-radius: 4px; background: rgb(5 11 22 / var(--rail-pill, 0)); }
.ep-rail[data-tone="dark"] .ep-rail-nav { color: #0b1017; text-shadow: 0 0 1px #fff, 0 0 3px #fff; }
.ep-rail[data-tone="dark"] .ep-rail-nav span { background: rgb(244 247 250 / var(--rail-pill, 0)); } /* sample labels: you judge the contrast before saving */
.ep-rail .ep-cover-links { top: auto; right: 4px; bottom: 4px; left: 4px; padding: 2px 4px; text-align: center; }
@media (max-width: 600px) { .ep-look-row { flex-direction: column; align-items: stretch; } .ep-rail { width: auto; height: 48px; background-position: 0 0, center 30%; } .ep-rail[data-tone="dark"] { background-position: center 30%; } .ep-rail-nav { top: 15px; left: 12px; right: auto; grid-auto-flow: column; gap: 14px; line-height: 1.4; } .ep-rail .ep-cover-links { top: 6px; right: 8px; bottom: auto; left: auto; } }
.ep-cover { position: relative; height: 96px; border: 1px solid var(--line); border-radius: 8px;
  border-bottom-color: transparent; background: linear-gradient(180deg, transparent 35%, var(--bg-base)), var(--art, none) center 30% / cover, var(--panel-2); background-origin: border-box; } /* fades into the popup's own surface, as the profile's cover fades into the page */
.ep-cover-links { position: absolute; top: 6px; right: 8px; padding: 2px 8px; border-radius: 4px; background: #000000a0; color: #eef3f6; font-size: 12px; }
.ep-cover-links .ui-link { font-size: 12px; color: color-mix(in srgb, var(--cyan) 45%, #fff); } /* a light accent on the always-dark chip: light themes' deep accent was harsh there */
.ep-who { position: absolute; left: 14px; bottom: -26px; display: flex; align-items: flex-end; gap: 10px; }
.ep-who b { padding-bottom: 28px; font-size: 15px; text-shadow: 0 1px 3px var(--bg-base); } /* like the profile header's name: a halo in the page's colour */
.ep-pic-btn { padding: 0; border: 0; background: none; line-height: 0; border-radius: 2px; }
.ep-editing, .ep-sources { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ep-remove { margin-left: auto; }
.ep-pics { display: grid; grid-template-columns: repeat(auto-fill, 48px); gap: 6px; max-height: 162px; overflow: auto; padding: 2px; }
.ep-pic { width: 48px; height: 48px; padding: 0; border: 1px solid var(--line); border-radius: 2px; background: var(--art) center / cover; }
.ep-pic[aria-pressed="true"] { outline: 2px solid var(--cyan); }
.ep-framing { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ep-frame { width: 128px; height: 128px; border: 1px solid var(--line); border-radius: 2px; background: center / cover no-repeat; cursor: grab; touch-action: none; }
.ep-file { display: inline-flex; align-items: center; justify-self: start; cursor: pointer; }
.ep-nsfw { display: flex; gap: 6px; align-items: center; font-size: 13px; flex-wrap: wrap; }
@media (max-width: 600px) { .ep-cover { height: 76px; } .ep-who .avatar { --av-size: 52px !important; } }

/* Statistics page */
.st-page { max-width: 980px; margin: 0 auto; display: grid; gap: 14px; }
.st-title { margin: 0; font-size: 22px; }
.st-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.st-card { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); font-size: 12px; color: var(--muted); }
.st-card b { font-size: 24px; color: var(--text); }
.st-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.st-table th { padding: 6px 8px; text-align: left; font-weight: 400; color: var(--muted); font-size: 12px; }
.st-table td { padding: 8px; border-top: 1px solid var(--line); }
.st-table tr[data-deck] { cursor: pointer; }
.st-table tr[data-deck]:hover, .st-table tr.open { background: var(--panel-2); }
.st-games td { padding: 4px 12px 10px; }
@media (max-width: 700px) { .st-table th:nth-child(n+5), .st-table td:nth-child(n+5) { display: none; } }
.st-unit { display: none; }
/* Design backlog 12: on a phone each deck's row is a card with every number labelled (name and games on top; then W·L·D,
   Win rate, Going first, Avg turns, Avg mulligans three across); a tap opens its recent games under it, joined to it. */
@media (max-width: 600px) {
  .st-table, .st-table tbody { display: block; overflow: visible; }
  .st-table thead { display: none; }
  .st-table tr[data-deck] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
  .st-table tr.open { border-color: var(--cyan); border-radius: 8px 8px 0 0; }
  .st-table tr[data-deck] td { display: grid; gap: 1px; padding: 0; border: 0; font-size: 14px; }
  .st-table td[data-label]::before { content: attr(data-label); font-size: 10px; color: var(--muted); }
  .st-table tr[data-deck] td:first-child { display: block; grid-column: 1 / 3; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .st-table tr[data-deck] td:nth-child(2) { display: block; text-align: right; white-space: nowrap; color: var(--muted); font-size: 12px; }
  .st-unit { display: inline; }
  .st-table td:nth-child(3) { order: 1; } .st-table td:nth-child(4) { order: 2; } .st-table td:nth-child(7) { order: 3; }
  .st-table td:nth-child(5) { order: 4; } .st-table td:nth-child(6) { order: 5; }
  .st-games { display: block; padding: 0 10px 10px; border: 1px solid var(--cyan); border-top: 0; border-radius: 0 0 8px 8px; background: var(--panel-2); }
  .st-games td { display: block; padding: 6px 0 0; border: 0; }
}

/* Replay transport: 48 px at the bottom of the play screen; the table above shrinks by as much */
.replaying .step-bar :is([data-act=step], [data-act=add], [data-act=end-turn]) { display: none; } /* a replay is watched, not played */
.replay-bar { flex: none; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-top: 1px solid var(--line); background: var(--panel-solid); font-size: 13px; }
.replay-slider { flex: 1; min-width: 80px; accent-color: var(--cyan); }
.replay-where { white-space: nowrap; color: var(--muted); }

/* Admin (ADR 0031) */
.ui-badge.bad { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }
.ui-badge.info { background: color-mix(in srgb, var(--cyan) 18%, transparent); color: var(--cyan-2); }
.ad-tabs { justify-self: start; }
.ad-search { max-width: 360px; margin-bottom: 8px; }
.ad-bar { height: 6px; margin-top: 4px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.ad-bar i { display: block; height: 100%; background: var(--cyan); }
.ad-limits { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--muted); }
.ad-limits label { display: grid; gap: 4px; }
.ad-limits .ui-input { width: 150px; }
.ad-check { display: flex !important; align-items: center; gap: 6px; height: 32px; }
a.ui-btn { display: inline-flex; align-items: center; text-decoration: none; color: var(--text); } /* a link drawn as a button (Open profile, Replay) */

/* Phones (SPEC: Mobile). Held sideways during a game: no site rail, a 32 px bar on top, one battlefield, the step
   strip and your hand at the bottom. Held upright during a game: a prompt to turn the phone. */
.phone-bar, .rotate-prompt { display: none; }
#play.phone-on > .phone-bar { display: flex; align-items: center; gap: 6px; flex: none; height: 32px; margin-bottom: 4px; }
#play.phone-on > .room-bar { display: none; } /* kept in the page; arrows and pings use the seat chips while it is hidden */
.phone-bar > button { height: 28px; padding: 0 10px; font-size: 13px; white-space: nowrap; }
.phone-turn { font-size: 12px; font-weight: 600; white-space: nowrap; }
.phone-turn.turn-pill { padding: 3px 8px; font-size: 12px; }
.seat-chips { display: flex; gap: 4px; flex: 1; min-width: 0; overflow: hidden; }
/* Equal chips that always fit all six seats: the name on top gives way to an ellipsis, life and hand under it. */
.seat-chip { flex: 1 1 0; min-width: 0; max-width: 160px; }
.seat-chip button { display: flex; align-items: center; gap: 4px; width: 100%; height: 28px; padding: 0 6px; border: 1px solid var(--line); border-left: 3px solid var(--seat); border-radius: 4px; background: none; color: var(--text); line-height: 1.05; text-align: left; white-space: nowrap; }
.seat-chip-text { display: grid; min-width: 0; }
.seat-chip-name { overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.seat-chip-num { font-size: 10.5px; opacity: .85; }
.seat-chip.on button { border-color: var(--cyan); border-left-color: var(--seat); color: var(--cyan-2); background: color-mix(in srgb, var(--cyan) 10%, transparent); }
.seat-chip.turn button { background: var(--seat); border-color: var(--seat); color: #0b0b14; font-weight: 600; } /* whose turn: the filled chip */
.seat-chip.turn button .muted { color: inherit; }
.seat-chip.me.turn button { background: var(--cyan); border-color: var(--cyan); color: #03261f; } /* yours: cyan, like your turn pill */
.seat-chip.out button { opacity: .5; text-decoration: line-through; }
#play.phone-on .board { position: relative; padding: 4px; gap: 4px; }
#play.phone-on .board .midline { order: 2; height: auto; margin: 0; }
#play.phone-on .midline-row { position: static; translate: none; justify-content: flex-start; }
#play.phone-on .step-bar { gap: 2px; padding: 5px 6px; } /* all seven steps fit sideways */
#play.phone-on .step-arrow { display: none; } /* the lit step reads as "you are here" */
#play.phone-on .step-bar > button { padding: 5px 7px; }
#play.phone-on .step-bar > .step { padding: 5px 4px; }
#play.phone-on .mat { min-height: 0; }
#play.phone-on .mat.opp { grid-template-columns: minmax(0, 1fr) var(--pile-col); grid-template-areas: "field piles"; }
#play.phone-on .mat.opp .hand { display: none; } /* its count is on the seat chip */
#play.phone-on .mat.hand-only { position: absolute; left: 4px; right: 4px; bottom: 40px; height: 0; padding: 0; border: 0; pointer-events: none; }
#play.phone-on .mat.hand-only .hand { pointer-events: auto; }
#play.phone-on .mat.me { --hand-w: 48px; } /* smaller on a phone: the hand covers less of the battlefield */
#play.phone-on .hand-btn { margin-left: auto; position: relative; } /* the right end of the strip, mirroring Stack */
#play.phone-on .hand-btn::after { content: ""; position: absolute; inset: -6px -2px; }
@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  body:has(#play:not([hidden]) .arena) .rail, body:has(#play:not([hidden]) .arena) .site-foot { display: none; } /* a game on screen: ☰ replaces the bar */
  body:has(#play:not([hidden]) .arena) .page { height: 100dvh; }
  #play:not([hidden]):has(.arena) { margin-left: 0; padding: 4px 6px; }
}
@media (pointer: coarse) and (orientation: portrait) and (max-width: 600px) {
  .rotate-prompt { display: grid; place-items: center; position: fixed; inset: 0; z-index: 800; padding: 24px; background: var(--bg-base); text-align: center; }
  .rotate-prompt b { display: block; margin: 10px 0 4px; font-size: 18px; }
  .rotate-icon { font-size: 40px; }
  /* Upright menus: popups become sheets from the bottom, their footer always in view; wide tables scroll in place */
  .ui-dialog, .ui-dialog.wn-dialog, .ui-dialog.sh-dialog, .ui-dialog.io-dialog, .ui-dialog.game-modal, .ui-dialog.notes-editor, .ui-dialog.request { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; } /* as tall as its card: at 90vh the footer of a tall sheet was cut off */ /* the wide popups too: their 94vw left a strip on the right */
  .ui-dialog .ui-card { border-radius: 8px 8px 0 0; max-height: 92dvh; }
  .ui-ft .ui-btn { min-height: 44px; } /* a thumb's size in a sheet's footer */
  dialog.details, dialog.prints:not(.playmats) { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-width: 1px 0 0; border-radius: 8px 8px 0 0; } /* the card dialogs too (the playmat studio takes the whole screen) */
  .friends-panel { width: 100vw; }
}
#play.phone-on .mat.opp .field > .pile.command { left: 8px; top: 8px; right: auto; bottom: auto; } /* the right way up, like yours */
#play.phone-on .mat.hand-only { bottom: 56px; /* the fanned edges clear the step strip, now as wide as the hand */ }
/* Narrow screens: the bottom bar holds the pages and your picture; the game is picked on Home, the art's credit is in
   the account menu */
@media (max-width: 900px) {
  .rail-account .avatar { --av-size: 26px !important; }
  .rail-user { display: flex; align-items: center; margin: 0; padding: 0 6px; }
  .rail-friends { width: auto; padding: 6px 8px; }
}
@media (max-width: 600px) {
  .rail .game-switch { display: none; }
  .rail a { flex: 1; width: auto; }
  /* Design backlog 9: every icon of the bottom bar keeps a small label (Play's bolt, Stats' bars, Profile's and
     Friends' people were easy to confuse); they fit its 60 px. */
  .rail a, .rail-account { gap: 2px; padding: 6px 0; font-size: 10px; }
  .rail-account .avatar { --av-size: 22px !important; }
  .rail-user { flex: 2; padding: 0; } /* Friends and You: two slots of the bar */
  .rail-account, .rail-friends { flex: 1; width: auto; gap: 2px; padding: 6px 0; font-size: 10px; line-height: normal; align-content: center; }
  .rail-friends svg { width: 22px; height: 22px; }
  .rail-account .rail-label { display: block; }
}
dialog > form { max-width: 100%; box-sizing: border-box; } /* a form sized in vw never pushes past its dialog on a narrow screen */
@media (max-width: 600px) { dialog { box-sizing: border-box; max-width: calc(100vw - 16px); } }
@media (max-width: 600px) { .hero-line .hero-name { width: 100%; } .deck-hero { min-width: 0; } } /* the name field sizes to the screen, not to its default 20 characters */
@media (max-width: 600px) { .search { flex-wrap: wrap; min-width: 0; } .search input { min-width: 0; } } /* the search row and its switches wrap instead of widening the page */
/* Touch drag (SPEC: Mobile): cards don't pan the page under a finger; the copy that follows it floats above everything */
@media (pointer: coarse) { #play [draggable="true"][data-obj], #play [data-drag-obj] { touch-action: none; } }
/* The dragged card's copy (mouse and touch): fixed, above everything, the card as it sits with its attachments */
/* The riffle's two halves and the mill flight's card (local animations over the table; reduced motion: none) */
.riffle-half { position: fixed; z-index: 30; margin: 0; pointer-events: none; }
.mill-card { position: fixed; z-index: 30; pointer-events: none; transform-style: preserve-3d; }
.mill-card > * { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 5%; backface-visibility: hidden; object-fit: cover; }
.mill-card > :last-child { transform: rotateY(180deg); }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 1000; opacity: .9; pointer-events: none; }
.drag-ghost > * { box-shadow: 0 8px 24px #000c; }
.chat-list > li.chat-cont { margin-top: -2px; padding-top: 2px; } /* the same player again: no second name line */
.room-bar .opp-tabs { margin-left: auto; } /* opponents sit at the right of the bar, whatever buttons come before */
/* One opponent: their tile sits above their hand, at the middle of the table (wide screens, where the bar has room) */
@media (min-width: 1700px) { .room-bar { position: relative; } .room-bar .opp-tabs.solo { position: absolute; left: 50%; top: 0; translate: -50% 0; margin: 0; } }
/* Phones held sideways: the Chat · History tab (34 px, fixed on the right edge) keeps its own lane instead of covering
   the pile column, and the mana pool stacks under the life counter instead of across the hand. */
#play.phone-on .arena { padding-right: 34px; }
/* A phone's mana pool (SPEC: Mobile): one chip under your life with the colours you have; tapping it opens a sheet of
   − / + per colour. Every control of the table answers to at least 40 px of finger (an invisible area round it). */
#play.phone-on .mat.me .mana-chip { position: absolute; z-index: 4; top: 96px; right: calc(var(--pile-col) + 22px); bottom: auto; display: inline-flex; align-items: center; gap: 3px; min-height: 36px; padding: 0 10px; border-radius: 6px; font-size: 12px; white-space: nowrap; background: #050c14; border: 1px solid var(--line); }
#play.phone-on .mat.me .mana-chip .pip { width: 10px; height: 10px; margin-left: 4px; display: inline-block; }
@media (pointer: coarse) { .menu-stepper button { width: 36px; height: 36px; } .menu-stepper { padding-block: 2px; } }
#play.phone-on :is(.phone-bar > button, .seat-chip button, .step-bar > button) { position: relative; } /* .slot-pick is already positioned */
#play.phone-on :is(.phone-bar > button, .seat-chip button, .step-bar > button)::after { content: ""; position: absolute; inset: -7px -2px; } /* from inside the 1 px border: 28 + 2 × 7 + 2 = 44 px tall */
#play.phone-on .slot-pick::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; }
/* The areas must not be covered or clipped: the bar sits above the board, and the scrolling rows give them room. */
#play.phone-on > .phone-bar { position: relative; z-index: 10; }
#play.phone-on .seat-chips { padding-block: 6px; margin-block: -6px; }
#play.phone-on .step-bar { overflow: visible; }
#play.phone-on .mat.me:not(.hand-only) .hand { bottom: 16px; } /* the fanned edges clear the step strip below */
/* Phones: deck tiles two across, a bit wider than tall, so about three rows fit on screen */
@media (max-width: 600px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .deck-tile { aspect-ratio: 6 / 5; contain-intrinsic-size: auto 150px; border-radius: 8px; }
  .tile-text { left: 8px; right: 8px; bottom: 7px; gap: 1px; }
  .tile-name { font-size: 13px; }
  .tile-meta { font-size: 10px; gap: 4px; }
  .tile-tags { top: 6px; left: 6px; } .bracket-chip { font-size: 10px; padding: 0 5px; }
  .tile-corner { top: 6px; right: 6px; } .tile-format { padding: 0 6px; font-size: 10px; } .tile-set { font-size: 9px; }
  .tile-long { display: none; } /* "Official": five colours and the price fit at two tiles across */
}
@media (max-width: 600px) { .pf-head { display: contents; } .pf-actions, .pf-decks-head, .pf-decks, .pf-more, .pf-nodecks { order: 1; } } /* the decks after the buttons: a long list never buries Edit profile */
@media (max-width: 600px) { .pf-cover { height: 150px; margin-bottom: -44px; } .pf-cover + .pf-head .pf-id { position: relative; align-items: flex-end; padding-left: 10px; } .pf-cover + .pf-head .avatar { --av-size: 60px !important; } } /* phones: the profile reads first, its buttons come last */
.pf-meta > span { white-space: nowrap; } /* a line break falls between facts, never inside one ("0 / games") */
@media (max-width: 600px) { .pf-meta { display: block; margin-top: 4px; } } /* phones: the facts on their own line under the name */
@media (max-width: 600px) { .pf-actions { justify-content: center; } } /* phones: the profile's buttons centred under it */
/* The deck room on phones (SPEC: Mobile): one column of 30 px rows, each with an art thumbnail wearing the quantity, the
   name cut to fit, the cost; a tap opens the card's sheet. Group headers stick while the list scrolls. The header's
   actions fold into ⋯, the curve into a chip, and search results come first, as rows with their + buttons. */
.hero-more, .curve-chip, .results-close, .row-art, .result-name { display: none; }
.viewer-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .viewer-bar p { margin: 0; } /* the viewer's help line, and its Curve chip on a phone */
@media (max-width: 600px) {
  #decks .hero-actions .ghost-btn:not(.hero-more) { display: none; } /* the deck room folds them into ⋯; the viewer keeps Copy and Like */
  .hero-more, .curve-chip { display: inline-block; }
  .deck-color { display: none; } /* the in-game color preference: on a computer */
  .deck-board { padding: 6px 0; }
  .board-cols { columns: auto; } /* one list down the phone */
  .deck-board .group h3 { position: sticky; top: 0; z-index: 2; margin: 0; padding: 6px 10px; background: var(--panel-solid); font-size: 12px; }
  .decklist li { position: relative; height: 34px; gap: 8px; padding: 2px 10px; border-radius: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
  .decklist .row-art { display: block; flex: none; width: 40px; height: 28px; border-radius: 3px; object-fit: cover; background: var(--panel-2); }
  .decklist .qty { position: absolute; left: 40px; bottom: 2px; width: auto; min-width: 14px; padding: 0 3px; border-radius: 3px; background: var(--panel-solid); border: 1px solid var(--line); color: var(--text); font-size: 10px; line-height: 13px; text-align: center; }
  .decklist .name { font-size: 13px; }
  .decklist li:hover .row-btns, .decklist .row-btns { display: none; }
  .results { grid-template-columns: minmax(0, 1fr); gap: 0; } /* minmax: a row never widens past the phone */
  .result { display: flex; align-items: center; gap: 8px; height: 38px; border-bottom: 1px solid var(--line); }
  .result img { width: 40px; height: 28px; aspect-ratio: auto; border-radius: 3px; object-fit: cover; object-position: 50% 22%; box-shadow: none; flex: none; }
  .result-name { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
  .result .set-badge { display: none; }
  .result .row { position: static; opacity: 1; flex: none; }
  .result button { background: none; }
  .result .add-plus { display: none; } /* Main / Cmdr / Side / Maybe: the card name keeps the room */
  .result.off { opacity: .45; }
  .card-sheet { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: start; }
  .card-sheet img { width: 100%; border-radius: 6px; }
  .card-sheet .ui-cap { margin: 0 0 4px; }
  .sheet-qty { gap: 12px; margin-top: 10px; }
  .sheet-qty b { font-size: 16px; min-width: 2ch; text-align: center; }
  .sheet-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
}
@media (max-width: 600px) {
  .deck-hero { min-height: 0; padding: 10px 12px; gap: 6px; }
  .deck-hero.art .hero-name { font-size: 19px; }
  .hero-actions { position: absolute; right: 10px; bottom: 8px; max-width: none; }
  #viewer .hero-actions { position: static; align-self: flex-start; } /* Copy, Like and Play: a row under the name, not over it */
  .deck-tools { gap: 6px; }
  .deck-tools .search { display: contents; } /* its field, button and switch join the toolbar's rows: the field and Search on the first */
  .deck-tools .search .sh-field { flex: 1 1 60%; } /* the field (and its Tips) and Search share the first row */
}
@media (max-width: 600px) { .results-hint { display: none; } } /* phones add with +, not by dragging */
/* The report flag (someone else's profile): a small round icon in the cover's top-right corner, or at the end of the
   name line when there is no cover (a private profile) */
.pf-actions { flex-wrap: wrap; }
.st-back { margin-left: 10px; font: 400 13px var(--sans, inherit); color: var(--muted); text-decoration: none; }
.st-back:hover { color: var(--cyan-2); }
/* An empty hand stays a drop target (SPEC: Game table): it keeps half a card's height, and only takes the pointer while a
   card is being dragged, so it never blocks the battlefield cards under it. */
/* An empty hand keeps a faint dashed band where the hand goes, so a card can always be dropped back in */
.mat.me .hand:not(:has(.card)) { width: var(--hand-room); min-height: calc(var(--hand-h) * .5); pointer-events: none; border-radius: 8px; border: 1.5px dashed color-mix(in srgb, var(--cyan) 45%, transparent); align-items: center; padding: 0; }
.mat.me .hand:not(:has(.card))::after { content: "Hand · drop a card here"; font-size: 12px; color: color-mix(in srgb, var(--cyan-2) 70%, transparent); }
.mat.me .hand.tucked:not(:has(.card)) { visibility: hidden; }
#play:has(.dragging) .mat.me .hand:not(:has(.card)) { pointer-events: auto; visibility: visible; }
/* Many cards at once (SPEC: Game table): a ring on each selected card, the box being drawn, and the group bar under
   the selection (a phone: along the bottom edge, over the hand strip). */
.mat.me .field > .card.selected { outline: 2px solid var(--cyan-2); outline-offset: 2px; }
.select-band { position: fixed; z-index: 45; pointer-events: none; border: 1px solid var(--cyan-2); background: color-mix(in srgb, var(--cyan-2) 8%, transparent); border-radius: 2px; }
.group-bar { position: fixed; z-index: 46; display: flex; align-items: center; gap: 4px; padding: 5px 6px; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 8px; }
.group-bar button { font-size: 12px; padding: 4px 8px; border-radius: 4px; white-space: nowrap; }
.group-bar .gb-count { font-size: 12px; font-weight: 600; color: var(--cyan-2); padding: 0 4px; white-space: nowrap; }
#play.phone-on .group-bar { left: 0; right: 0; bottom: 0; height: 46px; border-radius: 0; border-width: 1px 0 0; padding: 0 8px; }
#play.phone-on .group-bar button { padding: 8px 10px; }
#play.phone-on .group-bar .gb-done { margin-left: auto; color: var(--cyan-2); border-color: var(--cyan-deep, var(--line)); }
/* The Action helper (SPEC: Game table): a search, category chips, and this device's way of doing each action. */
.help-dialog { width: min(560px, 94vw); }
.help-dialog .ui-bd { gap: 10px; padding: 14px 16px; }
.help-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.help-cats button { font-size: 12px; padding: 3px 9px; border-radius: 4px; color: var(--muted); }
.help-cats button[aria-pressed="true"] { color: var(--cyan-2); border-color: var(--cyan); }
.help-list { display: grid; }
.help-item { padding: 9px 0; border-top: 1px solid var(--line); }
.help-item b { font-size: 13px; }
.help-item p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.help-item mark { background: color-mix(in srgb, var(--cyan) 30%, transparent); color: inherit; border-radius: 2px; }
.help-foot { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
@media (max-height: 500px) { .help-dialog { height: 94vh; } .help-dialog .ui-card { height: 100%; } }
/* Play with no game in progress (SPEC: Navigation): greyed and inert; Home's Create game starts one. */
.rail a.idle { opacity: .45; cursor: default; }
.rail a.idle:hover { color: var(--muted); background: none; }
/* A new version of the site (SPEC: Navigation): the whole site dims under one card; nothing behind can be clicked. */
.update-prompt { width: min(380px, calc(100vw - 32px)); padding: 0; border: 0; background: none; color: var(--text); }
.update-prompt::backdrop { background: #000000b0; }
/* The page's own dark base and a hairline, like the New deck picker: no icon, no bright fill (DESIGN.md) */
.update-card { padding: 24px; text-align: center; background: var(--bg-base); border: 1px solid var(--line); border-radius: 8px; }
.update-card h2 { margin: 0 0 8px; font: 600 20px var(--display); }
.update-card p { margin: 0 0 20px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.update-card .update-small { margin: 10px 0 0; font-size: 11px; }
.update-card .ui-btn { width: 100%; height: 40px; font-size: 14px; }
@media (max-width: 600px) {
  .update-prompt { width: 100vw; max-width: 100vw; margin: auto 0 0; } /* a bottom sheet, like the .ui-* popups */
  .update-card { padding: 20px 16px; border-bottom: 0; border-radius: 8px 8px 0 0; }
  .update-card h2 { font-size: 17px; }
  .update-card .ui-btn { height: 44px; }
  .update-card .update-small { display: none; }
}

/* Chat: the picture carries the seat colour the dot used to (ADR 0044). */
.chat-head .avatar { border-color: var(--seat); margin-right: 2px; }

/* ---------- ADR 0050: deck edits save themselves; the History button, its status and modal ---------- */
.deck-sync { align-self: center; width: 9ch; margin: 0 4px 0 8px; font-size: 12px; color: var(--good); white-space: nowrap; }
.deck-sync.waiting { color: var(--muted); }
.ui-dialog.dh-dialog { width: min(640px, 94vw); }
.dh-dialog .ui-bd { padding: 8px 24px 16px; }
.dh-list { list-style: none; margin: 0; padding: 0; }
.dh-day { margin: 12px 0 4px; font-size: 12px; color: var(--muted); }
.dh-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 84px; /* fixed: Current centres over the Restore buttons below it */ align-items: center; gap: 10px; min-height: 40px; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.dh-row.on { border-radius: 4px; background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.dh-time, .dh-now { font-size: 12px; color: var(--muted); }
.dh-now { text-align: center; }
.dh-what { overflow-wrap: anywhere; font-size: 13px; }
.dh-pending { font-size: 11px; color: var(--muted); }
@media (max-width: 600px) {
  .ui-dialog.dh-dialog { width: 100vw; } /* its 640 px rule comes after the phone sheet's and won, leaving a strip */
  .dh-dialog .ui-bd { padding: 4px 12px 12px; }
  .dh-row { grid-template-columns: 60px minmax(0, 1fr); }
  .dh-row > .ui-btn, .dh-row > .dh-now { grid-column: 2; justify-self: start; } /* Restore wraps under the change: a full tap target */
}