/* Navigation belongs to the page. Progress and player identities belong to the table. */
:root body.table-identity-layout .app-header,
:root body.table-identity-layout .app-main{--header:64px}
:root body.table-identity-layout .app-header{
  height:calc(var(--header) + env(safe-area-inset-top));
  grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-rows:1fr;gap:16px;
  padding-block:calc(8px + env(safe-area-inset-top)) 8px;
}
:root body.table-identity-layout .app-header .brand{grid-area:1/1;min-width:0}
:root body.table-identity-layout .app-header .header-controls{grid-area:1/3}
:root body.table-identity-layout .app-header .tabs{grid-area:1/2;display:flex;gap:8px;align-items:center}
:root body.table-identity-layout .app-header .tabs button{
  position:relative;min-height:40px;min-width:36px;padding:8px;font-size:14px;line-height:20px;
  border:0;border-radius:6px;background:transparent;color:var(--muted);white-space:nowrap;
}
:root body.table-identity-layout .app-header .tabs button[aria-selected=true]{color:var(--ink);font-weight:600}
:root body.table-identity-layout .app-header .tabs button[aria-selected=true]::after{
  content:'';position:absolute;bottom:1px;left:calc(50% - 8px);width:16px;height:2px;
  border-radius:2px;background:var(--accent);
}
:root body.table-identity-layout .table-heading{min-width:0;display:grid;gap:4px}
:root body.table-identity-layout .table-heading .match-goal{
  grid-area:auto;max-width:none;width:100%;padding:2px 8px 0;margin:0;min-width:0;
}
:root body.table-identity-layout #level-track{--fc-paper:var(--table)}
:root body.table-identity-layout #level-track .fc-vine-axis{font-size:11px;line-height:12px}
:root body.table-identity-layout .table-heading .topline{grid-area:auto;gap:12px;min-width:0;min-height:32px}
:root body.table-identity-layout .table-heading .shared-flower{margin:0}
:root body.table-identity-layout .table-heading #match-meta{white-space:nowrap;margin-left:auto}
:root body.table-identity-layout .table-heading #hr-reference{margin-left:auto}
:root body.table-identity-layout .table .hand-group{display:flex;flex-direction:column;gap:0}
:root body.table-identity-layout .table .player-identity{
  display:flex;align-items:center;justify-content:center;gap:4px;min-height:22px;
  font-size:12px;line-height:18px;font-weight:500;color:var(--muted);
}
:root body.table-identity-layout .player-flower{display:block;flex:none;width:20px;height:22.5px;overflow:visible}
:root body.table-identity-layout .player-flower-red path[fill="#D83B74"]{fill:var(--flower)}
:root body.table-identity-layout .player-flower-red path[fill="#DEB04A"]{fill:var(--gold)}
:root body.table-identity-layout .player-flower-gold path[fill="#D83B74"]{fill:var(--gold)}
:root body.table-identity-layout .player-flower-gold path[fill="#DEB04A"]{fill:var(--sz-brand-red,var(--flower))}
:root body.table-identity-layout .table-sr-only{
  position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;
}
@media(min-width:1000px){
 :root body.table-identity-layout .table-heading{grid-template-columns:minmax(300px,1fr) auto;gap:32px;align-items:center}
 :root body.table-identity-layout .table-heading .topline{gap:24px}
}
@media(max-width:760px){
 :root body.table-identity-layout .app-header,:root body.table-identity-layout .app-main{--header:60px}
 :root body.table-identity-layout .app-header{gap:8px;padding-inline:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
 :root body.table-identity-layout .app-header .brand{gap:6px}
 :root body.table-identity-layout .app-header .brand h1{font-size:19px;white-space:nowrap;letter-spacing:-.04em}
 :root body.table-identity-layout .app-header .brand-symbol{width:25px;height:29px}
 :root body.table-identity-layout .app-header .tabs{gap:2px}
 :root body.table-identity-layout .app-header .tabs button,:root body.table-identity-layout .app-header .header-controls button{font-size:12px;padding:8px 4px}
 :root body.table-identity-layout .app-header .header-controls{gap:2px}
 :root body.table-identity-layout .table-heading{gap:2px}
 :root body.table-identity-layout .table-heading .match-goal{padding-inline:4px}
}
@media(max-width:380px){
 :root body.table-identity-layout .app-header{gap:4px;padding-inline:10px}
 :root body.table-identity-layout .app-header .brand h1{font-size:17px}
 :root body.table-identity-layout .app-header .brand-symbol{width:21px;height:25px}
 :root[lang=en] body.table-identity-layout .app-header .brand h1{font-size:15px}
 :root[lang=en] body.table-identity-layout .app-header .brand{gap:3px}
 :root body.table-identity-layout .app-header .tabs button,:root body.table-identity-layout .app-header .header-controls button{padding-inline:3px}
}
@media(max-height:480px) and (min-width:480px){
 :root body.table-identity-layout .app-header,:root body.table-identity-layout .app-main{--header:52px}
 :root body.table-identity-layout .app-header{padding-block:calc(4px + env(safe-area-inset-top)) 4px}
 :root body.table-identity-layout .table-heading{grid-area:top;grid-template-columns:minmax(200px,1fr) auto;gap:24px;align-items:center}
 :root body.table-identity-layout .table-heading .topline{gap:14px}
 :root body.table-identity-layout .table .player-identity{min-height:20px}
}
@media(max-width:760px) and (max-height:650px){
 :root body.table-identity-layout .app-header,:root body.table-identity-layout .app-main{--header:52px}
 :root body.table-identity-layout .app-header{padding-block:calc(4px + env(safe-area-inset-top)) 4px}
 :root body.table-identity-layout .table-heading .topline{min-height:28px}
 :root body.table-identity-layout .table .player-identity{min-height:20px}
 :root body.table-identity-layout .player-flower{width:18px;height:20px}
}

/* Supporting information stays close to its use instead of forming a second toolbar. */
:root body.table-context-layout .table-heading{position:relative;display:block;padding-top:16px}
:root body.table-context-layout .table-heading .topline{display:none}
:root body.table-context-layout .table-heading #match-meta{
  position:absolute;top:0;right:4px;margin:0;font-size:11px;line-height:14px;font-weight:400;color:var(--muted);
}
:root body.table-context-layout .table .player-identity{justify-content:flex-start}
:root body.table-context-layout .hand-tools{display:flex;align-items:center;gap:12px;min-width:0;min-height:36px}
:root body.table-context-layout .hand-tools .player-identity{margin-right:auto;flex:none;order:-1}
:root body.table-context-layout .hand-tools .shared-flower{
  font-size:12px;line-height:18px;padding:0;margin:0;min-height:0;border:0;background:transparent;white-space:nowrap;order:0;
}
:root body.table-context-layout .hand-tools #hr-reference{
  position:relative;inset:auto;transform:none;order:1;margin:0;flex:none;z-index:30;
}
:root body.table-context-layout .hand-tools #hr-reference #hr-toggle{
  min-height:36px;min-width:64px;padding:8px 6px;font-size:12px;line-height:18px;
  border:0;background:transparent;gap:8px;
}
:root body.table-context-layout .hand-tools #hr-reference #hr-toggle[aria-expanded=true]{background:var(--soft)}
:root body.table-context-layout .hand-tools #hr-reference #hr-panel{
  position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);
  width:min(360px,calc(100vw - 32px));max-width:none;max-height:calc(var(--app-height,100dvh) - 100px);
  padding:16px 20px;overflow:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 48px #0003;z-index:40;
}
@media(min-width:1000px){
 :root body.table-context-layout .table-heading{display:grid;grid-template-columns:minmax(300px,1fr) auto;align-items:center;gap:32px;padding-top:0}
 :root body.table-context-layout .table-heading #match-meta{position:static;font-size:12px;line-height:18px}
}
@media(max-width:380px){
 :root body.table-context-layout .hand-tools{gap:8px}
}
@media(max-width:760px) and (max-height:650px){
 :root body.table-context-layout .table-heading{padding-top:14px}
 :root body.table-context-layout .hand-tools{min-height:32px}
 :root body.table-context-layout .hand-tools #hr-reference #hr-toggle{min-height:32px;padding-block:6px}
}
@media(max-height:480px) and (min-width:480px){
 :root body.table-context-layout .table-heading{display:grid;grid-template-columns:minmax(200px,1fr) auto;gap:24px;padding-top:0}
 :root body.table-context-layout .table-heading #match-meta{position:static}
 :root body.table-context-layout .hand-tools{gap:4px;flex-wrap:wrap}
 :root body.table-context-layout .hand-tools #hr-reference #hr-toggle{min-width:50px;padding-inline:4px}
 :root body.table-context-layout .hand-tools #hr-reference #hr-panel{max-height:calc(var(--app-height,100dvh) - 32px)}
}

