/* Shared full-screen world layout + HUD. Each world sets --w-accent and its own fonts. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: #050403; color: #f4ecd8; font: 500 15px/1.45 Inter, system-ui, sans-serif; overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.up { color: #4dff7a; } .down { color: #ff5a4f; }
.cabar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 6px 12px; background: var(--w-accent, #ffb000); color: #111; font: 700 13px 'JetBrains Mono', monospace; }
.cabar code { background: rgba(0,0,0,.12); padding: 2px 8px; border-radius: 6px; word-break: break-all; } .cabar button, .cabar a { background: #111; color: var(--w-accent, #ffb000); border: 0; border-radius: 6px; padding: 3px 10px; font-weight: 700; text-decoration: none; }
.world { position: fixed; inset: 0; }
.world canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud > * { pointer-events: auto; }
.w-top { position: absolute; left: 18px; top: 16px; display: flex; gap: 10px; align-items: center; }
.cabar:not([hidden]) ~ .world .w-top, .cabar:not([hidden]) ~ .world .w-feat { top: 46px; }
.w-title { font: 400 26px/1 Anton, 'Archivo Black', sans-serif; letter-spacing: .04em; text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.w-mode { display: inline-flex; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 3px; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); }
.w-mode button { border: 0; background: none; padding: 5px 11px; border-radius: 7px; font: 800 12px Inter; letter-spacing: .08em; color: rgba(255,255,255,.6); }
.w-mode button.on { background: var(--w-accent); color: #111; }
.w-bal { font-size: 12px; padding: 6px 10px; border-radius: 10px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.12); }
.w-feat { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); padding: 10px 14px; border-radius: 14px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); min-width: 250px; text-align: left; }
.w-feat:empty { display: none; }
.w-feat small { font: 800 10px Inter; letter-spacing: .2em; color: var(--w-accent); }
.w-feat .f { display: flex; gap: 10px; align-items: center; margin-top: 4px; } .w-feat img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: #222; }
.w-feat b { font: 400 24px/1 Anton, sans-serif; display: block; letter-spacing: .02em; } .w-feat span { font: 600 12px 'JetBrains Mono', monospace; color: rgba(255,255,255,.75); } .w-feat em { font-style: normal; }
.w-cap { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(.9); font: 400 clamp(36px, 7vw, 110px)/.95 Anton, sans-serif; letter-spacing: .02em; text-align: center; color: #fff; text-shadow: 0 0 40px rgba(0,0,0,.7), 0 6px 0 rgba(0,0,0,.35); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; max-width: 90vw; }
.w-cap.show { opacity: 1; transform: translate(-50%, -50%) scale(1); } .w-cap.interim { opacity: .55; font-size: clamp(26px, 4vw, 54px); }
.w-cap.big { animation: slam .5s cubic-bezier(.2,1.6,.4,1); } @keyframes slam { 0% { transform: translate(-50%, -50%) scale(1.8); } 100% { transform: translate(-50%, -50%) scale(1); } }
.w-tix { position: absolute; right: 18px; top: 16px; display: grid; gap: 6px; width: min(330px, 80vw); }
.w-tk { padding: 9px 12px; border-radius: 10px; font: 700 13px 'JetBrains Mono', monospace; background: rgba(0,0,0,.7); border-left: 4px solid #4dff7a; animation: tin .3s ease-out; } .w-tk.bad { border-color: #ff5a4f; } .w-tk a { color: var(--w-accent); }
@keyframes tin { from { transform: translateX(30px); opacity: 0; } }
.w-bag { position: absolute; right: 18px; bottom: 18px; width: 230px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.12); font: 600 12px 'JetBrains Mono', monospace; backdrop-filter: blur(8px); }
.w-bag:empty { display: none; } .w-bag small { display: block; font: 800 10px Inter; letter-spacing: .15em; margin-bottom: 4px; color: rgba(255,255,255,.7); } .w-bag em { font-style: normal; } .w-bag div { display: flex; justify-content: space-between; }
.w-sub { position: absolute; left: 50%; bottom: 168px; transform: translateX(-50%); max-width: min(760px, 90vw); text-align: center; font: 600 18px/1.35 Inter; padding: 6px 14px; border-radius: 8px; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .3s; } .w-sub.show { opacity: 1; } .w-sub b { color: var(--w-accent); margin-right: 6px; }
.w-mic { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(520px, 92vw); display: grid; gap: 8px; justify-items: center; }
.w-meter { position: relative; width: 100%; height: 10px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.w-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #4dff7a, #ffd23f 60%, #ff3b30); transition: width .05s; }
.w-meter b { position: absolute; top: -2px; bottom: -2px; width: 3px; background: #fff; left: 0; }
.w-micbtn { width: 100%; border: 0; border-radius: 14px; padding: 15px; font: 400 22px Anton, sans-serif; letter-spacing: .06em; background: var(--w-accent); color: #111; box-shadow: 0 10px 40px rgba(0,0,0,.5); user-select: none; touch-action: none; }
.w-micbtn.on { background: #ff3b30; color: #fff; box-shadow: 0 0 50px rgba(255,59,48,.7); animation: pulse .6s infinite alternate; } @keyframes pulse { to { transform: scale(1.02); } }
kbd { display:inline-block; min-width:1.1em; text-align:center; font:800 14px 'JetBrains Mono',monospace; color:#fff; background:linear-gradient(180deg,#36363f,#14141a); border:1.5px solid rgba(255,255,255,.65); border-bottom:3px solid rgba(0,0,0,.8); border-radius:7px; padding:3px 9px; margin:0 2px; box-shadow:0 2px 0 rgba(0,0,0,.6), 0 0 14px var(--w-accent); text-shadow:0 1px 2px #000; letter-spacing:.04em; vertical-align:baseline; }
.w-micbtn kbd { font:800 15px 'JetBrains Mono'; }
.w-row { display: flex; gap: 8px; align-items: center; }
.w-hot { border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.5); border-radius: 9px; padding: 6px 12px; font: 800 12px Inter; letter-spacing: .08em; } .w-hot.on { background: #ff3b30; border-color: #ff3b30; }
.w-capl { font: 600 12px 'JetBrains Mono'; color: rgba(255,255,255,.7); background: rgba(0,0,0,.45); padding: 5px 9px; border-radius: 9px; } .w-capl input { width: 64px; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.3); color: #fff; font: inherit; text-align: center; }
.w-verbs { font: 600 12px 'JetBrains Mono'; color: rgba(255,255,255,.75); text-align: center; text-shadow: 0 1px 6px #000; } .w-verbs b { color: var(--w-accent); }
.w-gate { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: radial-gradient(800px 500px at 50% 45%, rgba(0,0,0,.35), rgba(0,0,0,.85)); text-align: center; padding: 20px; }
.w-gate h1 { font: 400 clamp(56px, 10vw, 150px)/.88 Anton, sans-serif; margin: 0; letter-spacing: .02em; } .w-gate h1 em { font-style: normal; color: var(--w-accent); }
.w-gate p { max-width: 560px; margin: 16px auto 22px; color: rgba(255,255,255,.8); font-size: 17px; }
.w-gate button { border: 0; border-radius: 14px; padding: 16px 30px; font: 400 26px Anton, sans-serif; letter-spacing: .06em; background: var(--w-accent); color: #111; box-shadow: 0 10px 50px rgba(0,0,0,.6); }
.w-gate small { display: block; margin-top: 14px; color: rgba(255,255,255,.55); font-size: 12px; }
@media (max-width: 760px) { .w-feat { top: 60px; } .w-bag { display: none; } .w-tix { top: 120px; } .w-sub { bottom: 190px; font-size: 15px; } }

.w-room { font-size: 11px; padding: 6px 10px; border-radius: 10px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.12); color: #7dffa8; letter-spacing: .06em; }
.w-room[hidden] { display: none !important; }
@media (max-width: 760px) { .w-room { display: none !important; } }
@media (max-width: 760px) { .w-title { font-size: 18px !important; line-height: 1; } .w-mute { left: auto !important; right: 12px; top: 64px !important; } }
.w-verbs b { pointer-events: auto; cursor: pointer; padding: 1px 5px; border-radius: 5px; transition: background .15s; } .w-verbs b:hover { background: rgba(255,255,255,.12); }

.w-pick { position: absolute; left: 18px; top: 100px; width: 268px; z-index: 6; font-family: Inter, sans-serif; }
.w-pick[hidden] { display: none !important; }
.w-pick-t { display: block; width: 100%; text-align: left; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.55); color: #fff; font: 800 12px Inter; letter-spacing: .1em; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.w-pick-t::after { content: ' ▾'; color: var(--w-accent); }
.w-pick.open .w-pick-t { border-radius: 10px 10px 0 0; }
.w-pick-b { display: none; background: rgba(6,6,8,.78); border: 1px solid rgba(255,255,255,.14); border-top: 0; border-radius: 0 0 12px 12px; padding: 8px; backdrop-filter: blur(6px); }
.w-pick.open .w-pick-b { display: block; }
.w-pick-b input { width: 100%; box-sizing: border-box; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: #fff; border-radius: 8px; padding: 8px 10px; font: 600 12px 'JetBrains Mono', monospace; outline: none; }
.w-pick-b input:focus { border-color: var(--w-accent); }
.w-pick-l { margin-top: 6px; max-height: min(34vh, 320px); overflow: auto; display: grid; gap: 3px; }
.w-pick-r { display: grid; grid-template-columns: 26px 1fr auto auto; gap: 8px; align-items: center; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 5px 6px; color: #fff; cursor: pointer; font: 12px 'JetBrains Mono', monospace; }
.w-pick-r:hover { background: rgba(255,255,255,.08); }
.w-pick-r.on { border-color: var(--w-accent); background: rgba(255,255,255,.06); }
.w-pick-r img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; background: #222; }
.w-pick-r b { font: 800 12px Inter; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-pick-r span { color: rgba(255,255,255,.6); }
.w-pick-r em { font-style: normal; min-width: 52px; text-align: right; }
.w-pick-r em.up { color: #4dff7a; } .w-pick-r em.down { color: #ff5a4f; }
@media (max-width: 760px) { .w-pick { top: 108px; left: 10px; width: min(268px, calc(100vw - 20px)); } .w-pick-l { max-height: 40vh; } }

/* no backdrop blur over the live 3D view: it is re-blurred every frame (GPU cost at 144 Hz); slightly more opaque panels instead */
.hud, .hud * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.w-feat, .w-bag, .w-mode, .w-pick-t, .w-pick-b { background: rgba(8,8,11,.82) !important; }
.w-fps { position: absolute; left: 14px; bottom: 12px; z-index: 7; font: 700 12px 'JetBrains Mono', monospace; letter-spacing: .05em; padding: 4px 8px; border-radius: 7px; background: rgba(0,0,0,.6); color: #8f9ab3; pointer-events: none; }
.w-fps.ok { color: #4dff7a; } .w-fps.mid { color: #ffd000; } .w-fps.low { color: #ff5a4f; }

/* ---------- the boss's terminal: four monitor pages (1000x580 px each, shown on the 3D monitors) ---------- */
.tm-screen { position: relative; width: 880px; height: 500px; backface-visibility: hidden; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; background: #05070b; color: #d7deea; font: 17px Inter, system-ui, sans-serif; padding: 12px 14px; user-select: none; }
.tm-screen * { box-sizing: border-box; }
.tm-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.012) 34%, rgba(255,255,255,0) 52%), radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0) 62%, rgba(0,0,0,.28) 100%); } /* glass sheen + edge falloff, so a page reads as a lit panel */
.tm-screen:not(.live) { pointer-events: none !important; }
.world .tm-screen canvas { position: static; inset: auto; width: 100%; height: auto; flex: 1 1 0; min-height: 0; display: block; cursor: crosshair; touch-action: auto; }
.tm-title { display: flex; align-items: center; gap: 10px; font: 800 14px Inter; letter-spacing: .14em; color: #8a95ad; padding: 0 2px 8px; border-bottom: 1px solid #1c2230; margin-bottom: 6px; white-space: nowrap; }
.tm-title em { margin-left: auto; font: 700 14px "JetBrains Mono", monospace; letter-spacing: 0; font-style: normal; color: #8a95ad; overflow: hidden; text-overflow: ellipsis; }
.tm-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; height: 100%; min-height: 0; }
.tm-col { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.tm-top { display: flex; align-items: center; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid #1c2230; min-width: 0; }
.tm-top .t-ico { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: #151a24; }
.t-id { display: grid; min-width: 0; } .t-sym { font: 900 26px Inter; color: #fff; line-height: 1.05; } .t-name { color: #7f8aa3; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.tm-kv { display: grid; } .tm-kv small { color: #5c6478; font: 800 11px Inter; letter-spacing: .12em; } .tm-kv b { font: 800 20px "JetBrains Mono", monospace; color: #fff; }
.t-ca { margin-left: auto; border: 1px solid #2a3244; background: #111622; color: #c9d3e6; font: 700 15px "JetBrains Mono", monospace; padding: 8px 12px; border-radius: 9px; cursor: pointer; }
.t-ca:hover { border-color: #ffb000; color: #ffb000; }
.t-links { display: flex; gap: 10px; margin-left: 6px; } .t-links a { color: #8fb3ff; font-weight: 800; font-size: 15px; text-decoration: none; } .t-links a:hover { text-decoration: underline; }
.tm-sub { display: flex; align-items: center; gap: 12px; padding: 8px 0 6px; }
.t-ivs { display: flex; gap: 6px; } .t-ivs button { border: 1px solid #2a3244; background: #111622; color: #9aa6bd; font: 800 13px Inter; padding: 5px 10px; border-radius: 7px; cursor: pointer; } .t-ivs button.on { border-color: #ffb000; color: #ffb000; }
.t-ohlc { margin-left: auto; font: 600 13px "JetBrains Mono", monospace; color: #8a95ad; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; }
.t-fact { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #141924; font-size: 16px; } .t-fact span { color: #8f9ab3; } .t-fact b { font: 800 16px "JetBrains Mono", monospace; }
.t-fact.ok b { color: #e6ecf7; } .t-fact.warn b { color: #ffb000; } .t-fact.bad b { color: #ff4d5e; }
.t-risk.ok { color: #2ecc71 !important; } .t-risk.warn { color: #ffb000 !important; } .t-risk.bad { color: #ff4d5e !important; }
.t-hold { margin-top: 8px; overflow: hidden; } .t-hold small { display: block; color: #5c6478; font: 800 11px Inter; letter-spacing: .14em; margin: 4px 0; }
.t-h { display: grid; grid-template-columns: minmax(0, 1.25fr) 1fr 64px; align-items: center; gap: 10px; font: 600 14px "JetBrains Mono", monospace; padding: 3px 0; } .t-h span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #c9d3e6; }
.t-h i { font-style: normal; font: 800 10px Inter; color: #ffb000; border: 1px solid #ffb000; border-radius: 4px; padding: 0 4px; } .t-h i.b { color: #ff4d5e; border-color: #ff4d5e; } .t-h i.s { color: #b48cff; border-color: #b48cff; }
.t-h em { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #4daaff, #2ecc71); width: 0; } .t-h b { text-align: right; color: #e6ecf7; }
.t-desc { color: #8f9ab3; font-size: 13px; line-height: 1.4; margin: 8px 0 0; }
.t-rows { overflow: hidden; min-height: 0; flex: 1; font: 600 15px "JetBrains Mono", monospace; }
.t-tr, .t-pr, .t-sr { display: grid; align-items: center; gap: 10px; padding: 5px 4px; border-bottom: 1px solid #10141d; }
.t-tr { grid-template-columns: 44px 54px 70px 1fr 1fr; } .t-tr.up b { color: #2ecc71; } .t-tr.down b { color: #ff4d5e; } .t-tr.big { background: rgba(255,176,0,.09); }
.t-sr { grid-template-columns: 28px 1fr 80px 74px; cursor: pointer; } .t-sr img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; } .t-sr.on { background: #15130a; } .t-sr.on b { color: #ffb000; } .t-sr:hover, .t-pr:hover { background: #111622; }
.t-pr { grid-template-columns: 1fr 1.4fr 70px auto; cursor: pointer; }
.t-pr button { border: 1px solid #4a1d26; background: #1a0c10; color: #ff6b7a; font: 800 12px Inter; padding: 5px 10px; border-radius: 7px; cursor: pointer; }
.t-search input { width: 100%; background: #0f131c; border: 1px solid #2a3244; color: #fff; border-radius: 9px; padding: 9px 12px; font: 600 15px "JetBrains Mono", monospace; outline: none; margin-bottom: 6px; } .t-search input:focus { border-color: #ffb000; }
.t-order > *:not(.tm-title) { margin-top: 9px; }
.t-mode { color: #ffb000 !important; } .t-mode.live { color: #2ecc71 !important; }
.t-bal { display: flex; justify-content: space-between; color: #8a95ad; } .t-bal b { color: #fff; font: 800 18px "JetBrains Mono", monospace; }
.t-sizes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .t-sizes button { position: relative; border: 1px solid #2a3244; background: #111622; color: #dfe6f5; font: 800 16px "JetBrains Mono", monospace; padding: 11px 0 9px; border-radius: 9px; cursor: pointer; }
.t-sizes button small { position: absolute; left: 6px; top: 2px; font: 700 10px Inter; color: #5c6478; } .t-sizes button.on { border-color: #2ecc71; background: #0f2219; color: #2ecc71; }
.t-amt { display: flex; align-items: center; gap: 10px; color: #8a95ad; font-size: 15px; } .t-amt input { flex: 1; min-width: 0; background: #0f131c; border: 1px solid #2a3244; color: #fff; border-radius: 8px; padding: 8px 10px; font: 600 15px "JetBrains Mono", monospace; outline: none; }
.t-buy { width: 100%; border: 0; border-radius: 11px; padding: 15px 0; background: #2ecc71; color: #04140a; font: 900 19px Inter; letter-spacing: .03em; cursor: pointer; } .t-buy:hover { filter: brightness(1.1); }
.t-sells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .t-sells button { border: 1px solid #4a1d26; background: #1a0c10; color: #ff6b7a; font: 800 14px Inter; padding: 11px 0; border-radius: 9px; cursor: pointer; } .t-sells button:hover { background: #2a1016; }
.t-pos { display: grid; gap: 3px; padding: 10px 12px; background: #0f131c; border: 1px solid #1c2230; border-radius: 9px; } .t-pos span { color: #8a95ad; font-size: 13px; } .t-pos b { font: 800 15px "JetBrains Mono", monospace; }
.t-keys { color: #5c6478; font-size: 13px; } .t-keys b { color: #9aa6bd; }
.t-x { margin-top: 8px; border: 1px solid #3a2a2a; background: #1a0f12; color: #ff8a8a; font: 800 13px Inter; letter-spacing: .08em; padding: 9px 12px; border-radius: 9px; cursor: pointer; }
.tm-screen .up { color: #2ecc71; } .tm-screen .down { color: #ff4d5e; } .t-dim { color: #5c6478; padding: 6px 4px; margin: 0; }
.w-term { position: absolute; inset: 0; z-index: 30; display: grid; grid-template-columns: repeat(2, 880px); grid-template-rows: repeat(2, 500px); gap: 10px; place-content: center; background: rgba(5,7,11,.94); }
.w-term[hidden] { display: none !important; }
.w-css3d { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .16s ease-out; } /* above the 3D canvas, under the HUD (DOM order) */
.w-css3d.on { opacity: 1; transition-duration: .3s; }
.w-css3d:not(.on) .tm-screen { pointer-events: none !important; }
.world.term-open .w-sub { bottom: 14px; }
.world.term-open .hud > *:not(.w-tix):not(.w-sub):not(.w-fps) { display: none !important; }
.w-termbtn { border: 1px solid rgba(255,176,0,.6); background: rgba(20,14,2,.85); color: #ffb000; font: 800 11px Inter; letter-spacing: .1em; padding: 7px 10px; border-radius: 9px; cursor: pointer; }
.w-hint { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); padding: 8px 14px; border-radius: 10px; background: rgba(0,0,0,.72); border: 1px solid rgba(255,176,0,.5); color: #ffd27a; font: 800 12px Inter; letter-spacing: .08em; pointer-events: none; }
.w-hint[hidden] { display: none !important; }

/* plain BUY / SELL controls (worlds with controls: 'trade'), instead of the scream mic */
.w-trade { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(560px, 94vw); display: grid; gap: 8px; }
.w-amts { display: flex; gap: 6px; justify-content: center; align-items: center; font: 700 12px 'JetBrains Mono', monospace; }
.w-amts button, .w-amts label { border: 1px solid rgba(255,255,255,.18); background: rgba(8,8,11,.8); color: #fff; border-radius: 9px; padding: 6px 12px; font: inherit; cursor: pointer; }
.w-amts button.on, .w-amts label.on { background: var(--w-accent); color: #111; border-color: var(--w-accent); }
.w-amts label { padding: 0 8px; } .w-amts input { width: 58px; background: none; border: 0; color: inherit; font: inherit; padding: 6px 0; outline: none; } .w-amts input::placeholder { color: rgba(255,255,255,.45); }
.w-amts span { color: rgba(255,255,255,.7); text-shadow: 0 1px 6px #000; }
.w-tbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.w-buy, .w-sell { border: 0; border-radius: 16px; padding: 11px 10px 10px; color: #fff; cursor: pointer; box-shadow: 0 10px 40px rgba(0,0,0,.55); display: grid; gap: 3px; user-select: none; transition: transform .08s, filter .15s; }
.w-buy b, .w-sell b { font: 400 30px/1 Anton, Impact, sans-serif; letter-spacing: .05em; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.w-buy small, .w-sell small { font: 700 11px 'JetBrains Mono', monospace; opacity: .92; } .w-sell small em { font-style: normal; font-weight: 800; }
.w-buy { background: linear-gradient(180deg, #2bd96b, #0f8f44); } .w-sell { background: linear-gradient(180deg, #ff4d5e, #ad1028); }
.w-buy:hover, .w-sell:not(:disabled):hover { filter: brightness(1.1); } .w-buy:active, .w-sell:active { transform: scale(.97); }
.w-sell:disabled { filter: grayscale(.85) brightness(.5); cursor: default; } .w-buy.busy, .w-sell.busy { filter: brightness(.7); }
.w-sell small em.up { color: #c8ffd9; } .w-sell small em.down { color: #fff; }
/* the portfolio: total + P&L, cash / coins / banked, positions (in → now), last trades */
.w-port { width: 300px; } .w-port div { display: block; }
.w-port .pt { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .w-port .pt b { font: 800 20px Inter, sans-serif; } .w-port .pt em { font: 700 13px 'JetBrains Mono', monospace; }
.w-port .ps { color: rgba(255,255,255,.62); font-size: 11px; margin: 2px 0 6px; }
.w-port .pp { border-top: 1px solid rgba(255,255,255,.1); padding-top: 6px; display: grid; gap: 3px; }
.w-port .pr { display: grid; grid-template-columns: 1fr auto 56px; gap: 10px; } .w-port .pr span:nth-child(2) { color: rgba(255,255,255,.7); } .w-port .pr em { text-align: right; }
.w-port .pm, .w-port p { color: rgba(255,255,255,.5); font-size: 11px; margin: 4px 0 0; }
.w-port ul { list-style: none; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.62); font-size: 11px; display: grid; gap: 2px; }
.w-port .up { color: #4dff7a; } .w-port .down { color: #ff5a4f; }
.w-reset { margin-top: 6px; background: none; border: 0; color: rgba(255,255,255,.38); font: 600 10px 'JetBrains Mono', monospace; cursor: pointer; padding: 0; text-decoration: underline; }
.w-bal span { color: var(--w-accent); font-weight: 800; margin-right: 4px; }
@media (max-width: 760px) {
  .w-trade { bottom: 10px; } .w-buy b, .w-sell b { font-size: 24px; } .w-amts button, .w-amts label { padding: 5px 9px; } .w-amts input { width: 46px; }
  .w-port { display: block !important; left: 10px; right: 10px; bottom: 150px; width: auto; padding: 6px 10px; } .w-port .pp, .w-port ul, .w-reset, .w-port > small, .w-port p { display: none; } .w-port .ps { margin: 0; }
  .w-thint { display: none; } .hud:has(.w-trade) .w-port { bottom: 128px; } .hud:has(.w-trade) .w-sub { bottom: 196px; }
}
.w-thint { text-align: center; font: 600 11px 'JetBrains Mono', monospace; color: rgba(255,255,255,.6); text-shadow: 0 1px 6px #000; } .w-thint b { color: var(--w-accent); }
@media (max-width: 760px) { .world:has(.w-trade) .w-fps { display: none; } }
.w-pxbtn { border-color: rgba(123,140,255,.7) !important; background: rgba(12,14,36,.88) !important; color: #b8c0ff !important; } .w-pxbtn kbd { font: 700 10px 'JetBrains Mono', monospace; background: rgba(123,140,255,.18); padding: 1px 5px; border-radius: 4px; margin-left: 4px; }
/* first-person look: the crosshair while the mouse is captured, a one-time hint before */
.w-cross { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px rgba(0,0,0,.6), 0 0 8px rgba(255,255,255,.45); pointer-events: none; z-index: 8; display: none; transition: width .12s, height .12s, margin .12s; }
.fps-on .w-cross { display: block; }
.fps-on .w-cross.hot { width: 18px; height: 18px; margin: -9px 0 0 -9px; background: rgba(255,255,255,.12); border: 2px solid #fff; box-sizing: border-box; }
.w-lookhint { position: absolute; left: 50%; top: 74px; transform: translateX(-50%); padding: 9px 16px; border-radius: 999px; background: rgba(8,8,14,.74); border: 1px solid rgba(255,255,255,.14); color: #d9dbe6; font: 600 13px/1 Inter, system-ui, sans-serif; letter-spacing: .03em; white-space: nowrap; pointer-events: none; z-index: 8; }
.w-lookhint b { color: #fff; font-weight: 800; }
.w-lookhint[hidden], .term-open .w-lookhint, .term-open .w-cross { display: none !important; }
.w-tbtns button { position: relative; }
.w-tbtns kbd { position: absolute; top: 7px; right: 9px; font: 800 11px/1 'JetBrains Mono', monospace; padding: 3px 5px; border-radius: 5px; background: rgba(0,0,0,.28); color: rgba(255,255,255,.85); }
@media (pointer: coarse) { .w-tbtns kbd { display: none; } }
/* trade pads: the featured coin box moves to the top right (the top bar is busy) */
.hud:has(.w-trade) .w-feat { left: auto; right: 18px; transform: none; } .hud:has(.w-trade) .w-tix { top: 118px; }
@media (max-width: 760px) { .hud:has(.w-trade) .w-feat { right: 10px; top: 60px; } }
/* walking: the blink back to your spot */
.w-blink { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 50; } .w-blink.on { opacity: 1; }
/* the LIVE wallet panel: the instant trading wallet (top up, withdraw, export) or the wallet app */
.w-wal { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); pointer-events: auto; padding: 16px; }
.w-wal-b { position: relative; width: min(460px, 100%); max-height: calc(100% - 20px); overflow-y: auto; background: #0d0f16; border: 1px solid #2a2f44; border-radius: 18px; padding: 22px; color: #eef1ff; font: 500 14px/1.45 Inter, system-ui, sans-serif; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.w-wal-b h3 { margin: 0 0 14px; font: 800 18px Inter, sans-serif; letter-spacing: .06em; color: var(--w-accent, #ffb000); }
.w-wal-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 9px; border: 1px solid #2a2f44; background: #151826; color: #aab; cursor: pointer; }
.w-wal-opt { display: block; width: 100%; text-align: left; border: 1px solid #2a2f44; background: #131624; border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; color: inherit; cursor: pointer; }
.w-wal-opt b { display: block; font: 800 15px Inter; margin-bottom: 3px; } .w-wal-opt span { color: #9aa3c4; font-size: 13px; }
.w-wal-opt.main { border-color: var(--w-accent, #ffb000); background: color-mix(in srgb, var(--w-accent, #ffb000) 12%, #131624); }
.w-wal-opt:hover { border-color: var(--w-accent, #ffb000); }
.w-wal-addr { display: flex; gap: 8px; align-items: center; background: #060710; border: 1px solid #22263a; border-radius: 10px; padding: 8px 10px; margin-bottom: 12px; }
.w-wal-addr code { flex: 1; min-width: 0; font: 600 12px 'JetBrains Mono', monospace; word-break: break-all; color: #dfe4ff; }
.w-wal-addr button, .w-wal-row button, .w-wal-amts button { border: 1px solid #2a2f44; background: #181c2c; color: #eef1ff; border-radius: 9px; padding: 8px 10px; font: 800 12px Inter; cursor: pointer; white-space: nowrap; }
.w-wal-amts button:hover, .w-wal-row button:hover, .w-wal-addr button:hover { border-color: var(--w-accent, #ffb000); }
.w-wal-bal { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; } .w-wal-bal b { font: 800 28px 'JetBrains Mono', monospace; } .w-wal-bal span { color: #9aa3c4; }
.w-wal-b small { display: block; color: #9aa3c4; font: 800 11px Inter; letter-spacing: .1em; margin-bottom: 6px; }
.w-wal-amts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.w-wal-go { display: block; width: 100%; margin: 14px 0; border: 0; border-radius: 12px; padding: 14px; font: 800 15px Inter; letter-spacing: .04em; background: var(--w-accent, #ffb000); color: #0b0b0b; cursor: pointer; }
.w-wal-row { display: flex; gap: 8px; margin-top: 8px; } .w-wal-row input { flex: 1; min-width: 0; background: #060710; border: 1px solid #22263a; border-radius: 9px; color: #eef1ff; padding: 8px 10px; font: 600 12px 'JetBrains Mono', monospace; outline: none; }
.w-wal-row .w-wal-ghost { flex: 1; background: none; color: #9aa3c4; }
.w-wal-f { color: #9aa3c4; font-size: 12px; margin: 8px 0 0; }
.w-bal { cursor: default; } .w-hud-live .w-bal, .w-bal:has(span) { cursor: pointer; }
/* the controls: keycaps under the trade buttons, and the full card (on entry, H, or the CONTROLS button) */
.w-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 8px; font: 800 11px Inter, sans-serif; letter-spacing: .06em; color: rgba(255,255,255,.85); text-shadow: 0 1px 6px #000; }
.w-keys span { display: inline-flex; align-items: center; gap: 6px; }
.w-keys kbd, .w-ctl kbd { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 6px; background: linear-gradient(#2a2d3a, #15171f); border: 1px solid #454a60; border-bottom-width: 3px; color: #fff; font: 800 11px 'JetBrains Mono', monospace; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.w-ctl { position: absolute; inset: 0; z-index: 72; display: grid; place-items: center; background: rgba(0,0,0,.6); backdrop-filter: blur(5px); pointer-events: auto; padding: 16px; }
.w-ctl-b { width: min(560px, 100%); max-height: calc(100% - 20px); overflow-y: auto; background: #0d0f16; border: 1px solid #2a2f44; border-radius: 20px; padding: 24px 26px; color: #eef1ff; font: 500 14px Inter, sans-serif; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.w-ctl-b h3 { margin: 0 0 16px; font: 800 20px Inter; letter-spacing: .1em; color: var(--w-accent, #ffb000); }
.w-ctl-g { display: grid; gap: 9px; } .w-ctl-g div { display: flex; align-items: center; gap: 5px; } .w-ctl-g div span { margin-left: 10px; color: #cfd4ea; }
.w-ctl-g kbd { min-width: 30px; height: 30px; font-size: 12px; }
.w-ctl-go { display: block; width: 100%; margin-top: 20px; border: 0; border-radius: 14px; padding: 15px; font: 900 17px Inter; letter-spacing: .14em; background: var(--w-accent, #ffb000); color: #0b0b0b; cursor: pointer; }
.w-ctl-b p { margin: 12px 0 0; text-align: center; color: #9aa3c4; font-size: 12px; } .w-ctl-b p kbd { min-width: 20px; height: 20px; }
.w-ctlbtn kbd { margin-left: 4px; }
/* one keycap row (it wraps only on narrow screens); the NPC subtitles go up top so they never sit on the trade buttons */
.w-keys { flex-wrap: nowrap; gap: 4px 11px; font-size: 10.5px; white-space: nowrap; } .w-keys kbd { min-width: 20px; height: 20px; padding: 0 5px; font-size: 10px; border-bottom-width: 2px; }
@media (max-width: 900px) { .w-keys { flex-wrap: wrap; } }
.hud:has(.w-trade) .w-sub { bottom: auto; top: 122px; }
/* using a terminal: the NPC subtitles drop to the bottom edge so they never cover its header */
.world.term-open .hud .w-sub { top: auto !important; bottom: 12px !important; }

/* mouse-mode toggle (never get the cursor trapped) + per-position quick-sell */
.w-mousebtn { position: fixed; left: 14px; bottom: 46px; z-index: 20; padding: 11px 17px; border-radius: 12px; border: 2px solid var(--w-accent, #ff2bd6); background: rgba(10,2,16,.82); color: #fff; font: 800 14px/1 Inter, system-ui, sans-serif; letter-spacing: .03em; cursor: pointer; backdrop-filter: blur(6px); box-shadow: 0 0 20px rgba(0,0,0,.55); transition: transform .12s ease, box-shadow .2s ease, background .15s ease; }
.w-mousebtn::before { content: "\1F5B1"; margin-right: 7px; }
.w-mousebtn.on::before { content: "\1F3A7"; }
.w-mousebtn:hover { transform: translateY(-1px); box-shadow: 0 0 26px var(--w-accent, #ff2bd6); }
.w-mousebtn.on { background: var(--w-accent, #ff2bd6); color: #0a0210; }
.world.w-mousefree { cursor: default; }
.w-port .pr { grid-template-columns: 1fr auto 56px; align-items: center; }
.w-port .prs { display: flex; gap: 4px; margin: 1px 0 6px; }
.w-port .pr-sell { flex: 1; padding: 4px 0; border-radius: 6px; border: 1px solid rgba(255,90,79,.75); background: rgba(255,90,79,.14); color: #ff8178; font: 800 10px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; cursor: pointer; text-align: center; }
.w-port .pr-sell:hover { background: #ff5a4f; color: #fff; }
@media (max-width: 760px) { .w-mousebtn { display: none; } }