/* Minimal skin for panels whose CSS lives in other files (housing.css, js-injected <style> blocks).
   Owner 2026-10-03: everything except the phone is translucent black with modern text, no pixel borders.
   Loaded last; the "body" prefix beats the unscoped rules those files inject later. The phone, the world and
   the shop menus (shops.css, store.js) and transit panels (transit.css) are not touched here. */

/* ---- panel shell: housing / ward office, job board, goal shop, nightlife ---- */
body :is(#hzPanel,#jobPanel,#gsShop,.nlp){background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);outline:0;border-radius:8px;box-shadow:none;padding:12px;color:rgba(255,255,255,.92);font-family:var(--font-ui)}
body :is(#hzPanel,#jobPanel,#gsShop) .ihead span{font-size:14px;font-weight:600;color:rgba(255,255,255,.92)}
body :is(#hzPanel,#jobPanel,#gsShop) .ihead{margin:0 0 4px}
/* ---- panel shell: shop panels, shopping hall guide, tower lift ---- */
body :is(#wbPanel,#spPanel,#gdPanel,#zkPanel,#towerPanel){background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);outline:0;border-radius:8px;box-shadow:none;padding:12px;color:rgba(255,255,255,.92);font-family:var(--font-ui)}
body :is(#wbPanel,#spPanel,#gdPanel,#zkPanel,#towerPanel) .ihead span{font-size:14px;font-weight:600;color:rgba(255,255,255,.92)}
body :is(#wbPanel,#spPanel,#gdPanel,#zkPanel,#towerPanel) .ihead{margin:0 0 4px}
body :is(#bikePanel,#vlPanel){background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);outline:0;border-radius:8px;box-shadow:none;padding:12px;color:rgba(255,255,255,.92);font-family:var(--font-ui);font-size:13px;line-height:1.5}body :is(#bikePanel,#vlPanel) .ihead{display:flex;align-items:center;gap:8px;margin:0 0 4px}body :is(#bikePanel,#vlPanel) .ihead span{flex:1;font-size:14px;font-weight:600;color:rgba(255,255,255,.92)}body :is(#bikePanel,#vlPanel) p{margin:6px 0;color:rgba(255,255,255,.75)}body :is(#bikePanel,#vlPanel) button:not(.ihead>button){display:block;width:100%;min-height:44px;margin:4px 0;padding:8px 10px;text-align:left;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:6px;color:rgba(255,255,255,.92);font:inherit;cursor:pointer}body :is(#bikePanel,#vlPanel) button:not(.ihead>button) small{margin-left:6px;color:rgba(255,255,255,.6)}body :is(#bikePanel,#vlPanel) button.on{border-color:#6ad19a;background:rgba(106,209,154,.12)}body :is(#bikePanel,#vlPanel) button:disabled{opacity:.45}body #vlPanel .vlrow{display:flex;gap:4px}body #vlPanel .vlrow>button{flex:1 1 0;width:auto;text-align:center}body #vlPanel .vlcol{display:flex;flex-direction:column}body #emoMenu.emoglass{background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);outline:0;border-radius:8px;box-shadow:none;color:rgba(255,255,255,.92);font-family:var(--font-ui);font-size:13px;line-height:1.5;padding:6px}body #emoMenu .ihead{display:flex;align-items:center;gap:8px;min-height:44px}body #emoMenu .ihead span{flex:1;font-size:14px;font-weight:600;padding-left:4px}body #emoMenu button[data-k]{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:6px;color:rgba(255,255,255,.92);font:inherit;cursor:pointer;box-shadow:none}body #emoMenu button[data-k] span{color:rgba(255,255,255,.85)}body #settingsPanel.ug{background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);outline:0;border-radius:8px;box-shadow:none;color:rgba(255,255,255,.92);font-family:var(--font-ui);font-size:13px;line-height:1.5;padding:12px;color:rgba(255,255,255,.92)}body #settingsPanel.ug h2{font-size:14px;font-weight:600;color:rgba(255,255,255,.92)}body #settingsPanel.ug .settings-tabs button{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:6px;color:rgba(255,255,255,.92);font:inherit;cursor:pointer;padding:6px;font-size:13px;color:rgba(255,255,255,.7)}body #settingsPanel.ug .settings-tabs button[aria-selected=true]{border-color:#6ad19a;background:rgba(106,209,154,.12);color:#fff}body #settingsPanel.ug .settings-footer{border-top-color:rgba(255,255,255,.08)}body #settingsPanel.ug .settings-footer button,body #settingsPanel.ug .settings-life button{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:6px;color:rgba(255,255,255,.92);font:inherit;cursor:pointer;font-size:13px}body #settingsPanel.ug .settings-footer .settings-resume{border-color:#6ad19a;background:rgba(106,209,154,.12)}body #settingsPanel.ug .settings-account{background:rgba(255,255,255,.05)}body #settingsPanel.ug .settings-note{color:rgba(255,255,255,.65)}body #settingsPanel.ug .settings-details summary{color:rgba(255,255,255,.6)}body #feedbackPanel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,94vw);max-height:90vh;overflow:auto;z-index:10000;box-sizing:border-box;padding:12px;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);outline:0;border-radius:8px;box-shadow:none;color:rgba(255,255,255,.92);font-family:var(--font-ui);font-size:13px;line-height:1.5}body #feedbackPanel .ihead{display:flex;align-items:center;gap:8px;margin:0 0 4px}body #feedbackPanel .ihead span{flex:1;font-size:14px;font-weight:600}body #feedbackPanel p{margin:6px 0;color:rgba(255,255,255,.75);overflow-wrap:anywhere}body #feedbackPanel .fbcat{display:flex;gap:6px}body #feedbackPanel .fbcat button{flex:1 1 0}body #feedbackPanel label{display:block;margin:8px 0}body #feedbackPanel textarea{display:block;width:100%;box-sizing:border-box;margin-top:4px;padding:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:6px;color:rgba(255,255,255,.92);font:inherit;cursor:pointer;cursor:text}body #feedbackPanel button:not(.ihead>button){display:block;width:100%;min-height:44px;margin:4px 0;padding:8px 10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:6px;color:rgba(255,255,255,.92);font:inherit;cursor:pointer}body #feedbackPanel .fbcat button{display:block;margin:0}body #feedbackPanel button.on{border-color:#6ad19a;background:rgba(106,209,154,.12)}body #feedbackPanel button:disabled{opacity:.45}body #feedbackPanel input[type=checkbox]{width:20px;height:20px;margin-right:8px;vertical-align:middle}body #towerPanel .ihead{display:flex;align-items:center;gap:8px}
body :is(#bikePanel,#vlPanel) :is(button[data-bike^="rent:"],button[data-bike^="return:"],button[data-vl^="pay:"],button[data-vl^="fuel:"]):not(.ihead>button){background:#fff;color:#111;font-size:12px;font-weight:600;border:0;border-radius:6px;text-align:center}body :is(#bikePanel,#vlPanel) :is(button[data-bike^="rent:"],button[data-bike^="return:"],button[data-vl^="pay:"],button[data-vl^="fuel:"]) small{color:rgba(0,0,0,.55)}
body #towerPanel .ihead span{flex:1}
body #wbPanel[class*="wb-"]{border-color:rgba(255,255,255,.08);background:rgba(0,0,0,.7)}
body #wbPanel.wb-casual{border-color:#e85a5a99}
body #wbPanel.wb-select{border-color:#b8a07a99}
body #wbPanel.wb-lux{border-color:#d8b04899}
body #wbPanel.wb-denki{border-color:#ffe04099}
body #wbPanel.wb-fit,body #wbPanel.wb-home{border-color:#8ab0d899}
body :is(.wbrow,.gdrow,.gdlot,.wbtab,.spcard,.gdown,.wbdet){background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:6px}
body :is(.wbrow.cur,.gdrow.sel,.gdlot.sel,.wbtab.on,.spcard.cur){border-color:#6ad19a;background:rgba(106,209,154,.12)}
body .wbtab.on{color:rgba(255,255,255,.92)}
body .wbrow.worn{border-color:rgba(106,209,154,.35);background:rgba(106,209,154,.08)}
body :is(#wbStage,#gdCv){border:1px solid rgba(255,255,255,.08);border-radius:6px}
body #gdPanel .gdsec{color:#e8c46a;border-bottom-color:rgba(255,255,255,.08)}
body #gdPanel .gdpay{background:rgba(0,0,0,.72)}

/* ---- housing: notes, rows, lease contract ---- */
body .hnote{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:6px;color:rgba(255,255,255,.6)}
body .hnote b{color:#e8c46a;font-weight:600}
body .hrow{background:rgba(255,255,255,.05);border-width:1px;border-radius:8px;color:rgba(255,255,255,.92)}
body .hrow.cur{border-color:#6ad19a;background:rgba(106,209,154,.1)}
body .hrow span{color:rgba(255,255,255,.92)}
body .hrow i,body .hrow b small{color:rgba(255,255,255,.6)}
body .hrow b{color:#e8c46a;font-weight:600;font-variant-numeric:tabular-nums}
body .hrow em,body .hrung em{background:rgba(106,209,154,.2);color:#6ad19a;border-radius:4px;padding:0 5px}
body .hrow em.ng{background:rgba(255,90,90,.2);color:#ff5a5a}
body .hplan{border:1px solid rgba(255,255,255,.12);border-radius:4px}
body .contract{background:rgba(255,255,255,.06);color:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.08);border-radius:8px;box-shadow:none;padding:12px}
body .contract .chead{border-bottom:1px solid rgba(255,255,255,.1)}
body .contract .cplan{border:1px solid rgba(255,255,255,.12);border-radius:4px}
body .contract .chead b{font-weight:600}
body .contract .chead span{color:rgba(255,255,255,.6)}
body .contract .chead span.rent{color:#e8c46a;font-weight:600}
body .contract .crow{background:none;border-bottom:1px solid rgba(255,255,255,.08)}
body .contract .crow i{color:rgba(255,255,255,.6)}
body .contract .crow.tot{border-top:1px solid rgba(255,255,255,.2);border-bottom:0}
body .contract .crow.tot b{color:#e8c46a;font-weight:600}
body .contract .hscreen{border:1px solid;border-radius:6px}
body .contract .hscreen.ok{border-color:#6ad19a;color:#6ad19a;background:rgba(106,209,154,.1)}
body .contract .hscreen.ng{border-color:#ff5a5a;color:#ff5a5a;background:rgba(255,90,90,.1)}
body .contract .pay{color:rgba(255,255,255,.6)}

/* ---- job board and the shift card ---- */
body #jobPanel .jabil{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:6px}
body #jobPanel .jbadv{color:#6ad19a}
body #jobPanel{overflow-anchor:none}
body #jobPanel .jbcard{background:rgba(255,255,255,.06);color:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.08);border-radius:8px;box-shadow:none}
body #jobPanel .jbcard .jt i,body #jobPanel .jbcard .js,body #jobPanel .jbcard .jw small{color:rgba(255,255,255,.6)}
body #jobPanel .jbcard .jw{color:#e8c46a;font-weight:600;font-variant-numeric:tabular-nums}
body #jobPanel .jbcard .jw small{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);border-radius:4px}
body #jobPanel .jbcard .jr span{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:4px}
body #jobPanel .jbcard .jr .ok{color:#6ad19a;border-color:rgba(106,209,154,.5)}
body #jobPanel .jbcard .jr .ng{color:#ff5a5a;border-color:rgba(255,90,90,.5)}
body #jobPanel .jbcard .jlad{color:rgba(255,255,255,.6)}
body #jobPanel .jbcard .jlad li.cur{color:#6ad19a}
body #jobPanel .jbcard .jm{background:rgba(255,255,255,.14);border:0;border-radius:2px}
body #jobPanel .jbcard .jm u{background:#e8c46a}
body #jobPanel .jbcard.held{border-color:#6ad19a;box-shadow:none}
body #jobPanel .jbcard .warn{color:#ff5a5a}
body #jobHud{background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);outline:0;border-radius:8px;padding:8px 10px;color:rgba(255,255,255,.92);font-family:var(--font-ui)}
body #jobHud .jh1 b{font-weight:600;color:rgba(255,255,255,.92)}
body #jobHud .jh1 i{color:rgba(255,255,255,.6)}
body #jobHud .jbar{height:4px;background:rgba(255,255,255,.14);border:0;border-radius:2px;overflow:hidden}
body #jobHud .jbar u{background:#6ad19a}
body #jobHud .jh2{font-variant-numeric:tabular-nums}
body #jobHud .jh2 .y,body #jobHud .stars{color:#e8c46a}
body #jobHud .hint{color:#6ad19a}

/* ---- police and justice: wanted stars, arrest, downed, jail, receipt ---- */
body #wanted{text-shadow:0 1px 3px rgba(0,0,0,.7);font-family:var(--font-ui)}
body #wanted .wl{color:#ff5a5a;font-weight:600;letter-spacing:.1em}
body #wanted .ws{font-size:16px;color:rgba(255,255,255,.25)}
body #wanted .ws b{color:#ff5a5a}
body #wanted.blink .ws b{animation:wantedblink .8s ease-in-out infinite}
@keyframes wantedblink{50%{opacity:.35}}
body #arrestUI{background:rgba(0,0,0,.88);font-family:var(--font-ui)}
body #arrestUI .at{font-size:30px;font-weight:600;letter-spacing:.12em;color:#ff5a5a;text-shadow:none}
body #arrestUI .as,body #arrestUI .as2{font-size:14px;color:rgba(255,255,255,.6)}
body #downUI .dt{color:#ff6a5a}
body #downUI .jb{font-variant-numeric:tabular-nums}
body #jailHUD{left:50%;transform:translateX(-50%);width:min(368px,calc(100vw - 20px));min-height:64px;box-sizing:border-box;white-space:normal;contain:layout style;font-variant-numeric:tabular-nums;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);outline:0;border-radius:8px;padding:8px 14px;color:rgba(255,255,255,.92);font-family:var(--font-ui)}
body #jailHUD b{color:#e8c46a;font-weight:600}
body #jailHUD b.f{color:#ff5a5a}
body #jailHUD span,body #jailHUD i{color:rgba(255,255,255,.6);font-size:12px;line-height:18px;min-height:18px}
body #jailHUD .sentence-line{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:0 5px;min-height:18px;font-size:13px;line-height:18px}
body #jailHUD b{margin:0;flex:none}
body #jailHUD em{font-style:normal;min-width:12ch;text-align:left}
body #jailHUD span{white-space:nowrap}

/* ---- spacing system for cards: 20px padding, one left edge, 8px rhythm, hairline rows (daily summary, pay slip) ---- */
body :is(#daySum,#jobSlip){position:absolute;left:50%;top:50%;margin:0;width:min(92vw,340px);height:auto;max-height:calc(var(--mob-vh,100vh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px);overflow:hidden;box-sizing:border-box;padding:20px;background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:rgba(255,255,255,.92);font-family:var(--font-ui);font-size:13px;line-height:1.4;font-variant-numeric:tabular-nums}
body #daySum{transform:translate(-50%,-50%) scale(.94)}
body #jobSlip{transform:translate(-50%,-50%);overflow-y:auto}
body #daySum.on{transform:translate(-50%,-50%)}
body #daySum>*{position:static}
body #daySum .dsart,body #jobSlip>img{display:none}
body #daySum .dshd,body #jobSlip .sh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 16px}
body #daySum .dsh{font-size:16px;font-weight:600;line-height:1.3;color:rgba(255,255,255,.92);text-shadow:none}
body #daySum .dsd{font-size:12px;color:rgba(255,255,255,.6);white-space:nowrap}
body :is(#daySum .dsr,#jobSlip .sr){display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px;border-bottom:1px solid rgba(255,255,255,.06)}
body :is(#daySum .dsr,#jobSlip .sr).tot{border-top:1px solid rgba(255,255,255,.14);border-bottom:0;font-weight:600}
body :is(#daySum .dsl,#jobSlip .sl){position:static;font-size:13px;font-weight:400;color:rgba(255,255,255,.6)}
body :is(#daySum .tot .dsl,#jobSlip .tot .sl){color:rgba(255,255,255,.92);font-weight:600}
body :is(#daySum .dsv,#jobSlip .sv){position:static;font-size:15px;font-weight:400;text-align:right;color:rgba(255,255,255,.92)}
body :is(#daySum .tot .dsv,#jobSlip .tot .sv){font-weight:600}
body #daySum .dsv small{font-size:11px;font-weight:400;margin-left:8px;color:rgba(255,255,255,.55)}
body #daySum .inc,body #jobSlip .sv.gn,body #jobSlip .gn{color:#6ad19a}
body #daySum .exp,body #jobSlip .pr{color:#ff5a5a}
body #jobSlip .sv.st{color:#e8c46a}
body #daySum .dsg{display:block;margin:20px 0 8px;font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.55)}
body #daySum .dsi{margin:0;padding:0;list-style:none}
body #daySum .dsi li{display:flex;align-items:center;gap:10px;height:28px;font-size:13px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body #daySum .dsi li img{flex:none;width:16px;height:16px;object-fit:contain;image-rendering:pixelated}
body #daySum .dsx{position:static;margin:12px 0 0;text-align:center;font-size:11px;color:rgba(255,255,255,.45)}
body #jobSlip .sh{justify-content:flex-start;align-items:center;gap:12px}
body #jobSlip .sh img{flex:none;width:32px;height:32px;object-fit:contain;image-rendering:pixelated}
body #jobSlip .sh b{display:block;font-size:16px;font-weight:600}
body #jobSlip .sh span{display:block;font-size:12px;color:rgba(255,255,255,.6)}
body #jobSlip .sd{display:flex;justify-content:space-between;gap:12px;margin:0 0 8px;font-size:12px;color:rgba(255,255,255,.6)}
body #jobSlip .tot .sv{font-size:18px;color:#e8c46a}
body #jobSlip .sf{margin-top:12px;font-size:12px;color:rgba(255,255,255,.6)}
body #jobSlip .sf.gn{margin-top:4px}
body #jobSlip .sd .pr{color:rgba(255,255,255,.6)}

/* ---- goal card (top left, under the status card): face, label and progress on one grid ---- */
body #goalCard{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:0;row-gap:2px;width:190px;height:auto;padding:10px 12px;top:calc(env(safe-area-inset-top) + 76px);left:calc(env(safe-area-inset-left) + 10px);box-sizing:border-box;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:rgba(255,255,255,.92);font-family:var(--font-ui)}
@media (min-width:700px){body #goalCard{width:220px}}
body #goalCard :is(.gcface,.gch,.gcp,.gct,.gcg){position:static}
body #goalCard .gcart{display:none}
body #goalCard .gcface{grid-row:1/3;grid-column:1;width:32px;height:32px;object-fit:contain;margin-right:10px}
body #goalCard .gch{grid-column:2;grid-row:1;font-size:11px;color:rgba(255,255,255,.6);white-space:nowrap}
body #goalCard .gcp{grid-column:3;grid-row:1;margin-left:8px;font-size:11px;color:#e8c46a;font-variant-numeric:tabular-nums;white-space:nowrap}
body #goalCard .gct{grid-column:2/4;grid-row:2;font-size:13px;font-weight:600;line-height:1.35;text-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body #goalCard .gcg{grid-column:1/-1;grid-row:3;min-width:0;margin-top:2px;font-size:11px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body #goalCard:not(:has(.gcface)) .gch,body #goalCard:not(:has(.gcface)) .gct{grid-column-start:1}
body #goalCard:not(:has(.gcface)) .gct{grid-column-end:4}

/* ---- achievement toast: medal, title and reward on a grid under the status card ---- */
body #achToast{left:auto;right:calc(env(safe-area-inset-right) + 10px);top:calc(var(--hud-panel-top,80px) + 48px);display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px;row-gap:2px;width:min(92vw,240px);height:auto;margin-left:0;transform:scale(.94);padding:12px 16px;box-sizing:border-box;background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:rgba(255,255,255,.92);font-family:var(--font-ui)}
body #achToast.on{transform:scale(1)}
body #achToast :is(.atmed,.ath,.atn,.atb){position:static}
body #achToast .atart{display:none}
body #achToast .atmed{grid-row:1/4;grid-column:1;width:auto;height:40px}
body #achToast .ath{grid-column:2;font-size:11px;color:#e8c46a}
body #achToast .atn{grid-column:2;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
body #achToast .atb{grid-column:2;font-size:11px;color:#6ad19a}
@media (orientation:landscape) and (max-height:520px){
  body #achToast{right:calc(env(safe-area-inset-right) + 112px);width:min(28vw,220px);padding:8px 12px}
  body #achToast .atmed{height:32px}
}
body #gsShop .gsl b{color:#e8c46a;font-weight:600}

/* ---- dialogue box (romance / talk) ---- */
body #romDlg .rdw{border:1px solid rgba(255,255,255,.08);border-image-source:none!important;border-radius:8px;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:12px;color:rgba(255,255,255,.92);image-rendering:auto;font-family:var(--font-ui)}
body #romDlg .rdf{box-shadow:none;border-radius:8px;image-rendering:pixelated}
body #romDlg .rdn{font-size:14px;font-weight:600;color:rgba(255,255,255,.92)}
body #romDlg .rdn span{color:rgba(255,255,255,.6);font-weight:400}
body #romDlg .rdt{font-size:14px;line-height:1.6}
body #romDlg .rdc button{background:rgba(0,0,0,.4);border-width:1px}body #qDlg{border:1px solid rgba(255,255,255,.08);outline:0;border-radius:8px;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:12px;color:rgba(255,255,255,.92);font-family:var(--font-ui)}body #qDlg .qdf{border-radius:8px}body #qDlg .qdt b{font-size:14px;font-weight:600;color:rgba(255,255,255,.92)}body #qDlg .qdt p{font-size:14px;line-height:1.6}body #qDlg .qdc{gap:6px}body #qDlg .qdc button{min-height:44px;padding:8px 14px;font:inherit;font-size:13px;text-align:left;color:rgba(255,255,255,.92);background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08);border-radius:999px;box-shadow:none;cursor:pointer}body #qDlg .qdc button:hover,body #qDlg .qdc button:focus-visible{border-color:#6ad19a;background:rgba(106,209,154,.12)}body #qDlg .qdn{color:rgba(255,255,255,.6)}@media (pointer:coarse){body #qDlg .qdk{display:none}}

/* ---- nightlife panels ---- */
body .nlp .row{gap:8px}
body .nlp button.big{background:#fff;color:#111;border-color:#fff}
body .nlhd b{font-weight:600;color:rgba(255,255,255,.92)}
body .nlhd i,body .nldr small,body .nlchk small,body .nlfee,body .nlnote{color:rgba(255,255,255,.6)}
body .nlface{box-shadow:none;border-radius:8px;background:rgba(255,255,255,.06)}
body .nlchk b.ok{color:#6ad19a}
body .nlchk b.ng{color:#ff5a5a}
body .nlmsg{color:rgba(255,255,255,.92);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:6px}
body .nlmsg.ok{border-color:#6ad19a}
body .nlmsg.ng{border-color:#ff5a5a}
body .nlhint{color:#e8c46a}
body .nlq b,body .nldr b{color:#e8c46a;font-weight:600}
body .nlq i{background:rgba(255,255,255,.14);box-shadow:none;border-radius:4px}
body .nlq u{background:#e8c46a}
body .nldr{background:rgba(255,255,255,.05);border-width:1px;border-radius:8px}

/* ---- car lock-pick bar, pachinko bars ---- */
body #lpUI{background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:rgba(255,255,255,.92);font-family:var(--font-ui)}
body #lpUI .lp,body #lpUI .lb{background:rgba(255,255,255,.14);border:0;border-radius:3px}
body #lpUI .lp i{background:#e8c46a}
body #lpUI .lz{background:#6ad19a}
body #lpUI .ld{color:#e8c46a}
body #lpUI .lh{color:rgba(255,255,255,.6)}
body #pachi .pi{background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:rgba(255,255,255,.6);text-shadow:none;font-family:var(--font-ui);font-variant-numeric:tabular-nums}
body #pachi .pi b{color:rgba(255,255,255,.92);font-weight:600}
body #pachi .pd .on{background:#fff;color:#111;border-color:#fff;box-shadow:none}
body #pachi .ph{color:rgba(255,255,255,.6);text-shadow:0 1px 3px rgba(0,0,0,.7);font-family:var(--font-ui)}

/* ---- transient popups on narrow screens stack under the status and goal cards so they never cover them ---- */
@media (max-width:699px){
  body #toast{top:calc(env(safe-area-inset-top) + 214px)}
  body #achToast{top:calc(env(safe-area-inset-top) + 266px)}
}
/* ticking numbers never reflow a card: tabular digits, a fixed width date card, countdown digits in a fixed box (.cd) */
body #hud{font-variant-numeric:tabular-nums}
body #topbar{display:grid;grid-template-columns:auto auto;width:max-content;max-width:calc(100vw - 40px)}
body #clockWrap,body #topbar .tbtns{grid-column:1/-1}
body #dayTxt{white-space:nowrap}
body .cd{display:inline-block;min-width:2ch;text-align:right}
body #jobHud .hint:not(:empty){min-height:2.7em}
/* shared panel slot (js/ui.js uiSlotSync): while a modal panel or the phone is open the HUD steps aside, and a panel never reaches up over the money pill */
body.has-panel :is(#achToast,#goalCard,#questTrk,#autoLifeMovementStatus,#gdBanner,#jobHud,#chatlog,#needs,#hotbar,#ammo,#hint,#btns,#joy){visibility:hidden!important}
body .slotted{overflow-y:auto}
/* js/ui/mobile.js lifts every text under 12 px to 12 px after a re-render (a flash of the small size on each tick makes a card jump): ticking texts are 12 px from the first paint on touch */
body.touch :is(#jobHud .hint,#jobHud .jh1 i,#jobHud .jtut,.trr-top small,.trr-row,.trr-dots em,#goalCard .gch,#goalCard .gcp){font-size:12px}
body .cd{line-height:1}
/* flex rows in panels, shops and phone apps (P0: the job card column collapsed to one character while the pay line ran off the screen): the text column of
   every row may shrink below its content and wrap, so a nowrap price or a wide chip never squeezes it; fixed parts (icon, price, buttons) stay flex:none.
   tools/panel_layout_view.js audits every panel at 390x844, 844x390 and 1440x900 for collapsed columns and overflow. */
:is(#phoneBody,.pe) :is(li,.strow,.hrow,.wbrow,.gdrow,.spcard,.jt,.tpc-row)>div{min-width:0}
:is(#phoneBody,.pe) :is(li,.strow,.hrow,.wbrow,.gdrow,.spcard,.jt,.tpc-row)>div :is(span,i,b){overflow-wrap:anywhere}
:is(#phoneBody,.pe) :is(li,.strow,.hrow,.wbrow,.gdrow,.jt)>img{flex:none}
/* rule 10: every button in a panel is at least 44 px on touch from the first paint (js/ui/mobile.js only lifts small ones 180 ms after a rebuild, which made panels jump);
   the phone art, the ATM face and the crane pad size their own controls. tools/tap_target_test.js opens each panel at 390x844 and fails under 44 px. */
body.touch :is(.pe,#invPanel) button:not(.atx):not(.rb):not(.crb){min-height:44px;min-width:44px}
/* no reflow after a panel opens: panels wait for the web fonts (body.fonts-ready, js/ui.js) and open with opacity only, never an animated size or position; the backdrop blur never sizes anything */
body:not(.fonts-ready) :is(#stPanel,#stSvc,#hzPanel,#jobPanel,#wbPanel,#spPanel,#gdPanel,#gsShop,#invPanel,#qDlg,#romDlg,#trPanel,#trTaxi,#trTaxiPay,#mapPanel){visibility:hidden}
@keyframes peIn{from{opacity:0}to{opacity:1}}
body :is(#stPanel,#stSvc,#hzPanel,#jobPanel,#wbPanel,#spPanel,#gdPanel,#gsShop,#invPanel,#qDlg,#romDlg,#trPanel,#mapPanel):not([hidden]){animation:peIn .12s ease-out}
/* line breaking in every panel and phone app: Korean never breaks inside a word (overflow-wrap:anywhere above still breaks a word that cannot fit), Japanese breaks strictly */
html[lang=ko] :is(.pe,#phoneBody,#invPanel,#keyhelp){word-break:keep-all}
html[lang=ja] :is(.pe,#phoneBody,#invPanel,#keyhelp){line-break:strict}
.uifont{visibility:hidden!important}
/* money never wraps (QA-036: ¥1/0,000), digits tabular; the title language switch is a 44 px touch target (QA-039) */
#cash,#cashTxt,#cashD{white-space:nowrap;font-variant-numeric:tabular-nums}
#cash{flex:none}
body.touch #tlang button{min-width:36px;min-height:30px;padding:0 8px}
/* dialogue pages never grow past the screen (a long choice list on a phone held sideways ran 174 px above it): they scroll inside */
body :is(#qDlg,#romDlg){max-height:calc(var(--mob-vh,100vh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 80px);overflow-y:auto;touch-action:pan-y}
/* shop panel (js/store.js): one fixed height per screen, so a tab with 3 rows and a tab with 7 rows look the same around the list. The list fills what is left and scrolls inside,
   the head, greeting, tab row and footer never move; the tab row is one scrollable line of equal tabs (no wrap, no second line on a phone). html body beats the sheet store.js injects. */
html body :is(#stPanel,#vendMenu){height:min(620px,calc(var(--mob-vh,100vh) - 2*(env(safe-area-inset-top) + 52px)));max-height:none}
html body.touch :is(#stPanel,#vendMenu){height:calc(var(--mob-vh,100vh) - 2*(env(safe-area-inset-top) + 52px))}
html body :is(#stPanel,#vendMenu) .stlist{flex:1 1 0;min-height:0;max-height:none}
html body :is(#stPanel,#vendMenu) :is(.ihead,.stsay,.sttabs,.stfoot,.stmsg,.stask){flex:none}
html body :is(#stPanel,#vendMenu) .sttabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x;-webkit-overflow-scrolling:touch}
html body :is(#stPanel,#vendMenu) .sttabs::-webkit-scrollbar{display:none}
html body :is(#stPanel,#vendMenu) .sttabs button{flex:none;width:104px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* QA-063: buttons inside phone apps are tap targets too (the phone art is scaled, its controls are not): 44 px on touch */
body.touch #phoneBody button:not(.gcols button){min-height:44px;min-width:44px}
body.touch #phoneBody .gcols button{min-width:44px}
body.touch #phoneBody .ggraph{overflow-x:auto;touch-action:pan-x}
body.touch #phoneBody :is(.gplot,.gdays){min-width:308px}
/* the HUD hides while a panel is open, buttons included: #actBtn.on sets its own visibility and showed through the hidden column */
body.has-panel #btns button{visibility:hidden!important}
/* shop panel held sideways on a phone (286 px of screen): no greeting line, the footer is one compact block (cash line, then total next to the pay buttons) so the pay buttons are always on screen */
@media (max-height:520px){
  html body :is(#stPanel,#vendMenu){padding:6px;gap:4px}
  html body :is(#stPanel,#vendMenu) .stsay{display:none}
  html body :is(#stPanel,#vendMenu) .stfoot{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 8px;padding:4px 8px}
  html body :is(#stPanel,#vendMenu) .stfoot>div:first-child{grid-column:1/-1;font-size:11px}
  html body :is(#stPanel,#vendMenu) .stfoot .tot{gap:8px}
  html body :is(#stPanel,#vendMenu) .stfoot .pays{flex-direction:row}
  html body :is(#stPanel,#vendMenu) .stfoot .pays button{padding:0 10px;min-width:96px}
  html body :is(#stPanel,#vendMenu) .stmsg{min-height:0;font-size:10px;line-height:1.2}
}
/* nightlife menus and the recording panel size to the visible viewport as well (never bare vh) */
body .nlp{max-height:calc(var(--mob-vh,100vh) - 2*(env(safe-area-inset-top) + 16px))}
/* the shop panel never reaches below the visible viewport (store.js sized it by 100vh / 100dvh: 386 px bottom on a 340 px visible landscape screen) */
html body.touch :is(#stPanel,#vendMenu).pe.slotted,html body :is(#stPanel,#vendMenu).pe.slotted{height:calc(var(--mob-vh,100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 56px)!important;max-height:calc(var(--mob-vh,100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 56px)!important}
/* dealer: the price and buy row is pinned to the footer of the scrolling panel so the buy button is always inside the visible screen (QA-095) */
#gdPanel .gdpay{position:sticky;bottom:0;z-index:2;padding:6px 0;background:rgba(10,8,16,.94);box-shadow:0 -6px 8px -4px rgba(0,0,0,.6)}
#gdPanel .gdpay button{min-height:44px}
/* QA-105/107: labels wrap to two lines before they ellipsize, a price is never split (keep-all, break only when nothing else fits), tab strips scroll with a fade instead of cutting a tab */
#chatlog div{word-break:keep-all;overflow-wrap:anywhere}
:is(#phoneBody,.pe) :is(.plist li span,.plist li i,.mp-list li span,.strow>div>span,.hrow>div>span,.wbrow>div>span){white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
html body :is(#stPanel,#vendMenu) .sttabs button{white-space:normal;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-align:center;padding:2px 6px}
html body :is(#stPanel,#vendMenu) .sttabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:28px}
html body :is(#stPanel,#vendMenu) .sttabs button.on{scroll-margin-right:32px}
/* QA-109: no touch-only round buttons with a mouse (G opens the emotes) */
/* Phone body text keeps its CSS size independently of the pixel frame. */
body.fine #phoneApps button{font-size:12px}

/* Compact retail panel leaves the city visible and keeps checkout outside the scrolling shelf. */
html body #stPanel,html body.touch #stPanel,html body #stPanel.pe.slotted,html body.touch #stPanel.pe.slotted{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,94vw);height:min(580px,70vh);height:min(580px,calc(var(--mob-vh,100dvh)*.7));max-height:min(580px,calc(var(--mob-vh,100dvh)*.7))!important;overflow:hidden;padding:8px;gap:5px}
html body #stPanel .stlist{min-height:0;max-height:none;flex:1 1 0;overflow-y:auto}
html body #stPanel .strow{flex:none;gap:5px;padding:2px 5px;min-height:48px}
html body #stPanel .strow img{width:28px;height:28px}
html body #stPanel .strow>div:first-of-type{min-width:0}
html body #stPanel .strow i{display:none}
html body #stPanel .strow .ststock{font-size:10px;color:#a1b5aa;line-height:1.1}
html body #stPanel .strow .qty{gap:0}
html body #stPanel .strow .qty button{width:44px;height:44px;min-width:44px}
html body #stPanel .strow .qty em{min-width:16px}
html body #stPanel .sttabs button{width:auto;min-width:84px;min-height:36px;padding:3px 7px}
html body #stPanel .stfoot{padding:5px 7px;gap:3px}
html body #stPanel .stfoot .pays button{min-width:0;min-height:44px;padding:4px}
html body #stPanel .stempty{padding:16px 6px;text-align:center;color:#b8c5bd;font-size:12px}
html body #stPanel .statm{min-height:44px;font-size:11px}
@media(max-width:520px){html body #stPanel .stsay{display:none}html body #stPanel .ihead{font-size:13px}html body #stPanel .strow span{font-size:12px}html body #stPanel .strow b{font-size:12px}}

/* Shared clearance applies to every panel, including menus and full-screen backdrops. */
body #topbar{position:fixed;z-index:1000;pointer-events:none}
body #topbar button{pointer-events:auto}
body #topbar[hidden],body:has(#hud[hidden]) #topbar{display:none!important}
html body .slotted{box-sizing:border-box}
html body #mapPanel.mpfull.slotted{top:var(--hud-panel-top,100px);bottom:auto;height:calc(var(--mob-vh,100vh) - var(--hud-panel-top,100px) - 8px)}
html body .slotted.hud-backdrop{top:var(--hud-panel-top,100px)!important;bottom:0!important;height:auto!important;max-height:none!important;min-height:0!important;overflow:auto}
html body .slotted.hud-backdrop>*{min-height:0;max-width:calc(100vw - 16px)}
html body :is(#wbPanel,#gdPanel).slotted{max-width:calc(100vw - 16px)!important;max-height:calc(var(--mob-vh,100dvh) - var(--hud-panel-top,100px) - 8px)!important;overflow-y:auto}
html body #questJournal.hud-backdrop{top:var(--hud-panel-top,100px)!important;bottom:0!important;height:auto!important}

/* Wardrobe: a pixel fitting room with readable catalog and outfit plates. */
body #wbPanel[class*="wb-"]{width:min(700px,96vw);max-height:92vh;padding:12px;gap:8px;border:2px solid #72727c;outline:2px solid #0e0c12;border-radius:0;background:#141418f5;box-shadow:inset 0 0 0 2px #24242a;-webkit-backdrop-filter:none;backdrop-filter:none}
body #wbPanel :is(button,.wbdet,.wbic){border-radius:0}
body #wbPanel .ihead{min-height:30px}
body #wbPanel .wbtop{display:grid;grid-template-columns:260px minmax(0,1fr);align-items:stretch;gap:10px;flex:none}
body #wbPanel .wbst{width:260px;min-width:0}
body #wbStage{width:256px;height:192px;touch-action:none;cursor:grab}
body #wbStage:active{cursor:grabbing}
body #wbPanel .wbtabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;width:auto}
body #wbPanel .wbtab{min-width:0;min-height:28px;padding:3px 7px;gap:6px;font-size:12px;border:1px solid #44444e}
body #wbPanel .wbtab span{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15;overflow-wrap:normal;word-break:keep-all}
body #wbPanel :is(.wbtab.on,.wbtools .on,.wbturn .on){border-color:#e0b030;background:#3a3020;color:#fff0d0;box-shadow:inset 0 0 0 1px #a88424}
body #wbPanel .wbturn{gap:4px;bottom:5px}
body #wbPanel .wbturn button{padding:4px 6px;display:flex;align-items:center;justify-content:center;gap:4px;background:#141418e8;border:1px solid #72727c;opacity:1;font-size:12px;min-height:28px}
body #wbPanel .wbturn img{width:12px;height:12px;image-rendering:pixelated}
body #wbPanel .wbstlabel{position:absolute;left:6px;top:6px}
body #wbPanel .wbpreview{font-size:12px;font-style:normal;color:#ffe9a8;background:#3a3020;padding:2px 5px;display:inline-flex;align-items:center;gap:4px}
body #wbPanel .wbpreview img{width:12px;height:12px;image-rendering:pixelated}
body #wbPanel .wboutfit{display:flex;align-items:center;gap:10px;padding:5px 7px;background:#24242a;border:1px solid #44444e;flex:none}
body #wbPanel .wboutfit>span{font-size:12px;color:#b8a898;flex:none}
body #wbPanel .wboutfit>div{display:flex;gap:4px;min-width:0;overflow-x:auto}
body #wbPanel .wboutfit button{padding:0;width:32px;height:36px;flex:none;border:1px solid #585862;background:#34343c}
body #wbPanel .wboutfit img{width:30px;height:32px;image-rendering:pixelated}
body #wbPanel .wboutfit .empty img{width:16px;height:16px;opacity:.55}
body #wbPanel .wbtools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:none}
body #wbPanel .wbtools>div{display:flex;gap:3px}
body #wbPanel .wbtools button{padding:4px 8px;font-size:12px;border:1px solid #585862;background:#24242a;min-height:28px}
body #wbPanel .wbtools small{font-size:12px;margin-left:auto;color:#b8a898}
body #wbPanel .wblist{max-height:23vh;min-height:100px;flex:0 1 auto;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
body #wbPanel .wbrow{min-height:62px;padding:5px 8px;background:#24242a;border:1px solid #44444e;flex:none}
body #wbPanel .wbrow.cur{border-color:#e0b030;box-shadow:inset 3px 0 #e0b030;background:#3a3020}
body #wbPanel .wbrow.worn{border-color:#6ad19a}
body #wbPanel .wbrow.locked{background:#1c1c22}
body #wbPanel .wbrow.locked>div>span{color:#a4a4ac}
body #wbPanel .wbrow.locked>.wbic{opacity:.65}
body #wbPanel .wbrow.locked.cur{border-color:#e0b030;background:#302a20}
body #wbPanel .wbic{width:40px;height:44px;object-fit:contain;background:#34343c;border:1px solid #585862}
body #wbPanel .wblock{width:16px;height:16px;image-rendering:pixelated}
body #wbPanel .wbsource{font-size:12px;line-height:1.4;color:#b8a898;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}
body #wbPanel .wbdet>.wbsource{white-space:normal}
body #wbPanel .wbrow>div{gap:3px}
body #wbPanel .wbrow>div>i{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
body #wbPanel .wbrow>div>i:empty{display:none}
body #wbPanel .wbdet{padding:8px;background:#1c1c22;border:1px solid #585862;gap:6px;flex:none}
body #wbPanel .wbcol{display:grid;grid-template-columns:repeat(auto-fill,24px);gap:5px;padding:3px;max-height:62px;overflow-y:auto;overscroll-behavior:contain}
body #wbPanel .wbcol .sw{width:24px;height:24px;min-height:0;border:2px solid #141418;position:relative}
body #wbPanel .wbcol .sw.unowned:after{content:'';position:absolute;right:1px;bottom:1px;width:3px;height:3px;background:#0e0c12;box-shadow:0 0 0 1px #b8a898}
body #wbPanel .wbcol .sw.own{box-shadow:inset 0 0 0 1px #8ad0a0}
body #wbPanel .wbcol .sw.sel{outline:2px solid #e0b030;outline-offset:0}
body #wbPanel .wbbuy button{padding:5px 9px;min-height:30px;font-size:12px}
body #wbPanel .wbfoot{align-items:flex-end;flex:none;padding-top:5px;border-top:1px solid #44444e}
body #wbPanel .wbcha{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:240px}
body #wbPanel .wbcha>div{display:flex;align-items:center;gap:6px}
body #wbPanel .wbcha span{display:inline}
body #wbPanel .wbcha small{display:flex;flex-wrap:wrap;gap:5px 12px;font-size:12px}
body #wbPanel .wbcha small span{white-space:nowrap}
body #wbPanel button:focus-visible{outline:2px solid #fff0d0;outline-offset:1px}
@media(max-width:680px){body #wbPanel .wbtop{grid-template-columns:minmax(0,1fr)}body #wbPanel .wbst{width:100%}body #wbStage{width:100%;height:auto;aspect-ratio:4/3;max-height:240px}body #wbPanel .wbtabs{grid-template-columns:repeat(3,minmax(0,1fr))}body #wbPanel .wbtab{padding:4px;gap:4px}body #wbPanel .wboutfit{flex-direction:column;align-items:flex-start;gap:4px}body #wbPanel .wboutfit>div{width:100%}body #wbPanel .wblist{max-height:26vh;min-height:110px}}

html[lang=ko] body *{word-break:keep-all!important;overflow-wrap:break-word}
@media (orientation:landscape) and (max-height:520px){
  body.touch #jobHud{top:calc(var(--hud-panel-top,72px) + 4px);right:calc(env(safe-area-inset-right) + 108px);width:190px;box-sizing:border-box;max-height:calc(var(--mob-vh,100dvh) - var(--hud-panel-top,72px) - 20px);overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;touch-action:pan-y;padding:5px 7px;font-size:11px}
  body.touch #jobHud .jh1 img{width:24px;height:24px}
  body.touch #jobHud :is(.hint,.jtut,.jh1 i){font-size:11px}
  body.touch #jobHud .jtut{padding:4px;margin-top:4px}
  body.touch #jobHud .jtut ol{padding-left:16px;margin:4px 0}
}
@media (orientation:landscape) and (max-height:520px){
  html body :is(#jobPanel,#hzPanel).slotted{max-height:calc(var(--mob-vh,100dvh) - var(--hud-panel-top,80px) - env(safe-area-inset-bottom) - 16px)!important;overflow-y:auto;overscroll-behavior:contain;padding-bottom:18px;scroll-padding-bottom:18px;touch-action:pan-y}
  html body #hzPanel.slotted > *{flex-shrink:0}
}

@media (orientation:landscape) and (max-height:520px){
  html body #invPanel.slotted{display:flex;flex-direction:column;max-height:calc(var(--mob-vh,100dvh) - var(--hud-panel-top,80px) - 16px)!important;padding-bottom:18px;scroll-padding-bottom:18px}
  html body #invPanel.slotted > :is(.ihead,#invStreet,#invInfo){flex:none}
  html body #invPanel.slotted #invInfo{min-height:0}
  html body #invPanel.slotted #invGrid{flex:1 1 auto;min-height:60px;overflow-y:auto;touch-action:pan-y;padding-bottom:6px;scroll-padding-bottom:6px}
}