* { box-sizing: border-box; }

:root{
  color-scheme: dark;
  --top-safe: env(safe-area-inset-top, 0px);
  --logout-top: 12px;
  --logout-right: 12px;
  --logout-height: 36px;
  --logout-width: 108px;
  --logout-gap: 12px;
  --top-ui-clearance: calc(var(--top-safe) + var(--logout-top) + var(--logout-height) + var(--logout-gap));
  --top-ui-clearance-extra: 0px;

  --bg-deep:#070b0d;
  --bg-mid:#0b1416;

  --felt-dark:#0b2a1d;
  --felt-mid:#0f3a27;
  --felt-edge:#153f2c;
  --felt-ring: rgba(10, 24, 18, 0.9);

  --slot-bg: rgba(9, 16, 18, 0.86);
  --slot-border: rgba(68, 108, 93, 0.6);

  --text-dim:#a9b8b3;
  --text-soft:#d7e2dd;

  /* 4-color deck */
  --h-red:#e53935;
  --d-blue:#1e88e5;
  --s-black:#111111;
  --c-green:#2e7d32;
}

html, body{
  height: 100%;
  overflow: hidden;
  background: #0b0b0c;
}

body{
  margin:0;
  min-height:100vh;
  font-family: "Space Grotesk","Manrope","Segoe UI",sans-serif;
  color:#f1f4f3;
  background:
    radial-gradient(1200px 700px at 85% -20%, rgba(37, 140, 244, 0.16), transparent 60%),
    radial-gradient(900px 500px at 15% 0%, rgba(36, 194, 151, 0.12), transparent 60%),
    #0b0b0c;
}

body::before{
  content:none;
}

.app{
  max-width:none;
  margin:0;
  height: 100vh;
  height: 100dvh;
  padding:150px 24px 40px 304px;
  background: transparent;
  overflow: hidden;
}

.logout-floating{
  position: fixed;
  top: calc(var(--top-safe) + var(--logout-top));
  right: calc(env(safe-area-inset-right, 0px) + var(--logout-right));
  z-index: 120;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
  border-radius: 999px;
  min-width: var(--logout-width);
  height: var(--logout-height);
  padding: 0 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.logout-floating:hover{
  background: rgba(255,255,255,0.14);
}

.page-header{
  text-align:center;
  margin-bottom:28px;
}

.page-header h1{
  margin:0 0 6px;
  font-size: clamp(26px, 4vw, 36px);
  letter-spacing:1px;
}

.subtitle{
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:2px;
  color: var(--text-dim);
}

.main{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  justify-content:center;
  gap:26px;
  margin-top: 18px; /* (6) стол ниже от заголовка */
}

.trainer-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:26px;
  flex:1;
}

.play-area{
  position: relative;
}

.filters-panel{
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  padding: 14px 12px;
  overflow-y: auto;
  background: #0f0f10;
  border-right: 1px solid #222;
  border-radius: 0;
  box-shadow: none;
  z-index: 100;
}

.filter-title,
.filters-panel h2,
.filters h3,
.filters .section-title{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: none;
  color: rgba(255,255,255,0.88);
  margin: 0 0 10px;
}

.filter-block{ padding: 14px 0; }
.filter-block + .filter-block{
  border-top: 1px solid rgba(255,255,255,0.10);
  margin-top: 10px;
  padding-top: 14px;
}
.filters-panel.filters-disabled .filter-block{
  pointer-events: none;
  opacity: 0.45;
}

.filter-help{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  margin-left:6px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  color: rgba(255,255,255,0.70);
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  transform: translateY(-1px);
}

.filter-help:hover{
  color: rgba(255,255,255,0.92);
  border-color: rgba(76,196,148,0.55);
}

.seg-row{
  display:flex;
  gap:10px;
}

.seg{ position:relative; flex: 1 1 0; }
.seg > input{ position:absolute; opacity:0; pointer-events:none; }
.seg > span{
  display:flex; align-items:center; justify-content:center;
  height:40px;
  border-radius:10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.88);
  font-weight: 800;
  cursor:pointer;
  user-select:none;
}

.seg > input:checked + span{
  background: rgba(76, 196, 148, 0.22);
  border-color: rgba(76, 196, 148, 0.75);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.45),
    0 0 0 1px rgba(76, 196, 148, 0.35) inset,
    0 0 18px rgba(76, 196, 148, 0.18);
  color: rgba(255,255,255,0.98);
}

.seg > input:disabled + span{
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

.position-filter{
  display:grid;
  gap:8px;
  font-size:12px;
  letter-spacing:1px;
}

.position-filter label{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}

.position-filter input[type="checkbox"]{
  accent-color:#46ff9a;
}

.pill-grid--positions{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  margin:10px 0 14px;
}

.pill-grid--positions .pill{ position:relative; display:block; }
.pill-grid--positions .pill > input{ position:absolute; opacity:0; pointer-events:none; }
.pill-grid--positions .pill > span{
  display:flex; align-items:center; justify-content:center;
  height:42px;
  border-radius:10px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  font-weight: 800;
  text-transform: uppercase;
  cursor:pointer;
}

.pill-grid--positions .pill > input:checked + span{
  background: rgba(76, 196, 148, 0.22);
  border-color: rgba(76, 196, 148, 0.75);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.45),
    0 0 0 1px rgba(76, 196, 148, 0.35) inset,
    0 0 18px rgba(76, 196, 148, 0.18);
  color: rgba(255,255,255,0.98);
}

.pill-grid--positions .pill > span:hover{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.18);
}

