/* Auction House's look: an auction salon's oxblood walls and gilt, the
   board's cream catalogue spaces round a velvet middle where the painting
   on the block stands (docs/auction-house.md, "Its look"). This file is the
   tokens (the house's, the room kit's and the game's own: the salon, the
   gilt, the spaces' colors) and the faces of its pieces: the frames, the
   value tags. It's loaded before the room's structure
   (games/room/room.css); the table (table.css) after it. The Django pages
   (games/templates/auction-house/page.html) wear just this.

   Faces, both OFL and bundled in fonts/: Bodoni Moda (the display: an
   auction catalogue's high-contrast capitals, for titles, banners, the
   block's prices and the placards' titles, in italic) and Figtree
   (everything else). */

@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/bodoni-moda-400-900-latin.2c2bff3fe09a.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("fonts/bodoni-moda-400-900-italic-latin.1871af2b0798.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/figtree-400-800-latin.392aed3eb142.woff2") format("woff2"); }

:root {
  /* the house's (docs/design-system.md) */
  --t-display: clamp(32px, 7vw, 44px); --t-heading: 20px; --t-body: 16px; --t-label: 16px; --t-note: 14px;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px;
  --pick-tint: color-mix(in srgb, currentColor 16%, transparent);
  --pick-ring: inset 0 0 0 2px currentColor;
  --pick-weight: 700;

  /* the salon: oxblood walls under warm lamps, and gilt */
  --wall: #34121a; --wall-hi: #4b1b25; --wall-lo: #220a10;
  --velvet-hi: #5d1f2a; --velvet-lo: #2a0b11;
  --gilt: #c9a14a; --gilt-hi: #f1d892; --gilt-lo: #7a5a1e;
  --paper: #f4ecd8; --paper-ink: #2b2118; --paper-soft: #6b5a48;

  /* the board's spaces, a color and an emblem for each kind (board.js) */
  --s-private: #f4ecd8; --s-private-ink: #3a2a1c;
  --s-bank: #8d2e3a; --s-bank-ink: #f8ead0;
  --s-buy: #d8b15c; --s-buy-ink: #2f2210;
  --s-collect: #a9b789; --s-collect-ink: #23301a;
  --s-sell: #e8d6a2; --s-sell-ink: #3a2a14;
  --s-forced: #c46e3b; --s-forced-ink: #2a1206;
  --s-take: #6c5381; --s-take-ink: #f6ead8;
  --s-inherit: #95acc0; --s-inherit-ink: #19283a;

  /* the value cards' tags */
  --tag: #efe2bf; --tag-ink: #2b2118; --forgery: #b3352a; --forgery-ink: #fff4ec;

  /* the room kit's (docs/design-system.md, "The room kit"), in the salon */
  --room: #2a0d14;
  --table: radial-gradient(ellipse at 50% 8%, #4f1d27, #36131b 55%, #240a11);
  --rail: 0 solid transparent;
  --rail-radius: 0;
  --panel: rgba(12, 2, 4, .3);
  --panel-edge: 1.5px solid rgba(241, 216, 146, .16);
  --panel-radius: 12px;
  --sheet: #3a1820;
  --chip: rgba(0, 0, 0, .25);
  --chip-edge: 1.5px solid rgba(244, 236, 216, .3);
  --chip-radius: 999px;
  --ink: #f6ead2;
  --soft: #d2bfae;
  --turn: #f5c451;
  --good: #a6d98c;
  --bad: #ff9a85;
  --focus: #f6ead2;
  --btn: #f1d892;
  --btn-ink: #2a0d14;
  --btn-edge: 2px solid #f1d892;
  --btn2: transparent;
  --btn2-ink: #f6ead2;
  --btn2-edge: 2px solid #f6ead2;
  --btn-radius: 10px;
  --btn-weight: 700;
  --confirm: #ff9a85;
  --confirm-ink: #2a0d06;
  --turn-ink: #1d1505;
  --seat-ink: #111;
  --field-edge: 1.5px solid color-mix(in srgb, currentColor 50%, transparent);
  --ui-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, "Times New Roman", serif;
  --display-weight: 700;

  color-scheme: dark;
}

body { background: var(--room); }

/* ── a painting in its frame (art.js): gilt round a dark mat ───────────── */
.frame {
  --h: 72px; --ratio: .8; --b: max(3px, calc(var(--h) * .075));
  all: unset; box-sizing: border-box; position: relative; display: inline-block; flex: none; vertical-align: bottom;
  height: var(--h); width: calc((var(--h) - 2 * var(--b)) * var(--ratio) + 2 * var(--b)); padding: var(--b); border-radius: 2px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .28), transparent 40%, rgba(0, 0, 0, .28)),
    linear-gradient(90deg, var(--gilt-lo), var(--gilt) 18%, var(--gilt-hi) 50%, var(--gilt) 82%, var(--gilt-lo));
  box-shadow:
    inset 0 0 0 1px rgba(56, 36, 8, .85),
    inset 0 0 0 calc(var(--b) * .45) rgba(255, 238, 190, .22),
    0 1px 0 rgba(255, 230, 170, .12), 0 3px 6px rgba(0, 0, 0, .55);
}
.frame .mat { display: block; width: 100%; height: 100%; overflow: hidden; background: #140b08; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), inset 0 0 4px rgba(0, 0, 0, .6); }
.frame .work { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.frame.empty { width: calc(var(--h) * .8); }
button.frame { cursor: pointer; transition: transform var(--m-quick, 120ms), box-shadow var(--m-quick, 120ms); }
@media (hover: hover) { button.frame:hover { transform: translateY(-2px); } }
button.frame:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
button.frame.selected { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--turn), 0 0 14px 2px color-mix(in srgb, var(--turn) 60%, transparent), 0 6px 12px rgba(0, 0, 0, .6); }

/* an object (a sculpture, a vase, a mask) isn't framed: its photograph
   stands on a little plinth instead */
.frame.object {
  --pl: max(4px, calc(var(--h) * .1));
  padding: 0 0 var(--pl); width: calc((var(--h) - var(--pl)) * var(--ratio)); background: none; border-radius: 1px;
  box-shadow: none;
}
.frame.object .mat { border-radius: 2px; background: #d9d6cf; box-shadow: 0 1px 3px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .15); }
.frame.object::after {
  content: ''; position: absolute; left: 10%; right: 10%; bottom: 0; height: var(--pl); border-radius: 1px;
  background: linear-gradient(90deg, #cbc3b1, #f4efe4 35%, #e6dfcf 70%, #bdb4a1); box-shadow: 0 2px 3px rgba(0, 0, 0, .5);
}
.frame.object .tag { right: -2px; }

/* the value card's tag, clipped to the frame's foot: its value for whoever
   knows it, a blank tag for whoever doesn't */
.frame .tag {
  --tf: clamp(12px, calc(var(--h) * .15), 13px);
  position: absolute; right: calc(var(--b) * -.6); bottom: calc(var(--tf) * -.7); z-index: 1; display: flex; align-items: center; pointer-events: none;
}
.frame .tag .clip { width: calc(var(--tf) * .45); height: calc(var(--tf) * 1.15); margin-right: -2px; border: 1.5px solid #c9c4b8; border-radius: 3px; background: rgba(0, 0, 0, .15); }
.frame .tagface {
  display: block; padding: .22em .42em .16em .5em; font: 800 var(--tf)/1 var(--ui-font); letter-spacing: .01em; white-space: nowrap;
  color: var(--tag-ink); background: var(--tag); border-radius: 2px 7px 7px 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(60, 40, 10, .25);
  font-variant-numeric: tabular-nums;
}
.frame .tag.forgery .tagface { background: var(--forgery); color: var(--forgery-ink); text-transform: uppercase; letter-spacing: .07em; font-size: max(12px, calc(var(--tf) * .86)); }
.frame .tag.blank .tagface { color: var(--paper-soft); background: color-mix(in srgb, var(--tag) 70%, #8a7d63); }

/* a painting in flight (motion.js lays it over the page) */
.ah-ghost { position: fixed; z-index: 60; pointer-events: none; }
.ah-ghost .frame { box-shadow: 0 12px 26px rgba(0, 0, 0, .6); }

/* the museum's label beside the painting on the block */
.placard { display: grid; gap: 1px; justify-items: center; text-align: center; color: var(--ink); }
.placard .ptitle { font: italic 600 var(--pt, 18px)/1.15 var(--display); color: var(--ink); text-wrap: balance; }
.placard .partist { font: 600 var(--pa, 13px)/1.3 var(--ui-font); color: var(--soft); }
.placard .pmedium, .placard .pmuseum { font: 400 calc(var(--pa, 13px) * .9)/1.3 var(--ui-font); color: var(--soft); }

/* dice */
.dice { display: inline-flex; gap: 4px; vertical-align: middle; }
.die { width: 22px; height: 22px; }
.die .dieface { fill: var(--paper); stroke: var(--paper-ink); stroke-width: 1.2; }
.die .pip { fill: var(--paper-ink); }

/* the waiting room's eight galleries: two rows of four, not one cramped row */
.house-seg[aria-label="Gallery"] { display: grid; grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 400px) { .house-seg[aria-label="Gallery"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── the gallery view (art.js look()): a small gallery room. A damask wall
   under a picture rail, the painting hung from it on two cords and lit
   by a brass picture light, the museum's label on the wall beside it, a
   parquet floor below. The house sheet's chrome steps back: its ✕ stays
   in the corner, its Done stands on the floor. ─────────────────────────── */
.house-sheet.ah-view {
  --wallpaper: #4a1822; --wallpaper-hi: #5b2029; --wallpaper-motif: rgba(255, 214, 150, .055);
  width: min(1240px, calc(100vw - 2 * var(--gutter, 16px))); height: min(860px, calc(100dvh - 2 * var(--gutter, 16px)));
  max-height: none; border: 0; border-radius: 6px; color: var(--ink); background: var(--wallpaper);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 30px 80px rgba(0, 0, 0, .7);
}
.ah-view .house-head { position: absolute; z-index: 3; right: 0; top: 0; padding: 10px; }
.ah-view .house-head .house-x { color: var(--ink); background: rgba(0, 0, 0, .25); border-radius: 50%; }
.ah-view .house-body { padding: 0; overflow: hidden; display: flex; }
.ah-view .house-foot { position: absolute; z-index: 3; right: 0; bottom: 0; border: 0; background: transparent; padding: 0 18px 14px; }
.ah-view .viewroom { position: relative; flex: 1; display: grid; grid-template-rows: minmax(0, 1fr) 92px; min-height: 0; }
/* the wall: a woven damask (a lozenge of light motifs on the paper) with
   the lamps' warmth falling from above and the corners in shadow */
.ah-view .viewwall {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 72px 24px 18px; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 220, 160, .12), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .45)),
    radial-gradient(circle at 50% 50%, var(--wallpaper-motif) 0 2.5px, transparent 3px) 0 0 / 36px 36px,
    radial-gradient(circle at 50% 50%, var(--wallpaper-motif) 0 2.5px, transparent 3px) 18px 18px / 36px 36px,
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, var(--wallpaper-hi), var(--wallpaper));
}
/* the picture rail: a gilt moulding along the top of the wall */
.ah-view .rail {
  position: absolute; left: 0; right: 0; top: 34px; height: 9px;
  background: linear-gradient(180deg, var(--gilt-hi), var(--gilt) 45%, var(--gilt-lo));
  box-shadow: 0 3px 5px rgba(0, 0, 0, .45), 0 -1px 0 rgba(0, 0, 0, .3);
}
.ah-view .viewrow { position: relative; display: flex; align-items: center; justify-content: center; gap: 28px; width: 100%; min-height: 0; }
.ah-view .viewstage { display: flex; justify-content: center; min-width: 0; }
.ah-view .hung { position: relative; display: inline-flex; isolation: isolate; }
/* the light it's washed in, warm and soft, strongest just under the lamp */
.ah-view .wash {
  position: absolute; z-index: -1; left: -30%; right: -30%; top: -90px; bottom: -40px; pointer-events: none;
  background: radial-gradient(ellipse 50% 46% at 50% 18%, rgba(255, 224, 168, .26), rgba(255, 210, 150, .08) 55%, transparent 75%);
}
/* two cords from the rail to the frame's top edge */
.ah-view .cord { position: absolute; z-index: -1; bottom: 100%; width: 1.5px; height: 100vh; background: linear-gradient(90deg, #8d8678, #e2dccd, #8d8678); opacity: .75; }
.ah-view .cord.l { left: 16%; }
.ah-view .cord.r { right: 16%; }
/* the brass picture light, its arm into the frame's top */
.ah-view .lamp { position: absolute; z-index: 2; left: 50%; top: 0; width: 46%; translate: -50% -34px; height: 34px; pointer-events: none; }
.ah-view .lamparm { position: absolute; left: 50%; top: 10px; width: 5px; height: 26px; translate: -50% 0; border-radius: 2px; background: linear-gradient(90deg, var(--gilt-lo), var(--gilt-hi), var(--gilt-lo)); }
.ah-view .lampbar {
  position: absolute; left: 0; right: 0; top: 0; height: 14px; border-radius: 7px 7px 4px 4px;
  background: linear-gradient(180deg, var(--gilt-hi), var(--gilt) 50%, var(--gilt-lo));
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 9px 16px -4px rgba(255, 222, 160, .55);
}
.ah-view .frame.viewframe {
  position: relative; z-index: 1;
  --h: min(calc(min(860px, 100dvh - 32px) - 240px), calc((min(1240px, 100vw - 32px) - 470px) / var(--ratio)));
  --b: max(12px, calc(var(--h) * .045));
  box-shadow:
    inset 0 0 0 1px rgba(56, 36, 8, .85), inset 0 0 0 calc(var(--b) * .45) rgba(255, 238, 190, .25),
    0 2px 0 rgba(255, 230, 170, .14), 0 28px 40px -10px rgba(0, 0, 0, .7), 0 8px 14px rgba(0, 0, 0, .45);
}
.ah-view .frame.viewframe .mat { box-sizing: border-box; padding: calc(var(--b) * .7); background: #efe7d4; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 3px 8px rgba(0, 0, 0, .28); }
.ah-view .frame.viewframe .work { object-fit: contain; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.ah-view .viewnav {
  all: unset; box-sizing: border-box; flex: none; display: grid; place-items: center; width: 44px; height: 64px; border-radius: 10px; cursor: pointer;
  font: 400 40px/1 var(--display); color: var(--ink); background: rgba(0, 0, 0, .25);
}
.ah-view .viewnav[hidden] { visibility: hidden; display: grid; }
@media (hover: hover) { .ah-view .viewnav:hover { background: rgba(0, 0, 0, .45); } }
.ah-view .viewnav:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* an object: in a glass vitrine on a white plinth that stands on the
   floor, under a spotlight from the ceiling; no frame, no cords */
.ah-view .viewroom.objects .viewwall { align-items: flex-end; padding-bottom: 0; }
.ah-view .viewroom.objects .viewrow { align-items: flex-end; }
.ah-view .viewroom.objects .viewlabel, .ah-view .viewroom.objects .viewnav { align-self: center; }
.ah-view .shown { position: relative; display: flex; flex-direction: column; align-items: center; isolation: isolate; }
.ah-view .spot {
  position: absolute; z-index: -1; left: -45%; right: -45%; top: -260px; bottom: 0; pointer-events: none;
  background: radial-gradient(ellipse 30% 82% at 50% 0%, rgba(255, 238, 205, .42), rgba(255, 228, 185, .12) 58%, transparent 80%);
}
.ah-view .vitrine {
  position: relative; padding: 12px 12px 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38), inset 0 0 0 2px rgba(0, 0, 0, .2), 0 14px 30px rgba(0, 0, 0, .3);
}
.ah-view .glass {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, .13) 36%, transparent 44%, transparent 68%, rgba(255, 255, 255, .07) 74%, transparent 80%);
}
.ah-view .frame.viewframe.object {
  --h: min(calc(min(860px, 100dvh - 32px) - 350px), calc((min(1240px, 100vw - 32px) - 500px) / var(--ratio)));
  --pl: 0px; padding: 0; width: calc(var(--h) * var(--ratio)); background: none; box-shadow: none;
}
.ah-view .frame.viewframe.object::after { display: none; }
.ah-view .frame.viewframe.object .mat { padding: 0; background: none; border-radius: 0; box-shadow: none; }
.ah-view .plinth {
  display: block; width: calc(100% + 36px); height: 128px;
  background: linear-gradient(90deg, #cfc7b6, #f3eee3 28%, #ebe5d8 72%, #c3baa7);
  box-shadow: inset 0 -18px 24px -14px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .12);
}
.ah-view .plinthcap { display: block; height: 12px; margin: 0 -10px; background: linear-gradient(180deg, #fdfbf6, #ddd5c4); box-shadow: 0 3px 5px rgba(0, 0, 0, .3); }

/* the museum's label: a small card on the wall at eye level, beside the painting */
.ah-view .viewlabel {
  flex: none; align-self: center; display: grid; gap: 3px; width: 210px; padding: 14px 16px 15px; border-radius: 2px;
  background: linear-gradient(180deg, #f8f2e4, var(--paper)); color: var(--paper-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 4px 10px rgba(0, 0, 0, .45);
}
.ah-view .viewtitle { margin: 0 0 2px; font: italic 600 19px/1.2 var(--display); text-wrap: balance; }
.ah-view .viewby { margin: 0; font: 700 13px/1.35 var(--ui-font); }
.ah-view .viewmedium, .ah-view .viewmuseum, .ah-view .viewnote, .ah-view .viewlink { margin: 0; font: 400 12.5px/1.4 var(--ui-font); color: var(--paper-soft); }
.ah-view .viewlink { margin-top: 6px; }
.ah-view .viewlink a { color: var(--paper-ink); font-weight: 600; }
.ah-view .viewnote { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(60, 40, 10, .15); }
.ah-view .viewvalue { justify-self: start; display: inline-flex; align-items: baseline; gap: 8px; margin: 8px 0 0; padding: 3px 10px; border-radius: 3px 10px 10px 3px; background: var(--tag); box-shadow: inset 0 0 0 1px rgba(60, 40, 10, .3); }
.ah-view .viewvalue span { font: 700 10.5px/1 var(--ui-font); letter-spacing: .1em; text-transform: uppercase; color: var(--paper-soft); }
.ah-view .viewvalue b { font: 700 16px/1.2 var(--display); }
.ah-view .viewvalue.forgery { background: var(--forgery); color: var(--forgery-ink); }
.ah-view .viewvalue.forgery span { color: var(--forgery-ink); }
/* the floor: a gilt-edged skirting, then herringbone parquet in lamplight */
.ah-view .viewfloor {
  position: relative;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 30%, rgba(0, 0, 0, .35)),
    repeating-linear-gradient(45deg, #6b4223 0 14px, #5a361c 14px 28px),
    repeating-linear-gradient(-45deg, rgba(255, 220, 170, .06) 0 14px, transparent 14px 28px);
}
.ah-view .skirting { position: absolute; left: 0; right: 0; top: 0; height: 16px; background: linear-gradient(180deg, var(--gilt-lo) 0 2px, #2c0e14 2px 14px, rgba(0, 0, 0, .5) 14px); }
.ah-view .viewcount { position: absolute; z-index: 2; left: 0; right: 0; bottom: 24px; margin: 0; text-align: center; font-size: var(--t-note); color: var(--ink); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
@media (max-width: 860px) {
  /* (a column: the painting, its label under it; the arrows over the wall's edges) */
  .ah-view .viewrow { flex-direction: column; gap: 16px; position: static; }
  .ah-view .viewwall { padding: 60px 12px 16px; }
  .ah-view .viewnav { position: absolute; z-index: 2; top: 42%; width: 32px; height: 56px; font-size: 32px; }
  .ah-view .prev { left: 4px; } .ah-view .next { right: 4px; }
  .ah-view .viewlabel { width: auto; max-width: min(30em, calc(100% - 16px)); box-sizing: border-box; justify-items: center; text-align: center; }
  .ah-view .viewvalue { justify-self: center; }
  .ah-view .frame.viewframe { --h: min(calc(100dvh - 32px - 380px), calc((100vw - 32px - 84px) / var(--ratio))); }
  .ah-view .viewroom { grid-template-rows: minmax(0, 1fr) 64px; }
  .ah-view .viewcount { bottom: 20px; }
}
/* a phone: the room is the whole screen */
@media (max-width: 640px) {
  .house-sheet.ah-view { width: 100vw; height: 100dvh; border-radius: 0; }
  .ah-view .frame.viewframe { --h: min(calc(100dvh - 400px), calc((100vw - 84px) / var(--ratio))); }
  .ah-view .frame.viewframe.object { --h: min(calc(100dvh - 470px), calc((100vw - 110px) / var(--ratio))); }
}
@media (max-width: 860px) {
  /* (an object's label goes under its plinth, and the plinth is shorter) */
  .ah-view .viewroom.objects .viewwall { align-items: flex-start; padding-bottom: 16px; }
  .ah-view .viewroom.objects .viewrow { align-items: center; }
  .ah-view .plinth { height: 44px; }
}


/* a painting that opens up close: a hint of the hand */
button.frame { cursor: zoom-in; }
.wall.choosing button.frame, .ah-choose button.frame { cursor: pointer; }
.ah-choose .lookbtn { justify-self: start; }