/**
 * Portrait play layout — gated by html.tcg-portrait-play
 * (Android Capacitor, ?play=portrait, or touch-web portrait auto).
 * Size modifiers: .tcg-portrait-phone | .tcg-portrait-phone-sm | .tcg-portrait-square | .tcg-portrait-tablet
 * --p-ui-scale (unitless, set by tcgPortraitUiScale) shrinks fixed-px HUD chrome on small phones.
 */

/* ── Safe areas & base shell ── */
html.tcg-portrait-play,
html.tcg-portrait-play body{
  width:100%;
  height:var(--tcg-vv-height, 100dvh);
  min-height:var(--tcg-vv-height, 100dvh);
  max-height:var(--tcg-vv-height, 100dvh);
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
  touch-action:manipulation;
}
html.tcg-portrait-play body.tcg-portrait-play-body{
  padding:max(0px,env(safe-area-inset-top,0px),var(--tcg-safe-top-fallback,0px))
    env(safe-area-inset-right,0px)
    max(0px,env(safe-area-inset-bottom,0px),var(--tcg-safe-bottom-fallback,0px))
    env(safe-area-inset-left,0px);
  box-sizing:border-box;
}
/* Match board is already edge-to-edge; side safe-area gutters were insetting the hands. */
html.tcg-portrait-play body.tcg-portrait-play-body:has(#screen-game.active){
  padding-left:0;
  padding-right:0;
}
html.tcg-portrait-play #tcg-mobile-rotate-hint,
html.tcg-portrait-play #tcg-mobile-rotate-hint.show{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
html.tcg-portrait-play.tcg-mobile-portrait .screen,
html.tcg-portrait-play.tcg-mobile-portrait .overlay,
html.tcg-portrait-play.tcg-mobile-portrait #toast,
html.tcg-portrait-play.tcg-mobile-portrait #center-banner,
html.tcg-portrait-play.tcg-mobile-portrait #perf-spectacle,
html.tcg-portrait-play.tcg-mobile-portrait #live-judge-overlay,
html.tcg-portrait-play.tcg-mobile-portrait #rule-kw-tip,
html.tcg-portrait-play.tcg-mobile-portrait #opp-skill-wait-banner{
  display:revert!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
html.tcg-portrait-play #tcg-phone-fs-btn,
html.tcg-portrait-play #tcg-phone-fs-btn.show{display:none!important}
html.tcg-portrait-play.tcg-phone-fs-web #tcg-phone-fs-btn.show{display:block!important}
html.tcg-portrait-play #llc-sky-bg{opacity:.55}

/* ═══════════════════════════════════════════
   MENUS — large touch targets, single column
   ═══════════════════════════════════════════ */
html.tcg-portrait-play .llc-menu-screen.active,
html.tcg-portrait-play .screen.llc-menu-screen.active{
  display:flex!important;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  width:100%;
  height:100%;
  max-height:100dvh;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  /* Keep chrome below notch / status bar (env may be 0 on some WebViews — floor helps). */
  padding:max(20px,env(safe-area-inset-top,0px),var(--tcg-safe-top-fallback,0px)) 12px
    max(16px,env(safe-area-inset-bottom,0px),var(--tcg-safe-bottom-fallback,0px));
  box-sizing:border-box;
}
html.tcg-portrait-play .llc-menu-screen .account-shell,
html.tcg-portrait-play .llc-menu-screen .account-shell.wide{
  width:100%;
  max-width:100%;
  /* flex-start parent + margin-block:auto → centers when short, scrolls when tall */
  margin-block:auto;
  margin-inline:auto;
  flex:0 1 auto;
}
html.tcg-portrait-play .logo-img{
  max-width:min(280px,70vw);
}
html.tcg-portrait-play .llc-menu-item,
html.tcg-portrait-play .llc-menu-screen .btn-grad,
html.tcg-portrait-play .llc-menu-screen .btn-out{
  min-height:56px;
  font-size:16px;
  padding:14px 16px;
  touch-action:manipulation;
}
html.tcg-portrait-play .llc-menu-item-title{font-size:16px}
html.tcg-portrait-play .llc-menu-item-sub{font-size:12px;line-height:1.35}
html.tcg-portrait-play .llc-menu-row{
  flex-direction:column;
  gap:10px;
}
html.tcg-portrait-play .llc-menu-row > .llc-menu-item{
  flex:1 1 auto;
  width:100%;
  max-width:none;
  min-width:0;
}
html.tcg-portrait-play .llc-menu-row--deck > .llc-menu-item--tiny .llc-menu-item-sub,
html.tcg-portrait-play .llc-menu-row--deck > .llc-menu-item--narrow .llc-menu-item-sub{
  display:block;
}
html.tcg-portrait-play .lobby-cols{
  flex-direction:column;
  align-items:stretch;
  max-width:100%;
  gap:14px;
}
html.tcg-portrait-play .lobby-col,
html.tcg-portrait-play .lobby-setup{
  width:100%;
  max-width:100%;
}
html.tcg-portrait-play input,
html.tcg-portrait-play select,
html.tcg-portrait-play textarea,
html.tcg-portrait-play button{
  font-size:16px; /* avoid iOS zoom */
}
html.tcg-portrait-play .auth-box,
html.tcg-portrait-play .wait-box{
  width:100%;
  max-width:100%;
}

/* Modal menu overlays — below notch, vertically centered (not top-stuck) */
html.tcg-portrait-play #overlay-login-bonus.llc-menu-screen,
html.tcg-portrait-play #overlay-login-bonus.open,
html.tcg-portrait-play #overlay-missions.llc-menu-screen,
html.tcg-portrait-play #overlay-missions.open,
html.tcg-portrait-play #overlay-mission-starter.llc-menu-screen,
html.tcg-portrait-play #overlay-mission-starter.open,
html.tcg-portrait-play #overlay-news.llc-menu-screen,
html.tcg-portrait-play #overlay-news.open,
html.tcg-portrait-play #overlay-profile.llc-menu-screen,
html.tcg-portrait-play #overlay-profile.open,
html.tcg-portrait-play #overlay-profile-stats.llc-menu-screen,
html.tcg-portrait-play #overlay-profile-stats.open,
html.tcg-portrait-play #overlay-friends.llc-menu-screen,
html.tcg-portrait-play #overlay-friends.open,
html.tcg-portrait-play #overlay-profile-mod.llc-menu-screen,
html.tcg-portrait-play #overlay-profile-mod.open{
  display:flex!important;
  align-items:center;
  justify-content:center;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:max(20px,env(safe-area-inset-top,0px),var(--tcg-safe-top-fallback,0px)) 14px
    max(16px,env(safe-area-inset-bottom,0px),var(--tcg-safe-bottom-fallback,0px));
  box-sizing:border-box;
}
html.tcg-portrait-play #overlay-login-bonus:not(.open),
html.tcg-portrait-play #overlay-missions:not(.open),
html.tcg-portrait-play #overlay-mission-starter:not(.open),
html.tcg-portrait-play #overlay-news:not(.open),
html.tcg-portrait-play #overlay-profile:not(.open),
html.tcg-portrait-play #overlay-profile-stats:not(.open),
html.tcg-portrait-play #overlay-friends:not(.open),
html.tcg-portrait-play #overlay-profile-mod:not(.open){
  display:none!important;
}
html.tcg-portrait-play #overlay-login-bonus .login-bonus-shell,
html.tcg-portrait-play #overlay-missions .missions-shell,
html.tcg-portrait-play #overlay-mission-starter .mission-starter-shell,
html.tcg-portrait-play #overlay-news .news-shell{
  width:100%;
  max-width:min(520px,96vw);
  margin-block:auto;
  /* Hug content so a short panel sits mid-screen (not a tall empty blue slab). */
  flex:0 1 auto;
  height:auto;
  max-height:min(78dvh,720px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
html.tcg-portrait-play .social-overlay .social-shell{
  width:100%;
  max-width:100%;
  margin-block:auto;
  flex:0 1 auto;
  height:auto;
  max-height:min(78dvh,720px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
html.tcg-portrait-play #overlay-missions .missions-panel-shell{
  flex:0 1 auto;
  max-height:min(70dvh,640px);
  height:auto;
}
html.tcg-portrait-play #overlay-login-bonus .login-bonus-lead{
  font-size:14px;
  line-height:1.45;
  margin:0 0 16px;
  text-align:center;
}
html.tcg-portrait-play #overlay-login-bonus .login-bonus-kanon{
  width:52px;
  height:56px;
}
html.tcg-portrait-play #overlay-login-bonus .login-bonus-title-text{
  font-size:clamp(20px,5.5vw,26px);
}
html.tcg-portrait-play #login-bonus-grid{
  gap:10px;
}
html.tcg-portrait-play .login-bonus-cell{
  min-height:120px;
  padding:10px 4px 12px;
  gap:6px;
  justify-content:center;
  overflow:hidden;
  min-width:0;
}
html.tcg-portrait-play .login-bonus-day{
  font-size:11px;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
html.tcg-portrait-play .login-bonus-icon-wrap{
  min-height:52px;
  margin:4px 0;
}
html.tcg-portrait-play .login-bonus-icon{
  width:48px;
  height:48px;
}
html.tcg-portrait-play .login-bonus-pr-badge{
  min-width:48px;
  height:32px;
  font-size:14px;
  border-radius:10px;
  padding:0 10px;
}
html.tcg-portrait-play .login-bonus-reward{
  font-size:11px;
  line-height:1.2;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  overflow-wrap:anywhere;
  word-break:break-word;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}

/* Deck builder — compact chrome, card list dominates */
html.tcg-portrait-play #screen-deck.active{
  display:flex!important;
  flex-direction:column;
  height:100%;
  max-height:100dvh;
  overflow:hidden!important;
  padding: max(6px, env(safe-area-inset-top, 0px)) 8px max(8px, env(safe-area-inset-bottom, 0px));
  box-sizing:border-box;
}
html.tcg-portrait-play #screen-deck .deck-builder-shell{
  max-width:100%;
  width:100%;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
html.tcg-portrait-play #screen-deck .account-panel{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:8px 8px 10px;
}
html.tcg-portrait-play #screen-deck .logo,
html.tcg-portrait-play #screen-deck .deck-builder-hint,
html.tcg-portrait-play #screen-deck .deck-builder-meta,
html.tcg-portrait-play #screen-deck #deck-sleeve-empty-hint,
html.tcg-portrait-play #screen-deck .deck-builder-hint--compact,
html.tcg-portrait-play #screen-deck #deck-starter-hint{
  display:none!important;
}
html.tcg-portrait-play #screen-deck .account-screen-head{
  flex:0 0 auto;
  margin-bottom:6px;
  gap:8px;
}
html.tcg-portrait-play #screen-deck .account-screen-head h2{
  font-size:16px;
  margin:0;
}
html.tcg-portrait-play #screen-deck #portrait-deck-chrome,
html.tcg-portrait-play #screen-deck .portrait-deck-chrome{
  display:grid!important;
  grid-template-columns:minmax(0,1.1fr) auto minmax(0,1.2fr);
  grid-template-areas:
    "preset sleeve views"
    "search playmat tools"
    "stats stats stats"
    "batch batch batch";
  column-gap:6px;
  row-gap:6px;
  flex:0 0 auto;
  margin:0 0 6px;
  align-items:center;
}
html.tcg-portrait-play #screen-deck .portrait-deck-row{
  display:contents;
}
html.tcg-portrait-play #screen-deck .portrait-deck-preset-wrap{
  grid-area:preset;
  flex:unset;
  min-width:0;
  margin:0;
  width:100%;
}
html.tcg-portrait-play #screen-deck .portrait-deck-preset-wrap select{
  width:100%;
  min-height:36px;
  font-size:13px;
  font-weight:700;
}
html.tcg-portrait-play #screen-deck .portrait-deck-sleeve-host{
  grid-area:sleeve;
}
html.tcg-portrait-play #screen-deck .portrait-deck-playmat-host{
  grid-area:playmat;
}
html.tcg-portrait-play #screen-deck .portrait-deck-sleeve-host,
html.tcg-portrait-play #screen-deck .portrait-deck-playmat-host{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
}
html.tcg-portrait-play #screen-deck .portrait-deck-sleeve-host .deck-sleeve-picker,
html.tcg-portrait-play #screen-deck .portrait-deck-sleeve-host #deck-sleeve-picker,
html.tcg-portrait-play #screen-deck .portrait-deck-playmat-host .deck-playmat-picker,
html.tcg-portrait-play #screen-deck .portrait-deck-playmat-host #deck-playmat-picker{
  display:block!important;
}
html.tcg-portrait-play #screen-deck .portrait-deck-sleeve-host .deck-sleeve-current,
html.tcg-portrait-play #screen-deck .portrait-deck-playmat-host .deck-playmat-current{
  padding:2px;
  gap:0;
  min-width:36px;
  max-width:40px;
  border-radius:8px;
}
html.tcg-portrait-play #screen-deck .portrait-deck-sleeve-host .deck-sleeve-current__meta,
html.tcg-portrait-play #screen-deck .portrait-deck-playmat-host .deck-playmat-current__meta{
  display:none!important;
}
html.tcg-portrait-play #screen-deck .portrait-deck-sleeve-host .deck-sleeve-current__art{
  width:32px!important;
  height:32px!important;
  border-radius:4px;
}
html.tcg-portrait-play #screen-deck .portrait-deck-sleeve-host .deck-sleeve-current__art--none{
  width:24px!important;
  height:auto!important;
}
html.tcg-portrait-play #screen-deck .portrait-deck-playmat-host .deck-playmat-current{
  min-width:40px;
  max-width:48px;
}
html.tcg-portrait-play #screen-deck .portrait-deck-playmat-host .deck-playmat-current__art{
  width:40px!important;
  height:auto!important;
  aspect-ratio:1024 / 563;
  border-radius:4px;
}
html.tcg-portrait-play #screen-deck .portrait-deck-playmat-host .deck-playmat-current__art--none{
  opacity:.85;
}
html.tcg-portrait-play #screen-deck #deck-playmat-empty-hint{
  display:none!important;
}
html.tcg-portrait-play #screen-deck .portrait-deck-view-toggle{
  grid-area:views;
  display:flex;
  flex:unset;
  min-width:0;
  width:100%;
  border:1px solid rgba(186,228,255,.28);
  border-radius:10px;
  overflow:hidden;
}
html.tcg-portrait-play #screen-deck .portrait-deck-view-btn{
  flex:1 1 0;
  min-height:36px;
  min-width:0;
  padding:4px 6px;
  border:none;
  background:transparent;
  color:#fff;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
