/* academy.css — The Academy 3D floor + seated split view.
   Loads AFTER site.css; leans on its custom properties (--copper, --ivory,
   --display, --body …). The scene is a viewport-height stage at the top of
   the page; the seated view is a fullscreen overlay above the sticky header. */

/* ---------- stage ---------- */
.acad-stage{position:relative;height:calc(100svh - 52px);min-height:520px;
  overflow:hidden;background:var(--ink)}
.acad-stage canvas{display:block;width:100%;height:100%}

/* cinematic grade — never eats pointer events */
.acad-grade{position:absolute;inset:0;pointer-events:none;z-index:5;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 46%, rgba(8,5,3,.55) 100%),
    linear-gradient(to bottom, rgba(10,6,3,.25), transparent 18%, transparent 82%, rgba(8,5,3,.5))}

/* entry fade */
.acad-fade{position:absolute;inset:0;background:#0a0705;z-index:9;pointer-events:none;
  transition:opacity 2.2s ease;opacity:1}
.acad-fade.out{opacity:0}

.acad-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:6;
  letter-spacing:.26em;font-size:.6rem;text-transform:uppercase;font-family:var(--body);
  color:rgba(239,231,218,.4);pointer-events:none;transition:opacity .6s}
.acad-hint.gone{opacity:0}

/* scroll-down cue */
.acad-more{position:absolute;right:26px;bottom:22px;z-index:6;
  display:flex;align-items:center;gap:.5rem;pointer-events:none;
  letter-spacing:.2em;font-size:.58rem;text-transform:uppercase;font-family:var(--body);
  color:rgba(239,231,218,.35)}
.acad-more svg{width:12px;height:12px;animation:acadBob 2.4s ease-in-out infinite}
@keyframes acadBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.acad-more svg{animation:none}}

/* ---------- station plaques (DOM, projected into the stage) ---------- */
.acad-plaque{position:absolute;z-index:6;transform:translate(-50%,-100%);
  background:rgba(16,11,7,.88);border:1px solid rgba(192,122,61,.55);
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%,0 10px);
  padding:.55rem 1.1rem .5rem;text-align:center;cursor:pointer;
  opacity:.82;transition:opacity .25s ease, box-shadow .25s ease;
  pointer-events:auto;user-select:none;-webkit-user-select:none}
.acad-plaque::before{content:"";position:absolute;left:14px;right:14px;top:5px;height:1px;
  background:linear-gradient(90deg,transparent,var(--copper),transparent)}
.acad-plaque b{display:block;font-family:var(--display);font-weight:600;
  letter-spacing:.18em;font-size:.74rem;
  color:var(--copper-bright);text-transform:uppercase;white-space:nowrap}
.acad-plaque i{display:block;font-style:normal;font-family:var(--body);
  letter-spacing:.12em;font-size:.56rem;
  color:rgba(239,231,218,.55);text-transform:uppercase;margin-top:.2rem;white-space:nowrap}
.acad-plaque:hover,.acad-plaque.hot{opacity:1;box-shadow:0 0 28px rgba(192,122,61,.28)}
.acad-plaque.hidden{display:none}

/* ---------- seated view: fullscreen over a frozen pre-blurred snapshot ----------
   One-off capture at touch-down — NOT live backdrop-filter (that recomposites
   the WebGL canvas every frame). The 3D loop is fully paused while seated. */
.acad-seat{position:fixed;inset:0;z-index:80;pointer-events:none;visibility:hidden}
.acad-seat.on{visibility:visible}
.acad-seat .blurshot{position:absolute;inset:-3%;width:106%;height:106%;
  object-fit:cover;filter:blur(18px);opacity:0;transition:opacity .5s ease}
.acad-seat.on .blurshot{opacity:1}
.acad-seat .veil{position:absolute;inset:0;background:rgba(12,8,5,.34)}
.acad-seat .panel{position:absolute;inset:0;display:flex;
  pointer-events:auto;opacity:0;transform:translateY(3%);
  transition:opacity .5s ease,transform .55s cubic-bezier(.22,.8,.24,1)}
.acad-seat.on .panel{opacity:1;transform:none}
.acad-seat .rail{flex:0 0 380px;padding:4.2rem 2.4rem 2rem;overflow-y:auto;
  background:rgba(14,10,6,.72);border-right:1px solid rgba(192,122,61,.35)}
