/* ===== MEMORY MATCH LAB ===== */
:root{
  --bg:#070912;
  --bg2:#0d1122;
  --panel:rgba(255,255,255,.05);
  --panel-brd:rgba(255,255,255,.10);
  --txt:#eef2ff;
  --muted:#9aa4c7;
  --acc:#7c5cff;
  --acc2:#00e5ff;
  --good:#22e07a;
  --bad:#ff4d6d;
  --gold:#ffd166;
  --r:20px;
  --shadow:0 18px 50px rgba(0,0,0,.55);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  background:var(--bg);
  color:var(--txt);
  font-family:"Space Grotesk",ui-rounded,"Segoe UI",Inter,system-ui,-apple-system,sans-serif;
  overflow-x:hidden;
}
.bg-glow{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vmax 60vmax at 15% -10%, rgba(124,92,255,.30), transparent 60%),
    radial-gradient(55vmax 55vmax at 100% 0%, rgba(0,229,255,.18), transparent 60%),
    radial-gradient(60vmax 60vmax at 50% 120%, rgba(255,77,109,.16), transparent 60%),
    linear-gradient(180deg,#070912,#0b0f1e 60%,#070912);
}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:12px 16px;
  background:linear-gradient(180deg,rgba(7,9,18,.92),rgba(7,9,18,.35));
  backdrop-filter:blur(8px);
}
.brand{font-weight:800;letter-spacing:.10em;font-size:.86rem;color:var(--muted)}
.brand span{color:var(--txt)}
.tools{display:flex;gap:8px}
.icon-btn{
  width:44px;height:44px;border-radius:14px;font-size:1.15rem;cursor:pointer;
  background:var(--panel);border:1px solid var(--panel-brd);color:var(--txt);
  transition:transform .12s ease, background .2s, box-shadow .2s;
}
.icon-btn:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.icon-btn:active{transform:scale(.94)}
.icon-btn.off{opacity:.45}

