/* ============================================================================
   game-summit.css — visual layer owned exclusively by summit.
   Loaded only on summit pages, after site.css / themes.css / games.css, so rules
   here win without touching any shared stylesheet.

   Direction: a crisp casino table at altitude — quiet green felt until a chain
   catches fire. the three card states stay calm; events are loud.
   ========================================================================== */

/* ============================================================================
   0. THE TABLE
   The felt is now a table rather than a panel: the stage is the padded RAIL
   the felt is sunk into, the felt itself carries a real woven texture, and a
   single overhead lamp pools light on the three peaks and falls away into a
   darker surround at the edges.

   The rail is mixed from --surface-2 / --bg-deep / --gold, so it reads as
   stained timber in noir, hot lacquer in neon and pale ash in paper. The felt
   stays a table green derived from --hue (as it always was), which is what
   keeps the near-white cards at full contrast in every arm.
   ========================================================================== */
body[data-game=summit] #stage{
  position:relative;
  padding:clamp(.95rem,2.8vw,1.6rem);
  background:
    radial-gradient(120% 90% at 50% -22%, color-mix(in oklch,white,transparent 87%), transparent 58%),
    linear-gradient(166deg,
      color-mix(in oklch,var(--surface-2),var(--gold) 17%),
      color-mix(in oklch,var(--surface),var(--gold) 7%) 42%,
      color-mix(in oklch,var(--bg-deep),var(--gold) 4%));
  box-shadow:
    var(--sh-3),
    inset 0 1px 0 color-mix(in oklch,white,transparent 82%),
    inset 0 -2px 0 color-mix(in oklch,black,transparent 72%),
    inset 0 0 0 1px color-mix(in oklch,black,transparent 80%);
}

/* ---------- the felt ---------- */
#board.table{
  position:relative;
  border-radius:var(--r-m);
  padding:1rem .6rem 1.15rem;
  background:
    /* overhead lamp, falling on the peaks */
    radial-gradient(78% 52% at 50% 2%,oklch(0.42 0.055 var(--hue) / .62),transparent 68%),
    /* woven nap: two crossed threads, ~3px pitch */
    repeating-linear-gradient(45deg,rgb(255 255 255/.030) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(-45deg,rgb(0 0 0/.055) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(45deg,rgb(255 255 255/.012) 0 3px,transparent 3px 6px),
    oklch(0.27 0.04 var(--hue));
  box-shadow:
    /* the felt is sunk below the rail */
    0 0 0 1px color-mix(in oklch,black,transparent 38%),
    inset 0 0 0 1px rgb(255 255 255/.07),
    inset 0 6px 16px rgb(0 0 0/.52),
    inset 0 0 46px rgb(0 0 0/.34);
}
/* The lamp, and the falloff into the darker surround around it. Both are
   confined to the top 64% — the peaks — so the tray labels below keep exactly
   the felt (and the contrast) they had before. Sits under .peaks, which is
   positioned and comes later in the box tree, so no card is ever dimmed. */
#board.table::before{
  content:'';position:absolute;left:0;right:0;top:0;height:64%;
  border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(56% 100% at 50% -10%,
      color-mix(in oklch,var(--gold),transparent 84%), transparent 72%),
    radial-gradient(86% 118% at 50% 4%, transparent 46%, rgb(0 0 0/.34) 100%);
  opacity:.7;
}
@media(prefers-reduced-motion:no-preference){
  body[data-game=summit]:not([data-fx=off]) #board.table::before{
    animation:sm-lamp 8s ease-in-out infinite;
  }
}
@keyframes sm-lamp{0%,100%{opacity:.55}50%{opacity:.92}}

/* ---------- card faces: corner index + big centre pip ---------- */
.card{
  background:linear-gradient(168deg,oklch(0.985 0.007 92),oklch(0.945 0.012 var(--hue)) 78%);
  color:oklch(0.22 0.02 260);
  border:1.5px solid oklch(0.60 0.03 var(--hue));
  box-shadow:0 2px 5px rgb(0 0 0/.45),inset 0 1px 0 rgb(255 255 255/.9);
}
.card[data-red="1"]{color:oklch(0.50 0.20 25)}
.card .cidx{
  position:absolute;top:5%;left:7%;
  display:flex;flex-direction:column;align-items:center;line-height:1;
  font-family:var(--mono);font-weight:700;
}
.card .cidx b{font-size:calc(var(--cw) * .30);font-weight:700}
.card .cidx i{font-size:calc(var(--cw) * .23);font-style:normal;margin-top:.08em}
.card .cpip{
  font-size:calc(var(--cw) * .52);line-height:1;opacity:.92;
  transform:translate(7%,9%);
}