.pill-grid--positions .pill-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  height:42px;
  border-radius:10px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  font-weight: 800;
  text-transform: uppercase;
  cursor:pointer;
}

.pill-grid--positions .pill-btn:hover{
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.18);
}

.pill-grid--positions .pill-btn.is-active{
  background: rgba(76, 196, 148, 0.22);
  border-color: rgba(76, 196, 148, 0.75);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.45),
    0 0 0 1px rgba(76, 196, 148, 0.35) inset,
    0 0 18px rgba(76, 196, 148, 0.18);
  color: rgba(255,255,255,0.98);
}

.pill-grid--positions .pill-btn:disabled{
  cursor:not-allowed;
}

.pill-grid--spot-types .pill > span{
  text-transform: none;
}

.pill-grid--spot-types{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stack-filter{
  display:grid;
  gap:8px;
  font-size:12px;
  letter-spacing:1px;
  margin-bottom: 12px;
}

.stack-filter label{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}

.stack-filter input[type="checkbox"]{
  accent-color:#46ff9a;
}

.toggle{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:1px;
  cursor:pointer;
}

.toggle input[type="checkbox"]{
  accent-color:#46ff9a;
}

.is-locked{
  opacity: 0.55;
  cursor: not-allowed;
}

.switch{
  position: relative;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  letter-spacing:1px;
  cursor:pointer;
  user-select:none;
}

.switch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.switch-track{
  position:relative;
  width:42px;
  height:24px;
  border-radius:999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  transition: background 120ms ease, border-color 120ms ease;
}

.switch-track::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background: rgba(255,255,255,0.82);
  box-shadow: 0 4px 8px rgba(0,0,0,0.35);
  transition: transform 120ms ease;
}

.switch input:checked + .switch-track{
  background: rgba(76, 196, 148, 0.35);
  border-color: rgba(76, 196, 148, 0.7);
}

.switch input:checked + .switch-track::after{
  transform: translateX(18px);
}

.switch-label{
  color: rgba(255,255,255,0.9);
  font-weight: 800;
}

.table-wrap{ width:100%; }

.table-area{
  position: relative;
  width: min(900px, 100%);
  margin: 0 auto;
}

.table-oval{
  position:relative;
  width:100%;
  height:460px;
  margin:0 auto;
  border-radius: 50% / 45%;
  background: radial-gradient(circle at 50% 45%, var(--felt-mid), var(--felt-dark) 60%);
  border:2px solid var(--felt-edge);
  box-shadow:
    0 22px 50px rgba(0,0,0,0.5),
    inset 0 0 0 18px var(--felt-ring);
  overflow:visible;
}

.table-oval::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 0.06), transparent 55%),
    radial-gradient(circle at 65% 55%, rgba(0, 0, 0, 0.35), transparent 65%),
    repeating-linear-gradient(25deg, rgba(226, 0, 0, 0.02) 0 1px, transparent 1px 4px);
  opacity:.5;
  pointer-events:none;
}

/* =========================
   SEATS (позиции ставит JS)
   ========================= */
.seat{
  position:absolute;
  width:210px;
  height:70px;
  padding:0;
  text-align:center;
  background: transparent;
  border:none;
  z-index: 6;
  overflow: visible;

  left:50%;
  top:50%;
  transform: translate(-50%, -50%);

  box-shadow: none;
  display:flex;
  align-items:center;
  justify-content:center;
}

.seat.villain-allin{
  position:absolute;
}

.seat.villain-allin::before,
.seat.villain-allin::after{
  content:none !important;
  display:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.seat.villain-allin .player-plaque{
  position:relative;
  z-index:3;
  border-color: rgba(255,255,255,0.18) !important;
  box-shadow:
    0 0 12px rgba(255, 60, 60, 0.80),
    0 0 24px rgba(255, 60, 60, 0.50),
    0 0 41px rgba(255, 60, 60, 0.30) !important;
}

.seat.villain-allin .player-plaque,
.seat.villain-allin .player-plaque::before,
.seat.villain-allin .player-plaque::after{
  background-clip: padding-box;
}

.allin-badge{
  position:absolute;
  left:50%;
  top: auto !important;
  bottom: -19px !important;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 999px;
  background: #e44b4b;
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 10px 16px rgba(0,0,0,0.35);
  z-index: 2;
  white-space: nowrap;
  pointer-events: none;
}

.seat {
  position: absolute;
  overflow: visible;
}

.seat .seat-back-cards {
  position: absolute;
  left: 50%;
  top: -48px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 1;
  pointer-events: none;
}

.seat .seat-back-card {
  width: 62px;
  height: 86px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.24);
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.28) 0px,
      rgba(255,255,255,.28) 2px,
      rgba(130,140,155,.42) 2px,
      rgba(130,140,155,.42) 6px
    ),
    #6c7480;
  opacity: 1;
  box-shadow: none;
}

.seat .player-plaque {
  position: relative;
  z-index: 2;
}

/* =========================
   SESSION STATS
   ========================= */
.session-stats{
  position:absolute;
  top: -76px;
  left: 124px;
  min-width: 160px;
  padding: 14px 16px 12px;
  border-radius: 14px;
  background: rgba(9, 16, 18, 0.78);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:
    0 16px 30px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  text-align:center;
  z-index: 60;
}

.session-stats__mode{
  font-size: 10px;
  letter-spacing: 1.4px;
  font-weight: 800;
  color: rgba(76, 196, 148, 0.85);
  margin-bottom: 6px;
}

.session-stats__ev{
  font-size: 28px;
  font-weight: 900;
  color: #ff6b6b;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

.session-stats__ratio{
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:6px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}

.session-stats__ratio #session-mistakes{
  color: #ff7b7b;
}

