/* =====================================================================
   Interactive Games Hub — self-contained styles
   ---------------------------------------------------------------------
   Scoped entirely under .gh- (hub), .gg- (game shell), .gr- (result),
   .wg- (wordle), .dg- (geo), .sp- (slider), .mc- (memory).

   The site's assets/tailwind.css is a PURGED precompiled build: any utility
   class invented for these pages would silently do nothing. Nothing in here
   depends on Tailwind, Alpine, a CDN or a build step.

   Palette follows the newsroom: red #dc2626 -> #911016, slate #0f172a,
   with per-game accents coming from --gg-accent set on the play shell.
   ===================================================================== */

.gh-*,.gg-*,.gr-*,.wg-*,.dg-*,.sp-*,.mc-*{box-sizing:border-box}

/* ============================ 1. HUB ================================= */
.gh-page{background:#f5f7fb;min-height:70vh;padding:0 0 54px;font-family:'Noto Serif Bengali',serif}
.gh-wrap{max-width:1200px;margin:0 auto;padding:0 16px}

.gh-hero{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(circle at 12% 20%,rgba(220,38,38,.38),transparent 46%),
             radial-gradient(circle at 88% 8%,rgba(37,99,235,.3),transparent 42%),
             linear-gradient(120deg,#141c30 0%,#0f172a 52%,#3b1116 100%);
  border-bottom:4px solid #dc2626}
.gh-hero:before{content:"";position:absolute;inset:0;opacity:.13;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:34px 34px;mask-image:linear-gradient(90deg,#000,transparent 78%)}
.gh-hero__inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;
  padding:34px 16px 38px;max-width:1200px;margin:0 auto}
@media(min-width:900px){.gh-hero__inner{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);align-items:center;padding:44px 16px 48px}}

.gh-kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  font-size:12px;font-weight:700;letter-spacing:.2px}
.gh-kicker i{color:#fca5a5}
.gh-hero h1{margin:14px 0 8px;font-size:clamp(30px,5vw,50px);line-height:1.18;font-weight:800;letter-spacing:-.5px}
.gh-hero h1 em{font-style:normal;color:#fca5a5}
.gh-hero p.gh-lead{margin:0;max-width:620px;color:#dbe3f0;font-size:15px;line-height:1.85}
.gh-hero__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;align-items:center}
.gh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:800;padding:11px 18px;border-radius:11px;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;color:#fff;
  background:linear-gradient(135deg,#dc2626,#911016);box-shadow:0 7px 18px rgba(220,38,38,.3)}
.gh-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(220,38,38,.42)}
.gh-btn--ghost{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);box-shadow:none}
.gh-btn--ghost:hover{background:rgba(255,255,255,.2);box-shadow:none}
.gh-btn i{font-size:13px}

/* stat cluster */
.gh-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gh-stat{padding:14px 12px;border-radius:14px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);text-align:center}
.gh-stat__num{display:block;font-size:clamp(22px,3.4vw,32px);font-weight:800;line-height:1.15;
  color:#fff;font-variant-numeric:tabular-nums}
.gh-stat__lbl{display:block;margin-top:5px;font-size:11.5px;color:#c9d4e6;font-weight:700}
.gh-streak{margin-top:10px;display:flex;gap:5px;justify-content:center;flex-wrap:wrap}
.gh-streak span{width:16px;height:16px;border-radius:5px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.2)}
.gh-streak span.is-on{background:#fbbf24;border-color:#f59e0b;box-shadow:0 0 0 2px rgba(251,191,36,.2)}
.gh-streak-note{margin:7px 0 0;text-align:center;font-size:11px;color:#c9d4e6}

.gh-sect{margin-top:32px}
.gh-sect__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 14px;flex-wrap:wrap}
.gh-sect__title{margin:0;font-size:20px;font-weight:800;color:#0f172a;display:flex;align-items:center;gap:9px}
.gh-sect__title i{color:#dc2626;font-size:16px}
.gh-sect__sub{margin:3px 0 0;font-size:12.5px;color:#64748b}
.gh-sound{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #e2e8f0;
  color:#334155;font-family:inherit;font-size:12.5px;font-weight:700;padding:8px 13px;border-radius:10px;
  cursor:pointer;transition:.16s ease}
.gh-sound:hover{border-color:#dc2626;color:#dc2626}
.gh-sound i{font-size:13px}
.gh-sound.is-muted{background:#f1f5f9;color:#94a3b8}

.gh-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:620px){.gh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1020px){.gh-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px;align-items:start}
  .gh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gh-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e6ebf3;border-radius:18px;
  overflow:hidden;box-shadow:0 6px 20px rgba(15,23,42,.05);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.gh-card:hover{transform:translateY(-4px);border-color:#fecaca;box-shadow:0 16px 34px rgba(15,23,42,.12)}
.gh-card__art{position:relative;height:150px;overflow:hidden;background:#0f172a;
  border-bottom:1px solid rgba(15,23,42,.06)}
.gh-card__art svg{display:block;width:100%;height:100%}
.gh-card__art:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,23,42,.55),transparent 62%)}
.gh-card__tag{position:absolute;z-index:2;left:12px;top:12px;padding:5px 10px;border-radius:999px;
  font-size:11px;font-weight:800;color:#fff;background:rgba(15,23,42,.66);backdrop-filter:blur(5px)}
.gh-card__tag[data-level="1"]{background:rgba(22,163,74,.9)}
.gh-card__tag[data-level="2"]{background:rgba(217,119,6,.92)}
.gh-card__tag[data-level="3"]{background:rgba(220,38,38,.92)}
.gh-card__idx{position:absolute;z-index:2;right:12px;bottom:8px;font-size:34px;font-weight:800;
  line-height:1;color:rgba(255,255,255,.35)}
.gh-card__body{padding:15px 16px 16px;display:flex;flex-direction:column;flex:1}
.gh-card__en{margin:0 0 3px;font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#94a3b8}
.gh-card__title{margin:0;font-size:20px;font-weight:800;color:#0f172a;line-height:1.35}
.gh-card__tagline{margin:3px 0 0;font-size:12px;font-weight:700;color:#dc2626}
.gh-card__desc{margin:10px 0 14px;font-size:13px;line-height:1.8;color:#64748b;flex:1}
.gh-card__foot{display:flex;align-items:center;gap:10px;border-top:1px solid #eef2f7;padding-top:12px}
.gh-card__meta{display:flex;align-items:center;gap:5px;font-size:11.5px;color:#94a3b8;font-weight:700}
.gh-card__best{font-size:11.5px;font-weight:800;color:#0f172a;margin-left:auto;white-space:nowrap}
.gh-card__cta{margin-left:8px;display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  padding:8px 14px;border-radius:9px;font-size:13px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--gh-accent,#dc2626),var(--gh-accent-dark,#911016));
  transition:transform .16s ease,filter .16s ease}
.gh-card__cta:hover{transform:translateY(-2px);filter:brightness(1.08);color:#fff;text-decoration:none}
.gh-card__cta i{font-size:11px}
@media(max-width:400px){.gh-card__best{display:none}}

/* leaderboard */
.gh-board{background:#fff;border:1px solid #e6ebf3;border-radius:18px;overflow:hidden;
  box-shadow:0 6px 20px rgba(15,23,42,.05)}
.gh-board__head{padding:14px 16px;border-bottom:1px solid #eef2f7;
  background:linear-gradient(135deg,#fff5f5,#fff);display:flex;align-items:center;gap:9px}
.gh-board__head i{color:#dc2626;font-size:15px}
.gh-board__head h3{margin:0;font-size:15px;font-weight:800;color:#0f172a}
.gh-board__date{margin-left:auto;font-size:11px;color:#94a3b8;font-weight:700}
.gh-board__list{list-style:none;margin:0;padding:6px 8px 10px;max-height:390px;overflow:auto}
.gh-row{display:flex;align-items:center;gap:9px;padding:9px 8px;border-radius:10px}
.gh-row:nth-child(odd){background:#fafbfe}
.gh-row__rank{flex:0 0 26px;width:26px;height:26px;border-radius:8px;background:#eef2f7;color:#64748b;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.gh-row[data-rank="1"] .gh-row__rank{background:#fef3c7;color:#b45309}
.gh-row[data-rank="2"] .gh-row__rank{background:#e2e8f0;color:#475569}
.gh-row[data-rank="3"] .gh-row__rank{background:#ffedd5;color:#c2410c}
.gh-row__info{min-width:0;flex:1}
.gh-row__name{display:block;font-size:13px;font-weight:800;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gh-row__game{display:block;font-size:10.5px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gh-row__score{font-size:14px;font-weight:800;color:#dc2626;font-variant-numeric:tabular-nums}
.gh-row.is-you{background:#fff1f2;box-shadow:inset 0 0 0 1px #fecdd3}
.gh-board__empty{padding:26px 16px;text-align:center;color:#94a3b8;font-size:12.5px;line-height:1.8}
.gh-board__foot{padding:10px 14px;border-top:1px solid #eef2f7;display:flex;align-items:center;gap:8px;background:#fafbfe}
.gh-board__foot label{font-size:11px;font-weight:700;color:#64748b;white-space:nowrap}
.gh-board__foot input{flex:1;min-width:0;border:1px solid #e2e8f0;border-radius:8px;padding:7px 9px;
  font-family:inherit;font-size:12px;color:#0f172a;outline:0;background:#fff}
.gh-board__foot input:focus{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.1)}
.gh-note{margin-top:16px;padding:13px 15px;border-radius:12px;background:#eef2ff;border:1px solid #e0e7ff;
  color:#3730a3;font-size:12px;line-height:1.85}
.gh-note i{margin-right:5px}

/* ============================ 2. SHELL =============================== */
.gg-page{background:#f5f7fb;min-height:76vh;padding-bottom:50px;font-family:'Noto Serif Bengali',serif}
.gg-wrap{max-width:1080px;margin:0 auto;padding:0 14px}
.gg-crumb{display:flex;align-items:center;gap:8px;padding:14px 0 12px;font-size:12px;color:#94a3b8}
.gg-crumb a{color:#64748b;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.gg-crumb a:hover{color:#dc2626}
.gg-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-radius:16px;
  background:#fff;border:1px solid #e6ebf3;box-shadow:0 6px 20px rgba(15,23,42,.05)}
.gg-back{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;
  border-radius:10px;background:#f1f5f9;color:#334155;text-decoration:none;font-size:14px;transition:.16s}
.gg-back:hover{background:#fee2e2;color:#dc2626}
.gg-titlewrap{min-width:0;flex:1}
.gg-title{margin:0;font-size:18px;font-weight:800;color:#0f172a;line-height:1.3}
.gg-sub{margin:1px 0 0;font-size:11px;color:#94a3b8;font-weight:700}
.gg-chips{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.gg-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:9px;
  background:#f8fafc;border:1px solid #eef2f7;font-size:12px;font-weight:800;color:#334155;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.gg-chip i{color:var(--gg-accent,#dc2626);font-size:11px}
.gg-chip b{color:#0f172a}
.gg-chip--timer.is-warn{background:#fef2f2;border-color:#fecaca;color:#dc2626}
.gg-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:10px;border:1px solid #e2e8f0;background:#fff;color:#334155;cursor:pointer;font-size:14px}
.gg-iconbtn:hover{border-color:var(--gg-accent,#dc2626);color:var(--gg-accent,#dc2626)}
.gg-iconbtn.is-muted{color:#94a3b8;background:#f8fafc}

.gg-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:16px;align-items:start}
@media(min-width:960px){.gg-layout{grid-template-columns:minmax(0,1fr) 264px}}
.gg-stage{background:#fff;border:1px solid #e6ebf3;border-radius:18px;padding:16px 14px 18px;
  box-shadow:0 6px 20px rgba(15,23,42,.05);min-width:0}
.gg-stage__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.gg-stage__hint{margin:0;font-size:12.5px;color:#64748b;line-height:1.7}
.gg-tools{display:flex;gap:7px;flex-wrap:wrap}
.gg-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;
  font-size:12px;font-weight:800;padding:8px 12px;border-radius:9px;cursor:pointer;
  border:1px solid #e2e8f0;background:#fff;color:#475569;transition:.16s ease}
.gg-btn:hover{border-color:var(--gg-accent,#dc2626);color:var(--gg-accent,#dc2626);background:#fef2f2}
.gg-btn--primary{background:var(--gg-accent,#dc2626);border-color:var(--gg-accent,#dc2626);color:#fff}
.gg-btn--primary:hover{background:var(--gg-accent-dark,#911016);border-color:var(--gg-accent-dark,#911016);color:#fff}
.gg-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.gg-btn i{font-size:11px}

.gg-rail{display:flex;flex-direction:column;gap:14px}
.gg-panel{background:#fff;border:1px solid #e6ebf3;border-radius:16px;padding:14px 15px;
  box-shadow:0 6px 20px rgba(15,23,42,.04)}
.gg-panel h3{margin:0 0 9px;font-size:14px;font-weight:800;color:#0f172a;display:flex;align-items:center;gap:7px}
.gg-panel h3 i{color:var(--gg-accent,#dc2626);font-size:12px}
.gg-panel ol{margin:0;padding-left:18px;color:#64748b;font-size:12px;line-height:1.9}
.gg-panel ol li{margin-bottom:5px}
.gg-best{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;
  color:#64748b;padding:7px 0;border-bottom:1px dashed #eef2f7}
.gg-best:last-child{border-bottom:0}
.gg-best b{color:#dc2626;font-size:15px;font-variant-numeric:tabular-nums}
.gg-bangla{font-family:'Noto Serif Bengali',serif}

/* toast */
.gg-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,18px);z-index:9400;
  background:#0f172a;color:#fff;padding:10px 18px;border-radius:10px;font-size:13px;font-weight:700;
  box-shadow:0 12px 28px rgba(15,23,42,.28);opacity:0;pointer-events:none;transition:.22s ease;
  max-width:min(90vw,420px);text-align:center}
.gg-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ============================ 3. RESULT ============================== */
.gr-backdrop{position:fixed;inset:0;z-index:9500;display:none;align-items:center;justify-content:center;
  padding:16px;background:rgba(15,23,42,.62);backdrop-filter:blur(5px)}
.gr-backdrop.is-on{display:flex}
.gr-modal{width:min(420px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:22px;
  box-shadow:0 30px 70px rgba(15,23,42,.35);padding:24px 22px;text-align:center;
  animation:grPop .28s cubic-bezier(.2,.9,.3,1.2)}
@keyframes grPop{from{transform:scale(.9) translateY(14px);opacity:0}to{transform:none;opacity:1}}
.gr-emoji{font-size:38px;line-height:1}
.gr-title{margin:8px 0 2px;font-size:23px;font-weight:800;color:#0f172a}
.gr-sub{margin:0 0 14px;font-size:12.5px;color:#64748b;line-height:1.7}
.gr-score{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  width:112px;height:112px;border-radius:50%;margin:0 auto 16px;color:#fff;
  background:conic-gradient(var(--gg-accent,#dc2626) 0 100%,#e2e8f0 0);
  box-shadow:0 10px 26px rgba(220,38,38,.24);position:relative}
.gr-score:before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--gg-accent,#dc2626)}
.gr-score span{position:relative;z-index:1;font-size:29px;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums}
.gr-score small{position:relative;z-index:1;font-size:10px;opacity:.85;font-weight:700}
.gr-break{list-style:none;margin:0 0 14px;padding:0;text-align:left}
.gr-break li{display:flex;justify-content:space-between;gap:10px;padding:8px 11px;font-size:12.5px;
  color:#64748b;background:#f8fafc;border-radius:8px;margin-bottom:5px}
.gr-break li b{color:#0f172a;font-variant-numeric:tabular-nums}
.gr-sharebox{margin:0 0 14px;padding:10px 12px;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;
  font-size:11.5px;color:#475569;line-height:1.7;white-space:pre-wrap;word-break:break-word;text-align:left;
  max-height:130px;overflow:auto;font-family:'Noto Serif Bengali',serif}
.gr-actions{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.gr-share{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:9px;
  border:1px solid #e2e8f0;background:#fff;color:#334155;font-family:inherit;font-size:12px;font-weight:800;
  cursor:pointer;text-decoration:none;transition:.16s}
.gr-share:hover{transform:translateY(-2px);border-color:#94a3b8}
.gr-share--wa{background:#e7f8ee;border-color:#bbf7d0;color:#15803d}
.gr-share--fb{background:#eaf1fe;border-color:#c7d8fe;color:#1d4ed8}
.gr-replay{width:100%;padding:11px;border:0;border-radius:11px;color:#fff;font-family:inherit;
  font-size:14px;font-weight:800;cursor:pointer;background:linear-gradient(135deg,var(--gg-accent,#dc2626),var(--gg-accent-dark,#911016))}
.gr-close{display:block;margin:10px auto 0;border:0;background:none;color:#94a3b8;font-family:inherit;
  font-size:12px;font-weight:700;cursor:pointer;text-decoration:underline}

/* ============================ 4. WORDLE =============================== */
.wg-board{display:grid;grid-template-rows:repeat(6,1fr);gap:6px;width:min(100%,330px);margin:0 auto 14px}
.wg-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.wg-cell{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;
  border:2px solid #e2e8f0;border-radius:9px;background:#fff;color:#0f172a;
  font-size:clamp(19px,6vw,27px);font-weight:800;line-height:1;user-select:none;
  transition:background .2s ease,border-color .2s ease,color .2s ease}
.wg-cell.is-filled{border-color:#94a3b8;animation:wgPop .12s ease}
@keyframes wgPop{0%{transform:scale(.88)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
.wg-cell.is-active{border-color:var(--gg-accent,#dc2626);box-shadow:0 0 0 3px rgba(220,38,38,.1)}
.wg-cell.is-flip{animation:wgFlip .5s ease both}
@keyframes wgFlip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.wg-cell.is-correct{background:#16a34a;border-color:#16a34a;color:#fff}
.wg-cell.is-present{background:#eab308;border-color:#eab308;color:#fff}
.wg-cell.is-absent{background:#94a3b8;border-color:#94a3b8;color:#fff}
.wg-row.is-shake{animation:wgShake .35s ease}
@keyframes wgShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.wg-clue{text-align:center;margin:0 auto 10px;font-size:12px;color:#64748b;line-height:1.7;max-width:420px}
.wg-clue b{color:#dc2626}
.wg-keyboard{margin:0 auto;max-width:560px;display:flex;flex-direction:column;gap:5px}
.wg-keyrow{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.wg-key{flex:1 1 30px;min-width:30px;max-width:52px;height:38px;padding:0 3px;border:1px solid #e2e8f0;
  border-radius:7px;background:#fff;color:#0f172a;font-family:inherit;font-size:15px;font-weight:700;
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:.12s ease}
.wg-key:hover{border-color:var(--gg-accent,#dc2626)}
.wg-key:active{transform:scale(.94)}
.wg-key.is-correct{background:#16a34a;border-color:#16a34a;color:#fff}
.wg-key.is-present{background:#eab308;border-color:#eab308;color:#fff}
.wg-key.is-absent{background:#94a3b8;border-color:#94a3b8;color:#fff}
.wg-key--act{flex:1 1 62px;min-width:62px;max-width:92px;font-size:11.5px;background:#0f172a;border-color:#0f172a;color:#fff}
.wg-keyrow--act{margin-top:4px;justify-content:center}
.wg-typed{display:flex;gap:7px;align-items:center;max-width:420px;margin:14px auto 0}
.wg-typed input{flex:1;min-width:0;border:1px solid #e2e8f0;border-radius:9px;padding:9px 11px;
  font-family:inherit;font-size:13px;color:#0f172a;outline:0}
.wg-typed input:focus{border-color:var(--gg-accent,#dc2626);box-shadow:0 0 0 3px rgba(220,38,38,.1)}
.wg-legend{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px;font-size:11px;color:#94a3b8}
.wg-legend span{display:inline-flex;align-items:center;gap:5px}
.wg-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}

/* ============================ 5. GEO ================================= */
.dg-round{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;
  font-size:12px;font-weight:800;color:#64748b}
.dg-dots{display:flex;gap:5px}
.dg-dots i{width:9px;height:9px;border-radius:50%;background:#e2e8f0}
.dg-dots i.is-on{background:var(--gg-accent,#0d9488)}
.dg-dots i.is-now{background:#fbbf24;box-shadow:0 0 0 3px rgba(251,191,36,.25)}
.dg-timertrack{height:7px;border-radius:999px;background:#eef2f7;overflow:hidden;margin-bottom:12px}
.dg-timerfill{height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,#0d9488,#22c55e);
  transition:width 1s linear}
.dg-timerfill.is-low{background:linear-gradient(90deg,#f97316,#dc2626)}
.dg-frame{position:relative;width:100%;max-width:520px;margin:0 auto;aspect-ratio:16/10;
  border-radius:14px;overflow:hidden;background:#0f172a;border:1px solid #e2e8f0}
.dg-frame svg{display:block;width:100%;height:100%;filter:blur(18px);
  transition:filter .7s ease;transform:scale(1.08)}
.dg-frame[data-blur="4"] svg{filter:blur(18px)}
.dg-frame[data-blur="3"] svg{filter:blur(13px)}
.dg-frame[data-blur="2"] svg{filter:blur(8px)}
.dg-frame[data-blur="1"] svg{filter:blur(4px)}
.dg-frame[data-blur="0"] svg{filter:blur(0);transform:scale(1)}
.dg-frame__badge{position:absolute;left:10px;top:10px;z-index:2;padding:5px 10px;border-radius:999px;
  background:rgba(15,23,42,.66);color:#fff;font-size:10.5px;font-weight:800;backdrop-filter:blur(4px)}
.dg-clue{margin:12px auto 0;max-width:520px;font-size:13px;line-height:1.85;color:#334155;
  background:#f8fafc;border-left:3px solid var(--gg-accent,#0d9488);border-radius:0 10px 10px 0;padding:10px 13px}
.dg-hint{margin:8px auto 0;max-width:520px;font-size:12px;color:#b45309;background:#fffbeb;
  border:1px solid #fde68a;border-radius:9px;padding:8px 11px;display:none}
.dg-hint.is-on{display:block}
.dg-options{display:grid;grid-template-columns:1fr;gap:8px;max-width:520px;margin:14px auto 0}
@media(min-width:520px){.dg-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dg-opt{font-family:inherit;font-size:13px;font-weight:800;color:#0f172a;text-align:left;
  padding:12px 13px;border-radius:10px;border:2px solid #e2e8f0;background:#fff;cursor:pointer;
  transition:.15s ease;display:flex;align-items:center;gap:9px}
.dg-opt:hover{border-color:var(--gg-accent,#0d9488);background:#f0fdfa}
.dg-opt span{flex:0 0 22px;width:22px;height:22px;border-radius:6px;background:#f1f5f9;color:#64748b;
  display:flex;align-items:center;justify-content:center;font-size:11px}
.dg-opt.is-right{background:#dcfce7;border-color:#16a34a;color:#14532d}
.dg-opt.is-wrong{background:#fee2e2;border-color:#dc2626;color:#7f1d1d}
.dg-opt:disabled{cursor:default;transform:none}
.dg-feedback{min-height:22px;text-align:center;margin:10px 0 0;font-size:12.5px;font-weight:800;color:#64748b}

/* ============================ 6. SLIDER ============================== */
.sp-wrap{width:min(100%,420px);margin:0 auto}
.sp-preview{position:relative;width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;
  background:#e2e8f0;margin-bottom:11px;border:1px solid #e2e8f0;display:none}
.sp-preview.is-on{display:block}
.sp-preview img{width:100%;height:100%;object-fit:cover;display:block}
.sp-preview span{position:absolute;left:8px;bottom:8px;background:rgba(15,23,42,.7);color:#fff;
  font-size:10.5px;padding:4px 9px;border-radius:6px}
.sp-board{position:relative;display:grid;gap:4px;width:100%;aspect-ratio:1/1;padding:6px;
  border-radius:14px;background:#0f172a;touch-action:manipulation}
.sp-tile{position:relative;border-radius:8px;background-color:#cbd5e1;background-repeat:no-repeat;
  cursor:pointer;overflow:hidden;border:0;padding:0;transition:transform .13s ease,box-shadow .13s ease;
  font-family:inherit;-webkit-tap-highlight-color:transparent}
.sp-tile:hover{box-shadow:inset 0 0 0 3px rgba(255,255,255,.7)}
.sp-tile.is-blank{background:#0f172a;cursor:default;box-shadow:none}
.sp-tile.is-correct:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px rgba(34,197,94,.85);border-radius:8px}
.sp-tile__num{position:absolute;left:5px;top:4px;z-index:2;font-size:10px;font-weight:800;color:#fff;
  background:rgba(15,23,42,.6);padding:2px 6px;border-radius:5px;line-height:1.3}
.sp-tile.is-blank .sp-tile__num{display:none}
.sp-caption{margin:10px 0 0;text-align:center;font-size:12px;color:#64748b;line-height:1.7}
.sp-status{margin:10px 0 0;text-align:center;font-size:13px;font-weight:800;color:var(--gg-accent,#2563eb)}
.sp-imgerr{max-width:420px;margin:0 auto 12px;padding:10px;border-radius:9px;background:#fffbeb;
  border:1px solid #fde68a;color:#92400e;font-size:11.5px;display:none}

/* ============================ 7. MEMORY ============================== */
.mc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  width:min(100%,430px);margin:0 auto;perspective:900px}
.mc-card{position:relative;aspect-ratio:1/1;border:0;padding:0;background:transparent;cursor:pointer;
  transform-style:preserve-3d;transition:transform .38s cubic-bezier(.2,.8,.3,1);-webkit-tap-highlight-color:transparent}
.mc-card.is-flipped{transform:rotateY(180deg)}
.mc-card.is-matched{cursor:default;animation:mcMatch .45s ease}
@keyframes mcMatch{0%{transform:rotateY(180deg) scale(1)}50%{transform:rotateY(180deg) scale(1.08)}100%{transform:rotateY(180deg) scale(1)}}
.mc-face{position:absolute;inset:0;border-radius:11px;display:flex;align-items:center;justify-content:center;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.mc-face--front{background:linear-gradient(145deg,#dc2626,#911016);border:1px solid #b91c1c;color:#fff}
.mc-face--front:after{content:"";position:absolute;inset:7px;border:1px dashed rgba(255,255,255,.4);border-radius:7px}
.mc-face--front i{font-size:22px;opacity:.85}
.mc-face--back{transform:rotateY(180deg);background:#fff;border:2px solid #e2e8f0;flex-direction:column;gap:3px;padding:6px}
.mc-card.is-matched .mc-face--back{border-color:#16a34a;background:#f0fdf4;box-shadow:0 0 0 3px rgba(22,163,74,.16)}
.mc-face--back svg{width:78%;height:78%;display:block}
.mc-face--back small{font-size:9.5px;color:#64748b;font-weight:700;text-align:center;line-height:1.2}
.mc-legend{margin:14px auto 0;text-align:center;font-size:12px;color:#64748b}

/* ============================ 8. SMALL SCREENS ======================= */
@media(max-width:600px){
  .gh-hero__inner{padding:26px 14px 30px}
  .gh-stats{gap:7px}
  .gh-stat{padding:11px 7px}
  .gh-card__art{height:128px}
  .gg-top{padding:10px}
  .gg-title{font-size:15px}
  .gg-chip{font-size:11px;padding:6px 8px}
  .gg-stage{padding:13px 10px 15px}
  .wg-key{height:36px;font-size:14px;min-width:28px;flex-basis:28px}
  .mc-grid{gap:6px}
  .gr-modal{padding:20px 16px}
}
@media(prefers-reduced-motion:reduce){
  .gh-*,.gg-*,.gr-*,.wg-*,.dg-*,.sp-*,.mc-*{animation-duration:.01ms!important;transition-duration:.01ms!important}
}