/* Active club only. The facade and every other location retain their own layout. */
body.club-live {
  --club-ink:#f5f0df;
  --club-muted:#c1b9ac;
  --club-gold:#ead7a1;
  --club-edge:#75634c;
  margin:0;
  padding:0;
  width:100%;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  overscroll-behavior:none;
  background:#100e15;
}

/* Never hide locationShell: the club lives inside it. Flatten the site wrappers
   so their grids, clipping and stacking contexts cannot constrain the viewport. */
body.club-live .shell,
body.club-live .shell main,
body.club-live .shell .rightcol,
body.club-live #locationShell,
body.club-live #locationStage {
  display:contents!important;
}
body.club-live header,
body.club-live footer,
body.club-live nav,
body.club-live #requestDock,
body.club-live .shell:has(#locationShell) #characterPanel,
body.club-live .wallets,
body.club-live .yard-toolbar,
body.club-live .home-actions,
body.club-live .salary-widget,
body.club-live #club > .section-head,
body.club-live #clubIntro,
body.club-live #locationStage::before {
  display:none!important;
}
body.club-live #locationStage > #club:not([hidden]) {
  display:contents!important;
}
body.club-live #clubGame {
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;
  gap:0;
  width:100%;
  height:100vh;
  height:100dvh;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  overflow:hidden;
  color:var(--club-ink);
  background:#100e15;
  isolation:isolate;
  font-variant-numeric:tabular-nums;
}
body.club-live #clubGame [hidden],
body.club-live #clubGame[hidden] { display:none!important; }
body.club-live #clubGame,
body.club-live #clubGame * { box-sizing:border-box; }
body.club-live #clubGame > .arena {
  position:relative;
  min-width:0;
  min-height:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  outline:0;
  box-shadow:none;
  overflow:hidden;
  background:#100e15;
}
body.club-live #clubGame #canvas {
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  outline:0;
  box-shadow:none;
  touch-action:none;
}

/* These small overlays have no full-arena hit layer. The rhythm panel keeps
   its existing engine-driven positioning and on-floor visibility rules. */
body.club-live .club-arena-badge {
  position:absolute;
  z-index:5;
  top:max(12px,env(safe-area-inset-top));
  left:max(14px,env(safe-area-inset-left));
  display:grid;
  gap:3px;
  max-width:calc(100% - 212px);
  padding:8px 12px;
  border-left:2px solid var(--club-gold);
  border-radius:0 6px 6px 0;
  background:linear-gradient(90deg,#141019e8,#141019a6);
  text-shadow:0 1px 3px #000;
  pointer-events:none;
}
body.club-live #clubZone {
  color:var(--club-ink);
  font-size:11px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:.09em;
  overflow-wrap:anywhere;
}
body.club-live #clubCombo {
  color:var(--club-muted);
  font-size:11px;
  line-height:1.3;
  overflow-wrap:anywhere;
}
body.club-live .club-arena-tools {
  position:absolute;
  z-index:6;
  top:max(10px,env(safe-area-inset-top));
  right:max(12px,env(safe-area-inset-right));
  display:flex;
  gap:6px;
}
body.club-live #clubGame button:not(.rhythm-track) {
  min-width:44px;
  min-height:44px;
  margin:0;
  border:1px solid var(--club-edge);
  border-radius:9px;
  padding:8px 12px;
  color:var(--club-ink);
  background:linear-gradient(180deg,#3b3438,#221f29);
  box-shadow:inset 0 1px #fff2,inset 0 -2px #0005,0 3px 8px #0004;
  font:inherit;
  font-size:13px;
  font-weight:750;
  line-height:1.15;
  text-align:center;
  cursor:pointer;
  touch-action:manipulation;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
body.club-live #clubGame button:not(.rhythm-track):enabled:hover {
  border-color:var(--club-gold);
  background:linear-gradient(180deg,#51434a,#2f2935);
}
body.club-live #clubGame button:not(.rhythm-track):enabled:active {
  box-shadow:inset 0 2px 6px #0008;
  background:#211b28;
  transform:none;
}
body.club-live #clubGame button:focus-visible {
  outline:2px solid var(--club-gold);
  outline-offset:2px;
}
body.club-live #clubGame button:disabled {
  opacity:.48;
  cursor:not-allowed;
  filter:saturate(.35);
}
body.club-live #clubGame .club-arena-tools button {
  height:44px;
  padding:0 10px;
  background:linear-gradient(180deg,#2d2634eb,#17131fe8);
}
body.club-live #clubGame #clubHelp,
body.club-live #clubGame #clubFx { width:44px; font-size:23px; }
body.club-live #clubGame #clubVoice { min-width:62px; font-size:12px; }
body.club-live #clubAlert {
  z-index:5;
  top:max(76px,calc(env(safe-area-inset-top) + 64px));
  left:50%;
  right:auto;
  transform:translateX(-50%);
  width:max-content;
  max-width:min(65ch,calc(100% - 28px));
  margin:0;
  padding:6px 12px;
  pointer-events:none;
}
body.club-live #clubSubtitle { z-index:5; pointer-events:none; }