.session-stats__ratio #session-actions{
  color: rgba(255,255,255,0.85);
}

.session-stats__slash{
  color: rgba(255,255,255,0.5);
}

.session-stats__more{
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.8);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
}

#session-more{
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
}

.session-stats__more:hover{
  color: rgba(255,255,255,0.95);
}

.seat.is-hidden{
  display:none;
}

.seat-utg,
.seat-mp,
.seat-co,
.seat-btn,
.seat-sb,
.seat-bb {
  position: absolute;
  overflow: visible;
}

.seat-label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.seat-stack{
  margin-top: 6px;
  font-size:12px;
  color:#c8d5d0;
  letter-spacing:.5px;
}

.player-plaque{
  position: relative;
  width: 140px;
  height: 60px;
  border-radius: 14px;
  box-sizing:border-box;
  background: #555860;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 18px rgba(0,0,0,0.28);
  backdrop-filter: blur(6px);
  z-index: 20;
}

.plq-main{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width:100%;
  text-align:center;
  pointer-events:none;
}

.plq-badges{
  position:absolute;
  top:6px;
  right:-4px;
  display:flex;
  gap:8px;
  pointer-events: none;
}

.plq-badge{
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.plq-badge--btn{
  color:#fff;
  background: radial-gradient(circle at 30% 30%, #d32f2f 0%, #d32f2f 100%);
}

.plq-badge--sb,
.plq-badge--bb{
  background: radial-gradient(circle at 30% 30%, #ffe9a6 0%, #f0d37a 45%, #caa84c 100%);
  color:#14110a;
}

.plq-badge.is-on{ display:inline-flex; }

/* left column */
.player-plaque__pos{
  width:100%;
  text-align:center;
  line-height:1.05;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  white-space: nowrap;
  margin-bottom:3px;
}

/* right column */
.player-plaque__stack{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap: 5px;
  width:100%;
  text-align:center;
  line-height:1.05;
  white-space: nowrap;
}

.player-plaque__stack .stack-num{
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
}

.player-plaque__stack .stack-unit{
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.72);
  text-transform: lowercase;
}

.player-plaque__divider{ display:none; }

.seat .player-plaque{
  box-shadow: 0 8px 14px rgba(0,0,0,0.25);
}


.seat-hero{
  font-weight: 800;
  border-color: rgba(240, 211, 122, 0.7);
  box-shadow: 0 12px 24px rgba(0,0,0,0.35);
}

.hero-tag{
  display:inline-block;
  padding:2px 7px;
  border-radius:999px;
  background: rgba(240, 211, 122, 0.18);
  color:#f0d37a;
  font-size:9px;
  letter-spacing: 1px;
  display:none;
}

.seat-utg .player-plaque{
  box-shadow:none !important;
  outline:none !important;
  filter:none !important;
}

/* =========================
   TABLE TOKENS (позиции ставит JS)
   ========================= */
.table-token{
  position:absolute;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-weight: 900;
  letter-spacing: .3px;
  z-index: 20;

  box-shadow:
    0 12px 20px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.25);
}

.table-token.is-hidden{
  display:none !important;
}

.token-btn{
  width:34px;
  height:34px;
  font-size:10px;
  color:#ffffff;
  background: radial-gradient(circle at 30% 30%, #ff8b8b 0%, #e53935 45%, #a01818 100%);
}

.token-sb,
.token-bb{
  width:28px;
  height:28px;
  font-size:11px;
  color:#14110a;
  background: radial-gradient(circle at 30% 30%, #ffe9a6 0%, #f0d37a 45%, #caa84c 100%);
}

.token-btn,
.token-sb,
.token-bb{
  display:none !important;
}

/* Ensure table children can be layered predictably */
.table-oval { position: relative; }

.table-oval{
  --tok-gap: 4px;
  --tok-gap-hero: 18px;
  --tok-gap-small: var(--tok-gap);
}

.token-btn,
.token-sb,
.token-bb {
  position: absolute;
  z-index: 20;
  pointer-events: none;
}

.table-oval[data-hero-pos="BTN"] .token-btn{
  display: grid;
  visibility: visible;
  opacity: 1;
}

/* Hero cards on top */
#hero-cards {
  position: absolute;
  z-index: 30;
  display:flex;
  justify-content:center;
  gap:10px;
}

/* If you have a hero label/panel element, keep it above tokens too */
.hero-panel,
#hero-panel,
.hero-seat,
#hero-seat {
  position: absolute;
  z-index: 25;
}

/* =========================
   HERO CARDS (позицию ставит JS)
   ========================= */
.hero-cards{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: 170px;
  height: auto;
  z-index: 7;
  pointer-events:none;
}

.pf-card{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width: 78px;
  height: auto;
  aspect-ratio: 92 / 132;
  border-radius: 14px;
  background: #1b1b1c;
  border: 1px solid rgba(255,255,255,0.2);
  color: #ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    0 14px 26px rgba(0,0,0,0.45),
    0 2px 6px rgba(0,0,0,0.25);
  overflow:hidden;
}

.pf-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120px 150px at 30% 20%, rgba(255,255,255,0.60), rgba(255,255,255,0) 60%),
    radial-gradient(200px 200px at 60% 70%, rgba(0,0,0,0.06), rgba(0,0,0,0) 55%);
  pointer-events:none;
  opacity: 0.14;
}

.pf-card--second{
  left: 0;
  top: 0;
}

#card1{ left:0; top:0; }

