/* The Grim Path design system ("The Deck"), on the site. Source of truth: the Design System artifact "The Grim Path".
   Tokens are scoped to .gp so nothing leaks into older screens; every redesigned view sits inside a .gp container. */
@font-face{font-family:"Alegreya SC";font-weight:700;font-style:normal;font-display:swap;src:url("/fonts/alegreya-sc-700.woff2") format("woff2")}
@font-face{font-family:"Jersey 10";font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/jersey-10-400.woff2") format("woff2")}
.gp{--night:#0b0809;--felt:#140f10;--felt-2:#1d1517;--ink:#0a0607;--rim:#3b2a22;--rim-hi:#5a4234;--bone:#efe2c8;--dim:#b3a18b;--faint:#8f7d6c;--card:#e9dcbf;--card-spent:#cdbd9b;--card-ink:#20160f;--card-sub:#5b4b3a;--good-ink:#3a6a25;--biome:#d9572b;--biome-hi:#f59a52;--biome-deep:#a83a18;--biome-ember:#d9572b;--biome-ember-hi:#f59a52;--biome-ember-deep:#a83a18;--biome-mire:#3fa6a0;--biome-mire-hi:#7fd6cf;--biome-mire-deep:#236b65;--biome-bramble:#6fae4c;--biome-bramble-hi:#a6d97f;--biome-bramble-deep:#36661f;--biome-gloam:#9a6ad8;--biome-gloam-hi:#c9a6ff;--biome-gloam-deep:#6a3fb0;--biome-hollow:#9fb0c0;--biome-hollow-hi:#dfe7ee;--biome-hollow-deep:#4f5f6e;--odds-good:#4f8f34;--odds-fair:#b07a1c;--odds-bad:#b0412a;--stat-good:#8fd16a;--mote:#e9b54f;--prov:#c08a58;--time:#8ccfff;--r-common:#a9b2bd;--r-uncommon:#5fcf73;--r-rare:#4ea6ff;--r-mythic:#b884ff;--r-mythic-edge:#f0c55a;--danger-face:#3c1517;--danger-text:#f6c6b8;--font-display:"Alegreya SC", Georgia, serif;--font-body:Georgia, "Gelasio", "Times New Roman", serif;--font-number:"Jersey 10", ui-monospace, monospace;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:22px;--space-6:28px;--space-7:48px;--radius-none:0;--radius-coin:50%;--raise:0 0 0 2px #0a0607, 0 5px 0 #0a0607;--raise-hover:0 0 0 2px #0a0607, 0 7px 0 #0a0607;--raise-press:0 0 0 2px #0a0607, inset 0 2px 6px rgba(0,0,0,0.45);--card-rest:0 0 0 3px #0a0607, 0 14px 26px rgba(0,0,0,0.55);--table:0 0 0 3px #0a0607, 0 0 0 5px #3b2a22, 0 0 0 8px #0a0607, 0 40px 90px rgba(0,0,0,0.6)}
/* The Grim Path: component styles. Loaded after tokens.css, which defines every colour, font and shadow named here.
   Four rules: a choice is a CARD you play; anything else you press is a RAISED rectangle; FLAT means information;
   COLOUR is the label. Square corners everywhere except the odds coin. */

/* ---- biome: one class on a container swaps the accent for everything inside ---- */
.gp-ember{--biome:var(--biome-ember);--biome-hi:var(--biome-ember-hi);--biome-deep:var(--biome-ember-deep)}
.gp-mire{--biome:var(--biome-mire);--biome-hi:var(--biome-mire-hi);--biome-deep:var(--biome-mire-deep)}
.gp-bramble{--biome:var(--biome-bramble);--biome-hi:var(--biome-bramble-hi);--biome-deep:var(--biome-bramble-deep)}
.gp-gloam{--biome:var(--biome-gloam);--biome-hi:var(--biome-gloam-hi);--biome-deep:var(--biome-gloam-deep)}
.gp-hollow{--biome:var(--biome-hollow);--biome-hi:var(--biome-hollow-hi);--biome-deep:var(--biome-hollow-deep)}

/* ---- the table: every pop-up sits on one ---- */
.gp-table{position:relative;box-sizing:border-box;background:var(--felt);color:var(--bone);font-family:var(--font-body);padding:var(--space-6);box-shadow:var(--table)}
.gp-kicker{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.12em;color:var(--biome-hi)}
.gp-title{margin:2px 0 0;font-family:var(--font-display);font-weight:700;font-size:34px;line-height:1;color:var(--bone);text-shadow:0 2px 0 var(--ink)}
.gp-prompt{margin:0;font-family:var(--font-body);font-size:21px;line-height:1.42;color:var(--bone);text-wrap:balance}
.gp-label{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.1em;color:var(--faint)}
.gp-panel{background:var(--felt-2);box-shadow:0 0 0 2px var(--ink), inset 0 0 0 1px var(--rim);padding:var(--space-4)}

/* ---- buttons: raised rectangles. Rest, hover (lift), pressed (sink) ---- */
.gp-btn{all:unset;cursor:pointer;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:11px 22px 9px;
  font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:.05em;color:var(--bone);background:linear-gradient(180deg,#2c2120,#211818);
  box-shadow:0 0 0 2px var(--ink), inset 0 0 0 1px var(--rim-hi), 0 5px 0 var(--ink);transition:transform 90ms ease, box-shadow 90ms ease, filter 90ms ease}
.gp-btn--primary{color:#fff1dc;background:linear-gradient(180deg,var(--biome) 0,var(--biome-deep) 45%);text-shadow:0 1px 0 rgba(0,0,0,.35);
  box-shadow:0 0 0 2px var(--ink), inset 0 0 0 1px rgba(255,220,180,.45), 0 5px 0 var(--ink)}
.gp-btn--danger{color:var(--danger-text);background:var(--danger-face);box-shadow:0 0 0 2px var(--ink), inset 0 0 0 1px #7e2a20, 0 5px 0 var(--ink)}
.gp-btn--quiet{background:none;box-shadow:none;color:var(--dim);min-height:0;padding:6px 2px;border-bottom:2px solid var(--faint)}
.gp-btn:hover,.gp-btn.is-hover{transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 0 0 2px var(--ink), inset 0 0 0 1px var(--rim-hi), 0 7px 0 var(--ink)}
.gp-btn--primary:hover,.gp-btn--primary.is-hover{box-shadow:0 0 0 2px var(--ink), inset 0 0 0 1px rgba(255,220,180,.6), 0 7px 0 var(--ink), 0 0 24px var(--biome)}
.gp-btn:active,.gp-btn.is-press{transform:translateY(5px);filter:none;box-shadow:var(--raise-press)}
.gp-btn--quiet:hover,.gp-btn--quiet.is-hover,.gp-btn--quiet:active,.gp-btn--quiet.is-press{transform:none;filter:none;box-shadow:none;color:var(--bone);border-color:var(--biome-hi)}
.gp-btn:focus-visible{outline:3px solid var(--biome-hi);outline-offset:4px}
.gp-btn[disabled]{cursor:default;transform:none;filter:saturate(.35) brightness(.8);box-shadow:0 0 0 2px var(--ink), inset 0 0 0 1px var(--rim-hi)}
.gp-btn .gp-n{font-family:var(--font-number);font-size:24px;line-height:.8}
.gp-btn img{width:20px;height:20px;image-rendering:pixelated}
.gp-x{min-height:40px;padding:6px 14px}

/* ---- play cards: the wood's choices ---- */
.gp-hand{display:flex;justify-content:center;align-items:flex-end;gap:var(--space-5);padding-top:24px}
.gp-card{all:unset;cursor:pointer;box-sizing:border-box;position:relative;width:228px;height:268px;background:var(--card);color:var(--card-ink);display:flex;flex-direction:column;padding:14px 14px 12px;
  box-shadow:0 0 0 3px var(--ink), inset 0 0 0 5px var(--card), inset 0 0 0 7px var(--biome), 0 14px 26px rgba(0,0,0,.55);transition:transform 180ms cubic-bezier(.34,1.56,.64,1), box-shadow 180ms ease}
.gp-card__art{height:108px;margin:2px 0 10px;box-shadow:0 0 0 2px var(--ink);overflow:hidden;position:relative;background:#1c1416}
.gp-card__art>img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.gp-card__ico{position:absolute;right:6px;bottom:6px;width:44px;height:44px;background:rgba(10,6,7,.75);box-shadow:0 0 0 2px var(--ink);display:grid;place-items:center}
.gp-card__ico img{width:36px;height:36px;image-rendering:pixelated}
.gp-card__name{font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1.12;text-align:center;text-wrap:balance}
.gp-card__rule{margin-top:6px;font-family:var(--font-body);font-style:italic;font-size:13.5px;line-height:1.35;text-align:center;color:var(--card-sub)}
.gp-card__rule b{font-style:normal;font-weight:400;color:var(--good-ink)}
.gp-card__play{margin-top:auto;align-self:center;font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--biome-deep);opacity:0;transition:opacity 120ms ease}
.gp-coin{z-index:3;position:absolute;left:-16px;top:-16px;width:60px;height:60px;border-radius:var(--radius-coin);display:grid;place-items:center;font-family:var(--font-number);font-size:30px;line-height:1;color:#fff6e4;background:var(--odds-good);box-shadow:0 0 0 3px var(--ink), inset 0 -4px 0 rgba(0,0,0,.28)}
.gp-coin--fair{background:var(--odds-fair)} .gp-coin--bad{background:var(--odds-bad)} .gp-coin--sure{background:#4a3a30;font-family:var(--font-display);font-weight:700;font-size:16px}
.gp-cost{z-index:3;position:absolute;right:-12px;top:-12px;width:44px;height:50px;display:grid;place-items:center;font-family:var(--font-number);font-size:26px;color:var(--card-ink);background:var(--prov);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.gp-card:hover,.gp-card.is-lift,.gp-card:focus-visible{transform:translateY(-30px) scale(1.04);z-index:5;outline:none;
  box-shadow:0 0 0 3px var(--ink), inset 0 0 0 5px var(--card), inset 0 0 0 7px var(--biome-hi), 0 0 0 7px var(--biome-hi), 0 0 0 10px var(--ink), 0 0 30px var(--biome), 0 34px 40px rgba(0,0,0,.6)}
.gp-card:hover .gp-card__play,.gp-card.is-lift .gp-card__play,.gp-card:focus-visible .gp-card__play{opacity:1}
.gp-card.is-spent,.gp-card[disabled]{cursor:default;background:var(--card-spent);filter:saturate(.55) brightness(.82);transform:none;box-shadow:0 0 0 3px var(--ink), inset 0 0 0 5px var(--card-spent), inset 0 0 0 7px var(--biome), 0 14px 26px rgba(0,0,0,.55)}
.gp-hand .gp-card:not(:hover):not(.is-lift):first-child{transform:rotate(-3deg) translateY(6px)}
.gp-hand .gp-card:not(:hover):not(.is-lift):last-child{transform:rotate(3deg) translateY(6px)}

/* ---- the stamp: the verdict, slapped on the played card ---- */
.gp-stamp{display:inline-block;transform:rotate(-12deg);font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:.06em;color:#eaf7df;background:var(--odds-good);padding:8px 18px 6px;box-shadow:0 0 0 3px var(--ink), inset 0 0 0 2px rgba(255,255,255,.25), 0 6px 0 var(--ink)}
.gp-stamp--fail{background:var(--odds-bad)}

/* ---- item cards: rarity is the frame ---- */
.gp-item{all:unset;cursor:pointer;box-sizing:border-box;position:relative;width:96px;height:128px;background:var(--card);color:var(--card-ink);display:flex;flex-direction:column;align-items:center;padding:16px 6px 8px;gap:4px;
  --rc:var(--r-common);box-shadow:0 0 0 3px var(--ink), inset 0 0 0 4px var(--card), inset 0 0 0 6px var(--rc), 0 6px 0 var(--ink);transition:transform 140ms cubic-bezier(.34,1.56,.64,1)}
.gp-item img{width:52px;height:52px;image-rendering:pixelated;position:relative;z-index:1}
.gp-item__name{font-family:var(--font-display);font-weight:700;font-size:11.5px;line-height:1.05;text-align:center;text-wrap:balance;position:relative;z-index:1}
.gp-item__gems{position:absolute;top:7px;display:flex;gap:3px;z-index:2}
.gp-item__gems i{width:6px;height:6px;transform:rotate(45deg);background:var(--rc);box-shadow:0 0 0 1px rgba(10,6,7,.5)}
.gp-item__qty{position:absolute;right:-8px;bottom:-8px;z-index:2;font-family:var(--font-number);font-size:20px;line-height:1;color:var(--bone);background:var(--ink);padding:2px 6px 1px;box-shadow:0 0 0 2px var(--rim)}
.gp-item__glow{position:absolute;left:14px;right:14px;top:20px;height:62px;pointer-events:none}
.gp-item::before{content:"";position:absolute;inset:9px;pointer-events:none;opacity:0;background:
  linear-gradient(var(--rc),var(--rc)) left top/10px 2px no-repeat, linear-gradient(var(--rc),var(--rc)) left top/2px 10px no-repeat,
  linear-gradient(var(--rc),var(--rc)) right top/10px 2px no-repeat, linear-gradient(var(--rc),var(--rc)) right top/2px 10px no-repeat,
  linear-gradient(var(--rc),var(--rc)) left bottom/10px 2px no-repeat, linear-gradient(var(--rc),var(--rc)) left bottom/2px 10px no-repeat,
  linear-gradient(var(--rc),var(--rc)) right bottom/10px 2px no-repeat, linear-gradient(var(--rc),var(--rc)) right bottom/2px 10px no-repeat}
.gp-item--uncommon{--rc:var(--r-uncommon)} .gp-item--rare{--rc:var(--r-rare)} .gp-item--mythic{--rc:var(--r-mythic)}
.gp-item--uncommon::before,.gp-item--rare::before,.gp-item--mythic::before{opacity:1}
.gp-item--rare{box-shadow:0 0 0 3px var(--ink), inset 0 0 0 4px var(--card), inset 0 0 0 6px var(--rc), inset 0 0 0 8px var(--card), inset 0 0 0 9px var(--rc), 0 6px 0 var(--ink)}
.gp-item--rare::before,.gp-item--mythic::before{inset:12px}
.gp-item--rare .gp-item__glow{background:radial-gradient(closest-side, rgba(78,166,255,.38), rgba(78,166,255,0))}
.gp-item--mythic .gp-item__glow{background:radial-gradient(closest-side, rgba(184,132,255,.42), rgba(184,132,255,0))}
.gp-item--rare .gp-item__gems,.gp-item--mythic .gp-item__gems{top:-7px;padding:3px 6px;background:var(--card);box-shadow:0 0 0 2px var(--ink), inset 0 0 0 1px var(--rc)}
.gp-item--mythic{background:linear-gradient(180deg,#efe3cb,#e2d2b6);
  box-shadow:0 0 0 3px var(--ink), inset 0 0 0 4px var(--card), inset 0 0 0 6px var(--rc), inset 0 0 0 8px var(--card), inset 0 0 0 9px var(--r-mythic-edge), 0 0 0 5px var(--r-mythic-edge), 0 0 0 7px var(--ink), 0 6px 0 var(--ink), 0 0 18px rgba(184,132,255,.45)}
.gp-item--mythic .gp-item__gems{box-shadow:0 0 0 2px var(--ink), inset 0 0 0 1px var(--r-mythic-edge)}
.gp-item--mythic::after{content:"";position:absolute;inset:4px;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.75) 45%,rgba(240,197,90,.6) 50%,rgba(255,255,255,0) 62%) -140% 0/240% 100% no-repeat;animation:gp-foil 3.6s ease-in-out infinite}
@keyframes gp-foil{0%,55%{background-position:-140% 0}100%{background-position:240% 0}}
.gp-item:hover,.gp-item.is-on{transform:translateY(-8px);box-shadow:0 0 0 3px var(--ink), inset 0 0 0 4px var(--card), inset 0 0 0 6px var(--rc), 0 0 0 6px var(--biome-hi), 0 0 0 9px var(--ink), 0 16px 0 var(--ink)}
.gp-item--empty{cursor:default;background:rgba(255,255,255,.02);box-shadow:inset 0 0 0 2px #2a1f1b}
.gp-item--empty:hover{transform:none;box-shadow:inset 0 0 0 2px #2a1f1b}
.gp-item--big{width:150px;height:196px;padding-top:30px}
.gp-item--big img{width:88px;height:88px}
.gp-item--big .gp-item__name{font-size:14px}
.gp-item--big .gp-item__glow{top:30px;height:96px}

/* ---- tabs: flat row, the open one raised a step with the biome rail ---- */
.gp-tabs{display:flex;gap:6px;border-bottom:2px solid var(--ink)}
.gp-tab{all:unset;cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:17px;padding:9px 16px 8px;color:var(--dim)}
.gp-tab small{font-family:var(--font-number);font-weight:400;font-size:20px;margin-left:8px;color:var(--faint)}
.gp-tab:hover{color:var(--bone)}
.gp-tab[aria-selected="true"]{color:var(--bone);background:var(--felt-2);box-shadow:0 0 0 2px var(--ink), inset 0 3px 0 var(--biome);margin-bottom:-2px}
.gp-tab[aria-selected="true"] small{color:var(--mote)}

/* ---- stat line and result tiles: flat; colour is the label ---- */
.gp-stats{display:flex;align-items:center;gap:22px;font-family:var(--font-body);font-size:15px;color:var(--dim)}
.gp-stats b{font-family:var(--font-number);font-weight:400;font-size:28px;line-height:.8;color:var(--bone)}
.gp-v-good b,b.gp-v-good{color:var(--stat-good)} .gp-v-prov b,b.gp-v-prov{color:var(--prov)} .gp-v-time b,b.gp-v-time{color:var(--time)} .gp-v-mote b,b.gp-v-mote{color:var(--mote)}
.gp-road{flex:1;height:6px;background:#2a1f1b;box-shadow:0 0 0 2px var(--ink);position:relative}
.gp-road i{position:absolute;left:0;top:0;bottom:0;background:var(--biome)}
.gp-tile{background:var(--felt-2);box-shadow:0 0 0 2px var(--ink), inset 0 0 0 1px var(--rim);padding:14px 14px 12px;display:flex;flex-direction:column;gap:6px}
.gp-tile b{font-family:var(--font-number);font-weight:400;font-size:44px;line-height:.8}
.gp-tile span{font-family:var(--font-body);font-size:14px;color:var(--dim)}

/* ---- chip: a live value that sits on art (timers) ---- */
.gp-chip{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-number);font-size:28px;line-height:1;color:var(--bone);background:rgba(10,6,7,.8);padding:5px 14px 3px;box-shadow:0 0 0 2px var(--ink), inset 0 0 0 1px var(--rim)}
.gp-chip small{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.06em;color:var(--dim)}
.gp-chip i{width:10px;height:10px;border-radius:var(--radius-coin);background:var(--biome-hi);box-shadow:0 0 10px var(--biome)}
.gp-chip--urgent i{background:var(--odds-bad);box-shadow:0 0 10px var(--odds-bad);animation:gp-pulse 1s steps(2) infinite}
@keyframes gp-pulse{50%{opacity:.35}}

@media (prefers-reduced-motion:reduce){
  .gp-btn,.gp-card,.gp-item{transition:none}
  .gp-item--mythic::after{animation:none;background-position:60% 0}
  .gp-chip--urgent i{animation:none}
}