/* ============================================================
   art.css — the art direction pass

   style.css owns layout and component structure. This file owns the
   *look*: typography, palette depth, material, texture and the small
   imperfections that stop a UI reading as machine-generated.

   Loaded after style.css.
   ============================================================ */

/* ============================================================
   1. Typography — a real voice instead of the system default
   ============================================================ */
:root{
  /* Bahnschrift is a variable geometric grotesque on Win10+; the rest of
     the stack reaches for the same condensed-industrial feel elsewhere. */
  --font-display:"Bahnschrift","Franklin Gothic Medium","Avenir Next Condensed",
                 "Arial Narrow",Impact,sans-serif;
  --font-ui:"Bahnschrift","Segoe UI Semibold","Franklin Gothic Medium",
            "Avenir Next",system-ui,sans-serif;
  --font-num:"Bahnschrift SemiBold","Franklin Gothic Medium","DIN Alternate",
             "Avenir Next Condensed",system-ui,sans-serif;
}

body{
  font-family:var(--font-ui);
  font-stretch:92%;
  letter-spacing:.2px;
}

.blind-name,.ov-title,.sc-head,.bc-name,.hand-title,.big-btn,.coll-tab,
.dk-name,.ub-title,.shelf-label,.label,.stat .k,.mini-btn,.title-tag{
  font-family:var(--font-display);
  font-stretch:80%;
  letter-spacing:1.1px;
}

.blind-target,.round-score,.chips,.mult,.bc-target,.stat .v,
.sc-row .pv,.title-stat .ts-v,.cash-line .amt{
  font-family:var(--font-num);
  font-stretch:84%;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.3px;
}

.card .cname{
  font-family:var(--font-display);
  font-stretch:78%;
  letter-spacing:.4px;
}

/* ============================================================
   2. Palette — deeper, warmer, less "default bootstrap game"
   ============================================================ */
:root{
  --felt:#1c5340;
  --felt-dark:#0f3626;
  --felt-lit:#2f8560;
  --ink:#151c24;
  --ink-2:#1e2731;
  --ink-3:#2b3742;
  --edge:#080b0f;
  --chip:#1b9dff;
  --chip-dark:#0a5fae;
  --mult:#ff5a4d;
  --mult-dark:#b8332a;
  --gold:#f5b73c;
  --gold-dark:#a56b12;
  --text:#f6f2e6;
  --dim:#8f9daa;
  --paper:#efe7d2;
  --paper-2:#cfc3a4;
  --paper-edge:#8d8065;
}

/* ============================================================
   3. Texture — procedural, no asset files
   ============================================================ */
:root{
  /* Data URIs must stay on ONE line: a CSS backslash line-continuation does
     not survive CRLF endings, which silently killed every texture. */
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23g)' opacity='0.4'/></svg>");
  --weave:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.5 0.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23w)' opacity='0.55'/></svg>");
  --fibre:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='1.1 0.35' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='90' height='90' filter='url(%23f)' opacity='0.5'/></svg>");
}

/* the table: lit centre, dark corners, woven texture, vignette */
body{
  background:
    radial-gradient(ellipse 120% 90% at 50% -10%, var(--felt-lit) 0%, transparent 62%),
    radial-gradient(ellipse 100% 100% at 50% 45%, var(--felt) 0%, var(--felt-dark) 100%),
    #0c2c1f;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:var(--weave);
  opacity:.26;
  mix-blend-mode:overlay;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:89;
  background:radial-gradient(ellipse 78% 72% at 50% 46%,transparent 40%,rgba(0,0,0,.55) 100%);
}
#app{position:relative;z-index:1}

/* a whisper of grain over the whole frame kills the flat-vector look */
#fxCanvas{z-index:90}
#grainLayer{
  position:fixed;inset:0;pointer-events:none;z-index:92;
  background-image:var(--grain);
  opacity:.055;
  mix-blend-mode:overlay;
}

/* ============================================================
   4. Panels — real edges instead of a flat fill
   ============================================================ */
.panel,.blind-plate,#scorecard,.tray,#playfield{
  position:relative;
}
.panel,#scorecard{
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.055),transparent 42%),
    var(--grain);
  background-blend-mode:normal,overlay;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:
    0 4px 0 var(--edge),
    0 10px 22px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.1);
}
/* the plate carries its own fill: art.css overrides background-image, and the
   base rule declared its gradient through the `background` shorthand */
