/* Mystica — one stylesheet for every page of mystica.stratanaut.com.
   The colours are the game's Mystica palette (ThemeManager.swift), headings use the game's
   Fraunces with SOFT maxed (MysticaTheme.display), the wordmark is its Cinzel Decorative and card
   numbers use the system serif, as MysticaTheme.numeral does. Everything is served from this host:
   vercel.json sets style-src/script-src 'self', so no inline styles or scripts anywhere. */

@font-face{font-family:"Fraunces Soft";src:url(fonts/fraunces.woff) format("woff");font-weight:500 900;font-display:swap}
@font-face{font-family:"Mystica Wordmark";src:url(fonts/cinzel.woff) format("woff");font-weight:900;font-display:block}

:root{
  --void:#120c1d; --void-2:#170f28; --night:#0b0714; --panel:#1c1233; --panel-2:#241843;
  --ink:#f4edff; --body:#ddd3ef; --muted:#b3a7cd;
  --gold1:#ffe9a8; --gold2:#e2ad45; --gold-deep:#8f6218;
  --card1:#f6e2a6; --card2:#cd9f43;
  --violet:#9466ff; --violet-lo:#5b3aa8; --teal:#3fd0c9; --crimson:#ef5a82;
  --rim:rgba(226,173,69,.3); --hair:rgba(255,255,255,.08);
  --display:"Fraunces Soft",ui-serif,"Iowan Old Style",Georgia,serif;
  --wordmark:"Mystica Wordmark","Fraunces Soft",ui-serif,Georgia,serif;
  --numeral:ui-serif,"New York","Iowan Old Style",Georgia,serif;
  --text:-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px,4vw,40px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--void);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--void);color:var(--body);font:17px/1.6 var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none !important}