/* The dock is a real grid row, never a canvas overlay. */
body.club-live .club-bottom-dock {
  display:grid;
  grid-template-columns:auto minmax(340px,1fr) 116px;
  grid-template-areas:"controls stats supplies";
  align-items:center;
  gap:clamp(14px,2vw,36px);
  min-width:0;
  padding:10px max(16px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  border-top:1px solid #776443;
  background:radial-gradient(ellipse at 55% 0,#76604022,transparent 65%),linear-gradient(180deg,#25212a,#15131c);
  box-shadow:0 -4px 18px #0005,inset 0 1px #e8cf9320;
}
body.club-live #clubGame .club-controls {
  grid-area:controls;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  min-width:0;
  margin:0;
  padding:0;
}
body.club-live #clubGame .dpad {
  display:none;
  flex:none;
  grid-template-columns:repeat(3,44px);
  grid-template-rows:repeat(2,44px);
  gap:4px;
}
body.club-live #clubGame .dpad button {
  width:44px;
  height:44px;
  padding:0;
  font-size:22px;
  touch-action:none;
}
body.club-live #clubGame .dpad [data-dir="up"] { grid-area:1 / 2; }
body.club-live #clubGame .dpad [data-dir="left"] { grid-area:2 / 1; }
body.club-live #clubGame .dpad [data-dir="down"] { grid-area:2 / 2; }
body.club-live #clubGame .dpad [data-dir="right"] { grid-area:2 / 3; }
body.club-live #clubGame .combat-controls {
  display:grid;
  grid-template-columns:repeat(2,minmax(72px,1fr));
  grid-template-rows:44px 44px;
  gap:4px;
  width:clamp(172px,19vw,260px);
  max-width:none;
  min-width:0;
}
body.club-live #clubGame .combat-controls button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  height:44px;
  min-width:0!important;
  min-height:44px;
  max-height:44px;
  padding:5px 8px!important;
  overflow-wrap:anywhere;
}
body.club-live #clubGame .combat-controls #push { grid-area:2 / 1; }
body.club-live #clubGame .combat-controls #dodge { grid-area:2 / 2; }
body.club-live #clubGame .combat-controls #interact {
  grid-area:1 / 1 / 2 / 3;
  border-color:#cfb977;
  background:linear-gradient(180deg,#ead7a1,#b89c60);
  color:#251e19;
  text-shadow:none;
}
body.club-live #clubGame .combat-controls button::before {
  content:"";
  flex:none;
  width:18px;
  height:18px;
  background:currentColor;
  pointer-events:none;
  mask:center / contain no-repeat;
}
body.club-live #clubGame #push::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m13 2-2 7 8-3-4 6 7 2-8 3-2 5-3-7-7-3 7-2-3-6 7 3'/%3E%3C/svg%3E");
}
body.club-live #clubGame #dodge::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='m6 5 7 7-7 7m8-14 7 7-7 7'/%3E%3C/svg%3E");
}
body.club-live #clubGame #interact::before {
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M14 3h6v18h-6M3 12h12m-4-4 4 4-4 4'/%3E%3C/svg%3E");
}
body.club-live .club-stats {
  grid-area:stats;
  display:grid;
  grid-template-columns:minmax(154px,1fr) minmax(70px,.55fr) minmax(70px,.55fr);
  align-items:center;
  gap:8px 16px;
  min-width:0;
  width:100%;
  max-width:720px;
  justify-self:center;
}
body.club-live .club-stat { display:grid; gap:3px; min-width:0; }
body.club-live .club-stat-label {
  display:flex;
  align-items:center;
  gap:4px;
  color:var(--club-muted);
  font-size:10px;
  font-weight:650;
  line-height:1.25;
  letter-spacing:.025em;
}
body.club-live .club-stat-label svg {
  width:13px;
  height:13px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}