/* One table context row; commands live with the app navigation. */
:root body.table-stage-layout .table-heading{display:block;padding-top:0}
:root body.table-stage-layout .opponent-heading,:root body.table-stage-layout .hand-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:26px}
:root body.table-stage-layout .opponent-heading #match-meta{position:static;margin:0;font-size:12px;line-height:18px;color:var(--muted);white-space:nowrap}
:root body.table-stage-layout .app-header #hr-reference{position:relative;inset:auto;transform:none;margin:0;flex:none;z-index:40}
:root body.table-stage-layout .app-header #hr-reference #hr-toggle{min-width:0;min-height:40px;padding:8px 6px;border:0;background:transparent;color:var(--muted);font-size:14px;line-height:20px;gap:0}
:root body.table-stage-layout .app-header #hr-reference #hr-toggle i{display:none}
:root body.table-stage-layout .app-header #hr-reference #hr-toggle[aria-expanded=true]{color:var(--ink);background:var(--soft)}
:root body.table-stage-layout .app-header #hr-reference #hr-panel{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(360px,calc(100vw - 32px));max-width:none;max-height:calc(var(--app-height,100dvh) - 80px);padding:16px 20px;overflow:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 48px #0003;z-index:50}
:root body.table-stage-layout .menu-replay-shortcut{padding:8px 24px;border-bottom:1px solid var(--line)}
:root body.table-stage-layout .menu-replay-shortcut button{width:100%;text-align:left;border:0;background:transparent;padding:10px 0;font-size:14px;color:var(--ink)}
:root body.table-stage-layout .menu-replay-shortcut button::after{content:'↗';float:right;color:var(--muted)}
/* Result and selection share reserved space, so a combat outcome adds no new row. */
:root body.table-stage-layout #action-panel,
:root body.table-stage-layout #action-panel:has(#selection-preview[hidden]),
:root body.table-stage-layout #action-panel.is-hand-exchange,
:root body.table-stage-layout #action-panel:has(#next-game){
 display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);grid-template-areas:'copy buttons';gap:0 10px;height:76px;min-height:76px;box-sizing:border-box;align-items:center;
}
:root body.table-stage-layout #action-panel .action-copy{grid-area:copy;min-width:0;max-height:100%;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain;display:flex;flex-direction:column;justify-content:center;gap:1px}
:root body.table-stage-layout #action-panel .action-copy>*{margin:0;flex:none}
:root body.table-stage-layout #action-panel #formula{font-size:12px;line-height:18px;text-align:left;font-weight:500}
:root body.table-stage-layout #action-panel #action-buttons{grid-area:buttons;align-self:center}
:root body.table-stage-layout #action-panel #error:empty{display:none}
:root body.table-stage-layout #action-panel:has(#error:not(:empty)){height:auto;grid-template-rows:auto auto;grid-template-areas:'copy buttons' 'error error'}
:root body.table-stage-layout #action-panel #error{grid-area:error}
:root body.table-stage-layout #action-panel .upgrade-jump{font-size:18px;line-height:20px}
:root body.table-stage-layout .combat-title{height:54px;min-height:54px;align-content:flex-start}
@media(max-width:760px){
 :root body.table-stage-layout .app-header #hr-reference #hr-toggle{font-size:12px;padding-inline:4px}
 :root body.table-stage-layout #action-panel .preview-score small{font-size:11px}
}
@media(min-width:361px) and (max-width:760px) and (min-height:740px){
 :root body.table-stage-layout .app-main:not(.is-replay){--handw:74px;--handh:104px;--handstep:38px;--handrank:32px}
}
@media(min-width:410px) and (max-width:760px) and (min-height:800px){
 :root body.table-stage-layout .app-main:not(.is-replay){--handw:80px;--handh:112px;--handstep:41px;--handrank:34px}
}
@media(min-width:1100px) and (min-height:801px){
 :root body.table-stage-layout .app-main:not(.is-replay){--handw:94px;--handh:132px;--handstep:52px;--handrank:36px}
}
@media(max-height:720px){
 :root body.table-stage-layout #action-panel,:root body.table-stage-layout #action-panel:has(#selection-preview[hidden]),:root body.table-stage-layout #action-panel.is-hand-exchange,:root body.table-stage-layout #action-panel:has(#next-game){height:64px;min-height:64px}
 :root body.table-stage-layout .combat-title{height:48px;min-height:48px;align-content:flex-start}
}
@media(max-width:380px){:root body.table-stage-layout .app-header #hr-reference #hr-toggle{padding-inline:3px}}
@media(max-height:650px){
 :root body.table-stage-layout #action-panel,:root body.table-stage-layout #action-panel:has(#selection-preview[hidden]),:root body.table-stage-layout #action-panel.is-hand-exchange,:root body.table-stage-layout #action-panel:has(#next-game){height:60px;min-height:60px}
 :root body.table-stage-layout .opponent-heading,:root body.table-stage-layout .hand-tools{min-height:22px}
 :root body.table-stage-layout .opponent-heading #match-meta{font-size:11px}
 :root body.table-stage-layout #action-panel #formula{line-height:16px}
}
@media(max-height:480px) and (min-width:480px){
 :root body.table-stage-layout .opponent-heading{flex-wrap:wrap;gap:0 8px}
 :root body.table-stage-layout .app-header #hr-reference #hr-panel{max-height:calc(var(--app-height,100dvh) - 24px)}
}
/* Compact results retain all three facts without scrolling or growing the frame. */
:root body.table-stage-layout #action-panel .preview-score:has(.upgrade-jump) small{display:none}
:root body.table-stage-layout #action-panel .upgrade-jump{display:inline-flex;align-items:center;white-space:nowrap}
@media(max-height:720px){
 :root body.table-stage-layout #action-panel:has(.upgrade-jump) #action-buttons{flex-direction:column;align-items:stretch;gap:4px}
 :root body.table-stage-layout #action-panel:has(.upgrade-jump) #action-buttons button{min-height:24px;padding:2px 6px;font-size:12px;line-height:16px}
 :root body.table-stage-layout #action-panel:has(.upgrade-jump) #action-title{font-size:12px;line-height:16px}
 :root body.table-stage-layout #action-panel:has(.upgrade-jump) .upgrade-jump{font-size:16px;line-height:16px}
 :root body.table-stage-layout #action-panel:has(.upgrade-jump) #formula{font-size:11px;line-height:16px}
 :root body.table-stage-layout #action-panel:has(.upgrade-jump) .action-copy{gap:0}
}

/* A decline stays reachable on short screens, where duplicate swap buttons hide. */
:root body.table-stage-layout #action-panel.is-hand-exchange:has(#skip-refresh) #action-buttons{display:flex;flex-direction:row;gap:6px}
:root body.table-stage-layout #action-panel #skip-refresh{white-space:nowrap;min-width:44px;min-height:36px}