:root{--font-ui:"Noto Sans JP",system-ui,-apple-system,"Hiragino Sans",sans-serif;--font-px:'DotGothic16','Galmuri11',monospace}
html[lang=ko]{--font-ui:"Noto Sans KR","Noto Sans JP",system-ui,-apple-system,sans-serif}
html[lang=en]{--font-ui:Inter,"Noto Sans","Noto Sans JP",system-ui,-apple-system,sans-serif}
@font-face{font-family:'Galmuri11';src:url(../assets/font/Galmuri11.woff2) format('woff2');font-display:swap}
html,body{margin:0;height:100%;background:#07050c;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font-family:var(--font-ui);font-weight:400;color:rgba(255,255,255,.92);-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
#c{position:fixed;left:0;top:0;image-rendering:pixelated;image-rendering:crisp-edges}
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden;font-family:var(--font-px)}
/* ---- minimal UI language (everything except the phone): translucent black, 8px radius, thin edge, modern sans ---- */
.nm{position:absolute;transform:translate(-50%,-100%);font-family:var(--font-ui);font-size:11px;line-height:1.2;color:rgba(255,255,255,.92);background:rgba(0,0,0,.5);padding:2px 7px;border-radius:8px;white-space:nowrap;transition:opacity .2s}
.bub{position:absolute;transform:translate(-50%,-100%);font-family:var(--font-ui);font-size:13px;line-height:1.3;color:rgba(255,255,255,.92);background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:4px 9px;white-space:nowrap}
.bub:after{content:'';position:absolute;left:50%;bottom:-5px;margin-left:-4px;border:4px solid transparent;border-top-color:rgba(0,0,0,.62);border-bottom:0}
.think{position:absolute;transform:translate(-50%,-100%);max-width:min(240px,calc(100vw - 24px));box-sizing:border-box;padding:6px 11px;font:13px/1.4 var(--font-px);overflow-wrap:anywhere;color:rgba(255,255,255,.85);background:rgba(21,17,32,.82);border:1px solid rgba(255,255,255,.2);border-radius:12px 16px 13px 15px;box-shadow:inset 0 1px rgba(255,255,255,.12);pointer-events:none}
.think:before,.think:after{content:'';position:absolute;background:rgba(21,17,32,.82);border:1px solid rgba(255,255,255,.2);border-radius:50%}
.think:before{width:5px;height:5px;left:calc(50% - 5px);bottom:-9px}.think:after{width:2px;height:2px;left:calc(50% + 3px);bottom:-15px}
.needGain{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none}
.needGain img{display:block;image-rendering:pixelated;filter:drop-shadow(0 0 3px currentColor)}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:20;padding:20px;box-sizing:border-box;background:rgba(0,0,0,.7)}
.screen[hidden],#hud[hidden],#chat[hidden]{display:none}
#travel,#creator,#invite,#photo{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.logo{font-size:32px;font-weight:600;letter-spacing:.14em;color:rgba(255,255,255,.92)}
#title{background:linear-gradient(180deg,rgba(5,3,10,0) 0%,rgba(5,3,10,0.25) 60%,rgba(5,3,10,0.1) 100%);justify-content:flex-start;padding-top:calc(env(safe-area-inset-top) + 9vh)}
.sub{font-size:13px;color:rgba(255,255,255,.6);margin-top:-8px}
.box{position:relative;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:16px;display:flex;flex-direction:column;gap:12px;align-items:center;width:min(320px,86vw);box-sizing:border-box}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
button{font-family:inherit;font-size:14px;font-weight:600;color:rgba(255,255,255,.92);background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.12);padding:8px 14px;cursor:pointer;border-radius:8px;transition:background .15s,transform .15s}
@media (hover:hover){button:where(:not(#phone *)):hover{background:rgba(0,0,0,.55);transform:translateY(-1px)}}
button:active{transform:none;background:rgba(0,0,0,.65)}
button:disabled{opacity:.4;cursor:default}
button.sel{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff}
button.big{font-size:15px;padding:10px 20px;background:#fff;color:#111;border-color:#fff}
@media (hover:hover){button.big:where(:not(#phone *)):hover{background:#f0f0f0}}
button.big:active{background:#dcdcdc}
input{font-family:inherit;font-size:15px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.12);padding:9px 10px;width:100%;box-sizing:border-box;border-radius:6px;outline:0}
input:focus{border-color:rgba(255,255,255,.4)}
input::placeholder{color:rgba(255,255,255,.4)}
label{font-size:13px;color:rgba(255,255,255,.6);width:100%}
#preview{width:100px;height:150px;image-rendering:pixelated}
.sw{width:28px;height:28px;padding:0;border:2px solid rgba(255,255,255,.18);border-radius:50%;outline:0}
.sw.sel{border-color:#fff;outline:0}
/* The frame and headers keep the stylised font; app bodies use the clearer local pixel font. */
#phone{font-family:var(--font-px);color:#f3e6c8;--phone-font:"Galmuri11",var(--font-ui);--phone-body:13px;--phone-small:11px;--phone-page-bg:#f3f5f4}
:where(#phone) button{font-family:inherit;font-size:17px;font-weight:400;color:#ffe9b8;background:#4a2418;border:3px solid #d8a868;outline:2px solid #1a0c08;padding:9px 16px;border-radius:0;transition:none}
:where(#phone) button:active{transform:translateY(2px);background:#6a3420}
:where(#phone) button.sel{background:#8a3a24;color:#fff6d8;box-shadow:0 0 10px #ffb06088}
:where(#phone) button.big{font-size:20px;padding:12px 22px;background:#6a1c1c;border-color:#d8a868;color:#ffe9b8}
:where(#phone) input:focus{border-color:#8a6a4a}
:where(#phone) input{font-family:inherit;font-size:16px;background:#0b0712;color:#fff0d0;border:2px solid #8a6a4a;padding:8px;border-radius:0}
:where(#phone) label{font-size:14px;color:#d8c8a8}
:where(#phone) .note{font-size:12px;color:#b8a8c8;text-align:center;line-height:1.6}
#gdBanner,#jobSlip{font-family:var(--font-px)}
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#hud button,#hud .pe{pointer-events:auto}
/* top-left status card: date and time (calendar.js), weather, place */
#topbar{position:absolute;top:calc(env(safe-area-inset-top) + 10px);left:calc(env(safe-area-inset-left) + 10px);display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 8px;max-width:min(240px,calc(100vw - 140px));padding:8px 12px;box-sizing:border-box;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}
#clockWrap{flex:1 0 100%;display:block}
#clock{display:none}
#dayTxt{display:block;font-size:15px;font-weight:600;line-height:1.3;color:rgba(255,255,255,.92);white-space:normal;font-variant-numeric:tabular-nums}
#wxTxt{font-size:12px;color:rgba(255,255,255,.6)}
#wxTxt:empty{display:none}
#status{flex:0 1 auto;min-width:0;font-size:12px;color:rgba(255,255,255,.6);text-align:left;padding:0;background:none;border:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#inviteBtn{font-size:12px;padding:4px 8px}
#inv{position:absolute;top:calc(env(safe-area-inset-top) + 74px);right:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
#inv button{display:flex;align-items:center;gap:6px;font-size:14px;padding:4px 8px;background:rgba(0,0,0,.55)}
#inv img{image-rendering:pixelated;height:21px}
#btns{position:absolute;right:calc(env(safe-area-inset-right) + 10px);bottom:calc(env(safe-area-inset-bottom) + 14px);display:flex;flex-direction:column;gap:8px;align-items:flex-end}
#btns button{box-sizing:border-box}
/* fixed box, shown by visibility: the buttons above never move when an action appears (labels wrap to 2 lines) */
#actBtn{width:150px;height:54px;padding:2px 8px;font-size:15px;font-weight:600;line-height:1.15;white-space:normal;overflow:hidden;background:#fff;color:#111;border:0;visibility:hidden}
#actBtn.on{visibility:visible}
#actBtn:active{background:#dcdcdc}
#actBtn.hot{animation:pulse .5s ease-in-out infinite alternate}
@keyframes pulse{to{transform:scale(1.05);box-shadow:0 0 0 4px rgba(255,255,255,.25)}}
.rb{width:52px;height:52px;font-size:12px;padding:0;border-radius:50%;background:rgba(0,0,0,.55)}
#btns .rb{width:52px;height:52px;font-size:12px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.1)}
#heartBtn{font-size:22px;color:#ff8aa0}
#btns #reloadBtn{font-size:11px}
#actBtn.gun{background:rgba(0,0,0,.7);color:#fff;border:1px solid rgba(255,255,255,.25)}
#joy{position:absolute;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);display:none}
#knob{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:rgba(255,255,255,.35)}
#toast{position:fixed;z-index:40;pointer-events:none;top:calc(env(safe-area-inset-top) + 64px);left:50%;transform:translate(-50%,-6px);font-size:14px;line-height:1.35;text-align:center;color:rgba(255,255,255,.94);background:rgba(18,14,28,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.35);padding:8px 18px;white-space:pre-line;opacity:0;transition:opacity .25s,transform .25s;width:max-content;max-width:min(420px,calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));overflow-wrap:anywhere}
#toast.on{opacity:1;transform:translate(-50%,0)}
#hint{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 144px);transform:translateX(-50%);font-size:12px;color:rgba(255,255,255,.6);white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.7)}
#chat{position:absolute;left:calc(env(safe-area-inset-left) + 10px);right:calc(env(safe-area-inset-right) + 10px);bottom:calc(env(safe-area-inset-bottom) + 10px);background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:8px;z-index:8}
#chat .row button{font-size:13px;padding:6px 10px}
#chat .line{display:flex;gap:8px}
#chat .line button{white-space:nowrap}
#sleep{position:fixed;inset:0;background:#000;z-index:15;pointer-events:none;opacity:0;display:flex;align-items:center;justify-content:center;font-size:18px;letter-spacing:.1em;color:rgba(255,255,255,.7)}
.link{font-size:12px;word-break:break-all;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:8px;width:100%;box-sizing:border-box;color:rgba(255,255,255,.92);user-select:all;-webkit-user-select:all}
.note{font-size:12px;color:rgba(255,255,255,.6);text-align:center;line-height:1.6}
/* ---- RP HUD ---- */
#topbar .tbtns{display:flex;flex:1 0 100%;gap:4px}
#topbar .tbtns button{font-size:12px;padding:4px 8px}
#topbar .tbtns button[hidden]{display:none}
/* needs: three thin bars on the left edge, above the chat log */
#needs{position:absolute;left:calc(env(safe-area-inset-left) + 10px);bottom:calc(env(safe-area-inset-bottom) + 100px);display:flex;flex-direction:column;gap:7px;width:64px;box-sizing:border-box;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px}
.need{display:flex;align-items:center;gap:5px;font-size:11px;line-height:1;color:rgba(255,255,255,.6)}
.need span{display:inline-block;min-width:1.2em}
html[lang=en] .need span{min-width:2.9em}
html[lang=ko] .need span{min-width:2.2em}
.need .bar{flex:1;height:4px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden}
.need .bar i{display:block;height:100%;width:100%;border-radius:2px}
#st_hp{background:#ff5a5a}#st_food{background:#e8a24a}#st_water{background:#5aa8ff}
#needs.warn{animation:warn 0.8s infinite alternate}
@keyframes warn{to{border-color:#ff5a5a}}
/* bottom rows: chat log (lowest, left), needs above it, the action button (right), the hotbar and ammo in the middle */
#hotbar{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 12px);display:flex;gap:5px;padding:3px;background:#0a0810;border:1px solid rgba(255,255,255,.16);border-radius:6px}
.hslot,.slot{position:relative;width:40px;height:40px;padding:0;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);border-radius:6px;display:flex;align-items:center;justify-content:center}
.hslot img,.slot img{width:28px;height:28px;image-rendering:pixelated}
.hslot i,.slot i{position:absolute;left:4px;top:2px;font-size:9px;font-style:normal;color:rgba(255,255,255,.6)}
.hslot b,.slot b{position:absolute;right:4px;bottom:2px;font-size:10px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
#ammo{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 144px);font-size:14px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;background:rgba(0,0,0,.55);padding:3px 10px;border:1px solid rgba(255,255,255,.08);border-radius:8px}
#chatlog{position:absolute;left:calc(env(safe-area-inset-left) + 10px);bottom:calc(env(safe-area-inset-bottom) + 14px);max-width:min(360px,calc(100vw - 196px));max-height:78px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;pointer-events:none}
#chatlog div{align-self:flex-start;font-size:12px;line-height:1.3;background:rgba(0,0,0,.5);padding:3px 8px;border-radius:6px;color:rgba(255,255,255,.92);transition:opacity 1s;word-break:break-all}
#chatlog div:nth-last-child(n+4){display:none}
#chatlog .cl-sys{color:#e8c46a}#chatlog .cl-me{color:rgba(255,255,255,.6)}#chatlog .fade{opacity:0}
#reloadBtn,#btns .bag{font-size:12px}
#emojis{gap:4px}
#emojis .emob{font-size:20px;padding:2px 4px;background:transparent;border:0;outline:0}
#invPanel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(340px,94vw);max-height:calc(100% - 16px);overflow-y:auto;touch-action:pan-y;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:12px;z-index:9;box-sizing:border-box}
#invPanel[hidden]{display:none}
.ihead{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:14px;font-weight:600;color:rgba(255,255,255,.92)}
.ihead #invW{flex:1;font-size:12px;font-weight:400;color:rgba(255,255,255,.6);text-align:right;font-variant-numeric:tabular-nums}
.ihead button{padding:2px 10px;font-size:14px}
#invGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;justify-items:center}
#invGrid .slot{width:54px;height:54px}
#invGrid .slot img{width:42px;height:42px}
#invGrid .slot.hot{border-color:rgba(232,196,106,.5)}
#invGrid .slot.sel{border-color:rgba(255,255,255,.8);box-shadow:none}
#invGrid .slot.mv{border-style:dashed}
#invInfo{margin-top:10px;min-height:64px;display:flex;flex-direction:column;gap:6px}
#invInfo :is(.iname,.note){min-width:0;white-space:normal;overflow-wrap:anywhere}
#invInfo .iname{font-size:14px;font-weight:600;color:rgba(255,255,255,.92)}
#invInfo .row button{font-size:13px;padding:6px 10px}
#hurt{position:fixed;inset:0;pointer-events:none;z-index:6;opacity:0;box-shadow:inset 0 0 80px 30px #c00000}
#downUI{position:fixed;inset:0;z-index:7;pointer-events:none;background:radial-gradient(ellipse at center,rgba(60,0,0,0.25),rgba(20,0,0,0.75));display:flex;align-items:center;justify-content:center}
#downUI[hidden]{display:none}
#downUI .dbox{text-align:center;color:rgba(255,255,255,.92)}
#downUI .dt{font-size:24px;font-weight:600;letter-spacing:.1em;color:#ff5a5a;margin-bottom:6px}
.emo{position:absolute;transform:translate(-50%,-100%);font-size:24px}
.emo.pop{animation:pop .35s ease-out}
@keyframes pop{0%{transform:translate(-50%,-60%) scale(.3)}70%{transform:translate(-50%,-100%) scale(1.25)}100%{transform:translate(-50%,-100%) scale(1)}}
.me3d{position:absolute;transform:translate(-50%,-100%);font-family:var(--font-ui);font-size:11px;color:rgba(255,255,255,.6);background:rgba(0,0,0,.5);padding:2px 7px;border-radius:8px;white-space:nowrap}
/* ---- creator ---- */
#creator{justify-content:flex-start;gap:8px;padding-top:calc(env(safe-area-inset-top) + 12px)}
#title,#creator{overflow-y:auto}
#cprev{width:288px;max-width:100%;height:174px;image-rendering:pixelated;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(255,255,255,.04)}
#ctabs{gap:4px}
#ctabs button{font-size:13px;padding:6px 10px}
#crows{width:min(360px,94vw);height:38vh;overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;align-items:stretch;gap:8px}
.crow{display:flex;align-items:center;gap:6px;min-height:44px}
.cl{font-size:12px;color:rgba(255,255,255,.6);width:84px;flex:none;line-height:1.15;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.cv{flex:1;min-width:0;text-align:center;font-size:14px;line-height:1.15;color:rgba(255,255,255,.92);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.ar{width:44px;flex:none;padding:4px 0;font-size:14px}
.csw{display:flex;flex-wrap:wrap;gap:6px;min-width:0;flex:1;padding:3px 2px}
.csw .sw{width:26px;height:26px;flex:none}
#preview{width:120px;height:162px}

.cv.off{color:rgba(255,255,255,.4)}
.tog{font-size:12px;padding:4px 6px;flex:none;width:64px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tog.ph,.crow.ph{visibility:hidden}
/* touch: js/ui/mobile.js lifts small buttons to 44 px a moment after every re-render, which made the whole creator jump on each option; the creator is 44 px from the first paint */
body.touch #creator :is(button,.tog.ph){min-width:44px;min-height:44px}
body.touch #creator .tog{min-width:64px}

.tog.on{background:rgba(106,209,154,.2);border-color:#6ad19a}

.gsel{min-width:96px}
#keyhelp{position:fixed;right:12px;top:56px;z-index:30;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:10px 12px;font-size:12px;color:rgba(255,255,255,.6);line-height:1.7;pointer-events:auto}#keyhelp b{display:block;font-weight:600;color:rgba(255,255,255,.92);margin-bottom:4px}#keyhelp span{display:inline-block;min-width:110px;color:rgba(255,255,255,.92)}
#travel{background:rgba(0,0,0,.6)}
#travelList{display:flex;flex-direction:column;gap:10px;width:100%;max-height:calc(var(--mob-vh,100vh) - 190px);overflow-y:auto;touch-action:pan-y;padding:3px;box-sizing:border-box}
#travelList button{width:100%}
/* ---- pixel wallet HUD, also measured by minimap placement ---- */
#cash{position:absolute;top:calc(env(safe-area-inset-top) + 10px);right:calc(env(safe-area-inset-right) + 10px);display:flex;flex-direction:column;gap:3px;max-width:calc(100vw - 20px - env(safe-area-inset-right));color:#e8c46a;font:12px/1.2 var(--font-px);font-variant-numeric:tabular-nums}
#cash .wallet-row{position:relative;display:flex;align-items:center;gap:6px;min-height:26px;box-sizing:border-box;margin:0;padding:4px 7px;border:2px solid #5a5468;border-radius:0;background:#221d2e;box-shadow:inset 0 1px #9a92aa,0 2px #0e0c12;color:inherit;font:inherit;white-space:nowrap}
#cash .wallet-row[hidden]{display:none}
#cash .wallet-row img{width:14px;height:14px;image-rendering:pixelated;flex:none}
#cash .wallet-row b{margin-left:auto;font-weight:normal}
#cash .wallet-row>span:not(.wallet-delta){color:#b8b0c8;font-size:10px}
#walletDetails{display:flex;flex-direction:column;gap:3px;color:#9ae0ff}
#cash .wallet-row.up{color:#58c878;border-color:#58c878}
#cash .wallet-row.dn{color:#ff8ab0;border-color:#e04848}
#cash .wallet-delta{position:absolute;right:calc(100% + 6px);top:50%;transform:translateY(-50%);z-index:1;padding:3px;background:#221d2e;opacity:0;pointer-events:none;white-space:nowrap}
#cash .wallet-delta.up{color:#58c878}#cash .wallet-delta.dn{color:#ff8ab0}
#cash .wallet-delta.go{animation:cashd 1s steps(4) forwards}
@keyframes cashd{0%,70%{opacity:1}100%{opacity:0}}
@media(max-width:760px),(pointer:coarse){
  #walletToggle{min-height:44px;cursor:pointer}
  #walletDetails{display:none}
  #cash.expanded #walletDetails{display:flex}
}

/* ---- give cash panel ---- */
#givePanel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(330px,92vw);max-height:calc(100% - 16px);overflow-y:auto;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:12px;z-index:11;box-sizing:border-box;display:flex;flex-direction:column;gap:10px}
#givePanel[hidden]{display:none}
#givePanel .ihead{margin:0}#givePanel .ihead span{flex:1}
#givePanel .gico{width:28px;height:28px;image-rendering:pixelated}
#givePanel .gamt{display:flex;align-items:center;justify-content:center;gap:8px;font-size:24px;font-weight:600;color:#e8c46a;font-variant-numeric:tabular-nums;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px}
#givePanel .gamt img{width:28px;height:28px;image-rendering:pixelated}#givePanel .gamt b{font-weight:600}
#givePanel .row{gap:6px}#givePanel .row button{font-size:13px;padding:5px 8px}
#givePanel button.big{align-self:center}#givePanel button:disabled{opacity:.4}
/* ---- smartphone: canvas body at an integer scale (--px = one art pixel), DOM pages on the screen ----
   desktop: docked bottom right at 2x (about 280 to 300 px tall); phones: slides up from the bottom at 3x or 4x ---- */
#phone{position:absolute;inset:0;z-index:10;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;box-sizing:border-box;padding:0 0 calc(env(safe-area-inset-bottom) + 8px);--px:3px;--cw:92;--ch:152;--sx:8;--sy:13;--sw:76;--sh:126;--sr:2;--hb:10;--hd:12;--nb:13;--gy:42;--rows:2;--phT:.4s;--phB:.7s;--phA:.2s}
#phone[hidden]{display:none}
#phone .phwrap{position:relative;width:calc(var(--px)*var(--cw));height:calc(var(--px)*var(--ch));pointer-events:auto;transform:translateY(calc(100% + 40px));transition:transform calc(var(--phT)*.65) cubic-bezier(.55,0,.9,.4);filter:drop-shadow(0 calc(var(--px)*2) 0 #00000080)}
#phone.on .phwrap{transform:none;transition:transform var(--phT) cubic-bezier(.16,1.32,.4,1)}
#phoneCv{position:absolute;left:0;top:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
#phoneScr{position:absolute;left:calc(var(--px)*var(--sx));top:calc(var(--px)*var(--sy));width:calc(var(--px)*var(--sw));height:calc(var(--px)*var(--sh));overflow:hidden;border-radius:calc(var(--px)*var(--sr));color:#263733;font-size:var(--phone-body);line-height:1.55}
#phoneScr img{image-rendering:pixelated}
#phone .phoff{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
#phone.boot .phoff{animation:phboot var(--phB) ease-out}
@keyframes phboot{0%,45%{opacity:1}100%{opacity:0}}
/* app header: a back arrow (drawn on the canvas) and the app name under the status bar */
#phoneTop{position:absolute;left:0;right:0;top:calc(var(--px)*var(--hb));height:calc(var(--px)*var(--hd));padding-left:calc(var(--px)*12);box-sizing:border-box;display:flex;align-items:center;color:#fff;font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:1px 1px 0 #0008;cursor:pointer}
#phone.home #phoneTop{display:none}
#phoneBody{position:absolute;left:0;right:0;top:calc(var(--px)*(var(--hb) + var(--hd)));bottom:calc(var(--px)*var(--nb));overflow-y:auto;overflow-x:hidden;touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:12px 12px 16px;font-family:var(--phone-font);font-size:var(--phone-body);box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#b8b0a0 transparent}
#phoneBody::-webkit-scrollbar{width:calc(var(--px)*1.5)}#phoneBody::-webkit-scrollbar-thumb{background:#b8b0a0}
#phone.home #phoneBody{top:calc(var(--px)*var(--hb));bottom:auto;overflow:visible;padding:calc(var(--px)*1) calc(var(--px)*4) 0;display:flex;flex-direction:column;gap:calc(var(--px)*2)}
#phoneBody.pop{animation:phpop var(--phA) ease-out}
@keyframes phpop{from{opacity:0;transform:translateY(calc(var(--px)*3))}to{opacity:1;transform:none}}
/* home: clock + date widget, slim wallet card, then the app grid (always below them, never overlapping) */
.phwid{display:flex;align-items:center;gap:calc(var(--px)*3);min-height:calc(var(--px)*14);flex:none;color:#fff;text-shadow:1px 1px 0 #000a}
.phwid b{flex:none;font-weight:normal;font-size:calc(var(--px)*8);line-height:1;letter-spacing:-1px}
.phwid div{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}.phwid span{font-size:11px;white-space:normal;overflow-wrap:anywhere}.phwid i{font-style:normal;font-size:9px;color:#d8d0f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phwal{display:flex;flex:none;height:calc(var(--px)*14);background:#fbf8f0ee;color:#2a2433;cursor:pointer;box-shadow:inset 0 var(--px) 0 0 #fff,0 calc(var(--px)*-1) 0 0 #2a2433,0 var(--px) 0 0 #2a2433,calc(var(--px)*-1) 0 0 0 #2a2433,var(--px) 0 0 0 #2a2433,var(--px) calc(var(--px)*2) 0 0 #1a142450}
.phwal>div{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;padding:0}.phwal>div+div{box-shadow:inset var(--px) 0 0 0 #ddd5c4}
.phwal img{width:calc(var(--px)*14);height:calc(var(--px)*14);flex:none}
.phwal b{font-weight:normal;font-size:10px;white-space:nowrap;flex:1;text-align:right;padding-right:calc(var(--px)*2)}
#phoneApps{position:absolute;left:0;right:0;top:calc(var(--px)*var(--gy));bottom:calc(var(--px)*var(--nb));display:none;flex-direction:column;background:linear-gradient(#0a061a00,#0a061a73 35%)}
#phone.home #phoneApps{display:flex}
.phpgs{flex:none;height:calc(var(--px)*24*var(--rows));display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;touch-action:pan-x;scrollbar-width:none;overscroll-behavior:contain}
.phpgs::-webkit-scrollbar{display:none}
.phpg{flex:none;width:100%;scroll-snap-align:start;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:calc(var(--px)*24);padding-top:calc(var(--px)*2);box-sizing:border-box}
#phoneApps button,#phoneNav button{all:unset;cursor:pointer;-webkit-tap-highlight-color:transparent}
#phoneApps button{display:flex;flex-direction:column;align-items:center;box-sizing:border-box;height:calc(var(--px)*24);color:#fff;font-size:9px;line-height:calc(var(--px)*5);text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;position:relative}
#phoneApps button img{width:calc(var(--px)*16);height:calc(var(--px)*16);flex:none;margin-bottom:calc(var(--px)*1)}
#phoneApps button span{display:block;max-width:100%;height:calc(var(--px)*5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
#phoneApps button:active img{transform:translateY(var(--px));filter:brightness(.8)}
.phdots{height:calc(var(--px)*6);display:flex;align-items:center;justify-content:center;gap:calc(var(--px)*2)}
.phdots i{width:calc(var(--px)*2);height:calc(var(--px)*2);background:#ffffff66;cursor:pointer}.phdots i.on{background:#fff}
#phoneNav{position:absolute;left:0;right:0;bottom:0;height:calc(var(--px)*var(--nb));display:flex}
#phoneNav button{flex:1}#phoneNav button:active{background:#ffffff26}
/* Cards, lists and controls share one readable scale across phone apps. */
#phoneBody :is(button,input,select,textarea){font-family:var(--phone-font);font-size:var(--phone-body);line-height:1.4;box-sizing:border-box;max-width:100%}
#phoneBody button{min-height:32px;padding:6px 10px;color:#245348;background:#e9f0ed;border:1px solid #bdcdc6;outline:0;border-radius:4px;box-shadow:none;text-shadow:none;cursor:pointer;touch-action:manipulation;overflow-wrap:anywhere}
#phoneBody button:active{transform:none;background:#d8e6df}
#phoneBody button:disabled{opacity:.45;cursor:default}
#phoneBody :is(input,select,textarea){min-height:36px;padding:6px 8px;color:#263733;background:#fff;border:1px solid #bdcdc6;border-radius:4px;outline:0}
#phoneBody :is(button,input,summary):focus-visible{outline:2px solid #28745c;outline-offset:2px}
#phoneBody label{font-size:var(--phone-body);color:#435d52}
#phoneBody .pcard{background:#fff;color:#263733;margin:0 0 12px;padding:10px;border:1px solid #d7e0dc;border-radius:4px;box-shadow:none}
#phoneBody .pbal .lbl{font-size:var(--phone-small);color:#5a7064}
#phoneBody .pbal .big{font-size:20px;line-height:1.3;color:#245348;margin:4px 0;font-variant-numeric:tabular-nums}
#phoneBody .pbal .sub{display:flex;align-items:center;gap:6px;font-size:var(--phone-small);color:#5a7064;flex-wrap:wrap}
#phoneBody .pbal .sub img{width:22px;height:22px}
#phoneBody .phsec{font-size:var(--phone-small);font-weight:600;color:#5a7064;margin:14px 0 4px;padding:0;background:none}
#phoneBody .plist{list-style:none;margin:0;padding:0}
#phoneBody .plist li{display:flex;align-items:center;gap:8px;padding:8px 0;min-height:42px;background:none;border-bottom:1px solid #dce4df;box-sizing:border-box}
#phoneBody .plist li img{width:24px;height:24px;flex:none}
#phoneBody .plist li div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#phoneBody .plist li i{font-style:normal;font-size:var(--phone-small);line-height:1.4;color:#65786e}
#phoneBody .plist li span{font-size:var(--phone-body);line-height:1.45;white-space:normal;overflow:hidden;text-overflow:ellipsis}
#phoneBody .plist li b{font-weight:400;font-size:var(--phone-body);white-space:nowrap;flex:none;font-variant-numeric:tabular-nums}
#phoneBody .plist li b small{font-size:var(--phone-small);color:#65786e}
.plist b.p{color:#24883a}.plist b.m{color:#b53e36}
#phoneBody .pnote{font-size:var(--phone-small);line-height:1.5;color:#65786e;text-align:center;margin:12px 0}
#phoneBody .pempty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 8px;color:#435d52}
#phoneBody .pempty img{width:36px;height:36px}
#phoneBody .pempty p{margin:12px 0 4px;font-size:var(--phone-body)}
#phoneBody .pempty small{font-size:var(--phone-small);color:#65786e}
#phoneBody .bank-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bank-balance{display:flex;flex-direction:column;gap:4px;min-width:0}
.bank-balance span,.bank-credit span{font-size:var(--phone-small);color:#5a7064}
.bank-balance b{font-size:17px;font-weight:400;color:#245348;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.bank-credit{display:grid;grid-template-columns:1fr auto;gap:4px;border-top:1px solid #dce4df;padding-top:8px;grid-column:1/-1}
.bank-credit b{font-size:var(--phone-body);font-weight:400;overflow-wrap:anywhere}
.bank-credit small{grid-column:1/-1;color:#65786e;font-size:var(--phone-small);text-align:right}
.bank-controls{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
#phoneBody .bank-repay{display:flex;align-items:center;gap:6px;flex:1}
#phoneBody .bank-repay img{width:20px;height:20px}
.bank-actions{display:flex;gap:6px;align-items:flex-start}
.bank-actions>*{flex:1;min-width:0}
#phoneBody .bank-actions button{display:flex;gap:6px;align-items:center;width:100%}
.bank-actions img{width:20px;height:20px}
#phoneBody summary{display:flex;align-items:center;gap:6px;min-height:32px;padding:6px 8px;border:1px solid #d7e0dc;border-radius:4px;box-sizing:border-box;font-size:var(--phone-small);line-height:1.4;color:#435d52;cursor:pointer;touch-action:manipulation;list-style:none}
#phoneBody summary::-webkit-details-marker{display:none}
#phoneBody summary::after{content:'+';margin-left:auto;font-family:system-ui,sans-serif}
#phoneBody details[open]>summary::after{content:'−'}
.bank-extra{margin:8px 0}
.bank-controls .bank-extra{margin:0;flex:1;min-width:0}
.bank-controls .bank-extra[open]{flex-basis:100%}
.bank-card-row{display:flex;justify-content:space-between;gap:8px;padding:8px 0;font-size:var(--phone-small)}
.bank-card-row b{font-weight:400;white-space:nowrap}
#phoneBody .bank-cards button{width:100%;margin-top:6px}
.bank-recipients{padding:4px 0}
#phoneBody .bank-recipients button{width:100%;margin-bottom:4px}
#phoneBody .bank-history li{align-items:flex-start}
#phoneBody .bank-history li b{font-size:12px;line-height:1.55;padding-top:1px}
#phoneBody .bank-transit{font-size:var(--phone-small);color:#5a7064;border-top:1px solid #dce4df;margin-top:12px}
#phoneBody .bank-transit p{margin:8px 0}
#phoneBody .ggraph{margin-top:8px}
#phoneBody .gplot{width:100%;height:auto;aspect-ratio:64/34}
@media(pointer:coarse){#phone{--phone-body:14px;--phone-small:12px}#phoneBody summary{min-height:44px}}
/* ---- travel fares ---- */
#travelList button{display:flex;align-items:center;justify-content:space-between;gap:8px}
#travelList .fare{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:600;color:#e8c46a;font-variant-numeric:tabular-nums}
#travelList .fare img{width:28px;height:28px;image-rendering:pixelated;margin:-6px 0}
#travelList button.poor{opacity:.55}#travelList button.poor .fare{color:#ff5a5a}
#phoneGlare{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated}
/* ---- ATM: a plain translucent panel with the touch screen content (--px kept for the layout test) ---- */
#atm{position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;background:none;pointer-events:none;--px:3px}
#atm[hidden]{display:none}
@media (max-height:499px),(max-width:369px){#atm{--px:2px}}
#atm .atwrap{pointer-events:auto;position:relative;width:min(320px,94vw);box-sizing:border-box;padding:14px;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);border-radius:8px}
#atmCv,#atmBill{display:none}
#atm .atx{display:block;position:absolute;top:4px;right:4px;width:44px;height:44px;z-index:1;cursor:pointer}
#atmScr{display:flex;flex-direction:column;gap:10px;color:rgba(255,255,255,.92);font-size:13px;line-height:1.3}
#atmScr .athd{padding-right:36px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:8px;color:rgba(255,255,255,.6)}
#atmScr .athd b{color:rgba(255,255,255,.92);font-weight:600}
#atmScr button{font-size:13px}
#atmScr .attab,#atmScr .atamt{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#atmScr .attab button{font-size:11px;padding:3px 8px;border:1px solid rgba(255,255,255,.08);border-radius:6px;background:rgba(255,255,255,.05);color:rgba(255,255,255,.92)}#atmScr .attab button.on{border-color:#6ad19a;background:rgba(106,209,154,.12)}#atmScr .atamt button,#atmScr .atend{padding:6px;border-radius:0;background:#35414d;color:#eee1c1;font-weight:600;border:2px solid #a18f70;box-shadow:2px 2px 0 #111821;font-size:12px}#atmScr button:disabled{opacity:.35}
#atmScr .atbal{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;background:rgba(255,255,255,.05);border-radius:6px;padding:8px 12px;color:rgba(255,255,255,.6)}
#atmScr .atbal b{font-weight:600;text-align:right;color:#e8c46a;font-variant-numeric:tabular-nums}
#atmScr .atmsg{min-height:1.3em;color:rgba(255,255,255,.6);text-align:center}
#atmScr .atend{align-self:center;padding:6px 28px}
/* ---- safe areas for HUD parts injected by other files ---- */
#hud #wanted{right:calc(env(safe-area-inset-right) + 10px);top:var(--hud-panel-top,calc(env(safe-area-inset-top) + 80px))}
#hud #jobHud{right:calc(env(safe-area-inset-right) + 10px);top:calc(env(safe-area-inset-top) + 94px)}
/* ---- short screens (phones in landscape): screens scroll from the top, the button column wraps into columns ---- */
@media (max-height:520px){
  .screen{justify-content:flex-start;overflow-y:auto;padding-top:calc(env(safe-area-inset-top) + 10px);gap:8px}
  #cprev{width:192px!important;height:116px}
  #crows{height:calc(var(--mob-vh,100vh) - 250px)}

}
@media (orientation:landscape) and (max-height:520px){
  #creator{padding-bottom:8px}
  #creator>canvas,#creator>.row{flex-shrink:0}
  #creator #crows{width:min(560px,94vw);height:max(120px,calc(var(--mob-vh,100vh) - 250px));padding:8px;flex-shrink:0}
  #creator .crow{flex-shrink:0}
  #btns{height:calc(var(--mob-vh,100vh) - 140px - env(safe-area-inset-bottom) - env(safe-area-inset-top));flex-direction:column-reverse;flex-wrap:wrap-reverse;align-content:flex-start;align-items:flex-start;justify-content:flex-start;gap:6px}
  #btns .rb{width:46px;height:46px}
  #actBtn{order:1}#fistBtn{order:2}#invBtn{order:3}#phoneBtn{order:4}#reloadBtn{order:5}#heartBtn{order:6}#talkBtn{order:7}#tentBtn{order:8}
  #hud #jobHud{top:calc(env(safe-area-inset-top) + 70px);right:auto;left:50%;transform:translateX(-50%)}
}
#phoneBody .phbig{display:block;margin:0 auto;font-size:12px;padding:5px 10px}
/* ---- keyboard and mouse (body.fine): no touch-only round buttons, key hints instead; the phone docks left of the action button ---- */
body.fine #btns .rb{width:44px;height:44px}
body.fine #actBtn::before{content:'E';display:inline-block;margin-right:6px;padding:0 5px;font-size:11px;line-height:16px;border:1px solid rgba(0,0,0,.35);border-radius:4px;color:rgba(0,0,0,.6);vertical-align:1px}
body.fine #actBtn.gun::before{border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.7)}
#keyhint{position:absolute;right:calc(env(safe-area-inset-right) + 10px);bottom:calc(env(safe-area-inset-bottom) + 0px);font-size:10px;line-height:13px;color:rgba(255,255,255,.6);white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.7);pointer-events:none;display:none}
body.fine #keyhint{display:block}
body.fine #phone{justify-content:flex-end;padding:0 calc(env(safe-area-inset-right) + 172px) calc(env(safe-area-inset-bottom) + 14px) 0}
body.nobtn #phone{padding-right:calc(env(safe-area-inset-right) + 72px)}
/* ---- mouse (mouse.js): no touch-only round buttons without touch; hover tip, click marker, action chip ---- */
body.nobtn #actBtn{display:none}
#mseMark{position:fixed;z-index:1;pointer-events:none;width:0;height:0;display:none}
#mseMark i{position:absolute;left:0;top:0;width:34px;height:17px;margin:-8px 0 0 -17px;border-radius:50%;border:2px solid rgba(255,255,255,.85);box-sizing:border-box;animation:mseRing .65s ease-out forwards}
#mseMark b{position:absolute;left:0;top:0;width:8px;height:4px;margin:-2px 0 0 -4px;border-radius:50%;background:rgba(255,255,255,.8)}
#mseMark.hit i{border-color:rgba(255,214,120,.95)}#mseMark.hit b{background:rgba(255,214,120,.9)}
@keyframes mseRing{from{transform:scale(.25);opacity:1}to{transform:scale(1.25);opacity:0}}
/* floating action prompt: a small pill above the thing the action belongs to (mouse.js) */
#actPrompt{position:absolute;display:flex;align-items:center;gap:6px;padding:4px 10px;max-width:min(320px,calc(100vw - 24px));box-sizing:border-box;border-radius:999px;background:rgba(10,10,14,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:rgba(255,255,255,.94);font:600 12.5px/16px var(--font-ui);letter-spacing:.02em;white-space:nowrap;transform:translate(-50%,-100%);pointer-events:none;z-index:2;opacity:0;visibility:hidden;transition:opacity .16s ease,visibility 0s .16s}
#actPrompt .l{min-width:0;overflow:hidden;text-overflow:ellipsis}
#actPrompt .k,#actPrompt .p{flex-shrink:0}
#actPrompt.show{opacity:1;visibility:visible;transition:opacity .16s ease}
#actPrompt.xit{padding:2px 8px;font-size:11px;line-height:14px}
body.touch #actPrompt.xit{min-height:28px;padding:0 10px;font-size:12px;line-height:16px;gap:6px}
#actPrompt.tap{pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
#actPrompt.in{animation:actIn .12s ease-out}
@keyframes actIn{from{opacity:0;transform:translate(-50%,-100%) scale(.86)}to{opacity:1;transform:translate(-50%,-100%) scale(1)}}
#actPrompt .k{display:none;width:16px;height:16px;border-radius:5px;background:rgba(255,255,255,.15);font:600 11px/16px system-ui,sans-serif;text-align:center}
#actPrompt.kb .k{display:block}
#actPrompt .p{display:none;color:#e8c46a;font-weight:600}
#actPrompt.pr .p{display:block}
#actPrompt.hot{background:rgba(120,24,16,.75)}
#actPrompt i{position:absolute;left:var(--tx,50%);bottom:-4px;margin-left:-4px;width:0;height:0;border:4px solid transparent;border-bottom:0;border-top-color:rgba(10,10,14,.7)}
#actPrompt.hot i{border-top-color:rgba(120,24,16,.75)}
#actPrompt.np i{display:none}

/* Simultaneous object and conversation choices share the existing collision-aware prompt. */
#actPrompt .choices{display:none}
#actPrompt.multi{padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0;max-width:none;pointer-events:none}
#actPrompt.multi>.k,#actPrompt.multi>.l,#actPrompt.multi>.p,#actPrompt.multi>i{display:none}
#actPrompt.multi .choices{display:block;position:absolute;inset:0}
#actPrompt.multi .choices::after{content:'';position:absolute;left:50%;bottom:1px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(10,10,14,.7)}
#actPrompt.multi button{position:absolute;display:flex;align-items:center;gap:6px;padding:4px 10px;border:0;border-radius:999px;background:rgba(10,10,14,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:rgba(255,255,255,.94);font:600 12.5px/16px var(--font-ui);letter-spacing:.02em;white-space:nowrap;cursor:pointer;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#actPrompt.multi button::before{content:'';position:absolute;inset:-10px -4px}
#actPrompt.multi button{max-width:min(320px,calc(100vw - 24px));box-sizing:border-box}
#actPrompt.multi button>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
#actPrompt.multi .choice-key{flex-shrink:0}
body.touch #actPrompt.multi::after{display:none}
#actPrompt.multi button:focus-visible{outline:2px solid #ffd040;outline-offset:1px}
#actPrompt.multi .choice-key{width:16px;height:16px;border-radius:5px;background:rgba(255,255,255,.15);font:600 11px/16px system-ui,sans-serif;text-align:center;color:#ffd040}
#actPrompt.multi .choice-key:empty{display:none}
.nm.player-name{pointer-events:auto;cursor:pointer;touch-action:manipulation}
.nm.player-name:focus-visible{outline:2px solid #ffd060;outline-offset:2px}
#playerCard{position:fixed;z-index:22;left:50%;top:50%;transform:translate(-50%,-50%);width:min(350px,calc(100vw - 24px));max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px);box-sizing:border-box;overflow-y:auto;touch-action:pan-y;padding:16px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(14,13,21,.96);color:#f3f1f7;box-shadow:0 8px 40px #0008;font:14px/1.5 var(--font-ui)}
#playerCard[hidden]{display:none}
#playerCard p{margin:4px 0 12px;overflow-wrap:anywhere}
#playerCard small{color:#bdb9cd;font-size:11px}
#playerCard button{min-height:44px;margin:0;padding:8px 12px;font:inherit;cursor:pointer}
#playerCard .player-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;color:#bdb9cd}
#playerCard .player-card-head button{font-size:12px}
#playerCard .player-card-profile{display:flex;align-items:center;gap:12px;margin-bottom:12px}
#playerCard .player-card-profile canvas{width:64px;height:64px;image-rendering:pixelated;flex:none;background:#242031;border-radius:6px}
#playerCard .player-card-profile strong{font-size:18px;overflow-wrap:anywhere}
#playerCard .player-card-profile p{margin:4px 0;color:#bfd3d0;font-size:12px}
#playerCard .player-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 8px}
#playerCard .player-card-actions button{flex:1}
#playerCard .player-card-note{display:block;overflow-wrap:anywhere}