/* Poker Online: "Royal Midnight" site design.
   Loaded after app.css: redefines the design tokens and restyles the site chrome (header,
   navigation, lobby, login, cards, forms, tables, chat, modals). The 3D table view keeps its own
   layout from app.css and simply picks up the new tokens. */
:root {
  --ground: #08080F;
  --bar: rgba(12, 12, 22, .82);
  --panel: #11111C;
  --panel-2: #191928;
  --text: #F4F2FA;
  --text-2: #CFCBE0;
  --muted: #8F8BA8;
  --brass: #EBB54F;
  --brass-l: #FFE29A;
  --brass-d: #B07A1E;
  --on-brass: #1B1206;
  --brass-grad: linear-gradient(135deg, #FFE9A8 0%, #F4C762 42%, #D99A2B 100%);
  --violet: #8B6CFF;
  --violet-l: #B9A6FF;
  --teal: #36D6C3;
  --danger: #FF5A6E;
  --danger-t: #FF97A4;
  --green: #3DDC97;
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 226, 154, .38);
  --line-2: rgba(255, 255, 255, .06);
  --glass: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  --font-display: 'Sora', 'Inter', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, sans-serif;
  --font-money: 'Sora', 'Inter', system-ui, sans-serif;
  --r-sm: 10px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
  --shadow-1: 0 12px 30px rgba(0,0,0,.45);
  --shadow-2: 0 30px 70px rgba(0,0,0,.55);
  --top-h: 64px;
}

/* ---------- page ---------- */
html { background: var(--ground); }
body {
  font: 500 15px/1.5 var(--font-ui);
  background:
    radial-gradient(1100px 620px at 8% -12%, rgba(139,108,255,.20), transparent 62%),
    radial-gradient(900px 600px at 108% 6%, rgba(54,214,195,.10), transparent 60%),
    radial-gradient(1100px 700px at 50% 118%, rgba(235,181,79,.10), transparent 60%),
    var(--ground);
  background-attachment: fixed;
}
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.01em; }
h1 { font-weight: 800; }
h2 { color: var(--text); font-weight: 700; font-size: 22px; }
h3 { font-weight: 700; font-size: 17px; }
h4 { color: var(--brass-l); }
a { color: var(--brass-l); }
::selection { background: rgba(139,108,255,.45); }
.gold-text { background: var(--brass-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--muted); }
main { max-width: 1280px; padding: 22px 20px 40px; }

/* ---------- header ---------- */
#topbar {
  height: calc(var(--top-h) + env(safe-area-inset-top));
  gap: 18px; padding: env(safe-area-inset-top) 22px 0;
  background: var(--bar);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
.brand { gap: 10px; color: var(--text); font: 800 18px var(--font-display); letter-spacing: -.01em; }
.brand::before {
  content: "♠"; width: 36px; height: 36px; border-radius: 12px; font-size: 20px;
  background: var(--brass-grad); color: var(--on-brass);
  box-shadow: 0 6px 18px rgba(235,181,79,.35), inset 0 1px 0 rgba(255,255,255,.6);
}
.brand--lg { font-size: 22px; }
.brand--lg::before { width: 44px; height: 44px; font-size: 24px; border-radius: 14px; }
#topbar nav { gap: 4px; justify-content: center; }
#topbar nav a {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px;
  color: var(--muted); font: 600 14px var(--font-ui); transition: color .15s, background .15s;
}
#topbar nav a svg { width: 18px; height: 18px; fill: currentColor; opacity: .85; }
#topbar nav a:hover { color: var(--text); background: rgba(255,255,255,.05); }
#topbar nav a.active { color: var(--text); background: rgba(139,108,255,.16); box-shadow: inset 0 0 0 1px rgba(139,108,255,.35); }
#topbar nav a.active svg { color: var(--violet-l); opacity: 1; }
.balance-box { gap: 12px; }
.av-sm { border: 2px solid rgba(255,226,154,.55); }