.pf-rank{
  font-weight: 900;
  font-size: clamp(52px, 10vw, 86px);
  line-height: 1;
  letter-spacing: -1px;
}

.pf-suit{
  font-size: 18px;
  font-weight: 900;
}

.pf-card-center{
  position:absolute;
  left:50%;
  top:58%;
  transform: translate(-50%, -50%);
  font-size: 56px;
  font-weight: 900;
  opacity: .95;
}

.pf-card .pf-card-rank{
  font-size: clamp(52px, 10vw, 86px);
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
}

.pf-card .pf-card-rank,
.pf-card [data-role="rank"]{
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  transform: none !important;
  text-align: center;
  line-height: 1;
}

.pf-card-corner,
.pf-card-suit,
.pf-card-suit-big,
.pf-card-suit-small,
.pf-card-suit-mini,
.pf-card-suit-corner,
.pf-suit,
.pf-card-center,
.mini-card__suit{
  display:none !important;
}

.pf-card .pf-rank,
.pf-card .pf-suit,
.pf-card .pf-card-center{
  color: #ffffff;
}

/* suit backgrounds */
.pf-card[data-suit="h"]{ background: #d32f2f; }
.pf-card[data-suit="d"]{ background: #1976d2; }
.pf-card[data-suit="s"]{ background: #1b1b1c; }
.pf-card[data-suit="c"]{ background: #2e7d32; }

/* =========================
   ACTIONS (big, 3D)
   ========================= */
.action-panel{
  width:100%;
  display:flex;
  justify-content:center;
  margin-top: 6px;
}

.actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  transform: translate(var(--ax, 0px), var(--ay, 0px));
}

.actions-main{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:center;
}

.pf-btn{
  position:relative;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;

  height: 64px;
  min-width: 300px;
  padding: 0 28px;

  font-weight: 900;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;

  cursor:pointer;

  box-shadow:
    0 18px 34px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -12px 20px rgba(0,0,0,0.18);

  transition: transform 90ms ease, filter 120ms ease, box-shadow 120ms ease;
}

.pf-btn:hover{ filter: brightness(1.06); }

.pf-btn:active{
  transform: translateY(2px);
  box-shadow:
    0 12px 24px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -10px 16px rgba(0,0,0,0.22);
}

.pf-btn::after{
  content:"";
  position:absolute;
  left: 20px;
  right: 20px;
  bottom: 10px;
  height: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.20);
  filter: blur(5px);
  pointer-events:none;
}

.pf-btn--push{
  background: linear-gradient(180deg, #2ecc71 0%, #1f9b55 55%, #167a42 100%);
  color: rgba(255,255,255,0.92);
}

.pf-btn--fold{
  background: linear-gradient(180deg, #e05a4e 0%, #c7443b 55%, #8f2b22 100%);
  color: rgba(255,255,255,0.92);
}

.pf-btn--push,
.pf-btn--fold{
  min-width: 270px;
}


.pf-btn--next{
  height: 46px;
  min-width: 240px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 1px;

  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  color: rgba(255,255,255,0.86);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 12px 22px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

.pf-btn--range{
  height: 42px;
  min-width: 200px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 1.6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08));
  color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 10px 18px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.2);
}

#btn-next{
  margin-top: 50px;
}

.pf-kbd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left: 10px;
  height: 22px;
  min-width: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.95);
}

/* =========================
   HUD BELOW BUTTONS (3)
   ========================= */
.hud-below{
  margin-top: 2px;
  text-align:center;
  user-select:none;
}

.scenario-error-banner{
  margin: 0 auto 10px;
  max-width: 560px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 107, 107, 0.55);
  background: rgba(140, 28, 28, 0.45);
  color: #ffdede;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: none;
}

.hud-result{
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: rgba(255,255,255,0.82);
  text-shadow: 0 10px 24px rgba(0,0,0,0.55);
}

