/* SPECTRE modern layer — same DOM and structure, refreshed surface, type and desktop layout.
   Colours default to the logo palette; admin theme (Marka & Tema) overrides via --m-accent / --m-accent2. */
@font-face{font-family:'Spectre Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(/v38/manrope-variable-v38.woff2) format('woff2')}
:root{
  --m-accent:#5cc8ff;--m-accent2:#a99bff;--m-radius:16px;
  --m-line:rgba(160,215,255,.16);--m-line-strong:rgba(160,215,255,.34);
  --m-glass:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  --m-glass-solid:rgba(8,22,40,.72);
  --m-shadow:0 10px 30px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.08);
  --m-glow:0 0 0 1px color-mix(in srgb,var(--m-accent) 55%,transparent),0 8px 26px color-mix(in srgb,var(--m-accent) 28%,transparent);
  --m-ease:cubic-bezier(.2,.7,.2,1);
}
html.sp-page-lobby,html.sp-page-masa,html.sp-page-profil{font-family:'Spectre Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.sp-page-lobby :is(button,input,select,textarea,b,small,span,div,strong),
html.sp-page-masa .room :is(button,input,select,textarea,b,small,span,div,strong),
html.sp-page-profil .profile-shell :is(button,input,a,b,small,span,div,strong){font-family:inherit}
html.sp-page-lobby body,html.sp-page-masa body,html.sp-page-profil body{font-family:'Spectre Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* shared micro-interactions */
html:is(.sp-page-lobby,.sp-page-masa,.sp-page-profil) button{transition:transform .16s var(--m-ease),box-shadow .2s var(--m-ease),background-color .2s,border-color .2s,filter .2s}
html:is(.sp-page-lobby,.sp-page-masa,.sp-page-profil) button:active:not(:disabled):not(.seat){transform:scale(.97)}
@media (hover:hover){
  html:is(.sp-page-lobby,.sp-page-masa) button:hover:not(:disabled):not(.seat):not(.play){filter:brightness(1.12);border-color:var(--m-line-strong)}
}

/* ===================== LOBBY ===================== */
html.sp-page-lobby .stats{gap:8px;padding:8px 10px}
html.sp-page-lobby .stat{border-radius:14px;background:var(--m-glass);border:1px solid var(--m-line);box-shadow:var(--m-shadow);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2)}
html.sp-page-lobby .stat b{letter-spacing:.2px;font-weight:700}
html.sp-page-lobby .market-button{border-radius:12px;font-weight:800;letter-spacing:.3px;background:linear-gradient(135deg,color-mix(in srgb,var(--m-accent) 32%,#0a2a48),color-mix(in srgb,var(--m-accent2) 26%,#0a2a48));border:1px solid var(--m-line-strong);box-shadow:var(--m-shadow)}
html.sp-page-lobby .identity{margin:0 10px;border-radius:20px;background:var(--m-glass);border:1px solid var(--m-line);box-shadow:var(--m-shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html.sp-page-lobby .portrait{border-radius:18px;box-shadow:var(--m-glow)}
html.sp-page-lobby .name{font-weight:800;letter-spacing:.2px}
html.sp-page-lobby .rank{border-radius:12px;font-weight:700;background:var(--m-glass);border:1px solid var(--m-line);box-shadow:var(--m-shadow)}
html.sp-page-lobby .side button{border-radius:14px;background:var(--m-glass);border:1px solid var(--m-line);box-shadow:var(--m-shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html.sp-page-lobby .accounts-zone .account-tools button,html.sp-page-lobby .account-actions button{border-radius:12px;font-weight:700}
html.sp-page-lobby .play{border-radius:18px;font-weight:800;letter-spacing:.6px;background:linear-gradient(135deg,color-mix(in srgb,var(--m-accent) 90%,#fff),color-mix(in srgb,var(--m-accent2) 75%,var(--m-accent)));color:#041424;border:0;box-shadow:0 10px 30px color-mix(in srgb,var(--m-accent) 38%,transparent),inset 0 1px 0 rgba(255,255,255,.55)}
@media (hover:hover){html.sp-page-lobby .play:hover{transform:translateY(-2px);box-shadow:0 14px 38px color-mix(in srgb,var(--m-accent) 50%,transparent),inset 0 1px 0 rgba(255,255,255,.6)}}
html.sp-page-lobby .leagues{gap:10px;padding:10px}
html.sp-page-lobby .league{border-radius:18px;background:var(--m-glass);border:1px solid var(--m-line);box-shadow:var(--m-shadow);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html.sp-page-lobby .league-title{font-weight:800;letter-spacing:.3px}

/* ===================== MASA ===================== */
html.sp-page-masa .hud .balance,html.sp-page-masa .hud .credits{border-radius:12px;background:var(--m-glass);border:1px solid var(--m-line);box-shadow:var(--m-shadow)}
html.sp-page-masa .buttons .button{border-radius:12px;box-shadow:var(--m-shadow)}
html.sp-page-masa .seat{border-radius:16px;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.34);border:1px solid var(--m-line)}
@media (hover:hover){html.sp-page-masa .seat:hover{border-color:var(--m-line-strong);box-shadow:0 10px 26px rgba(0,0,0,.4),0 0 0 1px color-mix(in srgb,var(--m-accent) 40%,transparent)}}
html.sp-page-masa .chat{border-radius:18px;background:var(--m-glass-solid);border:1px solid var(--m-line);box-shadow:var(--m-shadow)}
html.sp-page-masa .composer{background:var(--m-glass-solid);border-top:1px solid var(--m-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html.sp-page-masa #message{border-radius:999px;border:1px solid var(--m-line);padding-inline:16px}
html.sp-page-masa #message:focus{border-color:var(--m-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--m-accent) 25%,transparent);outline:0}
html.sp-page-masa .automation-sidebar{background:var(--m-glass-solid);border-left:1px solid var(--m-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html.sp-page-masa .quick-automation-control{border-radius:12px;background:var(--m-glass);border:1px solid var(--m-line);font-weight:700}
html.sp-page-masa .quick-automation-control.is-active{border-color:var(--m-accent);box-shadow:var(--m-glow)}

/* ===================== PROFIL ===================== */
html.sp-page-profil body{background:#020711 url(/v38/spectre-glass-v38.webp) center/cover fixed no-repeat}
html.sp-page-profil .native-top-bar{background:var(--m-glass-solid);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--m-line)}

/* ===================== DESKTOP LAYOUT (same structure, centred and roomier) ===================== */
@media (min-width:900px){
  html.sp-page-lobby body{background:radial-gradient(1200px 600px at 50% -10%,rgba(92,200,255,.14),transparent 60%),radial-gradient(900px 500px at 100% 100%,rgba(169,155,255,.12),transparent 60%),#030b16}
  html.sp-page-lobby main.app{width:100%!important;max-width:1120px!important;margin:16px auto!important;height:calc(100dvh - 32px)!important;min-height:560px!important;border-radius:28px;border:1px solid var(--m-line);background:rgba(4,14,28,.62);box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  html.sp-page-lobby .leagues .league{min-height:72px}
  html.sp-page-profil .profile-shell{max-width:600px;margin:16px auto;height:calc(100dvh - 32px);border-radius:28px;border:1px solid var(--m-line);box-shadow:0 30px 80px rgba(0,0,0,.55);overflow:hidden}
  html.sp-page-profil .kk-room-modal-container{border-radius:24px;border:1px solid var(--m-line);box-shadow:0 30px 80px rgba(0,0,0,.55)}
}
@media (min-width:980px){
  html.sp-page-masa .room{border-radius:28px;border:1px solid var(--m-line);box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden}
}
@media (min-width:1500px){
  html.sp-page-lobby main.app{max-width:1240px!important}
  html.sp-page-profil .profile-shell{max-width:640px}
}
@media (max-width:899px){
  html.sp-page-lobby .stat,html.sp-page-lobby .league,html.sp-page-lobby .identity{-webkit-backdrop-filter:none;backdrop-filter:none}  /* cheaper on phones */
}
html.sp-lite :is(.stat,.identity,.league,.side button,.composer,.automation-sidebar,.native-top-bar,main.app){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
@media (prefers-reduced-motion:reduce){html button{transition:none!important}}
@media (max-width:640px){
  html.sp-page-profil .profile-shell{max-width:none!important;width:100%!important;margin:0!important;height:100dvh!important;border-radius:0!important;border:0!important}
  html.sp-page-profil .kk-room-modal-container{max-width:none!important;width:100%!important;border-radius:0!important;border:0!important;height:100dvh!important;margin:0!important}
}

/* ===================== DESKTOP REDESIGN (>=1100px): lobby = dashboard, masa = 3 columns ===================== */
@media (min-width:1100px){
  /* LOBBY: account card + Play on the left, labelled quick-access lists on the right */
  html.sp-page-lobby .body{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr) auto!important;gap:16px 20px!important;padding:18px 22px!important;align-items:stretch}
  html.sp-page-lobby .accounts-zone{position:static!important;left:auto!important;top:auto!important;transform:none!important;grid-column:1!important;grid-row:1!important;width:100%!important;max-width:460px;justify-self:center;align-self:center}
  html.sp-page-lobby .play{position:static!important;left:auto!important;bottom:auto!important;transform:none!important;grid-column:1!important;grid-row:2!important;justify-self:center;width:min(100%,380px)!important;height:58px!important;font-size:18px}
  html.sp-page-lobby .side{position:static!important;inset:auto!important;transform:none!important;grid-row:1 / 3!important;display:flex!important;flex-direction:column;justify-content:center;gap:10px;width:auto!important;height:auto!important;padding:14px;border-radius:22px;background:var(--m-glass);border:1px solid var(--m-line);box-shadow:var(--m-shadow)}
  html.sp-page-lobby .side.left{grid-column:2!important}
  html.sp-page-lobby .side.right{grid-column:3!important}
  html.sp-page-lobby .side button{width:100%!important;height:56px!important;border-radius:14px;display:flex!important;align-items:center;justify-content:flex-start!important;gap:14px;padding:0 16px!important;font-size:14px;font-weight:700;color:var(--m-ink,#e9f8ff);text-align:left}
  html.sp-page-lobby .side button::after{content:attr(aria-label);flex:1}
  html.sp-page-lobby .side button svg{flex:none;width:24px;height:24px}
  html.sp-page-lobby .leagues{padding:0 22px 20px!important;gap:16px!important}
  html.sp-page-lobby .league{min-height:84px}
  html.sp-page-lobby .identity{margin:0 22px!important}
  html.sp-page-lobby .stats{padding:14px 22px 10px!important}
}
@media (min-width:1180px) and (min-height:600px){
  /* MASA: [board + buttons] [chat] [automation]; the table itself is untouched */
  html.sp-page-masa main#app.room{max-width:1640px;width:calc(100% - 32px);grid-template-columns:minmax(0,1fr) 400px 300px!important;grid-template-rows:60px 56px minmax(0,1fr) 62px!important;gap:12px!important;padding:12px!important;background:rgba(3,12,24,.55)}
  html.sp-page-masa .hud{grid-column:1 / -1!important;grid-row:1!important;border:1px solid var(--m-line)!important;border-radius:16px;background:var(--m-glass);padding:8px 12px!important}
  html.sp-page-masa .buttons{grid-column:1!important;grid-row:2!important;width:100%!important;max-width:none!important;justify-self:stretch!important;padding:4px 6px!important;border:0!important}
  html.sp-page-masa .stage{grid-column:1!important;grid-row:3 / 5!important;width:min(100%,720px)!important;max-width:720px!important;height:100%!important;justify-self:center!important;align-self:stretch!important}
  html.sp-page-masa .chat-wrap{grid-column:2!important;grid-row:2 / 4!important;border:1px solid var(--m-line)!important;border-radius:20px;background:var(--m-glass-solid)!important;box-shadow:var(--m-shadow);padding:12px 14px!important;overflow:hidden}
  html.sp-page-masa .composer{grid-column:2!important;grid-row:4!important;border:1px solid var(--m-line)!important;border-radius:18px;height:62px!important;padding:9px 10px!important;background:var(--m-glass-solid)!important}
  html.sp-page-masa .automation-sidebar{grid-column:3!important;grid-row:2 / 5!important;border:1px solid var(--m-line)!important;border-radius:20px;box-shadow:var(--m-shadow);padding:14px!important;overflow:auto}
  html.sp-page-masa .automation-sidebar header{font-weight:800;letter-spacing:.3px}
  html.sp-page-masa .quick-automation-rail{gap:8px}
  html.sp-page-masa .quick-automation-control{min-height:46px}
  html.sp-page-masa .chat-media-status{grid-column:2!important}
  html.sp-page-masa .connection{right:calc(300px + 28px)}
}

/* Button skins (Düğme Arşivi) — colour comes from --kk-btn (set from the admin) */
.kk-dynamic-btn{--kk-btn:#4edfff}
.kk-dynamic-btn[data-skin=glass]{background:rgba(255,255,255,.07);border:1px solid color-mix(in srgb,var(--kk-btn) 45%,transparent);backdrop-filter:blur(8px)}
.kk-dynamic-btn[data-skin=neon]{background:rgba(0,0,0,.35);border:1px solid var(--kk-btn);color:var(--kk-btn);box-shadow:0 0 10px color-mix(in srgb,var(--kk-btn) 60%,transparent),inset 0 0 8px color-mix(in srgb,var(--kk-btn) 30%,transparent);text-shadow:0 0 6px var(--kk-btn)}
.kk-dynamic-btn[data-skin=flat]{background:color-mix(in srgb,var(--kk-btn) 28%,#0a1626);border:0}
.kk-dynamic-btn[data-skin=outline]{background:transparent;border:2px solid var(--kk-btn)}
.kk-dynamic-btn[data-skin=gradient]{background:linear-gradient(135deg,var(--kk-btn),color-mix(in srgb,var(--kk-btn) 40%,#6a5cff));color:#04121f;border:0;font-weight:800}
.kk-dynamic-btn[data-skin=pill]{border-radius:999px;background:color-mix(in srgb,var(--kk-btn) 22%,#0a1626);border:1px solid var(--kk-btn)}