:root{
  --paper:#e8edf1; --card:#ffffff; --ink:#17233a; --muted:#56637a; --line:#cdd5de;
  --warn:#c8402f; --good:#2f8f5b; --city:#f5b700;
  --display:"Bricolage Grotesque","Avenir Next Condensed","Trebuchet MS",sans-serif;
  --body:"Figtree","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--paper:#111927;--card:#1a2536;--ink:#e9eef6;--muted:#9aa7bd;--line:#2d3b53;--warn:#ff8a78;--good:#6fd29b}
}
:root[data-theme="dark"]{--paper:#111927;--card:#1a2536;--ink:#e9eef6;--muted:#9aa7bd;--line:#2d3b53;--warn:#ff8a78;--good:#6fd29b}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{height:100%;margin:0;background:var(--paper);color:var(--ink);font:500 15px/1.4 var(--body);-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.05;letter-spacing:-.01em}

/* ---------- onboarding ---------- */
#onboard{overflow-y:auto;height:100%}
.ob{max-width:560px;margin:0 auto}
.ob-map{position:relative;background:linear-gradient(#cfe3f1,#eaf2f7);border-bottom:3px solid var(--ink)}
.ob-map canvas{display:block;width:100%;height:auto}
.ob-title{position:absolute;left:16px;bottom:10px;right:16px;pointer-events:none}
.ob-title h1{font-size:clamp(44px,15vw,84px);font-weight:800;color:#17233a;letter-spacing:-.04em;text-shadow:0 2px 0 #fff,2px 0 0 #fff,-2px 0 0 #fff,0 -2px 0 #fff}
.ob-body{padding:18px 16px 28px}
.ob-body p{margin:0 0 18px;color:var(--muted);max-width:46ch}
.field{display:block;font-weight:700;margin:0 0 6px}
.text{width:100%;padding:11px 13px;border:2px solid var(--ink);border-radius:12px;background:var(--card);font-size:16px;min-width:0}
.swatches{display:flex;gap:10px;margin:0 0 20px;flex-wrap:wrap}
.sw{width:38px;height:38px;border-radius:50%;border:3px solid transparent;background:var(--c)}
.sw[aria-checked="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 3px var(--card)}
.board{border:2px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--card);margin-bottom:18px}
.row{display:grid;grid-template-columns:14px 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .dot{width:14px;height:14px;border-radius:50%;background:var(--c);border:2px solid var(--ink)}
.row b{font-family:var(--display);font-size:19px;font-weight:700;display:block}
.row small{color:var(--muted);font-size:13px;display:block}
.row .n{font-size:13px;color:var(--muted);white-space:nowrap}
.row[aria-checked="true"]{background:var(--c);color:#17233a}
.row[aria-checked="true"] small,.row[aria-checked="true"] .n{color:#17233a}
.btn{display:block;width:100%;padding:14px 18px;border-radius:14px;background:var(--city);color:#17233a;font-family:var(--display);font-weight:700;font-size:19px;border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink);text-align:center}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn.quiet{background:var(--card);color:var(--ink);box-shadow:none;font-size:15px;padding:10px 14px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- sign-up ---------- */
.ob2{height:100%;display:grid;grid-template-rows:auto minmax(170px,36vh) 1fr;max-width:1280px;margin:0 auto}
.obtop{display:flex;align-items:center;justify-content:space-between;padding:10px 14px}
.obhead{text-align:center}.obhead b{font:800 22px var(--display)}
.dots{display:flex;gap:5px;justify-content:center;margin-top:5px}.dots i{width:22px;height:4px;border-radius:2px;background:var(--line)}.dots i.on{background:var(--good)}
.obstage{position:relative;background:linear-gradient(#cfe3f1,#eef3f7);border-block:3px solid var(--ink);min-height:0}
.obstage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;object-fit:contain}
#avPrev{cursor:grab}
.obstage .tag{position:absolute;left:0;right:0;bottom:6px;text-align:center;margin:0;color:#56637a;pointer-events:none}
.obside{min-height:0;display:flex;flex-direction:column;padding:12px 14px calc(14px + env(safe-area-inset-bottom,0px));gap:10px}
#obPanel{flex:1;min-height:0;overflow-y:auto;padding-right:2px}
#obPanel .swatches{margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.chip{padding:9px 14px;border-radius:999px;border:2px solid var(--line);background:var(--card);font-weight:700;font-size:14px}
.chip[aria-checked="true"]{background:var(--ink);color:var(--card);border-color:var(--ink)}
.cardgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tcard{display:block;text-align:left;padding:12px;border-radius:14px;border:2px solid var(--line);background:var(--card)}
.tcard.wide{width:100%;margin-top:8px}
.tcard i{font-style:normal;font-size:22px;display:block}.tcard b{display:block;font:700 16px var(--display);margin:2px 0}.tcard small{color:var(--muted);font-size:13px;display:block}
.tcard[aria-pressed="true"]{border-color:var(--ink);background:var(--city);color:#17233a}.tcard[aria-pressed="true"] small{color:#17233a}
#tourRing{position:fixed;z-index:50;border:3px solid #fff;border-radius:14px;box-shadow:0 0 0 4000px rgba(10,16,28,.55);pointer-events:none}
#tour{position:fixed;z-index:51;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(440px,calc(100% - 24px));background:var(--card);border:3px solid var(--ink);border-radius:18px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
#tour.up{bottom:auto;top:calc(90px + env(safe-area-inset-top,0px))}
#tour b{font:800 20px var(--display)}#tour p{margin:4px 0 10px;color:var(--muted)}
.tourbtns{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin-top:12px}
@media (min-width:960px){.ob2{grid-template-columns:1fr 460px;grid-template-rows:auto 1fr}.obtop{grid-column:1/3}.obstage{border:0;border-top:3px solid var(--ink);border-right:3px solid var(--ink)}.obside{border-top:3px solid var(--ink);padding:20px 22px}}

/* ---------- game shell ---------- */
#game{display:flex;flex-direction:column;height:100%}
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:10px 14px 8px;border-bottom:3px solid var(--ink);background:var(--city);color:#17233a}
.top h2{font-size:26px;font-weight:800;letter-spacing:-.03em}
.top .clock{font-size:13px;font-weight:600}
.top .cash{font-family:var(--display);font-weight:700;font-size:22px;white-space:nowrap;text-align:right}
.top .cash small{display:block;font:600 12px var(--body)}
.law{padding:6px 14px;font-size:13px;background:var(--card);border-bottom:1px solid var(--line)}
.body{flex:1;min-height:0;display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto auto}
.side{display:contents}
.stage{grid-row:1;grid-column:1;position:relative;min-height:0}
.panels{grid-row:1;grid-column:1;position:relative;min-height:0;z-index:2}
.panels:not(.on){display:none}
.mapwrap{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;transition:background .6s}
.world{position:relative;margin:28vh 46vw}
.world canvas{display:block}
#pins{position:absolute;inset:0}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#pins3d{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#pins3d>*{pointer-events:auto}
#pins3d.far .pin span{display:none}
.pin{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px}
.pin i{width:38px;height:38px;border-radius:50%;background:#fff;border:2px solid #17233a;font-size:19px;line-height:1;display:grid;place-items:center;box-shadow:0 3px 0 #17233a;font-style:normal}
.pin[aria-current="true"] i{background:var(--city)}
.pin span{display:none;font-size:11px;font-weight:700;background:#17233a;color:#fff;padding:2px 7px;border-radius:8px;white-space:nowrap}
.adhit{position:absolute;border-radius:4px}
.zoom{position:absolute;right:12px;top:12px;z-index:1;display:flex;flex-direction:column;gap:6px}
.zoom button[aria-pressed="true"]{background:var(--city);color:#17233a}
.zoom button{width:38px;height:38px;border-radius:10px;background:var(--card);border:2px solid var(--ink);font-weight:800;font-size:20px;line-height:1}
.dock{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;display:flex;gap:8px;flex-wrap:wrap;pointer-events:none}
.dock>*{pointer-events:auto}
.hoodlab{position:absolute;transform:translate(-50%,-50%);font:700 13px var(--display);background:rgba(23,35,58,.88);color:#fff;padding:4px 10px;border-radius:10px;border:2px solid #fff;white-space:nowrap}
#trip{position:absolute;left:12px;top:12px;z-index:3;width:min(430px,calc(100% - 24px));background:rgba(23,35,58,.86);color:#fff;border-radius:18px;padding:12px 14px;backdrop-filter:blur(6px)}
#trip .tr1{font-size:13px;font-weight:600;opacity:.85}#trip .tr2{display:flex;justify-content:space-between;align-items:center;font:800 24px var(--display);margin:2px 0 6px}#trip .tr2 span{opacity:.6;font-size:18px}
#trip .bar{background:rgba(255,255,255,.25)}#trip .bar i{background:#ffd84d}#trip p{margin:8px 0;font-size:14px}#trip .chips{margin:0}#trip .chip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#fff;font-size:13px;padding:7px 11px}#trip .chip[aria-checked="true"]{background:#fff;color:#17233a;border-color:#fff}
.waterlab{position:absolute;transform:translate(-50%,-50%);font:italic 700 14px var(--body);color:#fff;text-shadow:0 1px 3px rgba(10,40,80,.8);white-space:nowrap;pointer-events:none;letter-spacing:.04em}
.bubble{position:absolute;transform:translate(-50%,-100%);font:600 12px var(--body);background:#fff;color:#17233a;padding:4px 9px;border-radius:12px 12px 12px 2px;border:1.5px solid #17233a;white-space:nowrap;pointer-events:none}
#pins3d.far .bubble{display:none}
.fwylab{position:absolute;transform:translate(-50%,-50%);font:800 11px var(--body);background:#1f6f43;color:#fff;padding:2px 7px;border-radius:6px;border:1.5px solid #fff;white-space:nowrap;pointer-events:none}
#pins3d>.fwylab{pointer-events:none}
.hoodlab[aria-current="true"]{background:var(--city);color:#17233a;border-color:#17233a}
.modebtn{padding:8px 12px;border-radius:12px;background:var(--card);border:2px solid var(--ink);font-weight:700;font-size:14px;box-shadow:0 3px 0 var(--ink);max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel{position:absolute;inset:0;overflow-y:auto;background:var(--paper);padding:16px 14px 24px}
.panel h3{font-size:22px;margin-bottom:10px}
.panel h3:not(:first-child){margin-top:22px}
.panel p{margin:0 0 10px}
.box{background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:6px 14px}
.kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.kv>span:last-child{font-weight:700;text-align:right}
.kv .mini{font-size:12px;font-weight:700;padding:4px 9px;border-radius:8px;border:2px solid var(--ink);margin-left:8px;background:var(--card)}
.kv .mini[aria-pressed="true"]{background:var(--city);color:#17233a}
.muted{color:var(--muted)}
.vote{display:grid;grid-template-columns:1fr auto;gap:2px 12px;width:100%;text-align:left;padding:10px 12px;border:2px solid var(--line);border-radius:12px;margin-top:8px;background:var(--card)}
.vote b{font-weight:700}
.vote small{grid-column:1;color:var(--muted);font-size:13px}
.vote .t{grid-row:1/3;grid-column:2;align-self:center;font-family:var(--display);font-weight:700;font-size:20px}
.vote[aria-pressed="true"]{border-color:var(--ink);background:var(--city);color:#17233a}
.vote[aria-pressed="true"] small{color:#17233a}
.goal{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.goal:last-child{border-bottom:0}
.goal i{width:20px;height:20px;border-radius:6px;border:2px solid var(--ink);flex:none;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:800}
.goal.done i{background:var(--good);color:#fff;border-color:var(--good)}
.goal.done span{text-decoration:line-through;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cardp{aspect-ratio:4/3;border-radius:10px;border:2px dashed var(--line);display:grid;place-items:center;text-align:center;font-size:12px;color:var(--muted);padding:4px}
.cardp.got{border:2px solid var(--ink);background:var(--c);color:#17233a;font-weight:700}
.cardp i{font-style:normal;font-size:22px;display:block}
.chatlog{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.msg{background:var(--card);border-radius:12px;padding:8px 12px;border:1px solid var(--line);max-width:88%;overflow-wrap:anywhere}
.msg.me{align-self:flex-end;border-color:var(--ink)}
.msg b{display:block;font-size:12px;color:var(--muted)}
.chatbar{display:flex;gap:8px;position:sticky;bottom:0}
.chatbar .text{flex:1}
.chatbar button{padding:0 16px;border-radius:12px;background:var(--city);color:#17233a;border:2px solid var(--ink);font-weight:700}
.needs{grid-row:2;grid-column:1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:8px 14px;background:var(--card);border-top:3px solid var(--ink)}
.need span{display:flex;justify-content:space-between;font-size:12px;font-weight:600}
.need em{font-style:normal}
.bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:3px}
.bar i{display:block;height:100%;background:var(--good);border-radius:4px;transition:width .3s}
.need.low i{background:var(--warn)} .need.low span{color:var(--warn)}
.tabs{grid-row:3;grid-column:1;display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);border-top:1px solid var(--line)}
.tabs button{padding:11px 0 12px;font-weight:700;font-size:14px;color:var(--muted);border-top:3px solid transparent;margin-top:-1px}
.tabs button[aria-selected="true"]{color:var(--ink);border-top-color:var(--ink)}

/* ---------- sheet ---------- */
.scrim{position:fixed;inset:0;background:rgba(10,16,28,.35);z-index:20}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:21;background:var(--card);border-top:3px solid var(--ink);border-radius:20px 20px 0 0;max-height:76%;overflow-y:auto;padding:16px 14px calc(18px + env(safe-area-inset-bottom,0px))}
.sheet .in{max-width:532px;margin:0 auto}
.sheet header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.sheet h3{font-size:24px}
.sheet h4{font-size:17px;margin:18px 0 2px}
.x{width:36px;height:36px;border-radius:50%;border:2px solid var(--ink);font-weight:700;flex:none}
.act{display:block;width:100%;text-align:left;padding:11px 14px;border:2px solid var(--ink);border-radius:12px;margin-top:8px;background:var(--paper)}
.act b{display:block;font-weight:700;font-size:16px}
.act small{color:var(--muted);font-size:13px}
.act:disabled{opacity:.55;border-style:dashed;cursor:not-allowed}
.act:disabled small{color:var(--warn)}
.fx{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.fx label{font-size:12px;font-weight:700;display:block}
.fx .wide{grid-column:1/3}
.quote{margin:10px 0;font-weight:700}
.adview{border:2px solid var(--ink);border-radius:14px;padding:22px 16px;text-align:center;color:#17233a}
.adview b{display:block;font-family:var(--display);font-size:28px;font-weight:800;line-height:1.05;overflow-wrap:anywhere}
.adview span{display:block;margin-top:6px;font-weight:600;overflow-wrap:anywhere}
.tag{font-size:12px;color:var(--muted);margin-top:8px}
#toasts{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 104px);z-index:40;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;padding:0 14px}
.toast{background:#17233a;color:#fff;padding:9px 14px;border-radius:12px;font-size:14px;max-width:440px;box-shadow:0 6px 18px rgba(0,0,0,.25);animation:pop .2s ease-out}
@keyframes pop{from{transform:translateY(-6px);opacity:0}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}.bar i,.mapwrap{transition:none}}

/* ---------- laptop and desktop ---------- */
@media (min-width:960px){
  body{font-size:16px}
  .ob{max-width:1180px;display:grid;grid-template-columns:1.25fr 1fr;gap:0;min-height:100%}
  .ob-map{border-bottom:0;border-right:3px solid var(--ink);position:sticky;top:0;height:100vh;display:grid;place-items:center}
  .ob-title{left:32px;bottom:28px}
  .ob-body{padding:40px 36px}
  .top{padding:14px 24px 10px}.top h2{font-size:34px}.top .cash{font-size:28px}
  .law{padding:8px 24px;font-size:14px}
  .body{grid-template-columns:1fr 420px;grid-template-rows:1fr auto auto}
  .stage{grid-row:1/4;grid-column:1}
  .panels{grid-row:1;grid-column:2;border-left:3px solid var(--ink)}
  .panels:not(.on){display:block}
  .needs{grid-row:2;grid-column:2;border-left:3px solid var(--ink)}
  .tabs{grid-row:3;grid-column:2;border-left:3px solid var(--ink);grid-template-columns:repeat(3,1fr)}
  .tabs [data-tab="map"]{display:none}
  .pin span{display:block}
  .scrim{display:none}
  .sheet{left:auto;right:444px;bottom:24px;width:400px;border:3px solid var(--ink);border-radius:18px;max-height:calc(100% - 160px);box-shadow:8px 8px 0 rgba(23,35,58,.25)}
  #toasts{right:420px}
}

/* ---------- accounts and messages ---------- */
.warnline{color:var(--warn);font-weight:600;margin:6px 0 10px;min-height:0}
.warnline:empty{display:none}
.safe{border:2px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:16px;background:var(--paper);font-size:14px}
.safe ul{margin:6px 0 8px;padding-left:20px}
.safe li{margin:3px 0}
.safe p{margin:0;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.acct{padding:12px 14px;margin:0 0 12px}
.acct p{margin:8px 0 0}
.acct p:first-child{margin:0 0 10px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid var(--ink);border-radius:12px;overflow:hidden;margin-bottom:12px;background:var(--card)}
.seg button{padding:9px 4px;font-weight:700;font-size:14px;color:var(--muted)}
.seg button+button{border-left:2px solid var(--ink)}
.seg button[aria-selected="true"]{background:var(--ink);color:var(--card)}
.tabs button{position:relative}
.badge{display:inline-block;min-width:20px;padding:1px 6px;border-radius:10px;background:var(--warn);color:#fff;font:700 12px/18px var(--body);text-align:center;font-style:normal}
.tabs .badge{position:absolute;top:5px;left:calc(50% + 16px)}
.crow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 4px;border-bottom:1px solid var(--line)}
.crow[aria-pressed="true"]{background:var(--paper)}
.crow .tick{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none}
.crow[aria-pressed="true"] .tick{background:var(--good);border-color:var(--good)}
.crow[aria-pressed="true"] .tick::after{content:'✓';display:block;color:#fff;font-size:13px;font-weight:700;text-align:center;line-height:18px}
.cmid{flex:1;min-width:0;display:flex;flex-direction:column}
.cmid b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmid small{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cright{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.cright small{color:var(--muted);font-size:12px}
.gface{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:2px solid var(--ink);background:var(--city);flex:none}
#msgPane.thread{min-height:100%;display:flex;flex-direction:column}
.thead{position:sticky;top:-16px;z-index:3;display:flex;align-items:center;gap:10px;margin:-16px -14px 10px;padding:10px 14px;background:var(--paper);border-bottom:1px solid var(--line)}
.ttl{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-align:left}
.tlist{flex:1;display:flex;flex-direction:column;gap:6px;padding-bottom:8px}
.tday{align-self:center;font-size:12px;font-weight:700;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:2px 10px;margin:6px 0}
.tfoot{position:sticky;bottom:-24px;z-index:3;margin:0 -14px -24px;padding:8px 14px calc(10px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--line)}
.tfoot .chatbar{position:static;align-items:flex-end}
.tfoot textarea.text{resize:none;line-height:1.3;max-height:120px;font-family:inherit}
.tfoot .sendb,.tfoot .mic{height:46px}
.mic{width:50px;flex:none;font-size:20px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.mic.on{background:var(--warn);transform:scale(1.15)}
.tctx{display:flex;align-items:center;gap:10px;border-left:4px solid var(--city);background:var(--card);border-radius:8px;padding:6px 8px 6px 10px;margin-bottom:8px}
.tctx .x{width:30px;height:30px;font-size:13px}
.rec{font-weight:700;color:var(--warn);padding:4px 2px 10px;font-variant-numeric:tabular-nums}
.rec.cancel{color:var(--muted)}
.bwrap{display:flex;flex-direction:column;align-items:flex-start;max-width:86%;position:relative;border-radius:14px}
.bwrap.me{align-self:flex-end;align-items:flex-end}
.bwrap.sw::before{content:'↩';position:absolute;left:8px;top:50%;transform:translateY(-50%);font-weight:700;font-size:20px}
.bwrap.flash .bub{outline:3px solid var(--city)}
.bub{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:8px 12px 6px;min-width:84px;max-width:100%;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .12s}
.bwrap.me .bub{border-color:var(--ink);border-radius:14px 14px 4px 14px}
.bub.gone{color:var(--muted);font-style:italic;border-style:dashed}
.bub .who{font-size:12px;font-weight:700;color:var(--muted)}
.bub .fwd{font-size:12px;font-style:italic;color:var(--muted)}
.bub .txt{white-space:pre-wrap;overflow-wrap:anywhere}
.bub .quote{display:flex;flex-direction:column;text-align:left;border-left:3px solid var(--city);background:var(--paper);border-radius:6px;padding:4px 8px;margin:2px 0 4px;font-size:13px;max-width:100%}
.bub .quote b{font-size:12px}
.bub .quote span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bub .meta{align-self:flex-end;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.bmore{font-size:16px;font-weight:700;line-height:1;padding:2px 6px;border-radius:8px;color:var(--muted)}
.rx{display:flex;flex-wrap:wrap;gap:4px;margin-top:-4px;padding:0 6px}
.rchip{font-size:13px;padding:1px 7px;border-radius:999px;border:1px solid var(--line);background:var(--card)}
.rchip[aria-pressed="true"]{border-color:var(--ink);background:var(--city);color:#17233a}
.voice{display:flex;align-items:center;gap:10px;min-width:190px;padding:2px 0}
.vplay{width:38px;height:38px;border-radius:50%;border:2px solid var(--ink);background:var(--city);color:#17233a;font-size:14px;flex:none}
.vbar{flex:1;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.vbar i{display:block;height:100%;width:0;background:var(--ink)}
.vt{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}
.emojis{display:flex;justify-content:space-between;gap:4px;margin-bottom:6px}
.ebtn{flex:1;font-size:24px;padding:8px 0;border-radius:12px;border:2px solid transparent}
.ebtn[aria-pressed="true"]{border-color:var(--ink);background:var(--city)}
.atools{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0 8px}
.atools .mini{font-size:12px;font-weight:700;padding:5px 10px;border-radius:8px;border:2px solid var(--ink);background:var(--card)}

/* ---------- the front door ---------- */
#gate{position:fixed;inset:0;z-index:15;overflow-y:auto;background:radial-gradient(120% 80% at 50% 0%,#24365a 0%,#17233a 55%,#0e1626 100%);color:#e9eef6;display:flex;align-items:center;justify-content:center;padding:24px 18px}
#gate[hidden]{display:none}
.gatein{width:100%;max-width:400px;text-align:center}
.gatelogo{font-size:64px;line-height:1}
.gatein h1{font-family:var(--display);font-weight:800;font-size:46px;letter-spacing:-.02em;margin:6px 0 4px;color:#fff}
.gatetag{font-size:17px;font-weight:600;color:#f5b700;margin:0 0 22px}
.gatepass{background:rgba(245,183,0,.14);border:2px solid #f5b700;border-radius:14px;padding:12px 14px;margin:0 0 16px;font-weight:600}
.gatein .btn.quiet{background:transparent;color:#e9eef6;border-color:#e9eef6}
.gatein .tag{color:#9aa7bd;margin-top:14px;overflow-wrap:anywhere}
.gatein .muted{color:#9aa7bd}
a.btn{display:block}
.adview .adurl{display:inline-block;margin-top:12px;padding:5px 14px;border-radius:999px;background:#17233a;color:#fff;font-weight:700}