/* ============================================================
   SHARED STYLES — same visual language as texashd-chips-tracker.html
   (colors, panels, buttons, auth screens, topbar). That file keeps its
   OWN embedded copy of this CSS untouched (see shared.js's top comment
   for why); this file is for index.html / blackjack.html / future
   pages so they look consistent without re-typing it each time.
   ============================================================ */
:root{
  --felt-1:#0b4a3a;
  --felt-2:#0e5c47;
  --card-bg:#123c33;
  --card-bg-2:#154a3e;
  --gold:#e0b94e;
  --gold-dim:#8a7233;
  --text:#eef5f1;
  --text-dim:#9fb8ae;
  --danger:#e05a4e;
  --danger-dim:#7a332c;
  --ok:#4ec98a;
  --border:#1e6551;
  --radius:14px;
  --sb-color:#6fb3e0;
  --bb-color:#e0894a;
  --cursor-club: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='9' r='5' fill='%231a1a1a' stroke='%23f5f0e6' stroke-width='1.3'/%3E%3Ccircle cx='8' cy='17' r='5' fill='%231a1a1a' stroke='%23f5f0e6' stroke-width='1.3'/%3E%3Ccircle cx='20' cy='17' r='5' fill='%231a1a1a' stroke='%23f5f0e6' stroke-width='1.3'/%3E%3Cpath d='M12,18 L16,18 L18,27 L10,27 Z' fill='%231a1a1a' stroke='%23f5f0e6' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 14 14;
  --cursor-club-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='6' r='3.2' fill='%231a1a1a' stroke='%23f5f0e6' stroke-width='1'/%3E%3Ccircle cx='5.2' cy='11' r='3.2' fill='%231a1a1a' stroke='%23f5f0e6' stroke-width='1'/%3E%3Ccircle cx='12.8' cy='11' r='3.2' fill='%231a1a1a' stroke='%23f5f0e6' stroke-width='1'/%3E%3Cpath d='M7.8,11.5 L10.2,11.5 L11.5,17.5 L6.5,17.5 Z' fill='%231a1a1a' stroke='%23f5f0e6' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") 9 9;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(ellipse at top, var(--felt-2), var(--felt-1) 70%);
  color:var(--text);
  min-height:100%;
  padding-bottom:40px;
}
h1,h2,h3{margin:0;}
button{
  font-family:inherit;
  cursor:pointer;
  border:none;
  border-radius:10px;
  -webkit-appearance:none;
}
input{
  font-family:inherit;
  border-radius:10px;
  border:1px solid var(--border);
  background:#0d332a;
  color:var(--text);
  padding:10px 12px;
  font-size:16px;
}
input:focus{outline:2px solid var(--gold);}

@media (pointer: fine){
  html{ cursor: var(--cursor-club), auto; }
  button{ cursor: var(--cursor-club), pointer; }
  input{ cursor: text; }
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button{
    cursor: var(--cursor-club-sm), pointer;
  }
}

/* ---------- layout shells ---------- */
.screen{max-width:520px;margin:0 auto;padding:16px;}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 6px;
}
.topbar h1{font-size:18px;letter-spacing:.5px;color:var(--gold);}
.linkbtn{
  background:none;color:var(--text-dim);font-size:13px;
  text-decoration:underline;padding:6px;
}

