/* WebSol - Roblox-style HUD. Everything themeable lives in the :root variables. */
:root {
  --ink: #e8f1f8; --dim: #8fa6b8; --panel: rgba(9, 20, 33, .93); --panel2: rgba(16, 33, 52, .96); --line: #3d6d93; --line2: #24455f;
  --accent: #5cc8ff; --good: #7bd88f; --bad: #ff6b6b; --warn: #ffd166; --coin: #ffd54f; --dark: #b388ff; --disc: #4fc3f7;
  --font: "Lucida Console", "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  --ui: min(1, calc(100vw / 1100));
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0a1420; color: var(--ink); font-family: var(--font); -webkit-tap-highlight-color: transparent; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; color: inherit; user-select: text; }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: #2f5878; border-radius: 4px; } ::-webkit-scrollbar-track { background: transparent; }
.dim { color: var(--dim); } .good { color: var(--good); } .bad { color: var(--bad); } .warn { color: var(--warn); } .small { font-size: 11px; } .up { text-transform: uppercase; letter-spacing: .06em; }

/* ---------------- world ---------------- */
#world { position: fixed; inset: 0; overflow: hidden; }
#world canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#bg { transition: filter 2s; image-rendering: pixelated; }
#sky, #night, #cyber { position: absolute; inset: 0; pointer-events: none; transition: opacity 2s, background 2s; }
#sky { opacity: .0; mix-blend-mode: multiply; }
#night { background: radial-gradient(ellipse at 50% 40%, rgba(30,40,120,.35), rgba(5,8,40,.78)); opacity: 0; mix-blend-mode: multiply; }
#cyber { opacity: 0; mix-blend-mode: screen; background:
  linear-gradient(rgba(0,255,157,.22) 1px, transparent 1px) 0 0 / 46px 46px, linear-gradient(90deg, rgba(0,255,157,.22) 1px, transparent 1px) 0 0 / 46px 46px,
  radial-gradient(ellipse at 50% 100%, rgba(0,255,157,.35), transparent 70%); }