/* ---------- card backs: mountain-diamond motif ---------- */
.card[data-state=down],.card .back{
  background:radial-gradient(120% 95% at 50% 0%,oklch(0.30 0.05 var(--hue)),oklch(0.215 0.04 var(--hue)) 72%);
  border-color:oklch(0.40 0.05 var(--hue));
}
.card .back{
  position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  box-shadow:inset 0 0 0 3px rgb(255 255 255/.055);
}
/* two stacked CSS triangles — the far peak (obj2) behind, the near peak (obj) below */
.card .back::before,.card .back::after{
  content:'';position:absolute;left:50%;width:0;height:0;
  border-style:solid;transform:translateX(-50%);
}
.card .back::before{
  top:17%;
  border-width:0 calc(var(--cw) * .24) calc(var(--cw) * .28);
  border-color:transparent transparent var(--obj2) transparent;
  opacity:.8;
}
.card .back::after{
  top:42%;
  border-width:0 calc(var(--cw) * .33) calc(var(--cw) * .37);
  border-color:transparent transparent var(--obj) transparent;
  opacity:.88;
}

/* stock remaining count — lives ON the back, bottom-right */
.stock{position:relative}
.stock .stock-count{
  position:absolute;right:5%;bottom:4%;z-index:1;
  font-family:var(--mono);font-weight:700;font-size:calc(var(--cw) * .24);
  line-height:1;color:oklch(0.96 0.02 var(--hue));
  background:rgb(0 0 0/.4);padding:.12em .32em;border-radius:4px;
}
.stock[data-empty="1"] .stock-count{display:none}

/* ---------- state clarity : three unmistakable card states -------
   playable      = breathing accent ring
   up + blocked  = 55% brightness, NO ring
   face-down     = patterned mountain back                                    */
.card[data-playable="1"]{
  cursor:pointer;
  box-shadow:0 3px 10px rgb(0 0 0/.5),inset 0 1px 0 rgb(255 255 255/.85);
}
.peaks .card[data-playable="1"]::after{
  content:'';position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;
  border:2px solid var(--accent);opacity:.75;
}
@media(prefers-reduced-motion:no-preference){
  body:not([data-fx=off]) .peaks .card[data-playable="1"]::after{
    animation:sm-breathe 1.6s ease-in-out infinite;
  }
}
@keyframes sm-breathe{0%,100%{opacity:.55}50%{opacity:1}}
.peaks .card[data-state=up]:not([data-playable="1"]){filter:brightness(.55)}
.peaks .card[data-state=up]{transition:transform var(--t-base) var(--ease-out),opacity var(--t-base),filter 160ms linear}

/* the clear itself reads as flight, not a fade-in-place */
.card[data-state=gone]{transition:none}

/* ---------- card flight (event-side): FLIP clone + ghost + landing squash ------- */
.card-flight{
  position:fixed!important;z-index:60;margin:0;pointer-events:none;
  will-change:transform;
  box-shadow:0 8px 22px rgb(0 0 0/.5),inset 0 1px 0 rgb(255 255 255/.85);
}
.card-ghost{
  position:fixed;z-index:55;pointer-events:none;
  border:1.5px dashed color-mix(in oklch,var(--accent),transparent 30%);
  border-radius:calc(var(--r-s) - 1px);opacity:.8;
}
@media(prefers-reduced-motion:no-preference){
  .card-ghost{animation:sm-ghost 300ms ease-out forwards}
}
@keyframes sm-ghost{to{opacity:0}}
/* while the clone flies, the waste holds its new face hidden until touchdown */
.waste.inflight .cidx,.waste.inflight .cpip{opacity:0}

/* ---------- waste: chain ring thickens +1px per chain step (cap 4) -------- */
.waste{
  box-shadow:0 3px 12px rgb(0 0 0/.5),inset 0 1px 0 rgb(255 255 255/.85),
    0 0 0 var(--ringw,2px) color-mix(in oklch,var(--accent),transparent 45%);
  transition:transform var(--t-base) var(--ease-out),opacity var(--t-base),box-shadow 140ms var(--ease-out);
}
/* stock draw: 160ms flip on the waste */
.waste-wrap{perspective:420px}
@media(prefers-reduced-motion:no-preference){
  body:not([data-fx=off]) .waste.flipin{animation:sm-flip 160ms var(--ease-out)}
}
@keyframes sm-flip{from{transform:rotateY(88deg)}to{transform:rotateY(0)}}

/* ---------- chain thermometer ---------- */
.chainmeter{
  position:relative;align-self:center;overflow:hidden;
  width:9px;height:calc(var(--ch) * .92);
  border-radius:var(--r-pill);
  background:rgb(0 0 0/.38);
  box-shadow:inset 0 1px 3px rgb(0 0 0/.5),0 0 0 1px rgb(255 255 255/.07);
}
.chainmeter i{
  position:absolute;inset:0;display:block;
  transform:scaleY(0);transform-origin:bottom;will-change:transform;
  background:linear-gradient(to top,var(--obj),var(--gold));
  border-radius:inherit;
}
.chainmeter::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to top,
    transparent 0 calc(12.5% - 1px),rgb(0 0 0/.45) calc(12.5% - 1px) 12.5%);
}
body[data-fx=off] .chainmeter{visibility:hidden}

