/* Tarok 124 — full-screen game menus. Visual language: DARK GLASS + GOLD HAIRLINE.
   Near-black translucent plaques, 1px warm-gold border, gold Cinzel text, no glossy fill.
   Shared by the splash, main menu, account, settings and in-game menu — all over the art. */
:root {
  --font-display: 'Cinzel', Georgia, serif; --font-sans: 'Manrope', system-ui, sans-serif;
  --gold: #e3b667; --gold-line: rgba(210,175,110,.42); --gold-line-hi: rgba(240,201,106,.72);
  --gold-text: #ecdcb4; --glass: linear-gradient(180deg, rgba(18,26,21,.62), rgba(9,14,11,.70));
}
[hidden] { display: none !important; }

.screen { position: fixed; inset: 0; z-index: 1500; display: flex; flex-direction: column; align-items: center;
  padding: calc(3.2dvh + env(safe-area-inset-top)) 22px calc(2.6dvh + env(safe-area-inset-bottom));
  font-family: var(--font-sans); -webkit-user-select: none; user-select: none; }
/* MOBILE (portrait) uses the portrait crop; DESKTOP (wide) swaps to the wide gostilna below.
   Both COVER — the old desktop rule letterboxed (contain) a portrait image, which is the bug. */
.screen__bg { position: absolute; inset: 0; z-index: -2; background: url('/static/img/ui/splash_port.webp') center/cover no-repeat; }
.screen__bg--dim { filter: brightness(.42) saturate(1.02); transform: scale(1.06); }
.screen__veil { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5,8,7,.55) 0%, rgba(5,8,7,.3) 26%, rgba(5,8,7,.5) 60%, rgba(5,8,7,.96) 100%); }

/* first-run notice over the profile panel: the game's DIALOG CARD (the end-of-hand result
   banner recipe from table.css, scaled to panel sizes) over a translucent scrim — the
   profile stays visible beneath, the card floats like every other in-game modal */
.profile-intro { background: rgba(5, 8, 7, .6); justify-content: center; padding: 22px; }
.pi-card { text-align: center; background: linear-gradient(180deg, rgba(23,32,26,.97), rgba(9,14,11,.98));
  border: 2px solid rgba(226,190,120,.55); border-radius: 18px; padding: 20px 20px 22px; width: min(78vw, 380px);
  box-shadow: 0 40px 100px -20px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,242,206,.12), inset 0 0 60px -20px rgba(240,201,106,.3); }