.acad-seat .rail::before{content:"";display:block;width:52px;height:1px;
  background:linear-gradient(90deg,var(--copper),transparent);margin-bottom:1.2rem}
.acad-seat h2{font-family:var(--display);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;font-size:1.2rem;color:var(--copper-bright);margin:0 0 1.2rem}
.acad-seat h3{font-family:var(--body);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;font-size:.74rem;color:var(--copper);margin:1.5rem 0 .55rem}
.acad-seat p,.acad-seat li{font-family:var(--body);font-size:.92rem;line-height:1.7;
  color:rgba(239,231,218,.8);margin:0}
.acad-seat p{margin-bottom:.6rem}
.acad-seat ol{padding-left:1.25rem;margin:.25rem 0}
.acad-seat li{margin-bottom:.5rem}
.acad-seat .fine{margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid rgba(192,122,61,.22);
  font-size:.7rem;letter-spacing:.04em;color:rgba(239,231,218,.5);line-height:1.6}
.acad-seat .gamewrap{flex:1 1 auto;position:relative;min-width:0}
.acad-seat .gamewrap iframe{position:absolute;inset:0;width:100%;height:100%;
  border:0;background:transparent}
.acad-seat .standup{position:absolute;bottom:2.6rem;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;align-items:center;gap:.6rem;
  background:rgba(20,14,8,.85);border:1px solid var(--copper);color:var(--copper-bright);
  letter-spacing:.22em;text-transform:uppercase;font-size:.74rem;font-family:var(--body);
  font-weight:700;padding:.85rem 1.6rem;cursor:pointer;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  box-shadow:0 0 24px rgba(192,122,61,.25);transition:background .25s,box-shadow .25s}
.acad-seat .standup:hover{background:rgba(192,122,61,.28);box-shadow:0 0 34px rgba(192,122,61,.45)}
.acad-seat .standup svg{width:14px;height:14px;display:block}
.acad-seat .standup .esc{font-size:.56rem;letter-spacing:.12em;color:rgba(239,231,218,.5)}
@media (max-width:900px){
  .acad-seat .panel{flex-direction:column;overflow-y:auto}
  .acad-seat .rail{flex:0 0 auto;border-right:0;padding-top:4.2rem;
    border-bottom:1px solid rgba(192,122,61,.35)}
  .acad-seat .gamewrap{min-height:560px}
}

/* ---------- station cards (content section + LITE-mode entrance) ---------- */
.acad-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin:1.6rem 0 .4rem}
.acad-card{position:relative;text-align:left;cursor:pointer;
  background:linear-gradient(160deg,var(--ink-2),var(--ink-3));
  border:1px solid var(--line);color:var(--ivory);font-family:var(--body);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  padding:1.4rem 1.3rem 1.2rem;transition:border-color .25s,box-shadow .25s}
.acad-card::before{content:"";position:absolute;left:16px;right:16px;top:8px;height:1px;
  background:linear-gradient(90deg,var(--copper),transparent)}
.acad-card:hover{border-color:var(--copper);box-shadow:0 0 26px rgba(192,122,61,.18)}
.acad-card b{display:block;font-family:var(--display);font-weight:600;font-size:.92rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--copper-bright);margin-bottom:.5rem}
.acad-card span{display:block;font-size:.84rem;line-height:1.6;color:var(--muted)}
.acad-card .go{display:inline-block;margin-top:.9rem;font-size:.66rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--copper);
  border-bottom:1px solid rgba(192,122,61,.45);padding-bottom:.15rem}
/* photographic station backgrounds — a glimpse of the table you're about to sit at.
   Scrim lives in a CSS var so hover can brighten it without repeating the image layer. */
.acad-card{--scrim:linear-gradient(158deg,rgba(12,9,5,.66) 0%,rgba(14,10,6,.9) 100%);
  background-size:cover;background-position:center;background-repeat:no-repeat}
.acad-card:hover{--scrim:linear-gradient(158deg,rgba(12,9,5,.44) 0%,rgba(14,10,6,.76) 100%)}
.acad-card[data-station="slots"]{background-image:var(--scrim),
  image-set(url('/assets/img/hero-slots.avif') type('image/avif'),url('/assets/img/hero-slots.jpg') type('image/jpeg'))}
