@import "tokens.css?v=5";
/* ============================================================
   Arcade — "Knipsel TTY"
   CRT terminal-noir shell for the games hub and game pages.
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--bg);}
body{
  font-family:var(--body);line-height:1.6;color:var(--text);background:transparent;
  -webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%,var(--star),transparent 60%),
    radial-gradient(1px 1px at 27% 62%,var(--star-2),transparent 60%),
    radial-gradient(1px 1px at 42% 30%,var(--star-2),transparent 60%),
    radial-gradient(1.6px 1.6px at 58% 78%,var(--star-gold),transparent 60%),
    radial-gradient(1px 1px at 66% 12%,var(--star-2),transparent 60%),
    radial-gradient(1.3px 1.3px at 74% 46%,var(--star-cyan),transparent 60%),
    radial-gradient(1px 1px at 83% 68%,var(--star-2),transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 24%,var(--star),transparent 60%),
    radial-gradient(1px 1px at 8% 85%,var(--star-2),transparent 60%),
    radial-gradient(1.2px 1.2px at 35% 90%,var(--star),transparent 60%),
    radial-gradient(1px 1px at 50% 55%,var(--star-2),transparent 60%),
    radial-gradient(1.1px 1.1px at 20% 42%,var(--star),transparent 60%);
  background-repeat:repeat;background-size:540px 540px;
}
body.no-scan::before{display:none;}

/* ---- Parallax background (parallax-bg.js) ---- */
.bg-parallax{position:fixed;inset:-8%;z-index:-1;overflow:hidden;pointer-events:none;}
.bg-layer{position:absolute;inset:-6%;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;transition:opacity 1.2s ease;will-change:transform;transform:scale(1.08);}
.bg-layer.l-far{filter:blur(34px) saturate(1.1) brightness(0.42);}
.bg-layer.l-near{filter:blur(22px) saturate(1.15) brightness(0.5);mix-blend-mode:screen;}
.bg-layer.l-far.show{opacity:.55;}
.bg-layer.l-near.show{opacity:.22;}
.bg-tint{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 28%,rgba(11,16,38,0.45),rgba(11,16,38,0.86) 72%),
    linear-gradient(180deg,rgba(11,16,38,0.6),rgba(11,16,38,0.92));
}
@media(prefers-reduced-motion:reduce){.bg-layer{transition:none;}}

h1,h2,.logo,.game-title{font-family:var(--serif);letter-spacing:-0.02em;}
a{color:var(--accent);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-sm);box-shadow:var(--glow);}

/* ---- Top bar ---- */
.arcade-bar{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem 1.4rem;max-width:var(--maxw);margin:0 auto;width:100%;
  background:rgba(11,16,38,0.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border-2);font-family:var(--mono);
}
.arcade-bar .logo{font-size:1.05rem;font-weight:700;color:var(--accent);text-decoration:none;display:flex;align-items:center;gap:.4rem;}
.arcade-bar .logo::before{content:">";color:var(--accent-3);font-weight:400;opacity:.7;}
.arcade-bar .logo:hover{color:var(--accent-2);text-shadow:var(--glow);}
.back-link{
  display:inline-flex;align-items:center;gap:.5rem;
  color:var(--text-mut);text-decoration:none;font-size:.85rem;font-weight:400;
  padding:.45rem .85rem;border-radius:var(--radius-sm);
  border:1px solid var(--border-2);transition:color .25s,background .25s,border-color .25s;
  font-family:var(--mono);
}
.back-link:hover{color:var(--accent);background:var(--surface);border-color:var(--accent);}

/* ---- Auth (auth.js) ---- */
.auth-area{display:flex;align-items:center;gap:.7rem;margin-left:auto;}
.auth-user{color:var(--text-mut);font-size:.85rem;font-family:var(--mono);}
.auth-user strong{color:var(--accent);}
.auth-btn{
  font-family:var(--mono);font-size:.82rem;font-weight:600;cursor:pointer;
  color:var(--text);background:var(--surface);border:1px solid var(--border-2);
  padding:.5rem 1rem;border-radius:var(--radius-sm);transition:background .25s,border-color .25s,transform .2s;
}
.auth-btn:hover{background:var(--surface-2);border-color:var(--accent);transform:translateY(-1px);}
.auth-btn.primary{background:var(--accent);border-color:transparent;color:#0a0a0a;}

.auth-modal{position:fixed;inset:0;z-index:4000;display:grid;place-items:center;padding:1.2rem;}
.auth-modal[hidden]{display:none;}
.auth-backdrop{position:absolute;inset:0;background:rgba(5,5,5,0.78);backdrop-filter:blur(6px);}
.auth-card{
  position:relative;width:min(94vw,380px);
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:1.6rem 1.5rem 1.7rem;
}
.auth-card::before{
  content:"auth";position:absolute;top:-1px;left:1rem;
  background:var(--bg-2);padding:0 .5rem;
  font-family:var(--mono);font-size:.68rem;color:var(--accent-3);
  text-transform:uppercase;letter-spacing:.1em;transform:translateY(-50%);
}
.auth-close{position:absolute;top:.7rem;right:.8rem;width:32px;height:32px;background:none;border:0;color:var(--text-mut);font-size:1.5rem;line-height:1;cursor:pointer;border-radius:2px;}
.auth-close:hover{color:var(--text);background:var(--surface);}
.auth-tabs{display:flex;gap:.4rem;background:var(--surface);border-radius:var(--radius-sm);padding:.3rem;margin-bottom:1.3rem;}
.auth-tab{flex:1;font-family:var(--mono);font-size:.85rem;font-weight:600;cursor:pointer;color:var(--text-mut);background:transparent;border:0;padding:.5rem;border-radius:var(--radius-sm);transition:background .25s,color .25s;}
.auth-tab.active{background:var(--accent);color:#0a0a0a;}
.auth-field{display:block;margin-bottom:.9rem;}
.auth-field span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-mut);margin-bottom:.35rem;font-family:var(--mono);}
.auth-field input{width:100%;font-family:var(--mono);font-size:.95rem;color:var(--text);background:rgba(0,0,0,0.3);border:1px solid var(--border-2);border-radius:var(--radius-sm);padding:.65rem .8rem;transition:border-color .25s;}
.auth-field input:focus{outline:none;border-color:var(--accent);}
.auth-error{color:var(--oxblood);font-size:.82rem;margin:0 0 .9rem;font-family:var(--mono);}
.auth-submit{width:100%;}
@media(max-width:540px){.auth-user{display:none;}}

