/* Üslü Sayı Macerası — görünüm
   Palet: lacivert zemin, mavi/mor degrade, turuncu-altın vurgu, krem metin (site renkleriyle uyumlu) */
:root{
  --navy:#0b1530; --navy2:#122252; --blue:#2f7bff; --violet:#7c5cff; --orange:#ff9f1c; --gold:#ffc83d;
  --cream:#fff4dc; --ink:#eaf0ff; --muted:#9db0e0; --ok:#2ed47a; --bad:#ff5a6a;
  --glass:rgba(255,255,255,.07); --glass-b:rgba(255,255,255,.16);
  --radius:20px; --shadow:0 12px 40px rgba(0,0,0,.35);
  --math:"Cambria Math","STIX Two Math","Latin Modern Math","Times New Roman",Georgia,serif;
  --ui:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--navy);color:var(--ink);font-family:var(--ui)}
body{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
button{font-family:inherit;color:inherit}

/* Ana oyun alanı */
#app{position:relative;flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;
  background:
   radial-gradient(900px 500px at 10% -10%,rgba(124,92,255,.35),transparent 60%),
   radial-gradient(800px 520px at 100% 0%,rgba(47,123,255,.32),transparent 60%),
   radial-gradient(700px 500px at 50% 120%,rgba(255,159,28,.18),transparent 60%),
   linear-gradient(180deg,var(--navy),#0a1233)}
.screen{display:none;flex:1;min-height:0;flex-direction:column;overflow-y:auto;padding:14px clamp(12px,3vw,40px) 12px;animation:fadeIn .35s ease}
.screen.active{display:flex}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Ses düğmesi: sağ üst, her zaman erişilebilir */
.icon-btn{border:1px solid var(--glass-b);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  width:48px;height:48px;border-radius:14px;font-size:20px;cursor:pointer;display:grid;place-items:center;transition:transform .15s,background .15s}
.icon-btn:hover{background:rgba(255,255,255,.14)}
.icon-btn:active{transform:scale(.94)}
#muteBtn{position:absolute;top:12px;right:12px;z-index:30}

/* Butonlar */
.btn{border:0;border-radius:16px;padding:14px 26px;font-size:clamp(16px,2.2vw,20px);font-weight:700;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s,box-shadow .15s,filter .15s;min-height:52px}
.btn:active{transform:scale(.96)}
.btn-primary{background:linear-gradient(135deg,var(--orange),var(--gold));color:#2a1700;box-shadow:0 8px 24px rgba(255,159,28,.35)}
.btn-primary:hover{filter:brightness(1.07);box-shadow:0 10px 30px rgba(255,159,28,.5)}
.btn-glass{background:var(--glass);border:1px solid var(--glass-b);color:var(--ink);backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(255,255,255,.14)}
.btn-danger{background:linear-gradient(135deg,#ff5a6a,#d63a4d);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* Giriş ekranı */
#screen-start{align-items:center;justify-content:flex-start;text-align:center}
#screen-start .hero{margin:auto 0}
.hero{max-width:820px;width:100%}
.hero-badge{display:inline-block;padding:6px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-b);color:var(--gold);font-weight:700;letter-spacing:.04em;font-size:14px}
.title{margin:14px 0 6px;font-size:clamp(34px,6.5vw,68px);line-height:1.05;font-weight:800;
  background:linear-gradient(90deg,var(--cream),var(--gold) 50%,var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-math{display:flex;justify-content:center;gap:clamp(10px,3vw,34px);flex-wrap:wrap;margin:16px 0 8px;font-size:clamp(28px,5vw,52px);color:var(--cream)}
.hero-math .mchip{padding:8px 18px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-b);animation:float 4s ease-in-out infinite}
.hero-math .mchip:nth-child(2){animation-delay:-1.3s}.hero-math .mchip:nth-child(3){animation-delay:-2.6s}
@keyframes float{50%{transform:translateY(-8px)}}
.lead{color:var(--muted);font-size:clamp(15px,2vw,19px);line-height:1.5;margin:8px auto;max-width:640px}
.note{color:var(--gold);font-size:14px;min-height:20px;margin-top:14px}
.note a{color:var(--cream)}

/* HUD */
.hud{display:flex;align-items:stretch;gap:10px;padding-right:62px}
.hud-cell{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:6px 10px;border-radius:16px;
  background:var(--glass);border:1px solid var(--glass-b);backdrop-filter:blur(10px);min-height:56px}
.hud-cell .lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hud-cell b{font-size:clamp(20px,3vw,28px);font-variant-numeric:tabular-nums;color:var(--cream);line-height:1.1}
.hud-level small{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.04em}
.hud-lives{flex-direction:row;gap:6px;flex:1.2}
.heart{width:clamp(26px,4vw,36px);height:clamp(26px,4vw,36px);transition:transform .3s,opacity .3s,filter .3s}
.heart.lost{opacity:.22;filter:grayscale(1);transform:scale(.85)}
.heart.gain{animation:pop .6s ease}
.heart.hit{animation:shake .5s}
.hud-pause{width:56px;height:56px;align-self:center;font-size:16px}
.progress{height:6px;border-radius:6px;background:var(--glass);margin:10px 0 6px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--violet),var(--orange));transition:width .5s ease}

/* Oyun sahnesi */
.stage[hidden]{display:none}
.stage{flex:1;min-height:0;display:flex;flex-direction:column;gap:clamp(8px,1.6vh,18px)}
.prompt{text-align:center;color:var(--cream);font-size:clamp(15px,2.2vw,20px);font-weight:600;min-height:28px}
.prompt em{font-style:normal;color:var(--gold)}
.slots{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(8px,1.6vw,18px);align-items:stretch}
.slot{position:relative;container-type:inline-size;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1.4vh,14px);
  padding:clamp(10px,2vh,18px) 8px;border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));
  border:1.5px solid var(--glass-b);box-shadow:var(--shadow);cursor:pointer;color:inherit;transition:transform .2s,border-color .2s,box-shadow .2s}
