/* Theme A: "eBay, circa 2003". All styling lives here; templates use class names only. */
* { box-sizing: border-box; }
body { margin: 0; font-family: Verdana, Arial, sans-serif; font-size: 14px; color: #000; background: #fff; }
a { color: #0033cc; }
main { padding: 8px 10px; max-width: 900px; margin: 0 auto; }
h1 { font-size: 18px; margin: 8px 0 4px; }
input, select, textarea { font-size: 16px; padding: 6px; border: 2px inset #ccc; font-family: inherit; }
img { max-width: 100%; height: auto; }

/* Wordmark */
.masthead { display: flex; align-items: center; gap: 10px; padding: 8px 10px 2px; }
.logo { font: bold 34px Arial, sans-serif; letter-spacing: -2px; text-decoration: none; }
.logo span:nth-child(1), .logo span:nth-child(5) { color: #e53238; }
.logo span:nth-child(2), .logo span:nth-child(6) { color: #0064d2; }
.logo span:nth-child(3), .logo span:nth-child(7) { color: #f5af02; }
.logo span:nth-child(4) { color: #86b817; }
.dryrun { background: #c00; color: #fff; font-size: 11px; font-weight: bold; padding: 2px 6px; }

/* Tabs */
.tabs { display: flex; gap: 2px; padding: 0 8px; border-bottom: 3px solid #0064d2; overflow-x: auto; }
.tabs a { flex: 1 0 auto; min-height: 44px; display: flex; align-items: center; justify-content: center;
  padding: 4px 10px; background: #d6e3f5; border: 1px solid #99aabb; border-bottom: none;
  border-radius: 4px 4px 0 0; font-size: 12px; text-decoration: none; white-space: nowrap; }
.tabs a.on { background: #0064d2; color: #fff; font-weight: bold; }

/* Time-left bar: one scrolling line (recitation, close time, time left). The poll only
   swaps the scrolling span's contents, so the scroll never restarts. */
.topbar { background: #ffffcc; border-bottom: 1px solid #cccc99; padding: 6px 10px; font-size: 13px; }
.topbar .banner-target { font-weight: bold; }
.topbar .countdown { color: #c00; font-variant-numeric: tabular-nums; }
.topbar:has(.banner-text.urgent) { background: #ffe680; border-bottom-color: #e0a000; }
.banner-scroll { overflow: hidden; white-space: nowrap; }
/* countdown.js sets --scroll-from/--scroll-to (px), the duration and the delay so both
   scrollers run at one px/s. Without JS the fallbacks scroll the text off the left edge. */
.banner-run { display: inline-block; animation: marquee 30s linear infinite; }
/* Admins and the projector read times at a glance: no scrolling there. */
.admin .banner-scroll, .board .banner-scroll { white-space: normal; }
.admin .banner-run, .board .banner-run { display: inline; animation: none; }
/* The projector keeps its three lines: recitation, close time, big countdown. */
.board .banner-sep { display: none; }
.board .banner-target, .board .banner-clock { display: block; }
.outbid-alert { background: #c00; color: #fff; font-weight: bold; padding: 8px; margin: -6px -10px 6px; }
.outbid-alert a { color: #fff; display: inline-block; min-height: 44px; line-height: 44px; }
/* Dismiss sits beside the link inside the red row, never over the banner text below it. */
.outbid-alert { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.outbid-dismiss { margin: 0; }
.outbid-dismiss button { font-size: 16px; padding: 4px 12px; }

/* Bidding pieces (used by later pages) */
.high-bidder { background: #e5f2d9; border: 1px solid #86b817; padding: 8px; font-weight: bold; color: #2a6000; margin: 8px 0; }
.outbid { background: #fde0e0; border: 1px solid #c00; padding: 8px; font-weight: bold; color: #900; margin: 8px 0; }
.btn, button { min-height: 44px; font: bold 15px Verdana, Arial, sans-serif; padding: 6px 18px; cursor: pointer;
  background: linear-gradient(#fff, #d8d8d8); border: 2px outset #ddd; border-radius: 3px; color: #000; }
.btn.go, button.go { background: linear-gradient(#ffe680, #f5af02); border-color: #e0a000; }
.watch { display: inline-block; min-height: 44px; line-height: 44px; }

/* Under construction */
.fullscreen main { max-width: none; }
/* The hazard tape runs edge to edge on every under-construction page;
   everything else on the page keeps the normal column width. */
.under-construction main { max-width: none; }
.construction > :not(.hazard) { max-width: 880px; margin-left: auto; margin-right: auto; }
.construction { text-align: center; }
.hazard { height: 28px; margin: 8px 0; border: 2px solid #222;
  background: repeating-linear-gradient(45deg, #ffd400 0 20px, #222 20px 40px); }
.uc-title { font: bold 28px "Courier New", monospace; background: #222; color: #ffd400; padding: 10px; margin: 12px 0; letter-spacing: 2px; }
.uc-scene { display: flex; align-items: flex-end; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 12px 0; overflow: hidden; }
.dust { font-size: 22px; font-weight: bold; color: #c00; }
/* GIF-style: steps() timing, so everything jumps between a few frames instead of gliding. */
.bob { animation: bob 0.8s steps(1, end) infinite; }
.bob.slow { animation-duration: 1.4s; }
.drive { animation: drive 1.8s steps(1, end) infinite; }
.barricade { position: relative; display: inline-block; width: 96px; height: 96px; }
.barricade .light { position: absolute; left: 32px; top: 20px; animation: beacon 1s steps(1, end) infinite; }
@keyframes bob { 0% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes drive { 0% { transform: translateX(-20px); } 33% { transform: translateX(0); } 66% { transform: translateX(20px); } }
@keyframes beacon { 0% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bob, .drive, .light { animation: none; } }
/* Early peek (R4-15): Browse and item pages under the tape keep the normal column. */
.under-construction main > :not(.construction) { max-width: 880px; margin-left: auto; margin-right: auto; }
.peek-note { font-weight: bold; background: #fff8c4; border: 2px dashed #c00; padding: 8px; }

/* Donate / RSVP / preview buttons (R4-14, R4-15b): chunky 1998 bevelled buttons. */
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 12px auto; }
.cta { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 16px;
  font: bold 18px "Comic Sans MS", "Trebuchet MS", sans-serif; color: #000; text-decoration: none;
  background: linear-gradient(#ffe680, #f5af02); border: 3px outset #e0a000; }
.cta:active { border-style: inset; }
.cta-peek { background: linear-gradient(#bfe3ff, #3d8be0); border-color: #2a6fbf; color: #fff; }
.cta-donate { background: linear-gradient(#c8f7c5, #2fae3a); border-color: #23862c; color: #fff; }

/* High Bids board. /board is a normal page; body.board is the projector view
   (/board/fullscreen): no tabs, Clippy or footer, and everything large. */
.board .tabs, .board #clippy-slot, .board .ie6 { display: none; }
.board main { max-width: none; padding: 8px 24px; }
.board .topbar { font-size: 24px; text-align: center; }
.board .topbar .countdown { font-size: 40px; }
.board-title { font-size: 40px; margin: 12px 0; }
.board-final { background: #c00; color: #fff; padding: 0 16px; }
.board-page { font-size: 20px; color: #555; }
.board-links a { display: inline-block; min-height: 44px; line-height: 44px; }
.board-table { width: 100%; border-collapse: collapse; }
.board .board-table { font-size: 26px; }
.board-table th { text-align: left; background: #0064d2; color: #fff; padding: 6px 12px; }
.board-table td { padding: 6px 12px; border-bottom: 1px solid #ccc; }
.board-item-title a { display: inline-block; min-height: 44px; line-height: 44px; }
.board-table tr.recent td { background: #ffe680; font-weight: bold; }
.board-bid, .board-bidder { white-space: nowrap; font-variant-numeric: tabular-nums; }
.board-extended { display: block; font-size: 18px; color: #c00; font-weight: bold; }

/* IE6 footer */
.ie6 { margin-top: 24px; padding: 0 10px 24px; text-align: center; font-size: 11px; color: #555; }
.ie6 p { margin: 4px 0; }
.ie6 .activex { background: #ffffe1; border: 1px solid #000; display: inline-block; padding: 3px 6px; font-family: Tahoma, sans-serif; color: #000; }
.ie6 a { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 4px; }
.ie6 .activex a { color: #000; text-decoration: none; }

/* Clippy slot: bottom corner, never over the bid form (Task 11 fills it) */
/* Narrow screens: an inline block after <main>, so it can never cover the form.
   Wide screens: pinned bottom-left, small, clear of the centred content. */
#clippy-slot { margin: 16px 10px 0; }
.clippy { display: flex; gap: 8px; align-items: flex-end; max-width: 420px; }
.clippy-bubble { background: #ffffe1; border: 1px solid #000; border-radius: 6px; padding: 8px 10px; font-size: 16px; }
.clippy-tip { margin: 0 0 6px; }
.clippy-option summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: #0000cc; text-decoration: underline; }
.clippy-option p { margin: 0 0 6px; font-style: italic; }
.clippy-hide { font-size: 16px; }
/* Pinned Clippy sits above the desktop status bar (22px + border, see Retro pack). */
@media (min-width: 1520px) {
  #clippy-slot { position: fixed; left: 6px; bottom: 32px; z-index: 5; margin: 0; max-width: 300px;
                 max-height: calc(100vh - 38px); overflow-y: auto; }
}

@media (max-width: 600px) {
  .uc-title { font-size: 20px; }
  .logo { font-size: 30px; }
}

/* Identity: signed-in label, sign-in and username forms */
.whoami { font-weight: bold; margin-left: 12px; }
.signin label { display: block; margin-top: 8px; }
.error { color: #c00; font-weight: bold; }

/* Browse and My EECSBay lists */
.search { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 10px; }
.search input[type=search] { flex: 1 1 180px; min-height: 44px; }
.search select { min-height: 44px; }
.categories { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.chip { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 12px; border: 1px solid #999; background: #f4f4f4; color: #000; text-decoration: none; }
.chip.on { background: #ffec9c; border-color: #c90; font-weight: bold; }
.listing-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dotted #99aabb; }
.listing-row:nth-child(even) { background: #f2f6fc; }
.thumb { flex: 0 0 80px; height: 80px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #ccc; background: #fff; overflow: hidden; }
.thumb img { width: 80px; height: 80px; object-fit: cover; }
.listing-main { flex: 1; min-width: 0; }
.listing-title { font-weight: bold; display: inline-block; min-height: 44px; line-height: 44px; }
.listing-bid { font-size: 13px; }
.tag { display: inline-block; font-size: 11px; font-weight: bold; padding: 1px 6px; margin-left: 4px; border: 1px solid; }
.tag.winning { background: #e5f2d9; color: #2a6000; border-color: #86b817; }
.tag.outbid-tag { background: #fde0e0; color: #900; border-color: #c00; }
.tag.watching { background: #fff5cc; color: #775500; border-color: #e0a000; }
.tag.withdrawn-tag { background: #c00; color: #fff; border-color: #900; }
.empty { color: #666; font-style: italic; }
.star { font-size: 14px; padding: 6px 10px; white-space: nowrap; }
.star.on { color: #b8860b; }
a.star { min-height: 44px; }

/* Item page */
.item-page { position: relative; }
.item-id { color: #666; font-size: 12px; margin: 0 0 6px; }
.photos { display: flex; gap: 6px; overflow-x: auto; margin: 6px 0; }
.photos img { max-height: 240px; width: auto; border: 1px solid #ccc; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0; }
.facts dt { font-weight: bold; }
.facts dd { margin: 0; }
.details { white-space: pre-line; margin: 6px 0; }
.figures { border: 2px solid #0064d2; background: #f2f6fc; padding: 8px; margin: 10px 0; }
.figtable { border-collapse: collapse; }
.figtable th { text-align: left; padding: 2px 12px 2px 0; font-weight: normal; color: #444; }
.figtable td.big { font-size: 20px; font-weight: bold; color: #c00; }
.extended { background: #ffe680; border: 1px solid #e0a000; padding: 6px; font-weight: bold; margin: 6px 0; }
.state-withdrawn { background: #c00; color: #fff; border: 2px solid #900; padding: 6px; font-weight: bold; margin: 6px 0; }
.state-closed, .state-not-open { background: #eee; border: 1px solid #999; padding: 6px; font-weight: bold; margin: 6px 0; }
.bidform label { display: block; font-weight: bold; margin-top: 6px; }
.bidrow { display: flex; align-items: center; gap: 6px; margin: 4px 0 10px; }
.bidrow .dollar { font-size: 20px; font-weight: bold; }
.bidrow input { width: 8em; min-height: 44px; font-size: 20px; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.live-note { font-weight: bold; color: #0064d2; }
.withdrawn-overlay { position: absolute; top: 40px; left: 50%; transform: translateX(-50%) rotate(-6deg); z-index: 3;
  background: rgba(204, 0, 0, 0.92); color: #fff; border: 6px double #fff; outline: 3px solid #c00;
  font: bold 48px Arial, sans-serif; padding: 10px 24px; text-align: center; letter-spacing: 4px; }
.withdrawn-overlay span { display: block; font-size: 13px; letter-spacing: 0; }

/* Unusual-bid confirmation: an XP-style error dialog */
.xp-dialog { max-width: 460px; margin: 16px auto; border: 1px solid #0831d9; border-radius: 8px 8px 0 0;
  background: #ece9d8; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4); }
.xp-titlebar { background: linear-gradient(#0a5fd8, #0831d9); color: #fff; font: bold 13px Tahoma, sans-serif;
  padding: 6px 8px; border-radius: 7px 7px 0 0; }
.xp-body { padding: 12px; font-family: Tahoma, sans-serif; }
/* Only the row is flex (icon | sentence); the sentence is plain flowing text. */
.xp-row { display: flex; gap: 10px; align-items: flex-start; }
.confirm-text { margin: 4px 0 0; line-height: 1.4; }
.xp-icon { flex: 0 0 32px; height: 32px; border-radius: 50%; background: #c00; color: #fff;
  font: bold 22px Arial, sans-serif; text-align: center; line-height: 32px; }
/* "No" sits where the Bid button was: large, first, the default. */
.confirm-no { display: block; width: 100%; text-align: center; text-decoration: none; font-size: 20px;
  min-height: 56px; line-height: 40px; margin: 12px 0 28px; }
/* "Yes" is small, off to the far corner, and dead for 1 s so a double-tap can't confirm. */
.confirm-form { text-align: right; }
.confirm-yes { font-size: 12px; font-weight: normal; pointer-events: none; opacity: 0.4;
  animation: arm 0s 1s forwards; }
@keyframes arm { to { pointer-events: auto; opacity: 1; } }

/* Bid result */
.bid-result { margin: 16px 0; padding: 12px; border: 2px solid; }
.bid-result.ok { background: #e5f2d9; border-color: #86b817; color: #2a6000; }
.bid-result.rejected { background: #fde0e0; border-color: #c00; color: #900; }
.result-links { display: flex; gap: 10px; flex-wrap: wrap; }
.result-links .btn { text-decoration: none; display: inline-flex; align-items: center; }
.whoami-line a { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 6px; }

/* My EECSBay: totals and collapsible sections (plain <details>, no JS) */
.my-totals p { font-weight: bold; font-size: 16px; }
.my-won-line { font-size: 20px; color: #2a6000; }
.my-checkout, .my-withdrawn-note { font-weight: normal; font-style: italic; }
.my-section { margin: 8px 0; border: 1px solid #99aabb; background: #fff; }
.my-section summary { min-height: 44px; display: flex; align-items: center; padding: 0 10px;
  cursor: pointer; font-weight: bold; background: #e8eef7; }
/* display:flex drops the native marker in some browsers; draw our own. */
.my-section summary { list-style: none; }
.my-section summary::-webkit-details-marker { display: none; }
.my-section summary::before { content: "\25B8"; margin-right: 8px; }
.my-section[open] summary::before { content: "\25BE"; }
.my-section .listing { padding: 0 10px; }
.my-remove { margin: 0; }
.clippy-restore { margin: 8px 0; }
.clippy-restore button { font-size: 16px; }

/* Admin console: same retro shell, unmistakably marked ADMIN and DRY RUN / LIVE */
.admin .masthead { border-bottom: 4px solid #222; }
.admin-badge { background: #222; color: #ffd400; font: bold 16px "Courier New", monospace; padding: 4px 10px; letter-spacing: 3px; }
.mode-marker { font-weight: bold; padding: 4px 10px; letter-spacing: 1px; }
.mode-marker.dry { background: #ffd400; color: #000; border: 2px dashed #000; }
.mode-marker.live { background: #c00; color: #fff; border: 2px solid #900; }
.admin.mode-dry main { border-left: 8px solid #ffd400; }
.admin.mode-live main { border-left: 8px solid #c00; }
.admin-tabs { border-bottom-color: #222; }
.admin-tabs a.on { background: #222; color: #ffd400; }
.admin-panel { border: 2px solid #0064d2; background: #f2f6fc; padding: 8px 10px; margin: 12px 0; }
.admin-panel h2 { font-size: 16px; margin: 0 0 6px; background: #0064d2; color: #fff; padding: 4px 8px; margin: -8px -10px 8px; }
.admin-panel h3 { font-size: 14px; margin: 8px 0 4px; }
.stat-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 12px; }
.admin-form { margin: 8px 0; }
.admin-form label { display: block; margin-top: 8px; }
.admin-form input:not([type=checkbox]), .admin-form textarea { display: block; width: 100%; max-width: 360px; min-height: 44px; margin: 2px 0 6px; }
.admin-form textarea { font-family: "Courier New", monospace; }
.admin-form label.check { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; }
.admin-form input[type=checkbox] { width: 24px; height: 24px; }
.admin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.admin-row form { margin: 0; }
.admin-row input.short { width: 6em; min-height: 44px; }
.btn.danger, button.danger { background: linear-gradient(#ff8080, #c00); border-color: #900; color: #fff; }
.flash { background: #e5f2d9; border: 1px solid #86b817; color: #2a6000; padding: 8px; font-weight: bold; }
.hint { color: #555; font-size: 12px; margin: 0 0 6px; }
.table-scroll { overflow-x: auto; }
.audit-table { border-collapse: collapse; font-size: 12px; width: 100%; }
.audit-table th { text-align: left; background: #d6e3f5; padding: 4px 6px; }
.audit-table td { padding: 4px 6px; border-bottom: 1px dotted #99aabb; vertical-align: top; }
.admin-logout { margin-top: 16px; }

/* Admin data pages */
.data-table td form { margin: 0; }
.row-withdrawn td { background: #f6dede; }
.flag-withdrawn { color: #c00; }
.flag-missing { display: inline-block; background: #ffe680; border: 1px solid #e0a000; padding: 0 4px; }
.problems { border-color: #c00; background: #fde0e0; }
.problems h2 { background: #c00; }
.new-pin { background: #ffe680; border: 2px solid #e0a000; padding: 8px; font-size: 18px; }
.bidder-card { border-top: 1px dotted #99aabb; padding-top: 6px; margin-top: 6px; }
.void-form { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.void-form input { width: 10em; min-height: 44px; }

/* QR sheet: 2 x 3 cards per printed page. */
.qr-page { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.qr-card { border: 1px dashed #999; text-align: center; padding: 8px; break-inside: avoid; }
.qr-card svg { display: block; margin: 0 auto; }
.qr-title { font-weight: bold; font-size: 16px; margin: 6px 0 2px; }
.qr-id { font-family: "Courier New", monospace; margin: 0; }
@media print {
  .admin .masthead, .admin .tabs, .admin .topbar, .admin .ie6, .admin .flash, .no-print { display: none; }
  .admin main, .admin.mode-dry main, .admin.mode-live main { border-left: 0; max-width: none; padding: 0; }
  .qr-page { grid-template-rows: repeat(3, 1fr); height: 9.6in; margin: 0; break-after: page; }
  .qr-page:last-child { break-after: auto; }
  .qr-card { display: flex; flex-direction: column; justify-content: center; align-items: center; }
}

/* ---------------------------------------------------------------- Retro pack
   All art is self-made SVG/CSS. Every animation here stops under prefers-reduced-motion
   (block at the end), and nothing blinks faster than once a second. */

/* Dividers: rainbow and gold bar instead of plain rules */
hr.rainbow { height: 4px; border: 0; margin: 8px 0;
  background: linear-gradient(90deg, #ff0000, #ff9900, #ffff00, #00cc00, #0099ff, #0000cc, #9900cc); }
hr.gold { height: 6px; margin: 6px 0; border: 1px solid #996600;
  background: linear-gradient(#fff4b0, #f5c400 45%, #b8860b); }

/* Big item photos "load" top-down like it's 2003, then sharpen. Thumbnails stay instant. */
.photo-reveal { animation: photo-reveal 0.6s steps(8, end) both, photo-unblur 0.6s ease-out both; }
@keyframes photo-reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes photo-unblur { from { filter: blur(3px); } 80% { filter: blur(1px); } to { filter: none; } }

/* Broken-image icon with fake alt text, where an item has no photo */
.broken-photo { display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 2px; max-width: 100%; }
.broken-photo img, .thumb .broken-photo img { width: 20px; height: 22px; border: 0; object-fit: contain; }
.fake-alt { font: 8px Arial, sans-serif; color: #000; text-align: center; word-break: break-all; }
.thumb { text-decoration: none; }
.photos .broken-photo { width: 180px; padding: 16px 8px; border: 1px solid #c0c0c0; background: #fff; }
.photos .broken-photo img { width: 40px; height: 44px; max-height: none; }
.photos .fake-alt { font-size: 11px; }

/* HOT! / NEW! starbursts and the ENDING SOON blinker */
.badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; vertical-align: middle; }
.figures .badges { display: flex; margin: 0 0 6px; }
.badge-burst { width: 48px; height: 30px; animation: badge-wiggle 1.2s ease-in-out infinite alternate; }
@keyframes badge-wiggle { from { transform: rotate(-6deg); } to { transform: rotate(6deg) scale(1.06); } }
.ending-soon { display: inline-block; background: #cc0000; color: #ffff00; font: bold 11px Verdana, Arial, sans-serif;
  padding: 2px 6px; border: 2px outset #ff6666; white-space: nowrap; }
/* One dim every 2 s: slower than once a second, and dimmed rather than vanishing. */
.blink { animation: blink 2s steps(1, end) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* "You've got OUTBID!" mailbox */
.outbid-alert img.mailbox { width: 32px; height: 32px; vertical-align: middle; margin-right: 4px; }

/* Browse marquee. The text starts at the left edge (no blank lead-in) and runs left. */
.marquee { overflow: hidden; white-space: nowrap; margin: 6px 0; padding: 4px 0;
  background: #000080; color: #ffff00; border: 2px inset #ccc; font: bold 15px "Courier New", monospace; }
.marquee-text { display: inline-block; animation: marquee 18s linear infinite; }
/* Pause on mouse hover only; touch screens never pause (a tap-pause looked like a freeze). */
@media (hover: hover) {
  .marquee:hover .marquee-text, .banner-scroll:hover .banner-run { animation-play-state: paused; }
}
@keyframes marquee { from { transform: translateX(var(--scroll-from, 0px)); } to { transform: translateX(var(--scroll-to, -100%)); } }

/* Footer: odometer hit counter, guestbook link, 88x31 buttons */
.hits { font-size: 12px; }
.odometer { display: inline-flex; gap: 1px; margin-left: 4px; padding: 2px; vertical-align: middle;
  background: #000; border: 2px inset #888; }
.odo-digit { display: inline-block; width: 13px; text-align: center; color: #fff;
  font: bold 15px "Courier New", monospace; background: linear-gradient(#444, #000 45%, #000 55%, #444); }
.guestbook-link a { font-weight: bold; }
.badge-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 8px 0; }
.badge88 { width: 88px; height: 31px; }

/* Desktop-only fake browser status bar. Body padding keeps it off the footer content;
   the projector view has none. */
.statusbar { display: none; }
@media (min-width: 700px) {
  body { padding-bottom: 28px; }
  body.board { padding-bottom: 0; }
  .statusbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; height: 24px;
    align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px;
    background: #d4d0c8; border-top: 2px solid #fff; box-shadow: 0 -1px 0 #808080;
    font: 11px Tahoma, Verdana, sans-serif; color: #000; }
  .statusbar span { display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px;
    border: 1px solid; border-color: #808080 #fff #fff #808080; }
  .statusbar img { width: 16px; height: 16px; }
  .board .statusbar { display: none; }
}

/* Retro 404 and the guestbook */
.abducted { text-align: center; }
.abducted-title { font: bold 24px "Courier New", monospace; color: #33ff33; background: #000; padding: 10px; }
.abducted-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.abducted-links a, .guestbook a { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 6px; }
.gb-entry { text-align: left; max-width: 480px; margin: 8px auto; padding: 6px 10px;
  background: #ffffe1; border: 2px ridge #c0c0c0; }
.gb-who { margin: 0; font-weight: bold; color: #000080; }

@media (prefers-reduced-motion: reduce) {
  .photo-reveal, .badge-burst, .blink, .marquee-text, .banner-run { animation: none; }
  /* A still marquee just shows its whole text. */
  .marquee { white-space: normal; padding: 4px 8px; }
  .banner-scroll { white-space: normal; }
  .banner-run { display: inline; }
}

/* R4-5: public bid history (a plain <details>, kept outside the polled #figures) */
.bid-history { margin: 6px 0; }
.bid-history summary { cursor: pointer; color: #00c; text-decoration: underline; }
.bid-history-list { margin: 4px 0 0; padding-left: 28px; max-height: 18em; overflow-y: auto; }
.bid-history-list .bh-time { color: #666; font-size: 12px; margin-left: 4px; }
.bid-history-list .bh-none { list-style: none; color: #666; }