/* The Town floor (town.js): a band along the bottom of the whole screen, in front
   of the page and the video. Clicks pass through to whatever is under it. On a
   Twitch surface town.js fits it into the room under the player (any layer over a
   Twitch iframe pauses it), or hides it when there is too little room. */
#town-strip {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: var(--town-stage-h, clamp(260px, 46vh, 480px)); /* the floor is the lower part; above it is air for heads and jumps */
  pointer-events: none; overflow: visible; z-index: 28;
}
/* Cinema: z-index 25, as it was when the floor was see-through. That never put it
   UNDER the chat panel as this comment used to say: #main is position:fixed, which
   makes it a stacking context, so #chatwrap's 26 only counts inside #main and the
   strip paints over all of it. Once the street was solid it hid the chat box
   (Scumbag0 in chat, 2026-10-04: "the textbox is too low on Cinema Mode ... still
   obscured by the environment"). So in the Town, Cinema's chrome moves up out of
   the street's band instead, like the video does (below). */
body.layout-cinema #town-strip { z-index: 25; }
/* The street's band: what the room gives up while you are in the Town. One number,
   read by the rules below and by chat-float.js (a dragged Cinema chat panel). */
body.town-on {
  --town-band: 250px;
  --town-stage-h: clamp(260px, 46vh, 480px);
  /* Conversation and projector borrow the empty upper-storey air down to the
     responsive roofline. Stopping the real player there matters: iframe-native
     seek/volume/fullscreen controls live on its bottom edge and cannot be moved
     separately. look.js cuts these exact rectangles out of the painted sky;
     Town buildings and people still render in front. */
  --town-sky-drop: clamp(96px, 16.5vh, 172px);
}
/* The room's controls draw ON TOP of the Town (2026-10-04: the street is solid now,
   and a 36-player crowd already buried the chat box and the action bar). Only the
   controls: the chat panel itself stays under the floor so guys walking on the
   left are not hidden behind it. Measured: no ancestor of these makes a stacking
   context, so z-index 29 lifts them over the strip's 28. Cinema has its own order. */
/* The chat keeps its compact Town height, but an active non-Twitch player extends
   through the reserved band behind the street. look.js cuts that exact rectangle
   out of the sky, so shops and people remain foreground silhouettes over a real
   drive-in screen. Nothing playing stays all sky; Twitch must never be overlaid. */
body.town-on:not(.layout-cinema) { --queue-reserve: calc(200px + var(--town-band)); }
@media (min-width: 769px) {
  /* Town is a game view: its action/queue dock belongs under the navbar, above
     the room columns, not floating halfway through the projected picture. The
     room then ends where Town begins; only #videowrap continues into the stage. */
  body.town-on:not(.layout-cinema):not(.twitch-safe-surface) #mainpage {
    height: calc(100vh - 50px - var(--town-stage-h));
    min-height: 0;
  }
  body.town-on:not(.layout-cinema):not(.twitch-safe-surface) #mainpage > #main {
    flex: 1 1 auto;
    height: auto;
  }
  body.town-on:not(.layout-cinema):not(.twitch-safe-surface) #bottom-bar {
    position: relative;
    order: -1;
    margin-top: 0;
    align-items: end;
  }
  /* Opening the video menu must not make the short player-status column reserve
     the menu's full height. It is a temporary tool drawer, anchored to the top
     of its own video column; the persistent room keeps the compact HUD height.
     The drawer may cover the video while explicitly open, but never chat or the
     Town street. */
  body.town-on:not(.layout-cinema):not(.twitch-safe-surface) #bottom-queue:not(.queue-collapsed) {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: auto;
    max-height: calc(100vh - 50px - var(--town-stage-h) - 8px);
    z-index: 31;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .34);
  }
  body.town-on:not(.layout-cinema):not(.twitch-safe-surface) #bottom-queue:not(.queue-collapsed) #rightpane {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  body.town-on:not(.layout-cinema):not(.twitch-safe-surface) #bottom-queue:not(.queue-collapsed) #queue {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }
  body.town-on:not(.layout-cinema):not(.twitch-safe-surface) #chatwrap {
    align-self: flex-start;
    height: calc(100% + var(--town-sky-drop));
  }
  body.town-on:not(.layout-cinema):not(.twitch-safe-surface):not(.hide-player) #videowrap:has(#player:not(.no-media)) {
    align-self: flex-start;
    height: calc(100% + var(--town-sky-drop));
  }
}
/* Cinema: the video frame normally fills the window (inset 0), so the street would
   sit over the bottom of the movie (subtitles). In the Town it stops short of the
   band and the movie letterboxes above the street. */
body.town-on.layout-cinema #videowrap { bottom: var(--town-band); height: auto; }
/* Cinema's chat panel, action rail and queue console are anchored to the bottom of
   the window, so they move up by the band too. The chat (and its hover zone and
   height caps) hang off --cinema-rail-gap; the rail, the queue and the queue's
   hover zone off --player-controls-clear. */
