/* Auction House's table: the board, the collectors, your collection, the
   value chart and the dock, on the room's structure (games/room/room.css),
   from the tokens in auction-house.css.

   Steadiness first: the board is as big as the window allows and never
   changes size; the dock never changes size; what comes and goes (the
   stamp, banners, the lit space) is drawn over what's there. The side
   column scrolls inside itself, never the page. */

/* ── the frame ───────────────────────────────────────────────────────── */
.felt.ahouse { position: relative; height: calc(100dvh - 2 * var(--frame)); min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.felt.ahouse.docked { grid-template-columns: minmax(0, 1fr) 320px; }
.ahouse .logdock { min-height: 0; display: flex; flex-direction: column; }
.ahouse .logdock:empty { display: none; }
.ahouse .logdock .gamelog { flex: 1; }
.ahouse .tablemain { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.ahouse .gamelog.drawer {
  position: absolute; z-index: 30; right: 14px; top: 64px; bottom: 230px; width: min(360px, calc(100% - 28px));
  box-shadow: -10px 10px 30px rgba(0, 0, 0, .45);
}
.ahouse .logbtn.on { background: var(--pick-tint); box-shadow: var(--pick-ring); }
.ahouse .bar .tools .stop.unseen { visibility: hidden; }
.ahouse .gamelog .who svg { vertical-align: -1px; margin-right: 3px; }
.ahouse .logart { font-family: var(--display); font-style: italic; }
.ahouse .loglines .scores .sep { display: none; }

/* The stage: the board beside the side column on a wide window, above it
   on a tall one. The board's width is what its height allows, leaving the
   side at least 360px. */
.ahouse .stagebox { flex: 1; min-height: 0; min-width: 0; container-type: size; }
.ahouse .stage {
  --bw: min(100cqh, calc(100cqw - 376px));
  height: 100%; display: grid; gap: 16px; grid-template-rows: minmax(0, 1fr);
  grid-template-columns: var(--bw) min(520px, calc(100cqw - var(--bw) - 16px)); justify-content: center;
}
.ahouse .boardcol { position: relative; min-height: 0; min-width: 0; container-type: size; }
.ahouse .side { display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; }
.ahouse .sidescroll { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 2px 4px 8px 2px; scrollbar-width: thin; }
/* (what scrolls on fades out above the dock, never sliced off at its edge;
   scrolled to the end, the last panel clears the fade) */
.ahouse .sidescroll {
  padding-bottom: 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
}
.ahouse .sidescroll > section { flex: none; padding: 10px 12px 12px; border-radius: var(--panel-radius); background: var(--panel); border: var(--panel-edge); }
.ahouse .panelhead { margin: 0; font: var(--display-weight) var(--t-heading)/1.15 var(--display); letter-spacing: .02em; color: var(--ink); }

/* ── the board ───────────────────────────────────────────────────────── */
.ahouse .boardwrap { position: absolute; inset: 0; display: flex; }
.boardsq { position: relative; margin: auto; width: min(100cqw, 100cqh); aspect-ratio: 1; }
.boardsvg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }
.boardsvg .giltring { fill: none; stroke: url(#ah-gilt); stroke-width: 12; }
.boardsvg .giltring.inner { stroke-width: 7; }
.boardsvg .ringbed { fill: #1d0a0e; }
.boardsvg .velvet { fill: url(#ah-velvet); }
.boardsvg .space { outline: none; color: var(--s-private-ink); }
.boardsvg .space .face { stroke: rgba(46, 22, 10, .6); stroke-width: 1.3; transition: filter 150ms; }
.boardsvg .space .emblem { fill: currentColor; opacity: .82; }
.boardsvg .space text { fill: currentColor; font-family: var(--ui-font); }
.boardsvg .space text.main { font-size: 15px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
/* (each line as large as its wedge holds it with room: "BUY FROM" at 15 is
   82 units where the wedge is 84 across, "a sculpture" at 15 is 79 where it's
   88; board.js sets the words out where the wedge is wider) */
.boardsvg .space text.sub { font-size: 15px; font-weight: 600; }
.boardsvg .k-private .face { fill: var(--s-private); } .boardsvg .k-private { color: var(--s-private-ink); }
.boardsvg .k-bank .face { fill: var(--s-bank); } .boardsvg .k-bank { color: var(--s-bank-ink); }
.boardsvg .k-buy .face { fill: var(--s-buy); } .boardsvg .k-buy { color: var(--s-buy-ink); }
.boardsvg .k-collect .face { fill: var(--s-collect); } .boardsvg .k-collect { color: var(--s-collect-ink); }
.boardsvg .k-sell .face { fill: var(--s-sell); } .boardsvg .k-sell { color: var(--s-sell-ink); }
.boardsvg .k-forced .face { fill: var(--s-forced); } .boardsvg .k-forced { color: var(--s-forced-ink); }
.boardsvg .k-take .face { fill: var(--s-take); } .boardsvg .k-take { color: var(--s-take-ink); }
.boardsvg .k-inherit .face { fill: var(--s-inherit); } .boardsvg .k-inherit { color: var(--s-inherit-ink); }
/* where a piece just landed: ringed in the turn's yellow */
.boardsvg .space.lit .face { stroke: var(--turn); stroke-width: 7; paint-order: stroke; filter: brightness(1.06); }
/* choosing where to start (every space) or which way to go (the one or two
   a roll reaches): those can be pressed */
.boardsvg.picking .space[tabindex="0"] { cursor: pointer; }
@media (hover: hover) { .boardsvg.picking .space[tabindex="0"]:hover .face { filter: brightness(1.15); } }
.boardsvg.picking .space:focus-visible .face { stroke: var(--focus); stroke-width: 6; }
/* which way: the spaces the roll reaches light up, the rest step back */
.boardsvg.moving .space:not(.cand) { filter: brightness(.62) saturate(.7); transition: filter 200ms; }
.boardsvg .space.cand .face { filter: brightness(1.1); }
/* each space's outline, over the ring (board.js halos): lit (.on) for the
   spaces a roll reaches; and what beckons (house/cue.js), in the turn's
   color, breathing three times and then holding still, as the kit's ring
   does round a button */
.boardsvg .halo { fill: none; stroke: var(--house-turn, var(--turn)); stroke-width: 0; stroke-linejoin: round; pointer-events: none; }
.boardsvg .halo.on { stroke-width: 10; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--house-turn, var(--turn)) 85%, transparent)); }
.boardsvg .ghost { fill: color-mix(in srgb, var(--house-turn, var(--turn)) 22%, rgba(20, 6, 9, .55)); stroke: var(--house-turn, var(--turn)); stroke-width: 4; stroke-dasharray: 9 6; pointer-events: none; }
.boardsvg .halo.house-beckon { stroke-width: 9; box-shadow: none; animation: ahbeckon var(--m-beckon, 1600ms) ease-in-out 3; }
/* (the house's beckon is an outline, which a browser draws round an SVG
   shape's box: here the ring is the space's own edge, drawn by the stroke) */
.boardsvg .halo.house-beckon { outline: none !important; }
/* choosing where to start: every space is outlined, more finely */
.boardsvg.placing .halo.on { stroke-width: 6; filter: none; }
.boardsvg.placing .halo.house-beckon { stroke-width: 6; animation-name: ahbeckonfine; }
@keyframes ahbeckon { 50% { stroke-width: 18; stroke-opacity: .55; } }
@keyframes ahbeckonfine { 50% { stroke-width: 11; stroke-opacity: .6; } }
/* the pieces: each seat's mark on a dark base, gilt-edged; the turn's yellow-ringed */
.boardsvg .piece { pointer-events: none; }
.boardsvg .piece .pieceshadow { fill: rgba(0, 0, 0, .45); }
.boardsvg .piece .piecebase { fill: #1c0b0f; stroke: var(--gilt); stroke-width: 3; }
.boardsvg .piece.turn .piecebase { stroke: var(--turn); stroke-width: 7; }
.boardsvg .piece.walking .piecebase { stroke: var(--turn); }
/* how many share a space, from three up: a badge on the top piece's shoulder */
.boardsvg .stackcount { pointer-events: none; }
.boardsvg .stackcount circle { fill: var(--paper); stroke: var(--gilt-lo); stroke-width: 2.5; }
.boardsvg .stackcount text { font: 800 21px/1 var(--ui-font); fill: var(--paper-ink); }

/* the block: the velvet middle, where a painting stands on its easel */
.blockhole {
  position: absolute; left: 50%; top: 50%; width: 60%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  display: grid; place-items: center; container-type: size; pointer-events: none;
}
/* The block is a column that always fits the velvet: its words keep to
   their lines (a long title to two, one on a phone, the whole of it in the
   gallery view) and the painting on the easel takes what height is left,
   never pushing the bid or the gavel out over the ring. The velvet is a
   circle, so the column is a box whose corners stay inside it, with room
   to spare before the spaces (66% by 70%: its corners at 48% of the
   velvet's width from its middle, the velvet's edge at 51%, the spaces a
   little further out; design language, "Words have room to breathe"). */
.block { width: 66%; height: 70%; display: flex; align-items: center; justify-content: center; pointer-events: auto; }
.blockin { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: max(4px, 1.6cqmin); text-align: center; min-width: 0; max-width: 100%; max-height: 100%; }
.blockin:not(.opening) { height: 100%; width: 100%; }
.blockin > * { flex: none; max-width: 100%; }
/* (the block's caption and gallery name are the board's lettering, scaled
   with it: not the page's kicker and section type) */
.block .caption { margin: 0; font: 800 clamp(12px, 3.2cqmin, 14px)/1.25 var(--ui-font); letter-spacing: .14em; text-transform: uppercase; color: var(--gilt-hi); text-wrap: balance; }
/* (the easel is a box of its own the frame fits inside, by its shape) */
.block .easel { position: relative; flex: 0 1 46cqh; min-height: 0; width: 64cqw; container-type: size; display: flex; align-items: center; justify-content: center; }
.block.auction .easel { flex-basis: 40cqh; width: 58cqw; }
.block .frame.big { --h: min(100cqh, calc(100cqw / (var(--ratio) * .88 + .12))); --b: max(4px, calc(var(--h) * .06)); }
.block .frame.big.object { --h: min(100cqh, calc(100cqw / var(--ratio) + 10px)); }
.block .frame.big .tag { --tf: clamp(12px, 9cqh, 15px); }
.block .placard { --pt: clamp(14px, 4.2cqmin, 20px); --pa: clamp(12px, 2.9cqmin, 13px); width: 100%; }
.block .placard .pmuseum { font-size: var(--pa); }
.block .placard .ptitle { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.block .placard .partist, .block .placard .pmuseum { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.block .placard .pmedium { display: none; }
.block.auction .placard .pmuseum { display: none; }
.block .bidline { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 30px; font-size: clamp(12px, 3cqmin, 15px); }
.block .paddle { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; min-width: 0; }
.block .bidwho { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 8em; }
.block .nobid { color: var(--soft); white-space: nowrap; }
.block .bidamt { font: 700 clamp(18px, 6cqmin, 30px)/1 var(--display); color: var(--turn); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.block .clock { justify-content: center; }
.block .clock .clockbar { width: clamp(64px, 26cqmin, 150px); height: 6px; background: color-mix(in srgb, var(--gilt-hi) 22%, transparent); }
.block .clock .clockfill { background: var(--gilt-hi); }
.block .clock.low .clockfill { background: var(--bad); }
.block .clock .clocktext { min-width: 6.6em; text-align: left; white-space: nowrap; font: italic 600 clamp(12px, 3.4cqmin, 16px)/1.2 var(--display); color: var(--ink); }
.block .rollline { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: clamp(12px, 3cqmin, 14px); color: var(--soft); text-wrap: balance; }
.block .rollline b { color: var(--ink); }
.block .opening { gap: max(6px, 2.4cqmin); }
.block .galname { margin: 0; font: var(--display-weight) clamp(22px, 8cqmin, 44px)/1.05 var(--display); color: var(--ink); text-wrap: balance; }
.block .galblurb { margin: 0; max-width: 30em; font: italic 400 clamp(12px, 3.6cqmin, 17px)/1.35 var(--display); color: var(--soft); text-wrap: balance; }
.block .blocknote { margin: 0; font: 700 clamp(12px, 3.4cqmin, 16px)/1.3 var(--ui-font); color: var(--turn); }
/* a small block (a phone): the title keeps to a line; in an auction the
   bid and the gavel come first, the bidder by their mark alone */
@container (max-width: 300px) {
  .block .headline .hltext span, .block .headline .hlmark { display: none; }
  .block .placard .pmuseum { display: none; }
  .block .placard .ptitle { -webkit-line-clamp: 1; line-clamp: 1; }
  .block .caption { font-size: 12px; letter-spacing: .08em; }
  .block .rollline span { display: none; }
  .block.auction .placard .partist, .block .bidwho, .block .nobid { display: none; }
  .block .bidline { min-height: 24px; }
  .block .bidamt { font-size: 17px; }
  .block .clock .clockbar { width: 40px; }
  .block .clock .clocktext { min-width: 0; font-size: 12px; }
}
/* the gavel's stamp: Sold!, over the easel's foot */
.block .stamp { display: grid; gap: 2px; justify-items: center; animation: ahstamp 420ms cubic-bezier(.3, 1.5, .5, 1) backwards; }
.block .stamp b { font: italic 800 clamp(26px, 9cqmin, 48px)/1 var(--display); color: var(--turn); letter-spacing: .01em; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.block .stamp span { font: 600 clamp(12px, 3.4cqmin, 16px)/1.3 var(--ui-font); color: var(--ink); }
.block .stamp.nosale b { color: var(--soft); }
@keyframes ahstamp { from { opacity: 0; transform: scale(1.6) rotate(-6deg); } }

/* a space's card (board.js showCard): what landing there does, over the
   board's middle, at once on hover or focus, or while a finger holds the
   space. A catalogue card: its kind's color and emblem, the rule on paper. */
.boardsvg { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.spacecard {
  --bs: min(100cqw, 100cqh);
  display: none; position: absolute; z-index: 6; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none;
  width: clamp(200px, 50%, 300px); overflow: hidden; border-radius: 10px;
  background: var(--paper); color: var(--paper-ink); border: 3px solid var(--gilt);
  box-shadow: 0 0 0 1px var(--gilt-lo), 0 18px 40px rgba(0, 0, 0, .6);
}
.spacecard.on { display: block; }
.spacecard .scband { display: grid; place-items: center; height: clamp(46px, calc(var(--bs) * .085), 78px); background: var(--k); color: var(--ki); border-bottom: 2px solid var(--gilt-lo); }
.spacecard .scemblem { height: 62%; aspect-ratio: 1; fill: currentColor; }
.spacecard .scbody { display: grid; gap: 4px; padding: 10px 14px 12px; text-align: center; }
.spacecard p { margin: 0; }
.spacecard .sckicker { font: 800 11px/1.2 var(--ui-font); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-soft); }
.spacecard .sctitle { font: var(--display-weight) clamp(19px, calc(var(--bs) * .034), 26px)/1.1 var(--display); text-wrap: balance; }
.spacecard .scamount { font: 700 clamp(22px, calc(var(--bs) * .042), 32px)/1.05 var(--display); font-variant-numeric: lining-nums tabular-nums; }
.spacecard .scrule { margin-top: 4px; font: 500 clamp(13px, calc(var(--bs) * .021), 16px)/1.4 var(--ui-font); text-wrap: pretty; }
.spacecard .sccount { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(60, 40, 10, .18); font: 600 12px/1.3 var(--ui-font); color: var(--paper-soft); }
.spacecard.k-private { --k: var(--s-private); --ki: var(--s-private-ink); }
.spacecard.k-bank { --k: var(--s-bank); --ki: var(--s-bank-ink); }
.spacecard.k-buy { --k: var(--s-buy); --ki: var(--s-buy-ink); }
.spacecard.k-collect { --k: var(--s-collect); --ki: var(--s-collect-ink); }
.spacecard.k-sell { --k: var(--s-sell); --ki: var(--s-sell-ink); }
.spacecard.k-forced { --k: var(--s-forced); --ki: var(--s-forced-ink); }
.spacecard.k-take { --k: var(--s-take); --ki: var(--s-take-ink); }
.spacecard.k-inherit { --k: var(--s-inherit); --ki: var(--s-inherit-ink); }
/* (a private auction's card is the board's ivory: its band takes a line to
   stand off the paper) */
.spacecard.k-private .scband { box-shadow: inset 0 -1px 0 rgba(60, 40, 10, .2); }

/* the board's top corners, outside the ring: the pile's count, the
   game's clock (it ends when the pile's empty), its Figure (house rule 4:
   the number in ink, `.house-figure`, named in soft ink under it); and
   whose turn. Always there, in the same place. */
.bcorner { --bs: min(100cqw, 100cqh); position: absolute; top: 0; display: grid; gap: 2px; max-width: 21%; pointer-events: none; }
.pilecorner { left: 0; justify-items: start; text-align: left; }
.turncorner { right: 0; justify-items: end; text-align: right; }
.pilecorner .house-figure { line-height: 1; }
.pilecorner .house-figure-noun { margin: 0; line-height: 1.25; }
.bcorner .cornerlabel { font: 800 clamp(12px, calc(var(--bs) * .018), 13px)/1.2 var(--ui-font); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.bcorner .cornerwho { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.bcorner .cornerwho svg { flex: none; display: block; width: clamp(20px, calc(var(--bs) * .04), 28px); height: auto; }
.bcorner .cornerwho b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--display-weight) clamp(16px, calc(var(--bs) * .034), 24px)/1.25 var(--display); color: var(--ink); text-box: trim-both cap alphabetic; padding-block: .3em; }
.turncorner.mine .cornerlabel, .turncorner.mine .cornerwho b { color: var(--turn); }
.pilecorner.pulse, .turncorner.pulse { animation: ahpulse 1.2s ease-out; border-radius: 8px; }

/* the room's seat bar over the board's foot, as Michigan Rails' over its map */
.ahouse .seatslot { position: absolute; z-index: 8; left: 50%; bottom: 8px; translate: -50% 0; width: calc(min(100cqw, 100cqh) - 24px); display: flex; justify-content: center; pointer-events: none; }
.ahouse .seatslot:empty { display: none; }
.ahouse .seatslot > .seatbar {
  pointer-events: auto; max-width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 6px 8px 6px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--sheet) 95%, transparent); color: var(--ink);
  border: 1.5px solid color-mix(in srgb, var(--ink) 25%, transparent); box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}

/* banners: the house's, over the board */
.ahbanner { display: flex; align-items: center; gap: 12px; }
.ahbanner .splashtitle { font: italic var(--display-weight) 40px/1 var(--display); }
.ahbanner .splashsub { font: 600 15px/1.3 var(--ui-font); }
/* something done to you: the house's announcement (house/announce.js), the
   painting slammed down beside the words in its gilt frame */
.ah-announce .house-announce-art .frame { box-shadow: 0 0 0 1px var(--gilt-lo), 0 10px 22px rgba(0, 0, 0, .55); }
@media (max-width: 640px) { .ah-announce .house-announce-art .frame { --h: 60px !important; } }

/* a new auction's splash (room/kit/intro.js): the painting dealt onto an
   easel, whose it is, and a gilt seal stamped on its foot: bidding's open */
.introcard:has(.ahintro) {
  min-width: min(420px, calc(100vw - 24px)); padding: 18px 28px 64px; border: 3px solid var(--gilt); border-radius: 14px;
  box-shadow: 0 0 0 1px var(--gilt-lo), 0 26px 70px rgba(0, 0, 0, .6);
}
.ahintro { display: flex; flex-direction: column; align-items: center; }
.ahintro .kicker { margin: 0; font: 800 16px/1.2 var(--ui-font); letter-spacing: .18em; text-transform: uppercase; color: var(--gilt-hi); }
.ahintro .kicker .pip { margin: 0 .6em; color: var(--gilt); }
.ahintro .introeasel { margin: 14px 0 10px; }
.ahintro .frame.introframe { --h: min(220px, 34vh); --b: max(6px, calc(var(--h) * .06)); box-shadow: 0 14px 28px rgba(0, 0, 0, .6); }
.ahintro .introtitle { margin: 0; max-width: 22em; font: italic 600 26px/1.15 var(--display); color: var(--ink); text-wrap: balance; }
.ahintro .introby { margin: 2px 0 0; font: 600 14px/1.3 var(--ui-font); color: var(--soft); }
.ahintro .introwhose { margin: 12px 0 0; font: var(--display-weight) 30px/1.1 var(--display); color: var(--turn); }
.ahintro .introwhy { margin: 4px 0 0; font: 600 15px/1.35 var(--ui-font); color: var(--ink); }
.ahintro .chipspot { position: absolute; left: 50%; bottom: -46px; width: 96px; height: 96px; margin-left: -48px; }
.ahintro .burst {
  position: absolute; inset: -34px; border-radius: 50%; opacity: 0; clip-path: inset(44% 0 0 0);
  background: repeating-conic-gradient(from -4deg, var(--gilt-hi) 0 8deg, transparent 8deg 36deg);
  -webkit-mask: radial-gradient(circle, transparent 0 52%, #000 53% 70%, transparent 71%);
  mask: radial-gradient(circle, transparent 0 52%, #000 53% 70%, transparent 71%);
}
.ahintro .chip {
  position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; rotate: -12deg; color: var(--btn-ink);
  background: radial-gradient(circle at 35% 30%, var(--gilt-hi), var(--gilt) 55%, var(--gilt-lo));
  box-shadow: 0 8px 18px rgba(0, 0, 0, .5), inset 0 0 0 3px rgba(60, 40, 10, .5);
}
.ahintro .chip::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; border: 2px dashed rgba(60, 40, 10, .45); }
.ahintro .chip span { font: italic 900 16px/1.02 var(--display); text-transform: uppercase; letter-spacing: .02em; }
@media (max-width: 640px) {
  .introcard:has(.ahintro) { min-width: 0; padding: 14px 18px 56px; }
  .ahintro .frame.introframe { --h: min(170px, 28vh); }
  .ahintro .introtitle { font-size: 21px; }
  .ahintro .introwhose { font-size: 24px; }
}
@media (max-height: 520px) {
  .introcard:has(.ahintro) { padding: 8px 18px 40px; }
  .ahintro .kicker { font-size: 12px; }
  .ahintro .introeasel { margin: 6px 0 4px; }
  .ahintro .frame.introframe { --h: 30vh; }
  .ahintro .introtitle { font-size: 18px; }
  .ahintro .introwhose { margin-top: 4px; font-size: 20px; }
  .ahintro .introwhy { font-size: 13px; }
  .ahintro .chipspot { bottom: -30px; width: 64px; height: 64px; margin-left: -32px; }
  .ahintro .chip span { font-size: 11px; }
}

/* what someone's space just did, held on the block under the dice */
.block .headline { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; animation: ahrise 260ms ease-out backwards; }
.block .headline .hlmark { flex: none; display: grid; }
.block .headline .hltext { display: grid; min-width: 0; text-align: left; }
.block .headline b { font: var(--display-weight) clamp(16px, 5.4cqmin, 28px)/1.1 var(--display); color: var(--turn); text-wrap: balance; }
.block .headline span span { font: 600 clamp(12px, 3cqmin, 14px)/1.3 var(--ui-font); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes ahrise { from { opacity: 0; transform: translateY(6px); } }
.block .stamp .stampfrom { font: 700 clamp(10px, 2.8cqmin, 13px)/1.3 var(--ui-font); letter-spacing: .1em; text-transform: uppercase; color: var(--gilt-hi); }

/* ── the bank's next painting: beside the board, at the top of the side,
   outside what scrolls, so it's always on screen (table.js drawBank) ──── */
.ahouse .bankstrip {
  flex: none; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 12px; margin-right: 4px;
  border-radius: var(--panel-radius); background: var(--panel); border: var(--panel-edge);
}
.ahouse .bankstrip .bankart { flex: none; display: grid; place-items: center; min-width: 44px; }
.ahouse .bankstrip .frame { --h: 64px; }
.ahouse .bankstrip .banktext { display: grid; gap: 2px; min-width: 0; }
.ahouse .bankstrip .bankkicker { font: 700 var(--t-kicker)/1.3 var(--ui-font); letter-spacing: var(--kicker-spacing); text-transform: uppercase; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ahouse .bankstrip .banktitle { font: italic 600 var(--t-label)/1.25 var(--display); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ahouse .bankstrip .banksub { font-size: var(--t-note); line-height: 1.3; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* (up for sale or on the block: it's the one on the easel now, said in the turn's color) */
.ahouse .bankstrip.bank-block .bankkicker, .ahouse .bankstrip.bank-sale .bankkicker { color: var(--turn); }
.ahouse .bankstrip.bank-block .frame { opacity: .55; }
.ahouse .bankstrip.bank-empty .banktitle { font-style: normal; }
.ahouse .bankstrip.pulse { animation: ahpulse 1.2s ease-out; }
/* a phone: a small thumbnail with its label, a line each */
@media (max-width: 640px), (max-height: 520px) {
  .ahouse .bankstrip { min-height: 48px; padding: 4px 10px; gap: 10px; }
  .ahouse .bankstrip .frame { --h: 40px; }
  .ahouse .bankstrip .banksub { display: none; }
  .ahouse .bankstrip .banktitle { font-size: var(--t-note); }
}

/* ── the collectors ──────────────────────────────────────────────────── */
.ahouse .prows { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ahouse .prow {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; min-height: 52px; padding: 6px 8px;
  border-radius: 10px; border: 2px solid transparent; background: rgba(0, 0, 0, .14);
}
.ahouse .prow.me { background: color-mix(in srgb, var(--ink) 7%, rgba(0, 0, 0, .14)); }
.ahouse .prow.turn { border-color: var(--turn); background: color-mix(in srgb, var(--turn) 10%, rgba(0, 0, 0, .14)); }
.ahouse .prow.high { box-shadow: inset 4px 0 0 var(--seat); }
.ahouse .prow.out .pdid { color: var(--soft); }
.ahouse .prow .pmark { display: grid; place-items: center; width: 30px; height: 30px; }
.ahouse .prow .pmain { display: grid; min-width: 0; }
.ahouse .prow .pname { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
.ahouse .prow .pname b { overflow: hidden; text-overflow: ellipsis; }
.ahouse .prow .pname small { color: var(--soft); }
.ahouse .prow .pcash { margin-left: auto; font: 700 15px/1 var(--display); color: var(--turn); font-variant-numeric: lining-nums tabular-nums; }
.ahouse .prow .pdid { min-height: 1.35em; font-size: var(--t-note); line-height: 1.35; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ahouse .prow .pwall { all: unset; box-sizing: border-box; min-height: 44px; min-width: 44px; cursor: zoom-in; display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 5px; max-width: 200px; }
.ahouse .prow .pmore { flex: none; min-width: 28px; padding: 3px 5px; border-radius: 999px; text-align: center; font: 700 12px/1 var(--ui-font); font-variant-numeric: tabular-nums; color: var(--ink); background: var(--chip); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent); }
.ahouse .prow .pwall .frame { --b: 2px; }
.ahouse .prow .pwall .tag { --tf: 8.5px; }
.ahouse .prow span.pwall { cursor: default; }
.ahouse .prow button.pwall:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.ahouse .prow .pnone { font-size: 12px; color: var(--soft); }
.ahouse .prow.pulse { animation: ahpulse 1.2s ease-out; }
.ahouse .prow .pwall.pulse { animation: ahpulse 1.2s ease-out; border-radius: 6px; }
.ahouse .prow.bidpulse { animation: ahbid 600ms ease-out; }
@keyframes ahpulse { 20% { box-shadow: 0 0 0 3px var(--turn), 0 0 16px var(--turn); } }
@keyframes ahbid { 20% { background: color-mix(in srgb, var(--seat) 30%, rgba(0, 0, 0, .14)); } }

/* ── your collection ─────────────────────────────────────────────────── */
.ahouse .minehead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.ahouse .minehead .panelhead { margin-right: auto; }
.ahouse .purses { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.ahouse .purse { display: inline-flex; align-items: baseline; gap: 6px; }
.ahouse .purse .pursel { font: 700 12px/1 var(--ui-font); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.ahouse .purse b { font: 700 20px/1 var(--display); color: var(--turn); font-variant-numeric: lining-nums tabular-nums; }
.ahouse .purse.worth b { color: var(--ink); }
.ahouse .wall { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 14px; min-height: 92px; padding-bottom: 6px; }
.ahouse .wall.choosing { padding: 6px; margin-inline: -6px; border-radius: 10px; outline: 2px dashed color-mix(in srgb, var(--turn) 60%, transparent); outline-offset: 0; }
.ahouse .wall .empty { margin: 0; font-size: var(--t-note); }

/* ── the value chart ─────────────────────────────────────────────────── */
.ahouse .charthead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.ahouse .charthead .avg { font-size: var(--t-note); color: var(--soft); }
.ahouse .chart { container-type: inline-size; }
.ahouse .vchips { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
@container (min-width: 440px) { .ahouse .vchips { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.ahouse .vchip {
  display: grid; place-items: center; min-height: 26px; padding: 2px 2px; border-radius: 4px;
  font: 700 12.5px/1 var(--ui-font); font-variant-numeric: tabular-nums; color: var(--paper-ink); background: var(--tag);
  box-shadow: inset 0 0 0 1px rgba(60, 40, 10, .3);
}
.ahouse .vchip.forg { background: var(--forgery); color: var(--forgery-ink); letter-spacing: 0; font-size: 12px; }
.ahouse .vchip.struck { background: transparent; color: var(--soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--soft) 40%, transparent); text-decoration: line-through; text-decoration-thickness: 2px; }
.ahouse .gone { margin-top: 12px; border-radius: 8px; }
.ahouse .gone.pulse { animation: ahpulse 1.2s ease-out; }
.ahouse .gonehead { margin: 0 0 8px; font: 700 12px/1.2 var(--ui-font); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.ahouse .gonewall { display: flex; flex-wrap: wrap; gap: 12px 10px; padding-bottom: 6px; }
/* (a tile at least as wide as the widest tag, "Forgery", which hangs off its
   frame's foot at the right: a tall painting's tag never leaves its tile) */
.ahouse .gonecell { flex: none; display: flex; justify-content: flex-end; min-width: 52px; }
.ahouse .gone:not(:has(.gonewall)) .gonehead { margin-bottom: 0; }

/* ── the dock: what to do, and your moves, always the same size ──────── */
.ahouse .dock {
  flex: none; display: flex; flex-direction: column; gap: 8px; padding: 8px 10px 10px; container-type: inline-size;
  border-radius: 14px; background: var(--panel); border: 2px solid transparent; transition: border-color .2s, background-color .2s;
}
.ahouse .dock.yours { border-color: var(--turn); background: color-mix(in srgb, var(--turn) 9%, var(--panel)); }
.ahouse .status { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ahouse .sayline { min-height: 2.9em; display: flex; align-items: flex-start; gap: 10px; }
.ahouse .say { margin: 0; font-size: var(--t-body); line-height: 1.45; min-width: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ahouse .say b { color: var(--turn); }
/* your cash, beside what to do */
.ahouse .dockcash { flex: none; display: grid; justify-items: end; gap: 2px; padding-left: 10px; border-left: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.ahouse .dockcash:empty { display: none; }
.ahouse .dockcash .pursel { font: 700 12px/1 var(--ui-font); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.ahouse .dockcash b { font: 700 22px/1 var(--display); color: var(--turn); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.ahouse .controls { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.ahouse .actions { display: grid; grid-template-columns: auto auto auto auto; gap: 8px; margin-left: auto; justify-content: end; min-height: var(--btn-h); }
.ahouse .act { min-width: 0; padding-inline: 12px; }
.ahouse .act.step { min-width: 44px; padding-inline: 0; font-size: 22px; }
.ahouse .act.main { font-variant-numeric: tabular-nums; }
.ahouse .act .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ahouse .btn.slot.hide .house-key { visibility: hidden; }
.ahouse .actions .act:first-child { margin-right: auto; }
/* a choice among equals (the two ways round): one width, the widest's */
.ahouse .actions.equals { grid-template-columns: 1fr 1fr; }
.ahouse .actions.equals .act.hide { display: none; }
.ahouse .actions.equals .act { margin: 0; }
@container (max-width: 420px) {
  .ahouse .actions { display: flex; gap: 6px; width: 100%; }
  .ahouse .actions .btn.slot { flex: 0 1 auto; padding-inline: 8px; font-size: 14px; }
  .ahouse .actions .btn.slot.act.main { flex: 1 1 auto; }
  .ahouse .actions.equals .btn.slot.act { flex: 1 1 0; }
  .ahouse .actions .btn.slot.hide { display: none; }
  .ahouse .dock kbd { display: none; }
}
@container (max-width: 340px) {
  .ahouse .actions .btn.slot { padding-inline: 7px; font-size: 13px; }
}

/* ── choosing someone's painting: a sheet ────────────────────────────── */
.ah-choose .choosebody > p { margin: 0 0 12px; color: var(--soft); }
.ah-choose .choosegroups { display: grid; gap: 18px; }
.ah-choose .choosegroup h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: var(--display-weight) 18px/1.2 var(--display); }
.ah-choose .choosewall { display: flex; flex-wrap: wrap; gap: 18px 16px; }
.ah-choose .choosecell { display: grid; justify-items: start; gap: 4px; max-width: 170px; }
.ah-choose .choosename { font: italic 600 14px/1.25 var(--display); }
.ah-choose .choosewhat { font-size: 13px; color: var(--soft); }

/* ── choosing where to start, from a list: a sheet ───────────────────── */
.ah-place .placebody > p { margin: 0 0 12px; }
.ah-place .placelist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ah-place .placeopt { width: 100%; min-height: var(--btn-h); height: auto; padding-block: 6px; display: grid; justify-items: start; gap: 2px; text-align: left; border-left-width: 8px; border-left-color: var(--k, var(--ink)); }
.ah-place .placename { font-weight: 700; }
.ah-place .placewhere { font-size: var(--t-note); font-weight: 400; color: var(--soft); }
.ah-place .k-private { --k: var(--s-private); } .ah-place .k-bank { --k: var(--s-bank); } .ah-place .k-buy { --k: var(--s-buy); }
.ah-place .k-collect { --k: var(--s-collect); } .ah-place .k-sell { --k: var(--s-sell); } .ah-place .k-forced { --k: var(--s-forced); }
.ah-place .k-take { --k: var(--s-take); } .ah-place .k-inherit { --k: var(--s-inherit); }

/* ── the result ──────────────────────────────────────────────────────── */
.ahemblem svg { width: 72px; height: 72px; }
/* (as wide as the other table games' results, Euchre's and the rest: at the
   house's 480px the foot's three buttons wrapped, Play again alone under
   Share result, and the money columns were cramped) */
.house-scrim-result .house-sheet.ah-result { --house-sheet-width: 600px; }
.ah-result .house-kicker { text-wrap: balance; }
.ahresult .rtablewrap { overflow-x: auto; }
.ahresult .rtable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ahresult .rtable th, .ahresult .rtable td { padding: 6px 6px; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.ahresult .rtable .num { text-align: right; white-space: nowrap; }
.ahresult .rtable .num small { color: var(--soft); font-size: 12px; }
.ahresult .rtable tr.won { background: color-mix(in srgb, var(--turn) 12%, transparent); }
.ahresult .rtable .rwho { display: inline-flex; align-items: center; gap: 6px; }
.ahresult .legend { margin: 8px 0 12px; font-size: var(--t-note); }
.ahresult .rwalls summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.ahresult .rwallgrid { display: grid; gap: 14px; }
.ahresult .rwall h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; font: var(--display-weight) 16px/1.2 var(--display); }
.ahresult .rwallart { display: flex; flex-wrap: wrap; gap: 16px 18px; }
.ahresult .rcell { margin: 0; display: grid; gap: 4px; max-width: 110px; }
.ahresult .rcell figcaption { margin-top: 12px; font: italic 12px/1.25 var(--display); color: var(--soft); }

/* ── tall windows and phones: the board above the rest ────────────────── */
@media (max-aspect-ratio: 6/5) {
  .ahouse .stage { display: flex; flex-direction: column; gap: 8px; }
  .ahouse .boardcol { flex: none; height: min(100cqw, 56cqh); }
  .ahouse .side { flex: 1 1 0; }
}
@media (max-width: 640px) {
  .felt.ahouse { height: 100dvh; gap: 0; }
  .ahouse .tablemain { gap: 6px; }
  .felt.ahouse .bar .tools { display: none; }
  .felt.ahouse .bar .more { display: inline-flex; min-width: 44px; min-height: 44px; }
  .ahouse .stage { gap: 6px; }
  .ahouse .say { font-size: 14px; }
  .ahouse .dock { padding: 6px 8px 8px; gap: 4px; }
  .ahouse .sayline { min-height: calc(2 * 1.45 * 14px); }
  .ahouse .sidescroll > section { padding: 8px 10px 10px; }
  .ahouse .prow .pwall { max-width: 150px; }
  .ahouse .purse b { font-size: 17px; }
  .ahouse .dockcash b { font-size: 18px; }
  .bcorner .cornerlabel { font-size: 12px; letter-spacing: .06em; }
  .ahouse .vchips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ahbanner .splashtitle { font-size: 30px; }
  .ahresult .rtable { font-size: 13px; }
  .ahresult .rtable .place { display: none; }
}
/* phones on their side: the board at the left, as tall as the screen */
@media (max-height: 520px) {
  #app { padding: 0; }
  .felt.ahouse {
    height: 100dvh; border: 0; border-radius: 0; gap: 0;
    padding: max(4px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
  }
  .felt.ahouse .bar .tools { display: none; }
  .felt.ahouse .bar .more { display: inline-flex; min-height: 30px; }
  /* (the corners, a column of their own left of the board: in its corners
     they'd run into the rim) */
  .ahouse .stage { --cw: 76px; --bw: min(100cqh, calc(100cqw - 300px - var(--cw))); grid-template-columns: calc(var(--bw) + var(--cw)) min(520px, calc(100cqw - var(--bw) - var(--cw) - 16px)); }
  .ahouse .boardsq { margin: auto 0 auto auto; }
  .bcorner { max-width: none; width: calc(var(--cw) - 8px); }
  .pilecorner { left: calc(-1 * var(--cw)); }
  .turncorner { left: calc(-1 * var(--cw)); right: auto; top: 64px; justify-items: start; text-align: left; }
  .turncorner .cornerwho { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ahouse .seatslot { left: calc(50% + var(--cw) / 2); }
  .ahouse .pdid { display: none; }
  .ahouse .dock { padding: 3px 8px 4px; gap: 2px; }
  .ahouse .sayline { min-height: calc(2 * 1.4 * 13px); }
  .ahouse .say { font-size: 13px; line-height: 1.4; }
  .ahouse .act { min-height: 34px; font-size: 13px; padding-block: 2px; }
  .ahouse .actions { min-height: 34px; }
  .ahouse .dock kbd { display: none; }
}
@media (pointer: coarse) {
  .ahouse .act { min-height: 44px; }
  .felt.ahouse .bar .btn { min-height: 44px; }
  .ahresult .rwalls summary { min-height: 44px; display: flex; align-items: center; }
}
@media (pointer: coarse) and (max-height: 520px) {
  .ahouse .act, .ahouse .actions { min-height: 36px; }
  .felt.ahouse .bar .btn { min-height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .boardsvg .halo.house-beckon, .block .stamp, .block .headline, .ahouse .prow.pulse, .ahouse .prow.bidpulse, .ahouse .gone.pulse, .ahouse .prow .pwall.pulse { animation: none; }
  .ahouse .dock, button.frame { transition: none; }
}