html.tcg-portrait-play #screen-deck .portrait-deck-view-btn.is-active{
  background:rgba(186,228,255,.18);
  color:#b8ffc8;
}
html.tcg-portrait-play #screen-deck .portrait-deck-search-host{
  grid-area:search;
  flex:unset;
  min-width:0;
  width:100%;
}
html.tcg-portrait-play #screen-deck .portrait-deck-search-host .field,
html.tcg-portrait-play #screen-deck .portrait-deck-search-host label{
  margin:0;
}
html.tcg-portrait-play #screen-deck .portrait-deck-search-host label{
  display:none;
}
html.tcg-portrait-play #screen-deck .portrait-deck-search-host input{
  width:100%;
  min-height:36px;
  font-size:14px;
}
html.tcg-portrait-play #screen-deck .portrait-deck-tools-host{
  grid-area:tools;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:6px;
  min-width:0;
  width:100%;
  justify-content:flex-end;
}
html.tcg-portrait-play #screen-deck .portrait-deck-row--tools{
  flex-wrap:nowrap;
}
html.tcg-portrait-play #screen-deck .portrait-deck-tool{
  flex:0 0 auto;
  min-height:36px;
  min-width:0;
  padding:4px 7px;
  font-size:11px;
  font-weight:800;
}
html.tcg-portrait-play #screen-deck .portrait-deck-stats{
  grid-area:stats;
  margin:0;
  font-size:11px;
  opacity:.78;
  min-height:14px;
}
html.tcg-portrait-play #screen-deck .portrait-deck-batch-host{
  grid-area:batch;
  display:none;
}
html.tcg-portrait-play #screen-deck.portrait-deck-batch-mode .portrait-deck-preset-wrap,
html.tcg-portrait-play #screen-deck.portrait-deck-batch-mode .portrait-deck-sleeve-host,
html.tcg-portrait-play #screen-deck.portrait-deck-batch-mode .portrait-deck-playmat-host,
html.tcg-portrait-play #screen-deck.portrait-deck-batch-mode .portrait-deck-view-toggle,
html.tcg-portrait-play #screen-deck.portrait-deck-batch-mode .portrait-deck-search-host,
html.tcg-portrait-play #screen-deck.portrait-deck-batch-mode .portrait-deck-tools-host,
html.tcg-portrait-play #screen-deck.portrait-deck-batch-mode .portrait-deck-stats{
  display:none!important;
}
html.tcg-portrait-play #screen-deck.portrait-deck-batch-mode .portrait-deck-batch-host{
  display:block!important;
}
html.tcg-portrait-play #screen-deck.portrait-deck-batch-mode .deck-seal-batch-bar{
  display:flex!important;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  position:static;
  margin:0;
  padding:12px;
  border-radius:14px;
  box-shadow:none;
}
html.tcg-portrait-play #screen-deck.portrait-deck-batch-mode .deck-seal-batch-summary{
  flex:0 0 auto;
  width:100%;
}
html.tcg-portrait-play #screen-deck.portrait-deck-batch-mode .deck-seal-batch-summary-title{
  font-size:14px;
  margin:0 0 6px;
}
html.tcg-portrait-play #screen-deck.portrait-deck-batch-mode .deck-seal-batch-totals{
  gap:10px 14px;
}
html.tcg-portrait-play #screen-deck.portrait-deck-batch-mode .deck-seal-batch-totals .sticker-card-cost,
html.tcg-portrait-play #screen-deck.portrait-deck-batch-mode .deck-seal-batch-totals img{
  font-size:15px;
}
html.tcg-portrait-play #screen-deck.portrait-deck-batch-mode .deck-seal-batch-totals img{
  width:22px!important;
  height:22px!important;
}
html.tcg-portrait-play #screen-deck.portrait-deck-batch-mode .deck-seal-batch-empty{
  font-size:13px;
  line-height:1.35;
}
html.tcg-portrait-play #screen-deck.portrait-deck-batch-mode .deck-seal-batch-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  width:100%;
  margin:0;
}
html.tcg-portrait-play #screen-deck.portrait-deck-batch-mode .deck-seal-batch-actions button{
  min-height:48px;
  width:100%;
  font-size:15px;
  font-weight:800;
  border-radius:12px;
}
html.tcg-portrait-play #screen-deck.portrait-deck-batch-mode .deck-builder-section--deck{
  display:none!important;
}
html.tcg-portrait-play #screen-deck.portrait-deck-batch-mode .deck-section-head__title-row{
  display:none!important;
}
html.tcg-portrait-play #screen-deck .deck-builder-lists{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:66vh;
  gap:0;
  max-height:none;
  overflow:hidden;
}
html.tcg-portrait-play #screen-deck.portrait-deck-view-pool .deck-builder-section--deck,
html.tcg-portrait-play #screen-deck.portrait-deck-view-deck .deck-builder-section--pool{
  display:none!important;
}
html.tcg-portrait-play #screen-deck .deck-builder-section{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
html.tcg-portrait-play #screen-deck .deck-builder-section--deck{
  order:0;
}
html.tcg-portrait-play #screen-deck .deck-builder-pool-layout{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  gap:0;
}
html.tcg-portrait-play #screen-deck .deck-builder-pool-main{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
html.tcg-portrait-play #screen-deck .deck-section-head{
  flex:0 0 auto;
  padding:2px 0 4px;
}
html.tcg-portrait-play #screen-deck .deck-section-head__title-row{
  display:none;
}
html.tcg-portrait-play #screen-deck .deck-section-stats{
  font-size:11px;
  margin:0;
}
html.tcg-portrait-play #screen-deck .deck-card-grid{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
html.tcg-portrait-play #screen-deck .deck-card-tile,
html.tcg-portrait-play #screen-deck .menu-card{
  min-width:72px;
  min-height:100px;
}
html.tcg-portrait-play #screen-deck #deck-err{
  flex:0 0 auto;
  font-size:12px;
  margin:0 0 6px;
}
html.tcg-portrait-play #screen-deck .deck-builder-dock{
  position:fixed;
  left:max(8px,env(safe-area-inset-left,0px));
  right:max(8px,env(safe-area-inset-right,0px));
  bottom:max(8px,env(safe-area-inset-bottom,0px),var(--tcg-safe-bottom-fallback,0px));
  z-index:60;
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0;
  padding:10px 10px 8px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.32);
  background:rgba(8,18,40,.94);
  box-shadow:0 12px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
html.tcg-portrait-play #screen-deck .deck-builder-actions{
  display:flex!important;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  overflow:visible;
}
html.tcg-portrait-play #screen-deck .deck-builder-actions button{
  min-height:44px;
  flex:1 1 120px;
}
html.tcg-portrait-play #screen-deck .deck-builder-actions #btn-deck-save{
  flex:1 1 100%;
  min-height:48px;
  font-weight:800;
}
html.tcg-portrait-play #screen-deck .account-panel{
  padding-bottom:calc(168px + env(safe-area-inset-bottom,0px) + var(--tcg-safe-bottom-fallback,0px));
}
html.tcg-portrait-play #screen-deck.portrait-deck-batch-mode .deck-builder-dock,
html.tcg-portrait-play body:has(.overlay.portrait-deck-sheet.open) #screen-deck .deck-builder-dock,
html.tcg-portrait-play body:has(#overlay-deck-sleeve.open) #screen-deck .deck-builder-dock,
html.tcg-portrait-play body:has(#overlay-deck-playmat.open) #screen-deck .deck-builder-dock{
  visibility:hidden;
  pointer-events:none;
}
html.tcg-portrait-play #screen-deck #deck-card-hover-panel{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:9000;
  max-height:min(62dvh,520px);
  margin:0;
  border-radius:18px 18px 0 0;
  padding:14px 14px max(18px,env(safe-area-inset-bottom,0px));
  background:rgba(8,12,24,.96);
  box-shadow:0 -8px 32px rgba(0,0,0,.55);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  transform:translateY(110%);
  transition:transform .22s ease;
  pointer-events:none;
}
html.tcg-portrait-play #screen-deck #deck-card-hover-panel.portrait-sheet-open,
html.tcg-portrait-play #screen-deck #deck-card-hover-panel.visible,
html.tcg-portrait-play #screen-deck #deck-card-hover-panel:has(.hc-img.show){
  transform:translateY(0);
  pointer-events:auto;
}
html.tcg-portrait-play #screen-deck .deck-seal-batch-bar{
  flex:0 0 auto;
}

html.tcg-portrait-play .overlay.portrait-deck-sheet{
  display:none;
  position:fixed;
  inset:0;
  z-index:94000;
  background:rgba(0,0,0,.55);
  align-items:flex-end;
  justify-content:center;
}
html.tcg-portrait-play .overlay.portrait-deck-sheet.open{
  display:flex!important;
}
html.tcg-portrait-play .overlay.portrait-deck-sheet .portrait-sheet-panel{
  width:100%;
  max-height:min(88dvh,920px);
  background:rgba(8,12,24,.97);
  border-radius:18px 18px 0 0;
  padding:12px 12px max(16px,env(safe-area-inset-bottom,0px));
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:0;
}
html.tcg-portrait-play .overlay.portrait-deck-sheet .portrait-sheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex:0 0 auto;
}
html.tcg-portrait-play .overlay.portrait-deck-sheet .portrait-sheet-head h3{
  margin:0;
  font-size:16px;
}
html.tcg-portrait-play .overlay.portrait-deck-sheet .portrait-sheet-close{
  min-width:44px;
  min-height:44px;
  font-size:18px;
}
html.tcg-portrait-play .overlay.portrait-deck-sheet .portrait-deck-sheet-body{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-bottom:4px;
}
html.tcg-portrait-play .overlay.portrait-deck-sheet #deck-filter-panel,
html.tcg-portrait-play .overlay.portrait-deck-sheet .deck-filter-panel{
  display:flex!important;
  flex-direction:column;
  max-height:none!important;
  overflow:visible!important;
  gap:8px;
}
html.tcg-portrait-play .overlay.portrait-deck-sheet .deck-filter-rows{
  overflow:visible!important;
  max-height:none!important;
  flex:0 0 auto;
}
html.tcg-portrait-play .overlay.portrait-deck-sheet .deck-filter-advanced{
  flex-direction:column;
  gap:8px;
  overflow:visible!important;
  max-height:none!important;
}
html.tcg-portrait-play .overlay.portrait-deck-sheet .deck-filter-panel.show-advanced .deck-filter-advanced{
  display:flex!important;
}
html.tcg-portrait-play .overlay.portrait-deck-sheet .deck-filter-advanced[hidden]{
  display:none!important;
}
html.tcg-portrait-play .overlay.portrait-deck-sheet #deck-builder-actions,
html.tcg-portrait-play .overlay.portrait-deck-sheet .deck-builder-actions{
  display:flex!important;
  flex-wrap:wrap;
  gap:8px;
}
html.tcg-portrait-play .overlay.portrait-deck-sheet .deck-builder-actions button{
  min-height:44px;
  flex:1 1 140px;
}
html.tcg-portrait-play .overlay.portrait-deck-sheet #deck-builder-import-search{
  display:flex!important;
  flex-direction:column;
  gap:10px;
}
html.tcg-portrait-play .overlay.portrait-deck-sheet #deck-builder-name-wrap{
  display:block!important;
  margin-bottom:8px;
}
html.tcg-portrait-play .overlay.portrait-deck-sheet #btn-deck-seal-batch{
  display:inline-flex!important;
  min-height:44px;
  width:100%;
  margin-bottom:8px;
}
html.tcg-portrait-play .overlay.portrait-deck-sheet #deck-collection-sort-wrap,
html.tcg-portrait-play .overlay.portrait-deck-sheet .deck-collection-sort{
  display:block!important;
}
html.tcg-portrait-play .overlay.portrait-deck-sheet #sel-deck-pool-sort{
  width:100%;
  min-height:44px;
}

/* Non-portrait: chrome and sheets stay hidden */
#portrait-deck-chrome,
.portrait-deck-chrome{ display:none; }
.overlay.portrait-deck-sheet{ display:none; }

/* Shops / ranked / options */
html.tcg-portrait-play #screen-ranked .account-shell,
html.tcg-portrait-play #screen-options .account-shell,
html.tcg-portrait-play #screen-booster .account-shell,
html.tcg-portrait-play #screen-booster-shop .account-shell,
html.tcg-portrait-play #screen-sticker-shop .account-shell,
html.tcg-portrait-play #screen-sleeve-shop .account-shell,
html.tcg-portrait-play #screen-leaderboard .account-shell{
  max-width:100%;
  width:100%;
}

/* Booster — dock Open Pack / Open Box to the viewport bottom while a set is selected */
html.tcg-portrait-play #screen-booster.booster-has-pick .booster-open-actions{
  position:fixed;
  left:max(12px,env(safe-area-inset-left,0px));
  right:max(12px,env(safe-area-inset-right,0px));
  bottom:max(12px,env(safe-area-inset-bottom,0px),var(--tcg-safe-bottom-fallback,0px));
  z-index:60;
  margin:0;
  padding:10px 12px;
  gap:8px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.32);
  background:rgba(8,18,40,.94);
  box-shadow:0 12px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
html.tcg-portrait-play #screen-booster.booster-has-pick .booster-open-actions .btn-grad,
html.tcg-portrait-play #screen-booster.booster-has-pick .booster-open-actions .btn-out{
  min-height:52px;
  width:100%;
}
html.tcg-portrait-play #screen-booster.booster-has-pick .account-panel{
  padding-bottom:calc(148px + env(safe-area-inset-bottom,0px) + var(--tcg-safe-bottom-fallback,0px));
}
/* Rates (and other overlays) cover the dock — don't leave actions clicking through */
html.tcg-portrait-play body:has(#modal-booster-rates.open) #screen-booster .booster-open-actions,
html.tcg-portrait-play body:has(#modal-paid-booster.open) #screen-booster .booster-open-actions{
  visibility:hidden;
  pointer-events:none;
}

/* Pack open — keep Skip below notch / status bar */
html.tcg-portrait-play #overlay-pack-open .pack-open-skip{
  top:max(52px, calc(env(safe-area-inset-top, 0px) + 14px), calc(var(--tcg-safe-top-fallback, 0px) + 14px));
  right:max(12px, env(safe-area-inset-right, 0px));
  min-height:44px;
  padding:10px 14px;
  font-size:13px;
}

/* Pack results — denser portrait layout (no logo, 3-2 cards, full names, one screen) */
html.tcg-portrait-play #screen-pack-results.active{
  justify-content:flex-start!important;
  align-items:stretch;
  overflow-y:auto;
}
html.tcg-portrait-play #screen-pack-results .account-shell,
html.tcg-portrait-play #screen-pack-results .account-shell.wide{
  margin-block:0;
  padding-bottom:max(8px,env(safe-area-inset-bottom,0px),var(--tcg-safe-bottom-fallback,0px));
  max-width:100%;
}
html.tcg-portrait-play #screen-pack-results .logo{
  display:none!important;
}
html.tcg-portrait-play #screen-pack-results .account-panel{
  width:100%;
}
html.tcg-portrait-play #screen-pack-results #pack-results-title{
  text-align:center;
  font-size:clamp(18px,5vw,24px);
  margin:0 0 4px;
  line-height:1.15;
}
html.tcg-portrait-play #screen-pack-results .pack-results-god-banner{
  margin:0 0 4px;
  font-size:clamp(16px,4.5vw,20px);
}
html.tcg-portrait-play #screen-pack-results #pack-results-sub,
html.tcg-portrait-play #screen-pack-results #pack-results-star-gems-info{
  text-align:center;
  font-size:12px;
  margin:0 0 4px;
  line-height:1.3;
}
html.tcg-portrait-play #screen-pack-results .pack-results-cards-block{
  margin:4px auto 8px;
  padding:8px 8px 10px;
  box-sizing:border-box;
}
/* Single pack: 3 on top, 2 centered below — sized to fit one viewport */
html.tcg-portrait-play #screen-pack-results .pack-results-grid:not(.pack-results-grid--box){
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px 8px;
  justify-content:center;
  align-items:start;
  overflow:visible;
  width:100%;
  max-width:100%;
  margin:0 auto;
  padding:0;
}
html.tcg-portrait-play #screen-pack-results .pack-results-grid:not(.pack-results-grid--box) .pack-results-item{
  width:100%;
  min-width:0;
  gap:4px;
  grid-column:span 2;
}
/* Row 1: cards 1–3 each span 2 of 6 */
/* Row 2: cards 4–5 centered — start at columns 2 and 4 */
html.tcg-portrait-play #screen-pack-results .pack-results-grid:not(.pack-results-grid--box) .pack-results-item:nth-child(4){
  grid-column:2 / span 2;
}
html.tcg-portrait-play #screen-pack-results .pack-results-grid:not(.pack-results-grid--box) .pack-results-item:nth-child(5){
  grid-column:4 / span 2;
}
html.tcg-portrait-play #screen-pack-results .pack-results-name{
  display:block;
  font-size:10px;
  font-weight:700;
  line-height:1.25;
  min-height:0;
  max-height:2.5em;
  overflow:hidden;
  white-space:normal;
  word-break:break-word;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
