/* Shared location HUD: the scene gets the space, explanations stay behind a click. */
body.location-shell .shell:has(#locationShell) {
  display:flex; flex-direction:column; gap:8px; max-width:1680px;
  height:100dvh; min-height:0; padding:10px 20px;
}
body.location-shell .shell:has(#locationShell) main {
  display:grid; grid-template-columns:clamp(210px,19vw,270px) minmax(0,1fr);
  gap:12px; flex:1; min-height:0; height:auto; align-items:stretch;
}
body.location-shell .rightcol { height:100%; min-height:0; min-width:0; }
body.location-shell #requestDock { display:none; }
body.location-shell .shell:has(#locationShell) footer { flex:none; height:20px; min-height:20px; margin:0; padding:0; font-size:11px; line-height:1; }
body.location-shell #locationShell {
  position:relative; display:flex; flex-direction:column; height:100%; min-height:0;
  padding:0; overflow:visible; border:1px solid #4b4338; border-radius:12px;
  background:#171a16; box-shadow:0 6px 20px #0004;
}
body.location-shell #locationStage { flex:1; width:100%; min-height:0; border-radius:11px 11px 0 0; }
body.location-shell #locationShell .yard-scene { width:100%; height:auto; max-height:none; aspect-ratio:3/2; }
@media(min-width:701px) {
  body.location-shell .shell:has(#locationShell) main { display:flex; justify-content:center; container-type:size; }
  body.location-shell .shell:has(#locationShell) #characterPanel {
    display:grid; grid-template-rows:40px minmax(0,1fr) clamp(130px,18dvh,180px) 64px 56px;
    flex:0 0 clamp(210px,19vw,270px); width:clamp(210px,19vw,270px); overflow:hidden;
  }
  body.location-shell .shell:has(#locationShell) #characterPanel .character-stage { height:100%; min-height:0; }
  body.location-shell .shell:has(#locationShell) .rightcol {
    display:flex; flex:none;
    width:min(calc(100cqw - clamp(210px,19vw,270px) - 12px),calc((100cqh - var(--yard-toolbar-space,79px))*1.7 + 2px));
  }
  body.location-shell #locationShell { width:100%; }
}
body.location-shell #locationShell .yard-toolbar {
  position:relative; display:flex; align-items:center; gap:12px; flex:none;
  min-height:76px; padding:10px 12px; border-top:1px solid #7b684736;
  border-radius:0 0 11px 11px; background:linear-gradient(#302c22,#1b1b17);
}
body.location-shell #locationShell .home-actions {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); flex:1; min-width:0;
  gap:9px; margin:0; padding:0;
}
body.location-shell #locationShell .home-actions>div { min-width:0; }
body.location-shell #locationShell .home-actions .yard-action {
  --action-glow:#d9bd80; position:relative; display:flex; align-items:center; justify-content:center;
  gap:8px; width:100%; height:56px; min-height:48px; padding:6px 10px;
  border:1px solid #766143; border-top-color:#ad9061; border-radius:8px;
  background:linear-gradient(170deg,#514638,#302b23 55%,#26241f);
  color:#f2dfba; font-size:13px; font-weight:650; line-height:1.2; text-align:left;
  text-shadow:0 1px 2px #0009;
  box-shadow:inset 0 1px #ffe3ad26,inset 0 -3px #0005,0 3px 0 #10120f,0 4px 8px #0004;
  transition:filter .16s,box-shadow .16s,transform .12s;
}
body.location-shell #locationShell .yard-action svg { width:23px; height:23px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; color:var(--action-glow); }
body.location-shell #locationShell .yard-action>span { min-width:0; }
body.location-shell #locationShell .yard-action small { display:block; margin-top:3px; font-size:11px; font-weight:500; color:#c8bda5; }
body.location-shell #locationShell .home-actions .beer-action { --action-glow:#e9cc76; border-color:#947b40; background:linear-gradient(165deg,#635034,#3d3223 55%,#2d281d); }
body.location-shell #locationShell .home-actions .fine-action { --action-glow:#d89d8b; }
body.location-shell #locationShell .home-actions .yard-action:hover:not(:disabled),body.location-shell #locationShell .home-actions .yard-action:focus-visible {
  filter:brightness(1.16); transform:translateY(-1px); outline:0; border-color:var(--action-glow);
  box-shadow:inset 0 1px #ffe3ad40,inset 0 -3px #0004,0 4px 0 #10120f,0 0 15px color-mix(in srgb,var(--action-glow) 22%,transparent);
}
body.location-shell #locationShell .home-actions .yard-action:active:not(:disabled) { transform:translateY(2px); box-shadow:inset 0 1px 5px #0007; }
body.location-shell #locationShell .home-actions .yard-action:disabled { opacity:.5; filter:saturate(.45); cursor:not-allowed; }
.salary-widget { position:relative; flex:none; }
body.location-shell #locationShell .salary-button {
  --salary-progress:0deg; position:relative; display:grid; place-items:center; isolation:isolate;
  width:56px; height:56px; min-height:0; padding:0; border:0; border-radius:50%;
  background:linear-gradient(150deg,#524632,#24271f); color:#ecd6a4; font-size:27px; font-weight:700;
  box-shadow:0 3px 0 #10120f,0 3px 10px #0005; transition:filter .15s,box-shadow .15s;
}
body.location-shell #locationShell .salary-button::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:conic-gradient(from -90deg,#e2c47d var(--salary-progress),#69634b38 0);
}
body.location-shell #locationShell .salary-button::after { content:''; position:absolute; inset:4px; border-radius:inherit; background:radial-gradient(circle at 35% 25%,#514736,#24271e 75%); box-shadow:inset 0 1px 2px #f8e7bb22; }
body.location-shell #locationShell .salary-button>span { position:relative; z-index:1; text-shadow:0 2px 3px #0009; }
body.location-shell #locationShell .salary-button:hover,body.location-shell #locationShell .salary-button:focus-visible,body.location-shell #locationShell .salary-button[aria-expanded="true"] { outline:0; filter:brightness(1.2); box-shadow:0 3px 0 #10120f,0 0 18px #e2c47d4d; }
body.location-shell #locationShell .salary-button.salary-capped { color:#b5cda2; }
body.location-shell #locationShell .salary-button.salary-capped::before { background:#8ca87880; }
.salary-popover {
  position:absolute; bottom:calc(100% + 14px); right:0; z-index:50;
  width:280px; max-width:calc(100vw - 36px); padding:15px 17px; border:1px solid #a78d59;
  border-radius:9px; background:linear-gradient(150deg,#302d22fa,#151a15fa);
  color:#eae1ce; box-shadow:0 8px 30px #000a,0 0 18px #d1af5d12;
}
.salary-popover[hidden] { display:none; }
.salary-popover b { color:#f0d79f; font-size:15px; }
.salary-popover p { margin:8px 0 0; color:#d5d1bf; font-size:14px; line-height:1.5; }
body.location-shell .shell:has(#locationShell) #characterPanel .hero-top { padding:10px 12px; }
body.location-shell .shell:has(#locationShell) #characterPanel .speech {
  display:grid; grid-template-rows:24px minmax(0,1fr); padding:10px 12px; min-height:0; overflow:hidden;
}
body.location-shell .shell:has(#locationShell) #characterPanel .speech-label { height:24px; min-height:0; }
body.location-shell #repeatVoice { min-height:24px; padding:0 2px; font-size:11px; white-space:nowrap; }
body.location-shell .shell:has(#locationShell) #characterPanel .speech p {
  display:block; min-height:0; max-height:none; margin:6px 0 0; overflow:auto; overflow-wrap:anywhere;
  -webkit-line-clamp:unset; line-clamp:unset;
  scrollbar-width:thin; scrollbar-color:#776342 transparent; font-size:14px; line-height:1.4;
}
body.location-shell .shell:has(#locationShell) #characterPanel .vitals { padding:8px 12px; gap:12px; }
body.location-shell .shell:has(#locationShell) #characterPanel .beerbar { padding:0 12px 12px; gap:8px; }
@media(max-width:1100px) and (min-width:701px) {
  body.location-shell #locationShell .home-actions .yard-action { font-size:12px; padding:5px; gap:5px; }
  body.location-shell #locationShell .yard-action svg { width:19px; height:19px; }
  body.location-shell #locationShell .yard-toolbar { gap:8px; padding:10px; }
  body.location-shell #locationShell .home-actions { gap:6px; }
}
@media(max-width:700px) {
  body.location-shell .shell:has(#locationShell) { height:auto; min-height:100dvh; padding:8px 10px; gap:7px; }
  body.location-shell .shell:has(#locationShell) main { display:flex; flex-direction:column; flex:none; gap:8px; }
  body.location-shell .shell:has(#locationShell) #characterPanel { display:grid; grid-template-columns:72px minmax(0,1fr); grid-template-rows:88px 42px 44px; padding:8px; }
  body.location-shell .shell:has(#locationShell) #characterPanel .hero-top { display:none; }
  body.location-shell .shell:has(#locationShell) #characterPanel .character-stage { width:72px; height:123px; min-height:0; grid-column:1; grid-row:1/4; }
  body.location-shell .shell:has(#locationShell) #characterPanel .speech { grid-column:2; grid-row:1; min-height:0; padding:0 0 5px 8px; }
  body.location-shell .shell:has(#locationShell) #characterPanel .speech p { margin:3px 0; font-size:13px; line-height:1.3; }
  body.location-shell .shell:has(#locationShell) #characterPanel .speech-label { font-size:10px; }
  body.location-shell .shell:has(#locationShell) #characterPanel .vitals { grid-column:2; grid-row:2; padding:3px 0 5px 8px; }
  body.location-shell .shell:has(#locationShell) #characterPanel .beerbar { grid-column:2; grid-row:3; padding:0 0 0 8px; }
  body.location-shell .rightcol { height:auto; }
  body.location-shell #locationShell { height:auto; }
  body.location-shell #locationStage { flex:none; aspect-ratio:3/2; }
  body.location-shell #locationShell .yard-scene { max-height:none; }
  body.location-shell #locationShell .yard-toolbar { align-items:center; min-height:0; padding:9px; gap:9px; }
  body.location-shell #locationShell .home-actions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  body.location-shell #locationShell .home-actions .yard-action { height:49px; min-height:44px; gap:6px; padding:5px 7px; font-size:12px; }
  body.location-shell #locationShell .yard-action svg { width:20px; height:20px; }
  body.location-shell #locationShell .salary-button { width:48px; height:48px; font-size:25px; }
  body.location-shell footer { margin-top:auto; padding:6px 0; }
}
@media(min-width:701px) and (max-height:700px) {
  body.location-shell .shell:has(#locationShell) .rightcol { --yard-toolbar-space:126px; }
  body.location-shell #locationShell .home-actions { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  body.location-shell #locationShell .home-actions .yard-action { height:49px; min-height:44px; }
  body.location-shell #locationShell .yard-toolbar { padding:9px; }
}
@media(prefers-reduced-motion:reduce) { body.location-shell #locationShell .yard-action,body.location-shell #locationShell .salary-button { transition:none; } }