/* ---------- screens ---------- */
#app{max-width:820px;margin:0 auto;padding:8px 16px 60px}
.screen{display:none;animation:fadeUp .38s ease both}
.screen.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.hero{text-align:center;padding:26px 0 12px;max-width:100%}
.title{
  font-size:clamp(1.7rem,7.6vw,3.4rem);line-height:1.08;margin:0 0 14px;
  overflow-wrap:break-word;word-break:normal;max-width:100%;
  font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(100deg,#fff,#c9bcff 40%,#7ef0ff 75%,#fff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(124,92,255,.45));
}
.title.small{font-size:clamp(1.5rem,6vw,2.2rem);text-align:center;margin-top:20px}
.tagline{color:var(--muted);font-size:clamp(1rem,3.6vw,1.15rem);max-width:30ch;margin:0 auto 26px;line-height:1.5}
.best-line{color:var(--muted);margin-top:18px;font-size:.95rem}
.best-line strong{color:var(--gold)}
.screen-title{text-align:center;letter-spacing:.14em;font-size:1rem;color:var(--muted);margin:22px 0 18px}

.btn{
  font-family:inherit;font-weight:800;letter-spacing:.05em;cursor:pointer;
  border-radius:16px;padding:14px 24px;font-size:1rem;color:#fff;
  border:1px solid rgba(255,255,255,.14);background:var(--panel);
  transition:transform .12s ease, filter .2s, box-shadow .2s, background .2s;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
.btn:active{transform:scale(.97)}
.btn-primary{
  background:linear-gradient(120deg,var(--acc),#b06cff 55%,var(--acc2));
  border:none;box-shadow:0 12px 34px rgba(124,92,255,.45);
}
.btn-xl{padding:18px 40px;font-size:1.2rem;border-radius:20px}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{color:#fff}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:22px 0}

.card{
  background:var(--panel);border:1px solid var(--panel-brd);border-radius:var(--r);
  padding:22px;margin:18px 0;box-shadow:var(--shadow);backdrop-filter:blur(6px);
}
.card h2,.card h3{margin:0 0 14px;letter-spacing:.10em;font-size:.95rem;color:var(--acc2)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.steps li{display:flex;align-items:center;gap:12px;font-size:1.05rem}
.steps .num{
  flex:0 0 30px;height:30px;display:grid;place-items:center;border-radius:10px;
  background:linear-gradient(140deg,var(--acc),var(--acc2));font-weight:800;font-size:.9rem;
}
.fineprint{color:#77809f;font-size:.78rem;line-height:1.5;margin:16px 0 0}

/* ---------- mode cards ---------- */
.modes{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.mode-card{
  text-align:left;cursor:pointer;font-family:inherit;color:var(--txt);
  background:var(--panel);border:1px solid var(--panel-brd);border-radius:var(--r);
  padding:18px;transition:transform .15s ease,box-shadow .2s,border-color .2s;
}
.mode-card:hover{transform:translateY(-4px);border-color:rgba(124,92,255,.7);box-shadow:0 16px 40px rgba(124,92,255,.28)}
.mode-card:active{transform:scale(.98)}
.mode-emoji{font-size:1.6rem;font-weight:800;letter-spacing:.06em;margin-bottom:8px}
.mode-card h3{margin:0 0 6px;font-size:1.05rem;letter-spacing:.06em}
.mode-card p{margin:0 0 12px;color:var(--muted);font-size:.86rem;line-height:1.45}
.tag{font-size:.68rem;letter-spacing:.12em;padding:4px 10px;border-radius:99px;background:rgba(0,229,255,.14);color:var(--acc2)}
.tag.hard{background:rgba(255,77,109,.16);color:#ff8ea3}

/* ---------- hud ---------- */
.hud{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:10px 0 12px}
.stat{
  background:var(--panel);border:1px solid var(--panel-brd);border-radius:14px;
  padding:9px 6px;text-align:center;min-width:0;
}
.stat .label{display:block;font-size:.58rem;letter-spacing:.12em;color:var(--muted)}
.stat .value{display:block;font-size:1.05rem;font-weight:800;margin-top:3px;overflow:hidden;text-overflow:ellipsis}
.stat.lives .value{font-size:.85rem;letter-spacing:-1px}
.value.bump{animation:bump .38s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.35);color:var(--gold)}100%{transform:scale(1)}}
.lives-hit{animation:shake .45s ease}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

.progress{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:16px}
.progress-fill{
  height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--acc),var(--acc2));
  box-shadow:0 0 16px rgba(0,229,255,.6);transition:width .22s ease;
}

.stage-head{text-align:center;margin-bottom:14px}
.stage-head h2{margin:0;font-size:1.35rem;letter-spacing:.06em}
.prompt{margin:6px 0 0;color:var(--muted);min-height:1.4em;font-size:1rem;transition:color .2s}
.prompt.go{color:var(--acc2);font-weight:700}
.prompt.good{color:var(--good);font-weight:800}
.prompt.bad{color:var(--bad);font-weight:800}
.hint{text-align:center;color:#6d7699;font-size:.76rem;margin-top:16px;min-height:1em}

/* ---------- board / tiles ---------- */
.board{display:grid;gap:12px;justify-content:center;margin:0 auto;max-width:520px}
.board.cols-3{grid-template-columns:repeat(3,1fr)}
.board.cols-4{grid-template-columns:repeat(4,1fr)}

.tile{
  position:relative;aspect-ratio:1/1;border-radius:18px;cursor:pointer;border:2px solid rgba(255,255,255,.10);
  background:var(--tile,#333);filter:brightness(.5) saturate(.7);
  display:grid;place-items:center;font-size:clamp(1.5rem,7vw,2.3rem);
  transition:transform .12s ease, filter .18s ease, box-shadow .2s ease;
  user-select:none;color:#fff;
}
.tile:hover{filter:brightness(.72) saturate(.9);transform:translateY(-2px)}
.tile:active{transform:scale(.95)}
.tile.lit{
  filter:brightness(1.55) saturate(1.4);transform:scale(1.06);
  box-shadow:0 0 0 3px rgba(255,255,255,.65), 0 0 44px 10px var(--tile);
  z-index:2;
}
.tile.press{filter:brightness(1.3) saturate(1.2);box-shadow:0 0 26px 4px var(--tile)}
.tile.wrong{animation:wrongPulse .5s ease;box-shadow:0 0 0 3px var(--bad),0 0 40px 6px var(--bad)}
@keyframes wrongPulse{0%,100%{transform:scale(1)}30%{transform:scale(1.08) rotate(-3deg)}60%{transform:scale(1.02) rotate(3deg)}}
.tile.correct{animation:goodPulse .5s ease}
@keyframes goodPulse{0%{transform:scale(1)}45%{transform:scale(1.12);box-shadow:0 0 0 3px var(--good),0 0 46px 8px var(--good)}100%{transform:scale(1)}}
.tile.dim{opacity:.35}
.tile .idx{position:absolute;top:6px;left:9px;font-size:.62rem;color:rgba(255,255,255,.55);font-weight:700}
.tile .ord{
  position:absolute;bottom:5px;right:8px;font-size:.8rem;font-weight:800;
  color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.7)
}
.board.locked .tile{pointer-events:none}

/* numbers mode display */
.digit-stage{
  min-height:132px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  font-weight:800;
}
.big-digit{
  font-size:clamp(3.2rem,18vw,6rem);line-height:1;
  background:linear-gradient(120deg,#fff,#8ef1ff);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 30px rgba(0,229,255,.55));
  animation:pop .3s ease;
}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.entry{
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:6px 0 16px;min-height:56px;
}
.stage-note{color:#6d7699;font-size:.9rem;letter-spacing:.04em}
.slot{
  width:clamp(34px,10vw,46px);height:clamp(46px,13vw,58px);border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid var(--panel-brd);
  display:grid;place-items:center;font-size:clamp(1.2rem,5vw,1.6rem);font-weight:800;
}
.slot.filled{border-color:var(--acc2);box-shadow:0 0 18px rgba(0,229,255,.35);background:rgba(0,229,255,.10)}
.slot.next{border-color:var(--acc);animation:blink 1.1s ease-in-out infinite}
@keyframes blink{0%,100%{box-shadow:0 0 0 rgba(124,92,255,0)}50%{box-shadow:0 0 22px rgba(124,92,255,.75)}}
.keypad{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-width:460px;margin:0 auto}
.key{
  font-family:inherit;font-weight:800;font-size:clamp(1.1rem,4.6vw,1.4rem);padding:14px 0;cursor:pointer;
  border-radius:14px;color:var(--txt);background:var(--panel);border:1px solid var(--panel-brd);
  transition:transform .1s,background .2s,box-shadow .2s;
}
.key:hover{background:rgba(124,92,255,.28);box-shadow:0 0 20px rgba(124,92,255,.35)}
.key:active,.key.press{transform:scale(.92);background:rgba(0,229,255,.3)}
.key.wide{grid-column:span 2;font-size:.9rem;letter-spacing:.08em}
.key.go{background:linear-gradient(120deg,var(--acc),var(--acc2));border:none}

/* palette (flash mode) */
.palette{display:flex;gap:10px;justify-content:center;margin:16px 0 0;flex-wrap:wrap}
.swatch{
  width:clamp(48px,14vw,66px);height:clamp(48px,14vw,66px);border-radius:16px;cursor:pointer;
  border:2px solid rgba(255,255,255,.18);background:var(--tile);
  filter:brightness(.95);transition:transform .12s,box-shadow .2s;
}
.swatch:hover{transform:translateY(-3px);box-shadow:0 0 26px 4px var(--tile)}
.swatch:active{transform:scale(.92)}
.palette.hidden{display:none}

/* ---------- results ---------- */
.badge-wrap{display:flex;justify-content:center;margin:12px 0 4px}
.badge{
  font-size:1.25rem;font-weight:800;padding:12px 26px;border-radius:99px;
  background:linear-gradient(120deg,rgba(124,92,255,.35),rgba(0,229,255,.28));
  border:1px solid rgba(255,255,255,.18);box-shadow:0 0 40px rgba(124,92,255,.4);
  animation:pop .4s ease;
}
.result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:22px 0 6px}
.rcard{
  background:var(--panel);border:1px solid var(--panel-brd);border-radius:16px;padding:16px;text-align:center;
}
.rlabel{display:block;font-size:.64rem;letter-spacing:.14em;color:var(--muted)}
.rvalue{display:block;font-size:clamp(1.6rem,7vw,2.2rem);font-weight:800;margin-top:6px;
  background:linear-gradient(120deg,#fff,#a8b6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.newbest{text-align:center;color:var(--gold);font-weight:800;letter-spacing:.08em;animation:bump .6s ease}
.learned ul{margin:0;padding-left:20px;display:grid;gap:10px}
.learned li{line-height:1.5;font-size:.95rem;color:#dbe2ff}
.learned li b{color:var(--acc2)}

/* ---------- overlays ---------- */
.overlay{
  position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;
  background:rgba(5,7,15,.78);backdrop-filter:blur(10px);animation:fadeUp .25s ease both;
}
.modal{
  width:100%;max-width:420px;text-align:center;
  background:linear-gradient(160deg,#141a30,#0d1120);
  border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:28px 24px;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.modal.wide{max-width:520px}
.modal-emoji{font-size:2.6rem;margin-bottom:6px;animation:pop .35s ease}
.modal h3{margin:0 0 12px;letter-spacing:.10em;font-size:1.05rem;color:var(--gold)}
.modal p{margin:0 0 18px;color:#cfd6f5;line-height:1.6;font-size:1rem}
.edu-extra{margin-bottom:18px}
.chunk-demo{
  font-size:clamp(1.3rem,7vw,2.3rem);font-weight:800;letter-spacing:.10em;margin:6px 0 14px;
  color:#fff;filter:drop-shadow(0 0 24px rgba(0,229,255,.5))
}
.chunk-demo .pipe{color:var(--acc);margin:0 .12em}
.chunk-demo .grp{background:rgba(0,229,255,.12);border-radius:10px;padding:2px 8px;margin:0 3px;display:inline-block}
.flash-toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:60;padding:12px 22px;border-radius:99px;font-weight:800;letter-spacing:.05em;
  background:rgba(20,26,48,.95);border:1px solid rgba(255,255,255,.16);box-shadow:var(--shadow);
  animation:pop .25s ease;
}
.flash-toast.good{color:var(--good);border-color:rgba(34,224,122,.5)}
.flash-toast.bad{color:var(--bad);border-color:rgba(255,77,109,.5)}

/* screen flashes */
body.flash-good::after,body.flash-bad::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:40;animation:flashFade .5s ease forwards;
}
body.flash-good::after{background:radial-gradient(circle at 50% 50%,rgba(34,224,122,.30),transparent 70%)}
body.flash-bad::after{background:radial-gradient(circle at 50% 50%,rgba(255,77,109,.34),transparent 70%)}
@keyframes flashFade{from{opacity:1}to{opacity:0}}

/* ---------- responsive ---------- */
@media (max-width:520px){
  #app{padding:6px 12px 50px}
  .hud{grid-template-columns:repeat(4,1fr);gap:6px}
  .stat{padding:8px 4px}
  .stat .label{font-size:.5rem;letter-spacing:.06em}
  .stat .value{font-size:.95rem}
  .stat.lives{grid-column:span 4}
  .stat.lives .value{font-size:1.05rem}
  .modes{grid-template-columns:1fr}
  .board{gap:9px;max-width:100%}
  .tile{border-radius:14px}
  .card{padding:18px}
  .digit-stage{min-height:104px}
  .brand span{display:none}
  .keypad{gap:6px}
}
@media (max-width:390px){
  .result-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}