html.tcg-portrait-play #screen-pack-results .pack-results-card{
  border-radius:8px;
  box-shadow:0 4px 14px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.1);
}
html.tcg-portrait-play #screen-pack-results .pack-results-rarity{
  font-size:13px;
  line-height:1.1;
}
html.tcg-portrait-play #screen-pack-results .pack-results-grid--box{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  max-width:100%;
}
html.tcg-portrait-play #screen-pack-results .pack-results-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
  margin-bottom:max(4px,env(safe-area-inset-bottom,0px),var(--tcg-safe-bottom-fallback,0px));
  width:100%;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}
html.tcg-portrait-play #screen-pack-results .pack-results-actions .btn-grad,
html.tcg-portrait-play #screen-pack-results .pack-results-actions .btn-out{
  width:100%;
  min-height:44px;
  justify-content:center;
  padding-top:10px;
  padding-bottom:10px;
  font-size:14px;
}

/* Sleeve shop — category + character pickers as centered 3-across grids */
html.tcg-portrait-play #screen-sleeve-shop .sleeve-shop-gens{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  justify-content:center;
  justify-items:stretch;
  width:100%;
  max-width:360px;
  margin-left:auto;
  margin-right:auto;
}
html.tcg-portrait-play #screen-sleeve-shop .sleeve-shop-gen{
  width:100%;
  min-width:0;
  box-sizing:border-box;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4px;
  padding:8px 6px;
  text-align:center;
}
html.tcg-portrait-play #screen-sleeve-shop .sleeve-shop-gen__icon{
  width:32px;
  height:32px;
}
html.tcg-portrait-play #screen-sleeve-shop .sleeve-shop-gen__label{
  white-space:normal;
  font-size:10px;
  line-height:1.15;
  max-width:100%;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
html.tcg-portrait-play #screen-sleeve-shop .sleeve-shop-chars{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  justify-content:center;
  justify-items:stretch;
  width:100%;
  max-width:360px;
  margin-left:auto;
  margin-right:auto;
}
html.tcg-portrait-play #screen-sleeve-shop .sleeve-shop-char{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
html.tcg-portrait-play #screen-sleeve-shop .sleeve-shop-browse{
  justify-content:center;
}
html.tcg-portrait-play #screen-sleeve-shop .sleeve-shop-main{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}
html.tcg-portrait-play #screen-sleeve-shop .sleeve-shop-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  width:100%;
  max-width:360px;
  margin-left:auto;
  margin-right:auto;
}
html.tcg-portrait-play #screen-sleeve-shop .sleeve-shop-tile__art{
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

/* Fullscreen sleeve preview (long-press art → tap to close) */
.sleeve-shop-lightbox{
  display:none;
  position:fixed;
  inset:0;
  z-index:9800;
  align-items:center;
  justify-content:center;
  padding:max(20px,env(safe-area-inset-top,0px),var(--tcg-safe-top-fallback,0px)) 16px
    max(20px,env(safe-area-inset-bottom,0px),var(--tcg-safe-bottom-fallback,0px));
  box-sizing:border-box;
  background:rgba(4,10,24,.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.sleeve-shop-lightbox.open{
  display:flex;
}
.sleeve-shop-lightbox__img{
  display:block;
  max-width:min(88vw,420px);
  max-height:min(78dvh,760px);
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:14px;
  box-shadow:0 18px 48px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.18);
  pointer-events:none;
  background:rgba(0,0,0,.25);
}
.sleeve-shop-lightbox__img.is-landscape{
  max-width:min(94vw,560px);
  max-height:min(52dvh,380px);
}
body.sleeve-shop-lightbox-open{overflow:hidden}

/* Leaderboard — compact rows; keep banner to the right of the name */
html.tcg-portrait-play #screen-leaderboard .account-panel{
  padding-left:10px;
  padding-right:10px;
}
html.tcg-portrait-play #screen-leaderboard .account-screen-head{
  margin-bottom:6px;
  gap:8px;
}
html.tcg-portrait-play #screen-leaderboard .account-screen-head h2{
  font-size:16px;
  margin:0;
}
html.tcg-portrait-play #screen-leaderboard .account-lead{
  font-size:12px;
  line-height:1.35;
  margin:0 0 8px;
}
html.tcg-portrait-play #screen-leaderboard .leaderboard-mode-field{
  margin:6px 0 6px;
}
html.tcg-portrait-play #screen-leaderboard .leaderboard-mode-field label{
  font-size:11px;
  margin-bottom:2px;
}
html.tcg-portrait-play #screen-leaderboard .game-mode-desc{
  font-size:11px;
  margin:4px 0 0;
  line-height:1.3;
}
html.tcg-portrait-play #screen-leaderboard .leaderboard-actions{
  margin:6px 0 8px;
  gap:8px;
}
html.tcg-portrait-play #screen-leaderboard .leaderboard-actions .btn-out{
  min-height:36px;
  padding:6px 12px;
  font-size:12px;
}
html.tcg-portrait-play #screen-leaderboard .leaderboard-your-rank{
  margin:0 0 8px;
  padding:8px 10px;
  gap:6px 10px;
  border-radius:10px;
}
html.tcg-portrait-play #screen-leaderboard .leaderboard-your-rank-line{
  font-size:13px;
}
html.tcg-portrait-play #screen-leaderboard #btn-leaderboard-jump-you{
  min-height:34px;
  padding:5px 10px;
  font-size:12px;
}
html.tcg-portrait-play #screen-leaderboard .leaderboard-list{
  gap:6px;
}
html.tcg-portrait-play #screen-leaderboard .rank-card{
  border-radius:10px;
}
html.tcg-portrait-play #screen-leaderboard .rank-card-body{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) min(132px,34vw);
  align-items:center;
  gap:6px 8px;
  padding:6px 8px;
}
html.tcg-portrait-play #screen-leaderboard .rank-card .rank-banner-wrap{
  grid-column:3;
  grid-row:1;
  align-self:center;
  justify-self:stretch;
  width:100%;
  max-width:132px;
  aspect-ratio:3.5 / 1;
  margin-top:0;
  border-radius:6px;
}
html.tcg-portrait-play #screen-leaderboard .rank-avatar,
html.tcg-portrait-play #screen-leaderboard .rank-avatar-fallback{
  width:30px;
  height:30px;
  border-width:1.5px;
  font-size:12px;
}
html.tcg-portrait-play #screen-leaderboard .rank-pos{
  font-size:11px;
  min-width:1.9em;
}
html.tcg-portrait-play #screen-leaderboard .rank-line{
  flex-wrap:nowrap;
  gap:5px;
  align-items:center;
}
html.tcg-portrait-play #screen-leaderboard .rank-name-wrap{
  gap:4px;
  min-width:0;
}
html.tcg-portrait-play #screen-leaderboard .rank-flag{
  width:14px;
  height:10px;
}
html.tcg-portrait-play #screen-leaderboard .rank-name{
  font-size:12px;
  line-height:1.15;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
html.tcg-portrait-play #screen-leaderboard .rank-elo{
  font-size:12px;
  margin-top:0;
}
html.tcg-portrait-play #screen-leaderboard .rank-record{
  font-size:10px;
  margin-top:0;
  line-height:1.2;
  opacity:.85;
}
html.tcg-portrait-play #screen-leaderboard .leaderboard-empty{
  padding:16px 8px;
  font-size:13px;
}

html.tcg-portrait-play .overlay.open .mbox,
html.tcg-portrait-play .overlay.open .account-shell{
  max-width:min(520px,96vw);
  max-height:min(88dvh,900px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* ═══════════════════════════════════════════
   GAME — #portrait-board mockup grid (mounted by portrait-board.js)
   Opp hand → opp stages+lives → HUD → my lives+stages → hand
   ═══════════════════════════════════════════ */
html.tcg-portrait-play{
  /* Keep the original large hand cards. The fan overlaps them into five visible
     positions; later cards extend into horizontal scroll. */
  --p-hand-visible: 5;
  --p-hand-pad-x: 0px;
  --p-card-w: calc((100vw / var(--p-hand-visible)) * 1.55);
  --p-card-h: calc(var(--p-card-w) * 88 / 63);
  /* Strip shorter than the card so the fan peeks over the stage, but tall
     enough that card bottoms stay above the home indicator. */
  --p-hand-mine: calc(var(--p-card-h) * 0.58);
  --p-hand-opp: calc(var(--p-card-h) * 0.50);
  --p-card-w-opp: calc(var(--p-card-w) * 0.92);
  --p-gap: 0px;
  --p-slot-r: 7px;
  --p-zone-bg: linear-gradient(180deg, #fff8fb 0%, #f4d4e4 100%);
  --p-zone-border: #e891b4;
  --p-live-bg: linear-gradient(180deg, #fff6fa 0%, #efc8db 100%);
  /* Stage outlines smaller than hand cards; hearts/blades stay fixed px below.
     Keep scale modest so portrait members clear the hand-fan overhang. */
  --p-stage-outline-scale: 0.62;
  --p-live-outline-scale: 0.82;
  /* Live storage row height cap (vw); shrunk on small phones with --p-ui-scale. */
  --p-live-row: 16vw;
  /* Defeat landscape hand-strip vars that blow cards past the field */
  --hand-strip-h: var(--p-hand-mine);
  --my-hand-card-h: var(--p-card-h);
  --opp-hand-card-h: calc(var(--p-card-h) * 0.92);
  --p-board-max-w: 100%;
  --p-field-min: 110px;
  /* Unitless density (1 = ~390×844). JS sets this for phones; default 1. */
  --p-ui-scale: 1;
  /* Fixed CSS-px HUD height so phones with full hearts match empty-board
     phones — never let mid-bar grow toward a large vh fraction. Scaled down
     on smaller CSS viewports via --p-ui-scale. */
  --p-hud-action: calc(34px * var(--p-ui-scale, 1));
  --p-hud-hearts: calc(18px * var(--p-ui-scale, 1));
  --p-hud-h: calc(100px * var(--p-ui-scale, 1));
  --p-hud-max: var(--p-hud-h);
}

/* Discrete compact rail for clearly-small phones (ui-scale < 0.95).
   Also shrink hand / stage / live so the whole board stays proportional. */
html.tcg-portrait-play.tcg-portrait-phone-sm{
  --p-field-min: 96px;
  --p-card-w: calc((100vw / var(--p-hand-visible)) * 1.55 * var(--p-ui-scale, 1));
  --p-hand-mine: calc(var(--p-card-h) * 0.54);
  --p-hand-opp: calc(var(--p-card-h) * 0.46);
  --p-stage-outline-scale: calc(0.62 * var(--p-ui-scale, 1));
  --p-live-outline-scale: calc(0.78 * var(--p-ui-scale, 1));
  --p-live-row: calc(14.5vw * var(--p-ui-scale, 1));
}

/* Square foldables: reclaim vertical space so both fields stay playable. */
html.tcg-portrait-play.tcg-portrait-square{
  --p-hand-pad-x: 0px;
  --p-card-w: calc((min(100vw, 100%) / var(--p-hand-visible)) * 1.28);
  --p-hand-mine: calc(var(--p-card-h) * 0.50);
  --p-hand-opp: calc(var(--p-card-h) * 0.40);
  --p-field-min: 96px;
  --p-ui-scale: 1;
  --p-hud-action: 34px;
  --p-hud-hearts: 18px;
  --p-hud-h: 96px;
  --p-hud-max: var(--p-hud-h);
  --p-stage-outline-scale: 0.58;
  --p-live-outline-scale: 0.78;
}

/* Tablets + mouse-desktop portrait: cap content width and keep stage cells readable. */
html.tcg-portrait-play.tcg-portrait-tablet{
  --p-hand-pad-x: 0px;
  --p-board-max-w: min(720px, 100%);
  --p-card-w: calc((min(720px, 100vw) / var(--p-hand-visible)) * 1.42);
  --p-hand-mine: calc(var(--p-card-h) * 0.54);
  --p-hand-opp: calc(var(--p-card-h) * 0.48);
  --p-field-min: 160px;
  --p-ui-scale: 1;
  --p-hud-action: 34px;
  --p-hud-hearts: 18px;
  --p-hud-h: 108px;
  --p-hud-max: var(--p-hud-h);
  --p-stage-outline-scale: 1;
  --p-live-outline-scale: 1;
}
html.tcg-portrait-play #screen-game.active{
  display:flex!important;
  flex-direction:column;
  width:100%;
  height:var(--tcg-vv-height, 100dvh);
  max-height:var(--tcg-vv-height, 100dvh);
  overflow:hidden;
  padding:0;
  box-sizing:border-box;
  background:#0a1220;
}
html.tcg-portrait-play #screen-game .game-viewport-frame{
  flex:1 1 auto;
  width:100%;
  min-height:0;
  height:100%;
  display:flex;
  position:relative;
  overflow:hidden;
}
html.tcg-portrait-play #screen-game .game-wide-wrap.portrait-wide-hidden{
  display:none!important;
}
html.tcg-portrait-play #portrait-board{
  flex:1 1 auto;
  width:100%;
  max-width: var(--p-board-max-w, 100%);
  margin-inline: auto;
  height:100%;
  min-height:0;
  display:grid;
  /* Without an explicit column the implicit auto track sizes to the widest
     item's min-content, which pushes the HUD/field past the right edge. */
  grid-template-columns: minmax(0, 1fr);
  /* Equal fields; hand rows are short so cards overhang into the stage */
  grid-template-rows:
    var(--p-hand-opp)
    minmax(var(--p-field-min, 110px), 1fr)
    auto
    minmax(var(--p-field-min, 110px), 1fr)
    var(--p-hand-mine);
  grid-template-areas:
    "opp-hand"
    "opp-field"
    "hud"
    "my-field"
    "my-hand";
  gap: var(--p-gap);
  /* Hands bleed past the viewport edges; lift the bottom row above the home bar. */
  padding: 0;
  box-sizing: border-box;
  background: #0a1220;
  position: relative;
  overflow: hidden;
}
html.tcg-portrait-play .pb-opp-hand{
  grid-area: opp-hand;
  min-height:0;
  overflow-x:auto;
  overflow-y:hidden;
  z-index:7;
  align-self:start;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  box-sizing:border-box;
  touch-action:pan-x;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
html.tcg-portrait-play .pb-opp-hand::-webkit-scrollbar{display:none}
html.tcg-portrait-play .pb-opp-field{ grid-area: opp-field; min-height:0; overflow:visible; display:flex; z-index:4; }
html.tcg-portrait-play .pb-hud{
  grid-area: hud;
  flex:0 0 var(--p-hud-h, var(--p-hud-max, 100px));
  height: var(--p-hud-h, var(--p-hud-max, 100px));
  min-height: var(--p-hud-h, var(--p-hud-max, 100px));
  max-height: var(--p-hud-h, var(--p-hud-max, 100px));
  z-index:8;
  overflow-x:hidden;
  overflow-y:hidden;
  box-sizing:border-box;
}
/* Burger Log/Resign pop opens upward — lift the HUD so overflow does not clip it
   under the center info rectangle / adjacent playmat layers. */
html.tcg-portrait-play .pb-hud.pb-menu-open,
html.tcg-portrait-play .pb-hud:has(.pb-menu-pop:not([hidden])){
  overflow:visible!important;
  z-index:60;
}
html.tcg-portrait-play .pb-my-field{ grid-area: my-field; min-height:0; overflow:visible; display:flex; z-index:4; }
html.tcg-portrait-play .pb-my-hand{
  grid-area: my-hand;
  min-height:0;
  overflow-x:auto;
  overflow-y:hidden;
  z-index:8;
  align-self:end;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  /* Pull the fan up into the unused field gap so card bottoms stay on-screen. */
  margin-top: calc(var(--p-card-h) * -0.36);
  padding-top: 32px;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  box-sizing:border-box;
  touch-action:pan-x;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
html.tcg-portrait-play .pb-my-hand::-webkit-scrollbar{display:none}
/* Raised hand cards must paint over the stage (scroll strip otherwise clips them) */
html.tcg-portrait-play #screen-game.portrait-play-selecting .pb-my-hand{
  z-index:25;
}
html.tcg-portrait-play #screen-game.portrait-play-selecting .pb-my-field{
  z-index:4;
}
/* Overhaul custom elements default to display:inline and collapse the mat */
html.tcg-portrait-play ll-stage-board,
html.tcg-portrait-play .pb-my-field > ll-stage-board,
html.tcg-portrait-play .pb-my-field > .playmat-frame,
html.tcg-portrait-play .pb-opp-field > .playmat-frame{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-height:none!important;
  align-self:stretch!important;
}
html.tcg-portrait-play ll-stage-board > .playmat-frame,
html.tcg-portrait-play ll-stage-board > #game-stage{
  flex:1 1 auto!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
}
html.tcg-portrait-play ll-hand-zone{
  display:flex!important;
  flex-direction:row;
  align-items:flex-end;
  justify-content:center;
  width:100%!important;
  min-width:0!important;
  max-width:none;
  height:100%;
  margin:0;
}
html.tcg-portrait-play .pb-chrome{
  position:absolute;
  right:6px;
  top: calc(var(--p-hand-opp) + 8px);
  z-index:40;
  display:flex;
  flex-direction:column;
  gap:6px;
  pointer-events:none;
}
html.tcg-portrait-play .pb-chrome > *{ pointer-events:auto; }

