/* cache rotation 2026-09-06b - the previous hash was poisoned by fetching
it before the apex alias had switched (trap 0). Rotating the content
changes the hash, which is the only way out without a purge scope. */
/* ============================================================
BESTIARY CODEX - ink, stone and brass
============================================================ */
/* ===============================================================
W3 - the three families, served from this origin.
Generated from the Google stylesheet, latin and latin-ext only;
cyrillic and vietnamese are dropped because nothing here uses
them. The unicode-range on each block is kept, so a page of
plain latin text never downloads the latin-ext files at all.
=============================================================== */
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/barlow-condensed-400-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/barlow-condensed-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/fonts/barlow-condensed-500-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/fonts/barlow-condensed-500-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/fonts/barlow-condensed-600-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/fonts/barlow-condensed-600-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/fonts/cinzel-500-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/fonts/cinzel-500-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/fonts/cinzel-600-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/fonts/cinzel-600-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/cinzel-700-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/fonts/cinzel-700-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Spectral';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/fonts/spectral-400i-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Spectral';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/fonts/spectral-400i-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Spectral';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url('/fonts/spectral-500i-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Spectral';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url('/fonts/spectral-500i-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Spectral';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/spectral-400-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Spectral';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/spectral-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Spectral';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/fonts/spectral-500-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Spectral';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/fonts/spectral-500-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Spectral';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/fonts/spectral-600-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Spectral';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/fonts/spectral-600-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*, *::before, *::after { box-sizing: border-box; }
html {
margin: 0; padding: 0;
overflow-x: clip;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
overscroll-behavior-x: none;
}
body { margin: 0; padding: 0; }
:root {
/* light: quarried stone + ink */
--bg: #E7E8E1;
--bg-deep: #DCDED4;
--surface: #F2F3EE;
--surface-2: #E1E3D9;
--surface-3: #D2D5C9;
--ink: #191C18;
--ink-2: #4B5049;
--ink-3: #797E74;
--line: #C4C7BA;
--line-soft: #D6D9CD;
--gold: #806017;
--gold-2: #A8842E;
--gold-glow: rgba(168,132,46,.16);
--shadow: 0 1px 2px rgba(25,28,24,.07), 0 8px 24px -12px rgba(25,28,24,.28);
--shadow-lift: 0 2px 4px rgba(25,28,24,.09), 0 18px 40px -18px rgba(25,28,24,.38);
--scrim: rgba(30,33,28,.45);
--ok: #3D7A55;
--warn: #8E6412;
--info: #45607C;
--bad: #9B3A2C;
--w: #E8DCB6; --u: #2E6FA6; --b: #45414F; --r: #A93A2C; --g: #3A7442; --c: #8E9187;
/* a printed card is the same card in any light: never themed */
--card-face: #F7F4E8;
--card-ink: #16140E;
--card-ink-2: #55503F;
--card-hair: rgba(20,16,8,.30);
--card-rule: rgba(20,16,8,.16);
--rail: 268px;
--f-display: "Cinzel", "Trajan Pro", Georgia, serif;
--f-body: "Spectral", "Iowan Old Style", Georgia, serif;
--f-util: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
--radius: 6px;
--radius-lg: 12px;
/* brass gradient used for primary accents and engraved highlights */
--brass-1: #E8CE6E;
--brass-2: #A8842E;
--brass-3: #7A5F1C;
--brass-ink: #2A2206;
/* a faint stone grain for surfaces (subtle, cheap, no network) */
--grain-l: url("data:image/svg+xml;utf8,");
--grain-d: url("data:image/svg+xml;utf8,");
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0E110F;
--bg-deep: #090B09;
--surface: #161A17;
--surface-2: #1E231F;
--surface-3: #272D28;
--ink: #E9E8DD;
--ink-2: #A8AC9E;
--ink-3: #757A6D;
--line: #2B322C;
--line-soft: #212721;
--gold: #CBA43A;
--gold-2: #E6C868;
--gold-glow: rgba(203,164,58,.14);
--shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 28px -14px rgba(0,0,0,.8);
--shadow-lift: 0 2px 6px rgba(0,0,0,.55), 0 22px 48px -20px rgba(0,0,0,.9);
--scrim: rgba(4,6,4,.66);
--ok: #6DBB88; --warn: #D5A63C; --info: #7FA0C4; --bad: #DB7461;
--w: #D9CEA8; --u: #4E93CE; --b: #6F6A80; --r: #D0584A; --g: #55A263; --c: #9DA095;
}
}
:root[data-theme="dark"] {
--bg: #0E110F;
--bg-deep: #090B09;
--surface: #161A17;
--surface-2: #1E231F;
--surface-3: #272D28;
--ink: #E9E8DD;
--ink-2: #A8AC9E;
--ink-3: #757A6D;
--line: #2B322C;
--line-soft: #212721;
--gold: #CBA43A;
--gold-2: #E6C868;
--gold-glow: rgba(203,164,58,.14);
--shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 28px -14px rgba(0,0,0,.8);
--shadow-lift: 0 2px 6px rgba(0,0,0,.55), 0 22px 48px -20px rgba(0,0,0,.9);
--scrim: rgba(4,6,4,.66);
--ok: #6DBB88; --warn: #D5A63C; --info: #7FA0C4; --bad: #DB7461;
--w: #D9CEA8; --u: #4E93CE; --b: #6F6A80; --r: #D0584A; --g: #55A263; --c: #9DA095;
}
body {
background: var(--bg);
background-image:
var(--grain-l, none),
radial-gradient(120% 80% at 50% -10%, var(--gold-glow), transparent 60%),
radial-gradient(100% 60% at 50% 110%, var(--bg-deep), transparent 65%);
background-attachment: scroll;
color: var(--ink);
font-family: var(--f-body);
font-size: 16px;
line-height: 1.62;
-webkit-font-smoothing: antialiased;
min-width: 0;
overflow-x: clip;
min-height: 100dvh;
-webkit-tap-highlight-color: rgba(168, 132, 46, .22);
overscroll-behavior-x: none;
}
@media (min-width: 901px) and (hover: hover) {
body { background-attachment: fixed; }
}
::selection { background: var(--gold); color: var(--bg); }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; border-radius: 2px; }
/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: minmax(0,1fr); min-height: 100dvh; }
.rail {
position: sticky; top: 0; align-self: start; height: 100vh;
display: flex; flex-direction: column;
background:
var(--grain-l, none),
linear-gradient(180deg, var(--surface), var(--surface-2));
border-right: 1px solid var(--line);
box-shadow: 2px 0 12px -8px rgba(0,0,0,.35);
}
.rail__brand { padding: 18px 18px 12px; border-bottom: 1px solid var(--line-soft); }
.brandmark {
font-family: var(--f-display); font-weight: 700; font-size: 17px;
letter-spacing: .1em; text-transform: uppercase; line-height: 1.25;
color: var(--ink); margin: 0; display: block; text-align: left;
background: none; border: 0; padding: 0; cursor: pointer; width: 100%;
transition: color .18s ease;
}
.brandmark span { display: block; color: var(--gold); }
.brandmark:hover { color: var(--gold-2); letter-spacing: .13em; }
.brand__sub {
font-family: var(--f-util); text-transform: uppercase; letter-spacing: .18em;
font-size: 11px; color: var(--ink-3); margin-top: 6px;
}
.rail__nav { display: flex; gap: 2px; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.rail__search { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); }
.rail__scroll { overflow-y: auto; flex: 1 1 auto; padding: 6px 8px 18px; scrollbar-width: thin; }
.rail__foot { border-top: 1px solid var(--line-soft); padding: 10px 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.railgroup { margin: 10px 0 4px; }
.railgroup__head {
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
padding: 6px 10px 5px; font-family: var(--f-util); text-transform: uppercase;
letter-spacing: .16em; font-size: 11px; color: var(--ink-3);
border-bottom: 1px solid var(--line-soft);
}
.railgroup__count { font-variant-numeric: tabular-nums; color: var(--ink-3); }
.railitem {
width: 100%; display: flex; align-items: center; gap: 8px;
padding: 7px 10px; border: 0; border-left: 2px solid transparent;
background: none; color: var(--ink-2); cursor: pointer; text-align: left;
font-family: var(--f-body); font-size: 14.5px; line-height: 1.3;
position: relative; overflow: hidden;
transition: background-color .14s ease, color .14s ease, transform .14s ease, border-color .14s ease;
}
.railitem:hover { background: var(--surface-2); color: var(--ink); transform: translateX(2px); }
.railitem:hover .railitem__name { color: var(--ink); }
.railitem:active { transform: translateX(0); }
.railitem[aria-current="true"] {
background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 14%, transparent), var(--surface-2));
color: var(--ink);
border-left-color: var(--gold); font-weight: 600;
}
.railitem__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.railitem__n { font-family: var(--f-util); font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.railitem__flag { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); flex: 0 0 auto; }
/* ---------- pips ---------- */
.pips { display: inline-block; flex: 0 0 auto; white-space: nowrap; }
.pips .pip + .pip { margin-left: 2px; }
.pip {
/* inline-block and a line-height, not grid. Grid layout does not survive
rasterising inside an SVG foreignObject, which is how the export draws
the card - the pips came out as blank discs with no letter in them. */
width: 13px; height: 13px; border-radius: 50%;
display: inline-block; text-align: center; vertical-align: middle;
font-family: var(--f-util); font-size: 9px; font-weight: 600; line-height: 11px;
border: 1px solid rgba(0,0,0,.25); color: #10120F;
}
.pip--W { background: var(--w); } .pip--U { background: var(--u); color: #F4F7FA; }
.pip--B { background: var(--b); color: #E7E4EE; } .pip--R { background: var(--r); color: #FBEDEA; }
.pip--G { background: var(--g); color: #EDF6EE; } .pip--C { background: var(--c); }
.pip--N { background: var(--surface-3); color: var(--ink-2); border-color: var(--line); }
.pip--hy { font-size: 0; }
.pips--lg .pip { width: 18px; height: 18px; font-size: 11.5px; line-height: 16px; }
.mtgcard .pip--N { background: #DCD6C2; color: #16140E; border-color: var(--card-hair); }
/* ---------- controls ---------- */
.btn {
position: relative; overflow: hidden;
font-family: var(--f-util); text-transform: uppercase; letter-spacing: .12em; font-size: 12px;
padding: 7px 14px; border: 1px solid var(--line); background: var(--surface);
color: var(--ink-2); border-radius: var(--radius); cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255,255,255,.28), var(--shadow);
transition: transform .12s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn:hover { border-color: var(--gold); color: var(--ink); background: var(--surface-2); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), var(--shadow-lift); }
.btn:active { transform: translateY(0); }
.btn--primary {
background: linear-gradient(180deg, var(--brass-1), var(--brass-2) 55%, var(--brass-3));
border-color: var(--brass-3); color: var(--brass-ink); font-weight: 700;
text-shadow: 0 1px 0 rgba(255,255,255,.25);
box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(0,0,0,.22);
}
.btn--primary:hover {
background: linear-gradient(180deg, #F4DE8E, var(--brass-2) 55%, var(--brass-3));
border-color: var(--brass-3); color: var(--brass-ink);
box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 3px var(--gold-glow), var(--shadow-lift);
}
/* a brass sheen that sweeps across a primary button on hover */
.btn--primary::after {
content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
/* W2: this swept by animating `left`, which relayouts the button on every
frame of the sweep. Same journey, composited: the sheen is 40% of the
button wide and travelled 180% of it, which is 450% of its own width. */
transform: translateX(0) skewX(-20deg);
transition: transform .5s ease; pointer-events: none;
}
.btn--primary:hover::after { transform: translateX(450%) skewX(-20deg); }
.btn--ghost { background: none; border-color: transparent; box-shadow: none; }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--line); }
.btn--sm { padding: 4px 9px; font-size: 11px; }
.btn--pill { border-radius: 20px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn[aria-pressed="true"] { border-color: var(--gold); color: var(--ink); background: var(--surface-2); }
.field {
width: 100%; font-family: var(--f-body); font-size: 16px; color: var(--ink);
background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
padding: 8px 10px;
}
.field:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px var(--gold-glow); }
.field::placeholder { color: var(--ink-3); }
textarea.field { line-height: 1.6; resize: vertical; min-height: 90px; font-size: 14px; }
textarea.field--mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
.label {
display: block; font-family: var(--f-util); text-transform: uppercase; letter-spacing: .14em;
font-size: 11px; color: var(--ink-3); margin-bottom: 4px;
}
.formgrid { display: grid; gap: 14px; }
.formgrid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.formgrid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.chip {
display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-util);
text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 600;
padding: 3px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap;
}
.chip--ready { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.chip--qc { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.chip--wip { color: var(--info); background: color-mix(in srgb, var(--info) 12%, transparent); }
.chip--printed { color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.chip--priority { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.chip--ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.chip--warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.chip--bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.chip__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
/* the genealogy chain on the coach tab - each shared family's homes in order */
.genealogy__chain { border-left: 1px solid var(--line); padding-left: 12px; }
.genealogy__chain > div { padding-bottom: 8px; }
.genealogy__chain > div:last-child { padding-bottom: 0; }
.genealogy__chain details summary { cursor: pointer; }
.genealogy__chain details { margin-top: 4px; }
/* a deck moves between sectors on its banner: Imported -> Unfinished -> Quality Check -> Priority -> Ready to Print -> Printed and Purchased */
.sectorstep {
display: inline-flex; align-items: center; gap: 2px;
border: 1px solid var(--line); border-radius: 3px; background: var(--surface);
}
.sectorstep__seg {
font-family: var(--f-util); text-transform: uppercase; letter-spacing: .1em;
font-size: 10px; font-weight: 600; padding: 4px 10px;
background: none; border: 0; color: var(--ink-3); cursor: pointer; white-space: nowrap;
}
.sectorstep__seg:hover { color: var(--ink); background: var(--surface-2); }
.sectorstep__seg.is-cur { color: var(--bg); background: var(--gold); }
/* ---------- main ---------- */
.main { min-width: 0; display: flex; flex-direction: column; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 34px 96px; }
.wrap--narrow { max-width: 780px; }
.wrap--wide { max-width: 1240px; }
.topbar {
position: sticky; top: 0; z-index: 20;
display: flex; align-items: center; gap: 12px;
padding: 9px 34px; border-bottom: 1px solid var(--line);
/* opaque on purpose. A blurred sticky bar has to re-blur whatever is
passing under it, every frame, for the whole length of the page. */
background: var(--bg);
box-shadow: 0 1px 0 var(--line), 0 6px 18px -12px rgba(0,0,0,.55);
}
.topbar__crumb {
font-family: var(--f-util); text-transform: uppercase; letter-spacing: .16em;
font-size: 11.5px; color: var(--ink-3); min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar__crumb b { color: var(--ink-2); font-weight: 600; }
.topbar__search { flex: 1 1 auto; max-width: 380px; margin-left: auto; }
.topbar__search .field { padding: 7px 12px; font-size: 16px; }
.savepill {
font-family: var(--f-util); text-transform: uppercase; letter-spacing: .12em; font-size: 11px;
color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.savepill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); transition: background-color .2s ease, box-shadow .2s ease; }
.savepill[data-s="saving"] .savepill__dot { background: var(--gold); animation: pulse 1s ease-in-out infinite; }
.savepill[data-s="saved"] .savepill__dot { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.savepill[data-s="saved"] { color: var(--ok); }
.savepill[data-s="error"] .savepill__dot { background: var(--warn); }
.savepill[data-s="ro"] .savepill__dot { background: var(--info); }
@keyframes pulse { 0%,100% { opacity: .3 } 50% { opacity: 1 } }
.theme-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; padding: 0; flex: 0 0 auto;
border: 1px solid var(--line); border-radius: 50%;
background: var(--surface); color: var(--ink-2); cursor: pointer;
transition: color .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.theme-toggle:hover { color: var(--gold); border-color: var(--gold); box-shadow: var(--shadow); }
.theme-toggle svg { display: block; }
/* ---------- headings ---------- */
.eyebrow {
font-family: var(--f-util); text-transform: uppercase; letter-spacing: .26em;
font-size: 11px; color: var(--gold); margin: 0 0 10px;
}
h1.display {
font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 4.2vw, 42px);
line-height: 1.08; letter-spacing: .005em; margin: 0; text-wrap: balance;
}
h2.section {
font-family: var(--f-display); font-weight: 600; font-size: 20px; letter-spacing: .08em;
text-transform: uppercase; margin: 0; text-wrap: balance; position: relative; padding-left: 14px;
}
h2.section::before {
content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 4px; height: 60%; border-radius: 2px;
background: linear-gradient(180deg, var(--brass-1), var(--brass-3));
}
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.rule--gold { height: 2px; border: 0; margin: 0; background: linear-gradient(90deg, var(--brass-1), var(--brass-2) 30%, var(--brass-3) 55%, transparent 75%); box-shadow: 0 0 8px var(--gold-glow); }
/* ---------- hero fan ---------- */
.hero { display: grid; grid-template-columns: minmax(0,1fr) 440px; gap: 34px; align-items: center; padding: 40px 0 28px; }
.hero__fan { position: relative; height: 320px; }
/* a warm pedestal glow under the fan, plus a soft reflected pool */
.hero__fan::before {
content: ""; position: absolute; left: 50%; bottom: 2px; width: 78%; height: 90px;
transform: translateX(-50%); pointer-events: none;
background: radial-gradient(ellipse at center, var(--glow, rgba(196,160,58,.20)), transparent 70%);
filter: blur(6px);
}
.hero__fan::after {
content: ""; position: absolute; left: 50%; bottom: -26px; width: 62%; height: 34px;
transform: translateX(-50%); pointer-events: none;
background: radial-gradient(ellipse at center, rgba(0,0,0,.30), transparent 70%);
filter: blur(4px);
}
.mtgcard-wrap.hero__card {
position: absolute; top: 50%; left: 50%; width: 170px; max-width: none;
transform-origin: 50% 120%;
filter: drop-shadow(0 16px 28px rgba(0,0,0,.36));
animation: dealIn .7s cubic-bezier(.2,.75,.3,1) backwards;
}
@keyframes dealIn { from { opacity: 0; transform: translate(-50%,-30%) rotate(0deg) scale(.9); } }
@media screen and (max-width: 1000px) {
.hero { grid-template-columns: 1fr; }
.hero__fan { height: 238px; }
.mtgcard-wrap.hero__card { width: 128px; }
}
/* ---------- deck banner ---------- */
.banner {
position: relative; margin-top: 6px; border: 1px solid var(--line);
border-radius: var(--radius); overflow: hidden; background: var(--surface);
box-shadow: var(--shadow);
}
/* a thin colour-identity ribbon across the top of the banner */
.banner__ci { position: absolute; top: 0; left: 0; right: 0; height: 5px; z-index: 3; }
.banner__art { height: 216px; background-size: cover; background-position: center 40%; position: relative; }
.banner__art--gen { filter: saturate(.85); }
.banner__scrim { position: absolute; inset: 0; }
.banner__tag { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; gap: 4px; }
.banner__body { position: relative; padding: 18px 24px 20px; margin-top: -58px; }
.banner__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.banner__sub { color: var(--ink-2); font-size: 15.5px; margin: 8px 0 0; max-width: 62ch; }
.banner__acts { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; z-index: 2; }
/* ---------- plates / stats ---------- */
.plate {
position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg);
background:
var(--grain-l, none),
linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface-2) 55%, var(--surface)));
box-shadow: var(--shadow);
}
/* a brass hairline across the top of every plate */
.plate::before {
content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 2px;
background: linear-gradient(90deg, transparent, var(--brass-2), transparent);
opacity: .5; border-radius: 0 0 2px 2px; pointer-events: none;
}
.plate__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); }
.plate__body { padding: 18px; }
.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 1px; background: var(--line-soft); }
.stat { background: var(--surface); padding: 14px 16px; }
.stat__n {
font-family: var(--f-display); font-weight: 700; font-size: 26px; line-height: 1;
font-variant-numeric: tabular-nums; color: var(--ink);
text-shadow: 0 1px 0 color-mix(in srgb, var(--gold) 30%, transparent);
}
.stat__l { font-family: var(--f-util); text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; color: var(--ink-3); margin-top: 6px; }
/* -------- verdicts, generation, imports (Playtest + Card Forge) -------- */
.verdictgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.verdict { display: flex; flex-direction: column; }
.verdict .plate__body { padding-top: 12px; }
.vlabel { font-family: var(--f-util); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--ink-3); }
.vlabel--works { color: var(--ok); }
.vlabel--fallsdown { color: var(--bad); }
.vlabel--steady { color: var(--gold); }
.vline { padding: 6px 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); border-bottom: 1px solid var(--line-soft); }
.vline:last-child { border-bottom: 0; }
.genrow { margin-top: 10px; }
.genrow .plate__body { padding: 14px 16px; }
.deftable { width: 100%; border-collapse: collapse; }
.deftable th, .deftable td { text-align: left; padding: 7px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.deftable th { font-family: var(--f-util); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--ink-3); font-weight: 500; width: 34%; padding-right: 16px; }
.deftable td { font-size: 14.5px; color: var(--ink); }
.deftable tr:last-child th, .deftable tr:last-child td { border-bottom: 0; }
/* ---------- charts ---------- */
.chart { display: flex; align-items: flex-end; gap: 5px; height: 118px; }
.chart__col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; height: 100%; }
.chart__bar { width: 100%; background: var(--gold); border-radius: 2px 2px 0 0; min-height: 2px; opacity: .82; transition: opacity .15s ease; }
.chart__col:hover .chart__bar { opacity: 1; }
.chart__n { font-family: var(--f-util); font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chart__x { font-family: var(--f-util); font-size: 10.5px; color: var(--ink-3); letter-spacing: .08em; }
.meter { display: flex; align-items: center; gap: 10px; }
.meter__track { flex: 1 1 auto; height: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.meter__fill { display: block; height: 100%; }
.meter__label { font-family: var(--f-util); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); width: 92px; }
.meter__n { font-family: var(--f-util); font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; width: 76px; text-align: right; }
/* ---------- tabs ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs--plain { border-bottom: 0; flex-wrap: wrap; }
.tab {
font-family: var(--f-util); text-transform: uppercase; letter-spacing: .13em; font-size: 12px;
padding: 10px 14px; background: none; border: 0; border-bottom: 2px solid transparent;
color: var(--ink-3); cursor: pointer; white-space: nowrap;
transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.tab:hover { color: var(--ink); background: color-mix(in srgb, var(--gold) 7%, transparent); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.tab__n { font-variant-numeric: tabular-nums; opacity: .65; margin-left: 5px; }
/* ---------- card list ---------- */
.cardlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 292px), 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.cardrow {
display: flex; align-items: center; gap: 9px; padding: 8px 12px; background: var(--surface);
border: 0; border-left: 2px solid transparent; text-align: left; cursor: pointer; width: 100%;
font-family: var(--f-body); font-size: 14.5px; color: var(--ink-2); line-height: 1.3;
transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
.cardrow:hover { background: var(--surface-2); color: var(--ink); border-left-color: var(--gold); transform: translateX(2px); }
.cardrow:active { transform: translateX(0); }
.cardrow__i { font-family: var(--f-util); font-size: 11px; color: var(--ink-3); width: 20px; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.cardrow__main { flex: 1 1 auto; min-width: 0; }
.cardrow__n { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cardrow__t { display: block; font-family: var(--f-util); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cardrow__mark { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; }
.cardrow__mark--empty { background: none; border: 1px solid var(--line); }
/* ============================================================
the card frame
============================================================ */
/* the frame sizes every detail off its own width, so one component serves
the deck page, the hero fan and a 63mm print sheet without redefinition */
.mtgcard-wrap { container-type: inline-size; width: 100%; max-width: 320px; }
.deckback-slot { display: flex; flex-direction: column; gap: 8px; max-width: 320px; margin-top: 14px; }
.deckback {
width: 100%;
max-width: 320px;
aspect-ratio: 63 / 88;
border-radius: 4.7% / 3.4%;
overflow: hidden;
background: #16140E;
box-shadow: var(--shadow-lift), inset 0 0 0 1px rgba(255,255,255,.18);
position: relative;
}
.deckback img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deckback__empty {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: var(--ink-3);
font-family: var(--f-display);
letter-spacing: .14em;
font-size: 11px;
text-transform: uppercase;
border: 1px dashed color-mix(in srgb, var(--gold) 35%, transparent);
border-radius: 4.7% / 3.4%;
}
.sheet .deckback, .sheet .printcard .deckback { width: 63mm; max-width: none; }
.mtgcard {
--fa: #8E9187; --fb: #8E9187;
font-size: 320px;
position: relative; width: 100%; aspect-ratio: 63 / 88;
/* the ratio is the card, so nothing inside may push past it */
overflow: hidden;
border-radius: 4.7% / 3.4%; padding: 3.4% 3.1% 3.8%;
background:
linear-gradient(158deg, var(--fa) 0%, var(--fb) 62%, rgba(0,0,0,.34) 100%);
box-shadow:
var(--shadow-lift),
inset 0 0 0 1px rgba(255,255,255,.26),
inset 0 1px 0 rgba(255,255,255,.34),
inset 0 -2px 10px rgba(0,0,0,.42),
inset 0 0 40px rgba(0,0,0,.22);
display: flex; flex-direction: column; gap: 1.6%;
transition: transform .24s cubic-bezier(.2,.7,.3,1);
isolation: isolate;
}
/* an inner hairline that frames the whole face like a printed border */
.mtgcard::before {
content: ""; position: absolute; inset: 1.1%; border-radius: 3.4%/2.4%;
border: 1px solid rgba(255,255,255,.16);
box-shadow: inset 0 0 18px rgba(0,0,0,.18);
pointer-events: none; z-index: 1;
}
.mtgcard--live:hover { transform: translateY(-5px) rotate(-.4deg); }
/* the colour band down the edge of a three-plus-colour frame */
.mtgcard__band { position: absolute; left: 0; top: 8%; bottom: 8%; width: 5px; border-radius: 3px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.34); }
.mtgcard__band span { flex: 1 1 0; }
/* foil sheen, earned only by rares and mythics */
.mtgcard--foil::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: linear-gradient(114deg,
transparent 22%, rgba(255,255,255,.30) 38%, rgba(180,235,255,.22) 46%,
rgba(255,222,170,.26) 54%, transparent 70%);
opacity: 0; transition: opacity .3s ease; mix-blend-mode: overlay; z-index: 3;
}
.mtgcard--foil:hover::after { opacity: 1; }
.mtgbar {
display: flex; align-items: center; gap: 6px; justify-content: space-between;
background: var(--card-face);
border: 1px solid var(--card-hair); border-radius: 4px;
padding: 2.2% 3.4%;
box-shadow: 0 1px 0 rgba(255,255,255,.20), inset 0 1px 2px rgba(0,0,0,.10);
}
.mtgcard__name { font-family: var(--f-display); font-weight: 600; font-size: 4%; line-height: 1.18; color: var(--card-ink); letter-spacing: .005em; }
.mtgcard__art {
flex: 1 1 36%; min-height: 0; position: relative; overflow: hidden;
border-radius: 2px;
background-size: cover; background-position: center; background-color: rgba(0,0,0,.2);
box-shadow: 0 0 0 1px var(--card-hair), 0 0 0 2px rgba(255,255,255,.14), inset 0 2px 8px rgba(0,0,0,.34);
}
.mtgcard__type { font-family: var(--f-body); font-size: 3.3%; font-weight: 600; color: var(--card-ink); letter-spacing: .005em; }
.mtgcard__set {
width: 11px; height: 11px; flex: 0 0 auto; border-radius: 2px;
transform: rotate(45deg); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.2);
}
.mtgcard__text {
flex: 1 1 44%; min-height: 0; overflow-y: auto;
background: var(--card-face); color: var(--card-ink);
border: 1px solid var(--card-hair); border-radius: 4px;
padding: 3% 3.4% 3.4%;
font-size: 3.45%; line-height: 1.44; scrollbar-width: thin;
box-shadow: inset 0 1px 3px rgba(0,0,0,.10);
}
.mtgcard__text p { margin: 0 0 5px; }
.mtgcard__text p:last-child { margin-bottom: 0; }
.mtgcard__text .pip { width: 1em; height: 1em; font-size: .78em; vertical-align: -.12em; }
.mtgcard__kw { font-weight: 600; }
.mtgcard__flavor { font-style: italic; color: var(--card-ink-2); border-top: 1px solid var(--card-rule); padding-top: 5px; margin-top: 6px; }
.reminder { font-style: italic; color: var(--card-ink-2); }
.abilityword { font-style: italic; font-weight: 600; }
.mtgcard__pt {
position: absolute; right: 4.5%; bottom: 2.4%;
background: var(--card-face); color: var(--card-ink);
border: 1px solid var(--card-hair); border-radius: 4px; padding: 0 3%;
font-family: var(--f-display); font-weight: 700; font-size: 4%;
font-variant-numeric: tabular-nums; z-index: 2;
box-shadow: 0 1px 2px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.4);
}
.mtgcard__setline {
display: flex; justify-content: space-between; gap: 6px;
font-family: var(--f-util); font-size: 2.6%; letter-spacing: .1em; text-transform: uppercase;
color: rgba(255,255,255,.78); padding: 0 2%; text-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.mtgcard__setline span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@supports (width: 1cqw) { .mtgcard { font-size: 100cqw; } }
/* mini frames (hero fan) reuse the same box */
.mtgcard--mini .mtgcard__text { display: none; }
.mtgcard--mini .mtgcard__art { flex: 1 1 auto; }
.cardspread { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 28px; align-items: start; }
@media (max-width: 820px) { .cardspread { grid-template-columns: 1fr; } }
/* ---------- print sheet ---------- */
.sheet { display: grid; grid-template-columns: repeat(3, 63mm); gap: 3mm; justify-content: center; }
.sheet .mtgcard-wrap { width: 63mm; max-width: none; }
.sheetpage { break-after: page; padding: 4mm 0; }
.sheetpage:last-child { break-after: auto; }
/* ---------- prose ---------- */
.prose { font-size: 15.5px; color: var(--ink); max-width: 68ch; }
.prose--wide { max-width: none; }
.prose > *:first-child { margin-top: 0; }
.prose h1, .prose h2, .prose h3, .prose h4 { font-family: var(--f-display); font-weight: 600; letter-spacing: .03em; line-height: 1.2; margin: 1.6em 0 .5em; text-wrap: balance; }
.prose h1 { font-size: 25px; }
.prose h2 { font-size: 19px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line-soft); padding-bottom: .3em; }
.prose h3 { font-size: 16.5px; }
.prose h4 { font-size: 14.5px; color: var(--ink-2); }
.prose p { margin: 0 0 .95em; }
.prose ul, .prose ol { margin: 0 0 .95em; padding-left: 1.3em; }
.prose li { margin-bottom: .3em; }
.prose li::marker { color: var(--gold); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose em { font-style: italic; }
.prose code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .85em; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 2px; padding: .08em .34em; }
.prose pre { background: var(--surface-2); border: 1px solid var(--line-soft); border-left: 2px solid var(--gold); padding: 12px 14px; overflow-x: auto; font-size: 13px; margin: 0 0 1em; }
.prose pre code { background: none; border: 0; padding: 0; }
.prose blockquote { margin: 0 0 1em; padding: 2px 0 2px 16px; border-left: 2px solid var(--gold); color: var(--ink-2); font-style: italic; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 1.8em 0; }
.prose table { border-collapse: collapse; font-size: 13.5px; width: 100%; }
.prose .tablewrap { overflow-x: auto; margin: 0 0 1.1em; border: 1px solid var(--line-soft); }
.prose th, .prose td { border-bottom: 1px solid var(--line-soft); padding: 6px 11px; text-align: left; vertical-align: top; }
.prose th { font-family: var(--f-util); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; color: var(--ink-3); font-weight: 500; background: var(--surface-2); white-space: nowrap; }
.prose a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-glow); }
.prose a:hover { border-bottom-color: var(--gold); }
.wikilink { font-family: var(--f-body); color: var(--gold); background: none; border: 0; padding: 0; cursor: pointer; border-bottom: 1px dashed var(--gold); font-size: inherit; }
.wikilink:hover { background: var(--gold-glow); }
.wikilink--dead { color: var(--ink-3); border-bottom-style: dotted; border-bottom-color: var(--line); cursor: default; }
.pathref { font-family: var(--f-util); font-size: .92em; color: var(--ink-3); letter-spacing: .02em; }
mark { background: var(--gold-glow); color: inherit; border-bottom: 1px solid var(--gold); }
/* ---------- notes ---------- */
.note { border: 1px solid var(--line); border-left: 2px solid var(--gold); background: var(--surface); padding: 14px 18px; border-radius: var(--radius); }
.note__head { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; margin-bottom: 8px; }
.note__title { font-family: var(--f-display); font-weight: 600; font-size: 15px; letter-spacing: .03em; }
.note__ts { font-family: var(--f-util); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
/* ---------- drop zone ---------- */
.drop {
border: 1px dashed var(--line); border-radius: var(--radius); padding: 22px;
text-align: center; color: var(--ink-3); background: var(--surface);
font-family: var(--f-util); text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px;
cursor: pointer; transition: border-color .15s ease, color .15s ease, background-color .15s ease; width: 100%;
}
.drop:hover, .drop.is-over { border-color: var(--gold); color: var(--gold); background: var(--surface-2); }
/* ---------- deck grid ---------- */
.deckgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 238px), 1fr)); gap: 14px; }
.deckplate {
position: relative; text-align: left; cursor: pointer; overflow: hidden;
border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
padding: 0; display: flex; flex-direction: column; box-shadow: var(--shadow);
transition: transform .2s cubic-bezier(.2,.7,.3,1.2), box-shadow .2s ease, border-color .2s ease;
}
.deckplate::before {
content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 2px;
background: linear-gradient(90deg, transparent, var(--brass-2), transparent);
opacity: .45; z-index: 3; transition: opacity .2s ease; pointer-events: none;
}
.deckplate:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--brass-3); }
.deckplate:hover::before { opacity: 1; }
.deckplate__art {
position: relative; height: 108px; background-size: cover; background-position: center;
border-bottom: 1px solid var(--line); overflow: hidden;
}
.deckplate__art::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to top, rgba(0,0,0,.34), transparent 55%);
}
.deckplate__ids { position: absolute; left: 10px; bottom: 8px; z-index: 2; display: inline-flex; gap: 3px; }
.deckplate__id { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.85); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.deckplate__chip {
position: absolute; right: 8px; top: 8px; z-index: 2;
font-family: var(--f-util); text-transform: uppercase; letter-spacing: .1em; font-size: 9.5px;
padding: 3px 7px; border-radius: 999px; color: #fff; background: rgba(10,12,10,.55);
border: 1px solid rgba(255,255,255,.28);
/* no backdrop-filter here: one per deck plate meant the browser
re-composited dozens of blurs on every frame of every scroll */
}
.deckplate__body { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; }
.deckplate__name { font-family: var(--f-display); font-weight: 600; font-size: 16px; letter-spacing: .01em; color: var(--ink); line-height: 1.2; }
.deckplate__cmd { font-size: 13px; color: var(--ink-3); line-height: 1.35; }
.deckplate__power {
font-family: var(--f-util); text-transform: uppercase; letter-spacing: .12em; font-size: 10px;
color: var(--gold); padding: 2px 7px; border: 1px solid var(--line); border-radius: 3px;
align-self: flex-start; background: color-mix(in srgb, var(--gold) 8%, transparent);
}
.deckplate__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
/* ---------- deck collection colour filter ---------- */
.colorfilt { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 2px 0 6px; }
.colorfilt__chip {
display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px;
border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
font-family: var(--f-util); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
color: var(--ink-2); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.colorfilt__chip:hover { border-color: var(--gold); color: var(--ink); }
.colorfilt__chip.is-on { border-color: var(--gold); color: var(--ink); box-shadow: 0 0 0 1px var(--gold) inset; }
.colorfilt__name { white-space: nowrap; }
.colorfilt__n { font-variant-numeric: tabular-nums; color: var(--ink-3); }
.colorfilt__chip.is-on .colorfilt__n { color: var(--gold); }
/* ---------- search / review ---------- */
.hit {
display: flex; align-items: baseline; gap: 12px; width: 100%; text-align: left;
padding: 9px 14px; background: var(--surface); border: 0; border-left: 2px solid transparent;
cursor: pointer; font-family: var(--f-body); font-size: 14.5px; color: var(--ink-2);
position: relative; overflow: hidden;
transition: background-color .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
}
.hit:hover { background: var(--surface-2); color: var(--ink); border-left-color: var(--gold); transform: translateX(3px); }
.hit:active { transform: translateX(0); }
.hit__n { flex: 0 0 auto; font-weight: 600; color: var(--ink); }
.hit__where { font-family: var(--f-util); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.hit__snip { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hitlist { display: flex; flex-direction: column; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.matchrow {
display: grid; grid-template-columns: 26px minmax(0,1fr) 96px 62px 62px; gap: 10px; align-items: center;
width: 100%; text-align: left; padding: 8px 14px; background: var(--surface); border: 0;
border-left: 2px solid transparent; cursor: pointer; font-family: var(--f-body); font-size: 14.5px; color: var(--ink-2);
transition: background-color .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
}
.matchrow:hover { background: var(--surface-2); color: var(--ink); border-left-color: var(--gold); transform: translateX(2px); }
.matchrow__i { font-family: var(--f-util); font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.matchrow__pct { font-family: var(--f-util); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 700px) { .matchrow { grid-template-columns: 22px minmax(0,1fr) 56px; } .matchrow__hide { display: none; } }
/* ---------- misc ---------- */
.stack { display: flex; flex-direction: column; }
.stack--xs { gap: 8px; } .stack--sm { gap: 14px; } .stack--md { gap: 22px; } .stack--lg { gap: 36px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.muted { color: var(--ink-3); }
.small { font-size: 13.5px; }
.util { font-family: var(--f-util); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--ink-3); }
.empty {
padding: 34px 20px; text-align: center; color: var(--ink-3);
border: 1px dashed color-mix(in srgb, var(--gold) 45%, var(--line));
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--gold) 3%, var(--surface));
box-shadow: inset 0 0 30px var(--gold-glow);
}
.pad-t { padding-top: 30px; }
.colorbar { display: flex; height: 6px; border-radius: 2px; overflow: hidden; border: 1px solid var(--line); }
.colorbar span { display: block; }
/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: start center; padding: 5vh 20px 40px; overflow-y: auto; }
.modal__scrim { position: fixed; inset: 0; background: var(--scrim); border: 0; padding: 0; cursor: default; }
.modal__panel {
position: relative; width: 100%; max-width: 760px; background: var(--surface);
border: 1px solid var(--line); border-top: 2px solid var(--gold); border-radius: var(--radius);
box-shadow: var(--shadow-lift); padding: 24px 26px 26px;
animation: rise .22s cubic-bezier(.2,.7,.3,1);
}
.modal__panel--wide { max-width: 960px; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.modal__close { position: absolute; top: 10px; right: 12px; }
.toast {
position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 90;
background: var(--surface); border: 1px solid var(--line); border-left: 2px solid var(--gold);
padding: 10px 18px; border-radius: var(--radius); box-shadow: var(--shadow-lift);
font-family: var(--f-util); text-transform: uppercase; letter-spacing: .12em; font-size: 11.5px;
color: var(--ink); max-width: 80vw;
}
.railtoggle { display: none; }
/* ---------- staged reveal ---------- */
.enter > * { animation: riseIn .34s cubic-bezier(.2,.75,.3,1) backwards; }
.enter > *:nth-child(1) { animation-delay: 0ms; }
.enter > *:nth-child(2) { animation-delay: 55ms; }
.enter > *:nth-child(3) { animation-delay: 105ms; }
.enter > *:nth-child(4) { animation-delay: 150ms; }
.enter > *:nth-child(n+5) { animation-delay: 190ms; }
@keyframes riseIn { from { opacity: 0; transform: translateY(9px); } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; }
}
@media screen and (max-width: 900px) {
.shell { grid-template-columns: 1fr; }
.rail { position: fixed; z-index: 50; width: min(86vw, 320px); left: 0; top: 0; transform: translateX(-102%); transition: transform .24s cubic-bezier(.2,.7,.3,1); box-shadow: var(--shadow-lift); }
.rail.is-open { transform: none; }
.railtoggle { display: inline-flex; }
.wrap { padding: 0 16px 88px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
.topbar { padding: 8px 16px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-top: max(8px, env(safe-area-inset-top, 0px)); flex-wrap: wrap; }
.topbar__search { max-width: none; width: 100%; order: 3; margin-left: 0; }
.banner__art { height: 152px; }
.banner__body { margin-top: -44px; padding: 14px 16px 18px; }
.formgrid--2, .formgrid--3 { grid-template-columns: 1fr; }
.sheet { grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr)); }
.sheet .mtgcard-wrap { width: 100%; }
}
/* ---------- print ---------- */
@media print {
.rail, .topbar, .tabs, .banner__acts, .noprint { display: none !important; }
body { background: #fff !important; }
.shell { display: block; }
.wrap { max-width: none; padding: 0; }
.sheetpage { page-break-after: always; }
.mtgcard { box-shadow: none !important; break-inside: avoid; }
.mtgcard--foil::after { display: none; }
@page { size: A4 portrait; margin: 8mm; }
}
/* ============================================================
the hub - the front door
============================================================ */
.shell--solo { grid-template-columns: minmax(0, 1fr); }
.topbar__home {
flex: 0 0 auto;
font-family: var(--f-display); font-weight: 600; font-size: 12px;
letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.topbar__home:hover { color: var(--gold); }
.hubhead { padding: 56px 0 40px; max-width: 62ch; }
.hubhead h1.display { margin-bottom: 14px; }
/* the command-center hero keeps the punchline to the left, the commander fan
to the right, and a live stats strip beneath */
.hub-hero { padding: 44px 0 8px; }
.hub-hero .display { margin-bottom: 14px; }
.hubstats { margin-top: 26px; }
.hubgrid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 292px), 1fr));
gap: 14px;
}
.hubtile {
position: relative; display: flex; align-items: flex-start; gap: 16px; text-align: left;
cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius-lg);
background:
var(--grain-l, none),
linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface-2) 50%, var(--surface)));
padding: 20px 22px 22px; width: 100%; font-family: var(--f-body); color: var(--ink-2);
box-shadow: var(--shadow); overflow: hidden;
transition: transform .2s cubic-bezier(.2,.7,.3,1.2), box-shadow .2s ease, border-color .2s ease;
animation: riseIn .4s cubic-bezier(.2,.75,.3,1) backwards;
}
.hubtile::before {
content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 2px;
background: linear-gradient(90deg, transparent, var(--brass-2), transparent);
opacity: .45; z-index: 1; transition: opacity .2s ease; pointer-events: none;
}
.hubtile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--brass-3); }
.hubtile:hover::before { opacity: 1; }
.hubtile__glyph {
flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center;
font-family: var(--f-display); font-weight: 700; font-size: 18px;
color: var(--gold); border: 1px solid var(--line);
background:
radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--gold) 22%, var(--bg)), var(--bg));
border-radius: var(--radius);
box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
transition: transform .18s ease, border-color .18s ease, color .18s ease;
}
.hubtile:hover .hubtile__glyph { transform: rotate(-3deg) scale(1.05); border-color: var(--gold); color: var(--gold-2); }
.hubtile__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hubtile__name {
font-family: var(--f-display); font-weight: 600; font-size: 17px;
letter-spacing: .03em; color: var(--ink);
}
.hubtile__flag {
font-family: var(--f-util); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
color: var(--warn); border: 1px solid currentColor; border-radius: 999px;
padding: 1px 7px; vertical-align: 2px; margin-left: 4px; font-weight: 600;
}
.hubtile__blurb { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.hubtile__count {
font-family: var(--f-util); text-transform: uppercase; letter-spacing: .13em;
font-size: 10.5px; color: var(--gold); margin-top: 4px;
border-top: 1px solid var(--line-soft); padding-top: 7px;
}
/* shortcuts for the signed-in maker: print shops, card tools, and the workshop's own rooms */
.macros {
display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
gap: 12px;
}
.macro {
position: relative; display: flex; align-items: flex-start; gap: 14px; text-align: left;
cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius-lg);
background: var(--surface); padding: 18px 20px; width: 100%;
font-family: var(--f-body); color: var(--ink-2); text-decoration: none; box-shadow: var(--shadow);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.macro:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--gold); }
.macro__glyph {
flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center;
font-family: var(--f-display); font-weight: 700; font-size: 15px;
color: var(--gold); border: 1px solid var(--line);
background:
radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--gold) 22%, var(--bg)), var(--bg));
border-radius: var(--radius);
transition: transform .18s ease, border-color .18s ease;
}
.macro:hover .macro__glyph { transform: rotate(-3deg) scale(1.05); border-color: var(--gold); }
.macro__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.macro__name { font-family: var(--f-display); font-weight: 600; font-size: 14.5px; letter-spacing: .03em; color: var(--ink); }
.macro__blurb { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
/* the way back, on every area that is not the hub */
.backbar {
display: flex; align-items: center; gap: 10px; padding: 26px 0 4px;
font-family: var(--f-util); text-transform: uppercase; letter-spacing: .14em; font-size: 11px;
}
.backlink {
background: none; border: 0; padding: 0; cursor: pointer; color: var(--gold);
font: inherit; letter-spacing: inherit; text-transform: inherit;
display: inline-flex; align-items: center; gap: 7px;
}
.backlink:hover { color: var(--gold-2); text-decoration: underline; }
.backbar__sep { color: var(--line); }
.backbar__here { color: var(--ink-3); }
@media screen and (max-width: 900px) {
.hubhead { padding: 34px 0 26px; }
.hubgrid { grid-template-columns: 1fr; }
}
/* ---------- the living hub ---------- */
.hero__fan--single { display: flex; height: 200px; align-items: center; justify-content: center; }
.hero__spot {
border: 1px dashed var(--brass-3); background: color-mix(in srgb, var(--bg) 82%, var(--gold) 2%);
color: var(--ink-2); padding: 26px 30px; border-radius: var(--radius-lg); cursor: pointer;
font-family: var(--f-util); text-align: left; max-width: 460px; transition: border-color .25s, transform .25s;
}
.hero__spot:hover { border-style: solid; border-color: var(--gold); transform: translateY(-2px); }
.hero__spot-g {
display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 12px;
border: 1px solid var(--gold); color: var(--gold); border-radius: 9px; font-family: var(--f-display);
font-size: 20px; vertical-align: middle;
}
.hero__spot-t { font-size: 16px; letter-spacing: .02em; vertical-align: middle; }
.kbtn {
display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; margin-right: 8px;
border: 1px solid currentColor; border-radius: 5px; font-family: var(--f-util); font-size: 11px; letter-spacing: .1em;
}
/* the Hearth - one deck under the light */
.hearth {
display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: stretch;
background: color-mix(in srgb, var(--bg) 94%, var(--gold) 3%);
border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; padding: 20px;
}
.hearth__card { display: flex; align-items: flex-start; justify-content: center; }
.hearth__card .peek__art { width: 100%; min-height: 180px; border-radius: 10px; }
.hearth__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hearth__name { margin: 0; font-family: var(--f-display); font-size: 30px; line-height: 1.1; }
.hearth__link { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; text-align: left; }
.hearth__link:hover { color: var(--gold-2); text-decoration: underline; }
.hearth__cmd { color: var(--ink-3); font-family: var(--f-util); letter-spacing: .05em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hearth__theme { color: var(--ink-2); font-style: italic; margin: 0; }
.hearth__reads { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.hearth__read { font-size: 14.5px; color: var(--ink-2); line-height: 1.4; }
.hearth__read b { color: var(--gold-2); font-weight: 700; }
.hearth__read .eyebrow { margin: 0; }
.hearth__stale {
display: flex; gap: 9px; align-items: flex-start;
margin: 10px 0 0; padding: 9px 11px;
background: color-mix(in srgb, var(--warn) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--warn) 38%, transparent);
border-radius: var(--radius-sm, 8px);
font-size: 12.5px; color: var(--ink-2); line-height: 1.45;
}
.hearth__stale-icon {
flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%;
background: var(--warn); color: #0a0702; font-weight: 800; font-size: 12px;
display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.hearth__stale-body b { color: var(--warn); }
.hearth__stale-body .btn { margin-top: 6px; }
.hearth__meta { font-size: 12px; color: var(--ink-3); margin: 8px 0 0; font-family: var(--f-util); letter-spacing: .08em; text-transform: uppercase; }
@media screen and (max-width: 760px) {
.hearth { grid-template-columns: 1fr; }
.hearth__card { order: 2; }
}
/* the league - the field, ranked by real measured win% */
.league { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: color-mix(in srgb, var(--bg) 96%, var(--gold) 1%); }
.league__head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 12px 18px; border-bottom: 1px solid var(--line-soft);
font-family: var(--f-util); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--ink-3);
}
.league__t { color: var(--gold); }
.leaguerow {
display: grid; grid-template-columns: 34px 40px 1fr 90px 120px 64px; gap: 8px; align-items: center;
width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line-soft); padding: 9px 18px; cursor: pointer; text-align: left;
}
.leaguerow:last-child { border-bottom: 0; }
.leaguerow:hover { background: color-mix(in srgb, var(--gold) 6%, transparent); }
.leaguerow--leader { background: color-mix(in srgb, var(--gold) 5%, transparent); }
.leaguerow__rank {
font-family: var(--f-display); font-size: 18px; color: var(--gold-2);
display: flex; align-items: center; justify-content: center;
}
.leaguerow__art {
width: 34px; height: 44px; border-radius: 5px; background-size: cover; background-position: center;
border: 1px solid var(--line); display: block; flex: 0 0 auto;
}
.leaguerow__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.leaguerow__name { font-weight: 700; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leaguerow__cmd { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leaguerow__word { font-family: var(--f-util); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; text-align: right; }
.leaguerow__bar { height: 7px; background: var(--line-soft); border-radius: 4px; overflow: hidden; }
.leaguerow__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); border-radius: 4px; }
.leaguerow__pct, .leaguerow__pct-lead { font-family: var(--f-display); font-size: 15px; color: var(--gold-2); text-align: right; }
.leaguerow__pct-lead { color: var(--ink-3); font-family: var(--f-util); font-size: 11px; }
.leaguerow--stale { background: color-mix(in srgb, var(--warn) 6%, transparent); }
.leaguerow--stale:hover { background: color-mix(in srgb, var(--warn) 8%, transparent); }
.leaguerow__stale-dot {
display: inline-flex; align-items: center; justify-content: center;
width: 15px; height: 15px; border-radius: 50%; margin-left: 5px;
background: var(--warn); color: #0a0702; font-size: 10px; font-weight: 800;
vertical-align: middle; transform: translateY(-1px);
}
@media screen and (max-width: 720px) {
.leaguerow { grid-template-columns: 26px 34px 1fr 56px; }
.leaguerow__word, .leaguerow__bar { display: none; }
.league__head .leaguerow__pct-lead { display: none; }
}
/* the ticker - a slow breath of the work */
.tickerwrap { margin-top: 26px; }
.ticker {
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
padding: 14px 2px; color: var(--ink-2); font-size: 15px; line-height: 1.5;
}
.ticker__kicker {
font-family: var(--f-util); text-transform: uppercase; letter-spacing: .14em; font-size: 11px;
color: var(--gold); border: 1px solid var(--brass-3); border-radius: 20px; padding: 2px 10px;
flex: 0 0 auto; background: color-mix(in srgb, var(--gold) 5%, transparent);
}
.ticker__text b { color: var(--gold-2); }
/* the workshop strip - the directory demoted to a compact row */
/* H2 - the workshop reads as nine doors, each saying what is behind it.
These were name-only pills, which left the Card Forge and the Deck
Generator indistinguishable without opening both. A pill has nowhere to
put a sentence, so they are cards. */
.quicklinks {
display: grid; gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr));
}
.quicklink {
display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
padding: 13px 15px 14px; text-align: left; width: 100%;
background: color-mix(in srgb, var(--bg) 92%, var(--gold) 2%);
border: 1px solid var(--line); border-radius: 9px; cursor: pointer; color: var(--ink-2);
font-family: var(--f-util); font-size: 14px; letter-spacing: .03em;
}
.quicklink:hover { border-color: var(--brass-3); }
.quicklink__top { display: flex; align-items: center; gap: 9px; width: 100%; }
.quicklink__glyph {
display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
flex: 0 0 auto;
border: 1px solid var(--brass-3); border-radius: 7px; color: var(--gold); font-size: 13px;
}
.quicklink__name { color: var(--ink); font-size: 14.5px; }
.quicklink__blurb {
font-family: var(--f-body); font-size: 12.5px; line-height: 1.5;
letter-spacing: 0; color: var(--ink-3); text-wrap: pretty;
}
.quicklink:hover .quicklink__blurb { color: var(--ink-2); }
.quicklink__flag {
margin-left: auto; color: var(--gold); font-size: 10px;
text-transform: uppercase; letter-spacing: .1em;
}
.hub-last { margin-top: 18px; font-size: 13px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 10px; }
/* the command palette - navigation only */
.palette { display: flex; flex-direction: column; min-height: 0; max-height: 66vh; }
.palette__bar { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.palette__key { font-family: var(--f-util); font-size: 11px; letter-spacing: .12em; color: var(--gold); border: 1px solid var(--brass-3); border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.palette__input { flex: 1; }
.palette__list { overflow-y: auto; padding-top: 12px; }
.palette__group { font-family: var(--f-util); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--ink-3); padding: 12px 4px 5px; }
.palette__row {
display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; margin: 1px 0;
background: none; border: 0; border-radius: 8px; cursor: pointer; text-align: left; color: var(--ink-2);
}
.palette__row:hover, .palette__row:focus-visible { background: color-mix(in srgb, var(--gold) 7%, transparent); outline: none; }
.palette__glyph {
display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
border: 1px solid var(--brass-3); border-radius: 7px; color: var(--gold); font-family: var(--f-util); flex: 0 0 auto;
}
.palette__row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.palette__row-label { font-weight: 700; color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__row-hint { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__unlock {
flex: 0 0 auto; border-color: var(--gold); color: var(--gold);
}
.topbar__unlock:hover { background: var(--gold); color: var(--bg); }
/* ---------- hover card preview ---------- */
.hovercard {
position: fixed; z-index: 85; width: 284px;
pointer-events: none; display: none;
filter: drop-shadow(0 18px 30px rgba(0,0,0,.4));
background: var(--surface); border: 1px solid var(--line);
border-radius: 10px; overflow: hidden; padding: 8px;
}
.hovercard .mtgcard-wrap { width: 100%; max-width: none; }
.hovercard .mtgcard { transition: none; }
.hovercard__detail { padding: 9px 6px 3px; display: flex; flex-direction: column; gap: 8px; }
.hovercard__kws { display: flex; flex-wrap: wrap; gap: 5px; }
.hovercard__kw {
font-family: var(--f-util); text-transform: uppercase; letter-spacing: .09em; font-size: 9.5px;
padding: 3px 7px; border-radius: 999px; border: 1px solid var(--line);
background: var(--surface-2); color: var(--ink-2);
}
.hovercard__stats { display: flex; gap: 8px; }
.hovercard__stat { flex: 1 1 0; display: flex; flex-direction: column; gap: 1px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line-soft); background: var(--surface-2); }
.hovercard__stat-l { font-family: var(--f-util); text-transform: uppercase; letter-spacing: .12em; font-size: 9px; color: var(--ink-3); }
.hovercard__stat-v { font-family: var(--f-display); font-weight: 700; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
.hovercard.is-on { display: block; animation: hoverIn .18s ease; }
@keyframes hoverIn { from { opacity: 0; transform: translateY(5px); } }
@media (hover: none), (pointer: coarse) { .hovercard { display: none !important; } }
/* deck cards on the collection grid reach a little higher */
/* W2: the saturate lands at once rather than over 200ms - transitioning a
filter repaints the whole 112px panel on every frame of the fade, and the
effect is barely distinguishable applied instantly. */
.deckplate__art { height: 112px; }
.deckplate:hover .deckplate__art { filter: saturate(1.12); }
.empty .btn { margin-top: 12px; }
/* ---------- playtest report readability ---------- */
.reporthead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.reporthead__name { font-family: var(--f-display); font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.reportbanner {
display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px;
border: 1px solid var(--line); border-left: 4px solid; border-radius: var(--radius);
background: var(--surface); box-shadow: var(--shadow);
}
.reportbanner--works { border-left-color: var(--ok); }
.reportbanner--steady { border-left-color: var(--gold); }
.reportbanner--fallsdown { border-left-color: var(--bad); }
.reportbanner__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; }
.reportbanner--works .reportbanner__dot { background: var(--ok); }
.reportbanner--steady .reportbanner__dot { background: var(--gold); }
.reportbanner--fallsdown .reportbanner__dot { background: var(--bad); }
.reportbanner__t { display: block; font-family: var(--f-util); text-transform: uppercase; letter-spacing: .13em; font-size: 11.5px; color: var(--ink); margin-bottom: 3px; }
.reportbanner__l { display: block; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--f-util); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.legend__chip { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.legend__chip--a { background: var(--gold); }
.legend__chip--b { background: var(--surface-3); }
@media screen and (max-width: 580px) {
.topbar__crumb { display: none; }
}
/* ---------- mobile bottom toolbar ---------- */
.toolbar {
display: none;
position: fixed; bottom: 0; left: 0; right: 0; z-index: 55;
grid-template-columns: repeat(4, minmax(0, 1fr));
background: color-mix(in srgb, var(--surface) 92%, transparent);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
border-top: 1px solid var(--line-soft);
box-shadow: 0 -6px 16px rgba(0, 0, 0, .14);
padding-bottom: env(safe-area-inset-bottom, 0);
}
.toolbar__tab {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
min-height: 48px; padding: 8px 2px 7px; background: none; border: 0; cursor: pointer;
font-family: var(--f-util); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
color: var(--ink-3);
transition: color .15s ease;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.toolbar__glyph {
width: 22px; height: 22px; display: grid; place-items: center;
font-family: var(--f-display); font-weight: 700; font-size: 11px;
color: var(--ink-3); border: 1px solid var(--line); border-radius: 2px;
transition: transform .15s ease, color .15s ease, border-color .15s ease, background-color .15s ease;
}
.toolbar__tab:hover { color: var(--ink); }
.toolbar__tab:hover .toolbar__glyph { transform: translateY(-2px); border-color: var(--gold); }
.toolbar__tab:active .toolbar__glyph { transform: translateY(1px); }
.toolbar__tab.is-active { color: var(--gold); }
.toolbar__tab.is-active .toolbar__glyph { color: var(--bg); border-color: var(--gold); background: var(--gold); }
@media screen and (max-width: 640px) {
.toolbar { display: grid; }
}
/* ============================================================
design pass — banner tag, reduced motion, layout density
============================================================ */
/* colour-identity dots on the deck banner art (reuse deckplate dots) */
.banner__tag .deckplate__id { width: 15px; height: 15px; }
/* a touch of printed-paper texture on card faces */
.mtgcard { --grain: url("data:image/svg+xml;utf8,"); }
.mtgcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none; background-image: var(--grain); mix-blend-mode: overlay; }
.mtgcard--foil::after { z-index: 3; mix-blend-mode: overlay; }
/* layout density — tighter comfortable desktop rhythm */
.cardlist { grid-template-columns: repeat(auto-fill, minmax(min(100%, 288px), 1fr)); }
@media screen and (min-width: 1600px) {
.cardlist { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.deckgrid { grid-template-columns: repeat(auto-fill, minmax(222px, 1fr)); }
}
/* consistent, respectful motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================
deck generator — living segment rows and sliders
============================================================ */
.agslider {
display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 16px;
align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line-soft);
}
.agslider:last-child { border-bottom: 0; }
.agslider .label { font-size: 12px; color: var(--ink-2); }
.ags-bp {
font-size: 9px; padding: 1px 6px; letter-spacing: .08em; vertical-align: 1px;
margin-left: 4px; color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent);
}
.agslider input[type="range"] {
grid-column: 1 / -1;
-webkit-appearance: none; appearance: none;
width: 100%; height: 5px; border-radius: 999px;
background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 40%, transparent), var(--surface-3));
border: 1px solid var(--line); outline: none; cursor: pointer;
}
.agslider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 16px; height: 16px; border-radius: 50%;
background: linear-gradient(180deg, var(--surface), var(--surface-3));
border: 1px solid var(--brass-3); cursor: pointer;
box-shadow: 0 0 0 3px var(--gold-glow), inset 0 1px 0 #fff, var(--shadow);
transition: transform .12s ease, box-shadow .12s ease;
}
.agslider input[type="range"]::-webkit-slider-thumb:hover {
transform: scale(1.15);
box-shadow: 0 0 0 5px var(--gold-glow), inset 0 1px 0 #fff, var(--shadow-lift);
}
.agslider input[type="range"]::-moz-range-thumb {
width: 16px; height: 16px; border-radius: 50%;
background: linear-gradient(180deg, var(--surface), var(--surface-3));
border: 1px solid var(--brass-3); cursor: pointer;
box-shadow: 0 0 0 3px var(--gold-glow), inset 0 1px 0 #fff, var(--shadow);
}
.agslider input[type="range"]::-moz-range-track {
height: 5px; border-radius: 999px;
background: color-mix(in srgb, var(--gold) 40%, var(--surface-3));
}
.agslider input[type="range"]:focus-visible { outline: none; }
.agslider input[type="range"]:focus-visible::-webkit-slider-thumb {
box-shadow: 0 0 0 5px var(--gold-glow), 0 0 0 1.5px var(--brass-2), inset 0 1px 0 #fff, var(--shadow-lift);
}
/* ============================================================
PIN GATE — full-screen lock until the day key is entered
============================================================ */
.pingate {
display: flex; align-items: center; justify-content: center;
min-height: 100vh;
min-height: 100dvh;
min-height: 100svh;
padding: max(20px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
max(20px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
background: var(--bg);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
}
.pingate__card {
text-align: center;
max-width: 400px; width: 100%;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lift);
padding: 48px 36px 40px;
}
.pingate__mark {
width: 64px; height: 64px;
margin: 0 auto 20px;
border-radius: 50%;
background: linear-gradient(145deg, var(--brass-1), var(--brass-2), var(--brass-3));
color: var(--brass-ink);
font: 700 28px/64px var(--f-display);
box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 2px 8px rgba(0,0,0,.15);
}
.pingate__title {
font: 600 24px/1.2 var(--f-display);
color: var(--ink); margin: 0 0 10px;
}
.pingate__sub {
font: 400 15px/1.5 var(--f-body);
color: var(--ink-2); margin: 0 0 28px;
}
.pingate__form {
display: flex; flex-direction: column; gap: 10px; justify-content: center;
align-items: stretch;
}
.pingate__input {
width: 100%; text-align: center;
font: 500 18px/1.2 var(--f-util);
letter-spacing: 4px;
border-radius: var(--radius);
min-height: 48px;
}
.pingate__go {
flex-shrink: 0;
width: 100%;
min-height: 48px;
}
.pingate__err {
font: 500 13px/1 var(--f-util);
color: var(--bad);
min-height: 18px;
margin: 12px 0 0;
}
@media (prefers-reduced-motion: reduce) {
.pingate__mark { animation: none; }
}
@media (max-width: 640px) {
.pingate { align-items: flex-start; }
.pingate__card { padding: 28px 18px 24px; margin: auto 0; }
.pingate__mark { width: 52px; height: 52px; font: 700 22px/52px var(--f-display); margin-bottom: 14px; }
.pingate__title { font-size: 20px; }
.pingate__sub { font-size: 14.5px; margin: 0 0 18px; }
.pingate__form { flex-direction: column; align-items: stretch; }
.pingate__input {
width: 100%; text-align: center; letter-spacing: 3px;
font-size: 18px; min-height: 48px; padding: 12px 14px;
}
.pingate__go { width: 100%; min-height: 48px; }
}
@media (max-width: 480px) {
.pingate__card { padding: 24px 16px 22px; }
}
/* ---------------------------------------------------------------
first-paint shell. Lived inline in index.html until the Content
Security Policy - rightly - stopped honouring inline styles.
--------------------------------------------------------------- */
.bootshell { min-height: 100dvh; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 18px;
font-family: Cinzel, serif; }
.bootshell__mark { font-size: 30px; letter-spacing: .18em; color: var(--gold, #C4A03A);
text-transform: uppercase; }
.bootshell__mark i { font-style: normal; color: var(--brass-3, #7A5F1C); }
.bootshell__bar { width: 200px; height: 2px; background: var(--line-soft, #D8D2C0);
border-radius: 2px; overflow: hidden; }
.bootshell__bar span { display: block; width: 40%; height: 100%;
background: linear-gradient(90deg, var(--brass-1, #D8B45A), var(--gold, #C4A03A));
border-radius: 2px; animation: bootSlides 1.1s ease-in-out infinite; }
.bootshell__label { font-family: Barlow Condensed, sans-serif; text-transform: uppercase;
letter-spacing: .22em; font-size: 11px; color: var(--ink-3, #8B8678); }
@keyframes bootSlides { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) { .bootshell__bar span { animation: none; width: 100%; } }
/* ---------------------------------------------------------------
the power assessment. The reading comes first and large; every
measurement carries the sentence that stops it being misread.
--------------------------------------------------------------- */
.assess__head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.assess__score { font-family: var(--f-display); font-size: 46px; font-weight: 800; line-height: 1; }
.assess__outof { font-size: 17px; font-weight: 600; color: var(--ink-3); }
.assess__label { flex: 1 1 260px; }
.assess__bracket { font-family: var(--f-display); font-size: 19px; font-weight: 700; color: var(--ink); }
.assess__verdict { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.assess__layer { padding-top: 14px; border-top: 1px solid var(--line-soft); }
.assess__name {
font-family: var(--f-util); text-transform: uppercase; letter-spacing: .14em;
font-size: 11.5px; color: var(--ink-2);
}
.assess__figure { font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.assess__track {
display: block; height: 8px; margin: 8px 0 10px; border-radius: 6px;
background: var(--surface-3); overflow: hidden;
}
.assess__fill { display: block; height: 100%; border-radius: 6px; }
.assess__means { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.assess__not { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.assess__not b { color: var(--ink-2); }
.assess__conf { padding-top: 14px; border-top: 1px solid var(--line-soft); }
.assess__how { padding-top: 12px; border-top: 1px solid var(--line-soft); }
.assess__how summary {
cursor: pointer; font-family: var(--f-util); text-transform: uppercase;
letter-spacing: .12em; font-size: 11px; color: var(--ink-3);
}
.assess__how summary:hover { color: var(--gold); }
.assess__how p { margin-top: 8px; }
@media (max-width: 560px) { .assess__score { font-size: 38px; } }
/* ---------------------------------------------------------------
the shelf. Names on the left where a list belongs, the deck
itself on the right where there is room for it.
--------------------------------------------------------------- */
.shelf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 26px; align-items: start; }
.shelf__list { min-width: 0; }
.shelf__group + .shelf__group { margin-top: 22px; }
.shellempty {
font-family: var(--f-util); font-size: 11.5px; letter-spacing: .02em;
color: var(--ink-3); padding: 10px 12px; border: 1px dashed var(--line-soft);
border-radius: var(--radius); background: var(--surface-1);
}
.shelf__side {
position: sticky; top: 74px; min-width: 0;
/* never taller than what is on screen - a sticky panel that overflows
the window hangs its bottom half somewhere unreachable */
}
.deckrow {
width: 100%; display: flex; align-items: center; gap: 12px;
padding: 9px 12px; margin-top: 2px; text-align: left; cursor: pointer;
background: transparent; border: 1px solid transparent;
border-radius: var(--radius); color: var(--ink);
transition: background-color .14s ease, border-color .14s ease;
}
.deckrow:hover { background: var(--surface-2); border-color: var(--line-soft); }
.deckrow.is-on { background: var(--surface-2); border-color: var(--brass-3); }
.deckrow.is-on .deckrow__name { color: var(--gold); }
.deckrow__ci { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.deckrow__main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.deckrow__name {
font-family: var(--f-display); font-weight: 600; font-size: 15px; line-height: 1.2;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.deckrow__cmd {
font-size: 12px; color: var(--ink-3); line-height: 1.3;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.deckrow__n {
font-family: var(--f-util); font-size: 11px; color: var(--ink-3);
font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.peek {
border: 1px solid var(--line); border-radius: var(--radius-lg);
background: var(--surface); box-shadow: var(--shadow); overflow: hidden;
display: flex; flex-direction: column;
/* the constraint lives here, not on the sticky wrapper: a percentage
max-height cannot resolve against a parent whose height is auto */
max-height: calc(100vh - 92px);
}
/* the card and the numbers scroll; the way in does not */
.peek__scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; scrollbar-width: thin; }
.peek__scroll::-webkit-scrollbar { width: 8px; }
.peek__scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.peek__foot {
flex: 0 0 auto; padding: 12px 20px; border-top: 1px solid var(--line-soft);
background: var(--surface-2);
}
.peek__foot .btn { width: 100%; }
.peek__card { padding: 20px 20px 0; display: flex; justify-content: center; }
.peek__art { height: 210px; background-size: cover; background-position: center; }
.peek__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 9px; }
.peek__name { font-family: var(--f-display); font-size: 23px; font-weight: 700; margin: 0; line-height: 1.15; }
.peek__cmd { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.peek__theme { margin: 0; font-size: 13px; color: var(--ink-3); font-style: italic; }
.peek__nums { display: flex; gap: 20px; padding: 10px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.peek__nums div { display: flex; flex-direction: column; }
.peek__nums b { font-family: var(--f-display); font-size: 19px; line-height: 1; color: var(--ink); }
.peek__nums span { font-family: var(--f-util); text-transform: uppercase; letter-spacing: .1em; font-size: 9.5px; color: var(--ink-3); margin-top: 3px; }
.peek__verdict { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 900px) {
.shelf { grid-template-columns: 1fr; }
.shelf__side { position: static; order: -1; }
}
/* the reading, in a word */
.assess__word {
font-family: var(--f-display); font-size: 30px; font-weight: 800;
line-height: 1; letter-spacing: .01em; flex: 0 0 auto;
}
.assess__stale {
padding: 11px 14px; border-radius: var(--radius);
border: 1px solid var(--warn); border-left-width: 3px;
background: color-mix(in srgb, var(--warn) 9%, transparent);
font-size: 13px; line-height: 1.55; color: var(--ink-2);
}
.assess__stale b { color: var(--ink); }
.assess__stale .btn { margin-left: 6px; vertical-align: baseline; }
/* ---------------------------------------------------------------
D6: is this fair for my playgroup?
The legibility strip comes before any claim about the deck, so it
is styled to be read rather than skipped: one bar, one card per
unit of width, with the colours keyed to how readable each part is.
--------------------------------------------------------------- */
.fair__leg { padding-top: 14px; border-top: 1px solid var(--line-soft); }
.fair__legbar {
display: flex; width: 100%; height: 10px; margin: 9px 0 0;
border-radius: 6px; overflow: hidden; background: var(--line-soft);
}
.fair__legbar > span { display: block; min-width: 2px; }
.fair__keys { margin: 8px 0 10px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.fair__key {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.fair__key i { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
/* the cards that made a line say what it says - named, so a wrong
one is visible and correctable rather than buried in the count */
.fair__cards { margin: 8px 0 9px; display: flex; flex-wrap: wrap; gap: 5px; }
.fair__cards span {
display: inline-block; padding: 2px 8px; border-radius: 999px;
border: 1px solid var(--line-soft); background: var(--surface-2, transparent);
font-size: 12px; line-height: 1.5; color: var(--ink-2);
}
@media (max-width: 560px) {
.fair__cards span { font-size: 11.5px; padding: 2px 7px; }
}
/* G4: the reason a card was rolled, on the card itself */
.agcard__why {
display: block; margin-top: 5px; padding: 0 2px;
font-size: 11px; line-height: 1.4; color: var(--ink-3);
text-align: center; text-wrap: balance;
}
.agcard:hover .agcard__why { color: var(--ink-2); }
/* ---------------------------------------------------------------
Card Forge: choosing a frame, and seeing the card you are making.
The previews are drawn from the same primitives the renderer uses,
so the little one tells the truth about the big one.
--------------------------------------------------------------- */
.framepick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.framepick__opt {
display: flex; flex-direction: column; gap: 6px; padding: 10px;
text-align: left; cursor: pointer; color: var(--ink);
background: var(--surface-2); border: 1px solid var(--line);
border-radius: var(--radius); transition: border-color .15s ease, transform .15s ease;
}
.framepick__opt:hover { border-color: var(--brass-3); transform: translateY(-2px); }
.framepick__opt.is-on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.framepick__name { font-family: var(--f-display); font-weight: 600; font-size: 14px; }
.framepick__blurb { font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
/* a 63x88 thumbnail of each layout, drawn in CSS */
.framepick__mini {
display: block; width: 100%; aspect-ratio: 63 / 88; max-width: 74px;
border-radius: 4px; border: 1px solid rgba(0,0,0,.4);
background: linear-gradient(135deg, #6F6A5C, #3B372F);
position: relative; overflow: hidden;
}
.framepick__mini::before, .framepick__mini::after { content: ""; position: absolute; }
/* regular: window of art, then a text block */
.framepick__mini--regular::before {
inset: 12% 10% 42% 10%; background: #C9BFA6; border-radius: 1px;
}
.framepick__mini--regular::after {
inset: 62% 10% 10% 10%; background: #EFE7D6; border-radius: 1px;
}
/* full art: art everywhere, panels floating on it */
.framepick__mini--fullart::before {
inset: 0; background: linear-gradient(160deg, #B9A87E, #6A5A3C);
}
.framepick__mini--fullart::after {
inset: 64% 8% 8% 8%; background: rgba(12,12,16,.66); border-radius: 1px;
}
/* borderless: art everywhere, only a whisper of text */
.framepick__mini--borderless::before {
inset: 0; background: linear-gradient(160deg, #A8956B, #4E4432);
}
.framepick__mini--borderless::after {
inset: 72% 12% 12% 12%; background: rgba(255,255,255,.30); border-radius: 1px;
}
/* textless: art and a name */
.framepick__mini--textless::before {
inset: 0; background: linear-gradient(160deg, #9E8F6A, #453D2C);
}
.framepick__mini--textless::after {
inset: 6% 8% 84% 8%; background: rgba(12,12,16,.6); border-radius: 1px;
}
.paintchip {
display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
padding: 5px 9px 5px 5px; border-radius: 999px;
border: 1px solid var(--line); background: var(--surface-2);
color: var(--ink-2); font-size: 11.5px; font-family: var(--f-util);
letter-spacing: .04em; transition: border-color .15s ease, color .15s ease;
}
.paintchip span { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0,0,0,.35); }
.paintchip:hover { border-color: var(--brass-3); color: var(--ink); }
.paintchip.is-on { border-color: var(--gold); color: var(--gold); }
.forgepreview {
max-width: 340px; margin: 0 auto;
filter: drop-shadow(0 10px 26px rgba(0,0,0,.45));
}
.forgepreview canvas { width: 100%; height: auto; display: block; }
/* ---- card forge: collapsed roles / keyword pickers ----
The redesigned toggles fold the long lists behind collapsible groups.
"Selected" chips sit in a removable row up top; the pool is a search box
+ accordion groups. No wall of words. */
.collapsed-col { flex: 1 1 280px; min-width: 240px; }
.collapsed { position: relative; }
.chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip-sel {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--surface));
color: var(--ink); font-family: var(--f-util); font-size: 11px; letter-spacing: .04em;
}
.chip-sel:hover { border-color: var(--brass-3); }
.collapsed__filter { margin-bottom: 8px; }
.collapsed__filter .field { width: 100%; }
.chipbox { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
.chip-toggle {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--line); background: var(--surface);
color: var(--ink-2); font-family: var(--f-util); font-size: 11px;
letter-spacing: .03em; transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}
.chip-toggle:hover { border-color: var(--brass-3); color: var(--ink); }
.chip-toggle.is-on {
border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--surface)); color: var(--ink);
}
.chipgroup { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; overflow: hidden; }
.chipgroup__head {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 8px 10px; cursor: pointer; background: var(--surface);
border: 0; color: var(--ink); font-family: var(--f-util); font-size: 11.5px;
letter-spacing: .05em; text-transform: uppercase; text-align: left;
}
.chipgroup__head:hover { background: color-mix(in srgb, var(--brass-3) 12%, var(--surface)); }
.chipgroup__caret { color: var(--gold); font-size: 9px; }
.chipgroup__count { margin-left: auto; color: var(--ink-2); font-size: 10.5px; }
.chipgroup .chipbox { padding: 4px 10px 10px; }
/* the theme picker + manager */
.theme-stack { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow: auto; }
.theme .row { gap: 8px; }
.field--read {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px; border-radius: 6px; border: 1px dashed var(--line);
color: var(--ink-2); font-family: var(--f-util); font-size: 11.5px;
}
/* generated candidates read like the card library: a row list that hovers
into a card and clicks into a popup */
.gencardrow { cursor: pointer; }
.gencardrow:hover .cardrow__n { color: var(--gold); }
/* ---------------------------------------------------------------
A card is 63 x 88 mm and stays that shape. Flex items default to
min-height: auto - "never shrink below my contents" - which let the
name and type bars force the card 33px taller than the ratio it
asked for, so every card on screen was narrower than a real one.
--------------------------------------------------------------- */
.mtgcard > * { min-height: 0; }
.mtgcard .mtgbar,
.mtgcard__setline { min-height: 0; flex-shrink: 1; }
/* long rules text shrinks to fit rather than stretching the card; the
print renderer does the same thing properly by re-measuring the type */
.mtgcard__text { min-height: 0; overflow: hidden; }
/* ---------------------------------------------------------------
the generation panel. Controls grouped by the question they
answer, and candidates laid out so several can be compared at
once rather than read one at a time down a column.
--------------------------------------------------------------- */
.genfield { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.genfield .util { line-height: 1.35; }
.genfield--inline { flex: 0 0 auto; width: 110px; }
.genfield--inline .label { font-size: 10px; }
.genpair { display: flex; align-items: center; gap: 8px; }
.genpair .field { min-width: 0; }
.genpair__to {
font-family: var(--f-util); font-size: 10.5px; text-transform: uppercase;
letter-spacing: .1em; color: var(--ink-3); flex: 0 0 auto;
}
.genchips { display: flex; flex-wrap: wrap; gap: 6px; }
.genchip {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--line); background: var(--surface);
color: var(--ink-2); font-family: var(--f-util); font-size: 11.5px;
letter-spacing: .06em; text-transform: uppercase;
transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}
.genchip:hover { border-color: var(--brass-3); color: var(--ink); }
.genchip.is-on {
border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--surface));
color: var(--ink);
}
.genchip--sm { font-size: 10.5px; padding: 4px 9px; text-transform: none; letter-spacing: .02em; }
.genchip--out { opacity: .42; }
.genchip--out.is-on { opacity: 1; border-color: var(--warn); }
.gengrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); gap: 12px; }
.gencard { display: flex; }
.gencard__name { font-family: var(--f-display); font-size: 15px; line-height: 1.2; }
.gencard__type { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.gencard__type b { font-variant-numeric: tabular-nums; }
.gencard__kw { margin: 0; font-size: 11.5px; color: var(--ink-3); font-style: italic; }
.gencard__rules {
border-top: 1px solid var(--line-soft); padding-top: 8px; margin-top: 2px;
font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
}
.gencard__rules p { margin: 0 0 6px; }
.gencard__rules p:last-child { margin-bottom: 0; }
@media (max-width: 620px) {
.gengrid { grid-template-columns: 1fr; }
.genpair { flex-wrap: nowrap; }
}
/* ---------------------------------------------------------------
design faults: the part of the playtest that names cards and
says why, rather than reporting arithmetic back at you.
--------------------------------------------------------------- */
.fault {
border: 1px solid var(--line); border-left: 3px solid var(--gold);
border-radius: var(--radius); padding: 13px 16px; background: var(--surface-2);
}
.fault--cost { border-left-color: var(--warn); }
.fault--theme { border-left-color: var(--gold); }
.fault--liability { border-left-color: var(--bad, #A63C2E); }
.fault--wincon { border-left-color: var(--ok); }
.fault__head {
margin: 0 0 6px; font-family: var(--f-display); font-size: 15px;
font-weight: 700; color: var(--ink); line-height: 1.25;
}
.fault__body { margin: 0 0 9px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.fault__cards { margin: 0; padding-left: 18px; }
.fault__cards li {
font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin-bottom: 2px;
}
.fault__more { list-style: none; margin-left: -18px; color: var(--ink-3); font-style: italic; }
/* the mana chart carries its own numbers now, so it needs the room */
.chart--tall { height: 168px; }
.chart__of { color: var(--ink-3); font-weight: 400; }
.chart__waste { display: block; font-size: 9.5px; color: var(--warn); line-height: 1.1; }
/* ---------------------------------------------------------------
the card library: a family is a shelf of cards, not a list of
names, cut into legendaries / creatures / tokens.
--------------------------------------------------------------- */
.libgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 14px; }
.libcard {
display: block; padding: 0; border: 0; background: none; cursor: pointer;
border-radius: var(--radius); transition: transform .16s cubic-bezier(.2,.7,.3,1.2);
}
.libcard:hover { transform: translateY(-4px); }
.libcard:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.libcard--blank {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px; aspect-ratio: 63 / 88; text-align: center; padding: 14px;
border: 1px dashed var(--line); background: var(--surface-2); color: var(--ink-3);
}
.libcard__name {
font-family: var(--f-display); font-size: 14px; line-height: 1.25; color: var(--ink-2);
}
@media (max-width: 520px) {
.libgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
}
/* the commander's own text, on the deck overview */
.cmdrules p { margin: 0 0 6px; font-size: 13px; line-height: 1.55; }
.cmdrules p:last-child { margin-bottom: 0; }
.cmdflavour { font-style: italic; color: var(--ink-3); font-size: 12.5px; line-height: 1.5; }
.linkish {
border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
color: var(--gold); text-decoration: underline; text-underline-offset: 2px;
}
.linkish:hover { color: var(--ink); }
/* ---------------------------------------------------------------
the deck generator: typed section counts, and a roll you can see
--------------------------------------------------------------- */
.agnum { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.agnum__row { display: flex; align-items: center; gap: 7px; }
.agnum__row .field { width: 82px; flex: 0 0 auto; }
.agnum__unit {
font-family: var(--f-util); font-size: 10.5px; text-transform: uppercase;
letter-spacing: .1em; color: var(--ink-3);
}
.agnum__off { color: var(--warn); }
.agcard { position: relative; }
.agcard__src {
position: absolute; top: 6px; right: 6px; z-index: 4;
font-family: var(--f-util); font-size: 9px; text-transform: uppercase;
letter-spacing: .1em; padding: 2px 6px; border-radius: 999px;
background: rgba(10,12,10,.72); color: #fff; border: 1px solid rgba(255,255,255,.24);
}
.agcard__src--real { background: rgba(58,115,67,.85); }
/* ---------- matchups that follow the deck (D8/D9) ---------- */
/* the table sits between two prose blocks, not inside one, so it repeats
what `.prose table` would have given it */
.mutable { border-collapse: collapse; font-size: 13.5px; width: 100%; }
.mutable th, .mutable td { border-bottom: 1px solid var(--line-soft); padding: 7px 11px; text-align: left; vertical-align: top; }
.mutable thead th { font-family: var(--f-util); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; color: var(--ink-3); font-weight: 500; background: var(--surface-2); white-space: nowrap; }
.mutable tbody th { font-family: var(--f-util); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; color: var(--ink-3); font-weight: 500; white-space: nowrap; width: 30%; }
.mutable td { color: var(--ink); }
.mutable tbody tr:last-child th, .mutable tbody tr:last-child td { border-bottom: 0; }
.mutable + .util, .mutable ~ .util { color: var(--ink-3); }
.matchtable { overflow-x: auto; margin: 0 0 1.1em; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
/* what the essay said, kept beside what the deck says now */
.drift { color: var(--warn); white-space: nowrap; font-size: 10.5px; }
/* the banner that names every figure that has moved */
.callout { border: 1px solid var(--line); border-left: 2px solid var(--gold); background: var(--surface); border-radius: var(--radius); padding: 13px 17px; margin: 0 0 14px; }
.callout p { margin: 0 0 8px; font-size: 14px; color: var(--ink-2); }
.callout ul { margin: 0; padding-left: 18px; }
.callout li { font-size: 13.5px; color: var(--ink-2); margin: 2px 0; }
.callout li s { color: var(--ink-3); }
.callout--warn { border-left-color: var(--warn); }
/* D9 - our half of the matchup, computed */
.ownside { margin-bottom: 6px; }
.ownside__row { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.ownside__stat { display: flex; flex-direction: column; gap: 1px; min-width: 84px; }
.ownside__n { font-family: var(--f-display); font-size: 20px; font-weight: 600; letter-spacing: .02em; color: var(--ink); line-height: 1.1; }
.ownside .util { font-size: 10.5px; }
.ownside p.small { margin: 0; color: var(--ink-2); }
@media (max-width: 620px) {
.ownside__row { gap: 10px 18px; }
.ownside__stat { min-width: 70px; }
.ownside__n { font-size: 17px; }
.mutable tbody th { width: auto; }
}
/* ---------- Paper Decks as cards (R1) ---------- */
/* a paper list can hold ten Mountains; the card is drawn once and the
count sits on it, rather than ten identical frames */
.libcard { position: relative; }
.qtybadge { position: absolute; top: 6px; right: 6px; z-index: 2; font-family: var(--f-util); font-size: 11px; letter-spacing: .06em; line-height: 1; padding: 4px 6px; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(0,0,0,.28); }
/* ===============================================================
W2 - MOTION
Brass and stone do not bounce. Everything here is weight
settling, or light travelling across engraved metal: ease-out,
no overshoot, no elastic. The palette sets the brief.
Two rules hold the whole layer together, and both exist because
this site is read on a machine with a few hundred megabytes of
headroom:
1. Only `transform` and `opacity` animate, plus
`background-position` on elements a couple of pixels tall.
Nothing animates a filter, a blur, a shadow or a layout
property, and nothing animates across a full-viewport area.
2. No `will-change` anywhere. It buys smoothness by promoting an
element to its own compositor layer, and a layer is memory.
A dozen of them is tens of megabytes for motion nobody asked
to pay for.
Ambient motion also stops when the tab is hidden - see
`body.motion-off`, set from the visibilitychange handler.
=============================================================== */
:root {
--m-press: 110ms; /* a key going down */
--m-base: 220ms; /* a hover, a lift */
--m-settle: 360ms; /* a panel arriving */
--m-page: 460ms; /* a view changing */
--m-ambient: 18s; /* brass catching the light */
/* the easing the site already used, now named, plus two siblings */
--e-settle: cubic-bezier(.2, .75, .3, 1);
--e-strike: cubic-bezier(.16, .9, .24, 1);
--e-press: cubic-bezier(.4, 0, .6, 1);
}
/* ---------- expressive typography -------------------------------
A display title is struck rather than faded in: the letters close
up to their proper spacing as the ink lands. Only transform and
opacity move; letter-spacing is animated on a short one-shot at
mount, where a single relayout of one line is affordable. */
@keyframes strikeIn {
from { opacity: 0; letter-spacing: .16em; transform: translateY(6px); }
to { opacity: 1; letter-spacing: normal; transform: none; }
}
.display, h1.display {
animation: strikeIn var(--m-page) var(--e-strike) backwards;
}
/* section headings get the quieter version of the same idea */
@keyframes settleIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
.section { animation: settleIn var(--m-settle) var(--e-settle) backwards; }
/* ---------- ambient: brass catching the light -------------------
The gold rules are 2px tall. A gradient sliding along one is a
paint of a few hundred pixels, which is the whole reason the
ambient motion lives here rather than on a background blob. */
.rule--gold {
background-size: 220% 100%;
background-position: 0% 0;
animation: brassSheen var(--m-ambient) linear infinite;
}
@keyframes brassSheen {
0% { background-position: 0% 0; }
50% { background-position: 100% 0; }
100% { background-position: 0% 0; }
}
/* an accent that reads as lit metal - used on primary buttons */
.btn--primary {
background-size: 180% 100%;
transition: background-position var(--m-base) var(--e-settle),
transform var(--m-press) var(--e-press),
box-shadow var(--m-base) var(--e-settle);
}
.btn--primary:hover { background-position: 100% 0; }
/* ---------- hover: a lift, and an edge catching light ----------- */
.btn, .libcard, .plate, .hit, .tab, .quicklink {
transition: transform var(--m-base) var(--e-settle),
box-shadow var(--m-base) var(--e-settle),
border-color var(--m-base) var(--e-settle),
background-color var(--m-base) var(--e-settle),
color var(--m-base) var(--e-settle);
}
.btn:hover, .tab:hover { transform: translateY(-1px); }
.libcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.quicklink:hover { transform: translateY(-2px); }
/* ---------- press: the neumorphic note --------------------------
Engraved, not squishy. The control sinks a hair and the lift
shadow is replaced by an inset, so it reads as pressed into
stone rather than as a bouncing button. */
.btn:active, .tab:active, .libcard:active, .cardrow:active, .quicklink:active {
transform: translateY(1px) scale(.995);
box-shadow: inset 0 1px 3px rgba(25, 28, 24, .22),
inset 0 -1px 0 rgba(255, 255, 255, .05);
transition-duration: var(--m-press);
}
/* ---------- animated icons -------------------------------------- */
.chip__dot { animation: pulse 2.6s var(--e-press) infinite; }
/* the written-up mark on a card row breathes only while hovered,
so a hundred-row list is still a static page at rest */
.cardrow:hover .cardrow__mark { animation: pulse 1.6s var(--e-press) infinite; }
/* ---------- loading: a sheen passing over ----------------------- */
.is-loading {
position: relative;
overflow: hidden;
color: transparent;
}
.is-loading::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, var(--gold-glow) 45%, transparent);
transform: translateX(-100%);
animation: sheen 1.15s var(--e-settle) infinite;
}
@keyframes sheen {
to { transform: translateX(100%); }
}
/* ---------- page transitions ------------------------------------
The staggered `.enter` already carried this; it keeps its timing
and gains the named easing. Where the browser supports view
transitions the whole swap crossfades instead, which is one
compositor operation rather than a dozen element animations. */
@media (prefers-reduced-motion: no-preference) {
::view-transition-old(root) { animation: vtOut var(--m-page) var(--e-settle) both; }
::view-transition-new(root) { animation: vtIn var(--m-page) var(--e-settle) both; }
}
@keyframes vtOut { to { opacity: 0; transform: translateY(-4px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(6px); } }
/* ---------- the two global gates -------------------------------- */
/* nothing ambient runs while the tab is in the background: a site
left open in a tab should cost nothing to leave open */
body.motion-off .rule--gold,
body.motion-off .chip__dot,
body.motion-off .is-loading::after,
body.motion-off .cardrow__mark {
animation-play-state: paused;
}
/* and the whole layer answers to the system setting */
@media (prefers-reduced-motion: reduce) {
.display, h1.display, .section,
.rule--gold, .chip__dot, .cardrow:hover .cardrow__mark,
.is-loading::after {
animation: none !important;
}
.rule--gold { background-position: 0 0; }
.btn:hover, .tab:hover, .libcard:hover { transform: none; }
.btn:active, .tab:active, .libcard:active, .cardrow:active, .quicklink:active {
transform: none;
box-shadow: none;
}
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
/* ===============================================================
The full-art card face.
The old frame stacked six opaque bars down a parchment panel and
gave the picture a small window in the middle. This makes the
picture the card and lays the type over it, which is what a modern
showcase frame does - and what the reference does.
Costs are kept where the rest of the site keeps them: no blur
filters (a backdrop-filter on a card grid is the most expensive
thing on the page), no will-change, and the ornament is one small
inline SVG reused at four corners rather than four images.
=============================================================== */
.fullcard {
position: relative;
width: 100%;
aspect-ratio: 63 / 88;
border-radius: 4.4% / 3.2%;
overflow: hidden;
isolation: isolate;
background:
linear-gradient(160deg,
color-mix(in srgb, var(--fa) 82%, #05060a) 0%,
color-mix(in srgb, var(--fb, var(--fa)) 74%, #05060a) 100%);
box-shadow:
0 0 0 1px rgba(0, 0, 0, .85),
0 18px 44px -18px rgba(0, 0, 0, .8);
color: #F4EFE2;
font-family: var(--f-body);
container-type: inline-size;
/* Every plate on the face reads from these three, so the name plate, the
type plate and the rules box cannot drift apart again - they did, and
the rules box was fixed on its own while the other two stayed opaque
slabs sitting on the picture.
The wash was measured off the MTGCardsmith full-art he chose as the
reference: its rules box keeps about 66% of what is behind it, so this
is .34, not the .89 slab that was here.
At that alpha the fill cannot carry the text - the halo does. Drop the
halo and every plate becomes unreadable at once, which is why
test_cardface.js checks all three for both. */
--plate: linear-gradient(180deg, rgba(10, 8, 6, .50), rgba(10, 8, 6, .40));
--plate-rules: linear-gradient(180deg, rgba(10, 8, 6, .48), rgba(10, 8, 6, .58));
--plate-edge: rgba(232, 206, 110, .58);
--plate-halo:
0 1px 1px rgba(0, 0, 0, 1),
0 0 3px rgba(0, 0, 0, .95),
0 0 8px rgba(0, 0, 0, .75),
0 0 14px rgba(0, 0, 0, .45);
}
/* ---- the picture, edge to edge ---- */
.fullcard__art {
position: absolute; inset: 0;
background-image: var(--art, none);
background-size: cover;
background-position: center 22%;
}
/* with no picture, the face is a deep heraldic wash rather than a hole */
.fullcard--bare .fullcard__art {
background-image:
radial-gradient(120% 80% at 50% 22%,
color-mix(in srgb, var(--fa) 60%, transparent) 0%, transparent 62%),
repeating-linear-gradient(135deg,
rgba(255, 255, 255, .028) 0 2px, transparent 2px 9px);
}
/* ---- legibility: dark at the two ends, clear across the middle ---- */
/* This used to run to .78 across the bottom of the card, and the rules
panel then painted .70-.80 of its own on top of it. Stacked, that is
about .94 - the artwork under the text box was erased before a word was
drawn, which is what made a full-art card pointless.
Nothing down there needs it. The title plate, the type plate and the
rules panel each carry their own background, and the footer sets a hard
text-shadow. The scrim was darkening the picture to help elements that
were already legible without it.
What is left is a vignette: enough to hold the card's edges against a
pale sky or a white background, not enough to hide what is behind it.
The panel keeps its own opacity, because that is a text box and has to
stay readable over artwork nobody has seen yet. */
.fullcard__scrim { display: none; }
/* ---- the brass edge ---- */
.fullcard__edge {
position: absolute; inset: 0;
border-radius: inherit;
padding: 2.6%;
background:
linear-gradient(150deg, var(--brass-1) 0%, var(--brass-2) 26%,
var(--brass-3) 48%, var(--brass-2) 72%, var(--brass-1) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5);
}
/* a hairline just inside the brass, the way a printed frame is ruled */
.fullcard__rule {
position: absolute; inset: 3.4%;
border: 1px solid rgba(232, 206, 110, .34);
border-radius: 2.4%;
}
/* ---- the four corner flourishes: one drawing, turned ---- */
.fullcard__orn {
position: absolute; width: 13%; aspect-ratio: 1;
background: no-repeat center/contain
url("data:image/svg+xml;utf8,");
pointer-events: none;
}
.fullcard__orn--tl { top: 2.4%; left: 2.4%; }
.fullcard__orn--tr { top: 2.4%; right: 2.4%; transform: scaleX(-1); }
.fullcard__orn--bl { bottom: 2.4%; left: 2.4%; transform: scaleY(-1); }
.fullcard__orn--br { bottom: 2.4%; right: 2.4%; transform: scale(-1); }
/* ---- everything readable sits in one column ---- */
/* Explicit bands, taken off the reference: the title sits at the top, the
picture owns the middle HALF of the card untouched, and the words live in
a strip near the bottom. A flex column let the rules text grow until only
a sliver of picture was left, which is exactly backwards - on a full-art
card the picture is the card. */
.fullcard__body {
position: absolute; inset: 0;
display: grid;
/* the picture's row is the only one allowed to give way. Everything else
is auto and must never be compressed below its content - an over-
constrained grid squashes auto rows, which is how the rules text came
to be cut off mid-sentence. */
grid-template-rows:
[title] auto
[art] minmax(0, 1fr)
[type] auto
[panel] auto
[foot] auto;
gap: 0;
padding: 3.4% 4.2% 2.6%;
}
/* The picture's floor, not its allowance. A card with two short lines -
like the reference - leaves the picture well over half the face. A card
with seventy-five words of rules takes more, and that is correct: a real
card does the same, which is why a vanilla creature has a big picture and
a wordy one does not. What must never happen is losing the words. */
.fullcard__gap { min-height: 0; }
.fullcard__title {
/* Cardsmith nameplate: opaque dark bar, gold rim, name left / cost right.
Codex keeps Cinzel and the pip glyphs; the chrome is the printed plaque. */
margin-bottom: 0;
display: flex; align-items: center; gap: 1.4%;
min-height: 7.8cqw;
height: auto;
padding: 0 1.3% 0 2.5%;
border-radius: 1.2cqw;
background: linear-gradient(180deg, rgba(10,8,6,.50), rgba(10,8,6,.40));
box-shadow:
0 0 0 0.2cqw rgba(232, 206, 110, .42),
inset 0 0.32cqw 0 rgba(255,255,255,.12);
}
.fullcard__name {
flex: 1 1 auto; min-width: 0;
font-family: var(--f-display);
font-size: 4.15cqw; font-weight: 700; letter-spacing: .04em;
line-height: 1;
color: #F3E6C4;
text-shadow: 0 1px 1px rgba(0, 0, 0, .9);
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
/* The pips are 13px everywhere else on the site, which is right at the size
a card is shown on screen and a third of the size it should be at print
width. Inside a card face they scale with the face, like the type does -
the export renders at 816px and the mana cost was coming out as three
grey specks. */
.pip.pip--svg {
background: none;
border: none;
color: transparent;
overflow: hidden;
padding: 0;
line-height: 0;
border-radius: 50%;
}
.pip.pip--svg svg,
.pip.pip--svg .pip__g {
display: block; width: 100%; height: 100%;
}
.fullcard .pip {
width: 6.4cqw; height: 6.4cqw;
font-size: 3.6cqw; line-height: 6.2cqw;
border: none;
box-shadow: 0 0.22cqw 0.4cqw rgba(0,0,0,.65);
}
.fullcard .pips .pip + .pip { margin-left: 0.28cqw; }
.fullcard .pip .pip__g {
display: block; width: 100%; height: 100%; margin: 0;
}
.fullcard--style-regular .fullcard__title .pip {
width: 6.6cqw; height: 6.6cqw;
}
.fullcard .fullcard__panel .pip {
width: 3.9cqw; height: 3.9cqw; font-size: 2.5cqw; line-height: 3.6cqw;
}
.fullcard__mana {
display: flex; gap: 0; flex: 0 0 auto;
align-items: center; align-self: center;
}
/* the type line, with the rarity lozenge at its end */
.fullcard__typeplate {
display: flex; align-items: center; gap: 1.4%;
height: 5.8cqw;
padding: 0 1.3% 0 2.5%;
margin: 0 0 1.0%;
border-radius: 1.2cqw;
background: linear-gradient(180deg, rgba(14,12,10,.62), rgba(10,8,6,.55));
box-shadow:
0 0 0 0.2cqw rgba(232, 206, 110, .38),
inset 0 0.28cqw 0 rgba(255, 230, 170, .12);
}
.fullcard__type {
flex: 1 1 auto; min-width: 0;
font-family: var(--f-display); font-weight: 600;
font-size: 3.6cqw; color: #F6F0DE; letter-spacing: .03em;
text-shadow: var(--plate-halo);
overflow: hidden; text-overflow: clip; white-space: nowrap;
}
.fullcard__typeplate { height: auto; min-height: 5.8cqw; }
.fullcard__set {
width: 5.4cqw; height: 6.4cqw; flex: 0 0 auto;
display: block;
background: none;
border-radius: 0;
transform: none;
box-shadow: none;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.7));
}
.fullcard__set svg { display: block; width: 100%; height: 100%; }
.fullcard__set--mythic { filter: drop-shadow(0 0 3px rgba(226, 90, 28, .85)) drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
/* the rules panel: translucent, never opaque, so the picture still reads */
.fullcard__panel {
position: relative;
/* The picture is the point, so the words are not allowed to eat it. A
wordy card sets its rules smaller rather than growing the panel until
only a strip of art is left - the same rule the print renderer follows. */
/* the panel's preferred ceiling. The fit pass lifts it only when the
type has already shrunk as far as it may - words are never lost. */
/* Lowered from 41%. fitOne shrinks the type before it ever grows the
panel, and lifts this ceiling entirely if the type reaches its floor -
so a lower number costs a wordy card some point size, never a rule. */
max-height: 30%;
overflow: hidden;
padding: 1.8% 2.6% 2.0%;
border-radius: 1.1cqw;
/* The panel now carries its own contrast instead of borrowing it from a
scrim that darkened the entire picture to do it. Raising these two
numbers while the scrim came down leaves the text box about as dark as
it always effectively was - the composite under it was .94 before and
is .90 now - while the rest of the card gained back between 17 and 48
points of visible artwork.
The floor is arithmetic, not taste: this text is #EDE6D6, so if the art
behind the box happens to be pale, anything under about .89 composite
drops below 4.5:1 and the rules stop being readable. Opening the box up
further needs a different text treatment, not a lower number. */
/* Measured off the card he pointed at as the target - a MTGCardsmith
full-art, sampled where the artwork behind its rules box is continuous.
That box keeps about 66% of what is behind it, so it is a wash of
roughly .34, not a panel. Ours was .89 and the picture underneath was
gone.
Legibility does not come from the fill at this alpha; it comes from the
halo on the glyphs below, which is how the reference does it too. Drop
the halo and this box becomes unreadable - test_cardface.js fails if it
goes missing, and fails again if this fill creeps back up and buries
the art. */
background: var(--plate-rules);
box-shadow: inset 0 0 0 1px var(--plate-edge);
font-size: 3.55cqw; line-height: 1.22;
font-weight: 600;
color: #FFF6E4;
/* The halo, and the whole reason the fill above can be a wash. A shadow
is painted, not composited from the backdrop, so unlike backdrop-filter
it survives the SVG foreignObject the download rasterises through - the
screen and the file stay the same picture. */
text-shadow: var(--plate-halo);
overflow: hidden;
}
.fullcard__panel p { margin: 0 0 1.35%; }
.fullcard__panel p:last-child { margin-bottom: 0; }
.fullcard__panel .reminder { color: #C4BBA8; font-style: italic; font-weight: 400; }
.fullcard__panel .abilityword { font-style: italic; font-weight: 700; letter-spacing: .02em; color: #F7E7B4; }
.fullcard__kw { font-weight: 700; color: #F2E7C6; letter-spacing: .01em; }
.fullcard__flavor {
font-style: italic; font-weight: 400; color: #E4DBC8;
border-top: 1px solid rgba(232, 206, 110, .28);
padding-top: 1.6%; margin-top: 1.6%;
font-size: 0.90em;
opacity: .9;
text-shadow: 0 1px 1px #000, 0 0 4px rgba(0,0,0,.85);
}
.fullcard__foot {
margin-top: 2.0%;
/* clear of the two bottom flourishes, which used to sit on top of the
deck name */
padding: 0 12%;
display: flex; justify-content: space-between; align-items: center; gap: 3%;
font-family: var(--f-util); font-size: 3.1cqw;
letter-spacing: .09em; text-transform: uppercase;
color: rgba(238, 231, 214, .72);
text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}
/* A creature's power and toughness sits over the bottom-right of the rules
panel, the way it does on a printed card - so the last line of text has to
stop short of it. Without this the flavour ran underneath the 4/4. */
.fullcard--pt .fullcard__panel { padding-bottom: 4.2%; }
/* power and toughness, sat on the bottom edge the way a printed card has it */
.fullcard__pt {
position: absolute; right: 4.2%; bottom: 2.6%;
min-width: 0;
width: auto;
padding: 0.35% 1.15% 0.45%;
text-align: center;
font-family: var(--f-display); font-weight: 700; font-size: 4.6cqw;
letter-spacing: .02em;
line-height: 1;
color: #1B1608;
border-radius: 0.7cqw;
background: linear-gradient(180deg, var(--brass-1), var(--brass-2) 60%, var(--brass-3));
box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset,
0 2px 8px rgba(0, 0, 0, .7),
0 0 0 1px rgba(0, 0, 0, .5);
}
/* a planeswalker carries starting loyalty, not power/toughness: a round
brass seal in the corner instead of the P/T plate */
.fullcard__loyal {
position: absolute; right: 4.2%; bottom: 2.6%;
width: 9.6cqw; height: 9.6cqw;
border-radius: 50%;
display: grid; place-items: center;
font-family: var(--f-display); font-weight: 700;
font-size: 5.2cqw; letter-spacing: .02em; line-height: 1;
color: #1B1608; text-align: center;
background:
radial-gradient(circle at 50% 32%,
color-mix(in srgb, var(--brass-1) 88%, #fff) 0%,
var(--brass-2) 45%,
var(--brass-3) 100%);
box-shadow:
0 1px 0 rgba(255, 255, 255, .4) inset,
0 2px 8px rgba(0, 0, 0, .7),
0 0 0 1px rgba(0, 0, 0, .5),
0 0 0 .4cqw color-mix(in srgb, var(--brass-2) 55%, rgba(0, 0, 0, .35));
}
/* a planeswalker's rules well is its own thing: a warm brass-lined well
with the loyalty ladder set as rows, not a creature's plate. The static
block reads first; a hairline drops into the ladder, and each loyalty
cost wears its own little seal. No memory, no backdrop-filter, no
blend modes - the export rasterises the same picture. */
.fullcard--pw .fullcard__panel { padding-bottom: 8%; }
.fullcard--pw .fullcard__panel {
background:
linear-gradient(180deg,
rgba(26, 20, 12, .46),
rgba(12, 9, 6, .60));
box-shadow:
inset 0 0 0 1px var(--plate-edge),
inset 0 0 0 2px rgba(10, 8, 6, .55),
inset 0 0 22px rgba(232, 206, 110, .07);
}
.fullcard--pw .fullcard__panel p { margin: 0 0 1.4%; }
.fullcard--pw .fullcard__panel .fullcard__kw { margin-bottom: 2.2%; }
.fullcard--pw .fullcard__pwrow {
display: flex; align-items: baseline; gap: .55em;
}
.fullcard--pw .fullcard__panel p + .fullcard__pwrow {
border-top: 1px solid rgba(232, 206, 110, .16);
margin-top: 1.4%; padding-top: 1.4%;
}
.fullcard--pw .fullcard__pwrow + .fullcard__pwrow { margin-top: 1.1%; }
.fullcard__loy {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
min-width: 2.7em; height: 2.05em; padding: 0 .44em 0 .58em;
border-radius: 1.05em;
font-family: var(--f-util); font-weight: 700; font-size: 1.12em;
letter-spacing: .02em; line-height: 1; color: #F6E8BE;
background: linear-gradient(180deg, #261D11, #0F0B06);
box-shadow:
inset 0 0 0 1px rgba(232, 206, 110, .5),
0 1px 1px rgba(0, 0, 0, .55);
}
.fullcard--pw .fullcard__pwtext { flex: 1 1 auto; min-width: 0; }
/* a mini card drops the prose and keeps the picture and the name */
.fullcard--mini .fullcard__panel,
.fullcard--mini .fullcard__foot { display: none; }
.fullcard--mini .fullcard__name { font-size: 7.6cqw; }
/* A card imported whole from MTGCardsmith: the picture is the card, so it
gets the shape and the shadow and nothing else. */
.prerendered {
display: block; width: 100%; aspect-ratio: 63 / 88;
border-radius: 4.4% / 3.2%;
background-size: cover; background-position: center;
background-color: #0d0f12;
box-shadow: 0 0 0 1px rgba(0,0,0,.85), 0 18px 44px -18px rgba(0,0,0,.8);
}
/* ------------------------------------------------------------ the Forge
Controls on the left, the picture on the right, everything made so far
underneath. The picture is the point, so it gets the room. */
.forge {
display: grid;
grid-template-columns: minmax(280px, 380px) 1fr;
gap: 22px;
align-items: start;
}
@media (max-width: 860px) { .forge { grid-template-columns: 1fr; } }
.forge__controls { display: flex; flex-direction: column; gap: 14px; }
.forge__field { display: flex; flex-direction: column; gap: 6px; }
.forge__label {
font-family: var(--f-util); font-size: 11px; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted);
display: flex; align-items: baseline; gap: 8px;
}
.forge__hint { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .75; }
.forge__prompt { resize: vertical; min-height: 88px; font-family: var(--f-body); }
.forge__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.forge__aspects { display: flex; flex-wrap: wrap; gap: 8px; }
.forge__aspect {
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 7px 9px; border-radius: 6px; cursor: pointer;
background: rgba(255, 255, 255, .03);
border: 1px solid rgba(232, 206, 110, .18);
color: var(--muted); font-family: var(--f-util); font-size: 10px;
}
.forge__aspect:hover { border-color: rgba(232, 206, 110, .4); }
.forge__aspect.is-on { border-color: var(--gold, #C4A03A); color: var(--ink); }
.forge__aspect.is-off { opacity: .32; cursor: not-allowed; }
.forge__aspectbox {
width: 26px; background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .16); border-radius: 2px;
}
.forge__aspectname { letter-spacing: .06em; text-transform: uppercase; }
.forge__aspectsub { opacity: .6; }
.forge__go { margin-top: 4px; }
.forge__out { min-height: 320px; }
.forge__shot { margin: 0; }
.forge__shot img {
width: 100%; max-width: 520px; height: auto; display: block;
border-radius: 6px; border: 1px solid rgba(232, 206, 110, .3);
}
.forge__shot--empty {
display: flex; align-items: center; justify-content: center;
min-height: 320px; border-radius: 6px; color: var(--muted);
border: 1px dashed rgba(232, 206, 110, .22);
}
.forge__grid {
display: grid; gap: 12px;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
margin-top: 12px;
}
.forge__cell {
margin: 0; display: flex; flex-direction: column; gap: 6px;
border-radius: 6px; overflow: hidden;
border: 1px solid rgba(255, 255, 255, .08);
background: rgba(255, 255, 255, .02);
}
.forge__cell.is-kept { border-color: rgba(232, 206, 110, .5); }
.forge__cell img { width: 100%; height: auto; display: block; }
.forge__cell figcaption {
padding: 0 8px; font-size: 11px; color: var(--muted); line-height: 1.35;
}
.forge__on { color: var(--gold, #C4A03A); font-style: normal; }
.forge__cellbar { display: flex; gap: 6px; padding: 0 8px 8px; }
.forge__toggle {
display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
padding: 10px 12px; border-radius: 6px;
background: rgba(255, 255, 255, .03);
border: 1px solid rgba(232, 206, 110, .18);
}
.forge__toggle input { margin-top: 3px; flex: 0 0 auto; }
.forge__toggle strong {
display: block; font-size: 12px; font-weight: 600; color: var(--ink);
}
.forge__toggle em {
display: block; margin-top: 2px; font-style: normal;
font-size: 11px; color: var(--muted);
}
.forge__found {
border: 1px solid rgba(232, 206, 110, .18); border-radius: 6px;
padding: 8px 12px; background: rgba(255, 255, 255, .02);
}
.forge__found summary {
cursor: pointer; font-family: var(--f-util); font-size: 11px;
letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.forge__foundlist {
margin: 6px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted);
word-break: break-word;
}
.forge__strip {
display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px;
}
.forge__cand {
padding: 0; border-radius: 4px; overflow: hidden; cursor: pointer;
border: 2px solid transparent; background: none; line-height: 0;
}
.forge__cand img { width: 76px; height: auto; display: block; }
.forge__cand:hover { border-color: rgba(232, 206, 110, .45); }
.forge__cand.is-on { border-color: var(--gold, #C4A03A); }
/* ---- the Forge: search results, waiting, and the bin ---- */
.forge__hits { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.forge__hit {
display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
padding: 6px 10px; border-radius: 5px; cursor: pointer; text-align: left;
background: rgba(255, 255, 255, .03);
border: 1px solid rgba(232, 206, 110, .16);
}
.forge__hit:hover { border-color: rgba(232, 206, 110, .45); }
.forge__hit strong { font-size: 12px; font-weight: 600; color: var(--ink); }
.forge__hit em {
font-style: normal; font-size: 11px; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.forge__wait { display: flex; flex-direction: column; gap: 8px; }
.forge__skel {
display: block; width: 76px; aspect-ratio: 63 / 88; border-radius: 4px;
background: linear-gradient(100deg,
rgba(255, 255, 255, .04) 30%, rgba(255, 255, 255, .10) 50%,
rgba(255, 255, 255, .04) 70%);
background-size: 240% 100%;
animation: forgeShimmer 1.4s ease-in-out infinite;
}
@keyframes forgeShimmer {
from { background-position: 140% 0; }
to { background-position: -40% 0; }
}
/* the motion rules of the site apply here too */
@media (prefers-reduced-motion: reduce) {
.forge__skel { animation: none; }
}
.forge__bin { margin-left: auto; opacity: .55; }
.forge__bin:hover { opacity: 1; color: #e0a49a; }
/* ---------- 2026-09-09 studio floor: QC, live face, table, print last mile ---------- */
.editor-split { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 22px; align-items: start; }
@media (max-width: 820px) { .editor-split { grid-template-columns: 1fr; } }
.editor-split__face { position: sticky; top: 12px; }
.editor-split__face .mtgcard-wrap { width: 100%; max-width: 280px; }
.modal__panel--wide { max-width: 1180px; }
.clearance {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius);
background: var(--surface-2);
}
.clearance__mark {
width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: 0 0 auto;
}
.clearance__mark.is-on { background: var(--ok); }
.clearance__copy { font-family: var(--f-util); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); flex: 1; }
.sectorstep__seg[disabled], .sectorstep__seg.is-blocked {
opacity: .45; cursor: not-allowed;
}
.tableplay { display: grid; gap: 14px; }
.tableplay__meta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; font-family: var(--f-util); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.tableplay__zone { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 10px 12px; background: var(--surface); }
.tableplay__cards { display: flex; flex-wrap: wrap; gap: 6px; }
.tableplay__chip {
display: inline-flex; align-items: center; gap: 6px;
border: 1px solid var(--line); border-radius: 3px; padding: 4px 8px;
font-size: 13px; background: var(--surface-2);
}
.tableplay__acts { flex-wrap: wrap; }
.tableplay__log {
font-size: 13px; line-height: 1.45; max-height: 240px; overflow: auto;
border-left: 2px solid var(--gold); padding: 4px 0 4px 12px; color: var(--ink-2);
}
.printcard { width: 63mm; position: relative; }
.printcard img { width: 100%; height: auto; display: block; }
.sheet .printcard { width: 63mm; max-width: none; }
.sheet--bleed { grid-template-columns: repeat(3, 66mm); gap: 0; }
.sheet--bleed .printcard { width: 66mm; }
.sheet--crop .printcard::before,
.sheet--crop .printcard::after {
content: ""; position: absolute; pointer-events: none;
border-color: #222; border-style: solid; z-index: 2;
}
.sheet--crop .printcard::before {
top: -2.2mm; bottom: -2.2mm; left: -1.6mm; right: -1.6mm;
border-width: 0;
background:
linear-gradient(#222,#222) top left / 2.4mm 0.15mm no-repeat,
linear-gradient(#222,#222) top left / 0.15mm 2.4mm no-repeat,
linear-gradient(#222,#222) top right / 2.4mm 0.15mm no-repeat,
linear-gradient(#222,#222) top right / 0.15mm 2.4mm no-repeat,
linear-gradient(#222,#222) bottom left / 2.4mm 0.15mm no-repeat,
linear-gradient(#222,#222) bottom left / 0.15mm 2.4mm no-repeat,
linear-gradient(#222,#222) bottom right / 2.4mm 0.15mm no-repeat,
linear-gradient(#222,#222) bottom right / 0.15mm 2.4mm no-repeat;
}
@media print {
.clearance, .tableplay__acts { display: none !important; }
.printcard { box-shadow: none; }
}
/* ---------- 2026-09-09 floor 2: faces, frames, skip, clearance wall ---------- */
.skip {
position: absolute; left: -9999px; top: 8px;
}
.skip:focus, .skip:focus-visible {
left: 12px; z-index: 80;
background: var(--gold); color: var(--bg);
padding: 8px 14px; border-radius: 3px;
font-family: var(--f-util); font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
}
.viewtoggle { display: inline-flex; gap: 4px; }
.facegrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
gap: 14px 12px;
padding: 4px 0 18px;
}
.facegrid__cell {
display: flex; flex-direction: column; gap: 6px;
background: none; border: 0; padding: 0; text-align: left;
color: inherit; cursor: pointer;
}
.facegrid__cell .mtgcard-wrap { width: 100%; max-width: none; }
.facegrid__cell:hover .fullcard { transform: translateY(-2px); }
.facegrid__cell.is-stub { opacity: .72; }
.facegrid__meta {
display: flex; flex-direction: column; gap: 2px;
font-size: 12.5px; line-height: 1.25;
min-width: 0;
}
.facegrid__meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
.facegrid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px 8px; }
}
.fullcard--style-borderless .fullcard__edge,
.fullcard--style-borderless .fullcard__rule,
.fullcard--style-borderless .fullcard__orn { display: none; }
.fullcard--style-borderless .fullcard__title,
.fullcard--style-borderless .fullcard__typeplate,
.fullcard--style-borderless .fullcard__panel {
/* same plates as every other Codex face */
}
/* ---- regular: Cardsmith boxes over full-bleed art, dark glass, cream ink ---- */
.fullcard--style-regular {
background: #0c0b09;
}
.fullcard--style-regular .fullcard__scrim,
.fullcard--style-regular .fullcard__rule,
.fullcard--style-regular .fullcard__orn { display: none; }
.fullcard--style-regular .fullcard__art { display: block; }
.fullcard--style-regular .fullcard__gap {
min-height: 0;
background: none;
box-shadow: none;
}
.fullcard--style-regular .fullcard__title {
height: 7.8cqw;
background: linear-gradient(180deg, rgba(10,8,6,.50), rgba(10,8,6,.40));
box-shadow:
0 0 0 0.2cqw rgba(232, 206, 110, .42),
inset 0 0.32cqw 0 rgba(255,255,255,.12);
}
.fullcard--style-regular .fullcard__name {
color: #F6EDD4;
text-shadow:
0 1px 1px #000,
0 0 3px #000,
0 0 7px rgba(0,0,0,.8);
}
.fullcard--style-regular .fullcard__typeplate {
height: 5.6cqw;
background: linear-gradient(180deg, rgba(14,12,10,.62), rgba(10,8,6,.55));
box-shadow:
0 0 0 0.2cqw rgba(232, 206, 110, .38),
inset 0 0.28cqw 0 rgba(255, 230, 170, .12);
}
.fullcard--style-regular .fullcard__type {
color: #f8efd8;
text-shadow:
0 1px 1px #000,
0 0 4px rgba(0,0,0,.85);
}
.fullcard--style-regular .fullcard__panel {
max-height: 32%;
background: linear-gradient(180deg, rgba(10,8,6,.48), rgba(10,8,6,.58));
color: #F6EDD4;
font-weight: 600;
text-shadow:
0 1px 1px #000,
0 0 3px #000,
0 0 8px rgba(0,0,0,.75);
box-shadow:
0 0 0 0.2cqw rgba(232, 206, 110, .32),
inset 0 0 0 0.32cqw rgba(255,255,255,.08);
}
.fullcard--style-regular .fullcard__kw,
.fullcard--style-regular .fullcard__panel .abilityword { color: #F7E7B4; }
.fullcard--style-regular .fullcard__panel .reminder { color: #D9D0BE; }
.fullcard--style-regular .fullcard__flavor {
color: #E4DBC8;
font-weight: 500;
font-size: 0.96em;
border-top-color: rgba(232, 206, 110, .28);
text-shadow:
0 1px 1px #000,
0 0 4px rgba(0,0,0,.85);
}
.fullcard--style-regular .fullcard__foot {
color: rgba(243, 230, 196, .8);
text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.fullcard--style-regular .fullcard__pt {
right: 5%;
bottom: 6.2%;
}
/* editor-only print crop guides (injected by setupArtDrag, never in export) */
.fullcard__guides {
position: absolute; inset: 0;
pointer-events: none;
z-index: 9;
}
.fullcard__guides-knife {
position: absolute; inset: 0;
box-shadow: inset 0 0 0 3.4% rgba(196, 86, 42, .28);
}
.fullcard__guides-safe {
position: absolute;
top: 3.4%; right: 4.8%; bottom: 3.4%; left: 4.8%;
border: 1px dashed rgba(232, 206, 110, .7);
}
.fullcard__guides-cap {
position: absolute; left: 6%; right: 6%; bottom: 9%;
text-align: center;
font-family: var(--f-util);
font-size: 2.3cqw; font-weight: 600; letter-spacing: .06em;
color: #F6EDD4;
text-shadow: 0 1px 2px #000, 0 0 6px #000;
}
.fullcard--style-fullart .fullcard__edge { opacity: .55; }
.fullcard--style-textless .fullcard__panel,
.fullcard--style-textless .fullcard__typeplate,
.fullcard--style-textless .fullcard__foot { display: none; }
@media print {
.viewtoggle, .skip { display: none !important; }
}
.prerendered--missing {
display: flex; align-items: center; justify-content: center;
background: #12141a; color: var(--ink-2);
}
/* Cardsmith plates used as illustration: zoom into the M15 art window */
.fullcard--art-plate .fullcard__art {
background-size: 128% auto;
background-position: 50% 16%;
}
/* live playtest table */
.wrap--table { max-width: 1560px; }
.livetable { display: grid; gap: 14px; padding: 4px 0 36px; }
.livecombat {
padding: 12px 14px;
border: 1px solid rgba(232,206,110,.55);
background: linear-gradient(180deg, rgba(90, 28, 10, .55), rgba(40, 14, 8, .55));
border-radius: 10px;
}
.livetable__foes { display: grid; gap: 12px; }
@media (min-width: 960px) {
.livetable__foes { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.livetable__board { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 18px; align-items: start; }
}
.liveseat {
padding: 12px;
border: 1px solid rgba(232,206,110,.2);
border-radius: 12px;
background: linear-gradient(180deg, rgba(18,14,10,.7), rgba(8,6,4,.75));
}
.liveseat.is-turn, .livetable__you.is-turn { box-shadow: inset 0 0 0 1px rgba(232,206,110,.7), 0 0 24px rgba(232,206,110,.08); }
.liveseat.is-dead { opacity: .4; }
.livetable__you {
padding: 16px 18px 18px;
border: 1px solid rgba(232,206,110,.38);
border-radius: 14px;
background:
radial-gradient(900px 280px at 50% -10%, rgba(232,206,110,.1), transparent 55%),
linear-gradient(180deg, #17120c 0%, #0b0907 100%);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), 0 18px 40px rgba(0,0,0,.4);
}
.livebar {
display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
margin-bottom: 12px; padding-bottom: 12px;
border-bottom: 1px solid rgba(232,206,110,.16);
}
.livebar__id { display: flex; align-items: baseline; gap: 10px; min-width: 140px; }
.livebar__life {
font-family: 'Barlow Condensed', sans-serif;
font-size: 32px; font-weight: 700; color: #E8CE6E; line-height: 1;
}
.livebar__who { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #cbb892; }
.livebar__ops { display: flex; flex-wrap: wrap; gap: 6px; }
.livebar__ops--aux { margin-left: auto; opacity: .9; }
.livefield {
min-height: 210px;
padding: 16px 14px 12px;
border-radius: 12px;
background:
radial-gradient(ellipse at 50% 40%, #1a3d2c 0%, #0c1913 62%, #08110d 100%);
box-shadow: inset 0 0 48px rgba(0,0,0,.45);
}
.liveseat .livefield { min-height: 120px; padding: 10px; }
.livefield__row { display: flex; flex-wrap: wrap; gap: 10px; min-height: 48px; margin-bottom: 8px; align-items: flex-end; }
.livefield__row--lands { opacity: .95; min-height: 36px; }
.livefield__empty {
color: rgba(232,206,110,.28);
font-size: 10px;
letter-spacing: .16em;
text-transform: uppercase;
padding: 28px 8px;
}
.livepile { min-width: 110px; }
.livepile.is-over { outline: 1px dashed #E8CE6E; outline-offset: 3px; }
.livepile__row { display: flex; flex-wrap: wrap; gap: 8px; min-height: 48px; align-items: flex-end; }
.livecard {
position: relative;
width: 122px; height: 172px;
padding: 0; border: 1px solid #c4a35a;
background: #0a0806; color: #F3E6C4; border-radius: 9px;
cursor: grab; overflow: hidden;
display: block;
box-shadow: 0 6px 14px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.35);
transition: transform .16s ease, box-shadow .16s ease, margin .16s ease;
z-index: 1;
}
.livecard__art {
position: absolute; inset: 0;
height: auto !important;
background: #2a2218 center 28% / cover no-repeat;
}
.livecard__art--blank { background: #2a2218; }
.livecard::after {
content: '';
position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
background: linear-gradient(to top, rgba(8,6,4,.94) 12%, transparent);
pointer-events: none;
}
.livecard__shade { display: none; }
.livecard__nm {
position: absolute; left: 7px; right: 7px; bottom: 20px;
font-size: 11px; font-weight: 650; line-height: 1.15;
text-align: left; text-shadow: 0 1px 3px #000, 0 0 8px #000;
z-index: 2;
}
.livecard__pt {
position: absolute; right: 6px; bottom: 5px; z-index: 2;
font-size: 12px; font-weight: 800; line-height: 1;
padding: 2px 6px;
background: rgba(10,8,6,.82);
border: 1px solid rgba(232,206,110,.5);
border-radius: 4px;
}
.livecard__nm {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.livefield .livecard.is-land { width: 92px; height: 74px; }
.livefield .livecard.is-land .livecard__nm { bottom: 5px; font-size: 10px; -webkit-line-clamp: 1; }
.livefield .livecard.is-land::after { height: 58%; }
.livecard:hover {
transform: translateY(-12px) scale(1.05);
z-index: 8;
box-shadow: 0 16px 28px rgba(0,0,0,.6), 0 0 0 1px #E8CE6E;
}
.livecard.is-tapped,
.livecard.is-tapped.is-ready,
.livecard.is-tapped.is-open,
.livecard.is-tapped.is-atk,
.livecard.is-tapped.is-attacking {
transform: rotate(90deg) !important;
margin: 22px 18px;
}
.livecard.is-tapped:hover {
transform: rotate(90deg) scale(1.04) !important;
}
.livecard.is-sel {
outline: none;
box-shadow: 0 0 0 2px #E8CE6E, 0 0 18px rgba(232,206,110,.5);
z-index: 7;
}
.livecard.is-atk { box-shadow: 0 0 0 2px #c44, 0 0 14px rgba(200,40,40,.4); }
.livepile--hand .livepile__row { min-height: 188px; padding: 14px 10px 8px; }
.livepile--hand .livecard { margin-right: -24px; }
.livepile--hand .livecard:last-child { margin-right: 0; }
.livepile--hand .livecard:hover { margin-right: 8px; }
.livepile--cmd .livecard {
width: 136px; height: 190px;
box-shadow: 0 0 0 2px #E8CE6E, 0 10px 22px rgba(0,0,0,.5);
}
.liveseat .livecard { width: 86px; height: 120px; }
.liveseat .livecard.is-land { width: 70px; height: 56px; }
.liveseat .livecard__nm { font-size: 9px; bottom: 14px; }
.liveseat .livepile--cmd .livecard { width: 96px; height: 134px; }
.livepile--gy .livepile__row,
.livepile--ex .livepile__row {
min-width: 72px; min-height: 96px;
border: 1px dashed rgba(232,206,110,.18);
border-radius: 8px;
}
.livewells {
display: flex; flex-wrap: wrap; gap: 16px;
align-items: flex-end; margin-top: 14px;
}
.livedeck {
width: 96px; height: 134px;
border-radius: 9px;
border: 1px solid #c4a35a;
background:
repeating-linear-gradient(135deg, #1c140e 0 10px, #271a12 10px 20px);
color: #F3E6C4;
box-shadow: 5px 5px 0 #080604, 9px 9px 0 rgba(196,163,90,.28);
position: relative;
cursor: pointer;
}
.livedeck__n {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: 'Barlow Condensed', sans-serif;
font-size: 28px; font-weight: 700; color: #E8CE6E;
}
.livedeck__l {
position: absolute; left: 0; right: 0; bottom: 8px;
font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
color: #cbb892;
}
.livetable__side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 72px; }
.liveinspect { width: 100%; }
.liveinspect .fullcard, .liveinspect .mtgcard-wrap { width: 100%; max-width: 260px; margin: 0 auto; }
.liveinspect__img {
width: 100%; max-width: 260px; border-radius: 10px; display: block;
box-shadow: 0 0 0 1px #c4a35a, 0 18px 36px rgba(0,0,0,.5);
}
.livetable__log {
max-height: 240px; overflow: auto; padding: 10px 12px;
border: 1px solid rgba(232,206,110,.18); border-radius: 8px;
background: rgba(0,0,0,.25);
}
.livetable__ul { margin: 0; padding-left: 16px; font-size: 12px; color: #d8cba8; }
.livetable__piles { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin-top: 10px; }
.livephases { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.livephases__s { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border: 1px solid rgba(232,206,110,.2); border-radius: 4px; color: #a09070; }
.livephases__s.is-on { color: #140f0a; background: #E8CE6E; border-color: #E8CE6E; }
.livestack { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; border: 1px solid rgba(232,206,110,.4); border-radius: 8px; background: rgba(40,20,8,.45); }
.livestack__item { font-size: 12px; padding: 2px 8px; border-radius: 4px; background: rgba(232,206,110,.15); }
@media (max-width: 720px) {
.livecard { width: 92px; height: 130px; }
.livepile--hand .livecard { margin-right: -28px; }
}
.wrap.is-playing { padding-top: 8px; }
.foehud { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.foehud__life {
font-family: 'Barlow Condensed', sans-serif;
font-size: 26px; font-weight: 700; color: #E8CE6E; min-width: 36px;
}
.foehud__meta { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.foehud__meta b { font-size: 13px; color: #F3E6C4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foehud__meta span { font-size: 11px; color: #a09070; letter-spacing: .04em; }
.foehud__ops { display: flex; gap: 4px; }
.livepips { display: inline-flex; gap: 4px; align-items: center; margin-left: 10px; }
.livepips i {
width: 9px; height: 9px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #f3e6c4, #c4a35a 55%, #7a5a20);
box-shadow: 0 0 0 1px rgba(0,0,0,.4);
display: block;
}
.livepips i.is-zero { background: #3a3228; opacity: .5; }
.livemull, .liveact {
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
margin: 0 0 12px; padding: 10px 12px;
border: 1px solid rgba(232,206,110,.28);
border-radius: 8px;
background: rgba(10,8,6,.45);
}
.liveact b { color: #F3E6C4; margin-right: 4px; }
.liveact__pt { font-size: 12px; color: #E8CE6E; margin-right: 8px; }
.livepile--hand .livecard:hover::before {
content: 'PLAY';
position: absolute; top: 8px; left: 8px; z-index: 3;
font-size: 9px; letter-spacing: .14em;
padding: 2px 6px; border-radius: 3px;
background: rgba(10,8,6,.8); border: 1px solid #E8CE6E; color: #E8CE6E;
}
#liveinspect .fullcard, #liveinspect .mtgcard-wrap { max-width: 260px; margin: 0 auto; }
.lobby { padding: 8px 0 40px; }
.lobby__modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.lobmode {
display: block; cursor: pointer;
padding: 16px 18px;
border: 1px solid rgba(232,206,110,.22);
border-radius: 12px;
background: rgba(10,8,6,.4);
}
.lobmode input { position: absolute; opacity: 0; pointer-events: none; }
.lobmode.is-on, .lobmode:has(input:checked) {
border-color: #E8CE6E;
box-shadow: inset 0 0 0 1px rgba(232,206,110,.35);
background: rgba(232,206,110,.08);
}
.lobmode__t { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 22px; color: #E8CE6E; }
.lobmode__s { display: block; margin-top: 4px; font-size: 13px; color: #cbb892; }
.lobby__table {
display: grid; gap: 14px;
padding: 18px;
border-radius: 16px;
border: 1px solid rgba(232,206,110,.28);
background:
radial-gradient(ellipse at 50% 40%, #1a3d2c 0%, #0c1913 58%, #08110d 100%);
box-shadow: inset 0 0 60px rgba(0,0,0,.45);
}
.lobby__foes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lobseat {
display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: stretch;
padding: 10px; border-radius: 12px;
background: rgba(8,6,4,.55);
border: 1px solid rgba(232,206,110,.2);
}
.lobseat--you { grid-template-columns: 120px 1fr; margin-bottom: 4px; }
.lobseat.is-empty { opacity: .55; }
.lobseat__art {
display: block; border-radius: 8px;
background: #1a140c center 22% / cover no-repeat;
min-height: 120px;
border: 1px solid #c4a35a;
box-shadow: 0 8px 18px rgba(0,0,0,.45);
}
.lobseat--you .lobseat__art { min-height: 160px; }
.lobseat__art--blank { background: repeating-linear-gradient(135deg, #1c140e 0 8px, #271a12 8px 16px); }
.lobseat__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lobseat__body b { color: #F3E6C4; font-size: 15px; line-height: 1.2; }
.lobseat .field { font-size: 16px; }
.lobby__go { margin-top: 16px; }
@media (max-width: 800px) {
.lobby__modes, .lobby__foes { grid-template-columns: 1fr; }
.lobseat, .lobseat--you { grid-template-columns: 72px 1fr; }
}
.deckpick { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 12px; scrollbar-width: thin; }
.deckpick__c {
flex: 0 0 100px; padding: 0 0 8px; margin: 0;
border: 1px solid rgba(232,206,110,.28);
background: #120e0a; color: #F3E6C4;
border-radius: 10px; cursor: pointer; text-align: left;
overflow: hidden;
box-shadow: 0 6px 14px rgba(0,0,0,.35);
}
.deckpick__c:hover { border-color: rgba(232,206,110,.7); transform: translateY(-3px); }
.deckpick__c.is-on { border-color: #E8CE6E; box-shadow: 0 0 0 1px #E8CE6E, 0 8px 18px rgba(0,0,0,.4); }
.deckpick__art {
display: block; height: 124px;
background: #1a140c center 20% / cover no-repeat;
}
.deckpick__art--blank { background: repeating-linear-gradient(135deg, #1c140e 0 8px, #271a12 8px 16px); }
.deckpick__n { display: block; font-size: 12px; font-weight: 650; padding: 7px 8px 0; line-height: 1.2; }
.deckpick__s { display: block; font-size: 10px; color: #a09070; padding: 2px 8px 0; }
.deckpick--sm { gap: 8px; }
.deckpick--sm .deckpick__c { flex-basis: 78px; }
.deckpick--sm .deckpick__art { height: 90px; }
.deckpick--sm .deckpick__n { font-size: 11px; }
.kindpills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.kindpills__b {
font-size: 11px; padding: 3px 8px; margin: 0;
border-radius: 999px; border: 1px solid rgba(232,206,110,.28);
background: transparent; color: #cbb892; cursor: pointer;
}
.kindpills__b.is-on { background: #E8CE6E; color: #140f0a; border-color: #E8CE6E; }
.lobseat--opp {
display: grid;
grid-template-columns: 88px 1fr;
grid-template-rows: auto auto;
}
.lobseat--opp .deckpick { grid-column: 1 / -1; margin-top: 8px; }
.lobby__you .deckpick { margin-top: 4px; }
.livefield__lab {
flex: 0 0 100%;
font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
color: rgba(232,206,110,.45); margin: 0 0 6px;
}
.livefield__row { align-items: flex-end; }
.livefield .livecard.is-land { width: 110px; height: 86px; }
.livefield .livecard.is-land .livecard__nm { bottom: 6px; font-size: 11px; }
.livecard__mana, .livecard__cmc {
position: absolute; top: 6px; left: 6px; z-index: 3;
display: flex; gap: 2px; align-items: center;
padding: 2px 4px; border-radius: 4px;
background: rgba(8,6,4,.72);
}
.livecard__cmc { font-size: 11px; font-weight: 700; color: #F3E6C4; }
.livecard.is-open { box-shadow: 0 0 0 2px #E8CE6E, 0 0 16px rgba(232,206,110,.35); }
.livecard.is-spent { filter: saturate(.45) brightness(.62); }
.livecard.is-ready { box-shadow: 0 0 0 2px #8ecf7a, 0 10px 18px rgba(0,0,0,.45); }
.livecard.is-unready { opacity: .55; }
.livepile--hand .livecard.is-unready:hover::before { content: none; display: none; }
.livepips { gap: 3px; }
.livepips .pip { width: 16px; height: 16px; }
.livepips__z { font-size: 12px; color: #a09070; }
.livecard__tax {
position: absolute; top: 6px; right: 6px; z-index: 3;
font-size: 11px; font-weight: 800; color: #140f0a;
background: #E8CE6E; border-radius: 4px; padding: 1px 5px;
}
.livewell__n {
align-self: flex-end; font-family: 'Barlow Condensed', sans-serif;
font-size: 22px; color: #E8CE6E; padding: 0 6px 8px;
}
.livephases__turn { margin-left: auto; color: #E8CE6E; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; }
.livepile--gy .livepile__row, .livepile--ex .livepile__row { align-items: flex-end; }
.btn--gold { background: #E8CE6E; color: #140f0a; border-color: #E8CE6E; }
.livesearch {
position: fixed; inset: 0; z-index: 40;
background: rgba(6,4,2,.72);
display: flex; align-items: center; justify-content: center;
padding: 24px;
}
.livesearch__panel {
width: min(920px, 100%);
max-height: 86vh; overflow: auto;
background: #16110c; border: 1px solid rgba(232,206,110,.4);
border-radius: 16px; padding: 18px 20px 20px;
box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.livesearch__grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 10px; margin-top: 10px;
}
.livesearch__c {
display: flex; flex-direction: column; gap: 6px;
padding: 0 0 8px; margin: 0; text-align: left;
background: #120e0a; color: #F3E6C4;
border: 1px solid rgba(232,206,110,.28); border-radius: 10px; cursor: pointer;
}
.livesearch__c:hover { border-color: #E8CE6E; }
.livesearch__art {
display: block; height: 88px;
background: #1a140c center 20% / cover no-repeat; border-radius: 10px 10px 0 0;
}
.livesearch__art--lg { height: 220px; border-radius: 10px; margin-top: 8px; }
.livesearch__c span { padding: 0 8px; font-size: 12px; }
.liveact .btn--gold { font-weight: 700; }
.wrap.is-playing .livetable--arena {
display: grid;
grid-template-columns: 1fr 280px;
grid-template-rows: auto auto 1fr auto auto;
gap: 8px 16px;
min-height: calc(100vh - 28px);
padding-bottom: 8px;
}
.livetable--arena { animation: arenaIn .45s ease; }
@keyframes arenaIn { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.arena__foe, .arena__you { padding: 8px 10px; border-radius: 14px; }
.arena__foe { background: linear-gradient(180deg, rgba(10,8,6,.55), transparent); }
.arena__you { background: linear-gradient(0deg, rgba(10,8,6,.55), transparent); }
.arena__foe.is-turn, .arena__you.is-turn { box-shadow: inset 0 0 0 1px rgba(232,206,110,.45); }
.arena__hud { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.arena__life {
font-family: 'Barlow Condensed', sans-serif;
font-size: 42px; line-height: 1; color: #E8CE6E;
min-width: 64px; text-align: center;
text-shadow: 0 0 18px rgba(232,206,110,.35);
}
.arena__who b { display: block; color: #F3E6C4; }
.arena__who span { font-size: 12px; color: #a09070; }
.foehand { display: flex; justify-content: center; min-height: 36px; margin: 4px 0 8px; }
.cardback {
width: 42px; height: 58px; margin-left: -18px;
border-radius: 4px;
background:
linear-gradient(145deg, rgba(232,206,110,.18), transparent 40%),
repeating-linear-gradient(135deg, #3a2414 0 6px, #2a180e 6px 12px);
border: 1px solid #c4a35a;
box-shadow: 0 4px 8px rgba(0,0,0,.4);
animation: liveDeal .3s ease backwards;
}
.cardback:first-child { margin-left: 0; }
@keyframes liveDeal {
from { opacity: 0; transform: translateY(-12px) rotate(-6deg); }
to { opacity: 1; transform: none; }
}
.livecard { animation: liveDeal .32s ease both; }
.livecard.is-tapped { transition: transform .35s ease; }
.livestack__item { animation: stackIn .28s ease; }
@keyframes stackIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.arenabanner {
position: fixed; inset: 0; z-index: 30; pointer-events: none;
display: flex; align-items: center; justify-content: center;
background: radial-gradient(ellipse at 50% 50%, rgba(8,6,4,.35), transparent 60%);
animation: bannerOut 1.4s ease forwards;
}
.arenabanner span {
font-family: 'Barlow Condensed', sans-serif;
font-size: 64px; letter-spacing: .12em; text-transform: uppercase;
color: #E8CE6E; text-shadow: 0 8px 30px rgba(0,0,0,.6);
}
@keyframes bannerOut {
0% { opacity: 0; }
15% { opacity: 1; }
70% { opacity: 1; }
100% { opacity: 0; }
}
.arena__mid { padding: 4px 8px; }
.arena__dock { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.arena__ops { display: flex; flex-wrap: wrap; gap: 6px; }
.arena__side { grid-column: 2; grid-row: 1 / -1; }
.arena__foe .livefield { flex-direction: column-reverse; }
.lobby__foes { grid-template-columns: minmax(0, 420px); }
.livephases--arena { justify-content: center; }
/* ===== arena board (full viewport) ===== */
body:has(.wrap.is-playing) { overflow: hidden; background: #050402; }
.wrap.is-playing {
max-width: none !important;
width: 100%;
padding: 0 !important;
margin: 0;
}
.wrap.is-playing .backbar,
.wrap.is-playing .crumbs,
.wrap.is-playing .tabs,
.wrap.is-playing header.stack { display: none !important; }
.wrap.is-playing .livetable--arena {
display: flex;
flex-direction: column;
height: 100dvh;
width: 100%;
margin: 0;
padding: 0;
gap: 0;
background:
radial-gradient(ellipse at 50% 0%, rgba(232,206,110,.06), transparent 42%),
radial-gradient(ellipse at 50% 100%, rgba(232,206,110,.07), transparent 42%),
radial-gradient(ellipse at 50% 50%, #1a3a28 0%, #0c1610 48%, #050402 100%);
box-shadow: inset 0 0 120px rgba(0,0,0,.65);
overflow: hidden;
position: relative;
}
.livetable--arena .livephases--arena {
justify-content: center;
gap: 0;
margin: 0;
padding: 6px 0 4px;
background: linear-gradient(#0a0806, transparent);
}
.livetable--arena .livephases__s {
border: 0; background: none; color: #6a5a40; font-size: 9px; letter-spacing: .16em;
}
.livetable--arena .livephases__s.is-on { background: none; color: #E8CE6E; font-weight: 700; }
.arena__foe, .arena__you { padding: 4px 24px; background: none; box-shadow: none; }
.arena__foe { flex: 0 0 auto; }
.arena__you { flex: 0 0 auto; padding-bottom: 12px; }
.arena__mid {
flex: 1 1 auto;
min-height: 110px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
border-top: 1px solid rgba(232,206,110,.22);
border-bottom: 1px solid rgba(232,206,110,.22);
background: linear-gradient(90deg, transparent, rgba(232,206,110,.07), transparent);
padding: 8px 16px;
}
.livetable--arena .livefield {
min-height: 0;
padding: 8px 4px;
background: transparent;
box-shadow: none;
}
.livetable--arena .livefield__lab,
.livetable--arena .livefield__empty { display: none; }
.livetable--arena .livefield__row { justify-content: center; gap: 8px; min-height: 0; }
.arena__you .livecard {
width: 138px; height: 194px;
border-radius: 10px;
box-shadow: 0 10px 22px rgba(0,0,0,.55), 0 0 0 1px #c4a35a;
}
.arena__you .livefield .livecard.is-land { width: 108px; height: 86px; }
.arena__foe .livecard { width: 108px; height: 152px; }
.arena__foe .livefield .livecard.is-land { width: 86px; height: 68px; }
.arena__life {
width: 76px; height: 76px; min-width: 76px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 34px;
background: radial-gradient(circle at 32% 28%, #5a4020, #1a120a 62%, #080604);
border: 2px solid #E8CE6E;
box-shadow: 0 0 22px rgba(232,206,110,.35), inset 0 -8px 16px rgba(0,0,0,.45);
}
.arena__hud { margin: 0; }
.arena__you .livepile--hand {
perspective: 1100px;
padding: 0;
min-width: 0;
}
.arena__you .livepile--hand .livepile__h { display: none; }
.arena__you .livepile--hand .livepile__row {
justify-content: center;
min-height: 230px;
padding: 28px 8vw 18px;
transform: rotateX(16deg) translateY(8px);
transform-style: preserve-3d;
}
.arena__you .livepile--hand .livecard {
width: 164px; height: 230px;
margin-right: -78px;
transform: translateY(18px);
box-shadow: 0 18px 28px rgba(0,0,0,.6), 0 0 0 1px #c4a35a;
}
.arena__you .livepile--hand .livecard:last-child { margin-right: 0; }
.arena__you .livepile--hand .livecard:hover {
transform: translateY(-64px) scale(1.14);
margin-right: 8px;
z-index: 30;
}
.arena__you .livepile--hand .livecard.is-ready {
box-shadow: 0 0 0 2px #8ecf7a, 0 18px 28px rgba(0,0,0,.6);
}
.foehand { min-height: 44px; }
.cardback {
width: 52px; height: 72px; margin-left: -22px;
transform: rotate(180deg) translateY(-6px);
}
.arenastack { width: min(720px, 90%); text-align: center; }
.arenastack__meta { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #a09070; margin-bottom: 6px; }
.arenastack.is-hot .arenastack__col { display: flex; justify-content: center; }
.arenastack__slot { margin-left: -48px; transform: translateY(calc(var(--i,0) * -6px)); }
.arenastack__slot:first-child { margin-left: 0; }
.arenastack__slot.is-top { z-index: 6; transform: translateY(-10px) scale(1.06); }
.arenastack__slot .livecard { width: 150px; height: 210px; animation: stackIn .28s ease; }
.arena-zoom {
position: fixed; left: 18px; top: 50%; transform: translateY(-50%);
width: 300px; z-index: 40; pointer-events: none;
filter: drop-shadow(0 20px 40px rgba(0,0,0,.65));
}
.arena-zoom:empty { display: none; }
.arena-zoom .fullcard, .arena-zoom .mtgcard-wrap, .arena-zoom .liveinspect__img { width: 300px !important; max-width: 300px; }
.arenapass {
position: fixed; right: 22px; bottom: 26px; z-index: 35;
width: 96px; height: 96px; border-radius: 50%;
border: 2px solid #F3E6C4;
background: radial-gradient(circle at 30% 28%, #f8e7b0, #c4a35a 46%, #6a4a14);
color: #140f0a; font-weight: 800; letter-spacing: .14em;
font-size: 14px; cursor: pointer;
box-shadow: 0 0 28px rgba(232,206,110,.5), 0 12px 24px rgba(0,0,0,.45);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2px;
}
.arenapass small { font-size: 9px; letter-spacing: .16em; font-weight: 700; opacity: .8; }
.arenapass:hover { transform: scale(1.06); }
.arenatools { margin-left: auto; }
.arenatools summary { cursor: pointer; color: #a09070; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.arena__dock { align-items: flex-end; padding-right: 120px; }
.livetable--arena .liveact {
position: fixed; left: 50%; bottom: 268px; transform: translateX(-50%);
z-index: 28; width: min(860px, 92vw);
background: rgba(8,6,4,.88);
border: 1px solid rgba(232,206,110,.4);
backdrop-filter: blur(8px);
}
.arenabanner span { font-size: 72px; }
.livedeck { width: 78px; height: 110px; }
.livetable--sand .livechrome {
position: sticky; top: 0; z-index: 12;
margin: 0 0 12px;
padding: 10px 12px 12px;
background: rgba(10,8,6,.94);
border: 1px solid rgba(232,206,110,.28);
border-radius: 12px;
box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.liveturn { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; flex-wrap: wrap; }
.liveturn__n {
font-family: 'Barlow Condensed', sans-serif;
font-size: 28px; letter-spacing: .12em; text-transform: uppercase;
color: #E8CE6E; min-width: 92px;
}
.livetable--sand .livephases { margin: 0; flex: 1; }
.livetable--sand .livephases__s {
cursor: pointer; background: transparent; color: #a09070;
font: inherit; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
padding: 5px 9px; border: 1px solid rgba(232,206,110,.18); border-radius: 4px;
}
.livetable--sand .livephases__s.is-on { color: #140f0a; background: #E8CE6E; border-color: #E8CE6E; }
.livetable--sand .liveact {
position: static !important;
transform: none !important;
left: auto !important; bottom: auto !important; width: auto !important;
margin: 8px 0 0;
z-index: 1;
}
.livetable--sand .livebar { margin: 0; }
.livecard__plus {
position: absolute; left: 6px; bottom: 5px; z-index: 3;
font-size: 10px; font-weight: 800; color: #140f0a;
background: #E8CE6E; border-radius: 3px; padding: 1px 4px;
}
.arenapass { display: none !important; }
.colstats { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-bottom: 8px; }
.colbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.colbar .field { min-width: min(280px, 100%); flex: 1; }
.colbar--filters { gap: 6px; }
.colchip {
font: inherit; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
padding: 5px 9px; border-radius: 999px; cursor: pointer;
color: #cbb892; background: transparent; border: 1px solid rgba(232,206,110,.28);
}
.colchip.is-on { background: #E8CE6E; color: #140f0a; border-color: #E8CE6E; }
.colgrid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
gap: 14px;
}
.deckplate.is-on { box-shadow: 0 0 0 2px #E8CE6E; }
.shelf--grid { grid-template-columns: minmax(0, 1fr) 280px; }
.coltablewrap { overflow: auto; }
.coltable { width: 100%; border-collapse: collapse; font-size: 13px; }
.coltable th { text-align: left; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #a09070; padding: 6px 8px; border-bottom: 1px solid rgba(232,206,110,.25); }
.coltable td { padding: 8px; border-bottom: 1px solid rgba(232,206,110,.12); cursor: pointer; }
.coltable tr.is-on td { background: rgba(232,206,110,.1); }
.coltable tr:hover td { background: rgba(232,206,110,.06); }
.peek__foot { display: flex; flex-wrap: wrap; gap: 8px; }
.colchrome {
display: flex; flex-direction: column; gap: 14px;
padding: 16px 18px 14px;
border: 1px solid rgba(232,206,110,.22);
border-radius: 12px;
background: rgba(12,10,8,.55);
margin-bottom: 8px;
}
.colstats { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; margin: 0; }
.colstats .stat { padding: 8px 10px; }
.colstats .stat__n { font-size: 22px; }
.colhead {
display: grid;
grid-template-columns: minmax(0,1fr) auto auto;
gap: 10px;
align-items: center;
}
.colhead__q { min-width: 0; width: 100%; }
.colhead__acts { display: flex; gap: 6px; }
.colseg {
display: inline-flex;
border: 1px solid rgba(232,206,110,.35);
border-radius: 8px;
overflow: hidden;
}
.colseg__b {
font: inherit; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
padding: 7px 12px; border: 0; border-right: 1px solid rgba(232,206,110,.25);
background: transparent; color: #cbb892; cursor: pointer;
}
.colseg__b:last-child { border-right: 0; }
.colseg__b.is-on { background: #E8CE6E; color: #140f0a; }
.colctl { display: grid; gap: 8px; }
.colrow {
display: grid;
grid-template-columns: 72px minmax(0,1fr);
gap: 12px;
align-items: center;
}
.colrow__lab {
font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
color: #8a7a58; justify-self: end;
}
.colrow__body { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.colrow .colorfilt__chip { margin: 0; }
@media (max-width: 720px) {
.colhead { grid-template-columns: 1fr; }
.colstats { grid-template-columns: repeat(3, minmax(0,1fr)); }
.colrow { grid-template-columns: 1fr; }
.colrow__lab { justify-self: start; }
}
.digest {
padding: 16px 18px;
border: 1px solid rgba(232,206,110,.28);
border-radius: 12px;
background: rgba(12,10,8,.45);
}
.digest__lede { margin: 8px 0 14px; line-height: 1.55; max-width: 62ch; }
.digest__nums { display: flex; flex-wrap: wrap; gap: 16px 22px; margin-bottom: 12px; }
.digest__nums b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; color: #E8CE6E; }
.digest__nums span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #8a7a58; }
.digest__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.assist { max-width: 720px; }
.assist__log { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.assist__msg { padding: 12px 14px; border: 1px solid rgba(232,206,110,.2); border-radius: 10px; }
.assist__msg--you { border-color: rgba(232,206,110,.4); background: rgba(232,206,110,.06); }
.assist__ops { padding: 12px 14px; margin: 0 0 14px; border: 1px solid rgba(232,206,110,.4); border-radius: 10px; }
.assist__key, .assist__form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
/* ============================================================
phone pass — keep the same brass/stone language, stop the page
from sliding sideways, and make thumbs the primary pointer.
============================================================ */
img, video, canvas { max-width: 100%; height: auto; }
button, a, [data-act], .tab, .toolbar__tab, .chip, .genchip, .colchip {
touch-action: manipulation;
}
.rail { height: 100dvh; }
.peek { max-height: calc(100dvh - 92px); }
.facegrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr)); }
.framepick { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.forge__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); }
.sectorstep { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (hover: none), (pointer: coarse) {
.hubtile:hover, .macro:hover, .deckplate:hover, .quicklink:hover,
.libcard:hover, .cardrow:hover, .btn:hover, .tab:hover, .livecard:hover {
transform: none;
}
.hubtile:hover, .macro:hover, .deckplate:hover { box-shadow: var(--shadow); }
.arena__you .livepile--hand .livecard:hover {
transform: none; margin-right: -48px;
}
.livepile--hand .livecard:hover { margin-right: -24px; }
.livepile--hand .livecard:hover::before { content: none; }
input.field, select.field, textarea.field,
.topbar__search .field, .lobseat .field {
font-size: 16px;
}
}
@media screen and (max-width: 640px) {
.toolbar { display: grid; }
.wrap {
padding-left: max(14px, env(safe-area-inset-left, 0px));
padding-right: max(14px, env(safe-area-inset-right, 0px));
padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
.topbar {
gap: 8px;
padding-left: max(12px, env(safe-area-inset-left, 0px));
padding-right: max(12px, env(safe-area-inset-right, 0px));
padding-top: max(8px, env(safe-area-inset-top, 0px));
}
.topbar__home { font-size: 11px; padding: 8px 6px; min-height: 40px; }
.topbar__search { flex: 1 1 100%; }
.topbar__search .field { font-size: 16px; padding: 10px 12px; min-height: 44px; }
.savepill span:last-child { display: none; }
.theme-toggle { width: 40px; height: 40px; }
.btn { min-height: 44px; padding: 10px 14px; }
.btn--sm { min-height: 40px; padding: 8px 12px; font-size: 12px; }
input.field, select.field, textarea.field { font-size: 16px; min-height: 44px; }
textarea.field { min-height: 96px; }
.tabs { margin-left: -6px; margin-right: -6px; padding: 0 6px; }
.tab { padding: 12px 12px; min-height: 44px; }
.plate__head { flex-wrap: wrap; padding: 12px 14px; }
.plate__body { padding: 14px; }
.banner__acts {
position: static; flex-wrap: wrap; padding: 8px 12px 0; justify-content: flex-end;
}
.banner__body { padding: 12px 14px 16px; }
.hubhead { padding: 22px 0 18px; }
h1.display { font-size: clamp(24px, 8vw, 34px); }
.hearth { padding: 14px; }
.hearth__name { font-size: 24px; }
.peek { max-height: none; }
.modal { padding: max(12px, env(safe-area-inset-top, 0px)) 12px calc(24px + env(safe-area-inset-bottom, 0px)); }
.modal__panel { padding: 18px 16px 20px; }
.toast { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 24px); }
.deckgrid, .hubgrid, .macros, .quicklinks, .cardlist, .gengrid { gap: 10px; }
.libgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 10px; }
.facegrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 110px), 1fr)); gap: 10px 8px; }
.statrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.colstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shelf--grid { grid-template-columns: 1fr; }
.editor-split { grid-template-columns: 1fr; }
.forge { grid-template-columns: 1fr; }
.lobby__modes { grid-template-columns: 1fr; }
.lobmode { padding: 14px; }
.lobseat, .lobseat--you { grid-template-columns: 64px 1fr; }
.livecard { width: 78px; height: 110px; }
.livepile--cmd .livecard { width: 92px; height: 128px; }
.livefield .livecard.is-land { width: 72px; height: 58px; }
.livepile--hand .livecard { margin-right: -36px; }
.livepile--hand .livepile__row { min-height: 128px; padding: 8px 4px; }
.livecard.is-tapped { margin: 14px 12px; }
.livedeck { width: 64px; height: 90px; }
.arena__you .livecard { width: 86px; height: 120px; }
.arena__you .livefield .livecard.is-land { width: 70px; height: 56px; }
.arena__foe .livecard { width: 64px; height: 90px; }
.arena__foe .livefield .livecard.is-land { width: 54px; height: 42px; }
.arena__you .livepile--hand .livepile__row {
min-height: 150px; padding: 12px 4vw 10px; transform: none;
}
.arena__you .livepile--hand .livecard {
width: 96px; height: 134px; margin-right: -48px; transform: none;
}
.arena__life { width: 52px; height: 52px; min-width: 52px; font-size: 22px; }
.arena-zoom { display: none; }
.arena__foe, .arena__you { padding: 4px 10px; }
.arena__dock { padding-right: 12px; }
.livetable--arena .liveact {
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
width: min(860px, calc(100vw - 16px));
}
.arenabanner span { font-size: 40px; }
.wrap--table { max-width: 100%; }
.livesearch, .livesearch__panel { max-width: calc(100vw - 16px); }
}
body:has(.livetable) .toolbar { display: none !important; }
body:has(.livetable) .wrap {
padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
body:has(.livetable) { overflow-x: hidden; }
@media screen and (max-width: 400px) {
.topbar .btn--ghost[data-act="export-all"],
.topbar .btn--ghost[data-act="signout"] { padding: 8px 8px; }
.hero__fan { height: 196px; }
.mtgcard-wrap.hero__card { width: 104px; }
.hearth__name { font-size: 21px; }
}
/* ===================================================================
Playtest: typed zones, popups, combat indicators, dice.
Added on top of the original two-row board. Tokens follow the sheet's
own --ink / --line / --gold / --surface vars so this inherits light and
dark without a second palette.
=================================================================== */
/* -- battlefield rows ---------------------------------------------- */
.livefield__creatures { display: flex; align-items: stretch; gap: 6px; }
.livefield__rows { flex: 1 1 auto; min-width: 0; }
.livefield__mana {
margin-top: 6px; padding-top: 6px;
border-top: 1px dashed var(--line);
display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px;
}
@media (min-width: 900px) {
.livefield__mana { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 10px; }
}
.livefield__row--pws .livefield__lab,
.livefield__row--artifacts .livefield__lab,
.livefield__row--enchants .livefield__lab,
.livefield__row--rocks .livefield__lab,
.livefield__row--others .livefield__lab { opacity: .75; }
/* creature sort rail, left edge */
.livesort { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; padding-top: 18px; }
.livesort__b {
width: 20px; height: 20px; line-height: 1; cursor: pointer;
font: 600 10px/1 var(--f-util, system-ui);
color: var(--ink); background: transparent;
border: 1px solid var(--line); border-radius: 4px; opacity: .55;
}
.livesort__b:hover { opacity: 1; }
.livesort__b.is-on { opacity: 1; border-color: var(--gold); color: var(--gold); }
/* -- card flags / hidden hand / combat ------------------------------ */
.livecard.is-attacking { outline: 2px solid var(--bad); outline-offset: 1px; }
.livecard.is-blocking { outline: 2px solid var(--warn); outline-offset: 1px; }
.livecard__flag {
position: absolute; top: 2px; left: 2px; z-index: 3;
font: 700 8px/1 var(--f-util, system-ui); letter-spacing: .06em;
padding: 2px 3px; border-radius: 3px; color: #fff;
}
.livecard__flag--atk { background: var(--bad); }
.livecard__flag--blk { background: var(--warn); }
.livecard.is-hidden { background: var(--surface); }
.livecard__back {
position: absolute; inset: 0; display: grid; place-items: center;
font-size: 18px; color: var(--gold); opacity: .5;
}
.livecombat {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin: 0 0 8px; padding: 7px 10px;
border: 1px solid var(--bad); border-left-width: 3px; border-radius: 6px;
background: color-mix(in srgb, var(--bad) 8%, transparent);
font: 400 12px/1.3 var(--f-util, system-ui); color: var(--ink);
}
.livecombat__dot {
width: 8px; height: 8px; border-radius: 50%; background: var(--bad);
animation: livepulse 1.2s ease-in-out infinite;
}
@keyframes livepulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
.livecombat__who { opacity: .7; flex: 1 1 100%; font-size: 11px; }
/* -- pile headers --------------------------------------------------- */
.livepile__open, .livepile__tick, .livepile__taxn {
margin-left: 5px; cursor: pointer; color: var(--ink);
background: transparent; border: 1px solid var(--line);
border-radius: 4px; padding: 0 5px; line-height: 15px;
font: 600 10px/15px var(--f-util, system-ui);
}
.livepile__open:hover, .livepile__tick:hover, .livepile__taxn:hover { border-color: var(--gold); color: var(--gold); }
.livepile__tax { margin-left: 6px; opacity: .8; white-space: nowrap; }
.livebar__life {
cursor: pointer; background: transparent; border: 1px dashed transparent;
border-radius: 5px; color: inherit; font: inherit; padding: 0 4px;
}
.livebar__life:hover { border-color: var(--gold); }
/* -- popups --------------------------------------------------------- */
.livemodal {
position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
background: rgba(8, 10, 9, .62); padding: 16px;
animation: livefade .14s ease-out;
}
@keyframes livefade { from { opacity: 0 } to { opacity: 1 } }
.livemodal__box {
width: min(880px, 100%); max-height: min(82vh, 760px);
display: flex; flex-direction: column;
background: var(--surface); color: var(--ink);
border: 1px solid var(--line); border-radius: 10px;
box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.livemodal__head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.livemodal__body { overflow: auto; padding: 12px; }
.livemodal__grid {
display: grid; gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}
.livemodal__cell { display: flex; flex-direction: column; gap: 4px; }
.livemodal__ops { display: flex; flex-wrap: wrap; gap: 3px; }
.livemodal__ops .btn { padding: 1px 5px; font-size: 10px; }
.livemodal__bulk {
margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.livemodal__log { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.6; }
/* -- dice ----------------------------------------------------------- */
.livedice { display: grid; justify-items: center; gap: 12px; }
.livedice__stage { perspective: 420px; }
.livedice__cube {
width: 86px; height: 86px; display: grid; place-items: center;
font: 700 34px/1 var(--f-display, Georgia, serif);
color: var(--gold); background: var(--bg);
border: 2px solid var(--gold); border-radius: 12px;
box-shadow: inset 0 0 22px rgba(0,0,0,.35);
}
.livedice__stage.is-rolling .livedice__cube { animation: livetumble .62s cubic-bezier(.3,.7,.4,1); }
@keyframes livetumble {
0% { transform: rotateX(0) rotateY(0) scale(1); }
30% { transform: rotateX(220deg) rotateY(140deg) scale(1.12); }
60% { transform: rotateX(430deg) rotateY(300deg) scale(.94); }
100% { transform: rotateX(720deg) rotateY(720deg) scale(1); }
}
.livedice__cap { margin: 0; font: 400 13px/1.3 var(--f-util, system-ui); }
.livedice__row { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
/* -- spell resolution ----------------------------------------------- */
.liveresolve { display: grid; justify-items: center; gap: 10px; text-align: center; }
.liveresolve__card { width: 118px; }
.liveresolve__text {
max-width: 460px; font: 400 12px/1.5 var(--f-body, Georgia, serif);
opacity: .85; border-left: 2px solid var(--line); padding-left: 10px; text-align: left;
}
.liveresolve__ops { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
/* The deal-in animation runs with fill-mode `both`, so its `to { transform:
none }` keeps applying after it finishes - and a CSS animation outranks a
normal declaration. That is why .is-tapped { transform: rotate(90deg) }
never took effect and a tapped card only ever lifted. A tapped card opts
out of the deal so it can actually lie sideways. */
.livecard.is-tapped { animation: none !important; transform: rotate(90deg); }
.livecard.is-tapped:hover { transform: rotate(90deg) scale(1.04); }
.livecard.is-attacking { animation: none !important; transform: rotate(90deg); }
.livecard.is-attacking:hover { transform: rotate(90deg) scale(1.04); }
/* -- ghost opponent -------------------------------------------------- */
.liveghost {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
margin: 6px 0 0; padding: 6px 8px;
border: 1px dashed var(--line); border-radius: 6px;
background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.liveghost__tag {
font: 600 10px/1 var(--f-util, system-ui); letter-spacing: .1em;
text-transform: uppercase; opacity: .6;
}
.liveghost__life {
cursor: pointer; background: transparent; border: 1px dashed transparent;
border-radius: 5px; color: inherit; padding: 0 5px;
font: 700 19px/1 var(--f-display, Georgia, serif);
}
.liveghost__life:hover { border-color: var(--gold); }
.liveghost .livecard { width: 54px; }
/* -- token maker ----------------------------------------------------- */
.livetokens { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.livetokens__b {
display: grid; gap: 3px; text-align: left; cursor: pointer; padding: 9px 11px;
background: var(--bg); color: var(--ink);
border: 1px solid var(--line); border-radius: 7px;
}
.livetokens__b:hover { border-color: var(--gold); }
.livetokens__b b { font: 600 13px/1.2 var(--f-body, Georgia, serif); }
.livetokens__b span { font: 400 11px/1.3 var(--f-util, system-ui); opacity: .65; }
/* The table is always dark, whatever the page theme is, and it colours
itself with fixed warm values (#cbb892, #E8CE6E) rather than the theme
tokens. Anything I added *inside* .livetable therefore has to use that
palette too - using var(--ink) gave dark text on a dark table in light
mode, which is why the combat banner was unreadable. The popups are
overlays on the page rather than on the table, so they keep the theme. */
.livetable .livecombat {
color: #efe6d4;
border-color: rgba(219, 116, 97, .85);
background: rgba(219, 116, 97, .14);
}
.livetable .livecombat__who { color: #cbb892; opacity: 1; }
.livetable .livecombat .btn { color: #efe6d4; border-color: rgba(232, 206, 110, .45); }
.livetable .liveghost {
border-color: rgba(232, 206, 110, .3);
background: rgba(232, 206, 110, .05);
}
.livetable .liveghost__tag { color: #cbb892; opacity: 1; }
.livetable .liveghost__life { color: #E8CE6E; }
.livetable .liveghost__life:hover { border-color: #E8CE6E; }
.livetable .livesort__b { color: #cbb892; border-color: rgba(232, 206, 110, .28); }
.livetable .livesort__b:hover { color: #efe6d4; }
.livetable .livesort__b.is-on { color: #140f0a; background: #E8CE6E; border-color: #E8CE6E; opacity: 1; }
.livetable .livepile__open,
.livetable .livepile__tick,
.livetable .livepile__taxn { color: #cbb892; border-color: rgba(232, 206, 110, .3); }
.livetable .livepile__open:hover,
.livetable .livepile__tick:hover,
.livetable .livepile__taxn:hover { color: #140f0a; background: #E8CE6E; border-color: #E8CE6E; }
.livetable .livepile__tax { color: #cbb892; }
.livetable .livebar__life { color: inherit; }
.livetable .livebar__life:hover { border-color: #E8CE6E; }
.livetable .livefield__mana { border-top-color: rgba(232, 206, 110, .22); }
/* a deck's own tokens lead the token maker, marked apart from the generics */
.livetokens__b--own { border-color: var(--gold); }
.livetokens__b--own b { color: var(--gold); }
/* playtest: condensed deck pick, turn ticks, token stack beside commander */
.decklist { display: grid; gap: 8px; max-width: 520px; }
.decklist__box {
max-height: 280px; overflow: auto;
border: 1px solid rgba(232,206,110,.22); border-radius: 10px;
background: rgba(8,6,4,.45); padding: 6px;
}
.decklist__g {
margin: 8px 8px 4px; font-size: 10px; letter-spacing: .14em;
text-transform: uppercase; color: #a09070;
}
.decklist__r {
display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto;
column-gap: 10px; row-gap: 0; align-items: center;
width: 100%; text-align: left; cursor: pointer;
padding: 5px 8px; margin: 0 0 2px;
border: 1px solid transparent; border-radius: 8px;
background: transparent; color: #F3E6C4;
}
.decklist__r:hover { background: rgba(232,206,110,.08); }
.decklist__r.is-on { border-color: #E8CE6E; background: rgba(232,206,110,.1); }
.decklist__art {
grid-row: 1 / span 2; width: 36px; height: 50px; border-radius: 4px;
background: #1a140c center 20% / cover no-repeat; border: 1px solid #c4a35a;
}
.decklist__n { font-size: 13px; font-weight: 650; }
.decklist__s { font-size: 11px; color: #a09070; }
.liveturn__n { display: inline-flex; align-items: center; gap: 6px; }
.liveturn__tick, .liveturn__val {
cursor: pointer; border: 1px solid rgba(232,206,110,.35);
background: rgba(10,8,6,.5); color: #E8CE6E;
font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
}
.liveturn__tick { width: 28px; height: 28px; border-radius: 6px; font-size: 16px; }
.liveturn__val { padding: 4px 10px; border-radius: 6px; font-size: 18px; letter-spacing: .04em; }
.livewells__cmd { display: flex; align-items: flex-end; gap: 12px; }
.livepile--tok .livepile__row {
min-width: 72px; min-height: 96px;
border: 1px dashed rgba(232,206,110,.18); border-radius: 8px;
}
.livebar__life { cursor: pointer; background: none; border: 0; padding: 0; }
/* ---- planeswalker abilities side ----
The walker's face keeps the picture: name, cost, type, flavour and the
loyalty seal. Its rules live on its second side, which has no art, so the
words take the body of the card under the type line. */
.fullcard--ref .fullcard__body {
grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.fullcard--ref .fullcard__gap { display: none; }
.fullcard--ref .fullcard__typeplate { margin-top: 2.2%; }
.fullcard--ref .fullcard__panel {
max-height: none;
align-self: stretch;
margin-top: 2.2%;
margin-bottom: 11%;
}
/* a walker's hover shows its face and its abilities side together */
.hovercard:has(.hovercard__ref) { width: 568px; }
.hovercard.is-on:has(.hovercard__ref) {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start;
}
.hovercard__ref .mtgcard-wrap { width: 100%; max-width: none; }
/* short rules on the abilities side share out what room is left, so the
ladder reaches the bottom instead of stopping halfway down */
.fullcard--ref .fullcard__panel {
display: flex; flex-direction: column; justify-content: space-between;
}
.fullcard--ref .fullcard__panel > p { flex: 0 0 auto; }
/* short rules on the abilities side share out what room is left, so the
ladder reaches the bottom instead of stopping partway down */
.fullcard--ref .fullcard__panel {
display: flex; flex-direction: column; justify-content: space-between;
}
.fullcard--ref .fullcard__panel > p { flex: 0 0 auto; }
/* the seal sits below this panel, not inside it, so the walker's usual
bottom allowance for it is given back to the words */
.fullcard--pw.fullcard--ref .fullcard__panel { padding-bottom: 2.6%; }