.draw-layer{position:absolute;inset:0;z-index:20;display:none;background:#03050a}.draw-layer.active{display:block}
#results{cursor:pointer}
#results .result-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:11px;letter-spacing:.14em;color:rgba(220,240,255,.45);pointer-events:none;animation:hintPulse 2s ease-in-out infinite}
@keyframes hintPulse{50%{opacity:.35}}
.topbar{display:none}
.noise,.lines{pointer-events:none;position:absolute;inset:0;z-index:80}.noise{opacity:.1;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");animation:noise .7s steps(3) infinite}.lines{opacity:.25;background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 4px)}
@keyframes noise{to{transform:translate(2%,-2%)}}

/* intro */
#intro{background:#020204;opacity:0;transition:opacity .4s,background-color var(--map-reveal-ms,450ms) ease-out;overflow:visible;z-index:2}.active#intro{opacity:1}
#intro.is-revealing-map{background:transparent;pointer-events:none}
#intro.is-revealing-map .core:after,#intro.is-revealing-map .core i{opacity:0;transition:opacity .35s ease}
.core{position:absolute;left:50%;top:51%;width:min(340px,44vw);height:min(340px,44vw);transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;overflow:visible}
.core:before,.core:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,49,87,.72);box-shadow:0 0 28px rgba(255,49,87,.32),inset 0 0 34px rgba(255,49,87,.15);transform-origin:50% 50%;pointer-events:none}
.core:before{inset:7%;transform:scale(1);opacity:1}
.core:after{inset:26%;transform:scale(1)}
#intro.active .core:before{animation:introOuterRing var(--intro-ring-ms,1050ms) ease-out forwards}
#intro.active .core:after{animation:introPulse var(--intro-pulse-ms,2s) ease-in-out infinite}
.core i{position:absolute;inset:-45%;background:linear-gradient(90deg,transparent 49.7%,rgba(255,49,87,.35) 50%,transparent 50.3%),linear-gradient(0deg,transparent 49.7%,rgba(255,49,87,.35) 50%,transparent 50.3%)}
.intro-core{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:clamp(4px,.8vh,8px)}
.intro-warn{position:relative;width:min(54px,7.8vw);height:min(48px,6.9vw);flex:none;filter:drop-shadow(0 0 12px rgba(255,49,87,.85)) drop-shadow(0 0 26px rgba(255,49,87,.48));animation:introWarnPulse var(--intro-pulse-ms,2s) ease-in-out infinite}
.intro-warn-shape{position:absolute;inset:0;clip-path:polygon(50% 0%,100% 100%,0% 100%);background:#ff3157}
.intro-warn-shape:before{content:"";position:absolute;inset:0;clip-path:polygon(50% 0%,100% 100%,0% 100%);background:linear-gradient(180deg,#181018 0%,#0a060a 42%,#050204 100%);transform:scale(.84);transform-origin:50% 62%}
.intro-warn-mark{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);font-size:clamp(22px,3.6vw,30px);font-weight:900;line-height:1;z-index:1;color:var(--red);text-shadow:0 0 8px rgba(255,49,87,.95),0 0 16px rgba(255,49,87,.55),0 0 24px rgba(255,49,87,.32)}
.intro-core b{margin:0;letter-spacing:.22em;text-shadow:0 0 16px var(--red);white-space:nowrap;line-height:1.2}
@keyframes introOuterRing{0%,57%{transform:scale(1);opacity:1}28%{transform:scale(1.08);opacity:.82}100%{transform:scale(16);opacity:0}}
@keyframes introPulse{50%{transform:scale(1.08);opacity:.52}}
@keyframes introWarnPulse{50%{filter:drop-shadow(0 0 18px rgba(255,49,87,1)) drop-shadow(0 0 36px rgba(255,49,87,.62));opacity:.9}0%,100%{opacity:1}}

.draw-frame{position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;width:auto;overflow:hidden}
.gacha-viewport{aspect-ratio:var(--gacha-frame-aspect);pointer-events:none}
.gacha-viewport>*{pointer-events:auto}

/* map — 平板/PC：高度占满等比裁左右；手机横屏见底部 media query 铺满裁上下 */
#map{background:#03050a;overflow:hidden}
#map.is-revealing{z-index:1}
#map.is-revealing .map-wrap>:not(.map-visual){opacity:0}
#map.is-revealing .map-visual{animation:mapRadialReveal var(--map-reveal-ms,450ms) ease-out forwards}
#map:not(.is-revealing).active .map-wrap>:not(.map-visual):not(.radar){opacity:1;transition:opacity .35s ease}
#map:not(.radar-ready) .radar{opacity:0;visibility:hidden}
#map.radar-ready .radar{opacity:1;visibility:visible;transition:opacity .4s ease,visibility .4s ease}
@keyframes mapRadialReveal{from{clip-path:circle(0% at 50% 51%);opacity:.55}to{clip-path:circle(150% at 50% 51%);opacity:1}}
.map-stage{position:absolute;inset:0;overflow:hidden}
.map-wrap{position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;aspect-ratio:var(--map-aspect);width:auto;--radar-size:22%;overflow:hidden;cursor:crosshair;touch-action:none}
.map-visual{position:absolute;inset:0;transform-origin:50% 50%;border:1px solid rgba(154,219,255,.30);background:
linear-gradient(rgba(4,11,22,.06),rgba(4,11,22,.14)),
var(--map-image) center/100% 100% no-repeat,
#08111f;box-shadow:0 25px 90px rgba(0,0,0,.52),inset 0 0 0 1px rgba(255,255,255,.04);pointer-events:none}
.map-visual.is-map-enter{animation:mapEnterZoom var(--map-enter-ms,650ms) ease-out forwards}
@keyframes mapEnterZoom{from{transform:scale(1)}to{transform:scale(1.05)}}
.map-visual:before{content:"";position:absolute;inset:0;opacity:.35;background:linear-gradient(30deg,transparent 0 8%,rgba(96,177,228,.08) 8.3% 8.8%,transparent 9.1% 31%,rgba(96,177,228,.05) 31.3% 31.8%,transparent 32.1%),linear-gradient(108deg,transparent 0 15%,rgba(96,177,228,.06) 15.3% 15.8%,transparent 16.1% 55%,rgba(96,177,228,.05) 55.3% 55.8%,transparent 56.1%);pointer-events:none}
.grid{position:absolute;inset:0;background-image:linear-gradient(rgba(125,202,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(125,202,255,.04) 1px,transparent 1px);background-size:42px 42px;opacity:.55}
.targets,.beams{position:absolute;inset:0;pointer-events:none}
.prox-ping{position:absolute;left:var(--x);top:var(--y);width:calc(var(--radar-size)*0.32);height:calc(var(--radar-size)*0.32);margin:calc(var(--radar-size)*-0.16);z-index:11;pointer-events:none;opacity:0;visibility:hidden;transform:scale(.85);transition:opacity .28s ease,visibility .28s ease,transform .28s ease}
.prox-ping.is-active,.prox-ping.is-latched{opacity:.58;visibility:visible;transform:scale(1)}
.prox-ping.hidden{opacity:0!important;visibility:hidden!important}
.prox-ping.hidden .prox-ring{animation:none!important}
.prox-fill{position:absolute;inset:22%;border-radius:50%;background:rgba(92,38,48,.14);border:1px solid rgba(110,52,62,.22);box-shadow:inset 0 0 6px rgba(60,24,32,.18)}
.prox-core{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;border:1px solid rgba(130,70,78,.45);background:
repeating-linear-gradient(-48deg,rgba(142,58,68,.72) 0 1.5px,rgba(58,22,30,.78) 1.5px 3px,rgba(142,58,68,.72) 3px 4.5px);
box-shadow:0 0 6px rgba(100,40,50,.28)}
.prox-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(120,55,65,.32);box-shadow:0 0 8px rgba(90,35,45,.16);opacity:0;animation:proxWave 2s ease-out infinite}
.prox-ping::after{content:"";position:absolute;inset:-16%;border-radius:50%;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.1) 2px 4px);opacity:.32;pointer-events:none;mix-blend-mode:multiply}
@keyframes proxWave{0%{transform:scale(.5);opacity:.38}18%{opacity:.38}100%{transform:scale(1.5);opacity:0}}
.target{position:absolute;left:var(--x);top:var(--y);width:29px;height:29px;margin:-14.5px;border-radius:50%;z-index:12;border:1px solid var(--c);background:radial-gradient(circle,var(--c) 0 18%,rgba(255,255,255,.0) 19% 48%,transparent 49%);box-shadow:0 0 34px var(--c);animation:tpulse 1.05s infinite}
.target:before,.target:after{content:"";position:absolute;inset:-11px;border-radius:50%;border:1px solid var(--c);animation:twave 1.45s ease-out infinite}.target:after{animation-delay:.45s}
.target.hidden,.target.hidden:before,.target.hidden:after{opacity:0!important;visibility:hidden;animation:none!important;box-shadow:none;border-color:transparent;background:transparent}.target.reveal{opacity:1}.target.found{opacity:0;transform:scale(.2);transition:.2s ease}
@keyframes tpulse{50%{transform:scale(1.14)}}@keyframes twave{to{transform:scale(1.72);opacity:0}}
.marker{position:absolute;left:var(--x);top:var(--y);z-index:14;pointer-events:none;--pin-anch:11%;--pin-p1-scale:1;transform:translate(-50%,calc(-100% + var(--pin-anch)));opacity:0;animation:pinIn .32s ease-out forwards}
.marker.pin-SR{--pin-p1-scale:1.2}
.marker.pin-SSR{--pin-p1-scale:1.58}
.marker.pin-compact .pin-body{transform:scale(.72)}
.pin-body{position:relative;transform-origin:bottom center;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.pin-art{display:block;width:min(52px,9.8vw);height:auto}
.pin-art.p1{transform:scale(var(--pin-p1-scale));transform-origin:bottom center;transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .4s ease}
.marker.pin-R .pin-art{filter:drop-shadow(0 0 8px rgba(107,189,255,.85)) drop-shadow(0 0 18px rgba(90,150,255,.55)) drop-shadow(0 0 32px rgba(70,130,255,.28))}
.marker.pin-SR .pin-art{filter:drop-shadow(0 0 8px rgba(193,125,255,.9)) drop-shadow(0 0 18px rgba(150,90,255,.58)) drop-shadow(0 0 32px rgba(120,60,255,.3))}
.marker.pin-SSR .pin-art{filter:drop-shadow(0 0 10px rgba(255,216,107,.95)) drop-shadow(0 0 20px rgba(255,180,60,.65)) drop-shadow(0 0 36px rgba(255,140,40,.35))}
.pin-art.p2{position:absolute;left:0;bottom:2.6%;width:100%;opacity:0;transition:opacity .4s ease}
.marker.pin-compact .pin-art.p1{opacity:0}
.marker.pin-compact .pin-art.p2{opacity:1}
@keyframes pinIn{from{opacity:0;transform:translate(-50%,calc(-100% + var(--pin-anch))) scale(.82)}to{opacity:1;transform:translate(-50%,calc(-100% + var(--pin-anch))) scale(1)}}
.radar{position:absolute;left:var(--scan-x);top:var(--scan-y);z-index:18;width:var(--radar-size);height:auto;aspect-ratio:1;margin:calc(var(--radar-size)/-2);transform:rotate(-10deg);filter:drop-shadow(0 0 16px rgba(105,210,255,.38));transition:filter .15s,transform .15s;pointer-events:none;overflow:visible}
.radar.hit{filter:drop-shadow(0 0 32px rgba(255,216,107,.8));transform:rotate(-10deg) scale(1.06)}
.radar .scope{position:relative;z-index:1;width:100%;height:100%;display:block;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
.radar .glass{display:none}
.radar-beacon{position:absolute;inset:-10%;z-index:3;pointer-events:none;opacity:1;transition:opacity .15s}
.radar-beacon.hidden{opacity:0}
.beacon-rotator{position:absolute;inset:0;transform:rotate(var(--beacon-ang,0deg));transition:transform .28s cubic-bezier(.22,1,.36,1)}
.beacon-slot{position:absolute;left:50%;top:0;transform:translate(-50%,-58%);display:flex;flex-direction:row;align-items:flex-end;gap:8px;filter:drop-shadow(0 0 8px rgba(255,45,80,.6))}
.beacon-arc-side{width:24px;height:30px;overflow:visible;flex:none}
.beacon-arc-side:first-child{transform:translate(1px,3px)}
.beacon-arc-side:last-child{transform:translate(-1px,3px)}
.beacon-arc-side path{fill:none;stroke:#ff3148;stroke-width:1.85;stroke-linecap:round}
.beacon-mid{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 1px 2px;flex:none}
.beacon-dot{width:9px;height:9px;border-radius:50%;background:#ff3148;box-shadow:0 0 10px rgba(255,49,87,.9)}
.beacon-chevron{width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:12px solid #ff3148}
.map-hud{display:none}
.track-hud{position:absolute;left:50%;bottom:1.4%;transform:translateX(-50%);z-index:36;display:flex;flex-direction:column;align-items:center;gap:1px;width:min(260px,78%);pointer-events:none;padding:0 4px 1px}
.track-hud::before,.track-hud::after{content:"";position:absolute;top:5px;width:min(28px,7vw);height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28));opacity:.65}
.track-hud::before{right:calc(100% + 5px);transform:rotate(-8deg);transform-origin:right center}
.track-hud::after{left:calc(100% + 5px);transform:rotate(8deg);transform-origin:left center;background:linear-gradient(270deg,transparent,rgba(255,255,255,.28))}
.track-icons{display:flex;align-items:flex-end;justify-content:center;gap:clamp(0px,0.2vw,1px);min-height:clamp(5px,0.8vw,9px)}
.track-icon{display:block;width:clamp(3px,0.45vw,5px);height:clamp(4px,0.7vw,8px);color:rgba(175,190,208,.42);opacity:.82;transition:color .4s ease,opacity .4s ease,filter .4s ease,transform .4s ease}
.track-icon svg{display:block;width:100%;height:100%}
.track-icon.is-found{color:#f3f8ff;opacity:1;filter:drop-shadow(0 0 4px rgba(255,255,255,.35));transform:translateY(-1px)}
.track-divider{position:relative;width:100%;max-width:min(180px,72%);height:1px;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.34) 14%,rgba(255,255,255,.34) 86%,transparent 100%)}
.track-notch{position:absolute;left:50%;top:0;width:0;height:0;transform:translateX(-50%);border-left:3px solid transparent;border-right:3px solid transparent;border-top:2px solid rgba(255,255,255,.34)}
.track-label{margin:0;font-size:clamp(8px,1vw,11px);font-weight:700;letter-spacing:.12em;color:#ff3148;text-shadow:0 0 8px rgba(255,49,87,.34);white-space:nowrap;line-height:1;transition:color .35s ease,text-shadow .35s ease}
.track-label.is-done{color:#f3f8ff;text-shadow:0 0 10px rgba(255,255,255,.32)}
.start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:35;display:flex;gap:12px;padding:0;border:none;background:transparent;box-shadow:none;backdrop-filter:none;transition:opacity .28s}.start.hide{opacity:0;pointer-events:none}

/* results */
#results{background:radial-gradient(circle at 50% 88%,rgba(120,170,255,.22),transparent 42%),radial-gradient(circle at 50% 50%,rgba(211,235,255,.12),transparent 38%),linear-gradient(#09101d,#06070c)}
.resultwrap{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);width:min(860px,80vw)}.resulttitle{display:flex;justify-content:space-between;align-items:end;margin-bottom:10px}.resulttitle h2{margin:0;letter-spacing:.18em;font-size:18px}.resulttitle small{color:rgba(221,240,255,.62);letter-spacing:.08em;font-size:11px}
.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px 7px;perspective:1200px;align-items:end}
.card{position:relative;aspect-ratio:2/3.15;min-height:min(23vh,195px);max-height:215px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#0a1018;box-shadow:0 12px 24px rgba(0,0,0,.42);transform:translateY(20px) rotate(var(--rot)) scale(.9);opacity:0;animation:cardIn .48s cubic-bezier(.2,1.1,.25,1) forwards}
.card.SSR{--main:#ffb035;--main-dim:rgba(255,176,53,.32)}.card.SR{--main:#b96cff;--main-dim:rgba(185,108,255,.28)}.card.R{--main:#5eb5ff;--main-dim:rgba(94,181,255,.26)}
.card:before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 50% 78%,var(--main-dim),transparent 58%),linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.22) 55%,rgba(0,0,0,.55))}
.card-portrait{position:absolute;inset:0 0 28%;z-index:1;background:center top/cover no-repeat}
.card-portrait:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(6,10,16,.35) 78%,rgba(6,10,16,.92))}
.card-foot{position:absolute;left:0;right:0;bottom:0;z-index:2;height:28%;min-height:54px;padding:5px 7px 7px;background:linear-gradient(180deg,rgba(8,12,18,.05),rgba(8,12,18,.88) 35%,#070b12)}
.card-meta{position:relative;z-index:2;max-width:58%;padding-top:0}
.card-serial{font-size:7px;letter-spacing:.05em;color:rgba(214,230,245,.62);line-height:1.15}
.card-name{margin-top:1px;font-size:10px;font-weight:800;line-height:1.1;letter-spacing:.04em;color:#f3f8ff;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.card-class{margin-top:3px;width:24px;height:24px;display:grid;place-items:center;border:1px solid rgba(108,152,188,.5);background:linear-gradient(180deg,#dceef8 0%,#b8d8ec 52%,#9ec6e0 100%);color:#10141c;font-size:9px;font-weight:900;line-height:1;box-sizing:border-box;flex-shrink:0}
.card-class.is-core-break{background:linear-gradient(180deg,#dceef8 0%,#c8dce8 34%,#e8a4ac 70%,#d07080 100%);border-color:rgba(190,130,140,.55)}
.card-class .class-icon{width:20px;height:20px}
.class-icon{display:block;width:20px;height:20px;object-fit:contain;pointer-events:none}
.class-icon-fallback{font-size:inherit;font-weight:900;line-height:1}
.card-tier{position:absolute;right:1px;bottom:4px;z-index:1;font-size:clamp(30px,3.8vw,44px);font-weight:900;line-height:.82;letter-spacing:.06em;color:var(--main);opacity:.78;text-shadow:0 0 18px color-mix(in srgb,var(--main) 55%,transparent);pointer-events:none;user-select:none}
@keyframes cardIn{to{opacity:1;transform:translateY(0) rotate(var(--rot)) scale(1)}}.resultactions{display:flex;justify-content:center;gap:10px;margin-top:14px}
.black{position:absolute;inset:0;background:#000;z-index:60;opacity:0;pointer-events:none;transition:.38s}.black.on{opacity:1}.toast{position:absolute;left:50%;top:16%;z-index:90;transform:translateX(-50%);padding:10px 16px;border:1px solid rgba(255,255,255,.22);background:rgba(3,8,18,.82);box-shadow:0 10px 35px rgba(0,0,0,.36);opacity:0;transition:.24s}.toast.show{opacity:1;top:14%}
.game-overlay{position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;aspect-ratio:var(--gacha-frame-aspect);width:auto;pointer-events:none;z-index:95}
#drawLayer:has(#map.active) .game-overlay{aspect-ratio:var(--map-aspect)}
#drawLayer:has(#door.active) .game-overlay{aspect-ratio:var(--map-aspect)}
.game-overlay .skip-fab{position:absolute;top:max(10px,env(safe-area-inset-top,0px));right:max(4px,env(safe-area-inset-right,0px));pointer-events:auto}
.skip-fab{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 18px;border:none;border-radius:5px;background:rgba(0,0,0,.72);color:#fff;font-size:17px;letter-spacing:.06em;cursor:pointer;backdrop-filter:blur(6px);transition:opacity .2s,background .2s}
.skip-fab:hover{background:rgba(0,0,0,.88)}.skip-fab[hidden]{display:none!important}
.skip-fab .skip-ico{display:inline-flex;align-items:center;gap:1px;font-size:14px;line-height:1;opacity:.95;letter-spacing:0}
.skip-fab .skip-ico:before{content:"▶▶";font-size:13px;transform:scaleX(.82);display:inline-block}
.skip-fab .skip-ico:after{content:"";display:inline-block;width:2px;height:15px;background:currentColor;margin-left:2px;border-radius:1px}
@media(max-width:760px){.map-hud{left:8px;right:8px;bottom:10%}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 6px}.card{min-height:150px;max-height:175px}.card-tier{font-size:32px}.card.mbcc-card .char-card-tier{font-size:32px}.resultwrap{height:82vh;overflow:auto;top:52%}}
@media(max-width:900px) and (orientation:landscape),(orientation:landscape) and (max-height:520px){
  .map-wrap{top:50%;left:50%;transform:translate(-50%,-50%);width:auto;height:auto;min-width:100%;min-height:100%}
  #drawLayer:has(#map.active) .game-overlay,#drawLayer:has(#door.active) .game-overlay{position:fixed;inset:0;left:0;top:0;width:100%;height:100%;min-width:0;min-height:0;transform:none;aspect-ratio:unset;overflow:visible}
  #drawLayer:has(#map.active) .game-overlay .skip-fab,#drawLayer:has(#door.active) .game-overlay .skip-fab{
    position:fixed;
    top:calc((100vh - min(100vh, 100vw * 576 / 1024)) / 2 + max(8px, env(safe-area-inset-top, 0px)));
    right:calc(max(0px, (100vw - min(100vw, 100vh * 1024 / 576)) / 2 - 66px) + env(safe-area-inset-right, 0px));
    left:auto;
    bottom:auto;
    transform:none;
    z-index:10002
  }
  .pin-art{width:min(38px,6.8vw)}
  .resultwrap{width:max-content;max-width:98vw;top:50%;max-height:96vh;overflow:auto}
  .resulttitle{margin-bottom:8px}
  .resulttitle h2{font-size:17px}
  #results .cards{
    --m-card-h:min(36vh,152px);
    --m-card-w:calc(var(--m-card-h) * 2 / 3.15);
    grid-template-columns:repeat(5,var(--m-card-w));
    justify-content:center;
    width:max-content;
    max-width:100%;
    margin-inline:auto;
    gap:4px 3px
  }
  .card,.card.mbcc-card{width:var(--m-card-w);min-height:0;max-height:var(--m-card-h);aspect-ratio:2/3.15}
  .card-foot,.card.mbcc-card .char-card-info{min-height:50px;padding:5px 7px 7px}
  .card-name,.card.mbcc-card .char-card-name{font-size:10px}
  .card-serial,.card.mbcc-card .char-card-serial{font-size:5px;line-height:1.1}
  .card-class,.card.mbcc-card .char-card-class{width:22px;height:22px;font-size:9px}
  .card-class .class-icon,.card.mbcc-card .char-card-class .class-icon{width:18px;height:18px}
  .card-tier,.card.mbcc-card .char-card-tier{font-size:clamp(28px,4vw,36px)}
  #results .result-hint{bottom:10px;font-size:10px}
}