/* ---------- running chain bonus ------------------------------------------
   Chains are 60-75% of a finished score but the only live readout was the
   CURRENT multiplier, which resets to "-" on every stock draw. This is the
   accumulated term, and it never resets mid-deal. */
.chain-wrap{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  align-self:flex-end;
}
.chain-wrap .chainmeter{align-self:center}
.sm-chainbonus{
  font-family:var(--mono);font-size:.92rem;font-weight:600;
  line-height:1;color:var(--muted);
  font-variant-numeric:tabular-nums;
  transition:color 180ms var(--ease-out);
}
.sm-chainbonus[data-live='1']{color:var(--gold)}
@media(prefers-reduced-motion:no-preference){
  body:not([data-fx=off]) .sm-chainbonus.bump{animation:sm-bonus-bump 260ms var(--ease-out)}
}
@keyframes sm-bonus-bump{
  0%{transform:scale(1)}
  38%{transform:scale(1.22)}
  100%{transform:scale(1)}
}

/* ---------- thin-stock warning -------------------------------------------
   Every stock card you never turn is worth 25 (up to 600), and novices spend
   the reserve early. The cue fires while it can still change a decision. */
.card.stock[data-low='1']{
  box-shadow:0 3px 12px rgb(0 0 0/.5),inset 0 1px 0 rgb(255 255 255/.85),
    0 0 0 2px color-mix(in oklch,var(--gold),transparent 25%);
}
@media(prefers-reduced-motion:no-preference){
  body:not([data-fx=off]) .card.stock[data-low='1']{animation:sm-stock-low 2.2s var(--ease-out) infinite}
}
@keyframes sm-stock-low{
  0%,100%{box-shadow:0 3px 12px rgb(0 0 0/.5),inset 0 1px 0 rgb(255 255 255/.85),
    0 0 0 2px color-mix(in oklch,var(--gold),transparent 55%)}
  50%{box-shadow:0 3px 12px rgb(0 0 0/.5),inset 0 1px 0 rgb(255 255 255/.85),
    0 0 0 3px color-mix(in oklch,var(--gold),transparent 10%)}
}

/* ---------- peak-cleared + three-peak signature ---------- */
.summit-banner{
  position:fixed;left:50%;top:38%;z-index:70;pointer-events:none;
  font-size:clamp(2.2rem,8vw,3rem);
  transform:translate(-50%,-50%) skewX(-6deg);
  opacity:0;
}
@media(prefers-reduced-motion:no-preference){
  .summit-banner{animation:sm-banner 700ms var(--ease-pop) forwards}
}
@keyframes sm-banner{
  0%{opacity:0;transform:translate(-50%,-28%) skewX(-6deg)}
  28%{opacity:1;transform:translate(-50%,-50%) skewX(-6deg)}
  72%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-64%) skewX(-6deg)}
}

/* spare stock fans out face-up, one card per 40ms (delay set inline from JS) */
.fan-card{
  position:fixed!important;z-index:58;margin:0;pointer-events:none;
  opacity:0;transform:translate(0,6px) rotate(0deg);will-change:transform;
  transition:transform 320ms var(--ease-pop),opacity 180ms linear;
  box-shadow:0 6px 16px rgb(0 0 0/.5),inset 0 1px 0 rgb(255 255 255/.85);
}
.fan-card.out{opacity:1;transform:translate(var(--tx,0px),-36px) rotate(var(--rot,0deg))}

/* ---------- score breakdown on the result sheet ---------- */
.sheet .sm-brk{margin:.9rem 0 .2rem;text-align:left}
.sheet .sm-brk-row{
  display:grid;grid-template-columns:1fr minmax(52px,32%) auto;align-items:center;
  gap:.55rem;margin:.34rem 0;font-size:.84rem;
}
.sheet .sm-brk-l{color:var(--muted)}
.sheet .sm-brk-bar{
  height:6px;border-radius:var(--r-pill);overflow:hidden;
  background:color-mix(in oklch,var(--line),transparent 45%);
}
.sheet .sm-brk-bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--accent)}
.sheet .sm-brk-row[data-k=chains] .sm-brk-bar i{background:var(--gold)}
.sheet .sm-brk-row[data-k=time] .sm-brk-bar i{background:color-mix(in oklch,var(--danger),transparent 35%)}
.sheet .sm-brk-v{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}
.sheet .sm-brk-row[data-k=time] .sm-brk-v{color:var(--muted)}
.sheet .sm-brk-note{margin:.6rem 0 0;line-height:1.45}
.sheet .sm-guarantee{margin:.4rem 0 0;line-height:1.45}