/* ── MagicLaguna — style.css ── */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0;padding:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}

/* ── Tokens — daylight palette ── */
:root{
  --paper:    #f5f2e9;
  --paper-2:  #fbf9f2;
  --sky:      #8fb8d6;
  --sky-soft: #cadeea;
  --sky-deep: #5d93b8;
  --asphalt:  #2c2f35;
  --asphalt-2:#43474e;
  --line:     #f6f3ea;
  --green:    #6f9a52;
  --green-dk: #557a3e;
  --brick:    #c2774a;
  --brick-dk: #a85f37;
  --ink:      #24262b;
  --muted:    #6c6a64;
  --muted-2:  #8d8a82;
  --radius:   14px;
  --max-w:    1180px;
  --font:     'Inter', system-ui, sans-serif;
  --font-d:   'Bricolage Grotesque', var(--font);
}

html{scroll-behavior:smooth}
html.ml-noscroll,html[data-gate]{overflow:hidden}

body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.ml-wrap{max-width:var(--max-w);margin:0 auto;padding:0 24px}
::selection{background:rgba(143,184,214,.4);color:var(--ink)}

/* ── Crossing motif (reusable) ── */
.ml-crossing{
  background-color:var(--asphalt);
  background-image:repeating-linear-gradient(90deg,var(--line) 0 44px,transparent 44px 88px);
}

/* ── Header ── */
.ml-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(245,242,233,.82);
  backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);
  border-bottom:1px solid rgba(36,38,43,.08);
}
.ml-header__inner{display:flex;align-items:center;justify-content:space-between;height:66px;max-width:var(--max-w);margin:0 auto;padding:0 24px}
.ml-logo{font-family:var(--font-d);font-weight:700;font-size:22px;color:var(--ink);letter-spacing:-.6px;display:inline-flex;align-items:center;gap:9px}
.ml-logo::before{content:'';width:22px;height:14px;border-radius:2px;background-color:var(--asphalt);background-image:repeating-linear-gradient(90deg,var(--line) 0 3px,transparent 3px 6px)}
.ml-logo span{color:var(--brick)}
.ml-nav{display:flex;gap:30px;align-items:center}
.ml-nav a{font-size:14px;font-weight:500;color:var(--muted);transition:color .2s;position:relative}
.ml-nav a:hover{color:var(--ink)}
.ml-nav a::after{content:'';position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--brick);border-radius:2px;transition:right .25s}
.ml-nav a:hover::after{right:0}
.ml-burger{display:none;flex-direction:column;gap:5px;padding:8px;z-index:101}
.ml-burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s,opacity .3s}
@media(max-width:840px){
  .ml-nav{position:fixed;top:66px;left:0;right:0;bottom:0;flex-direction:column;gap:0;padding:24px;background:rgba(245,242,233,.98);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);z-index:99}
  .ml-nav.open{transform:translateX(0)}
  .ml-nav a{font-size:18px;padding:16px 0;border-bottom:1px solid rgba(36,38,43,.08);width:100%}
  .ml-nav a::after{display:none}
  .ml-burger{display:flex}
  .ml-burger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .ml-burger.active span:nth-child(2){opacity:0}
  .ml-burger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
}

/* ── Buttons ── */
.ml-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:11px;font-size:15px;font-weight:600;line-height:1;transition:transform .15s,box-shadow .25s,background .2s,border-color .2s,color .2s;white-space:nowrap}
.ml-btn:hover{transform:translateY(-2px)}
.ml-btn:active{transform:translateY(0)}
.ml-btn:focus-visible{outline:2px solid var(--brick);outline-offset:3px}
.ml-btn--primary{background:var(--asphalt);color:var(--line);box-shadow:0 6px 22px rgba(44,47,53,.22)}
.ml-btn--primary:hover{background:var(--ink);box-shadow:0 10px 30px rgba(44,47,53,.32)}
.ml-btn--ghost{border:1.5px solid rgba(36,38,43,.22);color:var(--ink);background:transparent}
.ml-btn--ghost:hover{border-color:var(--ink);background:rgba(36,38,43,.05)}
.ml-btn--sm{padding:11px 20px;font-size:14px;border-radius:9px}