.hud-below.is-correct .hud-result{ color: #46ff9a; }
.hud-below.is-wrong  .hud-result{ color: #ff6b6b; }

.hud-row{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.hud-chip{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.88);
  font-size: 12px;
  letter-spacing: .4px;
}

.ev-pos{ color:#46ff9a; font-weight:900; }
.ev-neg{ color:#ff6b6b; font-weight:900; }

.hud-debug{
  margin-top: 10px;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hud-below.is-close .hud-result{ color: #ffd166; }

/* =========================
   MISTAKES PANEL
   ========================= */
.mistakes-toggle{
  position:fixed;
  right: 22px;
  top: 140px;
  z-index: 60;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(8, 18, 18, 0.88);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.9);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor:pointer;
  box-shadow: 0 12px 22px rgba(0,0,0,0.5);
}

.mistakes-count{
  display:grid;
  place-items:center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: #ff6b6b;
  color: #0c0c0c;
}

.mistakes-panel{
  position:fixed;
  inset:0;
  display:none;
  align-items:flex-start;
  justify-content:flex-end;
  padding: calc(var(--top-ui-clearance) + var(--top-ui-clearance-extra)) 24px 16px;
  background: rgba(4,8,8,0.7);
  backdrop-filter: blur(6px);
  z-index: 70;
}

.mistakes-panel.is-open{ display:flex; }

.mistakes-panel__content{
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100dvh - var(--top-ui-clearance) - var(--top-ui-clearance-extra) - 16px);
  display:flex;
  flex-direction:column;
  gap: 16px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: rgba(9, 16, 18, 0.96);
  border: 1px solid rgba(68, 108, 93, 0.5);
  box-shadow: 0 22px 44px rgba(0,0,0,0.55);
  overflow-x: hidden;
}

.mistakes-panel__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.mistakes-panel__actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

.mistakes-panel__header h3{
  margin:0;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.mistakes-drill{
  background: #2c2f33;
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor:pointer;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}

.mistakes-drill.is-active{
  background: #16c784;
  border-color: rgba(22,199,132,0.9);
  color: #06110b;
  box-shadow: 0 0 0 2px rgba(22,199,132,0.25), 0 10px 24px rgba(0,0,0,0.45);
}

.mistakes-drill:disabled{
  cursor:not-allowed;
  opacity: 0.4;
  background: rgba(24, 40, 34, 0.3);
  border-color: rgba(63, 150, 110, 0.3);
  box-shadow: none;
}

.mistakes-close{
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor:pointer;
}

.mistakes-list{
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap: 12px;
  padding-right: 6px;
}

.mistakes-header{
  position: sticky;
  top: 0;
  z-index: 5;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  column-gap: 18px;
  min-width: 0;
  background: rgba(10,14,16,0.92);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 8px 12px;
  text-transform: uppercase;
  font-size: 12px;
  opacity: 0.75;
}

.mistakes-empty{
  padding: 18px 10px;
  text-align:center;
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.mistake-row{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  column-gap: 18px;
  min-width: 0;
  padding: 12px;
  border-radius: 12px;
  background: rgba(5, 10, 12, 0.75);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.78);
}

.mini-hand{
  display:flex;
  gap: 6px;
}

.mini-card{
  width: 44px;
  height: 60px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
  position: relative;
  color: #ffffff;
  font-weight: 900;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mini-card__rank{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  font-size: 38px;
  line-height: 1;
}

.mini-card__suit{
  display: none !important;
}

.mini-card.suit-h{ background: var(--h-red); }
.mini-card.suit-d{ background: var(--d-blue); }
.mini-card.suit-s{ background: var(--s-black); }
.mini-card.suit-c{ background: var(--c-green); }

.mistake-meta{
  display:flex;
  flex-direction:column;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.78);
}

.mistake-meta strong{
  color: #ffffff;
  font-weight: 800;
}

.mistake-line{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

.mistake-pill{
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.mistakes-header > *,
.mistake-row > *{
  min-width: 0;
}

.mistakes-header div:not(:last-child),
.mistake-row div:not(:last-child){
  border-right: 1px solid rgba(255,255,255,0.08);
  padding-right: 18px;
}

.mistake-cell--num{
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.mistake-cell--hand{
  display:flex;
  align-items:center;
}

.mistake-action--bad{
  color: #ff5a5a;
  font-weight: 800;
}

.mistake-action--good{
  color: #55e07a;
  font-weight: 800;
}

.mistake-action--muted{
  color: rgba(255,255,255,0.45);
}

.mistake-ev--neg{
  color:#ff5a5a;
  font-weight:800;
}

.mistakes-header > :first-child,
.mistake-row > :first-child{
  text-align: left;
  justify-self: start;
}

.mistakes-header > :nth-child(n+2),
.mistake-row > :nth-child(n+2){
  text-align: center;
  justify-self: center;
}

.assessment-header{
  grid-template-columns: repeat(3, 1fr);
}

.assessment-row{
  grid-template-columns: repeat(3, 1fr);
}

.assessment-header > :first-child,
.assessment-row > :first-child{
  text-align: center;
  justify-self: center;
}

.assessment-total-header{
  position: static;
  margin-top: 6px;
  background: rgba(12, 22, 24, 0.94);
  border-color: rgba(122, 168, 146, 0.45);
  opacity: 0.92;
}

.assessment-row--total{
  background: rgba(14, 26, 28, 0.9);
  border-color: rgba(122, 168, 146, 0.45);
  font-weight: 800;
}

.mistakes-panel__footer{
  display:flex;
  justify-content:flex-end;
}

.mistakes-clear{
  background: rgba(255,107,107,0.2);
  border: 1px solid rgba(255,107,107,0.4);
  color: #ffdede;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor:pointer;
}

.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding: calc(var(--top-ui-clearance) + var(--top-ui-clearance-extra)) 24px 16px;
  background: rgba(4,8,8,0.7);
  backdrop-filter: blur(6px);
  z-index: 80;
}

.modal.hidden{
  display:none;
}

.modal__content{
  width: min(860px, calc(100vw - 32px));
  max-height: calc(100dvh - var(--top-ui-clearance) - var(--top-ui-clearance-extra) - 16px);
  display:flex;
  flex-direction:column;
  gap: 16px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: rgba(9, 16, 18, 0.96);
  border: 1px solid rgba(68, 108, 93, 0.5);
  box-shadow: 0 22px 44px rgba(0,0,0,0.55);
  overflow-x: hidden;
}

.modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.modal__actions{
  display:flex;
  align-items:center;
  gap: 8px;
}

.modal__header h3{
  margin:0;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.modal__close{
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor:pointer;
}

.modal__clear{
  background: rgba(200, 76, 68, 0.12);
  border: 1px solid rgba(200, 76, 68, 0.55);
  color: rgba(230, 150, 144, 0.95);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor:pointer;
}

.range-modal__content{
  width: min(980px, calc(100vw - 32px));
}

.range-context{
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.68);
}

.range-legend{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

.range-legend__item{
  display:flex;
  align-items:center;
  gap: 6px;
}

.range-legend__swatch{
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
}

.range-legend__swatch--pos{ background: rgba(46, 204, 113, 0.6); }
.range-legend__swatch--neg{ background: rgba(224, 90, 78, 0.6); }
.range-legend__swatch--neutral{ background: rgba(255,255,255,0.25); }

.range-grid{
  display:grid;
  grid-template-columns: repeat(13, minmax(32px, 1fr));
  gap: 6px;
  padding: 4px;
}

.range-cell{
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 4px;
  color: rgba(255,255,255,0.88);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.range-cell .range-label{
  font-size: 26px;
  line-height: 0.9;
}

.range-cell .range-ev{
  font-size: 13px;
  line-height: 1;
  margin-top: 1px;
  letter-spacing: 0.4px;
  font-weight: 400;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 1px rgba(0,0,0,0.28);
}

.range-cell.is-pos{
  background: rgba(46, 204, 113, calc(0.08 + var(--ev-strength, 0)));
}

.range-cell.is-neg{
  background: rgba(224, 90, 78, calc(0.08 + var(--ev-strength, 0)));
}

.range-cell.is-neutral{
  background: rgba(255,255,255,0.08);
}

.range-cell.is-missing{
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.35);
}

.range-cell.is-current{
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 0 0 2px rgba(22,199,132,0.35);
}

.assessment-summary{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.assessment-summary__item{
  background: rgba(5, 10, 12, 0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 12px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.assessment-summary__label{
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.assessment-summary__value{
  font-size: 16px;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 900px){
  .main{
    flex-direction:column;
    align-items:center;
  }
  .table-oval{ height: 420px; }
  .pf-btn{ min-width: 260px; }
  .pf-btn--push,
  .pf-btn--fold{ min-width: 230px; }
  .mistakes-toggle{
    top: 22px;
    right: 16px;
  }
  .range-grid{
    grid-template-columns: repeat(13, minmax(24px, 1fr));
  }
}

@media (max-width: 640px){
  :root{
    --logout-top: 10px;
    --logout-right: 10px;
    --logout-height: 34px;
    --logout-width: 96px;
  }
  .logout-floating{
    font-size: 10px;
  }
  .table-oval{ height: 380px; }
  .actions-main{ flex-direction: column; }
  .pf-btn{ min-width: 280px; }
  .pf-btn--push,
  .pf-btn--fold{ min-width: 250px; }
  .range-grid{
    grid-template-columns: repeat(13, minmax(22px, 1fr));
  }
  .range-cell{
    gap: 0;
    font-size: 9px;
  }
  .range-cell .range-label{
    font-size: 21px;
  }
  .range-cell .range-ev{
    font-size: 11px;
  }
}

.seat-utg .player-plaque{
  box-shadow:none !important;
  outline:none !important;
  filter:none !important;
  backdrop-filter:none !important;
}

.seat-utg::before,
.seat-utg::after,
.seat-utg .player-plaque::before,
.seat-utg .player-plaque::after{
  content:none !important;
}
/* test */
/* test */

/* HERO slot: kill any seat container shadow/glow */
.seat.seat-utg,
.seat.seat-utg * {
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
}
.seat.seat-utg {
  background: transparent !important; /* prevents "panel" glow from seat background */
}
.seat.seat-utg::before,
.seat.seat-utg::after,
.seat.seat-utg *::before,
.seat.seat-utg *::after {
  box-shadow: none !important;
  filter: none !important;
  background-image: none !important;
}

/* Move HERO plaque down only on tall screens */
@media (min-height: 950px){
  .seat.seat-utg .player-plaque{
    position: relative;
    top: 40px;
  }

  .action-panel{
    transform: translateY(70px);
  }
}

.scenario-id-overlay{
  position: fixed;
  top: calc(var(--top-safe) + var(--logout-top));
  right: calc(
    env(safe-area-inset-right, 0px) + var(--logout-right) + var(--logout-width) + var(--logout-gap)
  );
  max-width: calc(
    100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)
    - var(--logout-right) - var(--logout-width) - var(--logout-gap) - 16px
  );
  z-index: 110;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  user-select: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px){
  .scenario-id-overlay{
    font-size: 11px;
    padding: 6px 8px;
  }
}

@media (max-width: 768px){
  :root{
    --top-ui-clearance-extra: 8px;
  }
}

/* shrink only SB/BB seat badges (not BTN badge, not action buttons) */
.plq-badge--sb,
.plq-badge--bb{
  width: 31px !important;      /* 70% of 44 */
  height: 31px !important;     /* 70% of 44 */
  min-width: 31px !important;
  border-radius: 50% !important;
  font-size: 11px !important;  /* 70% of 16 */
  line-height: 31px !important;
}

/* Auth screen styles (isolated to prevent global app CSS collisions) */
body.auth-screen {
  margin: 0;
  min-height: 100vh;
  font-family: "Manrope", "Segoe UI", sans-serif;
  color: #f1f5f9;
  background-color: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: auto;
}

.auth-screen .space-y-8 > * + * {
  margin-top: 32px;
}

.auth-screen .space-y-6 > * + * {
  margin-top: 24px;
}

.auth-screen .space-y-5 > * + * {
  margin-top: 20px;
}

.auth-screen [class~="space-y-1.5"] > * + * {
  margin-top: 6px;
}

.auth-screen .flex.justify-between.items-end {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.auth-screen .field-label {
  display: block;
  margin-left: 2px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #64748b;
}

.auth-screen .relative {
  position: relative;
}

.auth-screen .field-input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  font-size: 14px;
  padding: 12px 0;
  outline: none;
  transition: border-color 120ms ease;
}

.auth-screen .field-input::placeholder {
  color: #334155;
}

.auth-screen .field-input:focus {
  border-bottom-color: #258cf4;
}

.auth-screen .muted-link {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #475569;
  text-decoration: none;
  pointer-events: none;
}

.auth-screen .pt-4 {
  padding-top: 16px;
}

.auth-screen .space-y-4 > * + * {
  margin-top: 16px;
}

.auth-screen button[type="submit"] {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 0;
  background: #ffffff;
  color: #000000;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}

.auth-screen button[type="submit"]:hover {
  background: #e2e8f0;
}

.auth-screen button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: wait;
}

.auth-screen .flex.items-center.justify-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-screen .ghost-button {
  width: auto;
  border: 0;
  padding: 0;
  background: transparent;
  color: #64748b;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  pointer-events: none;
}

.auth-screen .error {
  min-height: 18px;
  margin-top: 8px;
  font-size: 12px;
  color: #ff8f8f;
}

.auth-screen input:-webkit-autofill,
.auth-screen input:-webkit-autofill:hover,
.auth-screen input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset;
  transition: background-color 5000s ease-in-out 0s;
}

@media (max-width: 560px) {
  .auth-screen {
    padding: 12px;
  }

  .auth-screen main {
    max-width: 100%;
    padding: 12px;
  }
}

/* Login card layout overrides */
.auth-screen main {
  width: 100%;
  max-width: 420px;
}

.auth-screen .auth-card {
  width: 100%;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
}

.auth-screen #login-form {
  display: grid;
  gap: 20px;
}

.auth-screen .pt-4 {
  padding-top: 4px;
}

@media (max-width: 560px) {
  .auth-screen main {
    max-width: 100%;
    padding: 0;
  }

  .auth-screen .auth-card {
    padding: 24px 20px;
  }
}

/* Login screen refresh (scoped to auth screen only) */
body.auth-screen {
  position: relative;
  overflow: hidden;
  background: #05070a;
  font-family: "Space Grotesk", "Manrope", "Segoe UI", sans-serif;
}

.auth-screen .auth-bg {
  position: fixed;
  inset: -15%;
  pointer-events: none;
  z-index: 0;
}

.auth-screen .auth-ambient {
  background:
    radial-gradient(60% 50% at 18% 22%, rgba(37, 140, 244, 0.2), transparent 70%),
    radial-gradient(55% 55% at 80% 15%, rgba(16, 185, 129, 0.12), transparent 72%);
}

.auth-screen .auth-blob {
  inset: auto auto -180px -120px;
  width: 460px;
  height: 460px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(37, 140, 244, 0.16) 0%, rgba(37, 140, 244, 0) 72%);
  filter: blur(10px);
}

.auth-screen .auth-main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  padding: 24px;
}

.auth-screen .auth-card {
  width: 100%;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: #0d0d0d;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.05),
    0 40px 100px -20px rgba(0, 0, 0, 0.8);
}

.auth-screen .auth-title {
  margin: 0 0 20px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #f8fafc;
}

.auth-screen .auth-form {
  display: grid;
  gap: 14px;
}

.auth-screen .auth-field {
  display: grid;
  gap: 8px;
}

.auth-screen .field-label {
  margin-left: 2px;
  color: rgba(241, 245, 249, 0.7);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.auth-screen .field-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 11px;
  background: rgba(10, 12, 16, 0.95);
  color: #f8fafc;
  font-size: 14px;
  line-height: 1.2;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.auth-screen .field-input::placeholder {
  color: rgba(148, 163, 184, 0.6);
}

.auth-screen .field-input:focus {
  border-color: rgba(37, 140, 244, 0.95);
  box-shadow: 0 0 0 3px rgba(37, 140, 244, 0.2);
  background: rgba(8, 11, 16, 1);
  outline: none;
}

.auth-screen .auth-actions {
  margin-top: 6px;
}

.auth-screen button[type="submit"] {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 11px;
  background: #258cf4;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color 120ms ease, transform 90ms ease;
}

.auth-screen button[type="submit"]:hover {
  background: #1f78d3;
}

.auth-screen button[type="submit"]:active {
  transform: scale(0.99);
}

.auth-screen button[type="submit"]:disabled {
  opacity: 0.7;
  cursor: wait;
}

.auth-screen .auth-error {
  min-height: 18px;
  margin-top: 4px;
  font-size: 12px;
  color: #ff8f8f;
}

@media (max-width: 560px) {
  .auth-screen .auth-main {
    padding: 16px;
  }

  .auth-screen .auth-card {
    padding: 24px 20px;
  }

  .auth-screen .auth-title {
    font-size: 24px;
  }
}

/* Logged-in app compact height mode (kept out of auth screen) */
body:not(.auth-screen) {
  --ui-scale: 1;
  --table-vh: 52vh;
  --app-top-pad: 150px;
}

@media (max-height: 820px) {
  body:not(.auth-screen) {
    --ui-scale: 0.82;
    --table-vh: 44vh;
    --app-top-pad: 104px;
  }
}

@media (max-height: 768px) {
  body:not(.auth-screen) {
    --ui-scale: 0.80;
    --table-vh: 41vh;
    --app-top-pad: 88px;
  }
}

body:not(.auth-screen) .app {
  padding-top: max(calc(var(--top-ui-clearance) + 6px), var(--app-top-pad));
  padding-bottom: clamp(12px, calc(40px * var(--ui-scale)), 40px);
}

body:not(.auth-screen) .main {
  margin-top: clamp(4px, calc(18px * var(--ui-scale)), 18px);
}

body:not(.auth-screen) .trainer-panel {
  gap: clamp(12px, calc(26px * var(--ui-scale)), 26px);
}

body:not(.auth-screen) .table-oval {
  height: min(460px, max(250px, var(--table-vh)));
}

body:not(.auth-screen) .action-panel {
  margin-top: clamp(0px, calc(6px * var(--ui-scale)), 6px);
}

body:not(.auth-screen) .actions {
  gap: clamp(6px, calc(12px * var(--ui-scale)), 12px);
}

body:not(.auth-screen) .actions-main {
  gap: clamp(10px, calc(16px * var(--ui-scale)), 16px);
}

body:not(.auth-screen) .pf-btn {
  height: clamp(44px, calc(64px * var(--ui-scale)), 64px);
  font-size: clamp(13px, calc(16px * var(--ui-scale)), 16px);
  padding: 0 clamp(16px, calc(28px * var(--ui-scale)), 28px);
}

body:not(.auth-screen) .pf-btn--next {
  height: clamp(36px, calc(46px * var(--ui-scale)), 46px);
  font-size: clamp(11px, calc(13px * var(--ui-scale)), 13px);
}

body:not(.auth-screen) .pf-btn--range {
  height: clamp(34px, calc(42px * var(--ui-scale)), 42px);
  font-size: clamp(10px, calc(12px * var(--ui-scale)), 12px);
}

body:not(.auth-screen) #btn-next {
  margin-top: clamp(8px, calc(50px * var(--ui-scale)), 50px);
}

body:not(.auth-screen) .hud-below {
  margin-top: 0;
}

body:not(.auth-screen) .hud-result {
  margin-bottom: clamp(4px, calc(10px * var(--ui-scale)), 10px);
  font-size: clamp(12px, calc(14px * var(--ui-scale)), 14px);
}

body:not(.auth-screen) .hud-row {
  gap: clamp(6px, calc(10px * var(--ui-scale)), 10px);
}

body:not(.auth-screen) .hud-chip {
  padding: clamp(5px, calc(8px * var(--ui-scale)), 8px) clamp(7px, calc(10px * var(--ui-scale)), 10px);
  font-size: clamp(10px, calc(12px * var(--ui-scale)), 12px);
}

body:not(.auth-screen) .hud-debug {
  margin-top: clamp(4px, calc(10px * var(--ui-scale)), 10px);
  font-size: clamp(10px, calc(11px * var(--ui-scale)), 11px);
}

@media (max-height: 820px) {
  body:not(.auth-screen) .mistakes-toggle {
    top: calc(var(--top-safe) + var(--logout-top) + 2px);
    right: calc(
      env(safe-area-inset-right, 0px) + var(--logout-right) + var(--logout-width) + 10px
    );
    padding: 8px 12px;
    font-size: 11px;
    z-index: 130;
  }
}

@media (max-height: 760px) {
  body:not(.auth-screen) .mistakes-toggle {
    top: calc(var(--top-safe) + var(--logout-top) + 1px);
    right: calc(
      env(safe-area-inset-right, 0px) + var(--logout-right) + var(--logout-width) + 8px
    );
    padding: 7px 10px;
  }
}

@media (max-height: 820px) {
  body:not(.auth-screen) {
    --seat-ui-scale: calc(var(--ui-scale) * 0.95);
  }

  body:not(.auth-screen) .seat .player-plaque {
    width: calc(140px * var(--seat-ui-scale)) !important;
    height: calc(60px * var(--seat-ui-scale)) !important;
    min-width: calc(140px * var(--seat-ui-scale)) !important;
    min-height: calc(60px * var(--seat-ui-scale)) !important;
    border-radius: calc(14px * var(--seat-ui-scale)) !important;
  }

  body:not(.auth-screen) .seat .plq-badges {
    top: calc(6px * var(--seat-ui-scale)) !important;
    right: calc(-4px * var(--seat-ui-scale)) !important;
    gap: calc(8px * var(--seat-ui-scale)) !important;
  }

  body:not(.auth-screen) .seat .plq-badge {
    width: calc(44px * var(--seat-ui-scale)) !important;
    height: calc(44px * var(--seat-ui-scale)) !important;
    font-size: calc(16px * var(--seat-ui-scale)) !important;
  }

  body:not(.auth-screen) .seat .player-plaque__pos {
    font-size: calc(15px * var(--seat-ui-scale)) !important;
    margin-bottom: calc(3px * var(--seat-ui-scale)) !important;
  }

  body:not(.auth-screen) .seat .player-plaque__stack {
    gap: calc(5px * var(--seat-ui-scale)) !important;
  }

  body:not(.auth-screen) .seat .player-plaque__stack .stack-num {
    font-size: calc(20px * var(--seat-ui-scale)) !important;
  }

  body:not(.auth-screen) .seat .player-plaque__stack .stack-unit {
    font-size: calc(11px * var(--seat-ui-scale)) !important;
  }

  body:not(.auth-screen) .seat .seat-back-cards {
    top: calc(-42px * var(--seat-ui-scale)) !important;
    gap: calc(4px * var(--seat-ui-scale)) !important;
  }

  body:not(.auth-screen) .seat .seat-back-card {
    width: calc(56px * var(--seat-ui-scale)) !important;
    height: calc(78px * var(--seat-ui-scale)) !important;
    border-radius: calc(6px * var(--seat-ui-scale)) !important;
  }

  body:not(.auth-screen) .seat .allin-badge {
    bottom: calc(-16px * var(--seat-ui-scale)) !important;
    padding: calc(3px * var(--seat-ui-scale)) calc(8px * var(--seat-ui-scale)) !important;
    font-size: calc(9px * var(--seat-ui-scale)) !important;
    letter-spacing: calc(0.8px * var(--seat-ui-scale)) !important;
  }
}