/* Data Narratives: one-screen project page, annygator portfolio style (dark, Chakra Petch / Inter / Share Tech Mono).
   Warm accents (#fdbf2d gold, #ce592c orange) come from the project's own report palette. */
:root { --dn-gold:#fdbf2d; --dn-orange:#ce592c; --dn-peach:#fbd2bf; }
html { scroll-snap-type:y proximity; }
body.dn-lock { overflow:hidden; }


/* left */
.dn-intro { justify-content:center; gap:0; }
.dn h1 { font-size:clamp(40px,4.3vw,72px); line-height:1.02; letter-spacing:-.035em; margin:14px 0 8px; padding-bottom:.12em; }
.dn-sub { margin:0 0 16px; font-family:var(--mono); font-size:clamp(12px,1.05vw,15px); letter-spacing:.06em; text-transform:uppercase; color:var(--eyebrow); line-height:1.5; font-weight: 400;}
.dn-lede { margin:0 0 clamp(14px,2.4svh,26px); max-width:520px; font-size:clamp(14px,1.15vw,17px); line-height:1.6; color:var(--muted); }
.dn-stats { list-style:none; margin:0; padding:0; display:grid; gap:clamp(8px,1.4svh,14px); max-width:520px; }
.dn-stats li { display:grid; grid-template-columns:minmax(120px,.8fr) 1.2fr; align-items:center; gap:16px; padding:clamp(8px,1.4svh,14px) 0; border-top:1px solid var(--hair); }
.dn-stats b { font-family:var(--display); font-size:clamp(26px,2.5vw,40px); font-weight:700; letter-spacing:-.03em; line-height:1; color:var(--dn-gold); white-space:nowrap; }
.dn-stats b small { font-size:.4em; letter-spacing:.04em; color:var(--dn-peach); font-weight:600; }
.dn-stats span { font-size:clamp(12px,.95vw,14px); line-height:1.5; color:var(--muted); }
.dn-credit { margin:clamp(12px,2svh,22px) 0 0; font-size:clamp(11px,.85vw,13px); line-height:1.5; color:var(--subtle); letter-spacing:.02em; }

/* middle */
.dn-mid { gap:clamp(12px,2svh,22px); justify-content:center; }
.dn h2 { font-size:clamp(18px,1.7vw,26px); font-weight:700; letter-spacing:-.02em; line-height:1.15; margin:0 0 clamp(8px,1.4svh,14px); }
.dn-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(8px,.9vw,14px); }
.dn-card { display:flex; flex-direction:column; border:1px solid var(--hair); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.03); }
.dn-card img { display:block; width:100%; height:clamp(100px,19svh,190px); object-fit:cover; object-position:50% 28%; }
.dn-card div { padding:clamp(8px,1.2svh,12px) clamp(10px,.9vw,14px) clamp(10px,1.4svh,14px); }
.dn-card h3 { font-size:clamp(17px,1.4vw,22px); letter-spacing:-.02em; margin:0 0 2px; }
.dn-card em { display:block; font-style:normal; font-family:var(--mono); font-size:clamp(10px,.8vw,12px); letter-spacing:.05em; text-transform:uppercase; color:var(--dn-peach); margin-bottom:6px; line-height:1.4; font-weight: 400;}
.dn-card p { margin:0; font-size:clamp(12px,.9vw,14px); line-height:1.5; color:var(--muted); }

.dn-game { border:1px solid var(--hair); border-radius:14px; padding:clamp(12px,2svh,20px) clamp(14px,1.4vw,22px); background:linear-gradient(135deg,rgba(138,4,5,.28),rgba(5,3,9,.4) 60%); }
.dn-game__head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:clamp(8px,1.4svh,14px); }
.dn-game h2 { margin:0; }
.dn-letters { display:flex; gap:6px; }
.dn-letters i { display:grid; place-items:center; width:clamp(26px,2.3vw,36px); aspect-ratio:1; font-style:normal; font-family:var(--display); font-weight:700; font-size:clamp(14px,1.3vw,20px); color:#150a05; background:var(--dn-gold); border-radius:6px; box-shadow:0 0 14px rgba(253,191,45,.35); }
.dn-letters i:nth-child(2n) { background:var(--dn-peach); box-shadow:0 0 14px rgba(251,210,191,.3); }
.dn-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(8px,.9vw,14px); }
.dn-steps li { display:flex; flex-direction:column; gap:6px; padding-top:10px; border-top:2px solid var(--dn-orange); }
.dn-steps b { font-family:var(--mono); font-size:clamp(11px,.9vw,13px); letter-spacing:.08em; color:var(--dn-gold); font-weight: 400;}
.dn-steps span { font-size:clamp(11.5px,.85vw,13.5px); line-height:1.45; color:var(--muted); }

/* right */
.dn-side { justify-content:center; align-items:center; gap:clamp(12px,2svh,20px); }
.dn-poster { margin:0; width:100%; max-height:calc(100svh - clamp(112px,13.5svh,130px) - clamp(18px,3svh,32px) - 90px); display:flex; justify-content:center; }
.dn-poster img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; border-radius:10px; border:1px solid var(--hair); box-shadow:0 0 60px rgba(125,204,255,.12); }
.dn-open { min-width:0; width:100%; max-width:300px; height:48px; padding:0 14px; font-size:clamp(12px,.95vw,15px); letter-spacing:.04em; }
.dn-open .ek-btn__l { margin-left:14px; }

