/* The table: a felt on the panel's background, the cards absolutely placed
   by main.ts (a transform each, so a move is one composited transition),
   the status rail beside it on the panel's own tokens. */
:root {
  --felt-hi: #3c9467; --felt: #2f7c54; --felt-lo: #235f40;
  --felt-edge: rgba(0, 0, 0, 0.22);
  --slot: rgba(255, 255, 255, 0.28);
  --slot-ink: rgba(255, 255, 255, 0.42);
  --mark: #ffd45e;
  --move: 240ms;
  --ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  --cw: 72px; --ch: 98px;
  color-scheme: light dark;
}
:root[data-theme="dark"] {
  --felt-hi: #26684a; --felt: #1c5238; --felt-lo: #133a28;
  --felt-edge: rgba(0, 0, 0, 0.45);
  --slot: rgba(255, 255, 255, 0.2);
  --slot-ink: rgba(255, 255, 255, 0.3);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--pal-bg, #f4f4f6); color: var(--pal-fg, #1a1a1f);
  font: 13px/1.3 var(--pal-font-ui, system-ui, sans-serif);
  user-select: none; -webkit-user-select: none; cursor: default;
}
.instant, .instant * { transition: none !important; }

#felt {
  position: fixed; border-radius: 12px;
  background: radial-gradient(120% 90% at 50% 30%, var(--felt-hi), var(--felt) 55%, var(--felt-lo));
  box-shadow: inset 0 0 0 1px var(--felt-edge), inset 0 2px 18px var(--felt-edge);
}
#table { position: fixed; inset: 0; }
#cascade { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5000; }

/* Empty places: an outline, the suit on a foundation's, a turn-over mark on the stock. */
.slot {
  position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch);
  border-radius: calc(var(--cw) * 0.07); border: 1.5px solid var(--slot);
  display: grid; place-items: center; color: var(--slot-ink);
  font-size: calc(var(--cw) * 0.42); line-height: 1;
}
.slot.stock { cursor: pointer; }
.slot.stock:hover { border-color: var(--slot-ink); }

.card {
  position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch);
  perspective: 900px;
  transition: transform var(--move) var(--ease) var(--d, 0ms);
  will-change: transform;
}
.card .inner {
  position: absolute; inset: 0; transform-style: preserve-3d;
  /* The flip alone is `transform`; the hover lift and the drag's swell are `translate` and `scale`, which compose with it and never
     restart it: a lift on `transform` replaced a flip still waiting out its deal delay, so a card under the pointer turned a second late. */
  transition: transform 300ms var(--ease) var(--fd, 0ms), translate 140ms var(--ease), scale 140ms var(--ease), filter 120ms;
  border-radius: calc(var(--cw) * 0.06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
.card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  pointer-events: none; -webkit-user-drag: none;
}
.card .back { transform: rotateY(180deg); }
.card.down .inner { transform: rotateY(180deg); }
.card.can { cursor: grab; }
.card.hl .inner { translate: 0 -3px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); }
.card.lifted .inner { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.38); }
.card.drag { transition: none; cursor: grabbing; }
.card.drag .inner { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); scale: 1.04; }
.card.stock { cursor: pointer; }
.card.stock .inner, .card.flat .inner { box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.2); }

/* The keyboard's cursor, and the places a held or dragged card can go. */
#ring, .glow {
  position: absolute; left: 0; top: 0; pointer-events: none; border-radius: calc(var(--cw) * 0.08);
  transition: transform 140ms var(--ease), width 140ms var(--ease), height 140ms var(--ease), opacity 120ms;
}
#ring { z-index: 3000; box-shadow: 0 0 0 2.5px var(--mark), 0 0 12px 2px rgba(255, 212, 94, 0.55); }
body:not(.kbd) #ring, #ring.off { opacity: 0; }
.glow { z-index: 2900; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55); opacity: 0; transition: opacity 120ms; }
.glow.on { opacity: 1; }
.glow.hot { box-shadow: 0 0 0 3px var(--mark), 0 0 16px 4px rgba(255, 212, 94, 0.6); }

/* The rail. */
#rail { position: fixed; display: flex; flex-direction: column; gap: 10px; padding: 4px 0 0; }
.stats { margin: 0; display: grid; gap: 7px; }
.stats div { display: grid; gap: 1px; }
body.noclock #time-row { display: none; }
dt { font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pal-fg-muted, #5c5d66); }
dd { margin: 0; font: 600 15px/1.2 var(--pal-font-ui, system-ui); font-variant-numeric: tabular-nums; }
#record { font-size: 13px; }
.bar { display: block; height: 5px; margin-top: 5px; border-radius: 3px; background: var(--pal-bg-sunken, #eaeaee); overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: var(--pal-tag-green, #1b6b40); border-radius: 3px; transition: width 300ms var(--ease); }
.badge {
  align-self: start; font-size: 11px; padding: 1px 7px; border-radius: 99px;
  background: var(--pal-bg-sunken, #eaeaee); color: var(--pal-fg-muted, #5c5d66);
}
.keys { list-style: none; margin: auto 0 0; padding: 8px 0 2px; display: grid; gap: 5px; border-top: 1px solid var(--pal-line, rgba(0,0,0,.08)); }
.keys li { display: flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--pal-fg-muted, #5c5d66); white-space: nowrap; }
.keys li span:last-child { margin-left: 4px; }
kbd {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px;
  font: 500 10.5px/1 var(--pal-font-ui, system-ui); color: var(--pal-fg, #1a1a1f);
  background: var(--pal-bg-elevated, #fff); border: 1px solid var(--pal-line-strong, rgba(0,0,0,.14)); border-bottom-width: 2px; border-radius: 4px;
}

/* The ask before a new deal, and the won table. */
#dialog { position: fixed; z-index: 6000; display: grid; place-items: center; pointer-events: none; }
#dialog[hidden] { display: none; }
.panel {
  pointer-events: auto; text-align: center; padding: 16px 20px 14px; min-width: 220px; max-width: 86%;
  background: var(--pal-bg-elevated, #fff); color: var(--pal-fg, #1a1a1f);
  border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--pal-line, rgba(0,0,0,.08));
  animation: pop 220ms var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
.panel p { margin: 0; }
.panel .big { font-size: 17px; font-weight: 650; }
.panel .muted { margin-top: 4px; color: var(--pal-fg-muted, #5c5d66); }
.buttons { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.buttons button {
  font: inherit; font-size: 12.5px; padding: 5px 10px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--pal-line-strong, rgba(0,0,0,.14)); background: var(--pal-bg, #f4f4f6); color: var(--pal-fg, #1a1a1f);
  display: inline-flex; align-items: center; gap: 6px;
}
.buttons button.primary { background: var(--pal-accent, #4f46d6); border-color: transparent; color: var(--pal-accent-fg, #fff); }
.buttons button[hidden] { display: none; }
.buttons kbd { height: 15px; min-width: 15px; font-size: 10px; background: rgba(255,255,255,.18); color: inherit; border-color: rgba(255,255,255,.3); }
.buttons button:not(.primary) kbd { background: var(--pal-bg-elevated, #fff); border-color: var(--pal-line-strong, rgba(0,0,0,.14)); }