/* ---------- tokens ----------
   Two halves on purpose: the chrome (header, register, panels) is 2005 gold-and-paper;
   the map keeps the dark, lime-accented city. */
:root{
  --gold-1:#f3c942; --gold-2:#d8a21c; --gold-ink:#3a2a05; --gold-line:#a9780e;
  --paper:#f7f1dd; --paper-2:#efe5c6; --paper-3:#e6d9b2; --rule:#d2be86; --ink-p:#3a2a05; --ink-soft:#7a6537;
  --red:#b31b1b; --blue:#1a3d8f;
  --ink:#0f1410; --panel:#161c17; --line:#2a352c; --lime:#c8f55a; --lime-ink:#1b2a00; --text:#e9efe4; --muted:#8a9a85;
  --sky:#b9c4b8; --grass:#5f7a52; --road:#2b2e2b;
  --font-ui:Verdana,Geneva,"DejaVu Sans",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --font-pixel:"Press Start 2P",monospace;
  --side-w:320px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink-p);font-family:var(--font-ui);font-size:12px;line-height:1.45;
  display:flex;flex-direction:column;min-height:100vh;
}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.hidden{display:none!important}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ---------- 2005 header, kept faithful ---------- */
.topbar{
  display:flex;align-items:center;gap:22px;padding:6px 14px;
  background:linear-gradient(var(--gold-1),var(--gold-2));
  border-bottom:2px solid var(--gold-line);color:var(--gold-ink);
}
.logo{
  font-family:var(--font-pixel);font-size:13px;text-decoration:none;color:var(--gold-ink);
  text-shadow:1px 1px 0 #fff3b0;white-space:nowrap;
}
.logo sup{font-size:7px;margin-left:2px}
.tagline{margin:0;font-size:12px;font-weight:700;display:flex;gap:8px;flex:1;white-space:nowrap;overflow:hidden}
.tagline .sep{opacity:.6}
.sold-badge{
  display:flex;align-items:baseline;gap:6px;background:var(--red);color:#fff;border:2px solid #fff;
  padding:3px 10px;transform:rotate(-2deg);box-shadow:2px 2px 0 rgba(0,0,0,.35);
}
.sold-badge small{font-size:9px;text-transform:uppercase;letter-spacing:.04em}
.sold-badge strong{font-family:var(--font-mono);font-size:15px}
.sold-badge .of{font-size:9px;opacity:.85}

