/* ==========================================================================
   SEMANTİK — Özgün, mobil öncelikli arayüz
   Tema değişkenleri + aurora arka plan + cam kartlar + termometre + liste
   ========================================================================== */

/* ---- Tema değişkenleri ---- */
:root{
  --cold:#3f6dff; --warm:#e6b23c; --hot:#ff4d63;
  --brand: linear-gradient(120deg,#6c8cff 0%, #e0b13a 55%, #ff5a6e 100%);
  --radius:20px; --radius-sm:13px;
  --shadow:0 18px 50px -20px rgba(0,0,0,.55);
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:600px;
}
[data-theme="dark"]{
  --bg0:#080b16; --bg1:#0d1220;
  --ink:#eaf0ff; --dim:#93a1c0; --faint:#5f6d8c;
  --card:rgba(255,255,255,.045); --card-strong:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16);
  --input:rgba(4,7,16,.55); --track:rgba(255,255,255,.06);
  --glass-blur:16px;
}
[data-theme="light"]{
  --bg0:#eef1fb; --bg1:#e5eaf7;
  --ink:#101a30; --dim:#54617e; --faint:#8a97b3;
  --card:rgba(255,255,255,.72); --card-strong:rgba(255,255,255,.9);
  --line:rgba(20,32,58,.1); --line-strong:rgba(20,32,58,.18);
  --input:rgba(255,255,255,.85); --track:rgba(20,32,58,.08);
  --glass-blur:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--bg0);
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  transition:background .5s var(--ease), color .3s var(--ease);
}

/* ---- Aurora arka plan (rengârenk, yavaş renk dönüşümlü) ---- */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;background:
  radial-gradient(120% 100% at 50% -10%, var(--bg1), var(--bg0) 60%);
  animation:hueSpin 26s linear infinite;}
.aurora span{position:absolute;display:block;border-radius:50%;filter:blur(60px);opacity:.55;
  animation:float 16s var(--ease) infinite alternate;}
.aurora span:nth-child(1){width:46vmax;height:46vmax;left:-12vmax;top:-16vmax;background:#536dfe;}
.aurora span:nth-child(2){width:38vmax;height:38vmax;right:-14vmax;top:6vmax;background:#ff4d8f;animation-delay:-6s;opacity:.4;}
.aurora span:nth-child(3){width:40vmax;height:40vmax;left:20vmax;bottom:-22vmax;background:#ffb300;animation-delay:-11s;opacity:.32;}
[data-theme="light"] .aurora span{opacity:.4}
@keyframes float{to{transform:translate(4vmax,3vmax) scale(1.12)}}
@keyframes hueSpin{to{filter:hue-rotate(360deg)}}

/* ---- Logo ---- */
.brand{display:block;text-align:center;text-decoration:none;margin-top:2px}
.brand-logo{width:min(64vw,250px);height:auto;display:inline-block;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.45));
  animation:logoFloat 4.5s ease-in-out infinite}
@keyframes logoFloat{
  0%,100%{transform:translateY(0) rotate(-.7deg)}
  50%{transform:translateY(-7px) rotate(.7deg)}
}

/* ---- Yerleşim ---- */
.app{width:100%;max-width:var(--maxw);margin:0 auto;padding:14px 14px 40px;}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  margin-bottom:14px;
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  box-shadow:var(--shadow);
}

/* ---- Üst bar (yalnızca araçlar; logo altta ortalanır) ---- */
.topbar{display:flex;align-items:center;justify-content:center;padding:6px 2px 2px;}
.tools{display:flex;gap:8px}
.icon-btn{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-size:15px;cursor:pointer;
  display:grid;place-items:center;transition:transform .18s var(--ease),background .2s,box-shadow .2s}
.icon-btn:hover{background:var(--card-strong);transform:translateY(-2px) rotate(-4deg);
  box-shadow:0 6px 16px -6px rgba(108,140,255,.7)}
.icon-btn:nth-child(2):hover{box-shadow:0 6px 16px -6px rgba(255,90,158,.7)}
.icon-btn:nth-child(3):hover{box-shadow:0 6px 16px -6px rgba(62,230,168,.7)}
.icon-btn:nth-child(4):hover{box-shadow:0 6px 16px -6px rgba(255,179,0,.7)}
.icon-btn:active{transform:scale(.9)}