html.tcg-portrait-play .pb-opp-hand .opp-hand-strip,
html.tcg-portrait-play .pb-my-hand .my-hand-strip,
html.tcg-portrait-play #screen-game .hand-strip{
  flex:1 1 auto!important;
  flex-basis:auto!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  display:flex!important;
  align-items:flex-end;
  justify-content:center;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:none!important;
  /* Scroll lives on .pb-my-hand / .pb-opp-hand; strip grows with the fan. */
  overflow-x:visible!important;
  overflow-y:visible!important;
  width:max-content!important;
  min-width:100%!important;
  max-width:none!important;
  z-index:7!important;
  touch-action:pan-x;
  scrollbar-width:none;
}
/*
 * Browsers coerce overflow-y to auto when overflow-x is scroll/auto, which crops
 * raised (translateY) cards. Extend the scrollport upward so the raise fits inside.
 */
html.tcg-portrait-play .pb-my-hand .my-hand-strip,
html.tcg-portrait-play #screen-game .pb-my-hand .hand-strip{
  --p-raise-room: 28px;
  overflow-x:visible!important;
  overflow-y:visible!important;
  padding-top: var(--p-raise-room)!important;
  /* Raise room lives as padding on .pb-my-hand so overflow-x:auto does not crop it. */
  margin-top: 0!important;
  height: 100%!important;
  box-sizing: border-box!important;
  align-items: flex-end;
}
html.tcg-portrait-play .pb-opp-hand .opp-hand-strip{
  align-items:flex-start;
  overflow-x:visible!important;
  overflow-y:visible!important;
  touch-action:pan-x;
}
html.tcg-portrait-play #screen-game .hand-strip::-webkit-scrollbar{display:none}
html.tcg-portrait-play .hand-strip-label{display:none!important}
html.tcg-portrait-play .hand-fan,
html.tcg-portrait-play .pb-opp-hand .hand-fan,
html.tcg-portrait-play .pb-my-hand .hand-fan,
html.tcg-portrait-play ll-hand-zone .hand-fan,
html.tcg-portrait-play #hand-row{
  display:flex!important;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:flex-end;
  justify-content:center;
  width:max-content!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  margin:0 auto;
  padding:0;
  box-sizing:border-box;
  overflow:visible!important;
}
html.tcg-portrait-play .pb-opp-hand .hand-fan,
html.tcg-portrait-play #opp-hand-zone{
  align-items:flex-start;
  justify-content:center;
  width:max-content!important;
  margin:0 auto;
}
html.tcg-portrait-play #screen-game .hcard,
html.tcg-portrait-play #screen-game .my-hand-strip .hcard{
  flex:0 0 auto!important;
  width: var(--p-card-w)!important;
  height: var(--p-card-h)!important;
  max-width: var(--p-card-w)!important;
  max-height: var(--p-card-h)!important;
  min-width:0!important;
  min-height:0!important;
  aspect-ratio: 63 / 88;
  transition: transform .18s ease;
  /* Horizontal pan is owned by the hand scroller (JS + native pan-x). */
  touch-action:pan-x;
  -webkit-user-select:none;
  user-select:none;
}
/* Spectators cannot use the play-hand pan path; let the strip scroll natively. */
html.tcg-portrait-play body.tcg-spectator-mode #screen-game .hcard,
html.tcg-portrait-play body.tcg-spectator-mode #screen-game .my-hand-strip .hcard,
html.tcg-portrait-play body.tcg-spectator-mode #screen-game .opp-hand-card,
html.tcg-portrait-play body.tcg-spectator-mode #screen-game .opp-hand-strip .opp-hand-card{
  touch-action:pan-x;
}
html.tcg-portrait-play #screen-game .opp-hand-card,
html.tcg-portrait-play #screen-game .opp-hand-strip .opp-hand-card{
  flex:0 0 auto!important;
  width: var(--p-card-w-opp)!important;
  height: calc(var(--p-card-h) * 0.92)!important;
  max-width: var(--p-card-w-opp)!important;
  max-height: calc(var(--p-card-h) * 0.92)!important;
  min-width:0!important;
  min-height:0!important;
  aspect-ratio: 63 / 88;
}
html.tcg-portrait-play #screen-game .hcard.play-sel,
html.tcg-portrait-play #screen-game .my-hand-strip .hcard.play-sel{
  transform: translateY(-24px)!important;
  /* layoutHandFan owns z-order so cards fan outward from the latest selection. */
}
html.tcg-portrait-play #screen-game .hcard:hover,
html.tcg-portrait-play #screen-game .hcard.hover-sel{
  transform: translateY(-6px)!important;
}

html.tcg-portrait-play .pb-opp-field .playmat-frame,
html.tcg-portrait-play .pb-my-field .playmat-frame,
html.tcg-portrait-play #screen-game #opp-stage,
html.tcg-portrait-play #screen-game #game-stage{
  flex:1 1 auto!important;
  align-self:stretch!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  max-width:none!important;
  aspect-ratio:auto!important;
  box-shadow:none!important;
  background:transparent!important;
  position:relative!important;
  /* visible so neighboring hand overhang can paint over the mat edge */
  overflow:visible!important;
  contain:none!important;
}
html.tcg-portrait-play #screen-game .playmat-img,
html.tcg-portrait-play #screen-game .mat-owner-label,
html.tcg-portrait-play #screen-game .mat-seam,
html.tcg-portrait-play #screen-game .z-my-energy,
html.tcg-portrait-play #screen-game .z-opp-energy,
html.tcg-portrait-play #screen-game .z-baton-toggle,
html.tcg-portrait-play #screen-game .z-my-success,
html.tcg-portrait-play #screen-game .z-opp-success,
html.tcg-portrait-play #screen-game .z-main-deck,
html.tcg-portrait-play #screen-game .z-waiting-room,
html.tcg-portrait-play #screen-game .z-energy-deck,
html.tcg-portrait-play #screen-game .z-opp-main-deck,
html.tcg-portrait-play #screen-game .z-opp-waiting-room,
html.tcg-portrait-play #screen-game .z-opp-energy-deck{
  display:none!important;
}
html.tcg-portrait-play #screen-game .playmat-overlay{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:grid!important;
  /* Row gap is the only separation between a stage and its live storage:
     both are pinned to the shared row edge, so this is the literal margin. */
  gap:10px 2px;
  /* Use more of the field width while retaining a small safe edge.
     Extra vertical pad keeps stage cards clear of the hand-fan overhang. */
  padding: calc(var(--p-card-h) * 0.06) 4% calc(var(--p-card-h) * 0.16);
  box-sizing:border-box;
  /* Size stage/live outlines from cell height/width */
  container-type: size;
}
/* Opp field is mirrored vs us: visual L→R = their Right, Center, Left
   Stage row taller (portrait members); live row shorter (landscape lives) */
html.tcg-portrait-play #screen-game .opp-mat .playmat-overlay{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Live row is sized to the live card so its slack cannot become a gap;
     all spare height collects in the stage row, on the hand side. */
  grid-template-rows: minmax(0, 1fr) minmax(0, var(--p-live-row, 16vw));
  grid-template-areas:
    "sr sc sl"
    "l2 l1 l0";
  padding-top: calc(var(--p-card-h) * 0.14);
  padding-bottom: calc(var(--p-card-h) * 0.04);
}
html.tcg-portrait-play #screen-game .my-mat .playmat-overlay{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, var(--p-live-row, 16vw)) minmax(0, 1fr);
  grid-template-areas:
    "l0 l1 l2"
    "sl sc sr";
  padding-top: calc(var(--p-card-h) * 0.04);
  padding-bottom: calc(var(--p-card-h) * 0.02);
}
html.tcg-portrait-play #screen-game .z-opp-stage-left,
html.tcg-portrait-play #screen-game .z-my-stage-left{grid-area:sl}
html.tcg-portrait-play #screen-game .z-opp-stage-center,
html.tcg-portrait-play #screen-game .z-my-stage-center{grid-area:sc}
html.tcg-portrait-play #screen-game .z-opp-stage-right,
html.tcg-portrait-play #screen-game .z-my-stage-right{grid-area:sr}
html.tcg-portrait-play #screen-game .z-opp-live-0,
html.tcg-portrait-play #screen-game .z-my-live-0{grid-area:l0}
html.tcg-portrait-play #screen-game .z-opp-live-1,
html.tcg-portrait-play #screen-game .z-my-live-1{grid-area:l1}
html.tcg-portrait-play #screen-game .z-opp-live-2,
html.tcg-portrait-play #screen-game .z-my-live-2{grid-area:l2}

html.tcg-portrait-play #screen-game .mat-zone{
  position:relative!important;
  left:auto!important; top:auto!important;
  min-width:0;
  min-height:0;
  border-radius: var(--p-slot-r);
  border: 1.5px solid rgba(255,255,255,.85);
  outline: 1px solid var(--p-zone-border);
  /* Solid fill only — do not crop playmat.png into each slot outline. */
  background: linear-gradient(180deg, rgba(255,248,251,.88) 0%, rgba(244,200,220,.82) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 2px 8px rgba(0,0,0,.28);
  display:flex;
  align-items:center;
  justify-content:center;
  /* Hearts / blades sit outside the card frame — must not clip */
  overflow:visible;
  box-sizing:border-box;
  justify-self:center;
  align-self:center;
}
/* Member stage slots — portrait (63×88), smaller than hand so sizes stay distinct.
   Hearts / blades use fixed px sizes below and do not scale with this.
   Fit inside the grid cell with width+height caps so aspect-ratio is never
   stretched tall (that was cropping card art via object-fit:cover). */
html.tcg-portrait-play #screen-game .z-opp-stage-left,
html.tcg-portrait-play #screen-game .z-opp-stage-center,
html.tcg-portrait-play #screen-game .z-opp-stage-right,
html.tcg-portrait-play #screen-game .z-my-stage-left,
html.tcg-portrait-play #screen-game .z-my-stage-center,
html.tcg-portrait-play #screen-game .z-my-stage-right{
  aspect-ratio: 63 / 88;
  width: min(
    calc(100% * var(--p-stage-outline-scale)),
    calc(100cqh * 63 / 88 * var(--p-stage-outline-scale))
  );
  height: auto;
  max-width: calc(100% * var(--p-stage-outline-scale));
  max-height: calc(100% * var(--p-stage-outline-scale));
  justify-self: center;
}
/* Opp stages sit above lives — pin to bottom of stage row (toward lives, away from opp hand) */
html.tcg-portrait-play #screen-game .z-opp-stage-left,
html.tcg-portrait-play #screen-game .z-opp-stage-center,
html.tcg-portrait-play #screen-game .z-opp-stage-right{
  align-self: end;
}
/* My stages sit below lives — pin to top of stage row (toward lives, away from my hand) */
html.tcg-portrait-play #screen-game .z-my-stage-left,
html.tcg-portrait-play #screen-game .z-my-stage-center,
html.tcg-portrait-play #screen-game .z-my-stage-right{
  align-self: start;
}
/* Live storage — landscape (88×63); scale via --p-live-outline-scale (tablet = full cell) */
html.tcg-portrait-play #screen-game .z-opp-live-0,
html.tcg-portrait-play #screen-game .z-opp-live-1,
html.tcg-portrait-play #screen-game .z-opp-live-2,
html.tcg-portrait-play #screen-game .z-my-live-0,
html.tcg-portrait-play #screen-game .z-my-live-1,
html.tcg-portrait-play #screen-game .z-my-live-2{
  aspect-ratio: 88 / 63;
  width: min(
    calc(100% * var(--p-live-outline-scale)),
    calc(100cqh * 88 / 63 * var(--p-live-outline-scale))
  );
  height: auto;
  max-width: calc(100% * var(--p-live-outline-scale));
  max-height: 100%;
  background: var(--p-live-bg);
  justify-self: center;
}
/* Lives hug the stage row edge so the only separation is the grid row gap. */
html.tcg-portrait-play #screen-game .z-opp-live-0,
html.tcg-portrait-play #screen-game .z-opp-live-1,
html.tcg-portrait-play #screen-game .z-opp-live-2{
  align-self: start;
}
html.tcg-portrait-play #screen-game .z-my-live-0,
html.tcg-portrait-play #screen-game .z-my-live-1,
html.tcg-portrait-play #screen-game .z-my-live-2{
  align-self: end;
}
html.tcg-portrait-play #screen-game .mslot,
html.tcg-portrait-play #screen-game .lcard,
html.tcg-portrait-play #screen-game .stage-slot,
html.tcg-portrait-play #screen-game .mat-zone > *{
  position:relative;
  z-index:1;
}
html.tcg-portrait-play #screen-game .mat-zone[data-portrait-label]::before{
  content: attr(data-portrait-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-sizing: border-box;
  text-align: center;
  font-size: clamp(8px, 2.4vw, 11px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .02em;
  color: rgba(160, 55, 95, .72);
  pointer-events: none;
  z-index: 0;
}
html.tcg-portrait-play #screen-game .mat-zone:has(.mslot, .lcard, img:not(.pill-ico))::before{
  opacity: .18;
  font-size: 8px;
}
html.tcg-portrait-play #screen-game .mslot,
html.tcg-portrait-play #screen-game .lcard,
html.tcg-portrait-play #screen-game .stage-slot{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  min-width:0!important;
  min-height:0!important;
  border-radius: calc(var(--p-slot-r) - 2px);
  overflow:visible!important;
}
/* Card art only — keep full face visible inside the 63×88 outline */
html.tcg-portrait-play #screen-game .mslot > img,
html.tcg-portrait-play #screen-game .mslot > .noimg,
html.tcg-portrait-play #screen-game .lcard > img,
html.tcg-portrait-play #screen-game .lcard > .noimg{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  border-radius: inherit;
}
/* Stage hearts + blade sit outside the card face */
html.tcg-portrait-play #screen-game .mslot .stage-hearts,
html.tcg-portrait-play #screen-game .stage-slot .stage-hearts{
  z-index:12!important;
  pointer-events:none;
}
/* Keep larger hearts tucked slightly onto the member edge so they retain
   clearance from the adjacent Live storage row. */