body.biome-Cyberspace #cyber { opacity: 1; animation: cybergrid 6s linear infinite; }
@keyframes cybergrid { to { background-position: 0 46px, 46px 0, 0 0; } }
body.biome-Glitched #bg { animation: glitch 1.1s steps(2) infinite; }
@keyframes glitch { 0%{transform:translate(0,0)} 20%{transform:translate(-6px,2px) skewX(2deg);filter:hue-rotate(90deg)} 40%{transform:translate(5px,-3px)} 60%{transform:translate(-2px,0) skewX(-3deg);filter:hue-rotate(250deg) saturate(2)} 80%{transform:translate(3px,3px)} 100%{transform:translate(0,0)} }
body.biome-Null #bg { filter: grayscale(1) contrast(1.4) brightness(.55); }
body.biome-Dreamspace #bg { filter: hue-rotate(290deg) saturate(.8) brightness(1.2); }
body.biome-Singularity #bg { filter: brightness(.35) hue-rotate(250deg) saturate(1.4); }
body.biome-Starfall #bg { filter: brightness(.55) saturate(.9); }
body.biome-Heaven #bg { filter: brightness(1.2) saturate(.9) sepia(.25); }
body.biome-Hell #bg { filter: sepia(.6) saturate(2.4) hue-rotate(-30deg) brightness(.7); }
body.biome-Corruption #bg { filter: hue-rotate(35deg) saturate(1.3) brightness(.7); }
body.area-limbo #bg { filter: grayscale(1) brightness(.12) contrast(1.3); }
body.area-limbo #sky { opacity: .95 !important; }
body.area-limbo .tr-board, body.area-limbo .sidebar button { filter: grayscale(.8); }
.nametag { position: absolute; transform: translate(-50%, -100%); font-size: 11px; font-weight: bold; text-shadow: 0 1px 2px #000, 0 0 3px #000; white-space: nowrap; pointer-events: none; letter-spacing: .05em; }
.spot { position: absolute; transform: translate(-50%, -50%); width: 56px; height: 56px; border: 0; background: none; padding: 0; z-index: 3; transition: transform .15s; }
.spot:hover { transform: translate(-50%, -54%) scale(1.08); }
.spot .blk { position: absolute; inset: 8px; border-radius: 6px; border: 3px solid rgba(0,0,0,.45); display: grid; place-items: center; font-weight: bold; font-size: 20px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35); box-shadow: 0 6px 0 rgba(0,0,0,.25), inset 0 -6px 0 rgba(0,0,0,.18), 0 0 18px var(--c); background: var(--c); }
.spot .nametag { left: 50%; top: 6px; }
.spot .badge { position: absolute; right: 4px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--warn); color: #000; font-size: 11px; display: none; place-items: center; font-weight: bold; animation: bob 1s ease-in-out infinite; z-index: 2; }
.spot.has-badge .badge { display: grid; }
@keyframes bob { 50% { transform: translateY(-4px); } }
.pickup { position: absolute; transform: translate(-50%, -50%); width: 40px; height: 40px; border: 0; background: none; padding: 0; z-index: 4; animation: float 2s ease-in-out infinite; }
.pickup i { position: absolute; inset: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px rgba(255,255,255,.85), 0 0 18px 6px var(--c); display: grid; place-items: center; font-style: normal; font-weight: bold; font-size: 13px; color: #000; text-shadow: 0 0 2px #fff; }
@keyframes float { 50% { transform: translate(-50%, -62%); } }
#avatar { position: absolute; left: 50%; top: 52%; will-change: left, top; width: 22px; height: 30px; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; }
#avatar i { position: absolute; inset: 0; display: block; background: linear-gradient(#e6c9a0 0 30%, #2e6bd0 30% 72%, #2a3a55 72%); border-radius: 3px; box-shadow: 0 6px 6px rgba(0,0,0,.35), 0 0 var(--gs, 0px) calc(var(--gs, 0px) / 3) var(--gc, transparent); transition: box-shadow .6s; }

/* ---------------- HUD ---------------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud > * { pointer-events: auto; }
.panel { background: var(--panel); border: 2px solid var(--line); position: relative; }
.panel::before, .panel::after { content: ""; position: absolute; width: 8px; height: 8px; pointer-events: none; }
.panel::before { left: -4px; top: -4px; border-left: 3px solid var(--accent); border-top: 3px solid var(--accent); }
.panel::after { right: -4px; bottom: -4px; border-right: 3px solid var(--accent); border-bottom: 3px solid var(--accent); }
.tr-board { position: absolute; right: 12px; top: 12px; width: min(390px, 46vw); font-size: 14px; }
.tr-board .hd, .tr-board .rw { display: flex; justify-content: space-between; padding: 6px 14px; }
.tr-board .hd { border-bottom: 1px solid var(--line2); color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.tr-board .rw b { color: var(--ink); } .tr-board .rw .n { color: var(--accent); }
.sidebar { position: absolute; left: 10px; top: 84px; display: flex; flex-direction: column; gap: 6px; }
.sidebar button { position: relative; width: 46px; height: 46px; background: var(--panel); border: 2px solid var(--line); padding: 7px; display: grid; place-items: center; transition: transform .12s, border-color .12s, background .12s; }
.sidebar button:hover { transform: translateX(4px); border-color: var(--accent); background: var(--panel2); }
.sidebar button.on { border-color: var(--warn); }
.sidebar button svg { width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sidebar .lbl { position: absolute; left: 56px; top: 50%; transform: translateY(-50%); background: var(--panel); border: 1px solid var(--line); padding: 2px 8px; font-size: 13px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; }
.sidebar button:hover .lbl { opacity: 1; }
.sidebar .dot { position: absolute; right: -5px; top: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--warn); color: #000; font-size: 11px; font-weight: bold; display: none; place-items: center; }
.sidebar .dot.on { display: grid; }
.bl { position: absolute; left: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; width: 210px; }
.bl .ver { font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.5; text-shadow: 0 1px 2px #000; }
.bl .ver .bm { color: var(--accent); } .bl .ver .tod { font-size: 18px; letter-spacing: .08em; color: rgba(255,255,255,.55); }
.cur { display: flex; align-items: center; gap: 10px; padding: 3px 10px 3px 4px; font-size: 18px; font-weight: bold; letter-spacing: .05em; border: 2px solid var(--c); background: rgba(10,20,34,.92); }
.cur .ic { width: 26px; height: 26px; border-radius: 6px; background: var(--c); color: #000; display: grid; place-items: center; font-size: 14px; }
.cur span.v { flex: 1; text-align: left; color: var(--c); }
.roll-zone { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 10px; }
.tgl { width: 140px; height: 38px; margin-bottom: 14px; background: var(--panel); border: 2px solid var(--line); font-size: 14px; letter-spacing: .04em; transition: background .12s, border-color .12s, transform .08s; }
.tgl:hover { background: var(--panel2); } .tgl:active { transform: scale(.96); }
.tgl.on { border-color: var(--good); color: var(--good); }
.rollwrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.roll-btn { position: relative; width: 210px; height: 54px; background: linear-gradient(#27465e, #142a3d); border: 2px solid var(--line); font-size: 30px; font-weight: bold; letter-spacing: .12em; overflow: hidden; transition: transform .08s, border-color .15s, box-shadow .15s; }
.roll-btn:hover { border-color: var(--accent); box-shadow: 0 0 16px rgba(92,200,255,.45); }
.roll-btn:active { transform: scale(.96); }
.roll-btn .cd { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--accent); width: 0; }
.roll-btn.bonus { border-color: var(--warn); box-shadow: 0 0 20px rgba(255,209,102,.6); animation: pulse 0.9s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 34px rgba(255,209,102,.95); } }
.bonus-ct { font-size: 15px; color: var(--ink); letter-spacing: .1em; text-shadow: 0 1px 2px #000; }
.bonus-ct.next { color: var(--warn); }
.statline { font-size: 11px; color: rgba(255,255,255,.75); text-shadow: 0 1px 2px #000; background: rgba(8,16,28,.55); padding: 1px 8px; border: 0; }
.statline b { color: var(--accent); }
.buffs { position: absolute; right: 8px; bottom: 6px; max-width: min(640px, calc(50vw - 310px)); display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: 4px; align-items: flex-end; }
.buffs .total { position: absolute; left: -2px; bottom: 100%; font-size: 10px; color: rgba(255,255,255,.55); white-space: nowrap; }
.bf { position: relative; width: 56px; height: 62px; background: var(--panel); border: 2px solid var(--c, var(--line)); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 3px; font-size: 10px; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.bf .gem { position: absolute; left: 10px; top: 8px; right: 10px; height: 24px; background: var(--c); border-radius: 50% 50% 8px 8px; box-shadow: 0 0 10px var(--c); opacity: .9; }
.bf .t { position: absolute; top: 1px; left: 0; right: 0; text-align: center; font-size: 10px; text-shadow: 0 1px 2px #000; }
.bf .x { font-size: 12px; font-weight: bold; }
.bf.empty { border-color: var(--line2); opacity: .55; animation: none; }
.bf.empty::after { content: ""; position: absolute; inset: 14px; border: 3px solid #aab; border-radius: 50%; opacity: .6; }
.bf.empty::before { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; border-top: 3px solid #aab; transform: rotate(-45deg); opacity: .6; z-index: 1; }
.biome-chip { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); padding: 5px 16px; font-size: 13px; text-align: center; min-width: 190px; transition: opacity .3s; }
.biome-chip .bar { height: 4px; background: #1b2f42; margin-top: 4px; } .biome-chip .bar i { display: block; height: 100%; background: var(--c, var(--accent)); width: 100%; }

/* ---------------- stage / reveal ---------------- */
#stage { position: fixed; inset: 0; z-index: 8; pointer-events: none; display: grid; place-items: center; }
.reveal { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); text-align: center; width: min(92vw, 900px); pointer-events: auto; cursor: pointer; --c: #fff; --s: 1; }
.reveal .rolling { font-size: calc(30px * var(--s)); color: rgba(255,255,255,.7); letter-spacing: .12em; filter: blur(1.6px); text-shadow: 0 0 14px rgba(255,255,255,.4); }
.reveal .tierlbl { font-size: 14px; letter-spacing: .4em; text-transform: uppercase; color: var(--c); opacity: 0; animation: rise .5s .05s forwards; text-shadow: 0 0 10px var(--c); }
.reveal .nm { font-size: calc(var(--fs, 44px) * var(--s)); font-weight: bold; color: #fff; text-shadow: 0 0 6px var(--c), 0 0 22px var(--c), 0 3px 0 rgba(0,0,0,.5); letter-spacing: .04em; opacity: 0; animation: slam .55s cubic-bezier(.2,1.6,.4,1) forwards; word-break: break-word; }
.reveal .odds { margin-top: 6px; font-size: calc(18px * var(--s)); color: #fff; opacity: 0; animation: rise .5s .2s forwards; text-shadow: 0 2px 4px #000, 0 0 10px var(--c); }
.reveal .sub { margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.8); opacity: 0; animation: rise .5s .35s forwards; text-shadow: 0 1px 3px #000; }
.reveal .tag { display: inline-block; margin: 0 4px; padding: 1px 8px; border: 1px solid; font-size: 11px; letter-spacing: .15em; }
.reveal .tag.new { color: var(--good); } .reveal .tag.best { color: var(--warn); } .reveal .tag.bonus { color: var(--warn); }
.reveal .ring { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; border: 3px solid var(--c); opacity: 0; animation: ring 1.1s ease-out forwards; pointer-events: none; }
.reveal .rays { position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; margin: -450px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, var(--c) 0 4deg, transparent 4deg 16deg); -webkit-mask: radial-gradient(circle, #000 0, transparent 62%); mask: radial-gradient(circle, #000 0, transparent 62%); opacity: 0; animation: rays 3s linear forwards; pointer-events: none; z-index: -1; }
.reveal.out { animation: fadeout .45s forwards; }
.reveal.quick { top: 56%; width: auto; pointer-events: none; }
.reveal.quick .nm { font-size: 22px; animation: rise .15s forwards; } .reveal.quick .odds { font-size: 13px; animation: rise .15s forwards; } .reveal.quick .tierlbl, .reveal.quick .sub { display: none; }
@keyframes slam { 0% { transform: scale(2.6); opacity: 0; filter: blur(8px); } 60% { opacity: 1; filter: blur(0); } 100% { transform: scale(1); opacity: 1; } }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(70); opacity: 0; } }
@keyframes rays { 0% { opacity: 0; transform: rotate(0) scale(.6); } 15% { opacity: .55; } 100% { opacity: 0; transform: rotate(60deg) scale(1.2); } }
@keyframes fadeout { to { opacity: 0; transform: translate(-50%, -60%); } }
@keyframes shake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-9px, 4px); } 40% { transform: translate(8px, -6px); } 60% { transform: translate(-6px, -3px); } 80% { transform: translate(5px, 5px); } }
body.shake #world, body.shake #hud { animation: shake .5s; }
#flash { position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: 0; background: #fff; }
#flash.go { animation: flash .6s ease-out; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }
body.reduced-flash #flash { display: none; }
body.anim-off .reveal *, body.anim-off .reveal { animation-duration: .01s !important; animation-delay: 0s !important; }

