/* Tüm sayfaların ortak parçaları: zemin, sayfa iskeleti, üst çubuk, düğmeler, anahtarlar, bölmeli seçici,
   takım arması, alt paneller (Ayarlar / İstatistikler / Kurallar), Koç kutusu. */
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;background:var(--bg0);scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  min-height:100%;margin:0;color:var(--text);font-family:var(--f-body);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  background:
    radial-gradient(70% 40% at 50% 18%, rgba(242,193,78,.12), transparent 70%),
    radial-gradient(90% 50% at 50% 100%, rgba(134,230,255,.10), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.02) 0 1px, transparent 1px 22px),
    linear-gradient(var(--bg1), var(--bg0) 60%);
  background-attachment:fixed;
}
button,input{font:inherit;color:inherit}
button{-webkit-appearance:none;appearance:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold-hi);outline-offset:3px}
[hidden]{display:none!important}

/* ---------- sayfa iskeleti ---------- */
.page{max-width:460px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:0 16px 24px;position:relative}
.topbar{flex:none;height:60px;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px}
.topbar .tb-title{text-align:center;line-height:1.05}
.topbar .tb-title small{display:block;font:800 10.5px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.topbar .tb-title b{font:22px var(--f-display);color:var(--gold-hi);text-shadow:0 2px 0 var(--gold-ink);letter-spacing:.02em}
.topbar .tb-end{display:flex;gap:8px;justify-content:flex-end}
.section-label{font:800 11px var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:22px 4px 10px}

/* ---------- düğmeler ---------- */
.icon-btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;cursor:pointer;padding:0;flex:none;text-decoration:none;
  border:1.5px solid rgba(242,193,78,.55);color:var(--gold-hi);
  background:linear-gradient(var(--stone2),var(--stone));
  box-shadow:0 3px 0 var(--stone-edge), inset 0 1px 0 rgba(255,255,255,.12)}