/* ---- Page shell ---- */
.arcade-main{max-width:var(--maxw);margin:0 auto;padding:1.5rem 1.4rem 5rem;}

/* ---- Hub hero ---- */
.arcade-hero{text-align:center;padding:2.5rem 1rem 1.5rem;}
.arcade-hero .eyebrow{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;
  color:var(--accent-3);margin-bottom:.9rem;display:flex;align-items:center;gap:.5rem;justify-content:center;
}
.arcade-hero .eyebrow::before{content:"$";color:var(--accent);opacity:.6;}
.arcade-hero h1{
  font-size:clamp(2.2rem,7vw,3.8rem);line-height:1.05;margin-bottom:1rem;
  background:var(--grad);background-size:220% auto;animation:hue-pan 14s var(--ease) infinite alternate;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(79,214,224,0.22));
}
.arcade-hero p{color:var(--text-mut);font-size:1.02rem;max-width:560px;margin:0 auto;}

/* ---- Game card grid — terminal panels ---- */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.4rem;margin-top:2.5rem;}
.game-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border-2);
  border-left:2px solid var(--accent);
  border-radius:var(--radius-sm);overflow:hidden;text-decoration:none;
  color:var(--text);box-shadow:var(--shadow);
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;
}
.game-card:hover{transform:translateY(-6px);border-left-color:var(--accent-3);box-shadow:0 18px 45px rgba(79,214,224,0.15);}
.game-card .thumb{
  font-size:3.2rem;height:140px;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,rgba(79,214,224,0.10),transparent 70%);
  border-bottom:1px solid var(--border-2);
  filter:none;
}
.game-card .meta{padding:1.1rem 1.2rem 1.3rem;}
.game-card .meta h3{font-family:var(--mono);font-size:1.1rem;margin-bottom:.3rem;color:var(--accent-2);}
.game-card .meta p{color:var(--text-mut);font-size:.88rem;line-height:1.45;}
.game-card .tag{
  display:inline-block;margin-top:.8rem;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-3);
  border:1px solid var(--border-2);border-radius:var(--radius-sm);padding:.2rem .6rem;
  font-family:var(--mono);
}
.game-card .best-line{display:block;margin-top:.7rem;font-family:var(--mono);font-size:.8rem;font-weight:400;color:var(--text-mut);letter-spacing:.02em;}

/* ---- Leaderboards ---- */
.leaderboard{margin-top:3.5rem;}
.lb-head{text-align:center;margin-bottom:1.6rem;}
.lb-head h2{font-size:clamp(1.6rem,5vw,2.4rem);font-family:var(--mono);color:var(--accent-2);}
.lb-head .section-sub{color:var(--text-mut);font-size:.95rem;margin-top:.4rem;font-family:var(--mono);}
.lb-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-bottom:1.4rem;}
.lb-tab{
  font-family:var(--mono);font-size:.82rem;font-weight:600;cursor:pointer;
  color:var(--text-mut);background:var(--surface);border:1px solid var(--border-2);
  padding:.45rem .9rem;border-radius:var(--radius-sm);transition:color .25s,background .25s,border-color .25s;
}
.lb-tab:hover{color:var(--accent);border-color:var(--accent);}
.lb-tab.active{background:var(--accent);border-color:transparent;color:#0a0a0a;}
.lb-panel{
  max-width:520px;margin:0 auto;background:var(--surface);
  border:1px solid var(--border-2);border-radius:var(--radius-sm);padding:.6rem;
  box-shadow:var(--shadow);min-height:120px;
}
.lb-list{list-style:none;}
.lb-row{display:grid;grid-template-columns:2.4rem 1fr auto;align-items:center;gap:.6rem;padding:.65rem .85rem;border-radius:var(--radius-sm);font-family:var(--mono);font-size:.88rem;}
.lb-row+.lb-row{border-top:1px solid var(--border-2);}
.lb-rank{font-weight:700;text-align:center;color:var(--text-mut);}
.lb-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-bright);}
.lb-score{font-weight:700;color:var(--accent-3);}
.lb-row.is-me{background:rgba(79,214,224,0.10);}
.lb-row.is-me .lb-name::after{content:" (you)";color:var(--text-mut);font-weight:400;font-size:.78rem;}
.lb-status{text-align:center;color:var(--text-mut);font-size:.88rem;padding:1.6rem 1rem;font-family:var(--mono);}
.lb-status[hidden]{display:none;}