.acad-card[data-station="blackjack"]{background-image:var(--scrim),
  image-set(url('/assets/img/hero-blackjack.avif') type('image/avif'),url('/assets/img/hero-blackjack.jpg') type('image/jpeg'))}
.acad-card[data-station="roulette"]{background-image:var(--scrim),
  image-set(url('/assets/img/hero-roulette.avif') type('image/avif'),url('/assets/img/hero-roulette.jpg') type('image/jpeg'))}
.acad-card b{text-shadow:0 1px 4px rgba(0,0,0,.6)}
.acad-card span{text-shadow:0 1px 3px rgba(0,0,0,.55)}
@media (max-width:760px){.acad-cards{grid-template-columns:1fr}}

/* LITE mode (no WebGL / small screens): the stage collapses, cards carry the room */
body.acad-lite .acad-stage{display:none}

/* ---------- content components (the Academy primers) ---------- */

/* twin payout plaques — 3:2 vs 6:5 */
.acad-pay{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin:1.6rem 0 1.8rem}
.acad-pay .pp{position:relative;padding:1.3rem 1.3rem 1.1rem;
  background:linear-gradient(160deg,var(--ink-2),var(--ink-3));border:1px solid var(--line);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.acad-pay .pp::before{content:"";position:absolute;left:16px;right:16px;top:8px;height:1px;
  background:linear-gradient(90deg,var(--copper),transparent)}
.acad-pay .pp.bad::before{background:linear-gradient(90deg,#6e2318,transparent)}
.acad-pay .pp b{display:block;font-family:var(--display);font-weight:700;font-size:1.3rem;
  letter-spacing:.08em;color:var(--copper-bright);margin-bottom:.35rem}
.acad-pay .pp.bad b{color:#c96a55}
.acad-pay .pp .sum{display:block;font-size:.9rem;color:var(--ivory);margin-bottom:.55rem}
.acad-pay .pp .edge{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
@media (max-width:640px){.acad-pay{grid-template-columns:1fr}}

/* quiz reveal cards — same smooth accordion mechanics as .faq, card look */
.faq.quiz{margin:1.4rem 0 1.8rem}
.faq.quiz details{background:linear-gradient(160deg,var(--ink-2),var(--ink-3));
  border:1px solid var(--line);margin-bottom:.8rem;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.faq.quiz summary{padding:1rem 1.2rem}
.faq.quiz summary .q::before{content:"Table test";display:block;font-size:.6rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--copper);margin-bottom:.3rem}
.faq.quiz .faq-body-inner{padding:0 1.2rem 1.1rem}

/* roulette wheels, side by side */
.acad-wheels{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin:1.6rem 0 1.8rem}
.acad-wheels figure{margin:0;padding:1.4rem 1rem 1.2rem;text-align:center;
  background:var(--ink-2);border:1px solid var(--line)}
.acad-wheels svg{width:min(190px,70%);height:auto;display:block;margin:0 auto .9rem}
.acad-wheels figcaption b{display:block;font-family:var(--display);font-weight:600;
  font-size:.88rem;letter-spacing:.16em;text-transform:uppercase;color:var(--copper-bright)}
.acad-wheels figcaption span{display:block;font-size:.76rem;color:var(--muted);margin-top:.25rem}
.acad-wheels figcaption em{display:block;font-style:normal;font-family:var(--display);
  font-weight:700;font-size:1.05rem;color:var(--ivory);margin-top:.5rem;letter-spacing:.06em}
@media (max-width:640px){.acad-wheels{grid-template-columns:1fr}}

/* practise chip — brass tab that drops you at the table */
.acad-chip{display:inline-flex;align-items:center;gap:.7rem;margin:.4rem 0 .6rem;
  background:rgba(20,14,8,.6);border:1px solid var(--copper);color:var(--copper-bright);
  font-family:var(--body);font-weight:700;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;padding:.7rem 1.3rem;cursor:pointer;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:background .25s,box-shadow .25s}
.acad-chip:hover{background:rgba(192,122,61,.18);box-shadow:0 0 22px rgba(192,122,61,.25)}
.acad-chip svg{width:13px;height:13px;display:block}