.slot:hover{border-color:rgba(255,200,61,.6)}
.slot.armed{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,200,61,.25),var(--shadow)}
.slot.over{border-color:var(--blue);transform:translateY(-4px);box-shadow:0 0 0 4px rgba(47,123,255,.35),var(--shadow)}
.slot.done{border-color:var(--ok);background:linear-gradient(180deg,rgba(46,212,122,.2),rgba(46,212,122,.06));cursor:default}
.slot.shake{animation:shake .45s}
.slot .expr{flex:1;width:100%;font-size:clamp(24px,min(15cqw,9vh),64px);min-height:1.5em;display:flex;align-items:center;justify-content:center;color:var(--cream)}
.eqrow{display:flex;align-items:center;justify-content:center;gap:10px;width:100%}
.slot .eq{font-size:clamp(20px,3vw,30px);color:var(--gold);line-height:1;font-weight:700}
.sock{flex:0 1 auto;min-width:min(70%,130px);min-height:clamp(50px,8vh,84px);border-radius:16px;border:2px dashed rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;
  font-size:clamp(24px,min(12cqw,6vh),46px);padding:4px 12px;color:var(--cream);background:rgba(8,16,42,.45)}
.slot.done .sock{border:2px solid var(--ok);background:rgba(46,212,122,.16)}
.sock .q{opacity:.4;font-size:.8em}