html.tcg-portrait-play #screen-game .stage-slot:not(.opp) .mslot .stage-hearts{
  transform:translate(-50%,-62%)!important;
}
html.tcg-portrait-play #screen-game .stage-slot.opp .mslot .stage-hearts{
  transform:translate(-50%,62%)!important;
}
html.tcg-portrait-play #screen-game .mslot .stage-hearts .hicon.fld,
html.tcg-portrait-play #screen-game .stage-slot .stage-hearts .hicon.fld{
  width:21px!important;
  height:21px!important;
  max-width:21px!important;
  max-height:21px!important;
}
html.tcg-portrait-play #screen-game .mslot .field-badge.field-blade,
html.tcg-portrait-play #screen-game .stage-slot .field-badge.field-blade{
  z-index:12!important;
  width:auto!important;
  max-width:100%;
  left:50%!important;
  right:auto!important;
  transform: translateX(-50%);
  display:flex!important;
  justify-content:center;
  gap:2px;
  padding:0!important;
  overflow:visible!important;
}
/* Player blade sits higher on the card so the hand fan does not cover it.
   Opponent blade stays on the lower half, directly above the hearts row. */
html.tcg-portrait-play #screen-game .stage-slot:not(.opp) .mslot .field-badge.field-blade{
  top:auto!important;
  bottom:0!important;
  transform: translate(-50%, -36%)!important;
}
html.tcg-portrait-play #screen-game .stage-slot.opp .mslot .field-badge.field-blade{
  top:auto!important;
  bottom:0!important;
  transform: translate(-50%, -72%)!important;
}
html.tcg-portrait-play #screen-game .mslot .field-badge.field-blade img,
html.tcg-portrait-play #screen-game .mslot .field-badge.field-blade .ticon,
html.tcg-portrait-play #screen-game .mslot .field-badge.field-blade .hicon{
  width:26px!important;
  height:26px!important;
  max-width:26px!important;
  max-height:26px!important;
  object-fit:contain!important;
}
html.tcg-portrait-play #screen-game .mslot .field-badge.field-blade .badge-val{
  font-size:24px!important;
  line-height:1!important;
}
html.tcg-portrait-play #screen-game .mslot .field-badge.field-hearts{
  z-index:12!important;
  width:auto!important;
  max-width:100%;
  left:auto!important;
  right:4%!important;
  display:flex!important;
  padding:2px 5px!important;
  border-radius:8px;
  background:rgba(0,0,0,.72);
}
html.tcg-portrait-play #screen-game .stage-slot:not(.opp) .mslot .field-badge.field-hearts{
  top:auto!important;
  bottom:0!important;
  transform: translate(0, -36%)!important;
}
html.tcg-portrait-play #screen-game .stage-slot.opp .mslot .field-badge.field-hearts{
  top:auto!important;
  bottom:0!important;
  transform: translate(0, -72%)!important;
}
html.tcg-portrait-play #screen-game .mslot .field-badge.field-hearts .hicon{
  width:22px!important;
  height:22px!important;
}
html.tcg-portrait-play #screen-game .mslot .field-badge.field-hearts .heart-stat-count,
html.tcg-portrait-play #screen-game .mslot .field-badge.field-hearts .stat-mod-bonus{
  font-size:20px!important;
  line-height:1!important;
}

html.tcg-portrait-play .pb-hud{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:calc(2px * var(--p-ui-scale, 1));
  position:relative;
  /* Corner names are absolute — keep padding tight so HUD height stays fixed. */
  padding:calc(10px * var(--p-ui-scale, 1)) 6px calc(8px * var(--p-ui-scale, 1));
  margin:0;
  background: rgba(8, 14, 28, .94);
  border: 1px solid rgba(186,228,255,.22);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  /* overflow-y stays hidden from the grid rule; menu-open lifts it. */
}
html.tcg-portrait-play .pb-wins-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:4px;
  width:100%;
  min-width:0;
  flex:0 0 auto;
  min-height:calc(22px * var(--p-ui-scale, 1));
  max-height:calc(24px * var(--p-ui-scale, 1));
}
html.tcg-portrait-play .pb-side{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:2px;
  min-width:0;
  max-width:100%;
  overflow:hidden;
}
html.tcg-portrait-play .pb-side.mine{ align-items:flex-start; justify-self:stretch; }
html.tcg-portrait-play .pb-side.opp{ align-items:flex-end; justify-self:stretch; }
html.tcg-portrait-play .pb-side-top{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
  max-width:100%;
}
html.tcg-portrait-play .pb-side.mine .pb-side-top{justify-content:flex-start}
html.tcg-portrait-play .pb-side.opp .pb-side-top{justify-content:flex-end}
/* Names sit on the HUD panel corners (not under energy/wins). */
html.tcg-portrait-play .pb-hud > .pb-name-host,
html.tcg-portrait-play #portrait-my-name-host,
html.tcg-portrait-play #portrait-opp-name-host{
  position:absolute;
  z-index:3;
  min-width:0;
  max-width:46%;
  pointer-events:none;
}
html.tcg-portrait-play #portrait-my-name-host{
  left:8px;
  bottom:4px;
  right:auto;
  top:auto;
  text-align:left;
}
html.tcg-portrait-play #portrait-opp-name-host{
  right:8px;
  top:4px;
  left:auto;
  bottom:auto;
  text-align:right;
}
html.tcg-portrait-play .pb-name-host h3,
html.tcg-portrait-play .pb-name-host #my-name,
html.tcg-portrait-play .pb-name-host #opp-name{
  margin:0;
  font-size:calc(11px * var(--p-ui-scale, 1));
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.1;
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
html.tcg-portrait-play #portrait-my-name-host h3,
html.tcg-portrait-play #portrait-my-name-host #my-name,
html.tcg-portrait-play .pb-side.mine .pb-name-host h3,
html.tcg-portrait-play .pb-side.mine #my-name{ color:#ff8cbe; }
html.tcg-portrait-play #portrait-opp-name-host h3,
html.tcg-portrait-play #portrait-opp-name-host #opp-name,
html.tcg-portrait-play .pb-side.opp .pb-name-host h3,
html.tcg-portrait-play .pb-side.opp #opp-name{ color:#7eb6ff; }
html.tcg-portrait-play .pb-hud .players-stats-panel.portrait-stats-shell{
  display:none!important;
}
html.tcg-portrait-play .pb-nrg{
  display:inline-flex;
  align-items:center;
  gap:3px;
  min-height:calc(22px * var(--p-ui-scale, 1));
  padding:calc(2px * var(--p-ui-scale, 1)) calc(6px * var(--p-ui-scale, 1));
  border-radius:5px;
  background: rgba(20, 28, 48, .95);
  border: 1px solid rgba(186,228,255,.22);
  font-size:calc(11px * var(--p-ui-scale, 1));
  font-weight:800;
  color:#ffe08a;
  max-width:100%;
  min-width:0;
  flex:0 1 auto;
  box-sizing:border-box;
  overflow:hidden;
}
html.tcg-portrait-play .pb-nrg .cpill{
  margin:0;
  padding:0;
  border:none;
  background:transparent;
  min-height:0;
  font-size:inherit;
  color:inherit;
  max-width:100%;
  min-width:0;
  white-space:nowrap;
}
html.tcg-portrait-play .pb-nrg .pill-ico{
  width:calc(12px * var(--p-ui-scale, 1));
  height:calc(12px * var(--p-ui-scale, 1));
}
html.tcg-portrait-play .pb-nrg b{
  color:#ffe08a;
  font-size:calc(12px * var(--p-ui-scale, 1));
}
html.tcg-portrait-play .pb-win-val{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:calc(38px * var(--p-ui-scale, 1));
  padding:calc(3px * var(--p-ui-scale, 1)) calc(7px * var(--p-ui-scale, 1));
  border-radius:5px;
  font-size:calc(13px * var(--p-ui-scale, 1));
  font-weight:900;
  color:#b8ffc8;
  background: #1a3d28;
  border: 1px solid #3d9a5c;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
html.tcg-portrait-play .pb-win-center{
  display:flex;
  justify-content:center;
  min-width:0;
}
html.tcg-portrait-play .pb-hud .phase-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0;
  margin:0;
  background:transparent;
  border:none;
}
html.tcg-portrait-play .pb-hud .phase-panel-head{ display:flex; align-items:center; gap:6px; }
html.tcg-portrait-play .pb-hud .pbadge{
  font-size:calc(11px * var(--p-ui-scale, 1));
  padding:calc(3px * var(--p-ui-scale, 1)) calc(10px * var(--p-ui-scale, 1));
  min-height:calc(22px * var(--p-ui-scale, 1));
}
html.tcg-portrait-play .pb-hud .pmsg,
html.tcg-portrait-play .pb-hud .spectator-count,
html.tcg-portrait-play .pb-hud .btn-spectate-pov,
html.tcg-portrait-play .pb-hud .btn-spectate-hidden-hands{ display:none!important; }
/* Burger menu already has Leave / POV / hidden hands — no floating spectate bar. */
html.tcg-portrait-play #spectate-bar{ display:none!important; }
html.tcg-portrait-play .pb-hud .pbtns{ display:flex; gap:4px; }
html.tcg-portrait-play .pb-hud .pbtns button{ min-height:28px; font-size:11px; padding:4px 8px; }

html.tcg-portrait-play .pb-hud .players-stats-panel{
  display:none;
}
html.tcg-portrait-play .pb-hud .player-stat-strip{
  display:none;
}
html.tcg-portrait-play .pb-hud .player-stat-strip h3{
  display:none;
}
html.tcg-portrait-play .pb-hud .player-stat-strip.mine h3{ color:#ff8cbe; }
html.tcg-portrait-play .pb-hud .player-stat-strip.opp h3{ color:#7eb6ff; }
/* Energy lives in .pb-wins-row; hide Hand/Deck/WR clutter from mockup HUD */
html.tcg-portrait-play .pb-hud .cpills-inline{ display:none!important; }

html.tcg-portrait-play .pb-hud .stage-board-panel{
  padding:0;
  margin:0;
  background:transparent;
  border:none;
  flex:0 0 auto;
  min-height:0;
  max-height:var(--p-hud-hearts, 18px);
  overflow:hidden;
}
html.tcg-portrait-play .pb-hud .stage-board-panel > h4{ display:none; }
html.tcg-portrait-play .pb-hud .stage-board-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 6px;
  align-items:center;
  min-height:0;
  height:var(--p-hud-hearts, 18px);
}
html.tcg-portrait-play .pb-hud .stage-board-side-lbl{ display:none; }
html.tcg-portrait-play .pb-hud .stage-board-side{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:4px;
  min-width:0;
  min-height:0;
  max-height:var(--p-hud-hearts, 18px);
  overflow:hidden;
}
html.tcg-portrait-play .pb-hud .stage-board-side.mine{
  align-items:center;
  justify-content:flex-start;
}
html.tcg-portrait-play .pb-hud .stage-board-side.opp{
  align-items:center;
  justify-content:flex-end;
}
html.tcg-portrait-play .pb-hud .stage-board-hearts{
  min-height:0;
  max-height:var(--p-hud-hearts, 18px);
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:2px 4px;
  width:auto;
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
}
html.tcg-portrait-play .pb-hud .stage-board-side.mine .stage-board-hearts,
html.tcg-portrait-play .pb-hud .stage-board-side.mine .stage-board-yell{
  justify-content:flex-start!important;
  text-align:left;
}
html.tcg-portrait-play .pb-hud .stage-board-side.opp .stage-board-hearts,
html.tcg-portrait-play .pb-hud .stage-board-side.opp .stage-board-yell{
  /* One heart on the far right; more hearts grow toward center (DOM order preserved) */
  justify-content:flex-end!important;
  text-align:right;
  flex-direction:row;
}
html.tcg-portrait-play .pb-hud .stage-board-hearts.empty{
  font-size:10px!important;
  line-height:1;
  min-height:0;
}
html.tcg-portrait-play .pb-hud .stage-board-side.opp .stage-board-hearts.empty{
  text-align:right;
  justify-content:flex-end!important;
}
html.tcg-portrait-play .pb-hud .stage-board-hearts .heart-stat-row{
  display:inline-flex;
  align-items:center;
  gap:2px;
  font-size:calc(10px * var(--p-ui-scale, 1))!important;
  font-weight:800;
  line-height:1;
  flex:0 0 auto;
  white-space:nowrap;
}
html.tcg-portrait-play .pb-hud .stage-board-hearts .heart-stat-count,
html.tcg-portrait-play .pb-hud .stage-board-hearts .stat-mod-bonus{
  font-size:calc(10px * var(--p-ui-scale, 1))!important;
  line-height:1!important;
}
html.tcg-portrait-play .pb-hud .stage-board-hearts img,
html.tcg-portrait-play .pb-hud .stage-board-hearts .ticon,
html.tcg-portrait-play .pb-hud .stage-board-hearts .hicon{
  width:calc(12px * var(--p-ui-scale, 1))!important;
  height:calc(12px * var(--p-ui-scale, 1))!important;
}
html.tcg-portrait-play .pb-hud .stage-board-yell{
  display:flex;
  align-items:center;
  gap:3px;
  font-size:calc(10px * var(--p-ui-scale, 1));
  line-height:1;
  opacity:.85;
  width:auto;
  flex:0 0 auto;
  white-space:nowrap;
  max-height:var(--p-hud-hearts, 18px);
  overflow:hidden;
}
html.tcg-portrait-play .pb-hud .stage-board-yell .bicon{
  width:calc(12px * var(--p-ui-scale, 1))!important;
  height:calc(12px * var(--p-ui-scale, 1))!important;
}
html.tcg-portrait-play .pb-hud .stage-board-active,
html.tcg-portrait-play .pb-hud .stage-board-abilities{ display:none!important; }

/* End Main Phase + burger menu row */
html.tcg-portrait-play .pb-phase-row{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:0;
  position:relative;
  z-index:12;
  flex:0 0 var(--p-hud-action, 34px);
  min-height:var(--p-hud-action, 34px);
  height:var(--p-hud-action, 34px);
  max-height:var(--p-hud-action, 34px);
}
html.tcg-portrait-play .pb-hud.pb-menu-open .pb-phase-row,
html.tcg-portrait-play .pb-hud:has(.pb-menu-pop:not([hidden])) .pb-phase-row{
  z-index:62;
}
html.tcg-portrait-play .pb-phase-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  max-width:320px;
}
html.tcg-portrait-play .pb-hud .phase-action-bar{
  display:flex!important;
  flex:1 1 auto;
  justify-content:stretch;
  padding:0;
  margin:0;
  background:transparent;
  border:none;
  min-width:0;
}
html.tcg-portrait-play .pb-hud .phase-action-bar[hidden]{
  display:none!important;
}
/* Spectate / non-action turns: only the burger shows — keep it centered. */
html.tcg-portrait-play .pb-phase-actions:has(.phase-action-bar[hidden]){
  justify-content:center;
}
html.tcg-portrait-play .pb-phase-actions:has(.phase-action-bar[hidden]) .pb-menu-pop{
  right:auto;
  left:50%;
  transform:translateX(-50%);
}
html.tcg-portrait-play .pb-hud .btn-phase-primary{
  min-height:var(--p-hud-action, 34px);
  width:100%;
  max-width:none;
  font-size:calc(13px * var(--p-ui-scale, 1));
  border-radius:10px;
  padding:calc(6px * var(--p-ui-scale, 1)) calc(12px * var(--p-ui-scale, 1));
}
/* Phase timer sits between End Main and the burger when enabled. */
html.tcg-portrait-play .pb-phase-actions > .phase-timer-wrap{
  display:block;
  flex:0 0 auto;
  line-height:0;
  position:static;
  top:auto;
  right:auto;
  z-index:1;
  pointer-events:none;
}
html.tcg-portrait-play .pb-phase-actions > .phase-timer-wrap[hidden]{
  display:none!important;
}
html.tcg-portrait-play .pb-phase-actions > .phase-timer-wrap.phase-timer-wrap--prompt{
  position:static;
  top:auto;
  right:auto;
  z-index:1;
}
html.tcg-portrait-play .pb-phase-actions .time-pie.phase-timer-pie{
  width:var(--p-hud-action, 34px);
  height:var(--p-hud-action, 34px);
  border-width:2px;
}
html.tcg-portrait-play .pb-phase-actions .time-pie.phase-timer-pie > span{
  font-size:calc(13px * var(--p-ui-scale, 1));
  letter-spacing:0;
}
html.tcg-portrait-play .pb-menu-wrap{
  position:relative;
  flex:0 0 auto;
  z-index:62;
}
html.tcg-portrait-play .pb-menu-btn{
  width:var(--p-hud-action, 34px);
  height:var(--p-hud-action, 34px);
  min-width:var(--p-hud-action, 34px);
  padding:0;
  border-radius:10px;
  border:1px solid rgba(186,228,255,.35);
  background:rgba(8,14,28,.92);
  color:#fff;
  font-size:calc(18px * var(--p-ui-scale, 1));
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  touch-action:manipulation;
  position:relative;
  z-index:1;
}
html.tcg-portrait-play .pb-menu-pop{
  position:absolute;
  right:0;
  bottom:calc(100% + 6px);
  min-width:168px;
  padding:6px;
  border-radius:12px;
  background:rgba(8,12,24,.97);
  border:1px solid rgba(186,228,255,.28);
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  display:flex;
  flex-direction:column;
  gap:4px;
  z-index:70;
}
html.tcg-portrait-play .pb-menu-pop[hidden]{ display:none!important; }
html.tcg-portrait-play .pb-menu-item{
  min-height:40px;
  padding:8px 12px;
  border:none;
  border-radius:8px;
  background:transparent;
  color:#fff;
  font-size:14px;
  font-weight:700;
  text-align:left;
  cursor:pointer;
  touch-action:manipulation;
}
html.tcg-portrait-play .pb-menu-item[hidden]{ display:none!important; }
html.tcg-portrait-play .pb-menu-item:active,
html.tcg-portrait-play .pb-menu-item:hover{
  background:rgba(186,228,255,.12);
}
html.tcg-portrait-play .pb-menu-item.is-active{
  background:rgba(186,228,255,.16);
  box-shadow:inset 0 0 0 1px rgba(186,228,255,.35);
}
html.tcg-portrait-play .pb-menu-item.pb-menu-danger{
  color:#ff8a9a;
}

