/* ===== Core theme ===== */
:root{
	--bg:#0b1020;
	--fg:#dfe7ff;
	--line:#20305f;
	--accent:#2bd9ff;
	--accent2:#ffb900;
	--danger:#ff8a8a;
	--gap:clamp(8px,5vw,5vw);
	--vsw:clamp(38px,9vw,64px);
	--token:clamp(68px,22vw,180px);
	--card-h:clamp(170px,36vw,240px);
	--h1:clamp(14px,2.4vw,18px);
	--h3:clamp(24px,24px,24px);
	--h5:clamp(12px,12px,12px);
	--btn:clamp(8px,1.6vw,11px);
	--hud-btn-w: 180px; 
	--panel-grad:linear-gradient(180deg,#121a3b 0%,#0d1330 100%);
	--frame-3:0 0 0 3px #1a2a55,0 0 0 6px #0a1636,0 6px 0 0 #000;
	--frame-4:0 0 0 4px #1a2a55,0 0 0 8px #0a1636,0 10px 0 0 #000;
}

*{
	box-sizing:border-box
}

a{
	color:#9bd1ff;
	text-decoration:none;
}

/* ===== CRT + starfield ===== */
body.crt{
	margin:0;
	color:var(--fg);
	background: url('../img/bg.webp') no-repeat center center fixed;
	background-size: cover;
}


body.crt::before,body.crt::after{
	content:"";
	position:fixed;
	inset:0;
	pointer-events:none;
}

/* ===== Layout global ===== */
.wrap{
	max-width:600px;
	margin:0 auto;
	height:100svh;
	min-height:100svh;
	display:grid;
	grid-template-rows:auto 1fr auto;
	gap:10px;
	padding:15px;
}

header.topbar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin:6px 0 28px;
}

.brand{
	display:flex;
	align-items:center;
	gap:12px;
	min-width:0;
}

.logo{
	image-rendering:pixelated;
	max-width:200px;
	height:auto;
	display:block;
}

footer{
	margin-top:0;
	font:22px "VT323",monospace;
	text-align:center;
}

/* ===== Buttons ===== */
.btn{
	font-family:"Press Start 2P";
	font-size:11px;
	letter-spacing:1px;
	text-transform:uppercase;
	display:inline-block;
	padding:10px 14px;
	color:#111;
	background:linear-gradient(#ffd86a,#ff9800);
	border:0;
	border-radius:0;
	text-align:center;
	box-shadow:
		0 0 0 4px #25407a,
		0 0 0 8px #0a1636,
		inset 0 -4px 0 #c76b00,
		0 6px 0 #000;
	touch-action:manipulation;
}

.btn:active{
	transform:translateY(3px);
	box-shadow:
		0 0 0 4px #25407a,
		0 0 0 8px #0a1636,
		inset 0 -2px 0 #c76b00,
		0 3px 0 #000;
}

.badge {
	font-size:24px;
	text-align:center;
}

/* ===== Splash screen ===== */
.splash{
	position:fixed;
	inset:0;
	display:grid;
	place-items:center;
	background:rgba(0,0,0,.85);
	z-index:999;
}

.splash .box{
	background:var(--panel-grad);
	box-shadow:var(--frame-4);
	padding:18px 20px;
	text-align:center;
	max-width:520px;
	margin:0 16px;
}

.splash-logo{
	width:min(420px,80vw);
	height:auto;
	image-rendering:pixelated;
	filter:drop-shadow(0 8px 0 #081c4a);
}

.press{
	font:14px "Press Start 2P";
	color:#8fe3ff;
	margin:8px 0 12px;
	animation:blink 1.1s steps(2,end) infinite;
}

@keyframes blink{50%{opacity:.35}}

.hint{
	font:20px "VT323";
	opacity:.8;
	margin:6px 0 0;
}

.hide{
	animation:fadeout .25s linear forwards;
}

@keyframes fadeout{
	to{
		opacity:0;visibility:hidden;
	}
}

/* ===== Responsive ===== */

/* Mobile (≤560px) */
@media (max-width:560px){	
  header.topbar{flex-direction:column; align-items:center; gap:10px}
  .logo{max-width:220px}
  .btn{font-size:10px; padding:8px 12px}
  .btn.small{font-size:10px; padding:6px 10px}

  :root{
    --gap:8px;
	--vsw:0;
    --token:min(42vw,20svh);
    --card-h:clamp(140px,32svh,200px);
  }

  .panel{padding:8px}
  .card{padding:8px}
  .vs-badge{align-self:center}

  /* Leaderboard header empilé */
  .lb-header{flex-direction:column;align-items:center;gap:8px}
  .lb-header .brand{flex-direction:column;align-items:center;gap:6px;width:100%}
  .lb-header .brand .logo{max-width:180px}
  .lb-header .btn{width:100%;max-width:320px;text-align:center}
  .lb-title{font-size:18px;line-height:1.2;white-space:normal;text-align:center}
}

/* Très petites hauteurs */
@media (max-height:800px){ .panel{padding:10px} }
@media (max-height:640px){
  :root{ --card-h:clamp(120px,28svh,180px);}
  .panel{padding:6px}
}