@import url('/res/fonts/5d53b53947c7.css');

/* ==========================================================================
   DESIGN TOKENS - Okey Salonu Nostalgic Turkish Coffeehouse Okey Night
   ========================================================================== */
:root {
  /* Backgrounds (dark green-black family) */
  --bg-0: #0A110E;   /* page base, behind everything */
  --bg-1: #101A16;   /* header, sidebar, chat background */
  --bg-2: #16241E;   /* cards, panels */
  --bg-3: #1D3027;   /* raised elements, hover surfaces, inputs */
  --border-subtle: #243A30;
  --border-strong: #35564A;

  /* Felt (table surface) */
  --felt-1: #1F6B4C;
  --felt-2: #175339;
  --felt-3: #0F3A27;
  --felt-edge: #2F8A62;

  /* Brass / Gold (PRIMARY ACCENT) */
  --gold-300: #F0CC82;
  --gold-400: #E3B65E;
  --gold-500: #D4A24C;   /* main accent */
  --gold-600: #A87B2E;
  --gold-glow: rgba(212,162,76,.35);

  /* Ivory (okey tile) */
  --ivory-100: #F7EFDB;
  --ivory-200: #EADFC2;
  --ivory-300: #D9CBA6;
  --tile-ink: #2A2118;

  /* Okey tile colors (ONLY for small semantic accents, never as large fills) */
  --tile-red: #C8402F;
  --tile-blue: #2F6FA3;
  --tile-black: #1B1B1B;
  --tile-yellow: #E0A82E;

  /* Action */
  --action: #2E9E6B;       /* Oyna, confirm, send */
  --action-hover: #38B67C;
  --action-press: #247F55;

  /* Text */
  --text-1: #F3ECDA;   /* primary */
  --text-2: #BDB6A2;   /* secondary */
  --text-3: #8B9489;   /* muted (min. 4.5:1 on --bg-1, check!) */
  --text-on-gold: #2A1E08;
  --text-on-action: #FFFFFF;

  /* Semantic */
  --success: #3FAE7A;
  --warning: #E3B65E;
  --danger: #D9534A;
  --info: #4A9BD1;
  --live: #E5484D;

  /* Radius, spacing, shadow */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --shadow-1: 0 2px 6px rgba(0,0,0,.35);
  --shadow-2: 0 8px 24px rgba(0,0,0,.45);
  --ring: 0 0 0 3px var(--gold-glow);

  /* Typography */
  --font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 24px;
}

/* ==========================================================================
   TABLE THEMES — <html data-tema="N"> swaps only the felt tokens; every
   felt surface (lobby cards, game table) reads them. Ids match the server
   (users.theme) and the Masa Görsel page.
   ========================================================================== */