.icon-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--stone-edge)}
.icon-btn svg{width:20px;height:20px}
.btn{border:0;cursor:pointer;font:18px/1 var(--f-display);padding:14px 18px;border-radius:14px;color:var(--gold-ink);letter-spacing:.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  background:linear-gradient(#FFE08A,#F2B33D 55%,#C98418);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(0,0,0,.18),0 4px 0 #7a4a0c,0 8px 14px var(--shadow)}
.btn:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 1px 0 #7a4a0c}
.btn svg{width:20px;height:20px}
.btn.ghost{color:var(--gold-hi);background:linear-gradient(var(--stone2),var(--stone));
  box-shadow:inset 0 0 0 1.5px rgba(242,193,78,.55),0 4px 0 var(--stone-edge),0 8px 14px var(--shadow)}
.btn.ghost:active{box-shadow:inset 0 0 0 1.5px rgba(242,193,78,.55),0 1px 0 var(--stone-edge)}
.btn:disabled,.btn[aria-disabled="true"]{cursor:default;filter:saturate(.25) brightness(.7);transform:none;
  box-shadow:inset 0 0 0 1.5px rgba(242,193,78,.25),0 4px 0 var(--stone-edge)}
.btn.block{display:flex;width:100%}

/* ---------- anahtar ---------- */
.switch{display:inline-flex;align-items:center;cursor:pointer;position:relative;flex:none}
.switch input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.sw{width:42px;height:24px;border-radius:99px;background:var(--stone-edge);position:relative;flex:none;
  box-shadow:inset 0 0 0 1.5px rgba(242,193,78,.45);transition:background .2s}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;
  background:linear-gradient(var(--gold-hi),var(--gold) 60%,var(--gold-lo));box-shadow:0 1px 0 var(--gold-ink);transition:transform .2s}
input:checked + .sw::after{transform:translateX(18px)}
input:focus-visible + .sw{outline:3px solid var(--gold-hi);outline-offset:2px}
.switch input:checked + .sw{background:var(--frost-lo)}

/* ---------- bölmeli seçici ---------- */
.seg{display:inline-flex;background:var(--stone-edge);border-radius:11px;padding:3px;gap:3px;box-shadow:inset 0 0 0 1px rgba(242,193,78,.35)}
.seg button{border:0;background:transparent;color:var(--muted);font:16px/1 var(--f-display);padding:8px 14px;border-radius:8px;cursor:pointer;min-width:46px}
.seg button[aria-pressed="true"]{background:linear-gradient(var(--gold-hi),var(--gold));color:var(--gold-ink);box-shadow:0 2px 0 var(--gold-lo)}
/* "Özel" sayı kutusu (cam kalınlığı): boşken soluk, özel değer seçiliyken seçili düğme gibi */
.seg-num{width:58px;min-width:0;border:0;border-radius:8px;padding:6px 4px;text-align:center;font:16px/1 var(--f-display);color:var(--text);
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(242,193,78,.4);-moz-appearance:textfield;appearance:textfield}
.seg-num::-webkit-inner-spin-button,.seg-num::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.seg-num::placeholder{font:800 12px var(--f-body);color:var(--muted);opacity:1}
.seg-num:focus{outline:none;box-shadow:inset 0 0 0 2px var(--gold-hi)}
.seg-num.on:not(:focus){background:linear-gradient(var(--gold-hi),var(--gold));color:var(--gold-ink);box-shadow:0 2px 0 var(--gold-lo)}

/* ---------- rozet ---------- */
.badge-pill{display:inline-block;font:900 10.5px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:99px;
  color:var(--frost);background:rgba(134,230,255,.12);box-shadow:inset 0 0 0 1.5px rgba(134,230,255,.5)}
.badge-pill.gold{color:var(--gold-hi);background:rgba(242,193,78,.14);box-shadow:inset 0 0 0 1.5px rgba(242,193,78,.55)}
.badge-pill.muted{color:var(--muted);background:rgba(174,179,224,.10);box-shadow:inset 0 0 0 1.5px rgba(174,179,224,.35)}
.badge-pill.red{color:var(--red-hi);background:rgba(255,93,112,.12);box-shadow:inset 0 0 0 1.5px rgba(255,93,112,.5)}

/* ---------- takım arması (avatar) ---------- */
.crest{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;position:relative;overflow:visible;
  font:20px/1 var(--f-display);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35);
  background:radial-gradient(circle at 35% 30%, var(--team-hi), var(--team) 45%, var(--team-lo));
  box-shadow:0 0 0 2px var(--gold),0 0 0 3.5px var(--gold-ink),0 3px 6px var(--shadow)}
.crest img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.crest .bot-tag{position:absolute;right:-6px;bottom:-5px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  background:var(--stone-edge);color:var(--frost);box-shadow:0 0 0 1.5px var(--gold)}
.crest .bot-tag svg{width:12px;height:12px}

/* ---------- Koç kutusu (oyunda ve Ayarlar önizlemesinde) ---------- */
.coach{padding:8px 12px 8px 36px;border-radius:12px;position:relative;
  font:700 12.5px/1.4 var(--f-body);color:var(--gold-hi);
  background:linear-gradient(rgba(242,193,78,.17),rgba(242,193,78,.07));box-shadow:inset 0 0 0 1.5px rgba(242,193,78,.5)}
.coach svg{position:absolute;left:10px;top:9px;width:17px;height:17px;color:var(--gold)}

/* ---------- alt panel ---------- */
.sheet{position:fixed;inset:0;z-index:100;visibility:hidden;transition:visibility 0s .3s}
.sheet.open{visibility:visible;transition:none}
.sheet-scrim{position:absolute;inset:0;background:rgba(5,6,20,.62);opacity:0;transition:opacity .25s}
.sheet.open .sheet-scrim{opacity:1}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-width:460px;max-height:86vh;max-height:86dvh;display:flex;flex-direction:column;
  border-radius:22px 22px 0 0;background:linear-gradient(180deg,var(--stone2),var(--bg1));
  box-shadow:0 -1.5px 0 rgba(242,193,78,.6),0 -14px 40px rgba(0,0,0,.55);
  padding-bottom:env(safe-area-inset-bottom,0px);
  transform:translateY(104%);transition:transform .3s cubic-bezier(.3,.9,.3,1)}
