/* FanSpot / Spot Buddy auction preview. Load after brand.css.
 * Authored CSS geometry, 2026-10-27; no added assets, fonts, or dependencies.
 * Typography and product SVGs inherit the host's existing asset permissions.
 * Unified DOM: topbar / showcase / layout(chat, main) / effects overlay.
 */
.auction-dialog {
  /* A host may supply visualViewport.height / offsetTop through these hooks
   * when its keyboard overlays the layout viewport. CSS cannot measure that
   * overlay; dvh and a zero offset are the defaults. */
  --auction-viewport-height: 100vh;
  --auction-inset: max(16px, env(safe-area-inset-top, 0px), env(safe-area-inset-bottom, 0px));
  position: fixed;
  inset: var(--auction-viewport-offset-top, 0px) 0 auto;
  box-sizing: border-box;
  width: min(1120px, calc(100vw - 24px));
  height: min(900px, calc(var(--auction-viewport-height) - var(--auction-inset) - var(--auction-inset)));
  max-width: none;
  max-height: calc(var(--auction-viewport-height) - var(--auction-inset) - var(--auction-inset));
  min-width: 0;
  min-height: 0;
  margin: max(var(--auction-inset), calc((var(--auction-viewport-height) - 900px) / 2)) auto 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  border: 1px solid #E1D5C5;
  border-radius: 20px;
  background: #FFFEFB;
  color: #3E2F31;
  box-shadow: 0 24px 90px #3E2F3133;
}
@supports (height: 100dvh) {
  .auction-dialog { --auction-viewport-height: 100dvh; }
}
.auction-dialog[open] { display: grid; grid-template-rows: 44px minmax(0, 1fr); }
.auction-dialog::backdrop { background: #3E2F3199; }
.auction-dialog .detail-toolbar { position: relative; height: 44px; min-height: 0; padding-inline: 20px; box-sizing: border-box; }
.auction-dialog .detail-toolbar > button { min-width: 44px; min-height: 44px; }
.auction-dialog .detail-content { height: 100%; min-height: 0; min-width: 0; overflow: hidden; }

.auction-stage {
  --auction-yellow: #F7C966;
  --auction-cocoa: #3E2F31;
  --auction-coral: #ED8972;
  --auction-cream: #FFF8ED;
  --auction-line: #E9DFD2;
  --auction-muted: #75615C;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  isolation: isolate;
  container: auction-room / size;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  color: var(--auction-cocoa);
  text-align: left;
  overflow-wrap: anywhere;
}
.auction-stage, .auction-stage *, .auction-stage *::before, .auction-stage *::after { box-sizing: border-box; }
.auction-stage.bid-panel, .auction-stage .bid-panel { width: 100%; max-width: none; padding: 0; margin: 0; }
.auction-stage :where(h2, h3, p) { margin: 0; }
.auction-stage :where(button, input, textarea) { font-family: inherit; }
.auction-stage :where(button, input, textarea):focus-visible { outline: 2px solid #9B4B3A; outline-offset: 2px; }
.auction-stage [hidden] { display: none !important; }
.auction-stage fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

.auction-topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 24px; height: 72px; min-width: 0; padding: 8px 24px; border-top: 4px solid var(--auction-yellow); background: var(--auction-cocoa); color: var(--auction-cream); }
.auction-topbar > div { min-width: 0; }
.auction-live-kicker { display: flex; align-items: center; gap: 8px; color: var(--auction-yellow); font-size: 9px; font-weight: 750; letter-spacing: 1.6px; line-height: 1.4; }
/* The clock and text communicate state; the presence light stays steady. */
.auction-live-kicker::before, .chat-presence::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--auction-yellow); box-shadow: 0 0 0 4px #F7C96618; }
.auction-topbar h2 { font-size: clamp(19px, 2vw, 25px); font-weight: 800; letter-spacing: -.7px; line-height: 1.35; color: inherit; }
.auction-timer { display: grid; gap: 2px; min-width: 145px; padding: 5px 14px; border: 1px solid #FFF8ED33; border-radius: 10px; background: #2C2124; text-align: right; }
.auction-timer :where(label, span:first-child, small) { color: #E2CFC4; font-size: 10px; line-height: 1.3; }
.auction-timer [data-auction-countdown] { color: var(--auction-yellow); font-size: 23px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: .6px; line-height: 1.15; white-space: nowrap; }

/* Only the upper product area and transcript may scroll. The fixed lower grid
 * never grows with product copy, messages, feedback, or textarea resizing. */
.auction-showcase { display: grid; place-items: center; height: 170px; height: clamp(100px, 21cqh, 170px); min-height: 0; min-width: 0; padding: 12px 24px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #C6AE95 transparent; border-bottom: 1px solid var(--auction-line); background: #FFFEFB; }
.auction-item { display: flex; align-items: center; justify-content: center; gap: 24px; width: min(100%, 650px); min-width: 0; margin: auto; }
.auction-art { width: 144px; flex: 0 0 144px; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--auction-line); border-radius: 16px; background: var(--auction-cream); }
.auction-art svg { display: block; width: 100%; height: 100%; object-fit: contain; }
.auction-item-copy { min-width: 0; max-width: 440px; }
.auction-item-copy h3 { font-size: 21px; font-weight: 750; line-height: 1.4; letter-spacing: -.5px; }
.auction-item-copy :where(p, small, span) { font-size: 11px; color: var(--auction-muted); line-height: 1.55; }
.auction-item-copy > :where(p, small, span) { display: block; margin-top: 4px; }

.auction-layout { display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); min-width: 0; min-height: 0; overflow: hidden; }
.auction-main, .auction-chat { min-width: 0; min-height: 0; max-height: none; overflow: hidden; }
.auction-main { display: flex; flex-direction: column; gap: 6px; padding: 14px; background: #FFFEFB; }
.auction-main > * { flex: 0 0 auto; min-width: 0; }
.auction-price-board { --auction-price-size: 36px; container-type: inline-size; position: relative; padding: 10px 14px; border: 1px solid #EBCB89; border-radius: 14px; background: var(--auction-cream); text-align: center; }
.auction-price-board > :where(label, span, p) { display: block; color: #70534B; font-size: 11px; font-weight: 650; line-height: 1.3; }
.auction-price-board strong { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 3px 5px; max-width: 100%; margin-top: 2px; font-size: 36px; font-size: min(var(--auction-price-size), 15.5cqi); font-weight: 850; font-variant-numeric: tabular-nums; letter-spacing: -1.2px; line-height: 1.15; }
.auction-price-board [data-auction-price] { display: inline-block; min-width: 0; max-width: 100%; font: inherit; letter-spacing: inherit; white-space: nowrap; transform-origin: 50% 65%; }
.auction-price-board > small { display: block; margin-top: 3px; color: var(--auction-muted); font-size: 10px; line-height: 1.3; }
.auction-price-board strong small { font-size: 11px; font-weight: 600; letter-spacing: 0; }
.auction-event-status { padding: 5px 9px; border-radius: 8px; background: #F9EDDA; color: #70534B; font-size: 11px; line-height: 1.4; }
.auction-stage .wallet-summary { margin: 0; padding: 6px 12px; border: 1px solid var(--auction-line); border-radius: 10px; background: #FFFEFB; }
.auction-stage .wallet-summary > span { display: block; color: var(--auction-muted); font-size: 11px; line-height: 1.3; }
.auction-stage .wallet-summary strong { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; margin-top: 1px; font-size: 24px; font-weight: 750; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.6px; }
.auction-stage [data-wallet-balance] { white-space: nowrap; }
.auction-stage .wallet-summary strong small { margin: 0; font-size: 10px; font-weight: 550; letter-spacing: 0; }
.auction-stage [data-bid-form] { margin: 0; }
.auction-stage [data-bid-form] fieldset { display: grid; gap: 6px; }
.auction-stage .bid-label { display: block; margin: 0; color: #70534B; font-size: 12px; font-weight: 650; line-height: 1.3; }
.auction-stage .bid-amount { display: flex; align-items: center; gap: 6px; height: 44px; min-width: 0; padding: 6px 10px; border: 1px solid #D4B58B; border-radius: 10px; background: #FFFFFF; }
.auction-stage .bid-amount:focus-within { outline: 2px solid #9B4B3A; outline-offset: 2px; }
.auction-stage .bid-amount input { width: 100%; min-width: 0; min-height: 28px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--auction-cocoa); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.auction-stage .bid-amount span { flex: 0 0 auto; color: var(--auction-muted); font-size: 11px; white-space: nowrap; }
.bid-quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.bid-quick-actions button { min-width: 0; min-height: 32px; padding: 6px 4px; border: 1px solid #E4D3B8; border-radius: 8px; background: #FFFBF3; color: #70534B; font-size: 11px; font-weight: 650; text-align: center; }
/* Bound verbose live-region copy so it cannot push the bid button off screen.
 * Its complete text stays in the accessible live region. */
.auction-stage .bid-feedback { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 28px; max-height: 28px; margin: 0; overflow: hidden; color: #9B4B3A; font-size: 10px; line-height: 14px; }
.auction-stage .bid-feedback:empty { min-height: 0; }
.auction-stage [data-bid-form] .detail-primary { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-width: 0; min-height: 44px; padding: 8px; border: 1px solid #E4B54C; border-radius: 10px; background: var(--auction-yellow); color: var(--auction-cocoa); font-size: 14px; font-weight: 800; line-height: 1.3; white-space: normal; text-align: center; }
.auction-stage [data-bid-form] .detail-primary svg { flex: 0 0 auto; }
.auction-stage .wallet-back { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; min-height: 28px; margin: 0; padding: 3px; border: 0; background: transparent; color: #9B4B3A; font-size: 11px; line-height: 1.3; text-align: center; }
.auction-stage .buddy-note { display: block; margin: 0; color: var(--auction-muted); font-size: 10px; line-height: 1.4; }

.auction-chat { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 14px 18px; border-right: 1px solid var(--auction-line); background: #FCF7F0; }
.auction-chat > :not(.chat-messages) { flex: 0 0 auto; min-width: 0; }
.chat-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.chat-header h3 { font-size: 17px; font-weight: 800; letter-spacing: -.5px; line-height: 1.35; }
.chat-presence { display: flex; align-items: center; gap: 5px; color: #70534B; font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1.3; }
.chat-presence::before { background: var(--auction-coral); box-shadow: none; width: 5px; height: 5px; }
.chat-connection { color: var(--auction-muted); font-size: 10px; line-height: 1.4; }
.chat-nickname { display: flex; align-items: center; gap: 6px; margin: 0; }
.chat-nickname label { flex: 0 0 auto; color: #70534B; font-size: 11px; font-weight: 650; }
.chat-nickname input { flex: 1 1 0; width: 100%; max-width: 100%; min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid #DDCEC0; border-radius: 8px; background: #FFFEFB; color: var(--auction-cocoa); font-size: 14px; }
.chat-nickname button { min-height: 40px; padding: 8px 10px; border: 1px solid #DDCEC0; border-radius: 8px; color: #70534B; font-size: 11px; }
.chat-messages { flex: 1 1 0; min-width: 0; min-height: 0; padding: 10px; overflow: auto; overscroll-behavior: contain; scroll-padding-block: 10px; scrollbar-width: thin; scrollbar-color: #C6AE95 transparent; border: 1px solid var(--auction-line); border-radius: 10px; background: #FFFEFB; }
.chat-empty { display: grid; align-content: center; min-height: 100%; padding: 12px 6px; color: var(--auction-muted); font-size: 12px; line-height: 1.8; text-align: center; }
.chat-message { padding: 8px; border-radius: 8px; }
.chat-message + .chat-message { margin-top: 4px; }
.chat-message header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; }
.chat-message header strong { max-width: 100%; color: #70534B; font-size: 11px; font-weight: 750; }
.chat-message time { color: var(--auction-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.chat-message p { margin-top: 4px; color: var(--auction-cocoa); font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-message.own { background: #FFF2D5; }
.chat-message.own header strong { color: #714C1C; }
.chat-new-messages { align-self: center; max-width: 100%; min-height: 32px; margin: 0; padding: 6px 10px; border: 1px solid #DDC79E; border-radius: 20px; background: var(--auction-cream); color: #70534B; font-size: 11px; font-weight: 650; line-height: 1.3; text-align: center; box-shadow: 0 3px 12px #3E2F3108; }
.chat-input-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.auction-stage .chat-form { display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: stretch; gap: 6px; margin: 0; }
.chat-form textarea { display: block; width: 100%; min-width: 0; height: 64px; min-height: 0; max-height: none; resize: none; padding: 8px 10px; border: 1px solid #DDCEC0; border-radius: 9px; background: #FFFEFB; color: var(--auction-cocoa); font-size: 16px; line-height: 1.4; }
.chat-form > div { display: flex; flex-direction: column; justify-content: space-between; gap: 3px; min-width: 0; }
.chat-form [data-chat-length] { color: var(--auction-muted); font-size: 9px; line-height: 1.2; text-align: center; white-space: nowrap; }
.chat-form button { display: flex; align-items: center; justify-content: center; gap: 3px; flex: 1 1 auto; width: 100%; min-width: 0; min-height: 44px; padding: 5px; border: 0; border-radius: 9px; background: var(--auction-cocoa); color: var(--auction-cream); font-size: 11px; font-weight: 650; line-height: 1.3; text-align: center; }
.chat-form button svg { flex: 0 0 auto; }
.chat-footer { color: var(--auction-muted); font-size: 10px; line-height: 1.4; }
.chat-ended { margin: 0; padding: 7px; border: 1px dashed #CDB9A3; border-radius: 8px; background: var(--auction-cream); color: #70534B; font-size: 11px; line-height: 1.4; }

/* Parent code owns disabled/inert states, validation and all live data. */
.auction-stage[data-room-phase="waiting"] .auction-live-kicker::before,
.auction-stage[data-room-phase="ended"] .auction-live-kicker::before { background: #CBB8A7; box-shadow: none; }
.auction-stage[data-room-phase="ended"] .auction-timer [data-auction-countdown] { color: #E2CFC4; }
.auction-stage[data-room-phase="ended"] .auction-event-status { background: #F0E8DF; color: #70534B; }
.auction-stage :where(button, input, textarea):disabled { cursor: not-allowed; opacity: .55; }
.auction-stage :where(input, textarea)::placeholder { color: #87736A; opacity: 1; }
/* Rapid presses retarget transitions without delaying submission or focus. */
.auction-stage button { cursor: pointer; touch-action: manipulation; transition: transform 120ms var(--ease-out), opacity 160ms var(--ease-out); }
.auction-stage button:active:not(:disabled) { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .auction-stage :where(.bid-quick-actions button, [data-bid-form] .detail-primary, .chat-form button):hover:not(:disabled) { transform: translateY(-1px); }
  .auction-stage :where(.bid-quick-actions button, [data-bid-form] .detail-primary, .chat-form button):hover:active:not(:disabled) { transform: scale(.97); }
}

/* Existing WAAPI effects target the same classes and measure the price board.
 * Decorations never intercept input or duplicate the parent's spoken status. */
.auction-effects-layer { position: absolute; inset: 0; z-index: 8; overflow: hidden; border-radius: inherit; pointer-events: none; user-select: none; }
.auction-success-badge { position: absolute; left: 78%; top: 250px; max-width: calc(100% - 24px); padding: 7px 13px; border: 1px solid #E0B157; border-radius: 30px; background: var(--auction-yellow); color: var(--auction-cocoa); box-shadow: 0 4px 14px #3E2F3114; font-size: 11px; font-weight: 800; line-height: 1.4; text-align: center; opacity: 0; transform: translate(-50%, 6px) scale(.97); transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out); }
.auction-success-badge.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.auction-halo { position: absolute; width: 150px; height: 150px; border: 3px solid #F7C966AA; border-radius: 50%; background: #F7C9660C; opacity: 0; }
.auction-particle { position: absolute; width: 6px; height: 10px; border-radius: 2px; background: var(--auction-yellow); opacity: 0; }
.auction-particle:nth-of-type(even) { background: var(--auction-coral); }

/* Both columns remain simultaneous at every width; DOM order is chat, bid. */
@media (max-width: 860px) {
  .auction-layout { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); }
  .auction-showcase { padding-inline: 16px; }
  .auction-main, .auction-chat { padding: 12px; }
  .auction-chat { gap: 6px; }
  .chat-nickname { display: none; }
  .bid-quick-actions { gap: 4px; }
  .bid-quick-actions button { font-size: 10px; }
}
@media (max-width: 600px) {
  .auction-dialog { --auction-inset: max(6px, env(safe-area-inset-top, 0px), env(safe-area-inset-bottom, 0px)); width: calc(100vw - 12px); border-radius: 14px; }
  .auction-dialog .detail-toolbar { padding-inline: 10px; }
  .auction-topbar { height: 60px; gap: 6px; padding: 6px 10px; }
  .auction-live-kicker { gap: 5px; font-size: 7px; letter-spacing: .8px; }
  .auction-topbar h2 { font-size: 17px; letter-spacing: -.6px; }
  .auction-timer { min-width: 95px; padding: 4px 7px; border-radius: 8px; }
  .auction-timer :where(label, span:first-child, small) { font-size: 8px; }
  .auction-timer [data-auction-countdown] { font-size: 18px; letter-spacing: .2px; }
  .auction-showcase { height: 164px; height: clamp(96px, 23cqh, 164px); padding: 10px 12px; }
  .auction-item { gap: 12px; }
  .auction-art { width: 104px; flex-basis: 104px; border-radius: 12px; }
  .auction-item-copy h3 { font-size: 16px; }
  .auction-item-copy :where(p, small, span) { font-size: 10px; line-height: 1.4; }
  .auction-main, .auction-chat { padding: 9px 8px; gap: 6px; }
  .auction-price-board { padding: 8px 5px; border-radius: 10px; }
  .auction-price-board > :where(label, span, p) { font-size: 10px; }
  .auction-price-board strong { gap: 2px 3px; --auction-price-size: clamp(23px, 6.9vw, 30px); letter-spacing: -.8px; }
  .auction-price-board strong small { font-size: 9px; }
  .auction-price-board > small, .bid-quick-actions, .auction-stage .buddy-note, .chat-footer { display: none; }
  .auction-event-status { padding: 5px 6px; font-size: 10px; line-height: 1.35; }
  .auction-stage .wallet-summary { padding: 6px; border-radius: 8px; }
  .auction-stage .wallet-summary > span { font-size: 9px; }
  .auction-stage .wallet-summary strong { font-size: 21px; }
  .auction-stage .wallet-summary strong small { font-size: 9px; }
  .auction-stage [data-bid-form] fieldset { gap: 4px; }
  .auction-stage .bid-label { font-size: 11px; }
  .auction-stage .bid-amount { gap: 4px; padding: 5px 6px; border-radius: 8px; }
  .auction-stage .bid-amount input { font-size: 18px; appearance: textfield; -moz-appearance: textfield; }
  .auction-stage .bid-amount input::-webkit-inner-spin-button, .auction-stage .bid-amount input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
  .auction-stage .bid-amount span { font-size: 9px; }
  .auction-stage [data-bid-form] .detail-primary { gap: 4px; padding: 7px 4px; border-radius: 8px; font-size: 12px; }
  .auction-stage [data-bid-form] .detail-primary svg { width: 13px; height: 13px; }
  .auction-stage .wallet-back { gap: 3px; font-size: 10px; }
  .auction-stage .wallet-back svg { width: 12px; height: 12px; }
  .chat-header { gap: 3px; }
  .chat-header h3 { font-size: 13px; letter-spacing: -.4px; }
  .chat-presence { gap: 3px; font-size: 9px; }
  .chat-connection { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 26px; overflow: hidden; font-size: 9px; line-height: 13px; }
  .chat-messages { padding: 5px 3px; border-radius: 8px; }
  .chat-empty { padding: 6px 3px; font-size: 10px; line-height: 1.6; }
  .chat-message { padding: 6px 4px; }
  .chat-message header { gap: 2px 4px; }
  .chat-message header strong { font-size: 10px; }
  .chat-message time { font-size: 8px; }
  .chat-message p { font-size: 11px; line-height: 1.55; }
  .chat-new-messages { min-height: 28px; padding: 5px 7px; font-size: 10px; }
  .auction-stage .chat-form { grid-template-columns: minmax(0, 1fr) 44px; gap: 4px; }
  .chat-form textarea { height: 64px; padding: 6px; font-size: 16px; /* Avoid iOS focus zoom. */ }
  .chat-form button { padding: 3px; font-size: 10px; }
  .chat-form button svg { display: none; }
  .chat-form [data-chat-length] { font-size: 8px; }
  .auction-success-badge { max-width: 44%; padding: 5px 7px; font-size: 9px; }
}

/* Query actual stage height, including host-supplied visualViewport sizing.
 * Compact supporting UI before reducing the four essential bid controls. */
@container auction-room (max-height: 700px) {
  .auction-topbar { height: 60px; }
  .auction-showcase { height: 116px; padding-block: 8px; }
  .auction-art { width: 96px; flex-basis: 96px; }
  .auction-main, .auction-chat { padding: 10px 8px; gap: 6px; }
  .chat-nickname, .chat-footer, .bid-quick-actions, .auction-stage .buddy-note, .auction-price-board > small { display: none; }
  .auction-price-board { padding: 8px 6px; }
  .auction-price-board strong { --auction-price-size: 28px; }
  .auction-stage .wallet-summary { padding: 6px; }
  .auction-stage .wallet-summary strong { font-size: 21px; }
  .auction-stage [data-bid-form] fieldset { gap: 4px; }
}
@container auction-room (max-height: 560px) {
  .auction-topbar { height: 52px; padding-block: 4px; }
  .auction-topbar h2 { font-size: 17px; }
  .auction-timer { padding-block: 3px; }
  .auction-timer [data-auction-countdown] { font-size: 19px; }
  .auction-showcase { height: 88px; padding-block: 6px; }
  .auction-art { width: 72px; flex-basis: 72px; border-radius: 10px; }
  .auction-item-copy h3 { font-size: 15px; }
  .auction-item-copy :where(p, small, span) { font-size: 9px; line-height: 1.3; }
  .auction-item-copy > :where(p, small, span) { margin-top: 2px; }
  .auction-main, .auction-chat { padding: 8px 6px; gap: 5px; }
  .auction-event-status { display: none; }
  .auction-price-board { padding: 6px 5px; }
  .auction-price-board strong { --auction-price-size: 25px; }
  .auction-stage .wallet-summary > span { font-size: 9px; }
  .auction-stage .bid-label { font-size: 11px; }
}
/* Resized keyboard viewports still have both columns. Bid and chat inputs stay
 * >=16px to prevent mobile focus magnification. */
@container auction-room (max-height: 400px) {
  .auction-topbar { height: 40px; padding: 3px 8px; border-top-width: 2px; }
  .auction-live-kicker { display: none; }
  .auction-topbar h2 { font-size: 14px; }
  .auction-timer { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 3px 5px; }
  .auction-timer [data-auction-countdown] { font-size: 16px; }
  .auction-timer :where(label, span:first-child, small) { font-size: 8px; }
  .auction-showcase { height: 44px; padding: 3px 8px; }
  .auction-item { gap: 8px; }
  .auction-art { width: 36px; flex-basis: 36px; border-radius: 6px; }
  .auction-item-copy h3 { font-size: 12px; line-height: 1.25; }
  .auction-item-copy > :where(p, small, span) { display: none; }
  .auction-main, .auction-chat { padding: 5px; gap: 4px; }
  .auction-price-board { padding: 4px; border-radius: 7px; }
  .auction-price-board > :where(label, span, p) { font-size: 9px; line-height: 1.2; }
  .auction-price-board strong { margin-top: 1px; gap: 2px; --auction-price-size: 22px; line-height: 1.1; }
  .auction-price-board strong small { font-size: 8px; }
  .auction-stage .wallet-summary { padding: 3px 5px; border-radius: 7px; }
  .auction-stage .wallet-summary > span { font-size: 8px; line-height: 1.2; }
  .auction-stage .wallet-summary strong { margin-top: 0; font-size: 17px; line-height: 1.1; }
  .auction-stage .wallet-summary strong small { font-size: 8px; }
  .auction-stage [data-bid-form] fieldset { gap: 3px; }
  .auction-stage .bid-label { font-size: 10px; line-height: 1.2; }
  .auction-stage .bid-amount { height: 36px; padding: 3px 5px; }
  .auction-stage .bid-amount input { min-height: 24px; font-size: 16px; }
  .auction-stage .bid-amount span { font-size: 8px; }
  .auction-stage .bid-feedback { -webkit-line-clamp: 1; min-height: 12px; max-height: 12px; font-size: 9px; line-height: 12px; }
  .auction-stage [data-bid-form] .detail-primary { min-height: 36px; padding: 5px 3px; font-size: 11px; }
  .auction-stage .wallet-back { display: none; }
  .chat-header h3 { font-size: 12px; }
  .chat-presence { font-size: 8px; }
  .chat-connection { -webkit-line-clamp: 1; max-height: 12px; font-size: 9px; line-height: 12px; }
  .chat-new-messages { min-height: 24px; padding: 3px 5px; font-size: 9px; }
  .chat-form textarea { height: 48px; padding: 4px; }
  .chat-form [data-chat-length] { display: none; }
  .chat-form button { min-height: 36px; }
}
@container auction-room (max-height: 300px) {
  .auction-topbar { height: 36px; }
  .auction-timer :where(label, span:first-child, small) { display: none; }
  .auction-showcase { height: 36px; }
  .auction-art { width: 28px; flex-basis: 28px; }
  .auction-main, .auction-chat { padding: 4px; gap: 3px; }
  .auction-price-board { padding: 3px; }
  .auction-price-board strong { --auction-price-size: 20px; }
  .auction-stage .wallet-summary { padding: 2px 4px; }
  .auction-stage .wallet-summary strong { font-size: 16px; }
  .auction-stage .bid-amount { height: 34px; }
  .auction-stage [data-bid-form] .detail-primary { min-height: 34px; }
  .chat-form textarea { height: 44px; }
  .chat-new-messages { position: absolute; right: 6px; bottom: 54px; left: 6px; z-index: 1; width: max-content; max-width: calc(100% - 12px); margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .auction-stage button { transition: opacity 120ms var(--ease-out); }
  .auction-stage button:active:not(:disabled), .auction-stage button:hover:not(:disabled), .auction-stage button:hover:active:not(:disabled) { transform: none; }
  .auction-success-badge, .auction-success-badge.is-visible { transform: translate(-50%, 0); transition: opacity 160ms var(--ease-out); }
  .auction-halo, .auction-particle { display: none; }
}