:root {
  --bg: #181206; --bg-2: #221a0c;
  --panel: rgba(255,245,225,0.055); --panel-2: rgba(255,245,225,0.1); --brd: rgba(255,238,205,0.13);
  --txt: #f4ecd9; --txt-dim: #b7a986; --txt-mute: #82745a;
  --accent: #f3c24a; --accent-2: #e88f33; --glow: rgba(243,194,74,0.6);
  --ink: #2c1e05;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { font-family: "Noto Sans TC", system-ui, sans-serif; background: var(--bg); color: var(--txt);
  -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; }
button { font-family: inherit; cursor: pointer; }
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(55% 40% at 85% 0%, rgba(232,143,51,.16), transparent 70%),
    radial-gradient(50% 38% at 8% 2%, rgba(243,194,74,.14), transparent 70%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 45%); }

/* ---- top controls ---- */
.top { position: relative; z-index: 10; padding: calc(8px + var(--safe-t)) 12px 8px;
  background: rgba(28,20,8,.86); backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--brd); }
.topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.brand { display: flex; align-items: center; gap: 8px; flex: none; }
.logo-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 12px var(--glow); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.brand-tx { font-family: "Noto Sans TC",sans-serif; font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.brand-tx b { color: var(--accent); }
.searchwrap { position: relative; flex: 1; min-width: 0; }
.s-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--txt-mute); pointer-events: none; }
#search { width: 100%; padding: 10px 34px 10px 34px; background: var(--panel); border: 1px solid var(--brd);
  border-radius: 11px; color: var(--txt); font-size: 16px; outline: none; transition: border-color .2s, box-shadow .2s; }
#search:focus { border-color: rgba(243,194,74,.55); box-shadow: 0 0 0 3px rgba(243,194,74,.13); }
#search::placeholder { color: var(--txt-mute); }
.s-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: var(--panel-2);
  border: 0; color: var(--txt-dim); width: 24px; height: 24px; border-radius: 50%; font-size: 16px; line-height: 1; }

/* filter trigger (always visible) */
.filter-trigger { display: flex; align-items: center; gap: 9px; width: 100%;
  background: var(--panel); border: 1px solid var(--brd); border-radius: 12px; padding: 11px 14px; color: var(--txt); }
.filter-trigger .ft-ico { width: 18px; height: 18px; color: var(--accent); flex: none; }
.ft-label { font-size: 14.5px; font-weight: 700; flex: 1; text-align: left; }
.ft-count { font-size: 12.5px; font-family: "JetBrains Mono",monospace; font-weight: 700; color: var(--accent); }
.ft-caret { width: 18px; height: 18px; color: var(--txt-dim); flex: none; }

.selected-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.selchip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: #2c1e05; border: 0;
  background: linear-gradient(100deg, var(--accent), var(--accent-2)); }
.selchip .x { font-size: 14px; opacity: .65; }

.mode-toggle { display: inline-flex; background: var(--panel); border: 1px solid var(--brd); border-radius: 9px; padding: 2px; }
.mode-toggle button { background: transparent; border: 0; color: var(--txt-dim); font-size: 13px; font-weight: 600; padding: 6px 13px; border-radius: 7px; }
.mode-toggle button.active { background: rgba(243,194,74,.16); color: var(--accent); }

/* drawer */
.scrim { position: fixed; inset: 0; z-index: 24; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
.drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 26;
  background: rgba(27,20,9,.97); backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid var(--brd); border-radius: 20px 20px 0 0; box-shadow: 0 -16px 50px -20px rgba(0,0,0,.85);
  transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  max-height: 80vh; display: flex; flex-direction: column; }
.drawer.open { transform: translateY(0); }
.drawer-grip { display: block; width: 44px; height: 5px; border-radius: 4px; background: rgba(255,246,230,.22);
  margin: 10px auto 4px; border: 0; padding: 0; }
.drawer-head { display: flex; align-items: baseline; gap: 9px; padding: 6px 16px 12px; border-bottom: 1px solid var(--brd); }
.dh-title { font-size: 15px; font-weight: 700; margin-right: auto; }
.dh-title i { font-style: normal; color: var(--accent); font-size: 12.5px; font-family: "JetBrains Mono",monospace; }
.dh-hint { font-size: 12px; color: var(--txt-mute); }
.drawer-note { margin: 10px 16px 0; padding: 10px 12px; font-size: 12.5px; line-height: 1.55; color: var(--txt-dim);
  background: rgba(243,194,74,.07); border: 1px solid rgba(243,194,74,.2); border-radius: 11px; }
.drawer-note b { color: var(--accent); font-weight: 700; }
.drawer-body { overflow-y: auto; padding: 14px 16px 14px; -webkit-overflow-scrolling: touch; }
.drawer-foot { padding: 12px 16px calc(14px + var(--safe-b)); border-top: 1px solid var(--brd); }
.dh-done { width: 100%; background: linear-gradient(100deg, var(--accent), var(--accent-2)); border: 0; color: #2c1e05;
  font-size: 15px; font-weight: 700; padding: 13px; border-radius: 12px; box-shadow: 0 4px 16px rgba(243,194,74,.3); }