/* infographic lightbox */
.dn-lb { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:4vh 4vw; background:rgba(5,3,9,.94); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); overflow:auto; }
.dn-lb[hidden] { display:none; }
.dn-lb img { display:block; max-height:92vh; max-width:92vw; width:auto; height:auto; border-radius:8px; }
.dn-lb__x { position:fixed; top:20px; right:24px; width:46px; height:46px; border-radius:50%; border:1px solid var(--hair); background:rgba(255,255,255,.08); color:#fff; font-size:28px; line-height:1; display:grid; place-items:center; padding:0 0 3px; }
.dn-lb__x:hover { background:rgba(255,255,255,.16); }


/* three full-screen sections, scrolling down */
.dn-sec { min-height:100svh; scroll-snap-align:start; display:flex; align-items:center; justify-content:center; padding:clamp(120px,15svh,150px) clamp(20px,4vw,64px) clamp(40px,7svh,80px); }
.dn-in { width:100%; max-width:1240px; }
.dn-intro__in { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,90px); align-items:center; }
.dn-intro .dn-lede, .dn-intro .dn-stats { max-width:560px; }
.dn h1 { font-size:clamp(48px,6.4vw,104px); }
.dn-sub { font-size:clamp(12px,1.1vw,16px); }
.dn-lede { font-size:clamp(15px,1.3vw,19px); }
.dn-stats b { font-size:clamp(30px,3vw,48px); }
.dn-stats span { font-size:clamp(13px,1.05vw,15px); }
.dn-credit { margin-top:clamp(20px,3svh,32px); }
.dn-mid .dn-in { display:grid; gap:clamp(22px,4svh,40px); }
.dn h2 { font-size:clamp(22px,2.2vw,34px); }
.dn-card img { height:clamp(180px,30svh,320px); }
.dn-card h3 { font-size:clamp(19px,1.6vw,26px); }
.dn-card em { font-size:clamp(10px,.85vw,13px); }
.dn-card p { font-size:clamp(13px,1vw,15px); }
.dn-steps span { font-size:clamp(12.5px,.95vw,14.5px); }
.dn-side__in { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:clamp(32px,6vw,100px); align-items:center; }
.dn-poster { max-height:none; justify-content:center; }
.dn-poster img { max-height:calc(100svh - 230px); }
.dn-side__txt h2 { font-size:clamp(30px,3.6vw,56px); line-height:1.08; margin:14px 0 18px; letter-spacing:-.03em; }
.dn-side__txt .dn-lede { margin-bottom:28px; max-width:480px; }
.dn-open { width:100%; max-width:300px; }
@media (max-width:900px) {
  .dn-intro__in, .dn-side__in { grid-template-columns:1fr; }
  .dn-side__in .dn-poster { order:2; } .dn-poster img { max-height:70svh; }
  .dn-cards { grid-template-columns:1fr; }
  .dn-card { flex-direction:row; } .dn-card img { width:42%; height:auto; min-height:150px; }
  .dn-steps { grid-template-columns:1fr; }
}
@media (max-width:700px) { .dn-stats li { grid-template-columns:1fr; gap:4px; } .dn-card { flex-direction:column; } .dn-card img { width:100%; height:200px; } }
.dn-tag { margin:0; font-family:var(--display); font-weight:600; font-size:clamp(16px,1.6vw,24px); letter-spacing:.01em; line-height:1.25; color:var(--eyebrow); }
.dn-kicker { margin:0 0 clamp(14px,2.4svh,24px); font-family:var(--body); font-weight:500; font-size:clamp(15px,1.4vw,21px); letter-spacing:.01em; line-height:1.3; color:var(--eyebrow); }
.dn h1 { font-weight:700; font-size:clamp(40px,5.2vw,86px); line-height:1.06; letter-spacing:-.03em; margin:0 0 clamp(16px,2.6svh,28px); padding-bottom:.12em; }
.dn-intro .ek-grad { display:inline-block; padding:.04em .04em .16em; margin:-.04em -.04em -.16em; }

/* landing: text only; numbers get their own fold, in one row */
.dn-intro__in { grid-template-columns:1fr; }
.dn-intro .dn-lede { max-width:640px; }
.dn-credit { margin-top:clamp(20px,3svh,32px); }
.dn-nums .dn-stats { max-width:none; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,56px); margin-top:clamp(20px,4svh,40px); }
.dn-nums .dn-stats li { grid-template-columns:1fr; align-content:start; gap:14px; padding:clamp(18px,3svh,28px) 0 0; border-top:2px solid var(--dn-orange); }
.dn-nums .dn-stats b { font-size:clamp(34px,4.6vw,76px); }
.dn-nums .dn-stats span { font-size:clamp(13px,1.15vw,17px); max-width:340px; }
.dn-nums h2 { font-size:clamp(24px,2.6vw,40px); margin:0; }
@media (max-width:900px) { .dn-nums .dn-stats { grid-template-columns:1fr; } .dn-nums .dn-stats b { font-size:clamp(40px,11vw,64px); } }

/* landing: poster on the right */
.dn-intro__in { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
.dn-hero-poster { margin:0; display:flex; justify-content:flex-end; }
.dn-hero-poster img { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100svh - 210px); border-radius:10px; border:1px solid var(--hair); box-shadow:0 0 70px rgba(125,204,255,.14); }
@media (max-width:900px) { .dn-intro__in { grid-template-columns:1fr; } .dn-hero-poster { justify-content:flex-start; } .dn-hero-poster img { max-height:none; } }

