/* Kuroloot hero game lobby v2 (owner 06.11.2026): fullscreen, every part is a screen inside the game. Variant A night of rpg/preview-v3.html.
   Prefix op-rp-, animations opu-rp-*. Also used by the gem profile (gems-uprofile.html) */
body.op-rp-full{overflow:hidden;background:#09090b}
body.op-rp-full #op-nav,body.op-rp-full .op-rfoot,body.op-rp-full footer,body.op-rp-full .op-kl-tabs{display:none!important}
body.op-rp-full .op-rp-screen{position:fixed;inset:0;aspect-ratio:auto;width:100vw;height:100vh;height:100dvh;min-height:0;box-shadow:none;z-index:1040}

.op-rp{--rp-sky1:#1b2a6b;--rp-sky2:#3a2a8a;--rp-ground:#2a1f5a;--rp-accent:#ffd84a;--rp-ink:#0b0b14;--rp-panel:#24204a;--rp-panel2:#332d66;
  font:700 13px/1.3 Silkscreen,monospace;color:#fff;padding-top:12px;padding-bottom:24px}
.op-rp img,.op-rp canvas{image-rendering:pixelated}
.op-rp a{color:inherit;text-decoration:none}
.op-rp-px{position:relative;background:var(--rp-panel);color:#fff;box-shadow:0 0 0 3px var(--rp-ink),0 6px 0 3px var(--rp-ink)}
.op-rp-hi{background:var(--rp-accent);color:var(--rp-ink)}
.op-rp-btn{display:grid;place-items:center;gap:2px;border:0;cursor:pointer;font:700 11px Silkscreen,monospace;text-transform:uppercase;padding:8px 6px;text-align:center}
.op-rp-btn:active,.op-rp-mode:active{transform:translateY(4px);box-shadow:0 0 0 3px var(--rp-ink),0 2px 0 3px var(--rp-ink)}
.op-rp-btn:disabled{opacity:.5;cursor:default;transform:none}
.op-rp-pi{width:22px;height:22px;display:block}
.op-rp-pi.op-rp-sm{display:inline-block;width:10px;height:10px;vertical-align:-1px}
.op-rp-dot{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;padding:0 4px;display:grid;place-items:center;background:#ff3b4f;color:#fff;font-size:11px;box-shadow:0 0 0 3px var(--rp-ink)}

.op-rp-screen{position:relative;overflow:hidden;aspect-ratio:16/9;min-height:460px;background:linear-gradient(var(--rp-sky1),var(--rp-sky2) 62%,var(--rp-ground) 62%);box-shadow:0 0 0 3px #000}
.op-rp-screen:before{content:"";position:absolute;left:0;right:0;top:62%;height:6px;background:rgba(0,0,0,.25)}
.op-rp-sky{position:absolute;inset:0 0 40% 0;background:radial-gradient(2px 2px at 12% 30%,#fff 99%,transparent),radial-gradient(2px 2px at 30% 12%,#fff 99%,transparent),radial-gradient(2px 2px at 64% 22%,#fff 99%,transparent),radial-gradient(2px 2px at 82% 40%,#fff 99%,transparent),radial-gradient(2px 2px at 47% 44%,#fff 99%,transparent);opacity:.5}
.op-rp-moon{position:absolute;right:22%;top:16%;width:34px;height:34px;background:#fff6c8;box-shadow:0 0 0 3px #e9dc9a}
.op-rp-bar{position:absolute;left:12px;right:12px;top:12px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;z-index:2}
.op-rp-me{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;min-width:0}
.op-rp-me img{width:40px;height:40px;background:var(--rp-panel2)}
.op-rp-me b{display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-rp-me small{display:block;font-size:10px;color:var(--rp-accent)}
.op-rp-me i{font-style:normal}
.op-rp-cur{display:flex;gap:14px}
.op-rp-cur .op-rp-px{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 4px;font-size:13px;white-space:nowrap}
.op-rp-cur img{width:22px;height:22px}
.op-rp-cur i{font-style:normal}
.op-rp-en{padding-left:8px!important}.op-rp-en b{color:var(--rp-accent)}
.op-rp-timer{font-size:9px;color:#a4a4b2;margin-left:4px}
.op-rp-left,.op-rp-right{position:absolute;top:78px;display:grid;gap:14px;width:96px;z-index:2}
.op-rp-left{left:12px}.op-rp-right{right:12px}
.op-rp-left span:first-child,.op-rp-right span:first-child{font-size:16px}
.op-rp-stage{position:absolute;left:50%;bottom:24%;transform:translateX(-50%);display:grid;justify-items:center}
.op-rp-stage img{width:min(26vw,220px);height:auto;position:relative;z-index:1}
.op-rp-plate{width:min(30vw,250px);height:22px;margin-top:-14px;background:rgba(0,0,0,.35)}
.op-rp-hname{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px 12px;white-space:nowrap}
.op-rp-pow{display:flex;align-items:center;gap:6px;font-size:11px}
.op-rp-pow i{font-style:normal}
.op-rp-pow em,.op-rp-xpbar{display:inline-block;width:70px;height:8px;background:rgba(0,0,0,.4)}
.op-rp-pow em b,.op-rp-xpbar b{display:block;height:100%;background:#5fd36a}
.op-rp-team{position:absolute;left:12px;bottom:12px;display:flex;gap:10px}
.op-rp-slot{width:52px;height:52px;display:grid;place-items:center;box-shadow:0 0 0 3px var(--rp-ink),0 5px 0 3px var(--rp-ink)}
.op-rp-slot img{width:40px;height:40px}
.op-rp-empty{background:rgba(0,0,0,.35);color:rgba(255,255,255,.35);font-size:20px}
.op-rp-play{position:absolute;right:12px;bottom:12px;display:flex;gap:12px;align-items:stretch}
.op-rp-mode{display:grid;align-content:center;gap:2px;padding:6px 10px;border:0;cursor:pointer;font:700 10px Silkscreen,monospace;text-align:left}
.op-rp-mode b{font-size:13px;display:block;max-width:190px}
.op-rp-mode small{color:#a4a4b2}
.op-rp-go{font-size:24px;padding:10px 34px}
.op-rp-go small{font-size:10px}
.op-rp-err{position:absolute;left:50%;top:70px;transform:translateX(-50%);margin:0;padding:6px 12px;background:#ff3b4f;box-shadow:0 0 0 3px var(--rp-ink);z-index:3;white-space:nowrap}

/* overlays */
.op-rp-ov{position:fixed;inset:0;z-index:1050;display:grid;place-items:start center;padding:16px;overflow:auto;background:linear-gradient(#141b44,#231b52 70%,#1a1540)}
.op-rp-ov:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(2px 2px at 10% 20%,#fff 99%,transparent),radial-gradient(2px 2px at 80% 12%,#fff 99%,transparent),radial-gradient(2px 2px at 60% 70%,#fff 99%,transparent),radial-gradient(2px 2px at 25% 85%,#fff 99%,transparent);opacity:.35}
.op-rp-ov[hidden]{display:none}
.op-rp-box{position:relative;width:min(900px,100%);margin:8px 0 24px;padding:14px;background:var(--rp-panel)}
.op-rp-boxh{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;font-size:16px;text-transform:uppercase}
.op-rp-boxh>b{flex:1;text-align:center}
.op-rp-boxh-r{display:flex;align-items:center;gap:6px;font-size:12px}.op-rp-boxh-r img{width:18px;height:18px}.op-rp-boxh-r i{font-style:normal}
.op-rp-boxh span{display:flex;gap:10px}
.op-rp-x{padding:8px 12px}
.op-rp-note{color:#a4a4b2;font-weight:400;margin:12px 0 0;line-height:1.5}
.op-rp-heroes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.op-rp-hc{display:grid;justify-items:center;align-content:start;gap:3px;padding:8px 4px;background:var(--rp-panel2);box-shadow:0 0 0 3px var(--rp-ink),0 5px 0 3px var(--rp-ink);text-align:center}
.op-rp-hc img{width:56px;height:56px}
.op-rp-hc b{font-size:11px}.op-rp-hc small{font-size:10px;color:var(--rp-accent)}
.op-rp-st{font-size:9px;color:#c9c9d6}
.op-rp-soon{background:rgba(0,0,0,.3)}
.op-rp-q{width:56px;height:56px;display:grid;place-items:center;font-size:26px;color:rgba(255,255,255,.3)}
.op-rp-soon small{color:#a4a4b2}
.op-rp-top{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.op-rp-top li{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:6px 10px;background:var(--rp-panel2)}
.op-rp-top li span:first-child{color:var(--rp-accent)}
.op-rp-top a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-rp-top small{color:#a4a4b2}
.op-rp-areas{display:grid;gap:10px}
.op-rp-area{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;background:var(--rp-panel2)}
.op-rp-stg{display:flex;gap:8px}
.op-rp-stg button{width:30px;height:30px;border:0;font:700 11px Silkscreen,monospace;cursor:pointer;color:#fff;background:#1b1838;box-shadow:inset 0 -3px 0 #0b0b14}
.op-rp-stg .op-rp-done{background:#5fd36a;color:var(--rp-ink)}
.op-rp-stg .op-rp-now{background:#ff9d2e;color:var(--rp-ink);box-shadow:0 0 0 2px #ffd9a0}
.op-rp-stg .op-rp-lock{opacity:.45;cursor:default}
.op-rp-stg .op-rp-boss.op-rp-lock,.op-rp-stg .op-rp-boss:not(.op-rp-done):not(.op-rp-now){background:#7a2b2b}
.op-rp-stg .op-rp-sel{outline:3px solid #fff;outline-offset:1px}

/* fight */
.op-rp-fightov .op-rp-box{width:min(820px,100%)}
.op-rp-arena{position:relative;height:250px;overflow:hidden;background:linear-gradient(var(--rp-sky1),var(--rp-sky2) 55%,var(--rp-ground) 55%);box-shadow:0 0 0 3px var(--rp-ink)}
.op-rp-side{position:absolute;bottom:16px;display:flex;gap:10px;align-items:end}
.op-rp-l{left:20px}.op-rp-r{right:16px;flex-direction:row-reverse}
.op-rp-u{position:relative;display:grid;justify-items:center;gap:4px;transition:transform .16s ease-out,opacity .3s}
.op-rp-u img{width:96px;height:96px}
.op-rp-u canvas{width:56px;height:56px}
.op-rp-u.op-rp-bossu canvas{width:96px;height:96px}
.op-rp-u small{font-size:9px;color:#dcdce3;white-space:nowrap}
.op-rp-hp{width:56px;height:7px;background:var(--rp-ink);padding:1px}
.op-rp-hp b{display:block;height:100%;background:#5fd36a;transition:width .25s}
.op-rp-r .op-rp-hp b{background:#ff4f6d}
.op-rp-u.op-rp-ko{opacity:.2}
.op-rp-l .op-rp-u.op-rp-act{transform:translateX(26px)}
.op-rp-r .op-rp-u.op-rp-act{transform:translateX(-26px)}
.op-rp-u.op-rp-hit{animation:opu-rp-shake .22s steps(2) 1}
@keyframes opu-rp-shake{50%{transform:translateX(5px)}}
.op-rp-num{position:absolute;top:-6px;left:50%;font-size:16px;color:var(--rp-accent);text-shadow:2px 2px 0 var(--rp-ink);pointer-events:none;animation:opu-rp-up .8s ease-out forwards}
.op-rp-num.op-rp-crit{font-size:22px;color:#ff9d2e}
@keyframes opu-rp-up{from{transform:translate(-50%,0);opacity:1}to{transform:translate(-50%,-34px);opacity:0}}
.op-rp-say{position:absolute;left:50%;top:14px;transform:translateX(-50%);padding:4px 10px;background:var(--rp-ink);font-size:12px;white-space:nowrap;opacity:0;transition:opacity .15s}
.op-rp-say.op-rp-on{opacity:1}
.op-rp-result{margin-top:14px;text-align:center}
.op-rp .op-rp-result h2{font:700 30px/1.2 Silkscreen,monospace!important;letter-spacing:0;margin:4px 0 10px}
.op-rp .op-rp-result.op-rp-won h2{color:var(--rp-accent)}
.op-rp .op-rp-result.op-rp-lost h2{color:#ff4f6d}
.op-rp-rew{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:16px}
.op-rp-rew span{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--rp-panel2)}
.op-rp-rew img{width:18px;height:18px}
.op-rp-ract{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.op-rp-ract .op-rp-btn{padding:10px 18px;font-size:13px}
@media (prefers-reduced-motion:reduce){.op-rp-u.op-rp-hit{animation:none}}

@media (max-width:760px){
  .op-rp-screen{aspect-ratio:auto;height:620px;min-height:0}
  body.op-rp-full .op-rp-screen{height:100dvh}
  .op-rp-left,.op-rp-right{top:72px;width:72px;gap:12px}
  .op-rp-btn{font-size:9px;padding:6px 4px}.op-rp-pi{width:18px;height:18px}
  .op-rp-cur{gap:8px}.op-rp-boxc{display:none!important}.op-rp-cur .op-rp-px{font-size:11px}.op-rp-cur img{width:16px;height:16px}
  .op-rp-timer{display:none}
  .op-rp-me img{width:30px;height:30px}.op-rp-me small{font-size:9px}.op-rp-me b{max-width:90px}
  .op-rp-stage{bottom:36%}.op-rp-stage img{width:150px}.op-rp-plate{width:170px}
  .op-rp-hname{bottom:26%}.op-rp-moon{right:30%;top:22%}
  .op-rp-team{bottom:96px;left:50%;transform:translateX(-50%)}
  .op-rp-play{left:12px;right:12px}.op-rp-mode{flex:1}.op-rp-go{font-size:20px;padding:10px 22px}
  .op-rp-heroes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .op-rp-area{grid-template-columns:minmax(0,1fr)}
  .op-rp-arena{height:220px}.op-rp-u img{width:72px;height:72px}.op-rp-u canvas{width:40px;height:40px}.op-rp-u.op-rp-bossu canvas{width:64px;height:64px}
  .op-rp-side{gap:4px}.op-rp-l{left:8px}.op-rp-r{right:8px}.op-rp-hp{width:40px}.op-rp-u small{display:none}
}

/* menu button, login */
.op-rp-menu{width:34px;height:34px;display:grid;place-items:center;border:0;cursor:pointer;font-size:18px;padding:0}
.op-rp-login{padding:8px 14px;font-size:12px}
/* boxes */
.op-rp-boxes{display:grid;grid-template-columns:160px minmax(0,1fr);gap:20px;align-items:center}
.op-rp-bigbox{width:160px;height:160px}
.op-rp-boxes h3{font:700 20px Silkscreen,monospace;margin:0 0 8px}
.op-rp-line{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.op-rp-line img{width:16px;height:16px}.op-rp-line small{color:#a4a4b2}
.op-rp-openbox{margin-top:14px;padding:12px 22px;font-size:14px}
.op-rp-msg{margin:10px 0 0;color:#ffd84a}
/* daily */
.op-rp-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.op-rp-day{display:grid;justify-items:center;gap:4px;padding:10px 4px;background:var(--rp-panel2);box-shadow:0 0 0 3px var(--rp-ink),0 5px 0 3px var(--rp-ink)}
.op-rp-day small{font-size:10px;color:#a4a4b2}.op-rp-day img{width:24px;height:24px}.op-rp-day b{font-size:12px}
.op-rp-day.op-rp-got{background:#2e5d3a}.op-rp-day.op-rp-got small{color:#bff0c8}
.op-rp-day.op-rp-dnext{background:var(--rp-accent);color:var(--rp-ink)}.op-rp-day.op-rp-dnext small{color:var(--rp-ink)}
.op-rp-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px}
.op-rp-row .op-rp-note{margin:0}
.op-rp-claim{padding:12px 22px;font-size:14px;flex:none}
/* quests */
.op-rp-quests{display:grid;gap:12px}
.op-rp-quest{display:grid;grid-template-columns:minmax(0,1fr) auto 90px;gap:14px;align-items:center;padding:10px 12px;background:var(--rp-panel2);box-shadow:0 0 0 3px var(--rp-ink)}
.op-rp-quest>div{display:grid;gap:4px}
.op-rp-quest small{color:#a4a4b2;font-size:10px}
.op-rp-quest .op-rp-xpbar{width:100%}
.op-rp-qrew{color:var(--rp-accent);font-size:12px;white-space:nowrap}
.op-rp-qok{text-align:center;color:#5fd36a}.op-rp-qwait{color:#a4a4b2}
.op-rp-qdone{opacity:.6}
/* menu */
.op-rp-menubox{width:min(420px,100%)}
.op-rp-mlist{display:grid;gap:14px}
.op-rp-mlist form{margin:0}.op-rp-mlist .op-rp-btn{width:100%;padding:12px;font-size:13px}
@media (max-width:760px){
  .op-rp-boxes{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .op-rp-line{justify-content:center}
  .op-rp-days{grid-template-columns:repeat(4,minmax(0,1fr))}
  .op-rp-row{flex-direction:column;align-items:stretch}
  .op-rp-quest{grid-template-columns:minmax(0,1fr) 70px}.op-rp-qrew{grid-column:1}
  .op-rp-boxh{font-size:13px}.op-rp-boxh-r{display:none}
  .op-rp-menu{width:30px;height:30px}
}
/* profile in the lobby look (gems-uprofile.html) */
.op-rp-prof .op-rp-x{padding:8px 12px;font-size:12px}
.op-rp-pcard{position:absolute;left:12px;top:72px;width:min(360px,calc(100% - 24px));padding:12px 14px;z-index:2}
.op-rp-pname{display:flex;align-items:center;gap:8px;font-size:18px;margin-bottom:10px}
.op-rp-pname b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-rp-flag{width:24px;height:auto;image-rendering:auto}
.op-rp-pstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.op-rp-pstats span{display:grid;gap:2px;padding:6px 8px;background:var(--rp-panel2)}
.op-rp-pstats small{font-size:9px;color:#a4a4b2;text-transform:uppercase}
.op-rp-pstats b{font-size:13px}
.op-rp-pedit{margin-top:10px;width:100%}
.op-rp-prof .op-rp-stage{left:62%}
.op-rp-prof .op-rp-hname{left:62%}
.op-rp-giftbox .op-gm-gift{background:none;box-shadow:none}
@media (max-width:760px){
  .op-rp-pcard{top:62px;padding:10px}
  .op-rp-pname{font-size:15px;margin-bottom:8px}
  .op-rp-pstats{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .op-rp-pstats span{padding:4px 5px}.op-rp-pstats small{font-size:7px}.op-rp-pstats b{font-size:10px}
  .op-rp-prof .op-rp-stage{left:50%;bottom:30%}.op-rp-prof .op-rp-stage img{width:120px}.op-rp-prof .op-rp-plate{width:140px}
  .op-rp-prof .op-rp-hname{left:50%;bottom:22%}
  .op-rp-prof .op-rp-team{bottom:84px}
}
/* pixel font everywhere in the game, also names and headings the site styles on its own */
.op-rp h1,.op-rp h2,.op-rp h3,.op-rp b,.op-rp [data-op-name],.op-rp .op-gm-gift h2,.op-rp input,.op-rp button{font-family:Silkscreen,monospace!important;letter-spacing:0}
@media (max-width:760px){
  .op-rp-pstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .op-rp-pstats small{font-size:8px}.op-rp-pstats b{font-size:11px}
  .op-rp-prof .op-rp-stage{bottom:24%}.op-rp-prof .op-rp-stage img{width:100px}.op-rp-prof .op-rp-plate{width:120px}
  .op-rp-prof .op-rp-hname{bottom:17%}
  .op-rp-prof .op-rp-team{bottom:12px}
}

/* ============ v3 (owner 06.11.2026: "bigger buttons, sound, the fight fullscreen and clearer") ============ */
/* bigger lobby buttons */
.op-rp-btn{font-size:13px;padding:10px 8px;gap:6px}
.op-rp-pi{width:30px;height:30px;display:block}
.op-rp-pi.op-rp-sm{display:inline-block;width:12px;height:12px;vertical-align:-2px}
.op-rp-left,.op-rp-right{top:86px;width:132px;gap:16px}
.op-rp-left .op-rp-btn,.op-rp-right .op-rp-btn{min-height:78px}
.op-rp-left .op-rp-btn:hover,.op-rp-right .op-rp-btn:hover,.op-rp-mode:hover{background:var(--rp-panel2)}
.op-rp-me{padding:6px 12px 6px 6px}.op-rp-me img{width:46px;height:46px}.op-rp-me b{font-size:14px}.op-rp-me small{font-size:11px}
.op-rp-cur .op-rp-px{font-size:15px;padding:6px 10px 6px 6px}.op-rp-cur img{width:26px;height:26px}
.op-rp-menu{width:42px;height:42px}.op-rp-menu .op-rp-pi{width:22px;height:22px}
.op-rp-go{font-size:34px;padding:12px 46px;min-width:230px}
.op-rp-go small{font-size:12px}
.op-rp-gol{display:flex;align-items:center;gap:10px}.op-rp-gol .op-rp-pi{width:30px;height:30px}
.op-rp-go:hover{filter:brightness(1.08)}
.op-rp-mode{padding:10px 16px}.op-rp-mode b{font-size:15px}.op-rp-mode small{font-size:11px}
.op-rp-slot{width:62px;height:62px}.op-rp-slot img{width:48px;height:48px}
.op-rp-hname{font-size:15px;padding:8px 14px}
@media (prefers-reduced-motion:no-preference){.op-rp-go{animation:opu-rp-glow 2.4s ease-in-out infinite}}
@keyframes opu-rp-glow{50%{filter:brightness(1.12)}}

/* the match: fullscreen */
.op-rp-match{display:grid!important;grid-template-rows:auto auto minmax(0,1fr) auto;place-items:stretch;padding:0;overflow:hidden;
  background:linear-gradient(var(--m1,#1b2a6b),var(--m2,#3a2a8a) 58%,var(--m3,#2a1f5a) 58%)}
.op-rp-match[hidden]{display:none!important}
.op-rp-match:before{opacity:.5}
.op-rp-match[data-area="1"]{--m1:#2a1a3a;--m2:#6a3a5a;--m3:#3a2030}
.op-rp-match[data-area="2"]{--m1:#1a2226;--m2:#3a4a50;--m3:#22282c}
.op-rp-match[data-area="3"]{--m1:#ff9ec8;--m2:#ffd0e4;--m3:#c66a9a}
.op-rp-match[data-area="4"]{--m1:#6ab8e6;--m2:#cdeeff;--m3:#7aa8c8}
.op-rp-match[data-area="5"]{--m1:#14102a;--m2:#3a2a6a;--m3:#2a1f4a}
.op-rp-match[data-area="6"]{--m1:#f0a040;--m2:#ffd890;--m3:#c08a40}
.op-rp-match[data-area="7"]{--m1:#7ac8ff;--m2:#e8f6ff;--m3:#a0c8e8}
.op-rp-match[data-area="8"]{--m1:#3a0f1a;--m2:#8a2a20;--m3:#3a1a12}
.op-rp-match[data-area="9"]{--m1:#0a0a1e;--m2:#26206a;--m3:#16123a}
.op-rp-mtop{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 16px 6px}
.op-rp-mround{padding:8px 12px;font-size:13px}
.op-rp-ftitle{text-align:center;font-size:18px;text-transform:uppercase;text-shadow:3px 3px 0 var(--rp-ink)}
.op-rp-mbtns{display:flex;gap:12px}.op-rp-mbtns .op-rp-btn{min-width:64px}
.op-rp-order{display:flex;justify-content:center;gap:8px;min-height:52px;padding:6px 16px}
.op-rp-oc{width:40px;height:40px;display:grid;place-items:center;background:rgba(11,11,20,.55);box-shadow:inset 0 -4px 0 #5fd36a;transition:transform .15s}
.op-rp-oc.op-rp-of{box-shadow:inset 0 -4px 0 #ff4f6d}
.op-rp-oc img,.op-rp-oc canvas{width:30px;height:30px}
.op-rp-oc.op-rp-onow{transform:translateY(-4px);background:var(--rp-accent);outline:3px solid var(--rp-ink)}
.op-rp-oc.op-rp-odone{opacity:.35}
.op-rp-field{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:10px;padding:0 4vw 6vh}
.op-rp-field .op-rp-side{position:static;display:flex;justify-content:center;align-items:end;gap:3vw;flex-wrap:wrap}
.op-rp-field .op-rp-r{flex-direction:row-reverse}
.op-rp-vsmark{align-self:center;font-size:28px;color:rgba(255,255,255,.35);text-shadow:3px 3px 0 var(--rp-ink)}
.op-rp-match .op-rp-u{position:relative;display:grid;justify-items:center;gap:6px;transition:transform .18s ease-out,opacity .35s}
.op-rp-spr img{width:min(22vh,190px);height:auto}
.op-rp-spr canvas{width:min(13vh,110px);height:min(13vh,110px)}
.op-rp-bossu .op-rp-spr canvas{width:min(24vh,200px);height:min(24vh,200px)}
.op-rp-ulv{position:absolute;top:-6px;left:50%;transform:translateX(-50%);padding:2px 6px;font-size:10px;background:var(--rp-ink);z-index:1}
.op-rp-uplate{display:grid;justify-items:center;gap:3px;min-width:140px;padding:6px 8px;background:rgba(11,11,20,.75);box-shadow:0 0 0 3px var(--rp-ink)}
.op-rp-uname{font-size:12px;white-space:nowrap}
.op-rp-match .op-rp-hp{display:block;width:124px;height:12px;padding:2px;background:var(--rp-ink)}
.op-rp-match .op-rp-hp i{display:block;height:100%;background:#5fd36a;transition:width .3s}
.op-rp-match .op-rp-foe .op-rp-hp i{background:#ff4f6d}
.op-rp-match .op-rp-hp i.op-rp-low{background:#ffb43a}
.op-rp-hpn{font-size:10px;color:#dcdce3}
.op-rp-match .op-rp-u.op-rp-ko{opacity:.25;filter:grayscale(1)}
.op-rp-match .op-rp-hero.op-rp-act{transform:translateX(5vw)}
.op-rp-match .op-rp-foe.op-rp-act{transform:translateX(-5vw)}
.op-rp-match .op-rp-u.op-rp-hit .op-rp-spr{animation:opu-rp-flash .3s steps(2) 1}
@keyframes opu-rp-flash{50%{opacity:.3}}
.op-rp-field.op-rp-shake{animation:opu-rp-shake .25s steps(3) 1}
.op-rp-match .op-rp-num{top:10%;font-size:28px;text-shadow:3px 3px 0 var(--rp-ink);z-index:3}
.op-rp-match .op-rp-num.op-rp-crit{font-size:36px;color:#ff9d2e}
.op-rp-match .op-rp-num.op-rp-numbad{color:#ff6b7d}
.op-rp-match .op-rp-say{position:absolute;left:50%;top:4%;transform:translateX(-50%);padding:10px 18px;font-size:18px;background:var(--rp-ink);box-shadow:0 0 0 3px #fff;white-space:nowrap;opacity:0;transition:opacity .15s}
.op-rp-match .op-rp-say.op-rp-on{opacity:1}
.op-rp-match .op-rp-say.op-rp-sayhi{color:var(--rp-accent);box-shadow:0 0 0 3px var(--rp-accent)}
.op-rp-log{list-style:none;margin:0 auto 14px;padding:10px 14px;width:min(720px,calc(100% - 24px));display:grid;gap:4px;min-height:122px;align-content:start;background:rgba(11,11,20,.7);box-shadow:0 0 0 3px var(--rp-ink);font-size:12px;font-weight:400}
.op-rp-log li{opacity:.55}.op-rp-log li:first-child{opacity:1}
.op-rp-log b{font-weight:700}.op-rp-log em{font-style:normal;color:var(--rp-accent);font-weight:700}.op-rp-log i{font-style:normal;color:#ff9d2e}
.op-rp-log .op-rp-lh b:first-child{color:#8fe6a0}.op-rp-log .op-rp-lf b:first-child{color:#ff8a9a}.op-rp-log .op-rp-lko{color:#a4a4b2}
.op-rp-vs{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;background:rgba(11,11,20,.82);z-index:5;transition:opacity .3s}
.op-rp-vs[hidden]{display:none}
.op-rp-vs small{font-size:16px;color:#a4a4b2;text-transform:uppercase}
.op-rp-vs b{font-size:72px;color:var(--rp-accent);text-shadow:5px 5px 0 var(--rp-ink)}
.op-rp-vs span{font-size:22px;text-transform:uppercase}
.op-rp-vs.op-rp-vsout{opacity:0}
.op-rp-match .op-rp-result{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:16px;background:rgba(11,11,20,.7);z-index:6}
.op-rp-match .op-rp-result[hidden]{display:none}
.op-rp-rcard{width:min(560px,100%);padding:22px 18px;text-align:center}
.op-rp .op-rp-match .op-rp-result h2{font-size:44px!important;margin:0 0 4px;text-shadow:4px 4px 0 var(--rp-ink)}
.op-rp-rsub{margin:0 0 18px;color:#a4a4b2;text-transform:uppercase;font-size:12px}
.op-rp-match .op-rp-rew{gap:12px;margin-bottom:22px}
.op-rp-match .op-rp-rew>span{display:grid;justify-items:center;gap:4px;min-width:96px;padding:10px 12px;background:var(--rp-panel2);box-shadow:0 0 0 3px var(--rp-ink)}
.op-rp-match .op-rp-rew img,.op-rp-match .op-rp-rew .op-rp-pi{width:28px;height:28px}
.op-rp-match .op-rp-rew b{font-size:18px}.op-rp-match .op-rp-rew small{font-size:10px;color:#a4a4b2}
.op-rp-match .op-rp-rew .op-rp-lvup b{color:var(--rp-accent)}
.op-rp-tip{flex-basis:100%;margin:6px 0 0;color:#a4a4b2;font-size:11px;font-weight:400}
.op-rp-match .op-rp-ract .op-rp-btn{padding:14px 22px;font-size:15px}
@media (prefers-reduced-motion:reduce){.op-rp-match .op-rp-u.op-rp-hit .op-rp-spr,.op-rp-field.op-rp-shake{animation:none}}

@media (max-width:760px){
  .op-rp-btn{font-size:10px;padding:8px 4px}
  .op-rp-pi{width:24px;height:24px}
  .op-rp-left,.op-rp-right{top:74px;width:84px;gap:12px}
  .op-rp-left .op-rp-btn,.op-rp-right .op-rp-btn{min-height:62px}
  .op-rp-me img{width:32px;height:32px}.op-rp-me b{font-size:11px}.op-rp-me small{font-size:9px}
  .op-rp-cur .op-rp-px{font-size:11px;padding:4px 6px 4px 4px}.op-rp-cur img{width:16px;height:16px}
  .op-rp-menu{width:32px;height:32px}.op-rp-menu .op-rp-pi{width:16px;height:16px}
  .op-rp-gemc{display:none!important}.op-rp-en{display:flex!important}
  .op-rp-match .op-rp-hpn{display:block!important;font-size:9px}
  .op-rp-go{font-size:24px;padding:10px 18px;min-width:0}.op-rp-gol .op-rp-pi{width:22px;height:22px}
  .op-rp-slot{width:54px;height:54px}.op-rp-slot img{width:42px;height:42px}
  .op-rp-mtop{grid-template-columns:auto auto;padding:10px 10px 4px}
  .op-rp-ftitle{grid-column:1 / -1;grid-row:2;font-size:13px}
  .op-rp-mbtns{justify-self:end}
  .op-rp-field{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0 8px 3vh;gap:6px}
  .op-rp-vsmark{display:none}
  .op-rp-field .op-rp-side{gap:6px;flex-direction:column;align-items:center}
  .op-rp-field .op-rp-r{flex-direction:column}
  .op-rp-spr img{width:96px}.op-rp-spr canvas{width:56px;height:56px}.op-rp-bossu .op-rp-spr canvas{width:92px;height:92px}
  .op-rp-uplate{min-width:0;padding:4px 6px}.op-rp-match .op-rp-hp{width:86px;height:10px}.op-rp-uname{font-size:10px}
  .op-rp-match .op-rp-say{font-size:12px;padding:6px 10px;top:0}
  .op-rp-log{min-height:96px;font-size:10px;margin-bottom:10px}
  .op-rp-match .op-rp-hero.op-rp-act{transform:translateX(18px)}.op-rp-match .op-rp-foe.op-rp-act{transform:translateX(-18px)}
  .op-rp-vs b{font-size:48px}
  .op-rp .op-rp-match .op-rp-result h2{font-size:30px!important}
  .op-rp-match .op-rp-rew>span{min-width:76px;padding:8px}
}

/* ============ v4 (owner 06.11.2026): heroes, gear, team, collection, modes, guild, friends, awards, manual fights ============ */
.op-rp-left,.op-rp-right{gap:12px}
.op-rp-left .op-rp-btn,.op-rp-right .op-rp-btn{min-height:66px;padding:8px 6px}
.op-rp-left .op-rp-pi,.op-rp-right .op-rp-pi{width:26px;height:26px}
.op-rp-err.op-rp-ok{background:#2e8a4a}
.op-rp-wide{width:100%;margin-top:12px;padding:12px;font-size:14px}
.op-rp-danger{background:#5a1f2a}
.op-rp-h4{font:700 13px Silkscreen,monospace;text-transform:uppercase;color:#dcdce3;margin:18px 0 10px}
.op-rp-left0{justify-content:flex-start;margin-top:14px}
.op-rp-sub{display:block;font-size:10px;color:#a4a4b2;margin:2px 0 8px}
.op-rp-xpw{width:100%!important;height:10px!important}
/* element tag + stars */
.op-rp-el{display:inline-block;padding:1px 5px;font-size:9px;color:#0b0b14;background:var(--e);vertical-align:middle;text-transform:uppercase;letter-spacing:0}
.op-rp-stars{display:inline-flex;gap:2px;vertical-align:middle}
.op-rp-star{width:12px;height:11px}
/* team slots in the lobby */
.op-rp-team .op-rp-slot{position:relative;border:0;cursor:pointer;box-shadow:0 0 0 3px var(--rp-ink),0 5px 0 3px var(--rp-ink),inset 0 -5px 0 var(--r,#444)}
.op-rp-team .op-rp-slot small{position:absolute;right:-6px;bottom:-6px;min-width:20px;padding:1px 3px;font-size:10px;background:var(--rp-ink);color:#fff}
.op-rp-team .op-rp-empty{color:rgba(255,255,255,.4);font:700 22px Silkscreen,monospace}
/* fight button + auto/manual switch */
.op-rp-gobox{display:flex;flex-direction:column;gap:10px}
.op-rp-autot{border:0;cursor:pointer;font:700 12px Silkscreen,monospace;color:#fff;padding:6px 10px;text-transform:uppercase}
.op-rp-autot.op-rp-man{background:#ff9d2e;color:var(--rp-ink)}
/* boxes */
.op-rp-chances{display:flex;flex-wrap:wrap;gap:6px}
.op-rp-chances span{padding:3px 8px;font-size:10px;text-transform:uppercase;color:#0b0b14;background:var(--r)}
.op-rp-revealbox{width:min(980px,100%)}
.op-rp-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:18px}
.op-rp-cards.op-rp-cards1{grid-template-columns:minmax(0,260px);justify-content:center}
.op-rp-card{position:relative;display:grid;justify-items:center;gap:4px;padding:16px 8px 12px;text-align:center;box-shadow:0 0 0 3px var(--rp-ink),0 6px 0 3px var(--rp-ink),inset 0 0 0 3px var(--r);animation:opu-rp-cardin .35s ease-out both}
.op-rp-cardc{background:linear-gradient(var(--rp-panel2),var(--rp-panel))}
.op-rp-card img{width:72px;height:72px}
.op-rp-cards1 .op-rp-card img{width:140px;height:140px}
.op-rp-card b{font-size:12px}
.op-rp-card small{font-size:10px;color:#c9c9d6}
.op-rp-crar{font-size:9px;padding:1px 6px;color:#0b0b14;background:var(--r);text-transform:uppercase}
.op-rp-new{position:absolute;top:-8px;right:-8px;padding:2px 6px;font-size:10px;font-style:normal;background:#ff3b4f;box-shadow:0 0 0 3px var(--rp-ink)}
@keyframes opu-rp-cardin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* heroes */
.op-rp-teamrow{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.op-rp-power{color:var(--rp-accent)}
.op-rp-teamedit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.op-rp-tslot{display:grid;justify-items:center;gap:4px;padding:10px 4px;border:0;cursor:pointer;color:#fff;font:700 10px Silkscreen,monospace;box-shadow:0 0 0 3px var(--rp-ink),0 5px 0 3px var(--rp-ink),inset 0 -5px 0 var(--r)}
.op-rp-tslot img{width:56px;height:56px}
.op-rp-tslot.op-rp-empty{min-height:90px;display:grid;place-items:center;background:rgba(0,0,0,.3);color:rgba(255,255,255,.35);font-size:24px;box-shadow:0 0 0 3px var(--rp-ink)}
.op-rp-heroes{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.op-rp-hc{box-shadow:0 0 0 3px var(--rp-ink),0 5px 0 3px var(--rp-ink),inset 0 -5px 0 var(--r)}
.op-rp-hc.op-rp-inteam{outline:3px solid var(--rp-accent);outline-offset:2px}
.op-rp-hcpick{display:grid;justify-items:center;gap:3px;border:0;background:none;color:#fff;cursor:pointer;font:700 11px Silkscreen,monospace;padding:0;width:100%}
.op-rp-hcpick img{width:64px;height:64px}
.op-rp-info{margin-top:6px;width:100%;padding:6px;font-size:10px}
.op-rp-hdetail{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;align-items:start}
.op-rp-hpic{display:grid;justify-items:center;gap:6px;padding:14px;background:var(--rp-panel2);box-shadow:0 0 0 3px var(--rp-ink),inset 0 -6px 0 var(--r)}
.op-rp-hpic img{width:150px;height:150px}
.op-rp-hinfo h3{font:700 22px Silkscreen,monospace;margin:0 0 6px;display:flex;align-items:center;gap:10px}
.op-rp-hinfo .op-rp-pstats{grid-template-columns:repeat(4,minmax(0,1fr));margin:6px 0 12px}
.op-rp-skills{display:grid;gap:8px}
.op-rp-skills>div{display:grid;gap:2px;padding:8px 10px;background:var(--rp-panel2)}
.op-rp-skills small{font-size:10px;color:#c9c9d6;font-weight:400}
.op-rp-skhi{box-shadow:inset 3px 0 0 var(--rp-accent)}
.op-rp-gslots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.op-rp-gslot,.op-rp-gitem{display:grid;justify-items:center;gap:4px;padding:10px 6px;border:0;cursor:pointer;color:#fff;font:700 11px Silkscreen,monospace;text-align:center;box-shadow:0 0 0 3px var(--rp-ink),0 5px 0 3px var(--rp-ink),inset 0 -5px 0 var(--r)}
.op-rp-gslot img,.op-rp-gitem img{width:48px;height:48px}
.op-rp-gslot small,.op-rp-gitem small{font-size:9px;color:#c9c9d6}
.op-rp-gslot.op-rp-sel,.op-rp-gitem.op-rp-sel{outline:3px solid var(--rp-accent);outline-offset:2px}
.op-rp-gpick{margin-top:16px}
.op-rp-glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.op-rp-gitem:disabled{opacity:.4;cursor:default}
/* collection */
.op-rp-bookhead{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.op-rp-bookhead span{display:grid;justify-items:center;gap:2px;padding:12px;background:var(--rp-panel2);box-shadow:0 0 0 3px var(--rp-ink)}
.op-rp-bookhead b{font-size:20px;color:var(--rp-accent)}
.op-rp-bookhead small{font-size:10px;color:#a4a4b2;text-transform:uppercase}
.op-rp-bgrid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:10px;margin-bottom:10px}
.op-rp-bitem{display:grid;justify-items:center;gap:3px;padding:8px 2px;background:var(--rp-panel2);box-shadow:inset 0 -4px 0 var(--r)}
.op-rp-bitem img{width:44px;height:44px}
.op-rp-bitem small{font-size:8px;text-align:center;line-height:1.2}
.op-rp-bitem.op-rp-lockd img{filter:brightness(0) opacity(.5)}
.op-rp-bitem.op-rp-lockd small{color:#6a6a80}
/* modes */
.op-rp-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.op-rp-modec{display:grid;gap:8px;padding:16px;border:0;cursor:pointer;color:#fff;text-align:left;font:700 14px Silkscreen,monospace}
.op-rp-modec b{display:flex;align-items:center;gap:10px;font-size:16px}
.op-rp-modec small{font-size:11px;color:#c9c9d6;font-weight:400;line-height:1.5}
.op-rp-modec:hover{background:var(--rp-panel2)}
.op-rp-modec:disabled{opacity:.5;cursor:default}
.op-rp-stg button{position:relative;width:38px;height:38px}
.op-rp-sst{position:absolute;left:0;right:0;bottom:-11px;font-style:normal;font-size:9px;color:var(--rp-accent);letter-spacing:-1px}
.op-rp-area{padding-bottom:16px}
/* tower + arena + lists */
.op-rp-tower{text-align:center}
.op-rp-tfloor{display:grid;justify-items:center;gap:4px;padding:18px;background:var(--rp-panel2);box-shadow:0 0 0 3px var(--rp-ink)}
.op-rp-tfloor small{color:#a4a4b2;text-transform:uppercase}
.op-rp-tfloor b{font-size:56px;color:var(--rp-accent);text-shadow:4px 4px 0 var(--rp-ink)}
.op-rp-bosst{padding:2px 8px;background:#7a2b2b}
.op-rp-opps{display:grid;gap:12px}
.op-rp-opp{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;background:var(--rp-panel2)}
.op-rp-opp>div{display:grid;gap:3px;min-width:0}
.op-rp-opp small{font-size:10px;color:#a4a4b2}
.op-rp-oteam{display:flex;gap:4px}.op-rp-oteam img{width:28px;height:28px}
.op-rp-opp .op-rp-btn{padding:10px 18px}
.op-rp-fbtn{display:flex;gap:8px}
.op-rp-top li{grid-template-columns:28px minmax(0,1fr) auto auto}
.op-rp-form{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 16px}
.op-rp-in{flex:1;min-width:140px;padding:10px;border:0;background:#0f0d24;color:#fff;font:700 13px Silkscreen,monospace;box-shadow:0 0 0 3px var(--rp-ink)}
.op-rp-in.op-rp-tag{flex:0 0 90px;min-width:0;text-transform:uppercase}
.op-rp-ghead{display:grid;gap:4px}.op-rp-ghead b{font-size:20px}.op-rp-ghead small{color:#a4a4b2}
/* how to play */
.op-rp-help{display:grid;gap:12px}
.op-rp-help>div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;padding:10px 12px;background:var(--rp-panel2)}
.op-rp-help img{width:64px;height:64px}
.op-rp-help p{margin:0;font-weight:400;line-height:1.6;font-size:12px}
/* match: badges, targets, manual picking */
.op-rp-badges{position:absolute;top:18px;left:50%;transform:translateX(-50%);display:flex;gap:4px;z-index:2}
.op-rp-badges i{font-style:normal;font-size:9px;padding:1px 5px;background:var(--rp-ink);white-space:nowrap}
.op-rp-badges .op-rp-btnt{color:#4fb3ff}.op-rp-badges .op-rp-batk{color:#ff9d2e}.op-rp-badges .op-rp-bfrz{color:#7af0ff}
.op-rp-ulv .op-rp-el{font-size:8px;padding:0 3px;margin-left:2px}
.op-rp-flip{transform:scaleX(-1)}
.op-rp-match .op-rp-foe{cursor:default}
.op-rp-match .op-rp-u.op-rp-target .op-rp-uplate{box-shadow:0 0 0 3px var(--rp-accent)}
.op-rp-match .op-rp-u.op-rp-target:after{content:"▼";position:absolute;top:-26px;left:50%;transform:translateX(-50%);color:var(--rp-accent);font-size:18px}
.op-rp-match .op-rp-u.op-rp-turn .op-rp-uplate{box-shadow:0 0 0 3px #5fd36a}
.op-rp-match:has(.op-rp-pick:not([hidden])) .op-rp-foe{cursor:pointer}
.op-rp-pick{display:grid;gap:10px;justify-items:center;margin:0 auto 10px;width:min(720px,calc(100% - 24px))}
.op-rp-pick[hidden]{display:none}
.op-rp-pickt{margin:0;font-size:12px;text-align:center}
.op-rp-pickb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px;width:100%}
.op-rp-pickb .op-rp-btn{display:grid;gap:4px;padding:12px 10px;font-size:14px}
.op-rp-pickb .op-rp-btn small{font-size:9px;font-weight:400;text-transform:none}
.op-rp-match .op-rp-num.op-rp-numheal{color:#5fd36a}
.op-rp-match .op-rp-num.op-rp-numel{top:-14%;font-size:14px;color:#ffd84a}
.op-rp-match .op-rp-num.op-rp-numweak{top:-14%;font-size:12px;color:#a4a4b2}
.op-rp-rstars{display:flex;justify-content:center;margin-bottom:6px}
.op-rp-rstars .op-rp-star{width:34px;height:30px}
.op-rp-rdrop{box-shadow:0 0 0 3px var(--rp-ink),inset 0 -4px 0 var(--r)!important}
@media (max-height:760px) and (min-width:761px){
  .op-rp-left .op-rp-btn,.op-rp-right .op-rp-btn{min-height:54px;font-size:11px;padding:6px 4px}
  .op-rp-left,.op-rp-right{top:76px;gap:10px}
  .op-rp-left .op-rp-pi,.op-rp-right .op-rp-pi{width:20px;height:20px}
}
@media (max-width:760px){
  .op-rp-left,.op-rp-right{top:66px;width:74px;gap:8px}
  .op-rp-left .op-rp-btn,.op-rp-right .op-rp-btn{min-height:48px;font-size:8px;padding:4px 2px;gap:2px}
  .op-rp-left .op-rp-pi,.op-rp-right .op-rp-pi{width:18px;height:18px}
  .op-rp-stage{bottom:40%}.op-rp-stage img{width:120px}.op-rp-plate{width:140px}
  .op-rp-hname{bottom:31%}
  .op-rp-team{bottom:108px}
  .op-rp-gobox{gap:6px}.op-rp-autot{font-size:10px;padding:4px 6px}
  .op-rp-go{font-size:20px;padding:8px 14px}
  .op-rp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .op-rp-teamedit{gap:8px}.op-rp-tslot img{width:40px;height:40px}
  .op-rp-heroes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .op-rp-hdetail{grid-template-columns:minmax(0,1fr)}
  .op-rp-hpic img{width:110px;height:110px}
  .op-rp-hinfo .op-rp-pstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .op-rp-gslots{gap:8px}.op-rp-gslot img{width:36px;height:36px}
  .op-rp-bgrid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .op-rp-modes{grid-template-columns:minmax(0,1fr)}
  .op-rp-stg{flex-wrap:wrap;gap:12px 8px}
  .op-rp-pickb{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .op-rp-pickb .op-rp-mvauto{grid-column:1 / -1}
  .op-rp-pickb .op-rp-btn{font-size:12px;padding:8px 6px}
  .op-rp-badges{top:12px}
}
/* profile with more numbers */
.op-rp-prof .op-rp-pcard{max-height:calc(100% - 200px);overflow:auto}
@media (max-width:760px){.op-rp-prof .op-rp-pstats{grid-template-columns:repeat(3,minmax(0,1fr))}.op-rp-prof .op-rp-pstats b{font-size:9px}}
/* the site styles headings on its own, in the game everything is the pixel font */
body.op-rp-full .op-rp :is(h1,h2,h3,h4,h5,b,strong,small,span,p,li,button,a,input,label,em,i){font-family:Silkscreen,monospace!important;letter-spacing:0}
body.op-rp-full .op-rp :is(h3,h4){font-weight:700}
/* match with full teams: one row per side on desktop, 2 x 2 on phones, sprites fit the space */
.op-rp-match{grid-template-rows:auto auto minmax(0,1fr) auto auto}
.op-rp-field .op-rp-side{flex-wrap:nowrap;gap:1.6vw}
.op-rp-spr img{width:min(17vh,150px)}
.op-rp-spr canvas{width:min(11vh,96px);height:min(11vh,96px)}
.op-rp-bossu .op-rp-spr canvas{width:min(19vh,170px);height:min(19vh,170px)}
.op-rp-uplate{min-width:118px}
.op-rp-match .op-rp-hp{width:104px}
.op-rp-match:has(.op-rp-pick:not([hidden])) .op-rp-log{min-height:0;max-height:76px;overflow:hidden}
@media (max-width:760px){
  .op-rp-field{align-items:center;padding:0 6px 8px}
  .op-rp-field .op-rp-side,.op-rp-field .op-rp-r{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 6px;justify-items:center;align-items:end}
  .op-rp-spr img{width:58px}
  .op-rp-spr canvas{width:44px;height:44px}
  .op-rp-bossu .op-rp-spr canvas{width:66px;height:66px}
  .op-rp-uplate{min-width:0;width:100%;max-width:84px;padding:3px 4px}
  .op-rp-match .op-rp-hp{width:70px;height:8px}
  .op-rp-uname{font-size:8px}
  .op-rp-match .op-rp-hpn{font-size:8px}
  .op-rp-ulv{font-size:8px;top:-10px}.op-rp-ulv .op-rp-el{display:none}
  .op-rp-badges{top:6px}
  .op-rp-order{min-height:40px;padding:4px 8px}.op-rp-oc{width:30px;height:30px}.op-rp-oc img,.op-rp-oc canvas{width:22px;height:22px}
  .op-rp-match .op-rp-num{font-size:18px}.op-rp-match .op-rp-num.op-rp-crit{font-size:22px}
  .op-rp-log{min-height:70px;max-height:70px;overflow:hidden;font-size:9px;padding:6px 8px;margin-bottom:8px}
  .op-rp-match:has(.op-rp-pick:not([hidden])) .op-rp-log{display:none}
  .op-rp-pick{margin-bottom:10px}
  .op-rp-pickt{font-size:10px}
  .op-rp-match .op-rp-u.op-rp-target:after{top:-20px;font-size:14px}
  .op-rp-match .op-rp-hero.op-rp-act{transform:translateX(10px)}.op-rp-match .op-rp-foe.op-rp-act{transform:translateX(-10px)}
}
/* etappe 3: scenery per area on the horizon, calm idle float (owner: only calm flowing movement, nothing bouncy) */
.op-rp-scene{position:absolute;left:0;right:0;top:calc(58% - 20vh);height:20vh;background:var(--scene) repeat-x left bottom / auto 100%;image-rendering:pixelated;opacity:.9;pointer-events:none;z-index:0}
.op-rp-match>*:not(.op-rp-scene):not(.op-rp-vs):not(.op-rp-result){position:relative;z-index:1}
.op-rp-match[data-area="10"]{--m1:#0a3a5a;--m2:#2a8aaa;--m3:#1a4a6a}
.op-rp-match[data-area="11"]{--m1:#0e0a1e;--m2:#3a2050;--m3:#1a1428}
.op-rp-match[data-area="12"]{--m1:#1a1a2e;--m2:#4a4a6e;--m3:#2a2a3a}
.op-rp-match[data-area="13"]{--m1:#4ab8ff;--m2:#ffe0f0;--m3:#8ac8a0}
.op-rp-match[data-area="14"]{--m1:#100a2a;--m2:#4a3a8a;--m3:#2a2050}
@media (prefers-reduced-motion:no-preference){
  .op-rp-match .op-rp-spr{animation:opu-rp-idle 2.8s ease-in-out infinite}
  .op-rp-match .op-rp-u:nth-child(2n) .op-rp-spr{animation-delay:-1.4s}
  .op-rp-match .op-rp-u:nth-child(3n) .op-rp-spr{animation-delay:-.7s}
  .op-rp-match .op-rp-u.op-rp-ko .op-rp-spr{animation:none}
  .op-rp-stage img{animation:opu-rp-idle 3.2s ease-in-out infinite}
}
@keyframes opu-rp-idle{50%{transform:translateY(-3px)}}
@media (max-width:760px){.op-rp-scene{top:calc(52% - 14vh);height:14vh}}
/* ============ boxes like before (owner 06.11.2026): tap, shake, pop, beam, prize; Legendary+ rays and confetti ============ */
.op-rp-boxov{display:grid!important;grid-template-rows:auto minmax(0,1fr) auto auto;place-items:stretch;padding:0;overflow:hidden;background:linear-gradient(#5ab8f0,#a8e0ff 55%,#7cc96c 55%,#5aa84e);transition:background-color .4s}
.op-rp-boxov[hidden]{display:none!important}
.op-rp-boxov:before{display:none}
.op-rp-boxov:after{content:"";position:absolute;inset:0;background:#05040c;opacity:0;pointer-events:none;transition:opacity .5s;z-index:1}
.op-rp-boxov.op-rp-dark:after{opacity:.85}
.op-rp-bxtop{position:relative;z-index:3;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 16px}
.op-rp-bxtop>b{text-align:center;font-size:20px;text-transform:uppercase;text-shadow:3px 3px 0 var(--rp-ink)}
.op-rp-bxgems{display:flex;align-items:center;gap:6px;padding:6px 10px 6px 6px}.op-rp-bxgems img{width:22px;height:22px}.op-rp-bxgems i{font-style:normal}
.op-rp-bxstage{position:relative;z-index:2;display:grid;place-items:center;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.op-rp-bxbox{width:min(42vh,320px);height:auto;image-rendering:pixelated;position:relative;z-index:2;filter:drop-shadow(0 10px 0 rgba(0,0,0,.25))}
@media (prefers-reduced-motion:no-preference){.op-rp-bxstage:not(.op-rp-bxcharge):not(.op-rp-bxopen) .op-rp-bxbox{animation:opu-rp-idle 3s ease-in-out infinite}}
.op-rp-bxcharge .op-rp-bxbox{animation:opu-rp-bxshake .9s linear forwards}
@keyframes opu-rp-bxshake{
  0%{transform:none}10%{transform:translateX(-2px)}20%{transform:translateX(2px)}30%{transform:translateX(-4px) rotate(-1deg)}40%{transform:translateX(4px) rotate(1deg)}
  50%{transform:translateX(-6px) rotate(-2deg)}60%{transform:translateX(6px) rotate(2deg)}70%{transform:translateX(-9px) rotate(-3deg) scale(1.03)}80%{transform:translateX(9px) rotate(3deg) scale(1.05)}
  90%{transform:translateX(-11px) rotate(-4deg) scale(1.07)}100%{transform:scale(1.1)}}
.op-rp-bxpop .op-rp-bxbox{animation:opu-rp-bxpop .22s ease-out forwards}
@keyframes opu-rp-bxpop{to{transform:scale(1.35);opacity:0}}
.op-rp-bxbeam{position:absolute;left:50%;top:-10%;bottom:20%;width:min(30vh,220px);transform:translateX(-50%) scaleX(0);background:linear-gradient(transparent,var(--r,#fff) 40%,transparent);opacity:0;z-index:1;transition:transform .35s ease-out,opacity .35s}
.op-rp-bxopen .op-rp-bxbeam{transform:translateX(-50%) scaleX(1);opacity:.55}
.op-rp-bxrays{position:absolute;left:50%;top:50%;width:min(110vh,900px);height:min(110vh,900px);margin:calc(min(110vh,900px) / -2) 0 0 calc(min(110vh,900px) / -2);opacity:0;z-index:0;
  background:repeating-conic-gradient(from 0deg,var(--r,#fff) 0deg 9deg,transparent 9deg 24deg);-webkit-mask:radial-gradient(circle,#000 10%,transparent 68%);mask:radial-gradient(circle,#000 10%,transparent 68%);transition:opacity .5s}
.op-rp-bxopen.op-rp-r4 .op-rp-bxrays,.op-rp-bxopen.op-rp-r5 .op-rp-bxrays{opacity:.45;animation:opu-rp-spin 14s linear infinite}
@keyframes opu-rp-spin{to{transform:rotate(360deg)}}
.op-rp-bxitem{position:relative;z-index:2;display:grid;justify-items:center;gap:6px;padding:20px 26px 16px;text-align:center;background:var(--rp-panel);box-shadow:0 0 0 3px var(--rp-ink),0 8px 0 3px var(--rp-ink),inset 0 0 0 4px var(--r,#fff),0 0 60px var(--r,#fff);animation:opu-rp-rise .45s ease-out both}
.op-rp-bxitem[hidden]{display:none}
.op-rp-bxitem img{width:min(26vh,190px);height:min(26vh,190px);image-rendering:pixelated}
.op-rp-bxitem b{font-size:22px}
.op-rp-bxitem small{font-size:12px;color:#dcdce3}
.op-rp-bxitem .op-rp-crar{font-size:12px;padding:3px 10px}
.op-rp-bxitem .op-rp-new{top:-12px;right:-12px;font-size:12px}
@keyframes opu-rp-rise{from{opacity:0;transform:translateY(40px) scale(.85)}to{opacity:1;transform:none}}
.op-rp-bxopen.op-rp-r4 .op-rp-bxitem,.op-rp-bxopen.op-rp-r5 .op-rp-bxitem{animation:opu-rp-rise .6s ease-out both}
.op-rp-bxconf{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.op-rp-bxconf i{position:absolute;top:-12px;left:var(--x);width:8px;height:8px;background:var(--c);animation:opu-rp-conf 2.6s linear var(--d) forwards}
@keyframes opu-rp-conf{to{transform:translateY(110vh) rotate(540deg)}}
.op-rp-bxhint{position:relative;z-index:3;margin:0 0 10px;text-align:center;font-size:14px;color:#fff;text-shadow:2px 2px 0 var(--rp-ink)}
.op-rp-bxbar{position:relative;z-index:3;display:flex;justify-content:center;align-items:stretch;gap:14px;padding:0 16px 22px}
.op-rp-bxinfo{display:flex;align-items:center;gap:6px;padding:10px 14px;font-size:13px}.op-rp-bxinfo img{width:18px;height:18px}
.op-rp-bxauto{min-width:120px;font-size:16px;padding:12px 20px}
@media (max-width:760px){
  .op-rp-bxtop>b{font-size:14px}
  .op-rp-bxbox{width:min(34vh,230px)}
  .op-rp-bxitem{padding:14px 16px 12px}.op-rp-bxitem img{width:120px;height:120px}.op-rp-bxitem b{font-size:16px}
  .op-rp-bxbar{flex-direction:column;align-items:stretch}
  .op-rp-bxinfo{justify-content:center;font-size:11px}
}

/* ============ upgrade + repeat (06.11.2026, "new features") ============ */
.op-rp-gwrap{display:flex;gap:8px;align-items:stretch}
.op-rp-gwrap>.op-rp-gitem{flex:1;min-width:0}
.op-rp-upb{min-width:64px;font-size:12px;color:#0b0b14;background:var(--r,#ffd84a)}
.op-rp-upg{position:fixed;inset:0;z-index:1200;display:grid;place-content:center;justify-items:center;gap:14px;background:rgba(8,6,20,.82);cursor:pointer;animation:opu-rp-upfade .25s ease}
.op-rp-upg.op-rp-upout{opacity:0;transition:opacity .3s ease}
@keyframes opu-rp-upfade{from{opacity:0}}
.op-rp-upin{position:relative;width:180px;height:160px}
.op-rp-upf,.op-rp-upnew{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px}
.op-rp-upf0{animation:opu-rp-up0 .6s ease-in forwards}.op-rp-upf1{animation:opu-rp-up1 .6s ease-in forwards}.op-rp-upf2{animation:opu-rp-up2 .6s ease-in forwards}
@keyframes opu-rp-up0{from{transform:translate(-70px,20px)}to{transform:none;opacity:0}}
@keyframes opu-rp-up1{from{transform:translate(0,-50px)}to{transform:none;opacity:0}}
@keyframes opu-rp-up2{from{transform:translate(70px,20px)}to{transform:none;opacity:0}}
.op-rp-upnew{width:110px;height:110px;margin:-55px 0 0 -55px;opacity:0;transform:scale(.4);animation:opu-rp-upnew .5s ease .55s forwards}
@keyframes opu-rp-upnew{to{opacity:1;transform:none}}
.op-rp-upray{position:absolute;left:50%;top:50%;width:200px;height:200px;margin:-100px 0 0 -100px;background:radial-gradient(circle,var(--r) 0,transparent 62%);opacity:0;animation:opu-rp-upray 1s ease .5s forwards}
@keyframes opu-rp-upray{30%{opacity:.9}to{opacity:.45}}
.op-rp-uptxt{display:grid;justify-items:center;gap:4px;opacity:0;animation:opu-rp-upshow .4s ease .9s forwards}
@keyframes opu-rp-upshow{to{opacity:1}}
.op-rp-uptxt b{font-size:20px}.op-rp-uptxt small{color:#cfcbe8}
.op-rp-uptxt .op-rp-crar{font-size:12px;padding:3px 10px}
.op-rp-uptxt .op-rp-new{position:static;margin-top:4px}
.op-rp-uphint{margin:0;font-size:11px;color:#9c98c4}
.op-rp-rep.op-rp-hi{color:#0b0b14}

/* ============ v5 Arcade look (owner 06.11.2026 picked B of rpg/preview-v6.html) ============
   Thick 3D blocks: lit top half, dark bottom half, light edge, deep ink shadow; a shine runs through on hover,
   pressing sinks the button all the way with a short flash. Side buttons get a colour strip. Calm, nothing bounces. */
.op-rp .op-rp-btn:not(.op-rp-hi),.op-rp .op-rp-mode,.op-rp .op-rp-menu,.op-rp .op-rp-modec,.op-rp .op-rp-slot:not(.op-rp-empty){
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.2) 50%,transparent 58%) no-repeat 180% 0/250% 100%,linear-gradient(#3a3478 0 50%,#2e2966 50%);
  box-shadow:0 0 0 3px var(--rp-ink),inset 0 3px 0 #5c54b0,0 8px 0 3px var(--rp-ink)}
.op-rp .op-rp-btn.op-rp-hi{background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.45) 50%,transparent 58%) no-repeat 180% 0/250% 100%,linear-gradient(#ffe066 0 50%,#ffcc22 50%);
  box-shadow:0 0 0 3px var(--rp-ink),inset 0 4px 0 #fff3b0,inset 0 -5px 0 #d99a00,0 9px 0 3px var(--rp-ink)}
.op-rp .op-rp-btn,.op-rp .op-rp-mode,.op-rp .op-rp-menu,.op-rp .op-rp-modec,.op-rp .op-rp-slot{transition:transform .12s ease,box-shadow .12s ease,background-position .45s ease}
.op-rp .op-rp-btn:hover:not(:disabled),.op-rp .op-rp-mode:hover,.op-rp .op-rp-menu:hover,.op-rp .op-rp-modec:hover:not(:disabled),.op-rp .op-rp-slot:hover{background-position:-80% 0,0 0}
.op-rp .op-rp-btn .op-rp-pi,.op-rp .op-rp-modec svg{transition:transform .2s ease}
.op-rp .op-rp-btn:hover:not(:disabled) .op-rp-pi{transform:translateY(-3px)}
.op-rp .op-rp-btn:active:not(:disabled),.op-rp .op-rp-mode:active,.op-rp .op-rp-menu:active,.op-rp .op-rp-modec:active:not(:disabled),.op-rp .op-rp-slot:active{transform:translateY(7px);box-shadow:0 0 0 3px var(--rp-ink),inset 0 3px 0 #5c54b0,0 1px 0 3px var(--rp-ink);transition-duration:.04s}
.op-rp .op-rp-btn.op-rp-hi:active:not(:disabled){box-shadow:0 0 0 3px var(--rp-ink),inset 0 4px 0 #fff3b0,inset 0 -2px 0 #d99a00,0 2px 0 3px var(--rp-ink)}
.op-rp .op-rp-btn.op-rp-flash{animation:opu-rp-bflash .12s steps(1)}
@keyframes opu-rp-bflash{0%{filter:brightness(1.7)}}
.op-rp .op-rp-btn:disabled{filter:grayscale(.6)}
/* colour strips on the lobby side buttons */
.op-rp-left .op-rp-btn,.op-rp-right .op-rp-btn{border-left:6px solid var(--k,#ffd84a)}
.op-rp [data-open="boxes"]{--k:#ffb43a}.op-rp [data-open="chars"]{--k:#ff6a8a}.op-rp [data-open="book"]{--k:#5fd36a}.op-rp [data-open="guild"]{--k:#b77bff}
.op-rp [data-open="quests"]{--k:#ffd84a}.op-rp [data-open="daily"]{--k:#ff4f6d}.op-rp [data-open="ach"]{--k:#4fb3ff}.op-rp [data-open="friends"]{--k:#6ff6ff}.op-rp [data-open="rank"]{--k:#ffc23a}
.op-rp .op-rp-btn.op-rp-upb{background:var(--r,#ffd84a);background:linear-gradient(var(--r,#ffd84a) 0 50%,color-mix(in srgb,var(--r,#ffd84a) 80%,#000) 50%)}

/* ---- fight: hit flash, knockback, slash, sparks, numbers, HP trail, KO, charge + orb ---- */
.op-rp-match .op-rp-spr>img,.op-rp-match .op-rp-spr>canvas{transition:translate .5s ease,opacity .5s ease}
.op-rp-match .op-rp-foe.op-rp-hit .op-rp-spr>*{animation:opu-rp-knr .3s ease}
.op-rp-match .op-rp-hero.op-rp-hit .op-rp-spr>*{animation:opu-rp-knl .3s ease}
@keyframes opu-rp-knr{0%{filter:brightness(0) invert(1)}25%{translate:16px 0;filter:none}}
@keyframes opu-rp-knl{0%{filter:brightness(0) invert(1)}25%{translate:-16px 0;filter:none}}
.op-rp-match .op-rp-u.op-rp-hit .op-rp-spr{animation:none}
.op-rp-match .op-rp-u.op-rp-ko .op-rp-spr>*{translate:0 22px;opacity:.5}
.op-rp-match .op-rp-spr{position:relative}
.op-rp-slash{position:absolute;left:50%;top:50%;width:80%;height:80%;translate:-50% -50%;pointer-events:none;z-index:2;animation:opu-rp-slash .28s steps(4) forwards}
@keyframes opu-rp-slash{0%{opacity:1;transform:rotate(-30deg) scale(.6)}100%{opacity:0;transform:rotate(20deg) scale(1.1)}}
.op-rp-spark{position:absolute;left:50%;top:50%;width:6px;height:6px;pointer-events:none;z-index:2;animation:opu-rp-spark .55s ease-out forwards}
@keyframes opu-rp-spark{to{transform:translate(var(--dx),var(--dy));opacity:0}}
.op-rp-match .op-rp-num{animation:opu-rp-num2 1s ease-out forwards}
@keyframes opu-rp-num2{0%{transform:translate(-50%,10px) scale(.6);opacity:0}15%{transform:translate(-50%,-14px) scale(1);opacity:1}70%{opacity:1}100%{transform:translate(-50%,-60px);opacity:0}}
.op-rp-match .op-rp-hp{position:relative}
.op-rp-match .op-rp-hp i{position:relative;z-index:1}
.op-rp-trail{position:absolute;left:2px;top:2px;bottom:2px;width:0;background:#fff;transition:width .8s ease .35s}
.op-rp-u .op-rp-charge{position:absolute;inset:-8px;box-shadow:0 0 0 4px var(--rp-accent),0 0 26px 8px var(--rp-accent);opacity:0;pointer-events:none;z-index:1}
.op-rp-u.op-rp-charging .op-rp-charge{animation:opu-rp-charge .4s ease forwards}
@keyframes opu-rp-charge{0%{opacity:0;transform:scale(1.3)}100%{opacity:.85;transform:scale(1)}}
.op-rp-orb{position:absolute;left:0;top:0;width:24px;height:24px;margin:-12px 0 0 -12px;background:#ffd84a;box-shadow:0 0 0 4px #ff9a2a,0 0 18px 6px #ffb43a;pointer-events:none;z-index:4;transition:transform .34s ease-in}
.op-rp-orb.op-rp-orbh{background:#9dffb0;box-shadow:0 0 0 4px #3fbf5c,0 0 18px 6px #5fd36a}
/* result: stars one after another, gems fall into the reward */
.op-rp-rstars .op-rp-star{opacity:0;transform:scale(.4);animation:opu-rp-starin .35s ease forwards}
.op-rp-rstars .op-rp-star:nth-child(2){animation-delay:.28s}.op-rp-rstars .op-rp-star:nth-child(3){animation-delay:.56s}
@keyframes opu-rp-starin{to{opacity:1;transform:none}}
.op-rp-gfly{position:fixed;width:16px;height:16px;pointer-events:none;z-index:1300;transition:transform .6s cubic-bezier(.5,0,.7,1),opacity .6s ease}
@media (prefers-reduced-motion:reduce){
  /* owner: on Kuroloot everything may move, only hard flashes go */
  .op-rp-match .op-rp-foe.op-rp-hit .op-rp-spr>*,.op-rp-match .op-rp-hero.op-rp-hit .op-rp-spr>*{animation-name:opu-rp-knsoft}
  .op-rp .op-rp-btn.op-rp-flash{animation:none}
}
@keyframes opu-rp-knsoft{25%{opacity:.6}}
.op-rp .op-rp-team .op-rp-slot:not(.op-rp-empty){box-shadow:0 0 0 3px var(--rp-ink),inset 0 3px 0 #5c54b0,inset 0 -5px 0 var(--r,#444),0 8px 0 3px var(--rp-ink)}