:root{
  --bg:#0a0e1a;
  --bg2:#111729;
  --panel:#151d33;
  --panel2:#1b2440;
  --line:#26314f;
  --txt:#e8ecf7;
  --dim:#8c97b5;
  --pl:#37003c;
  --pink:#ff2d78;
  --cyan:#00e0c6;
  --lime:#c7ff4a;
  --amber:#ffc043;
  --red:#ff4d5e;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  background:
    radial-gradient(900px 500px at 15% -10%, #2a0b3d 0%, transparent 60%),
    radial-gradient(900px 500px at 95% 0%, #062c3a 0%, transparent 55%),
    var(--bg);
  color:var(--txt);
  min-height:100vh;
  padding:18px;
}

/* ---------- TOPBAR ---------- */
.topbar{
  max-width:1240px;margin:0 auto 18px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(90deg,var(--pl),#1d0a2e 70%);
  border:1px solid var(--line);border-radius:16px;padding:14px 20px;
}
.brand{display:flex;align-items:center;gap:14px}
.ball{font-size:34px;filter:drop-shadow(0 0 10px rgba(255,45,120,.5))}
.brand h1{font-size:24px;letter-spacing:2px;font-weight:800}
.brand p{font-size:12px;color:#c9a9d6;letter-spacing:.5px}

.scoreboard{display:flex;gap:10px}
.stat{
  background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:12px;
  padding:8px 16px;text-align:center;min-width:78px;
}
.stat-val{display:block;font-size:22px;font-weight:800;color:var(--lime)}
.stat-lbl{font-size:10px;color:var(--dim);letter-spacing:1.5px;text-transform:uppercase}

/* ---------- LAYOUT ---------- */
.layout{
  max-width:1240px;margin:0 auto;
  display:grid;grid-template-columns:minmax(340px,470px) 1fr;gap:18px;align-items:start;
}
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;
}

/* ---------- ÇARK ---------- */
.wheel-panel{display:flex;flex-direction:column;align-items:center;gap:14px;position:sticky;top:18px}
.stage-label{
  font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);
  font-weight:700;text-align:center;min-height:18px;
}
.wheel-wrap{position:relative;width:100%;max-width:420px;aspect-ratio:1}
#wheel{width:100%;height:100%;display:block;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.55));}
.pointer{
  position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:0;height:0;z-index:3;
  border-left:15px solid transparent;border-right:15px solid transparent;
  border-top:30px solid var(--pink);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));
}
.wheel-hub{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:24%;height:24%;border-radius:50%;
  background:linear-gradient(160deg,#232d4d,#0e1425);
  border:3px solid var(--pink);
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(14px,4vw,22px);font-weight:800;color:var(--txt);
  text-align:center;padding:6px;line-height:1.1;z-index:2;
}

/* ---------- BUTONLAR ---------- */
.btn{
  font-family:inherit;font-weight:800;letter-spacing:1.2px;cursor:pointer;
  border-radius:12px;border:1px solid transparent;transition:.15s;
}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn-primary{
  background:linear-gradient(135deg,var(--pink),#b4005c);color:#fff;
  padding:14px 26px;font-size:15px;width:100%;max-width:420px;
  box-shadow:0 6px 18px rgba(255,45,120,.28);
}
.btn-primary:hover:not(:disabled){transform:translateY(-2px)}
.btn-ghost{
  background:transparent;border-color:var(--line);color:var(--dim);
  padding:8px 18px;font-size:12px;
}
.btn-ghost:hover:not(:disabled){color:var(--txt);border-color:var(--pink)}
.btn-mini{
  background:var(--panel2);border-color:var(--line);color:var(--dim);
  padding:7px 12px;font-size:11px;
}
.btn-mini:hover:not(:disabled){color:var(--amber);border-color:var(--amber)}

/* ---------- İPUÇLARI ---------- */
.clue-panel{display:flex;flex-direction:column;gap:14px}
.clue-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.clue{
  background:var(--panel2);border:1px solid var(--line);border-radius:14px;
  padding:12px;text-align:center;transition:.25s;
}
.clue.locked{opacity:.35}
.clue.reveal{
  border-color:var(--cyan);box-shadow:0 0 0 1px rgba(0,224,198,.25),0 8px 20px rgba(0,224,198,.12);
  animation:pop .45s ease;
}
@keyframes pop{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.clue-title{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.clue-value{font-size:20px;font-weight:800;color:var(--lime);line-height:1.2}

/* ---------- KARİYER ---------- */
.career-box{
  background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:14px;transition:.25s;
}
.career-box.locked{opacity:.4}
.career-box.reveal{border-color:var(--amber);animation:pop .5s ease}
.career-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.career-head h2{font-size:15px;letter-spacing:1.5px;text-transform:uppercase}
.career-note{font-size:10px;color:var(--dim)}
.career-scroll{max-height:330px;overflow-y:auto}
.career-table{width:100%;border-collapse:collapse;font-size:13px}
.career-table th{
  position:sticky;top:0;background:var(--panel2);
  text-align:left;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim);
  padding:8px 10px;border-bottom:1px solid var(--line);
}
.career-table td{padding:9px 10px;border-bottom:1px solid rgba(38,49,79,.5)}
.career-table th.num,.career-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.career-table tbody tr:hover{background:rgba(255,255,255,.03)}
.career-table td.club{font-weight:700}
.career-table .empty td{text-align:center;color:var(--dim);font-style:italic;padding:26px}

/* ---------- TAHMİN ---------- */
.guess-box{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:14px}
.timer-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.timer-bar{flex:1;height:10px;background:#0c1226;border-radius:6px;overflow:hidden}
.timer-fill{height:100%;width:100%;background:linear-gradient(90deg,var(--cyan),var(--lime));border-radius:6px}
.timer-fill.warn{background:linear-gradient(90deg,var(--amber),var(--red))}
.timer-num{font-size:22px;font-weight:800;min-width:38px;text-align:right;font-variant-numeric:tabular-nums}
.timer-num.warn{color:var(--red)}

.guess-form{display:flex;gap:10px}
.guess-form input{
  flex:1;background:#0c1226;border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;color:var(--txt);font-size:16px;font-family:inherit;outline:none;
}
.guess-form input:focus{border-color:var(--pink)}
.guess-form .btn-primary{width:auto;max-width:none;padding:14px 22px;font-size:13px}
.guess-tools{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

.feedback{margin-top:12px;font-size:14px;line-height:1.55;min-height:22px}
.feedback.ok{color:var(--lime);font-weight:700}
.feedback.no{color:var(--red);font-weight:700}
.feedback.info{color:var(--amber)}
.feedback .answer{color:var(--txt);font-weight:800}

/* ---------- RESPONSIVE ---------- */
@media (max-width:940px){
  .layout{grid-template-columns:1fr}
  .wheel-panel{position:static}
  .clue-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  body{padding:10px}
  .brand h1{font-size:18px}
  .stat{min-width:64px;padding:6px 10px}
  .guess-form{flex-direction:column}
  .guess-form .btn-primary{width:100%}
}