/* 《元素狂潮》舞台: 3D 画布 + 2D HUD 画布 + HTML 界面(HUD / 三选一 / 菜单 / 结算) */
.rogue-wrap{max-width:1400px;margin:0 auto;--gold:#ffd36a;--ink:#f4eeff;--mut:rgba(244,238,255,.62);--panel:rgba(16,10,32,.86);--line:rgba(180,150,255,.22);
  --common:#a9b2c3;--rare:#4ab0ff;--epic:#b76bff;--legend:#ffb52e;--evo:#ff4fa0}
.rogue-stage{position:relative;width:min(100%, calc((100vh - 100px) * 16 / 9));aspect-ratio:16/9;margin:0 auto;border-radius:18px;overflow:hidden;background:#0c0816;border:1px solid var(--line);box-shadow:0 12px 48px rgba(0,0,0,.7);user-select:none;-webkit-user-select:none;color:var(--ink);font-family:system-ui,"PingFang SC","Microsoft YaHei",sans-serif;touch-action:none}
html.game-full,html.game-full body{overflow:hidden}
html.game-full .rogue-stage{position:fixed;inset:0;z-index:50;width:100vw;max-width:none;height:100vh;height:100dvh;aspect-ratio:auto;margin:0;border:0;border-radius:0}
html.game-full .chat-fab{display:none}
.rogue-stage [hidden]{display:none !important}
.rg-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.rg-canvas--hud{pointer-events:none}
.rg-flash{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen}
.rogue-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 65%,rgba(20,12,40,.18) 100%)}
.rg-ic{width:1em;height:1em;fill:currentColor;flex:none}
.rg-muted{color:var(--mut);font-size:14px}
.rogue-stage kbd{display:inline-block;min-width:1.6em;padding:1px 6px;border-radius:6px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);font:700 12px/1.4 ui-monospace,monospace;color:var(--ink)}