[data-tema] { --felt-pattern: none; --felt-mark: none; }
[data-tema="0"] { --felt-1: #1F6B4C; --felt-2: #175339; --felt-3: #0F3A27; --felt-edge: #2F8A62; }
[data-tema="1"] { --felt-1: #1E4E8C; --felt-2: #163B6B; --felt-3: #0D2545; --felt-edge: #3B7BD0; }
[data-tema="2"] { --felt-1: #7A1B2E; --felt-2: #5A1222; --felt-3: #360A14; --felt-edge: #B8324C; }
[data-tema="3"] { --felt-1: #7A4A26; --felt-2: #5C361A; --felt-3: #3A220F; --felt-edge: #B07A3E; }
[data-tema="4"] { --felt-1: #3A4250; --felt-2: #2A3039; --felt-3: #181C22; --felt-edge: #6B7685; }
[data-tema="5"] { --felt-1: #5B2A86; --felt-2: #431F64; --felt-3: #2A123F; --felt-edge: #8E5BC4; }
[data-tema="6"] { --felt-1: #A90432; --felt-2: #7E0325; --felt-3: #4A0216; --felt-edge: #FDB912; --felt-mark: url(/res/tema/kulup/gs.png); }
[data-tema="7"] { --felt-1: #0A3A8C; --felt-2: #002D72; --felt-3: #001A45; --felt-edge: #FFED00; --felt-mark: url(/res/tema/kulup/fb.png); }
[data-tema="8"] { --felt-1: #2E2E30; --felt-2: #1C1C1E; --felt-3: #0B0B0C; --felt-edge: #F2F2F2; --felt-mark: url(/res/tema/kulup/bjk.png); }
[data-tema="9"] { --felt-1: #7A1236; --felt-2: #5A0E28; --felt-3: #360718; --felt-edge: #7EC8E3; --felt-mark: url(/res/tema/kulup/ts.png); }
[data-tema="10"] { --felt-1: #2A3D72; --felt-2: #1C2D5A; --felt-3: #0F1A38; --felt-edge: #F26522; --felt-mark: url(/res/tema/kulup/ibfk.png); }
[data-tema="11"] { --felt-1: #0E8A45; --felt-2: #006B33; --felt-3: #00401E; --felt-edge: #FFFFFF; --felt-mark: url(/res/tema/kulup/bursa.png); }
[data-tema="12"] { --felt-1: #C8102E; --felt-2: #9A0C23; --felt-3: #5C0715; --felt-edge: #FFD200; --felt-mark: url(/res/tema/kulup/goztepe.png); }
[data-tema="13"] { --felt-1: #C8102E; --felt-2: #9E0B22; --felt-3: #5E0614; --felt-edge: #FFFFFF; --felt-mark: url(/res/tema/ayyildiz.svg); }
[data-tema="14"] { --felt-1: #1F5FA8; --felt-2: #174B86; --felt-3: #0C2B52; --felt-edge: #40B5C4; --felt-pattern: url(/res/tema/p-iznik.svg); }
[data-tema="15"] { --felt-1: #A43A2A; --felt-2: #7E2B1F; --felt-3: #4A1810; --felt-edge: #E0A35A; --felt-pattern: url(/res/tema/p-kilim.svg); }
[data-tema="16"] { --felt-1: #0E4C92; --felt-2: #0A3A72; --felt-3: #062246; --felt-edge: #5EC3F0; --felt-mark: url(/res/tema/nazar.svg); }
[data-tema="17"] { --felt-1: #5A1E3C; --felt-2: #43162D; --felt-3: #280D1B; --felt-edge: #E2566C; --felt-mark: url(/res/tema/lale.svg); }
[data-tema="18"] { --felt-1: #5C3A24; --felt-2: #45291A; --felt-3: #28170E; --felt-edge: #C9A15B; --felt-mark: url(/res/tema/fincan.svg); }
[data-tema="19"] { --felt-1: #16294A; --felt-2: #0F1E38; --felt-3: #070F1F; --felt-edge: #C9B57A; --felt-pattern: url(/res/tema/p-yildizlar.svg); --felt-mark: url(/res/tema/hilal.svg); }
[data-tema="20"] { --felt-1: #B5562F; --felt-2: #8E4123; --felt-3: #552614; --felt-edge: #F0B27A; }
[data-tema="21"] { --felt-1: #1E8A9A; --felt-2: #15707D; --felt-3: #0B4049; --felt-edge: #9FE3E6; --felt-pattern: url(/res/tema/p-dalga.svg); }
[data-tema="22"] { --felt-1: #24503A; --felt-2: #1A3D2C; --felt-3: #0E2419; --felt-edge: #7FA06A; }
[data-tema="23"] { --felt-1: #7A1420; --felt-2: #5C0F18; --felt-3: #36080E; --felt-edge: #D4A24C; --felt-pattern: url(/res/tema/p-yildiz.svg); }
[data-tema="24"] { --felt-1: #B5577A; --felt-2: #93435F; --felt-3: #5C2739; --felt-edge: #F5C6D6; }
[data-tema="25"] { --felt-1: #3C9DA6; --felt-2: #2D7F87; --felt-3: #1A4D52; --felt-edge: #EAF6F4; --felt-pattern: url(/res/tema/p-dalga.svg); }

[data-tema="26"] { --felt-1: #E8A3B5; --felt-2: #D48299; --felt-3: #A85A71; --felt-edge: #FFFFFF; }
[data-tema="27"] { --felt-1: #8E1B47; --felt-2: #6E1236; --felt-3: #420A20; --felt-edge: #F8BBD0; --felt-mark: url(/res/tema/gul.svg); }
[data-tema="28"] { --felt-1: #7E68B8; --felt-2: #64529A; --felt-3: #3D3164; --felt-edge: #E1D5FF; --felt-pattern: url(/res/tema/p-lavanta.svg); }
[data-tema="29"] { --felt-1: #C2507A; --felt-2: #A33D63; --felt-3: #6A2440; --felt-edge: #FFD6E5; }
[data-tema="30"] { --felt-1: #E46A5A; --felt-2: #C85345; --felt-3: #8A3328; --felt-edge: #FFD9C7; }
[data-tema="31"] { --felt-1: #C76B8E; --felt-2: #A85474; --felt-3: #6E3149; --felt-edge: #FFE4EE; --felt-pattern: url(/res/tema/p-sakura.svg); }
[data-tema="32"] { --felt-1: #6B4C9A; --felt-2: #53397A; --felt-3: #33224D; --felt-edge: #F48FB1; --felt-mark: url(/res/tema/kelebek.svg); }
[data-tema="33"] { --felt-1: #4F9A6A; --felt-2: #3D7E55; --felt-3: #245035; --felt-edge: #FFFFFF; --felt-mark: url(/res/tema/papatya.svg); }
[data-tema="34"] { --felt-1: #9C7BC9; --felt-2: #8063AE; --felt-3: #513D74; --felt-edge: #F3E5F5; }
[data-tema="35"] { --felt-1: #D9CFC4; --felt-2: #BFB2A3; --felt-3: #8C7F70; --felt-edge: #FFFFFF; }
[data-tema="36"] { --felt-1: #B23A5A; --felt-2: #922D49; --felt-3: #5E1A2D; --felt-edge: #FFC1D3; --felt-pattern: url(/res/tema/p-kalp.svg); }
[data-tema="37"] { --felt-1: #B7826B; --felt-2: #9A6A55; --felt-3: #634234; --felt-edge: #F6D3B8; }
/* More Süper Lig clubs (original crests, rasterised to PNG) */
[data-tema="38"] { --felt-1: #C8102E; --felt-2: #9A0C23; --felt-3: #5C0715; --felt-edge: #FFFFFF; --felt-mark: url(/res/tema/kulup/samsun.png); }
[data-tema="39"] { --felt-1: #0E7A3C; --felt-2: #0A5E2E; --felt-3: #053A1C; --felt-edge: #FFFFFF; --felt-mark: url(/res/tema/kulup/konya.png); }
[data-tema="40"] { --felt-1: #D2112B; --felt-2: #A30C21; --felt-3: #620714; --felt-edge: #FFFFFF; --felt-mark: url(/res/tema/kulup/antalya.png); }
[data-tema="41"] { --felt-1: #123E8C; --felt-2: #0D2F6B; --felt-3: #071B40; --felt-edge: #FFFFFF; --felt-mark: url(/res/tema/kulup/kasimpasa.png); }
[data-tema="42"] { --felt-1: #C9162B; --felt-2: #9C1021; --felt-3: #5E0913; --felt-edge: #FFD200; --felt-mark: url(/res/tema/kulup/kayseri.png); }
[data-tema="43"] { --felt-1: #C8102E; --felt-2: #9A0C23; --felt-3: #5C0715; --felt-edge: #FFFFFF; --felt-mark: url(/res/tema/kulup/sivas.png); }
[data-tema="44"] { --felt-1: #0F7A3E; --felt-2: #0B5C2F; --felt-3: #06391D; --felt-edge: #2E6DB4; --felt-mark: url(/res/tema/kulup/rize.png); }
[data-tema="45"] { --felt-1: #E8761E; --felt-2: #BC5C14; --felt-3: #73380B; --felt-edge: #0E7A3C; --felt-mark: url(/res/tema/kulup/alanya.png); }
[data-tema="46"] { --felt-1: #5B2C86; --felt-2: #45206A; --felt-3: #2A1341; --felt-edge: #FFD200; --felt-mark: url(/res/tema/kulup/eyup.png); }
/* Holidays (switched on by themselves in their days, see features.bayramTema) */
[data-tema="47"] { --felt-1: #C8102E; --felt-2: #9A0C23; --felt-3: #5C0715; --felt-edge: #FFFFFF; --felt-mark: url(/res/tema/bayram-29ekim.svg); }
[data-tema="48"] { --felt-1: #13573D; --felt-2: #0E432F; --felt-3: #072A1D; --felt-edge: #D4AF37; --felt-pattern: url(/res/tema/p-kar.svg); }
[data-tema="49"] { --felt-1: #1C2E5A; --felt-2: #142245; --felt-3: #0A142B; --felt-edge: #F4C95D; --felt-mark: url(/res/tema/bayram-ramazan.svg); }
[data-tema="50"] { --felt-1: #2E86C1; --felt-2: #236A9B; --felt-3: #154364; --felt-edge: #FFD166; --felt-mark: url(/res/tema/bayram-23nisan.svg); }
/* Cities */
[data-tema="51"] { --felt-1: #1A3C66; --felt-2: #132D4D; --felt-3: #0B1B2F; --felt-edge: #E8B04B; --felt-mark: url(/res/tema/sehir-istanbul.svg); }
[data-tema="52"] { --felt-1: #1D5E8C; --felt-2: #164A6E; --felt-3: #0D2D44; --felt-edge: #F2E2B6; --felt-mark: url(/res/tema/sehir-izmir.svg); }
[data-tema="53"] { --felt-1: #6E1E2C; --felt-2: #551723; --felt-3: #330D15; --felt-edge: #E9D7B0; --felt-mark: url(/res/tema/sehir-ankara.svg); }
[data-tema="54"] { --felt-1: #1C6B45; --felt-2: #155435; --felt-3: #0B3320; --felt-edge: #A8D5BA; --felt-mark: url(/res/tema/sehir-trabzon.svg); }

/* ==========================================================================
   BACKGROUND ("Zemin") — lighter variant of the same green-black family.
   Stays dark enough that all light text tokens keep their contrast.
   ========================================================================== */
[data-zemin="acik"] {
  --bg-0: #1C2A24;
  --bg-1: #22332B;
  --bg-2: #2A3F35;
  --bg-3: #344C40;
  --border-subtle: #3A5548;
  --border-strong: #4E6E5F;
}

[data-zemin="lacivert"] { --bg-0: #0E1626; --bg-1: #141E33; --bg-2: #1B2741; --bg-3: #24324F; --border-subtle: #2C3A58; --border-strong: #41537A; }
[data-zemin="kahve"] { --bg-0: #1A120C; --bg-1: #22180F; --bg-2: #2C2015; --bg-3: #382A1C; --border-subtle: #3E2E20; --border-strong: #5A4430; }
[data-zemin="bordo"] { --bg-0: #1A0C10; --bg-1: #231116; --bg-2: #2E171D; --bg-3: #3A1E26; --border-subtle: #43222B; --border-strong: #62343F; }
[data-zemin="antrasit"] { --bg-0: #121416; --bg-1: #181B1E; --bg-2: #202428; --bg-3: #2A2F34; --border-subtle: #30353B; --border-strong: #474E57; }
[data-zemin="mor"] { --bg-0: #150F1F; --bg-1: #1C1429; --bg-2: #251B35; --bg-3: #2F2343; --border-subtle: #36294C; --border-strong: #51406D; }
[data-zemin="petrol"] { --bg-0: #0B1A1C; --bg-1: #102326; --bg-2: #162E31; --bg-3: #1D3A3E; --border-subtle: #244448; --border-strong: #36636A; }

[data-zemin="beyaz"] { --bg-0: #F4F5F3; --bg-1: #FFFFFF; --bg-2: #FFFFFF; --bg-3: #EEF0EC; --border-subtle: #DDE2DC; --border-strong: #C3CBC2; }
[data-zemin="krem"] { --bg-0: #F3ECDD; --bg-1: #FBF7EE; --bg-2: #FFFCF5; --bg-3: #EFE6D3; --border-subtle: #E0D4BC; --border-strong: #C9B998; }
[data-zemin="gri"] { --bg-0: #E6E9EC; --bg-1: #F3F5F7; --bg-2: #FFFFFF; --bg-3: #E3E7EB; --border-subtle: #D2D8DE; --border-strong: #B6BEC7; }
[data-zemin="pudra"] { --bg-0: #F6E8EC; --bg-1: #FCF4F6; --bg-2: #FFFFFF; --bg-3: #F3E1E7; --border-subtle: #E8CDD6; --border-strong: #D3A9B8; }
[data-zemin="buz"] { --bg-0: #E7F0F6; --bg-1: #F4F9FC; --bg-2: #FFFFFF; --bg-3: #E2ECF3; --border-subtle: #CEDDE8; --border-strong: #AEC4D4; }
[data-zemin="beyaz"], [data-zemin="krem"], [data-zemin="gri"], [data-zemin="pudra"], [data-zemin="buz"] {
  --text-1: #1D2622; --text-2: #46524B; --text-3: #6B766F;
  --gold-300: #8C6216; --gold-400: #A87B2E;
  --shadow-1: 0 1px 3px rgba(20,30,25,.12); --shadow-2: 0 8px 24px rgba(20,30,25,.16);
  color-scheme: light;
}

/* ==========================================================================
   COMPONENTS — shared by the main app and the iframe pages
   (Masa Görsel, İstek Hattı). Prefix ds- to stay clear of legacy classes.
   ========================================================================== */
.ds-page {
  margin: 0;
  min-height: 0;
  padding: var(--sp-4);
  box-sizing: border-box;
  background: var(--bg-1);
  color: var(--text-1);
  font: 400 var(--fs-sm)/1.45 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
.ds-page *, .ds-page *::before, .ds-page *::after { box-sizing: border-box; }
.ds-h1 { margin: 0; font: 700 var(--fs-lg)/1.2 var(--font-display); color: var(--text-1); }
.ds-sub { margin: 2px 0 0; color: var(--text-3); font-size: var(--fs-xs); }
.ds-section { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-400); }
.ds-card {
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.ds-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ds-label { display: block; margin: 0 0 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); }
.ds-input {
  width: 100%;
  height: 40px;
  padding: 0 var(--sp-3);
  background: var(--bg-0);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-1);
  font: inherit;
}
textarea.ds-input { height: 72px; padding: 10px var(--sp-3); resize: none; }
.ds-input::placeholder { color: var(--text-3); }
.ds-input:focus { outline: none; border-color: var(--gold-500); box-shadow: var(--ring); }
.ds-input[readonly] { color: var(--text-2); }
.ds-field { margin-bottom: var(--sp-3); }
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 40px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-3);
  color: var(--text-1);
  font: 600 var(--fs-sm) var(--font-ui);
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.ds-btn:hover { border-color: var(--gold-500); }
.ds-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.ds-btn:disabled { opacity: .5; cursor: not-allowed; }
.ds-btn--primary { background: var(--action); border-color: var(--action); color: var(--text-on-action); }
.ds-btn--primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
.ds-btn--block { width: 100%; }
.ds-alert { padding: 10px var(--sp-3); border-radius: var(--r-sm); border: 1px solid; font-size: var(--fs-xs); margin-bottom: var(--sp-3); }
.ds-alert--ok { background: rgba(63,174,122,.12); border-color: var(--success); color: #9FE0C0; }
.ds-alert--err { background: rgba(217,83,74,.12); border-color: var(--danger); color: #F2B3AD; }
.ds-alert--warn { background: rgba(227,182,94,.12); border-color: var(--warning); color: var(--gold-300); }
.ds-status { min-height: 18px; margin-top: var(--sp-2); font-size: var(--fs-xs); text-align: center; color: var(--text-3); }
.ds-status.ok { color: var(--success); }
.ds-status.err { color: var(--danger); }
/* Selectable tile (themes, icons, background) */
.ds-tile {
  position: relative;
  padding: var(--sp-2);
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  color: var(--text-1);
  font: 600 var(--fs-xs) var(--font-ui);
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms, transform 150ms;
}
.ds-tile:hover { border-color: var(--gold-600); transform: translateY(-1px); }
.ds-tile[aria-pressed="true"] { border-color: var(--gold-500); box-shadow: var(--ring); }
.ds-tile[aria-pressed="true"]::after {
  content: '✓';
  position: absolute; top: 6px; right: 6px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-500); color: var(--text-on-gold); font-size: 12px;
}

/* Mini felt swatch used by theme pickers */
.ds-felt {
  height: 64px;
  border-radius: var(--r-sm);
  background: radial-gradient(circle at 50% 40%, var(--felt-1), var(--felt-2) 60%, var(--felt-3));
  border: 2px solid var(--felt-edge);
  box-shadow: inset 0 0 18px rgba(0,0,0,.45);
  margin-bottom: var(--sp-2);
}
.ds-zemin { height: 64px; border-radius: var(--r-sm); margin-bottom: var(--sp-2); border: 1px solid var(--border-strong); background: linear-gradient(135deg, var(--bg-2), var(--bg-0)); }

/* Segmented tabs */
.ds-tabs { display: flex; gap: 4px; padding: 4px; background: var(--bg-0); border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.ds-tabs button {
  flex: 1; height: 34px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-2);
  font: 600 var(--fs-sm) var(--font-ui); cursor: pointer;
}
.ds-tabs button:hover { color: var(--text-1); }
.ds-tabs button[aria-selected="true"] { background: var(--bg-3); color: var(--gold-300); box-shadow: inset 0 0 0 1px var(--border-strong); }
.ds-tabs button:focus-visible { outline: none; box-shadow: var(--ring); }

/* Brass button: the house action colour for requests and joins */
.ds-btn--brass { background: linear-gradient(180deg, var(--gold-400), var(--gold-600)); border-color: var(--gold-600); color: var(--text-on-gold); }
.ds-btn--brass:hover { background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); border-color: var(--gold-500); }

/* Felt surface: pattern + gradient; emblem drawn as a faded watermark by
   .ds-felt-mark::before (needs position + isolation on the host) */
.ds-felt-mark { isolation: isolate; }
.ds-felt-mark::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--felt-mark) center / auto 62% no-repeat;
  opacity: .32;
}