:root{
	--hud-btn-w: 180px; 
}

.hud{
	display: grid;
	width: var(--hud-btn-w);
	align-items: stretch;
	font:16px "VT323",monospace;
	display:flex;
	flex-direction:column;
	align-items: stretch;
	gap:12px;
}


/* ===== Game panel ===== */
.panel{
	position:relative;
	border-radius:18px;
	background:var(--panel-grad);
	box-shadow:
		0 0 0 2px #2e57b8 inset,
		0 0 0 8px rgba(20,60,150,.35) inset,
		0 18px 60px rgba(0,0,0,.65),
		0 0 36px rgba(0,160,255,.12);
	padding:20px;
	min-height:0;
	display:grid;
	place-items:center;
}

.panel::before{
	content:"";
	position:absolute;
	inset:10px;
	border-radius:14px;
	pointer-events:none;
	box-shadow:
		0 0 0 2px #5faaff,
		0 0 20px rgba(95,170,255,.45),
		inset 0 0 24px rgba(40,120,255,.25);
}

.grid{
	display:grid;
	grid-template-columns:1fr var(--vsw) 1fr;
	align-items:center;
	gap:20px;
	width:90%;
	max-height:100%;
}

.mid{
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
}

.vs-badge{
	width:var(--vsw);
	height:var(--vsw);
	display:flex;
	align-items:center;
	justify-content:center;
	font:24px "Press Start 2P";
	animation:pulse 1.4s ease-in-out infinite;
}
.vs-badge:after{
	content:"VS";
}

@keyframes pulse{
	0%,100%{
		transform:scale(1)
	}50%{
		transform:scale(1.2)
	}
}

.card{
	position:relative;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:6px;
	min-height:var(--card-h);
	background:linear-gradient(180deg,#121a3b 0%,#0d1330 100%);
	border:0;
	border-radius:12px;
	cursor:pointer;
	transition:transform .08s, filter .08s;
	padding:10px;
	-webkit-tap-highlight-color:transparent;
	touch-action:manipulation;
	box-shadow:
		0 0 0 3px #1a2a55, 0 0 0 6px #0a1636,
		0 12px 28px rgba(0,0,0,.55),
		0 0 26px rgba(95,170,255,.12);
}

.card:hover{
	transform:translateY(-2px);
}


.card img{
	width:var(--token);
	height:var(--token);
	max-width:100%;
	object-fit:contain;
	image-rendering:crisp-edges;
	filter:contrast(1.1) saturate(1.1);
}

.card h3{
	font-family:"VT323",monospace;
	font-size:var(--h3);
	margin:0;
	text-align:center;
	color:#ffffff;
}

.card .pick{
	font-family:"Press Start 2P";
	font-size:var(--btn);
	letter-spacing:1px;
	text-transform:uppercase;
	background:linear-gradient(#ffd86a,#ff9800);
	color:#111;
	padding:6px 10px;
	box-shadow:inset 0 -3px 0 #c76b00;
}

.card.enter{ animation:none; }


.msg{
	min-height:18px;
	margin:5px 0;
	font:18px "VT323",monospace;
	color:var(--danger);
	text-align:center;
}

/* ===== Interlude ===== */
.interlude{
	position:absolute;
	border-radius:18px;
	inset:0;
	display:grid;
	place-items:center;
	background:rgba(17,25,62,.7);
	z-index:5;
	animation:fadein .12s ease-out;
	pointer-events:all;
}

@keyframes fadein{
	from{opacity:0}to{opacity:1}
}

.interlude[hidden]{
	display:none !important;
}

.il-wrap{
	text-align:center;
	animation:pop .24s ease-out;
	background:rgba(17,25,62,1);
}

.il-title{
	font:14px "Press Start 2P";
	color:#8fe3ff;
	margin-bottom:20px;
	text-shadow:0 0 10px var(--accent);
}

.il-vs{
	display:none;
}

.il-count span{
	display:inline-block;
	min-width:auto;
	padding:0;
	background:none;
	box-shadow:none;
	font:50px "Press Start 2P";
	color:#ffbf20;
	text-shadow:0 0 10px #ffb900, 0 0 24px #ff9100, 0 6px 0 rgba(0,0,0,.5);
	animation:countPulse 1s ease-in-out infinite;
}

@keyframes countPulse{
	50%{
		transform:scale(1.3)
	}
}

#pair .card, #pair .mid { transition: transform 220ms ease, opacity 220ms ease; }
#pair .card.exit-left  { transform: translateX(-32px); opacity: 0; }
#pair .card.exit-right { transform: translateX( 32px); opacity: 0; }
#pair .mid.exit        { transform: scale(.92); opacity: 0; }
#pair .card.enter      { transform: translateY(12px); opacity: 0; }
#pair .card.enter.show { transform: translateY(0);    opacity: 1; }
#interlude { opacity: 0; transition: opacity 200ms ease; }
#interlude.show { opacity: 1; }

/* Win celebration */
.card { will-change: transform, opacity; }
.card.win { transform: translateY(-6px) scale(1.03); box-shadow: 0 0 0 3px #39c, 0 0 22px rgba(80,200,255,.5); }
.card.win::after { content:""; position:absolute; inset:-4px; border-radius:12px;
  box-shadow: 0 0 0 2px #6cf, 0 0 24px rgba(100,200,255,.6); opacity:0; animation:winGlow .35s ease-out forwards; }
@keyframes winGlow { to { opacity:1; } }

.burst { position:absolute; inset:0; pointer-events:none; }
.burst i { position:absolute; left:50%; top:50%; width:var(--s); height:var(--s);
  background: var(--c,#fff); border-radius:2px; opacity:0; transform: translate(-50%,-50%);
  animation: confetti var(--d) cubic-bezier(.2,.7,.2,1) forwards; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
@keyframes confetti {
  0% { opacity:1; transform: translate(-50%,-50%) scale(1) rotate(0); }
  100% { opacity:0; transform: translate(calc(-50% + var(--x)*90px), calc(-50% + var(--y)*100px)) scale(.9) rotate(var(--r)); }
}

.win-badge {
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	font:16px "Press Start 2P";
	color:#ffbf20;
	text-shadow:0 0 10px #ffb900, 0 0 24px #ff9100, 0 6px 0 rgba(0,0,0,.5);
	opacity:0;
	animation: floatUp 600ms ease-out forwards;
}

@keyframes floatUp { to { transform: translate(-50%,-80%); opacity:1; } }

/* Celebration au-dessus de l’interlude */
.card.win { z-index: 10; position: relative; }
.burst, .win-badge { z-index: 11; }

/* Cache le compteur pendant 1s au début de l’interlude */
.il-hidden { visibility: hidden; }


@media (max-width:560px){
	.vs-badge:after{
		content:"";
	}
	
	.grid{
		gap:10px;
	}
}