/* Cost / Live score chips must NOT sit in HUD flow — that grows the middle
   row and squeezes stage + live storage. Float them over the board instead. */
html.tcg-portrait-play .pb-hud .play-cost-hud,
html.tcg-portrait-play .pb-hud .live-score-hud,
html.tcg-portrait-play #screen-game .play-cost-hud,
html.tcg-portrait-play #screen-game .live-score-hud{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:calc(var(--p-hand-mine, 90px) + 10px)!important;
  transform:translateX(-50%)!important;
  margin:0!important;
  align-self:auto;
  z-index:45!important;
  pointer-events:none;
  font-size:11px;
}
/* Main-phase cost chip: sit on Live storage (unused in Main) so raised hand stays tappable. */
html.tcg-portrait-play #screen-game .play-cost-hud.pch-over-live{
  left:var(--pch-live-x, 50%)!important;
  top:var(--pch-live-y, 50%)!important;
  bottom:auto!important;
  right:auto!important;
  transform:translate(-50%, -50%)!important;
  z-index:140!important;
}

/* Floating Log/Resign chrome replaced by burger menu */
html.tcg-portrait-play .pb-chrome{
  display:none!important;
}

html.tcg-portrait-play .pb-chrome .sbfoot{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:0;
  padding:0;
}
html.tcg-portrait-play .pb-chrome #btn-stamp,
html.tcg-portrait-play .pb-chrome #btn-resign,
html.tcg-portrait-play .pb-chrome #btn-portrait-log{
  min-height:32px;
  min-width:32px;
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(8,14,28,.9);
  border:1px solid rgba(186,228,255,.35);
}
html.tcg-portrait-play .pb-chrome .tcg-debug-only,
html.tcg-portrait-play .turn-block,
html.tcg-portrait-play .side-left-actions-host,
html.tcg-portrait-play .tcg-radio-bar,
html.tcg-portrait-play .tcg-radio-stack,
html.tcg-portrait-play .side-log > .sbs{ display:none!important; }
/* Hide the desktop sidebar log while it sits in the side panel — but never
   when it has been moved into the portrait Log sheet. */
html.tcg-portrait-play .side-log > .logscroll,
html.tcg-portrait-play .side-log > ll-side-panel > .logscroll{
  display:none!important;
}
html.tcg-portrait-play #portrait-log-host .logscroll{
  display:block!important;
  height:auto;
  min-height:120px;
  max-height:none!important;
  overflow:visible;
  color:rgba(255,255,255,.92);
}

html.tcg-portrait-play #screen-game .card-hover-panel,
html.tcg-portrait-play #screen-game #card-hover-panel{
  display:none!important;
  position:fixed!important;
  left:50%!important;
  /* Stay inside the visible viewport (Safari toolbars shrink visualViewport). */
  top: calc(var(--p-hand-opp, 72px) + 10px + var(--tcg-chrome-top, 0px))!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  width:min(94vw,400px)!important;
  height:auto!important;
  max-height: calc(
    var(--tcg-vv-height, 100svh)
    - var(--p-hand-opp, 72px)
    - var(--p-hand-mine, 90px)
    - 20px
  )!important;
  z-index:93000!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
  padding:12px 14px 14px!important;
  border-radius:14px!important;
  background:rgba(8,12,24,.97)!important;
  border:1px solid rgba(186,228,255,.28)!important;
  box-shadow:0 12px 36px rgba(0,0,0,.55)!important;
  pointer-events:auto!important;
  box-sizing:border-box!important;
  flex-direction:column;
  gap:6px;
}
html.tcg-portrait-play #screen-game .card-hover-panel.visible,
html.tcg-portrait-play #screen-game.portrait-play-selecting #card-hover-panel,
html.tcg-portrait-play #screen-game.portrait-play-selecting .card-hover-panel{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
}
html.tcg-portrait-play #screen-game .card-hover-panel .hc-img{
  display:block;
  max-width:min(180px,48vw);
  max-height:min(22vh,200px);
  width:auto;
  margin:0 auto 6px;
  flex:0 0 auto;
}
html.tcg-portrait-play #screen-game .card-hover-panel .hc-name{
  font-size:15px; font-weight:800; text-align:center;
  flex:0 0 auto;
}
html.tcg-portrait-play #screen-game .card-hover-panel .hc-sub{
  flex:0 0 auto;
}
html.tcg-portrait-play #screen-game .card-hover-panel .hc-stats{
  flex:0 0 auto;
}
html.tcg-portrait-play #screen-game .card-hover-panel .hc-text{
  flex:1 1 auto;
  overflow-y:auto!important;
  min-height:0;
  max-height:none!important;
  font-size:12px;
  line-height:1.35;
  white-space:pre-wrap;
}
html.tcg-portrait-play #screen-game .card-hover-panel.live-multi{
  gap:8px;
  padding-top:14px!important;
}
html.tcg-portrait-play #screen-game .card-hover-panel .hc-live-multi{
  gap:8px;
}
html.tcg-portrait-play #screen-game .card-hover-panel .hc-live-multi-thumbs .hc-live-thumb{
  width:min(88px,30vw);
}
html.tcg-portrait-play #screen-game .card-hover-panel .hc-live-multi-title{
  font-size:16px;
}
html.tcg-portrait-play #screen-game .card-hover-panel .hc-live-multi-score{
  font-size:26px;
}
html.tcg-portrait-play #screen-game .card-hover-panel .hc-live-multi-hearts .hicon{
  width:40px;height:40px;
}
html.tcg-portrait-play #screen-game .card-hover-panel .hc-live-multi-hearts .heart-stat-row{
  font-size:28px;
}
html.tcg-portrait-play #screen-game .card-hover-panel .hc-slotrow,
html.tcg-portrait-play #screen-game .card-hover-panel .slotrow,
html.tcg-portrait-play #screen-game #hc-actions{
  display:flex!important;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:stretch;
  gap:8px;
  margin:10px auto 0;
  width:100%;
  max-width:320px;
  flex:0 0 auto;
  box-sizing:border-box;
  position:sticky;
  bottom:0;
  z-index:2;
  padding-top:8px;
  padding-bottom:max(4px, var(--tcg-chrome-bottom, 0px));
  background:rgba(8,12,24,.97);
}
html.tcg-portrait-play #screen-game .card-hover-panel .hc-slotrow,
html.tcg-portrait-play #screen-game .card-hover-panel .slotrow,
html.tcg-portrait-play #screen-game #hc-actions .hc-slotrow{
  flex-direction:row;
}
html.tcg-portrait-play #screen-game .card-hover-panel .hc-slotrow .btn-smol,
html.tcg-portrait-play #screen-game .card-hover-panel .slotrow button,
html.tcg-portrait-play #screen-game #hc-actions .hc-slotrow button{
  flex:1 1 0;
  min-width:0;
  max-width:104px;
  min-height:44px;
  font-size:13px;
  font-weight:800;
  border-radius:10px;
}
html.tcg-portrait-play #screen-game #hc-actions .hc-ability-actions{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:none;
  gap:8px;
}
html.tcg-portrait-play #screen-game #hc-actions .hc-ability-btn,
html.tcg-portrait-play #modal-card.open #cd-actions button{
  flex:0 0 auto;
  width:100%;
  max-width:none;
  min-height:48px;
  font-size:14px;
  font-weight:800;
  border-radius:12px;
}
html.tcg-portrait-play #screen-game .card-hover-panel .hc-live-place{
  display:none;
  width:100%;
  max-width:320px;
  margin:12px auto 0;
  flex:0 0 auto;
  position:sticky;
  bottom:0;
  z-index:2;
  padding-bottom:max(4px, var(--tcg-chrome-bottom, 0px));
  background:rgba(8,12,24,.97);
}
html.tcg-portrait-play #screen-game .card-hover-panel .hc-live-place.show,
html.tcg-portrait-play #screen-game .card-hover-panel .hc-live-place:not([hidden]){
  display:block!important;
}
html.tcg-portrait-play #screen-game .card-hover-panel .hc-live-place .btn-hc-live-place{
  width:100%;
  max-width:none;
  min-height:48px;
  font-size:15px;
  font-weight:800;
  border-radius:12px;
}
/* No dim overlay while picking a hand card — info box alone is enough */
html.tcg-portrait-play #portrait-play-scrim{
  display:none!important;
  pointer-events:none!important;
  background:transparent!important;
}

/* Inspect must not cover discard / Confirm on skill and hand-pick overlays. */
html.tcg-portrait-play body:has(#overlay-hand-pick.open) #screen-game #card-hover-panel,
html.tcg-portrait-play body:has(#overlay-prompt.open) #screen-game #card-hover-panel,
html.tcg-portrait-play body:has(#overlay-pick.open) #screen-game #card-hover-panel{
  display:none!important;
}
html.tcg-portrait-play #screen-game.portrait-play-selecting #portrait-play-scrim{
  display:none!important;
}

/* Flights live in #card-flight-layer (outside #screen-game). Never cap
   .card-flight size here — landscape live-storage destinations are often
   wider than 42vw and must morph to the real slot aspect. */
/* The fixed layer must cover the whole phone. Capping the layer itself to the
   ghost size clipped every player-side flight below y=220 while opponent
   flights near the top remained visible. */
html.tcg-portrait-play .card-flight-layer{
  width:100vw;
  height:100dvh;
  max-width:none;
  max-height:none;
}
html.tcg-portrait-play #perf-spectacle{
  --perf-member-w:54px;
  --perf-col-side-inset:0px;
  --perf-yell-rail-gap:8px;
  --perf-rail-slot-w:min(44vw,176px);
  --perf-safe-top:max(12px,
    calc(env(safe-area-inset-top,0px) + 6px),
    calc(var(--tcg-safe-top-fallback,0px) + 6px));
  width:100vw;
  height:100dvh;
  max-height:100dvh;
  /* Keep the opponent deck/yell rail below Android cutouts. */
  padding:var(--perf-safe-top) max(4px,env(safe-area-inset-right,0px))
    0 max(4px,env(safe-area-inset-left,0px));
  box-sizing:border-box;
  overflow:hidden;
}
/* Portrait performance uses the full phone width for the centered Live/member
   rows. Deck + Yell sit outside those rows: above the opponent and below the
   player, so they no longer squeeze the main cards into a narrow column. */
