*{box-sizing:border-box}
html,body{margin:0}
body{background:#16141a;color:#f6f1e7;font-family:'Bricolage Grotesque',sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:hover{color:#f2c318}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;background:#c93a2e;overflow:hidden;padding:clamp(20px,6vh,48px) clamp(24px,4vw,48px);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto auto;gap:clamp(14px,3vh,24px)}
.hero-photo{position:absolute;right:0;top:0;width:50%;height:100%;background-position:center 20%;background-size:cover;transform:scaleX(-1)}
.hero-fade{position:absolute;right:0;top:0;width:50%;height:100%;background:linear-gradient(90deg,#c93a2e 0%,rgba(201,58,46,.55) 22%,transparent 55%),linear-gradient(180deg,transparent 70%,#c93a2e 100%)}
.hero>*:not(.hero-photo):not(.hero-fade):not(.nav){position:relative;z-index:1}
.brand{font:400 12px/1 'Space Mono',monospace;letter-spacing:.1em}
.nav{position:fixed;z-index:5;right:clamp(24px,4vw,48px);top:clamp(24px,4vw,48px);transform:rotate(180deg);display:flex;flex-direction:column;font:700 12px/2.2 'Space Mono',monospace;letter-spacing:.1em;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.nav a{align-self:flex-start;text-decoration:none}
.nav a span{display:block;pointer-events:none;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.nav a:hover span{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.nav a span{transition:none}}
.headline{margin:clamp(12px,6vh,60px) 0 0;max-width:min(760px,100%);font:700 min(clamp(30px,5.2vw,64px),8vh)/1.02 Unbounded,sans-serif;letter-spacing:-.04em;text-wrap:balance}
.headline em{font:400 1em/1.02 Gloock,serif;letter-spacing:-.02em}
.intro{margin:0;max-width:420px;font:400 min(clamp(16px,1.65vw,19px),2.7vh)/1.45 'Bricolage Grotesque',sans-serif;text-wrap:pretty}
.cta{justify-self:start;background:#16141a;color:#f6f1e7;padding:clamp(12px,2.2vh,18px) 26px;font:800 min(18px,2.4vh)/1 'Bricolage Grotesque',sans-serif;border-radius:4px;text-decoration:none;transition:transform .2s}
.cta:hover{transform:rotate(-3deg) scale(1.04);color:#f6f1e7}
@media (max-width:760px){
  .hero-photo,.hero-fade{width:100%}
  .hero-fade{background:linear-gradient(180deg,rgba(201,58,46,.85) 0%,rgba(201,58,46,.6) 40%,#c93a2e 75%)}
  .nav{position:static;order:1;justify-self:end;align-self:end}
}

/* Past 3:1 (very short + wide) stop shrinking to fit and let the hero run past the fold.
   At exactly 3:1, 1vh == (1/3)vw, so these freeze the values continuously at that ratio. */
@media (min-aspect-ratio:3/1){
  .hero{padding:clamp(20px,2vw,48px) clamp(24px,4vw,48px);gap:clamp(14px,1vw,24px)}
  .headline{margin:clamp(12px,2vw,60px) 0 0;font-size:min(clamp(30px,5.2vw,64px),2.667vw)}
  .intro{font-size:min(clamp(16px,1.65vw,19px),.9vw)}
  .cta{padding:clamp(12px,.7333vw,18px) 26px;font-size:min(18px,.8vw)}
}

/* ---------- table / deck ---------- */
.table{position:relative;z-index:2;background:#16141a;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:18px 18px;user-select:none;overflow-x:clip}
.stage-wrap{width:100%;height:600px;position:relative}
.stage{position:absolute;left:50%;top:0;width:1200px;height:600px;transform-origin:top left}
.table-title{position:absolute;left:48px;top:40px;margin:0;font:700 26px/1 Unbounded,sans-serif;letter-spacing:-.04em}
.deck{position:absolute;left:48px;top:130px;width:236px;height:336px;padding:0;border:0;background:none;color:inherit;cursor:pointer;font:inherit}
.deck-stack span{position:absolute;inset:0;border-radius:14px;background:#c93a2e;background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.2) 0 10px,transparent 10px 20px);border:6px solid #f6f1e7;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.deck.empty .deck-stack{position:absolute;inset:0;border-radius:14px;border:2px dashed rgba(246,241,231,.4)}
.deck-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;pointer-events:none;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.deck-label b{font:800 20px/1.1 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
.deck-label small{font:700 11px/1.5 'Space Mono',monospace;letter-spacing:.1em}
.table-actions{position:absolute;left:48px;bottom:40px;display:flex;gap:12px}
.table-actions button{background:#f2c318;color:#16141a;border:0;padding:14px 22px;font:800 15px/1 'Bricolage Grotesque',sans-serif;border-radius:6px;cursor:pointer;transition:transform .2s}
.table-actions button:hover{transform:rotate(-3deg) scale(1.05)}
.table-actions .deal{background:#f6f1e7}

.card{position:absolute;width:236px;height:336px;border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.5);cursor:grab;touch-action:none}
.card.dealing{animation:deal .45s cubic-bezier(.2,.8,.2,1)}
@keyframes deal{from{opacity:0;transform:translate(-500px,0) rotate(-20deg)}}
.card.revealed::after{content:"";position:absolute;inset:-7px;border-radius:19px;pointer-events:none;animation:reveal-ring 1.5s ease-out}
@keyframes reveal-ring{from{box-shadow:0 0 0 3px #f2c318,0 0 30px 8px rgba(242,195,24,.6)}to{box-shadow:0 0 0 3px rgba(242,195,24,0),0 0 30px 8px rgba(242,195,24,0)}}
.card .front,.card .back{position:absolute;inset:0;border-radius:14px;display:flex;flex-direction:column;gap:8px;padding:12px}
.card .front{border:6px solid #f6f1e7}
.card .back{background:#16141a;color:#f6f1e7;padding:22px;gap:10px;border:6px solid var(--bg)}
.card:not(.flipped) .back,.card.flipped .front{display:none}
.card-head{display:flex;justify-content:space-between;align-items:center;font:800 15px/1 'Bricolage Grotesque',sans-serif}
.card-cost{font:700 11px/1 'Space Mono',monospace;background:#16141a;color:#f6f1e7;padding:4px 7px;border-radius:999px}
.card-art{height:128px;border-radius:6px;border:2px solid #16141a;background-position:center 30%;background-size:cover;overflow:hidden;display:grid;place-items:center;font:400 10px/1.4 'Space Mono',monospace;color:#16141a;text-align:center;padding:8px}
.card-type{font:700 10px/1 'Space Mono',monospace;letter-spacing:.06em;border-bottom:2px solid #16141a;padding-bottom:6px}
.card-text{font:400 12.5px/1.4 'Bricolage Grotesque',sans-serif;flex:1;text-wrap:pretty}
.card-hint{font:400 9px/1 'Space Mono',monospace;opacity:.7}
.back-kicker{font:700 10px/1 'Space Mono',monospace;letter-spacing:.1em;color:var(--bg)}
.back a{display:block;font:700 14px/1.25 'Bricolage Grotesque',sans-serif;text-decoration:none;color:#f6f1e7;padding:8px 0;border-bottom:1px solid rgba(246,241,231,.2)}
.rotate{position:absolute;right:-14px;bottom:-14px;width:30px;height:30px;border-radius:50%;background:#f6f1e7;border:2px solid #16141a;cursor:grab;display:grid;place-items:center;font:700 15px/1 'Space Mono',monospace;color:#16141a;box-shadow:0 4px 10px rgba(0,0,0,.4);touch-action:none}