/* ---------------- windows ---------------- */
#windows { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.win { position: absolute; left: 50%; top: 50%; width: min(960px, calc(100vw - 20px)); height: min(640px, calc(100vh - 20px)); transform: translate(-50%, -50%); pointer-events: auto; display: flex; flex-direction: column; animation: winin .18s ease-out; background: var(--panel); }
.win.closing { animation: winout .14s ease-in forwards; }
@keyframes winin { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } }
@keyframes winout { to { opacity: 0; transform: translate(-50%, -46%) scale(.96); } }
.win.narrow { width: min(620px, calc(100vw - 20px)); }
.win-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 2px solid var(--line2); background: var(--panel2); }
.win-head h2 { margin: 0; font-size: 17px; letter-spacing: .14em; text-transform: uppercase; }
.win-head h2 small { font-size: 11px; color: var(--dim); letter-spacing: .05em; margin-left: 10px; text-transform: none; }
.x { width: 30px; height: 30px; border: 2px solid var(--line); background: var(--panel); font-size: 16px; line-height: 1; transition: background .1s, border-color .1s; }
.x:hover { background: var(--bad); border-color: #fff; }
.win-body { flex: 1; overflow: auto; padding: 12px; min-height: 0; }
.win-foot { padding: 6px 12px; border-top: 1px solid var(--line2); font-size: 11px; color: var(--dim); }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tab { padding: 6px 12px; background: var(--panel2); border: 2px solid var(--line2); font-size: 13px; transition: border-color .1s, background .1s; }
.tab:hover { border-color: var(--line); } .tab.on { border-color: var(--accent); color: var(--accent); background: #0d2536; }
.tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.in, .sel { background: #08121d; border: 2px solid var(--line2); padding: 6px 9px; font-size: 13px; min-width: 0; }
.in:focus, .sel:focus { outline: none; border-color: var(--accent); }
.in.num { width: 110px; }
.btn { padding: 6px 14px; background: linear-gradient(#25455f, #17304a); border: 2px solid var(--line); font-size: 13px; transition: transform .08s, border-color .1s, filter .1s; }
.btn:hover:not(:disabled) { border-color: var(--accent); filter: brightness(1.15); } .btn:active:not(:disabled) { transform: scale(.95); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.go { background: linear-gradient(#2c7a46, #1b5232); border-color: #5fd08a; } .btn.danger { background: linear-gradient(#80302f, #531d1d); border-color: #ff7b7b; }
.btn.sm { padding: 3px 9px; font-size: 12px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.card { background: var(--panel2); border: 2px solid var(--line2); padding: 8px 10px; position: relative; transition: border-color .12s, transform .12s; }
.card:hover { border-color: var(--line); }
.card.locked { opacity: .55; } .card.unseen { background: #0a1520; }
.card .nm { font-weight: bold; font-size: 14px; display: flex; justify-content: space-between; gap: 6px; }
.card .meta { font-size: 11px; color: var(--dim); margin-top: 2px; }
.card .tier { display: inline-block; font-size: 10px; padding: 0 6px; border: 1px solid; letter-spacing: .08em; margin-right: 4px; }
.card .acts { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.card.eq { border-color: var(--warn); }
.row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--panel2); border: 2px solid var(--line2); margin-bottom: 6px; }
.row .main { flex: 1; min-width: 0; } .row .main b { font-size: 14px; }
.bar2 { height: 8px; background: #08121d; border: 1px solid var(--line2); margin-top: 3px; } .bar2 i { display: block; height: 100%; background: var(--accent); transition: width .3s; } .bar2.done i { background: var(--good); }
.ing { display: inline-block; margin: 2px 4px 0 0; padding: 1px 7px; border: 1px solid var(--line2); font-size: 11px; background: #08121d; } .ing.ok { border-color: #3e8a58; color: var(--good); } .ing.no { border-color: #8a3e3e; color: var(--bad); }
.sec { font-size: 12px; letter-spacing: .14em; color: var(--accent); text-transform: uppercase; margin: 14px 0 6px; border-bottom: 1px solid var(--line2); padding-bottom: 3px; }
.sec:first-child { margin-top: 0; }
.note { font-size: 11px; color: var(--dim); line-height: 1.5; }
.callout { border-left: 4px solid var(--warn); background: rgba(255,209,102,.07); padding: 8px 12px; font-size: 12px; line-height: 1.5; margin: 8px 0; }
.callout.info { border-color: var(--accent); background: rgba(92,200,255,.06); }
.npc-head { display: flex; gap: 12px; align-items: center; margin: 14px 0 8px; }
.npc-av { width: 46px; height: 46px; border-radius: 8px; display: grid; place-items: center; font-size: 22px; font-weight: bold; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.4); border: 3px solid rgba(0,0,0,.4); }
.say { font-style: italic; color: #cfe3f2; font-size: 13px; line-height: 1.55; padding: 8px 12px; background: #0a1a29; border-left: 4px solid var(--c, var(--accent)); margin: 6px 0; }
.qrow { padding: 8px 10px; background: var(--panel2); border: 2px solid var(--line2); margin-bottom: 8px; } .qrow.ready { border-color: var(--warn); } .qrow.done { opacity: .6; } .qrow.locked { opacity: .45; }
.obj { font-size: 12px; margin-top: 4px; display: flex; justify-content: space-between; gap: 8px; } .obj.done { color: var(--good); }
.stat-table { width: 100%; border-collapse: collapse; font-size: 13px; } .stat-table td { padding: 4px 8px; border-bottom: 1px solid var(--line2); } .stat-table td:last-child { text-align: right; color: var(--accent); }
.biome-card { border-left: 6px solid var(--c); }
.pill { display: inline-block; padding: 0 7px; font-size: 10px; border: 1px solid var(--line); margin-left: 6px; color: var(--dim); letter-spacing: .08em; text-transform: uppercase; }
.pill.warn { border-color: var(--warn); color: var(--warn); } .pill.good { border-color: var(--good); color: var(--good); }
.slider { display: flex; align-items: center; gap: 10px; margin: 8px 0; } .slider label { width: 190px; font-size: 13px; } .slider input[type=range] { flex: 1; accent-color: var(--accent); }
.hist { font-size: 11px; color: var(--dim); max-height: 120px; overflow: auto; }
.empty { text-align: center; color: var(--dim); padding: 30px 10px; font-size: 13px; }

/* ---------------- toasts, tooltip, modal ---------------- */
#toasts { position: fixed; right: 12px; bottom: 150px; z-index: 40; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { width: min(380px, calc(100vw - 24px)); background: rgba(8,16,26,.96); border: 2px solid var(--line); padding: 8px 14px 10px; text-align: center; animation: toastin .25s ease-out; }
.toast.out { animation: toastout .3s forwards; }
.toast h4 { margin: 0 0 4px; font-size: 16px; letter-spacing: .06em; } .toast p { margin: 0; font-size: 11px; color: #dbe8f2; }
.toast.good { border-color: var(--good); } .toast.warn { border-color: var(--warn); } .toast.bad { border-color: var(--bad); } .toast.disc { border-color: var(--disc); }
@keyframes toastin { from { transform: translateX(60px); opacity: 0; } } @keyframes toastout { to { transform: translateX(60px); opacity: 0; } }
#banner { position: fixed; left: 0; right: 0; top: 74px; z-index: 35; text-align: center; pointer-events: none; }
#banner .b { display: inline-block; padding: 8px 40px; font-size: 22px; letter-spacing: .3em; text-transform: uppercase; background: linear-gradient(90deg, transparent, rgba(0,0,0,.7) 20%, rgba(0,0,0,.7) 80%, transparent); text-shadow: 0 0 14px var(--c); color: #fff; animation: banner 4.2s forwards; }
#banner .b small { display: block; font-size: 11px; letter-spacing: .1em; color: #ccd; text-transform: none; }
@keyframes banner { 0% { opacity: 0; transform: translateY(-14px); } 8% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
#tooltip { position: fixed; z-index: 100; max-width: 320px; pointer-events: none; background: rgba(6,12,20,.98); border: 2px solid var(--line); padding: 7px 10px; font-size: 12px; line-height: 1.5; opacity: 0; transition: opacity .1s; }
#tooltip.on { opacity: 1; } #tooltip b { color: var(--accent); } #tooltip .l { display: flex; justify-content: space-between; gap: 14px; }
#modal { position: fixed; inset: 0; z-index: 90; display: none; place-items: center; background: rgba(0,5,12,.65); }
#modal.on { display: grid; animation: fadein .15s; } @keyframes fadein { from { opacity: 0; } }
.dlg { width: min(460px, calc(100vw - 24px)); background: var(--panel); border: 2px solid var(--accent); padding: 16px; }
.dlg h3 { margin: 0 0 8px; letter-spacing: .1em; text-transform: uppercase; font-size: 16px; } .dlg p { font-size: 13px; line-height: 1.55; } .dlg .acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
#fade { position: fixed; inset: 0; z-index: 80; background: #000; opacity: 0; pointer-events: none; transition: opacity .9s; color: #bbb; display: grid; place-items: center; font-size: 26px; letter-spacing: .5em; text-transform: uppercase; }
#fade.on { opacity: 1; }

/* ---------------- admin ---------------- */
.win.admin { border-color: #ff9a3c; } .win.admin .win-head { background: #2a1a0a; } .win.admin .win-head h2 { color: #ffb561; }
.admin-warn { background: rgba(255,154,60,.1); border-left: 4px solid #ff9a3c; padding: 6px 10px; font-size: 11px; margin-bottom: 10px; line-height: 1.5; }
.admin-list { max-height: 330px; overflow: auto; border: 2px solid var(--line2); }
.admin-item { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-bottom: 1px solid var(--line2); font-size: 12px; } .admin-item:hover { background: #0d2132; } .admin-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-item .have { color: var(--accent); width: 80px; text-align: right; }

/* ---------------- responsive ---------------- */
@media (max-width: 900px) {
  .buffs { max-width: 100vw; right: 4px; bottom: 112px; }
  .bf { width: 46px; height: 52px; }
  .tr-board { font-size: 11px; width: 170px; } .biome-chip { top: 56px; }
  .sidebar { top: auto; bottom: 168px; flex-direction: row; left: 6px; flex-wrap: wrap; max-width: 60vw; } .sidebar button { width: 40px; height: 40px; padding: 5px; } .sidebar .lbl { display: none; }
  .bl { width: 150px; bottom: 4px; } .cur { font-size: 12px; } .cur .ic { width: 18px; height: 18px; font-size: 10px; } .bl .ver .tod { font-size: 13px; }
  .roll-zone { bottom: 4px; gap: 6px; left: calc(50% + 60px); } .tgl { width: 78px; font-size: 11px; height: 32px; } .roll-btn { width: 130px; height: 46px; font-size: 22px; }
  .win { width: calc(100vw - 8px); height: calc(100vh - 8px); }
  .slider label { width: 120px; font-size: 12px; } .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  #toasts { bottom: 190px; }
}
@media (max-width: 560px) { .roll-zone { left: 50%; } .bl { display: none; } .tgl { width: 64px; } .roll-btn { width: 110px; } }
@media (max-height: 700px) and (min-width: 901px) { .sidebar button { width: 38px; height: 38px; padding: 5px; } .sidebar { gap: 4px; top: 72px; } .bl .ver { font-size: 10px; } .bl .ver .tod { font-size: 14px; } .bl { gap: 4px; } .cur { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .spot, .pickup, .bonus-ct { animation: none !important; } }

/* equipped-aura label above the avatar */
#avatar .al { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; text-align: center; line-height: 1.15; pointer-events: none; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.8); display: none; }
#avatar .al b { display: block; font-size: 11px; letter-spacing: .04em; color: var(--ac, #fff); }
#avatar .al small { display: block; font-size: 8px; color: #dbe8f2; opacity: .9; }
#avatar.has-aura .al { display: block; }
#avatar.walking i { animation: walkbob .28s ease-in-out infinite; }
@keyframes walkbob { 50% { transform: translateY(-2px); } }

/* travelling merchants */
.spot.merchant .beam { position: absolute; left: 50%; bottom: 50%; width: 22px; height: 70vh; transform: translateX(-50%); background: linear-gradient(to top, var(--c), transparent); opacity: .5; pointer-events: none; z-index: -1; border-radius: 11px 11px 0 0; }
.spot.merchant .blk { border-radius: 50%; }
#merchants { position: absolute; inset: 0; pointer-events: none; }
#merchants .spot { pointer-events: auto; }
.tracker { position: absolute; top: 12px; left: 84px; padding: 8px 10px; font-size: 12px; min-width: 190px; z-index: 5; }
.tracker .tr-row { display: flex; gap: 8px; align-items: center; justify-content: space-between; border-left: 3px solid var(--c); padding-left: 6px; margin-top: 4px; }

/* walk-up dialogue, prompt, portal and sanctuary */
#npcprompt { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); padding: 8px 16px; font-weight: bold; letter-spacing: .06em; color: #fff; cursor: pointer; z-index: 6; border: 1px solid var(--warn); animation: bob 1.2s ease-in-out infinite; }
#npcdlg { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(880px, calc(100% - 32px)); z-index: 7; padding: 14px; background: rgba(6, 12, 16, .92); border: 1px solid rgba(200, 220, 230, .55); }
#npcdlg .dlg-main { display: flex; gap: 18px; cursor: pointer; min-height: 150px; }
#npcdlg .portrait { width: 140px; height: 140px; flex: none; border: 2px solid rgba(255,255,255,.55); display: grid; place-items: center; font-size: 64px; font-weight: bold; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.35); }
#npcdlg .dlg-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#npcdlg .nm { font-size: 24px; font-weight: bold; letter-spacing: .04em; color: #fff; }
#npcdlg .rule { height: 1px; background: linear-gradient(to right, rgba(255,255,255,.8), transparent); margin: 6px 0 10px; }
#npcdlg .say-text { font-size: 15px; line-height: 1.5; color: #f2f6f8; flex: 1; }
#npcdlg .skip { font-size: 11px; color: #9aa8b0; margin-top: 6px; }
#npcdlg .dlg-btns { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
#npcdlg .dbtn { flex: 1; min-width: 120px; padding: 10px 8px; font-size: 20px; font-weight: bold; background: rgba(0,0,0,.45); color: #fff; border: 2px solid #fff; cursor: pointer; letter-spacing: .04em; }
#npcdlg .dbtn.go { color: #4cff6a; border-color: #2fc24b; }
#npcdlg .dbtn.warn { color: #ffc233; border-color: #d99b12; }
#npcdlg .dbtn.bad { color: #ff4d4d; border-color: #c02a2a; }
#npcdlg .dbtn:hover { background: rgba(255,255,255,.14); }
@media (max-width: 640px) { #npcdlg .portrait { width: 80px; height: 80px; font-size: 36px; } #npcdlg .dlg-main { min-height: 100px; } #npcdlg .dbtn { font-size: 15px; } }
.spot.portal .blk { border-radius: 50%; border-color: rgba(120,220,255,.9); background: conic-gradient(from 0deg, #1565c0, #4fc3f7, #e1f5fe, #4fc3f7, #1565c0); animation: spin 2.4s linear infinite; box-shadow: 0 0 26px #4fc3f7, 0 0 60px rgba(79,195,247,.6), inset 0 0 14px #0d47a1; }
@keyframes spin { to { transform: rotate(360deg); } }
#cave { position: absolute; inset: 0; display: none; pointer-events: none; background: radial-gradient(ellipse at 50% 38%, #123a5a 0%, #0a1f35 38%, #050d18 78%), #050d18; }
#cave::before, #cave::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 20% 30%, #9fd8ff, transparent), radial-gradient(2px 2px at 70% 20%, #cfe9ff, transparent), radial-gradient(3px 3px at 40% 70%, #7fc4ff, transparent), radial-gradient(2px 2px at 85% 60%, #bfe3ff, transparent), radial-gradient(2px 2px at 10% 80%, #8fd0ff, transparent); animation: spiritfloat 9s ease-in-out infinite alternate; opacity: .8; }
#cave::after { animation-duration: 13s; transform: scale(-1, 1); opacity: .5; }
@keyframes spiritfloat { from { transform: translateY(14px); } to { transform: translateY(-18px); } }
body.in-sanctuary #cave { display: block; }
#cine { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; text-align: center; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(0,10,25,.78), rgba(0,0,0,.92)); }
#cine .t { font-size: clamp(32px, 6vw, 72px); font-weight: bold; letter-spacing: .12em; color: #d9f1ff; text-shadow: 0 0 24px #4fc3f7; }
#cine .s { margin-top: 10px; font-size: clamp(14px, 2vw, 22px); color: #9fc7e0; letter-spacing: .2em; }
#cine.on { animation: cinefade 4.2s ease-in-out forwards; }
@keyframes cinefade { 0% { opacity: 0; } 18% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .spot.portal .blk, #cave::before, #cave::after, #npcprompt { animation: none !important; } }
#npcdlg .dbtn{white-space:nowrap;font-size:clamp(12px,1.5vw,16px);padding-left:6px;padding-right:6px}

/* ---------------- biome scenery ---------------- */
#trees { pointer-events: none; transform-origin: 50% 100%; }
body.biome-Windy #trees { animation: sway 3.4s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: skewX(-1.1deg); } 50% { transform: skewX(1.3deg); } }
#world.swap #bg, #world.swap #trees { animation: biomeswap .9s ease-out; }
@keyframes biomeswap { from { opacity: .15; } to { opacity: 1; } }
/* the old tint filters are gone for biomes that now have their own colours; these three still use one */
body.biome-Hell #bg, body.biome-Starfall #bg, body.biome-Corruption #bg, body.biome-Dreamspace #bg { filter: none; }
body.biome-Glitched #bg { filter: none; animation: glitch 1.1s steps(2) infinite; }
@keyframes glitch { 0%{transform:translate(0,0)} 20%{transform:translate(-5px,2px) skewX(1.5deg)} 40%{transform:translate(4px,-3px)} 60%{transform:translate(-2px,0) skewX(-2deg)} 80%{transform:translate(3px,2px)} 100%{transform:translate(0,0)} }
body.biome-Glitched #trees { animation: glitch 1.7s steps(2) infinite reverse; }
/* Cyberspace: blue grid */
#cyber { background: linear-gradient(rgba(41,182,246,.22) 1px, transparent 1px) 0 0 / 46px 46px, linear-gradient(90deg, rgba(41,182,246,.22) 1px, transparent 1px) 0 0 / 46px 46px, radial-gradient(ellipse at 50% 100%, rgba(41,182,246,.38), transparent 70%); }
/* Dreamspace: floating pink furniture */
#dream { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 2s; overflow: hidden; }
body.biome-Dreamspace #dream { opacity: .9; }
#dream .dz { position: absolute; filter: drop-shadow(0 0 14px #ff4fb8) drop-shadow(0 0 30px rgba(255,80,190,.6)); animation: dfloat 11s ease-in-out infinite; }
#dream .dz svg { width: 100%; height: auto; display: block; }
@keyframes dfloat { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-26px) rotate(5deg); } }
/* Singularity: a black hole in the top right that eats the particles */
#hole { position: absolute; right: 7vw; top: 20vh; width: min(210px, 26vw); aspect-ratio: 1; pointer-events: none; opacity: 0; transition: opacity 2s; }
body.biome-Singularity #hole { opacity: 1; }
#hole .core { position: absolute; inset: 31%; border-radius: 50%; background: #000; box-shadow: 0 0 30px 12px #000, 0 0 70px 22px rgba(179,136,255,.55); }
#hole .ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 8%, rgba(255,171,64,.9) 18%, rgba(255,255,255,.95) 26%, rgba(179,136,255,.9) 42%, transparent 55%, rgba(255,112,67,.7) 78%, transparent 92%);
  -webkit-mask: radial-gradient(circle, transparent 0 34%, #000 36% 62%, transparent 70%); mask: radial-gradient(circle, transparent 0 34%, #000 36% 62%, transparent 70%); filter: blur(1.5px); animation: holespin 5s linear infinite; transform: scaleY(.55) rotate(0deg); }
@keyframes holespin { to { transform: scaleY(.55) rotate(360deg); } }
/* server-chat style line */
#sysmsg { position: fixed; left: 14px; bottom: 250px; z-index: 40; padding: 5px 10px; background: rgba(0,0,0,.55); border-left: 3px solid #29b6f6; font-size: 13px; color: #ffd54f; opacity: 0; pointer-events: none; }
#sysmsg.on { animation: sysmsg 6s ease-out; }
@keyframes sysmsg { 0% { opacity: 0; transform: translateX(-12px); } 8%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* player / rolls board: fold by clicking the header */
.tr-board .hd { cursor: pointer; gap: 10px; align-items: center; } .tr-board .hd span:nth-child(2) { margin-left: auto; }
.tr-board .hd .fold { color: var(--accent); width: 12px; text-align: center; margin-left: 0; }
.tr-board.folded .rw { display: none; } .tr-board.folded .hd { border-bottom: 0; }

/* buff list: the label is a fold button, and the list stops before the Quick Roll button (it wraps upward instead) */
.buffs .total { background: rgba(0,0,0,.45); border: 0; padding: 1px 6px; cursor: pointer; pointer-events: auto; }
.buffs .total:hover { color: #fff; }
.buffs .total { font-size: 11px; color: rgba(255,255,255,.8); border: 1px solid var(--line2); }

/* ---------------- Glitched: the interface corrupts ---------------- */
body.gui-corrupt #hud, body.gui-corrupt .win, body.gui-corrupt #toasts, body.gui-corrupt #modal, body.gui-corrupt #banner { animation: guicorrupt .7s steps(1) both; }
body.gui-corrupt.gui-soft #hud, body.gui-corrupt.gui-soft .win, body.gui-corrupt.gui-soft #toasts, body.gui-corrupt.gui-soft #modal, body.gui-corrupt.gui-soft #banner { animation: none; }
@keyframes guicorrupt {
  0% { translate: 0 0; filter: none; } 10% { translate: -7px 2px; filter: hue-rotate(170deg) contrast(1.7) drop-shadow(4px 0 #f00) drop-shadow(-4px 0 #0ff); }
  22% { translate: 6px -3px; filter: invert(1) hue-rotate(40deg); } 34% { translate: -3px 5px; filter: contrast(2.4) saturate(3) drop-shadow(-5px 0 #f0f); }
  48% { translate: 9px 0; filter: hue-rotate(300deg) drop-shadow(5px 0 #f00); } 60% { translate: -8px -2px; filter: grayscale(1) contrast(2.2); }
  74% { translate: 4px 4px; filter: hue-rotate(90deg) saturate(4) drop-shadow(-4px 0 #0ff); } 88% { translate: -2px -1px; filter: contrast(1.5) drop-shadow(3px 0 #f00); } 100% { translate: 0 0; filter: none; }
}
#corrupt { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
#corrupt i { position: absolute; background: #ff1f1f; mix-blend-mode: screen; }
/* "<< SERVER INFO >>" notices */
.toast.server { display: flex; gap: 10px; align-items: center; text-align: left; background: rgba(28,0,0,.92); border: 2px solid #ff2b2b; color: #ff3b3b; box-shadow: 0 0 14px rgba(255,0,0,.35), inset 0 0 20px rgba(255,0,0,.12); position: relative; overflow: hidden; }
.toast.server .warn-ico { flex: none; width: 46px; height: 46px; border: 2px solid #ff2b2b; display: grid; place-items: center; background: rgba(255,0,0,.12); }
.toast.server .warn-ico i { font-style: normal; font-weight: bold; font-size: 24px; width: 0; height: 0; display: block; position: relative; }
.toast.server .warn-ico::before { content: ''; width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 24px solid #ff2b2b; position: absolute; }
.toast.server .warn-ico i { position: absolute; color: #200; font-size: 15px; width: auto; height: auto; margin-top: 6px; }
.toast.server h4 { color: #ff3b3b; text-align: center; letter-spacing: .12em; text-shadow: 0 0 6px #f00; }
.toast.server p { color: #ff5252; font-size: 11px; word-break: break-all; margin: 2px 0 0; }
.toast.server .si { flex: 1; min-width: 0; }
.toast.server.torn::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,20,20,.9) 22px 46px, transparent 46px 120px); -webkit-mask: linear-gradient(180deg, transparent 0 18%, #000 18% 62%, transparent 62%); mask: linear-gradient(180deg, transparent 0 18%, #000 18% 62%, transparent 62%); mix-blend-mode: screen; animation: tornflick .35s steps(2) infinite; }
@keyframes tornflick { 0% { background-position: 0 0; } 100% { background-position: 40px 0; } }

/* ---------- online players ---------- */
#peers { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.peer { position: absolute; width: 22px; height: 30px; transform: translate(-50%, -50%); transition: left .24s linear, top .24s linear; }
.peer i { position: absolute; inset: 0; display: block; background: linear-gradient(#e6c9a0 0 30%, #c0742b 30% 72%, #3a2a2a 72%); border-radius: 3px; box-shadow: 0 6px 6px rgba(0,0,0,.35), 0 0 10px 2px var(--pc, #8bc34a); opacity: .92; }
.peer .pn { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); white-space: nowrap; font-size: 10px; color: #fff; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,.8); }
.peer .pa { position: absolute; left: 50%; bottom: calc(100% + 16px); transform: translateX(-50%); white-space: nowrap; font-size: 9px; font-weight: 700; text-shadow: 0 1px 2px #000; }
#onlinebadge { position: fixed; left: 10px; top: 10px; z-index: 30; padding: 4px 10px; font-size: 11px; pointer-events: none; opacity: .85; }

/* ---------- online chat ---------- */
#chatbox { position: fixed; left: 10px; bottom: 190px; z-index: 31; width: min(340px, 60vw); pointer-events: none; }
#chatbox .log { display: flex; flex-direction: column; gap: 2px; }
#chatbox .cl { font-size: 12px; line-height: 1.3; padding: 2px 8px; background: rgba(8,12,18,.62); border-radius: 4px; color: #e8f1f8; word-break: break-word; transition: opacity 2.5s; }
#chatbox .cl b { color: #8bc34a; }
#chatbox .cl.me b { color: #4fc3f7; }
#chatbox .cl.old { opacity: 0; }
#chatinput { pointer-events: auto; margin-top: 6px; width: 100%; box-sizing: border-box; font: inherit; font-size: 12px; padding: 6px 8px; background: var(--panel2, #16202c); color: #fff; border: 1px solid var(--line, #35506a); border-radius: 4px; outline: none; }
.peer .pb, #avatar .pb { position: absolute; left: 50%; bottom: calc(100% + 30px); transform: translateX(-50%); max-width: 180px; width: max-content; padding: 3px 8px; font-size: 11px; line-height: 1.25; color: #111; background: rgba(255,255,255,.94); border-radius: 8px; opacity: 0; transition: opacity .25s; pointer-events: none; word-break: break-word; text-align: center; z-index: 5; }
.peer .pb.on, #avatar .pb.on { opacity: 1; }

.tr-board .others .rw { padding-top: 3px; padding-bottom: 3px; font-size: 13px; border-top: 1px solid var(--line2); }
.tr-board .others .rw b { color: #8bc34a; }
.tr-board.folded .others { display: none; }

#onlinebadge { pointer-events: auto; cursor: pointer; }
.tr-board .others { max-height: 42vh; overflow-y: auto; }
.tr-board .others .rw { gap: 8px; }
.tr-board .others .rw b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-board .others .au { color: var(--dim); font-size: 10px; align-self: center; white-space: nowrap; }