/* Mirage Team — modern site. No build step, system fonts only.
   Light "Liquid Glass" layer (2026-10-18): frosted cards and pills over a soft sky/lavender wash that echoes
   Towers Infinite's 2020 design (LCD sky blue, lavender highlights, pill keys). Solid fallbacks without
   backdrop-filter, with prefers-reduced-transparency and with prefers-contrast: more. */
:root{--bg:#f6f6f3;--fg:#1d1d1f;--muted:#55555c;--line:#e1dfd9;--accent:#1f5fbf;--card:#fff;--badge:#e6eefb;
 --sky:#bfe0ec;--lav:#d9d4fb;--glass:rgba(255,255,255,.58);--glass-strong:rgba(255,255,255,.78);--glass-edge:rgba(255,255,255,.75);
 --glass-line:rgba(29,29,31,.08);--shadow:0 1px 2px rgba(29,29,31,.04),0 8px 28px rgba(29,29,31,.07);--blur:saturate(170%) blur(18px);color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#121216;--fg:#ececef;--muted:#a6a6b0;--line:#2c2c33;--accent:#8ab4ff;--card:#1d1d23;--badge:#22324d;
 --sky:#16384a;--lav:#2b2550;--glass:rgba(40,40,48,.52);--glass-strong:rgba(40,40,48,.74);--glass-edge:rgba(255,255,255,.12);
 --glass-line:rgba(255,255,255,.08);--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35)}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0 auto;max-width:44rem;padding:0 1.25rem;color:var(--fg);font:1.0625rem/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-x:clip}
/* soft colour wash behind the glass (fixed, decorative, cheap: two blurred gradients) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(40rem 28rem at 12% -6%,var(--sky),transparent 70%),radial-gradient(36rem 30rem at 100% 38%,var(--lav),transparent 70%),radial-gradient(30rem 24rem at 0% 100%,var(--sky),transparent 72%);opacity:.75}
a{color:var(--accent)}a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:10;background:var(--card);padding:.5rem;border-radius:10px}

/* glass surfaces */
.glass,header.site,.app>a,.app>div,.app:has(.kq),.shot img,.button,.pill,nav a,.badge{background:var(--glass);border:1px solid var(--glass-line);
 box-shadow:inset 0 1px 0 var(--glass-edge),var(--shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}

header.site{position:sticky;top:.75rem;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:.75rem -.5rem 0;padding:.5rem .5rem .5rem 1rem;border-radius:99px}
.brand{font-weight:700;letter-spacing:-.01em;color:var(--fg);text-decoration:none}
nav{display:flex;gap:.4rem}
nav a{padding:.3rem .85rem;border-radius:99px;color:var(--fg);text-decoration:none;font-size:.95rem;box-shadow:inset 0 1px 0 var(--glass-edge)}
nav a:hover{background:var(--glass-strong)}
h1{font-size:clamp(2rem,6vw,2.75rem);line-height:1.1;letter-spacing:-.02em;margin:2.5rem 0 .75rem}
h2{font-size:1.25rem;margin:2.5rem 0 .75rem}
p{color:var(--muted)}.lede{font-size:1.2rem;color:var(--fg)}
.apps{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
.app>a,.app>div{display:flex;gap:1rem;align-items:center;padding:1rem;border-radius:22px;color:var(--muted);text-decoration:none}
.app>a:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:var(--glass-strong)}.app strong{color:var(--fg)}
.app img,.ph{width:64px;height:64px;border-radius:15px;flex:none}
.ph{display:grid;place-items:center;background:var(--line);color:var(--muted);font-weight:700;font-size:1.5rem}
.badge{display:inline-block;font-size:.75rem;font-weight:600;padding:.1rem .55rem;border-radius:99px;color:var(--accent);vertical-align:.1em;background:color-mix(in srgb,var(--badge) 70%,transparent)}
.note{font-size:.9rem}
.app-head{display:flex;gap:1.25rem;align-items:flex-start;margin-top:2rem}.app-head img{border-radius:22px;flex:none;box-shadow:var(--shadow)}.app-head h1{margin-top:0}
.features{padding-left:1.2rem;color:var(--muted)}.features li{margin:.35rem 0}
figure{margin:2rem 0;text-align:center}figure img{max-width:min(100%,260px);height:auto;border-radius:18px;border:1px solid var(--line)}
figcaption{font-size:.85rem;color:var(--muted);margin-top:.5rem}
@media (min-width:720px){.app-body{display:grid;grid-template-columns:1fr 260px;gap:2rem;align-items:start}.app-body>figure{margin-top:3.3rem}}
/* screenshots in a frosted frame */
.shot img{padding:6px;border-radius:30px;background-clip:padding-box}
.levels{display:grid;gap:0 2rem;align-items:start}.levels h2{margin-top:2rem}
.levels .menu img{max-width:min(100%,230px);border-radius:24px}
@media (min-width:720px){.levels{grid-template-columns:230px 1fr}.levels figure{margin:2rem 0 0}}
.art{margin:1rem auto 0;max-width:220px;opacity:.55}.art img{width:100%;border:0;border-radius:0;max-width:none}
@media (prefers-color-scheme:dark){.art{opacity:.4}}
/* pills (buttons, back link) */
.button,.pill{display:inline-block;padding:.55rem 1.1rem;border-radius:99px;color:var(--fg);text-decoration:none;font-weight:600;word-break:break-all}
.button{background:color-mix(in srgb,var(--accent) 88%,transparent);color:#fff;border-color:transparent}
.button:hover{background:var(--accent)}.pill:hover{background:var(--glass-strong)}
@media (prefers-color-scheme:dark){.button{color:#0d1626}}
footer.site{margin:4rem 0 2rem;padding-top:1.25rem;border-top:1px solid var(--line);font-size:.875rem}footer.site p{margin:.25rem 0}
.egg{color:inherit;text-decoration:none}.egg:hover,.egg:focus-visible{text-decoration:underline}
@media (prefers-reduced-motion:no-preference){a{transition:color .15s,border-color .15s,background-color .15s}}
.kq{margin:.5rem 0 0;text-align:left}.kq img{width:100%;max-width:none;height:auto;border-radius:14px}
.app:has(.kq){border-radius:22px}.app:has(.kq)>div{border:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.kq{padding:0 1rem 1rem}

/* fallbacks: no backdrop-filter, reduced transparency, more contrast → solid, calm surfaces */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root{--glass:var(--card);--glass-strong:var(--card)}}
@media (prefers-reduced-transparency:reduce){:root{--glass:var(--card);--glass-strong:var(--card);--blur:none}body::before{display:none}}
@media (prefers-contrast:more){:root{--glass:var(--card);--glass-strong:var(--card);--blur:none;--glass-line:var(--muted)}body::before{display:none}}