/* ---------- panels / buttons ---------- */
.panel{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  margin-bottom:14px;
}
.panel h2{font-size:14px;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);margin-bottom:10px;}
.row{display:flex;gap:8px;}
.row + .row{margin-top:8px;}
.row input{flex:1;min-width:0;}
.buyin-input{max-width:120px;}
.primary-btn{
  background:var(--gold);color:#20180a;font-weight:700;
  padding:13px 16px;font-size:16px;width:100%;
}
.primary-btn:disabled{background:#4a4531;color:#7d7658;cursor:not-allowed;}
.secondary-btn{
  background:var(--card-bg-2);color:var(--text);
  border:1px solid var(--border);padding:10px 14px;font-size:14px;
}
.danger-btn{background:var(--danger);color:#2a0f0c;}
.ghost-btn{background:transparent;color:var(--text-dim);padding:8px;font-size:13px;}
.empty-hint{color:var(--text-dim);font-size:13px;padding:6px 2px;}

/* ---------- pot/stat card ---------- */
.pot-card{
  background:linear-gradient(180deg, var(--card-bg-2), var(--card-bg));
  border:2px solid var(--gold-dim);
  border-radius:var(--radius);
  text-align:center;
  padding:18px 16px 14px;
  margin-bottom:14px;
  position:sticky;top:8px;z-index:5;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.pot-label{font-size:12px;letter-spacing:2px;color:var(--gold-dim);text-transform:uppercase;}
.pot-amount{font-size:40px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;margin:2px 0 10px;}
.pot-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}

.check-bar{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--text-dim);
  padding:8px 4px;margin-bottom:10px;
  justify-content:center;
}
.check-dot{width:9px;height:9px;border-radius:50%;background:var(--ok);flex-shrink:0;}
.check-bar.bad{color:var(--danger);}
.check-bar.bad .check-dot{background:var(--danger);}

/* ---------- seats (reused as a base for player positions) ---------- */
.seats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:14px;
}
.seat{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
  text-align:left;
  display:flex;flex-direction:column;gap:2px;
  position:relative;
}
.seat.zero{border-color:var(--danger-dim);}
.seat.has-dealer{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);}
.seat.folded{opacity:.5;}
.seat.waiting-bb{border-color:var(--sb-color);opacity:.75;}
.seat.current-turn{
  border-color:var(--ok);
  animation:turnGlow 1.4s ease-in-out infinite;
}
@keyframes turnGlow{
  0%,100%{ box-shadow:0 0 0 2px var(--ok), 0 0 6px rgba(78,201,138,.4); }
  50%{ box-shadow:0 0 0 2px var(--ok), 0 0 16px rgba(78,201,138,.85); }
}
.seat .seat-label{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-dim);}
.seat .name{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.seat .chips{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--gold);}
.seat .street-contrib{font-size:11px;color:var(--text-dim);font-variant-numeric:tabular-nums;}
.seat .allin-tag, .seat .fold-tag, .seat .wait-tag{
  position:absolute;top:8px;right:10px;font-size:10px;letter-spacing:1px;
  border-radius:6px;padding:2px 5px;
}
.seat .allin-tag{color:var(--danger);border:1px solid var(--danger-dim);}
.seat .fold-tag{color:var(--text-dim);border:1px solid var(--border);}
.seat .wait-tag{color:var(--sb-color);border:1px solid var(--sb-color);}
.seat .seat-badges{
  position:absolute;top:-9px;left:-9px;
  display:flex;gap:4px;
  z-index:1;
}
.role-badge{
  min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  color:#20180a;font-size:10.5px;font-weight:800;letter-spacing:.3px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
  border:2px solid var(--felt-1);
}
.role-badge.dealer{background:var(--gold);}
.role-badge.sb{background:var(--sb-color);}
.role-badge.bb{background:var(--bb-color);}
.seat.empty{
  border-style:dashed;
  opacity:.65;
  align-items:flex-start;
  justify-content:center;
  min-height:64px;
}
.seat.empty:active{opacity:.9;}

.dealer-bar{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px 14px;
  margin-bottom:14px;
  text-align:center;
}
.blinds-config-line{
  font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;
  margin-bottom:8px;
}
.dealer-info{font-size:14px;font-weight:600;color:var(--text);margin:2px 0;}
.dealer-info.sb-line{color:var(--sb-color);}
.dealer-info.bb-line{color:var(--bb-color);}
.dealer-info.turn-line{color:var(--ok);}
.street-label{
  font-size:11px;color:var(--ok);text-transform:uppercase;letter-spacing:1.5px;
  font-weight:700;margin-bottom:4px;
}
.dealer-bar .primary-btn{margin-top:8px;}
.dealer-bar .primary-btn.turn-btn{background:var(--ok);}

.bottom-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px;}

.log-panel{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px 14px 12px;
  margin-bottom:14px;
}
.log-title{
  font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);
  margin-bottom:6px;
}
.log-list{max-height:170px;overflow-y:auto;display:flex;flex-direction:column;gap:3px;}
.log-line{font-size:12.5px;color:var(--text);line-height:1.4;}
.log-line.log-street{color:var(--gold-dim);text-transform:uppercase;letter-spacing:1px;font-size:11px;margin:2px 0;}