body.town-on.layout-cinema {
  --cinema-rail-gap: calc(18px + var(--town-band));
  --player-controls-clear: calc(12px + var(--town-band));
}
body.town-on.layout-cinema.player-owns-bottom { --player-controls-clear: calc(60px + var(--town-band)); }
body.town-on.layout-cinema .cinema-hit[data-zone="rail"] { bottom: var(--town-band); }
body.town-on.layout-cinema .cinema-hit[data-zone="chat"] { bottom: calc(var(--cinema-rail-h) + var(--town-band)); }
body.town-on:not(.layout-cinema) #chatline-wrap { z-index: 29; }
body.town-on:not(.layout-cinema) #leftcontrols,
body.town-on:not(.layout-cinema) #bottom-queue { position: relative; z-index: 29; }
/* The collapsed queue crosses the extended screen. Treat it like player chrome,
   not an opaque wall through the picture; expanded rows keep their solid panel. */
body.town-on:not(.layout-cinema) #bottom-queue.queue-collapsed {
  background: rgba(14, 18, 23, .78);
}
/* The 200px reserve holds the menu's chrome, not its rows: an open list in page
   flow ran into the street. coolhole.js fitTownQueue sets --town-list-max to the
   room left above the street; the list scrolls inside it (Town only, desktop
   only: the stacked <=768px room keeps its own list rules). */
@media (min-width: 769px) {
  body.town-on:not(.layout-cinema) #bottom-queue #queue { max-height: var(--town-list-max, none); overflow-y: auto; }
}
/* Battle.net's framed console is 31px taller (15px over its tools, 16px under the
   list), which left 31px for a 60px row and pushed the menu 29px into the street. */
@media (min-width: 769px) {
  html[data-theme="battlenet"] body.town-on:not(.layout-cinema) { --queue-reserve: calc(230px + var(--town-band)); }
}
#town-strip .town-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

#town-strip .town-name,
#town-strip .town-bubble { position: absolute; left: 0; top: 0; will-change: transform; white-space: nowrap; }
#town-strip .town-name {
  font-weight: 700; font-size: 11px; line-height: 1.2; color: #fff;
  background: rgba(0, 0, 0, .55); border-radius: 2px; padding: 0 5px 1px;
}
/* Cinema keeps the nearby crowd readable without making a distant, idle crowd
   compete with the video. Activity (speech, catches, fishing, emotes, and
   danger) is kept full-strength by town.js. */
#town-strip .town-name.town-quiet { opacity: .58; }
/* Same look as the chat characters' bubbles (portrait.css .pt-bubble). */
#town-strip .town-bubble {
  max-width: 240px; width: max-content; white-space: normal;
  background: #fff; color: #141414; border: 3px solid #111; border-radius: 14px;
  padding: 4px 10px 6px; font-weight: 600; font-size: 14px; line-height: 1.2;
  overflow-wrap: anywhere; text-shadow: none;
}
#town-strip .town-bubble { max-height: 9em; overflow: hidden; }
#town-strip .town-bubble img { max-height: 56px; max-width: 160px; vertical-align: middle; }
#town-strip .town-zzz {
  position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; white-space: nowrap;
  color: #f3f0e8; font: 800 16px/1 sans-serif; letter-spacing: 1px; text-shadow: 0 1px 2px #111;
}
/* [sp]spoiler[/sp] stays hidden in the bubble (chat's rule is scoped to .chat-text). */
#town-strip .town-bubble .spoiler { color: #141414; background: #141414; border-radius: 2px; padding: 0 2px; }
/* The Town explained (town.js showIntro): first visit, and on the "?". */
/* On the chat column (town.js placeIntro). In the street it sat on the Store's door
   prompt (bottom-left, town_doors.py caught it) or under the queue panel (top), and over
   the video it would pause Twitch. Above everything in the page, below modals. */
.town-card {
  position: fixed; z-index: 1150; pointer-events: auto;
  width: min(380px, calc(100% - 32px)); padding: 12px 14px 12px;
  background: rgba(16, 18, 22, .95); color: #e8e6e1; border: 1px solid rgba(242, 239, 232, .35); border-radius: 2px;
  font-size: 13px; line-height: 1.4;
}
.town-card-title { font-weight: 800; font-size: 16px; color: #fff; margin-bottom: 6px; }
.town-card p { margin: 0 0 6px; }
.town-card b { color: #fff; }
.town-card button, #town-strip .town-help {
  pointer-events: auto; cursor: pointer; font: inherit; font-weight: 700; color: #fff;
  background: transparent; border: 1px solid rgba(242, 239, 232, .6); border-radius: 2px;
}
.town-card button { margin-top: 4px; padding: 3px 14px; }
#town-strip .town-help { position: absolute; left: 12px; bottom: 12px; z-index: 3002; width: 24px; height: 24px; padding: 0;
  background: rgba(16, 18, 22, .8); }