html.tcg-portrait-play #perf-spectacle .perf-stage{
  width:100%;
  max-width:100%;
  height:100%;
  max-height:100%;
  margin-inline:auto;
  gap:2px;
}
html.tcg-portrait-play #perf-spectacle .perf-col-row,
html.tcg-portrait-play #perf-spectacle .perf-col-body{
  width:100%;
  min-width:0;
}
html.tcg-portrait-play #perf-spectacle .perf-col-body{
  padding-inline:0;
  display:flex;
  flex-direction:column;
  align-items:center!important;
  justify-content:center;
  gap:4px;
}
html.tcg-portrait-play #perf-spectacle .perf-card-stack{
  flex:0 1 auto;
  width:100%;
  max-width:100%;
  height:auto;
  min-height:0;
  margin-inline:auto;
}
html.tcg-portrait-play #perf-spectacle .perf-yell-rail{
  position:relative;
  inset:auto;
  flex:0 0 auto;
  width:var(--perf-rail-slot-w);
  min-width:var(--perf-rail-slot-w);
  max-width:var(--perf-rail-slot-w);
  align-self:flex-end!important;
  align-items:flex-end!important;
  justify-content:flex-end;
  gap:10px;
  margin-right:max(2px, env(safe-area-inset-right, 0px));
  padding-right:2px;
}
html.tcg-portrait-play #perf-spectacle .perf-col.opp .perf-yell-rail{
  order:1;
}
html.tcg-portrait-play #perf-spectacle .perf-col.opp .perf-card-stack{
  order:2;
}
html.tcg-portrait-play #perf-spectacle .perf-col.mine .perf-card-stack{
  order:1;
}
html.tcg-portrait-play #perf-spectacle .perf-col.mine .perf-yell-rail{
  order:2;
}
html.tcg-portrait-play #perf-spectacle .perf-card.member{
  width:min(12vw,52px);
  height:auto;
  aspect-ratio:63/88;
}
html.tcg-portrait-play #perf-spectacle .perf-deck-pile,
html.tcg-portrait-play #perf-spectacle .perf-yell-row{
  width:min(18vw,78px);
  height:auto;
  aspect-ratio:63/88;
}
html.tcg-portrait-play #perf-spectacle .perf-card.live{
  width:min(48vw,216px);
  height:auto;
  aspect-ratio:88/63;
}
html.tcg-portrait-play #perf-spectacle .perf-live-row.perf-live-multi{
  min-height:0;
  max-height:none;
  height:auto;
}
html.tcg-portrait-play #perf-spectacle .perf-live-row.perf-live-multi .perf-card.live{
  width:min(calc((100vw - 32px) / 3),142px);
  height:auto;
  aspect-ratio:88/63;
}
/* Multi stage: unlock the landscape row max-height (~128px). Wide portrait
   widths + that cap crushed 63:88 members into rounded squares. */
html.tcg-portrait-play #perf-spectacle .perf-stage-row.perf-stage-multi{
  min-height:0;
  max-height:none;
  height:auto;
  align-items:center;
}
html.tcg-portrait-play #perf-spectacle .perf-stage-row.perf-stage-multi .perf-card.member{
  /* Slightly smaller than before so deck/yell can grow without crowding. */
  width:min(calc((100vw - 48px) / 3),86px);
  height:auto;
  aspect-ratio:63/88;
  max-height:none;
}
html.tcg-portrait-play #perf-spectacle .perf-stage-row.perf-stage-multi .perf-card.member.member-in-wait{
  width:min(calc((100vw - 48px) / 3 * 88 / 63),calc(86px * 88 / 63));
  height:min(calc((100vw - 48px) / 3),86px);
  aspect-ratio:88/63;
}
html.tcg-portrait-play #perf-spectacle .perf-stage-row:not(.perf-stage-multi) .perf-card.member{
  width:min(24vw,112px);
  height:auto;
  aspect-ratio:63/88;
}
html.tcg-portrait-play #perf-spectacle .perf-col-side{
  left:0;
  right:auto;
  /* Deck/yell is right-aligned — names keep the clear strip on the left. */
  width:max(72px,calc(100% - var(--perf-rail-slot-w) - 16px));
  max-width:calc(100% - var(--perf-rail-slot-w) - 12px);
  z-index:8;
  align-items:flex-start;
  gap:4px;
  pointer-events:none;
}
/* Names share the deck/yell rows, aligned to their unobstructed left side. */
html.tcg-portrait-play #perf-spectacle .perf-col.opp .perf-col-side{
  top:0;
  bottom:auto;
  justify-content:flex-start;
  padding-top:0;
}
html.tcg-portrait-play #perf-spectacle .perf-col.mine .perf-col-side{
  top:auto;
  bottom:0;
  justify-content:flex-end;
  padding-bottom:max(2px, env(safe-area-inset-bottom, 0px), var(--tcg-safe-bottom-fallback, 0px));
}
html.tcg-portrait-play #perf-spectacle .perf-col.mine .perf-col-lbl{order:2}
html.tcg-portrait-play #perf-spectacle .perf-col.mine .perf-side-outcomes{order:1}
html.tcg-portrait-play #perf-spectacle .perf-col-lbl{
  display:block;
  width:100%;
  max-width:100%;
  text-align:left;
  font-size:clamp(18px,5.5vw,26px);
  line-height:1.05;
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  text-shadow:0 2px 10px rgba(0,0,0,.65),0 0 18px rgba(0,0,0,.35);
}
html.tcg-portrait-play #perf-spectacle .perf-hearts-band,
html.tcg-portrait-play #perf-spectacle .perf-live-row,
html.tcg-portrait-play #perf-spectacle .perf-stage-row{
  width:100%;
  max-width:100%;
  margin-inline:auto;
  justify-content:center;
}
html.tcg-portrait-play #perf-spectacle .perf-judge-center{
  margin-left:0;
  margin-right:0;
  max-width:min(94vw,420px);
  gap:clamp(10px,2vh,16px);
  transform:scale(1.18);
  transform-origin:center center;
}
html.tcg-portrait-play #perf-spectacle .perf-judge-title{
  font-size:clamp(26px,7vw,40px);
}
html.tcg-portrait-play #perf-spectacle .perf-judge-duel{
  gap:clamp(14px,4vw,24px);
  padding:clamp(16px,2.4vh,24px) clamp(22px,5vw,34px);
  border-radius:18px;
}
html.tcg-portrait-play #perf-spectacle .perf-judge-side{
  min-width:clamp(72px,20vw,110px);
}
html.tcg-portrait-play #perf-spectacle .perf-judge-side-lbl{
  font-size:clamp(12px,3.2vw,15px);
  max-width:clamp(80px,22vw,130px);
}
html.tcg-portrait-play #perf-spectacle .perf-judge-side-num{
  font-size:clamp(44px,12vw,72px);
}
html.tcg-portrait-play #perf-spectacle .perf-judge-sep{
  font-size:clamp(28px,8vw,42px);
}
html.tcg-portrait-play #perf-spectacle .perf-judge-solo{
  font-size:clamp(28px,8vw,44px);
}
html.tcg-portrait-play #perf-spectacle .perf-verdict{
  font-size:clamp(28px,8vw,48px);
}
/* The portrait board is mounted outside the landscape wrappers hidden by the
   base spectacle rules. Hide it too so Performance plays over the sky only. */
html.tcg-portrait-play body.perf-spectacle-active #portrait-board{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  user-select:none;
  transition:opacity .45s ease,visibility .45s ease;
}
html.tcg-portrait-play body.perf-spectacle-active #screen-game.active{
  background:transparent!important;
}

html.tcg-portrait-play #portrait-log-sheet{
  display:none;
  position:fixed;
  inset:0;
  z-index:95000;
  background:rgba(0,0,0,.55);
  align-items:flex-end;
  justify-content:center;
}
html.tcg-portrait-play #portrait-log-sheet.open{display:flex}
html.tcg-portrait-play #portrait-log-sheet .portrait-sheet-panel{
  width:100%;
  max-height:70dvh;
  background:rgba(8,12,24,.97);
  border-radius:18px 18px 0 0;
  padding:12px 12px max(16px,env(safe-area-inset-bottom,0px));
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:8px;
}
html.tcg-portrait-play #portrait-log-sheet .portrait-sheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
html.tcg-portrait-play #portrait-log-sheet .portrait-sheet-head h3{margin:0;font-size:16px}
html.tcg-portrait-play #portrait-log-sheet .portrait-sheet-close{
  min-width:44px;min-height:44px;font-size:18px;
}
html.tcg-portrait-play #portrait-log-sheet .portrait-log-host{
  flex:1 1 auto;
  min-height:180px;
  max-height:55dvh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid rgba(186,228,255,.15);
  border-radius:12px;
  padding:8px;
  font-size:13px;
}
html.tcg-portrait-play #portrait-inspect-sheet{display:none!important}

/* Portrait log sheet */
html.tcg-portrait-play #portrait-log-sheet{
  display:none;
  position:fixed;
  inset:0;
  z-index:95000;
  background:rgba(0,0,0,.55);
  align-items:flex-end;
  justify-content:center;
}
html.tcg-portrait-play #portrait-log-sheet.open{display:flex}
html.tcg-portrait-play #portrait-log-sheet .portrait-sheet-panel{
  width:100%;
  max-height:70dvh;
  background:rgba(8,12,24,.97);
  border-radius:18px 18px 0 0;
  padding:12px 12px max(16px,env(safe-area-inset-bottom,0px));
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:8px;
}
html.tcg-portrait-play #portrait-log-sheet .portrait-sheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
html.tcg-portrait-play #portrait-log-sheet .portrait-sheet-head h3{margin:0;font-size:16px}
html.tcg-portrait-play #portrait-log-sheet .portrait-sheet-close{
  min-width:44px;min-height:44px;font-size:18px;
}
html.tcg-portrait-play #portrait-log-sheet .portrait-log-host{
  flex:1 1 auto;
  min-height:180px;
  max-height:55dvh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid rgba(186,228,255,.15);
  border-radius:12px;
  padding:8px;
  font-size:13px;
}

html.tcg-portrait-play #portrait-inspect-sheet{display:none!important}

/* ═══════════════════════════════════════════
   PROMPTS / OVERLAYS — vertically centered, buttons centered
   (skill menus, coin flip, mulligan, picks, etc.)
   ═══════════════════════════════════════════ */
html.tcg-portrait-play .overlay.open,
html.tcg-portrait-play .overlay.open.skill-hand-preserve,
html.tcg-portrait-play .overlay.open.hand-pick-overlay{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:96000;
  padding:max(12px,env(safe-area-inset-top,0px),var(--tcg-chrome-top,0px)) 12px
    max(12px,env(safe-area-inset-bottom,0px),var(--tcg-chrome-bottom,0px))!important;
  box-sizing:border-box;
}
html.tcg-portrait-play body.prompt-board-peek .overlay.skill-hand-preserve.open,
html.tcg-portrait-play body.prompt-board-peek .overlay.hand-pick-overlay.open,
html.tcg-portrait-play body.prompt-board-peek #overlay-prompt.open,
html.tcg-portrait-play body.prompt-board-peek #overlay-pick.open,
html.tcg-portrait-play body.prompt-board-peek #overlay-hand-pick.open,
html.tcg-portrait-play body.prompt-board-peek #overlay-heart.open,
html.tcg-portrait-play body.prompt-board-peek #overlay-surveil.open{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  background:transparent!important;
}
html.tcg-portrait-play .overlay.open .mbox,
html.tcg-portrait-play .overlay.open .hand-pick-shell,
html.tcg-portrait-play .overlay.open .prompt-branch-box,
html.tcg-portrait-play .overlay.open .coin-mbox{
  width:min(92vw,420px);
  max-width:min(92vw,420px);
  max-height:min(82dvh, var(--tcg-vv-height, 720px), 720px);
  margin:0 auto!important;
  border-radius:16px!important;
  padding:16px 16px max(16px,env(safe-area-inset-bottom,0px),var(--tcg-chrome-bottom,0px));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  box-sizing:border-box;
  text-align:center;
}
/* Wider pick / surveil panels still centered */
html.tcg-portrait-play #overlay-pick.open .mbox,
html.tcg-portrait-play #overlay-surveil.open .mbox,
html.tcg-portrait-play #overlay-mull.open .mbox,
html.tcg-portrait-play .overlay.open .hand-pick-shell{
  width:min(96vw,520px);
  max-width:min(96vw,520px);
}
html.tcg-portrait-play .hand-pick-actions{
  position:sticky;
  bottom:0;
  z-index:2;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  padding-top:10px;
  padding-bottom:max(8px, var(--tcg-chrome-bottom, 0px));
  background:rgba(8,12,24,.97);
}
html.tcg-portrait-play body.prompt-board-peek .overlay.skill-hand-preserve.open .mbox,
html.tcg-portrait-play body.prompt-board-peek .overlay.hand-pick-overlay.open .hand-pick-shell{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Headings + copy centered */
html.tcg-portrait-play .overlay.open .mbox > h2,
html.tcg-portrait-play .overlay.open .mbox > p,
html.tcg-portrait-play .overlay.open #prompt-ttl,
html.tcg-portrait-play .overlay.open #prompt-msg,
html.tcg-portrait-play .overlay.open #coin-msg,
html.tcg-portrait-play .overlay.open #coin-result{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

/* Button rows / choice lists — centered horizontally */
html.tcg-portrait-play .overlay.open #prompt-btns,
html.tcg-portrait-play .overlay.open .prompt-choice-list,
html.tcg-portrait-play .overlay.open .coin-choice-btns,
html.tcg-portrait-play .overlay.open .pbtns,
html.tcg-portrait-play .overlay.open .slotrow,
html.tcg-portrait-play .overlay.open .hc-slotrow{
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}
html.tcg-portrait-play .overlay.open .prompt-choice-btn,
html.tcg-portrait-play .overlay.open .coin-choice-btns .btn-grad,
html.tcg-portrait-play .overlay.open #prompt-btns > button,
html.tcg-portrait-play .overlay.open #prompt-btns .btn-grad,
html.tcg-portrait-play .overlay.open .mbox > .btn-grad,
html.tcg-portrait-play .overlay.open .mbox > button.btn-grad,
html.tcg-portrait-play .overlay.open #btn-mull{
  width:100%;
  max-width:320px;
  margin-left:auto!important;
  margin-right:auto!important;
  align-self:center;
  min-height:44px;
  font-size:15px;
  text-align:center;
  justify-content:center;
}
/* Horizontal button groups (e.g. yes/no side-by-side) stay centered as a row */
html.tcg-portrait-play .overlay.open #prompt-btns:has(> button:nth-child(2)):not(:has(> button:nth-child(4))){
  flex-direction:row;
  flex-wrap:wrap;
}
html.tcg-portrait-play .overlay.open #prompt-btns:has(> button:nth-child(2)):not(:has(> button:nth-child(4))) > button{
  flex:1 1 140px;
  max-width:200px;
  width:auto;
}
html.tcg-portrait-play .overlay.open button,
html.tcg-portrait-play .overlay.open .btn,
html.tcg-portrait-play .overlay.open .btn-grad,
html.tcg-portrait-play .overlay.open .btn-out,
html.tcg-portrait-play .overlay.open .btn-smol{
  min-height:44px;
  font-size:15px;
}
html.tcg-portrait-play .overlay.open .coin-stage{
  display:flex;
  justify-content:center;
  margin:12px auto;
}
html.tcg-portrait-play .overlay.open .coin-choice-btns{
  max-width:320px;
}

/* Stamp picker stays bottom sheet (thumb reach); other prompts center */
html.tcg-portrait-play .stamp-picker{
  max-width:100%;
  width:100%;
  left:0;right:0;bottom:0;
  border-radius:16px 16px 0 0;
  max-height:70dvh;
  z-index:96000;
  padding-bottom:max(10px, env(safe-area-inset-bottom, 0px));
}
html.tcg-portrait-play .stamp-picker-grid{
  max-height:48dvh;
  overflow-y:auto;
}

/* Offline / network banner */
html.tcg-portrait-play #portrait-offline-banner{
  display:none;
  position:fixed;
  left:0;right:0;top:0;
  z-index:100001;
  padding:max(10px,env(safe-area-inset-top,0px)) 14px 12px;
  background:rgba(120,20,40,.95);
  color:#fff;
  text-align:center;
  font-size:14px;
  font-weight:700;
}
html.tcg-portrait-play #portrait-offline-banner.show{display:block}