/* CHIPS balance pill */
.chips-pill {
  display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px 0 6px; border-radius: var(--r-pill);
  background: linear-gradient(var(--panel), var(--panel)) padding-box, var(--brass-grad) border-box; border: 1.5px solid transparent;
  box-shadow: 0 8px 24px rgba(235,181,79,.16); white-space: nowrap;
}
.chips-pill__icon, .chip-ico {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background:
    radial-gradient(circle, #F4C762 0 34%, #1B1206 35% 40%, #F4C762 41% 56%, transparent 57%),
    repeating-conic-gradient(#1B1206 0 18deg, #F4C762 18deg 45deg);
  box-shadow: 0 3px 8px rgba(0,0,0,.5), inset 0 0 0 2px rgba(0,0,0,.25);
}
.chips-pill__label { font: 700 10px var(--font-ui); letter-spacing: .16em; color: var(--muted); }
.chips-pill b { font: 800 17px var(--font-money); font-variant-numeric: tabular-nums; background: var(--brass-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.announcement { background: linear-gradient(90deg, rgba(139,108,255,.9), rgba(54,214,195,.85)); color: #0B0B14; }

/* ---------- surfaces ---------- */
.card {
  background: var(--glass), var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 24px; box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.card h3 { margin-bottom: 14px; }
.section { margin-bottom: 18px; }
.stat {
  background: var(--glass), var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px;
}
.stat .v { font: 800 26px var(--font-money); }
.stat .l { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 600; }
.tag { border-color: var(--line); background: rgba(255,255,255,.04); color: var(--text-2); }
.tag.green { color: var(--green); border-color: rgba(61,220,151,.4); }
.tag.gold { color: var(--brass-l); border-color: var(--line-strong); }
.pos { color: var(--green); }
.neg { color: var(--danger-t); }

/* ---------- forms & buttons ---------- */
label { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; margin: 14px 0 6px; }
input, select, textarea {
  min-height: 46px; border-radius: var(--r-md); border: 1px solid var(--line);
  background: rgba(255,255,255,.035); color: var(--text); font: 500 15px var(--font-ui);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:hover, select:hover, textarea:hover { border-color: rgba(255,255,255,.16); }
input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(139,108,255,.7); box-shadow: 0 0 0 4px rgba(139,108,255,.18); background: rgba(255,255,255,.05); }
select option { background: var(--panel); }
input[type=range] { accent-color: var(--brass); border: 0; box-shadow: none; background: transparent; }
input[type=checkbox] { accent-color: var(--violet); }
.btn {
  min-height: 44px; padding: 0 18px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--text);
  font: 600 14px var(--font-ui); transition: transform .12s, background .15s, border-color .15s, box-shadow .15s, filter .15s;
}
.btn:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.gold {
  background: var(--brass-grad); color: var(--on-brass); border-color: transparent; font-weight: 800;
  box-shadow: 0 10px 26px rgba(235,181,79,.32), inset 0 1px 0 rgba(255,255,255,.55);
}
.btn.gold:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn.red { background: rgba(255,90,110,.12); border-color: rgba(255,90,110,.45); color: #FFD6DC; }
.btn.red:hover { background: rgba(255,90,110,.2); }
.btn.green { background: rgba(61,220,151,.12); border-color: rgba(61,220,151,.45); color: #C9F7E3; }
.btn.blue { background: rgba(139,108,255,.16); border-color: rgba(139,108,255,.5); color: #E3DCFF; }
.btn.small { min-height: 36px; padding: 0 14px; font-size: 13px; border-radius: 12px; }
.btn.block { min-height: 52px; font-size: 16px; border-radius: 16px; }
.tabs { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 16px; }
.tabs button { font: 600 13px var(--font-ui); letter-spacing: 0; border-radius: 12px; }
.tabs button.active { background: rgba(139,108,255,.22); color: #fff; box-shadow: inset 0 0 0 1px rgba(139,108,255,.5); }
.links a { font-weight: 600; }
.check { color: var(--text-2); }

/* ---------- data tables ---------- */
table.data th { color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-size: 11px; border-bottom: 1px solid var(--line); }
table.data td { border-bottom: 1px solid var(--line-2); color: var(--text-2); }
table.data tr.click:hover, table.data tr.me-row { background: rgba(139,108,255,.08); }

/* ---------- login / register ---------- */
main.auth-main { max-width: none; padding: 0; }
.auth-wrap { min-height: 100dvh; display: grid; grid-template-columns: 1.15fr 1fr; }
.auth-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 48px; isolation: isolate; }
.auth-hero__img {
  position: absolute; inset: 0; z-index: -1;
  background: url(/img/tables/high.jpg) center 40% / cover no-repeat;
  animation: heroZoom 24s ease-in-out infinite alternate;
}
.auth-hero__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,15,.2) 0%, rgba(8,8,15,.15) 35%, rgba(8,8,15,.92) 85%), linear-gradient(90deg, transparent 60%, rgba(8,8,15,.95));
}
@keyframes heroZoom { from { transform: scale(1.02); } to { transform: scale(1.12) translateY(-1%); } }
.auth-hero__text { max-width: 560px; }
.auth-hero__text h1 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.04; margin: 22px 0 14px; }
.auth-hero__text p { color: var(--text-2); font-size: 17px; max-width: 460px; margin: 0 0 22px; }
.auth-hero__thumbs { display: flex; gap: 10px; }
.auth-hero__thumbs span {
  width: 76px; height: 46px; border-radius: 12px; background-size: cover; background-position: center;
  border: 1px solid rgba(255,255,255,.18); box-shadow: 0 8px 20px rgba(0,0,0,.5);
}
.auth {
  align-self: center; justify-self: center; width: min(440px, calc(100% - 32px)); margin: 32px 16px; padding: 34px 32px;
  background: var(--glass), rgba(17,17,28,.88); border: 1px solid var(--line); border-radius: 26px;
  box-shadow: var(--shadow-2), 0 0 0 1px rgba(255,226,154,.06) inset;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.auth h2 { font-size: 28px; margin-bottom: 6px; }
.auth .btn.block { margin-top: 22px; }
.auth .links { margin-top: 18px; }

/* ---------- lobby ---------- */
.hero {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr minmax(280px, 380px); gap: 20px; align-items: end;
  padding: 30px 30px 26px; margin-bottom: 22px; border-radius: 28px; border: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(8,8,15,.94) 0%, rgba(8,8,15,.72) 45%, rgba(8,8,15,.25) 100%),
    url(/img/tables/medium.jpg) right 30% / cover no-repeat;
  box-shadow: var(--shadow-2);
}
.eyebrow { font: 700 11px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--violet-l); }
.hero h1 { font-size: clamp(28px, 3.4vw, 42px); margin: 6px 0 18px; }
.hero__chips {
  display: inline-flex; align-items: center; gap: 14px; padding: 10px 12px 10px 10px; border-radius: 20px;
  background: rgba(8,8,15,.6); border: 1px solid var(--line-strong); backdrop-filter: blur(10px);
}
.hero__chips .chip-ico { width: 42px; height: 42px; }
.hero__chips span { display: block; font: 700 10px var(--font-ui); letter-spacing: .18em; color: var(--muted); }
.hero__chips b { font: 800 26px var(--font-money); font-variant-numeric: tabular-nums; background: var(--brass-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__bonus {
  display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px;
  background: rgba(17,17,28,.78); border: 1px solid var(--line); backdrop-filter: blur(12px);
}
.hero__bonus b { font-family: var(--font-display); }
.hero__bonus .muted { font-size: 13px; }
.hero__gift { width: 48px; height: 48px; flex: none; display: grid; place-items: center; font-size: 26px; border-radius: 14px; background: linear-gradient(135deg, rgba(139,108,255,.35), rgba(54,214,195,.25)); }
.lobby { grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }
.lobby-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.lobby-bar h2 { margin: 0; flex: 1; }
.quick { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.quick > span { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 8px; white-space: nowrap; }
.quick .btn { border: 0; background: transparent; }
.quick .btn:hover { background: rgba(139,108,255,.18); }

.table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.tcard {
  position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--line);
  background: var(--glass), var(--panel); box-shadow: 0 18px 44px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.tcard:hover { transform: translateY(-4px); border-color: var(--tc, rgba(255,226,154,.4)); box-shadow: 0 26px 60px rgba(0,0,0,.5), 0 0 0 1px var(--tc, transparent), 0 0 40px -10px var(--tc, transparent); }
.tcard__img {
  position: relative; display: block; aspect-ratio: 16 / 8.2; background-size: cover; background-position: center 42%;
  transition: background-size .4s ease; background-size: 104%;
}
.tcard:hover .tcard__img { background-size: 112%; }
.tcard__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(17,17,28,.95)); }
.tcard__design, .tcard__live {
  position: absolute; z-index: 1; top: 12px; height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: var(--r-pill);
  font: 700 11px var(--font-ui); letter-spacing: .04em; backdrop-filter: blur(8px);
}
.tcard__design { left: 12px; background: rgba(8,8,15,.7); color: var(--tc, var(--brass-l)); border: 1px solid rgba(255,255,255,.12); }
.tcard__live { right: 12px; background: rgba(8,8,15,.7); color: var(--text-2); border: 1px solid rgba(255,255,255,.12); gap: 6px; }
.tcard__live.on::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse { 50% { opacity: .35; } }
.tcard__body { padding: 4px 18px 18px; margin-top: -26px; position: relative; z-index: 1; }
.tcard__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tcard__top h3 { margin: 0; font-size: 19px; display: flex; align-items: center; gap: 8px; }
.tcard__blinds { font: 800 17px var(--font-money); color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tcard__meta { color: var(--muted); font-size: 13px; margin: 4px 0 14px; }
.tcard__foot { display: flex; align-items: center; gap: 10px; }
.tcard__foot .seats-bar { flex: 1; margin: 0; }
.tcard__foot .btn { min-width: 96px; }
.seats-bar i { width: 9px; height: 9px; border: 1px solid rgba(255,255,255,.22); }
.seats-bar i.on { background: var(--tc, var(--brass)); border-color: transparent; box-shadow: 0 0 8px var(--tc, var(--brass)); }
.tcard.th-micro  { --tc: #4FD39A; }
.tcard.th-low    { --tc: #F07A8E; }
.tcard.th-free   { --tc: #45D8FF; }
.tcard.th-medium { --tc: #3FE0D0; }
.tcard.th-high   { --tc: #FFC94F; }

/* ---------- chat ---------- */
.chat { background: var(--glass), var(--panel); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.lobby .chat { position: sticky; top: calc(var(--top-h) + 20px); }
.chat-head { height: 54px; color: var(--text); font: 700 15px var(--font-display); border-bottom: 1px solid var(--line); }
.chat-msgs { max-height: 62vh; }
.chat-msgs .m { padding: 6px 8px; border-radius: 12px; }
.chat-msgs .m:hover { background: rgba(255,255,255,.03); }
.chat-msgs .m b { color: var(--violet-l); }
.chat-msgs .m.me b { color: var(--brass-l); }
.chat-msgs .m.sys { background: rgba(139,108,255,.1); border-color: rgba(139,108,255,.3); }
.chat-msgs .m .adm { background: var(--brass-grad); }
.chat-form { border-top: 1px solid var(--line); background: rgba(0,0,0,.15); }
.quick-phrases button { border-radius: var(--r-pill); }

/* ---------- modal & toasts ---------- */
.modal { background: rgba(5,5,10,.66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-box { background: var(--glass), #13131F; border: 1px solid rgba(255,255,255,.1); border-radius: 26px; padding: 28px; box-shadow: var(--shadow-2); }
#toasts { top: calc(var(--top-h) + 14px); }
.toast { background: rgba(19,19,31,.92); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(14px); box-shadow: var(--shadow-1); padding: 12px 16px; }
.toast.ok { border-color: rgba(61,220,151,.45); }
.toast.error { border-color: rgba(255,90,110,.55); }
.toast.action { border-color: rgba(139,108,255,.5); }

/* ---------- table view (only the chrome around the 3D table) ---------- */
.table-view { height: calc(100dvh - var(--top-h) - env(safe-area-inset-top)); }
.side-chat .chat { border-radius: 0; height: 100%; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .lobby { grid-template-columns: 1fr; }
  .lobby .chat { position: static; }
  .hero { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-hero { min-height: 46vh; padding: 28px 22px; align-items: flex-end; }
  .auth-hero__img::after { background: linear-gradient(180deg, rgba(8,8,15,.1) 0%, rgba(8,8,15,.55) 55%, var(--ground) 100%); }
  .auth-hero__text h1 { margin: 14px 0 8px; }
  .auth-hero__text p { font-size: 15px; margin-bottom: 14px; }
  .auth { margin: -40px auto 32px; position: relative; padding: 28px 22px; }
}
/* Phones: the navigation becomes a tab bar at the bottom of the screen */
@media (max-width: 760px) {
  :root { --top-h: 58px; }
  #topbar { padding-left: 14px; padding-right: 14px; gap: 10px; overflow: visible; }
  .brand { font-size: 16px; }
  .brand::before { width: 32px; height: 32px; font-size: 18px; }
  #topbar nav {
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40;
    justify-content: space-around; gap: 0; padding: 6px; border-radius: 22px;
    background: rgba(17,17,28,.9); border: 1px solid var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 16px 40px rgba(0,0,0,.55);
  }
  #topbar nav a { flex: 1; flex-direction: column; gap: 3px; padding: 7px 4px; font-size: 11px; border-radius: 16px; }
  #topbar nav a svg { width: 22px; height: 22px; }
  .balance-box { margin-left: auto; }
  .chips-pill { height: 38px; padding-right: 12px; gap: 8px; }
  .chips-pill__icon { width: 26px; height: 26px; }
  .chips-pill__label { display: none; }
  .chips-pill b { font-size: 15px; }
  main { padding: 14px 12px calc(100px + env(safe-area-inset-bottom)); }
  main.auth-main, main.full { padding: 0; }
  body.on-table #topbar nav { display: none; }
  .hero { padding: 22px 18px 18px; border-radius: 22px; background-position: 70% 30%; }
  .hero__chips b { font-size: 22px; }
  .lobby-bar h2 { flex: none; width: 100%; }
  .quick { flex: 1; overflow-x: auto; scrollbar-width: none; }
  .table-grid { grid-template-columns: 1fr; }
  .card { padding: 18px; }
  .auth-hero__thumbs span { width: 56px; height: 34px; }
}

.tcard { translate: 0 var(--ay, 0px); }
@media (max-width: 760px) {
  /* backdrop-filter would make the header the containing block of the fixed tab bar */
  #topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(10,10,18,.97); }
  .lobby-bar { gap: 10px; }
  .quick { flex: 1 1 100%; order: 2; }
  #newRoom { order: 1; margin-left: auto; }
  .lobby-bar h2 { width: auto; flex: 1; }
}

/* ---------- friends ---------- */
.icon-btn {
  position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--text-2); transition: background .15s, color .15s;
}
.icon-btn:hover { background: rgba(139,108,255,.18); color: #fff; }
.icon-btn svg { width: 22px; height: 22px; fill: currentColor; }
.fr-badge {
  position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  font: 800 11px/19px var(--font-ui); text-align: center; color: #fff; background: var(--violet); box-shadow: 0 0 0 2px var(--ground);
}
.fr-badge.on { background: var(--green); color: #05140D; }
.fr-badge.req { background: var(--danger); animation: livePulse 1.4s ease-in-out infinite; }
.fr-shade { position: fixed; inset: 0; z-index: 44; background: rgba(5,5,10,.5); opacity: 0; pointer-events: none; transition: opacity .25s; }
.fr-shade.open { opacity: 1; pointer-events: auto; }
.fr-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 45; width: min(400px, 100vw); display: flex; flex-direction: column;
  background: var(--glass), #12121E; border-left: 1px solid var(--line); box-shadow: -30px 0 60px rgba(0,0,0,.5);
  transform: translateX(105%); transition: transform .32s cubic-bezier(.2,.8,.2,1);
  padding-top: env(safe-area-inset-top);
}
.fr-panel.open { transform: none; }
.fr-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 10px; }
.fr-head h3 { margin: 0; font-size: 22px; }
.fr-head .muted { font-size: 13px; }
.fr-search { position: relative; padding: 6px 20px 12px; border-bottom: 1px solid var(--line); }
.fr-results:not(:empty) { margin-top: 8px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--line); padding: 4px; }
.fr-body { flex: 1; overflow-y: auto; padding: 8px 12px calc(24px + env(safe-area-inset-bottom)); }
.fr-body h4 { margin: 14px 8px 6px; font: 700 11px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fr-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 16px; }
.fr-row:hover { background: rgba(255,255,255,.035); }
.fr-avwrap { position: relative; flex: none; }
.fr-avwrap i { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: #4A475E; box-shadow: 0 0 0 3px #12121E; }
.fr-row.online .fr-avwrap i { background: var(--green); box-shadow: 0 0 0 3px #12121E, 0 0 10px var(--green); }
.fr-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--panel-2); flex: none; }
.fr-row:not(.online) .fr-avwrap .fr-av { filter: grayscale(.7); opacity: .7; }
.fr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fr-info b { font: 700 15px var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-st { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-st.on { color: var(--green); }
.fr-more { padding: 0 10px; background: transparent; border-color: transparent; color: var(--muted); }
.fr-empty { padding: 26px 12px; text-align: center; color: var(--muted); font-size: 14px; }
@media (max-width: 760px) {
  .icon-btn { width: 38px; height: 38px; }
  .fr-panel { width: 100vw; }
}

/* ---------- gifts and tips flying across the table ---------- */
.fx-fly {
  position: absolute; z-index: 12; pointer-events: none !important; display: flex; flex-direction: column; align-items: center; gap: 2px;
  transform: translate(-50%, -50%); scale: var(--pop, 1); rotate: var(--rot, 0deg);
}
.fx-fly__ico { font-size: 44px; line-height: 1; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(255,226,154,.55)); }
.fx-fly__label {
  padding: 2px 9px; border-radius: 999px; white-space: nowrap; font: 700 11px var(--font-ui); color: #1B1206;
  background: var(--brass-grad); box-shadow: 0 4px 12px rgba(0,0,0,.5); rotate: calc(var(--rot, 0deg) * -1);
}
.fx-fly.tip .fx-fly__ico { font-size: 30px; }
.fx-fly.tip .fx-fly__ico .chip-ico { display: block; width: 34px; height: 34px; }
.dealer-seat { cursor: pointer; }
.dealer-seat img { transition: filter .2s; }
.dealer-seat:hover img { filter: drop-shadow(0 0 14px rgba(255,226,154,.6)); }
.dealer-seat .dealer-tag::after { content: " · tip 💰"; opacity: .75; }
.tip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.tip-opt {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; border-radius: 18px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--text); font: 600 13px var(--font-ui);
  transition: transform .12s, border-color .15s, background .15s;
}
.tip-opt:hover { transform: translateY(-2px); border-color: var(--line-strong); background: rgba(235,181,79,.08); }
.tip-opt b { font: 800 20px var(--font-money); background: var(--brass-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tip-opt span { color: var(--muted); font-size: 12px; }
#dealerImg { scale: var(--pop, 1); }

/* ---------- table controls: a menu on phones, so nothing covers the table ---------- */
.ctl-toggle { display: none; }
@media (orientation: landscape) and (max-height: 500px), (orientation: portrait) and (max-width: 500px), (max-width: 760px) {
  .ctl-toggle { display: inline-flex; min-height: 32px; padding: 0 12px; font-size: 16px; }
  .table-top { position: absolute; }
  .my-controls {
    display: none; position: absolute; top: 46px; right: 6px; z-index: 20; flex-direction: column; align-items: stretch; gap: 6px;
    min-width: 190px; padding: 8px; border-radius: 16px; background: rgba(17,17,28,.97); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0,0,0,.6);
  }
  .my-controls.open { display: flex; }
  .my-controls .btn { min-height: 40px !important; font-size: 14px !important; justify-content: flex-start; padding: 0 14px !important; }
}
/* the dealer can be clicked (tip); the speech bubble stays click-through */
.dealer-seat img, .dealer-seat .dealer-tag { pointer-events: auto; cursor: pointer; }
.dealer-seat .dealer-say { pointer-events: none; }

/* ---------- pot and bets: small glass tags, never covering chips or cards ---------- */
.pot-label {
  transform: translate(-50%, -100%); gap: 7px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px;
  background: rgba(8,8,15,.72); border: 1px solid rgba(255,226,154,.35); box-shadow: 0 6px 18px rgba(0,0,0,.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.pot-label::before { content: "POT"; font: 700 10px var(--font-ui); letter-spacing: .16em; color: var(--muted); }
.pot-label .v { font: 800 18px var(--font-money); text-shadow: none; background: var(--brass-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bet-chip {
  height: 24px; padding: 0 9px 0 3px; gap: 5px; font: 700 13px var(--font-money); color: #fff;
  background: rgba(8,8,15,.74); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 4px 12px rgba(0,0,0,.45);
  transform: translate(-50%, calc(-100% - 6px));
}
.bet-chip::before { width: 18px; height: 18px; }
@media (orientation: landscape) and (max-height: 500px), (orientation: portrait) and (max-width: 500px) {
  .pot-label { height: 24px; padding: 0 9px 0 8px; gap: 5px; }
  .pot-label .v { font-size: 14px; }
  .pot-label::before { font-size: 8px; }
  .bet-chip { height: 19px; font-size: 11px; padding: 0 7px 0 2px; transform: translate(-50%, calc(-100% - 4px)); }
  .bet-chip::before { width: 14px; height: 14px; }
}

/* one-click tip button on the table, next to the dealer */
.dealer-seat .dealer-tag::after { content: none; }
.dealer-seat img, .dealer-seat .dealer-tag { cursor: default; }
.dealer-tip {
  position: absolute; left: calc(100% + 6px); bottom: 2px; pointer-events: auto; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 999px;
  font: 700 12px var(--font-ui); color: var(--on-brass); background: var(--brass-grad); border: 0;
  box-shadow: 0 6px 16px rgba(0,0,0,.5), 0 0 0 2px rgba(8,8,15,.6); transition: transform .12s, filter .15s, opacity .2s;
}
.dealer-tip b { font: 800 12px var(--font-money); }
.dealer-tip:hover { transform: translateY(-1px) scale(1.04); filter: brightness(1.08); }
.dealer-tip:active { transform: scale(.96); }
.dealer-tip.busy { opacity: .45; pointer-events: none; }
@media (orientation: landscape) and (max-height: 500px), (orientation: portrait) and (max-width: 500px) {
  .dealer-tip { height: 22px; padding: 0 8px; font-size: 10px; gap: 3px; }
  .dealer-tip b { font-size: 10px; }
}
.pot-label.side { transform: translate(0, -50%); }
/* tip button: centred right under the dealer's name, clear of the neighbours' plates */
.dealer-tip { left: 50%; top: 100%; bottom: auto; transform: translate(-50%, 5px); }
.dealer-tip:hover { transform: translate(-50%, 4px) scale(1.04); }
.dealer-tip:active { transform: translate(-50%, 5px) scale(.96); }

/* daily free drinks */
.free-inv { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.free-inv span { padding: 2px 8px; border-radius: 999px; font: 700 12px var(--font-ui); background: rgba(61,220,151,.12); border: 1px solid rgba(61,220,151,.35); color: #C9F7E3; }
.gift-opt.free { border-color: rgba(61,220,151,.55) !important; box-shadow: 0 0 0 1px rgba(61,220,151,.25), 0 0 18px rgba(61,220,151,.15); }
.free-tag { font: 800 11px var(--font-ui); letter-spacing: .06em; color: #05140D; background: var(--green); border-radius: 999px; padding: 2px 8px; }

/* between two hands: countdown + Stand up */
.between-hands {
  position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); z-index: 7;
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 999px;
  background: rgba(8,8,15,.85); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.5);
  font: 600 14px var(--font-ui); color: var(--text-2); white-space: nowrap;
}
.between-hands b { font: 800 18px var(--font-money); color: var(--brass-l); display: inline-block; min-width: 14px; text-align: center; }
@media (orientation: landscape) and (max-height: 500px), (orientation: portrait) and (max-width: 500px) {
  .between-hands { bottom: 80px; padding: 5px 5px 5px 12px; font-size: 12px; gap: 8px; }
  .between-hands b { font-size: 15px; }
}

/* light graphics mode (phones): no blur effects over the 3D table */
body.low-gfx .pot-label, body.low-gfx .between-hands, body.low-gfx .tcard__design, body.low-gfx .tcard__live,
body.low-gfx .toast, body.low-gfx .modal, body.low-gfx .fr-panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ===== private rooms ===== */
.codebox { display: inline-flex; gap: 6px; align-items: center; }
.codebox input::placeholder { letter-spacing: .02em; font-weight: 600; }
.codebox input { width: 130px; min-height: 36px; padding: 0 10px; text-transform: uppercase; letter-spacing: .18em; font: 700 14px var(--font-ui); text-align: center; }
.room-code { display: block; margin: 10px auto 14px; padding: 12px 18px; width: max-content; border-radius: 14px; font: 800 34px/1 var(--font-ui); letter-spacing: .32em; color: #ffd34a; background: rgba(0,0,0,.35); border: 1.5px dashed rgba(255,211,74,.6); }
.room-code.small { display: inline-block; margin: 0; padding: 6px 10px; font-size: 15px; letter-spacing: .22em; }

/* game settings panel (create a room) */
.modal-box.gs-box { padding: 0; overflow: hidden; max-width: 520px; }
.gs { display: flex; flex-direction: column; max-height: min(86dvh, 860px); background: linear-gradient(180deg, #1c1a1e, #131216); }
.gs__head { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 18px; background: linear-gradient(180deg, #f6ecd2, #e2d1a6); color: #2a2216; }
.gs__head b { font: 800 19px var(--font-display, var(--font-ui)); }
.gs__head span { font: 600 12px var(--font-ui); opacity: .75; }
.gs__body { overflow-y: auto; padding: 6px 18px 12px; }
.gs__lbl { margin-top: 10px; }
.gs__sec { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.gs__row { display: flex; align-items: center; gap: 12px; }
.gs__row .gs__t { flex: 1; }
.gs__row input[type=number] { width: 110px; text-align: center; }
.gs__t { font: 600 15px var(--font-ui); color: #f1ead8; margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gs__row .gs__t { margin-bottom: 0; }
.gs__t small { font-weight: 400; font-size: 12px; color: rgba(241,234,216,.55); width: 100%; }
.gs__val { margin-left: auto; color: #ffd34a; font-weight: 700; font-size: 14px; }
.gs__note { color: rgba(241,234,216,.6); font-size: 13px; }
.gs__seg { display: flex; margin: 12px 0 2px; padding: 4px; border-radius: 12px; background: rgba(0,0,0,.35); }
.gs__seg button { flex: 1; min-height: 38px; border: 0; border-radius: 9px; background: none; color: rgba(241,234,216,.7); font: 700 14px var(--font-ui); }
.gs__seg button.on { background: linear-gradient(180deg, #8f8467, #5f5641); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.gs__seats { display: flex; justify-content: space-around; }
.gs__seats button { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; color: rgba(241,234,216,.6); font: 600 14px var(--font-ui); cursor: pointer; }
.gs__seats i { width: 30px; height: 30px; border-radius: 50%; background: #3a3740; box-shadow: inset 0 2px 4px rgba(0,0,0,.6); position: relative; }
.gs__seats button.on { color: #fff; }
.gs__seats button.on i { background: #e9e4d6; }
.gs__seats button.on i::after { content: ''; position: absolute; left: 9px; top: 6px; width: 8px; height: 14px; border: solid #2a8a63; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.gs input[type=range] { width: 100%; accent-color: #6fc3c9; }
.gs__dual { position: relative; height: 26px; }
.gs__dual input[type=range] { position: absolute; inset: 0; pointer-events: none; background: none; }
.gs__dual input[type=range]::-webkit-slider-thumb { pointer-events: auto; }
.gs__dual input[type=range]::-moz-range-thumb { pointer-events: auto; }
.gs__ticks { display: flex; justify-content: space-between; font-size: 12px; color: rgba(241,234,216,.6); }
.gs__sw { position: relative; width: 50px; height: 28px; flex: none; margin: 0; }
.gs__sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.gs__sw i { position: absolute; inset: 0; border-radius: 99px; background: #2b2930; box-shadow: inset 0 2px 5px rgba(0,0,0,.7); transition: background .2s; }
.gs__sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, #fff, #cfcac0); box-shadow: 0 2px 4px rgba(0,0,0,.5); transition: transform .2s; }
.gs__sw input:checked + i { background: linear-gradient(180deg, #78c9cf, #3f9aa1); }
.gs__sw input:checked + i::after { transform: translateX(22px); }
.gs__sub { margin-top: 10px; transition: opacity .2s; }
.gs__sub.off { opacity: .35; pointer-events: none; }
.gs__hint { font-size: 12px; color: rgba(241,234,216,.55); margin: 12px 0 0; }
.gs__foot { display: flex; gap: 10px; padding: 12px 18px; background: rgba(0,0,0,.4); border-top: 1px solid rgba(255,255,255,.08); }
.gs__foot .btn { flex: 1; min-height: 46px; }

/* host panel */
.modal-box.rp-box { max-width: 860px; }
.rp__head { gap: 10px; margin-bottom: 12px; }
.rp__stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; }
.rp__stats div { padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.rp__stats span { display: block; font-size: 11px; color: var(--muted); }
.rp__stats b { font-size: 16px; }
.rp__row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rp__badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e8343c; color: #fff; font-size: 11px; }
.rp__acts { white-space: nowrap; }
.rp__acts .btn { margin-left: 4px; }
.rp__set { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.rp__set div { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); }
.rp__set span { color: var(--muted); }
@media (max-width: 640px) { .rp__stats { grid-template-columns: repeat(3, 1fr); } .rp__set { grid-template-columns: 1fr; } }

/* waiting for the host */
#roomWait { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(8,6,12,.82); backdrop-filter: blur(4px); }
#roomWait.hidden { display: none; }
.room-wait__card { text-align: center; padding: 28px 26px; max-width: 380px; border-radius: 22px; background: linear-gradient(180deg, rgba(40,16,28,.95), rgba(18,10,20,.96)); border: 1px solid rgba(255,214,120,.25); box-shadow: 0 30px 70px rgba(0,0,0,.6); }
.room-wait__ico { font-size: 46px; }
.room-wait__dots { display: flex; justify-content: center; gap: 8px; margin: 10px 0; }
.room-wait__dots i { width: 10px; height: 10px; border-radius: 50%; background: #ffd34a; animation: rwDot 1.2s infinite ease-in-out; }
.room-wait__dots i:nth-child(2) { animation-delay: .15s; } .room-wait__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes rwDot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1.1); } }
.strength.no-odds .strength__bar { display: none; }

/* Omaha section */
.game-tabs { margin: 4px 0 12px; }
.game-tabs small { font-size: 10px; padding: 1px 5px; border-radius: 6px; background: #e8343c; color: #fff; margin-left: 4px; letter-spacing: .04em; }
.omaha-tag { color: #ff8a5c; }
.omaha-info { display: flex; align-items: center; gap: 16px; padding: 14px 16px; margin-bottom: 14px; border-radius: 18px; background: linear-gradient(120deg, rgba(232,52,60,.16), rgba(255,138,92,.08) 60%, transparent); border: 1px solid rgba(255,138,92,.35); }
.omaha-info p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.omaha-info__cards { display: flex; flex: none; }
.omaha-info__cards .pcard { --c: 34px; }
.omaha-info__cards .pcard + .pcard { margin-left: -12px; }
.omaha-info__cards .pcard:nth-child(1) { transform: rotate(-12deg); } .omaha-info__cards .pcard:nth-child(2) { transform: rotate(-4deg); }
.omaha-info__cards .pcard:nth-child(3) { transform: rotate(4deg); } .omaha-info__cards .pcard:nth-child(4) { transform: rotate(12deg); }
.omaha-rules ol { padding-left: 20px; line-height: 1.55; }
.omaha-rules li { margin: 10px 0; }
.omaha-ex { margin: 8px 0; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.04); font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.omaha-row { display: inline-flex; gap: 2px; }
.pcard.mini { --c: 26px; }
@media (max-width: 560px) { .omaha-info { flex-wrap: wrap; } }

/* ===== support chat ===== */
#supportBtn { position: relative; }
.sp-panel { display: flex; flex-direction: column; }
.sp-quick { display: flex; gap: 6px; padding: 0 20px 10px; flex-wrap: wrap; }
.sp-msgs { flex: 1; overflow-y: auto; padding: 10px 16px; display: flex; flex-direction: column; gap: 8px; }
.sp-empty { margin: auto; text-align: center; color: var(--muted); font-size: 14px; padding: 20px; }
.sp-msg { max-width: 82%; padding: 8px 12px; border-radius: 16px; font-size: 14px; line-height: 1.4; word-wrap: break-word; }
.sp-msg.theirs { align-self: flex-start; background: rgba(255,255,255,.07); border-bottom-left-radius: 4px; }
.sp-msg.mine { align-self: flex-end; background: linear-gradient(180deg, rgba(240,180,41,.28), rgba(240,180,41,.18)); border: 1px solid rgba(255,211,74,.35); border-bottom-right-radius: 4px; }
.sp-who { font-size: 11px; font-weight: 700; color: #ffd34a; margin-bottom: 2px; }
.sp-text a { color: #ffd34a; text-decoration: underline; }
.sp-time { font-size: 10px; color: var(--muted); margin-top: 3px; text-align: right; }
.sp-img { display: block; max-width: 100%; max-height: 260px; border-radius: 10px; margin: 2px 0 4px; }
.sp-pic { display: flex; align-items: center; gap: 8px; padding: 6px 16px; }
.sp-pic.hidden { display: none; }
.sp-pic img { height: 60px; border-radius: 8px; }
.sp-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 16px 16px; border-top: 1px solid var(--line); }
.sp-form textarea { flex: 1; resize: none; min-height: 42px; max-height: 120px; padding: 10px 12px; font: inherit; }
.sp-attach { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.06); cursor: pointer; font-size: 20px; margin: 0; flex: none; }
.sp-form .btn { min-height: 42px; }
/* admin panel */
.sp-admin { display: grid; grid-template-columns: 300px 1fr; gap: 14px; min-height: 70vh; }
.sp-convs { overflow-y: auto; max-height: 78vh; }
.sp-conv { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; }
.sp-conv:hover, .sp-conv.active { background: rgba(255,255,255,.05); border-color: var(--line); }
.sp-conv .grow { min-width: 0; }
.sp-conv .last { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-conv .n { background: var(--danger, #e8343c); color: #fff; border-radius: 99px; padding: 0 7px; font-size: 12px; }
.sp-thread { display: flex; flex-direction: column; min-height: 70vh; max-height: 78vh; }
.sp-thread .sp-msgs { border: 1px solid var(--line); border-radius: 14px; }
@media (max-width: 800px) { .sp-admin { grid-template-columns: 1fr; } }

/* ===== Free money | Real money ===== */
.money-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.money-tabs button { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 12px 16px; border-radius: 18px; cursor: pointer;
  border: 1.5px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); font: inherit; }
.money-tabs button span { grid-row: span 2; font-size: 28px; }
.money-tabs button b { font: 800 17px var(--font-display, var(--font-ui)); }
.money-tabs button small { color: var(--muted); font-size: 12px; }
.money-tabs button.active[data-m="free"] { border-color: rgba(61,220,151,.65); background: linear-gradient(120deg, rgba(61,220,151,.16), rgba(61,220,151,.04)); box-shadow: 0 0 22px rgba(61,220,151,.15); }
.money-tabs button.active[data-m="free2"] { border-color: rgba(255,211,74,.75); background: linear-gradient(120deg, rgba(255,211,74,.2), rgba(255,211,74,.05)); box-shadow: 0 0 22px rgba(255,211,74,.18); }
.hero__chips.hidden { display: none; }
.real-pill__icon { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(180deg, #ffe27a, #d9a21b); color: #2a1a00; font: 900 11px var(--font-ui); }
.real-pill__icon.big { width: 38px; height: 38px; font-size: 20px; flex: none; }
.real-note { padding: 10px 14px; margin-bottom: 12px; border-radius: 14px; font-size: 13px; color: var(--muted); background: rgba(255,211,74,.07); border: 1px solid rgba(255,211,74,.3); }
.real-note b { color: #ffd34a; }
.tcard__real { position: absolute; left: 10px; bottom: 10px; z-index: 2; padding: 2px 8px; border-radius: 8px; font: 800 11px var(--font-ui); color: #2a1a00; background: linear-gradient(180deg, #ffe27a, #d9a21b); }
@media (max-width: 560px) { .money-tabs button { padding: 10px; } .money-tabs button small { display: none; } .real-pill .chips-pill__label { display: none; } }

/* admin text editing */
#textEditBtn.on { background: #ffd34a; color: #1b1206; box-shadow: 0 0 14px rgba(255,211,74,.6); }
body.text-edit *:not(#textEditBtn):hover { outline: 1px dashed rgba(255,211,74,.75); outline-offset: 1px; cursor: text !important; }
body.text-edit::after { content: '✏️ EDIT MODE — click any text'; position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 9999; padding: 6px 14px; border-radius: 12px; background: #ffd34a; color: #1b1206; font: 800 12px var(--font-ui); pointer-events: none; }

/* daily bonus: 7 days in a row */
.hero__gift .chip-ico { width: 34px; height: 34px; }
.bonus-days { display: flex; gap: 4px; margin-top: 6px; }
.bonus-days i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font: 700 11px var(--font-ui); font-style: normal; color: var(--muted); background: rgba(255,255,255,.06); }
.bonus-days i.done { background: rgba(61,220,151,.25); color: #3ddc97; }
.bonus-days i.now { background: linear-gradient(180deg, #ffe27a, #d9a21b); color: #2a1a00; box-shadow: 0 0 10px rgba(255,211,74,.5); }

/* =====================================================================
   PHONES (Android + iPhone, browser and installed app): everything fits the
   screen, nothing is cut off, text stays readable, notches / home bar respected
   ===================================================================== */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, canvas, video { max-width: 100%; }
@media (max-width: 760px) {
  #topbar {
    height: calc(var(--top-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top);
    padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); gap: 6px;
  }
  .brand { min-width: 0; flex: none; }
  .balance-box { gap: 6px; min-width: 0; flex: 0 1 auto; }
  .balance-box .icon-btn { width: 38px; height: 38px; border-radius: 12px; }
  .balance-box .icon-btn svg { width: 20px; height: 20px; }
  .balance-box .av-sm { width: 34px; height: 34px; }
  .chips-pill { height: 36px; padding: 0 10px 0 4px; gap: 6px; min-width: 0; }
  .chips-pill__icon { width: 24px; height: 24px; }
  .chips-pill b { font-size: 14px; white-space: nowrap; }
  main { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  /* section tabs */
  .money-tabs { gap: 8px; }
  .money-tabs button { padding: 10px 12px; column-gap: 8px; border-radius: 16px; min-width: 0; }
  .money-tabs button span { font-size: 22px; }
  .money-tabs button b { font-size: 15px; line-height: 1.15; }
  .money-tabs button small { font-size: 11px; }
  /* welcome card */
  .hero { display: block; padding: 18px 14px 14px; }
  .hero h1 { font-size: 26px; margin: 4px 0 12px; }
  .hero__chips { display: flex; flex-wrap: wrap; width: 100%; box-sizing: border-box; gap: 10px; padding: 10px; }
  .hero__chips > div { flex: 1 1 auto; min-width: 0; }
  .hero__chips .btn { flex: 1 1 40%; min-height: 40px; }
  .hero__bonus { flex-wrap: wrap; margin-top: 12px; padding: 14px; gap: 12px; }
  .hero__bonus .grow { flex: 1 1 60%; min-width: 0; }
  .hero__bonus #bonusBtn { flex: 1 1 100%; min-height: 44px; font-size: 16px; }
  .bonus-days { flex-wrap: wrap; }
  /* tables bar */
  .lobby-bar { gap: 8px; }
  .lobby-bar h2 { flex: 1 1 auto; font-size: 22px; }
  .codebox { display: flex; flex: 1 1 100%; order: 3; }
  .codebox input { flex: 1; width: auto; min-width: 0; min-height: 42px; }
  .codebox .btn { min-height: 42px; padding: 0 18px; }
  #newRoom { order: 1; margin-left: auto; min-height: 38px; }
  .quick { flex: 1 1 100%; order: 2; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .quick .btn { flex: none; min-height: 38px; }
  .table-grid, .tcard, .tcard__body { min-width: 0; max-width: 100%; }
  .tcard__top { flex-wrap: wrap; gap: 4px; }
  /* tap targets */
  .btn { min-height: 40px; }
  .btn.small { min-height: 36px; }
  /* modals sit above the home bar and never run off the screen */
  .modal-box { max-width: calc(100vw - 20px); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; }
  #toasts { left: 10px; right: 10px; top: calc(8px + env(safe-area-inset-top)); }
}
/* small phones (360-390 px): the brand keeps only its icon */
@media (max-width: 420px) {
  .brand { font-size: 0 !important; gap: 0; }
  .money-tabs button small { display: none; }
  .hero h1 { font-size: 24px; }
}
/* very narrow (320-350 px, iPhone SE 1st gen / small Androids) */
@media (max-width: 350px) {
  #friendsBtn { display: none; }
  .money-tabs button b { font-size: 13px; }
  .hero__chips .btn { flex-basis: 100%; }
}
/* phone held sideways outside the table (installed app, landscape): a compact one-line header */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --top-h: 52px; }
  #topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); gap: 6px; }
  .brand { font-size: 0 !important; gap: 0; }
  #topbar nav { flex: 1 1 auto; justify-content: center; min-width: 0; }
  #topbar nav a { padding: 7px 10px; font-size: 13px; }
  #topbar nav a span { display: none; }
  .chips-pill__label { display: none; }
  .balance-box .icon-btn { width: 38px; height: 38px; }
  main { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .hero { padding: 16px 18px; }
  .hero h1 { font-size: 24px; margin: 2px 0 10px; }
}
@media (max-width: 1000px) {
  /* grid columns may shrink below their content, so nothing pushes the page wider than the screen */
  .lobby { grid-template-columns: minmax(0, 1fr); }
  .lobby > div, .lobby-bar, #tables, #myRoom { min-width: 0; }
}
@media (max-width: 760px) {
  .quick { flex-wrap: wrap; overflow: visible; }
  .quick > span { flex: 1 1 100%; padding: 2px 6px 0; }
  .quick .btn { flex: 1 1 0; padding: 0 6px; }
  #newRoom { flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62%; }
}
@media (max-width: 760px) {
  /* long tables (history, ranking) scroll sideways inside their card, smaller and still readable */
  .scroll-x { -webkit-overflow-scrolling: touch; margin: 0 -6px; padding: 0 6px; }
  table.data { font-size: 13px; }
  table.data th { padding: 9px 7px; font-size: 11px; }
  table.data td { padding: 8px 7px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat .v { font-size: 22px; }
}
/* iPhone: no automatic text zoom when turning the phone, no page zoom when tapping into a text field */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  input, select, textarea { font-size: 16px !important; }
  .codebox input { font-size: 16px !important; letter-spacing: .12em; }
  * { -webkit-tap-highlight-color: transparent; }
}
/* panels (support, friends) and the upright table chat fit the screen above the keyboard */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) {
  .fr-panel { top: var(--vvt, 0px); bottom: auto; height: var(--vvh, 100dvh); }
  body.kb-open .fr-panel { padding-top: 0; }
  body.kb-open .sp-form, body.kb-open .chat form { padding-bottom: 6px; }
}
.side-chat.upright {
  position: fixed !important; left: 0; right: 0; top: var(--vvt, 0px); bottom: auto; height: var(--vvh, 100dvh); width: 100vw !important;
  z-index: 60; transform: none !important; display: flex; padding-top: env(safe-area-inset-top); background: #12121E; box-shadow: none;
}
.side-chat.upright:not(.open) { display: none; }
.side-chat.upright .chat { height: 100%; }
body.kb-open .side-chat.upright { padding-top: 0; }
/* section tabs on small phones: the icon centred next to the title, the title never cut */
@media (max-width: 420px) {
  .money-tabs button { grid-template-rows: 1fr; align-items: center; min-height: 60px; }
  .money-tabs button span { grid-row: 1; align-self: center; line-height: 1; }
  .money-tabs button b { align-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
}
/* private room bar: under the section tabs, the same in both sections */
/* seated at a table: the first thing in the lobby, in gold, so the way back to the table is never lost */
.seated-bar { margin: 0 0 14px; padding: 12px 14px; border: 1.5px solid rgba(255,211,74,.75); background: linear-gradient(120deg, rgba(255,211,74,.18), rgba(255,211,74,.05)); box-shadow: 0 0 22px rgba(255,211,74,.16); }
.seated-bar .grow { min-width: 200px; }
@media (max-width: 500px) { .seated-bar .btn { flex: 1; } }
.room-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 12px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(201,163,74,.14), rgba(139,108,255,.08)); border: 1px solid rgba(201,163,74,.45); }
.room-bar__t { font: 800 15px var(--font-display, var(--font-ui)); white-space: nowrap; }
.room-bar .codebox { flex: 1 1 220px; display: flex; }
.room-bar .codebox input { flex: 1; width: auto; min-width: 0; }
@media (max-width: 760px) {
  .room-bar { gap: 8px; padding: 10px; }
  .room-bar__t { flex: 1 1 auto; }
  .room-bar #newRoom { order: 2; margin-left: 0; max-width: none; }
  .room-bar .codebox { order: 3; flex: 1 1 100%; }
}
/* upright table chat: the top part of the screen, the table stays visible underneath (tap it to close);
   with the keyboard open it uses all the room above the keyboard */
.side-chat.upright { height: min(62dvh, var(--vvh, 100dvh)); border-bottom: 1px solid rgba(201,163,74,.45); box-shadow: 0 12px 40px rgba(0,0,0,.6) !important; border-radius: 0 0 20px 20px; }
body.kb-open .side-chat.upright { height: var(--vvh, 100dvh); border-radius: 0; }
/* phones: no double-tap zoom, no pinch zoom, and the table screen never scrolls or bounces away */
html, body { touch-action: manipulation; }
body.on-table { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body.on-table .table-view, body.on-table #scene3d, body.on-table #seatsLayer { touch-action: none; }
body.on-table .side-chat .chat-msgs { touch-action: pan-y; }
html { overscroll-behavior: none; }
/* sliders: a big area to touch, no page scrolling while sliding */
input[type=range] { touch-action: none; cursor: pointer; }
@media (pointer: coarse) {
  input[type=range] { min-height: 36px; }
  input[type=range]::-webkit-slider-thumb { width: 28px; height: 28px; }
}

/* private room: choose the table (room) */
.gs__rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 6px 0 4px; }
.gs__rooms button { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; border: 2px solid rgba(255,255,255,.12); background-size: cover; background-position: center; cursor: pointer; overflow: hidden; padding: 0; }
.gs__rooms button span { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px; font: 700 11px var(--font-ui); color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.8)); text-align: left; }
.gs__rooms button.on { border-color: #ffd34a; box-shadow: 0 0 0 2px rgba(255,211,74,.35), 0 0 18px rgba(255,211,74,.4); }

/* Lite graphics (slower phones): no blur and glow effects over the table */
body.lite-gfx .pot-label, body.lite-gfx .between-hands, body.lite-gfx .toast, body.lite-gfx .modal, body.lite-gfx .fr-panel, body.lite-gfx .zy .zbtn { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.lite-gfx .fx-puff, body.lite-gfx .fx-float { filter: none !important; text-shadow: 0 1px 2px #000 !important; }
.tcard__img:not([data-bg-on]) { background-color: #15121d; }
/* loading screen when a table opens */
#tableLoading { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #1d1430 0%, #0a0810 70%); transition: opacity .25s; }
#tableLoading.out { opacity: 0; pointer-events: none; }
#tableLoading .tl-box { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(340px, 80vw); text-align: center; }
#tableLoading b { font: 800 22px var(--font-display, var(--font-ui)); color: #fff; letter-spacing: .02em; }
#tableLoading span { font: 500 14px var(--font-ui); color: var(--muted, #a9a3b8); }
#tableLoading small { font: 700 13px var(--font-money, var(--font-ui)); color: #ffd34a; }
#tableLoading .tl-bar { width: 100%; height: 10px; margin-top: 10px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,211,74,.35); overflow: hidden; }
#tableLoading .tl-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #c9a34a, #ffd34a, #fff1b8); box-shadow: 0 0 14px rgba(255,211,74,.7); }
#tableLoading .tl-chip { width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; border: 6px dashed #ffd34a; background: radial-gradient(circle, #8a1020 0 52%, #ffd34a 53% 56%, #8a1020 57%); box-shadow: 0 6px 22px rgba(0,0,0,.6); animation: tlSpin 1.4s linear infinite; }
@keyframes tlSpin { to { rotate: 360deg; } }
/* phone held upright at a table: the table is turned sideways, so the windows over it (gifts, buy-in,
   room panel, confirmations) are turned the same way */
@media (orientation: portrait) and (max-width: 700px) {
  body.on-table #modal .modal-box { max-height: calc(100dvw - 24px); max-width: min(560px, calc(100dvh - 32px)); }
  body.on-table #modal .modal-box.wide { max-width: calc(100dvh - 32px); }
}
/* the layer for windows, panels and messages (see app.js): normally the whole screen, untouched;
   on an upright phone at a table it is turned sideways with the table */
#uiLayer { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
:where(#uiLayer > *) { pointer-events: auto; } /* no weight at all: closed shades and panels keep their own pointer-events: none */
#uiLayer > #toasts { pointer-events: none; }
#uiLayer > #toasts > * { pointer-events: auto; }
@media (orientation: portrait) and (max-width: 700px) {
  body.on-table #uiLayer { inset: auto; top: 0; left: 0; width: 100dvh; height: 100dvw; transform-origin: top left; transform: rotate(90deg) translateY(-100%); }
  /* inside the turned layer the panels fill its height (not the phone's) */
  body.on-table .fr-panel { top: 0 !important; height: 100% !important; width: min(400px, 60%); }
  body.on-table #toasts { top: 10px; right: 12px; left: auto; width: min(340px, 50%); }
  body.on-table #tableLoading .tl-box { width: min(340px, 60%); }
}

#myRoomBtn { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#myRoomBtn.hidden { display: none; }
@media (max-width: 760px) { #myRoomBtn { order: 1; max-width: 55%; } }

/* ---------- referral program: invitation landing page (/r/CODE) and "Invite friends" ---------- */
.landing { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 22px 26px; align-items: start;
  max-width: 1120px; margin: 0 auto; padding: 18px 18px 48px; }
.landing__top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand-mini { font: 800 20px var(--font-display, var(--font-ui)); color: var(--brass-l); letter-spacing: .02em; }
.landing__by { display: flex; align-items: center; gap: 12px; }
.landing__by img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--brass); box-shadow: 0 0 18px rgba(201,163,74,.35); }
.landing__by div { display: flex; flex-direction: column; line-height: 1.2; }
.landing__by b { font-size: 18px; color: var(--text); }
.landing h1 { font: 800 clamp(26px, 4.4vw, 44px)/1.12 var(--font-display, var(--font-ui)); margin: 16px 0 10px; color: var(--text); }
.landing__text { color: var(--text-2, var(--muted)); font-size: 16px; line-height: 1.55; white-space: pre-line; margin: 0; }
.landing__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-top: 18px; border-radius: 18px; overflow: hidden; background: #000;
  box-shadow: var(--shadow-2, 0 18px 40px rgba(0,0,0,.5)); border: 1px solid var(--line); }
.landing__frame.tall { aspect-ratio: 9 / 16; max-width: 340px; }
.landing__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.landing__video { display: block; width: 100%; max-height: 72vh; margin-top: 18px; border-radius: 18px; background: #000; border: 1px solid var(--line); }
.landing__form { position: sticky; top: 16px; }
.landing__form h3 { margin-top: 0; }
@media (max-width: 860px) {
  .landing { grid-template-columns: 1fr; padding: 14px 16px 40px; }
  .landing__form { position: static; }
}
.ref-head .row { align-items: center; }
.ref-code { font: 800 24px var(--font-money); letter-spacing: .1em; color: var(--brass-l); padding: 4px 14px; border-radius: 12px;
  border: 1.5px dashed rgba(201,163,74,.6); background: rgba(201,163,74,.08); }

/* ---------- terms and conditions (#/terms) ---------- */
.terms { max-width: 860px; margin: 0 auto; padding: 18px 16px 48px; }
.terms .landing__top { margin-bottom: 16px; }
.terms h1 { font: 800 clamp(26px, 4vw, 38px)/1.15 var(--font-display, var(--font-ui)); margin: 0 0 6px; }
.terms h3 { margin: 22px 0 6px; color: var(--brass-l); }
.terms p { line-height: 1.6; margin: 0 0 10px; color: var(--text-2, var(--text)); }

/* ---------- Telegram support button (Admin → Settings → Telegram support) ---------- */
.tg-fab { position: fixed; left: 18px; bottom: 18px; z-index: 60; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: #2aabee; box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 0 3px rgba(255,255,255,.12); transition: transform .15s ease; }
.tg-fab:hover { transform: scale(1.08); }
.tg-fab svg { width: 26px; height: 26px; fill: #fff; margin-left: -2px; }
body.on-table .tg-fab { display: none; } /* never over the table's buttons */
@media (max-width: 760px) { .tg-fab { bottom: 96px; left: 14px; width: 48px; height: 48px; } } /* above the bottom menu */

/* ---------- lobby top: section tabs + a small private-room box beside them ---------- */
.lobby-top { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 10px; margin: 0 0 14px; align-items: stretch; }
.lobby-top > * { min-width: 0; } /* never wider than the screen */
.lobby-top .money-tabs { margin: 0; }
.lobby-top .room-bar { margin: 0; padding: 8px 10px; gap: 6px 8px; flex-wrap: wrap; align-content: center; border-radius: 16px; }
.lobby-top .room-bar__t { flex: 1 1 auto; font-size: 13px; order: 1; }
.lobby-top .room-bar #myRoomBtn, .lobby-top .room-bar #newRoom { order: 2; margin-left: 0; min-height: 30px; padding: 0 10px; font-size: 12px; max-width: none; }
.lobby-top .room-bar .codebox { order: 3; flex: 1 1 100%; display: flex; gap: 6px; }
.lobby-top .room-bar .codebox input { flex: 1; width: auto; min-width: 0; min-height: 32px; font-size: 13px; letter-spacing: .12em; }
.lobby-top .room-bar .codebox .btn { min-height: 32px; padding: 0 12px; }
@media (max-width: 760px) {
  /* phones: the tabs, then one slim line: 🔒 [code] [Enter] [➕] */
  .lobby-top { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lobby-top .money-tabs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lobby-top .room-bar .codebox { min-width: 0; }
  .lobby-top .room-bar { flex-wrap: nowrap; padding: 6px 8px; gap: 6px; }
  .lobby-top .room-bar__t { flex: 0 0 auto; font-size: 16px; order: 0; }
  .lobby-top .rb-word { display: none; }
  .lobby-top .room-bar .codebox { order: 1; flex: 1 1 auto; }
  .lobby-top .room-bar .codebox input { min-height: 36px; font-size: 16px !important; }
  .lobby-top .room-bar .codebox .btn { min-height: 36px; }
  .lobby-top .room-bar #myRoomBtn, .lobby-top .room-bar #newRoom { order: 2; min-height: 36px; max-width: 34%; }
}

/* payment page: the player's private room chips */
.paid-chips { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 14px; margin: 4px 0 10px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.paid-chips b { font-size: 22px; color: var(--brass-l); }