/* The 21-card trick. Portfolio tokens, a light stage, instructions directly above the cards. */
:root {
  --paper:#fcfcfa;
  --ink:#232426;
  --muted:#70716f;
  --blue:#2855e8;
  --ice:#edf2ff;
  --lime:#ddf38b;
  --line:#e5e7e7;
  --card-paper:#fffefb;
  --card-navy:#17355c;
  --card-red:#d93645;
  --display:'Bricolage Grotesque',sans-serif;
  --body:'DM Sans',sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
* { box-sizing:border-box; }
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
h1,h2,p { margin:0; }
button { font:inherit; color:inherit; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
::selection { background:var(--lime); color:var(--ink); }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--blue); outline-offset:5px; border-radius:6px; }
.wrap { width:min(1240px, calc(100% - 112px)); margin-inline:auto; }
.skip-link { position:fixed; top:-80px; left:20px; z-index:99; background:var(--ink); color:#fff; padding:15px; border-radius:8px; }
.skip-link:focus { top:20px; }

/* ---------- Header ---------- */
.magic-header { height:80px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.magic-back {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  border:1px solid #d8d9d8;
  border-radius:99px;
  padding:11px 18px 11px 15px;
  white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s;
}
.magic-back:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.eyebrow {
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:15px;
  letter-spacing:-.01em;
  color:var(--blue);
  white-space:nowrap;
}
.eyebrow span { font-style:normal; }
.header-end { display:flex; align-items:center; gap:14px; }
.sound-toggle { display:grid; place-items:center; width:40px; height:40px; border:1px solid #d8d9d8; border-radius:50%; color:var(--ink); transition:background .2s,border-color .2s,color .2s; }
.sound-toggle:hover { border-color:var(--ink); }
.sound-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.sound-toggle .speaker { fill:currentColor; stroke:none; }
.sound-toggle .mute { display:none; }
.sound-toggle[aria-pressed=false] { color:#8a8f99; }
.sound-toggle[aria-pressed=false] .waves { display:none; }
.sound-toggle[aria-pressed=false] .mute { display:inline; }

/* ---------- Guide: always directly above the cards ---------- */
.magic-main { padding-block:16px 56px; }
.guide { max-width:880px; margin-inline:auto; text-align:center; }
.guide-copy { transition:opacity .26s,translate .26s var(--ease); }
.guide-copy.swap { opacity:0; translate:0 6px; }
#guide-title {
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(34px,3.8vw,54px);
  line-height:1.04;
  letter-spacing:-.045em;
  text-wrap:balance;
}
#guide-text { max-width:560px; margin:10px auto 0; font-size:16px; line-height:1.6; color:var(--muted); text-wrap:balance; }
/* One spot below the copy: the button, then the column prompt and round tracker, then the reveal's Try again. */
.guide-actions { display:flex; align-items:center; justify-content:center; gap:12px; min-height:62px; margin-top:16px; }
.button {
  display:inline-flex;
  align-items:center;
  gap:24px;
  padding:16px 24px;
  border-radius:99px;
  font-size:14px;
  font-weight:550;
  transition:transform .2s,background .2s,opacity .2s,border-color .2s;
}
.button[hidden] { display:none; }
.button:hover { transform:translateY(-3px); }
.button-blue { background:var(--blue); color:#fff; box-shadow:0 5px 0 #2147c4; animation:rise .5s var(--ease) both; }
.button-blue:hover { background:#1d46cf; }
.button-outline { border:1px solid #d8d9d8; }
.button-outline:hover { border-color:var(--ink); }
.slot { display:flex; flex-direction:column; align-items:center; gap:10px; }
.slot:not(:has(.status:not(:empty), .rounds:not([hidden]))) { display:none; }
.status { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); }
.status:empty { display:none; }
.status::before { content:''; flex:0 0 6px; height:6px; border-radius:50%; background:var(--blue); }
.status.busy::before { animation:pulse 1s ease-in-out infinite; }
.status.prompt { font-size:17px; font-weight:550; color:var(--ink); animation:rise .45s var(--ease) both; }
.status.prompt::before { display:none; }
.status.prompt::after { content:'↓'; color:var(--blue); animation:nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { translate:0 3px; } }
.rounds { display:flex; align-items:center; gap:10px; font-size:12px; color:#737780; }
.rounds[hidden] { display:none; }
.dots { display:flex; gap:5px; }
.dots i { width:8px; height:8px; border-radius:99px; background:#e2e4e8; transition:background .4s,width .4s var(--ease); }
.dots i.done { background:var(--ink); }
.dots i.now { width:22px; background:var(--blue); }
@keyframes pulse { 50% { opacity:.2; scale:.6; } }

/* ---------- Stage ---------- */
.table { position:relative; isolation:isolate; margin-top:12px; }
.table::before {
  content:'';
  position:absolute;
  inset:0 8% -6%;
  z-index:-1;
  background:radial-gradient(closest-side,var(--ice),transparent 80%);
  pointer-events:none;
}
.stage {
  /* Cards grow with the screen: limited by viewport height on laptops, by width on phones. */
  --cw:min(140px, max(92px, calc((100svh - 400px) / 3.92)), calc((100vw - 72px) / 3));
  --ch:calc(var(--cw) * 1.4);
  /* Each stacked card shows its top 30%: the rank and suit in the corner reach 27% down. */
  --off:calc(var(--cw) * .42);
  --top:56px;
  position:relative;
  width:100%;
  max-width:760px;
  margin-inline:auto;
  height:calc(var(--top) + var(--ch) + var(--off) * 6);
}
.probe { position:absolute; width:var(--off); height:var(--top); visibility:hidden; pointer-events:none; }
.floor { position:absolute; left:18%; right:18%; bottom:-28px; height:44px; border-radius:50%; background:radial-gradient(closest-side,#1b2a5a1c,transparent); }

/* Column selectors */
.columns { position:absolute; inset:0; }
.column-hit { position:absolute; top:0; border-radius:18px; transition:background .25s,opacity .3s; }
.select {
  position:absolute;
  top:6px;
  left:50%;
  translate:-50% 0;
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:36px;
  padding:0 16px;
  border-radius:99px;
  border:1px solid #d8d9d8;
  background:#fff;
  font-size:13px;
  font-weight:500;
  color:#595f69;
  white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s,opacity .3s,box-shadow .2s;
}
.select b { font-family:var(--display); font-weight:700; font-size:14px; color:var(--ink); transition:color .2s; }
.columns.asking .column-hit { cursor:pointer; }
.columns.asking .select { box-shadow:0 4px 14px #1b24401a; border-color:#c9ccd1; }
.columns:not(.asking) .column-hit:not(.chosen) .select { opacity:.4; }
.column-hit:focus-visible { outline:none; }
.column-hit:focus-visible .select { outline:3px solid var(--blue); outline-offset:3px; }
/* Hover only with a real pointer; touch keeps :hover on the last tapped column. */
@media (hover:hover) {
  .columns.asking .column-hit:hover { background:#2855e80a; }
  .columns.asking .column-hit:hover .select { background:var(--ink); border-color:var(--ink); color:#fff; }
  .columns.asking .column-hit:hover .select b { color:#fff; }
}
.column-hit.chosen { background:#2855e80d; }
.column-hit.chosen .select { background:var(--blue); border-color:var(--blue); color:#fff; }
.column-hit.chosen .select b { color:#fff; }
.columns.hidden .column-hit { opacity:0; pointer-events:none; }
.column-hit:disabled { cursor:default; }

/* Cards */
.cards { position:absolute; inset:0; pointer-events:none; }
.card {
  position:absolute;
  left:0;
  top:0;
  width:var(--cw);
  height:var(--ch);
  perspective:900px;
  transform-origin:50% 50%;
  transition:transform .6s var(--ease),filter .6s;
}
.no-anim .card, .no-anim .card-inner { transition:none !important; }
.card-inner { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .5s var(--ease); }
.card.is-down .card-inner { transform:rotateY(180deg); }
/* The illustrated deck: each face and the back are images with their own rounded corners (5.9% of width). */
.card-face { position:absolute; inset:0; border-radius:calc(var(--cw) * .059); backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; box-shadow:0 1px 1px #1b244014, 0 3px 8px #1b244012; }
.card-front { background:#fbf6ea; }
.card-front img { display:block; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; }
.card-back { transform:rotateY(180deg); background:#12234a url("cards/back.webp") center / cover no-repeat; }

/* Reveal */
/* Fade the rest without transparency, so stacked cards never show through each other. */
.cards.dim .card:not(.star) { filter:contrast(.4) brightness(1.5) saturate(.6); }
.card.star .card-front { box-shadow:0 0 0 1.5px var(--blue), 0 30px 60px #2855e833; animation:pop .9s .2s var(--ease) both; }
@keyframes pop { 0% { scale:.94; } 55% { scale:1.05; } 100% { scale:1; } }
.halo { position:absolute; left:0; top:0; width:0; height:0; border-radius:16px; border:1.5px solid var(--blue); opacity:0; pointer-events:none; }
.halo.on { animation:halo 1.5s .3s var(--ease) 2 both; }
@keyframes halo { 0% { opacity:.55; scale:1; } 100% { opacity:0; scale:1.3; } }


/* ---------- Footer ---------- */
.magic-footer { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:24px 0 28px; border-top:1px solid var(--line); font-size:12px; color:#747975; }
.magic-footer a:hover { color:var(--blue); }

/* Entrance */
.guide > *, .table { animation:rise .8s var(--ease) both; }
.guide > :nth-child(2) { animation-delay:.06s; }
.guide > :nth-child(3) { animation-delay:.12s; }
.table { animation-delay:.18s; }
@keyframes rise { from { opacity:0; translate:0 14px; } }

/* ---------- Responsive ---------- */
@media (max-width:1000px) {
  .wrap { width:calc(100% - 64px); }
}
@media (max-width:600px) {
  .wrap { width:calc(100% - 32px); }
  .magic-header { height:68px; }
  .magic-back { padding:10px 15px 10px 13px; font-size:13px; gap:10px; }
  .eyebrow { font-size:14px; }
  .header-end { gap:10px; }
  .sound-toggle { width:36px; height:36px; }
  .magic-main { padding-top:4px; }
  #guide-title { font-size:clamp(30px,8.4vw,38px); }
  #guide-text { font-size:15px; line-height:1.55; }
  .guide-actions { margin-top:12px; min-height:56px; }
  .status.prompt { font-size:16px; }
  .table { margin-top:6px; }
  .stage { --top:50px; }
  .select { height:32px; padding:0 12px; font-size:12px; }
  .select b { font-size:13px; }
}
@media (max-width:360px) {
  .select { padding:0 10px; font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; }
}

/* ---------- Desktop: larger cards ----------
   Tighter spacing above the table, and the cards take the rest of the screen height (up to 200px wide). */
@media (min-width:1001px) {
  .magic-header { height:68px; }
  .magic-main { padding-top:4px; }
  .guide-actions { margin-top:10px; }
  .table { margin-top:4px; }
  .stage {
    --cw:min(200px, max(96px, calc((100svh - 316px) / 3.92)), calc((100vw - 120px) / 4));
    max-width:880px;
  }
}

/* Inline SVG icons that stand in for ↗ ↘ ✳, which iOS draws as emoji. */
.glyph { width:1em; height:1em; vertical-align:-.125em; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }