:root {
    --bg: #0a0a0f;
    --bg2: #111118;
    --bg3: #18181f;
    --card: #1c1c25;
    --border: #2a2a38;
    --accent: #e8c84a;
    --accent2: #ff4545;
    --accent3: #4affe0;
    --text: #e8e8f0;
    --muted: #7070a0;
    --green: #3dff8a;
    --red: #ff4545;
    --gold: #e8c84a;
    --nav-rail-height: 102px;
    --hud-shell-height: 112px;
    --font-display: 'Bebas Neue', sans-serif;
    --font-body: 'Oswald', sans-serif;
    --font-mono: 'Share Tech Mono', monospace;
    --tap-shadow: 0 10px 28px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.04);
    --tap-shadow-strong: 0 14px 34px rgba(0,0,0,0.28), 0 0 0 1px rgba(232,200,74,0.08);
    --segment-shell-radius: 16px;
    --segment-shell-padding: 6px;
    --segment-shell-gap: 6px;
    --segment-shell-border: 1px solid rgba(255,255,255,0.06);
    --segment-shell-shadow: 0 12px 22px rgba(0,0,0,0.16);
    --segment-button-radius: 12px;
    --segment-button-min-height: 50px;
    --segment-button-pad-block: 12px;
    --segment-button-pad-inline: 10px;
    --segment-button-font: 0.8rem;
    --segment-button-letter: 1px;
  }
  * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html,
  body {
    width:100%;
    max-width:100%;
  }
  html { overflow-x:hidden; }
  body { background:var(--bg); color:var(--text); font-family:var(--font-body); min-height:100vh; overflow-x:hidden; }
  html.ui-scroll-lock,
  body.ui-scroll-lock {
    overflow:hidden !important;
    overscroll-behavior:none;
  }

  button,
  .nav-btn,
  .home-shortcut,
  .home-accordion-head,
  .home-plan-actions button,
  .shop-tab,
  .profile-toggle-btn,
  .profile-avatar,
  .hosp-seg-btn,
  .hosp-free-btn,
  .treatment-card,
  .bribe-card,
  .auth-btn,
  .auth-secondary-btn,
  .auth-social-btn,
  .market-fold-head,
  .drug-tab,
  .bank-tab,
  .dc-btn,
  #page-fight .fight-tab,
  #gangTabsBar button {
    transition:
      transform 0.16s cubic-bezier(.22,.61,.36,1),
      box-shadow 0.18s ease,
      border-color 0.18s ease,
      background 0.18s ease,
      color 0.18s ease,
      filter 0.18s ease;
  }

  button:not(:disabled),
  .nav-btn,
  .home-shortcut,
  .home-accordion-head,
  .profile-avatar,
  .treatment-card,
  .bribe-card,
  .market-fold-head,
  .drug-tab,
  .bank-tab,
  #page-fight .fight-tab,
  #gangTabsBar button {
    box-shadow: var(--tap-shadow);
  }

  button:not(:disabled):hover,
  .nav-btn:hover,
  .home-shortcut:hover,
  .home-accordion-head:hover,
  .profile-toggle-btn:hover,
  .profile-avatar:hover,
  .treatment-card:hover,
  .bribe-card:hover,
  .market-fold-head:hover,
  .drug-tab:hover,
  .bank-tab:hover,
  #page-fight .fight-tab:hover,
  #gangTabsBar button:hover {
    transform: translateY(-1px);
    box-shadow: var(--tap-shadow-strong);
  }

  button:not(:disabled):active,
  .nav-btn:active,
  .home-shortcut:active,
  .home-accordion-head:active,
  .profile-toggle-btn:active,
  .profile-avatar:active,
  .treatment-card:active,
  .bribe-card:active,
  .market-fold-head:active,
  .drug-tab:active,
  .bank-tab:active,
  #page-fight .fight-tab:active,
  #gangTabsBar button:active {
    transform: scale(0.98);
  }

  /* NOISE OVERLAY */
  body::before {
    content:''; position:fixed; inset:0; pointer-events:none; z-index:999;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: 0.4;
  }

  /* LOADING SCREEN */
  #loader {
    position:fixed; inset:0; background:var(--bg); z-index:10000;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    transition: opacity 0.5s;
  }
  #loader .logo { font-family:var(--font-display); font-size:4rem; color:var(--accent); letter-spacing:4px; text-shadow: 0 0 40px rgba(232,200,74,0.5); }
  #loader .sub { font-family:var(--font-mono); color:var(--muted); font-size:0.75rem; letter-spacing:3px; margin-top:8px; }
  .loader-bar { width:200px; height:2px; background:var(--border); margin-top:32px; overflow:hidden; }
  .loader-fill { height:100%; background:var(--accent); width:0; animation: loadfill 1.8s ease forwards; }
  @keyframes loadfill { to { width:100%; } }

  /* TOP HUD */
  #hud {
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:
      linear-gradient(180deg, rgba(11,12,18,0.96), rgba(11,12,18,0.86)),
      radial-gradient(circle at 16% 0%, rgba(232,200,74,0.1), transparent 26%),
      radial-gradient(circle at 84% 0%, rgba(74,255,224,0.08), transparent 24%);
    padding: 10px 16px 9px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 16px 34px rgba(0,0,0,0.28);
    backdrop-filter: blur(16px);
  }
  .hud-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
  .hud-logo { font-family:var(--font-display); font-size:1.38rem; color:var(--accent); letter-spacing:1.9px; text-shadow:0 10px 18px rgba(0,0,0,0.3); }
  .hud-actions { display:flex; align-items:center; gap:10px; }
  .hud-music-btn {
    border:1px solid rgba(255,255,255,0.08);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)),
      linear-gradient(160deg, rgba(26,28,37,0.98), rgba(13,14,20,1));
    color:rgba(233,236,244,0.72);
    border-radius:14px;
    min-width:52px;
    height:38px;
    padding:0 11px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-family:var(--font-mono);
    font-size:0.66rem;
    cursor:pointer;
    box-shadow: 0 10px 18px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
    transition:border-color 0.2s, color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.18s ease;
  }
  .hud-music-btn:hover { box-shadow: 0 14px 26px rgba(0,0,0,0.24), 0 0 0 1px rgba(255,255,255,0.03), inset 0 1px 0 rgba(255,255,255,0.05); }
  .hud-music-btn:active { transform:scale(0.96); }
  .hud-music-btn.on {
    color:var(--accent);
    border-color:rgba(232,200,74,0.34);
    background:
      linear-gradient(180deg, rgba(232,200,74,0.16), rgba(255,140,0,0.08)),
      linear-gradient(160deg, rgba(26,28,37,0.98), rgba(13,14,20,1));
    box-shadow: 0 12px 24px rgba(0,0,0,0.24), 0 0 20px rgba(232,200,74,0.1);
  }
  .hud-music-btn .music-label { letter-spacing:1.2px; }
  .hud-avatar {
    width:38px; height:38px; border-radius:15px; border:1px solid rgba(232,200,74,0.32);
    background:
      linear-gradient(180deg, rgba(232,200,74,0.14), rgba(255,140,0,0.05)),
      linear-gradient(160deg, rgba(24,26,36,0.98), rgba(10,11,17,1));
    display:flex; align-items:center; justify-content:center;
    font-size:0.95rem; font-family:var(--font-display); color:var(--accent);
    cursor:pointer; user-select:none;
    background-size:cover; background-position:center; background-repeat:no-repeat;
    box-shadow: 0 12px 22px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .hud-avatar.initial {
    background-image:none !important;
    font-size:1rem;
    letter-spacing:0.5px;
  }

  /* TEK SATIR STAT BARI */
  .hud-statline {
    display:flex; align-items:center; gap:4px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)),
      linear-gradient(160deg, rgba(26,28,36,0.98), rgba(14,15,22,1));
    border:1px solid rgba(255,255,255,0.06); border-radius:16px;
    padding:4px;
    overflow:hidden;
    box-shadow: 0 12px 22px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.03);
  }
  .hsl-item {
    flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
    min-height:34px;
    padding:6px 6px;
    border-right:none;
    border-radius:11px;
    background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  }
  .hsl-item:last-child { border-right:none; }
  .hsl-icon { font-size:0.82rem; line-height:1; opacity:0.9; }
  .hsl-val  { font-family:var(--font-mono); font-size:0.76rem; font-weight:700; line-height:1; }
  .hsl-val.green  { color:#3dff8a; }
  .hsl-val.gold   { color:#e8c84a; }
  .hsl-val.red    { color:#ff4545; }
  .hsl-val.purple { color:#c44aff; }

  /* MAIN CONTENT */
  #app {
    padding-top: calc(var(--hud-shell-height) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--nav-rail-height) + 10px);
  }

  /* CITY BACKGROUND HEADER */
  .city-banner {
    margin: 0 16px 20px;
    border-radius:12px; overflow:hidden;
    background: linear-gradient(135deg, #0d0d18 0%, #1a0a0a 50%, #0d1018 100%);
    border:1px solid var(--border);
    padding: 20px;
    position:relative;
  }
  .city-banner::before {
    content:''; position:absolute; inset:0;
    background: radial-gradient(ellipse at 70% 50%, rgba(232,200,74,0.08) 0%, transparent 70%);
    pointer-events:none;
  }
  .city-title { font-family:var(--font-display); font-size:2.2rem; letter-spacing:3px; line-height:1; position:relative; }
  .city-title span { color:var(--accent); }
  .chat-page-title {
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:0 10px;
    line-height:0.94;
    max-width:100%;
  }
  .chat-page-title span {
    display:block;
    white-space:nowrap;
  }
  .chat-page-title span:first-child { color:var(--text); }
  .chat-page-title span:last-child { color:var(--accent); }
  .city-subtitle { font-family:var(--font-mono); font-size:0.7rem; color:var(--muted); letter-spacing:2px; margin-top:4px; }
  .city-rank { margin-top:12px; display:flex; align-items:center; gap:8px; }
  .rank-badge {
    background:linear-gradient(135deg, var(--accent), #b8942a);
    color:var(--bg); font-family:var(--font-display); font-size:0.9rem;
    padding:4px 10px; border-radius:4px; letter-spacing:1px;
  }
  .xp-bar-wrap { flex:1; }
  .xp-bar { background:var(--border); height:6px; border-radius:3px; overflow:hidden; }
  .xp-fill { height:100%; background:linear-gradient(90deg, var(--accent), #ff8c00); border-radius:3px; }
  .xp-label { font-family:var(--font-mono); font-size:0.6rem; color:var(--muted); margin-top:3px; }

  /* SECTION TITLE */
  .section-title {
    font-family:var(--font-display); font-size:1.4rem; letter-spacing:2px;
    padding: 0 16px; margin-bottom:12px;
    display:flex; align-items:center; gap:10px;
  }
  .section-title::after { content:''; flex:1; height:1px; background:var(--border); }

  .home-shortcuts {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    padding:0 16px;
    margin:0 0 16px;
  }
  .home-shortcut {
    border:1px solid rgba(255,255,255,0.07);
    border-radius:16px;
    padding:10px 8px 11px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)),
      linear-gradient(160deg, rgba(22,24,33,0.98), rgba(11,12,18,1));
    color:var(--text);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
    font-family:var(--font-display);
    font-size:0.58rem;
    letter-spacing:1px;
    cursor:pointer;
    box-shadow:0 14px 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
  }
  .home-shortcut span:first-child {
    width:28px;
    height:28px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.92rem;
    background:linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
    border:1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .home-shortcut span:last-child { color:rgba(233,236,244,0.9); }
  .home-accordion {
    margin:0 16px 12px;
    border-radius:16px;
    background:linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
    border:1px solid rgba(255,255,255,0.06);
    overflow:hidden;
    box-shadow:0 14px 24px rgba(0,0,0,0.14);
  }
  .home-accordion-head {
    list-style:none;
    cursor:pointer;
    padding:13px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-family:var(--font-display);
    font-size:0.86rem;
    letter-spacing:1.1px;
    color:var(--text);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
      linear-gradient(160deg, rgba(22,24,33,0.9), rgba(11,12,18,0.72));
  }
  .home-accordion-head::-webkit-details-marker { display:none; }
  .home-accordion-hint {
    font-family:var(--font-mono);
    font-size:0.48rem;
    color:var(--muted);
    letter-spacing:0.8px;
    text-align:right;
  }
  .home-accordion-body {
    padding:0 0 2px;
  }
  .home-accordion[open] .home-accordion-head {
    color:var(--accent);
    border-bottom:1px solid rgba(255,255,255,0.05);
    box-shadow:inset 0 -1px 0 rgba(255,255,255,0.03);
  }
  .home-plan-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    margin-top:10px;
  }
  .home-plan-card {
    background:var(--bg3);
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 11px;
  }
  .home-plan-card.highlight {
    border-color:rgba(196,74,255,0.34);
    background:linear-gradient(135deg, rgba(196,74,255,0.10), rgba(255,69,69,0.06));
  }
  .home-plan-title {
    font-family:var(--font-display);
    font-size:0.72rem;
    color:var(--accent);
    margin-bottom:6px;
    letter-spacing:0.6px;
  }
  .home-plan-text {
    font-family:var(--font-mono);
    font-size:0.56rem;
    color:var(--muted);
    line-height:1.62;
  }
  .home-plan-actions {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:8px;
  }
  .home-plan-actions button {
    background:var(--card);
    border:1px solid var(--border);
    color:var(--text);
    font-family:var(--font-display);
    font-size:0.58rem;
    padding:8px 10px;
    border-radius:8px;
    cursor:pointer;
  }
  .home-plan-actions button.primary {
    background:linear-gradient(135deg,#c44aff,#8a22cc);
    border:none;
    color:#fff;
  }
  .home-plan-actions button.green {
    background:linear-gradient(135deg,#3dff8a,#23aa58);
    border:none;
    color:#04130b;
  }
  .market-fold {
    margin-bottom:10px;
    border-radius:12px;
    background:var(--card);
    border:1px solid var(--border);
    overflow:hidden;
  }
  .market-fold-head {
    list-style:none;
    cursor:pointer;
    padding:12px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-family:var(--font-display);
    font-size:0.84rem;
    letter-spacing:0.8px;
    color:var(--text);
  }
  .market-fold-head::-webkit-details-marker { display:none; }
  .market-fold-hint {
    font-family:var(--font-mono);
    font-size:0.5rem;
    color:var(--muted);
    text-align:right;
  }
  .market-fold-body {
    padding:0 12px 12px;
  }
  .market-fold[open] .market-fold-head {
    color:var(--accent);
    background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0));
    border-bottom:1px solid rgba(255,255,255,0.05);
  }
  .bank-stock-card {
    background:var(--bg3);
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
  }
  .bank-tabs {
    display:flex;
    gap:var(--segment-shell-gap);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)),
      linear-gradient(160deg, rgba(22,24,33,0.98), rgba(11,12,18,1));
    border:var(--segment-shell-border);
    border-radius:var(--segment-shell-radius);
    padding:var(--segment-shell-padding);
    margin:0 0 12px;
    box-shadow: var(--segment-shell-shadow);
  }
  .bank-tab {
    flex:1;
    border:1px solid transparent;
    background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    color:rgba(233,236,244,0.54);
    font-family:var(--font-display);
    font-size:var(--segment-button-font);
    letter-spacing:var(--segment-button-letter);
    border-radius:var(--segment-button-radius);
    padding:var(--segment-button-pad-block) var(--segment-button-pad-inline);
    cursor:pointer;
    min-height:var(--segment-button-min-height);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
  }
  .bank-tab.active {
    background:linear-gradient(180deg, rgba(232,200,74,0.16), rgba(255,255,255,0.035));
    color:var(--accent);
    border:1px solid rgba(232,200,74,0.24);
    box-shadow: 0 10px 20px rgba(0,0,0,0.18), 0 0 0 1px rgba(232,200,74,0.08);
  }
  .bank-risk-panel {
    margin:0 0 12px;
    background:linear-gradient(135deg, rgba(255,69,69,0.10), rgba(255,140,0,0.10));
    border:1px solid rgba(255,69,69,0.24);
    border-radius:12px;
    padding:12px 13px;
  }
  .bank-risk-title {
    font-family:var(--font-display);
    font-size:0.78rem;
    color:#ff8c00;
    letter-spacing:0.8px;
  }
  .bank-risk-copy {
    margin-top:6px;
    font-family:var(--font-mono);
    font-size:0.57rem;
    line-height:1.7;
    color:var(--muted);
  }
  .fight-tabs {
    display:flex;
    margin:0 16px 14px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)),
      linear-gradient(160deg, rgba(22,24,33,0.98), rgba(11,12,18,1));
    border-radius:var(--segment-shell-radius);
    padding:var(--segment-shell-padding);
    border:var(--segment-shell-border);
    gap:var(--segment-shell-gap);
    box-shadow: var(--segment-shell-shadow);
  }
  .fight-tab {
    flex:1;
    border:1px solid transparent;
    background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    color:rgba(233,236,244,0.54);
    font-family:var(--font-display);
    font-size:var(--segment-button-font);
    letter-spacing:var(--segment-button-letter);
    cursor:pointer;
    border-radius:var(--segment-button-radius);
    padding:var(--segment-button-pad-block) var(--segment-button-pad-inline);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:var(--segment-button-min-height);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
  }
  .fight-tab.active {
    background:linear-gradient(180deg, rgba(255,69,69,0.16), rgba(255,255,255,0.03));
    color:var(--accent);
    border:1px solid rgba(255,69,69,0.18);
    box-shadow: 0 10px 20px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,69,69,0.06);
  }
  .fight-tab-icon { font-size:1rem; opacity:0.9; }
  .bank-stock-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .bank-stock-actions {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    margin-top:9px;
  }
  .bank-stock-mini {
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.05);
    border-radius:8px;
    padding:7px 8px;
    text-align:center;
  }

  /* ACTION GRID */
  .action-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 16px; margin-bottom:24px; }
  .action-card {
    background:var(--card); border:1px solid var(--border); border-radius:10px;
    padding:16px 14px; cursor:pointer; position:relative; overflow:hidden;
    transition: transform 0.15s, border-color 0.15s;
    user-select:none;
  }
  .action-card:active { transform:scale(0.96); }
  .action-card.highlight { border-color: rgba(232,200,74,0.4); }
  .action-card::before {
    content:''; position:absolute; inset:0;
    background: radial-gradient(circle at 0% 0%, var(--glow,transparent) 0%, transparent 60%);
    opacity:0.5;
    pointer-events:none;
  }
  .action-card[data-type="rob"] { --glow: rgba(232,200,74,0.15); }
  .action-card[data-type="assault"] { --glow: rgba(255,69,69,0.15); }
  .action-card[data-type="deal"] { --glow: rgba(74,255,224,0.12); }
  .action-card[data-type="casino"] { --glow: rgba(138,100,255,0.15); }
  .action-card[data-type="hitman"] { --glow: rgba(255,120,0,0.12); }
  .action-card[data-type="rave"] { --glow: rgba(255,50,200,0.12); }
  .ac-icon { font-size:2rem; margin-bottom:8px; display:block; }
  .ac-name { font-family:var(--font-display); font-size:1.1rem; letter-spacing:1px; display:block; }
  .ac-desc { font-size:0.7rem; color:var(--muted); margin-top:2px; line-height:1.3; }
  .ac-reward { margin-top:10px; display:flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:0.75rem; color:var(--accent); }
  .ac-energy { position:absolute; top:10px; right:10px; font-family:var(--font-mono); font-size:0.65rem; color:var(--muted); background:var(--bg3); padding:2px 6px; border-radius:10px; }

  /* RESULT TOAST */
  #toast {
    position:fixed; top:96px; left:50%; transform:translateX(-50%) translateY(-16px) scale(0.92);
    background:var(--card); border:1px solid var(--border); border-radius:10px;
    padding:10px 18px; font-family:var(--font-mono); font-size:0.82rem;
    color:var(--text); z-index:9500; opacity:0; pointer-events:none;
    transition: opacity 0.2s, transform 0.2s;
    min-width:220px; max-width:88vw; text-align:center;
    display:flex; align-items:center; justify-content:center; gap:8px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  }
  #toast.show {
    opacity:1; transform:translateX(-50%) translateY(0) scale(1);
    animation: toastPop 0.22s cubic-bezier(0.34,1.56,0.64,1) forwards;
  }
  #toast.good { border-color:rgba(61,255,138,0.6); box-shadow:0 4px 24px rgba(61,255,138,0.15); color:var(--green); }
  #toast.bad  { border-color:rgba(255,69,69,0.6);  box-shadow:0 4px 24px rgba(255,69,69,0.15);  color:var(--red); }
  @keyframes toastPop {
    0%   { transform:translateX(-50%) translateY(-8px) scale(0.9); opacity:0; }
    60%  { transform:translateX(-50%) translateY(2px)  scale(1.04); opacity:1; }
    100% { transform:translateX(-50%) translateY(0)    scale(1);    opacity:1; }
  }

  /* LEADERBOARD */
  .leaderboard { padding:0 16px; margin-bottom:24px; }
  .lb-item {
    display:flex; align-items:center; gap:12px;
    background:var(--card); border:1px solid var(--border); border-radius:8px;
    padding:12px 14px; margin-bottom:8px;
    transition:border-color 0.2s;
  }
  .lb-item.you { border-color:rgba(232,200,74,0.4); background:rgba(232,200,74,0.04); }
  .lb-rank { font-family:var(--font-display); font-size:1.4rem; color:var(--muted); width:32px; text-align:center; }
  .lb-rank.gold { color:var(--gold); }
  .lb-rank.silver { color:#c0c0c0; }
  .lb-rank.bronze { color:#cd7f32; }
  .lb-avatar { width:36px; height:36px; border-radius:50%; background:var(--bg3); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
  .lb-info { flex:1; }
  .lb-name { font-family:var(--font-body); font-weight:600; font-size:0.95rem; }
  .lb-class { font-size:0.65rem; color:var(--muted); letter-spacing:1px; text-transform:uppercase; }
  .lb-respect { font-family:var(--font-mono); font-size:0.9rem; color:var(--accent); }

  /* WEAPONS SHOP */
  /* MARKET TAB SİSTEMİ */
  .shop-tabs {
    display:flex; margin:0 16px 16px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)),
      linear-gradient(160deg, rgba(22,24,33,0.98), rgba(11,12,18,1));
    border-radius:var(--segment-shell-radius); padding:var(--segment-shell-padding); border:var(--segment-shell-border); gap:var(--segment-shell-gap);
    box-shadow: var(--segment-shell-shadow);
  }
  .shop-tab {
    flex:1; padding:var(--segment-button-pad-block) var(--segment-button-pad-inline); border:1px solid transparent; background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    color:rgba(233,236,244,0.54); font-family:var(--font-display); font-size:var(--segment-button-font);
    letter-spacing:var(--segment-button-letter); cursor:pointer; border-radius:var(--segment-button-radius);
    transition:all 0.2s; display:flex; align-items:center; justify-content:center; gap:5px;
    min-height:var(--segment-button-min-height);
  }
  .shop-tab.active { background:linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.03)); color:var(--text); border:1px solid rgba(255,255,255,0.08); box-shadow:0 10px 20px rgba(0,0,0,0.18); }
  .shop-tab.active.silah  { color:#ff4545; border-color:rgba(255,69,69,0.35); }
  .shop-tab.active.zirh   { color:var(--green); border-color:rgba(61,255,138,0.35); }
  .shop-tab.active.arac   { color:#c44aff; border-color:rgba(196,74,255,0.35); }
  .shop-tab.active.ammo   { color:#4affe0; border-color:rgba(74,255,224,0.35); }
  .shop-panel { display:none; }
  .shop-panel.active { display:block; animation:fadein 0.25s ease; }

  /* ÜRÜN KARTI */
  .item-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 16px; margin-bottom:24px; }
  .item-card {
    background:var(--card); border:1px solid var(--border); border-radius:12px;
    padding:14px 12px; cursor:pointer; position:relative; overflow:hidden;
    transition:transform 0.15s, border-color 0.2s;
  }
  .item-card:active { transform:scale(0.96); }
  .item-card.owned  { border-color:rgba(61,255,138,0.5); }
  .item-card.locked { opacity:0.55; cursor:not-allowed; }
  .item-card.legendary { border-color:rgba(232,200,74,0.4); }
  .item-card::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 0% 100%, var(--ic-glow,transparent), transparent 65%);
    pointer-events:none;
  }
  .ic-tier-bar {
    position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--ic-color, var(--border));
  }
  .ic-owned-badge {
    position:absolute; top:8px; right:8px;
    font-size:0.55rem; color:var(--green); background:rgba(61,255,138,0.12);
    padding:2px 6px; border-radius:8px; font-family:var(--font-mono); letter-spacing:1px;
  }
  .ic-legend-badge {
    position:absolute; top:8px; right:8px;
    font-size:0.55rem; color:var(--gold); background:rgba(232,200,74,0.12);
    padding:2px 6px; border-radius:8px; font-family:var(--font-mono); letter-spacing:1px;
  }
  .ic-icon  { font-size:2rem; margin-bottom:6px; display:block; }
  .ic-name  { font-family:var(--font-display); font-size:0.95rem; letter-spacing:1px; line-height:1.2; }
  .ic-stat  { font-size:0.62rem; color:var(--muted); margin-top:4px; }
  .ic-stat span { font-weight:700; }
  .ic-price { font-family:var(--font-mono); font-size:0.75rem; color:var(--accent); margin-top:8px; }
  .ic-price.cant-afford { color:var(--red); }
  .ic-num   { position:absolute; bottom:8px; right:10px; font-family:var(--font-mono); font-size:0.55rem; color:var(--border); }

  .fight-panel { display:none; }
  .fight-panel.active { display:block; animation:fadein 0.25s ease; }

  .city-banner,
  .suc-karti,
  .target-item,
  .item-card,
  .action-card,
  .profile-card-body {
    backdrop-filter: blur(4px);
  }
  .city-banner { position:relative; overflow:hidden; }
  .city-banner::after {
    content:'';
    position:absolute;
    inset:-40% -20% auto auto;
    width:180px;
    height:180px;
    pointer-events:none;
    background:radial-gradient(circle, rgba(232,200,74,0.14), transparent 65%);
    filter:blur(4px);
  }
  .season-card {
    margin:0 16px 14px;
    background:linear-gradient(135deg, rgba(232,200,74,0.10), rgba(196,74,255,0.08));
    border:1px solid rgba(232,200,74,0.28);
    border-radius:12px;
    padding:10px 12px;
  }
  .season-title {
    font-family:var(--font-display);
    font-size:0.8rem;
    color:var(--accent);
    letter-spacing:1px;
  }
  .season-meta {
    margin-top:5px;
    display:flex;
    justify-content:space-between;
    gap:8px;
    font-family:var(--font-mono);
    font-size:0.6rem;
    color:var(--muted);
  }
  .season-goal {
    margin-top:6px;
    font-family:var(--font-mono);
    font-size:0.62rem;
    color:var(--text);
  }
  .gazette-wrap {
    margin:0 16px 14px;
    background:linear-gradient(160deg,#171510 0%, #131821 55%, #16110a 100%);
    border:1px solid rgba(232,200,74,0.22);
    border-radius:12px;
    padding:12px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
  }
  .gazette-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    margin-bottom:8px;
  }
  .gazette-title {
    font-family:var(--font-display);
    font-size:0.82rem;
    color:var(--gold);
    letter-spacing:1px;
  }
  .gazette-sub {
    font-family:var(--font-mono);
    font-size:0.54rem;
    color:var(--muted);
  }
  .gazette-list {
    display:flex;
    flex-direction:column;
    gap:6px;
    max-height:180px;
    overflow-y:auto;
    padding-right:2px;
  }
  .gazette-item {
    background:rgba(255,255,255,0.02);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:8px;
    padding:7px 8px;
  }
  .gazette-line {
    font-family:var(--font-mono);
    font-size:0.6rem;
    color:var(--text);
    line-height:1.4;
  }
  .gazette-time {
    margin-top:2px;
    font-family:var(--font-mono);
    font-size:0.52rem;
    color:var(--muted);
  }

  /* SUÇ KARTI */
  .suc-karti {
    margin:0 16px 10px; background:var(--card); border:1px solid var(--border);
    border-radius:12px; padding:14px 16px; cursor:pointer;
    transition:transform 0.12s, border-color 0.2s; position:relative; overflow:hidden;
  }
  .suc-karti:active { transform:scale(0.98); }
  .suc-karti::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
    background:var(--suc-renk, var(--border));
  }
  .suc-karti.kilitli { opacity:0.45; cursor:not-allowed; }
  .sk-row1 { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
  .sk-icon { font-size:1.8rem; flex-shrink:0; }
  .sk-isim { font-family:var(--font-display); font-size:1.05rem; letter-spacing:1px; flex:1; }
  .sk-zorluk {
    font-family:var(--font-mono); font-size:0.6rem; padding:2px 8px;
    border-radius:10px; border:1px solid; flex-shrink:0;
  }
  .sk-row2 { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
  .sk-tag {
    font-family:var(--font-mono); font-size:0.6rem; padding:2px 7px;
    border-radius:8px; border:1px solid;
  }
  .sk-tag.para    { color:var(--gold);    border-color:rgba(232,200,74,0.4); background:rgba(232,200,74,0.06); }
  .sk-tag.saygi   { color:var(--green);   border-color:rgba(61,255,138,0.4); background:rgba(61,255,138,0.06); }
  .sk-tag.guc     { color:#ff4545;        border-color:rgba(255,69,69,0.4);  background:rgba(255,69,69,0.06); }
  .sk-tag.karizma { color:#c44aff;        border-color:rgba(196,74,255,0.4); background:rgba(196,74,255,0.06); }
  .sk-tag.enerji  { color:var(--accent3); border-color:rgba(74,255,224,0.4); background:rgba(74,255,224,0.06); }
  .sk-row3 { display:flex; justify-content:space-between; align-items:center; }
  .sk-gerek { font-family:var(--font-mono); font-size:0.62rem; color:var(--muted); }
  .sk-gerek span { color:var(--accent); }
  .sk-basari { font-family:var(--font-mono); font-size:0.62rem; }
  .sk-kilit-msg { font-size:0.65rem; color:var(--red); margin-top:4px; font-family:var(--font-mono); }

  /* MARKET ÖZET */
  .shop-summary {
    margin:0 16px 14px; display:flex; gap:8px;
  }
  .ss-card {
    flex:1; background:var(--card); border:1px solid var(--border); border-radius:8px;
    padding:8px; text-align:center;
  }
  .ss-val  { font-family:var(--font-display); font-size:1.2rem; line-height:1; }
  .ss-lbl  { font-size:0.55rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-top:2px; }

  /* CLASS SELECTION */
  .class-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 16px; margin-bottom:24px; }
  .class-card {
    background:var(--card); border:2px solid var(--border); border-radius:10px;
    padding:16px; cursor:pointer; text-align:center;
    transition: transform 0.15s, border-color 0.2s;
  }
  .class-card:active { transform:scale(0.95); }
  .class-card.active { border-color: var(--accent); background:rgba(232,200,74,0.06); }
  .cc-icon { font-size:2.5rem; margin-bottom:8px; display:block; }
  .cc-name { font-family:var(--font-display); font-size:1.2rem; letter-spacing:1px; }
  .cc-bonus { font-size:0.65rem; color:var(--muted); margin-top:4px; line-height:1.4; }

  /* BOTTOM NAV */
  #nav {
    position:fixed; bottom:0; left:0; right:0; z-index:100;
    display:flex;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding: 8px 36px calc(12px + env(safe-area-inset-bottom));
    background:
      linear-gradient(180deg, rgba(8,9,13,0), rgba(8,9,13,0.72) 18%, rgba(8,9,13,0.97) 100%);
    backdrop-filter:blur(22px);
  }
  #nav::-webkit-scrollbar { display:none; }
  .nav-scroll-btn {
    position:absolute;
    top:34px;
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.12);
    background:linear-gradient(180deg, rgba(14,16,23,0.96), rgba(25,27,37,0.94));
    color:rgba(245,247,251,0.86);
    font-family:var(--font-display);
    font-size:0.92rem;
    line-height:1;
    z-index:7;
    opacity:0;
    pointer-events:none;
    box-shadow:0 12px 24px rgba(0,0,0,0.28);
    backdrop-filter:blur(8px);
    transform:translateY(-50%);
    transition:opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
  }
  .nav-scroll-btn-left { left:8px; }
  .nav-scroll-btn-right { right:8px; }
  #nav.has-scroll-cue .nav-scroll-btn {
    opacity:0.3;
    pointer-events:auto;
  }
  #nav.can-scroll-left .nav-scroll-btn-left,
  #nav.can-scroll-right .nav-scroll-btn-right {
    opacity:0.96;
    box-shadow:0 16px 28px rgba(0,0,0,0.34), 0 0 18px rgba(232,200,74,0.08);
  }
  #nav:not(.can-scroll-left) .nav-scroll-btn-left,
  #nav:not(.can-scroll-right) .nav-scroll-btn-right {
    opacity:0.16;
    color:rgba(245,247,251,0.46);
  }
  #nav.scroll-hintable.has-scroll-cue::before,
  #nav.scroll-hintable.has-scroll-cue::after {
    content:none;
  }
  .scroll-hintable {
    position:relative;
  }
  .scroll-hintable.has-scroll-cue::before,
  .scroll-hintable.has-scroll-cue::after {
    position:absolute;
    top:50%;
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.12);
    background:linear-gradient(180deg, rgba(14,16,23,0.94), rgba(25,27,37,0.92));
    color:rgba(245,247,251,0.82);
    font-family:var(--font-display);
    font-size:0.9rem;
    line-height:1;
    pointer-events:none;
    z-index:6;
    opacity:0;
    box-shadow:0 12px 24px rgba(0,0,0,0.28);
    backdrop-filter:blur(8px);
    transition:opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  }
  .scroll-hintable.has-scroll-cue::before {
    content:'‹';
    left:8px;
    transform:translateY(-50%) translateX(-5px);
  }
  .scroll-hintable.has-scroll-cue::after {
    content:'›';
    right:8px;
    transform:translateY(-50%) translateX(5px);
  }
  .scroll-hintable.can-scroll-left::before,
  .scroll-hintable.can-scroll-right::after {
    opacity:0.96;
    transform:translateY(-50%) translateX(0);
    box-shadow:0 16px 28px rgba(0,0,0,0.34), 0 0 18px rgba(232,200,74,0.08);
  }
  .nav-btn {
    --nav-glow: rgba(232,200,74,0.16);
    --nav-spark: rgba(74,255,224,0.22);
    position:relative;
    flex:0 0 auto;
    min-width:100px;
    height:76px;
    border-radius:16px;
    padding:8px 10px 9px;
    cursor:pointer;
    overflow:hidden;
    scroll-snap-align:start;
    border:1px solid rgba(255,255,255,0.09);
    background:
      linear-gradient(156deg, rgba(22,24,33,0.98), rgba(8,9,14,1));
    box-shadow: 0 18px 40px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.04);
    isolation:isolate;
  }
  .nav-btn::before {
    content:'';
    position:absolute;
    inset:0;
    background:
      linear-gradient(90deg, rgba(255,255,255,0.018) 0 20px, transparent 20px 100%),
      radial-gradient(circle at 14% 16%, var(--nav-glow), transparent 30%),
      radial-gradient(circle at 82% 20%, var(--nav-spark), transparent 20%),
      linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0) 40%);
    opacity:0.94;
    z-index:0;
  }
  .nav-btn::after {
    content:'';
    position:absolute;
    inset:0;
    background:
      linear-gradient(140deg, transparent 0 76%, rgba(255,255,255,0.08) 76% 79%, transparent 79% 100%),
      linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.48));
    opacity:0.78;
    z-index:0;
  }
  .nav-head {
    position:relative;
    z-index:2;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    min-height:24px;
  }
  .nav-head::after {
    content:'';
    width:18px;
    height:4px;
    border-radius:999px;
    margin-top:2px;
    background:linear-gradient(90deg, rgba(255,255,255,0.16), rgba(255,255,255,0));
    opacity:0.72;
  }
  .nav-mini-badge {
    position:absolute;
    top:-5px;
    right:-4px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#ff6d6d,#d91515);
    border:1px solid rgba(255,255,255,0.18);
    box-shadow:0 6px 14px rgba(0,0,0,0.28);
    color:#fff6f6;
    font-family:var(--font-display);
    font-size:0.48rem;
    line-height:1;
    letter-spacing:0.2px;
    pointer-events:none;
    z-index:3;
  }
  .nav-icon {
    width:24px;
    height:24px;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.8rem;
    background:linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
    border:1px solid rgba(255,255,255,0.11);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 18px rgba(0,0,0,0.18);
  }
  .nav-scene {
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 76% 24%, rgba(255,255,255,0.08), transparent 15%),
      linear-gradient(180deg, rgba(255,255,255,0.04), transparent 32%),
      linear-gradient(180deg, rgba(5,6,10,0.03), rgba(5,6,10,0.76)),
      repeating-linear-gradient(118deg, transparent 0 22px, rgba(255,255,255,0.02) 22px 24px);
    opacity:0.95;
    z-index:0;
  }
  .nav-scene::before,
  .nav-scene::after {
    content:'';
    position:absolute;
    pointer-events:none;
  }
  .nav-scene::before {
    left:10%;
    bottom:-4%;
    width:36%;
    height:40%;
    border-radius:10px 10px 0 0;
    background:rgba(255,255,255,0.06);
    box-shadow:
      16px -8px 0 -4px rgba(255,255,255,0.04),
      38px -14px 0 -8px rgba(255,255,255,0.045),
      62px -9px 0 -11px rgba(255,255,255,0.04);
  }
  .nav-scene::after {
    right:-4%;
    bottom:16%;
    width:52%;
    height:2px;
    transform:rotate(-15deg);
    transform-origin:right center;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.06), rgba(255,69,69,0.18), transparent);
    box-shadow:0 0 18px rgba(255,69,69,0.08);
  }
  .nav-copy {
    position:relative;
    z-index:1;
    width:100%;
    height:calc(100% - 26px);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:center;
    text-align:center;
    gap:3px;
    padding-top:4px;
  }
  .nav-copy::after {
    content:'';
    width:24px;
    height:3px;
    margin-top:2px;
    margin-left:auto;
    margin-right:auto;
    border-radius:999px;
    background:rgba(255,255,255,0.14);
    box-shadow:0 0 14px rgba(255,255,255,0.04);
  }
  .nav-kicker {
    font-family:var(--font-mono);
    font-size:0.38rem;
    letter-spacing:1.9px;
    color:rgba(233,236,244,0.52);
    text-transform:uppercase;
  }
  .nav-title {
    font-family:var(--font-display);
    font-size:0.82rem;
    line-height:0.9;
    letter-spacing:0.9px;
    color:#f5f7fb;
    text-transform:uppercase;
    text-shadow:0 8px 18px rgba(0,0,0,0.45);
  }
  .nav-btn.active {
    border-color: rgba(232,200,74,0.54);
    box-shadow:
      0 22px 44px rgba(0,0,0,0.42),
      0 0 0 1px rgba(232,200,74,0.16),
      inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .nav-btn.active .nav-title { color:var(--accent); }
  .nav-btn.active .nav-kicker { color:rgba(232,200,74,0.72); }
  .nav-btn.active .nav-icon {
    background:linear-gradient(180deg, rgba(232,200,74,0.34), rgba(255,140,0,0.14));
    border-color:rgba(232,200,74,0.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 12px 22px rgba(0,0,0,0.24), 0 0 18px rgba(232,200,74,0.12);
  }
  .nav-btn.active .nav-head::after {
    background:linear-gradient(90deg, rgba(232,200,74,0.76), rgba(255,69,69,0.24));
    opacity:1;
  }
  .nav-btn.active .nav-copy::after {
    width:32px;
    background:linear-gradient(90deg, rgba(232,200,74,0.9), rgba(255,69,69,0.38));
    box-shadow:0 0 18px rgba(232,200,74,0.16);
  }
  .nav-btn.active::before {
    background:
      linear-gradient(90deg, rgba(232,200,74,0.14) 0 18px, transparent 18px 100%),
      radial-gradient(circle at 18% 20%, rgba(232,200,74,0.24), transparent 34%),
      radial-gradient(circle at 82% 24%, rgba(255,69,69,0.18), transparent 24%),
      linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 42%);
  }
  .nav-page-home      { --nav-glow: rgba(74,255,224,0.16); --nav-spark: rgba(232,200,74,0.2); }
  .nav-page-guide     { --nav-glow: rgba(107,120,255,0.18); --nav-spark: rgba(196,74,255,0.16); }
  .nav-page-fight     { --nav-glow: rgba(255,69,69,0.2);   --nav-spark: rgba(232,200,74,0.16); }
  .nav-page-drugs     { --nav-glow: rgba(61,255,138,0.16); --nav-spark: rgba(232,200,74,0.16); }
  .nav-page-shop      { --nav-glow: rgba(255,140,80,0.18); --nav-spark: rgba(255,69,69,0.14); }
  .nav-page-vip       { --nav-glow: rgba(232,200,74,0.22); --nav-spark: rgba(255,140,80,0.16); }
  .nav-page-gym       { --nav-glow: rgba(86,135,255,0.18); --nav-spark: rgba(74,255,224,0.14); }
  .nav-page-bank      { --nav-glow: rgba(232,200,74,0.18); --nav-spark: rgba(74,255,224,0.16); }
  .nav-page-gang      { --nav-glow: rgba(255,69,69,0.18);  --nav-spark: rgba(196,74,255,0.14); }
  .nav-page-hospital  { --nav-glow: rgba(74,255,224,0.16); --nav-spark: rgba(255,255,255,0.14); }
  .nav-page-casino    { --nav-glow: rgba(196,74,255,0.18); --nav-spark: rgba(255,69,69,0.16); }
  .nav-page-profile   { --nav-glow: rgba(232,200,74,0.18); --nav-spark: rgba(255,255,255,0.12); }

  /* PAGES */
  .page { display:none; opacity:0; transform:translateY(10px) scale(0.995); }
  .page.active {
    display:block;
    opacity:1;
    transform:translateY(0) scale(1);
    animation: pageIn 0.42s cubic-bezier(.22,.61,.36,1);
  }
  .page.active > * {
    animation: pageContentLift 0.38s ease both;
  }
  @keyframes pageIn {
    from { opacity:0; transform:translateY(12px) scale(0.992); filter:blur(1.5px); }
    to   { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
  }
  @keyframes pageContentLift {
    from { opacity:0; transform:translateY(8px); }
    to { opacity:1; transform:translateY(0); }
  }
  body.nav-anim #app { animation: navPulse 0.3s ease; }
  @keyframes navPulse {
    0% { transform:translateY(4px) scale(0.996); filter:saturate(0.9) brightness(0.96); }
    100% { transform:translateY(0) scale(1); filter:saturate(1) brightness(1); }
  }
  @keyframes fadein { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

  /* GANG PAGE */
  .gang-banner {
    margin:0 16px 16px; background:var(--card); border:1px solid var(--border);
    border-radius:10px; padding:20px; text-align:center;
  }
  .gang-name { font-family:var(--font-display); font-size:2rem; letter-spacing:3px; color:var(--accent); }
  .gang-tag { font-family:var(--font-mono); font-size:0.7rem; color:var(--muted); letter-spacing:2px; }
  .gang-members { margin-top:12px; display:flex; justify-content:center; gap:-8px; }
  .gang-av { width:36px; height:36px; border-radius:50%; border:2px solid var(--bg); background:var(--bg3); display:flex; align-items:center; justify-content:center; font-size:1rem; margin-left:-6px; }
  .gang-av:first-child { margin-left:0; }
  .gang-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin:16px 16px 0; }
  .gang-stat { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:12px; text-align:center; }
  .gs-val { font-family:var(--font-display); font-size:1.5rem; color:var(--accent); }
  .gs-lbl { font-size:0.6rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }

  /* PROFILE PAGE */
  .profile-header {
    margin:0 16px 16px; background:var(--card); border:1px solid var(--border);
    border-radius:10px; padding:20px; text-align:center; position:relative;
  }
  .profile-avatar { width:72px; height:72px; border-radius:50%; background:var(--bg3); border:3px solid var(--accent); display:flex; align-items:center; justify-content:center; font-size:2.5rem; margin:0 auto 12px; cursor:pointer; box-shadow:var(--tap-shadow-strong); }
  .profile-name { font-family:var(--font-display); font-size:1.8rem; letter-spacing:2px; }
  .profile-class { font-family:var(--font-mono); font-size:0.7rem; color:var(--accent); letter-spacing:2px; margin-top:2px; }
  .profile-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin:16px 16px 0; }
  .ps-card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:12px; text-align:center; }
  .ps-val { font-family:var(--font-display); font-size:1.4rem; }
  .ps-val.gold { color:var(--gold); }
  .ps-val.red { color:var(--red); }
  .ps-val.cyan { color:var(--accent3); }
  .ps-lbl { font-size:0.6rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-top:2px; }
  .achievements { padding:0 16px; margin-bottom:24px; }
  .ach-item { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--border); border-radius:8px; padding:12px; margin-bottom:8px; }
  .ach-icon { font-size:1.8rem; width:40px; text-align:center; }
  .ach-info { flex:1; }
  .ach-name { font-family:var(--font-body); font-weight:600; font-size:0.9rem; }
  .ach-desc { font-size:0.65rem; color:var(--muted); margin-top:2px; }
  .ach-unlocked { font-family:var(--font-mono); font-size:0.65rem; color:var(--green); }
  .profile-accordion { padding:0 16px; margin-bottom:10px; }
  .profile-toggle-btn {
    width:100%; display:flex; align-items:center; justify-content:space-between;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)),
      linear-gradient(160deg, rgba(22,24,33,0.98), rgba(11,12,18,1));
    border:1px solid rgba(255,255,255,0.07); border-radius:16px;
    color:var(--text); font-family:var(--font-display); font-size:0.82rem; letter-spacing:1.1px;
    padding:13px 14px; cursor:pointer;
    box-shadow:0 14px 24px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.04);
  }
  .profile-toggle-btn.active {
    border-color:rgba(232,200,74,0.28);
    color:var(--accent);
    background:
      linear-gradient(180deg, rgba(232,200,74,0.12), rgba(255,255,255,0.02)),
      linear-gradient(160deg, rgba(22,24,33,0.98), rgba(11,12,18,1));
  }
  .pt-chevron { font-family:var(--font-mono); font-size:0.82rem; color:var(--muted); }
  .profile-toggle-btn.active .pt-chevron { color:var(--accent); }
  .profile-toggle-panel { display:none; margin-top:8px; }
  .profile-toggle-panel.open { display:block; animation:fadein 0.2s ease; }
  .profile-toggle-panel .quick-stats,
  .profile-toggle-panel .equipment-section,
  .profile-toggle-panel .activity-feed,
  .profile-toggle-panel .achievements {
    padding:0; margin-bottom:0;
  }

  /* MODAL */
  .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:800; display:flex; align-items:flex-end; transition:opacity 0.25s; opacity:0; pointer-events:none; }
  .modal-overlay.open { opacity:1; pointer-events:all; }
  .modal { background:var(--bg2); border:1px solid var(--border); border-radius:16px 16px 0 0; padding:24px; width:100%; max-height:80vh; overflow-y:auto; transform:translateY(30px); transition:transform 0.3s; }
  .modal-overlay.open .modal { transform:translateY(0); }
  .modal-title { font-family:var(--font-display); font-size:1.6rem; letter-spacing:2px; color:var(--accent); margin-bottom:6px; }
  .modal-sub { font-size:0.75rem; color:var(--muted); margin-bottom:20px; }
  .modal-result { background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:16px; margin-bottom:16px; }
  .modal-result .res-label { font-family:var(--font-mono); font-size:0.7rem; color:var(--muted); letter-spacing:2px; }
  .modal-result .res-val { font-family:var(--font-display); font-size:2rem; margin-top:4px; }
  .modal-result .res-val.win { color:var(--green); }
  .modal-result .res-val.lose { color:var(--red); }
  .modal-close { width:100%; background:var(--border); border:none; color:var(--text); font-family:var(--font-body); font-size:1rem; font-weight:600; padding:14px; border-radius:8px; cursor:pointer; letter-spacing:1px; margin-top:8px; }

  /* ONBOARDING GUIDE */
  #onboardingOverlay {
    position:fixed; inset:0; z-index:12000;
    background:rgba(5,7,12,0.93);
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px 14px;
    overflow-x:hidden;
    overscroll-behavior:contain;
  }
  #onboardingOverlay.open { display:flex; }
  .onb-card {
    width:min(940px, 100%);
    max-height:94vh;
    overflow-y:auto;
    border-radius:14px;
    border:1px solid var(--border);
    background:linear-gradient(145deg, #13131b 0%, #17121a 52%, #111924 100%);
    box-shadow:0 12px 46px rgba(0,0,0,0.5);
    padding:18px 16px 16px;
    position:relative;
  }
  .onb-close {
    position:absolute;
    top:10px; right:10px;
    width:34px; height:34px;
    border-radius:50%;
    border:1px solid var(--border);
    background:var(--bg3);
    color:var(--muted);
    font-family:var(--font-display);
    font-size:1.1rem;
    line-height:1;
    cursor:pointer;
  }
  .onb-title {
    font-family:var(--font-display);
    font-size:2rem;
    letter-spacing:2px;
    color:var(--accent);
    margin-bottom:2px;
  }
  .onb-sub {
    font-family:var(--font-mono);
    font-size:0.64rem;
    color:var(--muted);
    letter-spacing:1.2px;
    margin-bottom:14px;
  }
  .onb-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:9px;
  }
  .onb-box {
    border:1px solid var(--border);
    border-radius:10px;
    background:rgba(255,255,255,0.02);
    padding:10px 11px;
  }
  .onb-box h4 {
    font-family:var(--font-display);
    font-size:0.92rem;
    letter-spacing:1px;
    color:var(--text);
    margin-bottom:4px;
  }
  .onb-box p {
    font-size:0.76rem;
    color:var(--muted);
    line-height:1.5;
  }
  .onb-steps {
    margin-top:10px;
    border:1px solid rgba(232,200,74,0.35);
    background:rgba(232,200,74,0.06);
    border-radius:10px;
    padding:11px;
  }
  .onb-steps h4 {
    font-family:var(--font-display);
    font-size:0.95rem;
    color:var(--accent);
    letter-spacing:1px;
    margin-bottom:6px;
  }
  .onb-steps ol {
    margin:0;
    padding-left:18px;
    color:var(--text);
    font-size:0.77rem;
    line-height:1.6;
  }
  .onb-footer {
    margin-top:12px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .onb-tip {
    font-family:var(--font-mono);
    font-size:0.62rem;
    color:var(--muted);
    letter-spacing:0.9px;
  }
  .onb-ok {
    border:none;
    border-radius:8px;
    background:linear-gradient(135deg,var(--accent),#b8942a);
    color:#111;
    font-family:var(--font-display);
    font-size:0.84rem;
    letter-spacing:1px;
    padding:9px 14px;
    cursor:pointer;
  }

  /* FIGHT TARGET */
  .target-list { margin:0 16px 20px; }
  .target-item { display:flex; align-items:center; gap:12px; background:linear-gradient(135deg, rgba(28,28,37,0.98), rgba(20,20,28,0.98)); border:1px solid var(--border); border-radius:12px; padding:13px; margin-bottom:8px; cursor:pointer; transition:border-color 0.2s, transform 0.16s ease, box-shadow 0.18s ease; box-shadow:var(--tap-shadow); }
  .target-item:active { border-color:var(--accent); transform:scale(0.985); }
  .target-item:hover { border-color:rgba(255,140,0,0.28); box-shadow:var(--tap-shadow-strong); }
  .ti-avatar { width:40px; height:40px; border-radius:50%; background:var(--bg3); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
  .ti-info { flex:1; }
  .ti-name { font-weight:600; font-size:0.95rem; }
  .ti-class { font-size:0.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
  .ti-power { display:flex; align-items:center; gap:4px; }
  .ti-power span { font-family:var(--font-mono); font-size:0.8rem; }
  .power-bar { flex:1; background:var(--border); height:4px; border-radius:2px; overflow:hidden; }
  .power-fill { height:100%; background:var(--red); border-radius:2px; }
  .btn-assault { background:linear-gradient(135deg, #ff4545, #9f1515); border:none; color:white; font-family:var(--font-display); font-size:0.82rem; letter-spacing:0.9px; padding:11px 14px; border-radius:10px; cursor:pointer; box-shadow:0 10px 24px rgba(255,69,69,0.18); min-width:94px; }

  /* SCROLLBAR */
  ::-webkit-scrollbar { width:0; }

  /* GELİŞMİŞ PROFİL */
  .profile-cover {
    height: 140px; margin: 0 16px 0; border-radius: 12px 12px 0 0;
    background: linear-gradient(135deg, #1a0a0a 0%, #0d0d1a 50%, #0a1a0a 100%);
    border: 1px solid var(--border); border-bottom: none;
    position: relative; overflow: hidden;
  }
  .profile-cover::before {
    content:''; position:absolute; inset:0;
    background: radial-gradient(ellipse at 30% 50%, rgba(232,200,74,0.15) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 20%, rgba(255,69,69,0.1) 0%, transparent 50%);
    pointer-events:none;
  }
  .cover-pattern {
    position:absolute; inset:0; opacity:0.06;
    background-image: repeating-linear-gradient(45deg, var(--accent) 0, var(--accent) 1px, transparent 0, transparent 50%);
    background-size: 20px 20px;
  }
  .profile-card-body {
    margin: 0 16px; background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; padding: 16px 16px 20px;
    position: relative;
  }
  .profile-avatar-wrap {
    display: flex; align-items: flex-end; gap: 14px; margin-bottom: 14px;
  }
  .profile-avatar-spot { position:relative; }
  .profile-avatar-big {
    width: 76px; height: 76px; border-radius: 50%;
    background: var(--bg3); border: 3px solid var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.6rem; flex-shrink:0;
    box-shadow: 0 0 30px rgba(232,200,74,0.3);
    background-size:cover; background-position:center; background-repeat:no-repeat;
    cursor:pointer;
    user-select:none;
  }
  .profile-avatar-big.initial {
    background-image:none !important;
    font-family:var(--font-display);
    color:var(--accent);
    font-size:2.3rem;
    letter-spacing:1px;
  }
  .profile-name-block { padding-bottom: 4px; }
  .profile-audio-controls {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:10px;
  }
  .profile-audio-btn {
    min-width:88px;
    justify-content:center;
  }
  .profile-name-big { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 2px; line-height:1; }
  .profile-tag { font-family: var(--font-mono); font-size: 0.65rem; color: var(--accent); letter-spacing: 2px; margin-top: 3px; }
  .profile-bio { font-size: 0.75rem; color: var(--muted); margin-top: 10px; line-height: 1.5; }
  .profile-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
  .badge {
    font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 1px;
    padding: 3px 8px; border-radius: 20px; border: 1px solid;
  }
  .badge.gold { color: var(--gold); border-color: rgba(232,200,74,0.4); background: rgba(232,200,74,0.08); }
  .badge.red  { color: var(--red);  border-color: rgba(255,69,69,0.4);  background: rgba(255,69,69,0.08); }
  .badge.cyan { color: var(--accent3); border-color: rgba(74,255,224,0.4); background: rgba(74,255,224,0.08); }
  .badge.green{ color: var(--green); border-color: rgba(61,255,138,0.4); background: rgba(61,255,138,0.08); }

  /* STAT BARS */
  .stat-bars-section { padding: 0 16px; margin-bottom: 20px; }
  .stat-bar-row { margin-bottom: 14px; }
  .sbr-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
  .sbr-label { font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; display: flex; align-items: center; gap: 6px; }
  .sbr-val { font-family: var(--font-mono); font-size: 0.8rem; }
  .sbr-track { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; position: relative; }
  .sbr-fill {
    height: 100%; border-radius: 4px;
    transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
  }
  .sbr-fill::after {
    content:''; position:absolute; right:0; top:0; bottom:0; width:4px;
    background: rgba(255,255,255,0.6); border-radius:2px;
  }
  .sbr-fill.guc    { background: linear-gradient(90deg, #ff4545, #ff8c00); }
  .sbr-fill.karizma{ background: linear-gradient(90deg, #c44aff, #ff4adb); }
  .sbr-fill.ceviklik{ background: linear-gradient(90deg, #4affe0, #4a9fff); }
  .sbr-fill.savunma { background: linear-gradient(90deg, #3dff8a, #3daaff); }
  .sbr-fill.sans    { background: linear-gradient(90deg, #e8c84a, #ffaa00); }
  .sbr-fill.zeka    { background: linear-gradient(90deg, #ff4adb, #e8c84a); }

  /* QUICK STATS ROW */
  .quick-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 0 16px; margin-bottom: 20px; }
  .qs-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px 8px; text-align: center;
  }
  .qs-icon { font-size: 1.4rem; margin-bottom: 4px; }
  .qs-val { font-family: var(--font-display); font-size: 1.3rem; line-height:1; }
  .qs-val.gold { color: var(--gold); }
  .qs-val.red  { color: var(--red); }
  .qs-val.cyan { color: var(--accent3); }
  .qs-val.green{ color: var(--green); }
  .qs-val.purple{ color: #c44aff; }
  .qs-val.blue { color: #4a9fff; }
  .qs-card .qs-val { word-break: break-word; }
  .qs-lbl { font-size: 0.58rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; }

  .profile-connection-shell {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
  }
  .profile-connection-summary {
    margin-bottom: 12px;
  }
  .profile-connection-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--accent);
    letter-spacing: 1px;
  }
  .profile-connection-note {
    margin-top: 6px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    line-height: 1.7;
  }
  .profile-connection-email-row {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    color: var(--text);
  }
  .profile-connection-email-badge {
    color: var(--green);
  }
  .profile-connection-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .profile-connection-provider {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
  }
  .profile-connection-provider.linked {
    border-color: rgba(61,255,138,0.28);
    box-shadow: 0 0 0 1px rgba(61,255,138,0.06) inset;
  }
  .profile-connection-provider-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .profile-connection-provider-title {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--text);
  }
  .profile-connection-provider-badge {
    font-family: var(--font-mono);
    font-size: 0.54rem;
    letter-spacing: 1px;
    border-radius: 999px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    color: var(--muted);
  }
  .profile-connection-provider-badge.ok {
    border-color: rgba(61,255,138,0.34);
    color: var(--green);
    background: rgba(61,255,138,0.09);
  }
  .profile-connection-provider-note {
    margin-top: 6px;
    margin-bottom: 10px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    line-height: 1.7;
  }
  .profile-connection-btn {
    width: 100%;
    min-height: 44px;
    font-size: 0.82rem;
  }

  /* DONATIM */
  .equipment-section { padding: 0 16px; margin-bottom: 20px; }
  .equip-row { display: flex; gap: 8px; }
  .equip-slot {
    flex:1; background: var(--card); border: 1px dashed var(--border); border-radius: 10px;
    padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px;
    position: relative;
  }
  .equip-slot.filled { border-style: solid; border-color: rgba(232,200,74,0.3); }
  .equip-slot-icon { font-size: 1.8rem; }
  .equip-slot-name { font-size: 0.65rem; color: var(--muted); text-align: center; }
  .equip-slot-power { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent); }
  .equip-slot-label {
    position: absolute; top: -8px; left: 8px;
    font-size: 0.55rem; color: var(--muted); background: var(--bg); padding: 0 4px;
    letter-spacing: 1px; text-transform: uppercase;
  }

  /* PROFIL AVATAR SECIMI */
  .profile-avatar-picker { margin-top: 10px; display:none; }
  .profile-avatar-picker.open { display:block; }
  .profile-avatar-picker-title {
    font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted);
    letter-spacing: 1px; margin-bottom: 7px;
  }
  .profile-avatar-grid {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px;
  }
  .profile-avatar-option {
    border: 1px solid var(--border); background: var(--bg3); color: var(--text);
    border-radius: 10px; min-height: 64px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    cursor:pointer; padding:5px 4px;
  }
  .profile-avatar-option.active {
    border-color: rgba(232,200,74,0.8);
    box-shadow: 0 0 0 1px rgba(232,200,74,0.35) inset;
  }
  .profile-avatar-option img {
    width:30px; height:30px; border-radius:50%;
    border:1px solid rgba(255,255,255,0.12);
    object-fit:cover;
  }
  .profile-avatar-option .avatar-icon {
    font-size:0.72rem; line-height:1;
  }

  /* AKTİVİTE FEED */
  .activity-feed { padding: 0 16px; margin-bottom: 24px; }
  .af-item {
    display: flex; gap: 10px; padding: 10px 0;
    border-bottom: 1px solid var(--border);
  }
  .af-item:last-child { border-bottom: none; }
  .af-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink:0; margin-top: 5px; }
  .af-text { font-size: 0.78rem; color: var(--muted); line-height: 1.4; }
  .af-text strong { color: var(--text); }
  .af-time { font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted); margin-top: 2px; }

  /* FLICKER ANIMATION */
  @keyframes flicker { 0%,100%{opacity:1} 92%{opacity:0.95} 94%{opacity:0.88} 96%{opacity:0.95} }
  .city-title { animation: flicker 8s infinite; }

  /* PULSE */
  @keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(232,200,74,0.3)} 50%{box-shadow:0 0 0 8px rgba(232,200,74,0)} }
  .action-card.highlight { animation:pulse 2s infinite; }

  /* SLOT MACHINE */
  .slot-machine { background:var(--bg3); border:1px solid var(--border); border-radius:12px; padding:20px; text-align:center; }

  /* KUMAR SAYFASI */
  .casino-hero {
    margin:0 16px 14px; border-radius:12px; overflow:hidden;
    background:linear-gradient(135deg,#120a1a 0%,#1a0a12 50%,#0a1218 100%);
    border:1px solid rgba(196,74,255,0.25); padding:20px; position:relative;
  }
  .casino-hero::before {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse at 70% 30%, rgba(196,74,255,0.12) 0%, transparent 60%);
  }
  .casino-hero .city-title { animation:none; }
  .casino-hero .city-title span { color:#c44aff; }
  .casino-jackpot-inline {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    margin: 10px auto 6px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(232,200,74,0.26);
    background: rgba(0,0,0,0.24);
    box-shadow: inset 0 0 18px rgba(232,200,74,0.08);
  }
  .casino-jackpot-inline span {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 1.8px;
    color: rgba(232,200,74,0.72);
  }
  .casino-jackpot-inline strong {
    font-family: var(--font-display);
    font-size: 1.08rem;
    color: var(--gold);
    letter-spacing: 1px;
    text-shadow: 0 0 12px rgba(232,200,74,0.18);
  }

  .casino-balance {
    margin:0 16px 14px; background:var(--card); border:1px solid rgba(196,74,255,0.3);
    border-radius:10px; padding:12px 16px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .cb-label { font-family:var(--font-mono); font-size:0.65rem; color:var(--muted); letter-spacing:1px; }
  .cb-val   { font-family:var(--font-display); font-size:1.6rem; color:var(--accent); }

  .casino-tabs {
    display:flex; margin:0 16px 14px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)),
      linear-gradient(160deg, rgba(22,24,33,0.98), rgba(11,12,18,1));
    border-radius:var(--segment-shell-radius); padding:var(--segment-shell-padding); border:var(--segment-shell-border); gap:var(--segment-shell-gap);
    box-shadow: var(--segment-shell-shadow);
  }
  .casino-tab {
    flex:1; padding:var(--segment-button-pad-block) var(--segment-button-pad-inline); border:1px solid transparent; background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    color:rgba(233,236,244,0.54); font-family:var(--font-display); font-size:var(--segment-button-font);
    letter-spacing:var(--segment-button-letter); cursor:pointer; border-radius:var(--segment-button-radius); transition:all 0.2s; min-height:var(--segment-button-min-height);
  }
  .casino-tab.active { background:linear-gradient(180deg, rgba(196,74,255,0.18), rgba(255,255,255,0.03)); color:#d572ff; border:1px solid rgba(196,74,255,0.3); box-shadow:0 10px 20px rgba(0,0,0,0.18); }
  .casino-panel { display:none; padding:0 16px; }
  .casino-panel.active { display:block; animation:fadein 0.25s ease; }

  /* SLOT MACHINE — Premium Design */
  .slot-machine-wrap {
    background: linear-gradient(160deg, #1a0a2e 0%, #0d0d1a 60%, #1a0a0d 100%);
    border: 2px solid rgba(196,74,255,0.4);
    border-radius: 20px;
    padding: 24px 16px 20px;
    margin: 0 0 16px;
    position: relative;
    box-shadow: 0 0 40px rgba(196,74,255,0.15), inset 0 0 60px rgba(0,0,0,0.5);
  }
  .slot-machine-wrap::before {
    content: '🎰 MAFYA ŞEHİR MASASI';
    display: block;
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 3px;
    color: var(--accent);
    text-align: center;
    margin-bottom: 16px;
    text-shadow: 0 0 10px rgba(232,200,74,0.6);
  }
  .slot-machine-wrap::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 20px;
    background: radial-gradient(ellipse at 50% 0%, rgba(196,74,255,0.08) 0%, transparent 70%);
    pointer-events: none;
  }
  .slot-machine-hint {
    margin: -2px 0 12px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 1.8px;
    color: rgba(233,236,244,0.66);
  }
  .slot-grid-frame {
    position: relative;
    max-width: 320px;
    margin: 0 auto 8px;
  }
  .slot-grid-frame::before {
    content: '';
    position: absolute;
    left: -10px;
    right: -10px;
    top: 50%;
    height: calc(var(--slot-cell-size, 84px) + 14px);
    transform: translateY(-50%);
    border-radius: 18px;
    background: linear-gradient(90deg, transparent, rgba(232,200,74,0.18), transparent);
    box-shadow: 0 0 18px rgba(232,200,74,0.24);
    pointer-events: none;
    z-index: 0;
  }
  .slot-payline-band {
    position: absolute;
    left: -4px;
    right: -4px;
    top: 50%;
    height: calc(var(--slot-cell-size, 84px) + 4px);
    transform: translateY(-50%);
    background:
      linear-gradient(90deg, rgba(7,4,14,0.1), rgba(232,200,74,0.18) 18%, rgba(255,240,184,0.22) 50%, rgba(232,200,74,0.18) 82%, rgba(7,4,14,0.1)),
      linear-gradient(180deg, rgba(255,248,214,0.08), rgba(7,4,14,0.04));
    border-top: 3px solid rgba(255,231,143,0.92);
    border-bottom: 3px solid rgba(232,200,74,0.52);
    border-radius: 14px;
    box-shadow:
      0 0 20px rgba(232,200,74,0.34),
      inset 0 0 0 1px rgba(255,240,184,0.18),
      inset 0 0 18px rgba(255,240,184,0.08);
    pointer-events: none;
    z-index: 2;
  }
  .slot-payline-band::before {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent, rgba(255,247,205,0.88) 12%, rgba(255,247,205,1) 50%, rgba(255,247,205,0.88) 88%, transparent);
    box-shadow: 0 0 10px rgba(255,247,205,0.42);
    opacity: 0.9;
  }
  .slot-payline-band span {
    position: absolute;
    right: 10px;
    top: -13px;
    padding: 3px 10px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(16,12,24,0.98), rgba(10,8,16,0.95));
    border: 1px solid rgba(255,232,145,0.5);
    box-shadow: 0 8px 20px rgba(0,0,0,0.35), 0 0 14px rgba(232,200,74,0.2);
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 1.35px;
    color: var(--gold);
    white-space: nowrap;
  }
  .slot-payline-band.flash-win {
    box-shadow: 0 0 22px rgba(61,255,138,0.42);
    border-top-color: rgba(61,255,138,0.9);
    border-bottom-color: rgba(61,255,138,0.38);
    animation: slotPaylinePulse 0.36s ease 2;
  }
  .slot-payline-band.flash-near {
    box-shadow: 0 0 20px rgba(232,200,74,0.36);
    border-top-color: rgba(232,200,74,0.92);
    border-bottom-color: rgba(232,200,74,0.34);
    animation: slotPaylinePulse 0.28s ease 2;
  }
  .slot-payline-band.flash-lose {
    box-shadow: 0 0 14px rgba(196,74,255,0.2);
    border-top-color: rgba(196,74,255,0.7);
    border-bottom-color: rgba(196,74,255,0.24);
  }
  .slot-grid {
    --slot-cell-size: 84px;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    justify-content: center;
    margin: 0 auto;
  }
  .slot-reel-grid {
    align-items: stretch;
  }
  .slot-column {
    position: relative;
    width: var(--slot-cell-size);
  }
  .slot-window {
    position: relative;
    width: var(--slot-cell-size);
    height: calc(var(--slot-cell-size) * 3);
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(180deg, #0a0a14 0%, #111122 100%);
    border: 2px solid rgba(100,60,180,0.5);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 4px 12px rgba(0,0,0,0.5);
    transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
  }
  .slot-window::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to bottom, rgba(0,0,0,0.88), transparent 22%, transparent 78%, rgba(0,0,0,0.88)),
      linear-gradient(to bottom, transparent 32.8%, rgba(255,255,255,0.1) 33%, rgba(255,255,255,0.1) 33.4%, transparent 33.6%, transparent 66.2%, rgba(255,255,255,0.1) 66.4%, rgba(255,255,255,0.1) 66.8%, transparent 67%);
    pointer-events: none;
    z-index: 2;
  }
  .slot-strip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    will-change: transform;
  }
  .slot-symbol {
    width: var(--slot-cell-size);
    height: var(--slot-cell-size);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 2.4rem;
    user-select: none;
    text-shadow: 0 0 10px rgba(255,255,255,0.12);
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.16));
  }
  .slot-symbol.payline-row {
    color: #fff6d3;
  }
  .slot-column.spinning .slot-window {
    border-color: #c44aff;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 0 20px rgba(196,74,255,0.6), 0 4px 12px rgba(0,0,0,0.5);
  }
  .slot-column.spinning .slot-symbol {
    animation: slotCellPulse 0.12s linear infinite alternate;
  }
  .slot-column.win .slot-window {
    border-color: var(--green);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 0 30px rgba(61,255,138,0.8), 0 4px 12px rgba(0,0,0,0.5);
  }
  .slot-column.win .slot-symbol.payline-row {
    animation: reelWin 0.5s ease;
    filter: drop-shadow(0 0 12px rgba(61,255,138,0.38));
  }
  .slot-column.near-miss .slot-window {
    border-color: var(--accent);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 0 20px rgba(232,200,74,0.6), 0 4px 12px rgba(0,0,0,0.5);
  }
  .slot-column.near-miss .slot-symbol.payline-row {
    animation: reelShake 0.4s ease;
  }
  .slot-column.lose .slot-window {
    border-color: rgba(100,60,180,0.3);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 4px 12px rgba(0,0,0,0.5);
  }
  .slot-column.lose .slot-symbol.payline-row {
    opacity: 0.72;
  }
  .slot-column.slot-jackpot-flash .slot-window,
  .slot-column.slot-jackpot-flash .slot-symbol.payline-row { animation: jackpotFlash 0.4s ease 5; }
  @keyframes slotPaylinePulse {
    0%, 100% { transform: translateY(-50%) scaleX(1); }
    50% { transform: translateY(-50%) scaleX(1.03); }
  }
  .slots {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 0 0 6px;
    position: relative;
  }
  /* Payline glow */
  .slot-payline {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 3px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgba(232,200,74,0.95), transparent);
  box-shadow: 0 0 10px rgba(232,200,74,0.8);
  z-index: 3;
  pointer-events: none;

}
  .slot-reel {
    width: 90px; height: 110px;
    background: linear-gradient(180deg, #0a0a14 0%, #111122 100%);
    border: 2px solid rgba(100,60,180,0.5);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 4px 12px rgba(0,0,0,0.5);
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .slot-reel::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 35%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.85), transparent);
    pointer-events: none; z-index: 2;
  }
  .slot-reel::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 35%;
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    pointer-events: none; z-index: 2;
  }
  .slot-reel .reel-strip {
    display: flex; flex-direction: column; align-items: center;
    position: absolute; top: 0; left: 0; right: 0;
    will-change: transform;
  }
  .slot-reel .reel-strip span {
    height: 110px; line-height: 110px; font-size: 3.2rem;
    text-align: center; display: block; width: 100%;
    user-select: none; flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.2));
  }
  .slot-reel.spinning {
    border-color: #c44aff;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 0 20px rgba(196,74,255,0.6), 0 4px 12px rgba(0,0,0,0.5);
  }
  .slot-reel.win {
    border-color: var(--green);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 0 30px rgba(61,255,138,0.8), 0 4px 12px rgba(0,0,0,0.5);
    animation: reelWin 0.5s ease;
  }
  .slot-reel.near-miss {
    border-color: var(--accent);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 0 20px rgba(232,200,74,0.6), 0 4px 12px rgba(0,0,0,0.5);
    animation: reelShake 0.4s ease;
  }
  .slot-reel.lose {
    border-color: rgba(100,60,180,0.3);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 4px 12px rgba(0,0,0,0.5);
  }
  .slot-jackpot-flash { animation: jackpotFlash 0.4s ease 5; }
  @keyframes jackpotFlash {
    0%,100%{ box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 0 30px rgba(61,255,138,0.8); }
    50%    { box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 0 70px rgba(232,200,74,1); border-color: var(--accent); }
  }
  @keyframes reelWin { 0%,100%{transform:scale(1)} 40%{transform:scale(1.12)} }
  @keyframes reelShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
  @keyframes slotCellPulse { from { transform: translateY(-1px); } to { transform: translateY(1px); } }

  /* Slot msg */
  .slot-result-msg {
    min-height: 28px;
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 1px;
    text-align: center;
    margin: 10px 0 6px;
    text-shadow: 0 0 10px currentColor;
  }
  /* Paytable */
  .slot-paytable {
    display: flex; flex-wrap: wrap; gap: 6px;
    justify-content: center; margin-bottom: 14px;
  }
  .slot-pay-item {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 5px 10px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--muted);
    white-space: nowrap;
  }
  /* Spin buttons */
  .slot-btns { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; max-width:420px; margin:0 auto; }
  .btn-spin {
    background: linear-gradient(135deg, #c44aff, #7a10cc);
    border: none; color: white;
    font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 2px;
    padding: 14px 12px; border-radius: 50px; cursor: pointer; width:100%;
    box-shadow: 0 4px 20px rgba(196,74,255,0.5);
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .btn-spin:hover  { box-shadow: 0 4px 28px rgba(196,74,255,0.7); }
  .btn-spin:active { transform: scale(0.96); }
  .btn-spin:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
  .btn-auto {
    background: rgba(232,200,74,0.08);
    border: 1px solid rgba(232,200,74,0.3);
    color: var(--muted);
    font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 1px;
    padding: 14px 12px; border-radius: 50px; cursor: pointer; width:100%;
    transition: all 0.15s;
  }
  .btn-auto.active { background: rgba(232,200,74,0.18); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 12px rgba(232,200,74,0.3); }
  .btn-auto:disabled { opacity: 0.35; cursor: not-allowed; }

  /* GAME GUIDE DOCK */
  #guideDock {
    position: fixed; inset: 0; z-index: 1250;
    pointer-events: none;
    display: none;
  }
  #guideToggle {
    pointer-events: auto; position: fixed; left: 10px; right: 10px; bottom: calc(var(--nav-rail-height) - 6px + env(safe-area-inset-bottom));
    background: linear-gradient(135deg, rgba(196,74,255,0.22), rgba(74,255,224,0.14));
    border: 1px solid rgba(196,74,255,0.35);
    color: var(--text);
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.8px;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
  }
  #guideDock.open {
    pointer-events: auto;
    background: rgba(8,10,16,0.82);
    backdrop-filter: blur(3px);
  }
  #guideDock.open #guideToggle { display:none; }
  #guidePanel {
    position: absolute;
    left: 10px;
    right: 10px;
    top: max(10px, env(safe-area-inset-top));
    bottom: calc(var(--nav-rail-height) + env(safe-area-inset-bottom));
    pointer-events: none;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px) scale(0.99);
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
  }
  #guideDock.open #guidePanel.open {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .guide-head {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 12px; border-bottom:1px solid var(--border);
  }
  .guide-head-title { font-family:var(--font-display); font-size:0.8rem; color:var(--accent); letter-spacing:1px; }
  .guide-close {
    background:rgba(255,69,69,0.12); border:1px solid rgba(255,69,69,0.45); color:#ff7a7a;
    font-family:var(--font-display); font-size:0.7rem; padding:7px 10px; border-radius:8px; cursor:pointer;
  }
  .guide-body { padding: 10px 12px; overflow-y: auto; flex: 1; }
  .guide-title { font-family: var(--font-display); font-size: 0.82rem; color: var(--accent); margin-bottom: 6px; }
  .guide-text { font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted); line-height: 1.55; margin-bottom: 8px; }
  .guide-faq-tabs {
    display:flex;
    gap:var(--segment-shell-gap);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)),
      linear-gradient(160deg, rgba(22,24,33,0.98), rgba(11,12,18,1));
    border:var(--segment-shell-border);
    border-radius:var(--segment-shell-radius);
    padding:var(--segment-shell-padding);
    margin-bottom:12px;
    box-shadow:var(--segment-shell-shadow);
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .guide-faq-tabs::-webkit-scrollbar { display:none; }
  .guide-faq-tab {
    flex:1 0 0;
    min-width:128px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    border:1px solid transparent;
    color:rgba(233,236,244,0.56);
    font-family:var(--font-display);
    font-size:var(--segment-button-font);
    letter-spacing:var(--segment-button-letter);
    padding:var(--segment-button-pad-block) var(--segment-button-pad-inline);
    border-radius:var(--segment-button-radius);
    cursor:pointer;
    min-height:var(--segment-button-min-height);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
  }
  .guide-faq-tab.active {
    background:
      linear-gradient(180deg, rgba(232,200,74,0.16), rgba(255,255,255,0.035));
    border-color:rgba(232,200,74,0.24);
    color:var(--accent);
    box-shadow: 0 10px 20px rgba(0,0,0,0.18), 0 0 0 1px rgba(232,200,74,0.08);
  }
  .guide-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
  .guide-chip {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
    font-family: var(--font-mono);
    font-size: 0.56rem;
    color: var(--muted);
  }

  /* BAHIS BUTONLARI */
  .bet-btns {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
    margin-bottom:12px;
  }
  .bet-btn {
    background:linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border:1px solid var(--border);
    color:var(--muted);
    font-family:var(--font-display);
    font-size:0.76rem;
    letter-spacing:0.8px;
    padding:10px 8px;
    border-radius:10px;
    cursor:pointer;
    transition:all 0.15s;
    min-height:42px;
  }
  .bet-btn:hover { border-color:rgba(196,74,255,0.35); color:#d28cff; }
  .bet-btn.active {
    background:linear-gradient(135deg, rgba(196,74,255,0.22), rgba(124,44,220,0.18));
    border-color:#c44aff;
    color:#f0dcff;
    box-shadow:0 0 18px rgba(196,74,255,0.28);
  }
  @media (max-width: 420px) {
    .bet-btns { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  }

  /* YAZIT-TURA */
  /* RULET */
  #page-casino,
  #cpanel-dice,
  .roulette-wrap,
  .roulette-stage,
  .roulette-container {
    overflow-x:hidden;
    overscroll-behavior-x:none;
  }
  .roulette-wrap { text-align:center; padding-bottom:8px; touch-action:pan-y; }
  .roulette-stage {
    background:linear-gradient(160deg, #140c1f 0%, #0d101c 55%, #17100c 100%);
    border:1px solid rgba(232,200,74,0.28);
    border-radius:16px;
    padding:12px 10px 14px;
    box-shadow:0 0 24px rgba(232,200,74,0.1), inset 0 0 40px rgba(0,0,0,0.35);
    margin-bottom:10px;
  }
  .roulette-head {
    display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
    margin:0 2px 10px;
  }
  .roulette-title {
    font-family:var(--font-display); font-size:0.78rem; letter-spacing:1px; color:var(--accent);
  }
  .roulette-current-bet {
    font-family:var(--font-mono); font-size:0.62rem; color:#d7c9ff;
    background:rgba(196,74,255,0.14); border:1px solid rgba(196,74,255,0.32);
    border-radius:999px; padding:4px 8px;
    max-width:100%;
    overflow-wrap:anywhere;
  }
  .roulette-canvas-wrap {
    position:relative; width:220px; height:220px; margin:0 auto 8px;
  }
  #rouletteCanvas { border-radius:50%; box-shadow:0 0 30px rgba(232,200,74,0.3); }
  #rouletteBallCanvas {
    position:absolute; top:0; left:0; pointer-events:none;
  }
  .roulette-result {
    width:72px; height:72px; border-radius:50%; margin:0 auto 12px;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-size:1.6rem;
    border:3px solid var(--border); background:var(--bg3);
    transition: border-color 0.4s, box-shadow 0.4s, color 0.3s;
    box-shadow: 0 0 0 0 transparent;
  }
  .roulette-result.win {
    box-shadow: 0 0 24px rgba(61,255,138,0.5);
    animation: reelWin 0.4s ease;
  }
  .roulette-result.lose {
    box-shadow: 0 0 16px rgba(255,69,69,0.3);
  }

  /* Roulette container — holds wheel + ball track as siblings */
  .roulette-container {
    --rw-size: min(82vw, 320px);
    position:relative; width:var(--rw-size); height:var(--rw-size); margin:0 auto 12px;
  }
  .roulette-countdown-overlay {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    z-index:7;
    min-width:180px;
    text-align:center;
    font-family:var(--font-display);
    font-size:1.35rem;
    letter-spacing:1.5px;
    color:var(--accent);
    background:rgba(5,7,12,0.76);
    border:1px solid rgba(232,200,74,0.45);
    border-radius:10px;
    padding:9px 12px;
    text-shadow:0 0 12px rgba(232,200,74,0.22);
    pointer-events:none;
  }
  .roulette-countdown-overlay.spinning {
    color:var(--muted);
    border-color:rgba(255,255,255,0.2);
  }

  /* Roulette wheel — visual spinning disc, built by JS */
  .roulette-wheel {
    width:var(--rw-size); height:var(--rw-size); border-radius:50%;
    border:4px solid rgba(232,200,74,0.5);
    box-shadow: 0 0 28px rgba(196,74,255,0.35), inset 0 0 30px rgba(0,0,0,0.7);
    position:absolute; top:0; left:0;
    overflow:hidden;
    transition: transform 4s cubic-bezier(0.17,0.67,0.12,0.99);
  }
  /* Center hub */
  .roulette-wheel::after {
    content:''; position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:32px; height:32px; border-radius:50%;
    background:var(--bg2); border:3px solid rgba(232,200,74,0.6);
    box-shadow:0 0 10px rgba(0,0,0,0.9);
    z-index:10;
  }
  /* Segment number labels — injected by JS */
  .rw-num {
    position:absolute; top:4px; left:50%;
    transform-origin:9px calc((var(--rw-size) / 2) - 10px);
    font-family:var(--font-mono); font-size:clamp(0.56rem, 1.9vw, 0.68rem); font-weight:800;
    color:rgba(255,255,255,0.9); text-align:center;
    width:18px; margin-left:-9px;
    pointer-events:none; user-select:none;
    text-shadow:0 1px 3px rgba(0,0,0,1), 0 0 4px rgba(0,0,0,1);
  }

  /* Ball track — counter-rotates around the wheel */
  .roulette-ball-track {
    position:absolute; top:0; left:0;
    width:var(--rw-size); height:var(--rw-size); border-radius:50%;
    pointer-events:none;
    transition: transform 4s cubic-bezier(0.33,0,0.1,1);
  }
  .roulette-ball {
    position:absolute; top:9px; left:50%;
    transform:translateX(-50%);
    width:12px; height:12px; border-radius:50%;
    background:white; box-shadow:0 0 8px rgba(255,255,255,0.9), 0 0 2px rgba(0,0,0,0.5);
  }

  /* Fixed pointer at top — winning segment stops here */
  .roulette-pointer {
    position:absolute; top:-6px; left:50%; transform:translateX(-50%);
    width:0; height:0;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-top:20px solid var(--accent);
    filter:drop-shadow(0 0 6px rgba(232,200,74,1));
    z-index:20;
  }
  .casino-info {
    margin-top:10px; background:var(--card); border:1px solid var(--border);
    border-radius:10px; padding:10px 12px;
  }
  .casino-info-title {
    font-family:var(--font-display); font-size:0.72rem; color:var(--accent); margin-bottom:6px;
  }
  .casino-info-text {
    font-family:var(--font-mono); font-size:0.58rem; color:var(--muted); line-height:1.55;
  }

  /* casino-msg shared style */
  .casino-msg {
    min-height:22px; font-family:var(--font-mono); font-size:0.85rem;
    margin:8px 0; letter-spacing:1px; transition:opacity 0.3s;
    max-width:100%;
    overflow-wrap:anywhere;
  }

  .roulette-legend {
    display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
    font-family:var(--font-mono); font-size:0.58rem; color:var(--muted); margin:2px 0 10px;
  }
  .roulette-last10 {
    margin:0 0 8px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:6px;
  }
  .rl-pill {
    min-width:24px;
    height:24px;
    padding:0 6px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-mono);
    font-size:0.62rem;
    border:1px solid var(--border);
    background:var(--bg3);
    color:var(--text);
  }
  .rl-pill.red { color:#ffd9d4; border-color:rgba(231,76,60,0.5); background:rgba(231,76,60,0.14); }
  .rl-pill.black { color:#ddd; border-color:rgba(120,120,120,0.45); background:rgba(40,40,55,0.35); }
  .rl-pill.green { color:#b8ffd3; border-color:rgba(39,174,96,0.55); background:rgba(39,174,96,0.15); }
  .rl-dot { width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:4px; }
  .rl-red { background:#e74c3c; box-shadow:0 0 6px rgba(231,76,60,0.6); }
  .rl-black { background:#ddd; box-shadow:0 0 6px rgba(220,220,220,0.35); }
  .rl-green { background:#27ae60; box-shadow:0 0 6px rgba(39,174,96,0.6); }

  .roulette-bets { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin:10px 0; }
  .rbet-btn {
    padding:10px 6px; border:1px solid var(--border); background:linear-gradient(145deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    color:var(--muted); font-family:var(--font-mono); font-size:0.62rem;
    border-radius:10px; cursor:pointer; transition:all 0.15s; text-align:center;
  }
  .rbet-btn.active { border-color:#c44aff; color:#c44aff; background:rgba(196,74,255,0.1); }
  .rbet-btn.kirmizi { border-color:#e74c3c55; }
  .rbet-btn.kirmizi.active { border-color:#e74c3c; color:#e74c3c; background:rgba(231,76,60,0.1); }
  .rbet-btn.yesil  { border-color:#27ae6055; }
  .rbet-btn.yesil.active  { border-color:#27ae60; color:#27ae60; background:rgba(39,174,96,0.1); }
  .btn-roulette {
    width:100%; background:linear-gradient(135deg,#c44aff,#8a22cc); border:none; color:white;
    font-family:var(--font-display); font-size:1.1rem; letter-spacing:2px;
    padding:13px; border-radius:8px; cursor:pointer; margin-top:8px;
    transition:box-shadow 0.15s, opacity 0.15s;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .btn-roulette:active { box-shadow:0 0 0 2px rgba(196,74,255,0.18) inset; }
  .btn-roulette:disabled { opacity:0.4; cursor:not-allowed; }
  @media (max-width: 400px) {
    .roulette-bets { grid-template-columns:1fr 1fr; }
  }

  /* HIGH / LOW */
  .hilo-wrap {
    background:linear-gradient(160deg,#0c141f 0%, #0d0f1d 55%, #1b120c 100%);
    border:1px solid rgba(74,255,224,0.24);
    border-radius:16px;
    padding:14px 12px;
    box-shadow:0 0 24px rgba(74,255,224,0.08), inset 0 0 36px rgba(0,0,0,0.34);
    margin-bottom:16px;
    text-align:center;
  }
  .hilo-card {
    width:110px; height:145px; margin:8px auto 12px; border-radius:12px;
    border:1px solid rgba(74,255,224,0.45);
    background:linear-gradient(145deg, rgba(74,255,224,0.1), rgba(196,74,255,0.06));
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    box-shadow:0 0 18px rgba(74,255,224,0.18);
  }
  .hilo-card-rank { font-family:var(--font-display); font-size:2rem; color:#8dffe9; letter-spacing:1px; }
  .hilo-card-sub { font-family:var(--font-mono); font-size:0.58rem; color:var(--muted); margin-top:4px; }
  .hilo-choices { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 10px; }
  .hilo-btn {
    border:1px solid var(--border); border-radius:10px; padding:10px 8px; cursor:pointer;
    background:rgba(255,255,255,0.03); color:var(--muted);
    font-family:var(--font-display); font-size:0.78rem; letter-spacing:1px;
  }
  .hilo-btn.active { border-color:#6ff3df; color:#8dffe9; background:rgba(74,255,224,0.12); }
  .btn-hilo {
    width:100%; background:linear-gradient(135deg,#30d9bf,#159483); border:none; color:#05110f;
    font-family:var(--font-display); font-size:1.02rem; letter-spacing:2px;
    padding:12px; border-radius:10px; cursor:pointer; transition:transform 0.15s;
  }
  .btn-hilo:active { transform:scale(0.97); }

  .gang-hero-compact {
    background:linear-gradient(135deg, rgba(196,74,255,0.14), rgba(255,140,0,0.08));
    border:1px solid rgba(196,74,255,0.24);
    border-radius:10px;
    padding:10px 12px;
    margin-bottom:10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .gang-leave-btn {
    background:rgba(255,69,69,0.12);
    border:1px solid rgba(255,69,69,0.35);
    color:var(--red);
    font-family:var(--font-display);
    font-size:0.58rem;
    padding:6px 10px;
    border-radius:7px;
    cursor:pointer;
  }
  .gang-stat-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-bottom:10px;
  }
  .gang-stat-chip {
    background:var(--card);
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 8px;
    text-align:center;
  }
  .gang-stat-chip strong {
    display:block;
    font-family:var(--font-display);
    font-size:0.88rem;
    color:var(--text);
  }
  .gang-stat-chip span {
    display:block;
    margin-top:3px;
    font-family:var(--font-mono);
    font-size:0.5rem;
    color:var(--muted);
    letter-spacing:0.7px;
  }
  .gang-mini-card {
    background:var(--card);
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 12px;
    margin-bottom:10px;
  }
  .gang-mini-title {
    font-family:var(--font-display);
    font-size:0.72rem;
    color:var(--accent);
    margin-bottom:5px;
  }
  .gang-mini-note {
    font-family:var(--font-mono);
    font-size:0.55rem;
    color:var(--muted);
    line-height:1.6;
  }
  .gang-mini-actions {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    margin-top:8px;
  }
  .gang-mini-actions button {
    background:var(--bg3);
    border:1px solid var(--border);
    color:var(--text);
    font-family:var(--font-display);
    font-size:0.58rem;
    padding:8px 6px;
    border-radius:8px;
    cursor:pointer;
  }
  .gang-mini-actions button:disabled {
    opacity:0.45;
    cursor:not-allowed;
  }
  .gang-lobby-shell {
    display:grid;
    gap:10px;
    margin-bottom:14px;
  }
  .gang-lobby-hero {
    background:linear-gradient(135deg, rgba(196,74,255,0.14), rgba(255,140,0,0.08));
    border:1px solid rgba(196,74,255,0.24);
    border-radius:12px;
    padding:14px 14px 12px;
  }
  .gang-lobby-kicker {
    font-family:var(--font-mono);
    font-size:0.54rem;
    color:var(--muted);
    letter-spacing:1.2px;
    margin-bottom:5px;
  }
  .gang-lobby-title {
    font-family:var(--font-display);
    font-size:0.92rem;
    color:var(--accent);
    margin-bottom:6px;
  }
  .gang-lobby-note {
    font-family:var(--font-mono);
    font-size:0.57rem;
    color:var(--muted);
    line-height:1.65;
  }
  .gang-lobby-switch {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .gang-lobby-switch-btn {
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px 10px;
    cursor:pointer;
    text-align:left;
    transition:transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  }
  .gang-lobby-switch-btn span {
    display:block;
    font-family:var(--font-display);
    font-size:0.8rem;
    color:var(--text);
  }
  .gang-lobby-switch-btn small {
    display:block;
    margin-top:4px;
    font-family:var(--font-mono);
    font-size:0.5rem;
    color:var(--muted);
    letter-spacing:0.3px;
  }
  .gang-lobby-switch-btn.active {
    border-color:rgba(196,74,255,0.45);
    box-shadow:0 10px 28px rgba(196,74,255,0.12);
    transform:translateY(-1px);
  }
  .gang-lobby-switch-btn.active span { color:var(--accent); }
  .gang-lobby-panel {
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
  }
  .gang-lobby-panel-title {
    font-family:var(--font-display);
    font-size:0.78rem;
    color:var(--text);
    margin-bottom:6px;
  }
  .gang-lobby-search {
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    margin:10px 0 12px;
  }
  .gang-lobby-search input,
  .gang-create-grid input,
  .gang-donate-custom input {
    background:var(--bg3);
    border:1px solid var(--border);
    color:var(--text);
    font-family:var(--font-mono);
    font-size:0.7rem;
    padding:10px 11px;
    border-radius:9px;
  }
  .gang-lobby-search button,
  .gang-lobby-submit,
  .gang-donate-custom button,
  .gang-lobby-action {
    border:none;
    border-radius:9px;
    cursor:pointer;
    font-family:var(--font-display);
    font-size:0.68rem;
    letter-spacing:0.3px;
  }
  .gang-lobby-search button,
  .gang-lobby-submit,
  .gang-donate-custom button {
    background:linear-gradient(135deg,#c44aff,#8a22cc);
    color:#fff;
    padding:10px 14px;
  }
  .gang-create-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin:10px 0 12px;
  }
  .gang-lobby-results {
    display:grid;
    gap:8px;
  }
  .gang-lobby-results-head {
    display:flex;
    justify-content:space-between;
    gap:8px;
    align-items:center;
    padding:0 2px;
    font-family:var(--font-mono);
    font-size:0.55rem;
    color:var(--muted);
  }
  .gang-lobby-result-card {
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:flex-start;
    background:var(--bg3);
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px;
  }
  .gang-lobby-result-copy {
    min-width:0;
  }
  .gang-lobby-result-name {
    font-family:var(--font-display);
    font-size:0.76rem;
    color:var(--accent);
  }
  .gang-lobby-result-name span {
    color:var(--text);
  }
  .gang-lobby-result-name em {
    font-style:normal;
    font-size:0.54rem;
    color:var(--gold);
    margin-left:4px;
  }
  .gang-lobby-result-meta {
    margin-top:5px;
    font-family:var(--font-mono);
    font-size:0.54rem;
    color:var(--muted);
    line-height:1.55;
  }
  .gang-lobby-result-actions {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:6px;
  }
  .gang-lobby-action {
    background:rgba(196,74,255,0.12);
    border:1px solid rgba(196,74,255,0.35);
    color:var(--accent);
    padding:8px 10px;
  }
  .gang-lobby-action.gold {
    background:rgba(232,200,74,0.12);
    border:1px solid rgba(232,200,74,0.35);
    color:var(--gold);
  }
  .gang-lobby-action.muted,
  .gang-lobby-action:disabled {
    background:var(--card);
    border:1px solid var(--border);
    color:var(--muted);
    cursor:not-allowed;
  }
  .gang-lobby-empty {
    background:var(--bg3);
    border:1px solid var(--border);
    border-radius:10px;
    padding:12px;
    font-family:var(--font-mono);
    font-size:0.62rem;
    color:var(--muted);
  }
  .gang-lobby-pending {
    background:rgba(255,140,0,0.08);
    border:1px solid rgba(255,140,0,0.22);
    border-radius:10px;
    padding:10px;
    margin-bottom:10px;
  }
  .gang-lobby-pending-list {
    display:grid;
    gap:6px;
    margin-top:8px;
  }
  .gang-lobby-pending-item {
    display:flex;
    justify-content:space-between;
    gap:8px;
    background:rgba(0,0,0,0.14);
    border:1px solid rgba(255,255,255,0.05);
    border-radius:8px;
    padding:7px 8px;
    font-family:var(--font-mono);
    font-size:0.54rem;
    color:var(--muted);
  }
  .gang-lobby-pending-item strong {
    color:var(--text);
    font-weight:600;
  }
  .gang-donate-card {
    border-color:rgba(61,255,138,0.22);
  }
  .gang-donate-trigger {
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:0;
    background:none;
    border:none;
    cursor:pointer;
    text-align:left;
  }
  .gang-donate-trigger span {
    flex:0 0 auto;
    font-family:var(--font-display);
    font-size:0.62rem;
    color:var(--green);
    letter-spacing:0.4px;
  }
  .gang-donate-presets {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;
    margin-top:10px;
  }
  .gang-donate-presets button {
    background:var(--bg3);
    border:1px solid var(--border);
    color:var(--text);
    font-family:var(--font-display);
    font-size:0.68rem;
    padding:9px 4px;
    border-radius:8px;
    cursor:pointer;
  }
  .gang-donate-presets button.accent {
    background:linear-gradient(135deg,#c44aff,#8a22cc);
    border:none;
    color:#fff;
  }
  .gang-donate-custom {
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    margin-top:8px;
  }
  .gang-fold-list {
    display:grid;
    gap:8px;
  }
  .gang-fold {
    background:var(--card);
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
  }
  .gang-fold-head {
    list-style:none;
    cursor:pointer;
    padding:10px 12px;
    font-family:var(--font-display);
    font-size:0.68rem;
    letter-spacing:0.6px;
    color:var(--text);
    background:rgba(255,255,255,0.02);
  }
  .gang-fold-head::-webkit-details-marker { display:none; }
  .gang-fold[open] .gang-fold-head {
    color:var(--accent);
    border-bottom:1px solid rgba(255,255,255,0.05);
  }
  .gang-fold-body { padding:10px 12px 2px; }
  .gang-op-card {
    background:var(--card);
    border:1px solid rgba(255,69,69,0.24);
    border-radius:10px;
    padding:10px 12px;
    margin-bottom:8px;
  }
  .gang-op-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
  }
  .gang-op-title {
    font-family:var(--font-display);
    font-size:0.76rem;
    color:#ff8c00;
  }
  .gang-op-cd,
  .gang-op-meta,
  .gang-op-cost {
    font-family:var(--font-mono);
    font-size:0.55rem;
    color:var(--muted);
  }
  .gang-op-meta { margin:6px 0 8px; }
  .gang-op-foot {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
  }
  .gang-op-btn {
    background:linear-gradient(135deg,#ff4545,#aa1111);
    border:none;
    color:#fff;
    font-family:var(--font-display);
    font-size:0.62rem;
    padding:7px 10px;
    border-radius:7px;
    cursor:pointer;
  }
  .gang-op-btn:disabled {
    background:var(--bg3);
    color:var(--muted);
    cursor:not-allowed;
  }

  /* ÇETE SUÇU */
  .gang-crime-card {
    margin:0 16px 10px; background:var(--card); border:1px solid var(--border);
    border-radius:12px; padding:14px 16px; position:relative; overflow:hidden;
  }
  .gang-crime-card::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
    background:var(--gc-renk,var(--accent)); pointer-events:none;
  }
  .gcc-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .gcc-icon   { font-size:1.8rem; }
  .gcc-isim   { font-family:var(--font-display); font-size:1.05rem; letter-spacing:1px; flex:1; }
  .gcc-zorluk { font-family:var(--font-mono); font-size:0.6rem; padding:2px 8px; border-radius:10px; border:1px solid; }
  .gang-crime-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    margin-bottom:8px;
  }
  .gang-crime-meta {
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.04);
    border-radius:8px;
    padding:8px;
    font-family:var(--font-mono);
    font-size:0.56rem;
    color:var(--muted);
    line-height:1.45;
  }
  .gang-crime-brief {
    font-family:var(--font-mono);
    font-size:0.56rem;
    color:var(--text);
    line-height:1.55;
    margin-bottom:9px;
  }
  .gcc-info   { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
  .gcc-info-left { display:flex; flex-direction:column; gap:3px; }
  .gcc-para   { font-family:var(--font-mono); font-size:0.72rem; color:var(--accent); }
  .gcc-gerek  { font-family:var(--font-mono); font-size:0.62rem; color:var(--muted); }
  .gcc-uyeler { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
  .gcc-uye    {
    display:flex; align-items:center; gap:5px; background:var(--bg3);
    border:1px solid var(--border); border-radius:20px; padding:4px 10px;
    font-size:0.65rem; cursor:pointer; transition:all 0.15s; user-select:none;
  }
  .gcc-uye.katiliyor { border-color:var(--green); color:var(--green); background:rgba(61,255,138,0.08); }
  .gcc-uye.kilitli   { opacity:0.4; cursor:not-allowed; }
  .gcc-btn {
    width:100%; background:linear-gradient(135deg,var(--accent),#b8942a);
    border:none; color:var(--bg); font-family:var(--font-display); font-size:1rem;
    letter-spacing:2px; padding:12px; border-radius:8px; cursor:pointer;
  }
  .gcc-btn:disabled { opacity:0.4; cursor:not-allowed; }
  .slot-machine .slots { display:flex; gap:8px; justify-content:center; margin:16px 0; }
  .slot-machine .slot-reel.spinning { animation: spinreel 0.1s infinite; }
  @keyframes spinreel { 0%{transform:translateY(-4px)} 100%{transform:translateY(4px)} }
  .slot-machine .btn-spin { background:linear-gradient(135deg, var(--accent), #b8942a); border:none; color:var(--bg); font-family:var(--font-display); font-size:1.2rem; letter-spacing:2px; padding:12px 32px; border-radius:8px; cursor:pointer; margin-top:8px; }
  .slot-machine .btn-spin:disabled { opacity:0.5; cursor:not-allowed; }

  /* HASTANE */
  .hospital-hero {
    margin: 0 16px 16px; border-radius: 12px; overflow: hidden;
    background: linear-gradient(135deg, #0a1a0a 0%, #0d1a10 50%, #0a0f1a 100%);
    border: 1px solid rgba(61,255,138,0.2); padding: 20px; position: relative;
  }
  .hospital-hero::before {
    content:''; position:absolute; inset:0;
    background: radial-gradient(ellipse at 30% 50%, rgba(61,255,138,0.1) 0%, transparent 60%);
    pointer-events:none;
  }
  .hospital-hero .city-title { color: #e8f0e8; animation: none; }
  .hospital-hero .city-title span { color: var(--green); }
  .treatment-list { padding: 0 16px; margin-bottom: 20px; }
  .hosp-control {
    margin: 0 16px 10px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
  }
  .hosp-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--segment-shell-gap);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)),
      linear-gradient(160deg, rgba(22,24,33,0.98), rgba(11,12,18,1));
    border: var(--segment-shell-border);
    border-radius: var(--segment-shell-radius);
    padding: var(--segment-shell-padding);
    margin-bottom: 8px;
    box-shadow: var(--segment-shell-shadow);
  }
  .hosp-seg-btn {
    border: 1px solid transparent;
    border-radius: var(--segment-button-radius);
    padding: var(--segment-button-pad-block) var(--segment-button-pad-inline);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    color: rgba(233,236,244,0.56);
    font-family: var(--font-display);
    font-size: var(--segment-button-font);
    letter-spacing: var(--segment-button-letter);
    cursor: pointer;
    min-height: var(--segment-button-min-height);
  }
  .hosp-seg-btn.active {
    background: linear-gradient(180deg, rgba(232,200,74,0.16), rgba(255,255,255,0.03));
    color: var(--accent);
    border: 1px solid rgba(232,200,74,0.24);
    box-shadow: 0 10px 20px rgba(0,0,0,0.18);
  }
  .hosp-quick {
    display:flex; justify-content:space-between; align-items:center; gap:8px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
  }
  .hosp-free-btn {
    border:none; border-radius:8px; padding:9px 10px; cursor:pointer;
    font-family:var(--font-display); font-size:0.68rem;
    background:linear-gradient(135deg,#3dff8a,#1e9f58); color:#05210f;
  }
  .hosp-free-btn:disabled { opacity:0.45; cursor:not-allowed; }
  .hosp-support-bar {
    display:flex; justify-content:space-between; align-items:center; gap:8px;
    background:rgba(196,74,255,0.08); border:1px solid rgba(196,74,255,0.24);
    border-radius:8px; padding:8px 10px; margin-bottom:8px;
  }
  .hosp-support-bar .hosp-support-copy {
    font-family:var(--font-mono); font-size:0.56rem; color:var(--muted); line-height:1.55;
  }
  .hosp-support-actions,
  .hosp-reward-actions {
    display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;
  }
  .hosp-inline-btn,
  .hosp-reward-btn {
    border:1px solid var(--border); background:var(--bg3); color:var(--text);
    font-family:var(--font-display); font-size:0.68rem; padding:9px 11px;
    border-radius:8px; cursor:pointer;
  }
  .hosp-inline-btn:disabled,
  .hosp-reward-btn:disabled { opacity:0.45; cursor:not-allowed; }
  .hosp-reward-card {
    margin-bottom:8px;
    background:linear-gradient(135deg,rgba(74,255,224,0.08),rgba(232,200,74,0.05));
    border:1px solid rgba(74,255,224,0.22);
    border-radius:10px;
    padding:10px 11px;
  }
  .hosp-reward-title {
    font-family:var(--font-display); font-size:0.76rem; letter-spacing:1px; color:var(--accent3);
  }
  .hosp-reward-copy,
  .hosp-reward-meta {
    font-family:var(--font-mono); font-size:0.56rem; color:var(--muted); line-height:1.6;
    margin-top:6px;
  }
  .treatment-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 12px;
    padding: 16px; margin-bottom: 10px; cursor: pointer;
    transition: transform 0.15s, border-color 0.2s;
    display: flex; align-items: center; gap: 14px; position: relative; overflow: hidden;
  }
  .treatment-card:active { transform: scale(0.98); }
  .treatment-card.premium { border-color: rgba(232,200,74,0.35); }
  .treat-icon { font-size: 2.2rem; flex-shrink: 0; position: relative; z-index:1; }
  .treat-info { flex: 1; position: relative; z-index:1; }
  .treat-name { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 1px; }
  .treat-desc { font-size: 0.72rem; color: var(--muted); margin-top: 3px; line-height: 1.4; }
  .treat-effects { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
  .treat-tag {
    font-family: var(--font-mono); font-size: 0.6rem; padding: 2px 7px;
    border-radius: 10px; border: 1px solid;
  }
  .treat-tag.hp   { color:#ff8c00; border-color:rgba(255,140,0,0.4); background:rgba(255,140,0,0.08); }
  .treat-tag.en   { color:var(--accent3); border-color:rgba(74,255,224,0.4); background:rgba(74,255,224,0.08); }
  .treat-tag.full { color:var(--green); border-color:rgba(61,255,138,0.4); background:rgba(61,255,138,0.08); }
  .treat-price { text-align: right; position: relative; z-index:1; flex-shrink:0; }
  .treat-cost { font-family: var(--font-display); font-size: 1.3rem; color: var(--accent); }
  .treat-level-req { font-family: var(--font-mono); font-size: 0.6rem; color: var(--muted); margin-top: 2px; }
  .treat-badge {
    position: absolute; top: 10px; right: 10px;
    font-size: 0.55rem; font-family: var(--font-mono); letter-spacing: 1px;
    padding: 2px 7px; border-radius: 10px;
    background: rgba(232,200,74,0.12); color: var(--accent); border: 1px solid rgba(232,200,74,0.3);
  }
  .hosp-info-box {
    margin: 0 16px 20px; background: rgba(61,255,138,0.04);
    border: 1px solid rgba(61,255,138,0.15); border-radius: 10px; padding: 14px 16px;
  }
  .hosp-info-box p { font-size: 0.75rem; color: var(--muted); line-height: 1.7; }
  .hosp-info-box strong { color: var(--green); }
  .hosp-price-table { padding: 0 16px; margin-bottom: 24px; }
  .hpt-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px; background: var(--card); border: 1px solid var(--border);
    border-radius: 8px; margin-bottom: 6px;
  }
  .hpt-rank { font-family: var(--font-display); font-size: 1rem; letter-spacing: 1px; }
  .hpt-mult { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); }

  /* ANTRENMAN SAYFASI */
  .gym-hero {
    margin: 0 16px 16px; border-radius: 12px; overflow: hidden;
    background: linear-gradient(135deg, #1a0a1a 0%, #0f0a1a 50%, #1a0f0a 100%);
    border: 1px solid rgba(196,74,255,0.25); padding: 20px; position: relative;
  }
  .gym-hero::before {
    content:''; position:absolute; inset:0;
    background: radial-gradient(ellipse at 70% 30%, rgba(196,74,255,0.12) 0%, transparent 60%);
    pointer-events:none;
  }
  .gym-hero .city-title { animation: none; }
  .gym-hero .city-title span { color: #c44aff; }

  /* GENEL GÜÇ KARTI */
  .power-overview {
    margin: 0 16px 16px; background: var(--card); border: 1px solid rgba(196,74,255,0.3);
    border-radius: 12px; padding: 16px; position: relative; overflow: hidden;
  }
  .power-overview::before {
    content:''; position:absolute; inset:0;
    background: radial-gradient(ellipse at 100% 0%, rgba(196,74,255,0.08), transparent 60%);
    pointer-events:none;
  }
  .pow-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
  .pow-title  { font-family:var(--font-display); font-size:1rem; letter-spacing:1px; color:var(--muted); }
  .pow-score  { font-family:var(--font-display); font-size:2.8rem; line-height:1; color:#c44aff;
    text-shadow: 0 0 20px rgba(196,74,255,0.5); }
  .pow-label  { font-family:var(--font-mono); font-size:0.6rem; color:var(--muted); }
  .pow-breakdown { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-top:12px; }
  .pow-item { background:var(--bg3); border-radius:8px; padding:8px; text-align:center; }
  .pow-item-val { font-family:var(--font-mono); font-size:0.85rem; color:var(--accent); }
  .pow-item-lbl { font-size:0.55rem; color:var(--muted); margin-top:2px; text-transform:uppercase; letter-spacing:1px; }

  /* ANTRENMAN KARTLARI */
  .train-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 16px; margin-bottom:20px; }
  .train-card {
    background:var(--card); border:1px solid var(--border); border-radius:12px;
    padding:14px; cursor:pointer; position:relative; overflow:hidden;
    transition: transform 0.15s, border-color 0.2s;
  }
  .train-card:active { transform:scale(0.96); }
  .train-card::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 0% 100%, var(--tglow,transparent), transparent 60%);
    pointer-events:none;
  }
  .train-card[data-stat="guc"]      { --tglow: rgba(255,69,69,0.1); }
  .train-card[data-stat="karizma"]  { --tglow: rgba(196,74,255,0.1); }
  .train-card[data-stat="ceviklik"] { --tglow: rgba(74,255,224,0.1); }
  .train-card[data-stat="savunma"]  { --tglow: rgba(61,255,138,0.1); }
  .train-card[data-stat="sans"]     { --tglow: rgba(232,200,74,0.1); }
  .train-card[data-stat="zeka"]     { --tglow: rgba(255,74,219,0.1); }
  .tc-icon   { font-size:2rem; margin-bottom:6px; display:block; }
  .tc-name   { font-family:var(--font-display); font-size:1rem; letter-spacing:1px; }
  .tc-stat   { font-size:0.65rem; color:var(--muted); margin-top:2px; }
  .tc-bar    { height:5px; background:var(--border); border-radius:3px; overflow:hidden; margin:8px 0; }
  .tc-fill   { height:100%; border-radius:3px; transition:width 0.5s; }
  .tc-cost   { font-family:var(--font-mono); font-size:0.75rem; color:var(--accent); margin-top:6px; }
  .tc-gain   { font-size:0.6rem; color:var(--green); }
  .tc-energy { position:absolute; top:8px; right:8px; font-family:var(--font-mono);
    font-size:0.6rem; color:var(--muted); background:var(--bg3); padding:2px 5px; border-radius:8px; }

  /* GÜÇ SIRALAMASI */
  .power-rank-list { padding:0 16px; margin-bottom:24px; }
  .pr-item {
    display:flex; align-items:center; gap:10px;
    background:var(--card); border:1px solid var(--border); border-radius:8px;
    padding:10px 12px; margin-bottom:6px;
  }
  .pr-item.you { border-color:rgba(196,74,255,0.4); background:rgba(196,74,255,0.04); }
  .pr-pos   { font-family:var(--font-display); font-size:1.2rem; width:28px; text-align:center; color:var(--muted); }
  .pr-pos.gold   { color:var(--gold); }
  .pr-pos.silver { color:#c0c0c0; }
  .pr-pos.bronze { color:#cd7f32; }
  .pr-avatar { width:32px; height:32px; border-radius:50%; background:var(--bg3); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
  .pr-name  { flex:1; font-size:0.9rem; font-weight:600; }
  .pr-power { font-family:var(--font-display); font-size:1.2rem; color:#c44aff; }
  /* TICARET SAYFASI */
  .drug-hero {
    margin: 0 16px 16px; border-radius: 12px; overflow: hidden;
    background: linear-gradient(135deg, #0a180a 0%, #101a08 50%, #0a0f18 100%);
    border: 1px solid rgba(61,255,138,0.2); padding: 20px; position: relative;
  }
  .drug-hero::before {
    content:''; position:absolute; inset:0;
    background: radial-gradient(ellipse at 20% 80%, rgba(61,255,138,0.1) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 20%, rgba(74,255,224,0.06) 0%, transparent 50%);
    pointer-events:none;
  }
  .drug-hero .city-title { animation:none; }
  .drug-hero .city-title span { color: var(--green); }

  /* ENVANTER BAR */
  .drug-inv-bar {
    margin: 0 16px 16px; display:flex; gap:8px;
  }
  .dib-card {
    flex:1; background:var(--card); border:1px solid var(--border); border-radius:10px;
    padding:10px; text-align:center;
  }
  .dib-icon { font-size:1.2rem; }
  .dib-val  { font-family:var(--font-display); font-size:1.3rem; color:var(--green); line-height:1; margin-top:2px; }
  .dib-lbl  { font-size:0.55rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-top:2px; }

  /* PAZAR SAYACI */
  .market-timer {
    margin: 0 16px 12px; background:rgba(61,255,138,0.05);
    border:1px solid rgba(61,255,138,0.2); border-radius:8px;
    padding:10px 14px; display:flex; align-items:center; justify-content:space-between;
  }
  .mt-label { font-size:0.7rem; color:var(--muted); font-family:var(--font-mono); }
  .mt-timer { font-family:var(--font-display); font-size:1.4rem; color:var(--green); letter-spacing:2px; }
  .mt-flash { animation: timerPulse 1s infinite; }
  @keyframes timerPulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

  /* TAB SİSTEMİ - PAZAR */
  .drug-tabs {
    display: flex; margin: 0 16px 16px; gap: var(--segment-shell-gap);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)),
      linear-gradient(160deg, rgba(22,24,33,0.98), rgba(11,12,18,1));
    border-radius: var(--segment-shell-radius); padding: var(--segment-shell-padding);
    border: var(--segment-shell-border);
    box-shadow: var(--segment-shell-shadow);
  }
  .drug-tab {
    flex: 1; padding: var(--segment-button-pad-block) var(--segment-button-pad-inline); border: 1px solid transparent; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    color: rgba(233,236,244,0.56); font-family: var(--font-display); font-size: var(--segment-button-font);
    letter-spacing: var(--segment-button-letter); cursor: pointer; border-radius: var(--segment-button-radius);
    transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: var(--segment-button-min-height);
  }
  .drug-tab.active {
    background: linear-gradient(180deg, rgba(61,255,138,0.16), rgba(255,255,255,0.03)); color: var(--green);
    border: 1px solid rgba(61,255,138,0.24);
    box-shadow: 0 10px 20px rgba(0,0,0,0.18), 0 0 0 1px rgba(61,255,138,0.06);
  }
  .drug-tab-icon { font-size: 1.1rem; }
  .drug-panel { display: none; }
  .drug-panel.active { display: block; animation: fadein 0.25s ease; }

  /* ENVANTERİ ÖZET - KOMPAKT */
  .inv-summary {
    margin: 0 16px 14px; display: grid; grid-template-columns: repeat(4,1fr); gap: 6px;
  }
  .inv-s-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 8px;
    padding: 8px 6px; text-align: center;
  }
  .inv-s-icon { font-size: 1rem; }
  .inv-s-val  { font-family: var(--font-display); font-size: 1.1rem; color: var(--green); line-height: 1.1; }
  .inv-s-lbl  { font-size: 0.5rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
  .drug-market { padding: 0 16px 18px; }
  .drug-card {
    background:var(--card); border:1px solid var(--border); border-radius:12px;
    padding:14px; margin-bottom:10px; position:relative; overflow:hidden;
  }
  .drug-card::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background: var(--drug-color, var(--green));
  }
  .dc-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .dc-icon   { font-size:2rem; }
  .dc-name   { font-family:var(--font-display); font-size:1.1rem; letter-spacing:1px; flex:1; }
  .dc-trend  { font-family:var(--font-mono); font-size:0.75rem; }
  .dc-trend.up   { color:var(--green); }
  .dc-trend.down { color:var(--red); }
  .dc-trend.flat { color:var(--muted); }
  .dc-metrics {
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:10px;
  }
  .dc-metric {
    background:var(--bg3); border:1px solid var(--border); border-radius:8px;
    padding:8px 6px; text-align:center;
  }
  .dc-price-lbl { font-size:0.52rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
  .dc-price-val { font-family:var(--font-display); font-size:1.05rem; margin-top:2px; }
  .dc-price-val.buy  { color:var(--red); }
  .dc-price-val.sell { color:var(--green); }
  .dc-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
  .dc-btn {
    flex:1; border:none; border-radius:8px; padding:8px 7px;
    font-family:var(--font-display); font-size:0.72rem; letter-spacing:0.6px;
    cursor:pointer; transition:transform 0.1s;
  }
  .dc-btn:active { transform:scale(0.96); }
  .dc-btn.buy-btn  { background:linear-gradient(135deg,#ff4545,#c03030); color:white; }
  .dc-btn.sell-btn { background:linear-gradient(135deg,var(--green),#22cc66); color:var(--bg); }
  .dc-btn.max-btn { background:linear-gradient(135deg,#e8c84a,#b8942a); color:var(--bg); }
  .dc-btn:disabled { opacity:0.4; cursor:not-allowed; }
  .dc-stock { font-family:var(--font-mono); font-size:0.65rem; color:var(--muted); margin-top:6px; }
  .dc-inv   { font-family:var(--font-mono); font-size:0.65rem; color:var(--accent); }
  .dc-meta {
    display:flex; justify-content:space-between; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:0.62rem; color:var(--muted); margin-bottom:8px;
  }

  @media (max-width: 720px) {
    .inv-summary { margin:0 12px 12px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .drug-tabs { margin:0 12px 12px; }
    .drug-tab { padding:9px 6px; font-size:0.8rem; gap:5px; }
    .market-timer { margin:0 12px 10px; padding:8px 10px; gap:8px; align-items:flex-start; }
    .mt-label { font-size:0.62rem; }
    .mt-timer { font-size:1.1rem; letter-spacing:1px; }
    .drug-market { padding:0 12px 14px; }
    .drug-card { padding:12px; margin-bottom:8px; }
    .dc-header { margin-bottom:8px; }
    .dc-icon { font-size:1.6rem; }
    .dc-name { font-size:1rem; }
    .dc-metrics { grid-template-columns:1fr 1fr; gap:6px; margin-bottom:8px; }
    .dc-actions { grid-template-columns:1fr 1fr; gap:6px; }
    .dc-btn { padding:9px 8px; font-size:0.75rem; letter-spacing:0.5px; }
    .dc-meta { margin-bottom:7px; font-size:0.58rem; }
  }

  /* FABRIKA */
  .factory-section { padding:0 16px; margin-bottom:20px; }
  .factory-summary-card {
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    padding:14px;
    position:relative;
    overflow:hidden;
  }
  .factory-summary-card::before {
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 100% 0%, rgba(61,255,138,0.08), transparent 45%);
    pointer-events:none;
  }
  .factory-summary-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-top:10px;
  }
  .factory-summary-chip {
    background:var(--bg3);
    border:1px solid var(--border);
    border-radius:9px;
    padding:8px 7px;
    text-align:center;
  }
  .factory-summary-value {
    font-family:var(--font-display);
    font-size:0.95rem;
    color:var(--accent);
  }
  .factory-summary-label {
    margin-top:3px;
    font-family:var(--font-mono);
    font-size:0.48rem;
    color:var(--muted);
    letter-spacing:0.7px;
  }
  .factory-type-list {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:10px;
  }
  .factory-type-chip {
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:999px;
    padding:5px 8px;
    font-family:var(--font-mono);
    font-size:0.54rem;
    color:var(--text);
  }
  .factory-buy-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .factory-card {
    background:var(--card); border:1px solid var(--border); border-radius:12px;
    padding:14px; margin-bottom:10px; position:relative; overflow:hidden;
  }
  .factory-card.owned { border-color:rgba(232,200,74,0.4); }
  .factory-card::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 100% 100%, var(--fglow,transparent), transparent 60%);
    pointer-events:none;
  }
  .fc-header { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
  .fc-icon   { font-size:2.2rem; }
  .fc-info   { flex:1; }
  .fc-name   { font-family:var(--font-display); font-size:1.1rem; letter-spacing:1px; }
  .fc-desc   { font-size:0.7rem; color:var(--muted); margin-top:2px; line-height:1.4; }
  .fc-stats  { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-bottom:12px; }
  .fc-stat   { background:var(--bg3); border-radius:7px; padding:7px; text-align:center; }
  .fc-stat-val { font-family:var(--font-display); font-size:1rem; color:var(--accent); }
  .fc-stat-lbl { font-size:0.55rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-top:1px; }
  .fc-progress { height:6px; background:var(--border); border-radius:3px; overflow:hidden; margin-bottom:8px; }
  .fc-prog-fill { height:100%; background:linear-gradient(90deg,var(--green),var(--accent)); border-radius:3px; transition:width 1s linear; }
  .fc-prog-label { font-family:var(--font-mono); font-size:0.6rem; color:var(--muted); margin-bottom:8px; }
  .fc-collect-btn {
    width:100%; border:none; border-radius:8px; padding:12px;
    font-family:var(--font-display); font-size:1rem; letter-spacing:2px;
    cursor:pointer; transition:transform 0.1s;
    background:linear-gradient(135deg,var(--green),#22cc66); color:var(--bg);
  }
  .fc-collect-btn:disabled { opacity:0.4; cursor:not-allowed; background:var(--border); color:var(--muted); }
  .fc-collect-btn:active { transform:scale(0.98); }
  .fc-buy-btn {
    width:100%; border:none; border-radius:8px; padding:10px;
    font-family:var(--font-display); font-size:0.8rem; letter-spacing:0.9px;
    cursor:pointer; background:linear-gradient(135deg,var(--accent),#b8942a); color:var(--bg);
  }
  .fc-buy-btn:active { transform:scale(0.97); }
  .ready-badge {
    position:absolute; top:10px; right:10px;
    font-size:0.6rem; font-family:var(--font-mono); letter-spacing:1px;
    padding:3px 8px; border-radius:10px;
    background:rgba(61,255,138,0.15); color:var(--green); border:1px solid rgba(61,255,138,0.4);
    animation: timerPulse 1.5s infinite;
  }

  /* CEZAEVİ OVERLAY */
  #jailOverlay {
    position:fixed; inset:0; z-index:5000;
    background:rgba(0,0,0,0.92);
    display:none; flex-direction:column; align-items:center; justify-content:center;
    padding:24px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  #jailOverlay.active { display:flex; }
  .jail-box {
    background:var(--bg2); border:2px solid rgba(255,69,69,0.5);
    border-radius:16px; padding:28px 24px; width:100%; max-width:360px;
    text-align:center; box-shadow:0 0 60px rgba(255,69,69,0.15);
    position:relative; overflow:hidden;
  }
  .jail-box::before {
    content:''; position:absolute; inset:0;
    background:repeating-linear-gradient(
      90deg, transparent 0, transparent 28px,
      rgba(255,69,69,0.04) 28px, rgba(255,69,69,0.04) 32px
    );
    pointer-events:none;
  }
  .jail-icon { font-size:4rem; margin-bottom:8px; display:block; }
  .jail-title { font-family:var(--font-display); font-size:2rem; letter-spacing:3px; color:var(--red); }
  .jail-sub   { font-family:var(--font-mono); font-size:0.7rem; color:var(--muted); letter-spacing:2px; margin-top:4px; }
  .jail-timer-wrap { margin:20px 0; }
  .jail-timer {
    font-family:var(--font-display); font-size:3.5rem; letter-spacing:4px;
    color:var(--accent); line-height:1;
    text-shadow:0 0 30px rgba(232,200,74,0.4);
  }
  .jail-timer-label { font-family:var(--font-mono); font-size:0.65rem; color:var(--muted); margin-top:6px; }
  .jail-prog { height:6px; background:var(--border); border-radius:3px; overflow:hidden; margin:16px 0; }
  .jail-prog-fill { height:100%; background:linear-gradient(90deg,var(--red),var(--accent)); border-radius:3px; transition:width 1s linear; }

  .bribe-section { margin-top:8px; }
  .bribe-title { font-family:var(--font-display); font-size:1.1rem; letter-spacing:2px; color:var(--accent); margin-bottom:12px; }
  .bribe-card {
    background:var(--bg3); border:1px solid var(--border); border-radius:10px;
    padding:12px 14px; margin-bottom:8px; display:flex; align-items:center;
    gap:10px; cursor:pointer; transition:border-color 0.2s, transform 0.15s;
    text-align:left;
  }
  .bribe-card:active { transform:scale(0.97); }
  .bribe-card.affordable { border-color:rgba(232,200,74,0.35); }
  .bribe-card.affordable:hover { border-color:var(--accent); }
  .bribe-icon { font-size:1.6rem; flex-shrink:0; }
  .bribe-info { flex:1; }
  .bribe-name { font-family:var(--font-display); font-size:0.95rem; letter-spacing:1px; }
  .bribe-desc { font-size:0.65rem; color:var(--muted); margin-top:2px; line-height:1.4; }
  .bribe-right { text-align:right; flex-shrink:0; }
  .bribe-cost  { font-family:var(--font-display); font-size:1.1rem; color:var(--accent); }
  .bribe-chance{ font-family:var(--font-mono); font-size:0.6rem; color:var(--green); margin-top:2px; }
  .bribe-locked{ font-family:var(--font-mono); font-size:0.6rem; color:var(--muted); }
  .jail-wait-info { font-size:0.72rem; color:var(--muted); line-height:1.6; margin-top:8px; padding-top:12px; border-top:1px solid var(--border); }
  .jail-reward-section {
    margin-top:10px;
    padding:12px;
    border-radius:12px;
    border:1px solid rgba(74,255,224,0.18);
    background:linear-gradient(135deg,rgba(74,255,224,0.08),rgba(255,140,0,0.06));
    text-align:left;
  }
  .jail-reward-head {
    font-family:var(--font-display);
    font-size:0.92rem;
    letter-spacing:1px;
    color:var(--accent3);
  }
  .jail-reward-note {
    font-family:var(--font-mono);
    font-size:0.6rem;
    line-height:1.6;
    color:var(--muted);
    margin-top:6px;
  }
  .jail-reward-btn {
    width:100%;
    margin-top:10px;
    border:none;
    border-radius:10px;
    padding:11px 12px;
    background:linear-gradient(135deg,var(--accent3),#15a8b8);
    color:#041012;
    font-family:var(--font-display);
    font-size:0.82rem;
    letter-spacing:1.4px;
    cursor:pointer;
  }
  .jail-reward-btn:disabled {
    opacity:0.42;
    cursor:not-allowed;
    background:var(--border);
    color:var(--muted);
    box-shadow:none;
  }

  /* KAYIT / GİRİŞ EKRANI */
  #authScreen {
    position:fixed; inset:0; z-index:9000;
    background:var(--bg);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:24px; overflow-y:auto; overflow-x:hidden;
    overscroll-behavior:contain;
  }
  #authScreen.boot-pending {
    visibility:hidden;
    pointer-events:none;
  }
  #authScreen.hidden { display:none; }

  .auth-brand {
    width:100%;
    max-width:300px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    margin-bottom:12px;
  }
  .auth-brand-mark {
    width:100%;
    max-width:148px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:8px;
  }
  .auth-brand-logo {
    width:100%;
    height:auto;
    display:block;
    filter:
      drop-shadow(0 14px 22px rgba(0,0,0,0.3))
      drop-shadow(0 0 16px rgba(232,200,74,0.06));
  }
  .auth-brand-kicker {
    font-family:var(--font-mono);
    font-size:0.66rem;
    color:var(--muted);
    letter-spacing:3.2px;
    margin-bottom:8px;
  }
  .auth-brand-sub {
    max-width:280px;
    font-family:var(--font-body);
    font-size:0.82rem;
    line-height:1.65;
    color:rgba(244,240,248,0.8);
  }

  .auth-card {
    background:var(--card); border:1px solid var(--border); border-radius:16px;
    padding:24px; width:100%; max-width:360px;
  }
  .auth-tabs { display:flex; gap:var(--segment-shell-gap); background:linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)), linear-gradient(160deg, rgba(22,24,33,0.98), rgba(11,12,18,1)); border-radius:var(--segment-shell-radius); padding:var(--segment-shell-padding); margin-bottom:20px; border:var(--segment-shell-border); box-shadow:var(--segment-shell-shadow); }
  .auth-tab  {
    flex:1; padding:var(--segment-button-pad-block) var(--segment-button-pad-inline); border:1px solid transparent; background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    color:rgba(233,236,244,0.56); font-family:var(--font-display); font-size:var(--segment-button-font);
    letter-spacing:var(--segment-button-letter); cursor:pointer; border-radius:var(--segment-button-radius); transition:all 0.2s;
    min-height:var(--segment-button-min-height);
  }
  .auth-tab.active { background:linear-gradient(180deg, rgba(232,200,74,0.16), rgba(255,255,255,0.03)); color:var(--accent); border:1px solid rgba(232,200,74,0.28); box-shadow:0 10px 20px rgba(0,0,0,0.18); }
  .gang-tabs-bar {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin:12px 16px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)),
      linear-gradient(160deg, rgba(22,24,33,0.98), rgba(11,12,18,1));
    border-radius:var(--segment-shell-radius);
    padding:var(--segment-shell-padding);
    border:var(--segment-shell-border);
    gap:var(--segment-shell-gap);
    box-shadow:var(--segment-shell-shadow);
  }
  .gang-tab-btn {
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:var(--segment-button-pad-block) var(--segment-button-pad-inline);
    border:1px solid transparent;
    background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    color:rgba(233,236,244,0.56);
    font-family:var(--font-display);
    font-size:var(--segment-button-font);
    letter-spacing:var(--segment-button-letter);
    cursor:pointer;
    border-radius:var(--segment-button-radius);
    position:relative;
    min-height:var(--segment-button-min-height);
  }
  .gang-tab-btn.active {
    background:linear-gradient(180deg, rgba(232,200,74,0.16), rgba(255,255,255,0.03));
    color:var(--accent);
    border:1px solid rgba(232,200,74,0.24);
    box-shadow:0 10px 20px rgba(0,0,0,0.18);
  }
  #gangTabsBar button {
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  .gang-tab-badge {
    position:absolute;
    top:5px;
    right:8px;
    min-width:16px;
    height:16px;
    padding:0 4px;
    background:#ff4545;
    color:#fff;
    border-radius:999px;
    font-family:var(--font-mono);
    font-size:0.5rem;
    line-height:16px;
    text-align:center;
    box-shadow:0 8px 16px rgba(0,0,0,0.18);
  }
  .auth-info {
    margin-bottom:14px; padding:10px 12px; border-radius:10px;
    border:1px solid rgba(74,255,224,0.2); background:rgba(74,255,224,0.05);
    font-family:var(--font-mono); font-size:0.64rem; line-height:1.65; color:#a9fff0;
  }

  .auth-field { margin-bottom:14px; }
  .auth-label { font-family:var(--font-mono); font-size:0.65rem; color:var(--muted); letter-spacing:2px; text-transform:uppercase; margin-bottom:6px; display:block; }
  .auth-input {
    width:100%; background:var(--bg3); border:1px solid var(--border);
    color:var(--text); font-family:var(--font-body); font-size:1rem;
    padding:12px 14px; border-radius:8px; outline:none; transition:border-color 0.2s;
  }
  .auth-input:focus { border-color:rgba(232,200,74,0.5); }
  .auth-input.error { border-color:var(--red); }

  .auth-btn {
    width:100%; background:linear-gradient(135deg,var(--accent),#b8942a);
    border:none; color:var(--bg); font-family:var(--font-display); font-size:1.1rem;
    letter-spacing:2px; padding:14px; border-radius:8px; cursor:pointer;
    margin-top:6px; transition:transform 0.15s, opacity 0.2s;
  }
  .auth-btn:active { transform:scale(0.98); }
  .auth-btn:disabled { opacity:0.5; cursor:not-allowed; }
  .auth-inline-link {
    width:100%;
    margin-top:10px;
    border:none;
    background:none;
    color:#a9fff0;
    cursor:pointer;
    font-family:var(--font-mono);
    font-size:0.68rem;
    letter-spacing:1px;
    text-align:center;
    text-transform:uppercase;
  }
  .auth-inline-link:disabled { opacity:0.45; cursor:not-allowed; }
  .auth-error { font-family:var(--font-mono); font-size:0.7rem; color:var(--red); margin-top:8px; min-height:18px; }
  .auth-verify-title { font-family:var(--font-display); font-size:1.15rem; letter-spacing:1px; color:var(--accent); margin-bottom:6px; }
  .auth-verify-sub { font-family:var(--font-mono); font-size:0.63rem; color:var(--muted); line-height:1.6; margin-bottom:14px; }
  .auth-verify-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
  .auth-verify-actions-single { grid-template-columns:1fr; }
  .auth-secondary-btn {
    border:1px solid var(--border); background:var(--bg3); color:var(--text);
    border-radius:10px; min-height:44px; padding:10px 12px; cursor:pointer;
    font-family:var(--font-mono); font-size:0.68rem; letter-spacing:1px;
  }
  .auth-secondary-btn:disabled { opacity:0.45; cursor:not-allowed; }
  .auth-divider {
    display:flex; align-items:center; gap:10px; margin:18px 0 14px;
    color:var(--muted); font-family:var(--font-mono); font-size:0.65rem; letter-spacing:2px; text-transform:uppercase;
  }
  .auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:var(--border); }
  .auth-socials { display:grid; grid-template-columns:1fr; gap:10px; }
  .auth-social-btn {
    border:1px solid var(--border); background:var(--bg3); color:var(--text);
    border-radius:12px; min-height:48px; padding:12px 14px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:10px;
    font-family:var(--font-body); font-size:0.9rem; font-weight:600;
    transition:transform 0.15s, border-color 0.2s, background 0.2s;
  }
  .auth-social-btn:active { transform:scale(0.98); }
  .auth-social-btn:disabled { opacity:0.45; cursor:not-allowed; }
  .auth-social-btn.google { border-color:rgba(74,255,224,0.22); }
  .auth-social-btn.apple { border-color:rgba(232,200,74,0.22); }
  .auth-social-icon {
    width:24px; height:24px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.06); font-family:var(--font-display); font-size:1rem; line-height:1;
  }

  /* SINIF SEÇİM EKRANI */
  #classScreen {
    position:fixed; inset:0; z-index:9000;
    background:var(--bg); display:none;
    flex-direction:column; align-items:center; padding:24px; overflow-y:auto; overflow-x:hidden;
    overscroll-behavior:contain;
  }
  #classScreen.active { display:flex; }

  .cs-title { font-family:var(--font-display); font-size:2rem; letter-spacing:3px; color:var(--accent); margin:24px 0 4px; text-align:center; }
  .cs-sub   { font-family:var(--font-mono); font-size:0.65rem; color:var(--muted); letter-spacing:2px; margin-bottom:24px; text-align:center; }
  .cs-welcome { font-family:var(--font-mono); font-size:0.8rem; color:var(--text); margin-bottom:20px; text-align:center; }
  .cs-welcome span { color:var(--accent); }

  .cs-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; max-width:400px; margin-bottom:16px; }
  .cs-card {
    background:var(--card); border:2px solid var(--border); border-radius:14px;
    padding:20px 14px; cursor:pointer; text-align:center;
    transition:transform 0.15s, border-color 0.2s, box-shadow 0.2s;
    position:relative; overflow:hidden;
  }
  .cs-card::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 50% 100%, var(--cs-glow,transparent), transparent 70%);
    pointer-events:none;
  }
  .cs-card:active   { transform:scale(0.96); }
  .cs-card.selected {
    border-color:var(--accent); box-shadow:0 0 20px rgba(232,200,74,0.2);
    background:rgba(232,200,74,0.05);
  }
  .cs-card[data-id="gangster"] { --cs-glow:rgba(232,200,74,0.1); }
  .cs-card[data-id="dealer"]   { --cs-glow:rgba(74,255,224,0.1); }
  .cs-card[data-id="hitman"]   { --cs-glow:rgba(255,69,69,0.1); }
  .cs-card[data-id="robber"]   { --cs-glow:rgba(61,255,138,0.1); }

  .cs-icon   { font-size:3rem; margin-bottom:10px; display:block; }
  .cs-name   { font-family:var(--font-display); font-size:1.2rem; letter-spacing:1px; }
  .cs-bonus  { font-size:0.65rem; color:var(--muted); margin-top:6px; line-height:1.5; }
  .cs-selected-badge {
    position:absolute; top:8px; right:8px;
    font-size:0.6rem; font-family:var(--font-mono);
    background:var(--accent); color:var(--bg);
    padding:2px 7px; border-radius:10px; letter-spacing:1px;
  }
  .cs-confirm-btn {
    width:100%; max-width:400px; background:linear-gradient(135deg,var(--accent),#b8942a);
    border:none; color:var(--bg); font-family:var(--font-display); font-size:1.1rem;
    letter-spacing:2px; padding:15px; border-radius:10px; cursor:pointer;
    transition:transform 0.15s; margin-top:4px;
  }
  .cs-confirm-btn:disabled { opacity:0.4; cursor:not-allowed; background:var(--border); color:var(--muted); }
  .cs-confirm-btn:active   { transform:scale(0.98); }

  /* GLOBAL MOBILE RESPONSIVE */
  @media (max-width: 768px) {
    :root {
      --segment-button-min-height: 46px;
      --segment-button-pad-block: 10px;
      --segment-button-pad-inline: 9px;
      --segment-button-font: 0.78rem;
      --segment-button-letter: 0.9px;
      --hud-shell-height: 102px;
    }
    :root { --nav-rail-height: 108px; }
    #hud { padding: 8px 10px 7px; }
    .hud-top { margin-bottom: 6px; }
    .hud-logo { font-size: 1.2rem; letter-spacing: 1px; }
    .hsl-item { padding: 6px 2px; }
    .hsl-val { font-size: 0.7rem; }
    .hsl-icon { font-size: 0.78rem; }
    #app {
      padding-top: calc(var(--hud-shell-height) + env(safe-area-inset-top, 0px));
      padding-bottom: calc(var(--nav-rail-height) + 12px);
    }

    .section-title { padding: 0 12px; margin-bottom: 10px; font-size: 1.18rem; }
    .city-banner,
    .casino-hero,
    .hospital-hero,
    .gym-hero,
    .drug-hero,
    .profile-header,
    .gang-banner,
    .power-overview,
    .profile-cover,
    .profile-card-body { margin-left: 12px; margin-right: 12px; }
    .city-banner,
    .casino-hero,
    .hospital-hero,
    .gym-hero,
    .drug-hero,
    .profile-header,
    .gang-banner { padding: 14px; }

    #nav {
      padding: 7px 8px calc(11px + env(safe-area-inset-bottom));
      gap: 7px;
    }
    .nav-btn {
      min-width: 92px;
      height: 68px;
      border-radius: 14px;
      padding: 7px 8px 8px;
    }
    .nav-head { min-height: 22px; }
    .nav-icon {
      width: 22px;
      height: 22px;
      border-radius: 8px;
      font-size: 0.74rem;
    }
    .nav-copy { height: calc(100% - 24px); padding-top: 3px; }
    .nav-kicker { font-size: 0.34rem; letter-spacing: 1.5px; }
    .nav-title { font-size: 0.74rem; }
    .nav-copy::after { width: 18px; height: 2px; }

    .action-grid,
    .item-grid,
    .class-grid,
    .train-grid,
    .gang-stats,
    .profile-stats { grid-template-columns: 1fr; gap: 8px; padding: 0 12px; }

    .shop-summary,
    .drug-inv-bar { margin: 0 12px 12px; }
    .shop-tabs,
    .casino-tabs,
    .drug-tabs {
      margin: 0 12px 12px;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      justify-content: flex-start;
      gap: 6px;
      padding: 5px;
    }
    .shop-tabs::-webkit-scrollbar,
    .casino-tabs::-webkit-scrollbar,
    .drug-tabs::-webkit-scrollbar { display: none; }
    .shop-tab,
    .casino-tab,
    .drug-tab {
      flex: 0 0 auto;
      min-width: 112px;
      padding: var(--segment-button-pad-block) var(--segment-button-pad-inline);
      font-size: var(--segment-button-font);
    }

    .casino-panel { padding: 0 12px; }
    .casino-jackpot-inline { gap: 8px; padding: 7px 12px; margin-top: 8px; }
    .casino-jackpot-inline span { font-size: 0.5rem; letter-spacing: 1.5px; }
    .casino-jackpot-inline strong { font-size: 0.92rem; }
    .slot-machine-wrap { padding: 18px 10px 14px; border-radius: 14px; }
    .slot-machine-wrap::before { margin-bottom: 10px; font-size: 0.58rem; letter-spacing: 1.5px; }
    .slot-machine-hint { margin-bottom: 10px; font-size: 0.5rem; letter-spacing: 1.2px; }
    .slot-grid { --slot-cell-size: min(25.2vw, 78px); gap: 8px; }
    .slot-grid-frame::before { left: -6px; right: -6px; height: calc(min(25.2vw, 78px) + 10px); }
    .slot-payline-band { left: -2px; right: -2px; }
    .slot-payline-band span { right: 4px; top: -10px; font-size: 0.42rem; padding: 2px 6px; }
    .slot-symbol { font-size: min(9vw, 2.2rem); }
    .slot-payline { width: calc(100% - 22px); }
    .slot-reel { width: min(28.5vw, 86px); height: min(24vw, 98px); }
    .slot-reel .reel-strip span { height: min(24vw, 98px); line-height: min(24vw, 98px); font-size: min(10vw, 2.4rem); }
    .slot-btns { grid-template-columns: 1fr 1fr; gap: 8px; max-width: none; }
    .btn-spin,
    .btn-auto { border-radius: 14px; min-height: 46px; padding: 11px 8px; font-size: 0.84rem; letter-spacing: 1px; }

    .roulette-stage { padding: 10px 8px 12px; }
    .roulette-container { --rw-size: min(86vw, 330px); margin-bottom: 10px; }
    .roulette-countdown-overlay { min-width: 150px; font-size: 1.05rem; padding: 7px 9px; }
    .rw-num { font-size: clamp(0.5rem, 2.2vw, 0.62rem); }
    .roulette-head { margin-bottom: 8px; }
    .roulette-bets { grid-template-columns: 1fr 1fr; gap: 6px; }
    .rbet-btn { min-height: 42px; font-size: 0.58rem; }

    .inv-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 12px 12px; }
    .dc-metrics,
    .dc-actions { grid-template-columns: 1fr 1fr; gap: 6px; }
    .drug-market,
    .factory-section,
    .leaderboard,
    .achievements,
    .activity-feed,
    .profile-accordion,
    .target-list,
    .power-rank-list,
    .treatment-list,
    .hosp-price-table { padding-left: 12px; padding-right: 12px; }
    .market-timer,
    .hosp-control,
    .hosp-info-box { margin-left: 12px; margin-right: 12px; }
    .fc-stats,
    .pow-breakdown { grid-template-columns: 1fr 1fr; }

    .profile-avatar-wrap {
      transform: none;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 10px;
    }
    .profile-name-big { font-size: 1.35rem; }
    .profile-bio { font-size: 0.7rem; }
    .profile-avatar-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .profile-avatar-option { min-height: 58px; }
    .modal { border-radius: 14px 14px 0 0; padding: 16px 14px 20px; max-height: 88vh; }
    .modal-title { font-size: 1.3rem; }
    .modal-sub { margin-bottom: 12px; }
    .auth-brand { margin-bottom: 20px; }
    .auth-brand-mark {
      max-width: 124px;
      margin-bottom: 8px;
    }
    .auth-brand-logo { width: 100%; height: auto; }
    .auth-brand-sub { font-size: 0.78rem; }
    .auth-card { padding: 16px; }
    .cs-grid { grid-template-columns: 1fr; max-width: 420px; }
  }

  @media (max-width: 420px) {
    .city-title { font-size: 1.7rem; letter-spacing: 2px; }
    .chat-page-title { gap:0 7px; line-height:0.96; }
    .city-subtitle { font-size: 0.6rem; letter-spacing: 1px; }
    .pow-score { font-size: 2.2rem; }
    .slot-btns { grid-template-columns: 1fr; }
    .bet-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hosp-seg { grid-template-columns: 1fr; }
    .hosp-quick { flex-direction: column; align-items: flex-start; }
    .mt-timer { font-size: 1rem; }
    .jail-title { font-size: 1.5rem; }
    .jail-timer { font-size: 2.6rem; letter-spacing: 2px; }
  }

  @media (max-width: 760px) {
    .onb-grid { grid-template-columns:1fr; }
    .onb-title { font-size:1.7rem; }
  }

  /* MOBILE-FIRST HARD OVERRIDES (inline-style safe) */
  @media (max-width: 768px) {
    html, body { overscroll-behavior-y: contain; }
    button, input, select, textarea, .nav-btn, .action-card, .target-item, .suc-karti, .item-card {
      touch-action: manipulation;
    }

    .scroll-hintable.has-scroll-cue::before,
    .scroll-hintable.has-scroll-cue::after {
      width:20px;
      height:20px;
      font-size:0.76rem;
    }
    .nav-scroll-btn {
      top:30px;
      width:20px;
      height:20px;
      font-size:0.76rem;
    }

    [id^="page-"] [style*="padding:0 16px"] { padding-left:12px !important; padding-right:12px !important; }
    [id^="page-"] [style*="margin:0 16px"]  { margin-left:12px !important; margin-right:12px !important; }
    [id^="page-"] [style*="margin:12px 16px"] { margin-left:12px !important; margin-right:12px !important; }

    #page-fight .fight-tabs {
      margin: 0 12px 12px !important;
      overflow-x: auto;
      gap: 6px !important;
      padding: 5px !important;
      -webkit-overflow-scrolling: touch;
    }
    #page-fight .fight-tabs::-webkit-scrollbar { display:none; }
    #page-fight .fight-tab {
      flex: 0 0 auto !important;
      min-width: 112px !important;
      padding: var(--segment-button-pad-block) var(--segment-button-pad-inline) !important;
      font-size: var(--segment-button-font) !important;
    }

    #gangTabsBar {
      margin: 10px 12px !important;
      display: flex !important;
      grid-template-columns: none !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
      gap: 6px !important;
    }
    #gangTabsBar::-webkit-scrollbar { display:none; }
    #gangTabsBar button {
      flex: 0 0 auto !important;
      min-width: 114px !important;
      min-height: var(--segment-button-min-height);
      font-size: var(--segment-button-font) !important;
      letter-spacing: var(--segment-button-letter) !important;
    }
    #page-gang .gang-panel { padding-left:12px !important; padding-right:12px !important; }
    #page-gang #gpanel-chat #gangChatMessages { min-height: 220px !important; max-height: 300px !important; }

    #page-bank input,
    #page-gang input,
    #page-casino input,
    #page-shop input,
    #page-drugs input {
      font-size: 16px !important;
    }

    #page-bank button,
    #page-gang button,
    #page-fight button,
    #page-casino button,
    #page-drugs button,
    #page-shop button {
      min-height: 42px;
    }

    #nemesisPanel [style*="font-size:0.63rem"] { font-size:0.68rem !important; }

    /* Reduce heavy visual effects on mobile for smoothness */
    .city-title, .action-card.highlight { animation: none !important; }
    .gang-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .gang-mini-actions { grid-template-columns:1fr; }
    .gang-crime-grid { grid-template-columns:1fr; }
    .gang-lobby-switch,
    .gang-create-grid,
    .gang-donate-custom,
    .gang-lobby-search,
    .gang-lobby-result-card {
      grid-template-columns:1fr;
    }
    .gang-lobby-result-card {
      display:grid;
    }
    .gang-lobby-result-actions {
      justify-content:flex-start;
    }
    .gang-donate-presets {
      grid-template-columns:repeat(2,minmax(0,1fr));
    }
  }

  @media (max-width: 420px) {
    #gangTabsBar { display:flex !important; grid-template-columns:none !important; }
    #page-fight .fight-tab { min-width: 96px !important; font-size: 0.7rem !important; }
    #page-bank [style*="font-size:2.2rem"] { font-size: 1.85rem !important; }
    #page-bank [style*="font-size:1.4rem"] { font-size: 1.2rem !important; }
    .home-shortcuts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .home-shortcut { padding:9px 7px 10px; border-radius:14px; }
    .home-shortcut span:first-child { width:24px; height:24px; border-radius:8px; font-size:0.8rem; }
    .home-shortcut span:last-child { font-size:0.52rem; }
    .home-accordion-head { font-size:0.78rem; }
    .home-accordion-hint { font-size:0.46rem; }
    .profile-toggle-btn { font-size:0.76rem; padding:12px 13px; border-radius:14px; }
    .guide-faq-tab { font-size:0.58rem; padding:10px 7px; border-radius:12px; }
    .home-plan-actions { flex-direction:column; }
    .home-plan-actions button { width:100%; }
  }