@font-face{font-family:"Baloo 2";font-weight:400 800;font-display:swap;src:url(fonts/baloo2-latinext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Baloo 2";font-weight:400 800;font-display:swap;src:url(fonts/baloo2-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bgA:#8b5cf6;--bgB:#6d28d9;--bgC:#3b0f8c;--accent:#a78bfa;
  --ink:#24124f;--muted:#8b84b3;--soft:#efeaff;
  --gold:#ffc93c;--gold2:#ff9f1c;--ok:#22c55e;--bad:#ef4444;
  --panel:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.08));
  --pborder:rgba(255,255,255,.22);
  --shadow:0 5px 0 rgba(20,0,60,.35);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#120530;font-family:"Baloo 2","Segoe UI",Roboto,system-ui,sans-serif;color:#fff;overflow:hidden}
button{font:inherit;color:inherit;border:none;background:none;cursor:pointer}
button,.tile,.opt{user-select:none;-webkit-user-select:none}
#app{position:relative;width:100%;max-width:480px;height:100dvh;margin:0 auto;overflow:hidden;
  background:radial-gradient(120% 60% at 50% -5%,var(--bgA),var(--bgB) 45%,var(--bgC))}
#app::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ctext x='14' y='44' font-size='34' font-family='Arial' font-weight='900' fill='white' transform='rotate(-14 30 30)'%3E%3F%3C/text%3E%3Ctext x='70' y='100' font-size='26' font-family='Arial' font-weight='900' fill='white' transform='rotate(12 80 90)'%3E!%3C/text%3E%3C/svg%3E")}
@media(min-width:600px) and (min-height:700px){#app{height:min(94dvh,920px);margin-top:3dvh;border-radius:32px;box-shadow:0 30px 90px rgba(0,0,0,.7)}}
@media(min-width:960px){#app{max-width:1080px}}

.screen{position:absolute;inset:0;display:none;flex-direction:column;padding:calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 16px);overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.screen::-webkit-scrollbar{display:none}
.screen.on{display:flex;animation:sIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes sIn{from{opacity:0;transform:translateY(14px) scale(.98)}}
@media(min-width:960px){.screen:not(#oyun)>*{width:100%;max-width:560px;margin-left:auto;margin-right:auto}}

.out{text-shadow:0 2px 0 rgba(20,0,60,.45),0 0 1px rgba(20,0,60,.6)}
.bar{display:flex;align-items:center;gap:8px}
.spacer{flex:1}
.chip{display:flex;align-items:center;gap:5px;background:rgba(20,0,60,.35);border:2px solid var(--pborder);border-radius:999px;padding:3px 14px;font-weight:800;font-size:17px;line-height:1.4}
.icon-btn{width:44px;height:44px;flex:0 0 44px;border-radius:15px;background:var(--panel);border:2px solid var(--pborder);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800}
.icon-btn:active{transform:translateY(4px);box-shadow:none}
.btn3d{position:relative;overflow:hidden;border-radius:20px;padding:14px 20px;font-weight:800;font-size:20px;letter-spacing:.3px;color:#5a3300;
  background:linear-gradient(180deg,#ffe58a,var(--gold) 50%,var(--gold2));box-shadow:0 6px 0 #c76f00,0 12px 22px rgba(0,0,0,.25);transition:transform .08s,box-shadow .08s}
.btn3d::before{content:"";position:absolute;left:8px;right:8px;top:4px;height:40%;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
.btn3d:active:not(:disabled){transform:translateY(5px);box-shadow:0 1px 0 #c76f00}
.btn3d.purple{color:#fff;background:linear-gradient(180deg,#a78bfa,#7c3aed);box-shadow:0 6px 0 #4c1d95,0 12px 22px rgba(0,0,0,.25)}
.btn3d.purple:active:not(:disabled){box-shadow:0 1px 0 #4c1d95}
.btn3d.green{color:#fff;background:linear-gradient(180deg,#6ee7a0,#16a34a);box-shadow:0 6px 0 #14532d,0 12px 22px rgba(0,0,0,.25)}
.btn3d.green:active:not(:disabled){box-shadow:0 1px 0 #14532d}
.btn3d.ghost{color:#fff;background:rgba(20,0,60,.3);box-shadow:0 5px 0 rgba(20,0,60,.4);border:2px solid var(--pborder)}
.btn3d.ghost::before{display:none}
.btn3d:disabled{filter:grayscale(1);opacity:.55;cursor:default}
.sech{font-size:14px;font-weight:800;letter-spacing:1.5px;color:#fff;opacity:.85;margin:16px 4px 8px;text-transform:uppercase}
.panel{background:var(--panel);border:2px solid var(--pborder);border-radius:22px;box-shadow:var(--shadow)}
.hdr{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.hdr h2{font-size:26px;font-weight:800;line-height:1}
.lbl{display:block;font-size:13px;font-weight:800;letter-spacing:1.2px;opacity:.85;text-transform:uppercase}
.inp{width:100%;font:inherit;font-size:22px;font-weight:800;color:var(--ink);background:#fff;border:none;border-radius:14px;padding:6px 14px;margin-top:4px;outline:none;box-shadow:inset 0 3px 0 rgba(20,0,60,.12)}
.inp:focus{box-shadow:0 0 0 4px var(--gold)}
.hata{min-height:28px;margin-top:12px;text-align:center;font-weight:800;font-size:17px;color:#fecaca;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.not{min-height:22px;margin-top:8px;text-align:center;font-weight:700;font-size:15px;opacity:.85}

/* ana sayfa */
.geri-site{color:#fff;text-decoration:none;font-weight:800;font-size:15px;background:rgba(20,0,60,.3);border:2px solid var(--pborder);border-radius:999px;padding:4px 14px}
.ana-ust{margin:auto 0 0}
.logo{text-align:center}
.logo img{width:124px;height:124px;filter:drop-shadow(0 10px 18px rgba(20,0,60,.45));animation:bob 3s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-7px) rotate(-3deg)}}
.title{font-size:50px;font-weight:800;line-height:.86;letter-spacing:1px;text-align:center;color:#fff;margin-top:6px;
  text-shadow:0 4px 0 #3b0f8c,0 0 2px #3b0f8c,0 8px 20px rgba(20,0,60,.4)}
.title span{color:var(--gold);text-shadow:0 4px 0 #b45309,0 0 2px #b45309,0 8px 20px rgba(20,0,60,.4)}
.tag{text-align:center;font-weight:700;font-size:17px;margin-top:8px;opacity:.92}
.modes{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;gap:16px}
.buyuk{display:flex;align-items:center;gap:14px;text-align:left;padding:16px 18px}
.buyuk .big{font-size:42px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.2))}
.buyuk .t{font-size:24px;line-height:1}
.buyuk .s{font-size:14px;font-weight:700;opacity:.82;margin-top:3px}
.buyuk .go{margin-left:auto;font-size:24px}
.fyz{margin-top:18px;font-size:12px;font-weight:800;opacity:.55;letter-spacing:1px}

/* karolar */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{position:relative;overflow:hidden;border-radius:22px;padding:12px 14px;text-align:left;color:#fff;
  background:linear-gradient(160deg,var(--t1,#ffffff33),var(--t2,#ffffff14));border:2px solid rgba(255,255,255,.3);box-shadow:0 5px 0 var(--t3,rgba(20,0,60,.4)),0 10px 20px rgba(0,0,0,.18);transition:transform .08s}
.tile::after{content:"";position:absolute;right:-18px;top:-18px;width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.14)}
.tile:active{transform:translateY(4px);box-shadow:0 1px 0 var(--t3,rgba(20,0,60,.4))}
.tile .ic{font-size:32px;line-height:1.1;filter:drop-shadow(0 2px 0 rgba(0,0,0,.2))}
.tile .t{font-weight:800;font-size:19px;line-height:1.1;margin-top:4px;text-shadow:0 2px 0 rgba(0,0,0,.2)}
.tile .s{font-size:13px;font-weight:700;opacity:.9;line-height:1.2}
.tile.sec{outline:4px solid #fff;outline-offset:2px}
.t-blue{--t1:#60a5fa;--t2:#2563eb;--t3:#1e3a8a}
.t-orange{--t1:#fdba74;--t2:#ea580c;--t3:#7c2d12}

/* kim + avatar */
.kim{display:flex;gap:12px;align-items:center;padding:12px;margin-top:6px}
.avbtn{flex:0 0 64px;height:64px;border-radius:20px;font-size:38px;background:radial-gradient(circle at 35% 25%,#fff8,transparent 50%),linear-gradient(135deg,#ff8fc8,#8b5cf6);border:3px solid #fff;box-shadow:var(--shadow)}
.avsec{display:none;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
.avsec.on{display:flex}
.avsec button{width:46px;height:46px;border-radius:14px;font-size:26px;background:rgba(255,255,255,.15);border:2px solid var(--pborder)}
.avsec button.sec{background:#fff;border-color:var(--gold)}
.katil{padding:12px;margin-top:14px}
.kodsatir{display:flex;gap:10px;align-items:stretch;margin-top:4px}
.kodinp{margin-top:0;letter-spacing:6px;text-align:center;font-size:26px}
.kodsatir .btn3d{padding:8px 18px}

/* ayar çipleri */
.ayar{margin-bottom:12px}
.ayar .lbl{margin:0 4px 6px}
.cipler{display:flex;flex-wrap:wrap;gap:8px}
.cip{padding:6px 14px;border-radius:14px;font-weight:800;font-size:16px;background:rgba(20,0,60,.32);border:2px solid var(--pborder);box-shadow:0 3px 0 rgba(20,0,60,.35)}
.cip.sec{background:#fff;color:var(--ink);border-color:#fff;box-shadow:0 3px 0 var(--gold2)}
.cip:disabled{cursor:default}
.ozet{margin-top:8px;font-weight:800;font-size:15px;opacity:.9}

/* lobi */
.kodkart{padding:14px;text-align:center}
.kodbuyuk{font-size:54px;font-weight:800;letter-spacing:8px;line-height:1.1;color:var(--gold);text-shadow:0 4px 0 #b45309,0 8px 20px rgba(20,0,60,.4)}
.paylas{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.mini{padding:6px 14px;border-radius:14px;font-weight:800;font-size:15px;background:#fff;color:var(--ink);box-shadow:0 4px 0 rgba(20,0,60,.35)}
.mini:active{transform:translateY(3px);box-shadow:none}
.mini.wa{background:#25d366;color:#fff;box-shadow:0 4px 0 #128c4a}
.ipucu{font-size:13px;font-weight:700;opacity:.8;margin-top:8px}
.oyuncular{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.oyc{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:16px;background:rgba(255,255,255,.14);border:2px solid var(--pborder);font-weight:800;font-size:16px;min-width:0;animation:sIn .3s}
.oyc .av{font-size:26px;line-height:1}
.oyc .ad{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oyc.ben{background:rgba(255,201,60,.25);border-color:var(--gold)}
.oyc.kopuk{opacity:.45}
.oyc .tac{font-size:16px}
.oyc .at{font-size:14px;width:26px;height:26px;border-radius:9px;background:rgba(20,0,60,.4)}
#baslatBtn{width:100%;margin-top:6px}
.bekle{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:16px;margin-top:16px;font-weight:700;font-size:17px}
.spin{font-size:36px;animation:bob 1.6s ease-in-out infinite}
.baglanti{font-size:13px;font-weight:800;padding:2px 10px;border-radius:999px;background:rgba(20,0,60,.4)}
.baglanti.kopuk{background:var(--bad)}

/* oyun */
.oyun-ic{display:flex;flex-direction:column;gap:14px;min-height:100%}
.oyun-sol{display:flex;flex-direction:column}
@media(min-width:960px){
  .oyun-ic{flex-direction:row;align-items:stretch;max-width:1020px;width:100%;margin:0 auto}
  .oyun-sol{flex:1;min-width:0}
  .oyun-sag{flex:0 0 320px;align-self:flex-start;margin-top:56px}
}
.hud{display:flex;align-items:center;gap:10px}
.qsay{font-size:20px;font-weight:800}
.prog{height:12px;border-radius:9px;background:rgba(20,0,60,.4);margin:12px 2px 0;overflow:hidden;border:2px solid rgba(255,255,255,.15)}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffe58a,var(--gold2));border-radius:9px;transition:width .4s}
.qcard{position:relative;margin-top:46px;background:#fff;color:var(--ink);border-radius:26px;padding:0 0 22px;min-height:190px;
  display:flex;flex-direction:column;align-items:center;box-shadow:0 8px 0 rgba(20,0,60,.35),0 20px 40px rgba(0,0,0,.25)}
.qcard.in{animation:qIn .45s cubic-bezier(.2,1.3,.4,1)}
@keyframes qIn{from{opacity:0;transform:scale(.85) rotate(-2deg)}}
.qband{width:100%;height:58px;border-radius:26px 26px 0 0;background:var(--cc,#7c3aed);display:flex;align-items:center;padding:0 16px;
  background-image:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,0) 60%),repeating-linear-gradient(-45deg,rgba(255,255,255,.08) 0 10px,transparent 10px 20px)}
.qband .catname{font-weight:800;font-size:15px;color:#fff;letter-spacing:.5px;text-shadow:0 2px 0 rgba(0,0,0,.2)}
.qband .diff{margin-left:auto;font-size:14px;color:rgba(255,255,255,.45);letter-spacing:1px}
.qband .diff i{font-style:normal;color:#fff}
.timer{position:absolute;top:-38px;left:50%;transform:translateX(-50%);width:78px;height:78px;border-radius:50%;background:#fff;box-shadow:0 5px 0 rgba(20,0,60,.3);z-index:2}
.timer svg{position:absolute;inset:7px;width:64px;height:64px;transform:rotate(-90deg)}
.timer b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:var(--ink)}
.timer.low b{color:var(--bad);animation:pulse .5s infinite}
@keyframes pulse{50%{transform:scale(1.12)}}
.qtext{font-size:23px;font-weight:800;text-align:center;line-height:1.25;padding:20px 18px 0;flex:1;display:flex;align-items:center}
.opts{display:flex;flex-direction:column;gap:11px;margin-top:20px}
@media(min-width:960px){.opts{display:grid;grid-template-columns:1fr 1fr}}
.opt{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:10px 14px;min-height:60px;border-radius:18px;background:#fff;color:var(--ink);font-weight:700;font-size:18px;line-height:1.2;text-align:left;
  box-shadow:0 5px 0 rgba(20,0,60,.3);transition:transform .08s,box-shadow .08s,background .2s,opacity .3s;animation:oIn .4s backwards}
.opt:nth-child(2){animation-delay:.05s}.opt:nth-child(3){animation-delay:.1s}.opt:nth-child(4){animation-delay:.15s}
@keyframes oIn{from{opacity:0;transform:translateX(-20px)}}
.opt:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 rgba(20,0,60,.3)}
.opt .L{flex:0 0 36px;height:36px;border-radius:12px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.opt:nth-child(1) .L{background:#3b82f6}.opt:nth-child(2) .L{background:#f59e0b}.opt:nth-child(3) .L{background:#ec4899}.opt:nth-child(4) .L{background:#10b981}
.opt .tx{flex:1}
.opt .kimler{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:1px;font-size:18px;max-width:40%}
.opt.secili{outline:4px solid #7c3aed;outline-offset:2px}
.opt.ok{background:var(--ok);color:#fff;box-shadow:0 5px 0 #15803d;animation:okP .45s}
.opt.ok .L,.opt.bad .L{background:rgba(255,255,255,.3)!important}
.opt.bad{background:var(--bad);color:#fff;box-shadow:0 5px 0 #b91c1c;animation:shake .45s}
.opt.soluk{opacity:.4}
.opt:disabled{cursor:default}
@keyframes okP{40%{transform:scale(1.04)}}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.durumyazi{min-height:34px;margin-top:14px;text-align:center;font-weight:800;font-size:20px;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.durumyazi .kaz{color:var(--gold);font-size:26px}

/* canlı sıralama */
.oyun-sag{padding:12px}
.sira-h{font-weight:800;font-size:15px;letter-spacing:1.2px;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.sira-h small{margin-left:auto;font-size:13px;opacity:.85;letter-spacing:0}
.sira{position:relative}
.sr{display:flex;align-items:center;gap:8px;height:44px;padding:0 10px;border-radius:14px;background:rgba(255,255,255,.12);margin-bottom:6px;font-weight:800;font-size:16px;
  transition:transform .6s cubic-bezier(.2,.9,.3,1.1),background .3s}
.sr.ben{background:rgba(255,201,60,.3);box-shadow:inset 0 0 0 2px var(--gold)}
.sr .no{width:24px;text-align:center;opacity:.9}
.sr .av{font-size:22px}
.sr .ad{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr .ok{font-size:14px}
.sr .p{font-variant-numeric:tabular-nums}
.sr .art{font-size:13px;color:var(--gold);min-width:44px;text-align:right}
.sr .art.sifir{color:#fca5a5}
.sr .yon{font-size:12px;width:14px}
.sr.kopuk{opacity:.45}
.sira:not(.tam) .sr{position:absolute;left:0;right:0;top:0}

/* sonuç */
.podyum{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:18px 0 14px;min-height:220px}
.pd{flex:0 1 120px;display:flex;flex-direction:column;align-items:center;font-weight:800;animation:sIn .6s backwards}
.pd .av{font-size:44px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.25))}
.pd .ad{font-size:16px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd .p{font-size:14px;opacity:.9}
.pd .kut{width:100%;border-radius:16px 16px 6px 6px;display:flex;align-items:flex-start;justify-content:center;padding-top:6px;font-size:30px;margin-top:4px;box-shadow:0 5px 0 rgba(20,0,60,.4)}
.pd.p1 .kut{height:120px;background:linear-gradient(180deg,#ffe58a,#ff9f1c)}
.pd.p2 .kut{height:88px;background:linear-gradient(180deg,#f1f5f9,#94a3b8)}
.pd.p3 .kut{height:64px;background:linear-gradient(180deg,#fdba74,#c2410c)}
.pd.p1{animation-delay:.5s}.pd.p2{animation-delay:.25s}
.solosonuc{text-align:center;padding:20px;margin:20px 0}
.solosonuc .buyukp{font-size:64px;font-weight:800;color:var(--gold);line-height:1;text-shadow:0 4px 0 #b45309}
.solosonuc .alt{font-size:18px;font-weight:800;margin-top:6px}
.sonbtn{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:16px}

#toast{position:absolute;left:50%;bottom:28px;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:#fff;color:var(--ink);font-weight:800;font-size:16px;padding:8px 18px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.3);transition:.3s;z-index:20;white-space:nowrap}
#toast.on{opacity:1;transform:translate(-50%,0)}
#modal{position:absolute;inset:0;z-index:15;display:none;align-items:center;justify-content:center;background:rgba(10,0,30,.6);padding:20px}
#modal.on{display:flex}
.mbox{width:100%;max-width:380px;background:linear-gradient(180deg,#7c3aed,#4c1d95);border:3px solid var(--pborder);border-radius:26px;padding:20px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.5);animation:qIn .35s}
.mbox .big{font-size:48px}
.mbox h3{font-size:24px;margin:4px 0}
.mbox p{font-size:17px;font-weight:600;opacity:.92}
.mbox .mb{display:flex;flex-direction:column;gap:10px;margin-top:16px}
[hidden]{display:none!important}
.sr-dip{position:absolute;left:0;right:0;height:22px;text-align:center;font-weight:800;font-size:14px;opacity:.75;transition:top .6s}