.blind-plate{
  background-color:var(--ink);
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.06),transparent 40%),
    var(--grain),
    linear-gradient(180deg,#27323e,#161e26);
  background-blend-mode:normal,overlay,normal;
  border:2px solid var(--gold-dark);
  box-shadow:0 4px 0 var(--edge),0 10px 22px rgba(0,0,0,.42),
             inset 0 1px 0 rgba(255,255,255,.1);
}
.blind-plate.boss{
  background-image:
    linear-gradient(180deg,rgba(255,140,140,.09),transparent 42%),
    var(--grain),
    linear-gradient(180deg,#44242e,#21131a);
  border-color:#9b3444;
  box-shadow:0 4px 0 var(--edge),0 10px 26px rgba(0,0,0,.5),
             inset 0 1px 0 rgba(255,255,255,.08),0 0 22px rgba(155,52,68,.25);
}

#playfield{
  background:
    radial-gradient(ellipse 70% 60% at 50% 38%,rgba(255,255,255,.06),transparent 70%),
    rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 0 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}
.tray{
  background:
    linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.3));
  border:2px dashed rgba(255,255,255,.13);
  box-shadow:inset 0 2px 12px rgba(0,0,0,.35);
}

/* ============================================================
   5. Icons
   ============================================================ */
.iconwrap{display:inline-flex;align-items:center;justify-content:center;line-height:0}
.icn{width:1em;height:1em;display:block;overflow:visible}
.card .cart{font-size:34px}
.card .cart .icn{
  width:34px;height:34px;
  filter:drop-shadow(0 1.5px 0 rgba(0,0,0,.28));
}
.card .cart .iconwrap{color:#2a2118}

/* icon colour keyed to what the card does */
.card.rar-common   .cart .iconwrap{color:#3c3125}
.card.rar-uncommon .cart .iconwrap{color:#14567e}
.card.rar-rare     .cart .iconwrap{color:#9c2430}
.card.rar-legendary .cart .iconwrap{color:#5b2e91}
.card.kind-rune    .cart .iconwrap{color:#1e3d74}
.card.kind-omen    .cart .iconwrap{color:#4e2c7a}
.card.kind-voucher .cart .iconwrap{color:#6b4409}
.card.kind-pack    .cart .iconwrap{color:#bcd2e6}
.card.kind-boss    .cart .iconwrap{color:#ffc9c9}
.card.kind-tag     .cart .iconwrap{color:#1d5238}
.card.unknown      .cart .iconwrap{color:#53606d}

.blind-debuff .iconwrap,#bossBanner .iconwrap{color:#ff9d9d;vertical-align:-3px}
.blind-debuff .icn,#bossBanner .icn{width:15px;height:15px}
.dk-icon .icn{width:30px;height:30px}
.deck-card .dk-icon{color:var(--gold);line-height:0;display:flex;justify-content:center}
.deck-card.locked .dk-icon{color:#5d6a77}
.sc-row .catmark{color:var(--dim);line-height:0;display:flex;flex:0 0 auto}
.sc-row .catmark .icn{width:14px;height:14px}
.sc-row.can .catmark{color:var(--good)}
.sc-row.zero .catmark{color:#8a5252}

/* ============================================================
   6. Cards — printed stock, rarity frames, asymmetry
   ============================================================ */
.card{
  background:
    linear-gradient(178deg,rgba(255,255,255,.5),transparent 30%),
    var(--fibre),
    linear-gradient(168deg,var(--paper) 0%,#e3d9c0 52%,var(--paper-2) 100%);
  background-blend-mode:soft-light,overlay,normal;
  border:2px solid var(--paper-edge);
  border-radius:8px;
  box-shadow:
    0 4px 0 rgba(0,0,0,.5),
    0 7px 14px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -2px 3px rgba(0,0,0,.13);
  color:#221b13;
  transform:rotate(var(--rest-rot,0deg));
}
.card .cname{color:#2c231a;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.card .cfoot{color:#6d6047;letter-spacing:.3px}

/* an inner rule, the way a printed card has one */
.card::after{
  content:"";position:absolute;inset:3px;border-radius:5px;pointer-events:none;
  border:1px solid rgba(70,55,35,.2);
}

/* rarity is a frame treatment, not just a border colour */
.card.rar-uncommon{border-color:#2c6f96;
  box-shadow:0 4px 0 rgba(0,0,0,.5),0 7px 14px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 3px rgba(44,111,150,.16)}
.card.rar-rare{border-color:#b2333f;
  box-shadow:0 4px 0 rgba(0,0,0,.5),0 7px 14px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 3px rgba(178,51,63,.18)}
.card.rar-legendary{border-color:#7a4bb8;
  box-shadow:0 4px 0 rgba(0,0,0,.5),0 7px 18px rgba(0,0,0,.4),
             inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 3px rgba(122,75,184,.22),
             0 0 16px rgba(155,107,216,.3)}
/* legendaries get a slow sheen so they read as special on the shelf */
.card.rar-legendary::before{
  content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);
  background-size:260% 100%;
  animation:sheen 3.6s ease-in-out infinite;
}
@keyframes sheen{0%{background-position:180% 0}55%,100%{background-position:-80% 0}}

/* corner notches mark rarity without needing a legend */
.card.rar-uncommon::before,.card.rar-rare::before{
  content:"";position:absolute;top:4px;right:4px;width:7px;height:7px;pointer-events:none;
  border-top:2px solid currentColor;border-right:2px solid currentColor;opacity:.55;
}
.card.rar-uncommon::before{color:#2c6f96}
.card.rar-rare::before{color:#b2333f}

.card.kind-rune{background:
    linear-gradient(178deg,rgba(255,255,255,.45),transparent 30%),var(--fibre),
    linear-gradient(168deg,#d8e6ff,#9db9e8);
  background-blend-mode:soft-light,overlay,normal;border-color:#41649e}
.card.kind-omen{background:
    linear-gradient(178deg,rgba(255,255,255,.45),transparent 30%),var(--fibre),
    linear-gradient(168deg,#ecd9ff,#b99fe0);
  background-blend-mode:soft-light,overlay,normal;border-color:#6b4d99}
.card.kind-voucher{background:
    linear-gradient(178deg,rgba(255,255,255,.45),transparent 30%),var(--fibre),
    linear-gradient(168deg,#ffe9c2,#dfba78);
  background-blend-mode:soft-light,overlay,normal;border-color:#9a7327}
.card.kind-pack{background:
    linear-gradient(178deg,rgba(255,255,255,.09),transparent 30%),var(--grain),
    linear-gradient(168deg,#2b3c50,#141e2a);
  background-blend-mode:soft-light,overlay,normal;border-color:#46596e;color:#e6eef5}
.card.kind-pack .cname{color:#eaf1f7;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.card.kind-boss{background:
    linear-gradient(178deg,rgba(255,255,255,.1),transparent 30%),var(--grain),
    linear-gradient(168deg,#4c2831,#2a1318);
  background-blend-mode:soft-light,overlay,normal;border-color:#8e2f3f;color:#f4dede}
.card.kind-boss .cname{color:#ffe3e3;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.card.kind-tag{background:
    linear-gradient(178deg,rgba(255,255,255,.45),transparent 30%),var(--fibre),
    linear-gradient(168deg,#d6ecdd,#96c5aa);
  background-blend-mode:soft-light,overlay,normal;border-color:#4a8768}
.card.unknown{background:
    linear-gradient(168deg,#2c3641,#1a222b);border-color:#38434f;color:#57646f}
.card.unknown::after{border-color:rgba(255,255,255,.05)}

/* hand-dealt, not grid-placed */
.charm-tray .card:nth-child(4n+1){--rest-rot:-1.4deg}
.charm-tray .card:nth-child(4n+2){--rest-rot:.9deg}
.charm-tray .card:nth-child(4n+3){--rest-rot:-.5deg}
.charm-tray .card:nth-child(4n+4){--rest-rot:1.6deg}
.consumable-tray .card:nth-child(odd){--rest-rot:1.1deg}
.consumable-tray .card:nth-child(even){--rest-rot:-1.3deg}
.ov-row .shop-item:nth-child(3n+1) .card{--rest-rot:-1.1deg}
.ov-row .shop-item:nth-child(3n+2) .card{--rest-rot:.7deg}
.ov-row .shop-item:nth-child(3n+3) .card{--rest-rot:-1.7deg}

.card:hover{transform:translateY(-7px) scale(1.05) rotate(0deg)}

/* ============================================================
   7. Dice — bevelled, textured objects with real materials
   ============================================================ */
.die{
  background:
    radial-gradient(ellipse 70% 55% at 32% 22%,rgba(255,255,255,.95),transparent 62%),
    var(--fibre),
    linear-gradient(162deg,#fffdf5 0%,#f0e9d6 46%,#d8cfb6 100%);
  background-blend-mode:soft-light,overlay,normal;
  border:1px solid #b5a887;
  border-radius:16px;
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.95),
    inset 0 -3px 4px rgba(120,105,75,.4),
    inset 0 0 0 1px rgba(255,255,255,.35),
    0 5px 0 #9b8f72,
    0 9px 16px rgba(0,0,0,.45);
  transform:rotate(var(--rest-rot,0deg));
}
#diceRow .die:nth-child(5n+1){--rest-rot:-2.4deg}
#diceRow .die:nth-child(5n+2){--rest-rot:1.6deg}
#diceRow .die:nth-child(5n+3){--rest-rot:-.9deg}
#diceRow .die:nth-child(5n+4){--rest-rot:2.7deg}
#diceRow .die:nth-child(5n+5){--rest-rot:-1.8deg}

.die:hover{transform:translateY(-5px) rotate(var(--rest-rot,0deg))}
.die.held{
  transform:translateY(-17px) rotate(var(--rest-rot,0deg));
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.95),
    inset 0 -3px 4px rgba(120,105,75,.4),
    0 5px 0 var(--gold-dark),
    0 11px 18px rgba(0,0,0,.5),
    0 0 0 2px var(--gold);
  border-color:var(--gold);
}
.pip{
  width:13px;height:13px;
  background:radial-gradient(circle at 36% 30%,#4a5460,#161b22 72%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.28),
    0 1px 0 rgba(255,255,255,.55);
}

/* --- materials --- */
.die.enh-bonus{
  background:
    radial-gradient(ellipse 70% 55% at 32% 22%,rgba(255,255,255,.9),transparent 62%),
    var(--fibre),linear-gradient(162deg,#dcefff,#93bee4);
  background-blend-mode:soft-light,overlay,normal;
  border-color:#5e90b8;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.8),inset 0 -3px 4px rgba(40,80,120,.4),
             0 5px 0 #4a7ca5,0 9px 16px rgba(0,0,0,.45);
}
.die.enh-mult{
  background:
    radial-gradient(ellipse 70% 55% at 32% 22%,rgba(255,255,255,.9),transparent 62%),
    var(--fibre),linear-gradient(162deg,#ffdbd6,#e39089);
  background-blend-mode:soft-light,overlay,normal;
  border-color:#c4675f;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.8),inset 0 -3px 4px rgba(140,50,45,.4),0 5px 0 #b25b54,0 9px 16px rgba(0,0,0,.45);
}
.die.enh-gold{
  background:
    linear-gradient(162deg,#fff6d0 0%,#f2cf67 30%,#c99518 55%,#f7dd8f 72%,#b9860f 100%);
  border-color:#8f6408;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.85),inset 0 -3px 5px rgba(110,72,4,.55),
             0 5px 0 #8a6208,0 9px 16px rgba(0,0,0,.5);
}
.die.enh-gold .pip{background:radial-gradient(circle at 36% 30%,#6b5312,#2a1f03 72%)}
.die.enh-steel{
  background:
    repeating-linear-gradient(168deg,rgba(255,255,255,.16) 0 1px,transparent 1px 3px),
    linear-gradient(162deg,#f2f5f8 0%,#c3ccd6 40%,#8c97a4 70%,#dde3ea 100%);
  border-color:#77828f;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.9),inset 0 -3px 5px rgba(50,60,70,.5),
             0 5px 0 #6c7783,0 9px 16px rgba(0,0,0,.45);
}
.die.enh-glass{
  background:
    linear-gradient(150deg,rgba(255,255,255,.85) 0%,rgba(205,235,255,.35) 45%,rgba(255,255,255,.6) 100%);
  border-color:rgba(220,245,255,.9);
  backdrop-filter:blur(1px);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.95),inset 0 -3px 6px rgba(120,180,220,.35),
             0 5px 0 rgba(150,190,215,.55),0 9px 18px rgba(0,0,0,.35),
             0 0 16px rgba(180,230,255,.45);
}
.die.enh-glass::after{
  content:"";position:absolute;inset:0;border-radius:15px;pointer-events:none;
  background:linear-gradient(122deg,transparent 42%,rgba(255,255,255,.75) 50%,transparent 58%);
}
.die.enh-lucky{
  background:
    radial-gradient(ellipse 70% 55% at 32% 22%,rgba(255,255,255,.9),transparent 62%),
    var(--fibre),linear-gradient(162deg,#dcffdf,#86ce90);
  background-blend-mode:soft-light,overlay,normal;
  border-color:#4f9a5c;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.8),inset 0 -3px 4px rgba(30,90,45,.4),0 5px 0 #478a53,0 9px 16px rgba(0,0,0,.45);
}
.die.enh-stone{
  background:var(--grain),linear-gradient(162deg,#b9b6ae 0%,#8d8a82 48%,#6d6a63 100%);
  background-blend-mode:overlay,normal;
  border-color:#5d5a54;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.35),inset 0 -3px 5px rgba(0,0,0,.45),
             0 5px 0 #55524c,0 9px 16px rgba(0,0,0,.5);
}
.die.enh-stone .pip{background:radial-gradient(circle at 36% 30%,#575450,#26241f 72%)}

/* editions read as surface treatments, not just a glow */
.die.ed-foil{box-shadow:inset 0 2px 1px rgba(255,255,255,.9),0 5px 0 #5b7c96,
  0 9px 16px rgba(0,0,0,.45),0 0 20px rgba(120,190,255,.7)}
.die.ed-holo{box-shadow:inset 0 2px 1px rgba(255,255,255,.9),0 5px 0 #8d5f8a,
  0 9px 16px rgba(0,0,0,.45),0 0 20px rgba(255,120,220,.6)}
.die.ed-poly{
  background:linear-gradient(125deg,#ffd7e3,#d7f0ff,#dcffd9,#fff4d4,#ffd7e3);
  background-size:300% 300%;
  animation:polyshift 5s linear infinite;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.9),0 5px 0 #7a9a6c,
    0 9px 16px rgba(0,0,0,.45),0 0 22px rgba(255,190,90,.6);
}
@keyframes polyshift{0%{background-position:0% 50%}100%{background-position:300% 50%}}

.die .dtag{
  font-family:var(--font-display);font-stretch:76%;letter-spacing:.7px;
  background:#12181f;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 2px 0 rgba(0,0,0,.5);
}
.die .seal{border:1.5px solid rgba(0,0,0,.35);box-shadow:0 2px 0 rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.4)}

/* ============================================================
   8. Pips / Fortune readouts — lit plates, not flat swatches
   ============================================================ */
.chips{
  background:linear-gradient(180deg,#3fb2ff,#0a6fc4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(0,0,0,.32),0 2px 6px rgba(0,0,0,.3);
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.mult{
  background:linear-gradient(180deg,#ff7a6d,#c9372c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(0,0,0,.32),0 2px 6px rgba(0,0,0,.3);
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.blind-target,.round-score{text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 18px rgba(255,90,77,.25)}
.round-score{color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 20px rgba(245,183,60,.3)}

/* ============================================================
   9. Buttons — pressed metal, not flat rectangles
   ============================================================ */
.big-btn,.ov-btn,.bc-btn{
  border:1px solid rgba(0,0,0,.35);
  background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(0,0,0,.14));
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.big-btn.roll{background-color:var(--mult)}
.big-btn.score{background-color:var(--chip)}
.big-btn.sort{background-color:var(--ink-3)}
.ov-btn.gold,.bc-btn{text-shadow:0 1px 0 rgba(255,255,255,.25)}
.mini-btn,.coll-tab,.seg button{
  background-image:linear-gradient(180deg,rgba(255,255,255,.08),transparent);
  border:1px solid rgba(255,255,255,.06);
}

/* ============================================================
   10. Scorecard rows — ledger lines
   ============================================================ */
.sc-row{
  background:linear-gradient(180deg,rgba(255,255,255,.045),transparent),var(--ink-2);
  border:1px solid rgba(255,255,255,.05);
  border-left:3px solid transparent;
}
.sc-row .lv{
  background:linear-gradient(180deg,#d7981f,#9a6409);
  color:#22180a;text-shadow:none;font-family:var(--font-num);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.sc-head{
  text-shadow:0 1px 0 rgba(0,0,0,.6);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding-bottom:7px;margin-bottom:3px;
}

/* ============================================================
   11. Title wordmark — hand-set type, not a font dump
   ============================================================ */
.wordmark{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  margin:2px 0;user-select:none;line-height:.92;
}
.wm-line{display:flex;align-items:center;justify-content:center;gap:1px}
.wm-top .wm{font-size:25px;letter-spacing:5px}
.wm-bottom .wm{font-size:68px}
.wm-top{margin-bottom:2px}
.wordmark .wm{
  font-family:var(--font-display);
  font-stretch:72%;
  font-size:68px;
  line-height:.92;
  font-weight:700;
  background:linear-gradient(178deg,#fff3cf 0%,#f5b73c 46%,#a2660d 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.45)) drop-shadow(0 5px 10px rgba(0,0,0,.5));
  display:inline-block;
}
/* each letter sits slightly differently, the way hand-set metal type does */
.wordmark .wm:nth-child(1){transform:rotate(-2.6deg) translateY(1px)}
.wordmark .wm:nth-child(2){transform:rotate(1.4deg) translateY(-1px)}
.wordmark .wm:nth-child(3){transform:rotate(-.8deg)}
.wordmark .wm:nth-child(4){transform:rotate(2.2deg) translateY(1px)}
.wordmark .wm:nth-child(5){transform:rotate(-1.6deg)}
.wordmark .wm:nth-child(6){transform:rotate(.9deg) translateY(-1px)}
.wordmark .wm:nth-child(7){transform:rotate(-2deg) translateY(1px)}
.wordmark .wm:nth-child(8){transform:rotate(1.8deg)}
.wordmark .wm-die{
  width:54px;height:54px;margin:0 2px;color:var(--gold);
  transform:rotate(-9deg);
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.45));
}
.wordmark .wm-die .icn{width:54px;height:54px}
.version-stamp{margin-top:4px;font-size:10px;letter-spacing:1.6px;opacity:.5}
.title-rule{
  width:210px;height:2px;margin:8px auto 0;
  background:linear-gradient(90deg,transparent,var(--gold-dark),transparent);
}
.title-tag{color:#a9b6c2;font-size:12px;letter-spacing:4px}

/* ============================================================
   12. Overlays
   ============================================================ */
#overlay{background:rgba(3,10,7,.76);backdrop-filter:blur(3px) saturate(.85)}
#overlayInner{
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.05),transparent 30%),
    var(--grain),
    linear-gradient(180deg,#233648,#131c26);
  background-blend-mode:normal,overlay,normal;
  border:2px solid #3f566b;
  box-shadow:0 14px 0 rgba(0,0,0,.45),0 24px 60px rgba(0,0,0,.6),
             inset 0 1px 0 rgba(255,255,255,.1);
}
.ov-title{text-shadow:0 2px 0 rgba(0,0,0,.5)}
.blind-choice{
  background-image:linear-gradient(180deg,rgba(255,255,255,.05),transparent 40%),var(--grain);
  background-blend-mode:normal,overlay;
  box-shadow:0 5px 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);
}
.blind-choice.boss{
  background-image:linear-gradient(180deg,rgba(255,120,120,.08),transparent 45%),var(--grain);
  background-color:#2a171c;
}
.deck-card{
  background-image:linear-gradient(180deg,rgba(255,255,255,.05),transparent 45%),var(--grain);
  background-blend-mode:normal,overlay;
}
.stake-chip{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 0 rgba(0,0,0,.35)}
#tooltip{
  background-image:linear-gradient(180deg,rgba(255,255,255,.05),transparent 40%),
                   linear-gradient(180deg,#16212b,#0d141b);
  border:1px solid #4a5e72;
  box-shadow:0 8px 0 rgba(0,0,0,.4),0 16px 34px rgba(0,0,0,.55);
}
#tooltip .tt-name{font-family:var(--font-display);font-stretch:82%;letter-spacing:.8px}
.toast{
  background-image:linear-gradient(180deg,rgba(255,255,255,.06),transparent),
                   linear-gradient(180deg,#16212b,#0d141b);
  border:1px solid #4a5e72;
}

/* ============================================================
   13. Reduced motion / contrast overrides
   ============================================================ */
html.reduced-motion .card.rar-legendary::before,
html.reduced-motion .die.ed-poly{animation:none}
html.reduced-motion .card,html.reduced-motion .die{--rest-rot:0deg}
html.high-contrast body::before,html.high-contrast body::after,
html.high-contrast #grainLayer{display:none}
html.high-contrast .card{background:#faf7f0;color:#000}
html.high-contrast .die{background:#fff}