@font-face { font-family: "Rubik"; src: url("/assets/fonts/Rubik.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Titan One"; src: url("/assets/fonts/Oswald.woff2") format("woff2"); font-weight: 200 700; font-display: swap; }
:root { --ink:#2436A8; --ink2:#1E2C93; --ink3:#3B4BC0; --cream:#FBF7FF; --cream2:#ECE4FF; --lime:#FFE36E; --teal:#7FD3FF; --teal2:#2436A8; --brick:#FF7EB6; --amber:#FFC83D; --gold:#FFC83D; --pink:#FF7EB6; --sky:#7FD3FF; --lav:#CDB8FF; --mint:#A6EDC9; --mute:#B9C1F2; --line:#141C70; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--ink); color: var(--cream); font-family: Rubik, system-ui, sans-serif; font-size: 16px; line-height: 1.3; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; height: 100vh; height: 100dvh; -webkit-tap-highlight-color: transparent; }
button, input, select { font-family: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.ic { width: 18px; height: 18px; flex: none; }
.nav { display: flex; align-items: center; gap: 12px; padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top)); background: var(--ink); border-bottom: 3px solid #141C70; position: relative; z-index: 30; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--cream); text-decoration: none; flex: none; }
.logo img { width: 40px; height: 40px; }
.logo .wm { font-family: "Titan One", Rubik, sans-serif; font-weight: 400; font-size: 22px; letter-spacing: .4px; line-height: 1; color: #fff; text-shadow: 2px 2px 0 var(--pink); }
.logo .wm b { color: var(--lime); font-weight: 400; }
.logo small { display: block; color: var(--mute); font-size: 12px; font-weight: 500; margin-top: 2px; }
.roompill { margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 5px 14px; border: 3px solid #141C70; border-radius: 16px; background: var(--cream); color: var(--ink); box-shadow: 0 4px 0 #141C70; font-weight: 700; white-space: nowrap; }
.roompill .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); border: 2px solid var(--ink); }
.roompill small { font-weight: 600; color: var(--teal2); font-size: 13px; }
.navlinks { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.pbtn { font: 600 15px Rubik, sans-serif; color: var(--ink); background: var(--cream); border: 3px solid var(--line); border-radius: 14px; box-shadow: 0 4px 0 var(--line); padding: 7px 14px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; transition: transform .08s, box-shadow .08s; }
.pbtn:hover { transform: translateY(-1px); } .pbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.pbtn.lime { background: var(--lime); } .pbtn.sm { padding: 3px 9px; font-size: 13px; box-shadow: 0 2px 0 var(--line); }
.pbtn.dis { opacity: .55; cursor: not-allowed; } .pbtn.lkd { background: var(--cream2); color: #5B63A8; }
.pbtn.big { font-size: 22px; padding: 10px 40px; }
.pbtn.conn { background: var(--cream); } .pbtn .tag { margin-left: 2px; }
.nav .pbtn { border-color: #141C70; box-shadow: 0 4px 0 #141C70; }
#stage { position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.roomtitle { position: absolute; left: 18px; top: 14px; font: 400 30px "Titan One", Rubik, sans-serif; color: #fff; -webkit-text-stroke: 2px var(--line); paint-order: stroke fill; text-shadow: 0 4px 0 var(--line); pointer-events: none; }
.roomtitle span { display: inline-block; font: 700 13px Rubik, sans-serif; color: var(--ink); background: var(--lime); border: 3px solid var(--line); border-radius: 999px; padding: 2px 10px; margin-left: 10px; -webkit-text-stroke: 0; text-shadow: none; vertical-align: middle; }
.roomtitle span.gold { background: var(--gold); }
.me { position: absolute; left: 18px; top: 66px; display: flex; align-items: center; gap: 10px; background: var(--cream); color: var(--ink); border: 3px solid var(--line); border-radius: 16px; box-shadow: 0 4px 0 var(--line); padding: 5px 12px 5px 6px; cursor: pointer; user-select: none; } .me:hover { transform: translateY(-1px); }
.me .av { width: 36px; height: 36px; border-radius: 11px; background: #E6E9FA; border: 3px solid var(--line); display: grid; place-items: center; }
.me .av i { width: 20px; height: 11px; border-radius: 4px; background: #1B2380; position: relative; }
.me .av i::before, .me .av i::after { content: ''; position: absolute; top: 3px; width: 4px; height: 5px; border-radius: 2px; background: var(--lime); left: 4px; } .me .av i::after { left: 12px; }
.me .nm { font-weight: 700; font-size: 17px; line-height: 1.05; } .me .sub { font-size: 12px; color: #4A55B8; font-weight: 500; }
.devchip { position: absolute; left: 18px; top: 124px; font: 700 11px Rubik; letter-spacing: .6px; background: #FF7EB6; color: #fff; border: 3px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.tag { display: inline-block; font: 700 10px Rubik, sans-serif; letter-spacing: .6px; padding: 2px 8px; border-radius: 999px; background: var(--ink3); color: var(--cream); vertical-align: middle; }
.tag.gold { background: var(--gold); color: var(--ink); border: 2px solid var(--ink); }
.panel { position: absolute; background: var(--cream); border: 4px solid var(--line); border-radius: 22px; box-shadow: 0 8px 0 var(--line); color: var(--ink); display: flex; flex-direction: column; overflow: hidden; }
.panel .ph { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 6px 14px; background: var(--lime); border-bottom: 4px solid var(--line); }
.panel .ph .tb { font: 700 14px Rubik, sans-serif; letter-spacing: .4px; display: flex; align-items: center; gap: 6px; }
.panel .x { font: 700 18px/1 Rubik; background: #fff; border: 3px solid var(--line); border-radius: 10px; width: 32px; height: 32px; box-shadow: 0 3px 0 var(--line); color: var(--ink); }
.panel .pb { padding: 12px 16px 16px; }
.panel h3 { font: 400 22px "Titan One", Rubik, sans-serif; margin: 2px 0 6px; } .panel h4 { font: 700 12px Rubik; color: var(--teal2); margin: 14px 0 7px; letter-spacing: .8px; text-transform: uppercase; }
.panel p { color: #2E3A8C; font-size: 15px; margin-bottom: 8px; } .panel p.sm, .panel .sm { font-size: 13px; color: #4A55B8; }
.leave { position: absolute; right: 16px; top: 14px; display: none; }
.in-room .guide, .in-room .keys { display: none; } .in-room .leave { display: inline-flex; }
.hint { position: absolute; left: 0; top: 0; display: none; align-items: center; gap: 8px; background: var(--cream); color: var(--ink); border: 3px solid var(--line); border-radius: 14px; box-shadow: 0 4px 0 var(--line); padding: 4px 12px 4px 5px; font-weight: 700; font-size: 14px; white-space: nowrap; pointer-events: none; z-index: 4; }
.hint.on { display: flex; } .hint .k { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--lime); border: 2px solid var(--line); font-size: 13px; }
.hint.lk { background: #FFF1B8; } .hint .ic { width: 22px; height: 22px; }
.keys { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; background: rgba(20,28,112,.82); border: 3px solid #141C70; border-radius: 999px; padding: 6px 16px; font-size: 14px; color: var(--cream); white-space: nowrap; pointer-events: none; }
kbd { font: 700 12px Rubik; display: inline-block; min-width: 24px; padding: 1px 6px; margin-right: 2px; text-align: center; background: var(--cream); color: var(--ink); border: 2px solid #141C70; border-radius: 7px; box-shadow: 0 2px 0 #141C70; }
.hud { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 10px 16px 12px; background: var(--ink); border-top: 3px solid #141C70; }
.bevel { background: var(--ink2); border: 3px solid #141C70; border-radius: 14px; }
.caption { display: flex; align-items: center; gap: 10px; padding: 6px 12px; min-height: 42px; white-space: nowrap; overflow: hidden; }
.caption .tag { background: var(--teal); color: var(--ink); } .caption .dot { margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); flex: none; }
.caption .txt { overflow: hidden; text-overflow: ellipsis; }
.hbtns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .hbtns .pbtn { justify-content: center; padding: 5px 4px; font-size: 14px; }
.demo { grid-column: 2/3; grid-row: 1/3; font: 400 22px "Titan One", Rubik, sans-serif; background: var(--lime); color: var(--ink); border: 4px solid var(--line); border-radius: 20px; box-shadow: 0 6px 0 var(--line); padding: 0 24px; display: flex; align-items: center; gap: 12px; min-width: 250px; justify-content: center; white-space: nowrap; }
.demo:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--line); }
.demo .key { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: var(--lime); font-size: 18px; }
.toasts { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 6; }
.toast { background: var(--ink); color: var(--cream); border: 3px solid #141C70; border-radius: 999px; padding: 6px 16px; font-weight: 600; font-size: 14px; box-shadow: 0 4px 0 #141C70; transition: opacity .4s, transform .4s; animation: tin .25s ease-out; }
.toast.out { opacity: 0; transform: translateY(-8px); } @keyframes tin { from { opacity: 0; transform: translateY(-8px); } }
#fade { position: absolute; inset: 0; background: var(--ink); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 8; } #fade.on { opacity: 1; }
/* start */
.splash { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; background: radial-gradient(ellipse at center, rgba(20,28,112,.2), rgba(20,28,112,.62)); z-index: 7; overflow: auto; padding: 70px 14px 24px; }
.s-play .splash { display: none; }
.s-start .hud, .s-start .me, .s-start .roomtitle, .s-start .guide, .s-start .zone, .s-start .youdim, .s-start .youhint, .s-start .keys, .s-start .joy, .s-start .acts, .s-start .hint, .s-start .leave, .s-start .devchip, .s-start .roompill { display: none !important; }
.s-start { grid-template-rows: auto 1fr; }
.card { width: min(560px, 100%); background: var(--cream); color: var(--ink); border: 4px solid var(--line); border-radius: 28px; box-shadow: 0 10px 0 var(--line); padding: 26px 30px 20px; text-align: center; }
.card .mark { width: 92px; height: 92px; margin: -70px auto 4px; display: block; filter: drop-shadow(0 5px 0 rgba(0,0,0,.25)); }
.card h1 { font: 400 50px "Titan One", Rubik, sans-serif; color: var(--ink); text-shadow: 3px 3px 0 var(--pink); letter-spacing: .5px; line-height: 1.05; }
.card h1 b { color: var(--lime); }
.card .url { display: inline-block; margin-top: 10px; font: 700 12px Rubik; letter-spacing: .6px; background: var(--ink); color: var(--lime); border-radius: 999px; padding: 3px 12px; }
.card p.lead { margin: 12px auto 16px; color: #2E3A8C; font-size: 16px; max-width: 440px; }
.card label { display: block; text-align: left; font: 700 12px Rubik; letter-spacing: .8px; text-transform: uppercase; color: var(--teal2); margin-bottom: 6px; }
.card input { width: 100%; font: 600 18px Rubik; color: var(--ink); background: #fff; border: 3px solid var(--line); border-radius: 14px; padding: 10px 14px; outline: none; box-shadow: inset 0 3px 0 rgba(0,0,0,.06); }
.card input:focus { border-color: var(--teal2); }
.btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.btns .demo { grid-column: auto; grid-row: auto; min-width: 0; padding: 12px 10px; font-size: 19px; border-radius: 18px; }
.btns .wal { font: 700 19px Rubik; background: #fff; color: var(--ink); border: 4px solid var(--line); border-radius: 18px; box-shadow: 0 6px 0 var(--line); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; }
.btns .wal .ic { width: 22px; height: 22px; } .btns button:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--line); }
.perks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; text-align: left; }
.perks div { border: 2px solid var(--line); border-radius: 14px; padding: 8px 12px; background: #fff; font-size: 13px; color: #2E3A8C; }
.perks b { display: block; font-size: 13px; color: var(--ink); margin-bottom: 2px; } .perks .h { background: #FFF8D6; }
.chain { margin-top: 12px; font-size: 13px; color: #4A55B8; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.chainchip { display: inline-block; border: 2px solid var(--line); border-radius: 999px; padding: 0 8px; color: var(--ink); font-weight: 600; background: #fff; }
.chain .ca { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); } .chain code, .cabox code { font: 600 13px ui-monospace, Menlo, Consolas, monospace; background: #fff; border: 2px solid var(--line); border-radius: 8px; padding: 1px 6px; }
.cp { display: inline-flex; align-items: center; gap: 4px; font: 700 12px Rubik; background: var(--lime); color: var(--ink); border: 2px solid var(--line); border-radius: 8px; padding: 2px 8px; box-shadow: 0 2px 0 var(--line); } .cp .ic { width: 14px; height: 14px; }
.cardlinks { margin-top: 10px; font-size: 13px; color: #8A93D6; display: flex; gap: 8px; justify-content: center; } .cardlinks a { color: var(--teal2); font-weight: 600; text-decoration: none; } .cardlinks a:hover { text-decoration: underline; }
/* modal */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; background: rgba(14,18,70,.55); padding: 16px; }
.modal[hidden] { display: none; }
.mpanel { position: relative; width: min(460px, 100%); max-height: calc(100dvh - 32px); }
.mpanel.wide { width: min(640px, 100%); } .mpanel.gold .ph { background: var(--gold); }
.mpanel .pb { overflow: auto; }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .row .pbtn { font-size: 14px; padding: 6px 12px; }
.wlist { display: grid; gap: 8px; margin: 8px 0; } .wbtn { display: flex; align-items: center; gap: 10px; font: 700 16px Rubik; color: var(--ink); background: #fff; border: 3px solid var(--line); border-radius: 14px; box-shadow: 0 3px 0 var(--line); padding: 8px 12px; } .wbtn img { border-radius: 8px; } .wbtn:hover { background: #FFFBE6; }
.stat { font-size: 13px; color: var(--teal2); min-height: 18px; margin-top: 6px; font-weight: 600; }
.kv { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 0; border-bottom: 2px dashed rgba(20,28,112,.12); font-size: 15px; } .kv > span:first-child { width: 72px; color: var(--mute); font-weight: 600; font-size: 13px; }
.ok { color: var(--teal2); } .warn { color: #E0457A; } .lnk { font-size: 13px; color: var(--teal2); font-weight: 600; display: inline-flex; gap: 3px; align-items: center; } .lnk .ic { width: 13px; height: 13px; }
.perkgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .perkgrid div { border: 2px solid var(--line); border-radius: 12px; padding: 7px 10px; background: #fff; font-size: 12.5px; color: #2E3A8C; } .perkgrid div.h { background: #FFF8D6; } .perkgrid b { display: flex; align-items: center; gap: 4px; color: var(--ink); font-size: 13px; } .perkgrid .ic { width: 14px; height: 14px; }
.skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin-top: 8px; }
.sk { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #fff; border: 3px solid var(--line); border-radius: 16px; padding: 6px 4px 8px; box-shadow: 0 3px 0 var(--line); color: var(--ink); font-weight: 700; font-size: 13px; } .sk canvas { width: 60px; height: 60px; } .sk small { font-size: 11px; color: var(--mute); display: flex; gap: 3px; align-items: center; } .sk small .ic { width: 12px; height: 12px; }
.sk.on { background: var(--lime); } .sk.lk { background: var(--cream2); } .sk.lk canvas { opacity: .55; }
.emotes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .emotes .pbtn { justify-content: flex-start; } .emotes .ic { width: 15px; height: 15px; }
.help { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; } .help p { font-size: 14px; }
.frm { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 6px; } .frm label { font: 700 12px Rubik; color: var(--teal2); letter-spacing: .6px; text-transform: uppercase; display: grid; gap: 4px; }
.frm select, .frm input { font: 600 16px Rubik; color: var(--ink); background: #fff; border: 3px solid var(--line); border-radius: 12px; padding: 7px 10px; width: 100%; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #2E3A8C; margin: 4px 0; } .chk input { width: 18px; height: 18px; accent-color: var(--teal2); }
.quote { background: var(--ink); color: var(--cream); border: 3px solid #141C70; border-radius: 14px; padding: 9px 12px; font-size: 14px; min-height: 42px; } .quote b { color: var(--lime); }
.cabox { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; } .cabox code { word-break: break-all; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .tiers div { background: #FFF8D6; border: 2px solid var(--line); border-radius: 12px; padding: 6px 10px; font-size: 13px; } .tiers b { display: block; }
.sym { color: var(--teal2); }
#mg { width: 100%; height: auto; display: block; border: 3px solid var(--line); border-radius: 14px; margin-top: 6px; }
.mgrow { display: flex; justify-content: space-between; font-size: 14px; color: #2E3A8C; margin-top: 6px; }
.nojs { position: fixed; inset: 0; z-index: 99; background: var(--ink); padding: 40px 20px; text-align: center; } .nojs p { max-width: 640px; margin: 12px auto; } .nojs a { color: var(--lime); }
/* touch controls */
.joy, .acts { display: none; }
.joy { position: absolute; left: 22px; bottom: calc(24px + env(safe-area-inset-bottom)); width: 128px; height: 128px; border-radius: 50%; background: rgba(251,247,255,.85); border: 4px solid var(--line); box-shadow: 0 6px 0 var(--line); touch-action: none; }
.joy::before { content: ''; position: absolute; inset: 18px; border-radius: 50%; border: 2px dashed rgba(20,28,112,.25); }
.joy i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px; border-radius: 50%; background: var(--lime); border: 4px solid var(--line); box-shadow: 0 4px 0 var(--line); pointer-events: none; }
.acts { position: absolute; right: 18px; bottom: calc(24px + env(safe-area-inset-bottom)); width: 172px; height: 152px; }
.acts button { position: absolute; border: 4px solid var(--line); border-radius: 50%; box-shadow: 0 6px 0 var(--line); font: 700 13px Rubik; color: var(--ink); display: grid; place-items: center; align-content: center; line-height: 1.05; touch-action: manipulation; }
.acts button:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--line); }
.acts .e { right: 0; bottom: 0; width: 98px; height: 98px; background: var(--lime); font-size: 32px; } .acts .e small { display: block; font-size: 11px; }
.acts .em { left: 0; bottom: 8px; width: 64px; height: 64px; background: var(--cream); font-size: 11px; }
.acts .rn { left: 34px; top: 0; width: 58px; height: 58px; background: var(--cream); font-size: 11px; } .acts .rn.on { background: var(--gold); }
/* mobile */
body.mobile .joy, body.mobile .acts { display: block; }
body.mobile .hud, body.mobile .keys, body.mobile .hide-m { display: none !important; }
body.mobile { grid-template-rows: auto 1fr; }
body.mobile .nav { padding: 6px 10px; padding-top: max(6px, env(safe-area-inset-top)); gap: 8px; } body.mobile .logo .wm { font-size: 16px; } body.mobile .logo small, body.mobile .roompill { display: none; } body.mobile .logo img { width: 32px; height: 32px; }
body.mobile .navlinks .pbtn { padding: 5px 9px; font-size: 13px; } body.mobile .navlinks { gap: 6px; }
body.mobile .roomtitle { font-size: 21px; left: 12px; top: 10px; } body.mobile .roomtitle span { font-size: 10px; padding: 1px 7px; margin-left: 6px; }
body.mobile .me { left: 12px; top: 46px; padding: 3px 9px 3px 4px; } body.mobile .me .av { width: 28px; height: 28px; } body.mobile .me .nm { font-size: 14px; } body.mobile .devchip { left: 12px; top: 92px; }
body.mobile .guide { right: 10px; top: 10px; padding: 4px 10px 4px 4px; } body.mobile .guide b { width: 26px; height: 26px; font-size: 16px; } body.mobile .guide span { font-size: 13px; }
body.mobile .leave { right: 10px; top: 10px; padding: 5px 10px; font-size: 13px; }
body.mobile .toasts { top: 120px; width: 90%; } body.mobile .toast { font-size: 13px; text-align: center; }
body.mobile .card { padding: 18px 18px 16px; border-radius: 24px; } body.mobile .card h1 { font-size: 34px; } body.mobile .card .mark { width: 76px; height: 76px; margin-top: -56px; }
body.mobile .card p.lead { font-size: 14px; margin: 10px auto 12px; } body.mobile .btns { grid-template-columns: 1fr; gap: 10px; } body.mobile .perks { gap: 8px; } body.mobile .perks div { font-size: 12px; padding: 6px 9px; }
body.mobile .hint { font-size: 13px; }
@media (max-width: 560px) { .frm, .help, .perkgrid { grid-template-columns: 1fr; } .tiers { grid-template-columns: 1fr; } .mpanel .pb { padding: 10px 12px 14px; } }
@media (max-width: 1100px) { body:not(.mobile) .keys span:nth-child(n+4) { display: none; } .demo { min-width: 200px; font-size: 19px; } }
@media (max-height: 560px) { .keys { display: none; } }
@media (prefers-reduced-motion: reduce) { .toast, #fade { transition: none; animation: none; } }

/* Holder Park card */
.hcard { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; }
.hcard canvas { width: 120px; height: 120px; background: #E6F8F0; border: 3px solid var(--line); border-radius: 18px; }
.hcard .full { display: block; font: 600 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; background: #fff; border: 2px solid var(--line); border-radius: 10px; padding: 6px 8px; margin: 2px 0 6px; word-break: break-all; }
@media (max-width: 520px) { .hcard { grid-template-columns: minmax(0, 1fr); justify-items: center; } .hcard .hinfo { width: 100%; } }
/* Solabot additions: Swap & Bridge tabs, Jupiter Plugin host */
.tabs { display: flex; gap: 6px; margin: 0 0 10px; background: var(--cream2); border: 3px solid var(--line); border-radius: 14px; padding: 4px; }
.tab { flex: 1; font: 700 14px Rubik, sans-serif; color: var(--ink); background: transparent; border: 0; border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.tab.on { background: var(--pink); color: #fff; box-shadow: 0 3px 0 var(--line); }
.tab:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.jup { min-height: 480px; margin: 8px 0 10px; border: 3px solid var(--line); border-radius: 16px; overflow: hidden; background: #0f1530; position: relative; }
.jupload { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; color: #fff; font: 600 15px Rubik, sans-serif; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 4px 0 8px; } .chk input { width: 18px; height: 18px; accent-color: var(--pink); }
.ic.ph { border-radius: 6px; }
body.mobile .jup { min-height: 430px; }

/* ---- v2: guide button, primary buy, YOU intro, tour ---- */
.guide { position: absolute; right: 16px; top: 14px; display: flex; align-items: center; gap: 8px; background: var(--cream); color: var(--ink); border: 3px solid var(--line); border-radius: 999px; box-shadow: 0 4px 0 var(--line); padding: 5px 14px 5px 5px; font: 700 15px Rubik, sans-serif; z-index: 3; }
.guide b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pink); color: #fff; font: 400 18px "Titan One", Rubik, sans-serif; border: 2px solid var(--line); }
.guide:hover { transform: translateY(-1px); } .guide:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.pbtn.buy { background: linear-gradient(180deg, #7DF7C2, #3FE39E); color: var(--ink); font-weight: 700; }
.pbtn.buy small { font-size: 11px; font-weight: 600; opacity: .8; margin-left: 2px; }
.nav .navbuy { white-space: nowrap; flex-direction: column; align-items: center; gap: 0; line-height: 1.05; padding: 4px 14px; }
.nav .navbuy small { display: block; font-size: 10px; margin: 0; }
body.mobile .nav .navbuy { padding: 3px 9px; } body.mobile .nav .navbuy small { font-size: 9px; }
.sbuy { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 12px 0 0; padding: 10px 12px; text-decoration: none; font: 400 22px "Titan One", Rubik, sans-serif; color: var(--ink); background: linear-gradient(180deg, #7DF7C2, #3FE39E); border: 4px solid var(--line); border-radius: 18px; box-shadow: 0 6px 0 var(--line); line-height: 1.05; }
.sbuy small { font: 600 12px Rubik, sans-serif; opacity: .85; margin-top: 2px; }
.sbuy:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--line); }
.youdim { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .5s ease; background: radial-gradient(circle 120px at var(--x, 50%) var(--y, 50%), rgba(14,18,70,0) 0, rgba(14,18,70,0) 70%, rgba(14,18,70,.55) 100%); }
.youdim.on { opacity: 1; } .youdim.out { opacity: 0; }
.youhint { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; display: flex; flex-direction: column; align-items: center; background: var(--pink); color: #fff; border: 3px solid var(--line); border-radius: 16px; box-shadow: 0 5px 0 var(--line); padding: 6px 14px 7px; white-space: nowrap; opacity: 0; transition: opacity .45s ease; }
.youhint b { font: 400 20px "Titan One", Rubik, sans-serif; line-height: 1.05; } .youhint span { font: 600 11.5px Rubik, sans-serif; opacity: .95; }
.youhint::after { content: ''; position: absolute; left: 50%; bottom: -12px; margin-left: -9px; border: 9px solid transparent; border-top-color: var(--line); border-bottom: 0; }
.youhint.on { opacity: 1; animation: ybob 1s ease-in-out infinite; } .youhint.out { opacity: 0; }
@keyframes ybob { 50% { margin-top: -5px; } }
.tour { position: fixed; inset: 0; z-index: 60; }
.tour[hidden] { display: none; }
.tour.center { background: rgba(14,18,70,.55); }
.tspot { position: fixed; border-radius: 50%; box-shadow: 0 0 0 4px #FFE36E, 0 0 0 9px rgba(255,126,182,.85), 0 0 0 200vmax rgba(14,18,70,.58); transition: left .35s ease, top .35s ease, width .35s ease, height .35s ease, opacity .25s; pointer-events: none; }
.tcard { position: fixed; width: min(340px, calc(100vw - 24px)); background: var(--cream); color: var(--ink); border: 4px solid var(--line); border-radius: 22px; box-shadow: 0 8px 0 var(--line); padding: 14px 16px 12px; transition: left .3s ease, top .3s ease; }
.tcard .tstep { display: inline-block; font: 700 11px Rubik; letter-spacing: .7px; text-transform: uppercase; background: var(--lime); border: 2px solid var(--line); border-radius: 999px; padding: 1px 9px; }
.tcard h4 { font: 400 23px "Titan One", Rubik, sans-serif; margin: 8px 0 4px; color: var(--ink); text-shadow: 2px 2px 0 #FFC4DE; }
.tcard p { font-size: 15px; color: #2E3A8C; margin: 0 0 10px; }
.tdots { display: flex; gap: 6px; margin-bottom: 10px; } .tdots i { width: 9px; height: 9px; border-radius: 50%; background: var(--cream2); border: 2px solid var(--line); } .tdots i.done { background: #FFC4DE; } .tdots i.on { background: var(--pink); width: 22px; border-radius: 6px; }
.tbtns { display: flex; align-items: center; gap: 8px; } .tbtns .sp { flex: 1; }
.tbtns .pbtn { font-size: 14px; padding: 6px 14px; } .tbtns .pbtn:disabled { opacity: .45; cursor: default; }
.tskip { background: none; border: 0; font: 600 13px Rubik; color: #6B78C4; text-decoration: underline; padding: 4px 2px; }
body.touring .hint { display: none !important; }
@media (prefers-reduced-motion: reduce) { .tspot, .tcard, .youdim, .youhint { transition: none; animation: none; } }
/* ---- Clawpump District panels ---- */
.mpanel.cpz .ph { background: linear-gradient(90deg, #7DF7C2, #B9FFE0); } .mpanel.cpw { width: min(760px, 100%); }
.cph { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .cph img { width: 52px; height: 52px; border-radius: 14px; border: 3px solid var(--line); background: #0E1A2B; }
.cph h3 { margin: 0; } .cph p { margin: 0; font-size: 13px; color: #4A55B8; }
.cpupd { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6B78C4; font-weight: 600; margin-top: 10px; } .cpupd i { width: 8px; height: 8px; border-radius: 50%; background: #14C98A; } .cpupd.stale i { background: var(--gold); }
.cptiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0; }
.cptiles div { background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 7px 10px; } .cptiles b { display: block; font: 400 20px "Titan One", Rubik, sans-serif; color: var(--ink); line-height: 1.1; } .cptiles span { font-size: 11.5px; color: #4A55B8; font-weight: 600; }
.cptiles.t3 { grid-template-columns: repeat(3, 1fr); } .cptiles.t2 { grid-template-columns: repeat(2, 1fr); }
.cplist { list-style: none; display: grid; gap: 6px; margin: 6px 0; padding: 0; }
.cplist li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 5px 10px; font-size: 14px; }
.cplist li .rk { font: 400 16px "Titan One", Rubik, sans-serif; color: var(--teal2); text-align: center; } .cplist li:nth-child(1) .rk { color: #E0A400; } .cplist li .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cplist li .nm small { display: block; font-weight: 500; font-size: 11.5px; color: #6B78C4; overflow: hidden; text-overflow: ellipsis; }
.cplist li .v { font-weight: 700; color: var(--ink); white-space: nowrap; } .cplist li.mine { background: #FFE0EF; border-color: var(--pink); box-shadow: 0 0 0 3px #FFC4DE; }
.cplist li a { color: inherit; text-decoration: none; } .cplist li a:hover { text-decoration: underline; }
.cplist li img { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line); object-fit: cover; background: #E6E9FA; }
.cplist.tok li { grid-template-columns: 30px minmax(0, 1fr) auto; }
.cpmsg { background: #fff; border: 2px dashed rgba(20,28,112,.3); border-radius: 14px; padding: 16px; text-align: center; color: #4A55B8; font-weight: 600; font-size: 14px; }
.cpmsg .pbtn { margin-top: 8px; }
.cpskel { height: 34px; border-radius: 12px; background: linear-gradient(90deg, #EEE9F8, #F8F5FF, #EEE9F8); background-size: 200% 100%; animation: cpsk 1.2s linear infinite; margin: 6px 0; }
@keyframes cpsk { to { background-position: -200% 0; } }
.cpchart { width: 100%; height: 120px; display: block; background: #fff; border: 2px solid var(--line); border-radius: 14px; }
.cpbar { height: 14px; border-radius: 999px; background: #EEE9F8; border: 2px solid var(--line); overflow: hidden; margin: 6px 0 2px; } .cpbar i { display: block; height: 100%; background: linear-gradient(90deg, #FF7EB6, #FFC83D); }
.cpstall { background: #FFF8D6; border: 3px solid var(--line); border-radius: 16px; padding: 10px 12px; margin: 6px 0 10px; } .cpstall h4 { margin: 0 0 4px; } .cpstall p { font-size: 14px; margin: 4px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; } .chips span { font: 600 11.5px Rubik; background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: 1px 8px; color: var(--ink); }
.cpgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; } .cpgrid div { background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 6px 9px; font-size: 13px; } .cpgrid b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cpgrid span { font-size: 11.5px; color: #6B78C4; }
/* HQ */
.hqtop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } .hqtop .cptiles { grid-template-columns: repeat(2, 1fr); } .hqtop .cptiles.t3 { grid-template-columns: repeat(3, 1fr); } .hqtop .cptiles.t3 b { font-size: 17px; }
.hqcta { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; margin: 4px 0 12px; }
.hqcta a { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--ink); border: 4px solid var(--line); border-radius: 18px; box-shadow: 0 6px 0 var(--line); padding: 10px 10px; text-align: center; line-height: 1.05; }
.hqcta a b { font: 400 22px "Titan One", Rubik, sans-serif; } .hqcta a small { font: 600 12px Rubik; opacity: .85; margin-top: 3px; }
.hqcta .main { background: linear-gradient(180deg, #7DF7C2, #3FE39E); } .hqcta .main b { font-size: 25px; } .hqcta .alt { background: var(--lime); }
.hqcta a:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--line); }
.xwall { display: grid; gap: 8px; } .xcard { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 8px 10px; text-decoration: none; color: var(--ink); }
.xcard img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line); } .xcard b { font-size: 14px; } .xcard .h { font-size: 12px; color: #6B78C4; } .xcard p { font-size: 12.5px; margin: 3px 0 4px; color: #2E3A8C; } .xcard .n { font-size: 11.5px; color: #4A55B8; } .xcard .n b { font-size: 12px; }
.founder { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--ink); color: var(--cream); border: 3px solid #141C70; border-radius: 16px; padding: 10px 12px; margin-top: 10px; }
.founder img { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--lime); } .founder q { font: 400 18px "Titan One", Rubik, sans-serif; color: var(--lime); display: block; } .founder span { font-size: 12px; color: #C9CFFF; }
.founder a { color: #fff; }
@media (max-width: 620px) { .hqtop, .hqcta { grid-template-columns: minmax(0, 1fr); } .cptiles { grid-template-columns: repeat(2, 1fr); } .cptiles.t3 { grid-template-columns: repeat(3, 1fr); } .cptiles b { font-size: 17px; } }
/* district badge: right side, under the top-right button */
.zone { position: absolute; right: 16px; top: 64px; z-index: 3; display: flex; align-items: center; gap: 6px; background: #FFE36E; color: #1E2C93; border: 3px solid var(--line); border-radius: 999px; box-shadow: 0 3px 0 var(--line); padding: 3px 12px 3px 8px; font: 700 13px Rubik, sans-serif; letter-spacing: .2px; white-space: nowrap; pointer-events: none; }
.zone .dot { width: 9px; height: 9px; border-radius: 50%; background: #FF7EB6; border: 2px solid var(--line); }
.zone.cp { background: #14F195; color: #04120B; border-color: #04120B; box-shadow: 0 3px 0 #04120B; } .zone.cp .dot { background: #04120B; border-color: #04120B; box-shadow: 0 0 0 2px #B9FFE0; }
.zone.room { background: #CDB8FF; color: #1E2C93; }
body.mobile .zone { right: 10px; top: 50px; font-size: 11px; padding: 2px 9px 2px 6px; border-width: 2px; box-shadow: 0 2px 0 var(--line); } body.mobile .zone .dot { width: 7px; height: 7px; }
body.mobile .zone.cp { box-shadow: 0 2px 0 #04120B; }
@media (max-width: 440px) { body.mobile .logo .wm { display: none; } body.mobile .nav { gap: 6px; } body.mobile .navlinks .pbtn { padding: 5px 8px; } }
body.mobile .roomtitle span { display: none; } body.mobile .roomtitle { max-width: calc(100% - 130px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* holder profiles */
.pbtn.block { width: 100%; justify-content: center; background: var(--gold); font-weight: 800; margin-top: 10px; }
.pbtn.danger { color: #C4235A; background: #fff; }
.hlinks { align-items: stretch; }
.hlinks .pbtn { flex: 1 1 auto; justify-content: center; }
.prow { display: inline-flex; align-items: center; gap: 6px; }
.hav { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); background: #E6F8F0; vertical-align: middle; }
.ehead { display: flex; gap: 12px; align-items: center; }
.ehead canvas { width: 64px; height: 64px; background: #E6F8F0; border: 3px solid var(--line); border-radius: 16px; }
.efrm { display: grid; gap: 8px; margin: 10px 0 4px; }
.efrm label { font: 700 12px Rubik, sans-serif; letter-spacing: .6px; text-transform: uppercase; color: var(--teal2); display: grid; gap: 4px; }
.efrm input { font: 600 16px Rubik, sans-serif; color: var(--ink); background: #fff; border: 3px solid var(--line); border-radius: 12px; padding: 8px 12px; width: 100%; }
.pfnote { text-align: center; margin: 6px 0 0; font-size: 13.5px; color: #3E4AB0; font-weight: 700; }
.erow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.erow .sm { margin: 0; }
@media (max-width: 520px) { .erow { flex-wrap: wrap; } .hlinks .pbtn { flex: 1 1 100%; } }
/* holder profile inside MY WALLET */
.wprof { margin: 12px 0 6px; padding: 10px 12px 8px; border: 3px solid var(--line); border-radius: 16px; background: #F4FBF8; }
.wprof h4 { margin: 0 0 6px; }
.wprof .efrm { margin-top: 6px; }
.wprof .row { margin-top: 8px; }
.wprof .stat:empty { display: none; }
.wbub { background: #F3F6FF; }
.wbub .efrm label + label { margin-top: 4px; }
/* MY WALLET: wider, profile and chat balloons side by side */
.mpanel.acct { width: min(860px, 100%); }
.wgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; margin: 12px 0 6px; }
.wgrid .wprof { margin: 0; height: 100%; }
@media (max-width: 720px) { .wgrid { grid-template-columns: 1fr; gap: 10px; } }
/* gate: restoring a trusted Phantom session */
.gstat { margin: 10px 0 0; min-height: 0; font: 700 13px Rubik, sans-serif; color: var(--teal2); text-align: center; }
.gstat:empty { display: none; }
body.restoring .splash .btns { opacity: .55; pointer-events: none; }
body.restoring .gstat::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border: 3px solid var(--teal2); border-right-color: transparent; border-radius: 50%; animation: gspin .8s linear infinite; }
@keyframes gspin { to { transform: rotate(360deg); } }
/* holder locate pin */
.youhint.holder { background: #2FB8E6; }
/* park name: full width row inside MY WALLET */
.wgrid .wname { grid-column: 1 / -1; height: auto; background: #FFF8D6; }
/* Holder chat panel (right side). Public read, holders type. */
.hchat { position: absolute; right: 16px; top: 104px; height: calc(100% - 126px); width: 292px; z-index: 4; display: flex; flex-direction: column; background: var(--cream); border: 3px solid var(--line); border-radius: 18px; box-shadow: 0 5px 0 var(--line); overflow: hidden; color: var(--ink); }
.hchat[hidden] { display: none; }
.hch { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; background: var(--lime); border-bottom: 3px solid var(--line); }
.hct { font: 700 13px Rubik, sans-serif; letter-spacing: .3px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.hct i { width: 8px; height: 8px; border-radius: 50%; background: #14C98A; box-shadow: 0 0 0 2px var(--line); }
.hch small { flex: 1; font: 600 11px Rubik, sans-serif; color: #2E3A8C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcmin { font: 700 12px Rubik, sans-serif; background: #fff; color: var(--ink); border: 2px solid var(--line); border-radius: 999px; padding: 2px 10px; box-shadow: 0 2px 0 var(--line); cursor: pointer; }
.hcl { flex: 1; min-height: 60px; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; font: 500 13px/1.3 Rubik, sans-serif; overscroll-behavior: contain; }
.hcm { flex-shrink: 0; background: #fff; border: 2px solid rgba(20,28,112,.18); border-radius: 12px; padding: 4px 9px; word-break: break-word; }
.hcm b { display: block; font: 700 11.5px Rubik, sans-serif; color: var(--teal2); }
.hcm.mine { background: #E6F8F0; align-self: flex-end; max-width: 88%; } .hcm.mine b { color: #FF5FA2; }
.hcm.sys { background: transparent; border: 0; padding: 0 2px; font-size: 11.5px; color: #6A74C8; text-align: center; }
.hcf { display: flex; gap: 6px; padding: 7px 8px 8px; border-top: 2px dashed rgba(20,28,112,.15); }
.hcf input { flex: 1; min-width: 0; font: 600 14px Rubik, sans-serif; color: var(--ink); background: #fff; border: 3px solid var(--line); border-radius: 12px; padding: 6px 10px; }
.hcf .pbtn { padding: 4px 12px; font-size: 13px; }
.hchat.ro .hcf { display: none; }
.hclock { margin: 0; padding: 7px 10px 9px; font: 600 12px Rubik, sans-serif; color: #4A55B8; text-align: center; border-top: 2px dashed rgba(20,28,112,.15); }
.hclock[hidden] { display: none; }
.hchat.min { height: auto; width: auto; border-radius: 999px; }
.hchat.min .hch { border-bottom: 0; background: var(--lime); }
.hchat.min .hcl, .hchat.min .hcf, .hchat.min .hclock, .hchat.min .hch small { display: none; }
.touring .hchat, .modal-open .hchat { z-index: 2; }
body.mobile .hchat { right: 10px; top: 84px; height: 46%; width: min(260px, 70vw); }
body.mobile .hchat.min { height: auto; }
/* desktop: chat runs down toward the bottom of the stage (just above the HUD buttons); on narrower screens it stops above the centered key hints pill so they never overlap */
@media (max-width: 1250px) { body:not(.mobile):not(.in-room) .hchat:not(.min) { height: calc(100% - 180px); } }
@media (max-height: 560px) { .hchat:not(.min) { top: 96px; height: calc(100% - 108px); } }
/* ---- Claw Desk (signals.js) ---- */
.mpanel.desk { width: min(700px, 100%); } .mpanel.desk .ph { background: linear-gradient(90deg, #FFE36E, #FFC83D); display: flex; align-items: center; gap: 6px; }
.mpanel.desk h4 { display: flex; align-items: center; gap: 6px; margin: 12px 0 6px; font: 400 15px "Titan One", Rubik, sans-serif; color: var(--ink); } .mpanel.desk h4 small { font: 600 11px Rubik; color: var(--mute); }
.dlogo { width: 22px; height: 22px; border-radius: 50%; background: #0B0F1A; border: 2px solid var(--line); vertical-align: middle; object-fit: contain; padding: 1px; }
.dlogo.sm { width: 18px; height: 18px; } .dlogo.big { width: 54px; height: 54px; border-width: 3px; padding: 3px; flex: none; } .dlogo.hd { width: 24px; height: 24px; }
.dhead { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 8px; border: 3px solid var(--line); border-radius: 16px; background: var(--cream2); box-shadow: 0 3px 0 var(--line); }
.dhead h3 { font: 400 20px "Titan One", Rubik, sans-serif; color: var(--ink); margin: 0; } .dhead p { margin: 2px 0 0; }
.dav { width: 64px; height: 64px; flex: none; border: 3px solid var(--line); border-radius: 16px; background: #fff; }
.dmeta { flex: 1; min-width: 0; } .dmeta p { margin: 2px 0; }
.dlive { display: inline-flex; align-items: center; gap: 5px; font: 700 11px Rubik; color: #0E7A50; } .dlive::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #14C77B; box-shadow: 0 0 0 3px rgba(20,199,123,.25); animation: dpulse 1.4s ease-in-out infinite; }
@keyframes dpulse { 50% { box-shadow: 0 0 0 6px rgba(20,199,123,0); } }
.dlist { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 6px; }
.dlist > li { display: grid; grid-template-columns: minmax(110px, 1.1fr) minmax(0, 2fr) auto auto; align-items: center; gap: 8px; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 5px 8px; box-shadow: 0 2px 0 var(--line); font-size: 12.5px; color: #2E3A8C; }
.dlist > li.dnone { display: block; text-align: center; color: var(--mute); font-weight: 600; box-shadow: none; border-style: dashed; }
.dtk { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; background: none; border: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.dtk b { font: 400 14px "Titan One", Rubik, sans-serif; } .dtk small { font-size: 11px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; } .dtk:not([disabled]):hover b { text-decoration: underline; } .dtk[disabled] { cursor: default; }
.dmid { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; }
.dscore { --s: 0; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font: 400 13px "Titan One", Rubik; color: var(--ink); background: radial-gradient(closest-side, #fff 72%, transparent 74% 100%), conic-gradient(#FFC83D calc(var(--s) * 1%), #ECE4FF 0); border: 2px solid var(--line); }
.dv { display: inline-block; font: 800 10.5px Rubik; letter-spacing: .3px; padding: 3px 8px; border: 2px solid var(--line); border-radius: 999px; white-space: nowrap; color: var(--ink); }
.dv.v-con { background: #A6EDC9; } .dv.v-wat { background: #FFE36E; } .dv.v-pas { background: #ECE4FF; color: #4A55B8; } .dv.v-avo { background: #FF7EB6; } .dv.v-yng { background: #CDB8FF; }
.dfl { display: inline-block; font: 700 10.5px Rubik; padding: 1px 7px; border-radius: 999px; border: 1.5px solid var(--line); white-space: nowrap; }
.dfl.s-high { background: #FF7EB6; } .dfl.s-med { background: #FFE36E; } .dfl.s-low { background: #ECE4FF; } .dfl.s-ok { background: #A6EDC9; }
.dbar { display: inline-block; width: 70px; height: 9px; border: 1.5px solid var(--line); border-radius: 6px; background: #ECE4FF; overflow: hidden; vertical-align: middle; } .dbar i { display: block; height: 100%; background: linear-gradient(90deg, #FFC83D, #FFE36E); }
.dage { font-weight: 800; color: var(--ink); }
.dvol { font: 800 10.5px Rubik; padding: 1px 7px; border-radius: 999px; border: 1.5px solid var(--line); text-transform: uppercase; }
.dvol.v-calm { background: #A6EDC9; } .dvol.v-lively { background: #7FD3FF; } .dvol.v-wild { background: #FFE36E; } .dvol.v-extreme { background: #FF7EB6; }
.dfacs { display: grid; gap: 4px; } .dfac { display: grid; grid-template-columns: 150px 90px 30px 1fr; align-items: center; gap: 8px; font-size: 12.5px; color: #2E3A8C; }
.dfac small { color: var(--mute); } .dfac .dbar { width: 90px; } .dfac b { font: 400 13px "Titan One"; color: var(--ink); } .dfac em { font-style: normal; font-size: 11.5px; color: #6871C7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dflags, .dwarn, .dnotes { margin: 4px 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 12.5px; color: #2E3A8C; }
.dflags li { border: 2px solid var(--line); border-radius: 10px; padding: 3px 8px; background: #fff; } .dflags li b { display: inline-block; min-width: 38px; font-size: 10.5px; } .dflags li.s-high { background: #FFE0EE; } .dflags li.s-med { background: #FFF8D6; } .dflags li.s-ok { background: #E6F9F0; }
.dwarn li { background: #FFE0EE; border: 2px solid #E0457A; border-radius: 10px; padding: 4px 8px; font-weight: 600; }
.dnotes li::before { content: "\2022 "; color: var(--gold); font-weight: 800; }
.dtop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 3px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 3px 0 var(--line); }
.dbig { font: 400 34px "Titan One", Rubik; color: var(--ink); } .dtop .dscore { width: 58px; height: 58px; font-size: 18px; border-width: 3px; }
.dtab { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; color: #2E3A8C; background: #fff; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; }
.dtab th { background: var(--cream2); font: 800 11px Rubik; color: var(--ink); text-align: left; padding: 5px 8px; } .dtab td { padding: 4px 8px; border-top: 1.5px dashed rgba(20,28,112,.14); } .dtab.sm td, .dtab.sm th { font-size: 11.5px; padding: 3px 6px; }
.dmsg { text-align: center; padding: 18px 10px; color: #4A55B8; font-weight: 600; }
.dspin { display: inline-block; width: 18px; height: 18px; border: 3px solid var(--cream2); border-top-color: var(--gold); border-radius: 50%; animation: dspin .8s linear infinite; vertical-align: middle; margin-right: 6px; } @keyframes dspin { to { transform: rotate(360deg); } }
.ddisc { margin-top: 12px; padding: 7px 10px; border: 2px dashed rgba(20,28,112,.3); border-radius: 12px; background: #FBF7FF; font-size: 11.5px; color: #4A55B8; }
.dmint { font-family: ui-monospace, Menlo, Consolas, monospace; word-break: break-all; }
@media (max-width: 560px) { .dlist > li { grid-template-columns: 1fr auto auto; } .dlist > li .dmid { grid-column: 1 / -1; order: 5; } .dfac { grid-template-columns: 110px 60px 26px; } .dfac em { grid-column: 1 / -1; } .dfac .dbar { width: 60px; } }
/* Hotbot door card (Holder Park, coming soon). Orange accent from the official Hotbot flame (#f47a38). */
.hbcard { position: absolute; left: 0; top: 0; z-index: 6; width: 244px; background: var(--cream); color: var(--ink); border: 3px solid var(--line); border-radius: 18px; box-shadow: 0 6px 0 var(--line); padding: 10px 12px 12px; opacity: 0; transition: opacity .25s ease; }
.hbcard[hidden] { display: none; } .hbcard.on { opacity: 1; }
.hbcard::before { content: ''; position: absolute; left: -3px; right: -3px; top: -3px; height: 12px; background: #F47A38; border: 3px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0; }
.hbcard::after { content: ''; position: absolute; top: 50%; margin-top: -10px; border: 10px solid transparent; }
.hbcard[data-side="r"]::after { left: -13px; border-right-color: var(--line); border-left: 0; }
.hbcard[data-side="b"]::after { top: -13px; margin-top: 0; left: 50%; margin-left: -10px; border-bottom-color: var(--line); border-top: 0; }
.hbcard[data-side="b"]::before { display: none; }
.hbcard[data-side="a"]::after { top: auto; bottom: -13px; margin-top: 0; left: 50%; margin-left: -10px; border-top-color: var(--line); border-bottom: 0; }
.hbcard .hbtop { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.hbcard img { width: 56px; height: 56px; border-radius: 14px; border: 3px solid var(--line); background: #0B0F1A; flex: none; }
.hbcard b { display: block; font: 400 22px/1.05 "Titan One", Rubik, sans-serif; color: var(--ink); }
.hbsoon { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font: 700 11px Rubik, sans-serif; letter-spacing: .5px; text-transform: uppercase; color: #fff; background: #F47A38; border: 2px solid var(--line); border-radius: 999px; padding: 2px 9px 2px 7px; }
.hbsoon i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: hbpulse 1.4s ease-in-out infinite; }
.hbcard p { margin: 8px 0 9px; font: 600 12.5px Rubik, sans-serif; color: #5B63A8; }
.hbcard .hbx { width: 100%; justify-content: center; font-size: 13.5px; padding: 6px 10px; background: #FFE2C8; }
.hbcard .hbx .ic { width: 15px; height: 15px; }
.hbcard.deny { animation: hbshake .42s ease; }
@keyframes hbpulse { 50% { opacity: .35; } }
@keyframes hbshake { 0%, 100% { margin-left: 0; } 20% { margin-left: -7px; } 40% { margin-left: 6px; } 60% { margin-left: -4px; } 80% { margin-left: 3px; } }
.s-start .hbcard { display: none !important; }
@media (max-width: 640px) { .hbcard { width: 236px; padding: 8px 10px 10px; } .hbcard img { width: 46px; height: 46px; } .hbcard b { font-size: 19px; } }

/* ---------- Burn Booth (monster skins) ---------- */
.mpanel.burn { width: min(600px, 96vw); }
.mpanel.burn .ph { background: linear-gradient(90deg, #FFB27A, #FFE36E); }
.mpanel.burn .ph svg { vertical-align: -3px; }
.bintro { font-size: 14px; color: #2E3A8C; font-weight: 600; margin: 2px 0 10px; line-height: 1.35; }
.bramp, .blim { display: flex; align-items: center; gap: 8px; border: 3px solid var(--line); border-radius: 14px; padding: 6px 10px; margin: 0 0 10px; font-size: 13px; flex-wrap: wrap; }
.bramp { background: #FFF1E4; } .blim { background: #FFE9F3; }
.bramp b, .blim b { font-weight: 800; } .bramp .cd, .blim .r { margin-left: auto; font-weight: 600; color: #2E3A8C; }
.bramp .cd b { font-variant-numeric: tabular-nums; color: #E0457A; }
.dchip, .lchip { font: 800 11px Rubik, sans-serif; letter-spacing: .5px; color: #fff; border: 2px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.dchip { background: #FF9E4D; } .lchip { background: #FF7EB6; }
.bopts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bopt { background: #fff; border: 3px solid var(--line); border-radius: 18px; box-shadow: 0 4px 0 var(--line); padding: 10px 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.bopt.own { background: #F1FFF8; } .bopt.wear { background: var(--lime, #A6EDC9); } .bopt.sold { background: #F1EEF8; }
.bopt canvas { width: 150px; height: 130px; border-radius: 14px; background: radial-gradient(circle at 50% 60%, var(--gl) 0, rgba(255,255,255,0) 70%), #F4F0FF; border: 2px solid #E2D9F6; }
.bopt.sold canvas { filter: grayscale(.85) opacity(.55); }
.bopt h4 { font: 400 20px "Titan One", Rubik, sans-serif; margin: 4px 0 0; letter-spacing: .4px; color: var(--ink); }
.bsub { font-size: 12px; color: #3B4BC0; font-weight: 600; }
.bsup { width: 100%; display: flex; flex-direction: column; gap: 3px; margin: 2px 0; }
.bsup .r { display: flex; justify-content: space-between; font: 800 11.5px Rubik, sans-serif; color: var(--ink); } .bsup .r span { color: #E0457A; }
.bsup .bar { height: 9px; border: 2px solid var(--line); border-radius: 999px; background: #ECE4FF; overflow: hidden; } .bsup .bar i { display: block; height: 100%; background: var(--bc); }
.bprice { display: flex; flex-direction: column; align-items: center; margin: 6px 0 4px; line-height: 1.15; text-align: center; }
.bprice b { font: 800 24px Rubik, sans-serif; color: var(--ink); } .bprice b small { font-size: 13px; color: #3B4BC0; } .bprice b.sm2 { font-size: 16px; } .bprice b.mute { color: #8A93C9; }
.bprice span { font: 700 12.5px Rubik, sans-serif; color: #3B4BC0; } .bprice i { font: 600 10.5px Rubik, sans-serif; color: #8A93C9; font-style: normal; }
.bburn, .bwear, .bsold { font: 700 15px Rubik, sans-serif; border-radius: 14px; padding: 8px 12px; width: 100%; display: flex; gap: 6px; align-items: center; justify-content: center; cursor: pointer; }
.bburn { color: #fff; background: linear-gradient(180deg, #FF9E4D, #F2733A); border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); text-shadow: 0 1px 0 rgba(20,28,112,.4); }
.bburn:disabled { filter: saturate(.4) brightness(1.05); cursor: progress; }
.bwear { color: var(--ink); background: #fff; border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); } .bwear.on { background: #A6EDC9; }
.bsold { color: #8A93C9; background: #E6E2F2; border: 3px solid #B9B3D6; cursor: default; }
.bowned { position: absolute; top: 8px; right: 8px; z-index: 1; font: 800 11px Rubik, sans-serif; letter-spacing: .6px; background: #A6EDC9; border: 2px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.bstamp { position: absolute; top: 58px; left: 50%; transform: translateX(-50%) rotate(-12deg); font: 400 26px "Titan One", Rubik, sans-serif; color: #fff; background: #E0457A; border: 3px solid var(--line); border-radius: 12px; padding: 2px 12px; box-shadow: 0 4px 0 var(--line); letter-spacing: 1px; white-space: nowrap; }
.btoast { margin-top: 10px; background: #FFF8D6; border: 3px solid var(--line); border-radius: 14px; padding: 7px 10px; font: 700 13px Rubik, sans-serif; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btoast.ok { background: #E6F8F0; } .btoast.err { background: #FFE3EC; } .btoast a { color: #2436A8; }
.bfoot { margin-top: 12px; display: grid; gap: 6px; } .bfoot .kv { font-size: 13.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .bfoot .kv b { font-weight: 700; }
.bnote { font-size: 12px; color: #3B4BC0; font-weight: 600; line-height: 1.35; }
.blive { display: inline-flex; align-items: center; gap: 5px; font: 700 11px Rubik, sans-serif; background: #E6F8F0; border: 2px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.blive::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #3FE39E; border: 1.5px solid var(--line); }
@media (max-width: 520px) { .bopts { grid-template-columns: 1fr; } .bramp .cd, .blim .r { margin-left: 0; } }
/* proximity card at the booth (reuses .hbcard layout, orange-pink header) */
.hbcard.bcard::before { background: linear-gradient(90deg, #FF9E4D, #FF7EB6); }
.hbcard.bcard .bflame { width: 44px; height: 44px; display: grid; place-items: center; background: #2436A8; border: 3px solid var(--line); border-radius: 12px; }
.hbcard.bcard .bflame svg { width: 26px; height: 28px; }
.hbcard.bcard .bsoon { background: #E0457A; }
.hbcard.bcard .bcnt { font-size: 12px; color: #3B4BC0; font-weight: 700; }
.hbcard.bcard .bopen { width: 100%; justify-content: center; margin-top: 4px; }
.hbcard.bcard .bopen .k { font: 800 11px Rubik, sans-serif; background: #FFE36E; border: 2px solid var(--line); border-radius: 6px; padding: 0 5px; margin-right: 4px; }
.hbcard[data-side="l"]::after { right: -13px; border-left-color: var(--line); border-right: 0; }

/* ---- Arcade v2 overlay (assets/js/arcade.js) ---- */
.arc { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(16,20,80,.62); touch-action: none; }
.arc[hidden] { display: none; }
.arcp { display: flex; flex-direction: column; width: min(560px, 96vw); height: min(940px, 96dvh); background: #FBF7FF; border: 4px solid var(--line, #141C70); border-radius: 22px; box-shadow: 0 8px 0 var(--line, #141C70); overflow: hidden; }
.arcp.gold { background: #FFF6DA; }
.arch { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 16px; background: #CDB8FF; border-bottom: 4px solid var(--line, #141C70); }
.arcp.gold .arch { background: linear-gradient(90deg, #FFE36E, #FFC83D); }
.arct { font: 400 20px "Titan One", Rubik, sans-serif; color: #fff; -webkit-text-stroke: 1.2px #2436A8; paint-order: stroke fill; letter-spacing: .5px; }
.arcb { margin-left: auto; font: 600 13px Rubik, sans-serif; color: #2436A8; background: #fff; border: 2.5px solid var(--line, #141C70); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.arcm, .arcx { width: 38px; height: 38px; border-radius: 12px; border: 3px solid var(--line, #141C70); background: #fff; font: 700 18px Rubik; color: #2436A8; display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 0 var(--line, #141C70); padding: 0; }
.arcm.off { background: #E2D9F6; }
.arcs { flex: 1; min-height: 0; display: grid; place-items: center; background: #1A1660; padding: 6px; }
.arcs canvas { display: block; border-radius: 12px; touch-action: none; image-rendering: auto; }
.arcc { display: none; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #E9E3FF; border-top: 4px solid var(--line, #141C70); }
.arcc button { flex: 1; height: 74px; border-radius: 20px; border: 4px solid var(--line, #141C70); background: #FFE36E; box-shadow: 0 6px 0 var(--line, #141C70); font: 400 26px "Titan One", Rubik, sans-serif; color: #2436A8; touch-action: none; user-select: none; -webkit-user-select: none; }
.arcc button.on { transform: translateY(4px); box-shadow: 0 2px 0 var(--line, #141C70); background: #FFC83D; }
.arcc.n3 button[data-k="act"] { flex: 1.3; background: #7FD9A8; font-size: 22px; }
.arck { padding: 6px 12px 8px; font: 600 12px Rubik, sans-serif; color: #6A64B8; text-align: center; background: #E9E3FF; border-top: 3px solid var(--line, #141C70); }
.mobile .arcc { display: flex; } .mobile .arck { display: none; }
.mobile .arcp { width: 100vw; height: 100dvh; border-radius: 0; border: 0; box-shadow: none; }
.arc-open .joy, .arc-open .acts, .arc-open .hchat { display: none !important; }
.plushes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0; }
.plushes .pl { background: #fff; border: 3px solid var(--line); border-radius: 14px; padding: 4px; text-align: center; display: grid; justify-items: center; }
.plushes .pl canvas { width: 72px; height: 72px; } .plushes .pl span { font: 700 11px Rubik; color: var(--ink); } .plushes .pl small { font: 700 12px Rubik; color: #FF7EB6; }
.plushes .pl.none small { color: var(--mute); }
.bests { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .bests div { display: flex; justify-content: space-between; background: #fff; border: 2.5px solid var(--line); border-radius: 10px; padding: 4px 10px; font: 600 13px Rubik; color: var(--ink); }
.pbh { margin: 12px 0 6px; font: 400 15px "Titan One", Rubik, sans-serif; color: var(--ink); }
@media (max-width: 560px) { .plushes { grid-template-columns: repeat(3, 1fr); } }
.mobile .arct { font-size: 16px; line-height: 1.05; } .mobile .arch { padding: 6px 8px 6px 12px; padding-top: calc(6px + env(safe-area-inset-top)); }
/* ---- mobile HUD v2 (phones only; desktop untouched): one top row (you | chat + menu), extras in the menu drawer ---- */
.mtop, .mdrawer { display: none; }
body.mobile .mtop { display: flex; position: absolute; top: 10px; right: calc(10px + env(safe-area-inset-right)); gap: 8px; z-index: 8; }
body.mobile .mbtn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; background: var(--cream); color: var(--ink); border: 3px solid var(--line); border-radius: 14px; box-shadow: 0 4px 0 var(--line); touch-action: manipulation; }
body.mobile .mbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
body.mobile .mbtn.on { background: var(--lime); }
body.mobile .mbtn svg { width: 22px; height: 22px; }
body.mobile .mbtn .burg { display: grid; gap: 4px; } body.mobile .mbtn .burg i { display: block; width: 20px; height: 3px; border-radius: 2px; background: var(--ink); }
body.mobile .mbadge { position: absolute; right: -8px; top: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--pink); color: #fff; border: 2px solid var(--line); font: 800 11px/16px Rubik, sans-serif; font-style: normal; text-align: center; }
body.mobile .mbadge[hidden] { display: none; }
body.mobile .mdrawer:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: absolute; top: 62px; right: calc(10px + env(safe-area-inset-right)); width: min(260px, calc(100% - 20px)); max-height: calc(100% - 72px); overflow: auto; z-index: 9; background: var(--cream); border: 3px solid var(--line); border-radius: 18px; box-shadow: 0 6px 0 var(--line); padding: 10px; }
body.mobile .mdrawer .pbtn { justify-content: center; font-size: 14px; padding: 8px 6px; min-height: 44px; box-shadow: 0 3px 0 var(--line); }
body.mobile .mdh { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font: 700 13px Rubik, sans-serif; color: #1E2C93; padding: 0 2px 2px; }
body.mobile .mdh .dot { width: 9px; height: 9px; border-radius: 50%; background: #FF7EB6; border: 2px solid var(--line); }
/* top area: room title, zone chip and Help move into the menu; X link moves into the menu */
body.mobile .roomtitle, body.mobile .zone, body.mobile .guide, body.mobile .nav .nox-m { display: none !important; }
body.mobile .me { left: calc(10px + env(safe-area-inset-left)); top: 10px; max-width: calc(100% - 140px); min-height: 44px; }
body.mobile .me > div:last-child { min-width: 0; } body.mobile .me .nm, body.mobile .me .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.mobile .devchip { top: 62px; }
body.mobile.in-room .me { max-width: calc(100% - 214px); }
body.mobile .leave { right: calc(114px + env(safe-area-inset-right)); top: 10px; height: 44px; padding: 0 12px; font-size: 0; }
body.mobile .leave::before { content: '\2190  Exit'; font-size: 14px; font-weight: 700; }
body.mobile .toasts { top: 64px; }
/* controls: joystick bottom-left, RUN + E bottom-right; EMOTE moves into the menu */
body.mobile .joy { left: calc(18px + env(safe-area-inset-left)); }
body.mobile .acts { right: calc(16px + env(safe-area-inset-right)); width: 172px; height: 104px; }
body.mobile .acts .em { display: none; }
body.mobile .acts .rn { left: 0; top: auto; bottom: 14px; width: 62px; height: 62px; }
/* holder chat: no floating pill; the chat button opens a compact scrolling panel under the top row */
body.mobile .hchat.min { display: none !important; }
body.mobile .hchat { left: calc(10px + env(safe-area-inset-left)); right: calc(10px + env(safe-area-inset-right)); top: 62px; width: auto; height: min(36%, 300px); z-index: 7; }
body.mobile.hc-open .hbcard, body.mobile.m-menu .hbcard { display: none !important; }
/* booth / Hotbot cards: fixed spot between the top row and the controls, never under the thumbs */
body.mobile .hbcard { transform: none !important; left: 0; right: 0; top: auto; bottom: calc(150px + env(safe-area-inset-bottom)); margin: 0 auto; width: min(300px, calc(100% - 20px)); padding: 8px 12px 10px; }
body.mobile .hbcard::after { display: none; }
body.mobile .hbcard p { margin: 5px 0 7px; }
.arc-open .mtop, .arc-open .mdrawer, .s-start .mtop, .s-start .mdrawer { display: none !important; }
@media (max-height: 520px) {
  body.mobile .joy { width: 108px; height: 108px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  body.mobile .acts { bottom: calc(10px + env(safe-area-inset-bottom)); transform: scale(.86); transform-origin: right bottom; }
  body.mobile .hchat { left: 50%; right: auto; width: min(400px, calc(100% - 392px - env(safe-area-inset-left) - env(safe-area-inset-right))); min-width: 240px; transform: translateX(-50%); top: 8px; height: calc(100% - 16px); }
  body.mobile .hbcard { bottom: 8px; }
  body.mobile .mdrawer:not([hidden]) { top: 8px; right: calc(64px + 54px + env(safe-area-inset-right)); width: 330px; grid-template-columns: 1fr 1fr 1fr; gap: 6px; max-height: calc(100% - 16px); }
  body.mobile .mdrawer .pbtn { min-height: 40px; font-size: 13px; }
}