/* Brawler front-end + HUD, "arcade brawler" look (operator 28 Sept 19:00 CET: not a copy of the teardown game; a
   classic brawler menu, God of War / Street Fighter, loading screen included). Slanted bars and panels, a carved
   serif for titles (Cinzel, OFL), a condensed face for menus and numbers (Teko, OFL), one accent colour per world
   (setTheme). Plain DOM + WAAPI, no canvas text. */
@font-face{font-family:"BxTitle";src:url("fonts/Cinzel.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"BxUi";src:url("fonts/Teko.woff2") format("woff2");font-weight:300 700;font-display:swap}
.bx-root{position:absolute;inset:0;pointer-events:none;user-select:none;overflow:hidden;color:var(--paper);
  font-family:"BxUi","Arial Narrow",sans-serif;
  --accent:#ff7a1a;--accent-hi:#ffd9a0;--accent-deep:#6e1a06;--hot:#ff3b1f;--ink:#08070a;--paper:#efe7da;--dim:rgba(239,231,218,.62);
  --hp-a:#fff1b0;--hp-b:#ffb52e;--hp-low:#ff3b2f;--meter-a:#ff5a14;--meter-b:#ffd24a;--steel:linear-gradient(180deg,#d9d9d9,#6d6d70 48%,#2a2a2e 52%,#8b8b90);
  --f-title:"BxTitle","Cinzel",Georgia,serif;--f-ui:"BxUi","Teko","Arial Narrow",sans-serif}
.bx-root *{box-sizing:border-box}
.bx-hide{display:none!important}
.bx-layer{position:absolute;inset:0;pointer-events:none}
.bx-title-text{font-family:var(--f-title);font-weight:900;letter-spacing:.04em;text-transform:uppercase;
  background:linear-gradient(180deg,#fff 0%,var(--accent-hi) 34%,var(--accent) 62%,var(--accent-deep) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.85)) drop-shadow(0 0 18px color-mix(in srgb,var(--accent) 45%,transparent))}
.bx-kbd{display:inline-grid;place-items:center;min-width:1.7em;height:1.5em;padding:0 .35em;margin:0 .12em;font:600 .95em/1 var(--f-ui);color:var(--ink);
  background:linear-gradient(180deg,#fff,#cfc8bc);transform:skewX(-10deg);box-shadow:0 2px 0 rgba(0,0,0,.6)}
.bx-kbd.k-j{background:linear-gradient(180deg,#fff,var(--accent-hi))}
.bx-kbd.k-k{background:linear-gradient(180deg,var(--accent),var(--accent-deep));color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.6)}
.bx-x{margin:0 .2em;font:500 .9em/1 var(--f-ui);color:var(--dim)}
.bx-kbd.k-l{background:linear-gradient(180deg,#fff6c8,#ffcc33)}

/* ================= in-fight HUD ================= */
.bx-hud{position:absolute;inset:0}
/* hero plate: top left */
.bx-hero{position:absolute;left:22px;top:18px;display:flex;align-items:flex-start;gap:10px}
.bx-face-wrap{padding:3px;background:linear-gradient(160deg,var(--accent-hi),var(--accent) 45%,var(--accent-deep));clip-path:polygon(14% 0,100% 0,86% 100%,0 100%)}
.bx-face{position:relative;width:92px;height:92px;clip-path:polygon(14% 0,100% 0,86% 100%,0 100%);background:var(--ink) center/cover no-repeat;
  display:grid;place-items:center;font:700 44px var(--f-title);color:var(--accent-hi)}
.bx-face::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.5))}
.bx-face.is-hurt{animation:bx-hurt .32s}
@keyframes bx-hurt{30%{filter:brightness(2) saturate(0) sepia(1) hue-rotate(-50deg) saturate(5)}}
.bx-plate{display:flex;flex-direction:column;gap:5px;padding-top:6px}
.bx-name{font:600 24px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:#fff;text-shadow:0 2px 0 #000;display:flex;gap:10px;align-items:baseline}
.bx-name small{font-size:15px;letter-spacing:.2em;color:var(--accent)}
.bx-bar{position:relative;height:20px;width:min(430px,34vw);transform:skewX(-20deg);background:rgba(8,7,10,.78);box-shadow:0 0 0 2px #000,0 0 0 3px rgba(255,255,255,.18);overflow:hidden}
.bx-bar>i{position:absolute;inset:0;transform-origin:0 50%}
.bx-bar .chip{background:#fff}
.bx-bar .fill{background:linear-gradient(180deg,var(--hp-a),var(--hp-b))}
.bx-bar .gloss{background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 50%,rgba(0,0,0,.25))}
.bx-bar.low .fill{background:linear-gradient(180deg,#ffb0a0,var(--hp-low))}
.bx-bar.low{animation:bx-pulse .8s infinite}
@keyframes bx-pulse{50%{box-shadow:0 0 0 2px #000,0 0 0 3px var(--hp-low),0 0 18px var(--hp-low)}}
.bx-meter{display:flex;gap:5px;align-items:center}
.bx-seg{position:relative;width:min(70px,5.6vw);height:11px;transform:skewX(-20deg);background:rgba(8,7,10,.78);box-shadow:0 0 0 2px #000;overflow:hidden}
.bx-seg>i{position:absolute;inset:0;transform-origin:0 50%;background:linear-gradient(180deg,var(--meter-b),var(--meter-a))}
.bx-meter-label{margin-left:8px;font:500 17px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.bx-meter.full .bx-seg{box-shadow:0 0 0 2px #000,0 0 10px var(--meter-b)}
.bx-meter.full .bx-seg>i{animation:bx-shine 1s infinite}
.bx-meter.full .bx-meter-label{color:#fff;text-shadow:0 0 10px var(--meter-b)}
@keyframes bx-shine{50%{filter:brightness(1.7)}}
/* timer + objective: top centre */
.bx-top{position:absolute;left:50%;top:14px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.bx-timer{min-width:110px;padding:0 18px;font:600 44px/1.05 var(--f-ui);text-align:center;color:#fff;letter-spacing:.04em;text-shadow:0 3px 0 #000;
  background:linear-gradient(180deg,rgba(8,7,10,.8),rgba(8,7,10,.55));clip-path:polygon(10% 0,90% 0,100% 50%,90% 100%,10% 100%,0 50%)}
.bx-timer.low{color:var(--hp-low);animation:bx-blink 1s steps(1,end) infinite}
@keyframes bx-blink{50%{opacity:.4}}
.bx-obj{margin-top:6px;padding:3px 26px;font:700 15px/1.3 var(--f-title);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-hi);text-align:center;
  background:linear-gradient(90deg,transparent,rgba(8,7,10,.75) 15%,rgba(8,7,10,.75) 85%,transparent);text-shadow:0 2px 0 #000;white-space:nowrap}
.bx-obj small{display:block;font:400 16px/1.1 var(--f-ui);letter-spacing:.06em;text-transform:none;color:var(--dim)}
/* KO: top right */
.bx-ko{position:absolute;right:26px;top:14px;text-align:right;font:600 20px/1 var(--f-ui);letter-spacing:.2em;color:var(--accent)}
.bx-ko b{display:block;font:600 58px/0.95 var(--f-ui);letter-spacing:.02em;color:#fff;text-shadow:0 3px 0 #000}
/* combo: left, SF style */
.bx-combo{position:absolute;left:28px;top:34%;opacity:0;transform:translateX(-30px);transition:opacity .1s,transform .1s}
.bx-combo.on{opacity:1;transform:none}
.bx-combo .n{display:inline-block;font:700 104px/.8 var(--f-ui);font-style:italic;transform-origin:30% 80%;
  background:linear-gradient(180deg,#fff 20%,var(--accent-hi) 45%,var(--accent) 80%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(3px 3px 0 #000) drop-shadow(0 0 12px color-mix(in srgb,var(--accent) 50%,transparent))}
.bx-combo .l{display:block;margin-top:-4px;font:600 28px/1 var(--f-ui);font-style:italic;letter-spacing:.3em;color:#fff;text-shadow:2px 2px 0 #000}
.bx-combo .r{display:block;margin-top:4px;font:900 22px/1 var(--f-title);letter-spacing:.12em;color:var(--hot);text-shadow:2px 2px 0 #000;min-height:22px}
.bx-combo.hot .n{background:linear-gradient(180deg,#fff,#ffe07a 30%,#ff7a1a 60%,#c0100a);-webkit-background-clip:text;background-clip:text}
/* boss / officer: bottom centre */
.bx-boss{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);width:min(760px,62vw);display:none}
.bx-boss.on{display:block}
.bx-boss .nm{display:flex;align-items:center;gap:14px;margin-bottom:6px;font:900 21px/1 var(--f-title);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 2px 0 #000}
.bx-boss .nm::before,.bx-boss .nm::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--accent))}
.bx-boss .nm::after{background:linear-gradient(90deg,var(--accent),transparent)}
.bx-boss .bx-bar{width:100%;height:12px;transform:none}
.bx-boss .bx-bar .fill{background:linear-gradient(180deg,#ff8a7a,#b3120c 60%,#6d0806)}
.bx-boss.officer .bx-bar{height:9px}
.bx-boss.officer .nm{font-size:17px}
/* minimap: bottom right */
.bx-map{position:absolute;right:22px;bottom:22px;width:170px;height:170px;clip-path:polygon(12% 0,100% 0,100% 88%,88% 100%,0 100%,0 12%)}
.bx-map-frame{position:absolute;right:18px;bottom:18px;width:178px;height:178px;clip-path:polygon(12% 0,100% 0,100% 88%,88% 100%,0 100%,0 12%);background:var(--accent);opacity:.8}
/* hints: bottom left */
.bx-hint{position:absolute;left:24px;bottom:20px;font:400 18px/1.2 var(--f-ui);letter-spacing:.06em;color:var(--dim);text-shadow:0 1px 0 #000}
/* damage numbers + milestone */
.bx-dmg{position:absolute;left:0;top:0;font:600 30px/1 var(--f-ui);font-style:italic;color:#fff;will-change:transform,opacity;white-space:nowrap;text-shadow:2px 2px 0 #000,-1px -1px 0 #000,0 0 8px #000}
.bx-dmg.heavy{font-size:48px;color:var(--meter-b);text-shadow:3px 3px 0 #000,-2px -2px 0 #000,0 0 14px var(--hot)}
.bx-mile{position:absolute;right:34px;top:26%;font:700 56px/1 var(--f-ui);font-style:italic;letter-spacing:.04em;color:#fff;opacity:0;text-shadow:3px 3px 0 #000,0 0 18px var(--accent)}
/* banner: letterbox strip */
.bx-banner{position:absolute;left:0;right:0;top:27%;display:flex;flex-direction:column;align-items:center;opacity:0}
.bx-banner .strip{position:absolute;left:0;right:0;top:-10px;bottom:-12px;background:linear-gradient(90deg,transparent,rgba(8,7,10,.82) 18%,rgba(8,7,10,.82) 82%,transparent);transform-origin:50% 50%}
.bx-banner .strip::before,.bx-banner .strip::after{content:"";position:absolute;left:12%;right:12%;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.bx-banner .strip::before{top:0}.bx-banner .strip::after{bottom:0}
.bx-banner.red .strip::before,.bx-banner.red .strip::after{background:linear-gradient(90deg,transparent,var(--hot),transparent)}
.bx-banner .t{position:relative;font-size:clamp(34px,4.4vw,64px);line-height:1.1;text-align:center;padding:0 4vw}
.bx-banner .s{position:relative;margin-top:2px;font:400 24px/1.1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--paper)}

/* ================= front-end screens ================= */
.bx-screen{position:absolute;inset:0;pointer-events:auto}
.bx-under{opacity:0;pointer-events:none;transition:opacity .15s}
.bx-veil{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.bx-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;mix-blend-mode:screen}
/* loading */
.bx-loading{background:#000;overflow:hidden}
.bx-art{position:absolute;inset:-3%;background:#000 center/cover no-repeat;animation:bx-kenburns 18s ease-out forwards;opacity:.9}
@keyframes bx-kenburns{from{transform:scale(1.02)}to{transform:scale(1.1) translate(-1%,-1%)}}
.bx-loading::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.5) 30%,transparent 55%),radial-gradient(ellipse at 60% 40%,transparent 40%,rgba(0,0,0,.6))}
.bx-load-title{position:absolute;left:6vw;bottom:15vh;z-index:1}
.bx-load-title .t{font-size:clamp(44px,6.2vw,96px);line-height:.95}
.bx-load-title .s{margin-top:10px;font:400 26px/1 var(--f-ui);letter-spacing:.22em;text-transform:uppercase;color:var(--paper)}
.bx-tip{position:absolute;left:6vw;bottom:6vh;z-index:1;max-width:52vw;font:400 22px/1.25 var(--f-ui);letter-spacing:.04em;color:var(--dim)}
.bx-tip b{font-weight:600;letter-spacing:.2em;color:var(--accent);margin-right:12px}
.bx-load-meter{position:absolute;right:6vw;bottom:6vh;z-index:1;display:flex;align-items:center;gap:16px}
.bx-rune{width:46px;height:46px;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 35%,transparent);border-top-color:var(--accent);border-right-color:var(--accent-hi);animation:bx-spin 1.1s linear infinite;box-shadow:0 0 16px color-mix(in srgb,var(--accent) 40%,transparent)}
@keyframes bx-spin{to{transform:rotate(360deg)}}
.bx-load-bar{width:min(300px,26vw);height:8px;transform:skewX(-20deg);background:rgba(255,255,255,.12);overflow:hidden}
.bx-load-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent-deep),var(--accent),var(--accent-hi));transform-origin:0 50%;transform:scaleX(0);transition:transform .25s}
.bx-load-pct{min-width:62px;font:600 34px/1 var(--f-ui);color:#fff;text-align:right}
.bx-load-msg{position:absolute;right:6vw;bottom:calc(6vh + 54px);z-index:1;font:400 20px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
/* title (press start) */
.bx-titlescreen{background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 42%,transparent 70%),linear-gradient(0deg,rgba(0,0,0,.6),transparent 30%);cursor:pointer}
.bx-logo{position:absolute;left:7vw;top:22vh}
.bx-logo .t{font-size:clamp(52px,7.4vw,124px);line-height:.92}
.bx-logo .rule{width:min(520px,38vw);height:2px;margin:18px 0 12px;background:linear-gradient(90deg,var(--accent),transparent)}
.bx-logo .s{font:400 28px/1.1 var(--f-ui);letter-spacing:.24em;text-transform:uppercase;color:var(--paper);text-shadow:0 2px 0 #000}
.bx-press{position:absolute;left:0;right:0;bottom:14vh;text-align:center;font:500 34px/1 var(--f-ui);letter-spacing:.42em;text-transform:uppercase;color:#fff;text-shadow:0 0 14px var(--accent),0 2px 0 #000;animation:bx-breathe 1.8s ease-in-out infinite}
@keyframes bx-breathe{50%{opacity:.25}}
.bx-foot{position:absolute;left:0;right:0;bottom:3.5vh;text-align:center;font:400 17px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:rgba(239,231,218,.4)}
/* main menu */
.bx-menu{background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 36%,transparent 62%)}
.bx-menu .bx-logo{top:9vh}
.bx-menu .bx-logo .t{font-size:clamp(40px,4.6vw,76px)}
.bx-list{position:absolute;left:7vw;top:36vh;width:min(460px,40vw)}
.bx-item{position:relative;display:block;width:100%;padding:6px 0 0 26px;border:0;background:none;cursor:pointer;text-align:left;
  font:500 48px/1.05 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:rgba(239,231,218,.55);transition:color .12s,transform .12s,letter-spacing .12s}
.bx-item.sel{color:#fff;transform:translateX(16px);letter-spacing:.14em;text-shadow:0 2px 0 #000}
.bx-item.dim{opacity:.35}
.bx-cursor{position:absolute;left:0;height:52px;width:100%;transform:skewX(-20deg);background:linear-gradient(90deg,var(--accent) 0 6px,color-mix(in srgb,var(--accent) 55%,transparent) 6px,transparent 92%);
  transition:top .14s cubic-bezier(.2,.9,.3,1.2);pointer-events:none;opacity:.9}
.bx-desc{position:absolute;left:7vw;bottom:15vh;width:min(560px,44vw);font:400 24px/1.2 var(--f-ui);letter-spacing:.04em;color:var(--dim);border-left:3px solid var(--accent);padding-left:14px}
.bx-keys{position:absolute;left:7vw;bottom:5vh;font:400 19px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:rgba(239,231,218,.5)}
.bx-keys .bx-kbd{font-size:17px}
.bx-record{position:absolute;right:5vw;bottom:5vh;padding:14px 22px 12px;min-width:250px;background:rgba(8,7,10,.72);clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);text-align:center}
.bx-record h4{margin:0 0 6px;font:700 15px/1 var(--f-title);letter-spacing:.2em;color:var(--accent)}
.bx-record .row{display:flex;justify-content:space-around;gap:18px;font:400 17px/1 var(--f-ui);letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.bx-record .row b{display:block;font:600 36px/1 var(--f-ui);color:#fff;letter-spacing:.02em}
/* world select */
.bx-select{background:radial-gradient(ellipse at 50% 40%,rgba(0,0,0,.8),#000)}
.bx-select-head{position:absolute;left:0;right:0;top:6vh;text-align:center}
.bx-select-head .t{font-size:clamp(30px,3.4vw,54px)}
.bx-select-head .s{margin-top:6px;font:400 22px/1 var(--f-ui);letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}
.bx-cards{position:absolute;left:0;right:0;top:19vh;bottom:17vh;display:flex;justify-content:center;align-items:stretch;gap:2.4vw;padding:0 6vw}
.bx-card{position:relative;flex:0 1 34vw;max-width:560px;cursor:pointer;clip-path:polygon(9% 0,100% 0,91% 100%,0 100%);background:#2a2a2e;transition:transform .2s cubic-bezier(.2,.9,.3,1.2),filter .2s;filter:grayscale(.85) brightness(.55)}
.bx-card.sel{transform:scale(1.04);filter:none;background:var(--c-accent,#fff)}
.bx-card .win{position:absolute;inset:4px;overflow:hidden;clip-path:polygon(9% 0,100% 0,91% 100%,0 100%);background:#000}
.bx-card .art{position:absolute;inset:0;background:#000 62% center/cover no-repeat;transition:transform 3s ease-out}
.bx-card.sel .art{transform:scale(1.08)}
.bx-card .win::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.4) 36%,transparent 60%)}
.bx-card .info{position:absolute;z-index:1;left:12%;right:10%;bottom:6%}
.bx-card .nm{font:900 clamp(28px,2.8vw,46px)/1 var(--f-title);text-transform:uppercase;color:#fff;text-shadow:0 3px 0 #000}
.bx-card .tg{margin-top:8px;font:400 21px/1.15 var(--f-ui);letter-spacing:.05em;color:var(--dim)}
.bx-card .chips{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font:500 17px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--c-accent,#fff)}
.bx-card .chips span::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;transform:rotate(45deg) translateY(-2px);background:currentColor}
.bx-card .p1{position:absolute;z-index:3;left:14%;top:5%;padding:2px 12px;font:600 22px/1.2 var(--f-ui);letter-spacing:.2em;color:var(--ink);background:var(--c-accent,#fff);transform:skewX(-20deg);opacity:0}
.bx-card.sel .p1{opacity:1;animation:bx-bob 1s ease-in-out infinite}
.bx-card .cur{position:absolute;z-index:3;right:12%;top:5%;font:500 18px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 2px 0 #000}
@keyframes bx-bob{50%{transform:skewX(-20deg) translateY(-4px)}}
/* panels: move list, options, pause */
.bx-dim{background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.bx-panel{position:absolute;left:7vw;top:10vh;bottom:10vh;width:min(720px,70vw);padding:34px 44px 30px;background:linear-gradient(90deg,rgba(8,7,10,.94),rgba(8,7,10,.86));
  clip-path:polygon(0 0,100% 0,94% 100%,0 100%);overflow:hidden;display:flex;flex-direction:column}
.bx-panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent)}
.bx-panel h2{margin:0 0 4px;font-size:clamp(30px,3vw,48px);line-height:1}
.bx-panel .sub{font:400 21px/1.2 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:16px}
.bx-scroll{flex:1;overflow:auto;padding-right:34px;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
.bx-sec{margin:14px 0 6px;font:700 15px/1 var(--f-title);letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.bx-move{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:7px 0 5px;border-bottom:1px solid rgba(255,255,255,.07)}
.bx-move .mn{font:500 25px/1.05 var(--f-ui);letter-spacing:.06em;color:#fff;text-transform:uppercase}
.bx-move .mn small{display:block;font:400 18px/1.1 var(--f-ui);letter-spacing:.03em;text-transform:none;color:var(--dim)}
.bx-move .keys{white-space:nowrap;font-size:21px}
.bx-opt{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 18px 8px;cursor:pointer;border-left:3px solid transparent}
.bx-opt.sel{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 30%,transparent),transparent);border-left-color:var(--accent)}
.bx-opt .on{font:500 28px/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.bx-opt .ov{display:flex;align-items:center;gap:12px;font:500 28px/1 var(--f-ui);color:var(--accent-hi);min-width:220px;justify-content:flex-end}
.bx-opt .track{width:150px;height:8px;transform:skewX(-20deg);background:rgba(255,255,255,.14)}
.bx-opt .track i{display:block;height:100%;background:var(--accent)}
.bx-back{margin-top:14px;font:400 19px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:rgba(239,231,218,.5)}
.bx-pause .bx-list{top:28vh}
.bx-pause-obj{position:absolute;right:6vw;top:12vh;max-width:36vw;text-align:right}
.bx-pause-obj .k{font:700 15px/1 var(--f-title);letter-spacing:.2em;color:var(--accent)}
.bx-pause-obj .v{margin-top:6px;font:500 30px/1.1 var(--f-ui);color:#fff;letter-spacing:.04em}
.bx-pause-obj .d{margin-top:4px;font:400 21px/1.2 var(--f-ui);color:var(--dim)}
/* results */
.bx-results{background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,.35),rgba(0,0,0,.85))}
.bx-res-title{position:absolute;left:0;right:0;top:9vh;text-align:center;font-size:clamp(60px,9vw,150px);line-height:1}
.bx-res-title.lose{background:linear-gradient(180deg,#fff,#ff9a8a 35%,#d0180e 70%,#4a0402);-webkit-background-clip:text;background-clip:text}
.bx-res-new{position:absolute;left:0;right:0;top:calc(9vh + clamp(64px,9.4vw,158px));text-align:center;font:600 26px/1 var(--f-ui);letter-spacing:.4em;color:var(--meter-b);text-transform:uppercase}
.bx-stats{position:absolute;left:50%;top:40vh;transform:translateX(-62%);width:min(560px,52vw);display:flex;flex-direction:column;gap:8px}
.bx-stat{display:flex;justify-content:space-between;align-items:baseline;padding:6px 26px 2px 30px;background:linear-gradient(90deg,rgba(8,7,10,.9),rgba(8,7,10,.55));transform:skewX(-14deg);opacity:0}
.bx-stat>*{transform:skewX(14deg)}
.bx-stat span{font:400 26px/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.bx-stat b{font:600 42px/1 var(--f-ui);color:#fff}
.bx-grade{position:absolute;left:calc(50% + min(560px,52vw) * .42);top:39vh;width:190px;height:190px;border-radius:50%;display:grid;place-items:center;opacity:0;
  background:radial-gradient(circle at 40% 35%,color-mix(in srgb,var(--accent) 40%,#000),#0b0a0d 70%);box-shadow:0 0 0 4px var(--accent),0 0 0 9px rgba(0,0,0,.8),0 0 40px color-mix(in srgb,var(--accent) 60%,transparent)}
.bx-grade span{font-size:128px;line-height:1;margin-top:10px}
.bx-grade small{position:absolute;top:-30px;font:600 20px/1 var(--f-ui);letter-spacing:.3em;color:var(--dim)}
.bx-res-actions{position:absolute;left:0;right:0;bottom:9vh;display:flex;justify-content:center;gap:28px}
.bx-res-actions .bx-item{width:auto;padding:10px 36px 4px;font-size:36px;background:rgba(8,7,10,.7);transform:skewX(-18deg);color:rgba(239,231,218,.6)}
.bx-res-actions .bx-item.sel{background:var(--accent);color:#fff;transform:skewX(-18deg) scale(1.06);text-shadow:0 2px 0 rgba(0,0,0,.5)}
@media (max-height:760px){.bx-item{font-size:38px}.bx-cursor{height:42px}.bx-list{top:34vh}.bx-map,.bx-map-frame{display:none}.bx-combo .n{font-size:80px}}
@media (max-width:900px){.bx-bar{width:46vw}.bx-cards{flex-direction:column;align-items:center}.bx-card{flex:1 1 0;width:84vw;max-width:none}.bx-stats{transform:translateX(-50%)}.bx-grade{display:none}}
@media (prefers-reduced-motion:reduce){.bx-art,.bx-press,.bx-bar.low,.bx-meter.full .bx-seg>i,.bx-timer.low,.bx-card.sel .p1,.bx-rune{animation:none}}