/* Low-end / reduced motion helpers */
html.tcg-portrait-play.tcg-low-end #perf-spectacle,
html.tcg-portrait-play.tcg-low-end #llc-sky-bg .llc-sky-cloud,
html.tcg-portrait-play.tcg-low-end #llc-sky-bg .llc-sky-wing{
  display:none!important;
}
@media (prefers-reduced-motion: reduce){
  html.tcg-portrait-play #screen-game .mat-zone,
  html.tcg-portrait-play #screen-game .hcard{
    transition:none!important;
  }
}

/* Contain off-screen sheets for mid-range GPUs */
html.tcg-portrait-play #portrait-log-sheet:not(.open),
html.tcg-portrait-play #portrait-inspect-sheet:not(.open),
html.tcg-portrait-play .overlay:not(.open){
  content-visibility:hidden;
  contain:strict;
}
html.tcg-portrait-play #screen-game .playmat-frame{
  contain:none;
}

/* ═══════════════════════════════════════════
   HOLD-TO-PREVIEW — Energy zone + Success Lives
   Fixed overlay over the field; does not reflow the board.
   pointer-events:none so the held HUD control stays under the finger.
   ═══════════════════════════════════════════ */
html.tcg-portrait-play .pb-hold-preview-target{
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  cursor:pointer;
}
html.tcg-portrait-play #portrait-zone-preview.pb-zone-preview{
  position:fixed;
  left:var(--pb-prev-left, 0);
  top:var(--pb-prev-top, 0);
  width:var(--pb-prev-width, 100%);
  height:var(--pb-prev-height, 120px);
  z-index:55;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  box-sizing:border-box;
  padding:4px;
  opacity:0;
  visibility:hidden;
  transition:opacity .12s ease,visibility .12s ease;
}
html.tcg-portrait-play #portrait-zone-preview.pb-zone-preview.show{
  opacity:1;
  visibility:visible;
}
html.tcg-portrait-play #portrait-zone-preview.pb-zone-preview[hidden]{
  display:none!important;
}
html.tcg-portrait-play .pb-zone-preview-rail{
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  max-height:100%;
  box-sizing:border-box;
  padding:6px 8px;
  border-radius:12px;
  background:rgba(6,12,24,.72);
  border:1px solid rgba(186,228,255,.28);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  gap:6px;
}
html.tcg-portrait-play .pb-zone-preview-rail.kind-energy{
  flex-direction:row;
  flex-wrap:nowrap;
}
html.tcg-portrait-play .pb-zone-preview-rail.kind-success{
  flex-direction:column;
  gap:5px;
}
html.tcg-portrait-play .pb-zone-preview-card{
  position:relative;
  flex:0 0 auto;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  background:rgba(0,0,0,.25);
}
/* Energy: active = portrait; used = landscape frame (PC energy stack) so sideways art fits */
html.tcg-portrait-play .pb-zone-preview-card.energy{
  width:min(18vw,68px);
  aspect-ratio:63/88;
  height:auto;
  flex:0 1 auto;
  min-width:0;
}
html.tcg-portrait-play .pb-zone-preview-card.energy.used{
  width:min(24vw,92px);
  aspect-ratio:88/63;
  height:auto;
}
html.tcg-portrait-play .pb-zone-preview-echip,
html.tcg-portrait-play .pb-zone-preview-card.energy .echip{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:inherit;
  overflow:hidden;
  background:rgba(20,28,48,.9);
}
html.tcg-portrait-play .pb-zone-preview-card.energy .card-art.energy-chip-face{
  position:absolute;
  inset:0;
  margin:auto;
  width:100%;
  height:100%;
  border-radius:inherit;
  overflow:hidden;
  transform:rotate(0deg);
  transform-origin:center center;
}
html.tcg-portrait-play .pb-zone-preview-card.energy .card-art.energy-chip-face.energy-sideways{
  width:calc(100% * 63 / 88);
  height:calc(100% * 88 / 63);
  transform:rotate(90deg);
  transform-origin:center center;
}
html.tcg-portrait-play .pb-zone-preview-card.energy .card-art.energy-chip-face > img,
html.tcg-portrait-play .pb-zone-preview-card.energy .card-art.energy-chip-face > .noimg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
html.tcg-portrait-play .pb-zone-preview-card.energy .card-art.energy-chip-face.energy-sideways > img,
html.tcg-portrait-play .pb-zone-preview-card.energy .card-art.energy-chip-face.energy-sideways > .noimg{
  filter:grayscale(.7) brightness(.55);
}
/* Success Lives: landscape row stacked vertically like PC storage */
html.tcg-portrait-play .pb-zone-preview-card.success{
  width:min(42vw,168px);
  aspect-ratio:88/63;
  height:auto;
}
html.tcg-portrait-play .pb-zone-preview-card.success .lcard{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:inherit;
  overflow:hidden;
}
html.tcg-portrait-play .pb-zone-preview-card.success .lcard img,
html.tcg-portrait-play .pb-zone-preview-card.success .lcard .noimg,
html.tcg-portrait-play .pb-zone-preview-card.success .card-face-fill{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
html.tcg-portrait-play .pb-zone-preview-card.success .card-art.live-sideways{
  position:absolute;
  left:50%;
  top:50%;
  width:calc(100% * 63 / 88);
  height:calc(100% * 88 / 63);
  transform:translate(-50%,-50%) rotate(90deg);
  transform-origin:center center;
  overflow:hidden;
}
html.tcg-portrait-play.tcg-low-end #portrait-zone-preview.pb-zone-preview{
  transition:none;
}

/* ═══════════════════════════════════════════
   DECK / WAITING ROOM DRAWERS (right edge)
   Handle peeks on the right; open slides the tray left.
   Overlay only — board geometry does not reflow.
   ═══════════════════════════════════════════ */
#portrait-deck-drawers.pb-deck-drawers{
  display:none!important;
}
html.tcg-portrait-play #portrait-deck-drawers.pb-deck-drawers{
  display:block!important;
  position:fixed;
  inset:0;
  z-index:48;
  pointer-events:none;
  box-sizing:border-box;
  padding-right:env(safe-area-inset-right,0px);
}
html.tcg-portrait-play #portrait-deck-drawers.pb-deck-drawers-hidden{
  display:none!important;
}
html.tcg-portrait-play .pb-deck-drawer{
  position:absolute;
  right:0;
  display:flex;
  flex-direction:row;
  align-items:center;
  width:auto;
  max-width:min(46vw,180px);
  pointer-events:none;
  transform:translateX(calc(100% - var(--pb-drawer-handle-w,28px)));
  transition:transform .22s cubic-bezier(.2,.9,.2,1),
              height .18s ease,
              top .18s ease;
  filter:drop-shadow(-4px 0 14px rgba(0,0,0,.4));
  will-change:transform,height,top;
}
html.tcg-portrait-play .pb-deck-drawer.open{
  transform:translateX(0);
}
html.tcg-portrait-play .pb-deck-drawer-handle{
  flex:0 0 var(--pb-drawer-handle-w,28px);
  width:var(--pb-drawer-handle-w,28px);
  min-width:var(--pb-drawer-handle-w,28px);
  height:var(--pb-drawer-handle-h,56px);
  align-self:center;
  pointer-events:auto;
  margin:0;
  padding:0;
  border:1px solid rgba(186,228,255,.35);
  border-right:none;
  border-radius:10px 0 0 10px;
  background:rgba(8,14,28,.94);
  color:#d7ecff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
}
html.tcg-portrait-play .pb-deck-drawer-chevron{
  display:block;
  width:0;
  height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-right:7px solid rgba(215,236,255,.92);
  transform:rotate(0deg);
  transition:transform .22s ease;
}
html.tcg-portrait-play .pb-deck-drawer.open .pb-deck-drawer-chevron{
  transform:rotate(180deg);
}
html.tcg-portrait-play .pb-deck-drawer-tray{
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  min-width:108px;
  max-height:calc(100vh - 16px);
  padding:8px 8px 8px 6px;
  box-sizing:border-box;
  background:rgba(8,14,28,.96);
  border:1px solid rgba(186,228,255,.28);
  border-left:none;
  border-radius:0 10px 10px 0;
}
html.tcg-portrait-play .pb-deck-drawer:not(.open) .pb-deck-drawer-tray{
  visibility:hidden;
  pointer-events:none;
}
html.tcg-portrait-play .pb-deck-drawer.open .pb-deck-drawer-tray{
  visibility:visible;
  pointer-events:auto;
}
html.tcg-portrait-play .pb-deck-drawer-item{
  position:relative;
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  align-items:center;
  gap:3px;
  width:72px;
  margin:0 auto;
  padding:0;
  border:none;
  background:transparent;
  color:#fff;
  font:inherit;
}
html.tcg-portrait-play button.pb-deck-drawer-item.wr{
  cursor:pointer;
  touch-action:manipulation;
  min-height:44px;
}
html.tcg-portrait-play button.pb-deck-drawer-item.wr:active{
  transform:scale(.97);
}
html.tcg-portrait-play .pb-deck-drawer-face{
  width:52px;
  height:calc(52px * 88 / 63);
  border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  /* Match board deck backs: --*-sleeve-image falls back to official back. */
  background:var(--card-back-default, url('../../lltcg-back.png')) center/cover no-repeat;
  border:1px solid rgba(255,255,255,.18);
}
html.tcg-portrait-play .pb-deck-drawer.mine .pb-deck-drawer-face{
  background:var(--my-sleeve-image, var(--card-back-default, url('../../lltcg-back.png'))) center/cover no-repeat;
}
html.tcg-portrait-play .pb-deck-drawer.opp .pb-deck-drawer-face{
  background:var(--opp-sleeve-image, var(--card-back-default, url('../../lltcg-back.png'))) center/cover no-repeat;
}
html.tcg-portrait-play .pb-deck-drawer-item.wr .pb-deck-drawer-face{
  background:
    linear-gradient(135deg,rgba(96,165,250,.22),rgba(8,14,28,.2)),
    var(--card-back-default, url('../../lltcg-back.png')) center/cover no-repeat;
  box-shadow:0 4px 12px rgba(0,0,0,.4),0 0 0 1px rgba(96,165,250,.35);
}
html.tcg-portrait-play .pb-deck-drawer.mine .pb-deck-drawer-item.wr .pb-deck-drawer-face{
  background:
    linear-gradient(135deg,rgba(96,165,250,.22),rgba(8,14,28,.2)),
    var(--my-sleeve-image, var(--card-back-default, url('../../lltcg-back.png'))) center/cover no-repeat;
}
html.tcg-portrait-play .pb-deck-drawer.opp .pb-deck-drawer-item.wr .pb-deck-drawer-face{
  background:
    linear-gradient(135deg,rgba(96,165,250,.22),rgba(8,14,28,.2)),
    var(--opp-sleeve-image, var(--card-back-default, url('../../lltcg-back.png'))) center/cover no-repeat;
}
/* Square sleeve corners on drawer faces (same as board backs). */
html.tcg-portrait-play:not(.sleeve-conform).has-my-sleeve .pb-deck-drawer.mine .pb-deck-drawer-face,
html.tcg-portrait-play:not(.sleeve-conform).has-opp-sleeve .pb-deck-drawer.opp .pb-deck-drawer-face{
  border-radius:var(--sleeve-square-radius, 1px);
}
html.tcg-portrait-play .pb-deck-drawer-count{
  position:absolute;
  top:4px;
  right:4px;
  min-width:1.4em;
  padding:1px 5px;
  border-radius:999px;
  background:rgba(0,0,0,.78);
  border:1px solid rgba(255,255,255,.35);
  font-size:12px;
  font-weight:900;
  line-height:1.25;
  text-align:center;
  pointer-events:none;
}
html.tcg-portrait-play .pb-deck-drawer-lbl{
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(215,236,255,.82);
  line-height:1.1;
}
html.tcg-portrait-play.tcg-low-end .pb-deck-drawer{
  transition:none;
}
@media (prefers-reduced-motion: reduce){
  html.tcg-portrait-play .pb-deck-drawer,
  html.tcg-portrait-play .pb-deck-drawer-chevron{
    transition:none!important;
  }
}

/* ── Square / tablet refinements ── */
html.tcg-portrait-play.tcg-portrait-square .pb-hud{
  flex-basis: var(--p-hud-h, var(--p-hud-max, 96px));
  height: var(--p-hud-h, var(--p-hud-max, 96px));
  min-height: var(--p-hud-h, var(--p-hud-max, 96px));
  max-height: var(--p-hud-h, var(--p-hud-max, 96px));
}
html.tcg-portrait-play.tcg-portrait-square #screen-game .card-hover-panel,
html.tcg-portrait-play.tcg-portrait-square #screen-game #card-hover-panel{
  max-height: calc(100dvh - var(--p-hand-opp, 64px) - var(--p-hand-mine, 72px) - 40px)!important;
}
html.tcg-portrait-play.tcg-portrait-tablet .llc-menu-screen .account-shell,
html.tcg-portrait-play.tcg-portrait-tablet .llc-menu-screen .account-shell.wide{
  max-width: min(560px, 100%);
}
html.tcg-portrait-play.tcg-portrait-tablet #screen-game .game-viewport-frame{
  justify-content: center;
}
html.tcg-portrait-play.tcg-portrait-tablet #screen-game .card-hover-panel,
html.tcg-portrait-play.tcg-portrait-tablet #screen-game #card-hover-panel{
  width: min(420px, 86vw)!important;
}
html.tcg-portrait-play.tcg-portrait-tablet .llc-menu-item,
html.tcg-portrait-play.tcg-portrait-tablet .llc-menu-screen .btn-grad,
html.tcg-portrait-play.tcg-portrait-tablet .llc-menu-screen .btn-out{
  min-height: 60px;
  font-size: 17px;
}
html.tcg-portrait-play.tcg-portrait-tablet #portrait-board .mslot,
html.tcg-portrait-play.tcg-portrait-tablet #portrait-board .lcard{
  /* Keep stage/live fill in sync with tablet outline scale */
  --p-stage-outline-scale: 1;
  --p-live-outline-scale: 1;
}
html.tcg-portrait-play.tcg-portrait-tablet #screen-game .z-opp-live-0,
html.tcg-portrait-play.tcg-portrait-tablet #screen-game .z-opp-live-1,
html.tcg-portrait-play.tcg-portrait-tablet #screen-game .z-opp-live-2,
html.tcg-portrait-play.tcg-portrait-tablet #screen-game .z-my-live-0,
html.tcg-portrait-play.tcg-portrait-tablet #screen-game .z-my-live-1,
html.tcg-portrait-play.tcg-portrait-tablet #screen-game .z-my-live-2{
  width: 100%;
  max-width: 100%;
}
html.tcg-portrait-play.tcg-portrait-tablet #screen-game .z-opp-stage-left,
html.tcg-portrait-play.tcg-portrait-tablet #screen-game .z-opp-stage-center,
html.tcg-portrait-play.tcg-portrait-tablet #screen-game .z-opp-stage-right,
html.tcg-portrait-play.tcg-portrait-tablet #screen-game .z-my-stage-left,
html.tcg-portrait-play.tcg-portrait-tablet #screen-game .z-my-stage-center,
html.tcg-portrait-play.tcg-portrait-tablet #screen-game .z-my-stage-right{
  width: min(100%, calc(100cqh * 63 / 88));
  max-width: 100%;
  max-height: 100%;
  height: auto;
}