.sheet.open .sheet-panel{transform:none}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 12px;border-bottom:1px solid rgba(242,193,78,.18)}
.sheet-head h2{margin:0;display:flex;align-items:center;gap:10px;font:22px var(--f-display);color:var(--gold-hi);text-shadow:0 2px 0 var(--gold-ink)}
.sheet-head h2 i{display:grid;place-items:center;color:var(--gold)}
.sheet-head h2 svg{width:22px;height:22px}
.sheet-body{overflow-y:auto;padding:14px 16px 18px;user-select:text;-webkit-user-select:text}
.sheet-foot{padding:12px 16px 16px;border-top:1px solid rgba(242,193,78,.18)}
.sheet-btns{display:grid;grid-template-columns:1fr 1.3fr;gap:10px}
.sheet-lead{font:700 13.5px/1.5 var(--f-body);color:var(--muted);margin:0 0 12px}
.empty-box{padding:28px 16px;text-align:center;border-radius:14px;border:1.5px dashed rgba(242,193,78,.35);font:700 14px/1.5 var(--f-body);color:var(--muted)}

/* Ayarlar */
.set-list{display:flex;flex-direction:column;gap:10px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:13px 14px;border-radius:14px;
  background:rgba(10,13,38,.45);box-shadow:inset 0 0 0 1px rgba(242,193,78,.22)}
.set-txt{flex:1;min-width:0}
.set-txt b{display:block;font:800 15px var(--f-body);color:var(--text)}
.set-txt small{display:block;font:600 12.5px/1.4 var(--f-body);color:var(--muted);margin-top:3px}
.coach-preview{flex-basis:100%;display:flex;align-items:center;gap:12px;margin-top:4px;transition:opacity .25s,filter .25s}
.set-row:not(:has(input:checked)) .coach-preview{opacity:.45;filter:saturate(.3)}
.cp-dir{position:relative;width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--ember);
  background:radial-gradient(circle at 50% 30%,var(--stone2),var(--stone) 60%,var(--stone-edge));
  box-shadow:0 0 0 2.5px var(--gold),0 0 0 6px rgba(255,233,168,.0),0 0 14px var(--gold);animation:cpPulse 1.4s ease-in-out infinite}
.cp-dir svg{width:52%;height:52%}
.cp-dir em{position:absolute;top:-6px;left:-8px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;font:13px/20px var(--f-display);font-style:normal;text-align:center;
  color:var(--gold-ink);background:linear-gradient(var(--gold-hi),var(--gold) 55%,var(--gold-lo));box-shadow:0 0 0 1.5px var(--gold-ink)}
@keyframes cpPulse{50%{box-shadow:0 0 0 2.5px var(--gold-hi),0 0 24px var(--gold)}}
.cp-box{flex:1;font-size:12px}

/* İstatistik */
.stat-cards{display:flex;flex-direction:column;gap:10px}
.stat-card{padding:12px 14px;border-radius:14px;background:rgba(10,13,38,.45);box-shadow:inset 0 0 0 1px rgba(242,193,78,.22)}
.stat-card header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.stat-card header b{font:16px var(--f-display);color:var(--gold-hi)}
.stat-card .tag{font:800 11px var(--f-body);color:var(--frost);background:rgba(134,230,255,.1);padding:3px 8px;border-radius:99px}
.stat-card .n{margin-left:auto;font:800 12px var(--f-body);color:var(--muted)}
.sc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sc-grid div{background:var(--stone-edge);border-radius:10px;padding:7px 8px}
.sc-grid small{display:block;font:700 10.5px var(--f-body);color:var(--muted)}
.sc-grid b{font:17px var(--f-display);color:var(--text)}

/* Kurallar */
.rules p{font:600 13.5px/1.55 var(--f-body);color:var(--muted);margin:0 0 10px}
.rules b{color:var(--text)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}