/* Near a knock-out (70%+): a knock-out is a real death (town_stakes.go). */
#town-strip .town-name.danger { background: rgba(176, 34, 22, .9); color: #fff; }
/* "+12" over whoever grabbed coins off the street. */
#town-strip .town-plus {
  position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3000; white-space: nowrap;
  font: 900 20px/1 Impact, 'Arial Black', sans-serif; color: #ffd23a;
  -webkit-text-stroke: 2px #2a1a00; paint-order: stroke fill;
}
#town-strip .town-pow {
  position: absolute; pointer-events: none; z-index: 3000;
  font: 900 26px/1 Impact, 'Arial Black', sans-serif; color: #ffe14a;
  -webkit-text-stroke: 2px #111; paint-order: stroke fill; letter-spacing: 1px;
}
/* Someone off the screen (town.js layoutEdges): their name at that edge, pointing their way. */
#town-strip .town-edge {
  position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; white-space: nowrap; z-index: 2999;
  font-weight: 700; font-size: 11px; line-height: 1.3; color: #fff;
  background: rgba(0, 0, 0, .6); border: 1px solid rgba(242, 239, 232, .35); border-radius: 2px; padding: 0 6px 1px;
}
/* A catch over the angler's head (town.js showCatch): its art and its name, for everyone in the Town. */
#town-strip .town-catch {
  position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-weight: 800; font-size: 12px; line-height: 1.2; color: #fff;
}
#town-strip .town-catch img { width: 44px; height: 44px; object-fit: contain; image-rendering: auto; }
#town-strip .town-catch span { background: rgba(16, 18, 22, .82); border: 1px solid rgba(242, 239, 232, .5); border-radius: 2px; padding: 0 6px 1px; }
/* The keys, shown for a few seconds after joining (town.js start). */
#town-strip .town-hint {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 3001;
  max-width: calc(100% - 24px); padding: 4px 10px; border-radius: 2px;
  background: rgba(0, 0, 0, .72); color: #fff; font-size: 12px; line-height: 1.3; text-align: center;
  transition: opacity .6s;
}
#town-strip .town-hint.town-hint-out { opacity: 0; }
/* The door prompt over the shop you stand at (town.js doorAt): E, RT or a click
   opens it, so this one element takes clicks through the strip. */
#town-strip .town-door {
  position: absolute; left: 0; top: 0; z-index: 3001; pointer-events: auto; cursor: pointer;
  white-space: nowrap; padding: 3px 9px 4px; border: 1px solid #f2efe8; border-radius: 2px;
  background: rgba(16, 18, 22, .88); color: #fff; font-family: inherit; font-weight: 700; font-size: 13px; line-height: 1.2;
}
#town-strip .town-door:hover { background: rgba(40, 44, 52, .95); }
#town-strip .town-door kbd {
  display: inline-block; min-width: 1.3em; padding: 0 4px; margin-right: 2px; border-radius: 2px;
  background: #f2efe8; color: #111; font-family: inherit; font-weight: 800; font-size: 12px; line-height: 1.35; text-align: center;
}
/* A consumed item's empty stays in your hand until you choose. The choice is
   compact and literal; the bin button only wakes up beside the physical bin. */
#town-strip .town-waste-choice {
  position: absolute; right: 12px; bottom: 12px; z-index: 3003; pointer-events: auto;
  width: 184px; padding: 7px 8px; border: 1px solid rgba(242, 239, 232, .6); border-radius: 2px;
  background: rgba(16, 18, 22, .92); color: #f2efe8; font-size: 12px; line-height: 1.25;
}
#town-strip .town-waste-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
#town-strip .town-waste-actions { display: flex; gap: 6px; margin-top: 5px; }
#town-strip .town-waste-actions button {
  flex: 1; min-height: 27px; padding: 2px 6px; cursor: pointer; border: 1px solid rgba(242, 239, 232, .6);
  border-radius: 2px; background: transparent; color: #fff; font: inherit; font-weight: 700; font-size: 12px; line-height: 1.2;
}
#town-strip .town-waste-actions button:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
#town-strip .town-waste-actions button:disabled { cursor: default; opacity: .38; }
#town-strip .town-waste-note { min-height: 15px; margin-top: 4px; color: #d8d4cb; }
@media (max-width: 520px) {
  #town-strip .town-waste-choice { right: 8px; bottom: 8px; width: 168px; }
}
/* A round in progress / its result (town.js roundState). */
#town-strip .town-banner {
  position: absolute; left: 50%; top: 42%; transform: translateX(-50%); z-index: 3002;
  max-width: calc(100% - 24px); padding: 5px 12px; border-radius: 2px; white-space: pre-wrap; text-align: center;
  background: rgba(20, 12, 8, .82); color: #ffd9b8; border: 1px solid #ff6a3a;
  font-weight: 700; font-size: 13px; line-height: 1.3;
}