:root{--glass:rgba(12,18,38,.52);--line:rgba(255,255,255,.18);--text:#fff;--accent:#baff78}
/* No text-select/callout anywhere by default - this is a game, not a page
   of text, and a long-press or double-tap-drag anywhere on the HUD or
   canvas (the "JUMP"/"DOWN"/nameplate text, the coords readout, even the
   canvas's own blank area) was landing on iOS's normal text-selection
   behaviour: blue selection handles, sometimes the whole visible screen,
   plus the Copy/Look Up callout menu - all of it fighting the same taps
   that are supposed to move the joystick or press a button. touch-action
   above already stops scroll/zoom gestures, but that's a separate thing
   from text selection and doesn't prevent it. The auth form's two real
   text fields (username/password) explicitly opt back in below, since
   those genuinely need to be selectable/pasteable. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
*::selection{background:transparent;color:inherit}
input::selection,textarea::selection{background:rgba(80,160,255,.35)}
.action{-webkit-user-drag:none;touch-action:none}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0a0c10;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;touch-action:none}
canvas{display:block;width:100%;height:100%;position:fixed;inset:0;z-index:0}
#hud{position:fixed;inset:0;pointer-events:none;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));z-index:10}
.pill{background:rgba(12,18,38,.62);border:1px solid var(--line);border-radius:15px;padding:9px 12px;box-shadow:0 8px 28px rgba(0,0,0,.16)}
/* The minimap now owns the top-left slot the "MAXIMUS WORLD" wordmark used
   to sit in - the wordmark told a player who was already inside the world
   nothing they didn't know, where a map answers the one question this game
   is actually about ("what's over there?"). layoutHud() measures this
   element to find where the top HUD band ends, exactly as it measured the
   title before it. */
#minimap{padding:4px;border-radius:50%;line-height:0;pointer-events:auto;cursor:pointer}
#minimapCanvas{position:static;width:132px;height:132px;border-radius:50%;display:block}
/* Tap-to-expand full map. Square, not round - a circular clip on a view this
   large would hide too much of the corners for what's meant to be the
   "actually plan a route" view, where the round pill is just a glance. */
#minimapOverlay{position:fixed;inset:0;z-index:27;display:none;align-items:center;justify-content:center;background:rgba(4,9,24,.6);backdrop-filter:blur(10px);padding:20px;pointer-events:auto}
#minimapOverlay.open{display:flex}
#minimapOverlay .box{padding:14px;border-radius:20px}
#minimapCanvasLarge{width:min(86vmin,560px);height:min(86vmin,560px);border-radius:12px;display:block}
#minimapOverlay .hint{text-align:center;margin-top:10px;font-size:12px;opacity:.75}
/* The right-hand HUD column (stats/online/settings) used to be three
   independently absolute-positioned elements stacked with hand-tuned
   top offsets - correct only as long as none of them ever changed
   height, which broke the moment the online badge appeared (it could
   push the settings button down into the hotbar). A flex column with
   a real gap can't drift out of alignment like that, whatever height
   any child ends up being. */
/* Minimal HUD: the map with the region under it (top-left), one compact
   row top-right (music chip, MXC + who's online, settings). Everything
   else - prompts, hints - appears only when it has something to say. */
#hudLeft{position:absolute;left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
#region{display:flex;gap:8px;align-items:center;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.02em;max-width:150px;white-space:nowrap}
#region #biome{overflow:hidden;text-overflow:ellipsis}
#region #scale{color:var(--accent)}
#hudRight{position:absolute;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));display:flex;flex-direction:row;align-items:center;gap:6px;pointer-events:none}
#stats{display:flex;align-items:center;gap:8px;height:40px;padding:0 13px;border-radius:999px;font-size:13.5px;font-weight:800;white-space:nowrap}
#mxc{color:#ffd77a}
#prompt{position:absolute;left:50%;bottom:calc(max(20px,env(safe-area-inset-bottom)) + 150px);transform:translateX(-50%);opacity:0;transition:opacity .2s;white-space:nowrap}
#quest{position:absolute;left:50%;top:calc(max(12px,env(safe-area-inset-top)) + 64px);transform:translateX(-50%);width:max-content;max-width:min(420px,calc(100vw - 32px));font-size:13px;line-height:1.45;text-align:center;transition:opacity .4s}
#quest.fade{opacity:0}
#settingsBtn{width:40px;height:40px;border-radius:50%;pointer-events:auto;border:1px solid var(--line);background:var(--glass);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#settingsBtn svg{width:20px;height:20px}
/* Vertical, left edge, centred in the open gap between the top HUD row
   and the joystick zone below it - both measured at runtime by layoutHud()
   since that gap's size depends on device, orientation and safe-area
   insets. top here is only the pre-JS fallback. */
#controls{position:fixed;inset:0;z-index:5;pointer-events:none}
/* The joystick is the shared MDT stick (apps/_shared/mdt-stick.js), which brings its own CSS. */
#look{overscroll-behavior:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:auto;touch-action:none;z-index:5}
.action{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));width:74px;height:54px;border-radius:18px;border:1px solid rgba(255,255,255,.22);background:rgba(8,14,28,.5);color:#fff;font-weight:900;pointer-events:auto;touch-action:none;z-index:25}
/* RUN (sprint) sits closest to the thumb at the bottom, JUMP just above,
   USE above that when it's showing - a real, deliberate 14px gap between
   each. Was a 4px gap between jump and use and an 82px gulf between
   sprint and jump, neither of which read as an intentional layout. */
#jump{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 62px)}.small{width:74px;height:48px;font-size:11px}.small#use{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 180px)}.small#sprint{bottom:max(20px,env(safe-area-inset-bottom));right:max(14px,env(safe-area-inset-right))}
/* Small - half the height of the .small buttons either side of it - and
   docked in its own slot between JUMP and USE, the same 14px gap pattern
   the rest of this column already uses, rather than reusing an existing
   button's spot (that's what put a control on top of another one the
   first time flying got a HUD button). */
.tiny{height:34px;font-size:10px;letter-spacing:.03em}
#flyToggle{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 132px)}
#flyToggle.on{background:rgba(126,209,255,.4);border-color:#7ed1ff}
.hidden{display:none!important}
/* z-index 28, not 20: the hotbar and the jump/run/use action buttons sit
   at 25 (see #hotbar/.action below) so their own on-screen position stays
   reachable over the HUD in normal play. Left at 20, this dialog was
   visually on top of them but STACKED UNDER them, so a tap in that corner
   still hit the game underneath and could launch a portal, jump, or start
   sprinting while the player thought they were safely in a menu. 28 still
   sits below the title card (30) and the portal-launch overlay (40), so
   those keep covering settings too, as intended. */
/* =====================================================================
   SETTINGS PANEL
   ---------------------------------------------------------------------
   One dark surface, one accent, four sections. The panel is a product
   UI rather than a HUD element: sectioned into tabs (character,
   graphics, controls, audio) because a single scrolling column of
   fifteen unrelated controls is where the old one fell over - a player
   hunting for the volume slider had to scroll past every hair colour.

   Colour discipline is deliberate. --brand carries selection (MDT gold
   since v2.01, see the POLISH block at the end), --gold means MXC, --good
   means owned.
   Anything that isn't communicating one of those three things is a
   neutral, so the things that DO carry meaning stay legible.

   z-index 28, not 20: the hotbar and the jump/run/use buttons sit at 25
   so they stay reachable in normal play. Left at 20, this dialog was
   visually on top of them but STACKED UNDER them, so a tap in that
   corner still hit the game underneath and could launch a portal, jump
   or start sprinting while the player thought they were in a menu. 28
   still sits below the title card (30) and the portal-launch overlay
   (40), so those keep covering settings, as intended.
   ===================================================================== */
