:root{
  --bg:#171421; --card:#302947; --card2:#251F39; --accent:#A994E8; --accent2:#C5B5F5;
  --ink:#F8F5FF; --ink2:#B8AEC9; --line:#82749F; --on-accent:#171421;
  color-scheme: dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%;background:var(--bg);overflow-x:clip}
body{
  margin:0;min-height:100%;color:var(--ink);
  background:radial-gradient(ellipse 80% 55% at 50% 38%,rgba(169,148,232,.13),transparent 70%),var(--bg);
  font-family:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(16px,3vh,32px);padding:16px;overflow-x:clip;
}
.deck{position:relative;width:min(94vw,520px);height:min(78vh,740px);min-height:500px}
.deck::before,.deck::after{content:"";position:absolute;inset:0;border-radius:32px;box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:0}
.deck::before{background:#2a2342;transform:rotate(-3deg) translateY(6px)}
.deck::after{background:#211b34;transform:rotate(2.5deg) translateY(10px)}
.card{
  position:relative;z-index:1;width:100%;height:100%;border-radius:32px;background:var(--card2);
  box-shadow:0 24px 60px rgba(0,0,0,.5);overflow:hidden;
  display:grid;grid-template-rows:minmax(0,7fr) minmax(0,3fr);   /* oranlar render() içinde aktif oyuncuya göre güncellenir */
  transition:grid-template-rows .55s cubic-bezier(.65,.05,.25,1);
}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(197,181,245,.12);pointer-events:none;z-index:2}
.half{position:relative;min-height:0;min-width:0;overflow:hidden}
#halfB{border-top:1px dashed var(--line)}   /* ayırıcı çizgi B bölümünün üst kenarı: oranlarla birlikte hareket eder */
.half::before{content:"";position:absolute;inset:0;background:linear-gradient(165deg,#3a3158 0%,var(--card) 55%,#2b2442 100%);opacity:0;transition:opacity .5s ease}
.half.active::before{opacity:1}
.inner{position:absolute;inset:0;padding:22px 18px 16px;transition:padding .55s cubic-bezier(.65,.05,.25,1);display:flex;flex-direction:column}
#halfB .inner{transform:rotate(180deg)}
.top{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:36px}
.badge{
  font-weight:500;font-size:.85rem;letter-spacing:.02em;padding:6px 14px;border-radius:999px;color:var(--ink2);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:background .4s ease,color .4s ease,box-shadow .4s ease;
}
.active .badge{background:var(--accent);color:var(--on-accent);box-shadow:none;font-weight:600}
.tr{
  font:inherit;font-weight:500;font-size:.8rem;min-width:46px;height:34px;padding:0 12px;border-radius:999px;cursor:pointer;
  border:0;background:transparent;color:var(--accent2);box-shadow:inset 0 0 0 1px var(--accent2);
  transition:background .25s ease,color .25s ease,opacity .25s ease,transform .2s ease;
}
.tr[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);box-shadow:none}
.tr:disabled{opacity:.3;cursor:not-allowed}
.body{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  text-align:center;padding:4px 8px 8px;min-height:0;overflow:auto;
  transition:opacity .35s ease,transform .35s ease,padding .55s ease;
}
.inactive .body{opacity:.4}
.body.fade{opacity:0;transform:translateY(6px)}
.q{
  margin:0;text-wrap:balance;font-family:"Fraunces",Georgia,"Times New Roman",serif;font-weight:500;color:var(--ink);
  font-size:clamp(1.3rem,4.6vw,2.05rem);line-height:1.25;letter-spacing:-.005em;
}
.kz{
  margin:0;text-wrap:balance;padding-top:12px;border-top:1px solid var(--line);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:500;
  font-size:clamp(1rem,3.4vw,1.35rem);line-height:1.3;color:var(--accent2);
}
.q,.kz{transition:font-size .55s ease}
.inactive .q{font-size:clamp(.95rem,3.2vw,1.2rem);color:var(--ink2)}
.inactive .kz{font-size:clamp(.78rem,2.5vw,1rem);padding-top:6px;line-height:1.2}
.inactive .q{line-height:1.15}
.inactive .body{gap:6px;padding:0 46px 2px}
.acts{display:flex;gap:12px;justify-content:center;flex:none;overflow:hidden;max-height:70px;padding:4px 0 2px;transition:max-height .55s cubic-bezier(.65,.05,.25,1),opacity .4s ease,padding .55s ease}
.inactive .acts{max-height:0;opacity:0;padding:0;pointer-events:none}
.acts.ended button{padding:12px 18px;font-size:.95rem;white-space:nowrap}
button.big{
  font:inherit;font-weight:500;font-size:1.05rem;cursor:pointer;border:0;letter-spacing:.01em;
  padding:12px 30px;border-radius:999px;min-height:50px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.primary{background:var(--accent);color:var(--on-accent);font-weight:600;box-shadow:none}
.ghost{background:transparent;color:var(--accent2);box-shadow:inset 0 0 0 1px var(--accent)}
button:hover:not(:disabled){transform:scale(1.04)}
button:active:not(:disabled){transform:scale(.96)}
.primary:hover:not(:disabled){background:var(--accent2)}
button:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
.badge{max-width:calc(100% - 104px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.setup{
  width:min(92vw,440px);padding:clamp(24px,6vw,40px);border-radius:32px;position:relative;
  background:linear-gradient(165deg,#3a3158 0%,var(--card) 55%,#2b2442 100%);
  box-shadow:0 24px 60px rgba(0,0,0,.5),inset 0 0 0 1px rgba(197,181,245,.12);
  display:flex;flex-direction:column;gap:20px;animation:rise .55s ease both;
}
.setup h1{margin:0 0 4px;text-align:center;font-family:"Fraunces",Georgia,"Times New Roman",serif;font-weight:500;font-size:clamp(1.6rem,6vw,2.1rem);line-height:1.2;color:var(--ink)}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.85rem;font-weight:500;letter-spacing:.02em;color:var(--ink2)}
.field input{
  font:inherit;font-size:1.05rem;color:var(--ink);background:var(--card2);width:100%;
  border:0;border-radius:16px;padding:14px 16px;min-height:52px;
  box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .25s ease,background .25s ease;
}
.field input::placeholder{color:var(--ink2);opacity:.6}
.field input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--accent);background:#2a2342}
.setup .primary{width:100%;margin-top:6px}
.primary:disabled{opacity:.35;cursor:not-allowed}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.progress{width:min(94vw,520px);display:flex;align-items:center;gap:12px;font-size:.85rem;color:var(--ink2)}
.bar{flex:1;height:4px;border-radius:4px;background:var(--card2)}
.bar i{display:block;height:100%;width:0;border-radius:4px;background:var(--accent);transition:width .55s ease}
.xtra{position:relative;font:inherit;font-weight:500;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;color:var(--accent2);background:transparent;border:0;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line);transition:transform .2s ease,opacity .2s ease}
.xtra:disabled{opacity:.35;cursor:not-allowed}
.tools{display:flex;align-items:center;gap:8px}
.xwrap{position:absolute;z-index:3;display:inline-flex;right:72px;top:23px;transition:top .55s cubic-bezier(.65,.05,.25,1),right .55s cubic-bezier(.65,.05,.25,1)}
/* konum, hakkı kullanabilecek (sırası gelmeyen) oyuncunun alanında: ayırıcı çizgiye yakın alt köşe (B'de 180° döndüğü için ekranda üst köşe) */
.inactive .xwrap{top:calc(100% - 44px);right:18px}
.inactive .inner{padding:10px 18px 8px}
.xtra::before{content:"";position:absolute;inset:-5px;border-radius:50%}
.xtra:disabled ~ .bal{opacity:.5}
.bal{position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);background:var(--card2);color:var(--ink);font-size:.68rem;line-height:1.2;padding:1px 7px;border-radius:9px;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--accent);pointer-events:none}
.bal::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--accent)}
.bal{min-width:24px;text-align:center}
.bal.err{color:var(--accent2)}
.xtra.busy{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
.lvls{display:flex;flex-direction:column;gap:10px}
.lvlcard{font:inherit;text-align:left;color:var(--ink);background:var(--card2);border:0;border-radius:18px;padding:13px 16px;cursor:pointer;display:flex;flex-direction:column;gap:3px;box-shadow:inset 0 0 0 1px var(--line);transition:background .25s ease,box-shadow .25s ease}
.lvlcard b{font-family:"Fraunces",Georgia,"Times New Roman",serif;font-weight:500;font-size:1.08rem}
.lvlcard .d{font-size:.84rem;color:var(--ink2)}
.lvlcard .c{font-size:.74rem;color:var(--accent2);opacity:.9}
.lvlcard[aria-checked="true"]{background:#2f2750;box-shadow:inset 0 0 0 1.5px var(--accent)}
.lvlcard[aria-checked="true"] b::after{content:" ✓";color:var(--accent)}
.lvlcard:hover:not(:disabled),.reset:hover:not(:disabled){transform:none}
.lvlpill{font-size:.72rem;padding:3px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);color:var(--accent2);white-space:nowrap;max-width:48%;overflow:hidden;text-overflow:ellipsis}
.reset{font:inherit;font-size:.75rem;background:none;border:0;color:var(--ink2);cursor:pointer;padding:4px 2px;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.seg{display:flex;gap:8px}
.seg button{flex:1;font:inherit;font-size:1rem;min-height:48px;border:0;border-radius:16px;cursor:pointer;color:var(--ink2);background:var(--card2);box-shadow:inset 0 0 0 1px var(--line);transition:background .25s ease,color .25s ease}
.seg button.on{background:var(--accent);color:var(--on-accent);box-shadow:none;font-weight:600}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion: reduce){
  .setup{animation:none}
  .bar i,.extra,.xtra,.seg button{transition:none}
  .xtra.busy{animation:none}
  .field input{transition:none}
  .inner,.xwrap,.card,.half,.half::before,.body,.badge,.tr,button,button.big,.acts,.q,.kz{transition:none!important}
  button:hover:not(:disabled),button:active:not(:disabled){transform:none}
}