/* ============================================================
   PokerSpot · базовые стили, на которые опирается модуль
   Это выжимка из дизайн-системы приложения: переменные, шрифты,
   карточки, кнопки, экраны. Если в приложении такие стили уже
   есть — этот файл не подключайте, а сверьте имена переменных.
   ============================================================ */
@font-face { font-family: 'Grato'; src: url('/assets/fonts/GratoGroteskCY-Super-Desktop.otf') format('opentype'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Grato'; src: url('/assets/fonts/GratoGroteskCY-Black-Desktop.otf') format('opentype'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Grato'; src: url('/assets/fonts/GratoGroteskCY-Medium-Desktop.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'InterPS'; src: url('/assets/fonts/Inter-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'InterPS'; src: url('/assets/fonts/Inter-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'InterPS'; src: url('/assets/fonts/Inter-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
:root {
  --bg: #0b1220;
  --bg-deep: #070c16;
  --card: #0e1930;
  --card-2: #101f3a;
  --line: rgba(70, 122, 231, 0.55);
  --line-dim: rgba(70, 122, 231, 0.25);
  --blue: #0033ff;
  --blue-soft: #3b82f6;
  --blue-hi: #5ea1ff;
  --yellow: #ffcd00;
  --green: #22c55e;
  --green-bg: #0d2b1c;
  --red: #c51a1a;
  --text: #f4f7fc;
  --dim: #8b97ab;
  --dim-2: #5b6779;
  --radius: 20px;
  --nav-h: 92px;
  --grato: 'Grato', 'InterPS', sans-serif;
  --inter: 'InterPS', 'Inter', system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--inter);
  overflow-x: hidden;
  min-height: 100dvh;
}
.hidden { display: none !important; }
.screen {
  min-height: 100dvh;
  padding: 24px 20px calc(var(--nav-h) + 28px);
  max-width: 520px;
  margin: 0 auto;
  position: relative;
}
.screen--auth { padding-bottom: 40px; display: flex; flex-direction: column; }
.h-page {
  font-family: var(--grato); font-weight: 800; font-size: 34px;
  letter-spacing: 0.01em; margin-bottom: 18px;
}
.card {
  background: linear-gradient(160deg, var(--card) 0%, #0c1526 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
  overflow: hidden;
  will-change: transform;
}
.card + .card { margin-top: 14px; }
.card--tap { cursor: pointer; user-select: none; width: 100%; text-align: left; color: var(--text); display: block; }
.card--green { background: linear-gradient(160deg, #0e3320 0%, #0a2417 100%); border-color: rgba(46, 204, 113, 0.55); }
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 13px; letter-spacing: 0.06em;
  padding: 7px 14px; border-radius: 999px;
}
.badge--yellow { background: var(--yellow); color: #131313; }
.badge--green { background: rgba(34, 197, 94, 0.14); color: #35e07c; border: 1px solid rgba(34, 197, 94, 0.5); text-transform: uppercase; }
.badge--grey { background: rgba(139, 151, 171, 0.15); color: var(--dim); border: 1px solid rgba(139, 151, 171, 0.35); text-transform: uppercase; }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 17px 22px;
  border-radius: 18px;
  font-size: 17px; font-weight: 700;
  position: relative; overflow: hidden;
  transition: filter 0.2s;
  will-change: transform;
}
.btn--primary { background: linear-gradient(90deg, #10298f 0%, #3b82f6 100%); color: #fff; }
.btn--white { background: #eef1f6; color: #10131a; }
.btn--ghost { background: transparent; color: var(--dim); font-weight: 500; }
.btn--outline { background: transparent; border: 1px solid var(--line); color: var(--text); }
.btn:disabled { opacity: 0.45; filter: grayscale(0.4); cursor: default; }
.btn .ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, 0.35); transform: scale(0);
}
.tabs {
  position: relative; display: flex;
  background: rgba(18, 28, 48, 0.8);
  border: 1px solid rgba(70, 122, 231, 0.2);
  border-radius: 18px; padding: 5px;
  margin-bottom: 18px;
}
.tabs .tab {
  flex: 1; padding: 13px 10px; text-align: center;
  font-size: 15.5px; font-weight: 600; color: var(--dim);
  position: relative; z-index: 1; border-radius: 14px;
  transition: color 0.25s;
}
.tabs .tab.active { color: var(--text); }
.tabs .tab-pill {
  position: absolute; top: 5px; bottom: 5px; left: 0;
  background: rgba(37, 66, 126, 0.55);
  border: 1px solid var(--line);
  border-radius: 14px; z-index: 0;
}
.screen--auth form, .screen--auth .auth-actions { position: relative; z-index: 1; }
.card-art { position: relative; min-height: 168px; display: flex; align-items: flex-start; padding: 22px; }
.card-art .art-title { font-family: var(--grato); font-weight: 800; font-size: 30px; line-height: 1.05; position: relative; z-index: 1; }
.card-art .art-sub { position: absolute; bottom: 18px; left: 22px; font-size: 19px; font-weight: 600; z-index: 1; }
.card-art img.art {
  position: absolute; right: -6px; bottom: -8px; height: 105%;
  max-width: 72%; object-fit: contain; object-position: right bottom;
  pointer-events: none;
}
.back-fab {
  position: absolute; top: 18px; left: 16px; z-index: 5;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(24, 39, 70, 0.75); border: 1px solid rgba(90, 110, 145, 0.4);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}
.screen-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; }
.screen-top .h-page { margin-bottom: 0; }
.screen-top .with-back { display: flex; align-items: center; gap: 14px; }
.pos-wheel .table-oval {
  position: absolute; inset: 13%;
  border: 2px solid var(--line); border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #12305d 0%, #0c1c38 70%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 4px; text-align: center;
}
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(3, 6, 12, 0.6); backdrop-filter: blur(4px);
  opacity: 0;
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 81;
  max-width: 520px; margin: 0 auto;
  background: #0f1e3d;
  border: 1px solid var(--line); border-bottom: none;
  border-radius: 26px 26px 0 0;
  padding: 14px 20px calc(env(safe-area-inset-bottom, 0px) + 26px);
  transform: translateY(105%);
  max-height: 86dvh; overflow-y: auto;
}
.sheet .grab { width: 64px; height: 5px; border-radius: 3px; background: rgba(139, 151, 171, 0.4); margin: 0 auto 14px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 18px; }
.sheet-head h2 { font-family: var(--grato); font-weight: 800; font-size: 25px; }
.sheet-close {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(139, 151, 171, 0.15); color: #dfe6ef;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.toast {
  background: #14264a; border: 1px solid var(--line);
  color: var(--text); font-size: 15px; font-weight: 600;
  border-radius: 14px; padding: 13px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  max-width: 86vw;
}
.toast--err { border-color: rgba(224, 82, 82, 0.7); background: #3a1520; }