:root{--surface:#12141b;--surface2:#171a23;--surface3:#1d212c;--edge:rgba(255,255,255,.08);--edge2:rgba(255,255,255,.14);--ink:#e9ebf2;--muted:#98a0b2;--brand:#7a5cff;--gold:#ffc94d;--good:#4ad391}
#settings,#tutorial,#leaderboard{position:fixed;inset:0;z-index:28;display:none;align-items:center;justify-content:center;background:rgba(6,8,14,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:18px;pointer-events:auto}
#settings.open,#tutorial.open,#leaderboard.open{display:flex}
.panel{width:min(880px,100%);max-height:min(92vh,760px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--edge);border-radius:18px;box-shadow:0 32px 90px rgba(0,0,0,.6),0 2px 0 rgba(255,255,255,.04) inset;overflow:hidden}
.panelTop{display:flex;align-items:center;gap:14px;padding:16px 16px 15px 20px;border-bottom:1px solid var(--edge);background:var(--surface2)}
.panelHeading{flex:1;min-width:0}
.panelHeading h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
.panelHeading p{margin:2px 0 0;font-size:12px;color:var(--muted)}
.wallet{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,201,77,.28);background:rgba(255,201,77,.1);color:var(--gold);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.walletUnit{font-size:10px;letter-spacing:.08em;opacity:.72}
.walletMark{font-size:11px}
.iconBtn{width:34px;height:34px;flex-shrink:0;border-radius:10px;border:1px solid var(--edge);background:transparent;color:var(--muted);font-size:14px;line-height:1;cursor:pointer;transition:background .15s,color .15s}
.iconBtn:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.panelBody{display:flex;min-height:0;flex:1}
/* A rail, not a row: four sections read as a table of contents down the
   side, and it leaves the full width of the pane for the content. */
.tabRail{display:flex;flex-direction:column;gap:2px;padding:12px 10px;width:148px;flex-shrink:0;border-right:1px solid var(--edge);background:var(--surface2)}
.tab{appearance:none;text-align:left;padding:10px 12px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.tab:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.tab.active{background:rgba(122,92,255,.16);color:#fff;box-shadow:inset 2px 0 0 var(--brand)}
.panes{flex:1;min-width:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 22px}
.pane{display:none}.pane.active{display:block}
.group{padding:16px 0;border-top:1px solid var(--edge)}
.group:first-child{border-top:0;padding-top:2px}
.groupHead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.groupHead h3{margin:0;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.groupMeta{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.groupMeta b{color:var(--good);font-weight:700}
/* ---- character ---- */
.charTop{display:flex;gap:18px;align-items:stretch;margin-bottom:4px}
#charPreviewWrap{position:relative;flex-shrink:0;border-radius:14px;overflow:hidden;border:1px solid var(--edge);background:radial-gradient(120% 90% at 50% 12%,#2a2f47 0%,#141722 62%,#0f1118 100%)}
/* Overrides the page-wide canvas{position:fixed;inset:0} rule, which
   exists for the one full-screen game canvas and would otherwise pin
   this preview to the viewport corner, outside its own panel - and
   collapse its container to zero height, since a fixed-position child
   contributes nothing to its parent's layout. */
#charPreview{display:block;position:static;width:232px;height:300px;touch-action:none;cursor:grab}
#charPreview:active{cursor:grabbing}
.previewHint{position:absolute;right:9px;top:8px;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.34);pointer-events:none}
.charSide{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.paneNote{margin:0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.ownStats{display:flex;gap:10px;width:100%}
.ownStats div{flex:1;padding:11px 13px;border-radius:11px;border:1px solid var(--edge);background:var(--surface2)}
.ownStats b{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ownStats span{display:block;margin-top:2px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* ---- swatches and chips ---- */
.swatchGrid{display:flex;flex-wrap:wrap;gap:10px}
.swatch{position:relative;width:38px;height:38px;border-radius:11px;border:1px solid rgba(0,0,0,.35);padding:0;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.swatch::after{content:"";position:absolute;inset:-4px;border-radius:14px;border:2px solid transparent;transition:border-color .15s}
.swatch:hover::after{border-color:var(--edge2)}
.swatch.selected::after{border-color:var(--brand)}
.swatch.pending::after{border-color:var(--gold);border-style:dashed}
.swatch.locked{opacity:.42}
.swatch.locked:hover{opacity:.7}
.swatch .lock{position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;border-radius:50%;background:var(--surface3);border:1px solid var(--edge2);color:var(--gold);font-size:8px;line-height:13px;text-align:center}
.chipGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.chip{position:relative;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:10px 12px;border-radius:10px;border:1px solid var(--edge);background:var(--surface2);color:var(--ink);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.chip:hover{background:var(--surface3);border-color:var(--edge2)}
.chip.selected{background:rgba(122,92,255,.18);border-color:var(--brand);color:#fff}
.chip.pending{border-color:var(--gold);border-style:dashed}
.chip.locked{color:var(--muted)}
.chip .tag{font-size:10px;font-weight:700;letter-spacing:.02em;color:var(--gold);font-variant-numeric:tabular-nums;opacity:.9}
.chip.selected .tag{color:#fff}
/* ---- fields ---- */
.field{display:block;margin:0 0 14px}
.field:last-child{margin-bottom:0}
.field.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fieldLabel{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px;font-weight:600;margin-bottom:8px}
.field.row .fieldLabel{margin-bottom:0}
.fieldLabel em{font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:600}
.field small,.group>small{display:block;margin-top:7px;font-size:11.5px;line-height:1.55;color:var(--muted)}
.field select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--edge);background:var(--surface2);color:var(--ink);font:inherit;font-size:13px}
.field input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;margin:0;background:transparent;cursor:pointer}
.field input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:999px;background:var(--surface3);border:1px solid var(--edge)}
.field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-7px;border-radius:50%;background:var(--brand);border:2px solid rgba(255,255,255,.85);box-shadow:0 1px 3px rgba(0,0,0,.5)}
.field input[type=range]::-moz-range-track{height:5px;border-radius:999px;background:var(--surface3);border:1px solid var(--edge)}
.field input[type=range]::-moz-range-progress{height:5px;border-radius:999px;background:var(--brand)}
.field input[type=range]::-moz-range-thumb{width:14px;height:14px;border:2px solid rgba(255,255,255,.85);border-radius:50%;background:var(--brand)}
.field input[type=checkbox]{width:18px;height:18px;accent-color:var(--brand);flex-shrink:0}
.statLine{margin-top:12px;padding-top:12px;border-top:1px solid var(--edge);font-size:11.5px;color:var(--muted)}
.statLine span{color:var(--ink);font-weight:600}
.keyList{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge);border-radius:10px;overflow:hidden}
.keyRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;background:var(--surface2);font-size:12.5px}
.keyRow span{color:var(--muted)}
.keyRow b{font-weight:600}
/* ---- footer and buying ---- */
.panelFoot{border-top:1px solid var(--edge);background:var(--surface2)}
.buyBar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--edge);background:linear-gradient(180deg,rgba(255,201,77,.07),transparent)}
.buyBar.hidden{display:none}
.buyPreviewDot{width:30px;height:30px;border-radius:9px;flex-shrink:0;border:1px solid rgba(0,0,0,.4);box-shadow:0 1px 2px rgba(0,0,0,.4)}
.buyText{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.buyText strong{font-size:13px;font-weight:650}
.buyText span{font-size:11.5px;color:var(--muted)}
.buyText span.warn{color:#ffb4a8}
.panelActions{display:flex;gap:10px;justify-content:flex-end;padding:13px 16px}
.btn{padding:10px 16px;border-radius:10px;border:1px solid var(--edge);background:var(--surface3);color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,opacity .15s}
.btn:hover{border-color:var(--edge2)}
.btn.ghost{background:transparent;color:var(--muted)}
.btn.ghost:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.btn.wide{width:100%}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:#8a6fff}
.btn.buy{display:flex;align-items:center;gap:6px;background:var(--gold);border-color:var(--gold);color:#241a02;font-weight:750;font-variant-numeric:tabular-nums}
.btn.buy:hover{background:#ffd469}
.btn:disabled{opacity:.45;cursor:default}
/* ---------------------------------------------------------------
   LEADERBOARD - top-3 podium (fixed, decorative order) plus a
   paginated ranking of every remaining MDT account by MXC balance.
   .lbPanel wider than the settings .panel (880px) now, not narrower -
   720px, up from 600 and 520 before that across two widening passes
   that both turned out to still read as cramped with real usernames in
   it. A two-column name/balance list doesn't strictly NEED this much
   room, but there's no real downside to it having more than it needs,
   and there was a real downside (clipped/wrapped names) to it having
   less.
   --------------------------------------------------------------- */
.lbPanel{width:min(720px,100%)}
.lbBody{flex-direction:column;overflow-y:auto;overscroll-behavior:contain;padding:20px 22px 8px}
.lbStatus{padding:34px 0;text-align:center;color:var(--muted);font-size:13px}
.lbStatus.warn{color:#ffb4a8}
.lbStatus.hidden,.lbPodium.hidden,.lbRows.hidden,.lbPager.hidden{display:none}
.lbPodium{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin-bottom:20px}
.lbSpot{display:flex;flex-direction:column;align-items:center;width:32%;padding:14px 10px 14px;border-radius:14px 14px 0 0;background:var(--surface2);border:1px solid var(--edge);border-bottom:0;text-align:center;min-width:0}
.lbSpot .lbRankBadge{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;margin-bottom:8px;background:var(--surface3);color:var(--ink);flex-shrink:0}
/* A long username now wraps onto a second line instead of ellipsis-
   truncating on one - the extra panel width above covers most names
   already, this just stops the rest from clipping mid-word. */
.lbSpot .lbName{font-weight:700;font-size:13px;max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25;word-break:break-word}
.lbSpot .lbBalance{margin-top:4px;font-size:12px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
.lbSpot.rank1{order:2;padding-top:6px}
.lbSpot.rank1 .lbRankBadge{background:linear-gradient(180deg,#ffe28a,#ffc94d);color:#2b2103;width:34px;height:34px;font-size:15px}
.lbSpot.rank2{order:1}
.lbSpot.rank2 .lbRankBadge{background:linear-gradient(180deg,#e7ebf4,#c3cad9);color:#20242e}
.lbSpot.rank3{order:3}
.lbSpot.rank3 .lbRankBadge{background:linear-gradient(180deg,#e3ad84,#c78455);color:#2b1a0c}
.lbRows{display:flex;flex-direction:column;gap:1px;background:var(--edge);border:1px solid var(--edge);border-radius:12px;overflow:hidden;margin-bottom:14px}
.lbRow{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface2);font-size:13px}
.lbRow.me{background:rgba(122,92,255,.16)}
.lbRow .lbRank{width:24px;flex-shrink:0;text-align:center;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
/* flex:2/flex:1 (not flex:1 alone) so the name column actually claims
   the panel's extra width above rather than leaving it to whatever's
   left over after the balance - a bare number never needs more than its
   own content width, but a name might. */
.lbRow .lbRowName{flex:2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.lbRow .lbRowBalance{flex:1;flex-shrink:0;text-align:right;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
.lbPager{display:flex;align-items:center;justify-content:center;gap:14px;padding:2px 0 16px}
.lbPager span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.lbPager .btn{padding:9px 14px}
@media(max-width:720px){
 #leaderboard{padding:0}
 .lbPanel{width:100%;max-height:100%;height:100%;border-radius:0;border:0}
}
/* Narrow screens: the rail becomes a scrollable row of tabs across the
   top, and the preview stacks above the copy instead of beside it. */
@media(max-width:720px){
 #settings,#tutorial{padding:0}
 .panel{width:100%;max-height:100%;height:100%;border-radius:0;border:0}
 .panelBody{flex-direction:column}
 .tabRail{flex-direction:row;width:auto;gap:6px;padding:8px 10px;border-right:0;border-bottom:1px solid var(--edge);overflow-x:auto;scrollbar-width:none}
 .tabRail::-webkit-scrollbar{display:none}
 .tab{white-space:nowrap;padding:9px 14px;border-radius:999px}
 .tab.active{box-shadow:none;background:var(--brand)}
 .panes{padding:16px 14px 20px}
 .charTop{flex-direction:column;gap:12px}
 #charPreviewWrap{align-self:center}
 .panelActions{padding:11px 14px}
 .buyBar{flex-wrap:wrap}
 .buyText{flex-basis:100%;order:-1}
}
/* The tutorial keeps the old simple card - it is a wall of text, not a
   control surface, and does not need tabs. */
.settingsBox{width:min(560px,100%);max-height:90%;overflow:auto;background:var(--surface);border:1px solid var(--edge);border-radius:18px;padding:22px;box-shadow:0 32px 90px rgba(0,0,0,.6)}
.settingsHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.settingsHead h2{margin:0;font-size:17px;font-weight:700}
.closeBtn{width:34px;height:34px;border-radius:10px;font-size:18px;background:none;border:1px solid var(--edge);color:var(--muted);cursor:pointer}
.setting{margin:16px 0}
.setting label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.setting p{margin:7px 0 0;font-size:13px;line-height:1.6}
.settingsActions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.settingsActions button{padding:10px 16px;border-radius:10px;border:1px solid var(--edge);background:var(--surface3);color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.settingsActions button:last-child{background:var(--brand);border-color:var(--brand);color:#fff}
@media(max-width:700px){
.pill{font-size:12px}.action{right:max(12px,env(safe-area-inset-right))}}
@media(max-width:480px){.action{width:68px;height:52px}.small{width:66px;height:44px}.tiny{height:32px}#minimapCanvas{width:104px;height:104px}}
/* Landscape's bottom offsets used flat px numbers instead of the
   safe-area-aware max() used everywhere else in this file, so on a
   Face ID/Dynamic Island iPhone rotated sideways they sat under the
   ~21px home-indicator inset instead of clear of it. #jump and #use
   also used to land exactly edge-to-edge (204px met jump's own 148+56
   top with zero gap) - bumped to a real 10px gap between them.
   #hudRight also moves to the left, under the title, in landscape:
   short viewports don't have enough vertical room for a top-anchored
   column and the bottom-anchored jump/use/sprint column to both live
   on the right edge without eventually meeting in the middle. */
/* The vertical left-edge hotbar (see #hotbar above) needs a left column
   already shared with the title and, in landscape, #hudRight too (below)
   - there isn't room left for a third thing stacked in that same column
   on the shortest landscape phones. Landscape keeps the hotbar horizontal
   instead, top-centre, which is genuinely open space: title+hudRight are
   over on the left, the jump/use/sprint column is on the right. */
/* Top-right, not top-centre: #stats also moves onto this same top band in
   landscape (into a horizontal row, further right than it looks - see its
   own comment below), and top-right is the one spot left genuinely open
   once #hudRight moves to the left and the jump/use/sprint column stays
   down at the bottom-right. */
@media(orientation:landscape) and (max-height:520px){.action{bottom:max(12px,env(safe-area-inset-bottom))}#jump{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 62px)}.small#use{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 180px)}#flyToggle{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 132px)}.small#sprint{bottom:max(12px,env(safe-area-inset-bottom))}

/* Landscape phones have the least vertical room of anything, and #hudRight
   stacks directly under the minimap here (measured by layoutHud) - so the
   map shrinks rather than pushing the stats pill off the bottom. */
#minimapCanvas{width:92px;height:92px}
/* The full-height stats pill (4 stacked readouts) plus the online badge
   plus the settings button don't fit in the ~200px of vertical room
   between the title and the joystick zone on the shortest iPhones
   (SE, mini) in landscape - laying the 4 readouts out in a row instead
   of stacked saves most of that height back. */
}
@keyframes authspin{to{transform:rotate(360deg)}}
#portalOverlay{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.9),rgba(120,90,255,.55) 45%,rgba(10,4,30,.96) 100%);opacity:0;pointer-events:none;transition:opacity .35s}
#portalOverlay.show{opacity:1;pointer-events:auto}
#portalOverlay .msg a{pointer-events:auto;text-decoration:underline}
#portalOverlay .msg{font-weight:900;font-size:clamp(22px,5vw,40px);letter-spacing:.05em;text-shadow:0 8px 30px rgba(0,0,0,.35);text-align:center}
#lockHint{position:absolute;left:50%;top:14px;transform:translateX(-50%);opacity:0;transition:opacity .25s;pointer-events:none;font-size:12px}
#lockHint.show{opacity:1}
#online{font-size:11px;text-align:right;opacity:.9}
#online .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#7cff8a;margin-right:5px;box-shadow:0 0 8px #7cff8a}
/* Updates pane */
#updStatus{margin:0 0 12px;padding:0;border-top:0;font-size:13px;color:var(--ink)}
.btnRow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
/* Radio (Settings -> Audio) */
.radioNow{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:10px;border-radius:10px;background:var(--surface3);font-size:13px;color:var(--muted)}
.radioNow b{color:var(--ink)}
.radioDot{width:8px;height:8px;border-radius:50%;background:var(--edge);flex-shrink:0}
.radioDot.live{background:#3ed98c;box-shadow:0 0 0 4px rgba(62,217,140,.18)}
.radioList{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.radioRow{display:flex;align-items:center;gap:10px;padding:9px 10px 9px 12px;border-radius:10px;border:1px solid var(--edge)}
.radioRow.now{border-color:var(--brand)}
.radioInfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.radioInfo b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.radioInfo span{font-size:11.5px;color:var(--muted)}
.radioRow.muted .radioInfo{opacity:.5}
.radioMute{flex-shrink:0;min-width:78px;padding:7px 10px;border-radius:8px;border:1px solid var(--brand);background:rgba(122,92,255,.16);color:#fff;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.radioReport{flex-shrink:0;padding:7px 8px;border:0;background:none;color:rgba(255,255,255,.55);font:inherit;font-size:11.5px;text-decoration:underline;cursor:pointer}
.radioMute[aria-pressed="true"]{border-color:var(--edge);background:transparent;color:var(--muted)}
.radioEmpty{font-size:12.5px;color:var(--muted);padding:6px 0}

/* ---------- Now playing (always visible, top of the HUD) ----------
   Centred pill at the top on wide screens, top-right on short landscape phones; a
   slim full-width strip across the very top on portrait phones, where
   the gap between the minimap and the stats column is too narrow for a
   title - the minimap and stats column shift down just under it. */
/* The music chip never changes size (so the top row can't grow over the
   map); a new song drops down as a card under the row, right-aligned and
   kept clear of the map column on the left. */
#nowPlaying{display:flex;align-items:center;width:40px;height:40px;padding:0;border-radius:999px;pointer-events:auto;-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(12,18,38,.62)}
/* No backdrop-filter on the chip itself: it would make the chip the
   containing block for the card below, which must line up with the row. */
#nowPlaying .npMain{justify-content:center;padding:0;width:40px;height:40px;flex:none}
#nowPlaying .npText{position:absolute;top:calc(100% + 8px);right:52px;max-width:calc(100vw - 214px);min-height:40px;justify-content:center;padding:5px 14px;border-radius:14px;background:var(--glass);border:1px solid var(--line);background:rgba(12,18,38,.82);box-shadow:0 8px 28px rgba(0,0,0,.16);opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s;pointer-events:none}
#nowPlaying .npLike{position:absolute;top:calc(100% + 8px);right:0;height:40px;opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s;pointer-events:none}
#nowPlaying:not(.compact) .npText,#nowPlaying:not(.compact) .npLike{opacity:1;transform:none;pointer-events:auto}
.npMain{display:flex;align-items:center;gap:10px;min-width:0;flex:1;background:none;border:0;color:#fff;padding:3px 8px 3px 6px;border-radius:999px;cursor:pointer;text-align:left;font:inherit}
.npMain:hover{background:rgba(255,255,255,.06)}
.npText{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.npLabel{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.npTitle{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npEq{display:flex;align-items:flex-end;gap:2px;width:16px;height:14px;flex-shrink:0}
.npEq i{flex:1;height:3px;border-radius:1px;background:rgba(255,255,255,.45)}
#nowPlaying.playing .npEq i{background:var(--accent);animation:npEq 1.1s ease-in-out infinite}
#nowPlaying.playing .npEq i:nth-child(2){animation-delay:-.3s}
#nowPlaying.playing .npEq i:nth-child(3){animation-delay:-.65s}
#nowPlaying.playing .npEq i:nth-child(4){animation-delay:-.15s}
@keyframes npEq{0%,100%{height:3px}50%{height:14px}}
@media (prefers-reduced-motion:reduce){#nowPlaying.playing .npEq i{animation:none;height:9px}}
.npLike{display:flex;align-items:center;gap:5px;flex-shrink:0;height:34px;padding:0 12px 0 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);font:700 12.5px/1 system-ui,-apple-system,sans-serif;cursor:pointer}
.npLike:disabled{opacity:.35;cursor:default}
.npLike.liked{color:#ff6b93;border-color:rgba(255,107,147,.55);background:rgba(255,107,147,.14)}
.npLike.liked svg{animation:npPop .35s ease-out}
@keyframes npPop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
#lockHint{top:calc(max(12px,env(safe-area-inset-top)) + 54px)}
/* Short landscape: the stats column moves under the minimap on the left,
   and the top-right corner (where the old hotbar row sat) is free. */
/* Radio list: likes + built-in theme tag */
.radioLike{flex-shrink:0;min-width:52px;padding:7px 9px;border-radius:8px;border:1px solid var(--edge);background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.radioLike.liked{color:#ff6b93;border-color:rgba(255,107,147,.55);background:rgba(255,107,147,.12)}
.radioTag{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-right:2px}

/* Radio: choose the Maximus World album or Player made songs */
.playlistPick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 10px}
.playlistPick button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 12px;border-radius:10px;border:1px solid var(--edge);background:rgba(255,255,255,.03);color:inherit;font:inherit;cursor:pointer}
.playlistPick button b{font-size:13px}
.playlistPick button span{font-size:11px;opacity:.65}
.playlistPick button.on{border-color:var(--brand);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--brand)}

/* Beta map: "Now entering" region banner */
#zoneBanner{--zc:#baff78;position:fixed;left:50%;top:22%;transform:translate(-50%,-8px);z-index:30;pointer-events:none;text-align:center;opacity:0;max-width:min(560px,90vw)}
#zoneBanner small{display:block;font-size:11px;font-weight:800;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.75);text-shadow:0 2px 8px rgba(0,0,0,.6)}
#zoneBanner b{display:block;font-size:clamp(28px,5.4vw,52px);font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin:4px 0 6px;text-shadow:0 0 22px var(--zc),0 3px 14px rgba(0,0,0,.65)}
#zoneBanner b::after{content:'';display:block;height:3px;width:40%;margin:8px auto 0;border-radius:3px;background:linear-gradient(90deg,transparent,var(--zc),transparent)}
#zoneBanner span{display:block;font-size:14px;font-weight:600;color:rgba(255,255,255,.9);text-shadow:0 2px 10px rgba(0,0,0,.7)}
#zoneBanner.show{animation:zoneIn 4.6s ease forwards}
@keyframes zoneIn{0%{opacity:0;transform:translate(-50%,-8px)}10%{opacity:1;transform:translate(-50%,0)}78%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,4px)}}

/* ---------- Arrival: title screen, player card, hall tour, guide ----------
   The MDT studio look (near-black and gold, the same tokens as the root
   index.html) over the live world: the realm renders behind the title
   screen from the first frame, with the camera orbiting the Grand Hall
   (signed out) or framing your own character (signed in) - see ARRIVAL
   in app.js. A solid layer (::before) covers the canvas until the first
   frame has rendered, then fades away. */
#titleCard{--bg:#0b0a09;--panel:rgba(19,18,15,.8);--line:rgba(255,236,190,.12);--line2:rgba(255,236,190,.2);--ink:#f5f0e6;--soft:#bdb5a5;--faint:#8a8273;--gold:#dba63c;--goldHi:#f8e3a8;--goldGrad:linear-gradient(120deg,#f8e3a8 0%,#dba63c 45%,#9a6f22 100%);--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:calc(var(--mdts-h,0px) + 16px) 16px max(20px,env(safe-area-inset-bottom));color:var(--ink);font-family:var(--sans);text-align:left;transition:opacity .7s;
 background:linear-gradient(180deg,rgba(11,10,9,.7) 0%,rgba(11,10,9,0) 26%,rgba(11,10,9,0) 52%,rgba(11,10,9,.82) 100%)}
#titleCard::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 30%,#1b1710 0%,#0b0a09 70%);transition:opacity 1.6s ease}
#titleCard.live::before{opacity:0}
#titleCard .box{position:relative;width:min(440px,100%);max-height:100%;overflow:auto;background:var(--panel);border:1px solid var(--line2);border-radius:24px;padding:26px 24px 22px;box-shadow:0 30px 70px -24px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,236,190,.06);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);touch-action:pan-y}
#titleCard .box::before{content:'';position:absolute;left:24px;right:24px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.8}
.tcEyebrow{display:flex;align-items:center;gap:10px;font-size:10.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.tcEyebrow::before{content:'';width:22px;height:1px;background:var(--gold);opacity:.7}
#titleCard h1{font-family:var(--serif);font-weight:700;font-size:clamp(40px,11vw,60px);line-height:.98;letter-spacing:-.01em;margin:12px 0 8px}
#titleCard h1 em{font-weight:400;background:var(--goldGrad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.tcLore{margin:0 0 18px;font-family:var(--serif);font-style:italic;font-size:15.5px;line-height:1.45;color:var(--soft)}
.authSpinner{width:26px;height:26px;border-radius:50%;border:3px solid rgba(219,166,60,.2);border-top-color:var(--gold);animation:authspin .8s linear infinite;margin:18px auto 6px}
#authChecking.hidden{display:none}
@keyframes authspin{to{transform:rotate(360deg)}}
#authWrap.hidden,#deployWrap.hidden{display:none!important}
.authTabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid var(--line)}
.authTabs button{min-height:40px;border:0;border-radius:10px;background:none;color:var(--soft);font:inherit;font-size:14px;font-weight:700;cursor:pointer;touch-action:manipulation}
.authTabs button[aria-selected="true"]{background:rgba(219,166,60,.16);color:var(--goldHi);box-shadow:inset 0 0 0 1px rgba(219,166,60,.35)}
.authLead{margin:12px 2px 4px;font-size:13px;line-height:1.5;color:var(--soft)}
.authField{margin:12px 0}
.authField label{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-bottom:6px}
.authField input{width:100%;min-height:48px;padding:12px 14px;border-radius:12px;border:1px solid var(--line2);background:rgba(8,7,6,.7);color:var(--ink);font:inherit;font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s}
.authField input::placeholder{color:var(--faint);opacity:1}
.authField input:focus{border-color:rgba(219,166,60,.75);box-shadow:0 0 0 3px rgba(219,166,60,.18)}
.pwWrap{position:relative}
.pwWrap input{padding-right:70px}
.pwShow{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:36px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--gold);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.authHint{margin:-2px 2px 8px;font-size:12px;color:var(--faint)}
.authHint.hidden{display:none}
#authError{color:#ffb0a0;font-size:13px;font-weight:600;margin:4px 2px;min-height:0}
#authError:empty{display:none}
#authSubmit,#enter{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;margin-top:12px;padding:0 22px;border:0;border-radius:999px;background:var(--goldGrad);color:#1a1206;font:inherit;font-size:16px;font-weight:800;letter-spacing:.01em;cursor:pointer;box-shadow:0 14px 32px -14px rgba(219,166,60,.75);touch-action:manipulation;transition:transform .12s,box-shadow .2s,opacity .2s}
#authSubmit:hover,#enter:hover{box-shadow:0 18px 40px -14px rgba(219,166,60,.95)}
#authSubmit:active,#enter:active{transform:scale(.985)}
#authSubmit:disabled{opacity:.55;cursor:default}
#authSubmit.busy::after{content:'';width:16px;height:16px;border-radius:50%;border:2px solid rgba(26,18,6,.3);border-top-color:#1a1206;animation:authspin .8s linear infinite}
#enter::after{content:'\2192';font-size:18px}
#authGoogle .mdtx-or{color:var(--faint);margin:14px 0 10px}
#authGoogle .mdtx-gbtn{border-radius:999px;min-height:50px;color:var(--ink);border-color:var(--line2);font-size:15px}
#authStatus{font-size:12.5px;color:var(--soft);margin-top:10px}
#authStatus:empty{display:none}
.pcard{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;background:rgba(0,0,0,.32);border:1px solid var(--line)}
.pcAvatar{flex:0 0 54px;height:54px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:24px;font-weight:700;color:#1a1206;background:var(--goldGrad);box-shadow:0 0 0 3px rgba(219,166,60,.18)}
.pcInfo{min-width:0}
.pcInfo small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.pcInfo b{display:block;font-family:var(--serif);font-size:24px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcStats{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:5px;font-size:13px;color:var(--soft)}
.pcMxc{color:var(--goldHi);font-weight:700}
.pcMxc i{font-style:normal;color:var(--gold)}
.pcRank{padding:1px 8px;border-radius:999px;border:1px solid var(--line2);font-size:12px}
.pcRank.hidden{display:none}
.pcNews{margin:12px 2px 0;font-size:13px;line-height:1.5;color:var(--soft)}
.pcNews:empty{display:none}
.pcNews b{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:6px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#1a1206;background:var(--gold)}
.pcSwitch{display:block;margin:12px auto 0;padding:6px 8px;border:0;background:none;color:var(--faint);font:inherit;font-size:13px;cursor:pointer}
.pcSwitch u{color:var(--soft)}
/* Signed in: your character stands in the world beside the card (the
   camera frames it - see ARRIVAL in app.js), so the card moves aside:
   to the bottom on portrait phones, to the right everywhere else. */
#titleCard.signed{align-items:flex-end}
#titleCard.signed .tcLore{display:none}
@media (min-aspect-ratio:1/1){
 #titleCard.signed{align-items:center;justify-content:flex-end;padding-right:max(6vw,env(safe-area-inset-right))}
 #titleCard.signed{background:linear-gradient(90deg,rgba(11,10,9,0) 30%,rgba(11,10,9,.75) 100%),linear-gradient(180deg,rgba(11,10,9,.55) 0%,rgba(11,10,9,0) 25%)}
}
@media (max-height:560px) and (orientation:landscape){
 #titleCard{padding-top:calc(var(--mdts-h,0px) + 8px);padding-bottom:max(12px,env(safe-area-inset-bottom))}
 #titleCard .box{padding:16px 18px}
 #titleCard h1{font-size:34px;margin:6px 0}
 .tcLore,.authLead,.tcEyebrow{display:none}
 .authField{margin:8px 0}
 #titleCard:not(.signed) .box{margin-left:auto}
}
/* The first-visit hall tour: letterbox bars, HUD hidden, a Skip button. */
#flyInCap{display:none;position:fixed;inset:0;z-index:29;pointer-events:none}
#flyInCap::before,#flyInCap::after{content:'';position:absolute;left:0;right:0;height:9vh;background:#000;transition:transform .6s ease}
#flyInCap::before{top:0}#flyInCap::after{bottom:0}
body.flyin #flyInCap{display:block}
body.flyin #hud,body.flyin #controls,body:not(.inworld) #hud,body:not(.inworld) #controls{opacity:0;pointer-events:none}
#hud,#controls{transition:opacity .5s}
#flyInSkip{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:calc(9vh + 14px);pointer-events:auto;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,236,190,.3);background:rgba(11,10,9,.6);color:#f5f0e6;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
body.flyin #zoneBanner{top:16%}
/* The welcome guide: four swipeable cards (native scroll-snap). */
.guide{position:relative;width:min(420px,100%);background:#141310;color:#f5f0e6;border:1px solid rgba(255,236,190,.2);border-radius:22px;box-shadow:0 32px 90px rgba(0,0,0,.65);overflow:hidden}
.guide::before{content:'';position:absolute;left:24px;right:24px;top:0;height:1px;background:linear-gradient(90deg,transparent,#dba63c,transparent)}
.guideSkip{position:absolute;top:12px;right:12px;z-index:1;min-height:34px;padding:0 12px;border:0;border-radius:999px;background:rgba(255,255,255,.06);color:#bdb5a5;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.guideTrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x;overscroll-behavior:contain}
.guideTrack::-webkit-scrollbar{display:none}
.guideCard{flex:0 0 100%;scroll-snap-align:start;padding:30px 26px 6px}
.guideArt{width:64px;height:64px;margin-bottom:16px;border-radius:18px;display:grid;place-items:center;background:rgba(219,166,60,.1);box-shadow:inset 0 0 0 1px rgba(219,166,60,.3)}
.guideArt svg{width:38px;height:38px;fill:none;stroke:#dba63c;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.guideArt svg .f{fill:rgba(219,166,60,.35)}
.guideCard small{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#dba63c}
.guideCard h2{margin:6px 0 10px;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:26px;line-height:1.15}
.guideCard p{margin:0;font-size:14.5px;line-height:1.6;color:#d6cfc0}
.guideCard b{color:#f8e3a8}
@media (pointer:coarse){.onDesk{display:none!important}}
@media not (pointer:coarse){.onTouch{display:none!important}}
.guideFoot{display:flex;align-items:center;gap:12px;padding:18px 20px 20px}
.guideBack{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,236,190,.2);background:none;color:#f5f0e6;font-size:18px;cursor:pointer;transition:opacity .2s}
.guideBack:disabled{opacity:0;pointer-events:none}
.guideDots{flex:1;display:flex;justify-content:center;gap:7px}
.guideDots i{width:7px;height:7px;border-radius:999px;background:rgba(255,236,190,.22);transition:width .25s,background .25s}
.guideDots i.on{width:20px;background:#dba63c}
.guideNext{min-height:44px;min-width:104px;padding:0 20px;border:0;border-radius:999px;background:linear-gradient(120deg,#f8e3a8 0%,#dba63c 45%,#9a6f22 100%);color:#1a1206;font:inherit;font-size:15px;font-weight:800;cursor:pointer}

/* A mouse and keyboard don't need the on-screen stick and buttons. */
@media (hover:hover) and (pointer:fine){#controls .action{display:none!important}}
/* Coming back from an app: no card, just a moment of gold while the
   session restores, then straight back in at the door you left from. */
#titleCard.returning .box{display:none}
#titleCard.returning{align-items:center;justify-content:center}
#titleCard.returning::after{content:'Back to Maximus World';font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-style:italic;font-size:20px;color:#f8e3a8;letter-spacing:.02em;animation:retPulse 1.6s ease-in-out infinite}
@keyframes retPulse{50%{opacity:.55}}


/* On foot there's no RUN button (you run by pushing forward), so JUMP
   takes the bottom slot with FLY and USE stacked above it; flying brings
   back the full column with DOWN at the bottom. */
body:not(.flying) #jump{bottom:max(20px,env(safe-area-inset-bottom))}
body:not(.flying) #flyToggle{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 70px)}
body:not(.flying) .small#use{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 118px)}
@media(orientation:landscape) and (max-height:520px){
 body:not(.flying) #jump{bottom:max(12px,env(safe-area-inset-bottom))}
 body:not(.flying) #flyToggle{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 66px)}
 body:not(.flying) .small#use{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 110px)}
}

/* shown if the browser drops the 3D view (see fitView in app.js) */
#glLost{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;background:#0a0c10;color:#f3ead2;text-align:center}
#glLost.on{display:flex}
#glLost div{display:flex;flex-direction:column;gap:8px;align-items:center;padding:24px}
#glLost b{font-size:20px}
#glLost span{opacity:.7;font-size:14px}
#glLost button{margin-top:8px;min-height:44px;padding:0 22px;border-radius:22px;border:1px solid rgba(219,166,60,.6);background:rgba(219,166,60,.15);color:#f3ead2;font:inherit;font-weight:700;pointer-events:auto}

/* =====================================================================
   v1.97 TOUCH CONTROLS - one consistent set, overriding the older rules
   above: round dark-glass buttons with a gold rim and an icon (JUMP the
   big one in the corner, FLY above it, DOWN beside it while flying, USE
   diagonally between), a fixed joystick bottom-left, no place name under
   the minimap and no music chip (Settings -> Audio has the music).
   ===================================================================== */
#region{display:none!important}
#nowPlaying{width:0;margin-left:-6px;background:none;border:0;box-shadow:none}
#nowPlaying .npMain{display:none}
#controls{--cb:max(22px,env(safe-area-inset-bottom));--cr:max(18px,env(safe-area-inset-right));--big:78px;--sm:58px;--gap:14px}
@media(orientation:landscape) and (max-height:520px){#controls{--cb:max(12px,env(safe-area-inset-bottom));--big:70px;--sm:52px;--gap:10px}}
#controls .action{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:var(--sm);height:var(--sm);padding:0;border-radius:50%;
  right:calc(var(--cr) + var(--big) + var(--gap));bottom:calc(var(--cb) + var(--big) + var(--gap));
  color:#f8e3a8;font:800 9px/1 -apple-system,system-ui,"Segoe UI",Roboto,sans-serif;letter-spacing:.14em;
  background:radial-gradient(120% 120% at 30% 20%,rgba(46,40,30,.82),rgba(10,10,14,.78) 60%);
  border:1.5px solid rgba(219,166,60,.6);
  box-shadow:0 6px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,236,190,.22),inset 0 -8px 16px rgba(0,0,0,.35);
  transition:transform .1s ease,box-shadow .15s,background .15s,border-color .15s}
#controls .action svg{width:22px;height:22px;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
#controls .action span{display:block}
#controls .action:active{transform:scale(.9);border-color:#f0c868;box-shadow:0 0 0 4px rgba(240,200,104,.18),0 0 22px rgba(240,200,104,.45),inset 0 -8px 16px rgba(0,0,0,.35)}
#controls #jump{right:var(--cr);bottom:var(--cb);width:var(--big);height:var(--big);font-size:10px;border-width:2px;border-color:rgba(240,200,104,.85)}
#controls #jump svg{width:28px;height:28px}
#controls #jump .icUp,body.flying #controls #jump .icJump{display:none}
body.flying #controls #jump .icUp{display:block}
#controls #flyToggle{right:calc(var(--cr) + (var(--big) - var(--sm)) / 2);bottom:calc(var(--cb) + var(--big) + var(--gap))}
#controls #flyToggle.on{color:#1a1206;border-color:#fff4cf;background:linear-gradient(150deg,#fff4cf,#f0c868 45%,#b88426);box-shadow:0 0 18px rgba(240,200,104,.55),0 6px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.6)}
#controls #flyToggle.on svg{filter:none}
#controls #sprint{right:calc(var(--cr) + var(--big) + var(--gap));bottom:calc(var(--cb) + (var(--big) - var(--sm)) / 2)}
#controls #use{right:calc(var(--cr) + var(--big) + var(--gap));bottom:calc(var(--cb) + var(--big) + var(--gap))}
#controls #use.hidden,#controls #sprint.hidden{display:none!important}
/* the stick: the shared MDT stick, fixed bottom-left (apps/_shared/mdt-stick.js) */

/* =====================================================================
   v1.98 THE PORTAL GUN: GUN above FLY, FIRE beside JUMP (further out
   while flying, when DOWN is there), and the Destination Dial.
   ===================================================================== */
#controls #gunBtn{right:calc(var(--cr) + (var(--big) - var(--sm)) / 2);bottom:calc(var(--cb) + var(--big) + var(--sm) + var(--gap) * 2)}
#controls #gunBtn.on{color:#b8ffc9;border-color:#39ff6a;box-shadow:0 0 16px rgba(57,255,106,.45),0 6px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(200,255,215,.25)}
#controls #fireBtn{right:calc(var(--cr) + var(--big) + var(--gap));bottom:calc(var(--cb) + (var(--big) - var(--sm)) / 2);color:#c9ffd6;border-color:#39ff6a;
  background:radial-gradient(120% 120% at 30% 20%,rgba(30,90,45,.85),rgba(6,22,12,.85) 65%);box-shadow:0 0 18px rgba(57,255,106,.4),0 6px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(200,255,215,.3)}
#controls #fireBtn svg{animation:pgSpinIc 2.4s linear infinite}
@keyframes pgSpinIc{to{transform:rotate(-360deg)}}
body.flying #controls #fireBtn{right:calc(var(--cr) + var(--big) + var(--sm) + var(--gap) * 2)}
#controls #fireBtn.hidden{display:none!important}
#portalOverlay.pg{background:radial-gradient(circle at 50% 50%,rgba(235,255,225,.95),rgba(57,255,106,.6) 40%,rgba(2,24,8,.97) 100%)}

#pgDial{position:fixed;inset:0;z-index:60;overflow:hidden;color:#eafff0;font-family:-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;background:radial-gradient(120% 90% at 50% 40%,#06301a 0%,#03140b 45%,#010604 100%);
  opacity:0;pointer-events:none;transition:opacity .35s ease;-webkit-user-select:none;user-select:none;touch-action:none;outline:none}
#pgDial.show{opacity:1;pointer-events:auto}
.pgVortex{position:absolute;left:50%;top:38%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;pointer-events:none;-webkit-mask:radial-gradient(circle,#000 0 18%,transparent 62%);mask:radial-gradient(circle,#000 0 18%,transparent 62%)}
#pgDial.land .pgVortex{left:30%;top:50%}
.pgVortex i{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(57,255,106,0) 0deg 9deg,rgba(57,255,106,.22) 13deg,rgba(57,255,106,0) 17deg 30deg);animation:pgSpin 9s linear infinite}
.pgVortex i:nth-child(2){transform:scale(.7);background:repeating-conic-gradient(from 7deg,rgba(184,255,201,0) 0deg 14deg,rgba(184,255,201,.16) 19deg,rgba(184,255,201,0) 24deg 40deg);animation-duration:6s;animation-direction:reverse}
.pgVortex i:nth-child(3){transform:scale(.4);background:radial-gradient(circle,rgba(220,255,230,.55),rgba(57,255,106,.25) 30%,transparent 65%);animation:pgPulse 2.6s ease-in-out infinite}
@keyframes pgSpin{to{rotate:360deg}}
@keyframes pgPulse{50%{opacity:.55;transform:scale(.46)}}
.pgStars{position:absolute;inset:0;pointer-events:none;opacity:.55;background-image:radial-gradient(1px 1px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 78% 14%,#cfffe0,transparent),radial-gradient(1.5px 1.5px at 64% 70%,#fff,transparent),radial-gradient(1px 1px at 28% 82%,#b8ffc9,transparent),radial-gradient(1px 1px at 88% 58%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 40%,#eafff0,transparent);animation:pgTwinkle 4s ease-in-out infinite alternate}
@keyframes pgTwinkle{to{opacity:.25}}
.pgTop{position:absolute;left:0;right:0;top:0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));z-index:3}
.pgTitle b{display:block;font-size:13px;font-weight:900;letter-spacing:.32em;color:#9dffb4;text-shadow:0 0 14px rgba(57,255,106,.6)}
.pgTitle small{display:block;margin-top:4px;font-size:11px;letter-spacing:.08em;color:rgba(234,255,240,.55)}
.pgClose{flex:none;height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(157,255,180,.35);background:rgba(4,20,10,.6);color:#eafff0;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.pgClose span{font-size:17px;margin-left:4px;vertical-align:-1px}
.pgStage{--c:#39ff6a;position:absolute;left:0;right:0;top:calc(max(16px,env(safe-area-inset-top)) + 54px);display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px;z-index:2}
#pgDial.land .pgStage{left:max(16px,env(safe-area-inset-left));right:auto;width:38vw;top:50%;transform:translateY(-44%)}
.pgOrb{position:relative;width:min(34vw,150px);aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 0 0 3px rgba(157,255,180,.85),0 0 0 9px rgba(57,255,106,.18),0 0 50px rgba(57,255,106,.55),0 0 90px color-mix(in srgb,var(--c) 45%,transparent)}
#pgDial.land .pgOrb{width:min(22vh,130px)}
.pgSwirl{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#eaffd8 0 8%,transparent 40%),conic-gradient(from 0deg,#063a14,#39ff6a,#0c5a20,#b8ffc9,#063a14,#2bd65a,#063a14);animation:pgSpin 3s linear infinite;filter:blur(1.5px)}
.pgSwirl::after{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,rgba(2,20,8,.0) 0 6px,rgba(2,20,8,.35) 9px 12px)}
.pgOrb img{position:relative;width:54%;height:54%;border-radius:24%;object-fit:cover;box-shadow:0 6px 22px rgba(0,0,0,.6),0 0 0 2px rgba(255,255,255,.25)}
.pgStage.pop .pgOrb img{animation:pgPop .45s cubic-bezier(.2,1.4,.4,1)}
.pgStage.pop .pgName,.pgStage.pop .pgBlurb{animation:pgIn .35s ease both}
@keyframes pgPop{0%{transform:scale(.3) rotate(-90deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes pgIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
.pgCode{margin-top:16px;font:700 10px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.28em;color:#9dffb4;opacity:.8}
.pgName{margin-top:6px;font-size:clamp(22px,6vw,32px);font-weight:900;letter-spacing:.01em;text-shadow:0 0 20px color-mix(in srgb,var(--c) 70%,transparent),0 2px 10px rgba(0,0,0,.6)}
.pgBlurb{margin-top:6px;max-width:300px;min-height:2.6em;font-size:13px;line-height:1.35;color:rgba(234,255,240,.72)}
.pgWheel{position:absolute;inset:0;z-index:1;cursor:grab}
.pgWheel:active{cursor:grabbing}
.pgWheel::before{content:"";position:absolute;left:var(--cx);top:var(--cy);width:calc(var(--R) * 2 + var(--s) * 1.5);height:calc(var(--R) * 2 + var(--s) * 1.5);transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle closest-side,transparent calc(100% - var(--s) * 1.5),rgba(57,255,106,.1) calc(100% - var(--s) * 1.45),rgba(4,24,12,.6) calc(100% - var(--s) * 1.2),rgba(4,24,12,.6) calc(100% - 3px),rgba(157,255,180,.6) calc(100% - 2px),transparent 100%);
  box-shadow:0 0 40px rgba(57,255,106,.15)}
.pgTicks{position:absolute;left:var(--cx);top:var(--cy);width:calc(var(--R) * 2 - var(--s) * 1.4);height:calc(var(--R) * 2 - var(--s) * 1.4);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.pgTicks i{position:absolute;left:50%;top:0;width:2px;height:8px;margin-left:-1px;background:rgba(157,255,180,.35);transform-origin:50% calc(var(--R) - var(--s) * .7)}
.pgTicks i:nth-child(6n+1){height:14px;background:rgba(157,255,180,.7)}
.pgItem{position:absolute;left:0;top:0;width:var(--s);height:var(--s);padding:0;border:0;border-radius:24%;background:var(--c);cursor:pointer;will-change:transform;box-shadow:0 6px 16px rgba(0,0,0,.5),0 0 0 1.5px rgba(255,255,255,.18);transition:box-shadow .2s;-webkit-tap-highlight-color:transparent}
.pgItem img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;pointer-events:none;-webkit-user-drag:none}
.pgItem.on{box-shadow:0 0 0 2.5px #b8ffc9,0 0 26px rgba(57,255,106,.75),0 8px 18px rgba(0,0,0,.5);z-index:2}
.pgNeedle{position:absolute;left:var(--cx);top:calc(var(--cy) - var(--R) - var(--s) * .95);width:0;height:0;margin-left:-9px;border:9px solid transparent;border-top:12px solid #b8ffc9;filter:drop-shadow(0 0 6px #39ff6a);pointer-events:none}
#pgDial.land .pgNeedle{top:var(--cy);left:calc(var(--cx) - var(--R) - var(--s) * .95);margin:-9px 0 0;border:9px solid transparent;border-left:12px solid #b8ffc9}
.pgGo{position:absolute;z-index:2;left:50%;bottom:calc(max(18px,env(safe-area-inset-bottom)) + 34px);transform:translateX(-50%);min-width:180px;height:58px;padding:0 30px;border-radius:999px;border:0;cursor:pointer;
  font:900 17px/1 -apple-system,system-ui,sans-serif;letter-spacing:.2em;color:#032010;background:linear-gradient(120deg,#eaffd8,#39ff6a 50%,#16a83c);box-shadow:0 0 0 4px rgba(57,255,106,.2),0 0 34px rgba(57,255,106,.6),0 10px 24px rgba(0,0,0,.5);animation:pgGlow 1.8s ease-in-out infinite}
#pgDial.land .pgGo{left:var(--gx,66vw);top:50%;bottom:auto;transform:translate(-50%,-50%)}
#pgDial.land .pgGo:active{transform:translate(-50%,-50%) scale(.95)}
.pgGo:active{transform:translateX(-50%) scale(.95)}
@keyframes pgGlow{50%{box-shadow:0 0 0 8px rgba(57,255,106,.12),0 0 50px rgba(57,255,106,.8),0 10px 24px rgba(0,0,0,.5)}}
.pgHint{position:absolute;left:0;right:0;bottom:max(8px,env(safe-area-inset-bottom));text-align:center;font-size:11px;letter-spacing:.06em;color:rgba(234,255,240,.45);z-index:2;pointer-events:none}
#pgDial.land .pgHint{left:38vw}
.pgFlash{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 30%,#f4ffe8,#39ff6a 35%,#022a0c 80%)}
#pgDial.warp .pgFlash{animation:pgWarp .65s ease-in forwards}
#pgDial.warp .pgOrb{animation:pgZoom .65s cubic-bezier(.6,0,.9,.4) forwards}
#pgDial.warp .pgItem,#pgDial.warp .pgGo,#pgDial.warp .pgTop{opacity:0!important;transition:opacity .2s}
@keyframes pgWarp{0%{opacity:0}60%{opacity:.6}100%{opacity:1}}
@keyframes pgZoom{to{transform:scale(9) rotate(200deg)}}
@media (prefers-reduced-motion:reduce){.pgVortex i,.pgSwirl,.pgGo,#controls #fireBtn svg,.pgStars{animation:none!important}}

/* =====================================================================
   v1.99: no minimap (the phone stands top-left), the Portal button under
   the phone, coins and the online count as two buttons, the players list.
   ===================================================================== */
#minimap{display:none!important}
#controls #gunBtn.underPhone{right:auto;bottom:auto}
#stats{padding:0 4px;gap:2px;pointer-events:auto}
#stats>button{display:flex;align-items:center;gap:7px;height:34px;padding:0 10px;border:0;border-radius:999px;background:none;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
#stats>button:active{background:rgba(255,255,255,.1)}
#online{font-size:12px;opacity:1;border-left:1px solid rgba(255,255,255,.14)!important;border-radius:0 999px 999px 0!important}
#plSheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:flex-end;padding:calc(max(12px,env(safe-area-inset-top)) + 50px) max(12px,env(safe-area-inset-right)) 12px 12px;background:rgba(3,4,8,.45);opacity:0;pointer-events:none;transition:opacity .2s}
#plSheet.show{opacity:1;pointer-events:auto}
.plCard{width:min(380px,100%);max-height:100%;display:flex;flex-direction:column;border-radius:18px;background:#0e0d12;border:1px solid rgba(219,166,60,.35);box-shadow:0 20px 50px rgba(0,0,0,.55);color:#f3ead2;font-family:-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;overflow:hidden;transform:translateY(-8px);transition:transform .2s}
#plSheet.show .plCard{transform:none}
.plHead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 6px}
.plHead b{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:21px;color:#f0c868}
.plX{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.plQ{margin:4px 16px 6px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;padding:0 12px;font:inherit;font-size:15px;outline:none}
.plQ:focus{border-color:rgba(240,200,104,.6)}
.plMsg{min-height:0;padding:0 16px;font-size:12.5px;color:#f0c868}
.plMsg:empty{display:none}
.plBody{overflow-y:auto;padding:4px 10px 14px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.plSec{margin:12px 6px 6px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,200,104,.85)}
.plSec i{font-style:normal;margin-left:6px;color:rgba(255,255,255,.45);letter-spacing:0}
.plRow{display:flex;align-items:center;gap:10px;padding:7px 6px;border-radius:12px}
.plRow:nth-child(odd){background:rgba(255,255,255,.025)}
.plAv{flex:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#1a1206;background:linear-gradient(140deg,#f8e3a8,#dba63c 60%,#a8741c)}
.plName{flex:1;min-width:0;font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:7px}
.plLive{flex:none;width:7px;height:7px;border-radius:50%;background:#7cff8a;box-shadow:0 0 8px #7cff8a}
.plBtn{flex:none;height:32px;padding:0 13px;border-radius:999px;border:0;font:inherit;font-size:13px;font-weight:800;color:#1a1206;background:linear-gradient(120deg,#f8e3a8,#dba63c 55%,#b58428);cursor:pointer}
.plBtn.plMore{padding:0 10px;margin-left:6px;color:#e9e2d2;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);letter-spacing:.05em}
.plBtn:active{transform:scale(.95)}
.plTag{flex:none;font-size:12px;font-weight:700;color:rgba(255,255,255,.55);padding:0 6px}
.plTag.ok{color:#7cff8a}
.plNone{padding:10px 8px;font-size:13px;color:rgba(255,255,255,.45)}
#hudLeft{min-height:1px}

/* =====================================================================
   v2.01 POLISH: one accent (MDT gold, which is also MXC's colour), iOS
   style inset-grouped settings, switches and sliders, crisper HUD glass,
   and the little phone kept below menus. Overrides the rules above.
   ===================================================================== */
:root{--surface:#0d0e12;--surface2:#16171d;--surface3:#202128;--edge:rgba(255,255,255,.07);--edge2:rgba(255,255,255,.13);--ink:#f2f2f5;--muted:#8e8e98;--brand:#f0c868;--brandInk:#1a1206;--sep:rgba(255,255,255,.08)}
/* the little phone sits under every menu and sheet (the stick zone is inside #controls, z 5) */
#mphMini{z-index:12!important}
/* HUD glass: darker, tighter, hairline edge */
.pill,#settingsBtn{background:rgba(14,14,18,.72);border:1px solid rgba(255,255,255,.1);box-shadow:0 6px 20px rgba(0,0,0,.28)}
#stats{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
/* the panel */
.panel{background:var(--surface);border-color:var(--edge2)}
.panelTop{background:var(--surface);border-bottom-color:var(--sep);padding:14px 14px 12px 20px}
.panelHeading h2{font-size:22px;font-weight:800;letter-spacing:-.02em}
.iconBtn{border-radius:50%;border-color:transparent;background:var(--surface3);color:var(--ink);font-weight:700}
.wallet{border-color:rgba(240,200,104,.3);background:rgba(240,200,104,.1);color:var(--brand)}
.tabRail{background:var(--surface);border-color:var(--sep)}
.tab{color:var(--muted);font-weight:600}
.tab.active{background:rgba(240,200,104,.12);color:#fff;box-shadow:inset 3px 0 0 var(--brand)}
@media(max-width:720px){
 .tabRail{gap:4px;padding:6px 12px 10px;border-bottom:1px solid var(--sep)}
 .tab{padding:8px 14px;font-size:13.5px}
 .tab.active{background:var(--brand);color:var(--brandInk);box-shadow:none}
 .panes{padding:14px 14px 24px}
}
/* inset grouped sections */
.group{border-top:0;margin:0 0 14px;padding:14px 16px 4px;background:var(--surface2);border-radius:14px}
.pane>.group:first-child{margin-top:2px}
.groupHead{margin-bottom:10px}
.groupHead h3{font-size:12px;letter-spacing:.06em;color:var(--muted)}
.field{margin:0;padding:11px 0;border-top:1px solid var(--sep)}
.groupHead+.field,.groupHead+.chipGrid,.groupHead+.swatchGrid{border-top:0;padding-top:2px}
.group>.field:last-child,.group>small:last-child{margin-bottom:10px}
.fieldLabel{font-size:15px;font-weight:500;margin-bottom:10px}
.fieldLabel em{font-size:15px;font-weight:500}
.field small,.group>small{font-size:12.5px;color:var(--muted);margin-top:8px}
.group>small{padding-bottom:4px}
.paneNote{font-size:13.5px;line-height:1.5}
.statLine{font-size:14px}
/* iOS switches */
.field input[type=checkbox]{-webkit-appearance:none;appearance:none;position:relative;width:51px;height:31px;margin:0;border-radius:999px;background:rgba(120,120,128,.36);cursor:pointer;transition:background .2s ease;flex-shrink:0}
.field input[type=checkbox]::before{content:"";position:absolute;left:2px;top:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.25),0 1px 1px rgba(0,0,0,.16);transition:transform .22s cubic-bezier(.3,.7,.4,1)}
.field input[type=checkbox]:checked{background:var(--brand)}
.field input[type=checkbox]:checked::before{transform:translateX(20px)}
.field input[type=checkbox]:focus-visible{outline:2px solid rgba(240,200,104,.6);outline-offset:2px}
/* iOS sliders: thin track, gold fill (--p set by app.js), white knob */
.field input[type=range]{height:28px}
.field input[type=range]::-webkit-slider-runnable-track{height:4px;border:0;border-radius:999px;background:linear-gradient(var(--brand),var(--brand)) 0/var(--p,50%) 100% no-repeat,rgba(120,120,128,.36)}
.field input[type=range]::-webkit-slider-thumb{width:28px;height:28px;margin-top:-12px;border:0;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.3),0 0 0 .5px rgba(0,0,0,.08)}
.field input[type=range]::-moz-range-track{height:4px;border:0;background:rgba(120,120,128,.36)}
.field input[type=range]::-moz-range-progress{height:4px;background:var(--brand)}
.field input[type=range]::-moz-range-thumb{width:28px;height:28px;border:0;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.3)}
.field select{-webkit-appearance:none;appearance:none;padding:11px 36px 11px 12px;border-radius:10px;border:0;background:var(--surface3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238e8e98' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 13px center no-repeat;font-size:15px}
/* buttons and chips */
.btn{border-radius:12px;border:0;background:var(--surface3);font-size:14px;padding:11px 16px}
.btn.ghost{background:var(--surface3);color:var(--ink)}
.btn.primary{background:var(--brand);color:var(--brandInk);font-weight:700}
.btn.primary:hover{background:#f6d785}
.chip{background:var(--surface3);border-color:transparent;border-radius:12px;font-size:14px;font-weight:600}
.chip.selected{background:rgba(240,200,104,.14);border-color:var(--brand);color:#fff}
.swatch{border-radius:50%}
.swatch::after{border-radius:50%}
.swatch.selected::after{border-color:var(--brand)}
.ownStats>div{background:var(--surface3)!important;border:0!important;border-radius:12px!important}
.keyList{border:0!important;background:transparent!important}
.keyRow{padding:11px 0!important;border-top:1px solid var(--sep)!important;font-size:14px}
.keyRow:first-child{border-top:0!important}
.playlistPick button{border-radius:12px}
.playlistPick button.on{border-color:var(--brand)!important;background:rgba(240,200,104,.1)!important}
.radioNow:empty{display:none}
.panelFoot{border-top-color:var(--sep);background:var(--surface)}
.panelActions .btn{min-width:84px}
.chip .tag{white-space:nowrap;font-size:11px}
.chipGrid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
@media(max-width:720px){.tabRail{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}}
/* players list: a name opens their MDT profile */
a.plName{color:inherit;text-decoration:none}
a.plName:hover span{text-decoration:underline}
/* v2.10: Find (the Nexus's finder sheet), reusing the players list's card */
#findBtn{border-right:1px solid rgba(255,255,255,.14)!important;border-radius:999px 0 0 999px!important;color:#f0c868}
.nxSheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:flex-end;padding:calc(max(12px,env(safe-area-inset-top)) + 50px) max(12px,env(safe-area-inset-right)) 12px 12px;background:rgba(3,4,8,.45);opacity:0;pointer-events:none;transition:opacity .2s}
.nxSheet.show{opacity:1;pointer-events:auto}
.nxRow{cursor:pointer}
.nxRow:hover,.nxRow:focus-visible{background:rgba(240,200,104,.08)!important;outline:none}
.nxDot{flex:none;width:12px;height:12px;border-radius:50%;margin:0 6px;box-shadow:0 0 10px currentColor}
.nxRow .plName{flex-direction:column;align-items:flex-start;gap:1px}
.nxLive{font-size:11.5px;font-weight:700;color:#7cff8a}
.nxGo{flex:none;height:32px;padding:0 11px;border-radius:999px;border:1px solid rgba(240,200,104,.45);background:none;color:#f0c868;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.nxGuide{padding:0 11px}

/* Character pane (v2.11): the preview stays beside the shop (above it on a
   phone) while the item grid scrolls; the shop itself is ../_shared/mdt-locker.css */
.pane[data-pane="character"].active{display:grid;grid-template-columns:232px minmax(0,1fr);gap:18px;align-items:start}
.pane[data-pane="character"] .charTop{position:sticky;top:0;flex-direction:column;gap:10px;margin:0}
.charNote{font-size:12px!important;line-height:1.5!important}
#lockerRoot{min-width:0}
#lockerRoot .mdtl-buy{bottom:-22px}
@media(max-width:720px){
 .pane[data-pane="character"].active{grid-template-columns:minmax(0,1fr);gap:10px}
 .pane[data-pane="character"] .charTop{top:-18px;z-index:3;flex-direction:row;align-items:center;gap:12px;padding:6px 0 8px;background:var(--surface)}
 .pane[data-pane="character"] #charPreviewWrap{align-self:auto}
 .pane[data-pane="character"] #charPreview{width:124px;height:160px}
}

/* Guest mode (v2.16): "Explore as a guest" on the title card, and a small
   bar in the world that brings the sign-in card back. */
.authGuestWrap{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
#authGuest{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;padding:0 20px;border-radius:999px;border:1px solid rgba(219,166,60,.55);background:rgba(219,166,60,.08);color:var(--goldHi);font:inherit;font-size:15px;font-weight:800;cursor:pointer;touch-action:manipulation;transition:background .15s,transform .12s}
#authGuest:hover{background:rgba(219,166,60,.16)}
#authGuest:active{transform:scale(.985)}
#authGuest::after{content:'\2192';font-size:17px}
.authGuestNote{margin:8px 2px 0;font-size:12px;line-height:1.45;color:var(--faint);text-align:center}
#titleCard.guestOpen{z-index:40}
body.guestcard #hud,body.guestcard #controls{opacity:0;pointer-events:none}
body.guestcard #mphMini{visibility:hidden!important}
body.guestcard #hud *,body.guestcard #controls *{pointer-events:none!important}
#guestBar{display:none;position:absolute;left:50%;top:calc(max(12px,env(safe-area-inset-top)) + 48px);transform:translateX(-50%);pointer-events:auto;white-space:nowrap;padding:5px 12px;border-radius:999px;border:1px solid rgba(240,200,104,.35);background:rgba(10,12,16,.62);color:rgba(245,240,230,.82);font:600 11.5px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;cursor:pointer;touch-action:manipulation}
#guestBar u{color:#f0c868;text-decoration:underline;text-underline-offset:2px}
#guestBar:hover{border-color:rgba(240,200,104,.7)}
body.guest.inworld #guestBar{display:block}
body.flyin #guestBar{visibility:hidden}
body.guest #quest{top:calc(max(12px,env(safe-area-inset-top)) + 86px)}
@media (hover:hover) and (pointer:fine){
 #guestBar{top:auto;bottom:max(14px,env(safe-area-inset-bottom))}
 body.guest #quest{top:calc(max(12px,env(safe-area-inset-top)) + 64px)}
}
.guestOnly{display:none}
body.guest .guestOnly{display:block}
body.guest .charNote,body.guest #lockerRoot,body.guest #npLike{display:none!important}
.guestChar{min-width:0}
.guestChar .btn{margin-top:12px}
span.radioLike{cursor:default}

/* v2.35: tapping a door asks first ("Go in to <app>?"); nothing shows just for facing one */
#doorAsk{--dc:#f0c868;position:absolute;left:50%;top:50%;transform:translate(-50%,-44%) scale(.94);width:min(300px,calc(100vw - 40px));box-sizing:border-box;padding:18px 18px 16px;border-radius:22px;text-align:center;color:#fff;background:rgba(10,11,18,.9);border:1.5px solid color-mix(in srgb,var(--dc) 70%,transparent);box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 30px color-mix(in srgb,var(--dc) 30%,transparent);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:40}
#doorAsk.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
#doorAsk img{width:64px;height:64px;border-radius:16px;display:block;margin:0 auto 10px;box-shadow:0 6px 16px rgba(0,0,0,.5)}
#doorAsk small{display:block;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.65)}
#doorAsk .daName{display:block;margin-top:4px;font-size:22px;font-weight:900;line-height:1.2;overflow-wrap:anywhere}
#doorAsk .daBtns{display:flex;gap:10px;margin-top:16px}
#doorAsk button{flex:1;height:46px;border-radius:999px;font:800 16px/1 -apple-system,BlinkMacSystemFont,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#doorAsk .daNo{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff}
#doorAsk .daGo{border:0;color:#1a1408;background:linear-gradient(180deg,#ffe39a,#f0c868 55%,#c99a3c)}
#doorAsk button:active{transform:scale(.96)}

/* =====================================================================
   v2.47 EMOTES: the smiley beside USE (touch) or B opens four emotes;
   1-4 pick one while the row is up. Played and shared by app.js (EMOTES).
   ===================================================================== */
#controls #emoteBtn{right:calc(var(--cr) + var(--big) + var(--sm) + var(--gap) * 2);bottom:calc(var(--cb) + var(--big) + var(--gap))}
#controls #emoteBtn[aria-expanded="true"]{color:#1a1206;border-color:#fff4cf;background:linear-gradient(150deg,#fff4cf,#f0c868 45%,#b88426)}
#emotes{position:fixed;left:50%;bottom:calc(max(20px,env(safe-area-inset-bottom)) + 150px);transform:translateX(-50%);z-index:30;display:flex;gap:8px;padding:8px;border-radius:18px;
  background:rgba(10,10,14,.86);border:1px solid rgba(219,166,60,.5);box-shadow:0 10px 30px rgba(0,0,0,.5)}
#emotes[hidden]{display:none}
#emotes button{appearance:none;border:1px solid rgba(219,166,60,.45);background:radial-gradient(120% 120% at 30% 20%,rgba(46,40,30,.9),rgba(10,10,14,.9) 60%);color:#f5f0e6;
  font:600 13px/1 -apple-system,system-ui,"Segoe UI",Roboto,sans-serif;padding:12px 14px;border-radius:12px;min-width:74px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px}
#emotes button b{font-size:10px;color:#f0c868;opacity:.8}
#emotes button:hover,#emotes button:focus-visible{border-color:#f0c868;outline:none;box-shadow:0 0 0 3px rgba(240,200,104,.2)}
@media (pointer:coarse){#emotes button b{display:none}}

/* hub 2.61: the shared MDT top bar stays up in the world (the owner: an obvious way back to the site). The whole
   HUD layer starts under it, and the HUD's own cog and guest line give way to the bar's (no copies of buttons) */
body.inworld #hud{top:var(--mdts-h,0px)}
body.inworld #settingsBtn{display:none}
body.inworld #guestBar{display:none!important}
/* hub 2.61: the guide is one card, so no dots or Back */
#guideDots,#guideBack{visibility:hidden}
.guideMore{font-size:.92em;opacity:.8;margin-top:.6em}