/* Look and feel: near-black, bone, red and amber only.
   Square corners, hard offset shadows, Archivo Black headlines, Fira Code for every number and label. */
@font-face { font-family: 'Archivo Black'; src: url('/fonts/archivo-black.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Fira Code'; src: url('/fonts/fira-code.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }

:root {
  --z: 1; /* page zoom, raised on big screens below; heights from the screen (vh) are divided by it */
  color-scheme: dark;
  --red: #c62020; --amber: #e8a030; --bone: #f2f0e8; --black: #0c0c0a; --card: #faf9f3;
  --hl: rgba(242, 240, 232, .15); --hd: rgba(12, 12, 10, .2);
  --speed-red: rgba(198, 32, 32, .55); --speed-white: rgba(242, 240, 232, .18); --glow: rgba(232, 160, 48, .5);
  --good: #7ddc8a; --bad: #ff6b5e;
  --display: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  --body: Inter, system-ui, sans-serif;
  --mono: 'Fira Code', ui-monospace, Menlo, monospace;
  --hs: 6px 6px 0 var(--black); --hs-red: 6px 6px 0 var(--red); --hs-amber: none;
}
/* Big monitors: the layout is drawn for a window about 1600 CSS pixels wide, so on a 2.5K, 4K or wide screen the whole page is scaled up instead of
   sitting small in the middle. The height conditions keep ultra-wide screens from scaling past what fits. */
@media (min-width: 2400px) and (min-height: 1200px) { :root { --z: 1.5; } }
@media (min-width: 3200px) and (min-height: 1800px) { :root { --z: 2; } }
@media (min-width: 3800px) and (min-height: 2000px) { :root { --z: 2.4; } }
html { zoom: var(--z); }
* { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } /* clip, not just hidden: iOS Safari zooms the page out to fit anything wider than the screen (the card shadows reach 40px past their cards) */
body { margin: 0; background: var(--black); color: var(--bone); font: 15px/1.625 var(--body); font-variant-numeric: tabular-nums; touch-action: manipulation; overflow-x: hidden; overflow-x: clip; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr:focus { position: static; width: auto; height: auto; clip: auto; display: block; padding: 8px 12px; background: var(--amber); color: var(--black); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--bone); outline-offset: 2px; }
.light :focus-visible, .formcard :focus-visible { outline-color: var(--black); } /* white on dark, black on light: no yellow */
.mono { font-family: var(--mono); }
.k { font: 400 10px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.dark .k, .hero .k { color: var(--amber); }
.muted { color: rgba(242, 240, 232, .62); }
.small { font-size: 13px; }
.wrap { width: min(1400px, 100%); margin: 0 auto; padding: 0 32px; }
.display, .h1, .h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -.02em; }
.h1 { font-size: clamp(52px, 7vw, 96px); line-height: .88; }
.h1 > span { white-space: nowrap; }
@media (min-width: 1001px) { .hero-left .h1 { font-size: clamp(52px, 6vw, 84px); } } /* "Registration" must fit the left column, beside the timer card */
.h2 { font-size: clamp(40px, 7vw, 100px); line-height: .92; }
.tilt { display: block; transform: rotate(-5deg); transform-origin: left center; }
.red-t { color: var(--red); } .amber-t { color: var(--amber); }

/* top strip + nav */
.strip { display: flex; justify-content: space-between; gap: 16px; padding: 8px 32px; border-bottom: 1px solid var(--hl); font: 400 10px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(242, 240, 232, .6); background: var(--black); }
.strip b { color: var(--amber); font-weight: 400; }
.nav { display: flex; align-items: center; --gap: 24px; gap: var(--gap); padding: 14px 32px; background: var(--black); border-bottom: 2px solid var(--red); position: relative; z-index: 5; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo b { display: grid; place-items: center; width: 34px; height: 34px; background: var(--red); font: 400 16px/1 var(--display); transform: rotate(-5deg); }
.logo span { font: 400 20px/1 var(--display); letter-spacing: -.02em; text-transform: uppercase; }
.links { display: flex; gap: 22px; margin-left: 18px; }
.links a { font: 500 12px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: rgba(242, 240, 232, .8); }
.links a:hover { color: var(--amber); }
.nav .grow { flex: 1; }
.build { font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(242, 240, 232, .7); display: inline-flex; align-items: center; gap: 8px; }
.build::before { content: ''; width: 8px; height: 8px; background: var(--bad); }
.build.on::before { background: var(--amber); animation: blink 1.2s steps(2) infinite; }

/* buttons */
.btn, button { font: 400 14px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; min-height: 44px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; color: var(--bone); background: transparent; border: 2px solid rgba(242, 240, 232, .6); transition: background-color .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s; }
.btn:hover, button:hover:not(:disabled) { background: var(--bone); color: var(--black); border-color: var(--bone); }
.btn:active, button:active:not(:disabled) { transform: translate(2px, 2px); }
.btn.red, button.primary { background: var(--red); border-color: var(--red); color: var(--bone); box-shadow: var(--hs-amber); }
.btn.red:hover, button.primary:hover:not(:disabled) { background: var(--amber); border-color: var(--amber); color: var(--black); }
.btn.black { background: var(--black); border-color: var(--black); color: var(--bone); }
.btn.black:hover { background: var(--red); border-color: var(--red); }
button:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
button.danger { color: var(--bad); border-color: rgba(255, 107, 94, .5); }
button.danger:hover:not(:disabled) { background: var(--bad); color: var(--black); border-color: var(--bad); }
.light .btn:not(.red):not(.black) { color: var(--black); border-color: var(--black); }
.light .btn:not(.red):not(.black):hover { background: var(--black); color: var(--bone); }

/* hero: video, red bloom, speed lines, noise */
.hero { position: relative; overflow: hidden; background: var(--black); display: flex; flex-direction: column; isolation: isolate; }
.bgvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; mix-blend-mode: screen; z-index: -4; }
.bloom { position: absolute; inset: 0; z-index: -3; background: radial-gradient(60% 55% at 22% 45%, rgba(198, 32, 32, .5), transparent 70%); }
.speed { position: absolute; inset: 0; z-index: -2; pointer-events: none; /* a few solid red pinstripes, leaning 5 degrees, standing still like the reference */
  background: repeating-linear-gradient(85deg, transparent 0, transparent calc(11vw - 2px), rgba(198, 32, 32, .85) calc(11vw - 2px), rgba(198, 32, 32, .85) 11vw); }
.noise { position: absolute; inset: 0; z-index: -1; opacity: .08; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
.hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 35%; z-index: -1; background: linear-gradient(to bottom, transparent, var(--black)); pointer-events: none; }
.hero-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; padding-top: 48px; padding-bottom: 48px; }
.hero-left { display: grid; gap: 22px; align-content: center; min-width: 0; }
.hero-right { display: grid; gap: 22px; align-content: center; min-width: 0; }
.lead-p { max-width: 520px; font-size: 15px; color: rgba(242, 240, 232, .8); }
.acts { display: flex; gap: 12px; flex-wrap: wrap; }

/* headline wipe, one line at a time */
.wipe { display: block; animation: wipe .75s cubic-bezier(.7, 0, .2, 1) both; animation-delay: calc(var(--i, 0) * .15s); }

/* stat tiles, HUD timer card */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stat { border: 1px solid rgba(242, 240, 232, .2); padding: 14px 16px; background: rgba(12, 12, 10, .55); min-width: 0; }
.stat .v { font: 400 clamp(22px, 2.6vw, 34px)/1.1 var(--mono); color: var(--bone); overflow-wrap: anywhere; }
.stat .v.amber { color: var(--amber); }
.stat .c { font: 400 10px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(242, 240, 232, .6); margin-top: 4px; }
.stat.red { background: var(--red); border-color: var(--red); } .stat.red .c { color: rgba(242, 240, 232, .85); }
.hud { position: relative; border: 2px solid var(--amber); background: rgba(12, 12, 10, .62); backdrop-filter: blur(4px); padding: 30px 26px 22px; display: grid; gap: 10px; }
.hud .tab { position: absolute; top: -13px; left: 18px; background: var(--amber); color: var(--black); font: 400 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; padding: 6px 10px; }
.hud .time { font: 500 clamp(44px, 5.2vw, 72px)/1 var(--mono); color: var(--amber); text-shadow: 0 0 24px var(--glow); letter-spacing: -.02em; }
.hud .time { font-size: calc(clamp(44px, 5.2vw, 72px) * min(1, 11 / var(--n, 11))); } /* a long countdown (hundreds of hours) shrinks to fit the card */
.hud .time.low { color: var(--red); text-shadow: 0 0 24px var(--speed-red); animation: flicker 1s steps(1) infinite; }
.hud .meta { font: 400 10px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(242, 240, 232, .6); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hud .bid { font: 400 clamp(46px, 6vw, 96px)/.9 var(--display); letter-spacing: -.02em; color: var(--bone); }
.hud .who { font: 400 clamp(18px, 2vw, 28px)/1.1 var(--display); text-transform: uppercase; color: var(--bone); border-left: 6px solid var(--red); padding-left: 12px; }
.hud .who.none { border-color: rgba(242, 240, 232, .3); color: rgba(242, 240, 232, .55); }
.hud[role=link] { cursor: pointer; }
.hud[role=link] .time { pointer-events: none; user-select: none; } /* its text is replaced every frame, which swallowed clicks that started on a digit */
.hud[role=link]:hover, .hud[role=link]:focus-visible { background: rgba(232, 163, 61, .14); outline: none; }
.card-slot:has(> .hud) { --shade: var(--amber); --s-lx: 0px; --s-ty: 0px; --s-rx: calc(100% - 40px); --s-rty: 0px; --s-ry: calc(100% - 40px); --s-by: calc(100% - 40px); } /* no shadow at rest */
.card-slot:has(> .hud)::before { -webkit-mask: linear-gradient(#000 0 0) 0 0 / calc(100% - 40px) calc(100% - 40px) no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) 0 0 / calc(100% - 40px) calc(100% - 40px) no-repeat exclude, linear-gradient(#000 0 0); } /* no shadow until it lifts, and cut out where the see-through box sits so it never shows through */
.hud[role=link]:hover .go, .hud[role=link]:focus-visible .go { text-decoration: underline; }
#auctions { min-height: calc(100vh / var(--z)); min-height: calc(100dvh / var(--z)); } /* the clock's jump shows only this section, never the dark ones around it */
#auctions { position: relative; }
/* Hero stats: a number on the left, its graph filling the rest of the row */
/* The countdown and the two graph rows are three equal rows; the graph rows have no card behind them */
.hero-right:has(> .stats .stat.wide) { grid-auto-rows: 1fr; }
.stats:has(.stat.wide) { display: contents; }
.stat.wide { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: center; border: 0; background: none; padding: 0 26px; }
.spark svg { display: block; width: 100%; height: 56px; overflow: visible; }
.spark .guide { stroke: rgba(242, 240, 232, .12); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; fill: none; }
.spark polyline { fill: none; stroke: var(--amber); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* Frappe Charts heatmap: only the squares (labels, legend and tooltip hidden), scaled to the box */
.heat .chart-container { width: 100% !important; font-family: inherit; }
.heat svg { display: block; width: 100%; height: auto; }
.heat .domain-name, .heat .subdomain-name, .heat .chart-legend, .heat .graph-svg-tip { display: none; }
#how { min-height: calc(100vh / var(--z)); min-height: calc(100dvh / var(--z)); display: flex; align-items: center; } /* one screen of black, the steps in its middle */
#how > .wrap { width: 100%; }
/* Home page only: when scrolling stops near a section's top edge, settle on it. "proximity" never traps you inside a tall section. */
html.snap { scroll-snap-type: y proximity; }
html.snap header.nav, html.snap main > section:not(.hero) { scroll-snap-align: start; } /* the header, not the hero, so the top of the page keeps its header */
.card-slot.flash > .card { animation: flash 1.2s ease-out; }
@keyframes flash { 0%, 40% { outline: 3px solid var(--amber); outline-offset: 4px; } 100% { outline: 3px solid transparent; outline-offset: 4px; } }
.hud a.go { font: 400 12px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--amber); }

/* the lot */
.lot { display: flex; gap: 28px; align-items: center; min-width: 0; }
.lot .photo { height: clamp(240px, calc(60vh / var(--z)), 600px); width: auto; max-width: 52%; aspect-ratio: 3 / 4; object-fit: contain; } /* the whole person, never cropped */
.photo { width: clamp(120px, 14vw, 230px); aspect-ratio: 1; object-fit: cover; border: 2px solid var(--bone); box-shadow: var(--hs-red); background: var(--black); display: grid; place-items: center; font: 400 clamp(36px, 5vw, 76px)/1 var(--display); transform: rotate(3deg); flex: none; }
.pname { font: 400 clamp(40px, 6.4vw, 100px)/.88 var(--display); text-transform: uppercase; letter-spacing: -.02em; transform: rotate(-5deg); transform-origin: left center; flex: 1; min-width: 0; }
.pname span { display: block; width: max-content; } /* fitName() shrinks the type until the longest word fits */
.pname > span:last-child { color: var(--red); }

/* marquee */
.marquee { overflow: hidden; background: var(--red); border-block: 2px solid var(--black); }
.track { display: flex; width: max-content; animation: marq 18s linear infinite paused; }
.fonts-ready .track { animation-play-state: running; } /* util.js sets this once the ticker's font is in, so the text does not change width mid-scroll */
.track span { font: 400 clamp(15px, 1.6vw, 22px)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; padding: 12px 26px; white-space: nowrap; color: var(--bone); }
.track i { font-style: normal; color: var(--black); }

/* sections */
.section { padding: 112px 0; }
.light { background: var(--bone); color: var(--black); }
.light .k { color: var(--red); }
.light .muted { color: rgba(12, 12, 10, .62); }
.sec-head { display: grid; gap: 14px; margin-bottom: 56px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px; }
.card { background: var(--card); color: var(--black); border: 2px solid var(--black); box-shadow: var(--hs-red); padding: 22px; display: flex; flex-direction: column; gap: 12px; transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s; }
.card .acts { margin-top: auto; padding-top: 8px; }
/* The red shadow lies on the page under the card: the card tilts and lifts on hover, the shadow stays a flat rectangle and shows a little more */
.card-slot { position: relative; display: flex; --shade: var(--red); --tilt: -8deg; }
.card-slot:has(> .formcard), .card-slot:has(> .hud) { --tilt: -4deg; } /* the cards you fill in, and the countdown, tilt half as far */
.card-slot:has(> [hidden]) { display: none; }
.card-slot > * { position: relative; flex: 1; box-shadow: none !important; transition: background-color .15s; } /* the tilt is animated by util.js, frame by frame with the shadow */
.card-slot::before { content: ''; position: absolute; inset: 0 -40px -40px 0; background: var(--shade); clip-path: polygon(var(--s-lx, 6px) var(--s-ty, 6px), var(--s-rx, calc(100% - 34px)) var(--s-rty, 6px), var(--s-rx, calc(100% - 34px)) var(--s-ry, calc(100% - 34px)), var(--s-lx, 6px) var(--s-by, calc(100% - 34px))); } /* the resting 6px shadow; util.js moves the corners while a card tilts */
.card h3 { font: 400 clamp(26px, 2.6vw, 36px)/.95 var(--display); text-transform: uppercase; letter-spacing: -.02em; }
.card .nums { font: 400 12px/1.5 var(--mono); color: rgba(12, 12, 10, .7); }
.live-badge { display: inline-block; background: var(--red); color: var(--bone); font: 400 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; padding: 6px 8px; justify-self: start; animation: blink 1.2s steps(2) infinite; }

/* how it runs: conveyor belt */
.dark { background: var(--black); color: var(--bone); }
.stages { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-top: 40px; }
.belt { position: absolute; left: 0; right: 0; top: 92px; height: 8px; background-image: repeating-linear-gradient(90deg, var(--amber) 0 18px, transparent 18px 36px); background-size: 36px 100%; animation: belt 2s linear infinite; opacity: .85; }
.stage-card { background: var(--card); color: var(--black); border: 2px solid var(--black); padding: 22px; display: grid; gap: 10px; align-content: start; }
.stages > .card-slot { z-index: 1; align-self: start; } /* above the belt */
.stages > .card-slot:nth-child(even) { transform: translateY(24px); }
.stages > .card-slot:last-child { --shade: var(--bone); } .stages > .card-slot:last-child > .stage-card { background: var(--amber); }
.stage-card .n { font: 400 56px/1 var(--display); color: var(--red); } .stages > .card-slot:last-child .n { color: var(--black); }
.stage-card h3 { font: 400 24px/1 var(--display); text-transform: uppercase; letter-spacing: -.02em; }
.stage-card .d { font: 400 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.rings { position: absolute; right: 8%; top: -64px; display: flex; gap: 14px; pointer-events: none; }
.ring { width: 90px; height: 90px; border: 3px dashed var(--amber); border-radius: 50%; animation: spin 12s linear infinite; }
.ring.b { width: 56px; height: 56px; margin-top: 52px; animation-duration: 8s; animation-direction: reverse; border-color: var(--red); }
.cta { background: var(--red); color: var(--bone); padding: 64px 0; border-block: 2px solid var(--black); }
.cta .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta .btn { background: var(--black); border-color: var(--black); }
.cta .btn:hover { background: var(--amber); color: var(--black); border-color: var(--amber); }
.foot { padding: 40px 0 56px; border-top: 1px solid var(--hl); font: 400 11px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(242, 240, 232, .55); }
.foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* purse bars (the benchmark-bar look) and squads */
.bars { display: grid; gap: 12px; }
.bars h3 { font: 400 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
.row .nm { font: 400 clamp(15px, 1.4vw, 19px)/1 var(--display); text-transform: uppercase; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .val { font: 400 13px/1 var(--mono); color: var(--amber); }
.row .track2 { grid-column: 1 / -1; height: 12px; background: rgba(242, 240, 232, .14); }
.row .track2 i { display: block; height: 100%; background: var(--bone); width: 0; transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.row.lead .track2 i { background: var(--red); }
.row.lead .nm::after { content: ' ▲'; color: var(--red); }
.row .sub { grid-column: 1 / -1; font: 400 10px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(242, 240, 232, .5); }
.squads { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px; }
.squad { background: var(--card); color: var(--black); border: 2px solid var(--black); box-shadow: var(--hs-red); padding: 18px; display: grid; gap: 8px; align-content: start; }
.squad.lead { outline: 3px solid var(--red); outline-offset: 3px; }
.squad header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.squad h3 { font: 400 24px/1 var(--display); text-transform: uppercase; letter-spacing: -.02em; }
.squad .left { font: 500 14px/1 var(--mono); color: var(--red); }
.squad .meta { font: 400 10px/1.4 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: rgba(12, 12, 10, .6); }
.squad ul { list-style: none; display: grid; gap: 2px; font-size: 14px; }
.squad li { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--hd); padding-top: 4px; }
.squad li span { font-family: var(--mono); font-size: 13px; }
.sales { list-style: none; display: grid; gap: 4px; }
.sales li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 7.5em; gap: 12px; align-items: baseline; border-top: 1px solid var(--hl); padding: 8px 0; } /* three fixed columns: the middle one never drifts with the name's length */
.sales li span { font-family: var(--mono); color: var(--amber); text-align: right; }
.sales li b, .sales li em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales li em { font-style: normal; }
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; border: 1px solid rgba(242, 240, 232, .35); padding: 7px 10px; }

.soldbanner { position: fixed; inset: 0; z-index: 100; display: grid; place-content: safe center; text-align: center; gap: 12px; background: var(--red); padding: 24px; overflow: auto; overflow-wrap: anywhere; animation: stamp .35s cubic-bezier(.2, 1.4, .4, 1) both; cursor: pointer; }
.soldbanner.unsold { background: var(--black); }
.soldbanner.unsold b { color: var(--bad, var(--bone)); }
.soldbanner.unsold span { color: var(--bone); }
.soldbanner b { font: 400 clamp(56px, min(16vw, calc(20vh / var(--z))), 260px)/.9 var(--display); text-transform: uppercase; color: var(--bone); transform: rotate(-5deg); letter-spacing: -.02em; }
.soldbanner span { font: 400 clamp(22px, min(3.6vw, calc(6vh / var(--z))), 60px)/1.05 var(--display); text-transform: uppercase; color: var(--black); }
.soldbanner .amount { font: 500 clamp(30px, min(5vw, calc(8vh / var(--z))), 80px)/1 var(--mono); color: var(--bone); }

/* forms */
label { display: grid; gap: 6px; font: 400 10px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(242, 240, 232, .7); }
input, select, textarea { font: 400 16px/1.3 var(--body); letter-spacing: 0; text-transform: none; min-height: 46px; width: 100%; padding: 10px 12px; color: var(--bone); background: var(--black); border: 1px solid rgba(242, 240, 232, .35); }
input:focus, select:focus, textarea:focus { border-color: var(--bone); outline: none; box-shadow: 0 0 0 1px var(--bone); }
textarea { font-family: var(--mono); font-size: 13px; }
input[type=file] { padding: 8px; }
.formcard { background: var(--card); color: var(--black); border: 2px solid var(--black); box-shadow: var(--hs-red); padding: 28px; display: grid; gap: 16px; }
.formcard label { color: rgba(12, 12, 10, .75); }
.formcard input, .formcard select { background: #fff; color: var(--black); border: 2px solid var(--black); }
.formcard input:focus, .formcard select:focus { border-color: var(--black); outline: none; box-shadow: 0 0 0 1px var(--black); }
.formcard h2 { font: 400 28px/1 var(--display); text-transform: uppercase; letter-spacing: -.02em; }
.field-err { font: 400 12px/1.4 var(--mono); color: var(--red); letter-spacing: 0; text-transform: none; }
.dark .field-err, .hero .field-err { color: var(--bad); }
[aria-invalid=true] { border-color: var(--red) !important; }
.avatar { position: relative; justify-self: center; width: 132px; height: 132px; border: 2px dashed var(--black); overflow: hidden; display: grid; place-items: center; text-align: center; font: 400 10px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(12, 12, 10, .7); cursor: pointer; background: #fff; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar input { position: absolute; inset: 0; opacity: 0; cursor: pointer; min-height: 0; }
.avatar:focus-within { outline: 3px solid var(--red); outline-offset: 3px; }
.banner { padding: 12px 14px; border: 2px solid var(--black); font: 400 13px/1.5 var(--mono); }
.banner.bad { border-color: var(--red); color: var(--red); }
.auth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 520px)); justify-content: center; gap: 28px; margin-bottom: 72px; } /* the create and admin cards keep a fixed width, centred, however wide the screen is */

/* admin */
.control { display: grid; gap: 24px; padding: 28px 32px 160px; max-width: 1600px; margin: 0 auto; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 1000px) { .control { grid-template-columns: 1fr; padding: 20px 16px 160px; } }
.stack { display: grid; gap: 24px; }
.panel { background: rgba(242, 240, 232, .04); border: 1px solid var(--hl); padding: 20px; display: grid; gap: 14px; align-content: start; }
.panel h2 { font: 400 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: -.02em; }
.hero.compact .hero-grid { padding-top: 32px; padding-bottom: 32px; }
body[data-admin] .pname { font-size: clamp(40px, 5vw, 84px); }
body[data-admin] .lot .photo { height: auto; width: clamp(100px, 11vw, 170px); max-width: none; }
body[data-admin] .hud .bid { font-size: clamp(40px, 4.4vw, 72px); }
body[data-admin] .hud .time { font-size: clamp(38px, 4vw, 56px); }
.bidhead { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.bidhead label { width: 220px; }
.bidbtns { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.tile { display: grid; gap: 4px; justify-items: start; justify-content: start; text-align: left; padding: 14px; min-height: 96px; align-content: start; background: rgba(12, 12, 10, .6); border: 1px solid rgba(242, 240, 232, .3); text-transform: none; letter-spacing: 0; }
.tile b { font: 400 18px/1.1 var(--display); text-transform: uppercase; }
.tile .amt { font: 500 28px/1 var(--mono); color: var(--amber); }
.tile .why { font: 400 12px/1.4 var(--mono); color: rgba(242, 240, 232, .6); }
.tile small { font: 400 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(242, 240, 232, .55); }
.tile:hover:not(:disabled) { background: var(--red); border-color: var(--red); color: var(--bone); } .tile:hover:not(:disabled) .amt { color: var(--bone); }
.tile.lead { border-color: var(--red); box-shadow: inset 5px 0 0 var(--red); }
.tile:disabled { background: rgba(12, 12, 10, .5); }
.tile:disabled .amt { color: rgba(242, 240, 232, .45); }
.hint { color: rgba(242, 240, 232, .6); padding: 18px; border: 1px dashed rgba(242, 240, 232, .3); text-align: center; font: 400 12px/1.5 var(--mono); }
.light .hint { color: rgba(12, 12, 10, .6); border-color: var(--hd); }
.actions { position: fixed; inset: auto 0 0 0; z-index: 6; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--black); border-top: 2px solid var(--red); }
.actions button { min-height: 54px; }
.actions .sold { min-width: min(100%, 300px); font-size: 17px; flex: 2 1 260px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--hl); overflow-x: auto; }
.tabs button { border: 0; background: none; color: rgba(242, 240, 232, .65); font: 400 12px/1 var(--mono); letter-spacing: .15em; min-height: 46px; }
.tabs button:hover { background: none; color: var(--bone); }
.tabs button[aria-selected=true] { color: var(--bone); box-shadow: inset 0 -3px 0 var(--red); }
.pill { background: var(--red); color: var(--bone); padding: 3px 7px; font: 400 10px/1 var(--mono); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { min-height: 36px; padding: 0 12px; font: 400 11px/1 var(--mono); letter-spacing: .1em; }
.seg button[aria-pressed=true] { background: var(--bone); color: var(--black); border-color: var(--bone); }
.plist { display: grid; gap: 6px; max-height: calc(52vh / var(--z)); overflow: auto; }
.plist button { justify-content: space-between; text-align: left; min-height: 54px; text-transform: none; letter-spacing: 0; font: 600 14px/1.3 var(--body); border-color: var(--hl); }
.plist .st { font: 400 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(242, 240, 232, .6); }
.plist .st.sold { color: var(--good); } .plist .st.unsold { color: var(--bad); }
/* a waiting sign-up is a trading card: portrait on the left, the player's details and the two things the organiser can set on the right */
.reggrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.reg { display: grid; grid-template-columns: minmax(150px, 38%) minmax(0, 1fr); gap: 20px; padding: 10px; background: rgba(12, 12, 10, .55); border: 1px solid var(--hl); }
.reg .art { position: relative; min-height: 260px; } /* the photo fills the whole left column, as tall as the details */
.reg .photo { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; font-size: 72px; transform: none; box-shadow: none; border: 2px solid var(--black); }
.reg .tag { position: absolute; left: 0; top: 10px; max-width: 90%; padding: 5px 10px; background: var(--amber); color: var(--black); font: 400 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.reg .pc-body { display: flex; flex-direction: column; gap: 12px; padding: 6px 6px 6px 0; min-width: 0; }
.reg .pc-name { font: 400 clamp(22px, 2.4vw, 32px)/1.05 var(--display); text-transform: uppercase; letter-spacing: -.01em; overflow-wrap: anywhere; }
.reg .pc-phone { font: 400 15px/1.3 var(--mono); letter-spacing: .06em; color: rgba(242, 240, 232, .75); }
.reg .fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: auto; }
.reg .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reg .acts button { padding: 0 8px; }
.row-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--hl); }
.group-title { font: 400 18px/1.2 var(--display); text-transform: uppercase; letter-spacing: -.01em; margin-top: 6px; }
details summary { cursor: pointer; font: 400 12px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase; min-height: 32px; display: flex; align-items: center; color: var(--amber); }
dialog { background: var(--black); color: var(--bone); border: 2px solid var(--bone); box-shadow: var(--hs-red); padding: 24px; width: min(440px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0, 0, 0, .75); }
dialog form { display: grid; gap: 16px; }
dialog h2 { font: 400 26px/1 var(--display); text-transform: uppercase; letter-spacing: -.02em; }
dialog .row { display: flex; flex-direction: row-reverse; gap: 10px; justify-content: flex-start; align-items: stretch; } /* not baseline: a two-line label would push its button off level */
#toast { position: fixed; left: 50%; bottom: 112px; transform: translateX(-50%); z-index: 20; padding: 12px 18px; background: var(--red); color: var(--bone); font: 400 12px/1.4 var(--mono); letter-spacing: .05em; border: 2px solid var(--black); box-shadow: var(--hs-amber); max-width: calc(100vw - 32px); }
#toast.ok { background: var(--amber); color: var(--black); }
body[data-role=verifier] .lefty, body[data-role=verifier] .hero, body[data-role=verifier] #bidPanel, body[data-role=verifier] .actions,
body[data-role=verifier] [data-tab=pool], body[data-role=verifier] [data-tab=teams],
body[data-role=auctioneer] [data-tab=regs], body[data-role=auctioneer] #dlRegistered, body[data-role=auctioneer] #addTeam, body[data-role=auctioneer] #endAuction,
body[data-role=verifier] #dashLink, body[data-role=auctioneer] #dashLink { display: none; }
body[data-role=owner] #listLink { display: none; } /* an owner's "/" is the dashboard, which Dashboard already links to */
body:not([data-role=owner]) .owner-only { display: none; }
.squads .squad.linkable { cursor: pointer; }
.squads .squad.linkable:hover { outline: 2px solid var(--red); outline-offset: 2px; }
.squad .linkline { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; font: 400 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(12, 12, 10, .6); }
.squad .linkline button { min-height: 28px; padding: 0 10px; font-size: 11px; }
body[data-role=verifier] .control { grid-template-columns: minmax(0, 1fr); padding-bottom: 32px; }
/* a team link: the lot, the timer and one bid button for its own team, nothing else */
body[data-role=team] .actions, body[data-role=team] .bidhead label, body[data-role=team] [data-tab=regs], body[data-role=team] #tab-regs,
body[data-role=team] #addTeam, body[data-role=team] #requeue, body[data-role=team] .reports,
body[data-role=team] #dashLink, body[data-role=team] #listLink { display: none; }
body[data-role=team] .control { grid-template-columns: minmax(0, 1fr); padding-bottom: 32px; }
body[data-role=team] .bidbtns { grid-template-columns: minmax(0, 1fr); }

/* stats: for every role, and a captain's own numbers above the bid button */
.teamstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; }
.teamstrip div { display: grid; gap: 2px; padding: 8px 10px; background: rgba(12, 12, 10, .6); border: 1px solid var(--hl); }
.teamstrip span { font: 400 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(242, 240, 232, .6); }
.teamstrip b { font: 500 18px/1.2 var(--mono); color: var(--amber); }
.teamstrip .risk { grid-column: 1 / -1; margin: 0; }
.risk { color: var(--amber); font: 600 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.sumstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.tblwrap { overflow-x: auto; margin-bottom: 14px; }
.stbl { width: 100%; border-collapse: collapse; font: 400 13px/1.4 var(--mono); }
.stbl th, .stbl td { padding: 7px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--hl); }
.stbl th:first-child, .stbl td:first-child { text-align: left; }
.stbl thead th { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(242, 240, 232, .6); }
.stbl tr.me { background: rgba(255, 255, 255, .07); }

.prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.prow .pinfo { min-width: 70px; justify-content: center; font: 400 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.pcard img { float: right; margin: 0 0 8px 12px; object-fit: cover; border: 1px solid var(--hl); }
.pcard h3 { margin: 12px 0 6px; }
.pc-hist { font: 400 12px/1.5 var(--mono); letter-spacing: .04em; margin: 4px 0 8px; }
.pc-hist button { min-height: 32px; padding: 0 10px; font-size: 11px; margin-left: 6px; }

/* the phone remote: big targets, one lot, one confirm button */
body[data-remote] .lefty, body[data-remote] .actions { display: none; }
body[data-remote] .control { grid-template-columns: minmax(0, 1fr); padding-bottom: 32px; }
.remote .rlot { display: grid; gap: 2px; margin-bottom: 10px; height: clamp(52px, 12vw, 64px); align-content: start; overflow: hidden; } /* a fixed-height header: nothing below it ever moves */
.remote .rlot b { font: 400 clamp(26px, 8vw, 40px)/1 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.remote .rlot span, .remote .rnow span { font: 400 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(242, 240, 232, .6); }
.remote .rnow { display: grid; grid-template-columns: 1.2fr 1.2fr .8fr; gap: 8px; margin-bottom: 12px; }
.remote .rnow div { display: grid; gap: 2px; padding: 8px 10px; background: rgba(12, 12, 10, .6); border: 1px solid var(--hl); }
.remote .rnow { grid-auto-rows: 76px; }
.remote .rnow div { min-width: 0; overflow: hidden; align-content: space-between; }
.remote .rnow b { font: 500 clamp(16px, 5vw, 22px)/1.2 var(--mono); color: var(--amber); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.remote .rtime.low { color: var(--red); }
.remote .rteams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 104px; gap: 10px; } /* every team button is the same size whatever its text says */
.remote .rt { display: grid; gap: 4px; justify-items: start; text-align: left; height: 100%; padding: 10px 12px; align-content: space-between; min-width: 0; overflow: hidden; }
.remote .rt b { font: 400 clamp(15px, 4.6vw, 20px)/1.1 var(--display); text-transform: uppercase; max-width: 100%; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.remote .rt span { font: 500 clamp(14px, 4.4vw, 20px)/1.15 var(--mono); color: var(--amber); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.remote .rt.lead span, .remote .rt:disabled span { font-size: 12px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.remote .rt:disabled span { color: rgba(242, 240, 232, .6); }
.remote .rt.lead { border-color: var(--red); box-shadow: inset 5px 0 0 var(--red); }
.remote button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* no double-tap zoom, so the first tap is the tap */
.remote .rt:active:not(:disabled) { background: var(--red); border-color: var(--red); }
.remote .rhint { margin-top: 10px; text-align: center; }
.remote .rconfirm { width: 100%; min-height: 76px; margin-top: 12px; font-size: 20px; }
/* long team names wrap or are cut to two lines instead of running out of their box, everywhere team names sit in a box */
.tile b, .squad h3, .teamstrip b, .stbl th:first-child { overflow-wrap: anywhere; min-width: 0; }
.tile { min-width: 0; overflow: hidden; }
.stbl th:first-child { white-space: normal; max-width: 40vw; }
.remote .rrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.remote .rrow button { min-height: 56px; }

/* phone layout for owners and auctioneers: its own, not the laptop squeezed in. Slim top bar with a menu, the lot in one line,
   tabs along the bottom, one short row of Sold / Unsold / Start above them. Everything else is in the menu or on the Remote tab. */
.phonemenu, .lotstrip { display: none; }
@media (max-width: 700px) {
  body[data-admin]:is([data-role=owner], [data-role=auctioneer]) { --tabbar: 60px; }
  body[data-admin]:is([data-role=owner], [data-role=auctioneer]) .strip span:nth-child(3) { display: none; }
  body[data-admin]:is([data-role=owner], [data-role=auctioneer]) .strip { padding: 6px 16px; }
  body[data-admin]:is([data-role=owner], [data-role=auctioneer]) header.nav > .btn { display: none; }
  body[data-admin]:is([data-role=owner], [data-role=auctioneer]) .phonemenu { display: block; position: relative; }
  .phonemenu summary { list-style: none; cursor: pointer; min-width: 52px; min-height: 48px; display: grid; place-items: center; font: 400 26px/1 var(--mono); color: var(--bone); border: 2px solid var(--hl); }
  .phonemenu summary::-webkit-details-marker { display: none; }
  .phonemenu .menubox { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; gap: 6px; min-width: 230px; padding: 8px; background: var(--black); border: 1px solid var(--hl); box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
  .phonemenu .menubox .btn { min-height: 52px; justify-content: flex-start; text-align: left; font-size: 14px; }
  body[data-admin]:is([data-role=owner], [data-role=auctioneer]) .lefty { display: none; }
  body[data-admin]:is([data-role=owner], [data-role=auctioneer]) .lotstrip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; order: -1; padding: 12px; background: rgba(12, 12, 10, .6); border: 1px solid var(--hl); }
  body[data-remote] .lotstrip, body[data-setup] .lotstrip { display: none !important; }
  .lotstrip b { font: 400 clamp(20px, 6vw, 26px)/1.1 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lotstrip span { font: 400 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(242, 240, 232, .65); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lotstrip .t { font: 500 22px/1 var(--mono); color: var(--amber); text-align: right; letter-spacing: 0; }
  body[data-admin]:is([data-role=owner], [data-role=auctioneer]) .control { padding: 12px 12px calc(var(--tabbar) + 104px + env(safe-area-inset-bottom)); gap: 12px; }
  body[data-admin]:is([data-role=owner], [data-role=auctioneer]) .control > .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; margin: 0; background: var(--black); border-top: 1px solid var(--hl); border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
  body[data-admin]:is([data-role=owner], [data-role=auctioneer]) .control > .tabs { overflow-y: hidden; overscroll-behavior: contain; touch-action: pan-x; } /* sideways swipes only: the bar can no longer be dragged up and down */
  body[data-admin]:is([data-role=owner], [data-role=auctioneer]) .actions { touch-action: manipulation; overscroll-behavior: contain; }
  body[data-admin]:is([data-role=owner], [data-role=auctioneer]) .tabs button { flex: 1 0 auto; min-width: 84px; min-height: var(--tabbar); font-size: 12px; }
  body[data-admin]:is([data-role=owner], [data-role=auctioneer]) #t-remote { order: -1; }
  body[data-admin]:is([data-role=owner], [data-role=auctioneer]) .tabs #backLive { display: none; }
  body[data-admin]:is([data-role=owner], [data-role=auctioneer]) .actions { bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; padding: 8px 12px; }
  body[data-admin]:is([data-role=owner], [data-role=auctioneer]) .actions :is(#endAuction, #undo, #resetTimer) { display: none; }
  body[data-admin]:is([data-role=owner], [data-role=auctioneer]) .actions .sold { grid-column: auto; min-width: 0; font-size: 15px; }
  body[data-admin]:is([data-role=owner], [data-role=auctioneer]) .actions button { min-height: 52px; font-size: 14px; }
  body[data-setup] .actions { display: none; }
}

/* motion */
@keyframes marq { to { transform: translateX(-50%); } }
@keyframes belt { to { background-position: 36px 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: .25; } }
@keyframes flicker { 0%, 100% { opacity: 1; } 8% { opacity: .6; } 10% { opacity: 1; } 40% { opacity: .8; } 42% { opacity: 1; } 70% { opacity: .7; } 72% { opacity: 1; } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes stamp { from { opacity: 0; transform: scale(1.25) rotate(-3deg); } }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; padding-top: 36px; }
  .stages { grid-template-columns: 1fr 1fr; }
  .belt { display: none; }
  .links { display: none; }
}
@media (max-width: 760px) {
  .wrap, .strip, .nav { padding-left: 16px; padding-right: 16px; }
  .strip span:nth-child(2) { display: none; }
  .tilt, .pname { transform: rotate(-3deg); }
  .lot { flex-wrap: wrap; }
  .lot .photo { height: auto; width: min(62vw, 280px); max-width: none; }
  .lot .pname { flex-basis: 100%; }
  .h1 { font-size: 11.5vw; }
  .section { padding: 72px 0; }
  .stages { grid-template-columns: 1fr; }
  .stages > .card-slot:nth-child(even) { transform: none; }
  .cards { gap: 20px; }
  .nav { --gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  main, main > section, footer { overflow-x: clip; } /* nothing may widen the page past the screen on a phone */
  .nav .btn { min-height: 38px; padding: 0 14px; font-size: 12px; }
  /* phone header: the logo, then the buttons in neat rows that fill the width, never one stray button on its own row */
  .nav .grow { display: none; }
  .nav .btn, .nav > button { flex: 1 1 auto; justify-content: center; text-align: center; }
  .nav .logo { flex: 0 0 auto; margin-right: auto; }
  .nav:has(.btn ~ .btn, .btn ~ button, button ~ .btn) .logo { flex-basis: 100%; } /* two or more buttons: the logo gets a row of its own */
  .build { display: none; }
  .logo span { font-size: 17px; }
  .actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
  .actions #endAuction { grid-column: 1 / -1; }
  .actions .sold { grid-column: 1 / -1; min-width: 0; font-size: 16px; }
  .actions button { min-height: 48px; padding: 0 4px; font-size: 12px; line-height: 1.1; text-align: center; }
  .bidbtns { grid-template-columns: 1fr 1fr; }
  .bidhead { display: contents; } .bidhead h2 { order: 0; } #bidbtns { order: 1; } .bidhead label { order: 2; width: 100%; }
  .formcard { padding: 20px; }
  .reg { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; } .reg .acts { grid-template-columns: minmax(0, 1fr); } .reg .pc-name { font-size: 20px; }
}
@media (min-width: 1000px) and (min-height: 700px) {
  .hero.full { min-height: calc(calc(100dvh / var(--z)) - 74px); } /* the nav is 74px, so the ticker sits on the bottom edge and no white shows */
  body[data-live] .hero-right .bars { max-height: calc(46vh / var(--z)); overflow: auto; padding-right: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .bgvideo { display: none; }
  .reveal { opacity: 1; transform: none; }
}
@media print { .strip, .nav, .hero, .marquee, .actions, .cta, .foot, #toast, .dark { display: none !important; } body { background: #fff; color: #000; } .light { background: #fff; } .squad { box-shadow: none; } }
/* the control room keeps the hero short so the bid tiles stay on screen */
body[data-admin] .hero-left .stats, body[data-admin] .hud .meta { display: none; }
body[data-admin] .hero.compact .hero-grid { padding-top: 18px; padding-bottom: 18px; gap: 24px; }
body[data-admin] .hero-left { gap: 12px; }
body[data-admin] .lot .photo { height: auto; width: clamp(84px, 8vw, 120px); max-width: none; font-size: 28px; }
body[data-admin] .lot { gap: 20px; }
body[data-admin] .pname { font-size: clamp(34px, 4vw, 64px); }
body[data-admin] .hud { padding: 24px 22px 16px; gap: 6px; }
body[data-admin] .hud .bid { font-size: clamp(34px, 3.6vw, 56px); }
body[data-admin] .hud .time { font-size: clamp(30px, 3.2vw, 48px); }
body[data-admin] .hud .who { font-size: clamp(16px, 1.6vw, 22px); }

/* buttons inside the light cards need dark text */
.formcard button:not(.primary), .formcard .btn:not(.red), .card button:not(.primary) { color: var(--black); border-color: var(--black); }
.formcard button:not(.primary):hover, .formcard .btn:not(.red):hover, .card button:not(.primary):hover { background: var(--black); color: var(--bone); }
.formcard .row-line { border-top-color: var(--hd); }
.formcard .row-line .meta { font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(12, 12, 10, .6); }
.formcard select { min-height: 46px; }
.card select { font-size: 13px; min-height: 38px; color: var(--black); background: #fff; border: 2px solid var(--black); }
.card label { color: rgba(12, 12, 10, .65); }
.formcard button.danger { color: var(--red); border-color: var(--red); }
.formcard button.danger:hover:not(:disabled) { background: var(--red); color: var(--bone); }
.gbtn { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; background: #fff; color: #1f1f1f; border: 2px solid var(--black); font: 600 15px/1 var(--body); text-decoration: none; box-shadow: var(--hs-amber); transition: transform .15s, background-color .15s; }
.gbtn:hover { background: var(--bone); }
.gbtn:active { transform: translate(2px, 2px); }

/* dropdowns: select.js draws these over the hidden real <select> */
.dd { position: relative; width: 100%; }
html select.dd-native { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
button.dd-btn { position: relative; display: block; justify-content: flex-start; box-shadow: none; transform: none; width: 100%; min-height: 46px; padding: 10px 40px 10px 12px; text-align: left; font: 400 16px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--bone); background: var(--black); border: 1px solid rgba(242, 240, 232, .35); cursor: pointer; }
button.dd-btn::after { content: ''; position: absolute; right: 15px; top: 50%; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); }
button.dd-btn[aria-expanded=true]::after { transform: translateY(-30%) rotate(-135deg); }
button.dd-btn:hover:not(:disabled) { background: var(--black); color: var(--bone); border-color: var(--bone); }
button.dd-btn:focus-visible, button.dd-btn[aria-expanded=true] { border-color: var(--bone); box-shadow: 0 0 0 1px var(--bone); outline: none; }
.dd-btn.placeholder { opacity: .6; }
.dd-btn:disabled { opacity: .45; cursor: not-allowed; }
.dd-native[aria-invalid] + .dd .dd-btn { border-color: var(--bad); }
.dd-list { position: fixed; z-index: 60; max-height: 260px; overflow: auto; margin: 0; padding: 0; list-style: none; background: var(--black); border: 2px solid var(--bone); box-shadow: var(--hs-red); }
.dd-list li { padding: 11px 12px; font: 400 13px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bone); cursor: pointer; }
.dd-list li[aria-selected=true] { text-decoration: underline; text-underline-offset: 4px; }
.dd-list li[data-active] { background: var(--red); color: var(--bone); }
.dd-list li[aria-disabled=true] { display: none; }
.formcard button.dd-btn, .card button.dd-btn { color: var(--black); background: #fff; border: 2px solid var(--black); }
.formcard button.dd-btn:focus-visible, .formcard button.dd-btn[aria-expanded=true] { border-color: var(--black); box-shadow: 0 0 0 1px var(--black); outline: none; }
.dd-list.light { background: #fff; border-color: var(--black); }
.dd-list.light li { color: var(--black); }
.dd-list.light li[aria-selected=true] { color: var(--red); }
/* date.js: the calendar that replaces the browser's date picker, about twice its size */
html input.dt-native { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.cal { position: fixed; z-index: 60; width: min(456px, calc(100vw - 32px)); padding: 16px; display: grid; gap: 10px; background: var(--black); color: var(--bone); border: 2px solid var(--bone); box-shadow: var(--hs-red); }
.cal-head { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr) 48px; gap: 8px; align-items: center; }
.cal-head .dd-btn { min-height: 48px; font-size: 15px; }
.cal .cal-nav { min-height: 48px; padding: 0; font: 400 24px/1 var(--mono); }
.cal-week, .cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-week span { text-align: center; font: 400 11px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase; opacity: .6; padding: 4px 0; }
.cal-days button { aspect-ratio: 1; min-height: 0; padding: 0; font: 400 17px/1 var(--mono); border: 2px solid transparent; color: inherit; }
.cal-days button.today { border-color: currentColor; }
.cal-days button[data-active] { background: rgba(242, 240, 232, .14); }
.cal-days button[aria-pressed=true] { background: var(--red); border-color: var(--red); color: var(--bone); }
.cal-days button:hover:not(:disabled) { background: var(--bone); color: var(--black); border-color: var(--bone); }
.cal-days button:disabled { opacity: .25; cursor: not-allowed; }
.cal.light { background: var(--bone); color: var(--black); border-color: var(--black); } /* the colour of the light page sections behind the white cards */
.cal.light .cal-nav, .cal.light .dd-btn { color: var(--black); border-color: var(--black); background: #fff; }
.cal.light .cal-nav:hover { background: var(--black); color: var(--bone); }
.cal.light .dd-btn:hover:not(:disabled), .cal.light .dd-btn[aria-expanded=true], .cal.light .dd-btn:focus-visible { background: #fff; color: var(--black); border-color: var(--black); box-shadow: 0 0 0 1px var(--black); }
.cal.light .cal-days button[data-active] { background: rgba(12, 12, 10, .08); }
.cal.light .cal-days button:hover:not(:disabled) { background: var(--black); color: var(--bone); border-color: var(--black); }
.cal.light .cal-days button[aria-pressed=true] { background: var(--red); border-color: var(--red); color: var(--bone); }
.dd-list.light li[data-active] { background: var(--black); color: #fff; }
.card button.dd-btn { min-height: 38px; font-size: 13px; }
.formcard button.dd-btn:hover:not(:disabled), .card button.dd-btn:hover:not(:disabled) { background: #fff; color: var(--black); border-color: var(--black); }
.formcard .muted { color: rgba(12, 12, 10, .7); }
.formcard a:not(.btn):not(.gbtn) { color: var(--red); text-decoration: underline; }
dialog button[value=ok]:focus-visible { outline: none; } /* the dialog focuses this button by itself, which drew a yellow frame around it */

/* ---------- control room: everything on one screen ---------- */
.inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.inline label { flex: 1; min-width: 150px; }
.inline label:nth-of-type(2) { flex: 0 0 150px; min-width: 0; }
.linkbar { display: flex; gap: 16px; align-items: end; }
.linkbar p { flex: 1; }
.linkbar label { width: 150px; }
.reports { display: flex; gap: 8px; flex-wrap: wrap; }
.reports .btn, .reports button { min-height: 38px; padding: 0 14px; font-size: 12px; }
.squadbox { padding: 16px; }
#salesPanel { padding: 14px 20px; gap: 6px; }
#salesPanel .sales li { padding: 5px 0; }
@media (min-width: 1001px) {
  /* a console, not a long page: the columns fit the screen and any long list scrolls inside its own column */
  body[data-admin] .strip { padding: 4px 24px; }
  body[data-admin] .nav { padding: 8px 24px; }
  body[data-admin] .control { height: calc(calc(100dvh / var(--z)) - var(--head, 86px)); padding: 14px 24px 92px; gap: 20px; align-items: stretch; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  body[data-admin] .control > .stack { position: relative; /* hidden selects are absolutely placed: keep them inside the scrolling column */ min-height: 0; overflow: auto; align-content: start; grid-auto-rows: max-content; gap: 14px; scrollbar-width: thin; }
  body[data-admin] .control { grid-template-rows: auto minmax(0, 1fr); }
  body[data-admin][data-role=team] .control { grid-template-rows: minmax(0, 1fr); }
  body[data-admin] .control > .tabs { grid-column: 1 / -1; } /* one bar across the top: it stays put when Setup hides the live column */
  body[data-admin] .plist { max-height: none; }
  body[data-admin] .lefty .hero .hero-grid { padding: 12px 16px; gap: 16px; }
  body[data-admin] .lefty .hero .h1 { font-size: clamp(28px, 3vw, 46px); }
  body[data-admin] .lefty .hero .pname { font-size: clamp(24px, 2.8vw, 44px); }
  body[data-admin] .lefty .hero .k { font-size: 10px; }
  body[data-admin] .lefty .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  body[data-admin] .lefty .hero .hero-left, body[data-admin] .lefty .hero .hero-right { min-width: 0; }
  body[data-admin] .hud { padding: 22px 18px 14px; gap: 6px; }
  body[data-admin] .hud .time { font-size: clamp(30px, 3.4vw, 46px); }
  body[data-admin] .hud .bid { font-size: clamp(30px, 3.6vw, 48px); }
  body[data-admin] .hud .who { font-size: 16px; padding-left: 10px; }
  body[data-admin] .lefty .panel { padding: 16px; gap: 10px; }
  body[data-admin] .tile { min-height: 84px; padding: 10px 12px; }
  body[data-admin] .tile .amt { font-size: 22px; }
  body[data-admin] .bidbtns { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
}


/* sign-up cards: compact enough that two fit in the right column */
body[data-admin] .reg { gap: 14px; }
body[data-admin] .reg .art { min-height: 200px; }
body[data-admin] .reg .pc-body { gap: 8px; padding: 4px 4px 4px 0; }
body[data-admin] .reg .pc-name { font-size: clamp(17px, 1.5vw, 22px); }
body[data-admin] .reg .pc-phone { font-size: 13px; }
body[data-admin] .reg .fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 0; }
body[data-admin] .reg .fields label { font-size: 10px; }
body[data-admin] .reg .acts button { min-height: 42px; }

/* Setup: its own full-width view. The live column steps aside; the tabs and the bottom bar stay. */
body[data-setup] .lefty { display: none; }
body[data-setup] .control { grid-template-columns: minmax(0, 1fr); }
.tabs #backLive { margin-left: auto; min-height: 40px; align-self: center; white-space: nowrap; padding: 0 16px; font: 400 12px/1 var(--mono); letter-spacing: .1em; color: var(--bone); background: var(--red); border: 1px solid var(--red); }
.tabs #backLive:hover { background: var(--red); color: var(--bone); filter: brightness(1.15); }
.rulesform { display: grid; gap: 0; }
.rulesform .sec { display: grid; grid-template-columns: minmax(170px, 250px) minmax(0, 1fr); gap: 12px 32px; padding: 22px 0; border-top: 1px solid var(--hl); }
.rulesform .sec:first-child { border-top: 0; padding-top: 4px; }
.rulesform .sec-title h3 { font: 400 17px/1.2 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.rulesform .sec-title p { margin-top: 6px; font-size: 13px; color: rgba(242, 240, 232, .62); }
.rulesform .sec-body { display: grid; gap: 14px; min-width: 0; align-content: start; }
.rulesform .cols2, .rulesform .cols3, .rulesform .cols5 { display: grid; gap: 12px; }
.rulesform .cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rulesform .cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rulesform .cols5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rulesform label { font: 400 13px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: rgba(242, 240, 232, .85); }
.rulesform input, .rulesform button.dd-btn { min-height: 44px; font-size: 15px; }
.rulesform .note { font-size: 12px; color: rgba(242, 240, 232, .55); }
.rulesform .stepsbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 6px 6px 6px 14px; border: 1px solid rgba(242, 240, 232, .35); font-size: 14px; }
.rulesform .stepsbar button { min-height: 40px; flex: none; }
.rulesform .steps { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.rulesform .steps > p { grid-column: 1 / -1; }
.rulesform .tier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rulesform .paybox { display: grid; gap: 14px; padding: 14px; border: 1px solid var(--hl); background: rgba(242, 240, 232, .03); }
.rulesform .csv summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; padding: 0 14px; border: 1px solid rgba(242, 240, 232, .35); font: 400 14px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--bone); }
.rulesform .csv[open] { display: grid; gap: 10px; }
.rulesform textarea { font-size: 13px; }
.savebar { padding-top: 18px; border-top: 1px solid var(--hl); }
.savebar button { width: 100%; min-height: 52px; font-size: 16px; }
@media (min-width: 1001px) { .savebar { position: sticky; bottom: 0; z-index: 2; background: var(--black); padding-bottom: 6px; } } /* page-scroll layouts have the fixed action bar below, so only the desktop column pins it */
@media (max-width: 1100px) { .rulesform .cols5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .rulesform .sec { grid-template-columns: minmax(0, 1fr); } .rulesform .cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rulesform .cols2, .rulesform .cols3, .rulesform .steps { grid-template-columns: minmax(0, 1fr); } .rulesform .cols5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the lot on the control screen: a photo you can actually see */
@media (min-width: 1001px) {
  body[data-admin] .lefty .hero .hero-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; }
  body[data-admin] .lefty .lot { gap: 16px; align-items: center; }
  body[data-admin] .lefty .lot .photo { width: auto; height: clamp(190px, calc(31vh / var(--z)), 300px); aspect-ratio: 3 / 4; max-width: 50%; font-size: 48px; }
  body[data-admin] .lefty .pname { transform: none; font-size: clamp(22px, 2.4vw, 40px); }
  body[data-admin] .hud .time { font-size: clamp(26px, 2.6vw, 38px); }
  body[data-admin] .hud .bid { font-size: clamp(26px, 2.8vw, 40px); }
}

@media (min-width: 1001px) {
  body[data-admin] .lefty .lot .photo { height: clamp(170px, calc(27vh / var(--z)), 300px); }
  body[data-admin] .lefty #bidPanel .bidhead { align-items: end; }
  body[data-admin] .lefty #bidPanel h2 { font-size: 18px; }
  body[data-admin] .lefty #bidPanel .bidhead label { width: 200px; font-size: 10px; }
  body[data-admin] .lefty #bidPanel .bidhead input { min-height: 38px; }
  body[data-admin] .tile { min-height: 0; gap: 2px; padding: 8px 12px; }
  body[data-admin] .tile b { font-size: 16px; }
  body[data-admin] .tile .amt { font-size: 21px; }
  body[data-admin] .tile .why { font-size: 11px; }
}

.photo svg { width: 52%; height: auto; fill: currentColor; opacity: .3; }

/* views with only one column use the whole width; phones get a real photo */
@media (min-width: 1001px) {
  body[data-admin][data-role=team] .control, body[data-admin][data-role=verifier] .control { grid-template-columns: minmax(0, 1fr); }
  body[data-admin][data-role=team] .lefty { max-width: 760px; margin: 0 auto; width: 100%; }
}
@media (max-width: 1000px) {
  body[data-admin] .lefty .lot { flex-wrap: nowrap; gap: 12px; }
  body[data-admin] .lefty .lot .photo { width: min(36vw, 180px); height: auto; max-width: none; aspect-ratio: 3 / 4; font-size: 40px; }
  body[data-admin] .lefty .pname { flex: 1 1 0; flex-basis: 0; min-width: 0; font-size: clamp(18px, 5.5vw, 30px); }
}

.squads .hint { grid-column: 1 / -1; } /* the empty message runs the full width of the grid */

#signout { margin-left: 12px; } /* last in the header, so it sits at the far right, a little apart */

/* each bid tile shows how much of the team's purse is left, as on the public screen */
.tile .pbar { display: block; width: 100%; height: 4px; margin-top: 5px; background: rgba(242, 240, 232, .15); }
.tile .pbar b { display: block; height: 100%; background: var(--bone); }
.tile.lead .pbar b { background: var(--red); }
.tile:hover:not(:disabled) .pbar b { background: var(--bone); }
body[data-admin] .tile small { letter-spacing: .03em; }
.qr { width: 200px; background: #fff; border: 2px solid var(--black); padding: 4px; }
.qr svg { display: block; width: 100%; height: auto; }
a.done, .btn.done { opacity: .45; cursor: default; pointer-events: none; }
dialog .help { max-height: calc(80vh / var(--z)); overflow: auto; }
dialog .help ol { display: grid; gap: 10px; padding-left: 20px; font-size: 15px; line-height: 1.45; }
label.check { display: flex; align-items: center; gap: 10px; font: 400 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
/* Our own checkbox: the browser's one drew a soft grey ring and a tinted tick. Square, solid border, red with a white tick when on. */
label.check input { appearance: none; flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; border: 2px solid var(--bone); border-radius: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.formcard label.check input { border-color: var(--black); background: #fff; }
label.check input:checked { background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23f2f0e8' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--red); }
label.check input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.gbtn[aria-disabled=true] { opacity: .45; cursor: not-allowed; }
label.check.nudge { animation: nudge .3s; } /* pressing Sign in before ticking shakes the box */
@keyframes nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
dialog.signin form { gap: 18px; }
dialog.signin label.check { text-transform: none; letter-spacing: 0; font: 400 14px/1.45 var(--body); align-items: flex-start; }
dialog.signin label.check a { color: var(--bone); }
dialog.tour { width: min(400px, calc(100vw - 32px)); margin: auto auto 24px 24px; } /* bottom left, so the tab being explained stays in view on the right */
dialog.tour::backdrop { background: rgba(0, 0, 0, .2); }
dialog .help .k { margin: 0; }
.gear { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 2px solid rgba(242, 240, 232, .6); transition: background-color .15s, color .15s, border-color .15s; color: var(--bone); flex: none; margin-left: auto; }
.gear + .gear { margin-left: calc(-1 * var(--gap, 0px)); border-left-width: 0; } /* the light-mode and settings icons sit flush as a pair: the second has no left border, so the shared edge is drawn once, not as two translucent layers */
.gear:hover { background: var(--bone); color: var(--black); border-color: var(--bone); }
details.where { border: 1px solid rgba(12, 12, 10, .25); padding: 10px 12px; font-size: 14px; }
details.where summary { cursor: pointer; font: 400 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
details.where ul { padding-left: 18px; margin: 8px 0; display: grid; gap: 6px; line-height: 1.4; }
.accts { list-style: none; display: grid; gap: 10px; padding: 0; margin: 0 0 16px; }
.accts li { display: grid; gap: 8px; padding: 10px; border: 1px solid rgba(12, 12, 10, .25); }
.accts .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.accts .btn, .accts .danger { min-height: 36px; padding: 0 12px; font-size: 12px; }
.hook { display: grid; gap: 10px; padding: 12px; border: 2px solid var(--black); margin-bottom: 16px; }
.legalbar { padding: 14px 32px; font: 400 11px/1.6 var(--mono); letter-spacing: .08em; color: rgba(242, 240, 232, .6); background: var(--black); border-top: 1px solid var(--hl); }
.legalbar a { color: inherit; text-decoration: underline; }
main.legal { max-width: 760px; margin: 32px auto; padding: 32px 16px 64px; background: var(--bone); color: var(--black); }
main.legal h1 { font: 400 clamp(30px, 5vw, 48px)/1 var(--display); text-transform: uppercase; margin-bottom: 8px; }
main.legal h2 { font: 400 20px/1.2 var(--display); text-transform: uppercase; margin: 28px 0 8px; }
main.legal p, main.legal li { line-height: 1.6; }
main.legal ul, main.legal ol { padding-left: 22px; display: grid; gap: 8px; }
main.legal a { color: var(--red); }
.formcard label.check { text-transform: none; letter-spacing: 0; font: 400 14px/1.4 var(--body); align-items: flex-start; }
.formcard label.check .field-err { display: block; }

/* Settings: the heading runs across the top and the cards fill the width below it (profile on the left, tips and payments stacked beside it). */
.hero-grid.settings { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 24px; padding-top: 32px; padding-bottom: 40px; }
.hero-grid.settings .lead-p { max-width: 70ch; }
.settings-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.settings-cards > :has(#box), .settings-cards > :has(#tips) { grid-column: 1; }
.settings-cards #tips { padding: 14px 20px; }
.formcard .row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
/* Where the player pays: the amount and who receives it are the biggest thing in the card */
.paybox { display: grid; gap: 6px; padding: 16px 18px; background: #fff; border: 2px solid var(--black); }
.paybox .amt { font: 400 40px/1 var(--display); }
.paybox b { font-size: 16px; }
.settings-cards > :has(#rzp) { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 1000px) { .settings-cards { grid-template-columns: minmax(0, 1fr); } .settings-cards > .card-slot { grid-column: auto; grid-row: auto; } }
@media (min-width: 1001px) {
  .hero-grid.settings .hero-left { grid-template-columns: auto minmax(0, 1fr); column-gap: 48px; align-items: end; }
  .hero-grid.settings .hero-left .k { grid-column: 1 / -1; }
  .hero-grid.settings .hero-left .h1 { font-size: clamp(40px, 4.4vw, 64px); }
}
@media (max-width: 700px) { body[data-setup] .tabs { flex-wrap: wrap; } .tabs #backLive { flex: 1 0 100%; margin: 8px 0 10px; min-height: 44px; } }
/* an error toast is light with a red edge, so it never melts into the red Save and Sold buttons it floats over */
#toast:not(.ok) { background: var(--bone); color: var(--black); border: 0; border-left: 6px solid var(--red); box-shadow: 0 0 0 1px var(--black), 0 10px 30px rgba(0, 0, 0, .6); }
@media (max-width: 1000px) { body[data-admin] .control > .lefty { order: 1; } body[data-admin] .control > .tabs { order: 2; } body[data-admin] .control > .righty { order: 3; } } /* on a phone the tabs still sit under the live player */
@media (min-width: 1001px) and (max-width: 1279px) { body[data-admin] .control { padding-bottom: 156px; } } /* the action bar wraps to two rows here, so the pinned Save setup button needs more room above it */

/* the superadmin's admin list: who on the left, credits and Remove together on the right (they wrap under the name on a narrow card) */
.admin-row { flex-wrap: wrap; align-items: center; }
.admin-who { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.admin-acts { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }
.stepper { display: inline-flex; align-items: stretch; border: 2px solid var(--black); background: #fff; }
.stepper button { min-height: 34px; min-width: 34px; padding: 0; border: 0 !important; background: transparent; font-size: 18px; line-height: 1; }
.stepper button:disabled { opacity: .3; }
.stepper output { display: grid; place-items: center; min-width: 38px; padding: 0 6px; font: 500 15px/1 var(--mono); border-inline: 2px solid var(--black); }
.admin-acts button.small { min-height: 34px; padding: 0 12px; font-size: 12px; }