/* Kart tepsisi */
.tray-wrap{padding:12px;border-radius:var(--radius);background:rgba(8,16,42,.5);border:1px solid var(--glass-b)}
.tray-title{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:8px}
.tray{display:flex;flex-wrap:wrap;gap:clamp(8px,1.4vw,16px);justify-content:center}
.card{touch-action:none;user-select:none;-webkit-user-select:none;min-width:clamp(78px,11vw,128px);min-height:clamp(64px,10vh,96px);padding:8px 14px;border-radius:18px;
  border:1.5px solid rgba(255,255,255,.28);background:linear-gradient(160deg,#3a63d8,#5b3fd1);color:#fff;font-size:clamp(26px,4vw,46px);
  display:flex;align-items:center;justify-content:center;cursor:grab;box-shadow:0 8px 20px rgba(0,0,0,.35);transition:transform .15s,box-shadow .15s,opacity .2s}
.card:hover{transform:translateY(-3px)}
.card.sel{outline:3px solid var(--gold);transform:translateY(-6px) scale(1.05);box-shadow:0 14px 28px rgba(255,200,61,.3)}
.card.used{opacity:0;pointer-events:none;transform:scale(.6)}
.card.shake{animation:shake .45s}
.card.dragging{opacity:.35}
.card.sign-plus,.card.sign-minus{min-width:clamp(64px,8vw,92px);min-height:clamp(54px,8vh,78px)}
.card.sign-plus{background:linear-gradient(160deg,#1f9d63,#2ed47a);color:#052e1a}
.card.sign-minus{background:linear-gradient(160deg,#ff7a1c,#ffb02e);color:#3a1d00}
.card .sg{font-family:var(--ui);font-weight:800;font-size:1.3em;line-height:1}
.ghost{position:fixed;z-index:200;pointer-events:none;transform:translate(-50%,-50%) scale(1.1);opacity:.95}

@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-7px)}80%{transform:translateX(5px)}}
@keyframes pop{0%{transform:scale(.4)}60%{transform:scale(1.35)}100%{transform:scale(1)}}

/* ====== Matematik dizgisi ====== */
.m{font-family:var(--math);display:inline-flex;align-items:center;white-space:nowrap;line-height:1}
.m .pow{display:inline-flex;align-items:center}
.m .bs{display:inline-flex;align-items:center}
.m .ex{font-size:.58em;align-self:flex-start;margin-left:.06em;margin-top:-.12em;line-height:1}
.m .op{margin:0 .06em}
.m .frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin:0 .08em}
.m .frac .fn{padding:0 .22em .06em;border-bottom:.07em solid currentColor;line-height:1.05}
.m .frac .fd{padding:.08em .22em 0;line-height:1.05}
.m .frac.sm{font-size:.9em}
.m svg.pr{height:2.35em;width:.42em;flex:none;overflow:visible;margin:0 .02em}
.m svg.pr path{fill:none;stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linecap:round}
.m .eqs{margin:0 .25em}

/* Duyuru */
.banner{position:absolute;inset:0;z-index:50;display:grid;place-items:center;background:rgba(6,12,32,.72);backdrop-filter:blur(6px);animation:fadeIn .25s ease;text-align:center;padding:20px}
.banner[hidden]{display:none}
.banner .bn-inner{max-width:560px}
.banner h2{margin:0;font-size:clamp(34px,7vw,76px);font-weight:800;background:linear-gradient(90deg,var(--gold),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent;animation:pop .6s ease}
.banner p{color:var(--cream);font-size:clamp(16px,2.6vw,24px);margin:10px 0 0}
.banner .bn-sub{color:var(--muted);font-size:clamp(14px,2vw,18px)}

/* Bonus bölüm */
.bonus-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2.4vh,24px);text-align:center;min-height:0}
.bonus-stage[hidden]{display:none}
.bonus-head{display:flex;gap:12px;align-items:center;font-size:clamp(16px,2.4vw,22px);color:var(--cream);font-weight:600}
.bonus-tag{padding:4px 14px;border-radius:999px;background:linear-gradient(135deg,var(--violet),var(--blue));font-weight:800;letter-spacing:.1em;font-size:14px;color:#fff}
.bonus-dots{display:flex;gap:8px}
.bonus-dots i{width:18px;height:18px;border-radius:50%;background:var(--glass-b);border:1px solid var(--glass-b);transition:all .25s}
.bonus-dots i.cur{background:var(--gold);transform:scale(1.25)}
.bonus-dots i.ok{background:var(--ok)}.bonus-dots i.no{background:var(--bad)}
.bonus-q{font-size:clamp(40px,8vw,96px);color:var(--cream);padding:clamp(14px,3vh,34px) clamp(20px,5vw,60px);border-radius:28px;background:var(--glass);border:1.5px solid var(--glass-b);
  min-width:min(90%,420px);box-shadow:var(--shadow);transition:border-color .2s,background .2s}
.bonus-q.ok{border-color:var(--ok);background:rgba(46,212,122,.18)}
.bonus-q.no{border-color:var(--bad);background:rgba(255,90,106,.18);animation:shake .45s}
.bonus-btns{display:flex;gap:clamp(12px,3vw,32px);flex-wrap:wrap;justify-content:center}
.bbtn{min-width:clamp(140px,22vw,240px);min-height:clamp(70px,12vh,110px);border:0;border-radius:24px;font-size:clamp(22px,3.6vw,38px);font-weight:800;cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.35);transition:transform .12s,filter .15s}
.bbtn:hover{filter:brightness(1.1)}.bbtn:active{transform:scale(.95)}
.bbtn.yes{background:linear-gradient(160deg,#1f9d63,#2ed47a);color:#052e1a}
.bbtn.no{background:linear-gradient(160deg,#ff5a6a,#ff8a5a);color:#3a0a10}
.bbtn.blue{background:linear-gradient(160deg,#2f7bff,#6a5cff);color:#fff}
.bbtn.org{background:linear-gradient(160deg,#ff7a1c,#ffc83d);color:#3a1d00}
.bonus-streak{min-height:28px;color:var(--gold);font-weight:700;font-size:clamp(15px,2vw,20px)}

/* Oyun sonu */
#screen-end{align-items:center;justify-content:center}
.end-card{max-width:640px;width:100%;text-align:center;padding:clamp(18px,3vw,34px);border-radius:28px;background:var(--glass);border:1.5px solid var(--glass-b);backdrop-filter:blur(14px);box-shadow:var(--shadow)}
.end-card h2{margin:6px 0;font-size:clamp(26px,4.4vw,42px);color:var(--cream)}
.end-stars{display:flex;justify-content:center;gap:10px}
.end-stars svg{width:clamp(54px,11vw,86px);height:auto;filter:drop-shadow(0 6px 14px rgba(255,200,61,.35))}
.end-stars .off{opacity:.2;filter:grayscale(1)}
.end-stars .on{animation:pop .7s ease both}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0 4px}
@media(min-width:560px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats div{padding:12px 8px;border-radius:16px;background:rgba(8,16,42,.5);border:1px solid var(--glass-b)}
.stats span{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.stats b{font-size:clamp(20px,3.4vw,28px);color:var(--gold);font-variant-numeric:tabular-nums}
.rank{min-height:24px;color:var(--cream);font-weight:600}

/* Modallar */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:rgba(5,10,28,.78);backdrop-filter:blur(6px);animation:fadeIn .2s ease}
.modal[hidden]{display:none}
.modal-card{width:min(94vw,560px);max-height:92vh;overflow:auto;padding:clamp(18px,3vw,30px);border-radius:26px;background:linear-gradient(180deg,#16275c,#0f1c46);border:1.5px solid var(--glass-b);box-shadow:var(--shadow)}
.modal-card.wide{width:min(94vw,720px)}.modal-card.small{width:min(94vw,420px);text-align:center}
.modal-card h3{margin:0 0 10px;font-size:clamp(22px,3vw,28px);color:var(--cream)}
.rules{padding-left:20px;margin:0;color:var(--ink);line-height:1.55}
.rules li{margin:8px 0}.rules b{color:var(--gold)}

#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}

/* Küçük ekranlar (telefon) */
@media(max-width:720px){
  .screen{padding:10px 10px 8px}
  .slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .slots .slot:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 4px)}
  .tray-wrap{position:sticky;bottom:-8px;z-index:5;background:#0b1530;box-shadow:0 -12px 22px rgba(0,0,0,.45)}
  .hud{flex-wrap:wrap;padding-right:108px;gap:6px}
  .hud-cell{min-height:50px;padding:4px 6px}
  .hud-level,.hud-time,.hud-score{flex:1 1 0}
  .hud-lives{order:5;flex:1 1 100%;min-height:38px}
  .hud-lives .heart{width:24px;height:24px}
  .hud-cell b{font-size:19px}
  .hud-pause{position:absolute;top:12px;right:64px;width:44px;height:44px}
  #muteBtn{top:12px;right:10px;width:44px;height:44px}
  .tray-title,.prompt{display:none}
  .tray-wrap{padding:8px}
  .card{min-width:62px;min-height:52px;font-size:24px;padding:4px 8px}
  .slot{padding:8px 6px}
  .slot .expr{font-size:clamp(22px,13cqw,40px)}
  .sock{min-height:44px}
  .title{font-size:38px}
}
@media(max-height:620px) and (min-width:721px){
  .slot .expr{min-height:1.3em}.sock{min-height:52px}
  .card{min-height:56px}
  .prompt{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}


.hero-math{align-items:center}

/* ===== Zor mod ===== */
.mode-switch{display:inline-flex;gap:6px;padding:5px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-b);margin-top:14px}
.mode-btn{border:0;background:transparent;padding:10px 22px;border-radius:14px;font-weight:800;font-size:clamp(15px,2vw,18px);cursor:pointer;color:var(--muted);transition:all .2s}
.mode-btn.active{background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff;box-shadow:0 6px 18px rgba(47,123,255,.35)}
.mode-btn[data-mod="zor"].active{background:linear-gradient(135deg,#ff5a3d,#ff9f1c);box-shadow:0 6px 18px rgba(255,90,61,.4);color:#2a0d00}
.mode-desc{color:var(--cream);min-height:24px;margin:10px auto 0;max-width:620px;font-size:clamp(14px,1.8vw,17px)}
body.zor #app{background:
   radial-gradient(900px 500px at 10% -10%,rgba(255,90,61,.30),transparent 60%),
   radial-gradient(800px 520px at 100% 0%,rgba(124,92,255,.30),transparent 60%),
   radial-gradient(700px 500px at 50% 120%,rgba(255,159,28,.22),transparent 60%),
   linear-gradient(180deg,var(--navy),#12102e)}
body.zor .hud-level small{color:#ff8a5a}
/* iç içe üsler */
.m svg.pr.s{height:1.55em;width:.36em}
.m .ex.tw{font-size:.62em;margin-top:-.2em}
.m .ex.tw .ex{font-size:.72em}

@media(max-height:760px){.hero-math{margin:8px 0 0;font-size:clamp(24px,4vw,40px)}.title{margin:8px 0 2px}
/* Oyun sonu: misafir ad kutusu (ortak liderlik, lb.css) */
.end-name{width:min(100%,420px);margin:6px auto 4px}
.end-name[hidden]{display:none}
.modal-card.wide .mklb{margin-top:4px}