a{color:var(--gold1);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#fff4cf;text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--gold1);outline-offset:3px;border-radius:8px}
::selection{background:var(--violet);color:#fff}
h1,h2,h3{font-family:var(--display);font-weight:900;color:var(--ink);margin:0;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--gold1);color:var(--void);padding:10px 14px;border-radius:12px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Gold foil, the game's title treatment */
.foil{color:var(--gold1)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .foil{background:linear-gradient(180deg,#fff7dc 8%,var(--gold1) 32%,var(--gold2) 60%,#b07b22 82%,#f0c96f 97%);-webkit-background-clip:text;background-clip:text;color:transparent}
}

/* Each power's colour: its glow, and its number beside the name */
.pw-null{--t:#ffe9a8;--glow:rgba(255,233,168,.5)}
.pw-curse{--t:#ef5a82;--glow:rgba(239,90,130,.6)}
.pw-peek{--t:#e2ad45;--glow:rgba(226,173,69,.55)}
.pw-spy{--t:#a988ff;--glow:rgba(148,102,255,.7)}
.pw-swap{--t:#3fd0c9;--glow:rgba(63,208,201,.55)}

/* ───────── Header: dark capsules with a gold rim ───────── */
.top{position:absolute;top:0;left:0;right:0;z-index:6}
.top .bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;padding-bottom:14px}
.brand,.top nav a{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:6px 15px;border-radius:999px;background:rgba(11,7,20,.66);border:1px solid var(--rim);color:var(--ink);text-decoration:none;font:700 15px/1 var(--display)}
.brand{padding-left:6px;font-size:16px;white-space:nowrap}
.brand img{width:28px;height:28px;border-radius:8px}
.top nav{display:flex;gap:8px}
.brand:hover,.top nav a:hover{color:#fff;background:rgba(11,7,20,.88);border-color:rgba(255,233,168,.6)}
.top nav a[aria-current]{color:var(--gold1);border-color:rgba(255,233,168,.6)}
.top nav .wide{display:none}
@media (min-width:560px){.top nav .wide{display:inline-flex}}
@media (max-width:360px){.brand,.top nav a{padding:6px 11px;font-size:14px}.brand{padding-left:5px}.top nav{gap:6px}}

/* ───────── Hero: the game's title screen, your hand rising from the bottom ───────── */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;padding-top:72px;
  min-height:max(640px,min(100vh,960px));min-height:max(640px,min(100svh,960px))}
.hero::before{content:"";position:absolute;z-index:-3;left:50%;top:0;width:max(100%,900px);aspect-ratio:1290 / 1300;transform:translateX(-50%);
  background:url(img/my_table_top.avif) 50% 0 / 100% auto no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 88%);mask-image:linear-gradient(180deg,#000 45%,transparent 88%)}
.hero::after{content:"";position:absolute;z-index:-2;left:50%;bottom:-36%;width:min(1500px,170%);aspect-ratio:2;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(148,102,255,.45),rgba(148,102,255,.14) 55%,rgba(148,102,255,0))}
/* Four-point stars that twinkle over the table */
.sparks{position:absolute;inset:0;z-index:-1;pointer-events:none}
.sparks i{position:absolute;width:var(--s,10px);aspect-ratio:1;background:#fff3c6;opacity:.65;
  clip-path:polygon(50% 0,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0 50%,41% 41%)}
.sparks i:nth-child(1){top:15%;left:11%;--s:11px}
.sparks i:nth-child(2){top:23%;left:85%;--s:15px;animation-delay:-1.2s}
.sparks i:nth-child(3){top:38%;left:6%;--s:8px;animation-delay:-2.5s}
.sparks i:nth-child(4){top:10%;left:66%;--s:9px;animation-delay:-3.3s}
.sparks i:nth-child(5){top:47%;left:92%;--s:12px;animation-delay:-.6s}
.sparks i:nth-child(6){top:57%;left:15%;--s:14px;animation-delay:-1.9s}
.sparks i:nth-child(7){top:30%;left:27%;--s:7px;animation-delay:-4.1s}
.sparks i:nth-child(8){top:17%;left:38%;--s:8px;animation-delay:-2.9s}
.sparks i:nth-child(9){top:42%;left:73%;--s:8px;animation-delay:-3.7s}
.sparks i:nth-child(10){top:64%;left:83%;--s:11px;animation-delay:-1.5s}

.title{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center}
.crest{position:relative;width:clamp(84px,min(20vw,13vh),128px);aspect-ratio:1;isolation:isolate}
.crest img{width:100%;height:100%;filter:drop-shadow(0 10px 24px rgba(0,0,0,.55))}
.crest::before,.crest::after{content:"";position:absolute;z-index:-1;border-radius:50%}
.crest::before{inset:-60%;background:repeating-conic-gradient(rgba(255,233,168,.2) 0 3deg,rgba(255,233,168,0) 3deg 15deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent 100%);mask-image:radial-gradient(closest-side,#000 25%,transparent 100%)}
.crest::after{inset:-10%;background:radial-gradient(closest-side,rgba(255,233,168,.36),rgba(226,173,69,.1) 60%,rgba(226,173,69,0))}
.wordmark{margin-top:4px;font:900 clamp(58px,min(14vw,17vh),168px)/.9 var(--wordmark);letter-spacing:.02em;text-transform:uppercase;
  filter:drop-shadow(0 3px 0 #3b2309) drop-shadow(0 18px 36px rgba(0,0,0,.7))}
.tagline{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;font:700 13px/1.3 var(--display);letter-spacing:.32em;text-transform:uppercase;color:var(--gold2)}
.tagline span{margin-right:-.32em}
.tagline::before,.tagline::after{content:"";flex:none;width:clamp(22px,6vw,56px);height:1px;background:linear-gradient(90deg,rgba(226,173,69,0),var(--gold2))}
.tagline::after{transform:scaleX(-1)}
@media (max-width:440px){.tagline{letter-spacing:.2em;font-size:12px}.tagline span{margin-right:-.2em}.tagline::before,.tagline::after{display:none}}
.pitch{margin-top:22px;max-width:22em;font:800 clamp(21px,2.6vw,28px)/1.28 var(--display);color:var(--ink);text-wrap:balance}
.get{align-self:stretch;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 16px;margin-top:24px}
.fine{margin-top:14px;font-size:14px;color:var(--muted);max-width:34em}
@media (min-width:760px){.fine{max-width:none}}
.motion{margin-top:12px;display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:6px 8px 6px 14px;border-radius:999px;background:rgba(11,7,20,.66);border:1px solid var(--rim);color:var(--ink);font:700 14px/1 var(--display);cursor:pointer}
.motion input{appearance:none;-webkit-appearance:none;margin:0;width:38px;height:24px;border-radius:999px;background:rgba(255,255,255,.28);position:relative;cursor:pointer;transition:background .2s}
.motion input::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .2s}
.motion input:checked{background:var(--violet-lo)}
.motion input:checked::before{transform:translateX(14px)}
.motion input:focus-visible{outline:3px solid var(--gold1);outline-offset:3px}

/* A fan of cards, each turned about one pivot far below it. .fan is a zero-size anchor at the
   bottom centre of its box and every card hangs from it at its own angle. */
.fan{position:absolute;left:50%;bottom:0;width:0;height:0}
.hc{position:absolute;left:calc(var(--cw) / -2);bottom:0;width:var(--cw);aspect-ratio:5 / 7;transform-origin:50% 250%;transform:rotate(calc(var(--a) * var(--spread,1)))}
.hc:nth-child(1){--a:-24deg;--i:0}
.hc:nth-child(2){--a:-12deg;--i:1}
.hc:nth-child(3){--a:0deg;--i:2}
.hc:nth-child(4){--a:12deg;--i:3}
.hc:nth-child(5){--a:24deg;--i:4}
.hc img,.bob{position:absolute;inset:0;width:100%;height:100%}
.hc img{border-radius:6.5% / 4.6%;box-shadow:0 0 0 1px rgba(226,173,69,.7),0 24px 40px -14px rgba(0,0,0,.9),0 0 64px -6px var(--glow,rgba(0,0,0,0))}
.hand{position:relative;z-index:1;flex:1 0 auto;--cw:clamp(104px,15.5vw,212px);height:calc(var(--cw) * 1.12);margin-top:14px;perspective:1300px}
/* The hand hangs from the top of whatever room the title leaves, and shows at most 1.3 cards'
   height of itself above the fold of the fade. */
.hand .fan{top:max(16px,calc(100% - var(--cw) * 1.3));bottom:auto;transform:rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));transform-style:preserve-3d}
.hand .hc{top:0;bottom:auto}
.hand .hc:hover img{transform:translateY(-12%)}
.hand::after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,rgba(18,12,29,0),var(--void) 92%);pointer-events:none}
/* On a phone the fan closes a little so the cards can be bigger */
@media (max-width:560px){.hand{--cw:min(120px,31vw);--spread:.85}.hand .hc{transform-origin:50% 200%}}

/* ───────── Buttons ───────── */
/* The App Store button, in the in-game OYNA gold */
.cta{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:min(100%,270px);min-height:66px;padding:12px 38px 11px;border-radius:18px;
  background:linear-gradient(180deg,#fff3c6,var(--gold1) 18%,var(--gold2) 58%,#a9741f);color:#2b1705;text-decoration:none;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -4px 0 rgba(90,50,8,.35),0 0 0 1px #6b4410,0 8px 18px rgba(0,0,0,.45),0 0 44px rgba(226,173,69,.3)}
.cta span{font:900 23px/1.1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.cta small{font:700 12px/1.35 var(--display);letter-spacing:.16em;text-transform:uppercase}
.cta:hover{color:#2b1705;filter:brightness(1.06)}
.cta:active{transform:translateY(1px)}
.cta:focus-visible{border-radius:18px}
.ghost{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:10px 24px;border-radius:18px;border:1px solid rgba(255,233,168,.5);background:rgba(11,7,20,.55);color:var(--gold1);text-decoration:none;font:800 17px/1 var(--display)}
.ghost::after{content:"";width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg)}
.ghost:hover{color:#fff4cf;background:rgba(36,24,67,.85);border-color:var(--gold1)}
.btn{min-height:50px;padding:12px 24px;border:0;border-radius:14px;cursor:pointer;font:800 17px/1 var(--display);letter-spacing:.02em;color:#2b1705;
  background:linear-gradient(180deg,#fff3c6,var(--gold1) 18%,var(--gold2) 60%,#a9741f);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(90,50,8,.35),0 0 0 1px #6b4410,0 6px 14px rgba(0,0,0,.45)}
.btn.alt{color:#fff;background:linear-gradient(180deg,#b597ff,var(--violet) 40%,var(--violet-lo));box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(20,8,50,.4),0 0 0 1px #3a2380,0 6px 14px rgba(0,0,0,.45)}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}

/* ───────── Sections ───────── */
.section{padding-top:clamp(84px,11vw,140px)}
.head2{max-width:780px;margin:0 auto;text-align:center}
.section h2{font-size:clamp(36px,6vw,62px);line-height:1.04;filter:drop-shadow(0 3px 0 rgba(0,0,0,.45))}
.section .foil{background-size:100% 1.04em}          /* the foil runs down each line, not once down the block */
.eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:14px;font:700 13px/1.3 var(--display);letter-spacing:.3em;text-transform:uppercase;color:var(--gold2)}
.eyebrow::before,.eyebrow::after{content:"";flex:none;width:7px;height:7px;background:var(--gold2);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.eyebrow::after{margin-left:-.3em}
.intro{margin:16px auto 0;max-width:36em;color:var(--muted);font-size:19px;text-wrap:pretty}
h3{font-size:21px;line-height:1.2}

/* ───────── Play a hand: the table beside the five rules ───────── */
.playgrid{display:grid;gap:48px;margin-top:52px}
@media (min-width:980px){.playgrid{grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:72px;align-items:center}}
.play{width:min(500px,100%);margin:0 auto}
.rules{list-style:none;margin:0;padding:0;counter-reset:rule}
.rules li{display:grid;grid-template-columns:52px 1fr;column-gap:18px;padding:18px 0;border-top:1px solid var(--hair)}
.rules li:first-child{border-top:0;padding-top:0}
.rules li > *{grid-column:2}
.rules li::before{counter-increment:rule;content:counter(rule);grid-column:1;grid-row:1 / span 2;font:700 44px/1 var(--numeral);color:var(--gold1);text-align:center}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .rules li::before{background:linear-gradient(180deg,#fff7dc 10%,var(--gold1) 38%,var(--gold2) 72%,#b07b22);-webkit-background-clip:text;background-clip:text;color:transparent}
}
.rules p{margin-top:4px;color:var(--muted);font-size:16px;line-height:1.55}

/* The table: a real hand against two bots, sized in container units so it scales as one piece */
.table{position:relative;container-type:inline-size;border-radius:28px;overflow:hidden;isolation:isolate;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  background:radial-gradient(75% 42% at 50% 50%,rgba(148,102,255,.28),rgba(148,102,255,0) 72%),linear-gradient(180deg,rgba(18,12,29,.1),rgba(18,12,29,.55)),url(img/my_table.avif) 50% 0 / cover,var(--void-2);
  box-shadow:0 0 0 1px rgba(226,173,69,.55),0 0 0 5px rgba(11,7,20,.92),0 0 0 6px rgba(226,173,69,.26),0 36px 70px -26px rgba(0,0,0,.9),0 0 110px -30px rgba(148,102,255,.65)}
.felt{display:flex;flex-direction:column;gap:6.5cqw;padding:4.5cqw 4cqw 5.5cqw}
.rivals{display:flex;justify-content:space-between;gap:3cqw}
.seat{display:flex;flex-direction:column;align-items:center;gap:1.8cqw;min-width:0}
.who{display:inline-flex;align-items:center;gap:1.4cqw;max-width:100%;padding:1.1cqw 2.6cqw;border-radius:999px;background:rgba(11,7,20,.7);border:1px solid var(--rim);font:700 max(11px,3.1cqw)/1.1 var(--display);color:var(--ink);white-space:nowrap;transition:box-shadow .25s}
.who .nm{overflow:hidden;text-overflow:ellipsis}
.who .sum{color:var(--gold1)}
.seat.on .who{box-shadow:0 0 0 2px var(--gold2),0 0 16px rgba(226,173,69,.55)}
.seat.won .who{background:linear-gradient(180deg,var(--gold1),var(--gold2));color:#2b1705;border-color:transparent}
.seat.won .who .sum{color:#2b1705}
.row{display:flex;gap:1.3cqw}
.middle{display:grid;grid-template-columns:repeat(3,1fr);align-items:start;justify-items:center}
.deck,.pile,.slot{display:flex;flex-direction:column;align-items:center;gap:1.6cqw}
.deck{margin:0;padding:0;border:0;background:none;cursor:pointer;border-radius:2cqw}
.deck small,.pile small{font:700 max(11px,2.9cqw)/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.deck small b{color:var(--gold1)}
.slot{width:17cqw;aspect-ratio:5 / 7;border-radius:1.6cqw;box-shadow:inset 0 0 0 1px rgba(255,233,168,.28);background:rgba(11,7,20,.25)}
.mine{display:flex;justify-content:center;gap:3cqw}

/* A card: its back is ::before, its face ::after; each turns on its own axis, so the pair flips
   like one card. The numeral lives in data-v and is set only while the card is face up. */
.card{position:relative;display:block;flex:none;width:var(--w);aspect-ratio:5 / 7;margin:0;padding:0;border:0;border-radius:calc(var(--w) * .085);background:none;transform-origin:0 0;font:700 calc(var(--w) * .44)/1 var(--numeral);color:var(--card1)}
.card::before,.card::after{content:"";position:absolute;inset:0;border-radius:inherit;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:50% / cover no-repeat;box-shadow:0 0 0 1px rgba(226,173,69,.6),0 .8cqw 1.8cqw rgba(0,0,0,.5)}
.card::before{background-image:url(img/my_card_back.avif);transform:perspective(600px) rotateY(0)}
.card::after{content:attr(data-v);display:grid;place-items:center;background-image:url(img/my_face_frame.avif);transform:perspective(600px) rotateY(-180deg);
  text-shadow:calc(var(--w) * -.02) calc(var(--w) * -.02) 0 var(--void),calc(var(--w) * .02) calc(var(--w) * -.02) 0 var(--void),calc(var(--w) * -.02) calc(var(--w) * .02) 0 var(--void),calc(var(--w) * .02) calc(var(--w) * .02) 0 var(--void),0 2px 8px rgba(0,0,0,.8)}
.card.up::before{transform:perspective(600px) rotateY(180deg)}
.card.up::after{transform:perspective(600px) rotateY(0)}
.card[data-art=p5]::after{background-image:url(img/my_card_5.avif)}
.card[data-art=p7]::after{background-image:url(img/my_card_7.avif)}
.card[data-art=p9]::after{background-image:url(img/my_card_9.avif)}
.card[data-art=p12]::after{background-image:url(img/my_card_12.avif)}
.card.sm{--w:8.6cqw}
.card.md{--w:17cqw}
.card.lg{--w:19.5cqw}
.deck .card{box-shadow:.7cqw .7cqw 0 -.1cqw #2c1b52,1.4cqw 1.4cqw 0 -.2cqw #1f1438;border-radius:1.5cqw}
button.card{cursor:pointer}
.card.lift{transform:translateY(-1.6cqw)}
/* The "you've looked at this one" glint, as in the game; hidden under the face when it is up */
.glint{position:absolute;top:5%;right:6%;width:20%;aspect-ratio:1;background:linear-gradient(135deg,#fff,var(--gold1) 40%,var(--gold2));opacity:0;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 3px rgba(255,233,168,.9))}
.card.seen .glint{opacity:1}
.ready{box-shadow:0 0 0 2px var(--gold1),0 0 18px 2px rgba(255,233,168,.55)}
.card.ready:hover,.deck.ready:hover{transform:translateY(-1.2cqw)}
.dock{display:grid;justify-items:center;gap:12px;margin-top:18px;text-align:center}
.say{min-height:3.2em;max-width:26em;font:700 17px/1.45 var(--display);color:var(--ink)}
.acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;min-height:50px}

/* ───────── Powers: five cards that turn over as they come into view ───────── */
.powers{list-style:none;margin:60px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2.2vw,30px)}
.pw{text-align:center;perspective:1000px}
.tilt{position:relative;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d}
.flip{position:relative;aspect-ratio:5 / 7;transform-style:preserve-3d}
.front,.back,.glare{position:absolute;inset:0;width:100%;height:100%;border-radius:6.5% / 4.6%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.front{box-shadow:0 0 0 1px rgba(226,173,69,.7),0 30px 50px -22px rgba(0,0,0,.95),0 0 72px -10px var(--glow)}
.back{background:url(img/my_card_back.avif) 50% / cover;transform:rotateY(180deg);box-shadow:0 0 0 1px rgba(226,173,69,.7),0 30px 50px -22px rgba(0,0,0,.95)}
/* A soft highlight that follows the pointer, as if the card were held to the light */
.glare{overflow:hidden;opacity:0;transform:translateZ(1px);pointer-events:none}
.glare::before{content:"";position:absolute;inset:-50%;background:radial-gradient(closest-side,rgba(255,255,255,.3),rgba(255,255,255,0));transform:translate(var(--gx,0%),var(--gy,0%))}
.pw:hover .glare{opacity:1}
.pw h3{display:flex;align-items:baseline;justify-content:center;gap:10px;margin-top:24px;font-size:23px}
.pw h3 b{font:700 26px/1 var(--numeral);color:var(--t)}
.pw p{margin-top:6px;color:var(--muted);font-size:16px;line-height:1.5}
@media (max-width:900px) and (min-width:621px){
  .powers{display:flex;flex-wrap:wrap;justify-content:center;gap:40px 28px}
  .pw{flex:0 0 calc((100% - 56px) / 3)}
}
@media (max-width:620px){
  .powers{grid-template-columns:1fr;gap:26px;margin-top:44px}
  .pw{display:grid;grid-template-columns:112px 1fr;grid-template-rows:auto 1fr;column-gap:20px;text-align:left}
  .pw .tilt{grid-row:1 / span 2}
  .pw h3,.pw p{grid-column:2}
  .pw h3{justify-content:flex-start;margin-top:10px}
}

/* ───────── Themes: a stage that repaints the table and deals that theme's powers ───────── */
.switcher{margin-top:52px}
.stage{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:clamp(430px,48vw,580px);padding:0 24px 30px;border-radius:30px;text-align:center;background:var(--void-2);
  box-shadow:0 0 0 1px rgba(226,173,69,.5),0 0 0 6px rgba(11,7,20,.9),0 0 0 7px rgba(226,173,69,.22),0 50px 90px -40px rgba(0,0,0,.95)}
.stage .bg{position:absolute;inset:0;z-index:-2;background:50% 0 / cover no-repeat;opacity:0}
.stage .bg.on{opacity:1}
.stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0) 32%,rgba(0,0,0,.35) 58%,rgba(0,0,0,.84))}
.bg.t-my{background-image:url(img/my_table.avif)}
.bg.t-ag{background-image:url(img/ag_table.avif)}
.bg.t-sv{background-image:url(img/sv_table.avif)}
.bg.t-gg{background-image:url(img/gg_table.avif)}
.bg.t-kt{background-image:url(img/kt_table.avif)}
.bg.t-ty{background-image:url(img/ty_table.avif)}
.stage.t-my{--ta:#ffe9a8}
.stage.t-ag{--ta:#f0d17b}
.stage.t-sv{--ta:#ffd166}
.stage.t-gg{--ta:#ff9fd0}
.stage.t-kt{--ta:#ff6f86}
.stage.t-ty{--ta:#cfd8f5}
.deal{position:relative;width:100%;--cw:clamp(78px,12vw,150px);height:calc(var(--cw) * 1.9)}
.deal .hc{bottom:calc(var(--cw) * .4)}
.deal .hc img{box-shadow:0 0 0 1px rgba(255,255,255,.28),0 26px 40px -14px rgba(0,0,0,.95)}
.stage h3{margin-top:10px;font-size:clamp(28px,4vw,42px);color:var(--ta);text-shadow:0 2px 14px rgba(0,0,0,.7)}
.stage p{margin-top:6px;max-width:30em;font-size:17px;color:var(--body);text-wrap:balance;text-shadow:0 1px 8px rgba(0,0,0,.85)}
.tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
@media (min-width:560px){.tabs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.tabs{grid-template-columns:repeat(6,minmax(0,1fr))}}
.tab{display:flex;align-items:center;gap:10px;min-height:58px;margin:0;padding:6px 12px 6px 7px;border-radius:14px;border:1px solid var(--rim);background:rgba(28,18,51,.72);color:var(--ink);font:700 15px/1.15 var(--display);text-align:left;cursor:pointer}
.tab img{flex:none;width:30px;height:42px;border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.tab:hover{background:rgba(36,24,67,.92);border-color:rgba(255,233,168,.55)}
.tab[aria-selected=true]{background:rgba(58,40,100,.9);border-color:var(--gold1);box-shadow:0 0 0 1px var(--gold1),0 0 26px -4px rgba(255,233,168,.5)}

/* ───────── Ways to play: gold medallions ───────── */
.modes{list-style:none;margin:56px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:40px 26px;text-align:center}
.modes li{flex:1 1 180px;max-width:240px}
@media (max-width:440px){.modes{gap:32px 18px}.modes li{flex-basis:130px}}
.medal{display:grid;place-items:center;width:88px;height:88px;margin:0 auto 18px;border-radius:50%;background:radial-gradient(circle at 50% 28%,#3d2a6e,#1c1233 62%,#120c1d);
  box-shadow:inset 0 0 0 2px var(--gold2),inset 0 0 0 6px rgba(11,7,20,.85),inset 0 0 0 7px rgba(255,233,168,.35),0 0 36px -8px rgba(226,173,69,.55),0 16px 30px -12px rgba(0,0,0,.85)}
.medal svg{width:40px;height:40px;fill:none;stroke:var(--gold1);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.medal .dot{fill:var(--gold1);stroke:none}
.modes p{margin-top:6px;color:var(--muted);font-size:16px}

/* ───────── Privacy in five lines ───────── */
.facts{margin:40px auto 0;max-width:820px;border-radius:24px;overflow:hidden;background:rgba(0,0,0,.26);border:1px solid var(--rim)}
.facts div{display:grid;grid-template-columns:1fr;gap:2px;padding:15px 22px}
.facts div + div{border-top:1px solid var(--hair)}
@media (min-width:560px){.facts div{grid-template-columns:170px 1fr;gap:16px}}
.facts dt{font:800 17px/1.5 var(--display);color:var(--gold1)}
.facts dd{margin:0;text-wrap:pretty}
.more{margin-top:20px;text-align:center}

/* ───────── Closing call, on the crescent that closes the game's table ───────── */
.closing{position:relative;margin-top:clamp(84px,11vw,140px);padding:clamp(40px,6vw,64px) 0 clamp(96px,12vw,150px);isolation:isolate;overflow:hidden}
.closing::before{content:"";position:absolute;z-index:-1;left:50%;bottom:0;width:max(100%,900px);aspect-ratio:1290 / 900;transform:translateX(-50%);
  background:url(img/my_table_bottom.avif) 50% 100% / 100% auto no-repeat;-webkit-mask-image:linear-gradient(180deg,transparent 5%,#000 55%);mask-image:linear-gradient(180deg,transparent 5%,#000 55%)}
.closing-grid{display:grid;justify-items:center;text-align:center;gap:22px}
.closing .icon{width:120px;height:120px;border-radius:27px;box-shadow:0 18px 36px -12px rgba(0,0,0,.75),0 0 0 1px rgba(226,173,69,.4),0 0 70px -10px rgba(226,173,69,.5)}
.closing .say-big{max-width:15em;font:900 clamp(32px,5vw,52px)/1.08 var(--display);color:var(--ink);text-wrap:balance}

/* Footer */
.foot{background:var(--night);color:var(--muted);font-size:15px;border-top:1px solid var(--hair)}
.foot .wrap{padding-top:36px;padding-bottom:40px;display:grid;gap:14px}
.foot a{color:var(--ink)}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}

/* ───────── Support and privacy pages: the table's star arcs overhead, then a calm page to read ───────── */
.page{isolation:isolate}
.page::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:560px;pointer-events:none;opacity:.75;
  background:url(img/my_table_top.avif) 50% 0 / max(100%,900px) auto no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
.doc{max-width:780px;margin:0 auto;padding:128px var(--gutter) 96px}
.doc h1{font-size:clamp(38px,7vw,60px);line-height:1.05;filter:drop-shadow(0 3px 0 #3b2309) drop-shadow(0 12px 24px rgba(0,0,0,.6))}
.doc h2{margin-top:52px;font-size:clamp(24px,3.6vw,30px);line-height:1.2;color:var(--gold1)}
.doc h3{margin-top:30px;font-size:20px}
.doc p,.doc ul,.doc dl,.doc address{margin-top:14px}
.doc ul{padding-left:1.3em}
.doc li + li{margin-top:6px}
.doc li::marker{color:var(--gold2)}
.doc address{font-style:normal}
.doc .lead{margin-top:18px;max-width:34em;font-size:19px;color:var(--muted)}
.doc .meta,.doc .note{font-size:15px;color:var(--muted)}
.doc .meta{margin-top:12px}
.doc .lettered{list-style:none;padding-left:0}
.doc .lettered li{padding-left:1.8em;text-indent:-1.8em}
.doc strong{color:var(--ink)}
.doc .box{margin-top:30px;padding:20px 22px 22px;border-radius:22px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--rim);box-shadow:0 0 70px -24px rgba(148,102,255,.55)}
.doc .box h2{margin-top:0;font-size:22px}
.doc .facts{margin:16px 0 0}
.contact{display:grid;justify-items:start;gap:16px}
.faq{margin-top:18px;display:grid;gap:10px}
.faq details{border-radius:16px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--hair)}
.faq summary{cursor:pointer;padding:16px 20px;font:800 18px/1.35 var(--display);color:var(--ink);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;margin-left:12px;color:var(--gold2)}
.faq details[open] summary::after{content:"−"}
.faq details > div{padding:0 20px 18px}
.faq details p + p{margin-top:10px}
/* 404: a card that isn't in the deck */
.lost{text-align:center}
.lost img{display:block;width:min(42vw,180px);height:auto;margin:0 auto 36px;border-radius:15px;transform:rotate(-7deg);
  box-shadow:0 0 0 1px rgba(226,173,69,.6),0 18px 36px rgba(0,0,0,.55),0 0 90px -16px rgba(148,102,255,.7)}
.lost .lead{margin-left:auto;margin-right:auto}
.lost .actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin-top:30px}
.lost .ghost::after{transform:rotate(-45deg)}
.lost .note{margin-top:36px}

/* ───────── Motion ─────────
   Only transform and opacity move, and nothing moves a gradient. The Animations switch stops
   everything that moves by itself and makes cards turn at once; with Reduce Motion on, nothing
   moves, the power cards start face up and the switch goes away. */
@keyframes turn{to{transform:rotate(1turn)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes dealin{from{opacity:0;transform:translateY(60%) scale(.92)}}
@keyframes bob{to{transform:translateY(-4%)}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:.95;transform:scale(1) rotate(45deg)}}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .crest::before{animation:turn 120s linear infinite}
  .title > *{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
  .title > :nth-child(2){animation-delay:.08s}
  .title > :nth-child(3){animation-delay:.16s}
  .title > :nth-child(4){animation-delay:.24s}
  .title > :nth-child(n+5){animation-delay:.32s}
  .hand .bob{animation:dealin 1s cubic-bezier(.2,.8,.2,1) both,bob 3.4s ease-in-out infinite alternate;animation-delay:calc(.3s + var(--i) * .09s),calc(1.4s + var(--i) * .45s)}
  .sparks i{animation:twinkle 5.5s ease-in-out infinite}
  .hand .fan{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .hand .hc img{transition:transform .4s cubic-bezier(.3,.7,.3,1)}
  .js:has(#anim:checked) [data-reveal] > :not(.in) .flip{transform:rotateY(180deg)}
  .flip{transition:transform 1s cubic-bezier(.2,.7,.2,1)}
  .pw:nth-child(2) .flip{transition-delay:.12s}
  .pw:nth-child(3) .flip{transition-delay:.24s}
  .pw:nth-child(4) .flip{transition-delay:.36s}
  .pw:nth-child(5) .flip{transition-delay:.48s}
  .tilt{transition:transform .25s ease-out}
  .glare{transition:opacity .3s}
  .stage .bg{transition:opacity .7s ease}
  .card::before,.card::after{transition:transform .5s cubic-bezier(.3,.7,.3,1)}
  .card,.deck,.glint{transition:transform .25s ease,box-shadow .25s ease,opacity .25s ease}
  html:has(#anim:not(:checked)) .crest::before,
  html:has(#anim:not(:checked)) .hand .bob,
  html:has(#anim:not(:checked)) .sparks i{animation:none}
  html:has(#anim:not(:checked)) .hand .fan,html:has(#anim:not(:checked)) .hand .hc img,
  html:has(#anim:not(:checked)) .flip,html:has(#anim:not(:checked)) .tilt,html:has(#anim:not(:checked)) .stage .bg,
  html:has(#anim:not(:checked)) .card::before,html:has(#anim:not(:checked)) .card::after,html:has(#anim:not(:checked)) .card{transition:none}
}
.snap::before,.snap::after{transition:none !important}
@media (prefers-reduced-motion:reduce){
  .motion{display:none}
}