/* Decks · Codex Spread (owner pick opt-6, adapted 2026-11-01). Scoped to #decks. One continuous glass surface. */
#decks{--ink:#f3ecdc;--ink-2:#d9cfb8;--gold-2:#e2c573;--gold-ink:#f3e6c2;--og-muted:#c4b89e;--og-rim-soft:rgba(201,162,39,.16);--g5-gold-fill:linear-gradient(180deg,#f8e3a0 0%,#e7c260 45%,#c99a2e 100%);--g5-gold-ink:#1d1307;--xfade:220ms;--ease:cubic-bezier(.2,.8,.2,1);--display:"Marcellus",Georgia,serif;--text:"Source Sans 3",-apple-system,"Segoe UI",Roboto,sans-serif}
#decks .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#decks .og{background:var(--og-surface,rgba(26,21,16,.55));-webkit-backdrop-filter:var(--og-blur,blur(14px) saturate(125%));backdrop-filter:var(--og-blur,blur(14px) saturate(125%));border:1px solid var(--og-rim,rgba(201,162,39,.40));border-radius:var(--og-radius,16px);box-shadow:var(--og-shadow);color:var(--og-ink,#f0e8d6)}
@media (prefers-reduced-transparency:reduce){#decks .og{background:var(--og-solid,#1a1510);-webkit-backdrop-filter:none;backdrop-filter:none}}
#decks .gold-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;cursor:pointer;text-decoration:none;font:700 16px/1 var(--text);letter-spacing:.02em;color:var(--g5-gold-ink);background:var(--g5-gold-fill);border:1px solid #fff0bf;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(120,80,10,.45),0 0 0 1px rgba(90,60,10,.6),0 8px 22px rgba(0,0,0,.45);transition:transform .12s ease,filter .15s ease}
#decks .gold-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
#decks .gold-btn:active{transform:translateY(1px)}

#decks .dk-codex{display:grid;grid-template-columns:minmax(0,1fr) 220px;overflow:hidden;border-radius:20px}
/* all pages share one grid cell: the codex is as tall as its tallest deck, so switching never moves anything */
#decks .dk-pages{display:grid;min-width:0;position:relative}
#decks .dk-page{grid-area:1/1;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;opacity:0;visibility:hidden;transition:opacity var(--xfade) var(--ease),visibility 0s linear var(--xfade)}
#decks .dk-page.on{opacity:1;visibility:visible;transition:opacity var(--xfade) var(--ease),visibility 0s}
#decks .dk-page::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 60% at 74% 52%,color-mix(in srgb,var(--dc) 16%,transparent),transparent 72%)}
/* the text / cards division: a short gold hairline that fades at both ends */
#decks .dk-hand::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(226,197,115,.32) 30%,rgba(226,197,115,.32) 70%,transparent)}
#decks .dk-left{position:relative;padding:48px 32px 44px 44px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
#decks .dk-kick{margin:0;font:700 13px/1.2 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--og-muted)}
#decks .dk-left h3{display:flex;align-items:center;gap:14px;margin:2px 0 0;font:400 clamp(40px,3.2vw,52px)/1 var(--display);color:var(--gold-ink)}
#decks .dk-left h3 img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--dc) 55%,transparent))}
#decks .dk-verb{margin:0;font:600 14px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--dc) 45%,#fff)}
#decks .dk-engine{margin:6px 0 2px;font:400 23px/1.35 var(--display);color:var(--ink);max-width:28ch}
#decks dl{margin:0 0 12px;display:grid;gap:4px}
#decks dt{margin-top:8px;font:700 12px/1.2 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--og-muted)}
#decks dd{margin:0;color:var(--ink-2);font-size:17px;line-height:1.45;max-width:40ch}
/* the hand: four cards, all the same size, gently fanned */
#decks .dk-hand{position:relative;list-style:none;margin:0;padding:30px 32px 30px 36px;display:grid;grid-template-columns:repeat(2,var(--cw,198px));gap:18px 20px;align-items:start}
#decks .dk-cd{display:grid;justify-items:center;gap:10px;margin:0;transition:transform 300ms var(--ease)}
#decks .dk-cd img{display:block;width:100%;height:auto;aspect-ratio:600/796;filter:drop-shadow(0 12px 20px rgba(0,0,0,.6))}
#decks .dk-role{font:700 12px/1.15 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--og-muted);text-align:center}
#decks .dk-cd0 .dk-role{color:var(--gold-2)}
#decks .dk-page:not(.on) .dk-cd{transform:translateY(12px)}
/* tab list: grouped, no per-row status words */
#decks .dk-tabs{display:flex;flex-direction:column;gap:10px;padding:22px 14px 22px 0;border-left:1px solid var(--og-rim-soft)}
#decks .dk-grp+.dk-grp{padding-top:12px;border-top:1px solid var(--og-rim-soft)}
#decks .dk-gh{margin:0 0 6px 18px;font:700 11px/1.25 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--og-muted)}
#decks .dk-gl{display:flex;flex-direction:column;gap:2px}
#decks .dk-tab{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:36px 1fr;align-items:center;column-gap:10px;min-height:46px;padding:4px 12px 4px 14px;border-left:3px solid transparent;border-radius:0 12px 12px 0;color:var(--ink-2);transition:background .15s,color .15s,border-color .15s}
#decks .dk-tab img{width:36px;height:36px;object-fit:contain;opacity:.78}
#decks .dk-tab .tn{font:400 18px/1.1 var(--display)}
#decks .dk-tab:hover{background:rgba(255,255,255,.05);color:#fff}
#decks .dk-tab[aria-selected=true]{border-left-color:var(--dc);background:color-mix(in srgb,var(--dc) 18%,rgba(20,16,12,.55));color:#fff}
#decks .dk-tab[aria-selected=true] img{opacity:1}
#decks .dk-tab:focus-visible{outline:3px solid #ffe08a;outline-offset:-3px}
@media (max-width:1240px) and (min-width:761px){#decks .dk-hand{--cw:190px;padding:28px 24px 28px 28px;gap:18px 18px}#decks .dk-left{padding:40px 24px 40px 32px}}
@media (max-width:980px) and (min-width:761px){#decks .dk-page{grid-template-columns:1fr}#decks .dk-hand{grid-row:1;justify-content:center;--cw:minmax(0,220px)}#decks .dk-hand::before{display:none}}
@media (max-width:760px){
 #decks .dk-codex{grid-template-columns:1fr}
 #decks .dk-tabs{order:-1;padding:14px 12px 12px;gap:10px;border-left:0;border-bottom:1px solid var(--og-rim-soft)}
 #decks .dk-grp+.dk-grp{padding-top:10px}
 #decks .dk-gh{margin:0 0 6px 2px;text-align:left}
 #decks .dk-gl{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
 #decks .dk-tab{grid-template-columns:1fr;justify-items:center;row-gap:3px;min-height:58px;padding:6px 0 5px;border-left:0;border-bottom:3px solid transparent;border-radius:10px}
 #decks .dk-tab[aria-selected=true]{border-bottom-color:var(--dc)}
 #decks .dk-tab img{width:30px;height:30px}
 #decks .dk-tab .tn{font-size:13px}
 #decks .dk-page{grid-template-columns:1fr;align-items:start}
 #decks .dk-hand::before{display:none}
 #decks .dk-left{padding:22px 18px 8px;gap:8px}
 #decks .dk-left h3{font-size:34px}#decks .dk-left h3 img{width:42px;height:42px}
 #decks .dk-engine{font-size:20px}
 #decks dd{font-size:16px}
 #decks .dk-left .gold-btn{order:9;width:100%;margin-top:4px}
 #decks .dk-hand{order:-1;grid-row:1;padding:14px 10px 4px;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}
 #decks .dk-cd{gap:6px}
 #decks .dk-role{font-size:11px;letter-spacing:.06em}
}
@media (prefers-reduced-motion:reduce){#decks .dk-page,#decks .dk-page.on,#decks .dk-cd{transition:none}}
/* 0 px shift: every page fills the reserved (tallest) cell; the text column is centred against the hand, button follows the text */
#decks .dk-page{grid-template-rows:1fr;align-items:center}
#decks .dk-left{align-self:stretch;justify-content:center}
#decks .dk-left dl{margin-bottom:6px}
#decks .dk-left .gold-btn{margin-top:6px}
@media (min-width:761px){#decks .dk-hand{align-self:center}}
@media (max-width:980px){#decks .dk-page{grid-template-rows:auto 1fr}}
@media (max-width:760px){#decks .dk-left{justify-content:flex-start}#decks .dk-left .gold-btn{margin-top:auto}}

#decks .dk-key{color:#8fd8ff;font-size:.8em}