/* ---------- 角落按钮(同骰子 / 德州)---------- */
.game-corner{display:flex;gap:8px;align-items:center}
.game-corner--br{position:absolute;right:14px;bottom:14px;z-index:3}
.rg-corner{bottom:auto;top:52px;right:14px;z-index:20} /* 在所有界面层之上, 菜单里也能点 */
.game-corner__btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:38px;height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:rgba(16,10,32,.75);color:var(--gold);font:inherit;font-weight:700;font-size:14px;text-decoration:none;cursor:pointer}
.game-corner__btn:hover{background:rgba(50,34,80,.9)}
.game-corner__btn:focus-visible,.rogue-stage button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- HUD ---------- */
.rg-hud{position:absolute;inset:0;pointer-events:none;z-index:2}
.rg-hud button{pointer-events:auto}
.rg-xp{position:absolute;left:0;right:0;top:0;height:7px;background:rgba(10,4,24,.8)}
.rg-xp i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3a8cff,#9a6aff,#ff7ad8);box-shadow:0 0 12px #9a6aff;transition:width .15s}
.rg-top{position:absolute;left:12px;right:12px;top:14px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.rg-left{display:flex;flex-direction:column;gap:6px;min-width:0}
.rg-hp{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:12px;background:var(--panel);border:1px solid var(--line);width:max-content}
.rg-lv{padding:3px 8px;border-radius:9px;background:linear-gradient(135deg,#5a3aff,#b04dff);font-size:12px;font-weight:700}
.rg-lv b{font-size:15px}
.rg-hp__bar{width:150px;height:10px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.rg-hp__bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff4a5a,#ff8a5a);transition:width .2s}
.rg-hp__t{font:700 12px/1 ui-monospace,monospace;color:var(--mut);min-width:70px}
.rg-slots,.rg-pslots,.rg-lvup__build{display:flex;gap:5px;flex-wrap:wrap}
.rg-slot{--el:#fff;position:relative;width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--el) 35%,transparent),rgba(14,8,28,.9));border:1.5px solid color-mix(in srgb,var(--el) 70%,transparent);color:var(--el);font-size:26px;box-shadow:0 0 10px color-mix(in srgb,var(--el) 35%,transparent);overflow:hidden}
.rg-slot::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55);transform-origin:bottom;transform:scaleY(var(--cd,0))}
.rg-slot svg{position:relative}
.rg-slot i{position:absolute;right:2px;bottom:1px;font:800 11px/1 system-ui;color:#fff;text-shadow:0 1px 2px #000;font-style:normal}
.rg-slot em{position:absolute;top:3px;width:6px;height:6px;border-radius:50%}
.rg-slot em.e{left:3px;background:var(--epic);box-shadow:0 0 6px var(--epic)}
.rg-slot em.l{left:11px;background:var(--legend);box-shadow:0 0 6px var(--legend)}
.rg-slot.is-evo{border-color:var(--evo);box-shadow:0 0 14px var(--evo)}
.rg-slot.is-empty,.rg-pslot.is-empty{background:rgba(14,8,28,.5);border:1px dashed rgba(255,255,255,.15);box-shadow:none}
.rg-pslot{position:relative;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:rgba(14,8,28,.85);border:1px solid rgba(255,211,106,.4);color:#ffe08a;font-size:18px}
.rg-pslot i{position:absolute;right:1px;bottom:0;font:800 10px/1 system-ui;color:#fff;font-style:normal;text-shadow:0 1px 2px #000}
.rg-center{position:absolute;left:50%;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
.rg-timer{font:800 24px/1 system-ui,"PingFang SC",sans-serif;letter-spacing:1px;text-shadow:0 2px 8px #000,0 0 18px rgba(154,106,255,.6)}
.rg-timer.is-boss{color:#ff6a5a;animation:rgPulse .8s infinite}
.rg-boss{display:flex;flex-direction:column;align-items:center;gap:4px;width:min(46vw,520px)}
.rg-boss b{font-size:14px;color:#ffb0a0;text-shadow:0 1px 4px #000;letter-spacing:2px}
.rg-boss__bar{width:100%;height:12px;border-radius:99px;background:rgba(10,4,20,.85);border:1px solid rgba(255,90,70,.6);overflow:hidden}
.rg-boss__bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff2a3a,#ff8a3a);box-shadow:0 0 12px #ff3a3a;transition:width .2s}
.rg-right{display:flex;gap:8px;align-items:center}
.rg-stat{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:10px;background:var(--panel);border:1px solid var(--line);font:700 15px/1 ui-monospace,monospace}
.rg-stat svg{width:16px;height:16px;fill:#d8c8ff}
.rg-stat--gold svg{fill:#ffc23a}
.rg-iconbtn{width:36px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:12px;cursor:pointer}
.rg-wave{position:absolute;left:50%;top:52px;transform:translateX(-50%);padding:4px 14px;border-radius:12px;background:var(--panel);border:1px solid var(--line);font-size:13px;white-space:nowrap}
.rg-wave b{color:var(--gold);font-size:15px}
.rg-wave.is-break{top:36%;padding:12px 28px;font-size:20px;background:rgba(16,10,32,.82);border-color:var(--gold);box-shadow:0 0 30px rgba(255,211,106,.35)}
.rg-wave.is-break b{font-size:34px;margin:0 4px}
.rg-boss{margin-top:30px}
.rg-actions{position:absolute;right:16px;bottom:16px;display:flex;gap:12px;align-items:flex-end}
.rg-actbtn{--k:1;position:relative;width:68px;height:68px;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:conic-gradient(rgba(255,255,255,.22) calc(var(--k) * 360deg),rgba(10,4,20,.7) 0);color:#fff;font:800 13px/1.1 system-ui;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;backdrop-filter:blur(4px)}
.rg-actbtn kbd{font-size:10px;padding:0 4px}
.rg-actbtn--ult{width:84px;height:84px;background:conic-gradient(#b04dff calc(var(--k) * 360deg),rgba(10,4,20,.7) 0)}
.rg-actbtn--ult.is-ready{border-color:var(--gold);box-shadow:0 0 22px #b04dff,0 0 40px rgba(255,211,106,.5);animation:rgPulse 1s infinite}
.rg-joy{position:absolute;z-index:4;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;border:2px solid rgba(255,255,255,.3);background:rgba(10,4,20,.3);pointer-events:none}
.rg-joy i{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:rgba(255,255,255,.35);box-shadow:0 0 12px rgba(180,150,255,.6)}
.rg-banner{position:absolute;left:50%;top:22%;transform:translateX(-50%);z-index:5;margin:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 28px;text-align:center;pointer-events:none;animation:rgBanner 2.6s ease forwards;background:linear-gradient(90deg,transparent,rgba(12,6,26,.88) 20%,rgba(12,6,26,.88) 80%,transparent)}
.rg-banner b{font-size:28px;letter-spacing:3px;text-shadow:0 0 16px currentColor}
.rg-banner span{font-size:14px;color:var(--mut)}
.rg-banner--boss b,.rg-banner--warn b{color:#ff6a5a}
.rg-banner--elite b{color:#ffa05a}
.rg-banner--evo b{color:#ff8ad8}
.rg-banner--win b,.rg-banner--ult b{color:var(--gold)}
@keyframes rgBanner{0%{opacity:0;transform:translateX(-50%) scale(1.4)}10%{opacity:1;transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0}}
@keyframes rgPulse{50%{filter:brightness(1.5)}}

/* ---------- 全屏界面层 ---------- */
.rg-screen{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;padding:20px;overflow:auto;background:radial-gradient(ellipse at center,rgba(40,20,90,.45),rgba(12,6,30,.78))}
.rg-screen--menu{background:linear-gradient(90deg,rgba(14,8,32,.85) 0%,rgba(14,8,32,.45) 42%,transparent 70%);justify-content:flex-start;align-items:stretch;overflow:hidden;padding:14px}
.rg-screen--loading{background:#0c0816}
.rg-loading{text-align:center;width:min(420px,80%)}
.rg-loading h2{font-size:34px;margin:0 0 16px;letter-spacing:6px}
.rg-loadbar{height:8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden;margin-bottom:12px}
.rg-loadbar i{display:block;height:100%;background:linear-gradient(90deg,#3a8cff,#b04dff,#ff7ad8);transition:width .2s}
.rg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;border-radius:12px;border:1px solid rgba(255,211,106,.6);background:linear-gradient(180deg,#ffd36a,#e89a20);color:#2a1400;font-family:inherit;font-weight:800;font-size:15px;line-height:1;cursor:pointer;box-shadow:0 4px 18px rgba(255,180,40,.3)}
.rg-btn .rg-ic{width:18px;height:18px}
.rg-btn:hover:not(:disabled){filter:brightness(1.1)}
.rg-btn:disabled{opacity:.4;cursor:not-allowed}
.rg-btn--ghost{background:rgba(30,20,56,.85);color:var(--ink);border-color:var(--line);box-shadow:none}
.rg-btn--danger{background:rgba(80,14,20,.85);color:#ffb0a0;border-color:rgba(255,90,70,.5);box-shadow:none}
.rg-btn--big{height:54px;padding:0 34px;font-size:19px;letter-spacing:2px}
.rg-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.rg-lvup__k{margin:0;font:800 13px/1 system-ui;letter-spacing:6px;color:var(--gold);text-align:center;text-shadow:0 0 12px rgba(255,211,106,.7)}

/* 三选一 */
.rg-lvup{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:980px;width:100%}
.rg-lvup h2{margin:0;font-size:30px;letter-spacing:2px;text-shadow:0 0 18px rgba(154,106,255,.8)}
.rg-lvup h2 small{font-size:14px;color:var(--mut);margin-left:8px}
.rg-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,260px));gap:18px;justify-content:center;width:100%}
.rg-card{--el:#ffd36a;--rc:var(--common);position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:330px;padding:28px 16px 16px;border-radius:18px;border:2px solid var(--rc);
  background:radial-gradient(circle at 50% 26%,color-mix(in srgb,var(--el) 32%,transparent),transparent 58%),linear-gradient(180deg,rgba(34,22,66,.97),rgba(14,8,30,.98));color:var(--ink);font:inherit;text-align:center;cursor:pointer;
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.5),0 0 22px color-mix(in srgb,var(--rc) 35%,transparent);transition:transform .15s,box-shadow .15s}
.is-enter .rg-card{animation:rgCardIn .45s cubic-bezier(.2,1.4,.4,1) both;animation-delay:var(--d)}
@keyframes rgCardIn{from{opacity:0;transform:translateY(40px) rotateX(50deg) scale(.8)}}
.rg-card:hover,.rg-card:focus-visible{transform:translateY(-8px) scale(1.03);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 18px 40px rgba(0,0,0,.6),0 0 36px color-mix(in srgb,var(--rc) 60%,transparent)}
.rg-card--rare{--rc:var(--rare)}
.rg-card--epic{--rc:var(--epic)}
.rg-card--legend{--rc:var(--legend);background:radial-gradient(circle at 50% 26%,color-mix(in srgb,var(--el) 32%,transparent),transparent 58%),linear-gradient(180deg,rgba(60,36,20,.97),rgba(22,10,14,.98))}
.rg-card--legend::before,.rg-card--evo::before{content:"";position:absolute;inset:-2px;border-radius:18px;padding:2px;background:conic-gradient(from var(--a,0deg),var(--rc),#fff6c0,var(--rc),#ff7ad8,var(--rc));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rgSpin 3s linear infinite;pointer-events:none}
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes rgSpin{to{--a:360deg}}
.rg-card--evo{--rc:var(--evo);background:radial-gradient(circle at 50% 26%,color-mix(in srgb,var(--el) 40%,transparent),transparent 60%),linear-gradient(180deg,rgba(70,16,56,.97),rgba(20,6,24,.98))}
.rg-card__tag{position:absolute;top:-1px;left:50%;transform:translateX(-50%);padding:3px 14px;border-radius:0 0 10px 10px;background:var(--rc);color:#120820;font:800 12px/1.2 system-ui;letter-spacing:2px}
.rg-card__key{position:absolute;top:8px;left:10px;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:rgba(255,255,255,.1);font:800 12px/1 ui-monospace,monospace;color:var(--mut)}
.rg-card__icon{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;font-size:56px;color:var(--el);background:radial-gradient(circle,color-mix(in srgb,var(--el) 28%,transparent),transparent 70%);filter:drop-shadow(0 0 12px var(--el))}
.rg-card__title{font-size:22px;font-weight:800;letter-spacing:1px}
.rg-card__sub{font-size:13px;color:var(--rc);font-weight:700}
.rg-card__desc{font-size:14px;line-height:1.55;color:#e6dcff;flex:1}
.rg-stats{display:flex;flex-direction:column;gap:2px;margin-top:8px;font-size:12.5px;color:var(--mut);text-align:left;padding:6px 10px;border-radius:10px;background:rgba(0,0,0,.25)}
.rg-stats b{color:#fff}
.rg-kill{margin-top:3px;color:#ffb0a0}
.rg-kill.is-up{color:#8affb0;font-weight:700}
.rg-kill.is-up b{color:#8affb0}
.rg-rare{color:var(--rare)}
.rg-card__hint{font-size:12px;line-height:1.4;color:#ff9ad8;padding:5px 8px;border-radius:8px;background:rgba(255,79,160,.1);border:1px dashed rgba(255,79,160,.4)}
.rg-card.is-locked{outline:2px dashed var(--gold);outline-offset:4px}
.is-picked .rg-card:not(.is-chosen){opacity:0;transform:scale(.85);transition:all .3s}
.rg-card.is-chosen{transform:scale(1.12);box-shadow:0 0 60px var(--el),0 0 0 3px #fff;transition:all .3s}
.rg-locks{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,260px));gap:18px;justify-content:center;width:100%}
.rg-lock{justify-self:center;display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:99px;border:1px solid var(--line);background:rgba(16,10,32,.7);color:var(--mut);font-family:inherit;font-weight:600;font-size:12px;line-height:1.4;cursor:pointer}
.rg-lock .rg-ic{width:13px;height:13px}
.rg-lock.is-on{color:var(--gold);border-color:var(--gold)}
.rg-lvup__foot{display:flex;align-items:center;gap:14px}
.rg-lvup__build{justify-content:center;opacity:.85}

/* 对话框(商店 / 神秘 / 暂停 / 祭坛 / 图鉴)*/
.rg-dialog{width:min(760px,100%);padding:24px;border-radius:20px;background:var(--panel);border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:12px;align-items:center;max-height:100%;overflow:auto}
.rg-dialog--wide{width:min(1100px,100%);align-items:stretch}
.rg-dialog--wide>.rg-btn{align-self:center}
.rg-dialog h2{margin:0;font-size:24px;text-align:center}
.rg-dialog h2 small{font-size:15px;color:var(--gold);display:inline-flex;align-items:center;gap:4px;margin-left:8px}
.rg-dialog h3{margin:8px 0 0;font-size:15px;color:var(--gold);letter-spacing:2px}
.rg-dialog h3 small{color:var(--mut);font-weight:400;letter-spacing:0;margin-left:8px}
.rg-goldtxt{color:#ffc23a}
.rg-shop,.rg-mystery{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;width:100%}
.rg-shopitem,.rg-myst,.rg-perm,.rg-char,.rg-map{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;border-radius:14px;border:1px solid var(--line);background:rgba(30,20,56,.8);color:var(--ink);font:inherit;text-align:center;cursor:pointer;transition:transform .12s,border-color .12s}
.rg-shopitem:hover:not(:disabled),.rg-myst:hover,.rg-perm:hover:not(:disabled),.rg-char:hover,.rg-map:hover:not(:disabled){transform:translateY(-3px);border-color:var(--gold)}
.rg-shopitem:disabled,.rg-perm:disabled{opacity:.45;cursor:not-allowed}
.rg-shopitem .rg-ic,.rg-myst .rg-ic,.rg-perm .rg-ic{width:36px;height:36px;color:var(--gold)}
.rg-shopitem span,.rg-perm span{font-size:12px;color:var(--mut)}
.rg-shopitem em,.rg-perm em{display:inline-flex;align-items:center;gap:4px;font-style:normal;font-weight:800;color:#ffc23a}
.rg-shopitem em .rg-ic,.rg-perm em .rg-ic{width:14px;height:14px}
.rg-myst{padding:18px 14px;gap:8px}
.rg-myst .rg-ic{color:#c08cff}
.rg-myst .g{font-size:13px;color:#8affb0}
.rg-myst .b{font-size:13px;color:#ff9a8a}
.rg-perma{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.rg-perm b small{color:var(--mut);font-weight:400}

/* 伤害统计 */
.rg-dmg{width:100%;display:flex;flex-direction:column;gap:5px}
.rg-dmgrow{display:grid;grid-template-columns:130px 1fr 110px;align-items:center;gap:10px;font-size:13px}
.rg-dmgrow__n{display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}
.rg-dmgrow__n .rg-ic{width:16px;height:16px;color:var(--gold)}
.rg-dmgrow__bar{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.rg-dmgrow__bar i{display:block;height:100%;border-radius:99px}
.rg-dmgrow__v{text-align:right;font-family:ui-monospace,monospace}
.rg-dmgrow__v small{color:var(--mut)}

/* 结算 */
.rg-result{width:min(820px,100%);padding:26px;border-radius:22px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:14px;align-items:center;max-height:100%;overflow:auto}
.rg-result h2{margin:0;font-size:32px;letter-spacing:2px}
.is-win .rg-result h2{color:var(--gold);text-shadow:0 0 24px rgba(255,211,106,.7)}
.rg-stats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;width:100%}
.rg-stats-grid div{display:flex;flex-direction:column;align-items:center;padding:10px;border-radius:12px;background:rgba(255,255,255,.05)}
.rg-stats-grid b{font:800 22px/1.2 ui-monospace,monospace}
.rg-stats-grid span{font-size:12px;color:var(--mut)}
.rg-souls{display:flex;align-items:center;gap:8px;font-size:16px;padding:10px 18px;border-radius:14px;background:linear-gradient(90deg,rgba(90,58,255,.25),rgba(176,77,255,.25));border:1px solid rgba(176,77,255,.5)}
.rg-souls .rg-ic{width:24px;height:24px;color:#c8a0ff}
.rg-souls b{font-size:22px;color:#e0c8ff}
.rg-souls small{color:var(--mut);margin-left:8px}
.rg-unlock{padding:6px 16px;border-radius:99px;background:rgba(255,211,106,.15);color:var(--gold);font-weight:800}
.rg-result__build{display:flex;flex-direction:column;gap:6px;align-items:center}
.rg-result h3,.rg-dmg h3{margin:0;font-size:14px;color:var(--gold);letter-spacing:2px;text-align:center}

/* 主菜单 */
.rg-menu{display:flex;flex-direction:column;gap:10px;width:min(460px,100%);height:100%;min-height:0;padding:0 6px}
.rg-menu__scroll{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px;padding-right:6px;overscroll-behavior:contain}
.rg-menu__foot{flex:none;display:flex;flex-direction:column;gap:8px}
.rg-menu__title h1{margin:2px 0;font-size:40px;line-height:1;letter-spacing:8px;background:linear-gradient(180deg,#fff6d8,#ffd36a 45%,#ff7ad8);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(255,122,216,.45))}
.rg-menu__title .rg-lvup__k{text-align:left}
.rg-menu h3{margin:4px 0 0;font-size:13px;letter-spacing:3px;color:var(--gold)}
.rg-chars{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.rg-char{padding:6px 4px;gap:2px}
.rg-char .rg-ic{width:22px;height:22px;color:#c8b0ff}
.rg-char b{font-size:11px;line-height:1.2}
.rg-char span{font-size:10px;color:var(--mut)}
.rg-char.is-on,.rg-map.is-on{border-color:var(--gold);background:rgba(80,56,20,.55);box-shadow:0 0 18px rgba(255,211,106,.25)}
.rg-char.is-locked{opacity:.6}
.rg-trait{margin:0;font-size:12px;line-height:1.5;color:var(--mut);padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.04)}
.rg-trait b{color:var(--ink)}
.rg-maps{display:flex;flex-direction:column;gap:6px}
.rg-map{--c:#8f7cff;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline;text-align:left;padding:6px 10px;gap:0 10px;border-left:4px solid var(--c)}
.rg-map b{font-size:14px}
.rg-map span{font-size:11px;color:var(--mut);flex-basis:100%;line-height:1.4}
.rg-map em{font-style:normal;font-size:11px;color:var(--gold);order:-0}
.rg-map:disabled{opacity:.4;cursor:not-allowed}
.rg-menu .rg-btn--big{width:100%;height:48px}
.rg-menu .rg-row{justify-content:flex-start;margin-top:0}

/* 图鉴 */
.rg-codex{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
.rg-codex--react{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.rg-codex--react div{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);font-size:13px;line-height:1.5}
.rg-codex--react b{display:block;font-size:16px}
.rg-codex--p{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.rg-cx{--el:var(--gold);display:flex;gap:10px;padding:12px;border-radius:12px;background:rgba(255,255,255,.04);border-left:3px solid var(--el)}
.rg-cx>.rg-ic{width:34px;height:34px;color:var(--el);flex:none}
.rg-cx b small{color:var(--mut);font-weight:400}
.rg-cx p{margin:4px 0 0;font-size:12px;line-height:1.5;color:var(--mut)}
.rg-cx__evo b{color:#ff9ad8}
.rg-cx__mod em{font-style:normal;font-size:11px;padding:0 5px;border-radius:4px;margin-right:4px;color:#120820}
.rg-cx__mod em.e{background:var(--epic)}
.rg-cx__mod em.l{background:var(--legend)}
.rg-help{margin:0;padding-left:20px;line-height:2;font-size:14px}
.rg-noscript{position:absolute;inset:0;display:grid;place-items:center;margin:0}

/* 页面上的玩法说明(全屏时被舞台盖住)*/
.rogue-wrap .dice-rules{margin:14px auto 0;max-width:900px;padding:12px 16px;border-radius:14px;background:rgba(20,12,36,.6);border:1px solid var(--line);color:var(--mut);font-size:14px;line-height:1.7}
.rogue-wrap .dice-rules summary{cursor:pointer;color:var(--gold);font-weight:700}

@media (max-width: 760px), (max-height: 520px){
  .rg-top{left:6px;right:6px;top:10px}
  .rg-hp__bar{width:90px}
  .rg-slot{width:32px;height:32px;font-size:20px}
  .rg-pslot{width:22px;height:22px;font-size:14px}
  .rg-timer{font-size:22px}
  .rg-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .rg-card{min-height:240px;padding:22px 8px 10px}
  .rg-card__icon{width:56px;height:56px;font-size:38px}
  .rg-card__title{font-size:16px}
  .rg-card__desc{font-size:12px}
  .rg-card__hint{display:none}
  .rg-locks{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .rg-lvup__build{display:none}
  .rg-menu__title h1{font-size:36px}
  .rg-stats-grid{grid-template-columns:repeat(3,1fr)}
  .rg-actbtn{width:58px;height:58px}
  .rg-actbtn--ult{width:70px;height:70px}
  .rg-dmgrow{grid-template-columns:90px 1fr 80px}
  .rg-screen--menu{background:rgba(6,2,14,.82)}
}
@media (prefers-reduced-motion: reduce){
  .rg-card,.is-enter .rg-card,.rg-banner,.rg-actbtn--ult.is-ready,.rg-timer.is-boss{animation:none !important;transition:none}
}

/* 视角面板 */
.rg-iconbtn--wide{width:auto;padding:0 10px;font-weight:700}
.rg-campanel{position:absolute;right:12px;top:96px;z-index:8;width:min(320px,calc(100% - 24px));padding:12px 14px;border-radius:14px;background:rgba(16,10,32,.92);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px;font-size:13px}
.rg-campanel__head{display:flex;justify-content:space-between;align-items:center}
.rg-camrow{display:flex;flex-direction:column;gap:4px}
.rg-camrow span{display:flex;justify-content:space-between;color:var(--mut)}
.rg-camrow em{font-style:normal;color:var(--gold);font-family:ui-monospace,monospace}
.rg-camrow input{width:100%;accent-color:#ffd36a}
.rg-campanel .rg-row{margin-top:4px}
.rg-campanel .rg-btn{height:32px;padding:0 12px;font-size:13px}