.navstrip{
  display:flex;flex-wrap:wrap;background:#fff8dc;border-bottom:1px solid var(--gold-line);
  font-size:11px;font-weight:700;padding:0 8px;
}
.navstrip a{color:var(--blue);text-decoration:none;padding:4px 10px;border-right:1px solid #d9c68a}
.navstrip a:last-child{border-right:0}
.navstrip a:hover,.navstrip a.active{text-decoration:underline;color:#000}

/* ---------- app frame ---------- */
.app{flex:1;display:flex;min-height:0}
.side{
  width:var(--side-w);flex:none;background:var(--paper);border-right:2px solid var(--gold-line);
  display:flex;flex-direction:column;min-height:0;
}
.panel{display:flex;flex-direction:column;min-height:0;flex:1}

/* the register plaque */
.plaque{padding:12px 14px 12px;border-bottom:1px solid var(--rule);background:var(--paper-2)}
.plaque h2{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.plaque-stats{margin:0 0 10px;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.plaque-stats div{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dotted var(--rule);padding-bottom:2px}
.plaque-stats dt{font-size:10px;color:var(--ink-soft)}
.plaque-stats dd{margin:0;font-family:var(--font-mono);font-size:12px;font-weight:600}
.btn-claim{
  display:block;width:100%;background:var(--red);color:#fff;font-weight:700;padding:9px 12px;font-size:12px;
  border:2px solid #fff;box-shadow:2px 2px 0 rgba(0,0,0,.3);text-align:center;
}
.btn-claim:hover{background:#c92020}
.btn-claim:active{transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(0,0,0,.3)}

.deed{margin:0;padding:7px 14px;border-bottom:1px solid var(--rule);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deed-k{color:var(--ink-soft)}
.deed b{font-weight:700}
.deed-when{font-family:var(--font-mono);font-size:10px;color:var(--ink-soft)}

.tabs{display:flex;border-bottom:1px solid var(--rule);background:var(--paper)}
.tabs button{flex:1;padding:6px 4px;font-size:10px;font-weight:700;color:var(--blue);text-decoration:underline;border-right:1px solid var(--rule)}
.tabs button:last-child{border-right:0}
.tabs button[aria-selected=true]{color:var(--ink-p);text-decoration:none;background:var(--paper-3)}

.board{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:var(--rule) transparent;background:#fbf7ea}
.row{
  display:grid;grid-template-columns:34px 30px 1fr auto;gap:8px;align-items:center;padding:6px 10px 6px 8px;border-bottom:1px solid var(--rule);
  cursor:pointer;
}
.row:nth-child(even){background:var(--paper)}
.row:hover,.row.hi{background:#fff3b0}
.row .no{font-family:var(--font-mono);font-size:10px;color:var(--ink-soft)}
.row .thumb{width:30px;height:30px;border:1px solid rgba(0,0,0,.35);display:grid;place-items:center;font-family:var(--font-pixel);font-size:7px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.6);overflow:hidden}
.row .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.row h3{margin:0;font-size:11px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .meta{font-family:var(--font-mono);font-size:9px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .val{font-family:var(--font-mono);font-size:11px;font-weight:600;text-align:right}
.side-foot{display:flex;border-top:1px solid var(--rule);background:var(--paper-2)}
.side-foot .linkish{flex:1;padding:8px;font-size:11px;font-weight:700;color:var(--blue);text-decoration:underline;border-right:1px solid var(--rule)}
.side-foot .linkish:last-child{border-right:0}
.side-foot .linkish:hover{color:#000}

/* ---------- claim / building panel ---------- */
.panel-bar{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--rule);background:var(--paper-2)}
.panel-bar h2{margin:0;flex:1;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.icon-btn{
  width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--rule);background:#fff;font-size:16px;line-height:1;color:var(--ink-p);
}
.icon-btn:hover{border-color:var(--ink-p)}
.panel-scroll{overflow-y:auto;flex:1;padding:14px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin}
.plot-id{display:flex;align-items:center;gap:12px}
.plot-id .badge{width:48px;height:48px;flex:none;background:#fff;display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;border:1px solid rgba(0,0,0,.35);overflow:hidden;padding:0}
.plot-id .badge img{width:100%;height:100%;object-fit:cover;display:block}
.plot-id small{display:block;color:var(--red);font-size:10px;font-weight:700}
.plot-id h3{margin:2px 0 0;font-size:18px;line-height:1.1}
.plot-id p{margin:2px 0 0;font-size:10px;color:var(--ink-soft)}
.card{background:var(--paper-2);border:1px solid var(--rule);padding:12px}
.card small{display:block;color:var(--ink-soft);font-size:10px;margin-bottom:2px}
.price{font-family:var(--font-mono);font-size:30px;color:var(--red);line-height:1}
.price-break{font-family:var(--font-mono);font-size:10px;color:var(--ink-soft);margin-top:6px}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:11px;color:var(--ink-soft)}
.field input[type=text],.field input[type=url],.field textarea{
  background:#fff;border:1px solid var(--rule);color:var(--ink-p);padding:8px;font:inherit;font-size:12px;
}
.field textarea{resize:vertical;min-height:52px}
.field input:focus,.field textarea:focus{border-color:var(--ink-p);outline:none}
.range{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}
.range input[type=range]{width:100%;accent-color:var(--red)}
.range output{font-family:var(--font-mono);font-size:11px;min-width:56px;text-align:right}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.swatches{display:flex;gap:6px;flex-wrap:wrap}
.swatches button{width:24px;height:24px;border:2px solid #fff;box-shadow:0 0 0 1px var(--rule)}
.swatches button[aria-pressed=true]{box-shadow:0 0 0 2px var(--ink-p)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--rule);background:#fff}
.facts div{padding:8px 10px;border-right:1px solid var(--rule)}
.facts div:last-child{border-right:0}
.facts small{display:block;color:var(--ink-soft);font-size:10px}
.facts b{font-family:var(--font-mono);font-size:12px}
.note{font-size:11px;color:var(--ink-soft);border-left:3px solid var(--gold-2);padding-left:10px;margin:0}
.note b{color:var(--ink-p)}
.imgpick{display:grid;grid-template-columns:72px 1fr;gap:10px;align-items:start}
.imgprev{width:72px;height:72px;background:#fff;border:1px solid var(--rule);overflow:hidden;display:grid;place-items:center}
.imgprev img{width:100%;height:100%;object-fit:cover;display:block}
.imgprev span{font-size:9px;color:var(--ink-soft);text-align:center;padding:6px;line-height:1.3}
.imgbtns{display:flex;flex-direction:column;gap:6px}
.imgbtns .btn-ghost{cursor:pointer}
.bundle-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.bundle-row figure{margin:0}
.bundle-row canvas{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.bundle-row figcaption{font-size:10px;color:var(--ink-soft);margin-top:4px}
.bundle-row figcaption b{display:block;color:var(--ink-p);font-family:var(--font-mono);font-size:10px;font-weight:600}
.btn-buy{
  display:flex;justify-content:space-between;align-items:center;background:var(--red);color:#fff;
  padding:12px 14px;font-weight:700;font-size:13px;border:2px solid #fff;box-shadow:2px 2px 0 rgba(0,0,0,.3);
}
.btn-buy:hover{background:#c92020}
.btn-buy:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn-buy .arrow{font-family:var(--font-mono)}
.btn-ghost{border:1px solid var(--rule);background:#fff;padding:9px 12px;font-weight:700;font-size:11px;text-align:center;text-decoration:none;display:block;color:var(--blue)}
.btn-ghost:hover{border-color:var(--ink-p);color:#000}
.err{color:var(--red);font-size:11px;margin:0}
.receipt{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);line-height:1.7;margin:0}
.receipt b{color:var(--ink-p)}

/* ---------- stage: the city keeps its own dark palette ---------- */
.stage{flex:1;position:relative;min-width:0;background:var(--sky);overflow:hidden}
.stage.pixels{background:#fff}
#canvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none}
#canvas.grab{cursor:grab}
#canvas.grabbing{cursor:grabbing}
.live{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--text);
  padding:5px 10px;border-radius:3px;font-family:var(--font-mono);font-size:11px;display:flex;gap:8px;align-items:center;
  border:1px solid var(--line);z-index:2;
}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}
.live .sep{color:var(--muted)}
.view-toggle{position:absolute;top:10px;left:10px;display:flex;background:var(--ink);border:1px solid var(--line);border-radius:3px;overflow:hidden;z-index:2}
.view-toggle button{padding:6px 12px;font-size:12px;font-weight:700;color:var(--muted)}
.view-toggle button[aria-selected=true]{background:var(--lime);color:var(--lime-ink)}
.rail{position:absolute;right:10px;bottom:34px;display:flex;flex-direction:column;gap:6px;z-index:2}
.rail .icon-btn{background:var(--ink);color:var(--text);border-color:var(--line);border-radius:3px}
.rail .icon-btn:hover{border-color:var(--lime);color:var(--lime)}
.rail .icon-btn[aria-pressed=true]{background:var(--lime);color:var(--lime-ink);border-color:var(--lime)}
.stage.pixels .rail .rot{display:none}
.tip{
  position:absolute;pointer-events:none;background:#fffbe6;color:#222;border:1px solid #777;padding:4px 7px;
  font-size:11px;max-width:240px;z-index:3;box-shadow:2px 2px 0 rgba(0,0,0,.25);
}
.tip b{display:block}
.tip .mono{display:block;margin-top:3px;font-family:var(--font-mono);font-size:10px;color:#555}
.status{
  position:absolute;left:0;right:0;bottom:0;padding:4px 10px;background:rgba(15,20,16,.85);color:var(--muted);
  font-family:var(--font-mono);font-size:10px;z-index:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.foot{
  padding:6px 14px;background:#fff8dc;color:#5a4a1a;border-top:1px solid var(--gold-line);
  font-size:10px;text-align:center;
}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(58,42,5,.55);display:grid;place-items:center;z-index:10;padding:20px}
.modal-box{width:min(560px,100%);max-height:85vh;background:var(--paper);border:2px solid var(--gold-line);display:flex;flex-direction:column}
.modal-body{padding:16px;overflow-y:auto;font-size:12px}
.modal-body h3{font-size:12px;margin:14px 0 4px}
.modal-body h3:first-child{margin-top:0}
.modal-body p{margin:0 0 8px;color:var(--ink-soft)}
.modal-body p b{color:var(--ink-p)}
.list{list-style:none;margin:0;padding:0;font-family:var(--font-mono);font-size:11px}
.list li{display:grid;grid-template-columns:52px 1fr auto;gap:10px;padding:6px 0;border-bottom:1px solid var(--rule);cursor:pointer}
.list li:hover{color:var(--blue)}
.list li span:last-child{color:var(--red)}

/* ---------- responsive ---------- */
.sheet-handle{display:none}
.row .who{min-width:0}

/* ---------- phones: the map fills the screen, the register is a bottom sheet ---------- */
@media (max-width:820px){
  html,body{height:100%;min-height:100dvh}
  body{min-height:100dvh}
  .tagline,.sold-badge .of,.foot,.status{display:none}
  .topbar{gap:10px;justify-content:space-between;padding:5px 10px}
  .sold-badge{padding:2px 8px}
  .sold-badge strong{font-size:13px}
  .navstrip{flex-wrap:wrap;justify-content:space-between;padding:0 4px}
  .navstrip a{flex:1 1 auto;text-align:center;white-space:nowrap;padding:6px 6px;font-size:10px;border-right:0}
  .logo{font-size:9px;min-width:0}
  .logo sup{display:none}
  .sold-badge{gap:4px}
  .sold-badge small{font-size:8px}
  .app{display:block;position:relative;flex:1;min-height:0}
  .stage{position:absolute;inset:0;min-height:0}
  .side{
    position:absolute;left:0;right:0;bottom:0;width:100%;height:72vh;max-height:none;
    border-right:0;border-top:2px solid var(--gold-line);
    transform:translateY(calc(100% - 52px));transition:transform .28s ease;
    box-shadow:0 -6px 18px rgba(0,0,0,.25);z-index:5;
  }
  .side.open{transform:none}
  @media (prefers-reduced-motion:reduce){.side{transition:none}}
  .sheet-handle{
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;height:52px;padding:0 14px;
    background:var(--paper-2);border-bottom:1px solid var(--rule);width:100%;text-align:left;font-weight:700;font-size:12px;
  }
  .sheet-handle .grip{width:36px;height:4px;border-radius:2px;background:var(--rule)}
  .sheet-handle strong{font-family:var(--font-mono);font-size:13px;color:var(--red)}
  .side.open .sheet-handle .sh-label::after{content:" (tap to close)";font-weight:400;color:var(--ink-soft)}
  .panel{height:calc(72vh - 52px)}
  .plaque{padding:10px 14px}
  .plaque-stats{gap:4px 10px}
  .board{-webkit-overflow-scrolling:touch}
  .row{padding:6px 10px 6px 8px}
  .view-toggle{top:8px;left:8px}
  .view-toggle button{padding:8px 12px}
  .live{left:auto;right:8px;top:8px;transform:none;font-size:10px;padding:4px 8px}
  .rail{right:8px;bottom:64px;gap:5px}
  .rail .icon-btn{width:36px;height:36px}
  .tip{max-width:200px;font-size:10px}
  .modal{padding:8px}
  .modal-box{max-height:92vh}
}
@media (max-width:360px){ .logo{font-size:8px} .sold-badge strong{font-size:12px} }
@media (max-width:820px) and (max-height:520px){ .side{height:85vh} .panel{height:calc(85vh - 52px)} }