@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;0,600;0,700;0,800;0,900;1,800;1,900&display=swap');
:root{
  --navy:#061243; --navy2:#0b1d5c; --deep:#040a22;
  --gold:#E8C468; --gold2:#F6DE9A; --blue:#2f5bff;
  --font:'Montserrat',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#030817;color:#fff;font-family:var(--font);-webkit-font-smoothing:antialiased}
button{font-family:inherit}

/* ---------- Sahne ---------- */
.stage-bg{position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(ellipse 80% 70% at 50% 0%,#16307a 0%,#0b1d55 38%,#060f33 70%,#040a22 100%)}
.stage-bg .beam{position:absolute;top:-40px;width:320px;height:860px;transform-origin:50% 0;
  background:linear-gradient(180deg,rgba(170,200,255,.42),rgba(120,160,255,.10) 55%,transparent 85%);
  clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);filter:blur(10px);opacity:.75}
.stage-bg .lamp{position:absolute;top:-18px;width:90px;height:36px;border-radius:50%;background:radial-gradient(ellipse,#e8f0ff 0%,rgba(160,190,255,.5) 40%,transparent 70%)}
.stage-bg .floor{position:absolute;left:0;right:0;bottom:0;height:24%;
  background:linear-gradient(180deg,#081544 0%,#040b28 60%,#030820 100%);border-top:1px solid rgba(90,130,255,.25)}
.stage-bg .floor::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 30% 60% at 20% 0%,rgba(255,170,90,.16),transparent 70%),radial-gradient(ellipse 30% 60% at 50% 0%,rgba(80,130,255,.22),transparent 70%),radial-gradient(ellipse 30% 60% at 80% 0%,rgba(255,170,90,.16),transparent 70%)}
.shard{position:absolute;width:110px;height:18px;
  background:linear-gradient(90deg,rgba(40,80,255,.0),rgba(70,120,255,.85) 40%,#cfe0ff 52%,rgba(60,110,255,.7) 70%,rgba(40,80,255,0));
  clip-path:polygon(0 50%,30% 0,100% 30%,70% 100%);filter:drop-shadow(0 0 8px rgba(70,120,255,.8))}

/* ---------- Metal-cam panel ---------- */
.pnl{--tip:36px;--gc:#2f5bff;position:relative;filter:drop-shadow(0 0 10px rgba(60,110,255,.45));transition:filter .3s,opacity .3s,transform .3s}
.pnl>.b,.pnl>.b>.s,.pnl>.b>.s>.i{clip-path:polygon(var(--t) 0,calc(100% - var(--t)) 0,100% 50%,calc(100% - var(--t)) 100%,var(--t) 100%,0 50%)}
.pnl>.b{--t:var(--tip);height:100%;padding:3px 9px;
  background:linear-gradient(180deg,#86a6ff 0%,#2448ff 30%,#0b27b8 55%,#3a66ff 80%,#9ab4ff 100%)}
.pnl>.b>.s{--t:calc(var(--tip) - 7px);height:100%;padding:3px;
  background:linear-gradient(180deg,#ffffff 0%,#a7afc0 22%,#eef1f7 48%,#7f889c 72%,#f4f6fb 100%)}
.pnl>.b>.s>.i{--t:calc(var(--tip) - 10px);height:100%;position:relative;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#0d2266 0%,#071650 50%,#050f3e 100%);color:#fff;padding:0 calc(var(--tip) + 10px)}
.pnl>.b>.s>.i::before,.pnl>.b>.s>.i::after{content:"";position:absolute;left:12%;right:12%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,200,120,.95),transparent)}
.pnl>.b>.s>.i::before{top:0}.pnl>.b>.s>.i::after{bottom:0}
/* altın: doğru cevap */
.pnl.gold{filter:drop-shadow(0 0 22px rgba(255,196,90,.55))}
.pnl.gold>.b>.s{background:linear-gradient(180deg,#fff6d6,#e6b85a 30%,#fff1c2 55%,#b9852f 80%,#ffe9a8)}
.pnl.gold>.b>.s>.i{color:#2b1a00;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 2px,rgba(0,0,0,.04) 2px 5px),linear-gradient(180deg,#f7dc8d 0%,#e2b553 45%,#c9963a 70%,#efcd7a 100%)}
.pnl.gold>.b>.s>.i::before,.pnl.gold>.b>.s>.i::after{background:linear-gradient(90deg,transparent,#fff8e0,transparent)}
/* grup rengiyle seçili */
.pnl.sel{filter:drop-shadow(0 0 18px var(--gc))}
.pnl.sel>.b>.s{background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--gc) 70%,#fff) 30%,#fff 50%,color-mix(in srgb,var(--gc) 80%,#000) 75%,#fff)}
.pnl.sel>.b>.s>.i{background:linear-gradient(180deg,color-mix(in srgb,var(--gc) 55%,#061243),color-mix(in srgb,var(--gc) 32%,#04103a))}
.pnl.sel>.b>.s>.i::before,.pnl.sel>.b>.s>.i::after{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gc) 50%,#fff),transparent)}
/* amblemler */
.pnl.silver{filter:drop-shadow(0 0 24px rgba(255,200,110,.45))}
.pnl.silver>.b>.s{background:linear-gradient(180deg,#fff6d6,#e6b85a 30%,#fff1c2 55%,#b9852f 80%,#ffe9a8)}
.pnl.silver>.b>.s>.i{background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,rgba(0,0,0,.05) 2px 5px),linear-gradient(180deg,#9aa2b3 0%,#5d6577 45%,#3e4555 60%,#8e96a8 100%)}
.pnl.red{filter:drop-shadow(0 0 24px rgba(255,120,90,.45))}
.pnl.red>.b>.s{background:linear-gradient(180deg,#fff6d6,#e6b85a 30%,#fff1c2 55%,#b9852f 80%,#ffe9a8)}
.pnl.red>.b>.s>.i{background:radial-gradient(ellipse at 50% 40%,#a3161c 0%,#6d0b12 60%,#3f050a 100%)}
/* pasif */
.pnl.off{opacity:.32;filter:grayscale(.85)}
.pnl.off .nm{text-decoration:line-through;text-decoration-thickness:3px}
/* yanlış */
.pnl.dim{opacity:.4;filter:grayscale(.6)}

.arrow{color:var(--gc);font-weight:700;opacity:.95}
.letter{color:var(--gold);font-weight:800}
.pnl.gold .letter{color:#2b1a00}
.divider{width:2px;align-self:stretch;margin:14px 0;background:linear-gradient(180deg,transparent,rgba(255,255,255,.35),transparent)}
.pnl.gold .divider{background:linear-gradient(180deg,transparent,rgba(60,35,0,.4),transparent)}

/* ---------- Metal yazı ---------- */
.metal{font-weight:900;font-style:italic;letter-spacing:-1px;
  background:linear-gradient(180deg,#ffffff 0%,#dfe4ee 35%,#8f98ab 52%,#f5f7fb 70%,#b8c0cf 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #1a3fe0) drop-shadow(0 6px 0 #0b1f8f) drop-shadow(0 0 22px rgba(255,170,80,.35))}
.goldtxt{background:linear-gradient(180deg,#fff3c4 0%,#f0cc6c 40%,#b8842c 62%,#f7df98 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #5c3a07) drop-shadow(0 0 16px rgba(255,190,80,.4))}
.label{letter-spacing:.35em;font-weight:700;color:var(--gold);text-transform:uppercase}

/* ---------- Logo ---------- */
.logo{display:block;-webkit-mask-image:radial-gradient(ellipse 62% 66% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 62% 66% at 50% 50%,#000 60%,transparent 100%)}

/* ---------- Geri sayım halkası ---------- */
.ring{position:relative;display:flex;align-items:center;justify-content:center}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring .num{font-weight:800;font-variant-numeric:tabular-nums;position:relative}

@keyframes rise{from{opacity:0;transform:translateY(30px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.04);opacity:1}100%{transform:scale(1)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.rise{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.pop{animation:pop .5s cubic-bezier(.2,.8,.2,1) both}
.fade{animation:fade .5s ease both}