.hub-foot{margin-top:2.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem;}
.hub-foot .foot-note{margin-top:0;}
#reset-scores{font-size:.82rem;padding:.55rem 1.2rem;}

/* ---- Game page layout ---- */
.game-head{text-align:center;margin:.5rem 0 1.4rem;}
.game-head .game-title{font-size:clamp(1.6rem,5vw,2.4rem);font-family:var(--mono);color:var(--accent-2);}
.game-head .how{color:var(--text-mut);font-size:.9rem;margin-top:.4rem;font-family:var(--mono);}

.hud{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;}
.hud .stat{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--radius-sm);padding:.5rem 1rem;min-width:88px;text-align:center;}
.hud .stat .label{display:block;font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-mut);font-family:var(--mono);}
.hud .stat .value{display:block;font-family:var(--mono);font-size:1.3rem;font-weight:700;color:var(--accent-2);}

/* Cabinet that frames the canvas / board */
.cabinet{
  position:relative;margin:0 auto;width:fit-content;max-width:100%;
  background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:clamp(.6rem,2vw,1.2rem);box-shadow:var(--shadow);
}
.cabinet::before{
  content:"";position:absolute;top:-1px;left:1rem;right:1rem;height:1px;
  background:var(--accent);opacity:.3;
}
canvas{display:block;max-width:100%;height:auto;border-radius:var(--radius-sm);touch-action:none;}

/* Overlay (start / paused / game over) */
.overlay{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  background:rgba(7,7,7,0.85);backdrop-filter:blur(4px);
  border-radius:var(--radius-sm);padding:1.5rem;z-index:5;
}
.overlay[hidden]{display:none;}
.overlay h2{font-size:clamp(1.4rem,5vw,2.2rem);margin-bottom:.5rem;font-family:var(--mono);color:var(--accent-2);}
.overlay p{color:var(--text-mut);margin-bottom:1.4rem;max-width:360px;}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--mono);font-size:.92rem;font-weight:600;
  padding:.8rem 1.6rem;border-radius:var(--radius-sm);cursor:pointer;
  border:1px solid transparent;text-decoration:none;color:var(--text);
  transition:transform .25s var(--ease),box-shadow .25s,background .25s;
}
.btn-primary{background:var(--accent);color:#0a0a0a;}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 35px rgba(79,214,224,0.3);}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border-2);}
.btn-ghost:hover{background:var(--surface);transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--glow);}

.game-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.3rem;}

/* ---- Touch controls ---- */
.touch-controls{display:none;margin:1.4rem auto 0;width:fit-content;}
.dpad{display:grid;grid-template-columns:repeat(3,60px);grid-template-rows:repeat(3,60px);gap:.5rem;}
.dpad button{background:var(--surface);border:1px solid var(--border-2);color:var(--text);border-radius:var(--radius-sm);font-size:1.4rem;cursor:pointer;display:grid;place-items:center;user-select:none;-webkit-user-select:none;transition:background .15s;}
.dpad button:active{background:var(--surface-2);}
.dpad .up{grid-area:1/2;}
.dpad .left{grid-area:2/1;}
.dpad .right{grid-area:2/3;}
.dpad .down{grid-area:3/2;}

@media(hover:none) and (pointer:coarse){
  .touch-controls{display:block;}
  .game-head .how .key-hint{display:none;}
}

.foot-note{text-align:center;color:var(--text-mut);font-size:.82rem;margin-top:2.5rem;font-family:var(--mono);}

/* ---- Light mode ---- */
[data-theme="light"] .bg-tint{
  background:radial-gradient(circle at 50% 28%,rgba(233,223,199,0.4),rgba(233,223,199,0.82) 72%),
    linear-gradient(180deg,rgba(233,223,199,0.55),rgba(233,223,199,0.9));
}
[data-theme="light"] .arcade-hero h1{
  background:linear-gradient(120deg,#26314e 18%,var(--accent) 55%,var(--accent-3) 92%);
  -webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 1px 6px rgba(38,49,78,0.14));
}
[data-theme="light"] .cabinet{background:var(--bg-2);}
[data-theme="light"] .overlay{background:rgba(233,223,199,0.85);}
[data-theme="light"] .auth-card{background:var(--bg-2);}
[data-theme="light"] .auth-backdrop{background:rgba(20,26,46,0.4);}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}