/* ContentPad Arcade — shared styles (build 2026100305-arcade · "liquid console" skin)
   ContentPad liquid-chrome wallpaper + Y2K console-menu feel: deep blue fog, glass panels, chrome type. */
:root{--bg:#02030d;--glass:rgba(14,22,58,.55);--glass2:rgba(22,34,86,.62);--line:rgba(120,150,255,.22);--line2:rgba(150,180,255,.45);--tx:#eef3ff;--dim:#a9b6e6;--mute:#6f7cb0;--blue:#3d6bff;--ice:#8fd0ff;--pink:#ff4fd8;--gold:#ffd166;--r:18px}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}
body{min-height:100vh;overflow-x:hidden;background:transparent}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.disp{font-family:Michroma,"Archivo Black","Arial Black",sans-serif;letter-spacing:.04em;text-transform:uppercase}
/* the world behind everything */
.sky{position:fixed;inset:0;z-index:-3;background:#02030d url("https://contentpad.io/onair/08-wallpaper.webp") center/cover no-repeat}
.sky:after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 38%,rgba(40,80,255,.22),transparent 70%),radial-gradient(90% 70% at 50% 120%,rgba(10,30,160,.55),transparent 60%),linear-gradient(rgba(2,3,13,.35),rgba(2,3,13,.6))}
#dust{position:fixed;inset:0;z-index:-2;pointer-events:none}
.scan{position:fixed;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.chrome{background:linear-gradient(180deg,#ffffff 0%,#e3ecff 32%,#7d9bff 48%,#1f3bd6 52%,#c9d8ff 66%,#ffffff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px rgba(80,130,255,.55)) drop-shadow(0 2px 0 rgba(0,0,0,.35))}
/* top bar */
.bar{position:sticky;top:0;z-index:20;background:linear-gradient(rgba(4,8,30,.82),rgba(4,8,30,.55));backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:16px;height:66px}
.logo{display:flex;align-items:center;gap:12px;white-space:nowrap}
.logo img{height:30px;width:auto;border-radius:8px;box-shadow:0 0 0 1px rgba(150,180,255,.25),0 0 22px rgba(70,110,255,.45)}
.logo .arc{font-family:Michroma,sans-serif;font-size:17px;letter-spacing:.22em}
.nav{display:flex;gap:6px;margin-left:8px}
.nav a{padding:8px 14px;border-radius:999px;color:var(--dim);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;border:1px solid transparent}
.nav a.on,.nav a:hover{color:#fff;background:rgba(61,107,255,.22);border-color:var(--line2);box-shadow:0 0 16px rgba(61,107,255,.35)}
.clock{margin-left:auto;font-family:Michroma,monospace;font-size:12px;letter-spacing:.14em;color:var(--ice);text-shadow:0 0 8px rgba(143,208,255,.7)}
@media (max-width:560px){.logo img{height:24px}.logo .arc{font-size:13px;letter-spacing:.16em}.clock{display:none}.nav{margin-left:auto}}
/* boot */
#boot{position:fixed;inset:0;z-index:100;background:#000;display:grid;place-items:center;cursor:pointer;transition:opacity .7s}
#boot.out{opacity:0;pointer-events:none}
#boot .glow{position:absolute;width:140vmax;height:140vmax;border-radius:50%;background:radial-gradient(circle,rgba(40,90,255,.55),rgba(10,20,120,.25) 30%,transparent 60%);transform:scale(.2);opacity:0;animation:bloom 2.2s ease-out .15s forwards}
#boot .mark{position:relative;text-align:center;opacity:0;animation:rise 1.6s ease-out .55s forwards}
#boot .mark img{height:58px;margin:0 auto 18px;border-radius:12px;box-shadow:0 0 40px rgba(80,130,255,.8)}
#boot .mark b{display:block;font-family:Michroma,sans-serif;font-size:clamp(28px,6vw,54px);letter-spacing:.35em;padding-left:.35em}
#boot .mark small{display:block;margin-top:14px;color:var(--mute);font-size:11px;letter-spacing:.3em;text-transform:uppercase}
@keyframes bloom{0%{transform:scale(.2);opacity:0}40%{opacity:1}100%{transform:scale(1);opacity:.75}}
@keyframes rise{0%{opacity:0;transform:translateY(10px) scale(.96);filter:blur(6px)}100%{opacity:1;transform:none;filter:none}}
/* console menu (home) */
.menu{margin:26px 0 10px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:26px;align-items:center}
.disc{position:relative;aspect-ratio:16/10;border-radius:26px;overflow:hidden;border:1px solid var(--line2);background:#071033;box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 30px 80px rgba(0,10,80,.7),0 0 60px rgba(61,107,255,.35)}
.disc img{width:100%;height:100%;object-fit:cover;transition:opacity .35s,transform 6s ease-out}
.disc:hover img{transform:scale(1.04)}
.disc:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 28%),linear-gradient(0deg,rgba(2,6,30,.55),transparent 45%);pointer-events:none}
.info .kick{font-family:Michroma,sans-serif;font-size:11px;letter-spacing:.28em;color:var(--ice);text-shadow:0 0 8px rgba(143,208,255,.6)}
.info h1{font-family:Michroma,sans-serif;font-size:clamp(26px,3.6vw,42px);line-height:1.08;margin:10px 0 12px;text-transform:uppercase}
.info p{color:var(--dim);line-height:1.55;margin:0 0 16px;font-size:15px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.chip{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--dim);background:rgba(20,32,90,.6);border:1px solid var(--line);padding:4px 10px;border-radius:999px;text-transform:uppercase}
.chip.r{color:#fff;background:rgba(255,79,216,.25);border-color:rgba(255,79,216,.6)}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line2);cursor:pointer;color:#fff;background:rgba(20,32,90,.55)}
.btn.play{background:linear-gradient(180deg,#7ea0ff 0%,#2f55ff 48%,#1a37d8 52%,#3f6bff 100%);border-color:#a9c0ff;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 8px 30px rgba(40,90,255,.55);text-shadow:0 1px 0 rgba(0,0,0,.3)}
.btn.play:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn.ghost{background:rgba(10,18,60,.55)}
.btn:focus-visible,.tile:focus-visible,.nav a:focus-visible,.ring:focus-visible{outline:2px solid var(--ice);outline-offset:3px}
.hint{margin-top:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.hint kbd{font:inherit;color:var(--tx);border:1px solid var(--line2);border-radius:6px;padding:1px 6px;margin:0 2px;background:rgba(20,32,90,.6)}
/* carousel rail */
.rail{display:flex;gap:14px;overflow-x:auto;padding:18px 4px 22px;scroll-snap-type:x mandatory;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.ring{flex:none;width:168px;scroll-snap-align:center;border-radius:18px;padding:0;border:1px solid var(--line);background:rgba(10,18,60,.5);overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;color:inherit;text-align:left}
.ring img{width:100%;aspect-ratio:16/10;object-fit:cover;opacity:.7;transition:opacity .2s}
.ring span{display:block;padding:8px 10px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ring.sel{transform:translateY(-4px) scale(1.04);border-color:#a9c0ff;box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 0 26px rgba(61,107,255,.75)}
.ring.sel img{opacity:1}
@media (max-width:820px){.menu{grid-template-columns:1fr;gap:18px}.ring{width:140px}}
/* sections + grid */
.sec{margin:34px 0}
.sec h2{display:flex;align-items:baseline;gap:12px;font-size:16px;letter-spacing:.2em;margin:0 0 16px}
.sec h2 small{font-family:Inter,sans-serif;letter-spacing:.04em;text-transform:none;font-size:13px;color:var(--mute);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.tile{display:block;background:var(--glass);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .18s,border-color .18s,box-shadow .18s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tile:hover{transform:translateY(-3px);border-color:#a9c0ff;box-shadow:0 0 28px rgba(61,107,255,.45)}
.tile .art{aspect-ratio:16/9;background:#081236;position:relative;overflow:hidden}
.tile .art img{width:100%;height:100%;object-fit:cover}
.tile .art:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.18),rgba(255,255,255,0) 30%);pointer-events:none}
.badge{position:absolute;top:10px;left:10px;padding:4px 9px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;background:rgba(4,8,30,.8);border:1px solid var(--line2)}
.badge.new{background:linear-gradient(180deg,#9fb7ff,#3d6bff);color:#fff;border-color:#c9d6ff}
.badge.r{left:auto;right:10px;background:rgba(255,79,216,.85);border-color:#ffb4ef;color:#fff}
.tile .meta{padding:13px 15px 15px}
.tile h3{margin:0 0 5px;font-size:15px;letter-spacing:.04em}
.tile p{margin:0;color:var(--dim);font-size:13px;line-height:1.45}
.tile .row{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
/* memory card */
.mem{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mem .chipcard{width:46px;height:58px;border-radius:8px;background:linear-gradient(160deg,#2a3c9a,#0d1550);border:1px solid var(--line2);position:relative;box-shadow:0 0 16px rgba(61,107,255,.4)}
.mem .chipcard:before{content:"";position:absolute;left:9px;right:9px;bottom:9px;height:12px;border-radius:2px;background:repeating-linear-gradient(90deg,#ffd166 0 3px,transparent 3px 6px)}
.mem h4{margin:0 0 4px;font-size:11px;letter-spacing:.22em;color:var(--ice);font-family:Michroma,sans-serif}
.mem ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--dim)}
.mem ul b{color:#fff}
footer{border-top:1px solid var(--line);margin-top:50px;padding:24px 0 40px;color:var(--mute);font-size:12px;letter-spacing:.04em;background:linear-gradient(rgba(2,3,13,0),rgba(2,3,13,.7))}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}
footer a:hover{color:var(--tx)}
/* play page */
.play-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;margin:22px 0}
.stage{background:#000;border:1px solid var(--line2);border-radius:20px;overflow:hidden;position:relative;aspect-ratio:16/9;box-shadow:0 0 50px rgba(40,90,255,.35),0 30px 70px rgba(0,0,0,.6)}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.stagebar{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.stagebar h1{font-size:18px;margin:0;flex:1;min-width:200px;letter-spacing:.08em}
.side{display:grid;gap:14px;align-content:start}
.card{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.card h4{margin:0 0 10px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ice);font-family:Michroma,sans-serif}
.card p{margin:0;color:var(--dim);font-size:14px;line-height:1.55}
.keys{display:grid;gap:8px;font-size:13px;color:var(--dim)}
.keys div{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
.keys kbd{font-family:inherit;font-size:12px;font-weight:800;color:var(--tx);background:rgba(20,32,90,.7);border:1px solid var(--line2);border-bottom-width:3px;border-radius:7px;padding:3px 7px;white-space:nowrap}
.score{display:flex;justify-content:space-between;align-items:baseline}
.score b{font-family:Michroma,sans-serif;font-size:28px;color:var(--gold);text-shadow:0 0 12px rgba(255,209,102,.5)}
@media (max-width:900px){.play-wrap{grid-template-columns:1fr}}
@media (max-width:600px){.stage{aspect-ratio:auto;height:min(62vh,420px);border-radius:14px}}
@media (prefers-reduced-motion:reduce){#boot{display:none}.disc img,.ring,.tile{transition:none}}