:root { color-scheme:dark; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; color:#f3f2ed; }
* { box-sizing:border-box; } body { margin:0; background:transparent; }
[hidden] { display:none!important; }
#commerce-display { --accent:#efbf88; margin:20px; padding:24px; background:#1c201ff7; border-top:3px solid var(--accent); }
header { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid #545b55; }
header p { margin:0; }
#eyebrow { color:#b7bfb7; font-size:14px; font-weight:500; }
h1 { margin:4px 0 0; font-size:clamp(22px,2.5vw,36px); font-weight:650; line-height:1.15; letter-spacing:-.025em; overflow-wrap:anywhere; }
#board-count { flex-shrink:0; font:16px/1.3 ui-monospace,Consolas,monospace; color:#d2d8cf; }
#board-grid { display:grid; grid-template-columns:repeat(var(--columns,10),minmax(0,1fr)); gap:5px; }
.spots #board-grid,.teams #board-grid { grid-auto-rows:1fr; }
.spot { min-width:0; min-height:70px; border:1px solid #697268; background:#303832; padding:9px 4px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.spot strong { font-size:clamp(14px,1.8vw,28px); line-height:1.15; font-weight:650; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.spot small { display:block; font-size:11px; line-height:1.2; color:#c0c9be; margin-top:7px; overflow-wrap:anywhere; }
.spot.claimed { background:#1c201f; border-color:#697268; }
.spot.claimed strong { color:#b0b9ac; }
.spot.revealed { background:#eadfcb; color:#282b25; border-color:#eadfcb; }
.spot.revealed small { color:#464c40; }
.spot .result { font-size:clamp(12px,1vw,17px); font-weight:600; }
#board-legend { margin-top:18px; color:#bec7ba; font-size:13px; }
.teams { --accent:#9cc5b8!important; }
.teams .spot { min-height:100px; padding:14px 8px; border-left:3px solid #95b7a7; text-align:left; align-items:flex-start; }
.teams .spot.claimed { border-left-color:#5d685d; }
.teams .spot strong { font-size:clamp(16px,2vw,24px); }
.sales #board-grid { grid-template-columns:1fr; gap:0; }
.sale { min-width:0; border-bottom:1px solid #545b55; padding:18px 0; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.sale:last-child { border-bottom:0; }
.sale strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:clamp(18px,2.5vw,26px); font-weight:600; line-height:1.2; overflow-wrap:anywhere; }
.sales:not(.wall):not(.ticker) { padding:20px; }
.sales:not(.wall):not(.ticker) header { margin-bottom:0; }
.sales:not(.wall):not(.ticker) .sale { padding:13px 0; }
.sale small { display:block; color:#bcc6b9; margin-top:7px; font-size:13px; }
.sale .price { color:var(--accent); font-weight:600; font-size:clamp(20px,2.7vw,30px); white-space:nowrap; font-variant-numeric:tabular-nums; }
.wall #board-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 24px; }
.wall .sale { display:block; min-height:145px; }
.wall .sale:last-child { border-bottom:1px solid #545b55; }
.wall .price { margin-top:16px; display:block; }
.ticker header { margin-bottom:0; } .ticker h1 { font-size:24px; }
.ticker #board-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 24px; }
.ticker .sale { padding:16px 0 0; display:block; border:0; }
.ticker .sale strong { font-size:20px; } .ticker .price { font-size:24px; display:block; margin-top:10px; }
body.demo { background:#3b413b; min-height:100vh; padding:20px 0 24px; }
#demo-label { text-align:center; color:#e0e4da; font-size:13px; padding:0 20px; }
@media(max-width:700px) { #commerce-display { margin:10px; padding:16px; } header { align-items:flex-start; flex-direction:column; gap:10px; } #board-grid { gap:4px; grid-template-columns:repeat(var(--mobile-columns,5),minmax(0,1fr)); } .spot { min-height:68px; } .wall #board-grid,.ticker #board-grid { grid-template-columns:1fr; } .sale { padding:14px 0; flex-wrap:wrap; } .spot small { font-size:10px; } }
@media(prefers-reduced-motion:no-preference) { .revealed { animation:reveal .2s ease-out; } @keyframes reveal { from { opacity:.5; } to { opacity:1; } } }