.tagline{color:var(--dim);font-size:13.5px;line-height:1.5;margin:12px 4px 16px;text-align:center}
.tagline b{color:var(--ink);font-weight:600}

/* ---- Gökkuşağı çerçeveli kartlar (imza kartlar) ---- */
.gauge-card, .win-card{
  border:2px solid transparent;
  background:
    linear-gradient(var(--bg1),var(--bg1)) padding-box,
    linear-gradient(120deg,#536dfe,#b06bff,#ff4d8f,#ffb300,#3ee6a8,#536dfe) border-box;
  background-size:100% 100%, 320% 100%;
  animation:borderShift 8s linear infinite;
}
@keyframes borderShift{to{background-position:0 0, 320% 0}}
.input-card{
  border:2px solid transparent;
  background:
    linear-gradient(var(--bg1),var(--bg1)) padding-box,
    linear-gradient(120deg,#536dfe,#b06bff) border-box;
}

/* ---- Isı göstergesi ---- */
.gauge-card{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:22px}
.gauge{position:relative;width:min(64vw,240px);aspect-ratio:1}
.gauge::before{content:"";position:absolute;inset:-14px;border-radius:50%;z-index:-1;
  background:conic-gradient(#536dfe,#ff4d8f,#ffb300,#3ee6a8,#536dfe);
  filter:blur(28px);opacity:.35;animation:spinSlow 10s linear infinite}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.gauge-svg{width:100%;height:100%;transform:rotate(-90deg)}
.g-track{fill:none;stroke:var(--track);stroke-width:15}
.g-fill{fill:none;stroke:url(#heat);stroke-width:15;stroke-linecap:round;
  stroke-dasharray:578;stroke-dashoffset:578;
  transition:stroke-dashoffset .9s var(--ease);
  filter:drop-shadow(0 0 8px rgba(255,120,90,.35))}
.gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.g-emoji{font-size:30px;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.3))}
.g-value{font-family:"Sora",sans-serif;font-weight:800;font-size:46px;line-height:1;display:flex;align-items:flex-start}
.g-value i{font-size:20px;font-style:normal;color:var(--dim);margin-top:4px}
.g-label{font-size:12.5px;color:var(--dim);letter-spacing:.3px;max-width:150px;text-align:center}

/* ---- İstatistik satırı ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);width:100%;gap:6px;text-align:center;
  border-top:1px solid var(--line);padding-top:14px}
.stats>div{display:flex;flex-direction:column;gap:2px}
.stats b{font-family:"Sora",sans-serif;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.stats span{font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.6px}
.stats>div:nth-child(1) b{color:#7c95ff}
.stats>div:nth-child(2) b{color:#3ee6a8}
.stats>div:nth-child(3) b{color:#ffb84d}
.stats>div:nth-child(4) b{color:#ff5a9e}

/* ---- Mod sekmeleri (Rekabet / Alıştırma) ---- */
.mode-tabs{display:flex;gap:6px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:5px;margin-bottom:12px;backdrop-filter:blur(var(--glass-blur))}
.mtab{flex:1;border:0;border-radius:10px;padding:10px 8px;font-size:13.5px;font-weight:700;cursor:pointer;
  background:transparent;color:var(--dim);transition:.2s;font-family:"Sora",sans-serif}
.mtab:hover{color:var(--ink)}
.mtab.active{color:#fff;background:linear-gradient(120deg,#6c8cff,#8a6bff);box-shadow:0 6px 16px -8px rgba(108,140,255,.9)}
.mtab.active[data-mode="practice"]{background:linear-gradient(120deg,#e0b13a,#e0763a);box-shadow:0 6px 16px -8px rgba(224,150,58,.9)}

.practice-note[hidden]{display:none}
.practice-note{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(224,177,58,.16),rgba(224,118,58,.12));
  border:1px dashed var(--warm);border-radius:var(--radius-sm);
  padding:9px 14px;margin-bottom:12px;font-size:12.5px;color:var(--dim);text-align:center}
.practice-note b{color:var(--ink)}
.practice-note button{border:0;border-radius:9px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer;
  background:linear-gradient(120deg,#e0b13a,#e0763a);color:#2a1900}
.practice-note button:active{transform:scale(.95)}

.archive-note{background:linear-gradient(120deg,rgba(108,140,255,.16),rgba(138,107,255,.12));
  border-color:#6c8cff}
.archive-note button{background:linear-gradient(120deg,#6c8cff,#8a6bff);color:#fff}

/* ---- Arşiv listesi ---- */
.arc-list{list-style:none;display:flex;flex-direction:column;gap:6px;max-height:55dvh;overflow:auto}
.arc-day{width:100%;display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:11px;padding:11px 13px;
  color:var(--ink);font-size:14px;cursor:pointer;text-align:left;transition:.15s}
.arc-day:hover{background:var(--card-strong);border-color:var(--line-strong)}
.arc-day b{font-family:"Sora",sans-serif}
.arc-day .meta{color:var(--dim);font-size:12px}
.arc-list .empty{color:var(--faint);text-align:center;padding:18px}

/* ---- İstatistik ---- */
.st-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;text-align:center;margin-bottom:16px}
.st-grid b{font-family:"Sora",sans-serif;font-size:20px;display:block}
.st-grid span{font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.5px}
.st-h{font-size:13px;color:var(--dim);margin:10px 0 8px;font-weight:600}
.st-row{display:grid;grid-template-columns:52px 1fr 30px;gap:9px;align-items:center;
  font-size:12.5px;color:var(--dim);margin-bottom:6px}
.st-row b{text-align:right;color:var(--ink)}
.st-bar{height:10px;background:var(--track);border-radius:5px;overflow:hidden}
.st-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#6c8cff,#e0b13a)}

/* ---- Giriş ---- */
.input-card{position:sticky;top:8px;z-index:20}
#guessForm{display:flex;gap:9px}
#guessInput{flex:1;min-width:0;background:var(--input);border:1.5px solid var(--line);
  border-radius:var(--radius-sm);padding:14px 15px;color:var(--ink);font-size:16px;font-weight:500;
  transition:border-color .2s,box-shadow .2s}
#guessInput::placeholder{color:var(--faint)}
#guessInput:focus{outline:none;border-color:#6c8cff;box-shadow:0 0 0 4px rgba(108,140,255,.18)}
#guessBtn{border:0;border-radius:var(--radius-sm);padding:0 20px;font-weight:700;font-size:15px;
  color:#fff;cursor:pointer;
  background:linear-gradient(120deg,#536dfe,#b06bff,#ff4d8f,#536dfe);
  background-size:280% 100%;animation:btnShift 5s ease infinite;
  box-shadow:0 8px 20px -8px rgba(124,109,255,.9);transition:transform .15s var(--ease),filter .2s}
@keyframes btnShift{0%,100%{background-position:0 0}50%{background-position:100% 0}}
#guessBtn:hover{filter:brightness(1.1)}
#guessBtn:active{transform:scale(.94)}
.msg{min-height:20px;font-size:13.5px;color:var(--dim);text-align:center;margin-top:11px;transition:color .2s}
.msg.err{color:var(--hot)}
.secondary{display:flex;gap:9px;justify-content:center;margin-top:12px}
.ghost{background:transparent;border:1px solid var(--line);color:var(--dim);border-radius:11px;
  padding:9px 15px;font-size:13.5px;font-weight:600;cursor:pointer;transition:.2s}
.ghost:hover{background:var(--card-strong);color:var(--ink);border-color:var(--line-strong)}
.ghost:active{transform:scale(.96)}

/* ---- Tahmin listesi ---- */
.list-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.list-head h2{font-family:"Sora",sans-serif;font-size:15px;font-weight:700}
.sorters{display:flex;gap:6px}
.chip{background:transparent;border:1px solid var(--line);color:var(--dim);border-radius:20px;
  padding:5px 11px;font-size:12px;font-weight:600;cursor:pointer;transition:.2s}
.chip.active{background:var(--card-strong);color:var(--ink);border-color:var(--line-strong)}

.guess-list{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:20px minmax(0,1fr) 46px 50px 66px;gap:8px;align-items:center;
  padding:9px 2px;border-bottom:1px solid var(--line);font-size:14.5px;
  transition:transform .18s var(--ease),background .2s}
.row:hover{transform:translateX(3px);background:rgba(124,140,255,.05)}
.guess-list .row:last-child{border-bottom:0}
.row .num{color:var(--faint);font-size:11px;font-variant-numeric:tabular-nums;text-align:right}
.row .word{font-weight:600;overflow:hidden;overflow-wrap:break-word;line-height:1.2}
.row .word .badge{font-size:10px;color:var(--faint);margin-left:6px;font-weight:500;
  display:inline-block;animation:wiggle 2.6s ease-in-out infinite}
@keyframes wiggle{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-8deg)}95%{transform:rotate(8deg)}}
.row .bar{height:9px;border-radius:5px;background:var(--track);overflow:hidden}
.row .bar i{display:block;height:100%;border-radius:5px;transition:width .6s var(--ease)}
.row .pct{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;font-family:"Sora",sans-serif}
/* Yakınlık puanı: değer (960/1000) + mini progress çubuğu */
.row .rk{display:flex;flex-direction:column;align-items:flex-end;gap:3px;
  font-variant-numeric:tabular-nums;line-height:1}
.row .rk .rkv b{color:var(--ink);font-size:11.5px;font-weight:700}
.row .rk .rkv i{font-style:normal;color:var(--faint);font-size:9.5px}
.rkbar{width:58px;height:5px;border-radius:3px;background:var(--track);overflow:hidden}
.rkbar>span{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#3ee6a8,#ffb84d,#ff5a6e);
  background-size:120px 100%;transition:width .6s var(--ease)}
.row.hot .pct{text-shadow:0 0 14px rgba(255,77,99,.5)}
.row.hot .bar i{animation:burn 1.4s ease-in-out infinite alternate;
  box-shadow:0 0 10px rgba(255,110,40,.75), 0 0 22px rgba(255,60,20,.35)}
@keyframes burn{
  from{filter:brightness(1) saturate(1.15)}
  to{filter:brightness(1.4) saturate(1.7)}
}
.row.new{animation:pop .45s var(--ease)}
@keyframes pop{0%{opacity:0;transform:translateY(-6px) scale(.98)}100%{opacity:1;transform:none}}

/* sabit son tahmin */
#pinWrap:not(:empty){margin-bottom:14px}
.pin{background:var(--card-strong);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:6px 12px;box-shadow:var(--shadow);backdrop-filter:blur(var(--glass-blur))}
.pin .row{border-bottom:0;padding:6px 4px}
.pin .num{color:#6c8cff;font-size:13px}

/* ---- Sonuç kartı ---- */
.win-card{text-align:center;border-color:var(--line-strong)}
.win-emoji{font-size:44px;margin-bottom:4px;animation:pop .5s var(--ease)}
.win-card h2{font-family:"Sora",sans-serif;font-size:24px;font-weight:800;margin-bottom:6px}
.win-card h2 .secret{background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.win-sub{color:var(--dim);font-size:14px;margin-bottom:14px}
.win-actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.win-actions button{border:0;border-radius:12px;padding:11px 18px;font-weight:700;font-size:14px;cursor:pointer;
  background:linear-gradient(120deg,#3ecf8e,#35b6d6);color:#04231a;transition:transform .15s var(--ease),filter .2s}
.win-actions button:hover{filter:brightness(1.06)}.win-actions button:active{transform:scale(.96)}
.win-actions .ghost{background:transparent;color:var(--dim)}

/* isim kutusu */
.name-box{background:var(--input);border:1px dashed var(--line-strong);border-radius:var(--radius-sm);
  padding:14px;margin:6px 0 14px;animation:pop .4s var(--ease)}
.name-box label{display:block;font-size:13px;color:var(--ink);font-weight:600;margin-bottom:9px}
.name-form{display:flex;gap:8px}
#nameInput{flex:1;min-width:0;background:var(--card);border:1.5px solid var(--line);border-radius:11px;
  padding:11px 13px;color:var(--ink);font-size:15px}
#nameInput:focus{outline:none;border-color:#3ecf8e;box-shadow:0 0 0 4px rgba(62,207,142,.16)}
#nameBtn{border:0;border-radius:11px;padding:0 18px;font-weight:700;color:#04231a;cursor:pointer;
  background:linear-gradient(120deg,#3ecf8e,#35b6d6)}
.name-msg{font-size:12.5px;color:var(--dim);margin-top:9px;min-height:16px}
.name-msg.ok{color:var(--ok,#3ecf8e)}.name-msg.err{color:var(--hot)}

.nearby-list{margin-top:14px}
.nearby-list:empty{display:none}

/* ---- Lider tablosu ---- */
.board-count{font-size:12px;color:var(--dim)}
.board-list{list-style:none;display:flex;flex-direction:column;gap:2px}
.board-list li{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;
  padding:9px 6px;border-bottom:1px solid var(--line);font-size:14.5px}
.board-list li:last-child{border-bottom:0}
.board-list .pos{font-family:"Sora",sans-serif;font-weight:700;color:var(--dim);text-align:center}
.board-list li.top1 .pos{color:#ffd35a}.board-list li.top2 .pos{color:#cdd6ea}.board-list li.top3 .pos{color:#e29a5a}
.board-list .who{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-list .meta{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.board-list .empty{color:var(--faint);text-align:center;padding:16px;grid-column:1/-1}

.foot{text-align:center;color:var(--faint);font-size:11.5px;margin-top:6px;line-height:1.6;
  display:flex;flex-direction:column;align-items:center;gap:8px}
.foot span{color:var(--dim);font-weight:600}
.powered-by{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--faint);
  font-size:11px;opacity:.85;transition:opacity .2s}
.powered-by:hover{opacity:1}
.powered-by img{height:15px;width:auto;display:block;object-fit:contain}

/* ---- Modallar ---- */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px;
  background:rgba(4,7,16,.6);backdrop-filter:blur(6px);animation:fade .25s var(--ease)}
.modal[hidden]{display:none}
.modal-box{position:relative;width:100%;max-width:460px;max-height:86dvh;overflow:auto;
  background:var(--bg1);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:24px 20px;box-shadow:var(--shadow);animation:rise .3s var(--ease)}
.modal-box h2{font-family:"Sora",sans-serif;font-size:20px;margin-bottom:12px}
.modal-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:9px;
  border:1px solid var(--line);background:var(--card);color:var(--dim);cursor:pointer;font-size:14px}
.how{list-style:none;display:flex;flex-direction:column;gap:11px}
.how li{font-size:14px;line-height:1.55;color:var(--dim)}
.how li b{color:var(--ink)}
.how-note{margin-top:16px;font-size:12.5px;color:var(--faint);line-height:1.6;
  border-top:1px solid var(--line);padding-top:14px}
.board-sub{color:var(--dim);font-size:13px;margin-bottom:12px}

@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}

/* ---- Toast ---- */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:var(--card-strong);border:1px solid var(--line-strong);color:var(--ink);
  padding:11px 18px;border-radius:14px;font-size:13.5px;z-index:200;box-shadow:var(--shadow);
  backdrop-filter:blur(var(--glass-blur));animation:rise .3s var(--ease);max-width:90vw;text-align:center}
.toast[hidden]{display:none}

/* ============================ ⚔️ DUELLO ============================ */
.mtab.active[data-mode="duel"]{background:linear-gradient(120deg,#ff4d8f,#b06bff);
  box-shadow:0 6px 16px -8px rgba(255,77,143,.9)}
.duel-card{border:2px solid transparent;background:
  linear-gradient(var(--bg1),var(--bg1)) padding-box,
  linear-gradient(120deg,#ff4d8f,#b06bff) border-box}

.duel-nick{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.duel-nick input{flex:1;min-width:0;background:var(--input);border:1.5px solid var(--line);
  border-radius:11px;padding:12px 13px;color:var(--ink);font-size:15px;font-weight:600}
.duel-nick input:focus{outline:none;border-color:#ff4d8f;box-shadow:0 0 0 4px rgba(255,77,143,.16)}
.duel-tag{color:var(--faint);font-size:13px;font-variant-numeric:tabular-nums}

.duel-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.duel-make{display:flex;gap:8px;align-items:center}
.duel-make label{color:var(--dim);font-size:12px;display:flex;align-items:center;gap:6px}
.duel-make select{background:var(--input);border:1px solid var(--line);color:var(--ink);
  border-radius:9px;padding:9px 8px;font-size:14px}
.duel-make button, .duel-join button{border:0;border-radius:11px;padding:11px 16px;font-weight:700;
  font-size:14px;cursor:pointer;color:#fff;background:linear-gradient(120deg,#ff4d8f,#b06bff)}
.duel-make button{flex:1}
.duel-join{display:flex;gap:8px}
.duel-join input{flex:1;min-width:0;background:var(--input);border:1.5px solid var(--line);
  border-radius:11px;padding:11px 13px;color:var(--ink);font-size:16px;font-weight:800;
  letter-spacing:4px;text-transform:uppercase;text-align:center;font-family:"Sora",sans-serif}

/* kod çubuğu */
.duel-codebar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.code-pill{display:flex;align-items:center;gap:8px;background:var(--input);
  border:1px dashed #ff4d8f;border-radius:11px;padding:8px 14px}
.code-pill span{font-size:10px;color:var(--faint);letter-spacing:1px}
.code-pill b{font-family:"Sora",sans-serif;font-size:20px;letter-spacing:5px;
  background:linear-gradient(120deg,#ff4d8f,#ffb84d);-webkit-background-clip:text;background-clip:text;color:transparent}
.code-acts{display:flex;gap:6px}
.ghost.mini{padding:7px 10px;font-size:12px}
.duel-roundinfo{color:var(--dim);font-size:12.5px;margin-bottom:10px}

/* üye listesi */
.duel-members{list-style:none;display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.duel-members li{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:11px;padding:9px 12px;font-size:14px}
.duel-members .who{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duel-members .who .tag{color:var(--faint);font-size:11px;font-weight:400}
.duel-members .who .crown{margin-right:4px}
.duel-members .st{font-size:11.5px;color:var(--dim)}
.duel-members .st.ok{color:#3ee6a8;font-weight:700}
.duel-members .off{opacity:.55}
.kickbtn{border:0;background:transparent;color:var(--faint);cursor:pointer;font-size:14px;padding:2px 6px}
.kickbtn:hover{color:#ff5a6e}

.duel-room-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
#btnReady{flex:1;border:0;border-radius:12px;padding:12px;font-weight:800;font-size:15px;cursor:pointer;
  color:#04231a;background:linear-gradient(120deg,#3ee6a8,#35b6d6)}
#btnReady.on{animation:readyPulse 1.4s ease-in-out infinite;filter:saturate(1.2)}
@keyframes readyPulse{0%,100%{box-shadow:0 0 0 0 rgba(62,230,168,.55)}50%{box-shadow:0 0 0 10px rgba(62,230,168,0)}}
#btnStartDuel{flex:1;border:0;border-radius:12px;padding:12px;font-weight:800;font-size:15px;cursor:pointer;
  color:#fff;background:linear-gradient(120deg,#ff4d8f,#ffb84d)}
#btnStartDuel:disabled{opacity:.45;cursor:not-allowed}

/* sohbet */
.chatbox{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--input);overflow:hidden}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--line)}
.chat-head h3{font-size:13px;font-weight:700;color:var(--dim)}
.chat-log{height:150px;overflow-y:auto;padding:8px 10px;display:flex;flex-direction:column;gap:5px;font-size:13px}
.chat-log.tall{height:220px}
.cmsg{color:var(--ink);line-height:1.4;animation:pop .25s var(--ease)}
.cmsg b{color:#7c95ff;font-weight:700;font-size:12.5px}
.cmsg b .tag{color:var(--faint);font-weight:400;font-size:10.5px}
.cmsg.own b{color:#3ee6a8}
.cmsg .cblock{border:0;background:transparent;color:var(--faint);cursor:pointer;font-size:10px;padding:0 3px;opacity:.6}
.cmsg .cblock:hover{opacity:1}
.cmsg .joinbtn{border:0;border-radius:7px;padding:3px 9px;margin-left:6px;font-size:11px;font-weight:700;
  cursor:pointer;color:#fff;background:linear-gradient(120deg,#ff4d8f,#b06bff)}
.csys{color:var(--faint);font-size:11.5px;font-style:italic}
.chat-form{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line)}
.chat-form input{flex:1;min-width:0;background:var(--card);border:1px solid var(--line);
  border-radius:9px;padding:8px 11px;color:var(--ink);font-size:13.5px}
.chat-form button{border:0;border-radius:9px;padding:0 14px;font-size:14px;cursor:pointer;
  color:#fff;background:linear-gradient(120deg,#536dfe,#b06bff)}
.chat-quick{display:flex;gap:6px;padding:6px 8px 0}
.chat-quick button{border:1px solid var(--line);background:var(--card);border-radius:9px;
  padding:4px 10px;font-size:13px;cursor:pointer;color:var(--ink)}
.chat-quick button:active{transform:scale(.9)}
.chat-muted{color:var(--faint);text-align:center;padding:16px;font-size:12px}

/* yarış çipi */
.duel-chip{position:sticky;top:78px;z-index:25;width:100%;display:flex;align-items:center;gap:8px;
  justify-content:center;border:2px solid transparent;border-radius:14px;padding:10px 14px;margin-bottom:12px;
  font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;
  background:linear-gradient(var(--bg1),var(--bg1)) padding-box,
             linear-gradient(120deg,#ff4d8f,#b06bff,#ffb84d) border-box;
  box-shadow:var(--shadow)}
.duel-chip b{font-family:"Sora",sans-serif;color:#ffb84d}
.duel-chip .chip-open{margin-left:auto;color:var(--dim);font-size:11.5px;font-weight:600}

/* bottom-sheet */
.sheet{position:fixed;inset:0;z-index:120;background:rgba(4,7,16,.55);backdrop-filter:blur(4px)}
.sheet[hidden]{display:none}
.sheet-box{position:absolute;left:0;right:0;bottom:0;max-height:72dvh;overflow:auto;
  background:var(--bg1);border-radius:22px 22px 0 0;border:1px solid var(--line-strong);border-bottom:0;
  padding:8px 16px calc(16px + env(safe-area-inset-bottom));animation:sheetUp .28s var(--ease)}
@keyframes sheetUp{from{transform:translateY(40%);opacity:.4}}
.sheet-grip{display:block;width:52px;height:5px;border-radius:3px;background:var(--line-strong);
  margin:6px auto 10px;border:0;cursor:pointer}
.sheet-tabs{display:flex;gap:6px;margin-bottom:10px}
.stab{flex:1;border:1px solid var(--line);background:transparent;color:var(--dim);border-radius:11px;
  padding:9px;font-size:13px;font-weight:700;cursor:pointer}
.stab.active{background:var(--card-strong);color:var(--ink);border-color:var(--line-strong)}
.duel-rank-row{display:grid;grid-template-columns:26px 1fr 70px 64px;gap:9px;align-items:center;
  padding:9px 4px;border-bottom:1px solid var(--line);font-size:14px}
.duel-rank-row:last-child{border-bottom:0}
.duel-rank-row.me{background:rgba(124,140,255,.08);border-radius:9px}
.duel-rank-row .pos{font-family:"Sora",sans-serif;font-weight:800;color:var(--dim);text-align:center}
.duel-rank-row .who{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duel-rank-row .who .tag{color:var(--faint);font-size:10.5px;font-weight:400}
.duel-rank-row .meta{font-size:11px;color:var(--dim);text-align:right;font-variant-numeric:tabular-nums}

/* geri sayım */
.count-overlay{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:rgba(4,7,16,.6);backdrop-filter:blur(5px)}
.count-overlay[hidden]{display:none}
.count-overlay span{font-family:"Sora",sans-serif;font-weight:800;font-size:110px;
  background:linear-gradient(120deg,#ff4d8f,#ffb84d);-webkit-background-clip:text;background-clip:text;
  color:transparent;animation:countPop .85s var(--ease) infinite}
@keyframes countPop{0%{transform:scale(.4);opacity:0}25%{transform:scale(1.15);opacity:1}80%{transform:scale(1);opacity:1}100%{opacity:0}}

/* ---- Masaüstü iyileştirmeleri ---- */
@media(min-width:560px){
  .app{padding-top:20px}
  .brand-text{font-size:22px}
  .g-value{font-size:52px}
}

/* ---- Erişilebilirlik: azaltılmış hareket ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .aurora span{animation:none}
}