html,body{margin:0;height:100%;background:#07060d;color:#e8e2ff;font-family:system-ui,Segoe UI,sans-serif;overflow:hidden}
canvas{display:block}
.panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(20,16,40,.85);border:1px solid #6b4fd8;border-radius:14px;padding:28px 32px;text-align:center;box-shadow:0 0 40px #6b4fd855;z-index:10;min-width:260px}
h1{margin:0 0 18px;font-weight:600;letter-spacing:1px}
button{background:linear-gradient(#7b5cff,#4a2fc0);color:#fff;border:0;border-radius:8px;padding:10px 18px;font-size:15px;cursor:pointer}
button:hover{filter:brightness(1.15)}
input{background:#120f24;border:1px solid #6b4fd8;color:#fff;border-radius:8px;padding:10px;font-size:20px;letter-spacing:4px;text-align:center;width:150px;text-transform:uppercase;margin-bottom:10px}
.or{margin:14px 0;opacity:.6}
#lobbyMsg,#hudMsg{color:#ff9b9b;margin-top:10px;min-height:1em}
#hud{position:fixed;top:12px;left:12px;background:rgba(20,16,40,.75);border:1px solid #6b4fd8;border-radius:10px;padding:12px 16px;line-height:1.7;z-index:5}
#hud button{padding:4px 10px;font-size:13px}
#btnRematch{margin-top:6px}
@media (max-width:600px){#hud{top:8px;left:8px;right:8px;padding:8px 12px;line-height:1.5;font-size:14px;display:flex;flex-wrap:wrap;gap:4px 14px}}
.bgl{display:block;margin-top:10px;font-size:14px}
select{background:#120f24;color:#fff;border:1px solid #6b4fd8;border-radius:6px;padding:4px 6px;margin-left:6px}
h2{margin:0 0 14px}
button.big{font-size:17px;padding:12px 22px;background:linear-gradient(#ffb547,#c96a12)}
button.ghost{background:transparent;border:1px solid #6b4fd8;margin-top:8px}
#levelGrid{display:grid;grid-template-columns:repeat(6,46px);gap:8px;justify-content:center;margin-bottom:14px}
#levelGrid button{padding:0;height:46px;font-size:16px}
#levelGrid button.done{background:linear-gradient(#ffd36b,#b07a10)}
#levelGrid button:disabled{background:#2a2540;color:#665f80;cursor:default}
.bar{width:240px;height:12px;border-radius:6px;background:#120f24;border:1px solid #6b4fd8;overflow:hidden;margin:14px auto 8px}
#loaderFill{height:100%;width:0;background:linear-gradient(90deg,#7b5cff,#ffb547);transition:width .2s}
#loaderSub{font-size:13px;opacity:.7;min-height:1em}
#hud{padding-right:44px!important;position:fixed}
.hudToggle{position:absolute;top:6px;right:6px;width:30px;height:30px;padding:0!important;border-radius:50%;font-size:12px!important;background:#2a2150;border:1px solid #6b4fd8}
#hud.collapsed>*:not(.keep):not(.hudToggle){display:none!important}
#hud.collapsed{padding:8px 44px 8px 12px!important;right:auto!important}
.tcRow{display:flex;gap:8px;justify-content:center;align-items:center}
#clocks{display:flex;gap:10px;margin:2px 0}
.clk{background:#120f24;border:1px solid #6b4fd8;border-radius:8px;padding:2px 10px;font-variant-numeric:tabular-nums;opacity:.6}
.clk b{font-size:18px}
.clk.active{opacity:1;border-color:#ffb547;box-shadow:0 0 10px #ffb54766}
.clk.low b{color:#ff6b6b}
button.tourBtn{background:linear-gradient(#3fbf8a,#1d7a55)}
.form{display:grid;gap:8px;text-align:left;margin-bottom:12px}
.form label{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px}
.form input{width:160px;font-size:15px;letter-spacing:0;text-transform:none;margin:0;padding:7px;text-align:left}
.form select{width:178px;margin:0}
.msg{color:#ff9b9b;min-height:1em;margin:8px 0}
.panel.wide{width:min(560px,94vw);max-height:88vh;overflow:auto;text-align:left;padding:20px}
.tv h2{margin:0 0 4px}
.tv .rules{opacity:.75;font-size:13px;margin-bottom:12px}
.tv .card{background:#120f24;border:1px solid #3a2f70;border-radius:10px;padding:12px;margin:10px 0}
.tv .invite{display:flex;gap:6px}
.tv .invite input{flex:1;width:auto;font-size:13px;letter-spacing:0;text-transform:none;margin:0;text-align:left}
.tv .players{display:flex;flex-wrap:wrap;gap:6px}
.tv .chip{background:#2a2150;border-radius:20px;padding:4px 10px;font-size:13px}
.tv .chip.me{background:#7b5cff}
.tv .myMatch{border-color:#ffb547;box-shadow:0 0 14px #ffb54733}
.tv .vs{font-size:18px;font-weight:600;margin:4px 0 10px}
.tv .bracket{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.tv .col{min-width:140px}
.tv .col h4{margin:0 0 6px;font-size:13px;opacity:.7}
.tv .m{background:#1b1636;border-radius:8px;padding:6px 8px;margin-bottom:8px;font-size:13px}
.tv .m div{display:flex;justify-content:space-between}
.tv .m .w{color:#ffd36b;font-weight:700}
.tv .m .l{opacity:.45}
.tv .live{color:#5fff9d;font-size:11px}
.tv table{width:100%;border-collapse:collapse;font-size:14px}
.tv th,.tv td{padding:5px;text-align:center;border-bottom:1px solid #2a2150}
.tv td:nth-child(2),.tv th:nth-child(2){text-align:left}
.tv .champ{font-size:20px;text-align:center;color:#ffd36b;margin:10px 0}
.tv .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#drawFx{position:fixed;inset:0;background:rgba(7,6,13,.85);z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
#drawFxName{font-size:34px;font-weight:700;color:#ffd36b;text-shadow:0 0 20px #ffb547}
/* ---------- Mobil oyun düzeni (dikey ekran) ---------- */
.pcard,#turnBanner{display:none}
@media (orientation:portrait){
  body.ingame .pcard{display:flex;position:fixed;left:10px;right:10px;align-items:center;gap:10px;background:rgba(20,16,40,.82);border:1px solid #3a2f70;border-radius:14px;padding:8px 10px;z-index:6;transition:box-shadow .2s,border-color .2s}
  body.ingame #pTop{top:max(10px,env(safe-area-inset-top))}
  body.ingame #pBot{bottom:max(12px,env(safe-area-inset-bottom))}
  body.ingame .pcard.active{border-color:#ffb547;box-shadow:0 0 16px #ffb54755}
  .pcard .av{width:46px;height:46px;border-radius:12px;background:linear-gradient(#3a2b63,#1b1430);display:flex;align-items:center;justify-content:center;font-size:26px;border:1px solid #6b4fd8;flex:none}
  .pcard .av.me{background:linear-gradient(#7b5cff,#4a2fc0);font-weight:700;font-size:22px}
  .pcard .pinfo{flex:1;min-width:0}
  .pcard .pinfo b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pcard .caps{font-size:15px;opacity:.8;letter-spacing:-2px;min-height:1.2em;white-space:nowrap;overflow:hidden}
  .pcard .pclk{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;background:#120f24;border-radius:8px;padding:4px 10px;min-width:62px;text-align:center}
  .pcard .pclk:empty{display:none}
  .pcard .pclk.low{color:#ff6b6b}
  .pcard.active .pclk{background:#ffb547;color:#1b1430}
  #btnSheet,#btnHome{width:42px;height:42px;padding:0;font-size:20px;border-radius:10px;flex:none}
  #btnHome{background:linear-gradient(#ffb547,#c96a12)}
  body.intro .pcard,body.intro #turnBanner{opacity:0;pointer-events:none}
  body.ingame .pcard,body.ingame #turnBanner{transition:opacity .5s}
  body.ingame #turnBanner{display:block;position:fixed;left:0;right:0;text-align:center;font-weight:600;z-index:6;text-shadow:0 1px 6px #000;font-size:15px}
  #turnBanner.mine{color:#ffd36b}
  body.ingame #hud{display:none}
  body.ingame.sheet #hud{display:block;top:auto;bottom:max(12px,env(safe-area-inset-bottom));left:10px;right:10px;z-index:12;padding:16px 50px 16px 16px!important;background:rgba(20,16,40,.97)}
  body.ingame.sheet::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:11}
  body.ingame.sheet #hud #clocks,body.ingame.sheet #hud #hudTurn{display:none!important}
  body.ingame.sheet #hud button{margin-top:6px}
}
input.nick{width:200px;font-size:16px;letter-spacing:0;text-transform:none;margin:0 0 14px}
#promo{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:8px;background:rgba(20,16,40,.95);border:1px solid #ffb547;border-radius:14px;padding:12px;z-index:15}
#promo button{width:64px;height:72px;font-size:34px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0}
#promo small{font-size:11px}
.account{margin-bottom:12px;display:flex;flex-direction:column;align-items:center;gap:4px}
button.google{background:#fff;color:#222;font-weight:600}
.account small{opacity:.7;font-size:12px;max-width:240px}
button.link{background:none;border:0;color:#b9a8ff;text-decoration:underline;padding:0;font-size:12px}
#lbPanel{position:fixed;top:0;right:0;bottom:0;width:min(380px,100vw);background:rgba(14,11,28,.97);border-left:1px solid #6b4fd8;z-index:18;display:flex;flex-direction:column;padding:14px;box-shadow:-10px 0 30px #0008;animation:slideIn .25s}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:none}}
.lbHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:18px}
.lbHead button{padding:4px 10px}
#lbMe{background:#1b1636;border-radius:10px;padding:10px;margin-bottom:10px;font-size:14px}
.lbTabs{display:flex;gap:6px;margin-bottom:8px}
.lbTabs button{flex:1;background:#1b1636;border:1px solid #3a2f70;padding:6px}
.lbTabs button.on{background:#6b4fd8}
#lbBody{overflow:auto;flex:1}
.lbRow{display:flex;gap:8px;align-items:center;padding:7px 4px;border-bottom:1px solid #241d45;font-size:14px}
.lbRow .r{width:28px;text-align:center;font-weight:700;opacity:.8}
.lbRow .n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbRow .p{font-weight:700;color:#ffd36b}
.lbRow.me{background:#2a2150;border-radius:8px}
.badgeGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.badge{background:#1b1636;border:1px solid #3a2f70;border-radius:10px;padding:8px;text-align:center;font-size:12px}
.badge .i{font-size:28px;display:block}
.badge.locked{opacity:.35;filter:grayscale(1)}
#toast{position:fixed;left:50%;top:18%;transform:translateX(-50%);background:rgba(20,16,40,.96);border:1px solid #ffb547;border-radius:14px;padding:14px 18px;z-index:25;text-align:center;box-shadow:0 0 30px #ffb54755;min-width:220px;animation:pop .3s}
@keyframes pop{from{transform:translateX(-50%) scale(.7);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
#toast .big{font-size:26px;font-weight:800;color:#ffd36b}
#toast .ln{font-size:13px;opacity:.85}
#toast .bd{margin-top:6px;font-size:15px}
#vig{position:fixed;inset:0;pointer-events:none;z-index:4;opacity:0}
#vig.red{animation:vig 1s ease-out}
@keyframes vig{0%{opacity:0;box-shadow:inset 0 0 0 0 #ff224400}20%{opacity:1;box-shadow:inset 0 0 120px 30px #ff2244aa}100%{opacity:0;box-shadow:inset 0 0 60px 10px #ff224400}}
#fxDemo{position:fixed;left:10px;right:10px;bottom:10px;background:rgba(20,16,40,.92);border:1px solid #ffb547;border-radius:14px;padding:12px;z-index:9;max-width:720px;margin:auto}
#fxDemo small{opacity:.7}
.fxBtns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fxBtns button{padding:8px 10px;font-size:14px}
#fxNote{margin-top:8px;font-size:14px;min-height:1.2em;color:#ffd36b}
#mapView{position:fixed;inset:0;z-index:12;overflow-y:auto;background:#120f24;isolation:isolate}
#mapView::before{content:"";position:fixed;inset:-40px;background:url(/maps/bolum1.webp) center/cover;filter:blur(24px) brightness(.45);z-index:-1}
.mapWrap{box-shadow:0 0 40px #000c}
#mapView{display:flex;flex-direction:column}
#mapView .mapWrap{margin:auto;width:100%;flex:none}
#mapView .mapBottom{background:transparent;padding-bottom:16px}
.mapTop,.mapBottom{position:sticky;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;background:rgba(18,15,36,.9);z-index:3}
.mapTop{top:0}.mapBottom{bottom:0;justify-content:center}
.mapWrap{position:relative;max-width:560px;margin:0 auto}
.mapWrap>img{width:100%;display:block;user-select:none}
.node{position:absolute;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;padding:0;border:3px solid #fff;background:#2a2150;overflow:visible;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 4px 14px #000a}
.node img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;border-radius:50%}
.node.done{border-color:#ffd36b;filter:saturate(.6)}
.node.current{border-color:#c9b4ff;animation:nodePulse 1.6s infinite}
.node.locked{background:#3a3352;border-color:#8a80a8;opacity:.85}
.node.boss{width:76px;height:76px}
@keyframes nodePulse{0%,100%{box-shadow:0 0 0 0 #9b7bffaa,0 4px 14px #000a}50%{box-shadow:0 0 0 14px #9b7bff00,0 4px 14px #000a}}
.nlabel{position:absolute;top:100%;margin-top:4px;white-space:nowrap;font-size:12px;background:rgba(18,15,36,.85);padding:2px 8px;border-radius:10px;color:#fff}
.pawn{position:absolute;transform:translate(-50%,-50%);font-size:34px;color:#fff;text-shadow:0 2px 6px #000;animation:hop 1.2s ease-in-out infinite;pointer-events:none}
@keyframes hop{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-75%)}}
.raven{position:absolute;left:-10%;line-height:0;animation:fly 14s linear infinite;pointer-events:none;opacity:.85}
@keyframes fly{from{left:-10%;transform:translateY(0)}50%{transform:translateY(-14px)}to{left:105%;transform:translateY(0)}}
.fogLabel{position:absolute;top:2.5%;left:50%;transform:translateX(-50%);background:rgba(18,15,36,.8);padding:6px 14px;border-radius:14px;font-size:14px;white-space:nowrap}
#kingCard{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.kc{position:relative;background:#1b1636;border:1px solid #6b4fd8;border-radius:16px;padding:16px;width:min(360px,100%);text-align:center;animation:pop .25s}
.kcClose{position:absolute;top:8px;right:8px;padding:4px 10px;background:#2a2150}
.kcImg{height:300px;margin:-4px auto 6px}
.kcImg img{height:100%;filter:drop-shadow(0 6px 18px #000)}
.kcImg.locked img{filter:brightness(0) drop-shadow(0 0 10px #6b4fd8);opacity:.8}
.kcLand{font-size:13px;opacity:.75}
.kc h2{margin:4px 0}
.kcQuote{font-style:italic;color:#ffd36b;margin:6px 0 12px}
.kcLock{opacity:.8}
#kingStage{position:fixed;left:0;right:0;top:0;height:260px;z-index:5;pointer-events:none;display:flex;justify-content:center}
.kWrap{position:relative;height:100%;aspect-ratio:2/3;animation:breathe 4s ease-in-out infinite;transform-origin:50% 100%}
.kWrap>img{height:100%;width:100%;object-fit:contain;filter:drop-shadow(0 0 18px var(--aura)) drop-shadow(0 6px 10px #000);animation:aura 3s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025) translateY(-1%)}}
@keyframes aura{0%,100%{filter:drop-shadow(0 0 10px var(--aura)) drop-shadow(0 6px 10px #000)}50%{filter:drop-shadow(0 0 26px var(--aura)) drop-shadow(0 6px 10px #000)}}
.kWrap.shake{animation:kshake .5s}
.kWrap.laugh{animation:klaugh .7s}
@keyframes kshake{0%,100%{transform:none}20%{transform:translateX(-8px) rotate(-2deg)}40%{transform:translateX(8px) rotate(2deg)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@keyframes klaugh{0%,100%{transform:none}25%{transform:translateY(-6px) scale(1.04)}50%{transform:none}75%{transform:translateY(-4px) scale(1.03)}}
.shard{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:shardFall 1.6s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes shardFall{to{transform:translate(var(--dx),120vh) rotate(var(--rot));opacity:0}}
.kSay{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);max-width:min(300px,86vw);background:#fff;color:#1b1430;font-weight:600;font-size:14px;padding:8px 12px;border-radius:14px;box-shadow:0 4px 14px #0008;white-space:normal;text-align:center}
.kSay::after{content:"";position:absolute;top:-8px;left:50%;border:8px solid transparent;border-bottom-color:#fff;border-top:0;transform:translateX(-50%)}
.kSay.pop{animation:pop .25s}
@media (orientation:landscape){#kingStage{left:8px;right:auto;top:auto!important;bottom:0;height:min(70vh,560px)!important;justify-content:flex-start}.kSay{bottom:auto;top:6%}}
body.intro #kingStage{opacity:0}
#kingStage.compact{height:auto}
#kingStage.compact .kWrap{display:none}
#kingStage.compact .kSay{position:relative;bottom:auto;top:auto;left:auto;transform:none;margin:0 auto}
#kingStage.compact .kSay::after{left:18%}
.pcard.shake{animation:kshake .5s}.pcard.laugh{animation:klaugh .7s}
#kingStage{transition:opacity .5s}
.hidden{display:none!important}
#sndBtn{position:fixed;top:10px;right:10px;z-index:60;width:40px;height:40px;padding:0;font-size:18px;border-radius:50%;background:rgba(20,14,40,.65);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px)}

.chNav{display:flex;align-items:center;gap:6px}
.chNav button{width:30px;height:30px;padding:0;font-size:18px}
.chNav button:disabled{opacity:.3}
.mapWrap.noMap{min-height:150vw;max-height:none;background:radial-gradient(ellipse at 50% 15%,#3a2a5c,#141026 70%)}
.mapWrap.noMap>img{display:none}
.mapWrap.noMap::before{content:"Harita yakında";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#ffffff55;font-size:14px}
.chLock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#000a;padding:10px 16px;border-radius:12px;font-weight:700;z-index:5}
#mapView .mapTop{padding-right:56px}
.lic{display:block;margin-top:8px;font-size:11px;opacity:.55}.lic a{color:inherit}