/* Yellix — basepoker brand font (self-hosted) */
  @font-face{font-family:'Yellix';src:url('../fonts/Yellix-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:'Yellix';src:url('../fonts/Yellix-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
  @font-face{font-family:'Yellix';src:url('../fonts/Yellix-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
  @font-face{font-family:'Yellix';src:url('../fonts/Yellix-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

  :root {
    /* basepoker bp-fe designTokens (Colors.ts) */
    --bg-0: #0d1b2b;            /* gray850 */
    --bg-1: #111f30;            /* gray800 */
    --bg-2: #182637;            /* gray750 */
    --bg-3: #223040;            /* gray700 */
    --bg-deep: #071424;         /* gray900 */
    --border: #223040;          /* gray700 */
    --border-active: #344150;   /* gray600 */
    --text-primary: #ffffff;
    --text-secondary: #8b99ac;  /* gray400 */
    --text-muted: #516074;      /* gray500 */
    --accent: #12b76a;          /* primary500 */
    --accent-bright: #32d583;   /* primary400 */
    --accent-strong: #018f69;   /* primary600 */
    --accent-glow: rgba(18,183,106,0.14);
    --error: #f04438;           /* error500 */
    --warning: #f79009;         /* warning500 */

    /* action colors */
    --c-allin: #f04438;
    --c-raise: #f79009;
    --c-call:  #12b76a;
    --c-check: #32d583;
    --c-fold:  #516074;

    /* position colors */
    --pos-btn: #018F69;
    --pos-sb:  #2563eb;
    --pos-bb:  #c43030;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--bg-0);
    color: var(--text-primary);
    font-family: 'Yellix', 'Apple SD Gothic Neo', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
  }
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
      linear-gradient(var(--border) 1px, transparent 1px),
      linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
  }

  .container {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px 48px;
  }

  /* HEADER */
  .header {
    padding: 26px 0 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
  }
  .header h1 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .header .subtitle {
    font-family: 'Yellix', 'Apple SD Gothic Neo', sans-serif;
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.10em;
    text-transform: uppercase;
  }

  /* SELECTORS */
  .selectors {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
  }
  .sel-group { display: flex; align-items: center; gap: 8px; }
  .sel-label {
    font-family: 'Yellix', 'Apple SD Gothic Neo', sans-serif;
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .opt-btn {
    font-family: 'Yellix', 'Apple SD Gothic Neo', sans-serif;
    font-size: 11px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 5px;
    border: 1px solid var(--border);
    background: var(--bg-2);
    color: var(--text-secondary);
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: all 0.15s ease;
  }
  .opt-btn:hover { border-color: var(--border-active); color: var(--text-primary); }
  .opt-btn.active {
    border-color: var(--accent);
    background: var(--accent-glow);
    color: var(--accent);
  }

  /* POSITION / DECISION-TREE NAV */
  .pos-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .pos-card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 168px;
    flex-shrink: 0;
    overflow: hidden;
    transition: border-color 0.15s ease;
  }
  .pos-card.active-btn { border-color: var(--pos-btn); box-shadow: 0 0 0 1px rgba(1,143,105,0.25); }
  .pos-card.active-sb  { border-color: var(--pos-sb);  box-shadow: 0 0 0 1px rgba(37,99,235,0.25); }
  .pos-card.active-bb  { border-color: var(--pos-bb);  box-shadow: 0 0 0 1px rgba(196,48,48,0.25); }
  .pos-card.dimmed { opacity: 0.4; }

  .pos-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--border);
  }
  .pos-card-name {
    font-family: 'Yellix', 'Apple SD Gothic Neo', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .pos-card-name.clr-btn { color: var(--pos-btn); }
  .pos-card-name.clr-sb  { color: var(--pos-sb); }
  .pos-card-name.clr-bb  { color: var(--pos-bb); }
  .pos-card-stack {
    font-family: 'Yellix', 'Apple SD Gothic Neo', sans-serif;
    font-size: 11px;
    color: var(--text-muted);
  }

  .pos-card-actions { padding: 6px 0; }
  .pos-card-separator { height: 1px; background: var(--border); margin: 4px 12px; }

  .pos-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    transition: background 0.1s ease;
    font-family: 'Yellix', 'Apple SD Gothic Neo', sans-serif;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
  }
  .pos-action-row:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
  .pos-action-row.locked {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
    font-weight: 500;
    cursor: default;
  }
  .pos-action-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); }

  .nav-side { display: flex; flex-direction: column; gap: 6px; align-self: center; }
  .nav-btn {
    font-family: 'Yellix', 'Apple SD Gothic Neo', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--border-active);
    background: var(--bg-2);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
  }
  .nav-btn:hover { background: var(--bg-3); color: var(--text-primary); }

  /* MAIN LAYOUT */
  .main { display: grid; grid-template-columns: 1fr 270px; gap: 20px; align-items: start; }
  .grid-section { display: flex; flex-direction: column; gap: 16px; }

  .grid-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .grid-pos-badge {
    font-family: 'Yellix', 'Apple SD Gothic Neo', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .grid-pos-badge.btn { background: rgba(1,143,105,0.2); border: 1px solid rgba(1,143,105,0.5); color: var(--pos-btn); }
  .grid-pos-badge.sb  { background: rgba(37,99,235,0.2); border: 1px solid rgba(37,99,235,0.5); color: var(--pos-sb); }
  .grid-pos-badge.bb  { background: rgba(196,48,48,0.2); border: 1px solid rgba(196,48,48,0.5); color: var(--pos-bb); }
  .grid-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); flex: 1; }
  .grid-history {
    font-family: 'Yellix', 'Apple SD Gothic Neo', sans-serif;
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.03em;
  }

  .hand-grid-wrapper { overflow: auto; }
  .hand-grid {
    display: grid;
    grid-template-columns: 20px repeat(13, 1fr);
    grid-template-rows: 20px repeat(13, 1fr);
    gap: 2px;
    min-width: 460px;
  }
  .grid-label {
    display: flex; align-items: center; justify-content: center;
    font-family: 'Yellix', 'Apple SD Gothic Neo', sans-serif;
    font-size: 10px; font-weight: 500;
    color: var(--text-muted);
  }
  .hand-cell {
    position: relative;
    aspect-ratio: 1;
    border-radius: 2px;
    cursor: pointer;
    transition: transform 0.1s ease, filter 0.1s ease;
    border: 1px solid rgba(0,0,0,0.3);
    overflow: hidden;
    background: var(--bg-1);
  }
  .hand-cell:hover { transform: scale(1.08); z-index: 10; filter: brightness(1.2); border-color: rgba(255,255,255,0.25); }
  .hand-cell.selected { border-color: rgba(255,255,255,0.7) !important; transform: scale(1.05); z-index: 5; }
  .cell-hand {
    position: absolute; top: 2px; left: 3px;
    font-family: 'Yellix', 'Apple SD Gothic Neo', sans-serif;
    font-size: 10px; font-weight: 500;
    color: rgba(255,255,255,0.95);
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.85);
    z-index: 2; pointer-events: none;
  }
  /* horizontal stacked frequency bars (nlhViewer / GTO Wizard style) */
  .cell-bars { position: absolute; inset: 0; display: flex; z-index: 1; }
  .cell-bars span { height: 100%; }

  .legend { display: flex; gap: 14px; flex-wrap: wrap; }
  .legend-item {
    display: flex; align-items: center; gap: 6px;
    font-family: 'Yellix', 'Apple SD Gothic Neo', sans-serif;
    font-size: 10px; color: var(--text-secondary);
    letter-spacing: 0.04em;
  }
  .legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

  /* SIDE PANEL */
  .side-panel { display: flex; flex-direction: column; gap: 16px; }
  .card { background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
  .card-title {
    font-family: 'Yellix', 'Apple SD Gothic Neo', sans-serif;
    font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-muted); margin-bottom: 14px;
  }
  .selected-hand-name { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; }
  .action-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
  .action-bar-label {
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'Yellix', 'Apple SD Gothic Neo', sans-serif; font-size: 11px;
  }
  .action-name { color: var(--text-secondary); }
  .action-pct { color: var(--text-primary); font-weight: 500; }
  .action-bar-track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
  .action-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; }

  .no-data { font-family: 'Yellix', 'Apple SD Gothic Neo', sans-serif; font-size: 11px; color: var(--text-muted); }
  .footer-note {
    margin-top: 18px;
    font-family: 'Yellix', 'Apple SD Gothic Neo', sans-serif;
    font-size: 10px; color: var(--text-muted); line-height: 1.6;
  }
  .footer-note code { color: var(--text-secondary); }
  #loadError { color: #ff7b7b; font-family: 'Yellix', 'Apple SD Gothic Neo', sans-serif; font-size: 12px; padding: 12px 0; display: none; }

  /* Mark actions that lead to an end (no further decision) */
  .pos-action-row .act-end-tag{margin-left:auto;font-size:9px;letter-spacing:.03em;
    color:var(--text-muted);border:1px solid var(--border);border-radius:4px;
    padding:1px 5px;text-transform:uppercase;white-space:nowrap}
  .pos-action-row.leads-end{opacity:.45;cursor:default}
  .pos-action-row.leads-end:hover{background:transparent;color:var(--text-secondary)}

  /* terminal */
  .terminal-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 380px; gap: 14px;
  }
  .terminal-icon { font-size: 44px; opacity: 0.3; }
  .terminal-label { font-family: 'Yellix', 'Apple SD Gothic Neo', sans-serif; font-size: 14px; color: var(--text-muted); text-align: center; }

  /* TOOLTIP */
  .tooltip {
    position: fixed; background: #0f1d30;
    border: 1px solid var(--border-active);
    border-radius: 8px; padding: 10px 14px;
    pointer-events: none; z-index: 1000; min-width: 150px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5); display: none;
  }
  .tooltip.visible { display: block; }
  .tooltip-hand { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
  .tooltip-row {
    display: flex; justify-content: space-between; gap: 16px;
    font-family: 'Yellix', 'Apple SD Gothic Neo', sans-serif; font-size: 11px; color: var(--text-secondary);
  }
  .tooltip-pct { color: var(--text-primary); font-weight: 500; }
  .tt-sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }

  /* ── shared site nav ── */
  .site-nav{position:sticky;top:0;z-index:500;display:flex;align-items:center;gap:18px;
    padding:12px 24px;background:rgba(10,22,40,.85);backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
  .site-brand{display:flex;align-items:center;gap:9px;font-family:'Yellix','Apple SD Gothic Neo',sans-serif;font-weight:700;font-size:16px;letter-spacing:-.01em;
    color:var(--text-primary);text-decoration:none;white-space:nowrap}
  .site-brand svg{display:block;height:18px;width:auto}
  .site-brand .tag{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--accent);padding:2px 7px;border:1px solid var(--accent);border-radius:6px}
  .site-links{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
  .site-links a{font-family:'Yellix','Apple SD Gothic Neo',sans-serif;font-size:12px;letter-spacing:.04em;
    color:var(--text-secondary);text-decoration:none;padding:6px 12px;border-radius:6px;
    border:1px solid transparent;transition:all .15s}
  .site-links a:hover{color:var(--text-primary);background:var(--bg-2)}
  .site-links a .tab-ico{display:none}
  .site-links a .tab-ico svg{width:18px;height:18px;display:block}
  .tab-txt .sm{display:none}
  .site-links a.soon{opacity:.5;pointer-events:none}
  .tab-soon{display:inline-block;font-size:8px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:1px 4px;border-radius:4px;background:rgba(139,153,172,.18);color:var(--text-secondary);margin-left:6px;vertical-align:middle}
  .site-links a.active{color:var(--accent);border-color:var(--accent);background:var(--accent-glow)}
  /* ── responsive ── */
  @media (max-width:860px){
    .main{grid-template-columns:1fr !important}
    .side-panel{order:2}
    .container{padding:0 14px 36px}
    .header{padding:18px 0 14px}
    .header h1{font-size:18px}
    .selectors{margin-left:0}
  }
  @media (max-width:560px){
    /* ── basepoker mobile header: 60px, no border, solid navy ── */
    .site-nav{position:fixed;top:0;left:0;right:0;min-height:60px;padding:0 20px 0 24px;gap:10px;background:var(--bg-0);border-bottom:0;
      backdrop-filter:none;-webkit-backdrop-filter:none}
    .site-brand{font-size:15px}
    .site-brand svg{height:20px}
    /* ── basepoker mobile bottom tab bar: 58px, bg #071424, icon+label stacked ── */
    .site-links{position:fixed;left:0;right:0;bottom:0;z-index:600;margin:0;
      display:flex;justify-content:space-around;align-items:stretch;gap:0;flex-wrap:nowrap;
      height:58px;background:var(--bg-deep);border-top:0;
      padding:0 6px}
    .site-links a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
      gap:4px;border:0;border-radius:0;background:none;padding:6px 2px;color:var(--text-secondary)}
    .site-links a .tab-ico{display:block}
    .site-links a .tab-txt{font-size:11px;font-weight:600;letter-spacing:0;white-space:nowrap;line-height:1.1}
    .site-links a .tab-txt .lg{display:none}
    .site-links a .tab-txt .sm{display:inline}
    .site-links a .tab-soon{margin-left:0;margin-top:1px;font-size:7px;padding:0 3px}
    .site-links a.active{color:var(--accent);background:none;border:0}
    body{padding-top:60px;padding-bottom:64px}
    /* Fit 13×13 grid to viewport width (no horizontal scroll/clip) */
    .hand-grid{min-width:0}
    .cell-hand{font-size:9px}
    .grid-label{font-size:9px}
  }