:root {
  --accent: #ff4f1f;
  --accent-hi: #ff6a3d;
  --accent-soft: rgba(255, 79, 31, 0.16);
  --bg: #0b0b0b;
  --rail: #121212;
  --panel: #1b1b1b;
  --panel-2: #242424;
  --panel-3: #2e2e2e;
  --line: #333;
  --text: #f5f5f5;
  --muted: #9b9b9b;
  --ok: #3fd07a;
  --rail-w: 72px;
  --side-w: 340px;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --cond: 'Barlow Condensed', 'Inter', sans-serif;
  --shadow: 0 8px 28px rgba(0, 0, 0, .55);
  --hunt-w: 400px;
  --L: var(--rail-w);   /* space taken on the left by rail + side panel */
  --R: 0px;             /* space taken on the right by the hunt panel */
}
body.side-open { --L: calc(var(--rail-w) + var(--side-w)); }
body.hunt-open { --R: var(--hunt-w); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font-family: Inter, system-ui, -apple-system, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
code { font-family: var(--mono); font-size: 12px; color: var(--accent-hi); }
kbd { font-family: var(--mono); font-size: 11px; color: #ddd; background: var(--panel-3); border: 1px solid #444; border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; }
.hidden { display: none !important; }
::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 4px; }

#stars { position: fixed; inset: 0;
  background:
    radial-gradient(1px 1px at 12% 22%, #fff8, transparent), radial-gradient(1px 1px at 72% 12%, #fff9, transparent),
    radial-gradient(1px 1px at 33% 78%, #fff6, transparent), radial-gradient(1.5px 1.5px at 88% 64%, #fffa, transparent),
    radial-gradient(1px 1px at 52% 40%, #fff5, transparent), radial-gradient(1px 1px at 8% 90%, #fff7, transparent),
    radial-gradient(ellipse at 50% 50%, #0d1622 0%, #05070a 70%);
  background-size: 420px 420px, 380px 380px, 460px 460px, 520px 520px, 300px 300px, 610px 610px, 100% 100%; }
#map { position: fixed; inset: 0 0 0 var(--rail-w); }
.maplibregl-ctrl-attrib { background: rgba(0,0,0,.5) !important; color: #999; font-size: 10px; }
.maplibregl-ctrl-attrib a { color: #bbb !important; }
.maplibregl-ctrl-bottom-left { left: 8px; bottom: 44px; }
.maplibregl-ctrl-scale { background: rgba(0,0,0,.55); color: #eee; border-color: #eee; font-size: 10px; font-family: var(--mono); }

/* ===== Icons ===== */
.ic { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; display: inline-block; }
.tool-grid b .ic { width: 22px; height: 22px; color: var(--accent); }
.cm-ico .ic { color: var(--accent); width: 17px; height: 17px; }
.actions .ic { color: var(--accent-hi); width: 15px; height: 15px; }
.suggest .s-ico .ic { color: var(--accent); width: 16px; height: 16px; }
.regs a span .ic { color: var(--accent); width: 18px; height: 18px; }
.empty b .ic, .hx-hero > b .ic { color: var(--accent); width: 34px; height: 34px; }
.hx-tabs button span .ic { width: 18px; height: 18px; }
.hx-tabs button.on span .ic { color: var(--accent); }
.hx-status-grid button .ic, .hx-sub .ic, .hx-status .ic { width: 14px; height: 14px; color: var(--accent-hi); }
.hx-status-grid button.on .ic { color: #fff; }
.hx-wx .ic, .wx-place .ic, .stat span .ic, .day .ic, .hour .ic { color: var(--accent-hi); }
.wx-now .ico .ic { width: 44px; height: 44px; color: #ffc561; }
.hour > div[style] .ic { width: 20px; height: 20px; color: #ffd27a; }
.day > span .ic { width: 18px; height: 18px; color: #ffd27a; }
.icon-grid button .ic { width: 18px; height: 18px; color: #ddd; }
.icon-grid button.on .ic { color: var(--accent); }
.ci .ci-ico .ic { width: 17px; height: 17px; color: #fff; }
.hx-row-ico .ic { width: 16px; height: 16px; color: #fff; }
.eye .ic, .x .ic { width: 16px; height: 16px; }
.btn-dark .ic, .btn-accent .ic, .hx-link .ic { width: 14px; height: 14px; }
.plans-table td.yes .ic { width: 15px; height: 15px; }

/* ===== Rail ===== */
#rail { position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail-w); background: var(--rail); border-right: 1px solid #222;
  display: flex; flex-direction: column; align-items: stretch; z-index: 20; padding: 10px 0; }
.rail-logo { height: 52px; display: grid; place-items: center; margin-bottom: 8px; }
.rail-logo svg { width: 36px; height: 36px; }
.rail-btn { position: relative; border: 0; background: none; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  color: #bdbdbd; font-family: var(--cond); font-weight: 700; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.rail-btn svg { width: 23px; height: 23px; fill: currentColor; }
.rail-btn:hover { color: #fff; background: #1c1c1c; }
.rail-btn.on { color: var(--accent); background: #1c1c1c; }
.rail-btn.on::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: var(--accent); border-radius: 0 3px 3px 0; }
.rail-spacer { flex: 1; }

/* ===== Side panel ===== */
#sidepanel { position: fixed; left: var(--rail-w); top: 0; bottom: 0; width: var(--side-w); background: var(--panel); z-index: 15;
  border-right: 1px solid #262626; box-shadow: var(--shadow); overflow-y: auto; animation: spIn .18s ease-out; }
@keyframes spIn { from { transform: translateX(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.sp { padding: 0 18px 22px; }
.sp-head { position: sticky; top: 0; background: var(--panel); z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 18px 0 12px; }
.sp-head h2 { margin: 0; font-family: var(--cond); font-size: 24px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.x { border: 0; background: none; color: var(--muted); font-size: 24px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.x:hover { color: #fff; background: var(--panel-3); }
.section-label { font-family: var(--cond); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 20px 0 10px; }
.sp-actions { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.sp-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }

.btn-accent, .btn-dark { border-radius: 6px; padding: 10px 12px; font-weight: 700; font-size: 13px; border: 1px solid transparent; white-space: nowrap; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-hi); }
.btn-dark { background: var(--panel-2); border-color: var(--line); }
.btn-dark:hover { background: var(--panel-3); }
.btn-dark.danger { color: #ff7b7b; }
.wide { width: 100%; margin-top: 14px; }
.row-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

.tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.tabs button { flex: 1; border: 0; background: none; padding: 9px 0; color: var(--muted); font-weight: 600; font-size: 12.5px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button.on { color: #fff; border-bottom-color: var(--accent); }
.text, textarea.text { width: 100%; margin: 6px 0; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--line); background: #141414; color: var(--text); font: inherit; font-size: 13px; outline: 0; }
.text:focus { border-color: var(--accent); }
textarea.text { resize: vertical; min-height: 84px; line-height: 1.45; }

.content-list { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.ci { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: 6px; cursor: pointer; }
.ci:hover { background: var(--panel-2); }
.ci .ci-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 16px; border: 2px solid #fff3; }
.ci .ci-main { flex: 1; min-width: 0; }
.ci .ci-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci .ci-sub { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci .eye { border: 0; background: none; color: var(--muted); padding: 6px; border-radius: 6px; }
.ci .eye:hover { color: #fff; background: var(--panel-3); }
.ci.off .ci-ico, .ci.off .ci-main { opacity: .4; }
.empty { text-align: center; padding: 30px 10px; color: var(--muted); }
.empty b { display: block; font-size: 28px; margin-bottom: 8px; }

.basemaps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.basemaps button { border: 0; background: none; font-size: 11.5px; font-weight: 600; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; }
.basemaps .thumb { width: 100%; aspect-ratio: 1; border-radius: 6px; border: 2px solid transparent; }
.basemaps button.on { color: #fff; }
.basemaps button.on .thumb { border-color: var(--accent); }
.t-hybrid { background: linear-gradient(160deg, transparent 45%, #fff6 46%, #fff6 48%, transparent 49%), radial-gradient(circle at 30% 30%, #5b6a3a, #26331d 60%, #3b3424); }
.t-sat { background: radial-gradient(circle at 30% 30%, #4d5a35, #1f2a18 60%, #2b2a1f); }
.t-topo { background: repeating-radial-gradient(circle at 60% 40%, #e3dcc8 0 6px, #c7b998 6px 7px); }
.t-usgs { background: repeating-radial-gradient(circle at 30% 60%, #eef2e4 0 5px, #b78f5c 5px 6px); }

.toggle { display: flex; align-items: center; gap: 12px; padding: 9px 0; cursor: pointer; user-select: none; }
.toggle input { display: none; }
.tl { display: flex; flex-direction: column; font-weight: 600; }
.tl small { font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 1px; }
.sw { width: 38px; height: 22px; border-radius: 999px; background: #3a3a3a; position: relative; transition: .2s; flex: none; }
.sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #ccc; transition: .2s; }
.toggle input:checked + .sw { background: var(--accent); }
.toggle input:checked + .sw::after { left: 19px; background: #fff; }
.slider-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); padding: 8px 0; }
input[type=range] { accent-color: var(--accent); width: 130px; }
.seg { display: flex; background: #141414; border: 1px solid var(--line); border-radius: 6px; padding: 3px; }
.seg button { flex: 1; border: 0; background: none; padding: 7px; border-radius: 4px; color: var(--muted); font-weight: 600; font-size: 12.5px; }
.seg button.on { background: var(--panel-3); color: #fff; }

.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 10px; font-size: 12.5px; }
.legend div { display: flex; align-items: center; gap: 8px; color: #d6d6d6; }
.legend i { width: 14px; height: 14px; border-radius: 3px; flex: none; border: 1.5px solid #ffffff55; }
.coverage { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 11.5px; padding: 4px 9px; border-radius: 999px; background: rgba(63,208,122,.1); color: var(--ok); border: 1px solid rgba(63,208,122,.25); }
.chip.custom { background: var(--accent-soft); color: var(--accent-hi); border-color: rgba(255,79,31,.35); }

.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tool-grid button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 12px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); font-weight: 700; }
.tool-grid button:hover { border-color: var(--accent); }
.tool-grid b { font-size: 20px; margin-bottom: 4px; }
.tool-grid small { color: var(--muted); font-weight: 400; font-size: 11.5px; }
.shortcuts { grid-template-columns: 90px 1fr !important; }

/* ===== Search ===== */
#searchwrap { position: fixed; top: 14px; left: calc(var(--L) + 16px); z-index: 12; width: min(420px, calc(100vw - var(--L) - var(--R) - 90px)); transition: left .18s; }
body.side-open #hud #hudWind, body.side-open #hud .sep:nth-of-type(2) { display: none; }
.search { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 46px; border-radius: 8px; background: var(--panel); border: 1px solid #2a2a2a; box-shadow: var(--shadow); }
.search .ico { width: 19px; height: 19px; fill: var(--muted); flex: none; }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font-size: 15px; }
.search input::placeholder { color: #888; }
.search:focus-within { border-color: var(--accent); }
.suggest { position: absolute; top: 52px; left: 0; right: 0; border-radius: 8px; padding: 6px; max-height: 62vh; overflow: auto; background: var(--panel); border: 1px solid #2a2a2a; box-shadow: var(--shadow); }
.suggest button { display: flex; width: 100%; gap: 10px; align-items: center; text-align: left; padding: 9px 10px; border: 0; background: none; border-radius: 6px; }
.suggest button:hover, .suggest button.active { background: var(--panel-2); }
.suggest .s-ico { width: 30px; height: 30px; border-radius: 6px; background: var(--panel-3); display: grid; place-items: center; flex: none; font-size: 15px; }
.suggest .s-main { font-weight: 600; }
.suggest .s-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.suggest .s-head { font-family: var(--cond); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 4px; }

/* ===== Right controls ===== */
#controls { position: fixed; right: calc(var(--R) + 14px); top: 14px; transition: right .18s; display: flex; flex-direction: column; gap: 8px; z-index: 10; }
.ctl { width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--panel); border: 1px solid #2a2a2a; box-shadow: var(--shadow); }
.ctl svg { width: 20px; height: 20px; fill: currentColor; }
.ctl:hover { background: var(--panel-2); }
.ctl.active { color: var(--accent); border-color: var(--accent); }
.ctl-group { display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid #2a2a2a; }
.ctl-group .ctl { border: 0; border-radius: 0; box-shadow: none; font-size: 22px; font-weight: 500; }
.ctl-group .ctl + .ctl { border-top: 1px solid #2a2a2a; }
#compass { transition: transform .1s linear; }

/* ===== Bottom toolbar ===== */
#toolbar { position: fixed; bottom: 16px; left: calc(var(--L) + (100vw - var(--L) - var(--R)) / 2); transform: translateX(-50%); z-index: 10; display: flex; gap: 2px;
  background: var(--panel); border: 1px solid #2a2a2a; border-radius: 10px; padding: 5px; box-shadow: var(--shadow); }
#toolbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; background: none; padding: 7px 14px; border-radius: 7px; min-width: 70px;
  font-family: var(--cond); font-weight: 700; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: #ddd; }
#toolbar svg { width: 21px; height: 21px; fill: currentColor; }
#toolbar button:hover { background: var(--panel-2); color: #fff; }
#toolbar button.on { background: var(--accent); color: #fff; }
#toolbar button.rec { color: #ff5a5a; }
#toolbar button.rec svg circle:first-child { animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .25; } }

#drawbar { position: fixed; bottom: 92px; left: calc(var(--L) + (100vw - var(--L) - var(--R)) / 2); transform: translateX(-50%); z-index: 11; display: flex; align-items: center; gap: 18px;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 10px; padding: 10px 10px 10px 16px; box-shadow: var(--shadow); white-space: nowrap; }
.db-stats { display: flex; flex-direction: column; }
.db-stats b { font-family: var(--cond); font-size: 15px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-hi); }
.db-stats span { font-size: 13px; color: #ddd; font-family: var(--mono); }
.db-btns { display: flex; gap: 6px; }
.db-btns button { border: 1px solid var(--line); background: var(--panel-2); border-radius: 6px; padding: 8px 12px; font-weight: 700; font-size: 13px; }
.db-btns button.btn-accent { background: var(--accent); border-color: var(--accent); }

/* ===== Context menu ===== */
#ctxmenu { position: fixed; z-index: 30; width: 270px; background: var(--panel); border: 1px solid #333; border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.7); overflow: hidden; animation: pop .12s ease-out; }
@keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.cm-head { padding: 12px 14px; background: var(--panel-2); border-bottom: 1px solid #333; }
.cm-coords { font-family: var(--mono); font-size: 12.5px; color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cm-coords button { border: 0; background: var(--panel-3); border-radius: 4px; padding: 3px 7px; font-size: 11px; color: #ddd; }
.cm-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.cm-sub b { color: #ddd; font-weight: 600; }
.cm-list { padding: 5px; max-height: 60vh; overflow: auto; }
.cm-item { display: flex; align-items: center; gap: 11px; width: 100%; border: 0; background: none; padding: 8px 9px; border-radius: 6px; text-align: left; font-weight: 500; }
.cm-item:hover { background: var(--panel-3); }
.cm-item .cm-ico { width: 22px; text-align: center; font-size: 15px; }
.cm-item kbd { margin-left: auto; }
.cm-sep { height: 1px; background: #333; margin: 5px 4px; }

/* ===== Right drawer ===== */
#drawer { position: fixed; right: calc(var(--R) + 68px); top: 14px; width: 370px; max-height: calc(100vh - 120px); overflow-y: auto; z-index: 14; background: var(--panel);
  border: 1px solid #2a2a2a; border-radius: 10px; box-shadow: var(--shadow); padding: 0 16px 16px; animation: drIn .18s ease-out; }
@keyframes drIn { from { transform: translateX(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.dr-head { position: sticky; top: 0; background: var(--panel); z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 14px 0 10px; }
.dr-head h3 { margin: 0; font-family: var(--cond); font-size: 21px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }

.owner-card { background: linear-gradient(135deg, rgba(255,79,31,.18), rgba(255,79,31,.03)); border: 1px solid rgba(255,79,31,.4); border-radius: 8px; padding: 14px; margin-bottom: 12px; }
.owner-label { font-family: var(--cond); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-hi); font-weight: 700; }
.owner-name { font-size: 19px; font-weight: 800; margin-top: 4px; line-height: 1.25; }
.owner-sub { color: #d0d0d0; font-size: 13px; margin-top: 3px; }
.public-card { border-radius: 8px; padding: 14px; margin-bottom: 12px; border: 1px solid var(--line); }
.public-card .owner-label { color: inherit; }
.kv { display: grid; grid-template-columns: 116px 1fr; gap: 8px 10px; font-size: 13px; margin: 6px 0 12px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; word-break: break-word; }
.kv .mono { font-family: var(--mono); font-size: 12px; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.actions a, .actions button { display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 9px; font-size: 12.5px; font-weight: 600; }
.actions a:hover, .actions button:hover { border-color: var(--accent); }
.actions .danger { color: #ff7b7b; }
.note { font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.5; }
.access { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; margin-top: 8px; }
.access.OA { background: rgba(63,208,122,.15); color: var(--ok); }
.access.RA { background: rgba(255,200,60,.15); color: #ffc83c; }
.access.XA { background: rgba(255,77,77,.15); color: #ff6b6b; }
.access.UK { background: rgba(255,255,255,.08); color: var(--muted); }
.muted { color: var(--muted); font-size: 13px; line-height: 1.5; }
.loading { display: inline-block; width: 14px; height: 14px; border: 2px solid #444; border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Editor */
.ed-field label { display: block; font-family: var(--cond); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 12px 0 2px; }
.ed-name { font-size: 17px !important; font-weight: 700; }
.icon-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 6px; }
.icon-grid button { aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent; background: var(--panel-2); font-size: 17px; display: grid; place-items: center; padding: 0; }
.icon-grid button:hover { background: var(--panel-3); }
.icon-grid button.on { border-color: var(--accent); background: var(--accent-soft); }
.colors { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.colors button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; padding: 0; box-shadow: inset 0 0 0 2px #0005; }
.colors button.on { border-color: #fff; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.stat { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.stat b { display: block; font-size: 17px; font-weight: 800; }
.stat span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.profile { background: #141414; border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin: 8px 0 12px; position: relative; }
.profile svg { width: 100%; height: 120px; display: block; }
.profile .pf-label { position: absolute; font-size: 10px; color: var(--muted); font-family: var(--mono); }

/* Waypoint markers: teardrop pins in the waypoint's color */
.wp-marker { position: relative; width: 34px; height: 44px; cursor: pointer; }
.wp-pin { position: absolute; left: 2px; top: 2px; width: 30px; height: 30px; border-radius: 50% 50% 50% 3px; transform: rotate(-45deg); transform-origin: center;
  display: grid; place-items: center; border: 2.5px solid #fff; box-shadow: -2px 3px 8px rgba(0,0,0,.55); transition: transform .12s; }
.wp-pin .ic { transform: rotate(45deg); width: 16px; height: 16px; color: #fff; }
.wp-marker:hover .wp-pin { transform: rotate(-45deg) scale(1.1); }
.wp-marker.sel .wp-pin { box-shadow: 0 0 0 3px var(--accent), -2px 3px 8px rgba(0,0,0,.55); }
.wp-marker::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 8px; height: 3px; margin-left: -4px; border-radius: 50%; background: rgba(0,0,0,.45); }
.wp-label { position: absolute; top: 46px; left: 50%; transform: translateX(-50%); font-size: 11.5px; font-weight: 700; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 6px #000; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.wp-note { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); background: #fffbe6; color: #222; font-size: 11.5px; padding: 6px 8px; border-radius: 6px; width: max-content; max-width: 180px; box-shadow: 0 4px 12px rgba(0,0,0,.5); line-height: 1.35; white-space: pre-wrap; }
.wp-note::after { content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #fffbe6; border-bottom: 0; }
.me-dot { width: 18px; height: 18px; border-radius: 50%; background: #2f80ff; border: 3px solid #fff; box-shadow: 0 0 0 8px rgba(47,128,255,.25); }

/* Weather */
.wx-now { display: flex; align-items: center; gap: 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.wx-now .big { font-size: 42px; font-weight: 800; line-height: 1; }
.wx-now .ico { font-size: 40px; }
.wx-place { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.wind-card { display: flex; align-items: center; gap: 14px; margin-top: 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.wind-dial { width: 64px; height: 64px; border-radius: 50%; border: 2px solid #444; position: relative; flex: none; }
.wind-dial span { position: absolute; font-size: 9px; color: var(--muted); font-weight: 700; }
.wind-dial .arrow { position: absolute; inset: 0; display: grid; place-items: center; }
.wind-dial .arrow svg { width: 34px; height: 34px; fill: var(--accent); }
.hours { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
.hour { flex: none; width: 54px; text-align: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 2px; font-size: 12px; }
.hour .t { color: var(--muted); font-size: 11px; }
.hour .w { font-size: 11px; color: #ddd; margin-top: 4px; }
.hour svg { width: 14px; height: 14px; fill: var(--accent-hi); }
.days { display: flex; flex-direction: column; gap: 2px; }
.day { display: grid; grid-template-columns: 48px 28px 1fr 64px 70px; align-items: center; gap: 6px; padding: 7px 4px; border-bottom: 1px solid #2a2a2a; font-size: 13px; }
.day .muted { font-size: 12px; }
.sun-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Hover chip, hint, toast */
#hoverChip { position: fixed; z-index: 9; pointer-events: none; padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 700;
  background: rgba(15,15,15,.92); border: 1px solid rgba(255,79,31,.6); white-space: nowrap; transform: translate(14px, 14px); }
#hoverChip small { display: block; color: var(--muted); font-weight: 500; font-size: 11px; }
#hint { position: fixed; left: calc(var(--L) + (100vw - var(--L) - var(--R)) / 2); top: 74px; transform: translateX(-50%); z-index: 9; padding: 8px 14px; border-radius: 999px; font-size: 13px;
  background: rgba(20,20,20,.9); border: 1px solid #333; }
#toast { position: fixed; left: calc(var(--L) + (100vw - var(--L) - var(--R)) / 2); bottom: 96px; transform: translateX(-50%); z-index: 40; padding: 10px 16px; border-radius: 8px;
  background: #fff; color: #111; font-weight: 700; font-size: 13px; box-shadow: var(--shadow); animation: pop .15s ease-out; }

/* HUD */
#hud { position: fixed; left: calc(var(--L) + 10px); bottom: 10px; z-index: 9; display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 6px;
  background: rgba(15,15,15,.85); border: 1px solid #2a2a2a; font-family: var(--mono); font-size: 11.5px; color: #d6d6d6; white-space: nowrap; }
#hud .sep { width: 1px; height: 12px; background: #3a3a3a; }
#hudCoverage.ok { color: var(--ok); }
@media (max-width: 1700px) { #hud .hide-sm { display: none; } }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 16px; }
.modal-card { width: min(520px, 100%); border-radius: 12px; padding: 0 18px 18px; max-height: 90vh; overflow: auto; background: var(--panel); border: 1px solid #333; }
#customList .ci { cursor: default; }

/* Landmark popups */
.maplibregl-popup-content { background: var(--panel-2); color: var(--text); border-radius: 8px; padding: 8px 12px; font-size: 13px; border: 1px solid #3a3a3a; }
.maplibregl-popup-tip { display: none; }

/* ===== Movement Forecast ===== */
.fc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fc-select { position: relative; flex: 1; min-width: 0; }
.fc-select select { appearance: none; -webkit-appearance: none; width: 100%; background: var(--panel-2); color: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 36px 11px 12px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; outline: 0; }
.fc-select select:hover, .fc-select select:focus { border-color: var(--accent); }
.fc-select svg { position: absolute; right: 10px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: var(--muted); pointer-events: none; }
.fc-place { text-align: right; font-size: 12.5px; font-weight: 600; color: #ddd; line-height: 1.3; max-width: 46%; }
.fc-place span { display: block; font-weight: 500; color: var(--muted); font-size: 11.5px; }
.fc-warn { background: #2e2512; border: 1px solid #5c4a1c; color: #f1d79a; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin-bottom: 12px; }
.fc-hero { display: flex; gap: 16px; align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.fc-dial { --p: 50; width: 92px; height: 92px; border-radius: 50%; flex: none; display: grid; place-items: center; align-content: center; text-align: center;
  background: radial-gradient(closest-side, var(--panel-2) 80%, transparent 82%), conic-gradient(var(--c) calc(var(--p) * 1%), #333 0); }
.fc-dial b { display: block; font-size: 30px; font-weight: 800; line-height: 1; }
.fc-dial span { font-size: 10.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }
.fc-hero-main { min-width: 0; }
.fc-kicker { font-size: 12px; color: var(--muted); font-weight: 600; }
.fc-phase-name { font-family: var(--cond); font-size: 22px; font-weight: 800; text-transform: uppercase; line-height: 1.05; margin: 2px 0 8px; }
.fc-best-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.fc-best { font-size: 14px; font-weight: 700; line-height: 1.35; }
.fc-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 10px; }
.fc-days button { border: 1px solid transparent; background: none; border-radius: 8px; padding: 6px 0 7px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); }
.fc-days button:hover { background: var(--panel-2); }
.fc-days button b { font-size: 15px; color: #eee; }
.fc-days button i { width: 18px; height: 3px; border-radius: 2px; margin-top: 2px; }
.fc-days button.on { background: var(--panel-2); border-color: #555; }
.fc-days button.on span { color: #fff; }
.fc-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.fc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: var(--cond); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.fc-h span { white-space: nowrap; font-family: Inter, sans-serif; font-weight: 500; font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--muted); }
.fc-p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: #d6d6d6; }
.fc-chart { position: relative; display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; height: 70px; align-items: end; }
.fc-light { position: absolute; top: 0; bottom: 0; background: rgba(255, 214, 107, .06); border-left: 1px dashed #ffd36b55; border-right: 1px dashed #ffd36b55; pointer-events: none; }
.fc-bar { height: 100%; display: flex; align-items: flex-end; position: relative; }
.fc-bar i { display: block; width: 100%; border-radius: 2px 2px 0 0; opacity: .9; }
.fc-bar.now::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: 0; border-left: 1.5px solid #fff; }
.fc-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); padding-top: 4px; font-family: var(--mono); }
.fc-season { position: relative; height: 8px; border-radius: 4px; background: #333; overflow: hidden; }
.fc-season i { position: absolute; top: 0; bottom: 0; opacity: .9; }
.fc-season b { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1.5px #111; }
.fc-months { display: grid; grid-template-columns: repeat(12, 1fr); font-size: 10px; color: var(--muted); margin-top: 4px; }
.fc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid #333; }
.fc-row:first-of-type { border-top: 0; padding-top: 0; }
.fc-row b { display: block; font-size: 13px; }
.fc-row span { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.fc-row em { flex: none; font-style: normal; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #333; color: #bbb; }
.fc-row em.up { background: rgba(63,208,122,.14); color: var(--ok); }
.fc-row em.down { background: rgba(255,138,61,.14); color: #ff9d5c; }
.fc-tips { margin: 0; padding-left: 16px; font-size: 13px; line-height: 1.5; color: #dedede; }
.fc-tips li { margin-bottom: 6px; }
.fc-tips li:last-child { margin-bottom: 0; }
.fc-toggle { cursor: pointer; align-items: center; margin-bottom: 10px; }
.fc-toggle input { display: none; }
.fc-toggle input:checked + .sw { background: var(--accent); }
.fc-toggle input:checked + .sw::after { left: 19px; background: #fff; }
.fc-status { font-size: 12.5px; color: #cfcfcf; margin-top: 8px; min-height: 18px; }
.fc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: #cfcfcf; margin-top: 8px; padding-top: 8px; border-top: 1px solid #333; }
.fc-legend i { display: inline-block; vertical-align: -1px; margin-right: 6px; }
.lg-dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; }
.lg-diamond { width: 9px; height: 9px; background: #ff4f1f; border: 2px solid #fff; transform: rotate(45deg); }
.lg-heat { width: 22px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,214,0,.35), #ff7a1e, #c8142a); }
.lg-arrow { width: 20px; height: 0; border-top: 2.5px dashed #fff6d6; vertical-align: 3px !important; }

/* ===== Shared Hunt ===== */
#huntTab { position: fixed; right: var(--R); top: 50%; transform: translateY(-50%); z-index: 17; transition: right .18s;
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; width: 44px;
  background: var(--accent); color: #fff; border: 0; border-radius: 10px 0 0 10px; box-shadow: var(--shadow); }
#huntTab:hover { background: var(--accent-hi); }
#huntTab svg { width: 22px; height: 22px; fill: #fff; flex: none; }
#huntTab .ht-label { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--cond); font-weight: 800; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
#huntTab .ht-name { display: none; }
.ht-live { width: 9px; height: 9px; border-radius: 50%; background: #ffd1c2; }
.ht-live.on { background: #3fd07a; box-shadow: 0 0 0 3px rgba(63,208,122,.35); animation: pulse 2s infinite; }
.ht-badge { position: absolute; top: -8px; left: -8px; min-width: 20px; height: 20px; border-radius: 10px; background: #fff; color: var(--accent); font-style: normal; font-weight: 800; font-size: 11px; display: grid; place-items: center; padding: 0 5px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
#huntpanel { position: fixed; right: 0; top: 0; bottom: 0; width: var(--hunt-w); background: var(--panel); z-index: 16; border-left: 1px solid #262626; box-shadow: var(--shadow);
  display: flex; flex-direction: column; animation: hpIn .2s ease-out; }
@keyframes hpIn { from { transform: translateX(14px); opacity: 0; } to { transform: none; opacity: 1; } }
#huntBody { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.hx-head { padding: 16px 18px 10px; border-bottom: 1px solid #2a2a2a; position: relative; background: linear-gradient(180deg, rgba(255,79,31,.12), transparent); }
.hx-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.hx-head h2 { margin: 2px 0 0; font-family: var(--cond); font-size: 25px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; }
.hx-kicker { font-family: var(--cond); font-weight: 700; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-hi); }
.hx-kicker b { color: #fff; }
.hx-meta { color: #cfcfcf; font-size: 12.5px; margin-top: 4px; }
.hx-team-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.hx-stack { display: inline-flex; }
.hx-stack .hav, .hx-stack .hx-av-wrap { margin-left: -6px; }
.hx-stack > :first-child { margin-left: 0; }
.hx-stack.sm .hav { margin-left: -4px; border-width: 1.5px; }
.hav { display: inline-grid; place-items: center; border-radius: 50%; color: #111; font-weight: 800; border: 2px solid var(--panel); flex: none; text-shadow: 0 0 2px #fff8; vertical-align: middle; }
.hx-av-wrap { position: relative; display: inline-flex; }
.hx-av-wrap .dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); border: 2px solid var(--panel); }
.on-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); vertical-align: 1px; }
.hx-menu-btn { margin-left: auto; border: 1px solid var(--line); background: var(--panel-2); border-radius: 6px; width: 32px; height: 28px; font-weight: 800; }
.hx-menu { position: absolute; right: 18px; top: 100%; z-index: 5; width: 250px; background: var(--panel-2); border: 1px solid #3a3a3a; border-radius: 8px; padding: 5px; box-shadow: var(--shadow); }
.hx-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 6px; font-size: 13px; }
.hx-menu button:hover { background: var(--panel-3); }
.hx-menu .danger { color: #ff7b7b; }
.hx-menu-label { font-size: 11px; color: var(--muted); padding: 6px 10px 2px; text-transform: uppercase; letter-spacing: .08em; }
.hx-tabs { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid #2a2a2a; background: #171717; }
.hx-tabs button { position: relative; border: 0; background: none; padding: 9px 0 7px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: var(--cond); font-weight: 700; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid transparent; }
.hx-tabs button span { font-size: 17px; filter: grayscale(.6); }
.hx-tabs button.on { color: #fff; border-bottom-color: var(--accent); }
.hx-tabs button.on span { filter: none; }
.hx-tabs button i { position: absolute; top: 4px; right: 8px; background: var(--accent); color: #fff; font-style: normal; font-size: 10px; min-width: 16px; height: 16px; border-radius: 8px; display: grid; place-items: center; }
.hx-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 24px; }
.hx-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.hx-card h4 { margin: 0 0 8px; font-family: var(--cond); font-size: 17px; text-transform: uppercase; letter-spacing: .04em; }
.hx-card-title { font-family: var(--cond); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #ddd; margin-bottom: 8px; }
.hx-card-title .muted { font-family: Inter, sans-serif; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; }
.hx-card .text { background: #161616; }
.hx-focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.hx-hero { text-align: center; padding: 6px 8px 16px; }
.hx-hero > b { font-size: 40px; display: block; }
.hx-hero h3 { margin: 6px 0; font-size: 17px; }
.hx-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hx-lbl { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 6px; }
.wide-btn { width: 100%; margin-top: 8px; padding: 11px; }
.hx-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.hx-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; cursor: pointer; margin-bottom: 6px; }
.hx-row:hover { border-color: var(--accent); }
.hx-row-ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-3); flex: none; font-size: 15px; border: 2px solid #fff3; }
.hx-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hx-sub { font-size: 12px; color: #bdbdbd; margin-top: 2px; line-height: 1.4; }
.hx-status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hx-status-grid button { border: 1px solid var(--line); background: #181818; border-radius: 6px; padding: 7px 4px; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-status-grid button:hover { border-color: #555; }
.hx-status-grid button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.hx-status-grid button.help { color: #ff8a8a; border-color: #5a2a2a; }
.hx-status-grid button.help.on { background: #d32f2f; color: #fff; }
.hx-alert { background: #3a1212; border: 1px solid #d32f2f; color: #ffd6d6; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-weight: 600; animation: pulse 2.4s infinite; }
.hx-notes { white-space: pre-wrap; font-size: 13.5px; line-height: 1.5; background: #161616; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; }
.hx-wx { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12.5px; margin-top: 10px; }
.hx-wx .btn-dark { padding: 4px 8px; font-size: 11.5px; margin-left: auto; }
.hx-mini { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-top: 1px solid #2c2c2c; }
.hx-mini:first-of-type { border-top: 0; }
.hx-invite { text-align: center; }
.hx-code { font-family: var(--mono); font-size: 32px; letter-spacing: .3em; font-weight: 700; color: #fff; padding: 6px 0 10px; }
.hx-member { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.hx-member-top { display: flex; align-items: center; gap: 12px; }
.hx-member-main { flex: 1; min-width: 0; }
.hx-role { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: #333; color: #ddd; text-transform: uppercase; letter-spacing: .05em; }
.hx-role.guide { background: rgba(255,79,31,.2); color: var(--accent-hi); }
.hx-role.owner { background: rgba(245,197,66,.18); color: #f5c542; }
.hx-status { margin-top: 10px; background: #181818; border-radius: 6px; padding: 8px 10px; font-size: 13px; }
.hx-status.help { background: #3a1212; color: #ffd6d6; }
.hx-member-foot { margin-top: 8px; font-size: 12px; }
.hx-member-foot .btn-dark { padding: 6px 10px; font-size: 12px; }
.hx-days { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 6px; }
.hx-days button { flex: none; border: 1px solid var(--line); background: var(--panel-2); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.hx-days button.on { background: #fff; color: #111; border-color: #fff; }
.hx-days button.today { border-color: var(--accent); }
.hx-days i { font-style: normal; margin-left: 5px; color: var(--accent-hi); }
.hx-form summary { cursor: pointer; font-weight: 700; color: var(--accent-hi); list-style: none; }
.hx-form summary::-webkit-details-marker { display: none; }
.hx-form[open] summary { margin-bottom: 6px; }
.hx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.hx-chip-check input { display: none; }
.hx-chip-check span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #181818; border-radius: 999px; padding: 3px 10px 3px 3px; font-size: 12px; cursor: pointer; }
.hx-chip-check input:checked + span { border-color: var(--accent); background: var(--accent-soft); }
.hx-loc-row { display: flex; gap: 6px; align-items: center; margin: 4px 0; flex-wrap: wrap; }
.hx-loc-row span { flex: 1; font-size: 12px; font-family: var(--mono); min-width: 120px; }
.hx-loc-row .btn-dark { padding: 6px 9px; font-size: 12px; }
.hx-day-head { font-family: var(--cond); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #ddd; margin: 14px 0 6px; }
.hx-plan { display: flex; gap: 12px; padding: 10px 12px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); margin-bottom: 8px; }
.hx-plan.done { opacity: .5; border-left-color: #555; }
.hx-plan.done .hx-plan-title { text-decoration: line-through; }
.hx-plan-time { font-family: var(--mono); font-size: 12px; color: var(--accent-hi); width: 62px; flex: none; padding-top: 2px; }
.hx-plan-main { flex: 1; min-width: 0; }
.hx-plan-title { font-weight: 700; }
.hx-plan-foot { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.hx-link { border: 0; background: none; color: #9fc2ff; font-size: 12px; font-weight: 600; padding: 0; }
.hx-link:hover { text-decoration: underline; }
.hx-link.danger { color: #ff8a8a; }
.hx-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.hx-cats button { border: 1px solid var(--line); background: #181818; border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 600; }
.hx-cats button.on { border-color: var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.hx-idea { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.hx-idea.pinned { border-color: #f5c54288; }
.hx-idea-head { display: flex; justify-content: space-between; margin-bottom: 6px; }
.hx-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); padding: 2px 8px; border-radius: 999px; }
.hx-idea-text { white-space: pre-wrap; line-height: 1.5; }
.hx-idea-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; }
.hx-vote { border: 1px solid var(--line); background: #181818; border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.hx-vote.on { border-color: var(--accent); background: var(--accent-soft); }
.hx-chat { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; min-height: 200px; max-height: calc(100vh - 280px); }
.hx-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; }
.hx-msg.mine { align-self: flex-end; }
.hx-bubble { background: var(--panel-3); border-radius: 12px 12px 12px 4px; padding: 8px 11px; font-size: 13.5px; line-height: 1.4; border-left: 3px solid var(--c); }
.hx-msg.mine .hx-bubble { background: var(--accent); border-radius: 12px 12px 4px 12px; border-left: 0; }
.hx-msg.mine .hx-link { color: #fff; text-decoration: underline; }
.hx-from { font-size: 11.5px; font-weight: 700; margin-bottom: 2px; }
.hx-time { font-size: 10px; opacity: .6; margin-top: 3px; text-align: right; }
.hx-sys { align-self: center; font-size: 11.5px; color: var(--muted); background: #181818; border-radius: 999px; padding: 4px 10px; text-align: center; }
.hx-chat-input { display: flex; gap: 6px; padding-top: 8px; border-top: 1px solid #2a2a2a; position: sticky; bottom: -24px; background: var(--panel); padding-bottom: 4px; }
.hx-chat-input .text { margin: 0; }
.hx-chat-input .btn-dark { padding: 0 12px; }
.hx-mine { max-height: 190px; overflow-y: auto; }
.hx-mine-row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px solid #2c2c2c; font-size: 13px; }
.hx-mine-row .btn-dark { padding: 4px 10px; font-size: 12px; }
.hx-progress { height: 6px; background: #2a2a2a; border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.hx-progress i { display: block; height: 100%; background: var(--ok); }
.hx-gear { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid #2a2a2a; }
.hx-gear label { flex: 1; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.hx-gear input { accent-color: var(--ok); width: 17px; height: 17px; }
.hx-gear.done span { text-decoration: line-through; color: var(--muted); }

/* Team markers on the map */
.hm-mark { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.hm-pin { position: relative; width: 30px; height: 30px; border-radius: 50% 50% 50% 3px; transform: rotate(-45deg); display: grid; place-items: center; border: 2.5px solid #fff; box-shadow: -2px 3px 8px rgba(0,0,0,.55); margin-bottom: 6px; }
.hm-pin .ic { transform: rotate(45deg); width: 15px; height: 15px; color: #fff; }
.hm-pin .hm-by { transform: rotate(45deg); }
.hm-by { position: absolute; right: -8px; top: -8px; width: 18px; height: 18px; border-radius: 50%; font-size: 8.5px; font-weight: 800; color: #111; display: grid; place-items: center; border: 1.5px solid #111; }
.hm-plan { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.hm-plan-card { background: rgba(18,18,18,.94); border: 2px solid; border-radius: 8px; padding: 4px 8px; font-size: 11.5px; white-space: nowrap; display: flex; align-items: center; gap: 6px; box-shadow: 0 3px 10px rgba(0,0,0,.5); }
.hm-plan-card b { color: var(--accent-hi); font-family: var(--mono); font-size: 10.5px; }
.hm-plan-stem { width: 2px; height: 12px; }
.hm-member { position: relative; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.hm-member .hav { border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.6); position: relative; z-index: 1; }
.hm-ring { position: absolute; top: 0; left: 50%; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%; background: var(--c); opacity: .5; animation: ring 2s ease-out infinite; }
@keyframes ring { from { transform: scale(1); opacity: .6; } to { transform: scale(2.6); opacity: 0; } }
.hm-name { margin-top: 3px; font-size: 11px; font-weight: 700; background: rgba(15,15,15,.88); padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.hm-member.stale { opacity: .55; }
.hm-member.stale .hm-ring { display: none; }

/* ===== Field tools ===== */
.off-opts { display: grid; gap: 8px; margin: 10px 0; }
.off-opts button { display: flex; justify-content: space-between; align-items: center; text-align: left; padding: 12px; }
.off-opts button span { font-weight: 500; font-size: 12px; color: var(--muted); }
.off-opts button:disabled { opacity: .45; cursor: not-allowed; }
.off-bar { height: 6px; background: #2a2a2a; border-radius: 3px; overflow: hidden; margin: 4px 0 8px; }
.off-bar i { display: block; height: 100%; width: 0; background: var(--ok); transition: width .2s; }
.x-floatbar { position: fixed; z-index: 13; left: calc(var(--L) + (100vw - var(--L) - var(--R)) / 2); transform: translateX(-50%); top: 72px;
  display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid #3a3a3a; border-radius: 10px; padding: 9px 10px 9px 14px; box-shadow: var(--shadow); max-width: calc(100vw - 24px); }
.x-floatbar b { display: block; font-family: var(--cond); text-transform: uppercase; letter-spacing: .06em; font-size: 14px; }
.x-floatbar span { display: block; font-size: 12px; color: #cfcfcf; }
.x-floatbar.nav { border-color: #2f80ff; }
.nav-arrow { width: 42px; height: 42px; border-radius: 50%; background: #2f80ff; display: grid; place-items: center; flex: none; transition: transform .3s; }
.nav-arrow svg { width: 24px; height: 24px; fill: #fff; }
#navBar { top: 120px; }
.j-form .text { background: #161616; }
.j-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.j-stats span { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 12px; color: var(--muted); }
.j-stats b { color: #fff; font-size: 15px; margin-right: 5px; }
.j-entry { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.j-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.j-top span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.j-sub { font-size: 12px; color: #ddd; margin-top: 2px; }
.j-notes { font-size: 13px; margin-top: 6px; white-space: pre-wrap; line-height: 1.45; }
.j-wx { font-size: 11.5px; color: var(--muted); margin-top: 6px; font-family: var(--mono); }
.j-act { display: flex; gap: 14px; margin-top: 6px; }
.regs { display: flex; flex-direction: column; gap: 6px; }
.regs a { display: flex; align-items: center; gap: 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 13.5px; }
.regs a:hover { border-color: var(--accent); }
.regs a em { margin-left: auto; font-style: normal; color: var(--muted); font-size: 18px; }

/* ===== Overlay layers ===== */
.ovl-group { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: var(--panel-2); overflow: hidden; }
.ovl-gh { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 11px 12px; font-weight: 700; font-size: 13.5px; text-align: left; }
.ovl-gh span { flex: 1; }
.ovl-gh em { font-style: normal; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.ovl-gh i { font-style: normal; color: var(--muted); transition: transform .15s; font-size: 16px; }
.ovl-group.open .ovl-gh i { transform: rotate(90deg); }
.ovl-items { display: none; padding: 0 12px 6px; }
.ovl-group.open .ovl-items { display: block; }
.ovl-item { border-top: 1px solid #2f2f2f; }
.ovl-item .toggle { padding: 9px 0; }
.ovl-item.far .tl { opacity: .55; }
.ovl-item input[type=range] { width: 100%; margin: 0 0 8px; }
.ovl-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: #cfcfcf; padding: 0 0 9px 50px; }
.ovl-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.ovl-card { border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, transparent), transparent); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.ovl-kicker { font-family: var(--cond); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.ovl-title { font-weight: 800; font-size: 15px; margin-top: 2px; }
.ovl-card .kv { margin: 6px 0 4px; }

/* ===== Plan tiers ===== */
.tier-badge { display: inline-block; font-style: normal; font-family: Inter, sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 5px; border-radius: 4px; margin-left: 6px; vertical-align: 2px; line-height: 1.2; white-space: nowrap; }
.tier-badge.t-prime { background: rgba(255,106,61,.16); color: #ff8a5c; border: 1px solid rgba(255,106,61,.4); }
.tier-badge.t-premium { background: rgba(245,197,66,.14); color: #f5c542; border: 1px solid rgba(245,197,66,.45); }
.tool-grid button { position: relative; }
.tl > .tier-badge { align-self: flex-start; margin: 3px 0 0; }
.tool-grid button > .tier-badge { position: absolute; top: 8px; right: 8px; margin: 0; }
#basemaps > .tier-badge, #btnAddSource > .tier-badge, #btnImport > .tier-badge { display: none; }
.plans-btn { border-color: rgba(245,197,66,.4); color: #f5c542; }
.tier-badge .tier-lock { width: 8px; height: 8px; margin: 0 3px 0 0; vertical-align: -1px; }
/* Locked controls (map/js/tiers.js): dimmed, with a lock glyph where there's no plan badge */
.tier-locked { opacity: .82; }
label.tier-locked .sw { opacity: .45; }
#toolbar .tier-locked::after, .cm-item.tier-locked::after, .sp-actions .tier-locked::after, .sp-foot .tier-locked::after, #btnAddSource.tier-locked::after, #drawerBody .actions .tier-locked::after, .rail-btn.tier-locked::after {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 5px; vertical-align: -1px; background: #ff8a5c;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat; }
#toolbar .tier-locked::after, .rail-btn.tier-locked::after { position: absolute; top: 6px; right: 6px; margin: 0; }
#toolbar [data-tool] { position: relative; }
.wl-card p { font-size: 13px; line-height: 1.5; }
.wl-card .tier-badge { margin: 0 4px 0 0; }
.wl-card .row-btns { align-items: center; }
.wl-card a.btn-dark { text-decoration: none; color: inherit; }
.plans-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.plan-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.plan-card.t-prime { border-color: rgba(255,106,61,.5); }
.plan-card.t-premium { border-color: rgba(245,197,66,.55); background: linear-gradient(160deg, rgba(245,197,66,.12), var(--panel-2)); }
.plan-name { font-family: var(--cond); font-weight: 800; font-size: 17px; text-transform: uppercase; }
.plan-card.t-prime .plan-name { color: #ff8a5c; } .plan-card.t-premium .plan-name { color: #f5c542; }
.plan-price { font-size: 13px; color: var(--muted); font-weight: 700; }
.plan-card p { margin: 6px 0 0; font-size: 11.5px; color: #cfcfcf; line-height: 1.4; }
.plans-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
.plans-table th { font-family: var(--cond); text-transform: uppercase; font-size: 12px; letter-spacing: .06em; padding: 6px 2px; position: sticky; top: 52px; background: var(--panel); }
.plans-table th.t-prime { color: #ff8a5c; } .plans-table th.t-premium { color: #f5c542; }
.plans-table td { padding: 7px 2px; border-top: 1px solid #2c2c2c; vertical-align: top; }
.plans-table td.yes, .plans-table td.no { text-align: center; width: 46px; }
.plans-table td.yes { color: var(--ok); font-weight: 800; } .plans-table td.no { color: #555; }
.plans-table tr.pg td { font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding-top: 14px; border-top: 0; }

/* ===== Mobile ===== */
.mobile-only { display: none !important; }
.nav-badge { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 17px; height: 17px; border-radius: 9px; background: var(--accent); color: #fff; font-style: normal; font-size: 10px; font-weight: 800; display: grid; place-items: center; padding: 0 4px; }

@media (max-width: 720px) {
  :root { --rail-w: 0px; --side-w: 100vw; --hunt-w: 100vw; --nav-h: 58px; }
  body.side-open, body.hunt-open { --L: 0px; --R: 0px; }
  .mobile-only { display: flex !important; }
  .desktop-only { display: none !important; }
  .btn-dark.mobile-only { display: block !important; }

  /* Bottom navigation */
  #rail { top: auto; width: 100%; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding: 0 0 env(safe-area-inset-bottom); flex-direction: row; border-right: 0; border-top: 1px solid #222; }
  .rail-logo, .rail-spacer { display: none; }
  .rail-btn { flex: 1; height: var(--nav-h); gap: 3px; font-size: 10.5px; letter-spacing: .04em; }
  .rail-btn svg { width: 21px; height: 21px; }
  .rail-btn.on::before { left: 22%; right: 22%; top: 0; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
  #map { inset: 0 0 calc(var(--nav-h) + env(safe-area-inset-bottom)) 0; }
  #huntTab { display: none; }

  /* Search + controls */
  #searchwrap, body.side-open #searchwrap { left: 10px; top: calc(10px + env(safe-area-inset-top)); width: calc(100vw - 72px); }
  .search { height: 44px; }
  .search kbd { display: none; }
  .search input { font-size: 16px; }
  #controls { right: 10px; top: calc(10px + env(safe-area-inset-top)); gap: 6px; }
  #controls .ctl-group { display: none; }
  .ctl { width: 44px; height: 44px; }

  /* Bottom sheets: side panels, hunt, detail card */
  #sidepanel, #huntpanel, #drawer { left: 0; right: 0; width: auto; top: auto; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
    max-height: 64vh; height: auto; border-radius: 16px 16px 0 0; border: 0; border-top: 1px solid #333; z-index: 25; animation: sheetUp .2s ease-out; }
  #sidepanel { height: 64vh; }
  #huntpanel { height: 76vh; max-height: 76vh; }
  #drawer { padding: 0 16px 16px; }
  #sidepanel::before, #huntpanel::before, #drawer::before { content: ''; position: sticky; top: 0; display: block; width: 40px; height: 4px; border-radius: 2px; background: #555; margin: 8px auto 0; z-index: 3; }
  #huntpanel::before { position: absolute; left: 50%; margin-left: -20px; top: 0; }
  @keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .sp-head { padding: 10px 0 10px; }
  .sp-head h2 { font-size: 21px; }
  .dr-head { padding: 10px 0 8px; }

  /* Tool bar + drawing bar */
  #toolbar { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 10px); left: 50%; padding: 4px; border-radius: 12px; }
  #toolbar button { min-width: 0; padding: 6px 10px; font-size: 10.5px; }
  #toolbar svg { width: 20px; height: 20px; }
  body.side-open #toolbar, body.hunt-open #toolbar { display: none; }
  #drawbar { left: 10px; right: 10px; transform: none; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 78px); flex-direction: column; align-items: stretch; gap: 8px; white-space: normal; padding: 10px 12px; }
  .db-stats span { font-size: 12.5px; font-family: Inter, sans-serif; }
  .db-btns { justify-content: flex-end; }
  .db-btns button { flex: 1; padding: 10px; }

  /* Right-click / long-press menu becomes a bottom sheet */
  #ctxmenu { left: 0 !important; right: 0; top: auto !important; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); width: auto; border-radius: 16px 16px 0 0; max-height: 70vh; overflow: auto; }
  .cm-item { padding: 11px 10px; font-size: 15px; }
  .cm-item kbd { display: none; }

  /* Map chrome above the tool bar */
  #hud { display: none; }
  .maplibregl-ctrl-bottom-left { bottom: calc(var(--nav-h) + 78px); left: 4px; }
  .maplibregl-ctrl-bottom-right { bottom: calc(var(--nav-h) + 78px); }
  #hint, #toast { left: 50%; }
  #hint { top: calc(64px + env(safe-area-inset-top)); max-width: calc(100vw - 90px); text-align: center; }
  #toast { bottom: calc(var(--nav-h) + 90px); }
  #hoverChip { display: none !important; }

  /* Panel content tweaks */
  .hx-head { padding-top: 18px; }
  .hx-tabs button { font-size: 10px; }
  .hx-chat { max-height: calc(76vh - 260px); }
  .fc-place { font-size: 12px; }
  .modal-card { max-height: 85vh; }
  .tool-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .tool-grid button { padding: 10px 8px 9px; font-size: 12.5px; }
  .tool-grid b { font-size: 18px; margin-bottom: 2px; }
  .tool-grid small { display: none; }
  .tool-grid button > .tier-badge { top: 6px; right: 6px; font-size: 8px; }
  .x-floatbar { top: calc(64px + env(safe-area-inset-top)); left: 50%; width: calc(100vw - 20px); }
  #navBar { top: calc(64px + env(safe-area-inset-top)); }
}

/* ===== HuntsUnited integration ===== */
a.rail-logo { color: inherit; text-decoration: none; }
a.rail-btn { color: inherit; text-decoration: none; }
a.btn-dark.wide, a.btn-accent.wide { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; text-align: center; }
.plan-card a.wide, .plan-card .plan-current { margin-top: 10px; }
.plan-card .plan-current { display: block; text-align: center; font-weight: 700; font-size: 12px; color: var(--accent); padding: 8px 0; }
.plan-card.mine { outline: 2px solid var(--accent); }
.tier-badge.owned { opacity: .55; }

/* ===== Phones & touch: safe areas, landscape, tap targets, iOS zoom ===== */
/* Notch and home bar (viewport-fit=cover). Left/right insets are 0 in portrait, so this only moves things in landscape. */
@media (min-width: 721px) {
  :root { --rail-w: calc(72px + env(safe-area-inset-left)); }
  #rail { padding-left: env(safe-area-inset-left); }
  #controls { right: calc(var(--R) + 14px + env(safe-area-inset-right)); }
  #huntTab { right: calc(var(--R) + env(safe-area-inset-right)); }
  #huntpanel { padding-right: env(safe-area-inset-right); width: calc(var(--hunt-w) + env(safe-area-inset-right)); }
  #toolbar { bottom: calc(16px + env(safe-area-inset-bottom)); }
  #hud { bottom: calc(10px + env(safe-area-inset-bottom)); }
  #sidepanel { padding-bottom: env(safe-area-inset-bottom); }
}
#sidepanel, #huntpanel, #drawer, .hx-body, #ctxmenu, .cm-list, .suggest, .modal-card, .hx-chat { overscroll-behavior: contain; }
.search input { align-self: stretch; }

/* Short landscape phones (e.g. 844×390): the rail and the control column would run off the screen */
@media (min-width: 721px) and (max-height: 520px) {
  #rail { padding-top: 4px; padding-bottom: 4px; overflow-y: auto; scrollbar-width: none; }
  #rail::-webkit-scrollbar { display: none; }
  .rail-logo { height: 40px; margin-bottom: 0; }
  .rail-logo svg { width: 30px; height: 30px; }
  .rail-btn { height: 46px; flex: none; gap: 2px; font-size: 11px; }
  .rail-btn svg { width: 20px; height: 20px; }
  .rail-spacer { min-height: 4px; }
  /* Controls go in a row at the top right; pinch zooms, so the +/- pair is dropped on touch screens */
  #controls { flex-direction: row; top: 14px; }
  #searchwrap { width: min(420px, calc(100vw - var(--L) - var(--R) - 250px)); }
  #drawer { top: 66px; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); }
  #drawbar { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .x-floatbar { top: 66px; }
  #huntTab { top: auto; bottom: calc(90px + env(safe-area-inset-bottom)); transform: none; }
}
@media (min-width: 721px) and (max-height: 520px) and (pointer: coarse) {
  #controls .ctl-group { display: none; }
}

@media (max-width: 720px) {
  /* Sheets size to the visible screen (Safari's toolbars come and go) */
  #sidepanel, #huntpanel, #drawer { max-height: 64vh; max-height: 64dvh; }
  #sidepanel { height: 64vh; height: 64dvh; }
  #huntpanel { height: 76vh; height: 76dvh; max-height: 76vh; max-height: 76dvh; }
  #ctxmenu { max-height: 70dvh; }
  .hx-chat { max-height: calc(76dvh - 260px); }
  .modal-card { max-height: 85dvh; }
  .suggest { max-height: 55dvh; }
  #toolbar button { min-width: 54px; padding: 6px 8px; }
}
/* Phones and any touch screen (tablets, landscape phones) */
@media (max-width: 720px), (pointer: coarse) {
  /* iOS zooms the page when a focused field is under 16px */
  .text, textarea.text, .sp select, #huntpanel select, #drawer select, .modal-card input, .fc-select select, #drawer input, #huntpanel input:not([type=checkbox]):not([type=radio]):not([type=range]) { font-size: 16px; }
  /* 44px tap targets; visual weight stays close to before */
  .x { min-width: 44px; min-height: 44px; margin: -8px -12px -8px 0; font-size: 26px; }
  .btn-accent, .btn-dark, .db-btns button, .actions a, .actions button, .row-btns button { min-height: 44px; }
  .text, select.text { min-height: 44px; }
  .tabs button, .seg button, .hx-days button, .hx-cats button { min-height: 44px; }
  .toggle { min-height: 44px; }
  .fc-toggle { min-height: 44px; margin-bottom: 0; }
  input[type=range] { height: 32px; }
  #toolbar button { min-height: 48px; font-size: 11.5px; }
  .rail-btn { font-size: 11.5px; }
  .cm-coords button { padding: 12px 14px; margin: -10px -8px; }
  #wxCenter { padding: 10px 12px !important; margin: -8px 0; font-size: 12px !important; }
  .hx-menu-btn { width: 44px; height: 40px; }
  .ci .eye { min-width: 44px; min-height: 44px; }
  .icon-grid button { min-height: 40px; }
  .colors button { width: 32px; height: 32px; }
  .ctl { width: 44px; height: 44px; }
  .search input { font-size: 16px; }
  select.text { -webkit-appearance: none; appearance: none; padding-right: 32px; background: #141414 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239b9b9b' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center; }
  .hx-card select.text { background-color: #161616; }
  .ovl-gh, .cm-item { min-height: 44px; }
  .rail-logo { min-height: 44px; }
  /* No keyboard on a touch screen: hide shortcut hints */
  .search kbd, .sp .desktop-only, .cm-item kbd { display: none; }
  /* 12px floor for reading text in the sheets */
  .plan-card p, .stat span, .hour .t, .hour .w, .fc-days button, .fc-best-label, .fc-dial span, .fc-h span, .fc-place span, .fc-row em, .basemaps button, .chip, .ovl-gh em, .hx-lbl, .tl small, .hx-tabs button, .hx-role, .hx-time, .hx-sys, .hx-from { font-size: 12px; }
  .tier-badge, .tool-grid button > .tier-badge { font-size: 9.5px; }
}
/* Tablets with a panel open: the tool bar fits the map space left over */
@media (min-width: 721px) and (max-width: 1000px) {
  body.side-open #toolbar button, body.hunt-open #toolbar button { min-width: 56px; padding: 7px 8px; }
}