/* ── Hero ── */
.ml-hero{position:relative;overflow:hidden;padding:148px 0 178px;
  background:linear-gradient(180deg,var(--sky) 0%,var(--sky-soft) 46%,var(--paper) 96%)}
.ml-hero__clouds{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 240px 70px at 78% 20%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(ellipse 320px 90px at 22% 14%, rgba(255,255,255,.55), transparent 72%),
    radial-gradient(ellipse 200px 60px at 60% 34%, rgba(255,255,255,.45), transparent 70%)}
.ml-hero__treeline{position:absolute;left:0;right:0;bottom:118px;height:40px;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 24px 40px, var(--green) 20px, transparent 21px) repeat-x;
  background-size:48px 40px;
  filter:drop-shadow(0 -2px 0 rgba(85,122,62,.4))}
.ml-hero__crossing{position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;
  box-shadow:inset 0 9px 22px rgba(0,0,0,.28)}
.ml-hero .ml-wrap{position:relative;z-index:2}
.ml-hero__content{max-width:660px}
.ml-hero__badge{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:30px;background:rgba(255,255,255,.6);border:1px solid rgba(36,38,43,.12);font-size:12px;font-weight:600;color:var(--asphalt);text-transform:uppercase;letter-spacing:.8px;margin-bottom:26px}
.ml-hero__badge b{color:var(--brick);font-weight:700}
.ml-hero h1{font-family:var(--font-d);font-size:clamp(40px,5.6vw,68px);font-weight:700;color:var(--ink);line-height:1.02;letter-spacing:-2px;margin-bottom:22px}
.ml-hero h1 em{font-style:normal;color:var(--brick)}
.ml-hero p{font-size:18px;color:var(--asphalt);max-width:500px;margin-bottom:34px;line-height:1.62}
.ml-hero__actions{display:flex;gap:14px;flex-wrap:wrap}
.ml-hero__stats{display:flex;gap:44px;margin-top:46px}
.ml-hero__stat-val{font-family:var(--font-d);font-size:34px;font-weight:700;color:var(--ink);line-height:1}
.ml-hero__stat:nth-child(1) .ml-hero__stat-val{color:var(--sky-deep)}
.ml-hero__stat:nth-child(2) .ml-hero__stat-val{color:var(--green-dk)}
.ml-hero__stat:nth-child(3) .ml-hero__stat-val{color:var(--brick)}
.ml-hero__stat-lbl{font-size:13px;color:var(--asphalt);margin-top:6px;letter-spacing:.3px;font-weight:500}
@media(max-width:840px){
  .ml-hero{padding:120px 0 140px}
  .ml-hero__crossing{height:90px}
  .ml-hero__treeline{bottom:88px;height:30px;background-size:40px 30px;background-image:radial-gradient(circle at 20px 30px, var(--green) 16px, transparent 17px)}
  .ml-hero__stats{gap:28px;flex-wrap:wrap}
}

/* ── Section common ── */
.ml-section{padding:88px 0;position:relative}
.ml-section--sky{background:linear-gradient(180deg,#eef4f8,var(--paper))}
.ml-section--paper2{background:var(--paper-2)}
.ml-section__head{max-width:600px;margin-bottom:46px}
.ml-section__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--brick);text-transform:uppercase;letter-spacing:1.8px;margin-bottom:14px}
.ml-section__eyebrow::before{content:'';width:22px;height:10px;border-radius:2px;background-color:var(--asphalt);background-image:repeating-linear-gradient(90deg,var(--line) 0 3px,transparent 3px 6px)}
.ml-section__title{font-family:var(--font-d);font-size:clamp(28px,3.8vw,44px);font-weight:700;color:var(--ink);line-height:1.1;letter-spacing:-1.2px;margin-bottom:16px}
.ml-section__desc{font-size:16px;color:var(--muted);line-height:1.6}

/* ── Crossing divider ── */
.ml-divider{height:18px;width:100%}

/* ── Game Cards ── */
.ml-games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:24px}
.ml-game-card{background:var(--paper-2);border-radius:var(--radius);overflow:hidden;border:1px solid rgba(36,38,43,.1);box-shadow:0 2px 10px rgba(44,47,53,.05);transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s,border-color .28s}
.ml-game-card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(44,47,53,.16);border-color:rgba(194,119,74,.4)}
.ml-game-card__thumb{position:relative;height:184px;overflow:hidden}
.ml-game-card__thumb-bg{position:absolute;inset:0;transition:transform .5s}
.ml-game-card:hover .ml-game-card__thumb-bg{transform:scale(1.08)}
.ml-game-card__thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(20,22,26,.55) 100%)}
.ml-game-card__badge{position:absolute;top:12px;left:12px;z-index:2;padding:5px 11px;border-radius:7px;background:rgba(255,255,255,.92);font-size:11px;font-weight:700;color:var(--asphalt);text-transform:uppercase;letter-spacing:.6px}
.ml-game-card__thumb-name{position:absolute;bottom:14px;left:16px;right:16px;z-index:2;font-family:var(--font-d);font-size:18px;font-weight:700;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.ml-game-card__body{padding:18px}
.ml-game-card__title{font-family:var(--font-d);font-size:17px;font-weight:700;color:var(--ink);margin-bottom:6px}
.ml-game-card__desc{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:39px}
.ml-game-card__tags{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.ml-game-card__tag{padding:4px 9px;border-radius:6px;background:rgba(36,38,43,.06);font-size:11px;color:var(--muted);font-weight:500}
.ml-game-card__play{width:100%;padding:12px;border-radius:9px;background:var(--asphalt);color:var(--line);font-size:14px;font-weight:700;transition:background .25s;text-align:center}
.ml-game-card__play:hover{background:var(--brick)}
.ml-game-card__play:focus-visible{outline:2px solid var(--brick);outline-offset:2px}
.ml-center{text-align:center;margin-top:40px}

/* ── Features ── */
.ml-features{display:grid;grid-template-columns:repeat(auto-fill,minmax(244px,1fr));gap:22px}
.ml-feature{padding:30px 26px;border-radius:var(--radius);background:var(--paper-2);border:1px solid rgba(36,38,43,.1);transition:transform .25s,border-color .25s,box-shadow .25s}
.ml-feature:hover{transform:translateY(-4px);border-color:rgba(143,184,214,.5);box-shadow:0 12px 30px rgba(44,47,53,.08)}
.ml-feature__icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:18px;background:linear-gradient(135deg,var(--sky-soft),#dbe9f1);border:1px solid rgba(93,147,184,.3)}
.ml-feature h3{font-family:var(--font-d);font-size:16px;font-weight:700;color:var(--ink);margin-bottom:9px}
.ml-feature p{font-size:14px;color:var(--muted);line-height:1.55}

/* ── Steps ── */
.ml-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px}
.ml-step{padding:28px 26px;border-radius:var(--radius);background:var(--paper-2);border:1px solid rgba(36,38,43,.1);position:relative;overflow:hidden}
.ml-step::before{content:'';position:absolute;top:0;left:0;right:0;height:8px;background-color:var(--asphalt);background-image:repeating-linear-gradient(90deg,var(--line) 0 14px,transparent 14px 28px);opacity:.85}
.ml-step__num{font-family:var(--font-d);font-size:54px;font-weight:700;color:var(--sky);line-height:1;margin:6px 0 12px}
.ml-step h3{font-family:var(--font-d);font-size:16px;font-weight:700;color:var(--ink);margin-bottom:9px}
.ml-step p{font-size:14px;color:var(--muted);line-height:1.55}

/* ── About split ── */
.ml-about{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.ml-about p{margin-bottom:18px;line-height:1.7;color:var(--asphalt)}
.ml-about__visual{position:relative;height:340px;border-radius:var(--radius);overflow:hidden;background:linear-gradient(180deg,var(--sky) 0%,var(--sky-soft) 60%);border:1px solid rgba(36,38,43,.1)}
.ml-about__visual::before{content:'';position:absolute;left:0;right:0;bottom:0;height:96px;background-color:var(--asphalt);background-image:repeating-linear-gradient(90deg,var(--line) 0 38px,transparent 38px 76px);box-shadow:inset 0 8px 18px rgba(0,0,0,.28)}
.ml-about__visual::after{content:'';position:absolute;left:0;right:0;bottom:96px;height:28px;background:radial-gradient(circle at 18px 28px,var(--green) 14px,transparent 15px) repeat-x;background-size:36px 28px}
.ml-about__visual span{position:absolute;top:40px;left:0;right:0;text-align:center;font-family:var(--font-d);font-size:76px;font-weight:700;letter-spacing:-3px;color:#fff;text-shadow:0 3px 12px rgba(44,71,95,.35)}
@media(max-width:840px){.ml-about{grid-template-columns:1fr;gap:34px}.ml-about__visual{height:240px}}

/* ── Disclaimer ── */
.ml-disclaimer{padding:46px 0;border-top:1px solid rgba(36,38,43,.1);text-align:center}
.ml-disclaimer__badges{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.ml-disclaimer__badge{padding:9px 18px;border-radius:9px;background:rgba(36,38,43,.04);border:1px solid rgba(36,38,43,.12);font-size:13px;font-weight:600;color:var(--muted)}
.ml-disclaimer p{font-size:13px;color:var(--muted);max-width:720px;margin:0 auto;line-height:1.65}

/* ── Footer (the road) ── */
.ml-footer{position:relative;padding:64px 0 30px;background:var(--asphalt);color:#b9b6ad}
.ml-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:14px;background-image:repeating-linear-gradient(90deg,var(--line) 0 44px,transparent 44px 88px)}
.ml-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:38px}
.ml-footer__brand .ml-logo{margin-bottom:14px;color:var(--line)}
.ml-footer__brand .ml-logo span{color:var(--brick)}
.ml-footer__brand p{font-size:13px;color:#969389;max-width:290px;line-height:1.6}
.ml-footer h4{font-family:var(--font-d);font-size:13px;font-weight:700;color:var(--line);text-transform:uppercase;letter-spacing:.6px;margin-bottom:15px}
.ml-footer ul li{margin-bottom:9px}
.ml-footer ul a{font-size:13px;color:#969389;transition:color .2s}
.ml-footer ul a:hover{color:var(--brick)}
.ml-footer__bottom{padding-top:22px;border-top:1px solid rgba(246,243,234,.12);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:12px;color:#86837b}
.ml-footer__bottom a{color:#86837b;transition:color .2s}
.ml-footer__bottom a:hover{color:var(--brick)}
@media(max-width:768px){.ml-footer__grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:480px){.ml-footer__grid{grid-template-columns:1fr}}

/* ── Game page ── */
.ml-game-page{padding-top:96px}
.ml-game-page__back{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--muted);margin-bottom:22px;transition:color .2s}
.ml-game-page__back:hover{color:var(--brick)}
.ml-game-page__title{font-family:var(--font-d);font-size:clamp(26px,3.4vw,40px);font-weight:700;color:var(--ink);margin-bottom:10px;letter-spacing:-1px}
.ml-game-page__tags{display:flex;gap:8px;margin-bottom:26px;flex-wrap:wrap}
.ml-game-frame-wrap{position:relative;width:100%;border-radius:var(--radius);overflow:hidden;background:#000;border:1px solid rgba(36,38,43,.14);aspect-ratio:16/9;max-height:78vh}
.ml-game-frame-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ml-game-frame-wrap__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#1a1c20;z-index:1;transition:opacity .4s}
.ml-game-frame-wrap__spinner.loaded{opacity:0;pointer-events:none}
.ml-spinner{width:38px;height:38px;border:3px solid rgba(246,243,234,.18);border-top-color:var(--brick);border-radius:50%;animation:ml-spin .8s linear infinite}
@keyframes ml-spin{to{transform:rotate(360deg)}}
.ml-game-fs-btn{position:absolute;top:12px;right:12px;z-index:5;width:38px;height:38px;border-radius:9px;background:rgba(20,22,26,.6);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;transition:background .2s}
.ml-game-fs-btn:hover{background:rgba(20,22,26,.85)}
.ml-game-page__info{display:grid;grid-template-columns:2fr 1fr;gap:32px;margin-top:34px}
.ml-game-page__about h2{font-family:var(--font-d);font-size:20px;font-weight:700;color:var(--ink);margin-bottom:12px}
.ml-game-page__about p{line-height:1.7;color:var(--asphalt)}
.ml-game-page__details{background:var(--paper-2);border-radius:var(--radius);padding:24px;border:1px solid rgba(36,38,43,.1)}
.ml-game-page__details h3{font-family:var(--font-d);font-size:15px;font-weight:700;color:var(--ink);margin-bottom:16px}
.ml-game-page__detail-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid rgba(36,38,43,.09);font-size:13px}
.ml-game-page__detail-row:last-child{border-bottom:0}
.ml-game-page__detail-row span:first-child{color:var(--muted)}
.ml-game-page__detail-row span:last-child{color:var(--ink);font-weight:700}
@media(max-width:768px){.ml-game-page__info{grid-template-columns:1fr}}

/* ── Legal ── */
.ml-legal{padding:120px 0 64px}
.ml-legal h1{font-family:var(--font-d);font-size:clamp(28px,3.8vw,44px);font-weight:700;color:var(--ink);margin-bottom:8px;letter-spacing:-1px}
.ml-legal__updated{font-size:13px;color:var(--muted);margin-bottom:34px}
.ml-legal__content{max-width:740px}
.ml-legal__content h2{font-family:var(--font-d);font-size:21px;font-weight:700;color:var(--ink);margin:34px 0 13px}
.ml-legal__content h3{font-size:16px;font-weight:700;color:var(--ink);margin:24px 0 9px}
.ml-legal__content p{margin-bottom:14px;line-height:1.75;color:var(--asphalt)}
.ml-legal__content ul{padding-left:22px;margin-bottom:14px;list-style:disc}
.ml-legal__content ul li{margin-bottom:7px;line-height:1.65;color:var(--asphalt)}
.ml-legal__content a{color:var(--brick);text-decoration:underline;text-underline-offset:2px}
.ml-legal__content strong{color:var(--ink)}

/* ── Contact ── */
.ml-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ml-contact-card{padding:28px;border-radius:var(--radius);background:var(--paper-2);border:1px solid rgba(36,38,43,.1);transition:border-color .25s,box-shadow .25s}
.ml-contact-card:hover{border-color:rgba(143,184,214,.5);box-shadow:0 12px 30px rgba(44,47,53,.08)}
.ml-contact-card h3{font-family:var(--font-d);font-size:16px;font-weight:700;color:var(--ink);margin-bottom:9px}
.ml-contact-card p{font-size:14px;color:var(--muted);line-height:1.6}
.ml-contact-card a{color:var(--brick)}
@media(max-width:600px){.ml-contact-grid{grid-template-columns:1fr}}

/* ── Age Gate ── */
.ml-age-gate{position:fixed;inset:0;z-index:3000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(93,147,184,.42);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
html[data-gate] .ml-age-gate{display:flex}
.ml-age-gate__box{position:relative;text-align:center;padding:44px 38px 48px;background:var(--paper-2);border-radius:18px;border:1px solid rgba(36,38,43,.1);max-width:430px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 30px 80px rgba(20,30,40,.35)}
.ml-age-gate__box::after{content:'';position:absolute;left:0;right:0;bottom:0;height:12px;border-radius:0 0 18px 18px;background-color:var(--asphalt);background-image:repeating-linear-gradient(90deg,var(--line) 0 18px,transparent 18px 36px)}
.ml-age-gate__box h2{font-family:var(--font-d);font-size:25px;font-weight:700;color:var(--ink);margin-bottom:10px}
.ml-age-gate__box p{font-size:14px;color:var(--muted);margin-bottom:28px;line-height:1.6}
.ml-age-gate__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ml-age-gate__actions .ml-btn{min-width:128px;justify-content:center}
.ml-age-deny{padding:38px 32px;background:var(--paper-2);border-radius:18px;border:1px solid rgba(36,38,43,.1);max-width:430px;width:100%;text-align:center;max-height:90vh;overflow:auto}
.ml-age-deny h2{font-family:var(--font-d);font-size:23px;font-weight:700;color:var(--brick);margin-bottom:13px}
.ml-age-deny p{font-size:14px;color:var(--muted);line-height:1.6}

/* ── Cookie banner ── */
.ml-cookie{position:fixed;bottom:0;left:0;right:0;z-index:900;padding:18px 0;background:var(--asphalt);border-top:3px solid transparent;border-image:repeating-linear-gradient(90deg,var(--line) 0 44px,transparent 44px 88px) 3;transform:translateY(110%);transition:transform .45s cubic-bezier(.4,0,.2,1)}
.ml-cookie.show{transform:translateY(0)}
.ml-cookie__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:var(--max-w);margin:0 auto;padding:0 24px}
.ml-cookie p{font-size:13px;color:#b9b6ad;flex:1;min-width:220px;line-height:1.5}
.ml-cookie p a{color:var(--brick);text-decoration:underline}
.ml-cookie .ml-btn--primary{background:var(--line);color:var(--asphalt)}
.ml-cookie .ml-btn--primary:hover{background:#fff}

/* ── Game Modal ── */
.ml-modal{position:fixed;inset:0;z-index:2000;display:none;flex-direction:column;background:rgba(20,22,26,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ml-modal.open{display:flex;animation:ml-modal-in .25s ease}
@keyframes ml-modal-in{from{opacity:0}to{opacity:1}}
.ml-modal__bar{flex:0 0 auto;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid rgba(246,243,234,.1)}
.ml-modal__title{font-family:var(--font-d);font-size:16px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.ml-modal__controls{display:flex;gap:10px}
.ml-modal__btn{width:38px;height:38px;border-radius:9px;background:rgba(246,243,234,.08);border:1px solid rgba(246,243,234,.14);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;transition:background .2s,border-color .2s}
.ml-modal__btn:hover{background:rgba(246,243,234,.16)}
.ml-modal__btn--close:hover{background:rgba(194,119,74,.3);border-color:rgba(194,119,74,.5)}
.ml-modal__stage{flex:1 1 0;min-height:0;position:relative;background:#000}
.ml-modal__stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.ml-modal__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#15171b;z-index:1;transition:opacity .4s}
.ml-modal__spinner.loaded{opacity:0;pointer-events:none}

/* ── Reveal ── */
.ml-reveal{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s cubic-bezier(.4,0,.2,1)}
.ml-reveal.visible{opacity:1;transform:translateY(0)}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .ml-reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ── Game card art (themed SVG over gradient) ── */
.ml-game-card__art{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.ml-game-card__art svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ml-game-card__thumb::after{z-index:2}
.ml-game-card__badge{z-index:3}
.ml-game-card__thumb-name{z-index:3}