/* =============================================================================
   SheetHead — brand & design system
   Art direction: "the card room". Warm ink for the room, ivory card stock for surfaces that carry text, felt red and brass
   as the two accents, and violet reserved for the Joker only. Type: a high-contrast Didone display face (the face of a
   playing-card index) over a compact grotesque for interface labels. Shapes: card corners, keylines, printed indices —
   never pills, blur panels or gradients for their own sake.
============================================================================= */
:root {
  --ink-0: #0c090b; --ink-1: #150f10; --ink-2: #1f1615; --ink-3: #2e211d; --ink-4: #43322a;
  --paper: #f3ead8; --paper-2: #e8dcc3; --paper-3: #d3c5a4; --paper-ink: #1c1410; --paper-dim: #6f5f4d;
  --felt: #b81e2d; --felt-2: #8c1521; --felt-3: #5a0b15; --felt-hi: #e2404d;
  --brass: #e3b75a; --brass-2: #b98a2e; --brass-3: #f6dc9a; --brass-ink: #2a1c05;
  --jester: #7b4bff; --jester-2: #4a1fc0; --jester-hi: #b794ff;
  --mint: #19e3c1; --line: rgba(243, 234, 216, .14); --line-2: rgba(243, 234, 216, .26);
  --f-display: "Rozha One", "Abril Fatface", "Playfair Display", Georgia, serif;
  --f-ui: "Space Grotesk", Inter, system-ui, sans-serif;
  --f-body: Inter, system-ui, sans-serif;
  --r-card: 10px; --r-ctl: 8px; --r-sm: 5px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Joker cinematic: text layer (the big card itself is drawn by PixiJS) ---------- */
.joker-cine { position: absolute; inset: 0; z-index: 27; pointer-events: none; display: block; }
.joker-cine .jc-title, .joker-cine .jc-rank { position: absolute; left: 50%; transform: translate(-50%, 8px); text-align: center; opacity: 0; transition: opacity .22s var(--ease-out), transform .3s var(--ease-out); white-space: nowrap; }
.joker-cine .jc-title { top: var(--jc-top, 20%); translate: 0 -100%; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.joker-cine .jc-who { font: 700 11px/1 var(--f-ui); letter-spacing: .28em; text-transform: uppercase; color: var(--jester-hi); text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.joker-cine .jc-what { font: 400 clamp(24px, 4.6vw, 40px)/1 var(--f-display); color: var(--paper); text-shadow: 0 2px 0 rgba(0,0,0,.5), 0 0 26px rgba(154,107,255,.8); }
.joker-cine .jc-rank { top: var(--jc-bottom, 80%); display: flex; align-items: center; gap: 12px; }
.joker-cine .jc-eq { font: 700 11px/1 var(--f-ui); letter-spacing: .28em; text-transform: uppercase; color: var(--paper); opacity: .85; text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.joker-cine .jc-badge { min-width: 56px; height: 56px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  font: 400 34px/1 var(--f-display); color: var(--brass-ink); border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--brass-3), var(--brass) 55%, var(--brass-2)); box-shadow: 0 0 0 2px var(--brass-ink), 0 0 0 4px var(--brass-3), 0 10px 30px rgba(0,0,0,.5), 0 0 34px rgba(255,213,74,.5); }
.joker-cine.t-on .jc-title { opacity: 1; transform: translate(-50%, 0); }
.joker-cine.r-on .jc-rank { opacity: 1; transform: translate(-50%, 0); }
.joker-cine.r-on .jc-badge { animation: jc-stamp .42s var(--ease-out) both; }
@keyframes jc-stamp { 0% { transform: scale(2.4) rotate(-10deg); opacity: 0; } 60% { transform: scale(.94) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.joker-cine.quiet .jc-title { top: 32%; }
.joker-cine.quiet .jc-rank { top: 42%; }
.joker-cine.quiet.t-on { background: radial-gradient(60% 40% at 50% 38%, rgba(7,3,15,.72), transparent 75%); }

/* ---------- Joker rank chooser (sheet at the bottom; the Joker hangs in the air above it) ---------- */
.joker-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; box-sizing: border-box; margin: 0 auto; max-width: 820px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(31,22,21,.96), rgba(12,9,11,.99));
  border-top: 2px solid var(--brass); box-shadow: 0 -18px 50px rgba(0,0,0,.6); animation: js-in .32s var(--ease-out) both; border-radius: 14px 14px 0 0; }
@keyframes js-in { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
.js-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.js-title { font: 400 22px/1.1 var(--f-display); color: var(--paper); }
.js-sub { font: 500 12.5px/1.35 var(--f-body); color: rgba(243,234,216,.7); margin-top: 3px; min-height: 17px; }
.js-sub b { color: var(--brass-3); font: 700 13px var(--f-ui); }
.js-x { width: 40px; height: 40px; flex: none; border-radius: var(--r-ctl); border: 1px solid var(--line-2); color: var(--paper); background: transparent; cursor: pointer; font-size: 15px; }
.js-x:hover { background: rgba(243,234,216,.08); }
.js-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 8px; }
.js-rank { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 62px; padding: 6px 4px; cursor: pointer;
  border-radius: var(--r-card); border: 1px solid var(--paper-3); background: linear-gradient(165deg, #fffaf0, var(--paper-2)); color: var(--paper-ink);
  box-shadow: 0 3px 0 var(--paper-3), 0 6px 14px rgba(0,0,0,.4); transition: transform .14s var(--ease-out), box-shadow .14s, background .14s; }
.js-rank .r { font: 400 26px/1 var(--f-display); }
.js-rank .h { font: 700 9.5px/1.1 var(--f-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--paper-dim); text-align: center; }
.js-rank[data-rank="Q"], .js-rank[data-rank="J"], .js-rank[data-rank="K"], .js-rank[data-rank="A"] { }
.js-rank:hover, .js-rank:focus-visible { transform: translateY(-4px); background: linear-gradient(165deg, #fff, var(--brass-3)); box-shadow: 0 7px 0 var(--brass-2), 0 12px 22px rgba(0,0,0,.45); outline: none; }
.js-rank:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--paper-3); }
@media (max-width: 520px) { .js-title { font-size: 19px; } .js-grid { grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 6px; } .js-rank { min-height: 56px; } .js-rank .r { font-size: 23px; } }
@media (prefers-reduced-motion: reduce) { .joker-sheet, .joker-cine.r-on .jc-badge { animation: none; } }