.dh-done span { font-family: "JetBrains Mono",monospace; opacity: .7; margin-left: 6px; }
.chip-grid { display: flex; flex-direction: column; gap: 14px; }
.cgblock .cglabel { font-size: 11px; color: var(--txt-mute); font-weight: 700; letter-spacing: .06em; margin-bottom: 8px; }
.cgchips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 9px 13px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--txt-dim); background: var(--panel); border: 1px solid var(--brd); transition: all .15s; }
.chip .n { font-family: "JetBrains Mono",monospace; font-size: 10.5px; color: var(--txt-mute); }
.chip.on { color: #2c1e05; font-weight: 700; background: linear-gradient(100deg, var(--accent), var(--accent-2)); border-color: transparent; box-shadow: 0 3px 12px rgba(243,194,74,.32); }
.chip.on .n { color: rgba(0,0,0,.5); }
.chip[data-empty="1"] { opacity: .4; }

/* ---- map ---- */
.map-view { position: relative; z-index: 2; flex: 1; min-height: 0; overflow: hidden; }
.map-viewport { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; background: #16100a; }
.map-viewport:active { cursor: grabbing; }
.map-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
#mapSvg { display: block; overflow: visible; }

/* redrawn booth cells */
.zone-label { fill: var(--txt-mute); font-family: "Noto Sans TC",sans-serif; font-weight: 700; letter-spacing: .1em; }
.cell { cursor: pointer; transition: opacity .25s; }
.cell-box { fill: rgba(255,238,205,0.07); stroke: rgba(255,238,205,0.28); stroke-width: 1.2; transition: fill .2s, stroke .2s; }
.cell-code { fill: var(--accent); font-family: "JetBrains Mono",monospace; font-weight: 700; pointer-events: none; }
.cell-name { fill: var(--txt-dim); font-family: "Noto Sans TC",sans-serif; font-weight: 500; pointer-events: none; }
.cell.hit .cell-name, .cell.sel .cell-name { fill: #2c1e05; }
.cell:hover .cell-box { fill: rgba(255,238,205,0.13); }
.cell.dim { opacity: .3; }
.cell.hit .cell-box { fill: var(--accent); stroke: #fff6e2; stroke-width: 2; filter: drop-shadow(0 0 7px var(--glow)); }
.cell.hit .cell-code { fill: #2c1e05; }
.cell.sel .cell-box { fill: var(--accent-2); stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 0 9px rgba(232,143,51,.8)); }
.cell.sel .cell-code { fill: #2c1e05; }

.map-hint { position: absolute; left: 50%; transform: translateX(-50%); top: 10px; z-index: 3;
  font-size: 12px; color: var(--txt-dim); background: rgba(31,23,10,.78); backdrop-filter: blur(8px);
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--brd); white-space: nowrap; transition: opacity .5s; }

/* ---- info card ---- */
.info-card { position: fixed; left: 14px; right: 14px; bottom: calc(64px + var(--safe-b)); z-index: 30;
  background: rgba(33,24,11,.95); backdrop-filter: blur(16px); border: 1px solid rgba(243,194,74,.4);
  border-radius: 16px; padding: 15px 16px 14px; box-shadow: 0 18px 50px -16px rgba(0,0,0,.75);
  animation: cardUp .22s ease; max-width: 520px; margin: 0 auto; }
@keyframes cardUp { from { transform: translateY(14px); opacity: 0 } to { transform: none; opacity: 1 } }
.info-close { position: absolute; right: 9px; top: 9px; background: var(--panel-2); border: 0; color: var(--txt-dim); width: 28px; height: 28px; border-radius: 50%; font-size: 17px; }
.info-booth { font-family: "JetBrains Mono",monospace; font-weight: 700; color: var(--accent); font-size: 13px; }
.info-name { font-size: 18px; font-weight: 700; margin: 3px 0 10px; padding-right: 30px; }
.info-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 12px; padding: 4px 10px; border-radius: 7px; background: rgba(255,246,230,.06); color: var(--txt-dim); }
.tag.on { background: rgba(243,194,74,.18); color: var(--accent); }
.tag.none { font-style: italic; color: var(--txt-mute); }

/* ---- sponsor credit ---- */
.credit { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + var(--safe-b)); z-index: 16;
  display: flex; align-items: center; gap: 7px; background: rgba(31,23,10,.85); backdrop-filter: blur(10px);
  border: 1px solid var(--brd); border-radius: 999px; padding: 6px 13px; font-size: 12.5px; box-shadow: 0 6px 20px -8px rgba(0,0,0,.6); }
.credit-by { color: var(--txt-mute); font-weight: 500; }
.credit-amp { color: var(--txt-mute); }
.credit-name { background: none; border: 0; padding: 2px 4px; font-size: 13.5px; font-weight: 700; color: var(--accent); font-family: inherit; border-bottom: 1px dashed rgba(243,194,74,.55); }
.credit-name:active { color: var(--accent-2); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }