/* ================= ARCADE ================= */
.arcade{padding:20px 22px;display:flex;flex-direction:column;gap:18px;overflow:auto}
.arcade__banner{
  background:linear-gradient(120deg,#12275A 0%,#1B3A7B 45%,#3B6BD8 100%);
  border-radius:var(--r-xl);padding:26px;color:#fff;position:relative;overflow:hidden;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.arcade__banner::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(2px 2px at 20% 30%,#fff,transparent),
    radial-gradient(2px 2px at 65% 20%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 80% 60%,#fff,transparent),
    radial-gradient(2px 2px at 35% 75%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 90% 35%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 10% 65%,#fff,transparent),
    radial-gradient(2px 2px at 50% 50%,#fff,transparent);
  opacity:.5;animation:twinkle 4s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:.28}50%{opacity:.62}}
.arcade__banner>*{position:relative}
.arcade__ttl{font-size:23px;font-weight:800;letter-spacing:-.02em}
.arcade__sub{font-size:13px;opacity:.85;margin-top:5px;font-weight:600;max-width:430px;line-height:1.5}
.arcade__coins{margin-left:auto;background:rgba(255,255,255,.15);border-radius:var(--r-lg);padding:13px 18px;
  text-align:center;backdrop-filter:blur(6px)}
.arcade__coins b{display:block;font-size:25px;font-weight:800}
.arcade__coins i{font-style:normal;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;opacity:.85;font-weight:700}

.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:15px}
.gcard{
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:var(--t);cursor:pointer;position:relative;display:flex;flex-direction:column
}
.gcard:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--peri)}
.gcard__art{height:112px;display:grid;place-items:center;font-size:40px;position:relative;overflow:hidden}
.gcard__b{padding:13px 14px;display:flex;flex-direction:column;gap:5px;flex:1}
.gcard__t{font-size:14px;font-weight:800}
.gcard__d{font-size:11.5px;color:var(--text-3);font-weight:600;line-height:1.45;flex:1}
.gcard__f{display:flex;align-items:center;gap:8px;margin-top:7px}
.gcard__best{font-size:10.5px;font-weight:800;color:var(--text-3);margin-left:auto}
.gcard.is-locked .gcard__art{filter:grayscale(1) brightness(.75)}
.gcard__lock{position:absolute;inset:0;display:grid;place-items:center;gap:7px;
  background:rgba(10,16,32,.55);color:#fff;backdrop-filter:blur(3px);font-weight:800;font-size:12px}
.gcard__lock span[data-icon]{font-size:22px}
.gcard__secret{position:absolute;top:9px;right:9px;background:linear-gradient(135deg,#FFD87A,#F5A524);color:#fff;
  font-size:9px;font-weight:900;padding:3px 8px;border-radius:99px;letter-spacing:.05em;text-transform:uppercase}

/* game shell */
.gplay{display:flex;flex-direction:column;align-items:center;gap:15px;padding:6px 0}
.gplay__hud{display:flex;align-items:center;gap:18px;width:100%;justify-content:center;flex-wrap:wrap}
.gstat{text-align:center;background:var(--surface-2);border-radius:14px;padding:9px 16px;min-width:80px}
.gstat b{display:block;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.gstat i{font-style:normal;font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em}
.gplay canvas{border-radius:var(--r-md);background:var(--surface-2);touch-action:none;max-width:100%}
.gplay__hint{font-size:11.5px;color:var(--text-3);font-weight:600;text-align:center;line-height:1.5}

/* memory */
.mem-grid{display:grid;gap:9px}
.mcard{aspect-ratio:1;border-radius:14px;position:relative;cursor:pointer;perspective:600px;background:none}
.mcard__in{position:absolute;inset:0;transition:transform .45s var(--e-out);transform-style:preserve-3d}
.mcard.is-open .mcard__in,.mcard.is-match .mcard__in{transform:rotateY(180deg)}
.mcard__f,.mcard__bk{position:absolute;inset:0;border-radius:14px;display:grid;place-items:center;
  backface-visibility:hidden;font-size:26px}
.mcard__f{background:var(--grad-accent);color:rgba(255,255,255,.55);font-size:19px}
.mcard__bk{background:var(--surface);border:2px solid var(--line);transform:rotateY(180deg)}
.mcard.is-match .mcard__bk{border-color:var(--ok);background:var(--ok-soft)}

/* 2048 */
.g2048{background:var(--surface-3);border-radius:var(--r-md);padding:9px;position:relative;touch-action:none}
.g2048__row{display:flex;gap:9px}
.g2048__row+.g2048__row{margin-top:9px}
.tile{width:66px;height:66px;border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:22px;
  background:var(--surface-2);color:var(--text);transition:var(--t-fast)}
.tile.is-new{animation:pop .2s var(--e-spring)}
.tile[data-v="2"]{background:#EAF1FD;color:#3F5A9B}
.tile[data-v="4"]{background:#D9E6FA;color:#3F5A9B}
.tile[data-v="8"]{background:#A0BCEC;color:#fff}
.tile[data-v="16"]{background:#7CA3F0;color:#fff}
.tile[data-v="32"]{background:#5A8BEA;color:#fff}
.tile[data-v="64"]{background:#3B6BD8;color:#fff}
.tile[data-v="128"]{background:#2E58C0;color:#fff;font-size:19px}
.tile[data-v="256"]{background:#1B3A7B;color:#fff;font-size:19px}
.tile[data-v="512"]{background:#12275A;color:#FBFBE9;font-size:19px}
.tile[data-v="1024"]{background:#0A1020;color:#FBFBE9;font-size:16px}
.tile[data-v="2048"]{background:linear-gradient(135deg,#FFD87A,#F5A524);color:#fff;font-size:16px;
  box-shadow:0 0 22px rgba(245,165,36,.6)}

/* garden */
.garden{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:9px;width:100%}
.plant{aspect-ratio:1;border-radius:14px;background:var(--surface-2);display:grid;place-items:center;font-size:22px;
  border:1px solid var(--line);transition:var(--t)}
.plant.is-grown{background:var(--ok-soft);border-color:var(--ok);animation:pop .35s var(--e-spring)}
.plant.is-dead{opacity:.4;filter:grayscale(1)}

/* breathe */
.breathe{display:grid;place-items:center;height:270px;position:relative}
.breathe__c{width:126px;height:126px;border-radius:50%;background:var(--grad-accent);box-shadow:var(--sh-accent);
  transition:transform 4s var(--e-out);display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px}
.breathe__c.is-in{transform:scale(1.75)}
.breathe__ripple{position:absolute;border-radius:50%;border:2px solid var(--peri);opacity:0;
  width:126px;height:126px;animation:ripple 4s ease-out infinite}
@keyframes ripple{0%{transform:scale(1);opacity:.65}100%{transform:scale(2.2);opacity:0}}

/* snake */
.snake-pad{display:grid;grid-template-columns:repeat(3,56px);gap:8px;justify-content:center;margin-top:6px}
.snake-pad button{height:48px;border-radius:14px;background:var(--surface-2);font-size:17px;color:var(--text-2);
  display:grid;place-items:center;transition:var(--t-fast)}
.snake-pad button:active{background:var(--accent);color:#fff;transform:scale(.94)}

/* game over */
.gover{position:absolute;inset:0;display:grid;place-items:center;gap:9px;background:rgba(255,255,255,.9);
  border-radius:var(--r-md);animation:fadeIn .25s;z-index:5;text-align:center;padding:18px}
[data-theme="dark"] .gover,[data-theme="neon"] .gover{background:rgba(16,26,49,.93)}
.gover b{font-size:22px;font-weight:800}
.gover p{font-size:12.5px;color:var(--text-3);font-weight:600}