.pi-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 4.4vw, 22px); line-height: 1.15; color: #f4e8c9; margin: 2px 0 8px; white-space: nowrap; }
.pi-body { font-family: var(--font-sans); font-size: clamp(12.5px, 3.2vw, 14px); line-height: 1.5; color: #cfc4ab; margin: 0 auto 16px; max-width: 36ch; }
.pi-ok { cursor: pointer; color: #23160a; background: linear-gradient(180deg, #f6dc8e, #dca747 55%, #c1912f);
  border: 1px solid #8a6526; border-radius: 12px; padding: 10px 22px; min-width: 150px;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 3.6vw, 16px);
  box-shadow: 0 0 26px -6px rgba(240,201,106,.6), inset 0 1px 0 rgba(255,248,220,.5); }
.pi-ok:active { transform: translateY(1px); filter: brightness(1.1); }

/* heading */
.screen__head { text-align: center; }
.screen__eyebrow { font-family: var(--font-display); letter-spacing: 5px; text-transform: uppercase; color: #f0d99a; font-weight: 700; font-size: clamp(12px,3.2vw,17px); opacity: .9; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.screen__title { margin: .05em 0 0; font-family: var(--font-display); font-weight: 900; line-height: .9; letter-spacing: 1px; font-size: clamp(40px,12vw,84px); color: #eec572;
  background: linear-gradient(180deg,#fdeeb8,#eec06a 48%,#b7842f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 14px rgba(0,0,0,.6)); }
.screen__title span { -webkit-text-fill-color: #f2d585; }
/* compact title (used on sub-screens): looser line + a little bottom room so descenders
   (the 'g' in "Izberi igro" / "game") aren't clipped by the -webkit-background-clip:text box. */
.screen__title.compact { font-size: clamp(28px,8vw,48px); line-height: 1.06; padding-bottom: .12em; }
.screen__sub { margin-top: 6px; color: #cdb98f; font-weight: 600; font-size: clamp(13px,3.4vw,17px); }

/* account bar (avatar + name + status) — tap to open Račun */
.acct-bar { display: flex; align-items: center; gap: 12px; width: min(88vw,440px); margin: 12px 0 4px; padding: 8px 14px 8px 8px; border-radius: 16px; cursor: pointer; text-align: left;
  background: var(--glass); border: 1px solid var(--gold-line); }
.acct-bar .acct-av { width: 46px; height: 46px; border-radius: 50%; background: #141f19 center/cover no-repeat; box-shadow: 0 0 0 2px var(--gold-line-hi); flex: 0 0 auto; }
.acct-bar .acct-name { flex: 1; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: #f2e7c8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-bar .acct-status { font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: #d8c9a4; background: rgba(0,0,0,.35); border: 1px solid var(--gold-line); border-radius: 20px; padding: 5px 12px; }
.acct-bar .acct-status.premium { color: #0d1512; background: linear-gradient(180deg,#e7c983,#c9a24e); border: none; }

/* big vertical menu list */
/* the list fills the space between account card and footer, CENTRED when it fits and SCROLLING when it
   doesn't — so on short / high-DPR viewports (e.g. the S26's 384×690 logical screen) the items never pile
   up or push the Exit button off-screen. Item height + gap scale with viewport height so every screen gets
   the same look at a proportional size. `safe center` top-aligns instead of clipping when it must scroll. */
.menu { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: safe center; gap: clamp(13px, 3dvh, 22px); width: min(88vw,440px); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.menu::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* main-menu FILL layout — the block spans the whole screen: account card pinned at the TOP, Exit pinned
   at the BOTTOM, and the items DISTRIBUTED (space-evenly) to fill the space between. On a short / high-DPR
   screen (S26) the items shrink to fit so they can never overlap or push Exit off; on a tall screen the
   spacing opens up. No vertical centering, no fixed vh heights. */
.scr-fit { display: flex; flex-direction: column; align-items: center; width: 100%; flex: 1 1 auto; min-height: 0; gap: clamp(8px, 1.6dvh, 14px); }
.scr-fit .acct-card { flex: 0 0 auto; margin: 0; }
.scr-fit .screen__foot { flex: 0 0 auto; margin: 0; }
.scr-fit .menu { flex: 1 1 auto; min-height: 0; overflow: visible; justify-content: flex-start; gap: 14px; width: min(88vw,440px); }
/* items are a GROUP with consistent 14px gaps (not spread across the screen). They grow to a capped
   reference height and shrink to fit on short screens (scoped to the main menu so the splash Play button
   / in-game menu keep their own fixed size). Exit is the separate footer, pinned at the bottom. */
#scr-main .menu > .menu-item { flex: 1 1 0; height: auto; min-height: 40px; max-height: 62px; }
/* KOTA v3 GÖSTERGESİ ORANSAL SİSTEMDE (2026-09-28): ana menüye #soloQuota eklenince menü her ekrana YİNE oransal
   oturur (kaydırma değil). Kurallar YALNIZ gösterge görünürken işler (:has) → gösterge yokken eski düzen birebir.
   Uzun ekranda değişen yok (14px aralık, 62px düğme, 46px bant); kısa ekranda aralık → düğme tabanı → bant sırayla
   görünür yükseklikle (dvh) küçülür. Son güvence: aşırı kısa ekranda düğmeler Çıkış'ın üstüne BİNMEZ (menü kayar). */
#scr-main .scr-fit .menu:has(> #soloQuota:not([hidden])) { gap: clamp(8px, calc(2.4dvh - 5px), 14px); overflow-x: hidden; overflow-y: auto;
  width: calc(min(88vw, 440px) + 24px); padding: 4px 12px; margin: -4px -12px; }
#scr-main .menu:has(> #soloQuota:not([hidden])) > .menu-item { min-height: clamp(30px, calc(14dvh - 46px), 40px); } /* ≥614px: 40 (değişmez) */
#scr-main .olq2--menu { gap: clamp(6px, 1.4dvh, 9px); margin: clamp(0px, calc(4dvh - 20px), 12px) 0; }
#scr-main .olq2--menu .olq2-bar { height: clamp(36px, 6.4dvh, 46px); } /* ≥719px: 46; 642: 41 */
/* items FLEX to fill the actual space between the account card and the footer — NOT a vh height.
   vh on phones = the LARGE viewport (URL-bar-hidden height), which is taller than what's really visible,
   so vh-sized items overflowed the visible screen on the S26 and pushed Exit off. flex-fill fits whatever
   height `.screen` actually is (it's position:fixed → the visible area), capped so it never gets huge. */
.menu-item { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; height: 62px; flex: 0 0 auto; border-radius: 14px; cursor: pointer; text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(16px,4.5vw,24px); letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; color: var(--gold-text);
  background: var(--glass); border: 1px solid var(--gold-line); box-shadow: inset 0 1px 0 rgba(255,240,205,.06), 0 8px 22px -12px rgba(0,0,0,.7); transition: transform .08s ease, border-color .15s ease, background .15s ease; }
.menu-item:active { transform: translateY(1px); background: rgba(240,201,106,.14); border-color: var(--gold-line-hi); }
.menu-item.primary { color: #f7ecc9; border-color: var(--gold-line-hi); box-shadow: inset 0 0 20px -8px rgba(240,201,106,.45), 0 0 22px -8px rgba(240,201,106,.4), 0 8px 22px -12px rgba(0,0,0,.7); }
.menu-item.disabled { opacity: .4; pointer-events: none; }
.menu-item.selected { color: #f7ecc9; border-color: var(--gold-line-hi); background: rgba(240,201,106,.13); }
.menu-item.selected::after { content: '\2713'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: .8em; color: #f2d585; }
.menu-item small { font-family: var(--font-sans); font-weight: 600; font-size: .5em; letter-spacing: 1px; text-transform: none; opacity: .72; margin-left: 6px; }

/* ── new-game screen: difficulty + opponent cast + variants. Roomy vertical rhythm (dark glass + gold). ── */
/* new-game has many blocks (type · difficulty · up to a full roster of opponent faces · play);
   it must never overflow into the header/footer. Scroll when it doesn't fit; stay centred when it
   does. `safe center` top-aligns instead of clipping the top when the content is taller than the box. */
.menu.newmenu { justify-content: center; justify-content: safe center; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: clamp(14px, 2.2vh, 26px); padding: 2px 0 10px; }
.menu.newmenu::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ── Feedback & share panel ── */
.fb-menu { justify-content: flex-start; padding-top: clamp(8px, 3dvh, 30px); min-height: 0; overflow-y: auto; scrollbar-width: none; gap: 12px; }
.fb-menu > * { flex-shrink: 0; } /* never squash the form together */
.fb-menu::-webkit-scrollbar { width: 0; display: none; }
.fb-rate-lbl { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 2.5px; text-transform: uppercase; color: #c9b184; margin-top: 0; }
.fb-stars { display: flex; justify-content: center; gap: 9px; margin: 8px 0 18px; }
.fb-star { background: none; border: none; cursor: pointer; font-size: 46px; line-height: 1; padding: 2px 3px; color: rgba(204,184,134,.20); transition: color .12s ease, transform .08s ease, text-shadow .12s ease; }
.fb-star.on { color: #f2d585; text-shadow: 0 0 16px rgba(240,201,106,.55); }
.fb-star:active { transform: scale(.88); }
.fb-kind { width: min(88vw,440px); }
.fb-text { width: min(88vw,440px); min-height: 76px; resize: vertical; background: rgba(0,0,0,.4); border: 1px solid rgba(233,197,120,.4); border-radius: 12px; color: #f6efdf; font-size: 15px; line-height: 1.4; padding: 12px 14px; font-family: var(--font-sans); }
.fb-text::placeholder { color: #8a7d61; }
.fb-text:focus { outline: none; border-color: var(--gold-line-hi); }
.fb-msg { min-height: 18px; text-align: center; font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: .3px; color: #b9ac8b; }
.fb-share { margin-top: 8px; margin-bottom: 6px; padding-top: 14px; border-top: 1px solid rgba(226,190,120,.16); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fb-share-lead { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.45; color: #b9ad93; text-align: center; }
/* three equal channel tiles (WhatsApp / mail / copy URL): dark-glass card, the icon disc
   carries the channel colour, labels stay uniform. Same width as the form fields above. */
.fb-share-row { display: flex; justify-content: center; gap: 10px; width: min(88vw,440px); }
.fb-share-tile { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 13px 4px 11px; border-radius: 16px; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, rgba(28,34,27,.78), rgba(10,14,11,.82));
  border: 1px solid rgba(214,182,117,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 6px 16px rgba(0,0,0,.35);
  transition: transform .12s ease, border-color .15s ease; }
@media (hover: hover) { .fb-share-tile:hover { border-color: rgba(233,197,120,.6); transform: translateY(-1px); } }
.fb-share-tile:active { transform: scale(.94); }
.fb-share-tile:focus-visible { outline: 2px solid var(--gold-line-hi); outline-offset: 2px; }
.fb-share-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; }
.fb-share-ico svg { width: 22px; height: 22px; display: block; }
.fb-share-lbl { font-family: var(--font-sans); font-weight: 700; font-size: 11.5px; letter-spacing: .2px; color: #dccca4;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-share-tile--wa .fb-share-ico { color: #43dd7c; border: 1px solid rgba(37,211,102,.45);
  background: radial-gradient(circle at 50% 32%, rgba(37,211,102,.28), rgba(37,211,102,.08) 64%, rgba(37,211,102,.04));
  box-shadow: 0 0 14px rgba(37,211,102,.16); }
.fb-share-tile--mail .fb-share-ico { color: #f0cd7e; border: 1px solid rgba(233,197,120,.5);
  background: radial-gradient(circle at 50% 32%, rgba(240,201,106,.24), rgba(240,201,106,.07) 64%, rgba(240,201,106,.03));
  box-shadow: 0 0 14px rgba(240,201,106,.14); }
.fb-share-tile--copy .fb-share-ico { color: #cfe0ea; border: 1px solid rgba(190,210,225,.4);
  background: radial-gradient(circle at 50% 32%, rgba(190,210,225,.2), rgba(190,210,225,.06) 64%, rgba(190,210,225,.03));
  box-shadow: 0 0 14px rgba(190,210,225,.1); }
/* copied confirmation flash (label swaps to "Kopirano ✓" in panels.js) */
.fb-share-tile.copied { border-color: rgba(130,215,150,.6); }
.fb-share-tile.copied .fb-share-lbl { color: #9fd0a0; }
.fb-share-tile.copied .fb-share-ico { color: #85e29e; border-color: rgba(130,215,150,.55); }
/* short screens (phones with browser chrome, small windows): tighten the rhythm so the
   WHOLE panel fits without scrolling — the airy spacing above applies only when there is room */
@media (max-height: 760px) {
  .fb-menu { gap: 8px; }
  .fb-rate-lbl { margin-top: 0; }
  .fb-stars { margin: 6px 0 12px; }
  .fb-star { font-size: 33px; }
  .fb-text { min-height: 58px; }
  .fb-msg { min-height: 12px; }
  .fb-share { margin-top: 0; margin-bottom: 2px; padding-top: 8px; gap: 8px; }
  .fb-share-tile { padding: 8px 4px 8px; gap: 5px; border-radius: 14px; }
  .fb-share-ico { width: 38px; height: 38px; }
  .fb-share-ico svg { width: 18px; height: 18px; }
}
.fb-msg.ok { color: #9fd0a0; }
.fb-msg.err { color: #e0956f; }

/* ── Restore purchase / Delete my data ── */
.rs-email { width: min(88vw,440px); background: rgba(0,0,0,.4); border: 1px solid rgba(233,197,120,.4); border-radius: 12px; color: #f6efdf; font-size: 16px; padding: 13px 15px; font-family: var(--font-sans); text-align: center; }
.rs-email::placeholder { color: #8a7d61; }
.rs-email:focus { outline: none; border-color: var(--gold-line-hi); }

/* ── Save progress (durable identity) ─────────────────────────────────────── */
.save-menu { gap: 14px; }
.save-out { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; }
.save-desc { max-width: min(84vw,400px); margin: 0 0 4px; text-align: center; color: #c2b088; font-family: var(--font-sans); font-size: 13.5px; line-height: 1.62; }
.save-step { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.save-step .menu-item { width: min(88vw,440px); }
.save-link { background: none; border: none; color: #c9b184; font-family: var(--font-sans); font-size: 13px; text-decoration: underline; cursor: pointer; padding: 4px; }
.save-msg { margin-top: 2px; }
/* sent confirmation (check your email) */
.save-sent { display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center; }
.save-sent-ic { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 27px; color: #2b1e0b; background: linear-gradient(180deg,#efd291,#c99a3f); }
.save-sent-txt { max-width: min(86vw,420px); font-family: var(--font-sans); font-size: 14.5px; line-height: 1.55; color: #d8cfb4; word-break: break-word; }
/* signed-in view */
.save-in { display: flex; flex-direction: column; align-items: center; gap: 13px; text-align: center; }
.save-in-badge { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 27px; color: #14310f; background: linear-gradient(180deg,#a9e0aa,#6fbf76); }
.save-in-txt { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: .5px; color: var(--gold-text); }
.save-in-rows { display: flex; flex-direction: column; gap: 8px; width: min(88vw,420px); }
.save-in-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 14px; background: rgba(0,0,0,.32); border: 1px solid var(--gold-line); border-radius: 11px; }
.sir-lbl { flex: none; font-family: var(--font-sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #9a8d6d; }
.sir-val { font-family: var(--font-sans); font-weight: 700; font-size: 13.5px; color: #f0e6cf; word-break: break-all; text-align: right; }
.save-in .menu-item { width: min(88vw,300px); }
/* register form: name pair + Terms consent */
.name-row { display: flex; gap: 10px; width: min(88vw,440px); }
.save-name { flex: 1 1 0; min-width: 0; width: auto; }
.save-terms { display: flex; align-items: flex-start; gap: 9px; width: min(88vw,440px); text-align: left; cursor: pointer; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.4; color: #b6a988; }
.save-terms input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: #d4a94a; }
.save-terms a { color: #e2c680; text-decoration: underline; }
/* onaysız SHRANI dokunuşu → satır ekrana kaydırılır ve bu vurgu oynar (panels.js attnTerms) */
.prof-terms { border-radius: 10px; }
.prof-terms.attn { animation: termsAttn 1.8s ease; }
@keyframes termsAttn {
  0% { background: transparent; box-shadow: none; transform: translateX(0); }
  12% { background: rgba(240,201,106,.14); box-shadow: 0 0 0 2px rgba(240,201,106,.8), 0 0 22px -4px rgba(240,201,106,.55); transform: translateX(-5px); }
  22% { transform: translateX(5px); }
  32% { transform: translateX(-3px); }
  42% { transform: translateX(0); }
  70% { background: rgba(240,201,106,.14); box-shadow: 0 0 0 2px rgba(240,201,106,.8), 0 0 22px -4px rgba(240,201,106,.55); }
  100% { background: transparent; box-shadow: none; transform: translateX(0); }
}
/* registered chip on the account card ID line */
/* registration status pill on the account card's top-right — Registriran (green) ↔ Neregistriran (muted) */
/* PLAN çipi (2026-09-04): kartın sağ üstü artık aboneliği söyler — varsayılan (Brezplačno) sessiz koyu cam;
   Premium, onaylı dark-glass-gold dilinde alımlı (menu-item.primary ile aynı parıltı ailesi; glossy-gold YOK).
   Boşken görünmez (entitlement yüklenene dek) — :empty, "FREE yanıp sönmesini" engeller. */
.acct-reg { flex: 0 0 auto; white-space: nowrap; padding: 5px 11px; border-radius: 20px; font-family: var(--font-sans); font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #b0a488; background: rgba(0,0,0,.3); border: 1px solid var(--gold-line); }
.acct-plan-chip:empty { visibility: hidden; }
.acct-plan-chip.is-premium {
  color: #f7ecc9; border-color: var(--gold-line-hi);
  background: linear-gradient(180deg, rgba(240,201,106,.16), rgba(240,201,106,.05));
  box-shadow: inset 0 0 12px -4px rgba(240,201,106,.5), 0 0 14px -5px rgba(240,201,106,.45);
  text-shadow: 0 0 8px rgba(240,201,106,.35);
}
.acct-plan-chip.is-premium::before { content: '★ '; color: #f2d585; }
/* transient toast (emailed-link return + confirmations) */
.app-toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom,0px) + 22px); transform: translate(-50%,16px); z-index: 9999; max-width: min(90vw,420px); padding: 13px 20px; border-radius: 13px; background: rgba(11,14,13,.94); border: 1px solid var(--gold-line-hi); color: #f2e7c9; font-family: var(--font-sans); font-weight: 700; font-size: 14px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.5); opacity: 0; transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.app-toast.show { opacity: 1; transform: translate(-50%,0); }
.app-toast.ok { border-color: rgba(150,200,150,.5); }
.app-toast.err { border-color: rgba(224,149,111,.6); }
.menu-item--danger { color: #dfa08c; }
.del-warn { width: min(88vw,440px); text-align: center; font-family: var(--font-sans); font-size: 14px; line-height: 1.55; color: #d8b4a5; padding: 4px 4px 8px; }
/* ücretli hak uyarısı (Gap A): kehribar kart; silme = iptal sanılmasın */
.del-subwarn { display: flex; align-items: flex-start; gap: 10px; width: min(88vw,440px); text-align: left;
  padding: 12px 14px; border-radius: 12px; background: rgba(228,166,80,.1); border: 1px solid rgba(228,166,80,.45);
  font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: #f3d9a8; }
.del-subwarn .dsw-ic { flex: none; font-size: 16px; color: #eec070; margin-top: 1px; }
.dsw-manage { border-color: rgba(228,166,80,.45); }
.menu-item.del-confirm { color: #f4d5c8; background: rgba(150,48,38,.3); border-color: rgba(205,95,72,.55); }
.menu-item.del-confirm:active { transform: translateY(1px); }
/* profile "Account" section — restore / legal / delete rows under the plan selector */
.prof-acct { display: flex; flex-direction: column; gap: 11px; margin-top: 4px; }
.prof-acct-item { width: 100%; box-sizing: border-box; display: block; text-align: center; text-decoration: none; font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: .4px; color: #cabf9f; background: rgba(11,17,13,.42); border: 1px solid var(--gold-line); border-radius: 11px; padding: 11px 14px; cursor: pointer; transition: transform .08s ease, border-color .15s ease; }
.prof-acct-item:hover { border-color: var(--gold-line-hi); }
.prof-acct-item:active { transform: translateY(1px); }
.prof-acct-item--danger { color: #dfa08c; }
.prof-acct-entry { display: flex; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 13px; cursor: pointer; background: var(--glass); border: 1px solid var(--gold-line-hi); transition: transform .08s ease, border-color .15s ease; }
.prof-acct-entry:active { transform: translateY(1px); }
/* accountPanel (Račun) must FIT — never scroll, never overlap the footer. The plan boxes stay natural size;
   the account rows fill the remaining height and shrink (flex-fill, capped) on short/high-DPR screens (S26),
   and the plan padding tightens with viewport height. Same "scale to fit" behaviour as the main menu. */
#accountPanel .menu { overflow: hidden; justify-content: flex-start; gap: clamp(9px, 1.6dvh, 15px); padding-top: clamp(10px, 2.4dvh, 22px); }
#accountPanel .prof-plans { flex: 0 0 auto; gap: clamp(7px, 1.2dvh, 11px); }
#accountPanel .prof-plan { padding: clamp(10px, 2dvh, 20px) 16px; }
/* premium'da tek slab kaldığı için yer var: ferah dursun, satırlar sıkışmasın */
#accountPanel .prof-plans.owned .prof-plan--prem { padding: clamp(18px, 3.2dvh, 28px) 16px; }
#accountPanel .prof-acct { flex: 1 1 auto; min-height: 0; gap: clamp(7px, 1.3dvh, 11px); }
#accountPanel .prof-acct .menu-item { flex: 1 1 0; height: auto; min-height: 40px; max-height: 60px; }
.pae-lbl { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold-text); }
.pae-right { display: flex; align-items: center; gap: 11px; }
.pae-status { font-family: var(--font-sans); font-weight: 800; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: #d8c9a4; background: rgba(0,0,0,.35); border: 1px solid var(--gold-line); border-radius: 20px; padding: 4px 11px; }
.pae-status.is-premium { color: #23160a; background: linear-gradient(180deg,#f6dc8e,#dca747 55%,#c1912f); border-color: #8a6526; }
.pae-cta { color: #c9b184; font-size: 22px; line-height: 1; }
.cfg-block { display: flex; flex-direction: column; align-items: center; gap: 11px; width: min(88vw, 440px); }
.cfg-label { font-family: var(--font-display); font-weight: 700; font-size: clamp(12px,3.2vw,15px); letter-spacing: 3px; text-transform: uppercase; color: #c9b184; }
.cfg-count { font-family: var(--font-sans); font-weight: 700; font-size: .82em; letter-spacing: 0; text-transform: none; color: var(--gold); margin-left: 7px; }
.cfg-note { font-family: var(--font-sans); font-size: clamp(11.5px,3vw,13px); color: #a2946f; text-align: center; max-width: min(82vw,420px); line-height: 1.45; margin-top: 1px; }

/* difficulty segmented control */
.seg { display: flex; width: 100%; border-radius: 14px; overflow: hidden;
  background: var(--glass); border: 1px solid var(--gold-line);
  box-shadow: inset 0 1px 0 rgba(255,240,205,.06), 0 10px 26px -14px rgba(0,0,0,.7); }
.seg-btn { flex: 1; height: 56px; border: 0; border-right: 1px solid var(--gold-line); background: transparent; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(15px,4.2vw,19px); letter-spacing: 1px; text-transform: uppercase; color: var(--gold-text);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.seg-btn:last-child { border-right: 0; }
.seg-btn:active { transform: translateY(1px); }
.seg-btn.sel { color: #f7ecc9; background: rgba(240,201,106,.17); box-shadow: inset 0 0 0 1px var(--gold-line-hi); }
/* type segments stack a name + a small player-count line */
.seg-btn--stack { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 60px; padding: 4px 6px; }
.seg-btn--stack b { font-weight: 700; font-size: clamp(13px,3.6vw,16px); line-height: 1; }
.seg-btn--stack small { font-family: var(--font-sans); font-weight: 600; font-size: 10.5px; letter-spacing: .5px; text-transform: none; opacity: .7; }

/* opponent picker: tap character faces to choose your table (selected = gold ring + check) */
.opp-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; width: 100%; }
.opp-face { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 58px;
  background: transparent; border: 0; padding: 0; cursor: pointer; opacity: .6; -webkit-tap-highlight-color: transparent;
  transition: opacity .15s ease, transform .08s ease; }
.opp-face:active { transform: translateY(1px); }
.opp-face.sel { opacity: 1; }
.opp-av { position: relative; width: 50px; height: 50px; border-radius: 50%; background: #141f19 center/cover no-repeat;
  box-shadow: 0 0 0 2px var(--gold-line), 0 4px 12px -4px rgba(0,0,0,.6); transition: box-shadow .15s ease; }
.opp-face.sel .opp-av { box-shadow: 0 0 0 3px var(--gold-line-hi), 0 4px 14px -4px rgba(0,0,0,.7); }
.opp-face.sel .opp-av::after { content: '\2713'; position: absolute; right: -3px; bottom: -3px; width: 19px; height: 19px;
  border-radius: 50%; background: #12190f; border: 1px solid var(--gold-line-hi); color: #f2d585;
  font-family: var(--font-sans); font-weight: 800; font-size: 11px; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.6); }
.opp-nm { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: #d9c8a0; line-height: 1.15; margin-top: 1px; }
.opp-face.sel .opp-nm { color: #f4e8c9; }
.opp-st { font-family: var(--font-sans); font-size: 10.5px; letter-spacing: .2px; line-height: 1.15; margin-top: 3px; text-transform: lowercase; color: #b09b74; }
.opp-st--aggressive { color: #dda660; }
.opp-st--cautious { color: #9fb2a6; }
.opp-st--balanced { color: #c6b48c; }

/* variants (start the game) */
.variant-row { display: flex; flex-direction: column; gap: 12px; width: min(88vw, 440px); }

/* ── online lobby (Faz 4): entry / join-by-code / waiting room ── */
.ol-code-input { width: min(88vw,440px); height: 64px; text-align: center; letter-spacing: 12px; text-transform: uppercase;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(28px,8vw,36px); color: #f7ecc9; caret-color: var(--gold);
  background: var(--glass); border: 1px solid var(--gold-line-hi); border-radius: 14px; outline: none; }
.ol-code-input::placeholder { color: rgba(240,225,190,.26); }
.ol-error { min-height: 20px; text-align: center; color: #ef9f84; font-family: var(--font-sans); font-weight: 600; font-size: 14px; }
.ol-codebox { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ol-code-label { font-family: var(--font-display); font-weight: 700; letter-spacing: 3px; text-transform: uppercase; font-size: 12px; color: #c9b184; }
.ol-code-row { display: flex; align-items: center; justify-content: center; gap: 2px; }
.ol-code { font-family: var(--font-display); font-weight: 900; letter-spacing: 10px; font-size: clamp(36px,11vw,50px); padding-left: 10px;
  background: linear-gradient(180deg,#fdeeb8,#eec06a 55%,#b7842f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* copy-the-code button (the trailing letter-spacing of .ol-code already leaves ~10px before it) */
.ol-copy { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(180deg, rgba(28,34,27,.78), rgba(10,14,11,.82));
  border: 1px solid rgba(214,182,117,.4); color: #e9d092; -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 4px 12px rgba(0,0,0,.32);
  transition: transform .12s ease, border-color .15s ease; }
@media (hover: hover) { .ol-copy:hover { border-color: rgba(233,197,120,.65); transform: translateY(-1px); } }
.ol-copy:active { transform: scale(.9); }
.ol-copy:focus-visible { outline: 2px solid var(--gold-line-hi); outline-offset: 2px; }
.ol-copy svg { width: 20px; height: 20px; display: block; }
.ol-copy--wa { color: #43dd7c; border-color: rgba(37,211,102,.45); }
@media (hover: hover) { .ol-copy--wa:hover { border-color: rgba(37,211,102,.7); } }
.ol-copy--wa svg { width: 21px; height: 21px; }
.ol-copy .ol-copy-ok { display: none; }
.ol-copy.copied { border-color: rgba(130,215,150,.65); color: #85e29e; }
.ol-copy.copied .ol-copy-ic { display: none; }
.ol-copy.copied .ol-copy-ok { display: block; }
.ol-code-label.copied { color: #9fd0a0; }
.ol-seats { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 18px; width: min(88vw,440px); margin: 6px 0 16px; }
.ol-seat { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; }
.ol-av { width: 62px; height: 62px; border-radius: 50%; background: #141f19 center/cover no-repeat; box-shadow: 0 0 0 2px var(--gold-line-hi); }
.ol-av.open { box-shadow: none; border: 2px dashed var(--gold-line); background: rgba(11,17,13,.4); }
.ol-nm { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: #ecdcb4; text-align: center; line-height: 1.1; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-seat.open .ol-nm { color: #8a7d61; font-family: var(--font-sans); font-weight: 600; }
.ol-startnote { margin-top: 6px; }

/* ── live presence chip on the lobby entry: overlapping painted avatars + green pulse + gold count.
      Full menu-column width (matches the buttons), centered content, roomy height. Count is locale-formatted
      and the layout is sized so "10.598 igralcev na spletu" still fits at 320. Hidden below 2 online. ── */
.ol-online[hidden] { display: none; }
.ol-online { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 7px; margin: 0 0 7px; padding: 12px 16px 13px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(28,22,11,.72), rgba(12,15,12,.82)); border: 1px solid var(--gold-line-hi);
  box-shadow: inset 0 1px 0 rgba(255,240,205,.09), inset 0 0 24px -12px rgba(240,201,106,.4), 0 7px 18px -10px rgba(0,0,0,.6); }
.ol-online-avs { position: relative; display: flex; align-items: center; flex: none; }
.ol-online-avs i { width: 29px; height: 29px; border-radius: 50%; background: #141f19 center/cover no-repeat; flex: none;
  box-shadow: 0 0 0 1.5px rgba(214,178,106,.75), 0 3px 7px -2px rgba(0,0,0,.7); }
.ol-online-avs i + i { margin-left: -10px; }
/* ── opening-campaign ad banner: left third Higgsfield tavern art (full bleed, feathered into the glass),
      right two thirds typography. Button-column width, clearly a promo — not a button. ── */
.ol-banner[hidden] { display: none; }
.ol-banner { width: 100%; box-sizing: border-box; display: flex; align-items: stretch; margin: 0 0 7px; border-radius: 14px; overflow: hidden; position: relative; text-align: left;
  background: linear-gradient(180deg, rgba(24,19,10,.88), rgba(11,13,11,.93)); border: 1px solid var(--gold-line-hi);
  box-shadow: inset 0 1px 0 rgba(255,240,205,.08), inset 0 0 30px -15px rgba(240,201,106,.4), 0 8px 20px -12px rgba(0,0,0,.65); }
.olb-art { position: relative; flex: 0 0 44%; margin-right: -9%; min-height: 96px; overflow: hidden;
  background: radial-gradient(130% 95% at 28% 18%, rgba(240,201,106,.30), transparent 58%), linear-gradient(135deg, #17281d, #0b110d);
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent); mask-image: linear-gradient(90deg, #000 55%, transparent); }
/* the game's own Škis — THE tarok icon — big, tilted, glowing. One card reads instantly at banner size. */
.olb-skis { position: absolute; left: 10%; top: 24%; width: 58%; aspect-ratio: 640 / 954; border-radius: 8px;
  background: url('/static/img/cards/skis.webp') center/cover no-repeat;
  box-shadow: 0 0 0 1.5px rgba(214,178,106,.65), 0 0 22px -2px rgba(240,201,106,.45), 0 8px 16px -6px rgba(0,0,0,.8);
  transform: rotate(-8deg); }
/* ── decks variant (Settings → Karte): same recipe, mahogany ground + a fan of one card per deck.
      No under-text bleed (margin-right 0): the fan stays clearly apart from the copy. ── */
.ol-banner--decks .olb-art { margin-right: 0; background: radial-gradient(130% 95% at 28% 18%, rgba(240,201,106,.30), transparent 58%), url('/static/img/ui/mahogany.webp') center/cover no-repeat, linear-gradient(135deg, #2a180e, #120a06);
  -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 98%); mask-image: linear-gradient(90deg, #000 78%, transparent 98%); }
.olb-deckfan { position: absolute; inset: 0; }
.olb-deckfan i { position: absolute; width: 38%; aspect-ratio: 640 / 954; border-radius: 8px;
  background-size: cover; background-position: center;
  box-shadow: 0 0 0 1.5px rgba(214,178,106,.65), 0 0 22px -2px rgba(240,201,106,.45), 0 8px 16px -6px rgba(0,0,0,.8); }
.olb-deckfan i:nth-child(1) { left: 4%;  top: 32%; transform: rotate(-14deg); }
.olb-deckfan i:nth-child(2) { left: 23%; top: 22%; transform: rotate(-3deg); }
.olb-deckfan i:nth-child(3) { left: 42%; top: 28%; transform: rotate(9deg); }

/* ── coming-soon variant (create-table view): Higgs parchment+quill close-up (house rules).
      Sits BELOW the start note with breathing room; announce only, not a button. ── */
/* Teasers are NEVER hidden by viewport size: .ol-view already scrolls internally
   (overflow-y auto), so on short screens the column simply scrolls — do NOT add
   height-based display:none here (real-phone browser chrome made that fire everywhere). */
/* compact metrics for BOTH teasers (campaign banner untouched): they must fit above the
   pinned CANCEL together on 844px-tall phones. */
.ol-banner--soon .olb-art, .ol-banner--tour .olb-art { min-height: 80px; }
.ol-banner--soon .olb-txt, .ol-banner--tour .olb-txt { padding: 9px 13px 10px 6px; gap: 3px; }
.ol-banner--soon .olb-sub, .ol-banner--tour .olb-sub { line-height: 1.3; }
.ol-banner--soon { margin: 10px 0 0; }
.ol-banner--soon .olb-art { margin-right: 0;
  background: radial-gradient(130% 95% at 28% 18%, rgba(240,201,106,.20), transparent 58%), url('/static/img/ui/scroll-rules.webp') left center/cover no-repeat, #14100a;
  -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 98%); mask-image: linear-gradient(90deg, #000 78%, transparent 98%); }

/* ── tournament variant: Higgs laurel-trophy close-up on burgundy (art fills the zone, no cards) ── */
.ol-banner--tour { margin: 7px 0 0; }
.ol-banner--tour .olb-art { margin-right: 0;
  background: radial-gradient(130% 95% at 28% 18%, rgba(240,201,106,.20), transparent 58%), url('/static/img/ui/trophy-tour.webp') left center/cover no-repeat, #150a0d;
  -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 98%); mask-image: linear-gradient(90deg, #000 78%, transparent 98%); }

/* meta line inside the banner: live dot + player count (JS fills; hidden under 2 online) */
.olb-meta[hidden] { display: none; }
.olb-meta { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; max-width: 100%;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 1.1px; text-transform: uppercase; color: #a6cfae; }
.olb-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.olb-meta .ol-online-dot { position: static; }
/* while the campaign banner is up, the standalone presence strip stays out of the way */
#olCampBanner:not([hidden]) ~ .ol-online { display: none; }
.olb-txt { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 12px 15px 13px 6px; }
.olb-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: 2.1px; text-transform: uppercase; color: #c9b184; white-space: nowrap; }
.olb-hero { font-family: var(--font-display); font-weight: 800; font-size: clamp(15px, 4.8vw, 19px); line-height: 1.1; letter-spacing: .4px; text-transform: uppercase;
  color: #f6e3ae; text-shadow: 0 0 16px rgba(240,201,106,.35); }
.olb-sub { font-size: 11px; line-height: 1.4; color: #b7a986; }
.ol-online-dot { position: absolute; right: -2px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c8f7d0, #5ed476 55%, #2f9c4b);
  box-shadow: 0 0 0 2px rgba(12,15,12,.9), 0 0 9px 1px rgba(94,212,118,.6); }
.ol-online-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid rgba(110,220,140,.5); animation: olHalo 2.6s ease-out infinite; }
@keyframes olHalo { 0% { transform: scale(.55); opacity: .9; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
.ol-online-line { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; max-width: 100%; }
.ol-online-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(11px, 3.4vw, 12.5px); letter-spacing: clamp(.6px, .35vw, 1.3px); line-height: 1; color: #8de8a3; text-shadow: 0 0 12px rgba(110,220,140,.4); }
.ol-online-tail { font-family: var(--font-display); font-weight: 700; font-size: clamp(11px, 3.4vw, 12.5px); letter-spacing: clamp(.6px, .35vw, 1.3px); text-transform: uppercase; color: #c9b184; }

/* ── ONE start button with seat LEDs: gold gems light up as humans arrive; tiny "1/4" under the row ── */
#olStart { display: flex; align-items: center; justify-content: center; gap: 30px; }
.st-mod { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.st-leds { display: flex; gap: 6px; }
.st-led { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(200,180,130,.22), inset 0 1.5px 2.5px rgba(0,0,0,.55); transition: background .3s ease, box-shadow .3s ease; }
.st-led.on { background: radial-gradient(circle at 35% 28%, #ffedb0, #f0c96a 55%, #b98c2e);
  box-shadow: 0 0 9px 1.5px rgba(240,201,106,.8), inset 0 1px 0 rgba(255,255,255,.65); }
.st-count { font-family: var(--font-sans); font-weight: 800; font-size: 9.5px; letter-spacing: 1.2px; color: #b9a578; line-height: 1; }
/* MOBILE ONLY: 4 seats overflow the row and wrap ugly (3+1). Force a clean 2×2 grid.
   Desktop (wider) keeps the 4-across flex row from .ol-seats above. */
@media (max-width: 480px) {
  .ol-seats { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; column-gap: 22px; row-gap: 18px; width: auto; }
}
.ol-view { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 13px; width: min(88vw,440px);
  min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ol-view::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* an entry action's ack is in flight (cold DB / connecting socket can take seconds): lock the
   lobby and pulse the buttons gold — a pressed button must NEVER look dead. onlineEmit toggles it;
   a 10s belt in JS always unlocks. */
.ol-view.ol-busy { pointer-events: none; }
.ol-view.ol-busy .menu-item, .ol-view.ol-busy .ol-resume, .ol-view.ol-busy .ol-code-input { opacity: .55; animation: olBusyPulse 1.1s ease-in-out infinite; }
@keyframes olBusyPulse {
  0%, 100% { border-color: var(--gold-line); }
  50% { border-color: rgba(240,201,106,.8); box-shadow: 0 0 16px rgba(240,201,106,.2); }
}
.ol-view > * { flex-shrink: 0; }
/* centring WITHOUT `safe center` (Safari ignores it → top of the content gets clipped): two
   flexible spacers soak up spare space when everything fits, and collapse to 0 when the lobby
   outgrows a short screen — then the view simply scrolls from the very top, foot stays clear. */
.ol-view::before, .ol-view::after { content: ''; flex: 1 1 0; min-height: 0; align-self: stretch; }
/* short screens (badge + resume card + 4 buttons): tighten the rhythm so it all fits unscrolled */
@media (max-height: 800px) {
  .ol-view { gap: 10px; }
  .ol-quota.campaign { padding: 7px 16px 6px; gap: 2px; }
  .ol-resume { gap: 8px; padding: 12px 13px 11px; }
  .ol-resume-btns .menu-item { height: 48px; font-size: 16px; }
  .ol-leave { height: 38px; }
}
/* the lobby's action buttons must span the FULL width like every other menu (align-items:center on
   .ol-view was shrink-wrapping them to their text, so each came out a different width — the bug). */
.ol-view > .menu-item { width: 100%; }
/* free-tier online quota: the remaining-today note + the "limit reached" upsell */
/* free-tier online quota — gold pip meter (fills = games left, empties as used) */
.ol-quota-note[hidden], .ol-quota[hidden] { display: none; }
.ol-quota { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 13px 18px; margin-bottom: 7px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(26,19,9,.62), rgba(11,15,11,.72)); border: 1px solid var(--gold-line-hi);
  box-shadow: inset 0 1px 0 rgba(255,240,205,.08), inset 0 0 30px -15px rgba(240,201,106,.5), 0 6px 16px -10px rgba(0,0,0,.5); }
.olq-label { flex: 0 0 auto; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #c9b184; }
/* Quota v2 (2026-09-03) — glass ENERGY CAPSULE, HUD-grade. ONE contiguous two-tone bar (no gaps):
   the gold-green zone = the 20/day base right, the ember zone = the announced campaign gift (burns
   first, so the daily right visibly stays whole). A hairline gold tick marks the 20-boundary. The
   empty state is the dark well of the track itself; fills are candy-glass (deep gradient + gloss
   veil + inner bevel). Big display-serif remaining number, model caption underneath. Premium: full
   gold bar + ∞, never depletes. Fills animate via CSSOM widths from table.js (CSP-safe). */
.olq2[hidden] { display: none; }
.olq2 { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 7px; }
/* the gauge itself: a slim ENGRAVED capsule sunk into the scene — no gold border, no raised glass,
   a deliberately different material from the .menu-item buttons below it */
.olq2-bar { display: flex; align-items: center; gap: 13px; height: 40px; padding: 0 14px 0 16px; border-radius: 999px; box-sizing: border-box;
  background: linear-gradient(180deg, rgba(8,6,3,.88), rgba(24,17,8,.62) 60%, rgba(36,27,13,.5));
  box-shadow: inset 0 2px 7px rgba(0,0,0,.85), inset 0 -1px 0 rgba(255,235,190,.05), 0 1px 0 rgba(255,240,205,.07); }
.olq2-label { flex: 0 0 auto; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #d8c191; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.olq2-track { flex: 1 1 auto; position: relative; display: flex; gap: 0; height: 16px; border-radius: 999px; padding: 2px; box-sizing: border-box; overflow: hidden;
  background: linear-gradient(180deg, rgba(0,0,0,.66), rgba(28,20,9,.46) 70%, rgba(46,34,16,.4));
  box-shadow: inset 0 2px 5px rgba(0,0,0,.72), inset 0 -1px 0 rgba(255,235,190,.06); }
.olq2-seg { position: relative; flex: 0 0 auto; height: 100%; overflow: hidden; }
.olq2-seg:first-child, .olq2-seg:first-child > .olq2-fill { border-radius: 999px 0 0 999px; }
.olq2-seg:last-child { border-radius: 0 999px 999px 0; }
.olq2-seg:only-child, .olq2-seg:only-child > .olq2-fill { border-radius: 999px; }
/* the 20-boundary tick: a soft gold hairline where the base right ends and the gift begins */
.olq2-seg + .olq2-seg::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1.5px; z-index: 2;
  background: linear-gradient(180deg, rgba(246,222,150,.05), rgba(246,222,150,.85) 50%, rgba(246,222,150,.05)); }
.olq2-fill { position: absolute; top: 0; left: 0; bottom: 0; transition: width .45s cubic-bezier(.22,.9,.3,1); }
.olq2-fill::after { content: ''; position: absolute; left: 1px; right: 1px; top: 1px; height: 46%; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.05)); } /* gloss veil → candy glass */
.olq2-fill.green { background: linear-gradient(180deg,#c8f5d6 0%,#5ecd8b 30%,#2f9a5c 62%,#1c6f40 100%);
  box-shadow: inset 0 -2px 3px rgba(0,40,15,.45), inset 1px 0 0 rgba(255,255,255,.25), 0 0 12px -2px rgba(90,210,140,.55); }
.olq2-fill.ember { background: linear-gradient(180deg,#ffd9b0 0%,#f2914f 30%,#cf5e2b 62%,#9d3f1a 100%);
  box-shadow: inset 0 -2px 3px rgba(70,15,0,.45), 0 0 12px -2px rgba(235,125,70,.5); }
.olq2-fill.gold { background: linear-gradient(180deg,#fdf0bd 0%,#f0cd74 30%,#d3a344 62%,#a97c26 100%);
  box-shadow: inset 0 -2px 3px rgba(80,50,0,.45), 0 0 14px -2px rgba(240,201,106,.75); }
.olq2-num { flex: 0 0 auto; font-family: var(--font-display); font-weight: 800; font-size: 23px; line-height: 1; color: #f2d585; min-width: 42px; text-align: right;
  text-shadow: 0 1px 2px rgba(0,0,0,.65), 0 0 18px rgba(240,201,106,.35); font-variant-numeric: tabular-nums; }
.olq2-num.out { color: #e0956f; }
.olq2-num.inf { font-size: 25px; }
/* floating caption — sits on the art, NOT inside a card: the model declared quietly under the gauge */
.olq2-cap { align-self: center; font-family: var(--font-display); font-weight: 600; font-size: 9.5px; letter-spacing: 1.4px; text-transform: uppercase; color: #a3946f;
  text-shadow: 0 1px 3px rgba(0,0,0,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.olq2.premium .olq2-cap { color: #cdb88a; }
@media (max-width: 359px) { .olq2-bar { height: 36px; gap: 10px; padding: 0 12px 0 13px; } .olq2-num { font-size: 20px; min-width: 36px; } .olq2-track { height: 14px; } .olq2-cap { font-size: 8.5px; letter-spacing: 1px; } }
/* KOTA v3 kapsülü (menü göstergesi + online lobi, ikisi BİREBİR aynı; sahip 2026-09-28): daha yüksek bant (kum saati
   amblemine nefes), alt yazı okunur boy ve banttan uzak. Yalnız model açıkken (.olq2--v3) — kapalıyken lobi eskisiyle aynı. */
.olq2--v3 { gap: 9px; }
.olq2--v3 .olq2-bar { height: 46px; }
.olq2--v3 .olq2-cap { font-size: 11.5px; letter-spacing: 1.2px; }
@media (max-width: 359px) { .olq2--v3 .olq2-bar { height: 42px; } .olq2--v3 .olq2-cap { font-size: 10.5px; letter-spacing: .9px; } }
.ol-quota.premium { justify-content: center; gap: 10px; }
.ol-quota.premium .olq-inf { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1; color: #f2d585; }
/* opening campaign ("otvoritvena akcija"): celebratory gold badge — eyebrow + hero line, calm
   breathing glow. Both lines are nowrap and sized to hold ONE line each down to 320px. */
.ol-quota.campaign { width: auto; align-self: center; flex-direction: column; justify-content: center; gap: 2px; padding: 7px 20px 6px; border-radius: 999px; margin-bottom: 4px;
  background: linear-gradient(180deg, #403113, #1d170b); /* opaque: pins cleanly over the presence card edge */
  border-color: rgba(240,201,106,.6); animation: campGlow 3.4s ease-in-out infinite; }
.ol-quota.campaign .olq-label { color: #bfa87a; font-size: 9.5px; letter-spacing: 2px; white-space: nowrap; }
.ol-quota.campaign .olq-inf { font-family: var(--font-display); font-weight: 800; font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: #f6e3ae; white-space: nowrap; text-shadow: 0 0 14px rgba(240,201,106,.35); display: inline-flex; align-items: center; gap: 7px; }
.ol-quota.campaign .olq-inf::before, .ol-quota.campaign .olq-inf::after { content: '✦'; font-size: 9px; color: #d9b872; text-shadow: none; opacity: .85; }
@keyframes campGlow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 13px rgba(240,201,106,.10); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 26px rgba(240,201,106,.22); }
}
.ol-quota-lock { font-size: 40px; text-align: center; line-height: 1; opacity: .92; }
.ol-quota-out { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(16px,4.4vw,20px); color: #ecdcb4; }
.ol-quota-reset { text-align: center; font-size: clamp(12px,3.2vw,13.5px); color: #b7a98c; margin: -2px 0 2px; line-height: 1.45; }
.ol-quota-reset[hidden] { display: none; }
#olQuotaResult { min-height: 20px; }
#olQuotaResult.ok { color: #8fdca0; }

/* resume card — your live table, a one-tap "recently played" row at the top of entry.
   Same dark-glass + gold-hairline language as every other plaque (no bespoke tint). */
.ol-resume { width: 100%; display: flex; flex-direction: column; gap: 11px; padding: 15px 15px 14px; margin-bottom: 5px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--gold-line-hi);
  box-shadow: inset 0 0 22px -9px rgba(240,201,106,.4), 0 8px 22px -12px rgba(0,0,0,.7); }
.ol-resume[hidden] { display: none; }
/* eyebrow + code stacked and centred, then a full-width primary and a slim ghost leave under it —
   every line nowrap, so the card can NEVER split its code or clip a button on 320–412px */
.ol-resume-info { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.ol-resume-t { font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: 2.2px; color: #c9b184; text-transform: uppercase; white-space: nowrap; }
.ol-resume-code { font-family: var(--font-display); font-weight: 800; letter-spacing: 4px; font-size: 21px; color: #eec572; padding-left: 4px; white-space: nowrap; }
.ol-resume-btns { display: flex; flex-direction: column; gap: 9px; align-items: stretch; }
.ol-resume-btns .menu-item { width: 100%; height: 54px; margin: 0; font-size: 17px; letter-spacing: .8px; white-space: nowrap; }
.ol-leave { width: 100%; height: 42px; padding: 0; border-radius: 12px; cursor: pointer; font-family: var(--font-display); font-weight: 700;
  font-size: 13.5px; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; color: #d8c9a4; background: rgba(11,17,13,.55); border: 1px solid var(--gold-line); -webkit-tap-highlight-color: transparent; }
.ol-leave:active { transform: scale(.98); background: rgba(240,201,106,.1); }

/* open-tables list — pick a table to join a seat or to watch */
.ol-list { width: 100%; display: flex; flex-direction: column; gap: 10px; max-height: 56vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2px; }
.ol-empty { text-align: center; color: #8a7d61; font-family: var(--font-sans); font-weight: 600; padding: 26px 0; }
.ol-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--glass); border: 1px solid var(--gold-line); }
.ol-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ol-row-nm { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #ecdcb4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-row-meta { font-family: var(--font-sans); font-weight: 600; font-size: 12.5px; color: #9a8e6f; }
.ol-row-act { display: flex; gap: 8px; flex: 0 0 auto; }
.ol-row-btn { height: 44px; padding: 0 18px; border-radius: 11px; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--gold-text); background: rgba(11,17,13,.55); border: 1px solid var(--gold-line); }
.ol-row-btn.primary { color: #f7ecc9; border-color: var(--gold-line-hi); background: rgba(240,201,106,.13); }
.ol-row-btn:active { transform: translateY(1px); }

/* in-game menu: the exit relabelled "Zapusti spletno igro" reads as a leave, not a neutral back */
.foot-btn.leave { color: #eaa488; border-color: rgba(220,120,90,.45); background: rgba(60,20,14,.4); }

/* ── Lestvica (leaderboard) ── your progress card + the global online board ── */
.lb-wrap { flex: 1; width: min(90vw,470px); display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
/* personal card */
.lb-me { flex: 0 0 auto; padding: 15px 16px 14px; border-radius: 16px; background: var(--glass); border: 1px solid var(--gold-line-hi);
  box-shadow: inset 0 0 24px -10px rgba(240,201,106,.4), 0 8px 22px -12px rgba(0,0,0,.7); }
.lb-me-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lb-tier { display: flex; flex-direction: column; gap: 2px; }
.lb-tier-lbl { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #c9b184; }
.lb-tier-name { font-family: var(--font-display); font-weight: 800; font-size: 27px; color: #f2d585; line-height: 1; }
.lb-me-score { text-align: right; display: flex; flex-direction: column; }
.lb-me-pts { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1;
  background: linear-gradient(180deg,#fdeeb8,#eec06a 55%,#b7842f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lb-me-lbl { font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #9a8e6f; }
.lb-me-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(210,175,110,.22); }
.lb-me-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lb-me-stats b { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: #ecdcb4; }
.lb-me-stats span { font-family: var(--font-sans); font-weight: 600; font-size: 10.5px; letter-spacing: .3px; text-transform: uppercase; color: #8a7d61; text-align: center; }
/* board */
.lb-tabs { flex: 0 0 auto; display: flex; gap: 7px; padding: 3px; border-radius: 13px; background: rgba(0,0,0,.28); border: 1px solid var(--gold-line); }
.lb-tab { flex: 1 1 0; padding: 9px 10px; border-radius: 10px; cursor: pointer; background: transparent; border: 1px solid transparent;
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px; letter-spacing: 1.5px; text-transform: uppercase; color: #9a8e6f;
  transition: color .15s ease, background .15s ease, border-color .15s ease; }
.lb-tab:active { transform: translateY(1px); }
.lb-tab.is-on { color: #f7ecc9; background: rgba(240,201,106,.14); border-color: var(--gold-line-hi); box-shadow: inset 0 0 16px -8px rgba(240,201,106,.5); }
.lb-tab:focus-visible { outline: 2px solid var(--gold-line-hi); outline-offset: 2px; }
.lb-board-h { flex: 0 0 auto; display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px; }
.lb-board-h > span:first-child { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: #c9b184; }
.lb-count { font-family: var(--font-sans); font-weight: 600; font-size: 12px; color: #8a7d61; }
.lb-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 8px;
  /* fade the list's bottom edge into the dark so the ranking doesn't butt up against the Back button — the
     rows "emerge from the tavern darkness". Fades whatever row sits at the bottom, scrolled or not. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 52px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 52px), transparent); }
.lb-row { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius: 13px; background: var(--glass); border: 1px solid var(--gold-line); }
.lb-row .lb-main { margin-left: 3px; } /* rank↔avatar sits tight (9px); avatar↔name keeps its original 12px air */
.lb-row.me { border-color: var(--gold-line-hi); background: rgba(240,201,106,.12); box-shadow: inset 0 0 18px -9px rgba(240,201,106,.5); }
.lb-rk { flex: 0 0 auto; width: 18px; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 18px; color: #c9b184; }
.lb-row:nth-child(1) .lb-rk { color: #f6d67a; } /* gold rank for #1 */
.lb-av { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: #141f19 center/cover no-repeat; box-shadow: 0 0 0 2px var(--gold-line-hi); }
.lb-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lb-nm { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #ecdcb4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-sub { font-family: var(--font-sans); font-weight: 600; font-size: 11.5px; color: #8a7d61; }
.lb-pt { flex: 0 0 auto; font-family: var(--font-display); font-weight: 800; font-size: 20px; color: #f2d585; }
.lb-empty, .lb-note, .lb-loading { text-align: center; color: #8a7d61; font-family: var(--font-sans); font-weight: 600; padding: 22px 10px; }
.lb-note { padding: 12px 10px; }
.lb-sep { height: 1px; background: rgba(210,175,110,.25); margin: 4px 20px; }

/* Satış ÇAĞRISI modalı (Faz 2, 2026-09-19) — FİYAT LİSTESİ DEĞİL. Solo doğal-durakta göz alıcı davet:
   "premium ol — hatta ömür boyu" → TEK güçlü altın CTA var olan narocnina panelini açar (fiyatlar ORADA).
   dark-glass-gold, Tarok 124 dili, MOBILE GAMING GRADE, 320–412 + masaüstü responsive. */
.sellm { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sellm[hidden] { display: none; }
.sellm__veil { position: absolute; inset: 0; background: rgba(6,10,8,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sellm__card { position: relative; width: min(92vw, 400px); max-height: 92vh; overflow-y: auto; text-align: center;
  padding: 26px 26px 22px; border-radius: 22px; background: var(--glass); border: 1px solid var(--gold-line-hi);
  box-shadow: 0 24px 70px -22px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,240,205,.09), inset 0 0 46px -22px rgba(240,201,106,.4);
  animation: sellmIn .34s cubic-bezier(.2,.8,.25,1) both; }
@keyframes sellmIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.sellm__close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  padding: 0; border-radius: 50%; cursor: pointer; color: #d3c096; background: rgba(9,14,11,.55); border: 1px solid var(--gold-line);
  -webkit-tap-highlight-color: transparent; transition: color .15s ease, border-color .15s ease, background .15s ease, transform .08s ease; }
.sellm__close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.sellm__close:hover { color: #f2d585; border-color: var(--gold-line-hi); background: rgba(240,201,106,.13); }
.sellm__close:active { transform: scale(.92); }
.sellm__logo { width: clamp(128px, 40vw, 156px); margin: 0 auto 4px; filter: drop-shadow(0 8px 20px rgba(0,0,0,.55)); }
.sellm__logo img { width: 100%; height: auto; display: block; }
.sellm__kicker { display: block; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 5px; text-transform: uppercase; color: #e9c987; opacity: .92; margin-bottom: 10px; }
.sellm__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px,6.4vw,32px); line-height: 1.08; letter-spacing: .5px; color: #f0d99a; margin: 0 0 12px; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.sellm__body { font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: #d6cbab; margin: 0 auto 22px; max-width: 31ch; }
.sellm__cta { display: block; width: 100%; cursor: pointer; border: 0; border-radius: 16px; padding: 16px 20px;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(16px,4.6vw,20px); letter-spacing: 1px; text-transform: uppercase;
  color: #22160a; background: linear-gradient(180deg, #fbe6a6, #e3b667 62%, #cf9f52);
  box-shadow: 0 8px 16px -10px rgba(227,182,103,.5), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(120,80,25,.35); /* kısa ışık: alttaki yazıya basmaz (sahip 2026-09-28) */
  transition: transform .08s ease, box-shadow .15s ease, filter .15s ease; }
.sellm__cta:hover { filter: brightness(1.05); box-shadow: 0 9px 18px -10px rgba(227,182,103,.62), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(120,80,25,.35); }
.sellm__cta:active { transform: translateY(1px); }
.sellm__later { display: inline-block; margin-top: 14px; background: none; border: 0; cursor: pointer; font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: .3px; color: #9a8c6c; padding: 6px 12px; }
.sellm__later:hover { color: #d6cbab; text-decoration: underline; }

/* Kota v3 pencereleri (2026-09-28) — .sellm'in kardeşi (.qm): duyuru (#newsQuota) + kota/kayıt duvarı (#quotaWall).
   Üstte Higgsfield Škis görseli kartın kenarlarına taşar ve alt kenarı kartın camına erir; altı .sellm ile aynı dil.
   Kısa ekranda (≤720px yükseklik) görsel yüzleri koruyarak kırpılır → kart tek ekrana sığar. 320–1440 doğrulanır. */
/* KATMAN: menü/paneller .screen (1500) ve masaüstü logosu (1600) ÜSTÜNDE olmalı, yoksa menüde görünmez; ses düğmesi
   (2000), döndürme örtüsü (3000), oturum/çerez kartları (4000) yine üstte kalır. Bir panel (Premium/kayıt) bu
   pencereden açılınca quota-ui.js pencereyi askıya alır, panel kapanınca geri getirir. */
.sellm.qm { z-index: 1700; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); } /* kart sağ-alttaki ses düğmesine (z 2000) değmez */
.qm .sellm__card { max-height: calc(100dvh - 96px - env(safe-area-inset-bottom, 0px)); }
.qm__card { padding: 0 24px 18px; }
.qm__v[hidden], .qm__body[hidden] { display: none; }
.qm .sellm__close { z-index: 2; background: rgba(9,14,11,.62); }
.qm__art { position: relative; margin: 0 -24px 14px; aspect-ratio: 800 / 537; overflow: hidden; border-radius: 21px 21px 0 0; background: #120c06; }
.qm__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 38% 32%; }
.qm__art::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,20,16,0), rgba(14,20,16,.78) 70%, rgba(13,19,15,.96)); }
.qm__kicker { margin-bottom: 6px; }
.qm__title { font-size: clamp(22px, 6.2vw, 29px); margin-bottom: 10px; text-wrap: balance; }
.qm__body { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.55; color: #d6cbab; margin: 0 auto 9px; max-width: 34ch; text-wrap: pretty; }
.qm__note { font-size: 13px; color: #cdbb98; padding: 8px 12px; border-radius: 12px; background: rgba(240,201,106,.07); border: 1px solid rgba(210,175,110,.22); }
.qm__note[hidden] { display: none; }
.qm .sellm__cta { margin-top: 14px; }
.qm .sellm__later { margin-top: 10px; }
@media (max-height: 720px) { .qm__art { aspect-ratio: 16 / 7; } }
@media (max-height: 600px) { .qm__art { aspect-ratio: 16 / 5.6; } .qm__body { font-size: 13.5px; line-height: 1.5; } }

/* SATIŞ PENCERESİ (#quotaWall data-v="quota") — görsel: destenin gerçek tarokları alttan yükselen bir el gibi; kısa
   ekranda YALNIZ alttan kırpılır (rakamlar + sahneler üstte kalır), alt kenar kartın camına erir. Altında: durum satırı,
   başlık, 3 paket (Letno seçili; fiyat + aylık karşılığı kutunun içinde), tek CTA. Koyu cam + altın tel dili. */
.qm__art--fan { aspect-ratio: 1080 / 590; background: none; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); } /* şeffaf zemin: yalnız kartlar + ışık */
.qm__art--fan img { object-position: 50% 0; }
.qm__art--fan::after { display: none; } /* mask erir → kartın kendi zemini, ek katman/dikiş yok */
.qw-status { margin: 2px auto 8px; font-family: var(--font-sans); font-weight: 600; font-size: 13px; line-height: 1.4; color: #cdb88a; text-wrap: balance; }
.qw-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 0; } /* üstte rozet (−47 %) için nefes payı */
.qw-plan { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 15px 4px 11px; border-radius: 14px; cursor: pointer;
  background: rgba(18,26,21,.62); border: 1px solid var(--gold-line); color: var(--gold-text); -webkit-tap-highlight-color: transparent; transition: border-color .15s ease, background .15s ease, transform .08s ease; }
.qw-plan:active { transform: translateY(1px); }
.qw-plan.is-sel { border-color: var(--gold-line-hi); background: rgba(240,201,106,.12); box-shadow: inset 0 0 20px -8px rgba(240,201,106,.5), 0 0 0 1px rgba(240,201,106,.4), 0 0 22px -10px rgba(240,201,106,.6); }
.qw-plan__name { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: #cdb88a; white-space: nowrap; }
.qw-plan__price { font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1.1; color: #f2d585; white-space: nowrap; }
.qw-plan__sub { font-family: var(--font-sans); font-weight: 600; font-size: 11px; line-height: 1.25; color: #a3946f; white-space: nowrap; }
.qw-plan.is-sel .qw-plan__sub { color: #cdb88a; }
.qw-plan__badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  font-family: var(--font-sans); font-weight: 800; font-size: 10.5px; letter-spacing: .3px; color: #fff3e0; background: #b8582c; box-shadow: 0 0 0 1px rgba(255,210,160,.35), 0 3px 8px rgba(0,0,0,.45); }
.qw-terms { margin: 18px auto 0; max-width: 38ch; font-family: var(--font-sans); font-size: 11px; line-height: 1.45; color: #8f8264; }
.qw-terms a { color: #cdb88a; }
.qm__v--sell .sellm__cta { margin-top: 16px; }
/* duyuru: "že od" fiyat hapı (satış duvarındaki paket kutularının yerine; tek satır) */
.nq-price { display: inline-block; margin: 2px auto 4px; padding: 6px 15px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .3px; color: #f2d585;
  background: rgba(240,201,106,.1); box-shadow: inset 0 0 0 1px rgba(226,190,120,.45), 0 0 18px -8px rgba(240,201,106,.55); }
#newsQuota .sellm__cta { margin-top: 16px; }
@media (max-width: 359px) { .nq-price { font-size: 12.5px; letter-spacing: 0; padding: 6px 11px; } }
.qm__v--sell .sellm__later { margin-top: 12px; }
@media (max-width: 359px) { .qw-plans { gap: 6px; margin-left: -10px; margin-right: -10px; } .qw-plan__price { font-size: 16px; } .qw-plan__name { font-size: 9.5px; letter-spacing: .8px; } .qw-plan__sub { font-size: 10px; } .qw-status { font-size: 12px; } }
@media (max-height: 700px) { .qm__art--fan { aspect-ratio: 16 / 7; } }
@media (max-height: 600px) { .qm__art--fan { aspect-ratio: 16 / 5.6; } }
@media (max-height: 560px) { .qm__art--fan { aspect-ratio: 16 / 4.6; } .qw-plans { margin-top: 14px; } .qm__v--sell .sellm__cta { padding: 13px 20px; margin-top: 12px; } .qw-terms { margin-top: 12px; } .qm__v--sell .sellm__later { margin-top: 6px; } } /* iPhone SE Safari (~548) */
@media (max-height: 640px) { .qm__v--sell .qm__title { font-size: 22px; margin-bottom: 8px; } .qw-plan { padding: 13px 4px 9px; } }

/* Ana menü kota göstergesi (#soloQuota, "Nova igra"nın üstü) — lobideki .olq2 kapsülü + boyalı kum saati amblemi.
   Doluyken (.out) dokunulur → duvar (quota-ui.js). Premium: altın dolu şerit + ∞. */
/* dış boşluk + kısa ekranda oransal küçülme: #scr-main .olq2--menu kuralları (ana menü düzeni bölümü, yukarıda) */
.olq2--menu { flex: 0 0 auto; }
.olq2--menu[role="button"] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.olq2--menu[role="button"]:active .olq2-bar { filter: brightness(1.15); }
.olq2-emb { flex: 0 0 auto; width: 28px; height: 28px; margin-left: -7px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(226,190,120,.5), 0 2px 7px rgba(0,0,0,.65); }
.olq2--menu.out .olq2-bar { box-shadow: inset 0 2px 7px rgba(0,0,0,.85), 0 0 0 1px rgba(224,149,111,.35), 0 0 16px -6px rgba(224,149,111,.5); }
@media (max-width: 359px) { .olq2-emb { width: 24px; height: 24px; margin-left: -5px; } }

/* ── Premium panel (license redeem + status) ── */
.pr-wrap { flex: 1; width: min(88vw,440px); display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.pr-active { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(240,201,106,.14), rgba(15,22,13,.6)); border: 1px solid var(--gold-line-hi);
  box-shadow: inset 0 0 26px -10px rgba(240,201,106,.55); }
.pr-active[hidden] { display: none; }
.pr-active-badge { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; color: #23160a;
  background: radial-gradient(circle at 42% 34%, #fdeeb8, #eec06a 55%, #b7842f); box-shadow: 0 0 22px -4px rgba(240,201,106,.7); }
.pr-active-title { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: #f2d585; text-align: center; }
.pr-active-meta { font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; letter-spacing: .2px; color: #cdbb98; text-align: center; margin-top: -2px; }
.pr-active-meta[hidden] { display: none; }
.pr-secure { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(240,201,106,.10), rgba(15,22,13,.5)); border: 1px solid var(--gold-line-hi); }
.pr-secure[hidden] { display: none; }
.pr-secure-txt { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.5; color: #e3d4b3; text-align: center; }
.save-prefill-hint { margin: 2px 2px 0; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.45; color: #cdbb98; }
.save-prefill-hint[hidden] { display: none; }
.pr-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pr-perks[hidden] { display: none; }
.pr-perks li { position: relative; padding-left: 30px; font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: #decdb4; }
.pr-perks li::before { content: '✓'; position: absolute; left: 6px; top: -1px; color: #f2d585; font-weight: 800; }
.pr-buy[hidden], #prBuy[hidden] { display: none; }
/* pr-redeem bloğu kendi ekranına taşındı (#redeemPanel, 2026-09-04 gece) — eski satır-içi stiller kalktı. */
.pr-key { width: 100% !important; letter-spacing: 2px !important; font-size: clamp(15px,4.4vw,19px) !important; text-align: center; }
.pr-msg { min-height: 20px; }
.pr-msg.ok { color: #8fdca0; }

/* account status chip → gold when Premium */
.acct-status.is-premium { color: #23160a; background: linear-gradient(180deg,#f6dc8e,#dca747 55%,#c1912f); border-color: #8a6526; }

/* ── Profile hub: level+stats, subscription row, avatar/name, badges ── */
.prof-wrap { flex: 1; min-height: 0; margin-top: 18px; width: min(92vw,470px); display: flex; flex-direction: column; gap: 13px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 2px 2px 22px; }
/* nickname field — was unstyled (default input pushed a few px of horizontal overflow); constrain it fully */
.namefield { display: flex; flex-direction: column; gap: 10px; width: 100%; box-sizing: border-box; }
.namefield > span { align-self: flex-start; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #c9b184; padding-left: 2px; }
.namefield input { width: 100%; box-sizing: border-box; min-width: 0; background: rgba(0,0,0,.4); border: 1px solid rgba(233,197,120,.4); border-radius: 12px; color: #f6efdf; font-size: 16px; padding: 13px 15px; font-family: var(--font-sans); }
.namefield input:focus { outline: none; border-color: var(--gold-line-hi); }
.prof-stats { flex: 0 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--glass); border: 1px solid var(--gold-line-hi); }
.prof-tier { display: flex; flex-direction: column; gap: 1px; }
.prof-tier-lbl { font-family: var(--font-sans); font-weight: 700; font-size: 9.5px; letter-spacing: 1.5px; text-transform: uppercase; color: #9a8e6f; }
.prof-tier-name { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: #f2d585; line-height: 1.05; }
.prof-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.prof-stat b { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: #ecdcb4; }
.prof-stat span { font-family: var(--font-sans); font-weight: 600; font-size: 9.5px; letter-spacing: .3px; text-transform: uppercase; color: #8a7d61; text-align: center; }
.prof-plans { display: grid; grid-template-columns: 1fr; gap: 11px; }
.prof-plan { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 20px 18px; border-radius: 15px; text-align: center; }
.prof-plan .pp-name { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: .6px; }
.prof-plan .pp-note { font-family: var(--font-sans); font-weight: 700; font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; }
/* Free — pale / subdued */
.prof-plan--free { background: rgba(255,255,255,.018); border: 1px solid rgba(200,180,130,.14); color: #8e876f; cursor: default; }
.prof-plan--free .pp-note { color: #6f6853; }
.prof-plan--free.is-current { border-color: rgba(214,196,150,.4); background: rgba(255,255,255,.045); color: #cdc3a6; }
.prof-plan--free.is-current .pp-name::before { content: '✓ '; color: #b9ac8b; }
.prof-plan--free.is-current .pp-note { color: #9a8e6f; }
/* Premium — gold / appealing */
.prof-plan--prem { cursor: pointer; color: #f9e6a8; border: 1px solid var(--gold-line-hi);
  background: linear-gradient(180deg, rgba(240,201,106,.2), rgba(240,201,106,.05));
  box-shadow: inset 0 0 44px -16px rgba(240,201,106,.75), 0 9px 28px -12px rgba(240,201,106,.55); transition: transform .08s ease; }
.prof-plan--prem .pp-note { color: #d7b877; }
.prof-plan--prem:active { transform: translateY(1px); }
.prof-plan--prem.is-current { background: linear-gradient(180deg,#f6dc8e,#dca747 55%,#c1912f); border-color: #8a6526; color: #23160a; }
.prof-plan--prem.is-current .pp-name, .prof-plan--prem.is-current .pp-note { color: #23160a; }
/* PREMIUM MEMBER: collapse to one full-width golden "Čestitke!" banner — no Free box for members */
.prof-plans.owned { grid-template-columns: 1fr; }
.prof-plans.owned .prof-plan--free { display: none; }
.prof-plans.owned .prof-plan--prem { gap: 9px; padding: 26px 14px; box-shadow: 0 7px 22px -10px rgba(240,201,106,.6), inset 0 1px 0 rgba(255,255,255,.4); animation: premCongrats .5s ease both; }
.prof-plans.owned .pp-name { font-size: 23px; letter-spacing: 1px; }
.prof-plans.owned .pp-note { font-size: 12px; letter-spacing: 1.5px; }
/* premium slab içi CTA hapı: "buraya tıklayınca naročnina yönetilir" — altın slab üstünde koyu, buton hissi */
.pp-manage { display: none; }
.prof-plans.owned .pp-manage { display: inline-flex; align-items: center; gap: 7px; margin-top: 5px; padding: 10px 18px; border-radius: 999px;
  background: rgba(35,22,10,.16); border: 1px solid rgba(35,22,10,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
  font-family: var(--font-sans); font-weight: 800; font-size: 12.5px; letter-spacing: .8px; text-transform: uppercase; color: #2c1c0c; }
.prof-plans.owned .pp-manage::after { content: '›'; font-size: 16px; font-weight: 800; margin-top: -2px; }
@keyframes premCongrats { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
.prof-section-lbl { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #c9b184; margin: 4px 2px -3px; }
.prof-badge-count { color: #8a7d61; font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: 0; }
.prof-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.prof-badge { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: 12px; background: rgba(11,17,13,.5); border: 1px solid var(--gold-line); }
.prof-badge.off { opacity: .32; filter: grayscale(.7); }
.prof-badge.on.gold { border-color: rgba(240,201,106,.7); box-shadow: inset 0 0 16px -8px rgba(240,201,106,.55); }
.prof-badge.on.silver { border-color: rgba(198,208,220,.5); }
.prof-badge .pb-ic { font-size: 26px; line-height: 1; }
.prof-badge .pb-nm { font-family: var(--font-sans); font-weight: 600; font-size: 9.5px; letter-spacing: .2px; color: #b7a577; text-align: center; line-height: 1.1; }
/* the profile's avatar picker + name sit inside the hub now */
.prof-wrap .avatars { margin: 0; }
.prof-uid { text-align: right; padding-right: 8px; font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: 1.5px; color: #8a7d61; margin-top: -2px; }

/* foot: back / continue / exit / save */
.screen__foot { display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 50px; }
.foot-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 30px; border-radius: 12px; cursor: pointer; text-decoration: none;
  font-family: var(--font-sans); font-weight: 700; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; color: #d8c9a4;
  background: rgba(11,17,13,.55); border: 1px solid rgba(206,168,102,.3); transition: transform .08s ease, border-color .15s ease; }
.foot-btn:active { transform: translateY(1px); }
.foot-btn.primary { color: #f7ecc9; border-color: var(--gold-line-hi); box-shadow: 0 0 18px -8px rgba(240,201,106,.4); }
/* "kilitli ama tıklanabilir": görsel kilit (soluk), dokunuş yine saveProfile'a düşer → neden gösterilir */
.foot-btn.is-locked { opacity: .5; filter: saturate(.5); box-shadow: none; }
.foot-btn.is-locked:active { transform: none; }
/* new-game footer: Play is the WIDE, prominent gold CTA; Back is the compact secondary beside it. Both
   pinned in the footer band so Play is always visible (never lost at the bottom of the scrolling list). */
#scr-new .screen__foot { width: min(90vw, 460px); gap: 12px; }
#scr-new .screen__foot [data-back] { flex: 0 0 auto; }
#scr-new .screen__foot #startGame { flex: 1 1 auto; height: 54px; font-size: 18px; letter-spacing: 1.2px; color: #f7ecc9;
  background: var(--glass); border: 1px solid var(--gold-line-hi);
  box-shadow: inset 0 0 22px -9px rgba(240,201,106,.5), 0 0 18px -8px rgba(240,201,106,.4), 0 6px 18px -12px rgba(0,0,0,.7); }
/* main-menu exit — a touch slimmer; layout stays CENTERED so the menu always fits the screen
   (the earlier flex-start + margins pushed EXIT off-screen on tall Androids — reverted). */
#miExit { height: 44px; padding: 0 26px; font-size: 13px; letter-spacing: .8px; }

/* version + placeholder note */
.screen__version { margin-top: 12px; color: rgba(240,225,190,.5); font-size: 12px; letter-spacing: 2px; text-align: center; }
.soon-note { width: min(88vw,440px); text-align: center; color: #e7d3a3; background: rgba(11,17,13,.5); border: 1px dashed var(--gold-line); border-radius: 14px; padding: 16px 18px; font-size: 15px; line-height: 1.5; }

@media (min-aspect-ratio: 1/1) { .screen__bg { background-image: url('/static/img/ui/splash_land.webp'); background-size: cover; background-position: center; } }

/* ── account card (avatar + name + status + login + premium upsell) ── */
.acct-card { width: min(88vw,440px); margin: 6px 0 clamp(10px, 2dvh, 16px); padding: 11px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(44,34,16,.55), rgba(11,15,11,.72)); border: 1px solid var(--gold-line-hi);
  box-shadow: inset 0 1px 0 rgba(255,240,205,.09), inset 0 0 34px -15px rgba(240,201,106,.45), 0 10px 26px -14px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 10px;
  cursor: pointer; transition: transform .1s ease, border-color .15s ease, box-shadow .18s ease; }
.acct-card:hover { border-color: #e7c983; box-shadow: inset 0 1px 0 rgba(255,240,205,.12), inset 0 0 40px -14px rgba(240,201,106,.6), 0 12px 30px -14px rgba(0,0,0,.6); }
.acct-card:active { transform: translateY(1px); }
.acct-card:focus-visible { outline: 2px solid var(--gold-line-hi); outline-offset: 2px; }
.acct-top { display: flex; align-items: center; gap: 10px; }
.acct-id { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; background: none; border: none; padding: 2px; text-align: left; }
.acct-id .acct-av { width: 62px; height: 62px; border-radius: 50%; background: #141f19 center/cover no-repeat; box-shadow: 0 0 0 2px #c9974a, 0 0 0 3.5px rgba(240,201,106,.35), 0 4px 12px -4px rgba(0,0,0,.5); flex: 0 0 auto; }
/* right column: gear "edit" in the top-right corner, registration status pill dropped just below it */
.acct-right { flex: 0 0 auto; align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 6px; }
.acct-editbtn { flex: 0 0 auto; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #f2d585; background: rgba(0,0,0,.32); border: 1px solid var(--gold-line-hi); box-shadow: inset 0 0 12px -6px rgba(240,201,106,.55); }
.acct-editbtn svg { width: 16px; height: 16px; display: block; }
.acct-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acct-meta .acct-name { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: #f2e7c8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-meta .acct-sub { font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: 1px; color: #90866c; }
.acct-tier { flex: 0 0 auto; font-family: var(--font-sans); font-weight: 800; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: #e7c983; background: rgba(0,0,0,.32); border: 1px solid var(--gold-line-hi); border-radius: 20px; padding: 5px 12px; white-space: nowrap; }
.acct-tier.is-premium { color: #23160a; background: linear-gradient(180deg,#f6dc8e,#dca747 55%,#c1912f); border-color: #8a6526; box-shadow: 0 2px 12px -3px rgba(240,201,106,.55); }
.acct-tier.is-premium::before { content: '♛ '; }
.screen__version [data-acct-plan] { color: #b9ac8b; }
.screen__version [data-acct-plan].is-premium { color: #f2d585; font-weight: 700; }
.acct-strip { display: flex; align-items: stretch; border-radius: 13px; background: rgba(0,0,0,.24); border: 1px solid var(--gold-line); box-shadow: inset 0 0 26px -17px rgba(240,201,106,.55); overflow: hidden; }
.acct-stat { flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 8px 6px; }
.acct-stat-ic { font-size: 17px; line-height: 1; color: #e7c983; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.acct-stat-tx { display: flex; flex-direction: column; line-height: 1.05; }
.acct-stat-tx b { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: #f2e2b6; }
.acct-stat-tx span { font-family: var(--font-sans); font-weight: 700; font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; color: #9a8e6f; }
.acct-div { width: 1px; align-self: stretch; margin: 8px 0; background: linear-gradient(180deg, transparent, var(--gold-line-hi), transparent); }
/* account-card badges: ONE row, horizontal finger-scroll, ALL badges (earned lit by tier, locked dimmed) */
.acct-badges { display: flex; flex-wrap: nowrap; gap: 8px; padding: 6px 2px 2px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 16px), transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 16px), transparent); }
.acct-badges::-webkit-scrollbar { display: none; }
.acct-bdg-tok { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  font-size: 21px; line-height: 1; background: rgba(11,14,13,.55); border: 1px solid var(--gold-line);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.acct-bdg-tok.off { opacity: .3; filter: grayscale(.92); }
.acct-bdg-tok.on { background: rgba(28,24,14,.72); }
.acct-bdg-tok.on.gold { border-color: rgba(240,201,106,.78); box-shadow: 0 0 0 1px rgba(240,201,106,.18), inset 0 0 14px -6px rgba(240,201,106,.6); }
.acct-bdg-tok.on.silver { border-color: rgba(200,210,224,.6); box-shadow: inset 0 0 12px -7px rgba(200,210,224,.55); }
.acct-bdg-tok.on.bronze { border-color: rgba(205,140,90,.62); box-shadow: inset 0 0 12px -7px rgba(205,140,90,.5); }
.acct-actions { display: flex; gap: 8px; }
.acct-btn { flex: 1; height: 42px; border-radius: 11px; cursor: pointer; font-family: var(--font-sans); font-weight: 700; font-size: 14px; letter-spacing: .5px; text-transform: uppercase; color: #ecdcb4; background: rgba(11,17,13,.5); border: 1px solid var(--gold-line); transition: transform .08s ease, border-color .15s ease; }
.acct-btn:active { transform: translateY(1px); }
.acct-btn.premium { color: #f3d488; background: rgba(240,201,106,.13); border-color: var(--gold-line-hi); }

/* avatar upload tile + crop screen */
.av.av-upload { display: grid; place-items: center; background: rgba(11,17,13,.5); border: 1px dashed var(--gold-line); color: var(--gold); font-size: 28px; font-weight: 700; }
.crop-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; width: min(88vw,440px); margin: auto 0; }
.crop-stage { position: relative; width: min(76vw, 320px); aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: #0a0f0c; touch-action: none; cursor: grab; }
.crop-stage canvas { display: block; width: 100%; height: 100%; }
.crop-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 100vmax rgba(6,9,7,.62); pointer-events: none; }
.crop-ring::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold-line-hi); }
.crop-wrap .range { width: 100%; accent-color: #e3b667; }

/* splash logo image (baroque wordmark) + smaller version note */
.brand-logo { width: min(84vw, 470px); max-height: 30vh; object-fit: contain; display: block; margin: 0 auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.6)); }
.screen__version { font-size: 10px; letter-spacing: 1.5px; color: rgba(240,225,190,.42); }

/* ── DESKTOP-only brand wordmark, pinned top-centre ─────────────────────────────────────────────────
   On a wide monitor the centred menu column leaves a big empty band up top; drop the logo there so the
   page reads as "ours", not a stray column. Hidden by default → phones/portrait are 100% untouched. It
   sits ABOVE the screen backdrop (z>1500) in space we reserve via padding-top, so it never overlaps the
   menu. Hidden on the splash (it already shows the big wordmark). The game board (table.ejs) has no such
   element, so nothing is added over the play area. */
.desktop-logo { display: none; }
.board-logo { display: none; }
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) {
  .desktop-logo { display: block; position: fixed; top: clamp(18px, 3.4vh, 38px); left: 50%; transform: translateX(-50%);
    height: clamp(64px, 11vh, 108px); width: auto; z-index: 1600; pointer-events: none;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.6)); }
  /* brand mark to the LEFT of the top bar, placed as the exact MIRROR of the menu crest that sits on the
     bar's right. fit() puts the crest centre at (--menu-x, --menu-y); the board is centred, so mirroring
     --menu-x across the centre is 100vw − --menu-x, at the same --menu-y. translate(-50%,-50%) centres the
     logo on that point → same distance from the bar as the crest, symmetric. Shown during play; hidden
     while a menu overlay is open (then the centred menu logo takes over). pointer-events:none. */
  .is-table .board-logo { display: block; position: fixed;
    left: calc(100vw - var(--menu-x, 50vw)); top: var(--menu-y, 96px); transform: translate(-50%, -50%);
    height: clamp(72px, 10vh, 96px); width: auto; z-index: 50; pointer-events: none; opacity: .95;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,.55)); }
  .is-table:has(.screen:not([hidden])) .board-logo { display: none; }
  /* reserve room so the centred menu column clears the logo with a comfortable gap (the profile card / sub-
     menu content shouldn't crowd the logo). Splash keeps its own big logo → no reserve, no pinned logo. */
  .is-title .screen:not(.screen--splash),
  .is-table .screen:not(.screen--splash) { padding-top: clamp(128px, 18vh, 180px); }
  .is-title:has(#scr-splash:not([hidden])) .desktop-logo { display: none; }
  /* table page shares the same pinned logo, but it must ride ONLY above the lobby / menu overlays — never
     over the live game board. Hidden by default here; shown only while a .screen overlay is open. */
  .is-table .desktop-logo { display: none; }
  .is-table:has(.screen:not([hidden])) .desktop-logo { display: block; }

  /* The segmented toggles looked "cut off" on the RIGHT: `.seg` has overflow:hidden + border-radius, and
     Chrome CLIPS the container's right (and bottom) border in that combo, so only left/top/bottom showed.
     Draw the frame with an INSET ring (box-shadow) instead — inset shadows follow the radius and are NOT
     clipped, so all four sides render crisply (same trick the selected button already uses). Opacity is
     left exactly as it was. Desktop-gated → mobile untouched. */
  .seg { border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--gold-line-hi), 0 10px 26px -14px rgba(0,0,0,.7); }
}

/* ── MOBILE (portrait): faint brand watermark, bottom-right, over the tavern BG — brands the menu screens
   without covering the centred content or the centre-bottom footer. Hidden on the splash (its own big
   logo). Board (table.ejs) not included → never over the play area. ── */
.mobile-logo { display: none; }
@media (max-aspect-ratio: 1/1) {
  /* watermark ONLY on the MAIN MENU for now — its bottom-right corner is empty. Other menu screens have a
     footer / content there (e.g. new-game's START GAME button), so we add it per-screen, checked one by one
     (step-by-step, never bleeding to every page at once). */
  .is-title:has(#scr-main:not([hidden])) .mobile-logo { display: block; position: fixed;
    left: -9vw; bottom: -4vh; top: auto; transform: rotate(-10deg); transform-origin: center;
    height: clamp(230px, 66vw, 400px); width: auto; opacity: .18; z-index: 1590; pointer-events: none; }
  /* the busy tavern BG competes with the big centred watermark → soften it (blur + a touch darker) ONLY on
     the main menu, so the logo reads cleanly. Scoped to portrait + #scr-main; every other screen untouched. */
  .is-title:has(#scr-main:not([hidden])) #scr-main .screen__bg--dim { filter: brightness(.36) saturate(.9) blur(3px); }

  /* MOBILE game board: brand mark at the top-LEFT, the MIRROR of the menu crest on the top-right. The crest
     sits at top:(--top-safe+8) right:9px 56px; mirror it → same top, left:9px, same size. Shown during play;
     hidden while a menu overlay is open (never over the board's lobby/menu). */
  .is-table .board-logo { display: block; position: fixed; top: calc(var(--top-safe, 96px) + 6px);
    left: max(7px, env(safe-area-inset-left)); height: 66px; width: auto; z-index: 50; pointer-events: none;
    opacity: .95; filter: drop-shadow(0 3px 10px rgba(0,0,0,.55)); }
  .is-table:has(.screen:not([hidden])) .board-logo { display: none; }
}

/* ── About / credits panel (dark-glass-gold, matches the other menu screens) ── */
.about-menu { align-items: center; text-align: center; gap: 14px; }
.about-logo { width: min(58vw, 210px); max-height: 20vh; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(0,0,0,.6)); }
.about-ver { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 700; font-size: 13.5px; letter-spacing: .6px; color: #b9ac8b; }
.about-desc { width: min(88vw, 440px); margin: 0; font-family: var(--font-sans); font-size: 14.5px; line-height: 1.55; color: #cdbf9e; }
.about-card { width: min(88vw, 440px); display: flex; flex-direction: column; background: var(--glass); border: 1px solid var(--gold-line); border-radius: 14px; overflow: hidden; }
.about-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.about-row + .about-row { border-top: 1px solid rgba(210,175,110,.16); }
.about-row > span { font-family: var(--font-sans); font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: #9c9075; }
.about-row b, .about-row a { font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: #ecdcb4; text-decoration: none; }
.about-row a:hover { text-decoration: underline; }
.about-links { display: flex; align-items: center; gap: 12px; font-family: var(--font-sans); font-weight: 700; font-size: 14px; }
.about-links a { color: #e3b667; text-decoration: none; }
.about-links a:hover { text-decoration: underline; }
.about-dot { color: #6f6650; }
.about-note { width: min(88vw, 440px); margin: 0; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5; color: #8d846c; }
.about-fonts { font-family: var(--font-sans); font-size: 12px; letter-spacing: .3px; color: #7f7660; }
.about-copy { width: min(88vw, 440px); font-family: var(--font-sans); font-size: 12.5px; letter-spacing: .3px; line-height: 1.5; color: #8d846c; }

/* splash credits line → opens the About panel */
.splash-site { margin-top: -8px; align-self: center; padding: 5px 12px; border-radius: 10px; color: #cbb180;
  font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; }
.splash-site:hover { color: #e3b667; }
.splash-credits { margin-top: 8px; background: none; border: 0; cursor: pointer; padding: 6px 10px; border-radius: 10px;
  align-self: center; width: max-content; max-width: 92%; /* tıklama alanı YAZI kadar — stretch tüm satırı kaplayıp sol-alttaki güç düğmesinin komşuluğunu yutuyordu (2026-09-06) */
  font-family: var(--font-sans); font-weight: 600; font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(227,182,103,.6); -webkit-tap-highlight-color: transparent; transition: color .15s ease; }
.splash-credits:hover { color: #e3b667; }


/* music quick-mute button (top-right) — shared by the title page AND the table page's online lobby, so the
   icon shows in both. (Same rules as title.css; music.js toggles [hidden] + .muted.) */
.music-mute { position: fixed; bottom: calc(14px + env(safe-area-inset-bottom)); right: max(14px, env(safe-area-inset-right)); z-index: 2000;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer; padding: 0; display: grid; place-items: center;
  background: rgba(11,17,13,.5); border: 1px solid rgba(210,175,110,.35);
  transition: opacity .2s ease, border-color .2s ease, transform .08s ease; opacity: .6; }
.music-mute:hover { opacity: 1; border-color: rgba(240,201,106,.6); }
.music-mute:active { transform: scale(.93); }
.music-mute svg { width: 22px; height: 22px; fill: none; stroke: #e6cf95; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.music-mute svg .spk { fill: #e6cf95; stroke: none; }
.music-mute .slash { display: none; }
.music-mute.muted { opacity: .5; }
.music-mute.muted .waves { display: none; }
.music-mute.muted .slash { display: block; stroke: #dd9070; }
.music-mute.muted svg .spk { fill: #b6a888; }

/* premium plan chooser: three rows, label left + price right, system button language */
.pr-plans { display: flex; flex-direction: column; gap: 10px; width: 100%; }
/* App modu (Play Billing): Obnovi nakupe + Upravljaj naročnino — aynı menu-item dili, plan bloğunun altında */
.pr-store-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 12px; }
.pr-store-actions .menu-item { height: 52px; font-size: .82em; }
.pr-plan { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 16px;
  height: 52px; font-size: 15.5px; letter-spacing: 1px; }
.pr-plan b { font-weight: 800; font-size: 14.5px; letter-spacing: .4px; color: #f2d585; white-space: nowrap; }
.pr-plan.primary b { color: inherit; }

/* point-of-sale terms clickwrap under the premium plans */
.pr-terms { margin-top: 12px; text-align: center; font-family: var(--font-sans); font-size: 12px; line-height: 1.55; color: #8a7f66; }
.pr-terms a { color: #d6b675; text-decoration: underline; }

/* VZDEVEK başlık satırı: solda etiket, sağda oyuncu ID'si — ALTTAN hizalı (kullanıcı yerleşimi 2026-09-02;
   ID eskiden kutunun altındaydı, o mesafe artık app sözleşme onay satırının [.prof-terms]) */
.namefield > .nf-row { align-self: stretch; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px;
  font-family: inherit; font-weight: inherit; font-size: inherit; letter-spacing: normal; text-transform: none; color: inherit; padding-left: 0; }
.nf-row .nf-lbl { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #c9b184; padding-left: 2px; }
.nf-row .prof-uid { margin: 0; padding-right: 2px; line-height: 1.15; }

/* Kota v2 — EXHAUSTED lock: game-starting entries go passive (watching stays live). A tap still
   lands (no pointer-events cut) so the handler can open the Premium/reset wall instead. */
.menu-item.olq-locked { opacity: .42; filter: saturate(.35); box-shadow: none; }
.menu-item.olq-locked:active { transform: none; }
.olq2-cap.out { color: #d99a76; }

/* WAIT-room fat-finger fix (2026-09-03): the chat grip hugs the right edge and vertically overlaps
   the action rows; with full-width buttons the gap to the grip was ~6px, so a thumb aiming at
   START's right end opened the chat. Shrink the wait-room rows symmetrically to keep a ≥35px
   clearance to the grip. Chat stays fully usable — this is spacing, not behaviour. */
#olWait > .menu-item { width: calc(100% - 60px); }
/* And the second (bigger) culprit of "START opened the chat": the chat's onboarding/preview PEEK
   bubble floats at right:22px/top:58% — in the WAIT room that lands exactly ON the Start button,
   and the bubble itself opens the chat on tap. While the wait room is on screen, no peek. (:has()
   is CSS-only so it can never drift out of sync with the view; at the table peek behaves as before.) */
body:has(#olWait:not([hidden])) .ch-peek { display: none !important; }

/* restore sonuç KARTI (mobile-gaming-grade; QA 2026-09-04 gece: çıplak metin uyarısı onaylı kart diline
   çevrildi — silme ekranındaki .del-subwarn ailesiyle aynı gramer: cam zemin + durum rengi + ikon). */
.rs-result { width: min(88vw,440px); text-align: left; display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 12px; font-family: var(--font-sans); font-size: 13px; line-height: 1.5;
  background: rgba(255,255,255,.05); border: 1px solid rgba(200,180,130,.28); color: #cdc3a6; }
.rs-result:empty { display: none; }
.rs-result::before { content: '⋯'; flex: none; font-size: 15px; margin-top: 1px; color: #b9ac8b; }
.rs-result.ok { background: rgba(240,201,106,.1); border-color: rgba(240,201,106,.5); color: #f2dca6; }
.rs-result.ok::before { content: '✉'; color: #eec070; }
.rs-result.err { background: rgba(219,91,91,.1); border-color: rgba(219,91,91,.45); color: #f0b3a3; }
.rs-result.err::before { content: '⚠'; color: #e89a8a; }
/* info: e-posta↔hesap bağını EKRANDA söyleyen kalıcı kart (redeem + app satın alma; sahibin emri) */
.rs-result.info { background: rgba(240,201,106,.08); border-color: rgba(240,201,106,.38); color: #e8d5a4; }
.rs-result.info::before { content: '✉'; color: #eec070; }
.pr-buy-email .rs-result { width: 100%; }

/* restore formu sarmalayıcısı: YALNIZ gizleme kancası (app: mağaza kontrolü bitene dek). display:contents
   ile düzende görünmezdir → çocuklar .menu'nun DOĞRUDAN çocuğu gibi ortalanır (QA 2026-09-04 gece:
   sarmalayıcı flex bağlamını kırıp SEND LINK'i sola küçültmüştü); [hidden] display:none!important ile yine kazanır. */
.rs-form { display: contents; }

/* satın almada misafir e-postası (app): alan + e-posta↔hesap bağını söyleyen kart (rs-result.info) */
.pr-buy-email { display: flex; flex-direction: column; gap: 9px; width: min(88vw,440px); }