:root{box-sizing:border-box;
  --bg:#E9ECF7;--surface:#FFFFFF;--surface-2:#F2F4FB;--ink:#1A1D35;--ink-2:#50567A;--line:#D5D9EC;--accent:#4B3FD6;--accent-ink:#fff;--accent-soft:#E4E1FF;
  --rose:#C92A65;--ok:#17734A;--danger:#B8232A;--focus:#FFB300;--shadow:0 10px 30px rgba(26,29,53,.18);
  --font:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--display:'Bricolage Grotesque','Atkinson Hyperlegible',system-ui,sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0E1230;--surface:#181D45;--surface-2:#21275C;--ink:#EEF0FF;--ink-2:#AAB0DB;--line:#323A78;--accent:#A193FF;--accent-ink:#0E1230;--accent-soft:#2C2A6A;--rose:#FF7EAD;--ok:#5EE39C;--danger:#FF7171;--shadow:0 10px 30px rgba(0,0,0,.5)}}
:root[data-theme="dark"]{--bg:#0E1230;--surface:#181D45;--surface-2:#21275C;--ink:#EEF0FF;--ink-2:#AAB0DB;--line:#323A78;--accent:#A193FF;--accent-ink:#0E1230;--accent-soft:#2C2A6A;--rose:#FF7EAD;--ok:#5EE39C;--danger:#FF7171;--shadow:0 10px 30px rgba(0,0,0,.5)}
:root[data-contrast="high"]{--ink-2:var(--ink);--line:var(--ink);--shadow:none}
:root[data-motion="reduce"] *{animation:none!important;transition:none!important}
:root[data-read="1"] body{font-family:'Lexend',var(--font);letter-spacing:.03em;word-spacing:.12em;line-height:1.7}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1rem;line-height:1.5;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--display);line-height:1.15;margin:0}h2{font-size:1.3rem}h3{font-size:1.02rem}p{margin:0}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:44px;padding:.5em 1.05em;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-weight:700;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--ink-2)}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn.danger{color:var(--danger);border-color:var(--danger)}.btn.ghost{background:transparent;border-color:transparent}.btn.small{min-height:36px;padding:.3em .85em;font-size:.92rem}.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent)}
.icon-btn{width:44px;height:44px;border-radius:50%;display:inline-grid;place-items:center;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font-size:1.1rem;flex:none;position:relative;padding:0}
.icon-btn.small{width:34px;height:34px;font-size:.9rem}.icon-btn[aria-pressed="true"],.icon-btn.accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.icon-btn .dot{position:absolute;top:2px;right:2px;width:11px;height:11px;border-radius:50%;background:var(--rose);border:2px solid var(--surface)}
.chip{display:inline-flex;align-items:center;gap:.35em;min-height:34px;padding:.2em .75em;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-weight:700;font-size:.9rem;cursor:pointer;position:relative;flex:none}
.chip[aria-pressed="true"],.chip:has(input:checked){background:var(--accent-soft);border-color:var(--accent)}.chip input{position:absolute;opacity:0;pointer-events:none}
.chip:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.chips{display:flex;gap:.35rem;flex-wrap:wrap}
.tag{display:inline-block;padding:.08em .5em;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);font-size:.78rem;font-weight:700;color:var(--ink-2)}
.tag.live{background:var(--rose);border-color:var(--rose);color:#fff}.tag.demo{border-style:dashed}
.muted{color:var(--ink-2)}.small{font-size:.88rem}.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.stack{display:grid;gap:.8rem}
.input{width:100%;min-height:44px;padding:.5em .8em;border-radius:12px;border:1.5px solid var(--line);background:var(--surface-2);min-width:0}.input:focus{border-color:var(--accent)}
.field{display:grid;gap:.3rem}.field>label,.field>span{font-weight:700}
fieldset{border:0;padding:0;margin:0;min-width:0}legend{font-weight:700;margin-bottom:.4rem;padding:0}
.switch{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.45rem 0;cursor:pointer}.switch small{display:block;color:var(--ink-2);font-weight:400}
.switch input{appearance:none;width:50px;height:30px;border-radius:15px;background:var(--line);position:relative;flex:none;cursor:pointer;margin:0}.switch input::after{content:"";position:absolute;top:5px;left:5px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .18s}.switch input:checked{background:var(--accent)}.switch input:checked::after{transform:translateX(20px)}
.card{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:.8rem}.card.soft{background:var(--surface-2)}
#app{height:100%;position:relative}
.brand{display:flex;align-items:center;gap:.5rem;background:none;border:0;cursor:pointer;color:var(--ink);padding:.2rem}
.brand-mark{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFE2AE 0 18%,#33449A 19% 100%);position:relative}.brand-mark::after{content:"";position:absolute;right:-3px;top:-3px;width:11px;height:11px;border-radius:50%;background:var(--rose);border:2px solid var(--surface)}
.search{position:relative;display:flex;gap:.35rem;flex:1;min-width:0;background:var(--surface-2);border:1.5px solid var(--line);border-radius:14px;padding:.25rem}
.search:focus-within{border-color:var(--accent)}.search input{flex:1;min-width:0;border:0;background:transparent;padding:.35rem .6rem;font-size:1rem}.search input:focus{outline:none}
.results{position:absolute;top:calc(100% + .4rem);left:0;right:0;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;box-shadow:var(--shadow);max-height:60vh;overflow-y:auto;padding:.3rem;z-index:30}
.res{display:grid;grid-template-columns:30px 1fr;gap:.55rem;align-items:center;padding:.5rem .55rem;border-radius:10px;cursor:pointer}.res[aria-selected="true"],.res:hover{background:var(--accent-soft)}.res b{display:block;line-height:1.25}.res span{font-size:.84rem;color:var(--ink-2)}
.status{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:700;padding:.25rem .65rem;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;white-space:nowrap}
.status i{width:9px;height:9px;border-radius:50%;background:var(--ink-2)}.status.live i{background:var(--ok)}
.me-btn{display:flex;align-items:center;gap:.45rem;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:.2rem .8rem .2rem .2rem;min-height:44px;font-weight:700;cursor:pointer}.me-btn img{width:36px;height:36px;border-radius:50%;background:var(--surface-2)}
.stage{position:absolute;inset:0;overflow:hidden}
#map{position:absolute;inset:0;outline:none}#map:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
/* Covers the map while you travel, until the street has loaded in full detail. Panels stay usable above it. */
.veil{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,#2B3474,#0E1230 72%);transition:opacity .45s}.veil.out{opacity:0;pointer-events:none}
.veil-card{display:grid;gap:.35rem;justify-items:center;text-align:center;padding:1.1rem 1.4rem;border-radius:20px;background:var(--surface);border:1.5px solid var(--line);box-shadow:var(--shadow);max-width:calc(100% - 2rem)}
.veil-spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:veilspin .9s linear infinite}@keyframes veilspin{to{transform:rotate(360deg)}}
.cesium-viewer-bottom{display:none}
/* Map credits (Google's logo and data attributions) must stay visible: a row of their own along the bottom (css/hud.css). */
.credits{font-size:.68rem;line-height:1.35;color:#fff;text-shadow:0 1px 2px #000}
.credits .cesium-widget-credits{position:static;display:block;padding:0;font-size:inherit}.credits a{color:#fff}.credits img{max-height:18px;vertical-align:middle}
.panel,.chat{display:grid;min-height:0}
.panel{grid-template-rows:auto auto 1fr}.chat{grid-template-rows:auto auto 1fr auto}
.tabs{display:flex;gap:.2rem;padding:.4rem .6rem 0;border-bottom:1px solid var(--line)}
.tab{flex:1;min-height:42px;background:none;border:0;border-bottom:3px solid transparent;font-weight:700;color:var(--ink-2);cursor:pointer}.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.panel-body{overflow-y:auto;min-height:0;padding:.6rem}
.list{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.item{width:100%;display:grid;grid-template-columns:38px 1fr auto;gap:.6rem;align-items:center;text-align:left;padding:.55rem;border-radius:14px;border:1.5px solid transparent;background:transparent;color:var(--ink);cursor:pointer}.item:hover{background:var(--surface-2)}
.glyph{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:1.1rem;color:#fff;background:var(--accent)}
.i-name{display:block;font-weight:700;line-height:1.25}.i-sub{display:block;font-size:.84rem;color:var(--ink-2)}
.section-h{font-size:.92rem;font-weight:700;color:var(--ink-2);margin:.8rem .3rem .35rem}
.empty{padding:1rem;text-align:center;color:var(--ink-2);display:grid;gap:.6rem;justify-items:center}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:.65rem .8rem .3rem}
.chat .chips{padding:.2rem .8rem .4rem}
.log{overflow-y:auto;min-height:0;padding:.4rem .8rem;display:grid;gap:.55rem;align-content:start}
.msg{display:grid;grid-template-columns:28px 1fr;gap:.5rem}.msg img{width:28px;height:28px;border-radius:50%;background:var(--surface-2)}
.msg .who{font-weight:700;font-size:.9rem}.msg .who small{font-weight:400;color:var(--ink-2);margin-left:.3rem}.msg .txt{overflow-wrap:anywhere}.msg .meta{font-size:.78rem;color:var(--ink-2)}
.msg.mine .who{color:var(--accent)}.msg.system{grid-template-columns:1fr;text-align:center;font-size:.84rem;color:var(--ink-2)}.msg.old{opacity:.75}
.linkish{background:none;border:0;padding:0;color:var(--accent);font-weight:700;text-decoration:underline;cursor:pointer}
.composer{border-top:1px solid var(--line);padding:.5rem .8rem;display:grid;gap:.4rem}.quick{flex-wrap:nowrap;overflow-x:auto;padding:0!important}.send{display:flex;gap:.4rem}
.where{font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.modes{display:flex;gap:.3rem;flex:none}
.cornerhud,.tourcard{border-radius:18px;padding:.8rem .9rem;display:grid;gap:.5rem}
.cornerhud{max-height:60vh;overflow-y:auto}
.links{display:flex;gap:.35rem;flex-wrap:wrap}.linkbtn{display:inline-flex;align-items:center;gap:.35rem;min-height:36px;padding:.25rem .7rem;border-radius:10px;border:1.5px solid var(--line);background:var(--surface-2);color:var(--ink);font-weight:700;font-size:.86rem;text-decoration:none}
.party{border:1.5px solid var(--rose);border-radius:12px;padding:.5rem .6rem;display:grid;gap:.35rem}
.joy{display:none;position:relative;width:120px;height:120px;border-radius:50%;background:rgba(18,20,42,.25);border:2px solid rgba(255,255,255,.5);touch-action:none;flex:none}
.joy .knob{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.85)}
body.street.touch .joy{display:block}
#onboard{position:fixed;inset:0;z-index:50;background:linear-gradient(160deg,#B7C3EC,#E6EAF9);overflow-y:auto;padding:1rem}
:root[data-theme="dark"] #onboard{background:linear-gradient(160deg,#060920,#161C4C)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #onboard{background:linear-gradient(160deg,#060920,#161C4C)}}
.ob-card{max-width:680px;margin:2vh auto;background:var(--surface);border:1.5px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:1.4rem;display:grid;gap:1rem}
.ob-hero{font-size:clamp(2rem,6vw,3rem);font-weight:800;letter-spacing:-.02em;line-height:1.02}
.steps{display:flex;gap:.35rem}.steps span{flex:1;height:6px;border-radius:3px;background:var(--line)}.steps span.on{background:var(--accent)}
.builder{display:grid;grid-template-columns:170px 1fr;gap:1rem;align-items:start}.preview{border-radius:18px;background:linear-gradient(180deg,#B7C3EC,#E6EAF9);display:grid;place-items:center;padding:.5rem}.preview canvas{width:150px;height:300px}
.swatches{display:flex;gap:.4rem;flex-wrap:wrap}.swatch{position:relative}.swatch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}.swatch span{display:grid;place-items:center;min-width:42px;height:42px;border-radius:21px;border:3px solid transparent;background:var(--surface-2);padding:0 .65rem;font-weight:700;font-size:.88rem}.swatch.col span{width:42px;padding:0}.swatch input:checked+span{border-color:var(--accent)}.swatch input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
dialog{border:0;padding:0;border-radius:22px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);width:min(600px,calc(100vw - 1.5rem));max-height:calc(100dvh - 2rem)}dialog.wide{width:min(820px,calc(100vw - 1.5rem))}dialog::backdrop{background:rgba(10,12,35,.55)}
.m-inner{display:grid;grid-template-rows:auto 1fr;max-height:calc(100dvh - 2rem)}.m-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.1rem .4rem}.m-body{padding:.3rem 1.1rem 1.2rem;overflow-y:auto;display:grid;gap:.9rem}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:.45rem}.theme-opt{position:relative}.theme-opt input{position:absolute;inset:0;opacity:0;margin:0}.theme-opt span{display:grid;gap:.15rem;padding:.55rem;border-radius:14px;border:2px solid var(--line);background:var(--surface-2);font-weight:700;font-size:.88rem;min-height:70px}.theme-opt input:checked+span{border-color:var(--accent);background:var(--accent-soft)}.theme-opt input:focus-visible+span{outline:3px solid var(--focus)}
.linkrow{display:grid;grid-template-columns:1fr auto;gap:.4rem;align-items:center}.linkrow .det{font-size:.8rem;font-weight:700;color:var(--ink-2);min-width:96px;text-align:right}
.kbd{display:inline-block;min-width:1.8em;padding:.05em .4em;border:1.5px solid var(--line);border-bottom-width:3px;border-radius:6px;font-weight:700;font-size:.85rem;text-align:center;background:var(--surface-2)}
.shortcuts{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;align-items:center}
@media (max-width:860px){
  .hide-sm{display:none!important}
  .builder{grid-template-columns:1fr}
  .veil{place-items:start center;padding-top:18vh}
}

/* The street-level world sits over the aerial map; panels, the curtain and the HUD stay above it. */
#world{position:absolute;inset:0;z-index:1;display:block;outline:none;touch-action:none}#world[hidden]{display:none}#world:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.world-credits{display:none}body.street .world-credits{display:block}body.street #credits{display:none}
.wx{font-weight:700;font-size:.88rem;white-space:nowrap;flex:none}
.ctx{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;max-width:100%}
.tabletalk{border-radius:18px;padding:.7rem .85rem;display:grid;gap:.45rem}.tabletalk .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.15rem}.tabletalk .chip{min-height:30px;font-size:.82rem}
.tt-q{font-family:var(--display);font-size:1.12rem;line-height:1.3;margin:0}
.venuecard h2{font-size:1.2rem}
/* Messages: private chats, groups and friends. In the left drawer's place on desktop, a bottom sheet on phones (css/hud.css). */
.icon-btn .badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--rose);color:var(--surface);border:2px solid var(--surface);font-size:.72rem;font-weight:700;line-height:16px;text-align:center}
.msgs{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.msgs-head{display:flex;align-items:center;gap:.55rem;padding:.65rem .8rem .45rem}.msgs-head>h2{flex:1;min-width:0}.msgs-head h2{font-size:1.15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.msgs-head .glyph{width:34px;height:34px;flex:none}
.t-title{flex:1;min-width:0;display:grid}.t-title .small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-acts{padding:0 .8rem .55rem;border-bottom:1px solid var(--line);gap:.4rem}
.msgs-body{flex:1;min-height:0;overflow-y:auto;padding:.6rem}.msgs .log{flex:1;padding-top:.6rem}.msgs .log>.btn{justify-self:center}
.msgs .item .i-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.i-meta{display:grid;justify-items:end;gap:.3rem}
.unread{width:11px;height:11px;border-radius:50%;background:var(--rose)}
.tab .n{display:inline-block;min-width:1.5em;padding:0 .4em;border-radius:999px;background:var(--rose);color:var(--surface);font-size:.75rem;line-height:1.5}
.glyph.av{border-radius:50%;background:var(--surface-2)}
.empty strong{color:var(--ink)}.on{color:var(--ok)}.card.warn{border-color:var(--rose)}label.section-h{display:block}
/* Meeting spots: an invite in a chat, with a button that takes you there. */
.meetcard{display:grid;gap:.25rem;justify-items:start;margin-top:.35rem;padding:.55rem .7rem;border:1.5px solid var(--rose);border-radius:14px;background:var(--surface-2);max-width:290px}.meetcard strong{overflow-wrap:anywhere}
/* Guided walks: the card for joining a walk and following it, with the guide's words and the stops so far. */
.walkcard{max-height:46vh;overflow-y:auto}.walkcard h2{font-size:1.15rem}
.wcap{font-size:.95rem;line-height:1.45;margin:0}.wcap strong{color:var(--rose)}
.wdots{display:flex;gap:.3rem;align-items:center}.wdot{width:9px;height:9px;border-radius:50%;background:var(--line)}.wdot.on{background:var(--rose)}
.tag.guide{background:var(--rose);color:var(--surface);border-color:var(--rose)}
@media (max-width:860px){.walkcard{max-height:38vh}}
/* Property agents: the conversation panel (laid out like Messages) and the plan they propose. */
.plan{margin:0 .8rem .6rem;border-color:var(--accent)}.plan h3{margin:0;font-size:1.1rem}
.est{width:100%;border-collapse:collapse}.est td,.est th{padding:.2rem 0;text-align:left;border-bottom:1px solid var(--line)}.est td:last-child,.est th:last-child{text-align:right;white-space:nowrap}
/* Photos: a quick white flash when you take one (skipped with reduced motion). */
.flash{position:fixed;inset:0;background:#fff;pointer-events:none;z-index:60;animation:flash .45s ease-out forwards}@keyframes flash{from{opacity:.85}to{opacity:0}}
/* Touch screens: a jump button opposite the joystick. */
.jumpbtn{display:none;width:64px;height:64px;border-radius:50%;place-items:center;font-size:1.6rem;font-weight:800;color:#fff;background:rgba(18,20,42,.45);border:2px solid rgba(255,255,255,.6);touch-action:manipulation}
body.street.touch .jumpbtn:not([hidden]){display:grid}
/* Things to do (js/activities.js): the dock's main button, with a soft pulse until it's first used. */
.dobtn{flex:none;white-space:nowrap}
.dobtn.fresh{animation:dopulse 1.8s ease-out 5}
@keyframes dopulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
/* Trips (js/journey.js): where you're going, how long and the next turn; and the place's name when you get there. */
.tripcard{border-radius:18px;padding:.6rem .75rem;display:grid;gap:.45rem}
.tripcard .glyph{background:#0891b2;flex:none}
.arrival{position:absolute;left:50%;top:20%;transform:translate(-50%,-10px);z-index:8;text-align:center;pointer-events:none;opacity:0;transition:opacity .7s ease,transform .7s ease;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.6),0 0 2px rgba(0,0,0,.6);width:min(90%,720px)}
.arrival strong{display:block;font-family:var(--display);font-size:clamp(1.5rem,4vw,2.6rem);letter-spacing:.06em;text-transform:uppercase;line-height:1.1}
.arrival span{display:block;font-size:1rem;margin-top:.3rem;letter-spacing:.02em}
.arrival.show{opacity:1;transform:translate(-50%,0)}
/* Things to do (js/activities.js): the guide's greeting, what you feel like, and ideas with their reasons and ways there. */
.guide-head{display:grid;gap:.25rem;margin:-.2rem 0 .5rem}.guide-head strong{font-family:var(--display);font-size:1.25rem}
.chip.static{cursor:default;min-height:26px;padding:.15rem .55rem;font-size:.78rem;background:var(--surface-2);border-color:transparent;color:var(--ink)}
.vibes{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.25rem;margin:.2rem 0 .1rem;flex:none;min-height:44px}.vibes .chip{flex:none}.vibes .chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.ideas{display:grid;gap:.55rem}
.idea{border:1.5px solid var(--line);border-radius:16px;padding:.55rem .6rem;display:grid;gap:.45rem;background:var(--surface)}
.idea-main{display:grid;grid-template-columns:38px 1fr;gap:.6rem;align-items:start;text-align:left;background:none;border:0;padding:0;color:var(--ink);cursor:pointer;width:100%;font:inherit}
.idea-main:hover .i-name{text-decoration:underline}
.idea-txt{display:grid;gap:.15rem;min-width:0}
.idea-when{color:var(--ink)!important;font-weight:700}
.idea-why{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.15rem}
.idea-go{display:flex;flex-wrap:wrap;gap:.35rem;padding-left:calc(38px + .6rem)}
.ideas.compact .idea-why{display:none}.ideas.compact .idea{padding:.45rem .5rem}
@media (max-width:860px){.idea-go{padding-left:0}}
/* Pickup matches (js/match.js): the score and the clock. */
.matchcard .score{font-family:var(--display);font-size:1.5rem;font-weight:800;letter-spacing:.02em}
/* The map (js/minimap.js): a mini map that turns with you, at the top right under the toolbar, and the big map. */
.minimap{position:relative;width:164px;height:164px;border-radius:50%;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.45);border:3px solid rgba(255,255,255,.85);background:#101828;overflow:visible}
.minimap canvas{width:100%;height:100%;border-radius:50%;display:block}
.minimap:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.mm-n{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:0;background:#f8fafc;color:#b91c1c;font:800 .7rem/22px system-ui,sans-serif;padding:0;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.mm-n[aria-pressed="true"]{background:#fde68a}
.mm-dist{position:absolute;left:50%;bottom:-.65rem;transform:translateX(-50%);background:#0891b2;color:#fff;font:700 .72rem/1 system-ui,sans-serif;padding:.25rem .5rem;border-radius:999px;white-space:nowrap}
.bigmap{position:absolute;inset:.75rem .75rem 1.9rem;z-index:30;background:#101828;border-radius:20px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;box-shadow:var(--shadow);border:1.5px solid rgba(255,255,255,.18)}
.bm-top{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;background:var(--surface);color:var(--ink)}.bm-top .chips{flex:1;flex-wrap:nowrap;overflow-x:auto;min-width:0}
.bigmap canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.bm-zoom{position:absolute;right:.75rem;top:4.2rem;display:grid;gap:.4rem}
.bm-card{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);width:min(460px,calc(100% - 2rem));background:var(--surface);color:var(--ink);border-radius:16px;padding:.7rem .8rem;display:grid;gap:.35rem;box-shadow:var(--shadow)}
.bm-top .chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
/* Who's with you (js/party.js): a strip in the stack of cards at the top left. */
.partycard{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;border-radius:14px;padding:.3rem .45rem}
.partycard .chip .x{border:0;background:none;padding:0 0 0 .2rem;cursor:pointer;color:var(--ink-2);font-size:.75rem}