/* landing poster: dissolve into the page, no box edges */
.dn-hero-poster img { border:0; border-radius:0; box-shadow:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 74%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 74%,transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect; }
.dn-hero-poster { justify-content:center; }
.dn-hero-poster img {
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 7%,#000 90%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 7%,#000 90%,transparent 100%); }

.dn-hero-poster img { max-height:calc(100svh - 170px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 82%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 82%,transparent 100%); }

/* bigger landing image */
.dn-intro__in { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
.dn-hero-poster { margin-right:-3%; }
.dn-hero-poster img { width:100%; max-width:none; max-height:calc(100svh - 100px); object-fit:contain; }
@media (max-width:900px) { .dn-intro__in { grid-template-columns:1fr; } .dn-hero-poster { margin-right:0; } .dn-hero-poster img { max-height:none; } }
.dn-hero-poster img { max-height:calc(100svh - 150px); }
.dn-hero-poster img { -webkit-mask-image:none; mask-image:none; }
.dn-hero-poster img { -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect; }
.dn-hero-poster img { -webkit-mask-image:none !important; mask-image:none !important; background:none; border:0; box-shadow:none; }

/* landing: text and image both centred on the vertical middle of the screen */
.dn-intro { padding-top:40px; padding-bottom:40px; }
.dn-intro__in { align-items:center; }
.dn-intro__txt, .dn-hero-poster { align-self:center; }

/* landing: image pushed further right, text gets more room */
.dn-intro__in { grid-template-columns:minmax(0,1fr) auto; column-gap:clamp(24px,3vw,56px); }
.dn-hero-poster { margin-right:calc(-1 * clamp(40px,7vw,130px)); }
.dn-hero-poster img { width:auto; height:calc(100svh - 150px); max-height:none; max-width:none; aspect-ratio:1229/1249; }
.dn-intro .dn-lede { max-width:600px; }
.dn-kicker { white-space:nowrap; }
@media (max-width:900px) { .dn-intro__in { grid-template-columns:1fr; } .dn-hero-poster { margin-right:0; } .dn-hero-poster img { width:100%; height:auto; } .dn-kicker { white-space:normal; } }
.dn-sec { overflow-x:clip; }
.dn-hero-poster { margin-right:calc(-1 * clamp(30px,5.5vw,100px)); }
html, body { overflow-x:hidden; }

/* landing: text + image grouped as one block, centred horizontally on the page */
.dn-intro { padding-left:clamp(20px,3vw,48px); padding-right:clamp(20px,3vw,48px); }
.dn-intro .dn-in { max-width:none; width:100%; }
.dn-intro__in { display:flex; justify-content:center; align-items:center; gap:clamp(24px,3.5vw,64px); }
.dn-intro__txt { flex:0 1 520px; min-width:0; }
.dn-intro .dn-lede { max-width:none; }
.dn-hero-poster { flex:0 0 auto; margin:0; justify-content:center; }
.dn-hero-poster img { width:auto; height:calc(100svh - 150px); max-width:52vw; object-fit:contain; }
@media (max-width:900px) { .dn-intro__in { flex-direction:column; align-items:flex-start; } .dn-intro__txt { flex:none; width:100%; } .dn-hero-poster { width:100%; } .dn-hero-poster img { width:100%; height:auto; max-width:100%; } }

.dn-hero-poster { position:relative; }

.dn-hero-poster { position:relative; }

/* tighter spacing between the sections below the landing */
html { scroll-snap-type:none; }
.dn-sec:not(.dn-intro) { min-height:0; padding-top:clamp(40px,6svh,64px); padding-bottom:clamp(40px,6svh,64px); scroll-snap-align:none; }
.dn-mid .dn-in { gap:clamp(20px,3svh,32px); }

/* landing text: identical type scale and spacing to the Vision Loss landing (.ek-hero) */
.dn-intro__txt { --gap:40px; flex:0 1 600px; }
.dn-intro .dn-kicker { display:block; margin:0; font-family:var(--body); font-size:18px; font-weight:500; letter-spacing:.06em; line-height:1.5; text-transform:uppercase; color:var(--eyebrow); }
.dn .dn-intro h1 { font-size:clamp(64px,5vw,72px); line-height:1.14; letter-spacing:-.035em; font-weight:700; text-transform:none; margin:18px 0 22px; padding:0; }
.dn-intro h1 .ek-focus { display:inline-block; padding:.06em .04em .26em; margin:-.06em -.04em -.26em; animation:none; }
.dn-intro .dn-lede.ek-sub { max-width:560px; margin:0; font-family:var(--mono); font-size:18px;  letter-spacing:.06em; text-transform:uppercase; line-height:1.5; color:var(--eyebrow); font-weight: 400;}
.dn-intro .dn-credit.ek-mentor { margin:var(--gap) 0 0; font-size:14px; letter-spacing:.06em; line-height:1.5; color:var(--muted, rgba(235,225,255,.72)); }
@media (max-width:900px) { .dn .dn-intro h1 { font-size:clamp(52px,13vw,64px); } .dn-intro .dn-kicker, .dn-intro .dn-lede.ek-sub { font-size:16px; } }
.dn-intro .dn-credit.ek-mentor { font-size:18px; letter-spacing:.04em; }

/* descriptions and body text are set in Inter */
.dn-intro .dn-lede.ek-sub { font-family:var(--body); font-size:20px; font-weight:400; letter-spacing:0; text-transform:none; line-height:1.6; color:var(--muted, rgba(235,225,255,.72)); max-width:560px; }

/* ===== hero: full-bleed poster with centred text (from the Figma "Data Narratives Hero" frame) ===== */
.dn-hero { position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:space-between; align-items:center; text-align:center; padding:clamp(112px,13svh,140px) 5% clamp(40px,7svh,72px); overflow:hidden; isolation:isolate; }
.dn-hero__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; z-index:-1; }
.dn-hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:22%; background:linear-gradient(180deg,transparent,#050309); z-index:-1; pointer-events:none; }
.dn-hero__kicker { margin:0; font-family:var(--body); font-weight:400; font-size:clamp(13px,1.4vw,20px); letter-spacing:.04em; line-height:1.3; text-transform:uppercase; color:#c5aaff; }
.dn .dn-hero h1 { margin:clamp(6px,1svh,12px) 0 0; font-size:clamp(44px,6.2vw,92px); line-height:1.12; letter-spacing:-.035em; font-weight:700; text-transform:none; color:#fff; padding:0; }
.dn-hero__grad { display:inline-block; padding:.06em .04em .22em; margin:-.06em -.04em -.22em; }
.dn-hero__desc { margin:0; max-width:980px; font-family:var(--body); font-size:clamp(17px,2.08vw,30px); line-height:1.25; color:#fff; }
.dn-hero__mentor { margin:clamp(24px,5svh,56px) 0 0; font-family:var(--body); font-size:clamp(16px,2.08vw,30px); line-height:1.25; color:rgba(197,170,255,.62); }
@media (max-width:700px) { .dn-hero__desc br { display:none; } }

/* hero text sizes updated from Figma (24px body, tighter gap) */
.dn-hero { padding-bottom:clamp(30px,4.5svh,48px); }
.dn-hero__desc { max-width:min(1087px,76vw); font-size:clamp(16px,1.67vw,24px); line-height:1.42; }
.dn-hero__mentor { margin-top:clamp(10px,1.5svh,16px); font-size:clamp(15px,1.67vw,24px); line-height:1.42; }
@media (max-width:700px) { .dn-hero__desc br { display:none; } }
/* hero v3: smaller framed poster on black, per updated Figma */
.dn-hero { padding-top:clamp(120px,14svh,150px); padding-bottom:clamp(40px,7svh,72px); background:#000; }
.dn-hero__bg { object-position:50% 50%; }
.dn-hero__mentor { margin-top:clamp(10px,1.5svh,16px); }

/* hero v4: blend poster into page + light flares behind */
.dn-hero{background:transparent}
.dn-hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
   radial-gradient(ellipse 38% 46% at 86% 16%,rgba(42,63,198,.42),transparent 70%),
   radial-gradient(ellipse 40% 48% at 12% 82%,rgba(224,31,253,.30),transparent 70%),
   radial-gradient(ellipse 30% 36% at 50% 4%,rgba(183,108,255,.22),transparent 70%),
   radial-gradient(ellipse 26% 30% at 92% 88%,rgba(253,191,45,.12),transparent 70%);
  animation:dn-flare 9s ease-in-out infinite alternate}
.dn-hero__bg{mix-blend-mode:screen;-webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 62% 60% at 50% 50%,#000 55%,transparent 100%)}
@keyframes dn-flare{from{opacity:.75;transform:scale(1)}to{opacity:1;transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.dn-hero::before{animation:none}}

/* hero v5: exact colours from the Vision Loss kit landing */
.dn-hero__kicker{color:var(--eyebrow,#dbb8ff)}
.dn .dn-hero h1{color:var(--text,#f9f4ff)}
.dn-hero__desc{color:var(--eyebrow,#dbb8ff)}
.dn-hero__mentor{color:var(--muted,rgba(245,241,249,.72))}
.dn-hero::before{background:
  radial-gradient(circle at 88% 14%,rgba(42,63,198,.30),transparent 38%),
  radial-gradient(circle at 14% 78%,rgba(190,40,207,.24),transparent 40%)}

/* hero v6: line-heights matched to the kit landing */
.dn .dn-hero h1{line-height:1.02}
.dn-hero__desc,.dn-hero__mentor{line-height:1.6}

/* hero v7: text positions per latest Figma frame (kicker y=119, mentor bottom gap 45 of 1024) */
.dn-hero{padding-top:clamp(112px,11.6svh,150px);padding-bottom:clamp(32px,4.4svh,72px)}

/* hero v8: description removed per Figma; mentor line sits 85/1024 from bottom */
.dn-hero__bottom{margin-top:auto}
.dn-hero__mentor{margin-top:0}
.dn-hero{padding-bottom:clamp(40px,8.3svh,96px)}

/* cards: slight tilt + border glow on hover */
.dn-card{transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .35s;will-change:transform}
.dn-card:hover,.dn-card:focus-visible{transform:rotate(.5deg);border-color:rgba(183,108,255,.85);
  box-shadow:0 0 0 1px rgba(183,108,255,.55),0 0 22px rgba(224,31,253,.35),0 0 46px rgba(28,25,215,.28)}
.dn-card:nth-child(even):hover{transform:rotate(-.5deg)}
@media (prefers-reduced-motion:reduce){.dn-card:hover{transform:none}}
a.dn-card{text-decoration:none;color:inherit;cursor:pointer}

/* cards: pointer-following tilt, same behaviour as the About me frame on the portfolio */
.dn-card{--tilt-x:0deg;--tilt-y:0deg;transform:perspective(1400px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .15s ease-out,border-color .25s ease,box-shadow .25s ease}
.dn-card:hover,.dn-card:focus-visible,.dn-card:nth-child(even):hover{transform:perspective(1400px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));border-color:#c98cff;
  box-shadow:0 0 22px rgba(201,140,255,.38),0 0 60px rgba(139,66,255,.2),inset 0 0 0 1px rgba(255,255,255,.04)}
@media (prefers-reduced-motion:reduce){.dn-card,.dn-card:hover{transform:none}}

/* card text: more air between name, role and description */
.dn-card h3{margin:0 0 8px;line-height:1.2}
.dn-card em{margin-bottom:12px;line-height:1.5}
.dn-card p{line-height:1.7}
.dn-card div{padding-top:clamp(14px,1.8svh,20px);padding-bottom:clamp(16px,2.2svh,22px)}

/* second section: infographic poster left, metrics stacked on the right */
.dn-nums__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,88px);align-items:center}
.dn-info{all:unset;display:block;cursor:zoom-in;border-radius:14px;overflow:hidden;border:1px solid var(--hair);box-shadow:0 0 60px rgba(139,66,255,.16);transition:border-color .25s,box-shadow .25s}
.dn-info:hover,.dn-info:focus-visible{border-color:#c98cff;box-shadow:0 0 22px rgba(201,140,255,.38),0 0 60px rgba(139,66,255,.2)}
.dn-info img{display:block;width:100%;height:auto}
.dn-nums .dn-stats{grid-template-columns:1fr;gap:clamp(16px,2.6svh,28px);margin-top:clamp(18px,3svh,32px)}
.dn-nums .dn-stats li{padding-top:clamp(14px,2.2svh,22px);gap:10px}
.dn-nums .dn-stats b{font-size:clamp(34px,4.2vw,68px)}
.dn-nums .dn-stats span{max-width:520px}
@media (max-width:900px){.dn-nums__grid{grid-template-columns:1fr}}

/* poster bigger */
.dn-nums__grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,4vw,64px);align-items:start}
.dn-nums__side{position:sticky;top:clamp(120px,16svh,160px)}
.dn-nums .dn-stats b{font-size:clamp(32px,3.6vw,58px)}
@media (max-width:900px){.dn-nums__grid{grid-template-columns:1fr}.dn-nums__side{position:static}}

/* game pages: the "How to play?" strip lives here now */
.dn-game-page{place-content:center;justify-items:center}
.dn-game-page .dn-game{width:min(1240px,92vw);text-align:left;margin:14px 0 10px}
.dn-game-page{padding-top:clamp(130px,18svh,170px)!important;align-content:start}

/* final section: infographic poster, dead centre */
.dn-final{display:grid;place-items:center}
.dn-final .dn-in{display:grid;place-items:center;width:100%}
.dn-final__poster{width:min(640px,88vw);margin:0 auto}

/* metrics: back to a horizontal row, now below the character cards */
.dn-nums .dn-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,56px);margin-top:clamp(20px,4svh,40px)}
.dn-nums .dn-stats li{padding-top:clamp(18px,3svh,28px);gap:14px}
.dn-nums .dn-stats b{font-size:clamp(34px,4.6vw,76px)}
.dn-nums .dn-stats span{max-width:340px}
@media (max-width:900px){.dn-nums .dn-stats{grid-template-columns:1fr}.dn-nums .dn-stats b{font-size:clamp(40px,11vw,64px)}}

/* gallery row 1: photos travel left to right behind the poster */
.dn-final{position:relative;overflow:hidden;padding-block:clamp(40px,7svh,90px)}
.dn-final .dn-in{position:relative;z-index:2}
.dn-final__poster{position:relative;z-index:2}
.dn-belt{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:1;pointer-events:none;overflow:hidden}
.dn-belt__track{display:flex;width:max-content;animation:dn-belt 75s linear infinite;will-change:transform}
.dn-belt__grp{display:flex;flex:none}
.dn-belt img{display:block;flex:none;height:clamp(200px,34svh,320px);width:auto;margin-right:clamp(14px,1.6vw,26px);border-radius:12px;border:1px solid var(--hair);box-shadow:0 0 30px rgba(139,66,255,.14)}
@keyframes dn-belt{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.dn-belt__track{animation:none;transform:translateX(-25%)}}

/* two belts: row 1 left→right above the poster's middle, row 2 right→left below */
.dn-final{padding-block:clamp(60px,9svh,110px)}
.dn-belt--ltr{top:24%}
.dn-belt--rtl{top:76%}
.dn-belt--rtl .dn-belt__track{animation-name:dn-belt-rtl;animation-duration:85s}
@keyframes dn-belt-rtl{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.dn-belt--rtl .dn-belt__track{animation:none;transform:translateX(-25%)}}

/* three belts: L→R top, R→L middle, L→R bottom */
.dn-final{padding-block:clamp(70px,10svh,120px)}
.dn-belt--ltr{top:17%}
.dn-belt--rtl{top:50%}
.dn-belt--3{top:83%}
.dn-belt--3 .dn-belt__track{animation-duration:80s}

/* black overlay on the moving gallery photos: ~70% visible, so the poster leads */
.dn-belt img{filter:brightness(.3)}

/* infographic: much stronger border glow on hover */
.dn-final__poster:hover,.dn-final__poster:focus-visible{border-color:#e6c4ff;box-shadow:0 0 0 1px #d9a8ff,0 0 24px 4px rgba(217,168,255,.75),0 0 70px 14px rgba(190,40,207,.55),0 0 130px 30px rgba(42,63,198,.5)}

/* toned down */
.dn-final__poster:hover,.dn-final__poster:focus-visible{border-color:#d9a8ff;box-shadow:0 0 18px 2px rgba(217,168,255,.5),0 0 50px 8px rgba(190,40,207,.35),0 0 90px 16px rgba(42,63,198,.3)}

/* slight blur on the background gallery photos */
.dn-belt img{filter:brightness(.3)}

/* photos vanish the instant they touch the poster edge and reappear from its other edge */
.dn-final{--pw:min(640px,88vw)}
.dn-belt{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(50% - var(--pw)/2),transparent calc(50% - var(--pw)/2),transparent calc(50% + var(--pw)/2),#000 calc(50% + var(--pw)/2),#000 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(50% - var(--pw)/2),transparent calc(50% - var(--pw)/2),transparent calc(50% + var(--pw)/2),#000 calc(50% + var(--pw)/2),#000 100%)}

/* three rows span exactly the poster's height; 4px dissolve gap either side of the poster */
.dn-final{--pw:min(640px,88vw);--ph:calc(var(--pw) * 1819 / 1287 + 2px);--gap:clamp(10px,1.2vw,18px);--cut:4px;--fade:44px}
.dn-belts{position:absolute;left:0;right:0;top:50%;height:var(--ph);transform:translateY(-50%);z-index:1;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between}
.dn-belts .dn-belt{position:relative;left:auto;right:auto;top:auto;transform:none}
.dn-belts .dn-belt img{height:calc((var(--ph) - 2 * var(--gap)) / 3);margin-right:var(--gap)}
.dn-belt{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(50% - var(--pw)/2 - var(--cut) - var(--fade)),transparent calc(50% - var(--pw)/2 - var(--cut)),transparent calc(50% + var(--pw)/2 + var(--cut)),#000 calc(50% + var(--pw)/2 + var(--cut) + var(--fade)),#000 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(50% - var(--pw)/2 - var(--cut) - var(--fade)),transparent calc(50% - var(--pw)/2 - var(--cut)),transparent calc(50% + var(--pw)/2 + var(--cut)),#000 calc(50% + var(--pw)/2 + var(--cut) + var(--fade)),#000 100%)}

/* Arjun's deck overlay */
.dn-deck-open{overflow:hidden}
.dn-deck{position:fixed;inset:0;z-index:300;background:#050309;display:grid;grid-template-rows:1fr auto;opacity:0;transition:opacity .25s ease;overflow:hidden}
.dn-deck.is-on{opacity:1}
.dn-deck[hidden]{display:none}
.dn-deck .ek-glow{z-index:0}
.dn-deck__table{position:relative;z-index:1;display:grid;place-items:center;padding:clamp(24px,5svh,56px) 16px 0;min-height:0}
.dn-deck__pile{position:relative;height:min(72svh,640px);aspect-ratio:373/509;max-width:86vw}
.dn-deck__card{position:absolute;inset:0;transition:transform .65s cubic-bezier(.22,1,.36,1);will-change:transform;filter:drop-shadow(0 14px 22px rgba(0,0,0,.55))}
.dn-deck__card img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.dn-deck__bar{position:relative;z-index:2;display:flex;justify-content:center;gap:clamp(14px,3vw,28px);padding:clamp(18px,3svh,32px) 16px clamp(24px,5svh,48px)}
.dn-play-cta{display:flex;justify-content:center;margin-block:6px 4px}
@media (prefers-reduced-motion:reduce){.dn-deck,.dn-deck__card{transition:none}}

/* Arjun page: How to play sits right under the title, Play + Exit below it */
.dn-game-page{min-height:0!important;align-content:start}
.dn-play-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(14px,3vw,28px);margin-block:10px 0}

/* Arjun: portrait + story on the left, rules and CTAs on the right */
.dn-stage{width:min(1240px,92vw);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:start;text-align:left;margin-top:clamp(10px,2svh,24px)}
.dn-char{margin:0;display:grid;gap:18px}
.dn-char img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--hair);box-shadow:0 0 60px rgba(139,66,255,.16)}
.dn-char figcaption{font-family:Inter,system-ui,sans-serif;font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:var(--muted)}
.dn-stage__rules{display:grid;gap:clamp(18px,3svh,28px);align-content:start}
.dn-stage__rules .dn-game{width:auto;margin:0}
.dn-stage .dn-steps{grid-template-columns:1fr;gap:12px}
.dn-stage .dn-steps li{flex-direction:row;align-items:baseline;gap:14px;padding-top:10px}
.dn-stage .dn-steps span{font-size:clamp(14px,1.05vw,16px)}
.dn-stage .dn-play-cta{justify-content:flex-start;margin:0}
@media (max-width:820px){.dn-stage{grid-template-columns:1fr}.dn-char{max-width:420px;margin-inline:auto}.dn-stage .dn-play-cta{justify-content:center}}

/* larger text in How to play */
.dn-stage .dn-game h2{font-size:clamp(30px,2.6vw,42px)}
.dn-stage .dn-steps b{font-size:clamp(15px,1.2vw,18px)}
.dn-stage .dn-steps span{font-size:clamp(17px,1.4vw,21px);line-height:1.5}
.dn-stage .dn-steps{gap:14px}
.dn-stage .ek-btn--lg{font-size:clamp(17px,1.3vw,20px)}

/* story card above How to play */
.dn-story{border:1px solid var(--hair);border-radius:14px;padding:clamp(16px,2.4svh,26px) clamp(16px,1.6vw,26px);background:linear-gradient(135deg,rgba(138,4,5,.28),rgba(5,3,9,.4) 60%)}
.dn-story p{margin:0;font-family:Inter,system-ui,sans-serif;font-size:clamp(17px,1.4vw,21px);line-height:1.6;color:var(--text)}

/* Play / Exit centred under the portrait and the cards */
.dn-play-cta--c{justify-content:center!important;margin-top:clamp(20px,4svh,40px)!important}

/* Arjun page: everything fits in the first fold (sized from viewport height) */
.dn-game-page.dn-fit{--u:clamp(11.5px,1.95svh,18px);--stageh:max(360px,calc(100svh - 318px));padding-top:clamp(84px,11svh,112px)!important;padding-bottom:clamp(12px,2.4svh,28px)!important;gap:clamp(10px,2svh,22px)!important;align-content:start}
.dn-fit h1{font-size:clamp(26px,5.2svh,50px)!important;line-height:1.05;margin:0}
.dn-fit .dn-stage{width:min(1080px,92vw);grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.6vw,36px);margin-top:0;align-items:stretch}
.dn-fit .dn-char{display:block}
.dn-fit .dn-char img{height:var(--stageh);width:auto;max-width:42vw;aspect-ratio:1000/1252;object-fit:cover}
.dn-fit .dn-stage__rules{gap:calc(var(--u)*.8);align-content:stretch;grid-template-rows:auto 1fr}
.dn-fit .dn-story{padding:calc(var(--u)*.9) calc(var(--u)*1.1)}
.dn-fit .dn-story p{font-size:calc(var(--u)*1.12);line-height:1.5}
.dn-fit .dn-game{padding:calc(var(--u)*.8) calc(var(--u)*1.1);display:flex;flex-direction:column;min-height:0}
.dn-fit .dn-game__head{margin-bottom:calc(var(--u)*.5)}
.dn-fit .dn-stage .dn-game h2{font-size:calc(var(--u)*1.7)}
.dn-fit .dn-stage .dn-steps{gap:calc(var(--u)*.55);flex:1;align-content:space-between}
.dn-fit .dn-stage .dn-steps li{padding-top:calc(var(--u)*.45);gap:calc(var(--u)*.8)}
.dn-fit .dn-stage .dn-steps b{font-size:calc(var(--u)*.85)}
.dn-fit .dn-stage .dn-steps span{font-size:calc(var(--u)*1.05);line-height:1.4}
.dn-fit .dn-play-cta--c{margin-top:0!important;gap:clamp(12px,2vw,22px)}
.dn-fit .ek-btn--lg{height:clamp(38px,5.4svh,50px);min-width:clamp(150px,13vw,200px);font-size:clamp(13px,1.9svh,17px)}
@media (max-width:820px){.dn-fit .dn-stage{grid-template-columns:1fr}.dn-fit .dn-char img{height:auto;width:100%;max-width:340px}}
.dn-game-page.dn-fit{--stageh:max(340px,calc(100svh - 352px));padding-top:clamp(118px,14.5svh,150px)!important;gap:clamp(16px,2.8svh,30px)!important}

/* Exit: no dot */
.ek-btn--nodot .ek-btn__dot{display:none}
.ek-btn--nodot .ek-btn__l{margin-left:0}
.ek-btn--nodot:hover .ek-btn__l,.ek-btn--nodot:focus-visible .ek-btn__l{transform:none}

/* deck screen: Reset game + Exit sit top right, pile gets the whole stage */
.dn-deck{grid-template-rows:1fr}
.dn-deck__bar{position:absolute;top:clamp(14px,2.6svh,28px);right:clamp(14px,2.6vw,32px);left:auto;padding:0;gap:clamp(10px,1.2vw,16px);z-index:3}
.dn-deck__bar .ek-btn{height:44px;min-width:0;padding:0 24px;font-size:14px}
.dn-deck__bar .ek-btn--nodot .ek-btn__l{margin-left:0}
.dn-deck__table{padding:clamp(56px,8svh,84px) 16px clamp(24px,4svh,48px)}
.dn-deck__pile{height:min(82svh,760px)}
@media (max-width:560px){.dn-deck__bar .ek-btn{padding:0 14px;font-size:12px}}

/* icon buttons on the deck screen (replace the dot) */
.ek-btn--ico-l .ek-btn__c{gap:10px}
.ek-btn--ico-l .ek-btn__l{margin-left:0}
.ek-btn--ico-l:hover .ek-btn__l,.ek-btn--ico-l:focus-visible .ek-btn__l{transform:none}
.ek-btn--ico-l .dn-ico{flex:none;color:#d7a5ff;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.ek-btn--ico-l:hover .dn-ico{transform:rotate(-90deg)}
#dn-deck-exit.ek-btn--ico-l:hover .dn-ico{transform:translateX(3px)}

.ek-btn--lg.ek-btn--ico-l .dn-ico{width:1.1em;height:1.1em}
.ek-btn--ico-l[data-open-deck]:hover .dn-ico{transform:scale(1.15)}

/* icon hover: no rotation anywhere; exit nudges the same way on both screens */
.ek-btn--ico-l:hover .dn-ico,.ek-btn--ico-l:focus-visible .dn-ico{transform:scale(1.12)}
.ek-btn--ico-l:hover .dn-ico--exit,.ek-btn--ico-l:focus-visible .dn-ico--exit,#dn-deck-exit.ek-btn--ico-l:hover .dn-ico{transform:translateX(3px)}

/* 3D on hover: the chamfered outline lifts and shows a solid extruded edge below it */
.ek-btn--ico-l{transition:transform .22s cubic-bezier(.22,1,.36,1)}
.ek-btn--ico-l .ek-btn__o path{transition:fill .22s,filter .22s}
.ek-btn--ico-l:hover,.ek-btn--ico-l:focus-visible{transform:translate(-3px,-4px)}
.ek-btn--ico-l:hover .ek-btn__o path,.ek-btn--ico-l:focus-visible .ek-btn__o path{
  fill:rgba(139,66,255,.18);stroke:#d7a5ff;
  filter:drop-shadow(1px 1px 0 #6d2fd1) drop-shadow(2px 2px 0 #5f27b8) drop-shadow(3px 3px 0 #531fa0) drop-shadow(4px 4px 0 #461a88) drop-shadow(5px 6px 0 #3a1570) drop-shadow(6px 14px 14px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(139,66,255,.5));
}
.ek-btn--ico-l:active{transform:translate(0,0)}
.ek-btn--ico-l:active .ek-btn__o path{filter:drop-shadow(1px 1px 0 #6d2fd1) drop-shadow(0 0 8px rgba(139,66,255,.4))}
@media (prefers-reduced-motion:reduce){.ek-btn--ico-l:hover,.ek-btn--ico-l:focus-visible{transform:none}}
.ek-btn--ico-l:hover .ek-btn__o path,.ek-btn--ico-l:focus-visible .ek-btn__o path{fill:#1b0c36}
/* thinner slab */
.ek-btn--ico-l:hover,.ek-btn--ico-l:focus-visible{transform:translate(-1px,-2px)}
.ek-btn--ico-l:hover .ek-btn__o path,.ek-btn--ico-l:focus-visible .ek-btn__o path{
  filter:drop-shadow(1px 1px 0 #6d2fd1) drop-shadow(2px 3px 0 #4a1c8f) drop-shadow(3px 10px 10px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(139,66,255,.45));
}

/* ===== Arjun's game board ===== */
.dn-deck{--ch:clamp(96px,20svh,200px);--cw:calc(var(--ch)*373/509);--ov:.38}
.dg-board{position:absolute;z-index:1;inset:clamp(60px,9svh,84px) clamp(16px,2.4vw,36px) clamp(14px,2.4svh,26px);display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto;column-gap:clamp(14px,2.2vw,36px);row-gap:clamp(10px,2svh,22px);overflow:auto}
.dg-deckzone{grid-column:1;grid-row:1;align-self:start;display:grid;gap:10px;justify-items:start}
.dg-label{font-family:'IBM Plex Sans Condensed', sans-serif;font-size:clamp(11px,1.5svh,14px);letter-spacing:.12em;color:#dbb8ff; font-weight: 400;}
.dg-pile{position:relative;width:var(--cw);height:var(--ch)}
.dg-cats{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(2,max-content);justify-content:start;gap:clamp(10px,1.8svh,18px) clamp(12px,1.6vw,24px);align-content:start}
.dg-slot{display:grid;gap:8px;padding:10px 12px 12px;border:1px dashed rgba(201,140,255,.45);border-radius:14px;background:rgba(139,66,255,.05);transition:border-color .2s,box-shadow .2s,background .2s,opacity .3s}
.dg-slot h3{margin:0;display:flex;justify-content:space-between;gap:12px;font-family:'IBM Plex Sans Condensed', sans-serif;font-size:clamp(11px,1.55svh,14px);letter-spacing:.1em;text-transform:uppercase;color:#dbb8ff; font-weight: 400;}
.dg-count{font-weight:400;color:rgba(245,241,249,.6)}
.dg-slot.is-full .dg-count{color:#ffd24a}
.dg-drop{display:flex;align-items:center;min-height:var(--ch);width:calc(var(--cw)*(1 + 4*(1 - var(--ov))))}
.dg-drop .dg-c+.dg-c{margin-left:calc(var(--cw)*var(--ov)*-1)}
.dg-slot.is-over{border-style:solid;border-color:#c98cff;background:rgba(139,66,255,.14);box-shadow:0 0 22px rgba(201,140,255,.35)}
.dg-slot.is-shake{animation:dg-shake .45s}
@keyframes dg-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.dn-deck.is-choosing .dg-slot{cursor:pointer;border-style:solid;border-color:rgba(201,140,255,.8);animation:dg-pulse 1.8s ease-in-out infinite}
.dn-deck.is-choosing .dg-slot:hover{background:rgba(139,66,255,.2);box-shadow:0 0 26px rgba(201,140,255,.5)}
@keyframes dg-pulse{50%{box-shadow:0 0 18px rgba(201,140,255,.35)}}
.dn-deck.is-reveal .dg-slot{pointer-events:none;opacity:.35}
.dn-deck.is-reveal .dg-slot.is-picked{opacity:1;border-style:solid;border-color:#c98cff}
.dg-finish{grid-column:1/-1;grid-row:2;display:flex;justify-content:center;gap:clamp(10px,1.6vw,24px)}
.dg-fin{display:grid;justify-items:center;gap:6px;perspective:900px}
.dg-fin__box{display:flex;align-items:center;justify-content:center;width:calc(var(--cw) + 14px);height:calc(var(--ch) + 14px);border:1px dashed rgba(201,140,255,.45);border-radius:12px;background:rgba(139,66,255,.05)}
.dg-fin__cap{height:1.2em;font-family:'IBM Plex Sans Condensed', sans-serif;font-size:clamp(13px,2svh,18px);letter-spacing:.1em;color:rgba(245,241,249,.6); font-weight: 400;}
.dg-fin.is-letter .dg-fin__cap{color:#ffd24a}
.dg-status{position:absolute;z-index:3;top:clamp(18px,3svh,30px);left:50%;transform:translateX(-50%);margin:0;max-width:min(46vw,640px);text-align:center;font-family:Inter,system-ui,sans-serif;font-size:clamp(13px,2svh,17px);line-height:1.4;color:#f9f4ff}
.dg-status.is-warn,.dg-status.is-lose{color:#ff9d9d}
.dg-status.is-win{color:#ffd24a}
/* cards */
.dg-c{position:relative;flex:none;width:var(--cw);height:var(--ch);transform-origin:0 0;perspective:800px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));transition:translate .15s}
.dg-c.is-drag{cursor:grabbing;filter:drop-shadow(0 16px 22px rgba(0,0,0,.6))}
.dg-pile .dg-c{position:absolute;inset:0;translate:var(--jx,0) var(--jy,0);rotate:var(--jr,0deg);cursor:default}
.dg-pile .dg-c.is-top{cursor:grab}
.dg-drop .dg-c:hover{translate:0 -6px;z-index:5}
.dg-c__in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.dg-c.is-flipped .dg-c__in{transform:rotateY(180deg)}
.dg-c__in img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none}
.dg-c__in .b{transform:rotateY(180deg)}
.dg-fin__box .dg-c{cursor:default}
.dg-fin__box .dg-c:hover{translate:none}
.dg-layer{position:fixed;inset:0;z-index:60;pointer-events:none}
.dg-layer .dg-c{pointer-events:none}
@media (prefers-reduced-motion:reduce){.dn-deck.is-choosing .dg-slot{animation:none}.dg-c__in{transition:none}}

.dg-board{grid-template-columns:auto max-content;justify-content:center}
.dg-cats{grid-column:2}

/* deck: shuffle button + smooth pile movement + deck as a drop target */
.dg-deckzone{padding:6px 8px 10px;border:1px dashed transparent;border-radius:14px;transition:border-color .2s,background .2s,box-shadow .2s}
.dg-deckzone.is-over{border-color:#c98cff;background:rgba(139,66,255,.12);box-shadow:0 0 22px rgba(201,140,255,.35)}
.dg-pile .dg-c{transition:translate .45s cubic-bezier(.22,1,.36,1),rotate .45s cubic-bezier(.22,1,.36,1)}
.dg-shuffle.ek-btn{height:clamp(34px,4.6svh,42px);min-width:0;padding:0 16px;font-size:clamp(12px,1.7svh,14px);margin-top:4px}
.dg-shuffle:disabled{opacity:.4;pointer-events:none}

/* deck cards are as tall as the category boxes */
.dn-deck{--dh:calc(var(--ch) + 52px)}
.dg-pile{width:calc(var(--dh)*373/509);height:var(--dh)}
.dg-pile .dg-c{width:100%;height:100%}
.dg-deckzone{padding-top:0;gap:8px;justify-items:center}
.dg-board{align-items:start}
/* bottom row is centred under the category boxes, not the screen */
.dg-finish{grid-column:2!important;justify-self:stretch;justify-content:center}
/* fit the bigger deck + both category columns inside the screen */
.dn-deck{--ov:.46}
.dg-deckzone{padding:0}
.dg-board{column-gap:clamp(14px,1.8vw,28px)}

/* shuffle scatter must never be clipped by the board edge */
.dg-board{overflow:visible}
.dg-deckzone{overflow:visible;padding-top:18px;margin-top:-18px}

/* win screen */
.dg-win{position:absolute;inset:0;z-index:70;display:grid;grid-template-rows:auto auto auto;align-content:center;justify-items:center;gap:clamp(14px,3svh,32px);padding:24px;background:rgba(5,3,9,.9);opacity:0;transition:opacity .45s ease;--ch:min(40svh,21vw);--cw:calc(var(--ch)*373/509)}
.dg-win.is-on{opacity:1}
.dg-win__cards{display:flex;justify-content:center;gap:clamp(10px,1.6vw,26px)}
.dg-win .dg-fin__box{width:calc(var(--cw) + 14px);height:calc(var(--ch) + 14px);border-style:solid;border-color:rgba(255,210,74,.55);box-shadow:0 0 34px rgba(255,210,74,.18)}
.dg-win .dg-fin__cap{font-size:clamp(20px,3.4svh,32px);height:auto;color:#ffd24a}
.dg-win__t{margin:0;max-width:min(92vw,900px);text-align:center;font-family:'Chakra Petch',system-ui,sans-serif;font-weight:700;font-size:clamp(20px,3.6svh,34px);line-height:1.25;color:#f9f4ff;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.dg-win__cta{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(12px,2vw,22px);opacity:0;transform:translateY(10px);transition:opacity .5s .15s ease,transform .5s .15s ease;pointer-events:none}
.dg-win.is-said .dg-win__t,.dg-win.is-said .dg-win__cta{opacity:1;transform:none}
.dg-win.is-said .dg-win__cta{pointer-events:auto}

.dg-nw{white-space:nowrap}
.dg-win{background:rgba(5,3,9,.96)}
.dg-win__t{max-width:min(94vw,1000px)}

/* card hover: black overlay over the portrait only + Play Now cta */
.dn-card__pic{position:relative;display:block;flex:none;overflow:hidden}
.dn-card__pic img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.dn-card__pic::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.68);opacity:0;transition:opacity .3s ease;pointer-events:none}
.dn-card__cta{position:absolute;left:50%;top:50%;z-index:2;translate:-50% -42%;opacity:0;transition:opacity .3s ease,translate .35s cubic-bezier(.2,.7,.2,1);pointer-events:none;min-width:0}
.dn-card:hover .dn-card__pic::after,.dn-card:focus-visible .dn-card__pic::after{opacity:1}
.dn-card:hover .dn-card__cta,.dn-card:focus-visible .dn-card__cta{opacity:1;translate:-50% -50%}
.dn-card:hover .dn-card__cta .dn-ico{transform:scale(1.12)}
@media (hover:none){.dn-card__pic::after,.dn-card__cta{display:none}}
@media (max-width:980px) and (min-width:701px){.dn-card__pic{width:42%}.dn-card__pic img{width:100%;height:100%;min-height:150px}}
@media (max-width:700px){.dn-card__pic img{width:100%}}

/* Gentle arrival: hero image fades in once decoded, text rises in after it (no instant pop) */
@keyframes dn-rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes dn-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  html.dn-arrive .dn-hero__bg { opacity: 0; transition: opacity .9s ease-out; }
  html.dn-arrive .dn-hero__bg.is-ready { opacity: 1; }
  .dn-hero__kicker { animation: dn-rise-in .7s cubic-bezier(.16, 1, .3, 1) .15s backwards; }
  .dn-hero__top h1 { animation: dn-rise-in .8s cubic-bezier(.16, 1, .3, 1) .3s backwards; }
  .dn-hero__mentor { animation: dn-rise-in .7s cubic-bezier(.16, 1, .3, 1) .5s backwards; }
  .masthead { animation: dn-fade-in .6s ease .1s backwards; }
}

/* 6 Oct: GAME BOARD, small screens. The board was desktop-only (846px wide on a phone). ----------------------------------------
   Portrait phones/tablets (<=900px): status under the buttons, deck + shuffle in a row, categories 2x2, five reveal boxes in one row.
   Landscape phones (short screens): keeps the 3-part desktop layout but sized from the screen height. */
@media (max-width:900px) and (orientation:portrait) {
  .dn-deck{--ov:.62;--cw:min(calc((100vw - 94px)/5.04),calc((100svh - 340px)*.17),150px);--ch:calc(var(--cw)*509/373)}
  .dn-deck__bar{top:14px;right:16px;left:16px;justify-content:flex-end}
  .dg-status{left:16px;right:16px;top:66px;transform:none;max-width:none;text-align:center;font-size:13px;line-height:1.35;min-height:2.7em}
  .dg-board{inset:112px 16px 16px;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto auto;justify-content:stretch;row-gap:20px;column-gap:0;overflow:visible;align-content:center}
  .dg-deckzone{grid-column:1;grid-row:1;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:18px;padding:0;margin:0}
  .dg-pile{width:calc(var(--cw)*1.25)!important;height:calc(var(--ch)*1.25)!important}
  .dg-cats{grid-column:1;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;gap:10px}
  .dg-slot{padding:8px 8px 10px;gap:6px;min-width:0}
  .dg-slot h3{font-size:9px;letter-spacing:.04em;gap:6px;align-items:flex-start;line-height:1.25}
  .dg-drop{width:calc(var(--cw)*(1 + 4*(1 - var(--ov))));min-height:var(--ch);margin:0 auto}
  .dg-finish{grid-column:1!important;grid-row:3;gap:4px}
  .dg-fin__box{width:calc(var(--cw) + 6px);height:calc(var(--ch) + 6px)}
  .dg-fin__cap{font-size:12px}
  .dg-shuffle.ek-btn{margin-top:0}
  .dg-win{--cw:min(calc((100vw - 150px)/5),150px);--ch:calc(var(--cw)*509/373);padding:16px}
  .dg-win__cards{gap:6px}
  .dg-win__t{font-size:clamp(18px,5vw,28px)}
}
@media (max-width:900px) and (orientation:portrait) and (min-width:700px) {
  .dg-slot h3{font-size:12px;letter-spacing:.08em}
  .dg-status{font-size:16px;top:70px}
  .dg-board{inset:124px 24px 24px;row-gap:18px}
  .dg-cats{gap:14px}
}
@media (max-height:520px) and (orientation:landscape) {
  .dn-deck{--ov:.5;--ch:calc((100svh - 214px)/3);--cw:calc(var(--ch)*373/509)}
  .dn-deck__bar{top:8px;right:12px;gap:8px}
  .dn-deck__bar .ek-btn{height:36px;padding:0 12px;font-size:11px}
  .dg-status{left:12px;right:auto;transform:none;top:12px;max-width:calc(100vw - 290px);text-align:left;font-size:11px;line-height:1.3}
  .dg-board{inset:52px 12px 8px;column-gap:12px;row-gap:8px}
  .dg-cats{gap:8px 10px}
  .dg-slot{padding:6px 8px 8px;gap:4px}
  .dg-slot h3{font-size:9px;letter-spacing:.05em}
  .dg-drop{min-height:var(--ch)}
  .dg-fin__box{width:calc(var(--cw) + 8px);height:calc(var(--ch) + 8px)}
  .dg-fin__cap{font-size:11px}
  .dg-shuffle.ek-btn{height:30px;padding:0 10px;font-size:11px}
  .dg-win{--ch:min(46svh,24vw);gap:10px;padding:10px}
  .dg-win__t{font-size:clamp(14px,4.4svh,22px)}
}

/* Play Now on touch / small screens: there is no hover, so the button is always shown at the bottom of the portrait */
@media (hover:none), (max-width:900px) {
  .dn-card__pic::after { display:block; opacity:1; background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 38%, rgba(0,0,0,0) 62%); }
  .dn-card__cta { display:inline-grid; left:50%; top:auto; bottom:14px; translate:-50% 0; opacity:1; min-width:0; height:42px; padding:0 20px; font-size:13px; }
  .dn-card:hover .dn-card__cta, .dn-card:focus-visible .dn-card__cta { translate:-50% 0; }
}

/* Phones/tablets held upright: the card you are about to place is much bigger so its text can be read.
   Cards already placed in the categories stay small. The dragged card keeps this size until it is dropped. */
@media (max-width:900px) and (orientation:portrait) {
  .dn-deck { --pw:min(calc(clamp(calc(var(--ch)*1.25), calc(100svh - 520px), 260px)*373/509), calc(100vw - 190px)); }
  .dg-pile { width:var(--pw)!important; height:calc(var(--pw)*509/373)!important; }
}