body.club-live #clubCash {
  font-size:clamp(28px,2.3vw,40px);
  font-weight:850;
  line-height:1.05;
  white-space:nowrap;
  letter-spacing:-.04em;
  color:var(--club-ink);
}
body.club-live #clubHP,
body.club-live #clubTime { font-size:24px; font-weight:750; line-height:1.1; white-space:nowrap; }
body.club-live #clubHP { letter-spacing:.06em; }
body.club-live #clubTime.is-urgent { color:#ffb5a1; }
body.club-live #clubHP[data-lives="1"] { color:#ffc19f; }
body.club-live #clubHP[data-lives="0"] { color:#a99c9c; }
body.club-live .club-stats .club-patience {
  grid-column:1 / -1;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  width:100%;
  min-width:0;
  color:var(--club-muted);
  font-size:10px;
  line-height:1.2;
}
body.club-live .club-patience > span { flex:none; }
body.club-live #clubNeedText { margin-left:4px; color:var(--club-ink); font-weight:650; }
body.club-live .club-patience > div {
  flex:1;
  width:auto;
  min-width:24px;
  height:5px;
  border-radius:4px;
  overflow:hidden;
  background:#4b4145;
}
body.club-live #clubNeed {
  display:block;
  height:100%;
  max-width:100%;
  border-radius:0 4px 4px 0;
  background:#d4c18a;
}
body.club-live #clubGame .club-supplies {
  grid-area:supplies;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:4px;
  min-width:0;
  width:100%;
  height:92px;
  margin:0;
  padding:0;
  border:0;
}
body.club-live #clubGame #clubDrink {
  display:flex;
  flex:1;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:44px;
  padding:4px 8px;
  border-color:#a99461;
  background:radial-gradient(ellipse at 30% 65%,#a28c4938,transparent 75%),linear-gradient(160deg,#3c3830,#211e24);
}
body.club-live #clubDrink > img {
  flex:none;
  width:28px;
  height:64px;
  max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 3px 3px #0007);
  pointer-events:none;
}
body.club-live .club-inventory-copy { display:grid; gap:5px; text-align:left; pointer-events:none; }
body.club-live .club-inventory-copy > b { font-size:11px; letter-spacing:.12em; }
body.club-live #clubBottles { font-size:18px; font-weight:800; line-height:1; white-space:nowrap; }
/* At zero stock the shop occupies this inventory cell, not the combat grid.
   Keep the bottle visible, even though an old global :has rule hides it. */
body.club-live #clubGame .club-supplies:has(#clubShop:not([hidden])) #clubDrink {
  display:flex;
  position:absolute;
  inset:0;
  padding-bottom:44px;
  overflow:hidden;
}
body.club-live #clubGame .club-supplies:has(#clubShop:not([hidden])) #clubDrink > img { height:40px; }
body.club-live #clubGame #clubShop {
  position:relative;
  z-index:1;
  align-self:stretch;
  margin-top:auto;
  width:100%;
  min-height:44px;
  padding:5px;
  font-size:11px;
  border-color:#c4aa6f;
}

/* Keep keyboard desktops compact; touch and narrow screens retain the pad. */
@media (max-width:700px), (pointer:coarse) {
  body.club-live #clubGame .dpad { display:grid; }
}
@media (min-width:701px) and (pointer:fine) {
  body.club-live #clubGame .combat-controls {
    grid-template-columns:repeat(3,minmax(72px,1fr));
    grid-template-rows:44px;
    width:clamp(260px,26vw,380px);
  }
  body.club-live #clubGame .combat-controls #push { grid-area:1 / 1; }
  body.club-live #clubGame .combat-controls #dodge { grid-area:1 / 2; }
  body.club-live #clubGame .combat-controls #interact { grid-area:1 / 3; }
  body.club-live #clubGame .club-supplies { height:76px; }
}