/* ---------- global save-error banner (shown on every screen) ---------- */
.save-error-banner{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:var(--danger);color:#2a0f0c;
  padding:10px 16px;font-size:13.5px;font-weight:600;line-height:1.4;
  display:flex;align-items:center;gap:10px;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.save-error-banner .msg{flex:1;}
.save-error-banner .dismiss{
  background:rgba(0,0,0,.15);color:#2a0f0c;font-size:16px;line-height:1;
  padding:4px 9px;flex-shrink:0;font-weight:800;
}

/* ---------- modal ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  display:flex;align-items:flex-end;justify-content:center;
  z-index:50;
}
.overlay.hidden{display:none;}
.sheet{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-top-left-radius:18px;border-top-right-radius:18px;
  width:100%;max-width:520px;
  padding:18px 16px 26px;
  max-height:85vh;overflow-y:auto;
}
.sheet h3{
  font-size:17px;margin-bottom:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sheet .sub{color:var(--text-dim);font-size:13px;margin-bottom:14px;}
.sheet .close{
  background:none;color:var(--text-dim);font-size:22px;line-height:1;
  flex-shrink:0;padding:6px;margin:-6px -8px 0 0;
}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.sheet-head > div{min-width:0;flex:1;}
.action-grid{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.quick-amt{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0;}
.quick-amt button{background:var(--card-bg-2);color:var(--text);padding:8px 12px;font-size:14px;border:1px solid var(--border);}
.field-label{font-size:12px;color:var(--text-dim);margin:10px 0 4px;text-transform:uppercase;letter-spacing:.5px;}
.error-msg{color:var(--danger);font-size:13px;margin-top:6px;min-height:16px;}
.pw-field{position:relative;display:inline-block;}
.pw-field input{padding-right:38px;width:100%;}
.pw-toggle{
  position:absolute;top:50%;right:4px;transform:translateY(-50%);
  width:28px;height:28px;padding:0;
  background:transparent;color:var(--text-dim);
  display:flex;align-items:center;justify-content:center;
}
.pw-toggle:hover{color:var(--text);}
.pw-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:1px;}
.select-list{display:flex;flex-direction:column;gap:6px;margin:10px 0;}
.select-item{
  display:flex;align-items:center;gap:10px;
  background:var(--card-bg-2);border:1px solid var(--border);border-radius:10px;
  padding:10px 12px;
}
.select-item input[type=checkbox]{width:18px;height:18px;}
.select-item .nm{flex:1;font-weight:600;}
.select-item .ch{color:var(--gold);font-variant-numeric:tabular-nums;}
.split-preview{font-size:13px;color:var(--text-dim);margin-top:8px;line-height:1.5;}

.turn-sheet{border:2px solid var(--ok);}
.pot-mini{
  font-size:13px;color:var(--gold);font-weight:700;
  text-align:center;margin:4px 0 12px;font-variant-numeric:tabular-nums;
}

.footer-note{
  text-align:center;color:var(--text-dim);font-size:11.5px;
  margin-top:18px;line-height:1.6;
}

/* ---------- invite / join badges ---------- */
.join-role-badge{
  display:inline-block;padding:4px 12px;border-radius:20px;
  font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
}
.join-role-badge.role-host{background:rgba(224,185,78,.18);color:var(--gold);}
.join-role-badge.role-joined{background:rgba(111,179,224,.18);color:var(--sb-color);}
.join-code-display{
  font-size:36px;font-weight:800;letter-spacing:6px;color:var(--gold);
  text-align:center;margin:14px 0;font-variant-numeric:tabular-nums;
}
.qr-wrap{display:flex;justify-content:center;padding:12px 0 4px;}
.qr-wrap canvas{border-radius:10px;background:#fff;padding:10px;max-width:100%;}

/* ---------- history-style lists (match history, balance ledger) ---------- */
.net-pos{color:var(--ok);}
.net-neg{color:var(--danger);}
.history-session{
  background:var(--card-bg);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px;margin-bottom:12px;
}
.history-session-head{
  display:flex;justify-content:space-between;align-items:center;
  width:100%;background:none;padding:0;text-align:left;gap:10px;
}
.hs-date{font-weight:700;font-size:14px;}
.status-badge{
  display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;padding:2px 7px;border-radius:20px;
  vertical-align:1px;
}
.status-badge.status-live{background:rgba(78,201,138,.18);color:var(--ok);}
.status-badge.status-completed{background:rgba(159,184,174,.15);color:var(--text-dim);}
.status-badge.status-interrupted{background:rgba(224,90,78,.2);color:var(--danger);}
.hs-meta{font-size:12px;color:var(--text-dim);margin-top:2px;}
.hs-chevron{color:var(--text-dim);font-size:11px;flex-shrink:0;}
.history-session-body{margin-top:12px;border-top:1px solid var(--border);padding-top:12px;}
.history-participant{
  display:flex;justify-content:space-between;align-items:center;
  padding:6px 0;font-size:13px;border-bottom:1px solid var(--border);
}
.history-participant:last-child{border-bottom:none;}
.hp-name{flex:1;font-weight:600;}
.hp-buyin{color:var(--text-dim);margin:0 10px;font-variant-numeric:tabular-nums;font-size:12px;}
.hp-net{font-weight:700;font-variant-numeric:tabular-nums;min-width:52px;text-align:right;}
.history-hand{border-top:1px solid var(--border);padding:8px 0;}
.history-hand-head{
  display:flex;justify-content:space-between;align-items:center;
  width:100%;background:none;padding:0;text-align:left;font-size:12.5px;gap:8px;
}
.hh-time{color:var(--text-dim);flex-shrink:0;}
.hh-winner{color:var(--gold);font-weight:600;text-align:right;}
.hh-net{font-size:12px;color:var(--text-dim);margin:8px 0 6px;}