:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --app-height:100dvh;
  color-scheme:dark;
}
html{
  min-height:100%;
  background:#06100e;
  overscroll-behavior-y:none;
  -webkit-text-size-adjust:100%;
}
body{
  min-height:100vh;
  min-height:var(--app-height);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-x:none;
}
button,a,input,select,textarea,summary{
  touch-action:manipulation;
}
button,summary{
  -webkit-user-select:none;
  user-select:none;
}
input,select,textarea{
  font-size:16px;
}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid rgba(241,200,106,.55);
  outline-offset:2px;
}
.ios-only{display:none}
.is-ios .ios-only{display:initial}
.standalone-only{display:none}
.is-standalone .standalone-only{display:initial}

/* Safari / PWA installation helper */
.install-banner{
  display:none;
  position:fixed;
  z-index:90;
  left:max(12px,var(--safe-left));
  right:max(12px,var(--safe-right));
  bottom:calc(84px + var(--safe-bottom));
  padding:13px 13px 13px 15px;
  border:1px solid rgba(241,200,106,.35);
  border-radius:18px;
  background:rgba(13,32,27,.97);
  box-shadow:0 18px 55px rgba(0,0,0,.45);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  align-items:center;
  gap:12px;
}
.install-banner.show{display:flex}
.install-banner .install-copy{min-width:0;flex:1}
.install-banner strong{display:block;font-size:14px}
.install-banner p{margin:2px 0 0;color:var(--muted);font-size:12px;line-height:1.4}
.install-banner button{min-width:44px;min-height:44px;border-radius:13px}
.install-banner .install-open{border:0;background:var(--accent);color:#16231d;font-weight:850;padding:0 13px}
.install-banner .install-close{border:1px solid var(--line);background:transparent;color:var(--muted);font-size:20px;width:44px;padding:0}

.game-settings-panel>summary{display:none}
.game-settings-panel{margin:0;padding:0;border:0;background:transparent}
.mobile-scroll-hint{display:none}

@media (max-width:820px){
  :root{--mobile-tab-height:72px;--mobile-header-height:58px}
  body{
    padding-left:var(--safe-left);
    padding-right:var(--safe-right);
    padding-bottom:calc(var(--mobile-tab-height) + var(--safe-bottom) + 12px);
    background:
      radial-gradient(circle at 92% -6%,rgba(30,107,83,.42),transparent 31%),
      linear-gradient(180deg,#06100e 0,#071512 46%,#06100e 100%);
  }
  .app-shell{min-height:var(--app-height)}
  .topbar{
    height:calc(var(--mobile-header-height) + var(--safe-top));
    padding:var(--safe-top) max(14px,var(--safe-right)) 0 max(14px,var(--safe-left));
    background:rgba(6,16,14,.88);
    border-bottom:1px solid rgba(255,255,255,.075);
    backdrop-filter:saturate(150%) blur(22px);
    -webkit-backdrop-filter:saturate(150%) blur(22px);
  }
  .brand{gap:9px;min-height:44px;padding:0}
  .brand-mark{width:38px;height:38px;border-radius:12px;font-size:14px}
  .brand strong{font-size:15px;letter-spacing:-.01em}
  .brand small{display:none}
  .top-actions{gap:6px}
  .offline-pill{display:none}
  .icon-btn{width:44px;height:44px;border:0;border-radius:14px;background:rgba(255,255,255,.055);font-weight:850}
  .desktop-nav{display:none}

  main{
    width:100%;
    max-width:none;
    padding-left:16px;
    padding-right:16px;
  }
  .page{
    padding:20px 0 calc(28px + var(--safe-bottom));
  }
  .page-header{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:end;
    gap:12px;
    margin-bottom:20px;
  }
  .page-header>div:first-child{min-width:0}
  .page-header h1{font-size:34px;line-height:1.04;margin-bottom:7px}
  .page-header p{font-size:14px;line-height:1.55}
  .header-stat{align-self:start;text-align:right;border:1px solid var(--line);border-radius:14px;padding:8px 10px;background:rgba(15,35,30,.72)}
  .header-stat strong{font-size:25px;line-height:1.05}
  .header-stat span{font-size:10px}
  h2{font-size:25px}
  h3{font-size:17px}
  .eyebrow{font-size:10px;margin-bottom:6px}
  .panel{padding:18px;border-radius:20px;box-shadow:0 14px 38px rgba(0,0,0,.22)}
  .primary,.secondary,.ghost,.choice-row button,.choice-grid button{
    min-height:46px;
    border-radius:14px;
    padding:11px 14px;
  }
  .text-btn{min-height:44px;padding:7px 4px}

  /* iPhone-style bottom tab bar */
  .mobile-nav{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    position:fixed;
    z-index:70;
    left:max(10px,var(--safe-left));
    right:max(10px,var(--safe-right));
    bottom:max(8px,var(--safe-bottom));
    min-height:64px;
    padding:5px 5px 6px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:22px;
    background:rgba(12,31,26,.92);
    box-shadow:0 18px 50px rgba(0,0,0,.42);
    backdrop-filter:saturate(160%) blur(24px);
    -webkit-backdrop-filter:saturate(160%) blur(24px);
  }
  .mobile-nav button{
    min-width:0;
    min-height:52px;
    padding:5px 2px;
    border-radius:17px;
    display:grid;
    grid-template-rows:25px 15px;
    place-items:center;
    gap:0;
    font-size:10px;
    line-height:1;
  }
  .mobile-nav button span{font-size:21px;line-height:1}
  .mobile-nav button.active{color:var(--accent);background:rgba(241,200,106,.105)}
  .mobile-nav button.active span{transform:translateY(-1px)}
  .toast{bottom:calc(88px + var(--safe-bottom));max-width:calc(100% - 32px);text-align:center}
  footer{display:none}

  /* Home */
  .hero-panel{display:flex;flex-direction:column;min-height:auto;padding:8px 0 24px;gap:24px}
  .hero-copy{width:100%}
  .hero-copy h1{font-size:36px;line-height:1.07;letter-spacing:-.045em;margin-bottom:14px}
  .hero-copy>p{font-size:15px;line-height:1.65}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 14px}
  .hero-actions button{width:100%;min-height:50px}
  .hero-meta{gap:8px 12px;font-size:11px}
  .hero-table{order:0;width:100%;padding:2px 0 10px}
  .felt-orbit{width:min(100%,350px);border-width:9px;box-shadow:0 0 0 1px #4b675f,0 22px 55px rgba(0,0,0,.38),inset 0 0 45px rgba(0,0,0,.42)}
  .mini-seat{padding:7px 10px;border-radius:12px;font-size:11px}
  .mini-seat span{width:26px;height:26px}
  .hero-board .playing-card{width:37px}
  .dashboard-grid{display:grid;grid-template-columns:1fr;gap:14px}
  .progress-overview{gap:15px;margin:15px 0}
  .ring{width:82px;height:82px}
  .skill-row,.skill-bars.large .skill-row{grid-template-columns:86px 1fr 34px;gap:8px;font-size:12px}
  .section-block{padding-top:42px}
  .section-heading,.panel-heading{gap:10px}
  .section-heading .text-btn{font-size:12px;white-space:nowrap}
  .category-overview{
    display:flex;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    margin:18px -16px 0;
    padding:0 16px 8px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .category-overview::-webkit-scrollbar{display:none}
  .category-card{flex:0 0 min(82vw,310px);scroll-snap-align:center;padding:18px}
  .feature-grid{grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
  .feature-card{padding:16px;min-height:165px}
  .feature-card h3{font-size:18px;margin:10px 0 6px}
  .feature-card p{font-size:12px;line-height:1.5}

  /* Learning */
  .toolbar{display:grid;gap:12px;margin-bottom:18px}
  .search-box{min-width:0;width:100%;min-height:48px;border-radius:15px}
  .search-box input{font-size:16px}
  .filter-row{
    flex-wrap:nowrap;
    overflow-x:auto;
    margin:0 -16px;
    padding:0 16px 4px;
    scrollbar-width:none;
  }
  .filter-row::-webkit-scrollbar{display:none}
  .filter-row button{flex:0 0 auto;min-height:40px;padding:8px 13px}
  .decision-legend-panel{display:grid;gap:14px;margin-bottom:16px}
  .grade-legend{justify-content:flex-start;gap:6px}
  .grade-badge{font-size:10px;padding:5px 7px}
  .lesson-grid{grid-template-columns:1fr;gap:12px}
  .lesson-card{display:flex;flex-direction:column;min-height:178px;padding:18px;border-radius:18px}
  .lesson-card h3{font-size:19px;margin:10px 0 6px}
  .lesson-card p{font-size:13px;line-height:1.55}
  .lesson-card footer{position:static;margin-top:auto;padding-top:12px;font-size:11px}

  /* Native-like full-height sheets for lessons and glossary */
  .lesson-dialog{
    width:100%;
    max-width:none;
    height:calc(var(--app-height) - max(8px,var(--safe-top)));
    max-height:none;
    margin:max(8px,var(--safe-top)) 0 0;
    border-width:1px 0 0;
    border-radius:24px 24px 0 0;
    overflow:hidden;
  }
  .lesson-dialog[open]{animation:iphoneSheetIn .24s cubic-bezier(.22,.8,.25,1)}
  .lesson-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
  .lesson-dialog-content{
    height:100%;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:58px 18px calc(32px + var(--safe-bottom));
  }
  .dialog-close{
    position:absolute;
    top:12px;
    right:max(12px,var(--safe-right));
    width:42px;
    height:42px;
    border-radius:50%;
    background:rgba(29,57,49,.96);
  }
  .lesson-dialog-content header{padding-right:0;margin-bottom:17px}
  .lesson-dialog-content header h2{font-size:28px;line-height:1.12}
  .lesson-dialog-content .lesson-summary{font-size:15px}
  .lesson-dialog-content .teaching-block{padding:15px;margin:11px 0;border-radius:14px}
  .lesson-dialog-content .deep-dive-grid,.glossary-grid{grid-template-columns:1fr}
  .glossary-index{grid-template-columns:1fr}
  .lesson-complete-row{display:grid;gap:10px;align-items:stretch}
  .lesson-complete-row button{width:100%;min-height:50px}
  @keyframes iphoneSheetIn{from{transform:translateY(16%);opacity:.25}to{transform:translateY(0);opacity:1}}

  /* Training */
  .trainer-tabs{
    position:sticky;
    top:calc(var(--mobile-header-height) + var(--safe-top));
    z-index:24;
    margin:0 -16px 16px;
    padding:8px 16px 10px;
    background:linear-gradient(180deg,rgba(6,16,14,.98) 78%,rgba(6,16,14,0));
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .trainer-tabs::-webkit-scrollbar{display:none}
  .trainer-tabs button{min-height:42px;scroll-snap-align:start}
  .trainer-layout,.calculator-grid,.lab-grid,.review-grid{grid-template-columns:1fr;gap:14px}
  .trainer-main{min-height:0}
  .card-row.large{margin:22px -4px}
  .card-row.large .playing-card{width:54px}
  .choice-grid{grid-template-columns:1fr 1fr;gap:9px}
  .choice-grid button{font-size:13px}
  .position-table{gap:8px;margin:20px auto}
  .position-seat{padding:12px 6px;border-radius:13px;font-size:12px}
  .calculator-card label,.lab-controls label,.game-settings label{font-size:12px}
  .calculator-card input,.calculator-card select,.lab-controls input,.lab-controls select,.game-settings select,.inline-select select,.card-selectors select{min-height:48px;font-size:16px}
  .result-card{min-height:0;align-content:start}
  .big-number{font-size:52px}
  .formula{font-size:12px;line-height:1.55;white-space:normal;overflow-wrap:anywhere}
  .metric-grid{grid-template-columns:1fr 1fr}
  .metric-grid strong{font-size:17px}
  .calc-step{grid-template-columns:28px 1fr;padding:10px}
  .decision-option{grid-template-columns:70px 1fr;gap:7px}
  .decision-option .option-score{grid-column:1/-1;text-align:left}
  .range-panel{overflow:hidden}
  .range-panel .panel-heading{display:grid}
  .inline-select{justify-content:space-between}
  .mobile-scroll-hint{display:block;color:var(--accent2);font-size:11px;margin:2px 0 8px}
  .range-matrix{
    min-width:596px;
    grid-template-columns:repeat(13,42px);
    gap:3px;
    margin:12px 0 0;
  }
  .range-cell{font-size:10px;border-radius:6px;min-height:42px}
  #rangeMatrix{
    overflow:visible;
  }
  .range-panel{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .range-info{min-width:0}

  /* Equity lab */
  .card-selectors{grid-template-columns:1fr 1fr}
  .card-selectors.board{grid-template-columns:repeat(3,1fr)}
  .lab-results{min-height:0}
  .lab-preview{min-height:0;display:grid;grid-template-columns:1fr;align-items:start}
  .lab-preview>div{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .lab-preview .card-row{justify-content:flex-end}
  .empty-state{min-height:250px}
  .button-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}
  .button-row .primary{grid-column:1/-1}
  .equity-summary{gap:7px}
  .equity-summary div{padding:11px 6px}
  .equity-summary strong{font-size:20px}

  /* AI table */
  #page-play{padding-top:14px}
  #page-play .page-header.compact{display:block;margin-bottom:12px}
  #page-play .page-header.compact>div:first-child p{font-size:13px}
  .game-settings-panel{
    margin-top:14px;
    border:1px solid var(--line);
    border-radius:17px;
    background:rgba(14,34,29,.88);
    overflow:hidden;
  }
  .game-settings-panel>summary{
    display:flex;
    min-height:50px;
    padding:12px 14px;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    cursor:pointer;
    list-style:none;
    color:var(--text);
  }
  .game-settings-panel>summary::-webkit-details-marker{display:none}
  .game-settings-panel>summary:after{content:'⌄';color:var(--accent);font-size:18px;transition:.2s}
  .game-settings-panel[open]>summary:after{transform:rotate(180deg)}
  .game-settings-panel>summary strong{font-size:14px}
  .game-settings-panel>summary span{font-size:11px;color:var(--muted);text-align:right}
  .game-settings{
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:0 14px 14px;
    border-top:1px solid rgba(255,255,255,.06);
  }
  .game-settings label{margin:11px 0 0}
  .game-settings .compact-btn{grid-column:1/-1;min-height:46px}
  .ai-roster-config{margin:0 0 12px}
  .ai-roster-config summary{padding:13px 15px}
  .ai-roster-config summary span{font-size:11px}
  .ai-roster-editor{grid-template-columns:1fr;padding:12px}
  .ai-config-row{grid-template-columns:52px 1fr 1fr;padding:8px}
  .ai-config-row select{font-size:14px;min-height:42px;padding:7px}
  .game-layout{grid-template-columns:1fr;gap:14px}
  .poker-table-wrap{margin-left:-16px;margin-right:-16px}
  .poker-table{
    width:100%;
    height:clamp(520px,67dvh,640px);
    border-width:7px;
    border-radius:34%;
    box-shadow:0 0 0 1px #49675e,inset 0 0 56px rgba(0,0,0,.48),0 16px 42px rgba(0,0,0,.3);
  }
  .table-center{width:56%;top:49%}
  .table-center .playing-card{width:33px;border-radius:6px;padding:3px;font-size:10px}
  .board-row{min-height:49px;gap:3px}
  .game-status{font-size:10px;line-height:1.35;margin:0 -15px 8px}
  .pot-display{margin-top:7px}
  .pot-display strong{font-size:19px}
  .seat-slot{gap:3px}
  .seat-slot .player-seat{min-width:88px;max-width:105px;padding:6px 7px;border-radius:12px;gap:5px}
  .seat-slot .avatar{display:none}
  .seat-slot .seat-copy strong{max-width:74px;font-size:10px}
  .seat-slot .seat-copy span{font-size:8.5px}
  .seat-slot .position-tag,.seat-slot .state-tag{font-size:7px!important;padding:1px 4px}
  .seat-slot .dealer-chip{right:-8px;top:-8px;width:22px;height:22px}
  .seat-slot .playing-card{width:27px;min-height:38px;font-size:8px;padding:3px}
  .seat-slot.hero-slot .playing-card{width:38px;min-height:54px;font-size:11px}
  .seat-slot .hole-cards{min-height:38px}
  .street-bet{font-size:8px;padding:2px 5px}
  .seat-slot.lower .street-bet{--bet-offset-y:-48px}
  .seat-slot.upper .street-bet{--bet-offset-y:48px}
  .seat-slot.side-left .street-bet{--bet-offset-x:50px}
  .seat-slot.side-right .street-bet{--bet-offset-x:-50px}
  .action-bar{
    position:sticky;
    z-index:26;
    bottom:calc(var(--mobile-tab-height) + var(--safe-bottom) + 5px);
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin:-2px 8px 0;
    padding:10px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:19px;
    background:rgba(8,24,19,.94);
    box-shadow:0 14px 38px rgba(0,0,0,.38);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
  }
  .action-bar button{min-width:0;width:100%;min-height:46px;padding:8px 5px;font-size:11px;line-height:1.2}
  .action-bar .action-note{grid-column:1/-1;font-size:10px;line-height:1.4;padding:0 3px}
  .coach-column{grid-template-columns:1fr;gap:12px;margin:0 0 8px}
  .coach-panel,.log-panel{margin:0}
  .coach-panel{min-height:0}
  .game-log{max-height:340px}
  .decision-ranking{gap:7px}

  /* Review */
  .review-steps{grid-template-columns:1fr}
  .history-item{align-items:flex-start}
  .history-main{min-width:0}
  details summary{min-height:44px;display:flex;align-items:center}
}

@media (max-width:390px){
  main{padding-left:13px;padding-right:13px}
  .hero-copy h1{font-size:33px}
  .hero-actions{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr 1fr}
  .feature-card{padding:14px;min-height:154px}
  .feature-card h3{font-size:17px}
  .panel{padding:16px}
  .page-header h1{font-size:31px}
  .poker-table-wrap{margin-left:-13px;margin-right:-13px}
  .poker-table{height:535px}
  .seat-slot .player-seat{min-width:82px;max-width:96px}
  .seat-slot .seat-copy strong{max-width:67px}
  .table-center{width:58%}
  .action-bar{margin-left:6px;margin-right:6px}
  .lesson-dialog-content{padding-left:16px;padding-right:16px}
}

@media (orientation:landscape) and (max-height:520px) and (max-width:950px){
  :root{--mobile-header-height:48px;--mobile-tab-height:58px}
  .topbar{height:calc(var(--mobile-header-height) + var(--safe-top))}
  .brand-mark{width:34px;height:34px}
  .mobile-nav{left:auto;width:70px;top:calc(var(--safe-top) + 54px);bottom:max(8px,var(--safe-bottom));right:max(8px,var(--safe-right));grid-template-columns:1fr;grid-template-rows:repeat(6,1fr);min-height:0}
  .mobile-nav button{min-height:0;grid-template-rows:20px 12px}
  .mobile-nav button span{font-size:18px}
  body{padding-right:calc(82px + var(--safe-right));padding-bottom:var(--safe-bottom)}
  .page{padding-top:12px;padding-bottom:18px}
  #page-play .page-header.compact>div:first-child p,#page-play .eyebrow{display:none}
  #page-play .page-header.compact h1{font-size:27px;margin-bottom:0}
  .poker-table{height:430px;border-radius:37%}
  .action-bar{bottom:8px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Final iPhone poker-table fit: keep Hero and all legal actions visible together. */
@media (max-width:820px){
  #page-play .page-header.compact>div:first-child p{display:none}
  #page-play .page-header.compact h1{font-size:32px;margin-bottom:0}
  #page-play .page-header.compact .eyebrow{margin-bottom:3px}
  .ai-roster-config{padding:0!important}
  .ai-roster-config summary{min-height:50px!important;display:flex!important;padding:10px 14px!important}
  .ai-roster-config summary span{display:none}
  .poker-table{height:clamp(500px,63dvh,560px)}
  .seat-slot.hero-slot{top:75%!important}
  .action-bar{
    display:flex;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:5px;
    min-height:62px;
    padding:7px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
  }
  .action-bar::-webkit-scrollbar{display:none}
  .action-bar button{
    flex:1 1 0;
    min-width:64px;
    min-height:48px;
    padding:6px 3px;
    font-size:10px;
  }
  .action-bar .action-note{display:none}
  .action-bar button:only-child{flex-basis:100%}
}
@media (max-width:390px){
  .poker-table{height:510px}
  .action-bar button{min-width:61px;font-size:9.5px}
}