/* Smaller desktops and landscape phones: stats above controls, inventory right. */
@media (max-width:1099px) {
  body.club-live .club-bottom-dock {
    grid-template-columns:minmax(0,1fr) 108px;
    grid-template-areas:"stats supplies" "controls supplies";
    gap:8px 16px;
    padding-top:8px;
    padding-bottom:max(8px,env(safe-area-inset-bottom));
  }
  body.club-live .club-stats { max-width:none; gap:4px 16px; }
  body.club-live #clubCash { font-size:28px; }
  body.club-live #clubHP,
  body.club-live #clubTime { font-size:21px; }
  body.club-live #clubGame .club-controls { justify-content:space-between; }
  body.club-live #clubGame .combat-controls { width:min(60%,480px); }
  body.club-live #clubGame .club-supplies { align-self:stretch; height:auto; }
}
@media (max-width:600px) {
  body.club-live .club-arena-badge {
    top:max(8px,env(safe-area-inset-top));
    left:max(8px,env(safe-area-inset-left));
    max-width:calc(100% - 174px);
    padding:6px 8px;
    gap:2px;
  }
  body.club-live #clubZone { font-size:9px; letter-spacing:.03em; }
  body.club-live #clubCombo { font-size:10px; }
  body.club-live .club-arena-tools {
    top:max(8px,env(safe-area-inset-top));
    right:max(8px,env(safe-area-inset-right));
    gap:4px;
  }
  body.club-live #clubGame #clubVoice { min-width:56px; padding:0 6px; }
  body.club-live .club-bottom-dock {
    grid-template-columns:minmax(0,1fr) 76px;
    grid-template-areas:"stats supplies" "controls controls";
    gap:8px;
    padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  }
  body.club-live .club-stats {
    grid-template-columns:minmax(106px,1fr) auto auto;
    gap:7px 8px;
  }
  body.club-live .club-stat-label { font-size:9px; letter-spacing:0; }
  body.club-live #clubCash { font-size:27px; }
  body.club-live #clubHP,
  body.club-live #clubTime { font-size:18px; }
  body.club-live .club-stats .club-patience { gap:6px; font-size:9px; }
  body.club-live #clubGame .club-controls { gap:8px; }
  body.club-live #clubGame .combat-controls { flex:1; width:auto; }
  body.club-live #clubGame .combat-controls button { gap:4px; padding:4px!important; font-size:12px; }
  body.club-live #clubGame .combat-controls button::before { width:15px; height:15px; }
  body.club-live #clubGame .club-supplies { min-height:76px; }
  body.club-live #clubGame #clubDrink { gap:4px; padding:4px; }
  body.club-live #clubDrink > img { width:22px; height:54px; }
  body.club-live .club-inventory-copy > b { font-size:9px; letter-spacing:.04em; }
  body.club-live #clubBottles { font-size:16px; }
  body.club-live #clubGame .club-supplies:has(#clubShop:not([hidden])) { min-height:92px; }
  body.club-live #clubGame #clubShop { font-size:10px; }
}
@media (max-width:360px) {
  body.club-live .club-stats { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:5px 8px; }
  body.club-live .club-earnings { grid-column:1 / -1; }
  body.club-live .club-lives,
  body.club-live .club-timer { display:flex; align-items:center; gap:5px; }
  body.club-live #clubCash { font-size:28px; }
  body.club-live #clubGame .combat-controls button { font-size:11px; }
}
/* Short landscape: one 92px content row instead of stacking a stats strip
   above controls. At 844x390 this leaves about 285px for the arena, with all
   touch targets intact. Safe-area padding remains outside that content row. */
@media (min-width:760px) and (max-width:1099px) and (max-height:500px) {
  body.club-live .club-bottom-dock {
    grid-template-columns:auto minmax(0,1fr) 92px;
    grid-template-areas:"controls stats supplies";
    gap:12px;
    padding-top:6px;
    padding-bottom:max(6px,env(safe-area-inset-bottom));
  }
  body.club-live #clubGame .club-controls { gap:8px; }
  body.club-live #clubGame .combat-controls {
    grid-template-columns:repeat(2,minmax(72px,1fr));
    grid-template-rows:44px 44px;
    width:156px;
  }
  body.club-live #clubGame .combat-controls button { gap:4px; padding:4px!important; font-size:12px; white-space:nowrap; }
  body.club-live #clubGame .combat-controls button::before { width:15px; height:15px; }
  body.club-live #clubGame .combat-controls #push { grid-area:2 / 1; }
  body.club-live #clubGame .combat-controls #dodge { grid-area:2 / 2; }
  body.club-live #clubGame .combat-controls #interact { grid-area:1 / 1 / 2 / 3; }
  body.club-live .club-stats {
    grid-template-columns:minmax(110px,1fr) auto auto;
    gap:8px;
  }
  body.club-live .club-stat-label { font-size:9px; }
  body.club-live #clubCash { font-size:28px; }
  body.club-live #clubHP,
  body.club-live #clubTime { font-size:19px; }
  body.club-live .club-stats .club-patience { grid-column:1 / -1; gap:6px; font-size:9px; }
  body.club-live #clubGame .club-supplies { height:92px; }
}
@media (prefers-reduced-motion:reduce) {
  body.club-live #clubGame button:not(.rhythm-track) { transition:none; }
}
@media (forced-colors:active) {
  body.club-live #clubGame button:not(.rhythm-track) { border-color:ButtonText; }
  body.club-live #clubNeed { background:Highlight; }
  body.club-live .club-patience > div { outline:1px solid CanvasText; }
}