:root {
--el-metal: #C9A227;
--el-wood:  #3A8F5D;
--el-water: #2E6FA3;
--el-fire:  #C0392B;
--el-earth: #8C6D3F;

--ink:      var(--k-stone-d);
--ink-2:    var(--k-stone-d);
--ink-3:    var(--k-stone);
--paper:    var(--k-on-dark);
--paper-2:  var(--k-on-dark-2);
--gold:     var(--k-gold);
--cinnabar: var(--k-cin);
--line:     rgba(var(--k-gold-rgb), .28);
--ok:       #5fa96b;
--bad:      #c0563f;

--lesson-ink:  var(--k-ink);
--lesson-line: rgba(var(--k-ink-rgb), .55);

--stat-atk: #f0a58c;
--stat-hp:  #a6d9a8;

--slot-gap: 4px;

--card-ground: #06111f;

--r-card:  6px;
--r-panel: 10px;
--radius: var(--r-card);

--gutter: 12px;
--panel-pad: 8px;

--band-h: 16px;

--sa-top:    var(--safe-area-inset-top,    env(safe-area-inset-top,    0px));
--sa-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));

--host-nav:  0px;
--edge-gap:  8px;
--top-clear: calc(var(--sa-top) + var(--host-nav) + var(--edge-gap));

--xhs-side: 0px;

--vh: 1vh;
--vw: 1vw;
}

html.host-xhs { --xhs-side: 106px; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { touch-action: manipulation; }

html, body {
margin: 0;
padding: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
background: #0b1a2e;
color: var(--paper);

font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, "Helvetica Neue", "Songti SC", serif;
font-size: 14px;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
overscroll-behavior: none;
}

body { display: flex; justify-content: center; }

#app {
width: 100%;
max-width: 430px;
min-height: 100vh;
position: relative;
background:
radial-gradient(120% 60% at 50% 0%, #2a4a70 0%, rgba(42,74,112,0) 60%),
linear-gradient(180deg, var(--ink) 0%, #0c1a2c 100%);
box-shadow: 0 0 60px rgba(0,0,0,.8);
overflow-x: hidden;
}

.screen { padding: 8px 12px calc(12px + var(--sa-bottom)); }
.screen[hidden] { display: none; }

.input {
width: 100%;
border: 1px solid var(--line);
background: rgba(0,0,0,.3);
color: var(--paper);
border-radius: var(--radius);
padding: 12px;
font-size: 16px;
font-family: inherit;
min-height: 46px;
}

.input { -webkit-user-select: text; user-select: text; }
.input::placeholder { color: rgba(232,221,198,.32); }
.input:focus { outline: none; border-color: var(--gold); }

.field { display: block; margin-bottom: 10px; }
.field-label { display: block; font-size: 12px; color: var(--paper-2); margin-bottom: 4px; letter-spacing: .1em; }

.hint { font-size: 11px; color: rgba(232,221,198,.62); text-align: center; margin-top: 10px; line-height: 1.7; }

.start-art { height: calc(28 * var(--vh)); min-height: 130px; max-height: 240px; }

.start-wrap { padding-top: 0; }
.brand { text-align: center; margin-bottom: 14px; }
.brand-title {
font-size: 34px; margin: 0 0 6px;
letter-spacing: .34em; text-indent: .34em;
color: #f4e6c2; font-weight: 600;
font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
text-shadow: 0 2px 18px rgba(0,0,0,.9), 0 0 26px rgba(217,180,90,.28);
}
.brand-sub { margin: 0; font-size: 12px; color: var(--paper-2); letter-spacing: .16em; }

.ring-deco {
height: 34px; margin: 0 auto 14px;
display: flex; align-items: center; justify-content: center;
gap: 8px;
}
.ring-node {
width: 26px; height: 26px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12px; color: #0a1420; font-weight: 700;
}

.today-line {
display: flex; align-items: center; justify-content: center;
flex-wrap: wrap; gap: 8px;
margin-bottom: 10px;
}
.today-tag {
border: 1px solid var(--gold); border-radius: 12px;
color: #f3e2b6; background: rgba(217,180,90,.12);
padding: 3px 11px; font-size: 12px; letter-spacing: .1em;
}
.today-date { font-size: 13px; color: var(--paper); letter-spacing: .06em; }
.today-note { font-size: 11px; color: var(--paper-2); opacity: .7; letter-spacing: .04em; }
.daily-best {
text-align: center; font-size: 12px; color: var(--gold);
margin-bottom: 10px; letter-spacing: .06em;
}
.daily-best[hidden] { display: none; }

.streak-line {
display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
font-size: 12px; color: #f3e2b6; margin: -4px 0 10px; letter-spacing: .04em;
}
.streak-line[hidden] { display: none; }
.streak-ico { width: 15px; height: 15px; object-fit: contain; }
.streak-sub { color: var(--paper-2); }
.streak-sub::before { content: "· "; }
.streak-sub.done { color: var(--ok); }
.streak-sub.done::before { content: "· ✓ "; }

.poster-record.poster-streak { margin: 5px 3px 0; border-color: var(--gold); background: rgba(217,180,90,.14); color: #f3e2b6; white-space: nowrap; }

.start-choice { display: flex; flex-direction: column; gap: 8px; }
.start-choice[hidden] { display: none; }

.resume-box { display: flex; flex-direction: column; }
.resume-box[hidden] { display: none; }

@media (max-height: 700px) {
#scr-start.has-resume .start-art { height: calc(18 * var(--vh)); min-height: 100px; }
.has-resume .brand { margin-bottom: 8px; }
.has-resume .crest-lg { width: 104px; height: 61px; }
.has-resume .brand-title { font-size: 30px; }
.has-resume .ring-deco { height: 28px; margin-bottom: 8px; }
.has-resume .field { margin-bottom: 6px; }
.has-resume .today-line { margin-bottom: 6px; }
.has-resume .daily-best { margin-bottom: 6px; }
.has-resume .hint { margin-top: 6px; line-height: 1.5; }
}

.topbar {
display: flex; align-items: center; justify-content: space-between;

padding: calc(4px + var(--sa-top)) var(--panel-pad) 4px;

border-width: 0 1px 1px;
border-style: solid;
border-color: transparent transparent var(--line);
margin-bottom: 8px;
}
.tb-left, .tb-right { display: flex; align-items: center; gap: 8px; }
.stage-no { font-size: 15px; letter-spacing: .1em; color: #f0e2bf; white-space: nowrap; }

.stage-no.long { font-size: 12px; letter-spacing: .04em; }
.el-badge {
width: 26px; height: 26px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; color: #0a1420;
}

.lamps, .result-lamps, .poster-lamps {
display: inline-flex; align-items: flex-end; gap: 4px;
}
.lamps { font-size: 12px; }
.gold {
color: var(--gold); font-size: 14px; font-weight: 700;
padding: 2px 8px;
}
.gold::before { content: attr(data-unit); font-weight: 400; font-size: 11px; opacity: .8; }

.panel { margin-bottom: 8px; }
.panel-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 4px; min-height: 18px;
}
.panel-title { font-size: 12px; color: var(--gold); letter-spacing: .14em; }
.panel-note { font-size: 11px; color: rgba(232,221,198,.62); }

.row { display: grid; gap: var(--slot-gap); }
.row-board  { grid-template-columns: repeat(6, 1fr); }
.row-enemy  { grid-template-columns: repeat(6, 1fr); }
.row-bench  { grid-template-columns: repeat(var(--bench-cols, 3), 1fr); }
.row-shop   { grid-template-columns: repeat(4, 1fr); }

.slot {
position: relative;
border-radius: var(--radius);
min-height: 70px;
display: flex; align-items: center; justify-content: center;
}
.row-shop .slot { min-height: 68px; }
.row-enemy .slot { min-height: 56px; }
.slot.drop-hot { border-color: var(--gold); background: rgba(217,180,90,.12); }
.slot-idx { font-size: 10px; color: rgba(232,221,198,.16); }

.bench-strip {
display: flex; align-items: center; gap: 6px;
margin-bottom: 8px;
padding: 4px;
background: rgba(0,0,0,.24);
border-radius: var(--r-card);
box-shadow: inset 0 2px 6px rgba(0,0,0,.5);
}
.bench-strip[hidden] { display: none; }
.bench-tag {
flex: none; padding: 0 2px;
font-size: 10px; letter-spacing: .1em;
color: rgba(217,180,90,.75);
}
.bench-strip .row-bench { flex: 1; min-width: 0; }

.bench-strip[data-cols="5"] { gap: 4px; }
.bench-strip[data-cols="5"] .row-bench { gap: 3px; }
.bench-strip[data-cols="5"] .bench-tag { font-size: 9px; letter-spacing: 0; }
.bench-strip[data-cols="5"] .card-name { font-size: 10px; }
.bench-strip[data-cols="5"] .card-name.long { font-size: 8px; }
.bench-strip[data-cols="5"] .card-cost { min-width: 13px; height: 13px; font-size: 9px; line-height: 13px; }
.bench-strip[data-cols="5"] .card-flags i { font-size: 8px; }
.row-bench .slot {
min-height: 32px;
}

.bench-strip.bench-in { animation: benchIn 260ms cubic-bezier(.22,.7,.3,1); }
@keyframes benchIn {
from { opacity: 0; transform: translateY(-8px); }
to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.bench-strip.bench-in { animation: none; }
}

.slot.slot-beckon {
border-color: rgba(217,180,90,.5);
animation: slotBeckon 2.4s ease-in-out infinite;
}
@keyframes slotBeckon {
0%, 100% { box-shadow: inset 0 0 0 0 rgba(217,180,90,0); background: rgba(0,0,0,.18); }
50%      { box-shadow: inset 0 0 14px 1px rgba(217,180,90,.22); background: rgba(217,180,90,.07); }
}
@media (prefers-reduced-motion: reduce) {
.slot.slot-beckon {
animation: none;
box-shadow: inset 0 0 10px rgba(217,180,90,.16);
background: rgba(217,180,90,.05);
}
}

.card {
position: relative;
width: 100%; height: 100%;
min-height: 70px;
border: 2px solid var(--el-metal);
border-radius: var(--radius);

--card-tint: rgba(255,255,255,0);
background-color: var(--card-ground);
background-image:
linear-gradient(165deg, rgba(255,255,255,.07), rgba(0,0,0,.35)),
linear-gradient(0deg, var(--card-tint), var(--card-tint));
display: block;
cursor: pointer;
touch-action: none;
user-select: none;
overflow: hidden;
}
.row-shop .card { min-height: 64px; }
.row-bench .card { min-height: 30px; border-width: 1px; }
.row-enemy .card { min-height: 50px; }

.card-art {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: 50% 0;
pointer-events: none;
-webkit-user-drag: none;
}

.card.el-metal { border-color: var(--el-metal); --card-tint: rgba(201,162,39,.14); }
.card.el-wood  { border-color: var(--el-wood);  --card-tint: rgba(58,143,93,.14); }
.card.el-water { border-color: var(--el-water); --card-tint: rgba(46,111,163,.16); }
.card.el-fire  { border-color: var(--el-fire);  --card-tint: rgba(192,57,43,.14); }
.card.el-earth { border-color: var(--el-earth); --card-tint: rgba(140,109,63,.16); }

.card-bar {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 12px 3px 2px;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 38%, rgba(0,0,0,.88) 100%);
pointer-events: none;
}
.card.no-art .card-bar {
top: 0; padding: 0 3px;
background: none;
display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.card.no-art .card-stats { width: 100%; gap: 10px; }
.card.no-art:not(.card-bt) .stat-atk::after { content: "/"; color: rgba(232,221,198,.35); margin-left: 5px; font-weight: 400; }

.card-name {
display: block; text-align: center;
font-size: 12px; letter-spacing: .02em; color: #f6ecd6;
line-height: 1.15; word-break: keep-all;
text-shadow: 0 1px 3px #000, 0 0 6px rgba(0,0,0,.8);
}
.card-name.long { font-size: 10px; }
.row-enemy .card-name { font-size: 11px; }
.row-enemy .card-name.long { font-size: 9px; }
.row-bench .card-name { font-size: 11px; }
.row-bench .card-name.long { font-size: 9px; }

.card-cost {
position: absolute; top: 0; left: 0;
min-width: 15px; height: 15px; padding: 0 3px;
font-size: 10px; line-height: 15px; text-align: center;
color: #0a1420; font-weight: 700;
border-bottom-right-radius: 6px;
z-index: 2;
}

.card-eldot {
position: absolute; top: 3px; right: 3px;
width: 8px; height: 8px; border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.6);
z-index: 2;
}

.card-flags {
position: absolute; right: 2px; top: 0;
display: flex; align-items: center; gap: 2px;
line-height: 1;
}
.card.no-art .card-flags { position: static; justify-content: center; margin-bottom: 2px; }
.card-flags i { font-style: normal; font-size: 9px; }
.mk-star { color: var(--gold); letter-spacing: -1px; text-shadow: 0 1px 2px #000; }

.mk-star3 {
color: #fff3c8; font-size: 8px;
text-shadow: 0 1px 2px #000, 0 0 6px rgba(255,214,110,.9);
}
.mk-taunt { color: #f0d79a; background: rgba(10,24,44,.85); border: 1px solid rgba(240,215,154,.55); border-radius: 3px; padding: 0 2px; line-height: 11px; }
.mk-king { color: #f3e2b6; background: rgba(184,66,47,.9); border-radius: 3px; padding: 0 3px; line-height: 11px; }

.card-stats {
display: flex; justify-content: space-between;
padding: 0 2px;
font-size: 11px; font-weight: 700;
text-shadow: 0 1px 3px #000;
}

.row-bench .card-stats { display: none; }
.stat-atk { color: var(--stat-atk); }
.stat-hp  { color: var(--stat-hp); }

.stat-cell { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.stat-ico {
flex: none;
height: .9em; width: auto;
object-fit: contain;
vertical-align: middle;
}
.stat-word {
font-style: normal; font-weight: 700;
font-size: .78em; line-height: 1;
letter-spacing: .02em; opacity: .9;
flex: none; white-space: nowrap;
}
.stat-dot { font-style: normal; color: rgba(232,221,198,.55); flex: none; }
.card.dead-unit { opacity: .22; filter: grayscale(1); }

.card-shield {
position: absolute; top: 16px; right: 3px;
font-size: 10px; color: #bcd7f0; z-index: 2;
text-shadow: 0 1px 3px #000;
}
.card.selected { box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(217,180,90,.5); }
.card.dragging { opacity: .3; }

.drag-ghost {
position: fixed; z-index: 90; pointer-events: none;
width: 74px; opacity: .92; transform: translate(-50%, -50%) scale(1.05);
}

html.land .card.drag-ghost { position: fixed; }

.lamp {
position: relative; display: inline-block; flex: none;
width: 1em; height: 1.34em;
}

.lamp::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: .46em;
border-radius: .06em .06em 62% 62% / .06em .06em 100% 100%;
background: linear-gradient(180deg, #7d6130 0%, #4a3717 55%, #291d0c 100%);
box-shadow: inset 0 .07em 0 rgba(255,231,168,.42);
}

.lamp-on::after {
box-shadow: inset 0 .07em 0 rgba(255,231,168,.6), inset 0 -.16em .3em rgba(255,150,30,.3);
}

.lamp-flame {
position: absolute; left: 50%; bottom: .34em;
width: .5em; height: .5em; margin-left: -.25em;
border-radius: 0 50% 50% 50%;
transform: scale(1, 1.3) rotate(45deg);

background: radial-gradient(circle at 68% 68%,
#fff9e2 0%, #ffe294 30%, #f4ad24 62%, #c8790f 100%);
}

.lamp::before {
content: ''; position: absolute; left: 50%; bottom: .8em;
width: .26em; height: .85em; margin-left: -.13em;
border-radius: 50%;
background: linear-gradient(180deg,
rgba(240,232,212,0) 0%, rgba(240,232,212,.78) 45%, rgba(240,232,212,0) 100%);
filter: blur(.5px);
opacity: 0; pointer-events: none;
}

.lamp-on .lamp-flame {
box-shadow: 0 0 .34em rgba(255,196,84,.55), 0 0 .9em rgba(255,170,40,.3);
animation: lampSway 2.8s ease-in-out infinite;
}

.lamp:nth-child(2) .lamp-flame { animation-delay: -.9s; }
.lamp:nth-child(3) .lamp-flame { animation-delay: -1.8s; }

.lamp-off .lamp-flame { opacity: 0; transform: scale(.3, .3) rotate(45deg); }
.lamp-off::after {
background: linear-gradient(180deg, #3b3126 0%, #241d13 55%, #14100a 100%);
box-shadow: inset 0 1px 0 rgba(232,221,198,.10);
}

.lamp-snuff .lamp-flame { animation: lampOut 340ms ease-in forwards; }
.lamp-snuff::before { animation: lampSmoke 640ms ease-out 160ms forwards; }
.lamp-snuff::after  { animation: lampDim 800ms ease-out forwards; }

@keyframes lampSway {
0%, 100% { transform: scale(1, 1.3) rotate(45deg);     opacity: 1; }
34%      { transform: scale(.96, 1.44) rotate(46.5deg); opacity: .93; }
68%      { transform: scale(1.03, 1.24) rotate(43.5deg); opacity: 1; }
}

@keyframes lampOut {
0%   { transform: scale(1, 1.3) rotate(45deg);   opacity: 1; }
55%  { transform: scale(.5, 1.6) rotate(45deg);  opacity: .9; }
100% { transform: scale(.12, .22) rotate(45deg); opacity: 0; }
}
@keyframes lampSmoke {
0%   { opacity: 0; transform: translateY(.15em) scaleX(.7); }
26%  { opacity: 1; }
100% { opacity: 0; transform: translateY(-1.2em) scaleX(1.7) skewX(10deg); }
}
@keyframes lampDim {
0%   { filter: brightness(1); }
100% { filter: brightness(.45); }
}

@media (prefers-reduced-motion: reduce) {
.lamp-on .lamp-flame { animation: none; }
.lamp-snuff .lamp-flame {
animation: none;
opacity: 0; transform: scale(.12, .22) rotate(45deg);
}
.lamp-snuff::before { animation: none; opacity: 0; }
.lamp-snuff::after  { animation: none; filter: brightness(.45); }
}

.bond-strip {
display: flex; flex-wrap: nowrap; align-items: center;
gap: 4px; margin-top: 4px; min-height: 18px;
}
.bond-tag {
font-size: 10px; padding: 2px 8px; border-radius: 3px;
border: 1px solid currentColor; opacity: .95;
flex: 0 1 auto; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bond-tag.t3 { font-weight: 700; box-shadow: 0 0 8px currentColor inset; }

.bond-tag.t5 {
font-weight: 700;
color: #ffe6a8 !important;
border-color: var(--gold);
background: rgba(217,180,90,.16);
box-shadow: 0 0 10px rgba(217,180,90,.5) inset, 0 0 8px rgba(217,180,90,.35);
}
.bond-zt { color: var(--gold); border-color: var(--gold); font-weight: 700; }
.bond-none { font-size: 10px; color: rgba(232,221,198,.62); }

.actionbar { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; margin-top: 8px; }

.tip {
text-align: center; font-size: 11px; color: rgba(232,221,198,.62);
margin-top: 4px; min-height: 16px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.arena {
flex: 1 1 auto;
display: flex; flex-direction: column; justify-content: space-evenly;
min-height: 0;
}

.field-side { flex: 0 0 auto; margin: 0; position: relative; }
.side-label {
position: absolute; left: 0; top: -13px;
font-size: 10px; letter-spacing: .1em;
}

.side-enemy { color: #e8735c; }
.side-player { color: var(--ok); }

.row-bt { grid-template-columns: repeat(6, 1fr); }
.row-bt .slot {
min-height: 0;
aspect-ratio: 65 / 126;
border-radius: 10px;
}

.clash-line {

position: relative; z-index: 46;

flex: 0 1 100px; min-height: 64px;
margin: 0;
display: flex; align-items: center; justify-content: center;
font-size: 12px; color: var(--gold); letter-spacing: .1em;
text-align: center;

background:
radial-gradient(ellipse 58% 58% at 50% 50%, rgba(217,180,90,.11), rgba(0,0,0,0) 74%),
linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,0) 38%, rgba(0,0,0,0) 62%, rgba(0,0,0,.22));
}

.clash-line::before, .clash-line::after {
content: ""; position: absolute; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg,
rgba(217,180,90,0), rgba(217,180,90,.42) 22%, rgba(217,180,90,.42) 78%, rgba(217,180,90,0));
}
.clash-line::before { top: 0; }
.clash-line::after { bottom: 0; }

.clash-line > span { display: inline-block; }
.clash-line > span.skill-cast { font-size: 14px; font-weight: 700; animation: bannerIn .26s ease-out; }
.clash-line > span.bond-cast { font-size: 13px; animation: bannerIn .26s ease-out; }
.clash-line > span.counter-cast { font-size: 15px; font-weight: 700; animation: bannerPop .3s ease-out; }

.clash-line > span.result-win { font-size: 16px; font-weight: 700; }
.clash-line > span.result-lose { font-size: 16px; font-weight: 700; }
@keyframes bannerIn {
0% { opacity: 0; transform: translateY(4px); }
100% { opacity: 1; transform: none; }
}
@keyframes bannerPop {
0% { opacity: .3; transform: scale(.82); }
60% { transform: scale(1.12); }
100% { opacity: 1; transform: scale(1); }
}

.card.casting {
box-shadow: 0 0 0 2px rgba(255,217,138,.85), 0 0 16px rgba(255,207,92,.55);
animation: castPulse .5s ease-in-out;
}
@keyframes castPulse {
0%,100% { transform: scale(1); }
45% { transform: scale(1.08); }
}

.card.lunge-down { transform: translateY(14px) scale(1.05); }
.card.lunge-up { transform: translateY(-14px) scale(1.05); }

.slot.flight-host { z-index: 40; }
.card.flying {
z-index: 41;
will-change: transform;
box-shadow: 0 10px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(255,217,138,.4);

animation: none !important;
}

.field-side, .row-board, .row-enemy, .row-bt, .arena { overflow: visible; }
.card { transition: transform .16s ease, opacity .25s ease; }
.card.hurt { animation: shake .18s linear; }
@keyframes shake {
0%,100% { filter: none; }
50% { filter: brightness(1.9) saturate(.4); }
}

.float {
position: absolute; left: 50%; top: 6%;
transform: translateX(-50%);
font-size: 15px; font-weight: 700;
line-height: 1;
white-space: nowrap;
pointer-events: none;
animation: floatUp .7s ease-out forwards;
text-shadow: 0 1px 3px #000;
z-index: 5;
}

.float.crit { font-size: 18px; }
.float.burn { color: #ff6b3d; font-size: 12px; }
.float.heal { color: #8ce09a; }
.float.dodge { color: #9fd7ff; font-size: 12px; }
.float.shield { color: #bcd7f0; font-size: 12px; }

.float.skill { color: #e8c26a; font-size: 12px; letter-spacing: .06em; }
.float.debuff { color: #9fd4ff; font-size: 13px; }
.float.perm { color: #ffcf5c; font-size: 13px; }
.float.summon { color: #9ae0c4; font-size: 13px; }

.float.big { font-size: 18px; letter-spacing: .02em; }

@keyframes floatUp {
0% { opacity: 0; transform: translate(-50%, 2px); }
16% { opacity: 1; }
74% { opacity: 1; transform: translate(-50%, -4px); }
100% { opacity: 0; transform: translate(-50%, -6px); }
}

.burst {
position: absolute; left: 0; top: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 30;
--burst-ms: 480ms;
--burst-w: 80px;
--burst-rot: 8deg;

--dmg-fs: clamp(19px, calc(6 * var(--vw)), 26px);
}
.burst.small { --burst-w: 58px; --burst-rot: -8deg;
--dmg-fs: clamp(15px, calc(4.8 * var(--vw)), 20px); }
.burst.crit  { --burst-w: 104px;
--dmg-fs: calc(clamp(19px, calc(6 * var(--vw)), 26px) * 1.2); }

.burst-img {
position: absolute; left: 50%; top: 50%; z-index: 1;
width: var(--burst-w); height: var(--burst-w);
margin-left: calc(var(--burst-w) / -2);
margin-top: calc(var(--burst-w) / -2);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
opacity: 0;
animation: burstPop var(--burst-ms) ease-out forwards;
}
.burst.el-metal .burst-img { background-image: url("../assets/ui/burst_metal.webp"); }
.burst.el-wood  .burst-img { background-image: url("../assets/ui/burst_wood.webp"); }
.burst.el-water .burst-img { background-image: url("../assets/ui/burst_water.webp"); }
.burst.el-fire  .burst-img { background-image: url("../assets/ui/burst_fire.webp"); }
.burst.el-earth .burst-img { background-image: url("../assets/ui/burst_earth.webp"); }

@keyframes burstPop {
0%   { opacity: 0; transform: scale(.4) rotate(calc(var(--burst-rot) * -1)); }
10%  { opacity: 1; transform: scale(1.12) rotate(calc(var(--burst-rot) * -.3)); }
22%  { opacity: 1; transform: scale(1) rotate(0deg); }
72%  { opacity: 1; transform: scale(1.02) rotate(calc(var(--burst-rot) * .4)); }
100% { opacity: 0; transform: scale(1.1) rotate(var(--burst-rot)); }
}

.card-bt.hit-shake { animation: hitShake var(--shake-ms, 280ms) ease-out 1; }
.card-bt.hit-shake-hard { animation: hitShakeHard var(--shake-ms, 280ms) ease-out 1; }
@keyframes hitShake {
0%   { transform: translate(0, 0) rotate(0); }
20%  { transform: translate(-4px, 1px) rotate(-1.5deg); }
40%  { transform: translate(4px, -1px) rotate(1.5deg); }
60%  { transform: translate(-3px, 0) rotate(-1deg); }
80%  { transform: translate(2px, 0) rotate(.6deg); }
100% { transform: translate(0, 0) rotate(0); }
}
@keyframes hitShakeHard {
0%   { transform: translate(0, 0) rotate(0) scale(1); }
15%  { transform: translate(-7px, 2px) rotate(-2.5deg) scale(1.03); }
35%  { transform: translate(7px, -2px) rotate(2.5deg) scale(1.03); }
55%  { transform: translate(-5px, 1px) rotate(-1.5deg); }
75%  { transform: translate(3px, 0) rotate(1deg); }
100% { transform: translate(0, 0) rotate(0) scale(1); }
}

.burst-num {
position: absolute; left: 50%; top: 50%; z-index: 2;
transform: translate(-50%, -50%);

display: flex; align-items: flex-start; justify-content: center;
max-width: 100%;
font-size: var(--dmg-fs); font-weight: 700; line-height: 1;
white-space: nowrap;
animation: burstNum 900ms ease-out forwards;
}
.burst-num-i { font-style: normal; display: inline-block; }

.burst.riding { z-index: 45; }

.burst.crit .burst-num-i { animation: burstJolt 60ms linear 1; }

.dmg-marks {
display: flex; flex-direction: column; align-items: center;
flex: none;
margin-left: .1em;
font-size: max(9px, .45em);
line-height: 1.05;
letter-spacing: 0;
}
.dmg-mk { font-style: normal; display: block; }

body.dmg-b .dmg-mk {
text-shadow:
1px 0 0 #1b1208, -1px 0 0 #1b1208, 0 1px 0 #1b1208, 0 -1px 0 #1b1208,
1px 1px 0 #1b1208, 1px -1px 0 #1b1208, -1px 1px 0 #1b1208, -1px -1px 0 #1b1208,
0 1px 4px rgba(4,12,26,.7);
}

.float.has-mk {
display: flex; align-items: flex-start; justify-content: center;
max-width: 100%;
}
.float-num { font-style: normal; display: inline-block; }

.burst-num, .float.dmg, .float.crit, .float.counter, .float.big {
color: #1b1208;
text-shadow:
1px 0 0 #f5ecd8, -1px 0 0 #f5ecd8, 0 1px 0 #f5ecd8, 0 -1px 0 #f5ecd8,
1px 1px 0 #f5ecd8, 1px -1px 0 #f5ecd8, -1px 1px 0 #f5ecd8, -1px -1px 0 #f5ecd8,
0 2px 6px rgba(4,12,26,.65);
}

body.dmg-b .burst-num,
body.dmg-b .float.dmg, body.dmg-b .float.crit,
body.dmg-b .float.counter, body.dmg-b .float.big {
color: #f5ecd8;
text-shadow:
2px 0 0 #1b1208, -2px 0 0 #1b1208, 0 2px 0 #1b1208, 0 -2px 0 #1b1208,
2px 1px 0 #1b1208, 2px -1px 0 #1b1208, -2px 1px 0 #1b1208, -2px -1px 0 #1b1208,
1px 2px 0 #1b1208, -1px 2px 0 #1b1208, 1px -2px 0 #1b1208, -1px -2px 0 #1b1208,
0 2px 8px rgba(4,12,26,.7);
}

@keyframes burstNum {
0%   { opacity: 0; transform: translate(-50%,-50%) scale(.6); }
10%  { opacity: 1; transform: translate(-50%,-50%) scale(1.12); }
22%  { transform: translate(-50%,-50%) scale(1); }
72%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
100% { opacity: 0; transform: translate(-50%,-50%) scale(1.06); }
}
@keyframes burstJolt {
0%   { transform: translate(0, 0); }
25%  { transform: translate(2px, -1px); }
55%  { transform: translate(-2px, 1px); }
80%  { transform: translate(1px, 1px); }
100% { transform: translate(0, 0); }
}

.battle-log {
max-height: 52vh; overflow-y: auto;
margin: 10px 0 4px;
border: 1px solid var(--line); border-radius: var(--radius);
padding: 8px 10px;
font-size: 12px; line-height: 1.8;
color: rgba(232,221,198,.72);
background: rgba(0,0,0,.28);
}
.log-line.win { color: var(--ok); }
.log-line.lose { color: var(--bad); }
.log-line.bond { color: var(--gold); }
.log-line.skill { color: #d8b46a; }

.enemy-note {
margin-top: 4px; font-size: 10px; line-height: 1.5;
color: rgba(232,221,198,.58); letter-spacing: 0;
}

.card.summoned { animation: popIn .3s ease-out; }
.card.perm-buffed { box-shadow: inset 0 0 0 1px rgba(255,207,92,.75); }
@keyframes popIn {
0% { opacity: 0; transform: scale(.7); }
100% { opacity: 1; transform: scale(1); }
}
.row.shuffled { animation: shuffleFlash .4s ease-out; }
@keyframes shuffleFlash {
0% { opacity: .25; transform: translateX(-6px); }
50% { opacity: 1; transform: translateX(6px); }
100% { opacity: 1; transform: none; }
}

.overlay {
position: absolute; inset: 0;
background: rgba(7,18,33,.88);
display: flex; align-items: center; justify-content: center;
z-index: 60;
}
.overlay[hidden] { display: none; }
.overlay-card {
width: 78%; text-align: center;
border: 1px solid var(--line); border-radius: 12px;
background: linear-gradient(180deg, var(--ink-3), var(--ink));
padding: 26px 18px;
}
.overlay-title { font-size: 40px; letter-spacing: .2em; margin-bottom: 6px; color: var(--gold); }
.overlay-title.lose { color: var(--cinnabar); }
.overlay-sub { font-size: 12px; color: var(--paper-2); margin-bottom: 20px; line-height: 1.8; white-space: pre-line; }

.fc-corner {
display: flex; align-items: center; gap: 8px;
margin: 8px 0 4px;
}
.fc-corner[hidden] { display: none; }
.fc-poke {
appearance: none; border: 0; background: none; padding: 0;
width: 52px; height: 52px; flex: none;
cursor: pointer; position: relative;
-webkit-tap-highlight-color: transparent;
}
.fc-art {
width: 100%; height: 100%;
object-fit: cover; object-position: 50% 18%;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(217,180,90,.4), 0 2px 10px rgba(0,0,0,.5);
animation: fcBob 2.8s ease-in-out infinite;
}

@keyframes fcBob {
0%, 100% { transform: translateY(0) rotate(-1deg); }
50%      { transform: translateY(-3px) rotate(1deg); }
}
.fc-poke:active .fc-art { transform: scale(.94); }
.fc-count { font-size: 11px; color: rgba(232,221,198,.5); letter-spacing: .04em; line-height: 1.6; }

.fc-chirp, .fc-spark {
position: absolute; pointer-events: none; z-index: 2;
}
.fc-chirp {
left: 50%; top: -4px; transform: translateX(-50%);
font-size: 13px; color: #ffd98a; white-space: nowrap;
text-shadow: 0 1px 4px #000;
animation: fcChirp 900ms ease-out forwards;
}
@keyframes fcChirp {
0%   { opacity: 0; transform: translate(-50%, 4px) scale(.8); }
25%  { opacity: 1; transform: translate(-50%, -6px) scale(1); }
100% { opacity: 0; transform: translate(-50%, -20px) scale(1); }
}
.fc-spark {
left: 50%; top: 40%;
width: 4px; height: 4px; border-radius: 50%;
background: radial-gradient(circle, #fff3c4 0%, #ffb44a 55%, rgba(255,140,40,0) 100%);
animation: fcSpark 780ms ease-out forwards;
}
.fc-spark.s2 { animation-duration: 900ms; animation-delay: 60ms; }
@keyframes fcSpark {
0%   { opacity: 0; transform: translate(-50%, 0) scale(.6); }
20%  { opacity: 1; }
100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 14px)), -22px) scale(1.3); }
}

.rebirth {
position: fixed; inset: 0; z-index: 91;
overflow: hidden; pointer-events: none;
background: rgba(6,16,32,.66);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
}
.rebirth[hidden] { display: none; }

.rebirth-burst {
position: absolute; left: 50%; top: 46%;
width: 200px; height: 200px; margin: -100px 0 0 -100px;
border-radius: 50%;
background:
radial-gradient(circle, rgba(255,246,214,.95) 0%, rgba(255,182,74,.7) 26%,
rgba(255,120,30,.34) 52%, rgba(255,90,20,0) 72%),
repeating-conic-gradient(from 0deg,
rgba(255,196,90,.5) 0deg 4deg, rgba(255,196,90,0) 4deg 16deg);
opacity: 0;
}
.rebirth-art {
position: relative; z-index: 2;
width: 46%; max-width: 200px; height: auto;
opacity: 0;

-webkit-mask-image: radial-gradient(ellipse 56% 54% at 50% 46%,
#000 0%, #000 42%, rgba(0,0,0,.86) 62%, rgba(0,0,0,.44) 80%, rgba(0,0,0,0) 100%);
mask-image: radial-gradient(ellipse 56% 54% at 50% 46%,
#000 0%, #000 42%, rgba(0,0,0,.86) 62%, rgba(0,0,0,.44) 80%, rgba(0,0,0,0) 100%);
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.rebirth-name {
position: relative; z-index: 3; margin-top: 6px;
font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
font-size: 22px; font-weight: 700; letter-spacing: .16em;
background: linear-gradient(180deg, #fff0c8 0%, #ffc25a 58%, #d98f22 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
text-shadow: 0 3px 14px rgba(0,0,0,.8);
opacity: 0;
}
.rebirth.fx-in .rebirth-burst { animation: rbBurst 520ms ease-out forwards; }
.rebirth.fx-in .rebirth-art   { animation: rbArt 760ms ease-out 160ms forwards; }
.rebirth.fx-in .rebirth-name  { animation: rbName 700ms ease-out 260ms forwards; }
.rebirth.fx-out { animation: rbOut 260ms ease-in forwards; }
@keyframes rbBurst {
0%   { opacity: 0; transform: scale(.25) rotate(0deg); }
35%  { opacity: 1; }
100% { opacity: 0; transform: scale(1.5) rotate(28deg); }
}
@keyframes rbArt {
0%   { opacity: 0; transform: scale(.86); }
40%  { opacity: 1; transform: scale(1.03); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes rbName {
0%   { opacity: 0; transform: translateY(6px); }
100% { opacity: 1; transform: none; }
}
@keyframes rbOut { from { opacity: 1; } to { opacity: 0; } }

.card.fc-safe { animation: fcHop 620ms cubic-bezier(.3,1.4,.5,1) 1; }
@keyframes fcHop {
0%, 100% { transform: translateY(0); }
35%      { transform: translateY(-9px); }
62%      { transform: translateY(0); }
78%      { transform: translateY(-3px); }
}

.fc-feather {
position: fixed; z-index: 60; pointer-events: none;
width: 9px; height: 20px;
border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
background: linear-gradient(160deg, #ffe6a8 0%, #e8a94c 55%, #9c6520 100%);
box-shadow: 0 1px 4px rgba(0,0,0,.5);
animation: fcFall 1500ms cubic-bezier(.35,.1,.6,1) forwards;
}
.fc-feather::after {
content: ''; position: absolute; left: 50%; top: 8%;
width: 1px; height: 84%; margin-left: -.5px;
background: rgba(80,48,10,.5);
}
@keyframes fcFall {
0%   { opacity: 0; transform: translate(0, -6px) rotate(-14deg); }
15%  { opacity: 1; }
50%  { transform: translate(12px, 36px) rotate(18deg); }
100% { opacity: 0; transform: translate(-6px, 84px) rotate(-10deg); }
}

.fc-guardian-suffix { font-size: 14px; letter-spacing: .1em; color: #ffd98a; }
.poster-fc-seal {
display: inline-flex; align-items: center; gap: 4px;
margin-top: 4px; padding: 2px 8px;
border: 1px solid rgba(255,196,90,.7); border-radius: 4px;
background: rgba(255,170,60,.14);
font-size: 10px; letter-spacing: .08em; color: #ffd98a;
}
.poster-fc-seal[hidden] { display: none; }
.poster-fc-seal .fc-seal-dot {
width: 8px; height: 8px; border-radius: 50%; flex: none;
background: radial-gradient(circle at 40% 35%, #fff3c4, #ffb44a 60%, #d98f22);
}

.fc-status {
display: inline-flex; align-items: center; gap: 6px;
margin-bottom: 14px; padding: 3px 11px 3px 4px;
border: 1px solid rgba(217,180,90,.34); border-radius: 4px;
background: rgba(10,24,44,.5);
font-size: 12px; letter-spacing: .08em; color: #f0d78a;
}
.fc-status[hidden] { display: none; }
.fc-status-art {
width: 22px; height: 22px; border-radius: 50%; flex: none;
object-fit: cover; object-position: 50% 18%;
box-shadow: 0 0 0 1px rgba(217,180,90,.5);
}

.fc-status-feather {
position: relative; flex: none;
width: 10px; height: 20px; margin: 0 6px;
border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
background: linear-gradient(160deg, #d9d4c8 0%, #9a978f 55%, #5d5b55 100%);
}
.fc-status-feather::after {
content: ''; position: absolute; left: 50%; top: 8%;
width: 1px; height: 84%; margin-left: -.5px;
background: rgba(28,44,66,.55);
}
.fc-status-lost {
border-color: rgba(190,190,182,.30); color: rgba(220,215,203,.82);
background: rgba(10,24,44,.5);
}

.fc-status-poster {
margin: 5px 0 0; padding: 2px 8px 2px 3px; font-size: 10px;
}
.fc-status-poster .fc-status-art { width: 16px; height: 16px; }
.fc-status-poster .fc-status-feather { width: 7px; height: 14px; margin: 0 5px; }

@media (prefers-reduced-motion: reduce) {
.fc-art { animation: none; }

.rebirth.fx-in .rebirth-burst { animation: none; opacity: 0; }
.rebirth.fx-in .rebirth-art   { animation: none; opacity: 1; }
.rebirth.fx-in .rebirth-name  { animation: none; opacity: 1; }
.rebirth.fx-out { animation: none; opacity: 0; }
.card.fc-safe { animation: none; }
.fc-feather { animation: none; display: none; }
.fc-chirp { animation: none; }
.fc-spark { display: none; }
}

.finisher {
position: fixed; inset: 0; z-index: 92;
overflow: hidden;
background: rgba(4,12,26,.94);
pointer-events: none;
}
.finisher[hidden] { display: none; }

.finisher-band {
position: absolute; left: -20%; right: -20%; top: 50%;
height: 46%; z-index: 1;
transform: translateY(-50%) rotate(-11deg);
background: linear-gradient(90deg,
rgba(217,180,90,0) 0%, rgba(217,180,90,.14) 22%,
rgba(243,226,182,.22) 50%, rgba(217,180,90,.14) 78%, rgba(217,180,90,0) 100%);
box-shadow: 0 0 60px rgba(217,180,90,.18);

-webkit-mask-image: linear-gradient(180deg,
rgba(0,0,0,0) 0%, #000 42%, #000 58%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(180deg,
rgba(0,0,0,0) 0%, #000 42%, #000 58%, rgba(0,0,0,0) 100%);
}

.finisher-lines {
position: absolute; left: -30%; right: -30%; top: 50%;
height: 62%; z-index: 2;
transform: translateY(-50%) rotate(-11deg);
background: repeating-linear-gradient(90deg,
rgba(255,255,255,.16) 0px, rgba(255,255,255,.16) 2px,
rgba(255,255,255,0) 2px, rgba(255,255,255,0) 26px);
opacity: 0;
}

.finisher-art {
position: absolute; left: 50%; top: 45%;
width: 92%; height: auto; max-height: 74%;
object-fit: contain;
z-index: 3;
transform: translate(-50%, -50%);
opacity: 0;

-webkit-mask-image: radial-gradient(ellipse 56% 54% at 50% 44%,
#000 0%, #000 40%, rgba(0,0,0,.88) 60%, rgba(0,0,0,.5) 78%,
rgba(0,0,0,.14) 92%, rgba(0,0,0,0) 100%);
mask-image: radial-gradient(ellipse 56% 54% at 50% 44%,
#000 0%, #000 40%, rgba(0,0,0,.88) 60%, rgba(0,0,0,.5) 78%,
rgba(0,0,0,.14) 92%, rgba(0,0,0,0) 100%);
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}

.finisher-name {
position: absolute; right: 7%; bottom: 9%;
z-index: 4;
font-family: Georgia, "Songti SC", "STSong", "SimSun", serif;
font-size: 46px; font-weight: 700; letter-spacing: .12em;
background: linear-gradient(180deg, #fbeec4 0%, #d9b45a 55%, #a67c25 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;

filter: drop-shadow(0 0 1px rgba(60,40,10,.8));
text-shadow: 0 4px 18px rgba(0,0,0,.75);
opacity: 0;
}

.finisher.freeze { background: rgba(6,16,32,.72); }

.finisher.slide-in .finisher-art  { animation: finArtIn 420ms cubic-bezier(.16,.9,.3,1) forwards; }
.finisher.slide-in .finisher-name { animation: finNameIn 420ms cubic-bezier(.16,.9,.3,1) 90ms forwards; }
.finisher.slide-in .finisher-lines{ animation: finLines 420ms ease-out forwards; }
.finisher.slide-out .finisher-art,
.finisher.slide-out .finisher-name { animation: finOut 320ms ease-in forwards; }

@keyframes finArtIn {
from { opacity: 0; transform: translate(-130%, -50%) rotate(-10deg) scale(1.12); }
to   { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
}
@keyframes finNameIn {
from { opacity: 0; transform: translateX(60px); }
to   { opacity: 1; transform: translateX(0); }
}
@keyframes finLines {
0%   { opacity: .9; transform: translateY(-50%) rotate(-11deg) translateX(-14%); }
100% { opacity: 0;  transform: translateY(-50%) rotate(-11deg) translateX(6%); }
}
@keyframes finOut {
from { opacity: 1; }
to   { opacity: 0; transform: translate(30%, -50%) rotate(-2deg); }
}

.result { background: transparent; }
.result-bg { position: absolute; inset: 0; overflow: hidden; }
.result-bg-img { width: 100%; height: 100%; object-fit: cover; }

.result.win  .result-bg { background: radial-gradient(ellipse at 50% 38%, rgba(217,180,90,.34) 0%, rgba(120,86,26,.20) 34%, rgba(10,24,44,.96) 74%), var(--ink); }
.result.lose .result-bg { background: radial-gradient(ellipse at 50% 42%, rgba(96,116,124,.26) 0%, rgba(44,56,62,.22) 36%, rgba(8,18,32,.97) 76%), var(--ink); }

.result-inner {
position: relative; z-index: 2;
width: 100%; max-width: 340px;
display: flex; flex-direction: column; align-items: center;
padding: 0 18px; text-align: center;
}
.result-seal {
margin-bottom: 10px; }

.result-seal.seal-in { animation: sealDrop 520ms cubic-bezier(.2,1.5,.4,1) both; }
@keyframes sealDrop {
0%   { opacity: 0; transform: scale(1.6); }
70%  { opacity: 1; transform: scale(.94); }
100% { opacity: 1; transform: scale(1); }
}
.result-inner.shake { animation: resultShake 260ms ease-out; }
@keyframes resultShake {
0%,100% { transform: translate(0,0); }
25%     { transform: translate(-3px, 2px); }
50%     { transform: translate(3px, -2px); }
75%     { transform: translate(-2px, 1px); }
}

.result-lamps { font-size: 24px; margin-bottom: 16px; gap: 8px; }
.result-lamps[hidden] { display: none; }

.result-sub {
font-size: 13px; color: var(--paper-2);
line-height: 1.9; white-space: pre-line;
margin-bottom: 24px; letter-spacing: .04em;
}

@media (prefers-reduced-motion: reduce) {
.result-seal.seal-in { animation: sealFade 200ms ease-out both; }
@keyframes sealFade { from { opacity: 0; } to { opacity: 1; } }
.result-inner.shake { animation: none; }
.finisher-art, .finisher-name, .finisher-lines { animation: none !important; opacity: 1; }
}

#scr-final { --poster-reserve: 98px; }
#scr-final.has-share { --poster-reserve: 156px; }

.scroll-poster {
position: relative;
width: 100%;
max-width: calc((calc(100 * var(--vh)) - var(--poster-reserve)) * 750 / 1333);
aspect-ratio: 750 / 1333;
margin: 0 auto 12px;
border-radius: 6px;
overflow: hidden;

background-image:
url("../assets/bg/poster.webp"),
linear-gradient(180deg, #241d14, #17120c);
background-repeat: no-repeat, no-repeat;
background-position: center center, center center;
background-size: cover, cover;
box-shadow: inset 0 0 0 1px var(--line);
}

.poster-inner {
position: absolute;
left: 15%; right: 15%; top: 11%; bottom: 14%;
display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
text-align: center;
overflow: hidden;
}
.poster-head { font-size: 12px; letter-spacing: .5em; text-indent: .5em; color: var(--gold); }
.poster-mode { font-size: 10px; color: rgba(232,221,198,.5); letter-spacing: .08em; margin-top: 4px; }
.poster-name { font-size: 14px; color: var(--paper); letter-spacing: .1em; margin-top: 10px; }
.poster-name[hidden] { display: none; }

.poster-name-row { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-top: 10px; min-height: 22px; }
.poster-name-row .poster-name { margin-top: 0; }

.rename-input { width: 170px; padding: 4px 8px; font-size: 14px; text-align: center; }
.rename-input[hidden] { display: none; }
.poster-title {
font-size: 32px; letter-spacing: .16em; text-indent: .16em;
color: #f3e2b6; margin: 6px 0 2px;
font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
text-shadow: 0 2px 12px rgba(217,180,90,.45);
}
.poster-score { font-size: 40px; font-weight: 700; color: var(--gold); line-height: 1.15; }
.poster-score::after { content: attr(data-unit); font-size: 12px; font-weight: 400; }

.poster-record {
display: inline-block; margin-top: 5px;
border: 1px solid var(--cinnabar); border-radius: 11px;
background: rgba(184,66,47,.16); color: #e8a294;
padding: 2px 10px; font-size: 11px; letter-spacing: .12em;
}
.poster-record[hidden] { display: none; }
.poster-lamps { font-size: 14px; margin-top: 4px; }
.fin-lamp-txt { font-size: 10px; color: rgba(232,221,198,.5); letter-spacing: .06em; margin-left: 4px; }

.poster-detail { font-size: 10px; color: var(--paper-2); margin: 8px 0 auto; line-height: 1.7; white-space: pre-line; }

.poster-why {
margin: 6px 0 0;
padding: 5px 8px;
font-size: 11px; line-height: 1.5;
color: #f0e2bf;
border-left: 2px solid var(--gold);
background: rgba(217, 180, 90, .08);
border-radius: 0 4px 4px 0;
}
.poster-team {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px;
width: 100%; margin-bottom: auto;
}
.poster-team .slot { min-height: 52px; padding: 1px; }
.poster-team .card { min-height: 50px; }
.poster-team .card-name { font-size: 9px; }
.poster-team .card-name.long { font-size: 8px; }
.poster-team .card-stats { font-size: 9px; }

.poster-team .stat-ico { display: none; }
.poster-team .card-cost, .poster-team .card-eldot { transform: scale(.8); transform-origin: top left; }

.poster-foot {
display: flex; justify-content: center; gap: 14px; width: 100%;
font-size: 9px; color: rgba(232,221,198,.45);
border-top: 1px solid var(--line); padding-top: 6px;
margin-top: auto;
}
.poster-tip { font-size: 9px; color: rgba(232,221,198,.35); margin-top: 5px; letter-spacing: .1em; }

.fin-actions {
display: grid; grid-template-columns: 1fr; gap: 8px;
width: 100%; margin-bottom: 8px;
}
.fin-actions[hidden] { display: none; }

.two-btns {
display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px; width: 100%;
}

.toast {
position: fixed; left: 50%; bottom: 84px;
transform: translateX(-50%);
color: var(--paper);
font-size: 12px; z-index: 99;
pointer-events: none;
max-width: 84vw; text-align: center; }
.toast[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
.card { transition: opacity .2s ease; }
.card.lunge-up, .card.lunge-down { transform: none; }

.card.flying { transform: none !important; box-shadow: none; }

.burst-img { animation-name: burstPopRM; }
.burst-num { animation-name: burstNumRM; }
.burst.crit .burst-num-i { animation: none; }
@keyframes burstPopRM { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes burstNumRM {
0% { opacity: 0; } 14% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; }
}
.card.hurt { animation: none; filter: brightness(1.6); }
.card.casting { animation: none; }
.card.summoned { animation: none; }
.row.shuffled { animation: none; }
.clash-line > span.skill-cast,
.clash-line > span.bond-cast,
.clash-line > span.counter-cast { animation: fadeInOnly .2s ease-out; }
.float { animation-name: fadeOutOnly; transform: translateX(-50%); }
@keyframes fadeInOnly { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOutOnly {
0% { opacity: 0; }
18% { opacity: 1; }
75% { opacity: 1; }
100% { opacity: 0; }
}
}

.ring-btn {
width: 44px; height: 44px;
margin-left: 8px; padding: 0;
background: none; border: 1px solid var(--line); border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; flex: none;
}
.ring-btn:active { background: rgba(217,180,90,.14); }
.ring-btn-dots { position: relative; width: 26px; height: 26px; display: block; }
.ring-btn-dots::before, .ring-btn-dots::after {
content: ''; position: absolute; inset: 0; border-radius: 50%;
}

.ring-btn-dots::before {
background: conic-gradient(
var(--el-metal) 0deg 72deg, var(--el-wood) 72deg 144deg,
var(--el-water) 144deg 216deg, var(--el-fire) 216deg 288deg,
var(--el-earth) 288deg 360deg);
}
.ring-btn-dots::after {
inset: 7px; background: var(--ink, #12233a);
box-shadow: 0 0 0 1px rgba(0,0,0,.5) inset;
}

.home-icon { position: relative; display: block; width: 22px; height: 20px; }
.home-icon::before {
content: ''; position: absolute; left: 0; top: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 9px solid var(--gold);
}
.home-icon::after {
content: ''; position: absolute; left: 3px; right: 3px; top: 9px; bottom: 1px;
border: 2px solid var(--gold); border-top: 0;
}

.counter-hint {
margin-top: 8px;
margin-bottom: 8px;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.counter-hint[hidden] { display: none; }
.counter-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 8px; border: 1px solid; border-radius: 4px;
font-size: 12px; font-weight: 700; letter-spacing: .04em;
background: rgba(0,0,0,.28);
}
.counter-tip { font-size: 11px; color: rgba(232,221,198,.62); }
.el-dot {
width: 8px; height: 8px; border-radius: 50%;
display: inline-block; flex: none;
}

.card-phoenix::before {
content: ''; position: absolute; inset: -1px;
border-radius: inherit; pointer-events: none; z-index: 3;
background: radial-gradient(ellipse 70% 45% at 50% 108%,
rgba(255,176,74,.5) 0%, rgba(255,138,40,.22) 40%, rgba(255,120,30,0) 72%);
animation: phoenixGlow 2.6s ease-in-out infinite;
}
@keyframes phoenixGlow {
0%, 100% { opacity: .35; }
50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.card-phoenix::before { animation: none; opacity: .6; }
}

.sheet {
position: fixed; inset: 0; z-index: 90;
display: flex; align-items: flex-end; justify-content: center; }
.sheet[hidden] { display: none; }
.sheet-panel {
width: 100%; max-width: 430px; max-height: 78vh; overflow-y: auto;
box-sizing: border-box;
animation: sheetUp .22s ease-out; }
@keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

.sheet-head { margin-bottom: 12px; }
.sheet-title {
display: flex; align-items: center; gap: 8px;
font-size: 18px; font-weight: 700; color: var(--paper);
}
.sheet-name { letter-spacing: .04em; }
.sheet-sub { margin-top: 4px; font-size: 12px; color: rgba(232,221,198,.6); }

.rel-arrow { color: var(--gold); }

.sheet-block { margin-bottom: 12px; }
.sheet-block-title {
font-size: 13px; font-weight: 700; color: var(--gold); margin-bottom: 4px;
}

.sheet-rule {
font-size: 12px; color: rgba(232,221,198,.72);
text-align: center; margin: 10px 0;
}
.sheet-tip {
margin-top: 14px; text-align: center;
font-size: 11px; color: rgba(232,221,198,.62);
}

.grow-list { display: flex; flex-direction: column; gap: 8px; }
.grow-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.6; }
.grow-mark {
flex: none; width: 18px; height: 18px; margin-top: 1px;
font-style: normal; font-size: 11px; font-weight: 700; line-height: 18px;
text-align: center; color: #0a1420; border-radius: 4px;
background: linear-gradient(180deg, #f2d98a, #d9b45a);
}
.grow-txt { color: rgba(232,221,198,.85); }

.ring-wrap {
position: relative; width: 156px; height: 156px; margin: 8px auto 4px;
}
.ring-arrow {
position: absolute; height: 3px; transform-origin: 0 50%;
border-radius: 2px;
}
.ring-head {
position: absolute; right: -2px; top: 50%;
width: 0; height: 0; margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 9px solid;
}
.ring-node2 {
position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; color: #0a1420;
box-shadow: 0 2px 8px rgba(0,0,0,.5);
}

.bond-table {
border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
background: rgba(0,0,0,.24);
}
.bond-row {

display: grid; grid-template-columns: 58px 1fr 1fr 1fr;
gap: 5px; padding: 7px 8px;
font-size: 11px; line-height: 1.5;
border-top: 1px solid rgba(217,180,90,.12);
}
.bond-row:first-child { border-top: none; }
.bond-row.head { color: rgba(232,221,198,.5); font-size: 10px; }
.bond-row .bc0 { display: flex; align-items: center; gap: 4px; font-weight: 700; }
.bond-row .bc1, .bond-row .bc2, .bond-row .bc3 { color: rgba(232,221,198,.8); }

.bond-row .bc3 { color: #f0d78a; }
.bond-row.head .bc3 { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
.sheet-panel { animation: none; }
}

.screen {
min-height: calc(100 * var(--vh));
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}

#scr-start {
background-image:
linear-gradient(180deg,
rgba(9,22,40,0) 26%, rgba(9,22,40,.45) 40%,
rgba(9,22,40,.86) 54%, #0a182c 68%),
url("../assets/bg/splash.webp");
background-position: center top, center top;
background-size: auto, cover;
}

#scr-prep, #scr-battle {
background-image:
linear-gradient(180deg, rgba(8,20,36,.10), rgba(8,20,36,.30)),
url("../assets/bg/main.webp");
background-position: center top, center -12px;
background-size: auto, cover;
padding-top: var(--band-h);
}

#scr-battle {
background-image:
linear-gradient(180deg, rgba(8,20,36,0), rgba(8,20,36,.14)),
url("../assets/bg/main.webp");
}

#scr-final {
background-image: linear-gradient(180deg, #0c1a2c, #071120);
}
#scr-final:not([hidden]) {
display: flex; flex-direction: column; justify-content: center;
}

#scr-prep .panel {
background: rgba(10,24,44,.32);
border: 1px solid rgba(217,180,90,.10);
border-radius: var(--r-panel);
padding: 4px var(--panel-pad);
}
#scr-prep .topbar, #scr-battle .topbar {
background: rgba(10,24,44,.40);
border-radius: var(--r-panel);

padding-top: calc(var(--top-clear) - var(--band-h));
}

#scr-prep .p-board {
background: rgba(10,24,44,.52);
border-color: rgba(217,180,90,.30);
box-shadow: 0 0 0 1px rgba(217,180,90,.06), 0 2px 10px rgba(0,0,0,.35);
}
#scr-prep .p-board .panel-title { color: #f0d78a; }

#scr-prep .p-board .slot { min-height: 86px; border-color: rgba(217,180,90,.34); background: rgba(0,0,0,.26); }
#scr-prep .p-board .card { min-height: 86px; }

#scr-prep .actionbar, #scr-prep .tip {
border-left: 1px solid transparent;
border-right: 1px solid transparent;
padding-left: var(--panel-pad);
padding-right: var(--panel-pad);
}

#scr-battle:not([hidden]) { display: flex; flex-direction: column; }

.guide { position: fixed; inset: 0; z-index: 88; pointer-events: none; }
.guide[hidden] { display: none; }
.guide-hole {
position: absolute;
border: 2px solid var(--gold);
border-radius: 10px;
box-shadow: 0 0 0 9999px rgba(0,0,0,.62), 0 0 16px rgba(217,180,90,.55);
animation: guidePulse 1.4s ease-in-out infinite;
}
@keyframes guidePulse {
0%, 100% { border-color: rgba(217,180,90,.9); }
50%      { border-color: rgba(243,226,182,.45); }
}

.bub {
position: absolute;
transform: translate(-50%, -100%);
pointer-events: none;

background: var(--k-ink);
border: 1px solid rgba(217,180,90,.55);
border-radius: 7px;
color: #f6e8c4;
padding: 6px 13px;
font-size: 13px; letter-spacing: .06em; white-space: nowrap;
text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.75);
}
.bub.below { transform: translate(-50%, 0); }
.bub[hidden] { display: none; }

.bub::after {
content: '';
position: absolute;
left: var(--tail, 50%); width: 9px; height: 9px;
margin-left: -5px;
border: 1px solid rgba(217,180,90,.55);
transform: rotate(45deg);
}
.bub::after { bottom: -8px; border-top: 0; border-left: 0; }
.bub.below::after { bottom: auto; top: -8px; border: 1px solid rgba(217,180,90,.55); border-bottom: 0; border-right: 0; }

.hand {
position: absolute;
transform: translateX(-50%);
pointer-events: none;
font-size: 20px; line-height: 26px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.8));
animation: handBob 1.1s ease-in-out infinite;
}
.hand[hidden] { display: none; }
@keyframes handBob {
0%, 100% { transform: translateX(-50%) translateY(-4px); }
50%      { transform: translateX(-50%) translateY(3px); }
}

.guide-skip { position: absolute; top: calc(var(--top-clear) + 52px); right: 12px; pointer-events: auto; font-size: 11px; letter-spacing: .06em; font-family: inherit; cursor: pointer; }

@media (min-height: 760px) {
.guide-skip { top: var(--top-clear); }
}

@keyframes tutTipIn {
0%   { opacity: 0; scale: .9; }
100% { opacity: 1; scale: 1; }
}
@keyframes handBobLand {
0%, 100% { transform: translateX(-50%) translateY(calc(-3.5 * var(--u))); }
50%      { transform: translateX(-50%) translateY(calc(2.5 * var(--u))); }
}

@media (prefers-reduced-motion: reduce) {
.guide-hole { animation: none; }
.hand { animation: none; transform: translateX(-50%); }
}

.tips { position: fixed; inset: 0; z-index: 86; pointer-events: none; }

.tips .tip-bub.sticky { pointer-events: auto; }
.tips[hidden] { display: none; }

.tip-bub { animation: tipIn 220ms ease-out; }

@keyframes tipIn {
from { opacity: 0; }
to   { opacity: 1; }
}

.tip-ring {
position: absolute;
pointer-events: none;
border: 1px solid rgba(217,180,90,.75);
border-radius: 10px;
box-shadow: 0 0 12px rgba(217,180,90,.35);
animation: ringPulse 1.4s ease-in-out infinite;
}
.tip-ring[hidden] { display: none; }
@keyframes ringPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(217,180,90,.34), 0 0 12px rgba(217,180,90,.3); }
50%      { box-shadow: 0 0 0 5px rgba(217,180,90,0), 0 0 12px rgba(217,180,90,.3); }
}

.bond-strip.bond-pulse { animation: bondPulse 900ms ease-in-out 2; }
@keyframes bondPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(217,180,90,0); }
50%      { box-shadow: 0 0 0 3px rgba(217,180,90,.28); }
}

@media (prefers-reduced-motion: reduce) {
.tip-bub, .tip-bub.below { animation: none; }
.tip-ring { animation: none; box-shadow: 0 0 0 2px rgba(217,180,90,.28); }
.bond-strip.bond-pulse { animation: none; box-shadow: 0 0 0 2px rgba(217,180,90,.25); }
}

.confirm {
position: fixed; inset: 0; z-index: 95;
display: flex; align-items: center; justify-content: center;
padding: 0 22px; }
.confirm[hidden] { display: none; }
.confirm-card {
width: 100%; max-width: 330px; text-align: center; }
.confirm-msg {
font-size: 14px; color: #f3e2b6; line-height: 1.7;
margin-bottom: 18px; letter-spacing: .04em;
}
.confirm-btns { display: flex; flex-direction: column; gap: 9px; }

.card-bt {
border-width: 2px;
border-radius: 10px;

background-image:
linear-gradient(165deg, rgba(255,255,255,.05), rgba(0,0,0,.45)),
linear-gradient(0deg, var(--card-tint), var(--card-tint));
box-shadow: 0 3px 10px rgba(0,0,0,.5);
}

.card-bt .card-art { object-position: 50% 12%; }

.card-bt .mk-star { text-shadow: 0 1px 3px #000, 0 0 6px rgba(217,180,90,.8); }

.mk-silence {
position: absolute; right: 3px; top: 15px;
min-width: 15px; height: 15px; padding: 0 2px;
font-style: normal; font-size: 10px; line-height: 15px; text-align: center;
font-weight: 700; color: #d2cdc0;
background: rgba(26,40,62,.9);
border: 1px solid rgba(190,185,170,.5);
border-radius: 3px;
z-index: 5;
text-shadow: 0 1px 2px #000;
}

.card.silenced .card-art { filter: grayscale(.55) brightness(.82); }

.card-bt .card-shield {
position: absolute; right: 2px; bottom: 21px; left: auto; top: auto;
z-index: 5;
padding: 0 4px; min-width: 18px;
border-radius: 7px 7px 4px 4px;
background: rgba(8,20,38,.82);
box-shadow: inset 0 0 0 1px rgba(160,200,240,.35);
color: #bcd7f0; font-size: 10px; font-weight: 700; line-height: 14px;
text-align: center;
}

.ticker {
flex: 0 0 auto;
display: flex; align-items: center; gap: 8px;
width: 100%; min-height: 32px; margin-top: 10px;
padding: 5px 10px;
border: 1px solid var(--line); border-radius: 16px;
background: rgba(10,24,44,.62);
color: rgba(232,221,198,.72);
font-family: inherit; font-size: 12px; text-align: left;
cursor: pointer; -webkit-appearance: none; appearance: none;
}
.ticker:active { background: rgba(217,180,90,.12); }
.ticker-txt {
flex: 1 1 auto; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ticker-txt.in { animation: tickerIn .22s ease-out; }
.ticker-txt.win { color: var(--ok); }
.ticker-txt.lose { color: var(--bad); }
.ticker-txt.bond { color: var(--gold); }
.ticker-txt.skill { color: #e8c26a; }
.ticker-more {
flex: 0 0 auto;
font-size: 10px; letter-spacing: .08em; color: var(--gold);
border: 1px solid var(--line); border-radius: 10px; padding: 2px 8px;
}
@keyframes tickerIn {
0% { opacity: 0; transform: translateY(4px); }
100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
.ticker-txt.in { animation-name: fadeOnlyIn; }
@keyframes fadeOnlyIn { from { opacity: 0; } to { opacity: 1; } }
}

.row-bt .float { top: 18px; }

.skill-tiers { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.skill-tier {
display: flex; align-items: flex-start; gap: 8px;
padding: 5px 8px;
border: 1px solid transparent; border-radius: var(--r-card);
font-size: 12px; line-height: 1.6;
color: rgba(232,221,198,.62);
}
.skill-tier .tier-star {
flex: 0 0 34px;
font-style: normal; font-size: 10px; letter-spacing: -1px;
color: rgba(217,180,90,.75);
}
.skill-tier .tier-txt { flex: 1 1 auto; min-width: 0; }

.skill-tier.on {
color: #f2e6c8;
border-color: rgba(217,180,90,.45);
background: rgba(217,180,90,.10);
}
.skill-tier.on .tier-star { color: var(--gold); }

.deep-chip {
border: 1px solid rgba(217,180,90,.6); border-radius: 4px;
color: #f0d78a; background: rgba(217,180,90,.10);
padding: 2px 9px; font-size: 11px; letter-spacing: .06em;
}
.deep-chip[hidden] { display: none; }
.dex-seal {
display: flex; align-items: center; justify-content: center; gap: 6px;
margin: 0 auto 8px; width: fit-content;
padding: 3px 12px;
border: 1px solid rgba(255,196,90,.7); border-radius: 4px;
background: rgba(255,170,60,.14);
color: #ffd98a; font-size: 11px; letter-spacing: .12em;
}
.dex-seal[hidden] { display: none; }
.dex-seal-dot {
width: 8px; height: 8px; border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #fff3c4, #ffb44a 60%, #d98f22);
}

.fin-deep {
display: flex; flex-direction: column; align-items: center; gap: 2px;
margin-top: 6px;
}
.fin-deep[hidden] { display: none; }
.fin-deep-big {
font-size: 20px; letter-spacing: .22em; text-indent: .22em;
color: #f0d78a; text-shadow: 0 0 10px rgba(217,180,90,.4);
}
.fin-deep-sub { font-size: 13px; color: var(--paper); letter-spacing: .1em; }
.fin-deep-record {
margin-top: 2px; padding: 1px 9px;
border: 1px solid var(--cinnabar); border-radius: 4px;
background: rgba(184,66,47,.16);
color: #e8a294; font-size: 10px; letter-spacing: .1em;
}
.fin-deep-record[hidden] { display: none; }
.fin-deep-note { font-size: 10px; color: rgba(232,221,198,.45); letter-spacing: .04em; }

.deep-entry { width: 100%; margin-bottom: 8px; }
.deep-entry[hidden] { display: none; }
.deep-entry-note {
margin: 5px 0 0; text-align: center;
font-size: 11px; color: rgba(232,221,198,.5); letter-spacing: .04em;
}

#scr-prep .topbar.deep .tb-left { gap: 5px; }
#scr-prep .topbar.deep .tb-right { gap: 5px; }
#scr-prep .topbar.deep .ring-btn { width: 38px; height: 38px; margin-left: 0; }
#scr-prep .topbar.deep .gold { font-size: 12px; padding: 1px 6px; }
#scr-prep .topbar.deep .lamps { font-size: 10px; gap: 3px; }

.crest {
display: block; flex: none;
background: url("../assets/ui/crest.webp") center / contain no-repeat;
pointer-events: none;
}
.crest-lg { width: 132px; height: 77px; margin: -6px auto 0; }
.crest-sm { width: 104px; height: 61px; margin: 2px auto -6px; opacity: .8; }

.divider {
display: block; height: 16px; margin: -5px 0;
background: url("../assets/ui/divider.webp") center / 210px auto no-repeat;
opacity: .92; pointer-events: none;
}

.gold {
display: inline-flex; align-items: center; gap: 4px;
padding-left: 5px;
}
.gold::before {
content: ''; width: 17px; height: 17px; flex: none;
background: url("../assets/ui/coin.webp") center / contain no-repeat;
font-size: 0; opacity: 1;
}

.lamp {
width: 1.18em; height: 1.3em;
background: url("../assets/ui/lamp.webp") center bottom / contain no-repeat;
}

.lamps { font-size: 17px; gap: 2px; }
.poster-lamps { font-size: 19px; }
.lamp::after { display: none; }
.lamp .lamp-flame { display: none; }
.lamp-off { filter: grayscale(1) brightness(.5); }
.lamp-snuff { animation: lampSnuffImg 800ms ease-out forwards; }
@keyframes lampSnuffImg {
0%   { filter: none; }
100% { filter: grayscale(1) brightness(.5); }
}
@media (prefers-reduced-motion: reduce) {
.lamp-snuff { animation: none; filter: grayscale(1) brightness(.5); }
}

.el-badge-img { display: block; flex: none; object-fit: contain; }

.el-badge {
width: auto; height: auto; border-radius: 0;
background: none; position: relative;
}
.el-badge-cn,
.ring-node-cn-sr {
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.ring-wrap { height: 176px; }
.ring-node2 {
width: 34px; height: 34px; margin: -17px 0 0 -17px;
background: none; box-shadow: none;
}
.ring-node2 .el-badge-img { width: 34px; height: 34px; }
.ring-node-cn {
position: absolute; left: 50%; top: 34px;
transform: translateX(-50%);
font-size: 10px; font-weight: 700; color: #f0e2bf;
text-shadow: 0 1px 3px #000, 0 0 6px #000;
}

.peek-stat .stat-word { font-size: .82em; opacity: .72; font-weight: 400; }

.plate-name {
font-size: 19px; font-weight: 700; color: #f6ead0;
letter-spacing: .06em; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}

.tier-reach {
flex: none; margin-left: 6px;
font-style: normal; font-size: 10px; font-weight: 700;
line-height: 15px; padding: 0 4px; border-radius: 3px;
color: #0a1420; background: linear-gradient(180deg, #f2d98a, #d9b45a);
}

#scr-prep .topbar.deep .lamps { font-size: 14px; gap: 1px; }
#scr-prep .topbar.deep .el-badge-img { width: 26px; height: 26px; }

#scr-start { position: relative; }

.lang-opt { opacity: .55; }
.lang-opt.on { opacity: 1; color: var(--gold); font-weight: 600; }
.lang-sep { margin: 0 5px; opacity: .4; }

.mute-btn-tb { min-width: 36px; min-height: 34px; font-size: 16px; line-height: 1; }

/* ================= M7 · 图鉴底部「音乐与音效授权」折叠行 ================= */
.dex-credits { margin: 10px 2px calc(4px + var(--sa-bottom)); }
.dex-credits-btn {
appearance: none; border: 0; background: none; padding: 2px 0;
color: var(--paper-2); font-size: 11px; font-family: inherit;
letter-spacing: .06em; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.dex-credits-body { margin-top: 4px; }
.dex-credits-body[hidden] { display: none; }
.credit-row {
font-size: 10px; line-height: 1.6; color: rgba(232,221,198,.5);
}

.bt-peek {
position: fixed;
left: 14px; right: 14px;
z-index: 70;
pointer-events: none;
max-height: 44vh;
overflow: hidden;
padding: 8px 10px 9px;
border: 1px solid rgba(217,180,90,.34);
border-radius: var(--r-panel, 10px);
background: rgba(9,22,40,.92);
box-shadow: 0 6px 22px rgba(0,0,0,.62), inset 0 0 0 1px rgba(217,180,90,.06);
animation: peekIn .12s ease-out;
}
.bt-peek[hidden] { display: none; }
.bt-peek.peek-low  { top: 52%; }
.bt-peek.peek-high { bottom: 52%; }
@keyframes peekIn {
0%   { opacity: 0; transform: translateY(4px); }
100% { opacity: 1; transform: none; }
}

.peek-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.peek-head .el-badge-img { flex: none; }
.peek-name { font-size: 15px; color: #f3e6c8; letter-spacing: .04em; }
.peek-side { margin-left: auto; font-size: 10px; color: rgba(232,221,198,.55); }

.peek-stats {
display: flex; align-items: center; gap: 12px;
margin-top: 5px; font-size: 13px; color: #f0e2bf;
}
.peek-stat { display: inline-flex; align-items: center; gap: 3px; }
.peek-atk { color: #ffcf8a; }
.peek-hp  { color: #b9e6a8; }
.peek-shield { color: #9fd4ff; }

.peek-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.peek-chip {
font-style: normal; font-size: 10px; line-height: 16px;
padding: 0 6px; border-radius: var(--pill, 999px);
border: 1px solid rgba(217,180,90,.28);
color: rgba(240,226,191,.9);
}
.peek-chip.chip-none   { border-color: rgba(232,221,198,.16); color: rgba(232,221,198,.45); }
.peek-chip.chip-dead   { border-color: rgba(190,60,50,.6); color: #ff9b8f; }
.peek-chip.chip-burn   { border-color: rgba(220,120,40,.55); color: #ffb06a; }
.peek-chip.chip-taunt  { border-color: rgba(217,180,90,.55); color: #ffd98a; }
.peek-chip.chip-silence{ border-color: rgba(205,191,159,.5); color: var(--k-on-dark-2); }
.peek-chip.chip-immune,
.peek-chip.chip-reduce,
.peek-chip.chip-cap    { border-color: rgba(120,180,220,.5); color: #9fd4ff; }
.peek-chip.chip-dodge  { border-color: rgba(120,200,190,.5); color: #8fe0d0; }
.peek-chip.chip-crit   { border-color: rgba(230,150,90,.55); color: #ffc08a; }

.peek-skill {
display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap;
margin-top: 7px; font-size: 11px; line-height: 1.5;
color: rgba(240,226,191,.88);
}
.peek-skill-star { font-style: normal; font-size: 9px; color: var(--gold); flex: none; }
.peek-skill-name { color: #ffd98a; flex: none; }
.peek-skill-txt { flex: 1 1 100%; color: rgba(232,221,198,.72); }
.peek-skill-off .peek-skill-name,
.peek-skill-off .peek-skill-txt { text-decoration: line-through; opacity: .6; }

.peek-bond {
display: flex; align-items: baseline; gap: 6px;
margin-top: 5px; font-size: 10px; line-height: 1.5;
}
.peek-lab { color: rgba(232,221,198,.5); flex: none; }
.peek-bond-txt { color: var(--gold); }

#scr-prep {
--prep-gap: 8px;
--prep-pad: 4px;
--prep-slot-enemy: 56px;
--prep-slot-shop: 68px;
--prep-btn-h: 48px;
--prep-tip-gap: 4px;
}

@media (max-height: 700px) {
#scr-prep {
--prep-gap: 6px;
--prep-pad: 2px;
--prep-tip-gap: 2px;
}
}

@media (min-height: 760px) {
#scr-prep {

--prep-gap: clamp(8px, calc(8.5 * var(--vh) - 56px), 24px);
--prep-pad: clamp(4px, calc(4.9 * var(--vh) - 32px), 14px);
--prep-slot-enemy: clamp(56px, calc(8 * var(--vh)), 68px);
--prep-slot-shop: clamp(68px, calc(9.5 * var(--vh)), 82px);
--prep-btn-h: clamp(48px, calc(6.5 * var(--vh)), 56px);
--prep-tip-gap: 10px;
}

#scr-prep:not([hidden]) { display: flex; flex-direction: column; }
#scr-prep:not([hidden]) > .topbar { margin-top: auto; }
#scr-prep:not([hidden]) > .tip { margin-bottom: auto; }
}

#scr-prep .topbar { margin-bottom: var(--prep-gap); }
#scr-prep .panel { margin-bottom: var(--prep-gap); padding: var(--prep-pad) var(--panel-pad); }
#scr-prep .bench-strip { margin-bottom: var(--prep-gap); }

#scr-prep .actionbar { margin-top: calc(var(--prep-gap) * .5); }
#scr-prep .tip { margin-top: var(--prep-tip-gap); }
#scr-prep .row-enemy .slot { min-height: var(--prep-slot-enemy); }
#scr-prep .row-shop .slot { min-height: var(--prep-slot-shop); }

@media (max-height: 660px) { .counter-hint { margin-bottom: 4px; } }

:root { --fx-speed: 1; }

.fx-layer {
position: absolute; inset: 0;
pointer-events: none;
overflow: hidden;
}
.fx-lo { z-index: auto; }
.fx-hi { z-index: 60; }

.fx {
position: absolute;
pointer-events: none;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
opacity: 0;
will-change: transform, opacity;
}

.fx-layer > .fx { z-index: 1; }
.slot > .fx { z-index: 31; }

.fx-e01-ring, .fx-e01-flash, .fx-e01-sparks {
left: 50%; top: 50%; width: 110px; height: 110px; margin: -55px 0 0 -55px;
}

.slot > .fx-e01-ring, .slot > .fx-e01-flash, .slot > .fx-e01-sparks, .slot > .fx-e01-stars { z-index: 33; }
.fx-e01-ring {
background-image: url("../assets/fx/e01_ring.webp");
animation: fxE01Ring calc(800ms * var(--fx-speed)) ease-out both;
}
@keyframes fxE01Ring {
0% { opacity: 0; transform: scale(.3); }
14% { opacity: 1; }
100% { opacity: 0; transform: scale(1.4); }
}
.fx-e01-flash {
background-image: url("../assets/fx/e01_flash.webp");
animation: fxE01Flash calc(300ms * var(--fx-speed)) ease-out calc(60ms * var(--fx-speed)) both;
}
@keyframes fxE01Flash {
0% { opacity: 0; transform: scale(.5); }
30% { opacity: 1; transform: scale(1.05); }
100% { opacity: 0; transform: scale(1.2); }
}
.fx-e01-sparks {
background-image: url("../assets/fx/e01_sparks.webp");
animation: fxE01Sparks calc(800ms * var(--fx-speed)) ease-out calc(120ms * var(--fx-speed)) both;
}
@keyframes fxE01Sparks {
0% { opacity: 0; transform: rotate(0deg) scale(.7); }
18% { opacity: 1; }
100% { opacity: 0; transform: rotate(40deg) scale(1.35); }
}
.fx-e01-stars {
left: 50%; top: 0; width: 76px; height: 76px; margin: -46px 0 0 -38px;
background-image: url("../assets/fx/e01_stars.webp");
animation: fxE01Stars calc(600ms * var(--fx-speed)) cubic-bezier(.22,.7,.3,1) calc(350ms * var(--fx-speed)) both;
}
@keyframes fxE01Stars {
0% { opacity: 0; transform: translateY(-22px) scale(.9); }
30% { opacity: 1; transform: translateY(0) scale(1); }
70% { opacity: 1; }
100% { opacity: 0; transform: translateY(-4px); }
}

.fx-e01-ring.fx-e01-lite, .fx-e01-flash.fx-e01-lite, .fx-e01-sparks.fx-e01-lite {
width: 88px; height: 88px; margin: -44px 0 0 -44px;
}
.fx-e01-ring.fx-e01-lite { animation: fxE01RingLite calc(900ms * var(--fx-speed)) ease-out both; }
@keyframes fxE01RingLite {
0%   { opacity: 0; transform: scale(.3) rotate(0deg); }
15%  { opacity: 1; transform: scale(1.05) rotate(10deg); }
60%  { opacity: 1; transform: scale(1.1) rotate(30deg); }
100% { opacity: 0; transform: scale(1.45) rotate(45deg); }
}
.fx-e01-flash.fx-e01-lite { animation: fxE01FlashLite calc(520ms * var(--fx-speed)) ease-out calc(60ms * var(--fx-speed)) both; }
@keyframes fxE01FlashLite {
0%   { opacity: 0; transform: scale(.5); }
25%  { opacity: 1; transform: scale(1.05); }
65%  { opacity: .9; transform: scale(1.1); }
100% { opacity: 0; transform: scale(1.25); }
}
.fx-e01-sparks.fx-e01-lite { animation: fxE01Sparks calc(900ms * var(--fx-speed)) ease-out calc(120ms * var(--fx-speed)) both; }

.fx-e03-pulse {
left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px;
animation: fxE03Pulse calc(500ms * var(--fx-speed)) ease-out both;
}
.fx-e03-pulse.el-metal { background-image: url("../assets/fx/e03_pulse_metal.webp"); }
.fx-e03-pulse.el-wood  { background-image: url("../assets/fx/e03_pulse_wood.webp"); }
.fx-e03-pulse.el-water { background-image: url("../assets/fx/e03_pulse_water.webp"); }
.fx-e03-pulse.el-fire  { background-image: url("../assets/fx/e03_pulse_fire.webp"); }
.fx-e03-pulse.el-earth { background-image: url("../assets/fx/e03_pulse_earth.webp"); }
@keyframes fxE03Pulse {
0% { opacity: 0; transform: scale(.6); }
20% { opacity: 1; }
100% { opacity: 0; transform: scale(1.5); }
}

.fx-e03-pillar {
left: 50%; bottom: -17px; width: 47px; height: 140px; margin-left: -24px;
background-position: bottom center;
transform-origin: 50% 100%;
animation: fxE03Pillar calc(600ms * var(--fx-speed)) ease-out calc(150ms * var(--fx-speed)) both;
}
.fx-e03-pillar.el-metal { background-image: url("../assets/fx/e03_pillar_metal.webp"); }
.fx-e03-pillar.el-wood  { background-image: url("../assets/fx/e03_pillar_wood.webp"); }
.fx-e03-pillar.el-water { background-image: url("../assets/fx/e03_pillar_water.webp"); }
.fx-e03-pillar.el-fire  { background-image: url("../assets/fx/e03_pillar_fire.webp"); }
.fx-e03-pillar.el-earth { background-image: url("../assets/fx/e03_pillar_earth.webp"); }
@keyframes fxE03Pillar {
0% { opacity: 0; transform: scaleY(.25); }
30% { opacity: 1; transform: scaleY(1); }
70% { opacity: 1; }
100% { opacity: 0; transform: scaleY(1.06); }
}

.card.el-metal.fx-bond-pulse { --fx-el-c: var(--el-metal); }
.card.el-wood.fx-bond-pulse  { --fx-el-c: var(--el-wood); }
.card.el-water.fx-bond-pulse { --fx-el-c: var(--el-water); }
.card.el-fire.fx-bond-pulse  { --fx-el-c: var(--el-fire); }
.card.el-earth.fx-bond-pulse { --fx-el-c: var(--el-earth); }
.card.fx-bond-pulse { animation: fxBondPulse calc(380ms * var(--fx-speed)) ease-in-out 2; }
@keyframes fxBondPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
50% { box-shadow: 0 0 10px 2px var(--fx-el-c, #d9b45a); }
}

.fx-e04-eye {
left: 50%; top: 30%; width: 60px; height: 60px; margin: -30px 0 0 -30px;
background-image: url("../assets/fx/e04_eye_glow.webp");
animation: fxFadePop calc(200ms * var(--fx-speed)) ease-out both;
}
@keyframes fxFadePop {
0% { opacity: 0; transform: scale(.85); }
40% { opacity: 1; transform: scale(1.06); }
100% { opacity: 0; transform: scale(1); }
}

.fx-e04-wash {
background-image: url("../assets/fx/e04_heat_wash.webp");
background-size: 100% 100%;
animation: fxE04Wash calc(300ms * var(--fx-speed)) ease-out calc(120ms * var(--fx-speed)) both;
}
@keyframes fxE04Wash {
0% { opacity: 0; }
35% { opacity: .6; }
100% { opacity: 0; }
}

.fx-e04-flame {
left: 50%; bottom: -8px; width: 52px; height: 52px; margin-left: -26px;
background-image: url("../assets/fx/e04_flame_sheet.webp");
background-size: 312px 52px;
background-position: 0 0;
background-repeat: repeat-x;
animation:
fxFlame6 calc(480ms * var(--fx-speed)) steps(6) calc(200ms * var(--fx-speed)) both,
fxSeqFade calc(480ms * var(--fx-speed)) linear calc(200ms * var(--fx-speed)) both;
}
@keyframes fxFlame6 { from { background-position: 0 0; } to { background-position: -312px 0; } }
@keyframes fxSeqFade { 0% { opacity: 0; } 10% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; } }

.fx-e05-mouth {
left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
background-image: url("../assets/fx/e05_mouth.webp");
animation: fxE05Mouth calc(300ms * var(--fx-speed)) ease-out both;
}
@keyframes fxE05Mouth {
0% { opacity: 0; transform: scale(.8); }
40% { opacity: 1; transform: scale(1.15); }
100% { opacity: 0; transform: scale(1.05); }
}

.fx-e05-vortex {
left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
background-image: url("../assets/fx/e05_vortex_sheet.webp");
background-size: 512px 64px;
background-position: 0 0;
background-repeat: repeat-x;
animation:
fxVortex12 calc(600ms * var(--fx-speed)) steps(12) calc(100ms * var(--fx-speed)) both,
fxSeqFade calc(600ms * var(--fx-speed)) linear calc(100ms * var(--fx-speed)) both;
}
@keyframes fxVortex12 { from { background-position: 0 0; } to { background-position: -768px 0; } }
.fx-e05-shatter {
left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px;
background-image: url("../assets/fx/e05_shatter.webp");
animation: fxE05Shatter calc(600ms * var(--fx-speed)) ease-out calc(500ms * var(--fx-speed)) both;
}
@keyframes fxE05Shatter {
0% { opacity: 0; transform: scale(1.1); }
8% { opacity: 1; transform: scale(1); }
50% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(1.05); }
}

.float.fx-suck {
animation-name: fxSuck;
animation-timing-function: cubic-bezier(.4,0,.9,.6);
}
@keyframes fxSuck {
0% { opacity: 0; transform: translateX(-50%); }
18% { opacity: 1; transform: translateX(-50%); }
100% { opacity: 0; transform: translate(-50%, var(--fx-suck, 18px)) scale(.7); }
}

.fx-e06-cloud {
background-image: url("../assets/fx/e06_cloud.webp");
background-size: 100% 100%;
animation: fxE06Cloud calc(800ms * var(--fx-speed)) ease-out both;
}
@keyframes fxE06Cloud {
0% { opacity: 0; transform: translateX(-24%); }
31% { opacity: .95; transform: translateX(0); }
74% { opacity: .95; }
100% { opacity: 0; }
}
.fx-e06-rain {
left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px;
background-image: url("../assets/fx/e06_rain_sheet.webp");
background-size: 432px 72px;
background-position: 0 0;
background-repeat: repeat-x;
animation:
fxRain6 calc(480ms * var(--fx-speed)) steps(6) calc((150ms + var(--fx-stagger, 0ms)) * var(--fx-speed)) both,
fxSeqFade calc(480ms * var(--fx-speed)) linear calc((150ms + var(--fx-stagger, 0ms)) * var(--fx-speed)) both;
}
@keyframes fxRain6 { from { background-position: 0 0; } to { background-position: -432px 0; } }
.fx-e06-bolt {
left: 50%; top: -46px; width: 26px; height: 78px; margin-left: -13px;
background-image: url("../assets/fx/e06_lightning.webp");
animation: fxE06Bolt calc(80ms * var(--fx-speed)) steps(2) calc(300ms * var(--fx-speed)) both;
}
@keyframes fxE06Bolt { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }

.fx-e07-seal {
left: 50%; top: 0; width: 56px; height: 56px; margin: -34px 0 0 -28px;
background-image: url("../assets/fx/e07_seal.webp");
animation: fxE07Seal calc(600ms * var(--fx-speed)) ease-out both;
}
@keyframes fxE07Seal {
0% { opacity: 0; transform: rotate(-10deg) translateY(10px) scale(.9); }
50% { opacity: 1; transform: rotate(0deg) translateY(0) scale(1); }
72% { opacity: 1; }
100% { opacity: 0; transform: rotate(0deg) translateY(-6px); }
}
.fx-e07-ray {
left: 50%; top: 0; width: 24px; height: 72px; margin: -56px 0 0 -12px;
background-image: url("../assets/fx/e07_ray.webp");
animation: fxE07Ray calc(350ms * var(--fx-speed)) ease-in calc(200ms * var(--fx-speed)) both;
}
@keyframes fxE07Ray {
0% { opacity: 0; transform: translateY(-18px) scaleY(.7); }
30% { opacity: 1; transform: translateY(6px) scaleY(1); }
100% { opacity: 0; transform: translateY(26px) scaleY(1); }
}

.stat-atk.fx-gold-jump { animation: fxGoldJump calc(460ms * var(--fx-speed)) ease-out both; }
@keyframes fxGoldJump {
0% { color: inherit; transform: scale(1); }
30% { color: #ffd98a; transform: scale(1.35); }
70% { color: #ffd98a; transform: scale(1); }
100% { color: inherit; transform: scale(1); }
}

@keyframes ui2Jump { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes ui2Pip { 0% { opacity: 0; transform: translateY(40%) scale(.7); } 18% { opacity: 1; transform: translateY(0) scale(1.12); } 32% { transform: translateY(0) scale(1); } 72% { opacity: 1; } 100% { opacity: 0; transform: translateY(-90%) scale(1); } }
@keyframes ui2HealRise { 0% { transform: translateY(0); } 100% { transform: translateY(calc(-8 * var(--u, 1px))); } }
@keyframes ui2HealRing { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.12); } }
@keyframes ui2Leaf {
0% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--i) * 45deg)) translateY(calc(var(--hr, 38px) * -.26)) scale(.3); }
28% { opacity: 1; }
100% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--i) * 45deg + 40deg)) translateY(calc(var(--hr, 38px) * -1)) scale(1); }
}
@keyframes ui2ShGain { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes ui2ShHit { 0%, 100% { transform: translateX(0); filter: none; } 25% { transform: translateX(-14%) rotate(-8deg); filter: brightness(1.8); } 60% { transform: translateX(10%) rotate(6deg); } }
@keyframes ui2ShBreak { 0% { opacity: 1; transform: scale(1); filter: brightness(2.2); } 25% { opacity: 1; transform: scale(1.22); } 60%, 100% { opacity: 0; transform: scale(1.45); filter: brightness(1); } }
@keyframes ui2Shard { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(calc(var(--r) + 120deg)); } }

.fx-e08-sweep {
background-image: url("../assets/fx/e08_tails_sweep.webp");
filter: hue-rotate(70deg) saturate(1.6) brightness(1.05);
background-size: 100% 100%;
transform-origin: 0 50%;
animation: fxE08Sweep calc(400ms * var(--fx-speed)) cubic-bezier(.25,.6,.35,1) both;
}
@keyframes fxE08Sweep {
0% { opacity: 0; transform: rotate(var(--fx-rot, 0deg)) scaleX(.1); }
22% { opacity: 1; }
70% { opacity: 1; transform: rotate(var(--fx-rot, 0deg)) scaleX(1); }
100% { opacity: 0; transform: rotate(var(--fx-rot, 0deg)) scaleX(1); }
}
.fx-e08-veil {
left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px;
background-image: url("../assets/fx/e08_charm_veil.webp");
filter: hue-rotate(70deg) saturate(1.6) brightness(1.05);
animation: fxE08Veil calc(600ms * var(--fx-speed)) ease-out calc(250ms * var(--fx-speed)) both;
}
@keyframes fxE08Veil {
0% { opacity: 0; transform: scale(.8); }
18% { opacity: 1; transform: scale(1); }
55% { opacity: 1; }
100% { opacity: 0; transform: scale(1.06); }
}

.slot > .fx-e09-aura { z-index: auto; }
.fx-e09-aura {
left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px;
background-image: url("../assets/fx/e09_aura.webp");
animation: fxE09Aura calc(1300ms * var(--fx-speed)) ease-out calc(100ms * var(--fx-speed)) both;
}
@keyframes fxE09Aura {
0% { opacity: 0; transform: scale(.7); }
23% { opacity: .95; transform: scale(1.3); }
60% { opacity: .95; transform: scale(1.3); }
100% { opacity: 0; transform: scale(1.34); }
}
.fx-e09-dust {
left: 50%; bottom: -10px; width: 100px; height: 50px; margin-left: -50px;
background-image: url("../assets/fx/e09_dust.webp");
animation: fxE09Dust calc(350ms * var(--fx-speed)) ease-out both;
}
@keyframes fxE09Dust {
0% { opacity: 0; transform: translateY(14px) scaleX(.7); }
35% { opacity: 1; transform: translateY(0) scaleX(1); }
100% { opacity: 0; transform: translateY(-6px) scaleX(1.12); }
}
.fx-e09-banner {
background-image: url("../assets/fx/e09_banner.webp");
background-size: 100% 100%;
display: flex; align-items: center; justify-content: center;
animation: fxE09Banner calc(1200ms * var(--fx-speed)) cubic-bezier(.22,.7,.3,1) calc(200ms * var(--fx-speed)) both;
}
@keyframes fxE09Banner {
0% { opacity: 0; transform: translateX(-38%); }
25% { opacity: 1; transform: translateX(0); }
75% { opacity: 1; transform: translateX(0); }
100% { opacity: 0; transform: translateX(38%); }
}

.fx-e09-word {
font-size: 22px; font-weight: 700; letter-spacing: .22em;
color: #ffe9a8;
text-shadow: 0 1px 0 #6b3b12, 0 0 10px rgba(255,196,86,.75), 0 2px 6px rgba(0,0,0,.6);
padding-left: .22em;
}

.fx-e10-motes {
left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
animation: fxE10Motes calc(400ms * var(--fx-speed)) ease-out both;
}
.fx-e10-motes.el-wood  { background-image: url("../assets/fx/e10_motes_wood.webp"); }
.fx-e10-motes.el-water { background-image: url("../assets/fx/e10_motes_water.webp"); }
@keyframes fxE10Motes {
0% { opacity: 0; transform: scale(1.6); }
30% { opacity: 1; transform: scale(1.1); }
100% { opacity: 0; transform: scale(.8); }
}
.fx-e10-rise {
left: 50%; bottom: 0; width: 40px; height: 80px; margin-left: -20px;
background-image: url("../assets/fx/e10_rise.webp");
background-position: bottom center;
animation: fxE10Rise calc(300ms * var(--fx-speed)) ease-out calc(200ms * var(--fx-speed)) both;
}
@keyframes fxE10Rise {
0% { opacity: 0; transform: translateY(24px) scaleY(.6); }
40% { opacity: 1; transform: translateY(0) scaleY(1); }
100% { opacity: 0; transform: translateY(-8px) scaleY(1); }
}

.fx-e11-slash {
left: 50%; top: 50%; width: 110px; height: 110px; margin: -55px 0 0 -55px;
background-image: url("../assets/fx/e11_slash.webp");
animation: fxE11Slash calc(250ms * var(--fx-speed)) ease-out both;
}
@keyframes fxE11Slash {
0% { opacity: 0; transform: rotate(-28deg) scale(.5); }
30% { opacity: 1; transform: rotate(-6deg) scale(1.08); }
100% { opacity: 0; transform: rotate(10deg) scale(1.2); }
}

.fx-e11-flash {
background: #fff;
animation: fxE11Flash calc(60ms * var(--fx-speed)) linear both;
}
@keyframes fxE11Flash { 0% { opacity: 0; } 45% { opacity: .06; } 100% { opacity: 0; } }

.fx-e12-after {
left: 0; top: 0; width: 100%; height: 100%;
background-image: url("../assets/fx/e12_afterimage.webp");
animation: fxE12After calc(250ms * var(--fx-speed)) ease-out both;
}
@keyframes fxE12After {
0% { opacity: .75; }
100% { opacity: 0; }
}
.card.fx-dodge-back { animation: fxDodgeBack calc(200ms * var(--fx-speed)) cubic-bezier(.3,.7,.4,1) both; }
@keyframes fxDodgeBack {
0% { transform: translateY(0); opacity: 1; }
45% { transform: translateY(var(--fx-back, 8px)); opacity: .55; }
100% { transform: translateY(0); opacity: 1; }
}

.card-bt.fx-shake-weak { animation: fxShakeWeak calc(300ms * var(--fx-speed)) ease-out 1; }
@keyframes fxShakeWeak {
0%, 100% { transform: translate(0, 0) rotate(0); }
25% { transform: translate(-2px, 1px) rotate(-.5deg); }
55% { transform: translate(2px, -1px) rotate(.5deg); }
80% { transform: translate(-1px, 0) rotate(-.2deg); }
}

@media (prefers-reduced-motion: reduce) {
.fx {
animation-name: fxFadeRM !important;
animation-timing-function: linear !important;
transform: none !important;
}
@keyframes fxFadeRM {
0% { opacity: 0; }
22% { opacity: .85; }
72% { opacity: .85; }
100% { opacity: 0; }
}

.fx-e04-flame { background-position: -104px 0 !important; }
.fx-e05-vortex { background-position: -192px 0 !important; }
.fx-e06-rain { background-position: -144px 0 !important; }

.fx-e08-sweep { transform: rotate(var(--fx-rot, 0deg)) !important; }
.card.fx-bond-pulse,
.card-bt.fx-shake-weak,
.card.fx-dodge-back { animation: none !important; }
.stat-atk.fx-gold-jump { animation: none !important; color: #ffd98a; }
.float.fx-suck { animation-name: fadeOutOnly; }
}

#scr-prep.fx-lock { pointer-events: none; }

.card.merge-glow {
animation: mergeGlow calc(1000ms * var(--fx-speed, 1)) ease-out 1;
z-index: 32; position: relative;
}
@keyframes mergeGlow {
0%   { box-shadow: 0 0 0 0 rgba(242,199,92,0), 0 0 0 rgba(242,199,92,0); transform: scale(1); }
12%  { box-shadow: 0 0 0 3px rgba(242,199,92,.95), 0 0 26px 8px rgba(242,199,92,.7); transform: scale(1.14); }
30%  { box-shadow: 0 0 0 2px rgba(242,199,92,.6), 0 0 14px 4px rgba(242,199,92,.35); transform: scale(1.0); }
50%  { box-shadow: 0 0 0 3px rgba(242,199,92,.9), 0 0 22px 6px rgba(242,199,92,.6); transform: scale(1.06); }
75%  { box-shadow: 0 0 0 2px rgba(242,199,92,.5), 0 0 10px 3px rgba(242,199,92,.25); transform: scale(1); }
100% { box-shadow: 0 0 0 0 rgba(242,199,92,0), 0 0 0 rgba(242,199,92,0); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .card.merge-glow { animation: none; } }

.tutorial-guide .guide-tip { width: min(360px, calc(100vw - 20px)); box-sizing: border-box; min-height: 98px; height: auto; white-space: normal; line-height: 1.5; padding: 28px min(28px, calc(8vw - 2.56px)) 28px min(77px, calc(22vw - 7.04px)); padding: 30px 17% 30px calc(12% + clamp(56px, 19%, 68px) / 2 + 22px); overflow-wrap: break-word; color: #30271e; text-shadow: none; color: var(--lesson-ink); font-family: "Songti SC", "STSong", "Noto Serif SC", serif; font-size: 15px; line-height: 1.6; letter-spacing: .05em; font-size: 14px; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: auto; }

.tutorial-next { display: block; margin: 12px 0 0 auto; min-height: 40px; max-width: 100%; white-space: normal; overflow-wrap: break-word; }
.tutorial-guide .guide-tip .tutorial-next { margin: 12px 0 0 auto; min-height: 34px; font-family: inherit; font-size: 14px; letter-spacing: .14em; text-indent: .14em; }

.tutorial-portrait { position: absolute; left: 15%; top: 50%; transform: translate(-50%, -50%); width: 18%; height: auto; object-fit: contain; margin: 0; border-radius: 50%; }
.tutorial-guide .tutorial-portrait {
left: 12%; top: 50%;
width: clamp(56px, 19%, 68px); height: auto;
aspect-ratio: 1 / 1;
object-fit: contain; object-position: 50% 50%;
}
.tutorial-portrait[hidden] { display: none; }

.tutorial-skip { position: fixed; z-index: 101; right: 12px; }
.tutorial-end { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 24px; }
.tutorial-end[hidden], .tutorial-skip[hidden] { display: none; }
.tutorial-panel { width: min(340px, 100%); box-sizing: border-box; color: #f6e8c4; text-align: center; line-height: 1.8; }
.tutorial-panel h2 { margin: 0 0 18px; }

.tutorial-panel {
font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
font-size: 15px; line-height: 1.6; letter-spacing: .05em; }

.tutorial-lamps { display: flex; justify-content: center; gap: 20px; margin: 24px 0; }
.tutorial-lamps .lamp { transform: scale(1.5); }
#scr-battle.tutorial-demo .arena { flex: none; width: 220px; margin: 140px auto 20px; padding: 18px 24px; border: 1px solid #a89055; border-radius: 16px; background: rgba(10,24,44,.85); }

#scr-battle.tutorial-demo .arena { font-family: "Songti SC", "STSong", "Noto Serif SC", serif; letter-spacing: .05em; line-height: 1.6; }
.tutorial-demo .row-bt { grid-template-columns: 100px; justify-content: center; }
.tutorial-demo .row-bt .slot:not(:first-child) { display: none; }
.tutorial-demo .arena .side-label { display: none; }

.tutorial-dock { display: none; }
.tutorial-battle .tutorial-dock { display: block; flex: 0 0 176px; }
.tutorial-battle-guide .guide-hole, .tutorial-battle-guide .guide-point { display: none; }
.tutorial-battle-guide .guide-tip {
transform: translate(-50%, 0); max-height: 168px; overflow-y: auto;
}
.tutorial-battle-guide .guide-tip::after { display: none; }

.tutorial-battle .tutorial-dock { flex-basis: 212px; }
.tutorial-battle-guide .guide-tip { max-height: 204px; }

.tutorial-stat-focus {
border-radius: 4px;
box-shadow: 0 0 0 2px var(--gold), 0 0 10px 2px rgba(217,180,90,.55);
animation: guidePulse 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .tutorial-stat-focus { animation: none; } }

.tutorial-hit-held .burst-img { animation: none; opacity: 1; transform: scale(1); }
.tutorial-hit-held .burst-num { animation: none; opacity: 1; transform: translate(-50%, -50%); }
.float.tutorial-hit-held { animation: none; opacity: 1; transform: translateX(-50%); }

.tutorial-guide .guide-tip::after { display: none; }
.hand { width: 26px; height: 26px; }
.hand-art { display: block; width: 100%; height: 100%; object-fit: contain; transform: rotate(-135deg); }
.howto-icon { display: block; height: 1.1em; width: auto; flex: 0 0 auto; object-fit: contain; }
.boyi-welcome { display: block; height: 160px; width: auto; max-width: 100%; object-fit: contain; align-self: center; }
.tutorial-end-heading { display: flex; align-items: center; gap: 12px; text-align: left; min-width: 0; }
.boyi-finish { display: block; height: 120px; width: auto; max-width: 36%; object-fit: contain; flex: 0 1 auto; }
.tutorial-end-heading h2 { flex: 1 1 0; min-width: 0; margin: 0; overflow-wrap: break-word; }

#scr-start.first-visit .start-art { height: min(calc(8 * var(--vh)), 64px); min-height: 0; max-height: none; }
.first-visit .brand { margin-bottom: 8px; }
.first-visit .crest-lg { width: 92px; height: 52px; margin: 0 auto; }
.first-visit .brand-title { font-size: 28px; line-height: 1.3; margin-bottom: 4px; }
.first-visit .ring-deco { height: 26px; margin-bottom: 8px; }
.first-visit .field { margin-bottom: 8px; }
.first-visit .input { padding: 10px 12px; min-height: 44px; }
.first-visit .today-line { gap: 6px; margin-bottom: 8px; }
.first-visit .start-choice {
display: grid; grid-template-columns: 82px minmax(0, 1fr);
align-items: center; column-gap: 8px; row-gap: 6px;
}
.first-visit .start-choice[hidden] { display: none; }
.first-visit .boyi-welcome { grid-column: 1; grid-row: 1; height: 110px; max-width: 100%; justify-self: center; }
.first-visit #btn-tutorial {
grid-column: 2; grid-row: 1; min-width: 0;

min-height: 64px; padding-left: 2px; padding-right: 2px; --btn-pad: 6px; --btn-lift: 7px;
font-size: 15px; line-height: 1.5; letter-spacing: .04em;
text-indent: 0; white-space: normal; overflow-wrap: break-word;
}
.first-visit #btn-start-skip { grid-column: 1 / -1; min-height: 48px; }
.first-visit #btn-dex { min-height: 44px; margin-top: 6px; font-size: 14px; }
.first-visit #btn-howto { margin-top: 4px; }
.first-visit .hint { margin: 6px 0 0; line-height: 1.5; }

@media (max-height: 700px) {
#scr-start.first-visit .start-art { height: 20px; }
.first-visit .brand { margin-bottom: 4px; }
.first-visit .crest-lg { width: 66px; height: 38px; }
.first-visit .brand-title { font-size: 26px; line-height: 1.25; }
.first-visit .brand-sub { font-size: 11px; line-height: 1.4; }
.first-visit .ring-deco { margin-bottom: 4px; }
.first-visit .field { margin-bottom: 4px; }
.first-visit .field-label { margin-bottom: 2px; }
.first-visit .input { padding: 8px 12px; }
.first-visit .today-line { margin-bottom: 4px; }
.first-visit .start-choice { row-gap: 4px; }
.first-visit #btn-start-skip { min-height: 44px; font-size: 14px; }
.first-visit #btn-dex { margin-top: 4px; }
.first-visit #btn-howto { margin-top: 2px; }
.first-visit .hint { margin-top: 4px; line-height: 1.4; }
}

:root { --hero-chip-size: 28px; --hero-skill-size: 40px; --lord-chip-size: 24px; }
#scr-hero { text-align: center; }
#hero-title { margin: 14px 0 6px; }
.hero-intro { font-size: 12px; color: rgba(232,221,198,.65); margin: 0 0 20px; }
.hero-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.board-head-right, .prep-hero, .prep-lord, .battle-person { display: inline-flex; align-items: center; gap: 5px; }
.prep-hero[hidden], .battle-person[hidden], .hero-target-tip[hidden] { display: none; }
.hero-chip { width: var(--hero-chip-size); height: var(--hero-chip-size); object-fit: contain; flex: none; }
.lord-chip { width: var(--lord-chip-size); height: var(--lord-chip-size); object-fit: contain; flex: none; }
#scr-prep.has-lord #enemy-power { display: flex; align-items: center; gap: 6px; font-size: 10px; white-space: nowrap; }
.prep-lord { color: var(--gold); gap: 3px; }
#scr-prep.has-hero .p-board .panel-head { min-height: var(--hero-skill-size); margin-bottom: 0; }
.hero-passive { font-size: 10px; white-space: nowrap; color: var(--gold); }
.hero-passive.used { color: rgba(232,221,198,.4); }
.hero-skill { position: relative; width: var(--hero-skill-size); height: var(--hero-skill-size); flex: none; }

.hero-skill.used .hero-skill-icon { filter: grayscale(1); opacity: .5; }
.hero-skill-icon { width: 100%; height: 100%; object-fit: contain; }
.hero-charge { position: absolute; right: -1px; bottom: -1px; font-size: 11px; line-height: 16px; padding: 0 3px; background: #17252b; border-radius: 8px; }
.hero-skill.targeting { animation: heroPulse 900ms ease-in-out infinite alternate; }
.slot.hero-target { border: 1px solid #edcd76; box-shadow: 0 0 0 2px rgba(237,205,118,.5); }
.hero-target-tip {
position: fixed; z-index: 90; top: calc(var(--top-clear) + 46px); left: 50%; transform: translateX(-50%);
pointer-events: none; white-space: nowrap; padding: 5px 12px; border: 1px solid var(--gold);
border-radius: var(--r-panel); background: #18282c; color: #ffe6a1; font-size: 12px;
}
.battle-person { font-size: 10px; color: var(--gold); white-space: nowrap; }
#scr-battle.has-hero .topbar { gap: 4px; }
#scr-battle.has-hero .tb-left, #scr-battle.has-hero .tb-right { gap: 5px; }

#scr-battle.has-hero #bt-stage { max-width: 82px; font-size: 10px; letter-spacing: 0; white-space: normal; }
.hero-glow { animation: heroGlow 600ms ease-out; }
@keyframes heroGlow { 0%, 100% { filter: none; } 35% { filter: drop-shadow(0 0 8px #ffcf68) brightness(1.65); } }
@keyframes heroPulse { from { box-shadow: 0 0 0 1px #cfa54e; } to { box-shadow: 0 0 12px 3px #cfa54e; } }
@media (max-height: 700px) {

#scr-prep.has-hero { --prep-gap: 4px; --prep-pad: 1px; }
}
@media (prefers-reduced-motion: reduce) {
.hero-skill.targeting, .hero-glow { animation: none; outline: 1px solid var(--gold); }
}

/* ================= M12 · 海报署名与人物图鉴 =================
* 页签走普通文档流，沿用图鉴 topbar 的 --top-clear；条目长文在原滚动区内读。 */
.poster-hero { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 10px; color: var(--paper); margin: 2px 0; flex: 0 0 auto; }
.poster-hero[hidden] { display: none; }
.poster-hero .hero-chip { width: 24px; height: 24px; flex: 0 0 24px; }

.card .stat-atk.stat-hero { color: #ffd36b; text-shadow: 0 0 6px rgba(255, 150, 40, .85); }
.card .mk-hero { font-style: normal; font-size: 9px; line-height: 1; padding: 2px 3px; border-radius: 3px;
background: linear-gradient(180deg, #e2552b, #a8321a); color: #fff3d6; box-shadow: 0 0 6px rgba(255, 120, 40, .7); }

#scr-prep, #scr-battle {
--face-lord: clamp(84px, calc(11.4 * var(--vh)), 104px);
--face-hero: clamp(80px, calc(11 * var(--vh)), 96px);
--skill-btn: 64px;
--tools-top: calc(var(--host-nav) + 28px);
}

#scr-prep:not([hidden]) > .topbar { margin-top: 0; }
#scr-prep:not([hidden]), #scr-battle:not([hidden]) {
display: flex; flex-direction: column;
min-height: calc(100 * var(--vh));
padding-top: 0;

padding-bottom: calc(6px + var(--sa-bottom));
}

@media (min-height: 760px) {
#scr-prep {
--prep-gap: clamp(8px, calc(8.5 * var(--vh) - 64px), 24px);
--prep-pad: clamp(4px, calc(4.9 * var(--vh) - 38px), 14px);
--prep-tip-gap: 4px;

--prep-slot-enemy: clamp(56px, calc(7.5 * var(--vh)), 68px);
--prep-slot-shop: clamp(68px, calc(8.8 * var(--vh)), 82px);
}
#scr-prep .enemy-note { margin-top: 2px; }
}

.hero-face {
position: relative; display: block; flex: none;
width: var(--face-hero); height: var(--face-hero);
padding: 0; border: 0; border-radius: 50%;
background: none; cursor: pointer;
-webkit-appearance: none; appearance: none;
}
.hero-face[hidden] { display: none; }
.lord-face { width: var(--face-lord); height: var(--face-lord); }

.hero-face > .hero-frame {
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
display: block; width: auto; height: auto;
transform: none; aspect-ratio: auto;
border: 0; border-image: none; border-radius: 50%;
overflow: visible; padding: 0;
background: radial-gradient(circle at 50% 40%, #1c3a5c, #0a1728 72%);
}
.hero-face > .hero-frame::after {
content: ''; position: absolute; inset: 0; border-radius: 50%;
border: 3px solid #d9b45a;
box-shadow: inset 0 0 0 1px rgba(90,60,20,.7), inset 0 0 10px rgba(0,0,0,.65),
0 0 0 1px rgba(40,26,8,.6), 0 0 14px rgba(217,180,90,.42);
pointer-events: none;
}
.hero-face-img {
position: absolute; left: 3px; top: 3px;
width: calc(100% - 6px); height: calc(100% - 6px);
border-radius: 50%; object-fit: cover; object-position: 50% 30%;
pointer-events: none;
}
.hero-face-img[hidden] { display: none; }
.hero-face:active > .hero-frame { filter: brightness(1.12); }

.lord-block > .hero-plate, .hero-block > .hero-plate {
position: relative; left: auto; right: auto; bottom: auto; z-index: 1;
height: auto;
display: flex; flex-direction: column; justify-content: center; align-items: center;
margin-top: -12px; padding: 2px 12px 3px;
line-height: 1.25; white-space: nowrap; text-align: center;
pointer-events: none;
}
.hero-block > .hero-name-plate { font-size: 13px; letter-spacing: .12em; text-indent: .12em; color: #f3e2b6; }
.plate-stage { display: inline-flex; align-items: center; gap: 4px; }
.plate-stage .stage-no { font-size: 11px; letter-spacing: .08em; color: rgba(240,226,191,.82); }
.plate-stage .stage-no.long { font-size: 10px; letter-spacing: .02em; }
.plate-stage .el-badge { width: auto; height: auto; }
.lord-block .plate-name {
font-size: 13px; font-weight: 400; letter-spacing: .1em; color: #f3d98f;
overflow: visible;
}
.lord-block .plate-name[hidden] { display: none; }

.lord-block > .hero-face[hidden] + .hero-plate { margin-top: 0; }

.hero-pop {
position: fixed; z-index: 92; left: 0; top: 0;
width: max-content; max-width: min(260px, calc(100vw - 16px));
color: var(--paper); font-size: 12px; line-height: 1.55;
pointer-events: none;
animation: tipIn 160ms ease-out; }
.hero-pop[hidden] { display: none; }

.hero-pop-head { font-size: 14px; color: #f3d98f; letter-spacing: .06em; }
.hero-pop-sub { font-size: 11px; color: var(--gold); }
.hero-pop-text { margin-top: 2px; }
.hero-pop-foot { margin-top: 3px; font-size: 10px; color: rgba(232,221,198,.6); }
.hero-pop-foot[hidden] { display: none; }

#scr-prep .topbar.prep-top {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
grid-template-rows: auto 44px auto;
column-gap: 6px;
padding: calc(var(--sa-top) + 6px) 0 0;
margin-bottom: 2px;
background: none; border: 0; border-radius: 0;
}
#scr-prep .prep-top .lord-block {
grid-column: 2; grid-row: 1 / 3;
display: flex; flex-direction: column; align-items: center;

min-height: calc(var(--tools-top) + 44px);
}
#scr-prep .prep-top .tb-left { grid-column: 1; grid-row: 2; justify-self: start; }
#scr-prep .prep-top .tb-right { grid-column: 3; grid-row: 2; justify-self: end; gap: 4px; }
#scr-prep .prep-top .tb-mid {
grid-column: 1 / 4; grid-row: 3;
margin: 2px 0 0; padding: 0 calc(var(--panel-pad) + 1px);
flex-wrap: wrap; column-gap: 8px;
}
#scr-prep .prep-top .ring-btn { margin-left: 0; }

#scr-prep .prep-top .mute-btn-tb { min-width: 44px; min-height: 44px; }

#scr-prep .topbar.prep-top.deep {
--face-lord: clamp(76px, calc(9.5 * var(--vh)), 80px);
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-rows: auto 44px;
}
#scr-prep .topbar.prep-top.deep .lord-block { grid-column: 1 / 4; grid-row: 1; min-height: var(--tools-top); }
#scr-prep .topbar.prep-top.deep .tb-mid {
grid-column: 2; grid-row: 2;
margin: 0; padding: 0 2px;
flex-direction: column; justify-content: center; align-items: center;
text-align: center; min-width: 0;
}
#scr-prep .topbar.prep-top.deep .tb-mid .panel-title,
#scr-prep .topbar.prep-top.deep .tb-mid .panel-note { line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
#scr-prep .topbar.prep-top.deep .ring-btn { width: 44px; height: 44px; }

#scr-prep .p-enemy .counter-hint { margin: 2px 0 4px; }
#scr-prep .counter-badge { padding: 2px 8px; }

#scr-prep .p-board .slot, #scr-prep .p-board .card { min-height: 80px; }
#scr-prep .lord-block > .hero-plate, #scr-prep .hero-block > .hero-plate { line-height: 1.15; }

#scr-prep .lord-block > .hero-plate { --np-h: 30px; }

#scr-prep.has-hero .p-board .panel-head { min-height: 18px; margin-bottom: 4px; }

#scr-prep .prep-dock {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
grid-template-rows: auto 44px auto;
grid-template-areas:
"lamps hero gold"
"sell  hero fight"
"tip   tip  tip";
column-gap: 0;
margin-top: auto;
padding: 0;
}
#scr-prep .prep-dock .actionbar { display: contents; }
#scr-prep .prep-dock #tb-lamps {
grid-area: lamps; justify-self: end; align-self: start;
margin: 6px -6px 0 0; position: relative; z-index: 2;
}
#scr-prep .prep-dock #tb-gold {
grid-area: gold; justify-self: start; align-self: start;
margin: 8px 0 0 -6px; position: relative; z-index: 2;
}
#scr-prep .prep-dock .hero-block {
grid-area: hero; align-self: start;
display: flex; flex-direction: column; align-items: center;
padding: 0 4px;
}
#scr-prep .prep-dock .hero-block[hidden] { display: none; }
#scr-prep .prep-dock .prep-hero {
grid-area: gold; justify-self: end; align-self: start;
display: flex; flex-direction: column; align-items: center; gap: 2px;
margin-right: 6px;
}
#scr-prep .prep-dock .prep-hero[hidden] { display: none; }
#scr-prep .prep-dock #btn-sell { grid-area: sell; justify-self: start; width: 108px; }
#scr-prep .prep-dock #btn-fight { grid-area: fight; justify-self: end; width: 118px; }

#scr-prep .prep-dock .tip {
grid-area: tip; margin-top: 2px; padding: 0; border: 0;
}

#scr-prep .prep-dock .hero-skill { width: var(--skill-btn); height: var(--skill-btn); }
#scr-prep .prep-dock .hero-skill.auto { cursor: pointer; }
#scr-prep .prep-dock .hero-passive { font-size: 10px; line-height: 1.2; }
#scr-prep .prep-dock .hero-charge { right: 2px; bottom: 2px; }

#scr-prep:not(.has-hero) .prep-dock #tb-lamps { margin: 0 6px 0 0; align-self: center; }
#scr-prep:not(.has-hero) .prep-dock #tb-gold { margin: 0 0 0 6px; align-self: center; }

#scr-battle .topbar.bt-top {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: start; column-gap: 6px;
padding: calc(var(--sa-top) + 6px) 0 0;
margin-bottom: 14px;
background: none; border: 0; border-radius: 0;
}
#scr-battle .bt-top .lord-block {
grid-column: 2; display: flex; flex-direction: column; align-items: center;
}
#scr-battle .bt-top .tb-right {
grid-column: 3; justify-self: start;
margin-top: var(--tools-top); gap: 6px;
}
#scr-battle .bt-top .tb-right .bt-ctl { min-height: 44px; min-width: 44px; }
#scr-battle .bt-dock {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
margin-top: 8px;
}
#scr-battle .bt-dock[hidden] { display: none; }
#scr-battle .bt-dock .hero-block { grid-column: 2; display: flex; flex-direction: column; align-items: center; }
#scr-battle .bt-dock .hero-skill { grid-column: 3; justify-self: start; margin-left: 10px; width: var(--skill-btn); height: var(--skill-btn); pointer-events: none; }
#scr-battle .ticker { min-height: 44px; margin-top: 8px; }

.hero-face > .hero-frame.hero-glow { z-index: 2; }

#hero-target-tip { top: calc(var(--top-clear) + 110px); }

.guide-skip { top: var(--top-clear); }

@media (max-height: 700px) {
#scr-prep, #scr-battle {
--face-lord: 76px;
--face-hero: 68px;
--skill-btn: 52px;
}
#scr-prep .topbar.prep-top {
grid-template-rows: auto 44px;
margin-bottom: 2px;
}
#scr-prep .prep-top .lord-block {
grid-column: 1 / 4; grid-row: 1;
min-height: var(--tools-top);
}
#scr-prep .prep-top .tb-mid {
grid-column: 2; grid-row: 2;
margin: 0; padding: 0;
flex-direction: column; justify-content: center; align-items: center;
text-align: center; min-width: 0;
}
#scr-prep .prep-top .tb-mid .panel-title { line-height: 1.3; }
#scr-prep .prep-top .tb-mid .panel-note { line-height: 1.3; }

#scr-prep .counter-hint { margin: 1px 0 3px; gap: 6px; flex-wrap: nowrap; }
#scr-prep .counter-badge { padding: 1px 7px; font-size: 11px; }
#scr-prep .counter-tip { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#scr-prep .enemy-note { margin-top: 2px; }
#scr-prep { --prep-slot-shop: 62px; }
#scr-prep .row-shop .card { min-height: 58px; }
#scr-prep .p-shop .panel-head { margin-bottom: 2px; }
#scr-prep .bench-strip { margin: 3px 0 0; }
#scr-prep .divider { height: 12px; margin: -4px 0; background-size: 180px auto; }

#scr-prep .prep-dock {
grid-template-columns: 84px minmax(0, 1fr) auto minmax(0, 1fr) 84px;
grid-template-rows: auto auto auto;
grid-template-areas:
"tip  tip   tip  tip   tip"
"sell lamps hero skill fight"
"sell gold  hero skill fight";
padding-top: 0;
}
#scr-prep .prep-dock .tip { margin: 0 0 2px; min-height: 14px; font-size: 10px; line-height: 14px; }
#scr-prep .prep-dock #tb-lamps { font-size: 14px; margin: 0 2px 2px 0; align-self: end; }
#scr-prep .prep-dock #tb-gold { grid-area: gold; justify-self: end; margin: 2px 2px 0 0; font-size: 12px; }
#scr-prep .prep-dock .prep-hero { grid-area: skill; justify-self: start; align-self: center; margin: 0 0 0 4px; }

#scr-prep .prep-dock #btn-sell, #scr-prep .prep-dock #btn-fight { width: 84px; align-self: end; margin-bottom: 4px; }

#scr-prep .prep-dock .hero-block > .hero-plate { margin-top: -10px; --np-h: 26px; padding-left: var(--np-gap); padding-right: var(--np-gap); }
#scr-prep:not(.has-hero) .prep-dock {
grid-template-columns: 84px minmax(0, 1fr) 84px;
grid-template-areas:
"tip  tip   tip"
"sell lamps fight"
"sell gold  fight";
}
#scr-prep:not(.has-hero) .prep-dock #tb-lamps,
#scr-prep:not(.has-hero) .prep-dock #tb-gold { justify-self: center; margin: 0; }

#scr-battle .topbar.bt-top { margin-bottom: 16px; }

#scr-battle .clash-line { flex: 0 0 36px; min-height: 36px; }
}

.hero-face > .hero-frame { background: none; }
.hero-face > .hero-frame::after {
inset: -11%; border: 0; border-radius: 0; box-shadow: none; z-index: 1;
background: url("../assets/ui/hero_frame.webp") center / 100% 100% no-repeat;
}
.hero-face-img {
left: -1%; top: -1%; width: 102%; height: 102%;
border-radius: 0; object-fit: contain; object-position: 50% 50%;
-webkit-clip-path: circle(42.6% at 50% 50%); clip-path: circle(42.6% at 50% 50%);
}
.hero-face > .hero-frame.hero-glow { border-radius: 50%; }

.lord-block > .hero-plate, .hero-block > .hero-plate { --np-h: 28px; height: var(--np-h); min-width: 96px; }

#scr-prep .prep-top .tb-mid .panel-title > .plate-stage { display: inline-flex; vertical-align: -2px; }
#scr-prep .prep-top .tb-mid .panel-title > .plate-stage::after { content: '·'; margin: 0 5px; color: rgba(240,226,191,.6); }
#scr-prep .prep-top .tb-mid .panel-title > .plate-stage .stage-no { font-size: inherit; color: var(--gold); letter-spacing: inherit; }
#scr-battle .bt-top .bt-stage-slot {
grid-column: 1; justify-self: end; align-self: start;
margin-top: var(--tools-top); min-height: 44px; display: flex; align-items: center;
}
#scr-battle .bt-top .bt-stage-slot > .plate-stage .stage-no { font-size: 12px; color: var(--gold); letter-spacing: .06em; }
#scr-battle .bt-top .bt-stage-slot:empty { display: none; }

.field-corner { background: url("../assets/ui/frame_corner.webp") 0 0 / 100% 100% no-repeat; }
.field-knot { background: url("../assets/ui/crest.webp") 92% 47% / 105.3% auto no-repeat; }
.clash-cloud { background-image: url("../assets/ui/crest.webp"); background-repeat: no-repeat; background-size: 385.7% auto; }
.clash-cloud-l { background-position: 6.25% 61%; }
.clash-cloud-r { background-position: 99.25% 61%; }

#scr-prep {
--m14-gap: 10px;
--face-mini: 28px;
--prep-slot-shop: 86px;
--m14-board: 86px;
}
#scr-prep, #scr-battle { --face-hero: clamp(80px, calc(12.4 * var(--vh)), 104px); }

#scr-prep .topbar.prep-top { margin-bottom: 8px; }
#scr-prep .panel { margin-bottom: var(--m14-gap); }

#scr-prep .p-enemy { margin-top: auto; }

#scr-prep .panel-title { font-size: 14px; letter-spacing: .12em; }
#scr-prep .p-board .panel-title, #scr-prep .p-shop .panel-title { font-size: 15px; color: #f0d78a; }
#scr-prep .p-board .panel-head { min-height: 20px; }

#scr-prep .divider { height: 16px; margin: calc(var(--m14-gap) * -1 + 2px) 0 2px; }

#scr-prep .divider.divider-line {
height: 1px; margin: auto 16px var(--m14-gap);
background: linear-gradient(90deg, rgba(217,180,90,0), rgba(217,180,90,.5) 18%, rgba(217,180,90,.5) 82%, rgba(217,180,90,0));
opacity: 1;
}
#scr-prep .p-board .slot, #scr-prep .p-board .card { min-height: var(--m14-board); }

#scr-prep .prep-top .tb-mid {
justify-content: center; align-items: center;
flex-direction: row; flex-wrap: wrap; column-gap: 0; text-align: center;
}
#scr-prep .prep-top .tb-mid .panel-title:empty { display: none; }
#scr-prep .prep-top .tb-mid .panel-title { font-size: 12px; letter-spacing: .06em; }
#scr-prep.has-lord #enemy-power { font-size: 11px; }

#scr-prep.has-lord .topbar.prep-top:not(.deep) .tb-mid .panel-note { position: relative; top: -1.5px; }
@media (max-height: 700px) {
#scr-prep.has-lord .topbar.prep-top:not(.deep) .tb-mid .panel-note { top: 0; }
}

#scr-prep .topbar.prep-top.deep .tb-mid { flex-direction: column; flex-wrap: nowrap; }
#scr-prep .topbar.prep-top.deep .tb-mid .panel-title > .plate-stage::after { content: none; }

#scr-prep .p-enemy {
position: relative; z-index: 30;
padding: 0;
background: none; border-color: transparent; box-shadow: none;
}
.enemy-intel {
position: relative; z-index: 2;
display: flex; align-items: center; gap: 5px;
width: 100%; min-height: 44px; margin: 0; padding: 0 10px 0 10px;
border: 1px solid rgba(217,180,90,.42); border-radius: var(--r-panel);
background: rgba(10,24,44,.62);
box-shadow: 0 2px 10px rgba(0,0,0,.35);
color: var(--paper); font-family: inherit; text-align: left;
cursor: pointer; -webkit-appearance: none; appearance: none;
-webkit-tap-highlight-color: transparent;
}
.enemy-intel:active { background: rgba(28,44,66,.8); }
.p-enemy.open:not(.pinned) .enemy-intel { border-color: rgba(217,180,90,.72); background: rgba(12,27,48,.98); }
.intel-title { flex: none; font-size: 13px; letter-spacing: .04em; color: #f0d78a; white-space: nowrap; }
.intel-faces { flex: none; display: flex; align-items: center; gap: 2px; }
.intel-face {
position: relative; flex: none; box-sizing: border-box;
width: var(--face-mini); height: var(--face-mini);
border: 1.5px solid rgba(217,180,90,.6); border-radius: 50%;
overflow: hidden; background: rgba(0,0,0,.4);
box-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.intel-face.empty { border: 1px solid rgba(var(--k-gold-rgb), .38); background: rgba(var(--k-ink-rgb), .18); box-shadow: none; }
.intel-face-img {
display: block; width: 100%; height: 100%;
object-fit: cover; object-position: 50% 12%;
transform: scale(1.18); transform-origin: 50% 20%;
pointer-events: none;
}
.intel-face-img[hidden] { display: none; }
.intel-counter { flex: none; display: flex; }
.intel-counter:empty { display: none; }
.intel-counter .counter-badge { padding: 2px 6px 2px 5px; gap: 3px; font-size: 11px; letter-spacing: .02em; line-height: 16px; }
.intel-power { flex: 1 0 auto; text-align: right; font-size: 11px; color: rgba(232,221,198,.78); white-space: nowrap; }
.intel-arrow {
flex: none; width: 8px; height: 8px; margin: -4px 4px 0 2px;
border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
transform: rotate(45deg); transition: transform .18s ease, margin .18s ease;
}
.p-enemy.open .intel-arrow { transform: rotate(-135deg); margin-top: 4px; }

.p-enemy.pinned .intel-arrow { display: none; }
#scr-prep .p-enemy.pinned { background: rgba(10,24,44,.62); border-color: rgba(217,180,90,.42); }
.p-enemy.pinned .enemy-intel, .p-enemy.pinned .enemy-intel:active { cursor: default; border-color: transparent; background: none; box-shadow: none; }

.enemy-drop {
position: absolute; left: -1px; right: -1px; top: calc(100% + 4px);
padding: 8px var(--panel-pad) 8px;
border: 1px solid rgba(217,180,90,.6); border-radius: var(--r-panel);
z-index: 1;
background: rgba(9,20,36,.98);

box-shadow: 0 12px 28px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,236,190,.08), 0 0 0 100vmax rgba(3,8,16,.5);
animation: tipIn 160ms ease-out;
}
.enemy-drop[hidden] { display: none; }
#scr-prep .enemy-drop .counter-hint { margin: 0 0 6px; }
#scr-prep .enemy-drop .enemy-note { margin-top: 5px; }

.p-enemy.pinned .enemy-drop {
position: static; padding: 0 var(--panel-pad) 6px;
border: 0; border-radius: 0; background: none; box-shadow: none; animation: none;
}
@media (prefers-reduced-motion: reduce) { .enemy-drop, .intel-arrow { animation: none; transition: none; } }

#scr-prep .p-shop .panel-head { min-height: 34px; margin-bottom: 6px; }

#scr-prep .p-shop #btn-reroll { position: relative; z-index: 1; min-height: 34px; margin: 0; font-size: 13px; }

#scr-prep .row-shop { gap: 6px; }
#scr-prep .row-shop .slot, #scr-prep .row-shop .card { min-height: var(--prep-slot-shop); }

#scr-prep .bench-strip { margin: 8px 0 0; }

#scr-prep.enemy-pinned { --m14-gap: 6px; --prep-slot-shop: 72px; }

#scr-battle .bt-top .lord-block,
#scr-battle .bt-top .bt-stage-slot,
#scr-battle .bt-top .tb-right { grid-row: 1; }
#scr-battle .topbar.bt-top { margin-bottom: 6px; }

#scr-battle:not([hidden]) { padding-left: 6px; padding-right: 6px; }
#scr-battle .topbar.bt-top, #scr-battle .bt-dock { margin-left: 6px; margin-right: 6px; }
#scr-battle .ticker { width: auto; margin-left: 6px; margin-right: 6px; }

#scr-battle:not(.tutorial-demo) .arena {
position: relative;
flex: 0 0 auto; margin: auto 0;
justify-content: flex-start;
padding: 22px 6px 10px;
border: 1px solid rgba(217,180,90,.66);
border-radius: 14px;
background:
radial-gradient(ellipse 70% 30% at 50% 50%, rgba(217,180,90,.08), rgba(0,0,0,0) 72%),
rgba(8,18,34,.46);
box-shadow: 0 0 0 1px rgba(40,26,8,.55), inset 0 0 0 1px rgba(0,0,0,.35), inset 0 0 18px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.4);
}

#scr-battle:not(.tutorial-demo) .arena::before {
content: ''; position: absolute; left: -4px; top: -4px; right: -4px; bottom: -4px;
pointer-events: none; z-index: 0;
--cg: rgba(226,190,104,.95);
background:
radial-gradient(circle at 9px 9px, transparent 4px, var(--cg) 4.5px, var(--cg) 6px, transparent 6.6px),
radial-gradient(circle at 9px 9px, var(--cg) 1.6px, transparent 2.2px),
radial-gradient(circle at 21px 4.5px, transparent 2px, var(--cg) 2.5px, var(--cg) 3.6px, transparent 4.2px),
radial-gradient(circle at 4.5px 21px, transparent 2px, var(--cg) 2.5px, var(--cg) 3.6px, transparent 4.2px),
radial-gradient(circle at calc(100% - 9px) 9px, transparent 4px, var(--cg) 4.5px, var(--cg) 6px, transparent 6.6px),
radial-gradient(circle at calc(100% - 9px) 9px, var(--cg) 1.6px, transparent 2.2px),
radial-gradient(circle at calc(100% - 21px) 4.5px, transparent 2px, var(--cg) 2.5px, var(--cg) 3.6px, transparent 4.2px),
radial-gradient(circle at calc(100% - 4.5px) 21px, transparent 2px, var(--cg) 2.5px, var(--cg) 3.6px, transparent 4.2px),
radial-gradient(circle at 9px calc(100% - 9px), transparent 4px, var(--cg) 4.5px, var(--cg) 6px, transparent 6.6px),
radial-gradient(circle at 9px calc(100% - 9px), var(--cg) 1.6px, transparent 2.2px),
radial-gradient(circle at 21px calc(100% - 4.5px), transparent 2px, var(--cg) 2.5px, var(--cg) 3.6px, transparent 4.2px),
radial-gradient(circle at 4.5px calc(100% - 21px), transparent 2px, var(--cg) 2.5px, var(--cg) 3.6px, transparent 4.2px),
radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), transparent 4px, var(--cg) 4.5px, var(--cg) 6px, transparent 6.6px),
radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), var(--cg) 1.6px, transparent 2.2px),
radial-gradient(circle at calc(100% - 21px) calc(100% - 4.5px), transparent 2px, var(--cg) 2.5px, var(--cg) 3.6px, transparent 4.2px),
radial-gradient(circle at calc(100% - 4.5px) calc(100% - 21px), transparent 2px, var(--cg) 2.5px, var(--cg) 3.6px, transparent 4.2px);
}

#scr-battle:not(.tutorial-demo) .arena .side-label {
top: -19px; left: 12px;
font-size: 13px; font-weight: 700; line-height: 16px; letter-spacing: .12em;
}

#scr-battle:not(.tutorial-demo) .row-bt { gap: 5px; }
#scr-battle:not(.tutorial-demo) .row-bt .slot { aspect-ratio: 68 / 140; }

#scr-battle:not(.tutorial-demo) .clash-line {
flex: 0 0 28px; min-height: 28px; height: 28px;
margin: 8px -2px 22px;
background: none;
font-size: 13px;
}
#scr-battle:not(.tutorial-demo) .clash-line::before {
top: 50%; bottom: auto; left: 12px; right: 12px; height: 1px;
background: linear-gradient(90deg, rgba(217,180,90,.15), rgba(217,180,90,.6) 20%, rgba(217,180,90,.6) 80%, rgba(217,180,90,.15));
}
#scr-battle:not(.tutorial-demo) .clash-line::after {
top: 50%; bottom: auto; left: 0; right: 0; height: 14px; margin-top: -7px;
--cg: rgba(226,190,104,.95);
background:
radial-gradient(circle at 7px 50%, transparent 3.2px, var(--cg) 3.7px, var(--cg) 5px, transparent 5.6px),
radial-gradient(circle at 7px 50%, var(--cg) 1.4px, transparent 2px),
radial-gradient(circle at calc(100% - 7px) 50%, transparent 3.2px, var(--cg) 3.7px, var(--cg) 5px, transparent 5.6px),
radial-gradient(circle at calc(100% - 7px) 50%, var(--cg) 1.4px, transparent 2px);
}
#scr-battle:not(.tutorial-demo) .clash-line > span { position: relative; z-index: 1; max-width: calc(100% - 48px); line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#scr-battle:not(.tutorial-demo) .clash-line > span:empty { display: none; }
#scr-battle .bt-dock { margin-top: 6px; }
#scr-battle .ticker { margin-top: 6px; }

@media (max-height: 700px) {
#scr-prep {
--m14-gap: 6px;
--face-mini: 25px;
--prep-slot-shop: 74px;
--m14-board: 80px;
}
#scr-prep, #scr-battle { --face-hero: 68px; }
#scr-prep .topbar.prep-top { margin-bottom: 4px; }
#scr-prep .panel-title { font-size: 13px; }
#scr-prep .p-board .panel-title, #scr-prep .p-shop .panel-title { font-size: 14px; }
#scr-prep .prep-top .tb-mid { flex-direction: row; }
.enemy-intel { gap: 5px; padding: 0 8px 0 9px; }
.intel-counter .counter-badge { padding: 1px 6px 1px 5px; }
#scr-prep .p-shop .panel-head { min-height: 34px; margin-bottom: 4px; }

#scr-prep .bench-strip { margin: 6px 0 0; }
#scr-prep.enemy-pinned { --m14-gap: 4px; --prep-slot-shop: 64px; }

#scr-battle .topbar.bt-top { margin-bottom: 4px; }
#scr-battle:not(.tutorial-demo) .arena { padding: 20px 5px 8px; }
#scr-battle:not(.tutorial-demo) .row-bt .slot { aspect-ratio: 63 / 128; }
#scr-battle:not(.tutorial-demo) .clash-line { flex: 0 0 28px; min-height: 28px; margin: 6px -2px 20px; }

#scr-battle.tutorial-battle .arena { padding: 18px 5px 6px; }
#scr-battle.tutorial-battle .row-bt .slot { aspect-ratio: 66 / 118; }
#scr-battle.tutorial-battle .clash-line { margin: 4px -2px 18px; }
}

#scr-battle {
--face-hero: clamp(88px, calc(13.8 * var(--vh)), 116px);
--skill-btn: 72px;
--field-pad-x: 10px;

--field-corner: 148px;
--corner-dx: calc(-0.5px - var(--field-corner) * 35.5 / 512);
--corner-dy: calc(-0.5px - var(--field-corner) * 43 / 512);
}

#scr-battle .bt-top .bt-stage-slot,
#scr-battle .bt-top .bt-stage-slot:empty { display: none; }
#scr-battle .bt-top .lord-block > .hero-plate {
min-width: 96px;
height: auto;
line-height: 1;
}
#scr-battle .bt-top .lord-block .plate-stage { display: flex; justify-content: center; line-height: 12px; }

#scr-battle .bt-top #bt-stage { max-width: none; white-space: nowrap; font-size: 10px; letter-spacing: .06em; color: rgba(240,226,191,.86); }
#scr-battle .bt-top .lord-block .plate-name { font-size: 14px; line-height: 17px; letter-spacing: .1em; }

#scr-battle:not(.tutorial-battle):not(.tutorial-demo) .topbar.bt-top { margin-bottom: 16px; }

#scr-battle:not(.tutorial-demo) .arena {
padding: 30px var(--field-pad-x) 12px;
border-color: rgba(226,190,104,.82);
border-radius: 8px;
}

#scr-battle:not(.tutorial-demo) .arena::before {
left: 3px; top: 3px; right: 3px; bottom: 3px;
border: 1px solid rgba(226,190,104,.42); border-radius: 6px;
background: none;
}

#scr-battle:not(.tutorial-demo) .row-bt { gap: 4px; }

.field-knot, .field-corner { display: none; }
#scr-battle:not(.tutorial-demo) .field-knot,
#scr-battle:not(.tutorial-demo) .field-corner { display: block; position: absolute; z-index: 2; pointer-events: none; }
#scr-battle:not(.tutorial-demo) .field-knot { left: 50%; top: 0; width: 72px; height: 30px; margin: -16px 0 0 -36px; }

#scr-battle:not(.tutorial-demo) .field-corner {
width: var(--field-corner); height: var(--field-corner);
-webkit-mask-image: radial-gradient(circle var(--field-corner) at 0 0, #000 45%, rgba(0,0,0,0) 100%);
mask-image: radial-gradient(circle var(--field-corner) at 0 0, #000 45%, rgba(0,0,0,0) 100%);
}

#scr-battle .field-corner.tl { left: var(--corner-dx); top: var(--corner-dy); }
#scr-battle .field-corner.tr { right: var(--corner-dx); top: var(--corner-dy); transform: scaleX(-1); }
#scr-battle .field-corner.bl { left: var(--corner-dx); bottom: var(--corner-dy); transform: scaleY(-1); }
#scr-battle .field-corner.br { right: var(--corner-dx); bottom: var(--corner-dy); transform: scale(-1, -1); }

#scr-battle:not(.tutorial-demo) .arena .side-label {
top: -23px; left: 24px;
font-size: 16px; font-weight: 700; line-height: 18px; letter-spacing: 0;
color: #ecc97a;
text-shadow: 0 1px 2px rgba(0,0,0,.75);
}

#scr-battle:not(.tutorial-demo) .clash-line { margin: 10px 0 24px; }
#scr-battle:not(.tutorial-demo) .clash-line::before {
left: 2px; right: 2px;
background: linear-gradient(90deg, rgba(217,180,90,.08), rgba(217,180,90,.72) 14%, rgba(217,180,90,.72) 86%, rgba(217,180,90,.08));
}

#scr-battle:not(.tutorial-demo) .clash-line::after { background: none; }
#scr-battle:not(.tutorial-demo) .clash-line > span { max-width: calc(100% - 64px); font-size: 14px; line-height: 20px; }
.clash-cloud { display: none; }
#scr-battle:not(.tutorial-demo) .clash-cloud {
display: block; flex: none; position: relative; z-index: 2;
width: 26px; height: 28px; pointer-events: none;
}
#scr-battle:not(.tutorial-demo) .clash-cloud-l { order: -1; margin-right: -9px; }
#scr-battle:not(.tutorial-demo) .clash-cloud-r { margin-left: -9px; }
#scr-battle #bt-banner:empty ~ .clash-cloud { display: none; }

#scr-battle:not(.tutorial-demo):not(.tutorial-battle) .arena { margin: auto 0 0; }
#scr-battle:not(.tutorial-demo):not(.tutorial-battle) .ticker { margin-bottom: auto; }
#scr-battle .bt-dock { margin-top: 6px; }
#scr-battle .bt-dock .hero-skill { margin-left: 12px; }
#scr-battle .ticker {
min-height: 44px; margin-top: 6px; padding: 0 6px 0 12px;
border: 1.5px solid rgba(226,190,104,.85); border-radius: 8px;
background: rgba(10,24,44,.84);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.4);
font-size: 13px;
}
#scr-battle .ticker-more {
display: flex; align-items: center; justify-content: center;
min-width: 56px; height: 30px; padding: 0 10px;
font-size: 13px; letter-spacing: .12em; text-indent: .12em; color: #f3d98f;
border: 1px solid rgba(226,190,104,.8); border-radius: 6px;
background: linear-gradient(180deg, #17314f, #0b1a2d);
box-shadow: inset 0 1px 0 rgba(255,236,190,.12);
}

@media (max-height: 700px) {
#scr-battle {
--face-hero: 90px;
--skill-btn: 60px;
--field-pad-x: 8px;

}
#scr-battle .bt-top .lord-block .plate-name { font-size: 13px; line-height: 16px; }
#scr-battle:not(.tutorial-battle):not(.tutorial-demo) .topbar.bt-top { margin-bottom: 14px; }
#scr-battle:not(.tutorial-demo) .arena { padding: 24px var(--field-pad-x) 10px; }
#scr-battle:not(.tutorial-demo) .field-knot { width: 60px; height: 25px; margin: -13px 0 0 -30px; }
#scr-battle:not(.tutorial-demo) .arena .side-label { top: -20px; font-size: 15px; line-height: 16px; }
#scr-battle:not(.tutorial-demo) .clash-line { margin: 6px 0 20px; }
#scr-battle .bt-dock { margin-top: 4px; }
#scr-battle .bt-dock .hero-skill { margin-left: 8px; }
#scr-battle .ticker { margin-top: 4px; }

#scr-battle.tutorial-battle .arena { padding: 18px var(--field-pad-x) 6px; }
#scr-battle.tutorial-battle .clash-line { margin: 4px 0 18px; }
#scr-battle.tutorial-battle .arena .side-label { top: -17px; font-size: 14px; line-height: 15px; }
}

#scr-battle .clash-line { transition: opacity 120ms ease-out; }
#scr-battle.in-flight .clash-line { opacity: 0; }
#scr-battle.in-flight .slot.flight-host { z-index: 47; }
@media (prefers-reduced-motion: reduce) {
#scr-battle .clash-line { transition: none; }
}

.poster-feats {
display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 4px;
width: 100%; margin: 1px 0 3px; flex: 0 0 auto;
}
.poster-feats[hidden] { display: none; }
.feat-chip {
display: inline-block; padding: 1px 5px;
font-size: 9px; line-height: 13px; letter-spacing: .04em; white-space: nowrap;
color: #f3d98f;
border: 1px solid rgba(226,190,104,.9); border-radius: 3px;
background: linear-gradient(180deg, #17314f, #0b1a2d);
box-shadow: inset 0 0 0 1px rgba(226,190,104,.22);
}

.poster-title + .poster-feats:not([hidden]) { margin-top: -1px; }

#scr-final.has-deep-entry { --poster-reserve: calc(182px + var(--sa-bottom)); }
#scr-final.has-share.has-deep-entry { --poster-reserve: calc(240px + var(--sa-bottom)); }

/* 图鉴「音乐与音效授权」：CC BY 署名原文里的两个网址是不带空格的长串，窄屏上要能在任意处折行，
* 否则整页被撑出横向滚动（网址只是纯文本，不是链接） */
.credit-row { overflow-wrap: anywhere; word-break: break-word; }

.chushan {
position: fixed; inset: 0; z-index: 95;
display: flex; align-items: center; justify-content: center;
padding: calc(24px + var(--sa-top)) 16px calc(24px + var(--sa-bottom));
background: rgba(5,13,26,.86);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.chushan[hidden] { display: none; }
.chushan-glow {
position: absolute; left: 50%; top: 46%;
width: 360px; height: 360px; margin: -180px 0 0 -180px;
border-radius: 50%; pointer-events: none;
background:
radial-gradient(circle, rgba(255,226,150,.26) 0%, rgba(217,180,90,.12) 38%, rgba(217,180,90,0) 70%),
repeating-conic-gradient(from 0deg, rgba(226,190,104,.12) 0deg 3deg, rgba(226,190,104,0) 3deg 15deg);
-webkit-mask-image: radial-gradient(circle, #000 30%, rgba(0,0,0,0) 70%);
mask-image: radial-gradient(circle, #000 30%, rgba(0,0,0,0) 70%);
}
.chushan-inner {
position: relative; z-index: 1;
display: flex; flex-direction: column; align-items: center;
text-align: center;
}
.chushan-hero { margin-bottom: 14px; }
.chushan-hero[hidden] { display: none; }
.chushan .chushan-face { --face-hero: 88px; cursor: inherit; }
.chushan-big {
font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
font-size: 68px; font-weight: 700; line-height: 1.1;
letter-spacing: .24em; text-indent: .24em;
background: linear-gradient(180deg, #fff3cf 0%, #f3d98f 48%, #c9962f 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
filter: drop-shadow(0 4px 14px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(217,180,90,.35));
}
.chushan-sub {
margin-top: 10px;
font-size: 14px; letter-spacing: .14em; text-indent: .14em;
color: rgba(240,226,191,.88);
}
.chushan-rank {
display: inline-flex; align-items: baseline; gap: 10px;
margin-top: 18px; padding: 6px 18px;
border: 1.5px solid rgba(226,190,104,.85); border-radius: 8px;
background: linear-gradient(180deg, #17314f, #0b1a2d);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.45);
}
.chushan-title {
font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
font-size: 20px; letter-spacing: .12em; color: #f3e2b6;
}
.chushan-score { font-size: 15px; font-weight: 700; color: var(--gold); }
.chushan-tip {
margin-top: 22px;
font-size: 12px; letter-spacing: .2em; text-indent: .2em;
color: rgba(232,221,198,.6);
opacity: 0; transition: opacity .3s ease-out;
}
.chushan.tap-ok .chushan-tip { opacity: 1; }

.chushan.fx-in .chushan-big { animation: chushanDrop .52s cubic-bezier(.2,.9,.3,1.25) both; }
.chushan.fx-in .chushan-hero,
.chushan.fx-in .chushan-sub,
.chushan.fx-in .chushan-rank { animation: chushanFade .5s ease-out .28s both; }
.chushan.fx-in .chushan-glow { animation: chushanGlow 1.2s ease-out both; }
@keyframes chushanDrop {
0% { opacity: 0; transform: translateY(-28px) scale(1.5); }
100% { opacity: 1; transform: none; }
}
@keyframes chushanFade {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
@keyframes chushanGlow {
from { opacity: 0; transform: scale(.6) rotate(-20deg); }
to { opacity: 1; transform: none; }
}
@media (max-height: 700px) {
.chushan .chushan-face { --face-hero: 76px; }
.chushan-big { font-size: 60px; }
}
@media (prefers-reduced-motion: reduce) {
.chushan.fx-in .chushan-big,
.chushan.fx-in .chushan-hero,
.chushan.fx-in .chushan-sub,
.chushan.fx-in .chushan-rank,
.chushan.fx-in .chushan-glow { animation: chushanFade .2s ease-out both; }
}

.result-line { display: block; }

.duel-stage { display: flex; flex-direction: column; align-items: center; width: 100%; }
.duel-face[hidden] { display: none; }
.duel-crack, .duel-bust { display: none; }

#bt-overlay .duel-face[hidden] { display: none; }
#bt-overlay.lay-duel .result-inner,
#bt-overlay.lay-solo .result-inner {
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
width: auto; max-width: none;
justify-content: flex-start;
padding: var(--sa-top) 0 var(--sa-bottom);
}
#bt-overlay.lay-duel .duel-stage,
#bt-overlay.lay-solo .duel-stage { position: relative; flex: none; }
#bt-overlay.lay-duel .result-seal,
#bt-overlay.lay-solo .result-seal { flex: none; margin: 0; text-align: center; }

#bt-overlay .duel-face {
position: relative; flex: none;
display: flex; flex-direction: column; align-items: center;
--d: 112px; --pl-w: 136px; --pl-h: 34px; --pl-mt: -2px; --pl-fs: 16px;
}
#bt-overlay .duel-face > .hero-face {
width: var(--d); height: var(--d);
cursor: default; isolation: isolate;
}
#bt-overlay .duel-face > .hero-plate {
width: var(--pl-w); height: var(--pl-h); min-width: 0;
margin-top: var(--pl-mt); padding-top: calc(var(--pl-h) * 8 / 112); padding-bottom: 0;
font-size: var(--pl-fs); line-height: 1;

--np-h: var(--pl-h);
letter-spacing: .04em; text-indent: .04em; white-space: nowrap;
}

#bt-overlay .duel-face > .hero-face::before {
content: ''; position: absolute; left: -30%; top: -30%; right: -30%; bottom: -30%;
border-radius: 50%; z-index: -1; pointer-events: none; opacity: 0;
background: radial-gradient(circle closest-side, rgba(255,226,150,.62) 0%, rgba(255,214,120,.5) 58%, rgba(236,176,66,.2) 78%, rgba(236,176,66,0) 100%);
}
#bt-overlay .duel-winner > .hero-face::before { opacity: 1; }

#bt-overlay.lose .duel-winner > .hero-face::before { opacity: .78; }
#bt-overlay .duel-winner > .hero-plate {
filter: brightness(1.12);
}

#bt-overlay .duel-loser { --lose-tilt: -4deg; }
#bt-overlay .duel-loser > .hero-face {
transform: rotate(var(--lose-tilt));
filter: saturate(.12) brightness(.7);
}
#bt-overlay .duel-loser > .hero-plate { filter: grayscale(1) brightness(.8); }

#bt-overlay .duel-loser .duel-crack {
display: block; position: absolute; z-index: 2; pointer-events: none;
left: 0; top: 0; right: 0; bottom: 0;
filter: drop-shadow(.5px .5px 0 rgba(240,240,240,.5));
}
#bt-overlay .duel-crack::before,
#bt-overlay .duel-crack::after,
#bt-overlay .duel-loser > .hero-face::after {
content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
background: rgba(12,14,18,.95); pointer-events: none;
}
#bt-overlay .duel-crack::before {
-webkit-clip-path: polygon(89.30% 27.31%, 88.74% 23.21%, 85.58% 20.84%, 83.95% 17.21%, 83.70% 15.54%, 83.41% 16.66%, 80.12% 15.76%, 77.89% 12.54%, 74.15% 11.35%, 73.97% 11.65%, 77.29% 13.34%, 79.46% 16.51%, 83.23% 17.91%, 84.81% 21.48%, 87.92% 23.78%, 88.99% 27.49%);
clip-path: polygon(89.30% 27.31%, 88.74% 23.21%, 85.58% 20.84%, 83.95% 17.21%, 83.70% 15.54%, 83.41% 16.66%, 80.12% 15.76%, 77.89% 12.54%, 74.15% 11.35%, 73.97% 11.65%, 77.29% 13.34%, 79.46% 16.51%, 83.23% 17.91%, 84.81% 21.48%, 87.92% 23.78%, 88.99% 27.49%);
}
#bt-overlay .duel-crack::after {
-webkit-clip-path: polygon(12.38% 24.63%, 13.09% 20.74%, 16.25% 18.75%, 17.93% 15.37%, 21.68% 14.26%, 24.07% 11.55%, 24.26% 11.84%, 22.30% 15.05%, 18.61% 16.10%, 17.46% 18.92%, 19.10% 19.81%, 16.98% 19.43%, 13.87% 21.37%, 12.67% 24.82%);
clip-path: polygon(12.38% 24.63%, 13.09% 20.74%, 16.25% 18.75%, 17.93% 15.37%, 21.68% 14.26%, 24.07% 11.55%, 24.26% 11.84%, 22.30% 15.05%, 18.61% 16.10%, 17.46% 18.92%, 19.10% 19.81%, 16.98% 19.43%, 13.87% 21.37%, 12.67% 24.82%);
}
#bt-overlay .duel-loser > .hero-face::after {
z-index: 2;
-webkit-clip-path: polygon(95.13% 54.74%, 97.09% 50.82%, 95.89% 46.79%, 97.96% 45.17%, 95.82% 45.99%, 96.62% 42.62%, 93.93% 39.05%, 93.59% 39.13%, 95.63% 42.77%, 94.89% 46.86%, 96.09% 50.80%, 94.78% 54.71%);
clip-path: polygon(95.13% 54.74%, 97.09% 50.82%, 95.89% 46.79%, 97.96% 45.17%, 95.82% 45.99%, 96.62% 42.62%, 93.93% 39.05%, 93.59% 39.13%, 95.63% 42.77%, 94.89% 46.86%, 96.09% 50.80%, 94.78% 54.71%);
}

#bt-overlay .duel-face.bust .duel-bust {
display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
overflow: hidden; pointer-events: none;
-webkit-clip-path: circle(43.45% at 50% 50%); clip-path: circle(43.45% at 50% 50%);
}
#bt-overlay .duel-face.bust .hero-face-img { display: none; }
#bt-overlay .duel-bust-img { position: absolute; max-width: none; height: auto; }

#bt-overlay.lay-duel .result-sub,
#bt-overlay.lay-solo .result-sub {
flex: none; align-self: stretch; margin: 0 24px;
font-size: 16px; line-height: 24px; letter-spacing: .04em;
color: var(--paper); white-space: nowrap;
}
#bt-overlay.lay-duel .result-line,
#bt-overlay.lay-solo .result-line { height: 24px; }
#bt-overlay.lay-duel .result-line:first-child,
#bt-overlay.lay-solo .result-line:first-child { color: #f0d78a; font-weight: 700; }
#bt-overlay.lay-duel .result-lamps,
#bt-overlay.lay-solo .result-lamps { flex: none; margin-bottom: 0; }
#bt-overlay.lay-duel .fc-status,
#bt-overlay.lay-solo .fc-status {
flex: none; height: 28px; margin-bottom: 0; padding: 0 12px 0 2px; font-size: 14px;
}
#bt-overlay.lay-duel .fc-status-art,
#bt-overlay.lay-solo .fc-status-art { width: 24px; height: 24px; }
#bt-overlay.lay-duel .two-btns,
#bt-overlay.lay-solo .two-btns {
flex: none; width: auto; margin-top: auto;
justify-content: center;
}

#bt-overlay.lose.lay-duel .result-bg::after,
#bt-overlay.lose.lay-solo .result-bg::after {
content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none;
background: radial-gradient(ellipse 96px 76px at 50% 72%, rgba(11,24,42,.97) 0%, rgba(11,24,42,.9) 50%, rgba(11,24,42,0) 100%);
}

#bt-overlay.lay-duel .result-seal { width: 100px; height: 108px; }

#bt-overlay.lay-duel.win #ov-lord  { margin-top: 42px; --d: 112px; --pl-w: 152px; --pl-h: 36px; --pl-mt: -4px; }
#bt-overlay.lay-duel.win #ov-title { margin-top: 30px; }
#bt-overlay.lay-duel.win #ov-hero  { margin-top: 2px; --d: 184px; --pl-w: 152px; --pl-h: 36px; --pl-mt: -7px; }
#bt-overlay.lay-duel.win #ov-sub   { margin-top: 18px; }
#bt-overlay.lay-duel.win .result-line + .result-line { margin-top: 8px; }
#bt-overlay.lay-duel.win.has-fc .result-line:nth-child(3) { margin-top: 4px; }
#bt-overlay.lay-duel.win .fc-status { margin-top: 6px; }

#bt-overlay.lay-duel.lose #ov-lord  { margin-top: 17px; --d: 174px; --pl-w: 156px; --pl-h: 36px; --pl-mt: -13px; }
#bt-overlay.lay-duel.lose #ov-title { margin-top: 25px; }
#bt-overlay.lay-duel.lose #ov-hero  { margin-top: 15px; --d: 112px; --pl-w: 128px; --pl-h: 34px; --pl-mt: -10px; }
#bt-overlay.lay-duel.lose #ov-sub   { margin-top: 13px; }
#bt-overlay.lay-duel.lose .result-line + .result-line { margin-top: 6px; }
#bt-overlay.lay-duel.lose .result-line:nth-child(3) { font-size: 14px; }
#bt-overlay.lay-duel .result-lamps { margin-top: 24px; font-size: 27.7px; gap: 19px; }
#bt-overlay.lay-duel.has-fc .result-lamps { margin-top: 5px; font-size: 23px; gap: 25px; }
#bt-overlay.lay-duel.lose .fc-status { margin-top: 17px; }
#bt-overlay.lay-duel .two-btns { grid-template-columns: 126px 192px; gap: 16px; margin-bottom: 30px; }

#bt-overlay.lay-duel.duel-compact .result-seal { width: 76px; height: 82px; }
#bt-overlay.lay-duel.duel-compact .duel-face { --pl-fs: 14px; }
#bt-overlay.lay-duel.duel-compact.win #ov-lord  { margin-top: 33px; --d: 88px; --pl-w: 136px; --pl-h: 30px; --pl-mt: -8px; }
#bt-overlay.lay-duel.duel-compact.win #ov-title { margin-top: 23px; }
#bt-overlay.lay-duel.duel-compact.win #ov-hero  { margin-top: 5px; --d: 140px; --pl-w: 120px; --pl-h: 30px; --pl-mt: -11px; }
#bt-overlay.lay-duel.duel-compact.win #ov-sub   { margin-top: 17px; }
#bt-overlay.lay-duel.duel-compact.lose #ov-lord  { margin-top: 28px; --d: 120px; --pl-w: 136px; --pl-h: 30px; --pl-mt: -9px; }
#bt-overlay.lay-duel.duel-compact.lose #ov-title { margin-top: 19px; }
#bt-overlay.lay-duel.duel-compact.lose #ov-hero  { margin-top: 24px; --d: 88px; --pl-w: 112px; --pl-h: 30px; --pl-mt: -10px; }
#bt-overlay.lay-duel.duel-compact.lose #ov-sub   { margin-top: 12px; }
#bt-overlay.lay-duel.duel-compact .result-sub { font-size: 15px; line-height: 22px; }
#bt-overlay.lay-duel.duel-compact .result-line { height: 22px; }
#bt-overlay.lay-duel.duel-compact.win .result-line + .result-line,
#bt-overlay.lay-duel.duel-compact.win.has-fc .result-line:nth-child(3) { margin-top: 5px; }
#bt-overlay.lay-duel.duel-compact.lose .result-line + .result-line { margin-top: 4px; }
#bt-overlay.lay-duel.duel-compact .result-lamps,
#bt-overlay.lay-duel.duel-compact.has-fc .result-lamps { margin-top: 5px; font-size: 24.6px; gap: 13px; }
#bt-overlay.lay-duel.duel-compact.win .fc-status { margin-top: 33px; }
#bt-overlay.lay-duel.duel-compact.lose .fc-status { margin-top: 13px; }
#bt-overlay.lay-duel.duel-compact .two-btns {
grid-template-columns: 120px 195px; gap: 12px;
margin-bottom: clamp(8px, calc(100 * var(--vh) - 625px), 42px);
}

#bt-overlay.lay-solo #ov-title { order: -1; margin-top: 30px; width: 96px; height: 100px; }
#bt-overlay.lay-solo .duel-winner { margin-top: 16px; --d: 244px; --pl-w: 166px; --pl-h: 38px; --pl-mt: -16px; --pl-fs: 18px; }

#bt-overlay.lay-solo .duel-loser {
position: absolute; top: 365px; left: calc(50% + 69px); width: 116px;
--d: 82px; --lose-tilt: 10deg;
}
#bt-overlay.lay-solo .duel-loser > .hero-plate {
width: 116px; height: 22px; margin-top: 8px;
font-size: 14px; letter-spacing: .08em; text-indent: .08em;
}
#bt-overlay.lay-solo #ov-sub { margin-top: 95px; }
#bt-overlay.lay-solo .result-line:first-child { height: 26px; font-size: 18px; line-height: 26px; }
#bt-overlay.lay-solo .result-line + .result-line { margin-top: 8px; }
#bt-overlay.lay-solo .result-line:nth-child(3) { font-size: 14px; }
#bt-overlay.lay-solo .result-lamps { margin-top: 17px; font-size: 24.6px; gap: 12px; }
#bt-overlay.lay-solo .fc-status { margin-top: 2px; }
#bt-overlay.lay-solo .result-lamps[hidden] + .fc-status { margin-top: 53px; }
#bt-overlay.lay-solo .two-btns { grid-template-columns: 132px 174px; gap: 16px; margin-bottom: 35px; }

#bt-overlay.lay-solo.duel-compact #ov-title { margin-top: 44px; width: 79px; height: 80px; }
#bt-overlay.lay-solo.duel-compact .duel-winner { margin-top: 7px; --d: 201px; --pl-w: 158px; --pl-h: 34px; --pl-mt: -14px; --pl-fs: 17px; }
#bt-overlay.lay-solo.duel-compact .duel-loser { top: 314px; left: calc(50% + 70.5px); width: 112px; --d: 64px; }
#bt-overlay.lay-solo.duel-compact .duel-loser > .hero-plate { width: 112px; height: 20px; margin-top: 7px; }
#bt-overlay.lay-solo.duel-compact #ov-sub { margin-top: 60px; }
#bt-overlay.lay-solo.duel-compact .result-line { height: 22px; font-size: 15px; line-height: 22px; }
#bt-overlay.lay-solo.duel-compact .result-line:first-child { height: 24px; font-size: 18px; line-height: 24px; }
#bt-overlay.lay-solo.duel-compact .result-line:nth-child(2) { margin-top: 6px; }
#bt-overlay.lay-solo.duel-compact .result-line:nth-child(3) { margin-top: 7px; font-size: 14px; }
#bt-overlay.lay-solo.duel-compact .result-lamps { margin-top: 9px; font-size: 23px; gap: 11px; }
#bt-overlay.lay-solo.duel-compact .fc-status { margin-top: 6px; }
#bt-overlay.lay-solo.duel-compact .result-lamps[hidden] + .fc-status { margin-top: 45px; }
#bt-overlay.lay-solo.duel-compact .two-btns {
grid-template-columns: 132px 179px;
margin-bottom: clamp(8px, calc(100 * var(--vh) - 623px), 44px);
}

#bt-overlay.duel-in .result-bg { animation: duelFade var(--dfx-veil) ease-out both; }
#bt-overlay.duel-in .duel-winner > .hero-face {
animation: duelWinIn var(--dfx-face) cubic-bezier(.2,.9,.3,1.15) var(--dfx-faceAt) both;
}
#bt-overlay.duel-in .duel-winner > .hero-face::before { animation: duelGlow calc(var(--dfx-face) * 2) ease-out var(--dfx-faceAt) both; }
#bt-overlay.duel-in .duel-winner > .hero-plate { animation: duelFade var(--dfx-face) ease-out var(--dfx-faceAt) both; }
#bt-overlay.duel-in.lay-duel .duel-loser > .hero-face { animation: duelLoseIn var(--dfx-loser) ease-in-out var(--dfx-loserAt) both; }
#bt-overlay.duel-in.lay-solo .duel-loser > .hero-face { animation: soloLoseIn var(--dfx-loser) ease-in-out var(--dfx-loserAt) both; }
#bt-overlay.duel-in .duel-loser > .hero-plate { animation: duelFade var(--dfx-loser) ease-out var(--dfx-loserAt) both; }
#bt-overlay.duel-in .duel-loser .duel-crack,
#bt-overlay.duel-in .duel-loser > .hero-face::after { animation: duelFade var(--dfx-seal) ease-out var(--dfx-sealAt) both; }
#bt-overlay.duel-in.lay-duel .result-seal { animation: duelSealIn var(--dfx-seal) ease-out var(--dfx-sealAt) both; }
#bt-overlay.duel-in.lay-solo .result-seal { animation: soloSealIn var(--dfx-seal) ease-out var(--dfx-sealAt) both; }
#bt-overlay.duel-in .result-line { animation: duelRise var(--dfx-row) ease-out var(--dfx-rowsAt) both; }
#bt-overlay.duel-in .result-line:nth-child(2) { animation-delay: calc(var(--dfx-rowsAt) + var(--dfx-rowStep)); }
#bt-overlay.duel-in .result-line:nth-child(3) { animation-delay: calc(var(--dfx-rowsAt) + var(--dfx-rowStep) * 2); }
#bt-overlay.duel-in .result-lamps { animation: duelFade var(--dfx-row) ease-out var(--dfx-lampAt) both; }
#bt-overlay.duel-in .fc-status,
#bt-overlay.duel-in .two-btns { animation: duelFade var(--dfx-btn) ease-out var(--dfx-btnAt) both; }

@keyframes duelFade {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes duelGlow {
from { opacity: 0; transform: scale(.8); }
to   { opacity: 1; transform: none; }
}
@keyframes duelWinIn {
from { opacity: 0; transform: scale(.92); }
to   { opacity: 1; transform: none; }
}

@keyframes duelLoseIn {
0%   { opacity: 0; transform: scale(1.3) rotate(0deg); filter: none; }
35%  { opacity: 1; }
100% { opacity: 1; transform: rotate(-4deg); filter: saturate(.12) brightness(.7); }
}
@keyframes soloLoseIn {
0%   { opacity: 0; transform: translate(-24px, -24px) rotate(0deg); filter: none; }
35%  { opacity: 1; }
100% { opacity: 1; transform: rotate(10deg); filter: saturate(.12) brightness(.7); }
}
@keyframes duelSealIn {
from { opacity: 0; transform: scale(.9); }
to   { opacity: 1; transform: none; }
}
@keyframes soloSealIn {
from { opacity: 0; transform: scale(1.08); }
to   { opacity: 1; transform: none; }
}
@keyframes duelRise {
from { opacity: 0; transform: translateY(6px); }
to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
#bt-overlay.duel-in .result-bg,
#bt-overlay.duel-in .hero-face,
#bt-overlay.duel-in .hero-face::before,
#bt-overlay.duel-in .hero-plate,
#bt-overlay.duel-in .duel-crack,
#bt-overlay.duel-in .result-seal,
#bt-overlay.duel-in .result-line,
#bt-overlay.duel-in .result-lamps,
#bt-overlay.duel-in .fc-status,
#bt-overlay.duel-in .two-btns { animation: none; }
}

html:not([lang^="zh"]) body *:not(.mk-star):not(.mk-merge3):not(.tier-star):not(.dex-mk3) {
letter-spacing: normal !important;
text-indent: 0 !important;
}

html:not([lang^="zh"]) .brand-title { font-size: 30px; white-space: nowrap; }
html:not([lang^="zh"]) .first-visit .brand-title { font-size: 26px; }
html:not([lang^="zh"]) .has-resume .brand-title { font-size: 26px; }
html:not([lang^="zh"]) .brand-sub { font-size: 12px; }

.ring-node.ring-node-icon { background: none !important; font-size: 0; }
.ring-node.ring-node-icon .el-badge-img { width: 26px; height: 26px; }

html:not([lang^="zh"]) .result-seal,
html:not([lang^="zh"]) #bt-overlay.lay-duel .result-seal,
html:not([lang^="zh"]) #bt-overlay.lay-solo #ov-title {
width: auto; max-width: calc(100 * var(--vw) - 32px); white-space: nowrap;
}

html:not([lang^="zh"]) #bt-overlay.lay-duel .result-sub,
html:not([lang^="zh"]) #bt-overlay.lay-solo .result-sub { white-space: normal; font-size: 15px; line-height: 20px; }
html:not([lang^="zh"]) #bt-overlay.lay-duel .result-line,
html:not([lang^="zh"]) #bt-overlay.lay-solo .result-line { height: auto; min-height: 20px; }
html:not([lang^="zh"]) #bt-overlay .duel-face > .hero-plate { font-size: calc(var(--pl-fs) - 1px); }

html:not([lang^="zh"]) #scr-battle .bt-top .tb-right { flex-wrap: nowrap; }
html:not([lang^="zh"]) #scr-battle .bt-top .tb-right .bt-ctl { font-size: 13px; }
html:not([lang^="zh"]) #scr-battle:not(.tutorial-demo) .clash-line > span { white-space: normal; overflow: visible; text-overflow: clip; font-size: 12px; line-height: 15px; }

html:not([lang^="zh"]) .float.skill {
font-size: 10px; line-height: 1.05; white-space: normal;
width: 100%; text-align: center;
}
html:not([lang^="zh"]) #scr-battle:not(.tutorial-demo) .arena .side-label { font-size: 14px; }

html:not([lang^="zh"]) .intel-title { font-size: 12px; }
html:not([lang^="zh"]) .intel-counter .counter-badge { font-size: 10px; padding: 2px 5px 2px 4px; }
html:not([lang^="zh"]) .intel-power { font-size: 10px; flex-shrink: 1; min-width: 0; }
html:not([lang^="zh"]) .enemy-intel { gap: 4px; padding-left: 8px; padding-right: 6px; }
html:not([lang^="zh"]) .intel-faces { gap: 1px; }
html:not([lang^="zh"]) #scr-prep { --face-mini: 22px; }

html:not([lang^="zh"]) .card-name { line-height: 1.05; overflow-wrap: normal; word-break: normal; text-wrap: balance; }

html:not([lang^="zh"]) .hy { font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif; }

html:not([lang^="zh"]) .poster-team .card-name { font-size: 8px; }
html:not([lang^="zh"]) .poster-team .card-name.long { font-size: 7px; }
html:not([lang^="zh"]) .poster-foot { font-size: 8px; }

html:not([lang^="zh"]) .chushan-big { font-size: 44px; white-space: nowrap; line-height: 1.2; }

@media (max-height: 700px) {
html:not([lang^="zh"]) #scr-prep .prep-top .tb-mid { flex-direction: column; }
html:not([lang^="zh"]) #scr-prep .prep-top .tb-mid .panel-title > .plate-stage::after { content: none; }
html:not([lang^="zh"]) #scr-prep .prep-top .tb-mid .panel-title { font-size: 12px; line-height: 1.25; }
html:not([lang^="zh"]) #scr-prep.has-lord #enemy-power { font-size: 10px; line-height: 1.25; }
html:not([lang^="zh"]) #scr-prep { --face-mini: 20px; }
html:not([lang^="zh"]) .enemy-intel { gap: 3px; padding: 0 6px 0 7px; }
html:not([lang^="zh"]) .intel-title { font-size: 11px; }

html:not([lang^="zh"]) .poster-team .card-name { display: none; }
}

#scr-battle .bt-top .tb-right { position: relative; }
#scr-battle .bt-top .tb-right .pause-btn { position: absolute; right: 0; top: calc(100% + 6px); display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.pause-btn[hidden] { display: none !important; }
.pause-icon {
display: block; box-sizing: border-box;
width: 12px; height: 14px;
border-left: 4px solid #f3e2b6; border-right: 4px solid #f3e2b6;
}
.pause-btn.on .pause-icon {
width: 0; height: 0;
border-left: 13px solid #f3e2b6; border-right: 0;
border-top: 8px solid transparent; border-bottom: 8px solid transparent;
margin-left: 3px;
}

.bt-paused {
position: absolute; left: 50%; top: 50%; z-index: 70;
transform: translate(-50%, -50%);
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: 10px 22px 9px; margin: 0;
border: 1px solid rgba(226,190,104,.9); border-radius: 10px;
background: rgba(10,24,44,.94);
box-shadow: 0 6px 20px rgba(0,0,0,.6);
color: var(--paper); font-family: inherit; cursor: pointer;
-webkit-appearance: none; appearance: none;
}
.bt-paused[hidden] { display: none; }
.bt-paused-big { font-size: 20px; font-weight: 700; letter-spacing: .08em; color: #f3d98f; white-space: nowrap; }
.bt-paused-hint { font-size: 11px; color: rgba(232,221,198,.78); white-space: nowrap; }

@keyframes stGoldenBreak {
0%   { box-shadow: 0 0 0 3px #fff, 0 0 22px 6px rgba(255,255,255,.9); filter: brightness(1.8); }
100% { box-shadow: 0 0 0 0 rgba(255,255,255,0), 0 0 0 0 rgba(255,255,255,0); filter: none; }
}
@keyframes stPoisonTick { 0%, 100% { translate: 0 0; } 25% { translate: -2px 0; } 75% { translate: 2px 0; } }
@keyframes stStunSpin { 0% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 100% { transform: translateX(-3px); } }

@keyframes fxBreakOut { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.08); } }
@keyframes fxFadeOut { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fxPetals { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4%) rotate(6deg); } }
@keyframes relicNew { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,214,102,0); } 35% { transform: scale(1.35); box-shadow: 0 0 0 3px rgba(255,214,102,.95), 0 0 16px rgba(255,214,102,.9); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,214,102,0); } }

@keyframes relicNewDisc { 0% { transform: translate(-50%, -50%) scale(1); } 35% { transform: translate(-50%, -50%) scale(1.35); } 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes relicNewIcon { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes hintPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,214,102,0); } 50% { box-shadow: 0 0 0 3px rgba(255,214,102,.9), 0 0 14px rgba(255,214,102,.8); } }

@keyframes settleFloat { 0% { opacity: 0; transform: translateY(calc(14 * var(--u))) scale(.7); } 55% { opacity: 1; transform: translateY(calc(-4 * var(--u))) scale(1.12); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes settleFade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes settleGlow { 0% { box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(128,100,58,.35), 0 0 0 0 rgba(243,210,122,0); } 35% { box-shadow: inset 0 0 0 calc(2 * var(--u)) rgba(217,180,90,.95), 0 0 calc(18 * var(--u)) calc(2 * var(--u)) rgba(243,210,122,.7); } 100% { box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(128,100,58,.35), 0 0 0 0 rgba(243,210,122,0); } }
@keyframes grFadeUp { 0% { opacity: 0; transform: translate(-50%, calc(8 * var(--u))); } 100% { opacity: 1; transform: translate(-50%, 0); } }

@keyframes ui13Wait { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }
@keyframes ui16PpPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }

@keyframes cptLampOut { 0% { opacity: 0; transform: scale(.7); } 15% { opacity: 1; transform: scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05); } }

@keyframes wsSeal { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.4) rotate(-14deg); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(.92) rotate(-6deg); } 40% { transform: translate(-50%, -50%) scale(1.04) rotate(-6deg); } 50%, 82% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-6deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.06) rotate(-6deg); } }
@keyframes wsRing { 0%, 26% { opacity: 0; transform: translate(-50%, -50%) scale(.35); } 34% { opacity: .95; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); } }
@keyframes wsFlake { 0%, 28% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)); } 36% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx) * 2), calc(-50% + var(--dy) * 2)) rotate(calc(var(--r) + 240deg)); } }
@keyframes wsShade { 0% { opacity: 0; } 20%, 82% { opacity: 1; } 100% { opacity: 0; } }

@keyframes grLayer { 0% { opacity: 0; } 8%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes grHero { 0% { opacity: 0; transform: translateX(-40%); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes grBeast { 0% { opacity: 0; transform: translateY(14%) scale(.9); filter: brightness(2.2); } 60% { opacity: 1; filter: brightness(1.4); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); } }
@keyframes grSeal { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.6) rotate(-12deg); } 55% { opacity: 1; transform: translate(-50%, -50%) scale(.94) rotate(-4deg); } 75% { transform: translate(-50%, -50%) scale(1.04) rotate(-4deg); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-4deg); } }
@keyframes grRays { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(.6); } 30% { opacity: .9; } 100% { opacity: .7; transform: translate(-50%, -50%) rotate(40deg) scale(1.15); } }

@keyframes grBeastCut { 0% { opacity: 0; transform: translateY(14%) scale(.9); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) scale(1); } }

@keyframes ui1Flash { 0%, 70% { filter: brightness(2) saturate(.6); } 100% { filter: none; } }
@keyframes ui1Knock {
0%   { translate: 0 0; scale: 1 1; }
28%  { translate: var(--ui1-kx) var(--ui1-ky); scale: var(--ui1-sx) var(--ui1-sy); }
62%  { translate: calc(var(--ui1-kx) * -.22) calc(var(--ui1-ky) * -.22); scale: 1 1; }
100% { translate: 0 0; scale: 1 1; }
}
@keyframes ui1Shake {
0%   { translate: 0 0; }
15%  { translate: calc(var(--ui1-sk) * .3) var(--ui1-sk); }
40%  { translate: calc(var(--ui1-sk) * -.25) calc(var(--ui1-sk) * -.55); }
68%  { translate: calc(var(--ui1-sk) * .1) calc(var(--ui1-sk) * .25); }
100% { translate: 0 0; }
}
@keyframes ui1Spark {
0%   { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); }
70%  { opacity: 1; }
100% { opacity: 0; transform: rotate(var(--a)) translateY(var(--d)) scale(.35); }
}
@keyframes ui1Star {
0%   { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-20deg); }
12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.25) rotate(-4deg); }
24%  { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.02) rotate(4deg); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15) rotate(8deg); }
}
@keyframes ui1Num {
0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
6%   { opacity: 1; }
12%  { transform: translate(-50%, -50%) scale(1.35); }
22%  { transform: translate(-50%, -50%) scale(1); }
58%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -110%) scale(.94); }
}
@keyframes ui1Shard {
0%   { opacity: 1; transform: translate(0, 0) rotate(0deg); filter: brightness(1.6); }
14%  { opacity: 1; transform: translate(calc(var(--sx) * .12), calc(var(--sy) * .12)) rotate(calc(var(--sr) * .15)); filter: none; }
55%  { opacity: 1; }
100% { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--sr)) scale(.9); }
}

@keyframes ui3Ring { 0% { opacity: 0; scale: .9; } 22% { opacity: 1; } 100% { opacity: 0; scale: 1.16; } }
@keyframes ui3Tag { 0% { opacity: 0; transform: translateY(30%) scale(.8); } 16% { opacity: 1; transform: translateY(0) scale(1.06); } 26% { transform: translateY(0) scale(1); } 72% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(-16 * var(--u, 1px))); } }
@keyframes ui3Fly { 0% { opacity: 0; translate: 0 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; translate: var(--dx) var(--dy); } }
@keyframes ui3Lob { 0% { translate: 0 0; rotate: 0deg; animation-timing-function: ease-out; } 50% { translate: 0 calc(var(--arc) * -1); animation-timing-function: ease-in; } 100% { translate: 0 0; rotate: 420deg; } }
@keyframes ui3Pop { 0% { opacity: 0; scale: .25; rotate: -20deg; } 25% { opacity: 1; scale: 1.1; } 100% { opacity: 0; scale: 1.3; rotate: 10deg; } }
@keyframes ui3Block { 0% { opacity: 0; scale: .7; } 18% { opacity: 1; scale: 1.08; } 45% { opacity: .9; scale: 1; } 100% { opacity: 0; scale: 1.04; } }
@keyframes ui3Struck { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -150%); } }
@keyframes ui3ShDrop { 0% { opacity: 0; translate: 0 -55%; scale: 1; } 20% { opacity: 1; } 55% { opacity: 1; translate: 0 0; scale: 1; } 70% { scale: 1.12; } 100% { opacity: 0; translate: 0 0; scale: 1.25; } }
@keyframes ui3ShEdge { 0%, 40% { opacity: 0; } 60% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ui3Debuff { 0% { opacity: 0; translate: 0 -30%; } 30% { opacity: .95; } 100% { opacity: 0; translate: 0 22%; } }
@keyframes ui3AtkSink { 0% { translate: 0 0; } 35% { translate: 0 calc(3 * var(--u, 1px)); color: #9fd4ff; } 100% { translate: 0 0; } }
@keyframes ui3Spikes { 0% { opacity: 0; scale: 1 0; } 30% { opacity: 1; scale: 1 1.1; } 60% { opacity: 1; scale: 1 1; } 100% { opacity: 0; scale: 1 .6; } }
@keyframes ui3Mist { 0% { opacity: 0; scale: .4; translate: 0 10%; } 25% { opacity: .95; } 100% { opacity: 0; scale: 1.35; translate: 0 -22%; } }
@keyframes ui3PLine { 0% { opacity: 0; scale: 0 1; } 15% { opacity: 1; } 55% { opacity: 1; scale: 1 1; } 100% { opacity: 0; scale: 1 1; } }
@keyframes ui3Taunt { 0%, 100% { filter: none; } 30% { filter: brightness(1.9) drop-shadow(0 0 calc(5 * var(--u, 1px)) #ffd36a); } }

@keyframes tipFlash { from { filter: none; } to { filter: drop-shadow(0 0 calc(4 * var(--u, 1px)) #ffd36a) brightness(1.08); } }
@keyframes ui3Bpulse { 0% { opacity: 0; scale: .96; } 30% { opacity: 1; } 100% { opacity: 0; scale: 1.1; } }
@keyframes ui3Coin { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.35); } 30% { transform: translate(-50%, -50%) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -140%) scale(1); } }

@keyframes ui4Title {
0%   { opacity: 0; scale: 1.4; }
14%  { opacity: 1; scale: 1; }
80%  { opacity: 1; scale: 1; }
100% { opacity: 0; scale: 1.04; }
}
@keyframes ui4Skip {
0%, 100% { opacity: 0; }
15%, 85% { opacity: .78; }
}
@keyframes ui4Lit {
0%   { box-shadow: 0 0 0 0 rgba(0,0,0,0); filter: brightness(1); }
30%  { box-shadow: 0 0 calc(14 * var(--u, 1px)) calc(3 * var(--u, 1px)) var(--ui4-c, #f3d27a); filter: brightness(1.35); }
100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); filter: brightness(1); }
}

@keyframes kunwuSlash { 0% { opacity: 0; scale: .4 1; } 25% { opacity: 1; scale: 1.05 1; } 70% { opacity: .9; } 100% { opacity: 0; scale: 1.1 1; } }

@keyframes ui5Pulse { 0%, 100% { filter: none; } 30% { filter: brightness(1.35) drop-shadow(0 0 calc(3 * var(--u, 1px)) #ffc93a) drop-shadow(0 0 calc(7 * var(--u, 1px)) rgba(255, 186, 40, .9)); } 65% { filter: brightness(1.1) drop-shadow(0 0 calc(2 * var(--u, 1px)) rgba(255, 201, 58, .6)); } }
@keyframes ui5Flash { 0%, 100% { filter: none; } 20% { filter: brightness(1.8) drop-shadow(0 0 calc(4 * var(--u, 1px)) #fff2b8) drop-shadow(0 0 calc(9 * var(--u, 1px)) rgba(255, 196, 60, .95)); } 55% { filter: brightness(1.2) drop-shadow(0 0 calc(3 * var(--u, 1px)) rgba(255, 201, 58, .7)); } }
@keyframes ui5Tag { 0% { opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }

@keyframes xttMaw { 0% { opacity: 0; scale: .3; rotate: -6deg; } 25% { opacity: 1; scale: 1; rotate: 0deg; } 70% { opacity: 1; scale: 1.04; } 84% { opacity: 1; scale: 1 .32; } 92% { opacity: .9; scale: .92 .14; } 100% { opacity: 0; scale: .86 .08; } }
@keyframes xttMawS { 0% { opacity: 0; scale: .35; rotate: -5deg; } 24% { opacity: 1; scale: 1; rotate: 0deg; } 60% { opacity: 1; scale: 1.02; } 82% { opacity: 1; scale: 1 .26; } 100% { opacity: 0; scale: .9 .08; } }
@keyframes xttSpiral {
0% { opacity: 0; translate: 0 0; scale: 1; rotate: 0deg; }
8% { opacity: .95; }
35% { translate: calc(var(--dx) * .22 + var(--px)) calc(var(--dy) * .22 + var(--py)); scale: .72; rotate: -150deg; }
68% { opacity: .9; translate: calc(var(--dx) * .66 - var(--px) * .55) calc(var(--dy) * .66 - var(--py) * .55); scale: .4; rotate: -300deg; }
100% { opacity: .2; translate: var(--dx) var(--dy); scale: .06; rotate: -480deg; }
}
@keyframes xttBite { 0% { opacity: 0; scale: .5; } 25% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.4; } }
@keyframes xfxSheet8 { from { background-position: 0 0; } to { background-position: 114.2857% 0; } }
@keyframes xfxSeq { 0% { opacity: 0; } 14% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes xfxGlow { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes xtwVeil { 0% { opacity: 0; scale: 1 .15; translate: 0 0; } 30% { opacity: 1; scale: 1 1; } 50% { opacity: 1; scale: 1.02 1; translate: 0 0; } 100% { opacity: 0; scale: 1.18 .86; translate: 0 18%; } }
@keyframes xtwVeilS { 0% { opacity: 0; scale: 1 .3; } 32% { opacity: 1; scale: 1 1; } 100% { opacity: 0; scale: 1.1 1; } }
@keyframes xtwSplash { 0% { opacity: 0; scale: .4; } 25% { opacity: .95; scale: .8; } 100% { opacity: 0; scale: 1.15; translate: 0 12%; } }
@keyframes xqqWind { 0% { opacity: 0; scale: .4; } 25% { opacity: 1; scale: 1; } 72% { opacity: .9; scale: .92; } 100% { opacity: 0; scale: .5; } }
@keyframes xqqSwirl { from { rotate: 0deg; } to { rotate: -540deg; } }
@keyframes xqqWisp { 0% { opacity: 0; translate: 0 0; scale: .6; } 14% { opacity: 1; scale: 1; } 50% { translate: calc(var(--dx) * .42 + var(--px)) calc(var(--dy) * .42 + var(--py)); } 86% { opacity: 1; } 100% { opacity: 0; translate: var(--dx) var(--dy); scale: .5; } }
@keyframes xqqFlash { 0% { opacity: 0; scale: .92; } 30% { opacity: 1; scale: 1.02; } 100% { opacity: 0; scale: 1.12; } }

@keyframes exbKnHit { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.22); } }
@keyframes exbKnWave { 0% { opacity: 0; transform: scale(.04); } 10% { opacity: 1; } 65% { opacity: .75; } 100% { opacity: 0; transform: scale(1); } }
@keyframes exbKnDust { 0% { opacity: 0; transform: translateY(14%) scaleX(.7); } 35% { opacity: 1; transform: translateY(0) scaleX(1); } 100% { opacity: 0; transform: translateY(-5%) scaleX(1.12); } }
@keyframes exbKnJolt { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; transform: translateX(-2%); } 45% { transform: translateX(2%); } 70% { opacity: .8; transform: translateX(-1%); } 100% { opacity: 0; transform: translateX(0); } }
@keyframes exbKnBolt { 0% { opacity: 0; } 10% { opacity: 1; } 25% { opacity: .25; } 40% { opacity: 1; } 70% { opacity: .85; } 100% { opacity: 0; } }
@keyframes exbFade { 0% { opacity: 0; } 22% { opacity: 1; } 70% { opacity: .9; } 100% { opacity: 0; } }
@keyframes exbSpin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(60deg); } }
@keyframes exbBzRune {
0%   { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0deg); }
12%  { opacity: 1; transform: translate(calc(var(--dx) * .12 + var(--px) * .42), calc(var(--dy) * .12 + var(--py) * .42)) scale(1) rotate(calc(var(--fx-rot) * .2)); }
30%  { transform: translate(calc(var(--dx) * .3 + var(--px) * .84), calc(var(--dy) * .3 + var(--py) * .84)) scale(1.05) rotate(calc(var(--fx-rot) * .4)); }
50%  { transform: translate(calc(var(--dx) * .5 + var(--px)), calc(var(--dy) * .5 + var(--py))) scale(1) rotate(calc(var(--fx-rot) * .6)); }
70%  { transform: translate(calc(var(--dx) * .7 + var(--px) * .84), calc(var(--dy) * .7 + var(--py) * .84)) scale(.95) rotate(calc(var(--fx-rot) * .8)); }
88%  { opacity: 1; transform: translate(calc(var(--dx) * .88 + var(--px) * .42), calc(var(--dy) * .88 + var(--py) * .42)) scale(.8) rotate(var(--fx-rot)); }
100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.45) rotate(var(--fx-rot)); }
}
@keyframes exbBzTag { 0% { opacity: 0; transform: translateY(30%) scale(.85); } 15% { opacity: 1; transform: translateY(0) scale(1.06); } 25% { transform: translateY(0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-25%) scale(1); } }
@keyframes exbByWing {
0%   { opacity: 0; transform: translate(0, 0) scale(.5); }
10%  { opacity: 1; }
35%  { transform: translate(0, var(--up)) scale(1); }
50%  { transform: translate(calc(var(--dx) * .25 + var(--px) * .75), calc(var(--up) + var(--dy) * .25 + var(--py) * .75)) scale(1); }
65%  { transform: translate(calc(var(--dx) * .5 + var(--px)), calc(var(--up) + var(--dy) * .5 + var(--py))) scale(1); }
80%  { transform: translate(calc(var(--dx) * .75 + var(--px) * .75), calc(var(--up) + var(--dy) * .75 + var(--py) * .75)) scale(.95); }
94%  { opacity: 1; transform: translate(var(--dx), calc(var(--up) + var(--dy))) scale(.9); }
100% { opacity: 0; transform: translate(var(--dx), calc(var(--up) + var(--dy))) scale(1.15); }
}
@keyframes exbByFlap { 0%, 100% { transform: scale(var(--fl, 1), 1); } 50% { transform: scale(var(--fl, 1), .72); } }
@keyframes exbByPairR { 0% { opacity: 0; transform: rotate(40deg) scale(.35); filter: brightness(1); } 35% { opacity: 1; transform: rotate(0deg) scale(1.05); filter: brightness(1.7); } 60% { transform: rotate(0deg) scale(1); filter: brightness(1.15); } 100% { opacity: 0; transform: rotate(-4deg) scale(1.04); filter: brightness(1); } }
@keyframes exbByPairL { 0% { opacity: 0; transform: rotate(-40deg) scale(.35); filter: brightness(1); } 35% { opacity: 1; transform: rotate(0deg) scale(1.05); filter: brightness(1.7); } 60% { transform: rotate(0deg) scale(1); filter: brightness(1.15); } 100% { opacity: 0; transform: rotate(4deg) scale(1.04); filter: brightness(1); } }
@keyframes exbByRay { 0% { opacity: 0; transform: translateY(-18%) scaleY(.7); } 30% { opacity: 1; transform: translateY(4%) scaleY(1); } 100% { opacity: 0; transform: translateY(20%) scaleY(1); } }

.rotate-ask { display: none; }
html.ask-rot .rotate-ask {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
position: fixed; inset: 0; z-index: 2147483000; padding: 24px 16px; box-sizing: border-box;
background: #14181c; color: #efe3c4; text-align: center;
font-family: "Kaiti SC", "STKaiti", "KaiTi", "Songti SC", serif;
-webkit-user-select: none; user-select: none; touch-action: none;
}
html.ask-rot body { overflow: hidden; }
.rotate-ask .ra-phone { width: 54px; height: 92px; border: 3px solid #d9b45a; border-radius: 10px; position: relative; margin-bottom: 8px;
animation: raTurn 2.4s ease-in-out infinite; }
.rotate-ask .ra-phone i { position: absolute; left: 50%; bottom: 6px; width: 14px; height: 3px; margin-left: -7px; border-radius: 2px; background: #d9b45a; }
@keyframes raTurn { 0%, 25% { transform: rotate(0deg); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .rotate-ask .ra-phone { animation: none; transform: rotate(-90deg); } }
.rotate-ask .ra-title { margin: 0; font-size: 22px; letter-spacing: .06em; color: #f2d58c; }
.rotate-ask .ra-sub { margin: 0; max-width: 300px; font-size: 15px; line-height: 1.5; opacity: .85; }

@media (min-width: 600px) {
.rotate-ask .ra-phone { width: 68px; height: 116px; }
.rotate-ask .ra-title { font-size: 28px; }
.rotate-ask .ra-sub { max-width: 420px; font-size: 19px; }
}

@keyframes mkDotNext { 0%, 100% { background: rgba(255, 255, 255, .22); box-shadow: none; } 50% { background: #f3d27a; box-shadow: 0 0 6px rgba(243, 210, 122, 1); } }
@keyframes mergePop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
35% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70%) scale(1); } }
@keyframes mergePopRm { 0% { opacity: 1; } 100% { opacity: 0; } }

.land-only { display: none; }

html.land {
--u: min(calc(100vw / 640), calc(100vh / 360));
}
@supports (height: 100dvh) {
html.land { --u: min(calc(100vw / 640), calc(100dvh / 360)); }
}
html.land, html.land body { height: 100%; overflow: hidden; }
html.land body { display: block; }
html.land #app {
position: fixed; left: 0; top: 0; right: 0; bottom: 0;
width: auto; max-width: none; min-height: 0;
overflow: hidden; box-shadow: none;
background:
linear-gradient(180deg, rgba(6,12,24,.62), rgba(6,12,24,.72)),
#0b1a2e url("../assets/bg/main.webp") center 30% / cover no-repeat;
}

html.land:not(.in-tut) #scr-prep:not([hidden]),
html.land:not(.in-tut) #scr-battle:not([hidden]) {
position: absolute;
left: calc(50% - calc(320 * var(--u))); top: calc(50% - calc(180 * var(--u)));
width: calc(640 * var(--u)); height: calc(360 * var(--u)); min-height: 0;
display: block; margin: 0; padding: 0;
background: none; overflow: visible;
font-size: calc(11 * var(--u));
}
html.land:not(.in-tut) .land-only { display: block; }
html.land:not(.in-tut) .land-panel {
position: relative; box-sizing: border-box;
background: rgba(10,24,44,.62);
border: 1px solid rgba(217,180,90,.34);
border-radius: calc(8 * var(--u));
box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.35), inset 0 1px 0 rgba(255,236,190,.06);
padding: calc(7 * var(--u));
color: var(--paper);
}
html.land:not(.in-tut) .land-h {
display: block; margin: 0 0 calc(4 * var(--u));
font-size: calc(12 * var(--u)); line-height: calc(15 * var(--u)); font-weight: 700; letter-spacing: .04em;
color: #f0d78a;
}

html.land:not(.in-tut) #land-left {
position: absolute; left: calc(8 * var(--u)); top: calc(8 * var(--u)); width: calc(150 * var(--u)); height: calc(344 * var(--u));
display: flex; flex-direction: column; gap: calc(6 * var(--u));
}
html.land:not(.in-tut) .land-lord-box { flex: none; height: calc(96 * var(--u)); }
html.land:not(.in-tut) .land-lamps-note {
position: absolute; left: calc(66 * var(--u)); top: calc(75 * var(--u)); right: calc(6 * var(--u));
font-size: calc(10 * var(--u)); line-height: calc(13 * var(--u)); color: var(--paper-2); white-space: nowrap;
}
html.land:not(.in-tut) .land-wuxing {
flex: none; display: block; width: 100%; text-align: center;
font-family: inherit; cursor: pointer; -webkit-appearance: none; appearance: none;
}
html.land:not(.in-tut) .land-wuxing .land-h { text-align: left; }
html.land:not(.in-tut) .land-wuxing:hover { border-color: rgba(217,180,90,.7); }
html.land:not(.in-tut) .land-ring { display: flex; align-items: center; justify-content: space-between; margin: calc(2 * var(--u)) calc(1 * var(--u)) calc(3 * var(--u)); }
html.land:not(.in-tut) .land-ring .el-badge-img { width: calc(20 * var(--u)) !important; height: calc(20 * var(--u)) !important; }
html.land:not(.in-tut) .land-ring-arrow { font-style: normal; font-size: calc(11 * var(--u)); line-height: 1.4; color: var(--gold); }
html.land:not(.in-tut) .land-ring-line { display: block; font-size: calc(10 * var(--u)); line-height: calc(13 * var(--u)); color: var(--paper); }
html.land:not(.in-tut) .land-ring-note { display: block; margin-top: calc(2 * var(--u)); font-size: calc(10 * var(--u)); line-height: calc(13 * var(--u)); color: var(--paper-2); }
html.land:not(.in-tut) .land-bonds { flex: 1 1 auto; min-height: 0; overflow: hidden; }
html.land:not(.in-tut) .land-bond {
display: flex; align-items: center; gap: calc(5 * var(--u));
padding: calc(3 * var(--u)) 0 calc(1 * var(--u)); border-top: 1px solid rgba(217,180,90,.14);
font-size: calc(10 * var(--u)); line-height: calc(13 * var(--u)); color: #fff;
}
html.land:not(.in-tut) .land-bond .el-dot { width: calc(8 * var(--u)) !important; height: calc(8 * var(--u)) !important; flex: none; border-radius: 50%; }
html.land:not(.in-tut) .land-bond-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.land:not(.in-tut) .land-bond-n { margin-left: auto; flex: none; color: var(--gold); font-weight: 700; }
html.land:not(.in-tut) .land-bond-desc { margin: 0 0 calc(2 * var(--u)) calc(13 * var(--u)); font-size: calc(10 * var(--u)); line-height: calc(13 * var(--u)); color: var(--paper-2); }
html.land:not(.in-tut) .land-bond.off { color: rgba(232,221,198,.7); gap: calc(4 * var(--u)); }
html.land:not(.in-tut) .land-off-chip { flex: none; display: inline-flex; align-items: center; gap: calc(1 * var(--u)); }
html.land:not(.in-tut) .land-off-chip .el-badge-img { width: calc(12 * var(--u)) !important; height: calc(12 * var(--u)) !important; opacity: .75; }
html.land:not(.in-tut) .land-bond-rule { margin-top: calc(4 * var(--u)); font-size: calc(10 * var(--u)); line-height: calc(13 * var(--u)); color: var(--paper-2); }
html.land:not(.in-tut) .land-bond-side { margin-top: calc(3 * var(--u)); font-size: calc(10 * var(--u)); line-height: calc(13 * var(--u)); font-weight: 700; letter-spacing: .04em; }
html.land:not(.in-tut) .land-bond-side.enemy { color: #e8735c; }
html.land:not(.in-tut) .land-bond-side.player { color: var(--ok); }

html.land:not(.in-tut) #scr-prep .topbar.prep-top,
html.land:not(.in-tut) #scr-prep .topbar.prep-top.deep {
position: absolute; left: calc(8 * var(--u)); top: calc(8 * var(--u)); width: calc(150 * var(--u)); height: calc(96 * var(--u));
display: block; padding: 0; margin: 0; z-index: 3;
background: none; border: 0; border-radius: 0;
}
html.land:not(.in-tut) #scr-prep .prep-top .lord-block,
html.land:not(.in-tut) #scr-prep .topbar.prep-top.deep .lord-block,
html.land:not(.in-tut) #scr-prep .prep-top .tb-mid,
html.land:not(.in-tut) #scr-prep .topbar.prep-top.deep .tb-mid { display: contents; }
html.land:not(.in-tut) #scr-prep .prep-top .lord-face { position: absolute; left: calc(7 * var(--u)); top: calc(7 * var(--u)); width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
html.land:not(.in-tut) #scr-prep .prep-top .lord-block > .hero-plate {
position: absolute; left: calc(56 * var(--u)); top: calc(9 * var(--u)); margin: 0; min-width: 0; max-width: calc(88 * var(--u));
--np-h: calc(22 * var(--u)); --np-gap: calc(3 * var(--u));
font-size: calc(12 * var(--u)); line-height: 1;
}
html.land:not(.in-tut) #scr-prep .prep-top .lord-block .plate-name { font-size: calc(12 * var(--u)); line-height: 1.25; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; }
html.land:not(.in-tut) #scr-prep .prep-top .lord-block .plate-stage .stage-no { font-size: calc(10 * var(--u)); }
html.land:not(.in-tut) #scr-prep .prep-top .lord-face[hidden] + .hero-plate { left: calc(7 * var(--u)); }
html.land:not(.in-tut) #scr-prep .prep-top .tb-mid .panel-title {
position: absolute; left: calc(58 * var(--u)); top: calc(35 * var(--u)); max-width: calc(86 * var(--u));
}
html.land:not(.in-tut) #scr-prep .prep-top .tb-mid .panel-note,
html.land:not(.in-tut) #scr-prep.has-lord #enemy-power {
position: absolute; left: calc(7 * var(--u)); top: calc(55 * var(--u)); width: calc(136 * var(--u)); text-align: left;
}
html.land:not(.in-tut) #scr-prep .prep-top .tb-mid .panel-title,
html.land:not(.in-tut) #scr-prep .prep-top .tb-mid .panel-note,
html.land:not(.in-tut) #scr-prep.has-lord #enemy-power {
font-size: calc(10 * var(--u)); line-height: calc(13 * var(--u)); letter-spacing: 0; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; margin: 0;
}

html.land:not(.in-tut) #scr-prep .topbar.prep-top.deep .tb-mid .panel-title { left: calc(7 * var(--u)); top: calc(55 * var(--u)); max-width: calc(136 * var(--u)); }
html.land:not(.in-tut) #scr-prep .topbar.prep-top.deep .tb-mid .panel-note,
html.land:not(.in-tut) #scr-prep.has-lord .topbar.prep-top.deep #enemy-power { left: calc(58 * var(--u)); top: calc(35 * var(--u)); width: calc(86 * var(--u)); }
html.land:not(.in-tut) #scr-prep .prep-top .tb-mid .panel-title > .plate-stage { vertical-align: 0; gap: calc(3 * var(--u)); }
html.land:not(.in-tut) #scr-prep .prep-top .tb-mid .panel-title > .plate-stage::after { content: none; }
html.land:not(.in-tut) #scr-prep .prep-top .tb-mid .panel-title > .plate-stage .stage-no { font-size: calc(11 * var(--u)); color: var(--gold); }
html.land:not(.in-tut) #scr-prep .prep-top .el-badge .el-badge-img { width: calc(13 * var(--u)) !important; height: calc(13 * var(--u)) !important; }

html.land:not(.in-tut) #scr-prep .prep-top .tb-left {
position: absolute; left: calc(474 * var(--u)); top: 0; margin: 0; gap: 0; grid-area: auto;
}
html.land:not(.in-tut) #scr-prep .prep-top .tb-right {
position: absolute; left: calc(474 * var(--u)); top: 0; width: calc(150 * var(--u)); justify-content: flex-end; gap: calc(5 * var(--u)); margin: 0; grid-area: auto;
}
html.land:not(.in-tut) #scr-prep .prep-top .tb-left { z-index: 1; }
html.land:not(.in-tut) #scr-prep .prep-top #btn-wuxing { display: none; }
html.land:not(.in-tut) #scr-prep .prep-top .mute-btn-tb,
html.land:not(.in-tut) #scr-prep .prep-top .ring-btn {
width: calc(26 * var(--u)); height: calc(26 * var(--u)); min-width: 0; min-height: 0; padding: 0; margin: 0;
font-size: calc(12 * var(--u)); line-height: 1;
}
html.land:not(.in-tut) #scr-prep .prep-top .ring-btn .home-icon { width: calc(14 * var(--u)); height: calc(13 * var(--u)); }
html.land:not(.in-tut) #scr-prep .prep-top .ring-btn .home-icon::before { border-left-width: calc(7 * var(--u)); border-right-width: calc(7 * var(--u)); border-bottom-width: calc(6 * var(--u)); }
html.land:not(.in-tut) #scr-prep .prep-top .ring-btn .home-icon::after { left: calc(2 * var(--u)); right: calc(2 * var(--u)); top: calc(6 * var(--u)); bottom: calc(1 * var(--u)); border-width: calc(1.5 * var(--u)); border-top-width: 0; }
html.land:not(.in-tut) .slot-idx { font-size: calc(10 * var(--u)); }

html.land:not(.in-tut) #scr-prep .divider { display: none; }
html.land:not(.in-tut) #scr-prep .panel { margin: 0; }

html.land:not(.in-tut) #scr-prep .p-enemy {
position: absolute; left: calc(166 * var(--u)); top: calc(8 * var(--u)); width: calc(308 * var(--u)); height: calc(30 * var(--u));
padding: 0; margin: 0; z-index: 30;
}
html.land:not(.in-tut) .enemy-intel {
min-height: 0; height: calc(30 * var(--u)); gap: calc(3 * var(--u)); padding: 0 calc(5 * var(--u)) 0 calc(7 * var(--u)); border-radius: calc(8 * var(--u));
--face-mini: calc(14 * var(--u));
}
html.land:not(.in-tut) #scr-prep { --face-mini: calc(14 * var(--u)); }
html.land:not(.in-tut) .intel-title { font-size: calc(11 * var(--u)); letter-spacing: 0; }
html.land:not(.in-tut) .intel-faces { gap: calc(1 * var(--u)); }
html.land:not(.in-tut) .intel-face { border-width: 1px; }
html.land:not(.in-tut) .intel-counter .counter-badge { padding: calc(1 * var(--u)) calc(5 * var(--u)) calc(1 * var(--u)) calc(4 * var(--u)); gap: calc(2 * var(--u)); font-size: calc(10 * var(--u)); line-height: calc(13 * var(--u)); letter-spacing: 0; }
html.land:not(.in-tut) .intel-counter .el-dot { display: none; }
html.land:not(.in-tut) .intel-power { flex: 1 0 auto; font-size: calc(10 * var(--u)); }
html.land:not(.in-tut) .intel-counter { flex: 0 1 auto; min-width: 0; overflow: hidden; }
html.land:not(.in-tut) .intel-counter .counter-badge { min-width: 0; overflow: hidden; white-space: nowrap; }
html.land:not(.in-tut) .intel-counter .counter-badge > span { overflow: hidden; text-overflow: ellipsis; }
html.land:not(.in-tut) .intel-arrow { width: calc(6 * var(--u)); height: calc(6 * var(--u)); margin: calc(-3 * var(--u)) calc(2 * var(--u)) 0 calc(1 * var(--u)); border-right-width: calc(2 * var(--u)); border-bottom-width: calc(2 * var(--u)); }
html.land:not(.in-tut) .p-enemy.open .intel-arrow { margin-top: calc(3 * var(--u)); }
html.land:not(.in-tut) .enemy-drop { top: calc(100% + calc(4 * var(--u))); padding: calc(6 * var(--u)) calc(8 * var(--u)); border-radius: calc(8 * var(--u)); }
html.land:not(.in-tut) #scr-prep .enemy-drop .counter-hint { margin: 0 0 calc(5 * var(--u)); gap: calc(6 * var(--u)); flex-wrap: nowrap; }
html.land:not(.in-tut) #scr-prep .counter-badge { padding: calc(1 * var(--u)) calc(6 * var(--u)); font-size: calc(10 * var(--u)); }
html.land:not(.in-tut) #scr-prep .counter-tip { font-size: calc(10 * var(--u)); line-height: calc(13 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html.land:not(.in-tut) #scr-prep .enemy-drop .enemy-note { margin-top: calc(4 * var(--u)); font-size: calc(10 * var(--u)); line-height: calc(13 * var(--u)); }
html.land:not(.in-tut) #scr-prep .row-enemy { gap: calc(6 * var(--u)); }
html.land:not(.in-tut) #scr-prep .row-enemy .slot, html.land:not(.in-tut) #scr-prep .row-enemy .card { min-height: 0; height: calc(70 * var(--u)); }

html.land:not(.in-tut) #scr-prep .p-board {
position: absolute; left: calc(166 * var(--u)); top: calc(44 * var(--u)); width: calc(308 * var(--u)); height: calc(134 * var(--u));
padding: calc(6 * var(--u)) calc(8 * var(--u)); margin: 0; border-radius: calc(8 * var(--u));
}
html.land:not(.in-tut) #scr-prep .panel-head { min-height: 0; height: calc(18 * var(--u)); margin: 0 0 calc(4 * var(--u)); }
html.land:not(.in-tut) #scr-prep.has-hero .p-board .panel-head { min-height: 0; margin-bottom: calc(4 * var(--u)); }
html.land:not(.in-tut) #scr-prep .p-board .panel-title,
html.land:not(.in-tut) #scr-prep .p-shop .panel-title { font-size: calc(12 * var(--u)); letter-spacing: .06em; }
html.land:not(.in-tut) #scr-prep .panel-note { font-size: calc(11 * var(--u)); }
html.land:not(.in-tut) #scr-prep .row-board, html.land:not(.in-tut) #scr-prep .row-shop { gap: calc(6 * var(--u)); }
html.land:not(.in-tut) #scr-prep .p-board .slot, html.land:not(.in-tut) #scr-prep .p-board .card { min-height: 0; height: calc(74 * var(--u)); }
html.land:not(.in-tut) #scr-prep .bond-strip {
display: flex; flex-wrap: nowrap; gap: calc(4 * var(--u)); margin-top: calc(5 * var(--u)); min-height: 0;
overflow: hidden; white-space: nowrap;
}
html.land:not(.in-tut) #scr-prep .bond-tag[data-short] { font-size: 0; }
html.land:not(.in-tut) #scr-prep .bond-tag[data-short]::before { content: attr(data-short); font-size: calc(10 * var(--u)); }
html.land:not(.in-tut) #scr-prep .bond-tag, html.land:not(.in-tut) #scr-prep .bond-none {
font-size: calc(10 * var(--u)); line-height: calc(13 * var(--u)); padding: calc(1 * var(--u)) calc(6 * var(--u)); border-radius: calc(3 * var(--u));
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin: 0;
}

html.land:not(.in-tut) #scr-prep .p-shop {
position: absolute; left: calc(166 * var(--u)); top: calc(184 * var(--u)); width: calc(308 * var(--u)); height: calc(116 * var(--u));
padding: calc(6 * var(--u)) calc(8 * var(--u)); margin: 0; border-radius: calc(8 * var(--u));
}
html.land:not(.in-tut) #scr-prep .p-shop .panel-head { min-height: 0; height: calc(22 * var(--u)); margin: 0 0 calc(4 * var(--u)); }
html.land:not(.in-tut) #scr-prep .p-shop #btn-reroll { min-height: 0; height: calc(22 * var(--u)); width: calc(104 * var(--u)); margin: 0; font-size: calc(11 * var(--u)); letter-spacing: 0; white-space: nowrap; }

html.land:not(.in-tut) #scr-prep .row-shop { padding: 0 calc(26 * var(--u)); }
html.land:not(.in-tut) #scr-prep .row-shop .slot, html.land:not(.in-tut) #scr-prep .row-shop .card { min-height: 0; height: calc(74 * var(--u)); }
html.land:not(.in-tut) #scr-prep .bench-strip { margin: calc(4 * var(--u)) 0 0; padding: calc(2 * var(--u)); gap: calc(4 * var(--u)); border-radius: calc(6 * var(--u)); }
html.land:not(.in-tut) #scr-prep .bench-tag { font-size: calc(10 * var(--u)); letter-spacing: 0; }
html.land:not(.in-tut) #scr-prep .row-bench { gap: calc(3 * var(--u)); }
html.land:not(.in-tut) #scr-prep .row-bench .slot, html.land:not(.in-tut) #scr-prep .row-bench .card { min-height: 0; height: calc(24 * var(--u)); }
html.land:not(.in-tut) #scr-prep.has-bench .row-shop .slot, html.land:not(.in-tut) #scr-prep.has-bench .row-shop .card { height: calc(50 * var(--u)); }

html.land:not(.in-tut) #scr-prep .card { border-width: calc(2 * var(--u)); border-radius: calc(6 * var(--u)); }
html.land:not(.in-tut) #scr-prep .slot { border-radius: calc(6 * var(--u)); }
html.land:not(.in-tut) #scr-prep .slot-idx { font-size: calc(10 * var(--u)); }

html.land:not(.in-tut) #scr-prep .stat-ico { height: .85em; }

html.land:not(.in-tut) #scr-prep .card-eldot { top: calc(3 * var(--u)); right: calc(3 * var(--u)); width: calc(7 * var(--u)); height: calc(7 * var(--u)); }

html.land:not(.in-tut) #scr-prep .card.selected { box-shadow: 0 0 0 calc(2 * var(--u)) #fff3c8, 0 0 calc(10 * var(--u)) rgba(217,180,90,.6); }
html.land:not(.in-tut) #scr-prep .card:hover { filter: brightness(1.08); }
html.land:not(.in-tut) #scr-prep .mk-hero { font-size: calc(10 * var(--u)); }

html.land:not(.in-tut) #scr-prep .prep-dock,
html.land:not(.in-tut) #scr-prep:not(.has-hero) .prep-dock {
position: absolute; left: calc(166 * var(--u)); top: calc(306 * var(--u)); width: calc(308 * var(--u)); height: calc(46 * var(--u));
display: flex; align-items: center; gap: calc(6 * var(--u));
margin: 0; padding: 0;
grid-template-columns: none; grid-template-rows: none; grid-template-areas: none;
}
html.land:not(.in-tut) #scr-prep .prep-dock .actionbar { display: contents; }
html.land:not(.in-tut) #scr-prep .prep-dock #btn-sell,
html.land:not(.in-tut) #scr-prep .prep-dock #btn-fight { flex: none; align-self: center; margin: 0; height: calc(32 * var(--u)); min-height: 0; font-size: calc(12 * var(--u)); letter-spacing: .02em; --btn-pad: 0px; --btn-lift: calc(2.5 * var(--u)); }
html.land:not(.in-tut) #scr-prep .prep-dock #btn-sell { order: 1; width: calc(78 * var(--u)); margin-right: auto; }
html.land:not(.in-tut) #scr-prep .prep-dock #btn-fight { order: 4; width: calc(78 * var(--u)); margin-left: auto; font-size: calc(13 * var(--u)); }

html.land:not(.in-tut) #scr-prep .prep-dock .hero-block {
order: 2; flex: none; align-self: center;
display: flex; flex-direction: column; align-items: center; gap: 0;
padding: 0; margin: 0; min-width: 0;
}
html.land:not(.in-tut) #scr-prep .prep-dock .hero-block[hidden] { display: none; }
html.land:not(.in-tut) #scr-prep .prep-dock .hero-face { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
html.land:not(.in-tut) #scr-prep .prep-dock .hero-block > .hero-plate {
margin: calc(-7 * var(--u)) 0 0; --np-h: calc(18 * var(--u)); --np-gap: calc(2 * var(--u)); min-width: 0;
font-size: calc(10 * var(--u)); letter-spacing: .04em; text-indent: 0; line-height: 1;
}
html.land:not(.in-tut) #scr-prep .prep-dock .prep-hero {
order: 3; flex: none; align-self: center;
display: flex; flex-direction: column; align-items: center; gap: calc(1 * var(--u)); margin: 0;
}
html.land:not(.in-tut) #scr-prep .prep-dock .prep-hero[hidden] { display: none; }
html.land:not(.in-tut) #scr-prep .prep-dock .hero-skill { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
html.land:not(.in-tut) #scr-prep .prep-dock .hero-passive { font-size: calc(10 * var(--u)); line-height: 1.1; max-width: calc(70 * var(--u)); overflow: hidden; text-overflow: ellipsis; }
html.land:not(.in-tut) #scr-prep .prep-dock .hero-charge { right: 0; bottom: 0; font-size: calc(10 * var(--u)); line-height: calc(12 * var(--u)); padding: 0 calc(2 * var(--u)); border-radius: calc(6 * var(--u)); }

html.land:not(.in-tut) #scr-prep .prep-dock #tb-lamps,
html.land:not(.in-tut) #scr-prep:not(.has-hero) .prep-dock #tb-lamps {
position: absolute; left: calc(-151 * var(--u)); top: calc(-234 * var(--u)); margin: 0; z-index: 4;
font-size: calc(16 * var(--u)); gap: calc(2 * var(--u)); align-self: auto; justify-self: auto;
}
html.land:not(.in-tut) #scr-prep .prep-dock #tb-gold,
html.land:not(.in-tut) #scr-prep:not(.has-hero) .prep-dock #tb-gold {
position: absolute; left: auto; right: calc(124 * var(--u)); top: calc(-115 * var(--u)); margin: 0; z-index: 2;
height: calc(20 * var(--u)); gap: calc(3 * var(--u));
font-size: calc(13 * var(--u)); line-height: calc(20 * var(--u));
}
html.land:not(.in-tut) #tb-gold::before { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
html.land:not(.in-tut) #scr-prep .prep-dock .tip {
position: absolute; left: calc(316 * var(--u)); top: calc(20 * var(--u)); width: calc(150 * var(--u)); height: calc(26 * var(--u));
margin: 0; padding: 0; border: 0;
display: flex; align-items: center; justify-content: center;
font-size: calc(10 * var(--u)); line-height: calc(12 * var(--u)); min-height: 0;
white-space: normal; overflow: hidden; text-align: center;
}

html.land:not(.in-tut) #land-right { position: absolute; left: calc(482 * var(--u)); top: calc(40 * var(--u)); width: calc(150 * var(--u)); height: calc(280 * var(--u)); }
html.land:not(.in-tut) .land-detail { height: 100%; overflow: hidden; display: flex; flex-direction: column; }
html.land:not(.in-tut) .land-detail.el-metal { border-color: rgba(201,162,39,.7); }
html.land:not(.in-tut) .land-detail.el-wood  { border-color: rgba(58,143,93,.8); }
html.land:not(.in-tut) .land-detail.el-water { border-color: rgba(46,111,163,.85); }
html.land:not(.in-tut) .land-detail.el-fire  { border-color: rgba(192,57,43,.8); }
html.land:not(.in-tut) .land-detail.el-earth { border-color: rgba(140,109,63,.85); }
html.land:not(.in-tut) .ld-art {
position: relative; flex: none; height: calc(104 * var(--u)); margin: calc(-1 * var(--u)) calc(-1 * var(--u)) calc(5 * var(--u));
border-radius: calc(6 * var(--u)); overflow: hidden; background: var(--card-ground);
box-shadow: inset 0 0 0 1px rgba(217,180,90,.25);
}
html.land:not(.in-tut) .ld-art-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
html.land:not(.in-tut) .ld-art-hero .ld-art-img { object-position: 50% 8%; }
html.land:not(.in-tut) .ld-tag {
position: absolute; left: calc(4 * var(--u)); top: calc(4 * var(--u)); padding: 0 calc(5 * var(--u));
font-size: calc(10 * var(--u)); line-height: calc(15 * var(--u)); border-radius: calc(4 * var(--u));
background: rgba(184,66,47,.92); color: #f3e2b6;
}
html.land:not(.in-tut) .ld-tag-shop { background: rgba(10,24,44,.9); border: 1px solid rgba(217,180,90,.6); color: var(--gold); }
html.land:not(.in-tut) .ld-name { flex: none; font-size: calc(13 * var(--u)); line-height: calc(16 * var(--u)); font-weight: 700; color: #f6ecd6; }
html.land:not(.in-tut) .ld-py { font-size: calc(10 * var(--u)); font-weight: 400; color: var(--paper-2); }
html.land:not(.in-tut) .ld-meta {
flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: calc(3 * var(--u));
margin-top: calc(2 * var(--u)); font-size: calc(10 * var(--u)); line-height: calc(14 * var(--u)); color: var(--paper-2);
}
html.land:not(.in-tut) .ld-meta .el-badge-img { width: calc(14 * var(--u)) !important; height: calc(14 * var(--u)) !important; }
html.land:not(.in-tut) .ld-star { font-style: normal; font-size: calc(10 * var(--u)); color: var(--gold); letter-spacing: -.05em; }
html.land:not(.in-tut) .ld-meta .mk-king { font-style: normal; font-size: calc(10 * var(--u)); line-height: calc(13 * var(--u)); padding: 0 calc(3 * var(--u)); }
html.land:not(.in-tut) .ld-stats { flex: none; display: flex; gap: calc(12 * var(--u)); margin-top: calc(3 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(17 * var(--u)); font-weight: 700; }
html.land:not(.in-tut) .ld-stats .stat-ico { height: .85em; }
html.land:not(.in-tut) .ld-skill { flex: none; margin-top: calc(4 * var(--u)); font-size: calc(11 * var(--u)); line-height: calc(14 * var(--u)); font-weight: 700; color: var(--gold); }
html.land:not(.in-tut) .ld-text { margin-top: calc(2 * var(--u)); font-size: calc(10.5 * var(--u)); line-height: 1.35; color: var(--paper); overflow: hidden; }
html.land:not(.in-tut) .ld-foot { margin-top: calc(3 * var(--u)); font-size: calc(10 * var(--u)); line-height: calc(13 * var(--u)); color: var(--paper-2); }
html.land:not(.in-tut) .ld-hint { margin-top: auto; padding-top: calc(4 * var(--u)); font-size: calc(10 * var(--u)); line-height: calc(13 * var(--u)); color: var(--paper-2); text-align: center; }
html.land:not(.in-tut) .land-detail.is-empty .ld-name { font-size: calc(12 * var(--u)); }
html.land:not(.in-tut) .land-detail.is-empty .ld-art { height: calc(96 * var(--u)); }

html.land:not(.in-tut) #scr-battle .topbar.bt-top,
html.land:not(.in-tut) #scr-battle:not(.tutorial-battle):not(.tutorial-demo) .topbar.bt-top {
position: absolute; left: calc(8 * var(--u)); top: calc(8 * var(--u)); width: calc(150 * var(--u)); height: calc(74 * var(--u));
display: block; padding: 0; margin: 0;
background: rgba(10,24,44,.62); border: 1px solid rgba(217,180,90,.34); border-radius: calc(8 * var(--u));
box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.35);
}
html.land:not(.in-tut) #scr-battle .bt-top .lord-block { display: contents; }
html.land:not(.in-tut) #scr-battle .bt-top .lord-face { position: absolute; left: calc(6 * var(--u)); top: calc(6 * var(--u)); width: calc(44 * var(--u)); height: calc(44 * var(--u)); }

html.land:not(.in-tut) #scr-battle .bt-top .lord-block > .hero-plate {
position: absolute; left: calc(56 * var(--u)); top: calc(17 * var(--u)); margin: 0; min-width: 0; max-width: calc(88 * var(--u));
height: calc(22 * var(--u)); padding: 0 calc(2 * var(--u));
display: flex; align-items: center; justify-content: center;
}
html.land:not(.in-tut) #scr-battle .bt-top .lord-block .plate-name { font-size: calc(12 * var(--u)); line-height: calc(14 * var(--u)); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.land:not(.in-tut) #scr-battle .bt-top .lord-block .plate-stage {
position: absolute; left: calc(-62 * var(--u)); top: calc(36 * var(--u)); width: calc(136 * var(--u));
display: flex; justify-content: center; align-items: center; gap: calc(3 * var(--u));
line-height: calc(13 * var(--u));
}
html.land:not(.in-tut) #scr-battle .bt-top .lord-face[hidden] + .hero-plate { left: calc(6 * var(--u)); max-width: calc(136 * var(--u)); }
html.land:not(.in-tut) #scr-battle .bt-top .lord-face[hidden] + .hero-plate .plate-stage { position: static; width: auto; }
html.land:not(.in-tut) #scr-battle .bt-top #bt-stage { font-size: calc(10 * var(--u)); line-height: calc(13 * var(--u)); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; color: var(--gold); }
html.land:not(.in-tut) #scr-battle .bt-top .lord-block .plate-stage .el-badge-img { width: calc(12 * var(--u)) !important; height: calc(12 * var(--u)) !important; }

html.land:not(.in-tut) #scr-battle .bt-top .tb-right {
position: absolute; left: calc(473 * var(--u)); top: -1px; width: calc(150 * var(--u)); margin: 0; grid-area: auto;
display: flex; justify-content: flex-end; gap: calc(5 * var(--u));
}
html.land:not(.in-tut) #scr-battle .bt-top .tb-right .bt-ctl { min-width: 0; min-height: 0; height: calc(26 * var(--u)); font-size: calc(11 * var(--u)); letter-spacing: .02em; }
html.land:not(.in-tut) #scr-battle .bt-top .tb-right .pause-btn { position: static; width: calc(26 * var(--u)); min-width: 0; }

html.land .tips .bub { font-size: calc(11 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: calc(6 * var(--u)); }

@media (pointer: coarse) {
html.land:not(.in-tut) #scr-prep .prep-top .mute-btn-tb,
html.land:not(.in-tut) #scr-prep .prep-top .ring-btn { width: calc(36 * var(--u)); height: calc(36 * var(--u)); font-size: calc(15 * var(--u)); }
html.land:not(.in-tut) #scr-battle .bt-top .tb-right .bt-ctl { height: calc(36 * var(--u)); font-size: calc(13 * var(--u)); }
html.land:not(.in-tut) #scr-battle .bt-top .tb-right .pause-btn { width: calc(36 * var(--u)); }

html.land:not(.in-tut) #land-right { top: calc(46 * var(--u)); height: calc(274 * var(--u)); }
html.land:not(.in-tut) #land-log { top: calc(46 * var(--u)); height: calc(306 * var(--u)); }
}
html.land:not(.in-tut) .pause-icon { width: calc(9 * var(--u)); height: calc(11 * var(--u)); border-left-width: calc(3 * var(--u)); border-right-width: calc(3 * var(--u)); }
html.land:not(.in-tut) .pause-btn.on .pause-icon { width: 0; height: 0; border-left-width: calc(10 * var(--u)); border-right-width: 0; border-top-width: calc(6 * var(--u)); border-bottom-width: calc(6 * var(--u)); margin-left: calc(2 * var(--u)); }

html.land:not(.in-tut) #land-bt-left {
position: absolute; left: calc(8 * var(--u)); top: calc(88 * var(--u)); width: calc(150 * var(--u)); height: calc(196 * var(--u));
display: flex; flex-direction: column;
}
html.land:not(.in-tut) .land-bt-bonds { flex: 1 1 auto; min-height: 0; overflow: hidden; }
html.land:not(.in-tut) #scr-battle .bt-dock,
html.land:not(.in-tut) #scr-battle .bt-dock[hidden] {
position: absolute; left: calc(8 * var(--u)); top: calc(290 * var(--u)); width: calc(150 * var(--u)); height: calc(62 * var(--u));
display: flex; align-items: center; gap: calc(4 * var(--u));
margin: 0; padding: calc(6 * var(--u)) calc(7 * var(--u));
background: rgba(10,24,44,.62); border: 1px solid rgba(217,180,90,.34); border-radius: calc(8 * var(--u));
box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.35);
grid-template-columns: none;
}
html.land:not(.in-tut) #scr-battle .bt-dock[hidden] { visibility: hidden; }
html.land:not(.in-tut) #scr-battle .bt-dock { justify-content: center; gap: calc(12 * var(--u)); }
html.land:not(.in-tut) #scr-battle .bt-dock .hero-block { display: flex; flex-direction: column; align-items: center; min-width: 0; flex: none; }
html.land:not(.in-tut) #scr-battle .bt-dock .hero-face { width: calc(38 * var(--u)); height: calc(38 * var(--u)); flex: none; }
html.land:not(.in-tut) #scr-battle .bt-dock .hero-block > .hero-plate {
margin: calc(-8 * var(--u)) 0 0; --np-h: calc(18 * var(--u)); --np-gap: calc(2 * var(--u)); min-width: 0;
font-size: calc(10 * var(--u)); letter-spacing: .04em; text-indent: 0; line-height: 1;
}
html.land:not(.in-tut) #scr-battle .bt-dock .hero-skill { width: calc(36 * var(--u)); height: calc(36 * var(--u)); margin: 0; flex: none; }

html.land:not(.in-tut) #scr-battle:not(.tutorial-demo) .arena {
position: absolute; left: calc(166 * var(--u)); top: calc(8 * var(--u)); width: calc(308 * var(--u)); height: calc(344 * var(--u));
margin: 0; padding: calc(30 * var(--u)) calc(8 * var(--u)) calc(12 * var(--u));
display: flex; flex-direction: column; justify-content: center;
border-radius: calc(8 * var(--u));
--field-corner: calc(60 * var(--u));
--corner-dx: calc(-0.5px - var(--field-corner) * 35.5 / 512);
--corner-dy: calc(-0.5px - var(--field-corner) * 43 / 512);
}
html.land:not(.in-tut) #scr-battle:not(.tutorial-demo) .arena::before { left: calc(3 * var(--u)); top: calc(3 * var(--u)); right: calc(3 * var(--u)); bottom: calc(3 * var(--u)); border-radius: calc(6 * var(--u)); }
html.land:not(.in-tut) #scr-battle:not(.tutorial-demo) .field-knot { width: calc(44 * var(--u)); height: calc(18 * var(--u)); margin: calc(-10 * var(--u)) 0 0 calc(-22 * var(--u)); }
html.land:not(.in-tut) #scr-battle:not(.tutorial-demo) .arena .side-label {
top: calc(-17 * var(--u)); left: calc(14 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(14 * var(--u));
}
html.land:not(.in-tut) #scr-battle:not(.tutorial-demo) .row-bt { gap: calc(6 * var(--u)); }
html.land:not(.in-tut) #scr-battle:not(.tutorial-demo) .row-bt .slot { aspect-ratio: auto; height: calc(88 * var(--u)); min-height: 0; border-radius: calc(7 * var(--u)); }
html.land:not(.in-tut) #scr-battle:not(.tutorial-demo) .clash-line {
flex: 0 0 calc(26 * var(--u)); min-height: 0; height: calc(26 * var(--u)); margin: calc(12 * var(--u)) 0 calc(26 * var(--u)); font-size: calc(11 * var(--u));
}
html.land:not(.in-tut) #scr-battle:not(.tutorial-demo) .clash-line > span { max-width: calc(100% - calc(40 * var(--u))); font-size: calc(11 * var(--u)); line-height: calc(16 * var(--u)); }
html.land:not(.in-tut) #scr-battle:not(.tutorial-demo) .clash-cloud { width: calc(18 * var(--u)); height: calc(20 * var(--u)); }
html.land:not(.in-tut) #scr-battle:not(.tutorial-demo) .clash-cloud-l { margin-right: calc(-6 * var(--u)); }
html.land:not(.in-tut) #scr-battle:not(.tutorial-demo) .clash-cloud-r { margin-left: calc(-6 * var(--u)); }
html.land:not(.in-tut) #scr-battle .ticker { display: none; }

html.land:not(.in-tut) .card-bt { border-width: calc(2 * var(--u)); border-radius: calc(7 * var(--u)); }

html.land:not(.in-tut) .card-bt .card-shield { right: calc(2 * var(--u)); bottom: calc(18 * var(--u)); min-width: calc(14 * var(--u)); padding: 0 calc(3 * var(--u)); font-size: calc(10 * var(--u)); line-height: calc(12 * var(--u)); border-radius: calc(5 * var(--u)) calc(5 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u)); }
html.land:not(.in-tut) .mk-silence { right: calc(2 * var(--u)); top: calc(12 * var(--u)); min-width: calc(12 * var(--u)); height: calc(12 * var(--u)); font-size: calc(10 * var(--u)); line-height: calc(12 * var(--u)); }
html.land:not(.in-tut) .row-bt .float { top: calc(12 * var(--u)); }
html.land:not(.in-tut) .float { font-size: max(calc(13 * var(--u)), 12px); }
html.land:not(.in-tut) .float.crit, html.land:not(.in-tut) .float.big { font-size: max(calc(15 * var(--u)), 12px); }
html.land:not(.in-tut) .float.burn, html.land:not(.in-tut) .float.dodge, html.land:not(.in-tut) .float.shield, html.land:not(.in-tut) .float.skill { font-size: max(calc(11 * var(--u)), 12px); }
html.land:not(.in-tut) .float.debuff, html.land:not(.in-tut) .float.perm, html.land:not(.in-tut) .float.summon { font-size: max(calc(11 * var(--u)), 12px); }
html.land:not(.in-tut) .burst { --burst-w: calc(58 * var(--u)); --dmg-fs: calc(18 * var(--u)); }
html.land:not(.in-tut) .burst.small { --burst-w: calc(44 * var(--u)); --dmg-fs: calc(14 * var(--u)); }
html.land:not(.in-tut) .burst.crit { --burst-w: calc(74 * var(--u)); --dmg-fs: calc(21 * var(--u)); }
html.land:not(.in-tut) .dmg-mk { font-size: calc(10 * var(--u)); }
html.land:not(.in-tut) .bt-paused { padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(7 * var(--u)); border-radius: calc(8 * var(--u)); gap: calc(1 * var(--u)); }
html.land:not(.in-tut) .bt-paused-big { font-size: calc(16 * var(--u)); }
html.land:not(.in-tut) .bt-paused-hint { font-size: calc(10 * var(--u)); }

html.land:not(.in-tut) .bt-peek { left: calc(50% - calc(150 * var(--u))); right: auto; width: calc(300 * var(--u)); max-height: calc(170 * var(--u)); font-size: calc(11 * var(--u)); }

html.land:not(.in-tut) #land-log {
position: absolute; left: calc(482 * var(--u)); top: calc(40 * var(--u)); width: calc(150 * var(--u)); height: calc(312 * var(--u));
display: flex; flex-direction: column;
padding: calc(7 * var(--u)); box-sizing: border-box;
}

html.land:not(.compact):not(.in-tut) #land-log {
background: rgba(10,24,44,.62); border: 1px solid rgba(217,180,90,.34); border-radius: calc(8 * var(--u));
box-shadow: 0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.35);
}
html.land:not(.in-tut) .land-log-list {
flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
font-size: calc(10 * var(--u)); line-height: 1.4; color: rgba(232,221,198,.82);
scrollbar-width: thin; scrollbar-color: rgba(217,180,90,.4) transparent;
}
html.land:not(.in-tut) .land-log-list .log-line { padding: calc(2 * var(--u)) 0; border-top: 1px solid rgba(217,180,90,.12); overflow-wrap: anywhere; }
html.land:not(.in-tut) .land-log-list .log-r { margin-right: calc(4 * var(--u)); color: var(--gold); font-weight: 700; }

html.land:not(.in-tut) .guide-skip:not(.tutorial-skip) { top: calc(50% - calc(180 * var(--u)) + calc(8 * var(--u))); right: calc(50% - calc(320 * var(--u)) + calc(44 * var(--u))); left: auto; }

/* ================================================================
* 网页版第 2 批第二步 · 菜单类画面横屏重排 + 右栏完整详情 + 悬停
* ----------------------------------------------------------------
* 定稿：docs/web/mockups/landscape.html（?screen=home|hero|result|final|dex）；稿子只定位置、大小、分组，视觉沿用游戏现有风格。
* 同一套 --u：尺寸与字号全写成 calc(N * var(--u))，640×360 下正文最小 10px；不用 transform / zoom 缩放整页。
*   首页：内容居中一列，背景主图（splash）铺满整个视口 + 暗角
*   选驭灵者：三张卡横排（立绘 / 名字 / 技能一句），底部确认
*   关卡结算：整屏背景 + 居中竖排：山主 → Victory / Defeat 大字 → 驭灵者 → 战况 → 按钮
*   封灵录：竖版海报在左、收窄的操作栏在右，成组居中（操作栏里的节点由 ui.js 搬过去，竖屏搬回）
*   图鉴：左边 7 列格子 + 四个页签（神兽 / 驭灵者 / 山主 / 授权），右边选中那一项的完整详情
*   卡牌详情：横屏不再有整页（张哲 09-28）：备战 / 图鉴 / 战斗都在右栏出完整详情，放不下右栏内部滚动
* 教学局（task-05 起）也是原生横屏，教学层见本段末尾；挖洞逻辑原样（按目标的真实矩形贴）。
* ================================================================ */

html.land:not(.in-tut) .land-menu-btn {
min-height: 0; min-width: 0; margin: 0;
height: calc(34 * var(--u)); line-height: 1;
font-size: calc(14 * var(--u)); letter-spacing: .06em; text-indent: .06em; white-space: nowrap;
--btn-edge: calc(8.5 * var(--u)); --btn-pad: 0px; --btn-lift: calc(2.6 * var(--u));
border-width: 0 calc(14 * var(--u)); padding-left: 0; padding-right: 0;
}

html.land #scr-start:not([hidden]) {
position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1;
width: auto; height: auto; min-height: 0; max-width: none; margin: 0; padding: 0;
display: flex; align-items: center; justify-content: center;
overflow: hidden; transform: none; box-shadow: none;
background-image:
radial-gradient(ellipse 62% 70% at 50% 52%, rgba(6,12,24,.62) 0%, rgba(6,12,24,.38) 55%, rgba(6,12,24,.86) 100%),
url("../assets/bg/splash.webp");
background-size: auto, cover;
background-position: center, center 34%;
}
html.land #scr-start .start-art { display: none; }
html.land #scr-start .start-wrap {
position: relative; width: calc(270 * var(--u)); padding: 0;
display: flex; flex-direction: column; align-items: stretch; text-align: center;
}
html.land #scr-start .brand { margin: 0 0 calc(4 * var(--u)); }
html.land #scr-start .crest-lg { width: calc(76 * var(--u)); height: calc(44 * var(--u)); margin: 0 auto calc(2 * var(--u)); }
html.land #scr-start .brand-title {
margin: 0 0 calc(2 * var(--u)); font-size: calc(32 * var(--u)); line-height: 1.3;
letter-spacing: .02em; text-indent: 0; white-space: nowrap;
}
html.land[lang^="zh"] #scr-start .brand-title { letter-spacing: .3em; text-indent: .3em; }
html.land #scr-start .brand-sub { font-size: calc(11 * var(--u)); line-height: calc(14 * var(--u)); letter-spacing: .06em; }
html.land #scr-start .ring-deco { height: calc(22 * var(--u)); margin: 0 auto calc(6 * var(--u)); gap: calc(6 * var(--u)); }
html.land #scr-start .ring-node { width: calc(20 * var(--u)); height: calc(20 * var(--u)); font-size: calc(10 * var(--u)); }
html.land #scr-start .ring-node .el-badge-img { width: calc(20 * var(--u)) !important; height: calc(20 * var(--u)) !important; }
html.land #scr-start .today-line { margin: 0 0 calc(8 * var(--u)); gap: calc(6 * var(--u)); }
html.land #scr-start .today-tag { font-size: calc(10 * var(--u)); line-height: calc(13 * var(--u)); padding: calc(1 * var(--u)) calc(8 * var(--u)); border-radius: calc(10 * var(--u)); letter-spacing: .04em; }
html.land #scr-start .today-date { font-size: calc(11 * var(--u)); letter-spacing: .04em; }
html.land #scr-start .today-note { font-size: calc(10 * var(--u)); letter-spacing: 0; }
html.land #scr-start .deep-chip { font-size: calc(10 * var(--u)); padding: calc(1 * var(--u)) calc(7 * var(--u)); }
html.land #scr-start .daily-best { font-size: calc(10 * var(--u)); margin: calc(-4 * var(--u)) 0 calc(6 * var(--u)); }
html.land #scr-start .streak-line { font-size: calc(10 * var(--u)); gap: calc(4 * var(--u)); margin: calc(-4 * var(--u)) 0 calc(6 * var(--u)); }
html.land #scr-start .streak-ico { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
html.land #scr-final .poster-record.poster-streak { margin: calc(2 * var(--u)) 0 0; padding: 0 calc(6 * var(--u)); letter-spacing: 0; }
html.land #scr-start .dex-seal { font-size: calc(10 * var(--u)); padding: calc(1 * var(--u)) calc(9 * var(--u)); margin: 0 auto calc(6 * var(--u)); gap: calc(4 * var(--u)); }
html.land #scr-start .dex-seal-dot { width: calc(7 * var(--u)); height: calc(7 * var(--u)); }
html.land #scr-start .resume-box { gap: calc(6 * var(--u)); }
html.land #scr-start .hint { margin: calc(2 * var(--u)) calc(-50 * var(--u)) 0; font-size: calc(10 * var(--u)); line-height: calc(14 * var(--u)); }

html.land #scr-start .fc-corner { position: fixed; left: calc(12 * var(--u)); bottom: calc(10 * var(--u)); margin: 0; gap: calc(6 * var(--u)); }
html.land #scr-start .fc-poke { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
html.land #scr-start .fc-count { font-size: calc(10 * var(--u)); line-height: 1.5; max-width: calc(140 * var(--u)); text-align: left; }
html.land #scr-start .fc-seg { white-space: nowrap; }

html.land #scr-hero:not([hidden]) {
position: absolute; left: calc(50% - calc(320 * var(--u))); top: calc(50% - calc(180 * var(--u)));
width: calc(640 * var(--u)); height: calc(360 * var(--u)); min-height: 0; max-width: none; margin: 0;
display: flex; flex-direction: column; align-items: center; transform: none; overflow: hidden; }
html.land #hero-title { flex: none; margin: 0; }
html.land #scr-hero .hero-intro { flex: none; margin: 0 0 calc(8 * var(--u)); font-size: calc(10 * var(--u)); line-height: calc(14 * var(--u)); }
html.land #scr-hero .hero-offers {
flex: 1 1 auto; min-height: 0; width: auto;
display: grid; grid-template-columns: repeat(3, calc(176 * var(--u))); gap: calc(12 * var(--u));
}

html.land:not(.in-tut) #bt-overlay:not([hidden]) {
position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 92;
width: auto; height: auto; max-width: none; margin: 0; transform: none; box-shadow: none;
display: flex; align-items: center; justify-content: center;
}
html.land:not(.in-tut) #bt-overlay .result-bg-img { object-position: 50% 30%; }
html.land:not(.in-tut) #bt-overlay .result-bg::before {
content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
background: radial-gradient(ellipse 46% 62% at 50% 50%, rgba(6,12,24,.62) 0%, rgba(6,12,24,.3) 60%, rgba(6,12,24,.7) 100%);
}
html.land:not(.in-tut) #scr-battle #bt-overlay .result-inner {
position: relative; left: auto; top: auto; right: auto; bottom: auto;
width: calc(360 * var(--u)); max-width: none; height: auto;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
html.land:not(.in-tut) #scr-battle #bt-overlay .duel-stage { position: static; display: flex; flex-direction: column; align-items: center; width: 100%; }
html.land:not(.in-tut) #scr-battle #bt-overlay .duel-face {
position: static; order: 0; margin: 0; width: auto; top: auto; left: auto;
--lose-tilt: -4deg; --pl-fs: calc(13 * var(--u));
}

html.land:not(.in-tut) #scr-battle #bt-overlay #ov-lord {
order: 0; flex-direction: row; align-items: center; gap: calc(4 * var(--u));
--d: calc(32 * var(--u)); --pl-w: auto; --pl-h: calc(22 * var(--u)); --pl-mt: 0px; --pl-fs: calc(11 * var(--u));
}
html.land:not(.in-tut) #scr-battle #bt-overlay #ov-title {
order: 1; width: auto; max-width: none; height: auto; margin: calc(2 * var(--u)) 0 calc(2 * var(--u)); }

html.land:not(.in-tut) #scr-battle #bt-overlay #ov-hero {
order: 2; --d: calc(84 * var(--u)); --pl-w: calc(118 * var(--u)); --pl-h: calc(24 * var(--u)); --pl-mt: calc(-8 * var(--u)); --pl-fs: calc(13 * var(--u));
}
html.land:not(.in-tut) #scr-battle #bt-overlay .duel-face > .hero-plate { white-space: nowrap; }
html.land:not(.in-tut) #scr-battle #bt-overlay .duel-face > .hero-face::before { left: -22%; top: -22%; right: -22%; bottom: -22%; }
html.land:not(.in-tut) #scr-battle #bt-overlay .result-sub {
align-self: stretch; margin: calc(6 * var(--u)) 0 0; font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u));
white-space: normal; letter-spacing: .02em; text-align: center;
}
html.land:not(.in-tut) #scr-battle #bt-overlay .result-line,
html.land:not(.in-tut) #scr-battle #bt-overlay .result-line:first-child,
html.land:not(.in-tut) #scr-battle #bt-overlay .result-line:nth-child(3) { height: auto; margin: 0; font-size: calc(12 * var(--u)); line-height: calc(16 * var(--u)); }
html.land:not(.in-tut) #scr-battle #bt-overlay .result-line:first-child { font-size: calc(13 * var(--u)); }
html.land:not(.in-tut) #scr-battle #bt-overlay .result-line + .result-line { margin-top: calc(2 * var(--u)); }
html.land:not(.in-tut) #scr-battle #bt-overlay .result-lamps,
html.land:not(.in-tut) #scr-battle #bt-overlay.has-fc .result-lamps { margin: calc(5 * var(--u)) 0 0; font-size: calc(16 * var(--u)); gap: calc(8 * var(--u)); }
html.land:not(.in-tut) #scr-battle #bt-overlay .fc-status {
margin: calc(5 * var(--u)) 0 0; height: calc(22 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(2 * var(--u));
font-size: calc(10 * var(--u)); gap: calc(4 * var(--u));
}
html.land:not(.in-tut) #scr-battle #bt-overlay .fc-status-art { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
html.land:not(.in-tut) #scr-battle #bt-overlay .two-btns {
display: grid; grid-template-columns: calc(110 * var(--u)) calc(140 * var(--u)); gap: calc(10 * var(--u));
width: auto; margin: calc(10 * var(--u)) 0 0;
}

html.land #chushan:not([hidden]) {
position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: auto; height: auto; margin: 0;
transform: none; box-shadow: none; padding: 0;
}
html.land #chushan .chushan-glow { width: calc(300 * var(--u)); height: calc(300 * var(--u)); margin: calc(-150 * var(--u)) 0 0 calc(-150 * var(--u)); }
html.land #chushan .chushan-hero { margin-bottom: calc(8 * var(--u)); }
html.land #chushan .chushan-face { --face-hero: calc(72 * var(--u)); }
html.land #chushan .chushan-big { font-size: calc(46 * var(--u)); letter-spacing: .04em; text-indent: .04em; }
html.land[lang^="zh"] #chushan .chushan-big { letter-spacing: .24em; text-indent: .24em; }
html.land #chushan .chushan-sub { margin-top: calc(6 * var(--u)); font-size: calc(12 * var(--u)); letter-spacing: .08em; text-indent: .08em; }
html.land #chushan .chushan-rank { margin-top: calc(12 * var(--u)); padding: calc(4 * var(--u)) calc(14 * var(--u)); gap: calc(8 * var(--u)); border-radius: calc(7 * var(--u)); }
html.land #chushan .chushan-title { font-size: calc(17 * var(--u)); }
html.land #chushan .chushan-score { font-size: calc(13 * var(--u)); }
html.land #chushan .chushan-tip { margin-top: calc(14 * var(--u)); font-size: calc(11 * var(--u)); letter-spacing: .12em; }

html.land #scr-final:not([hidden]) {
position: absolute; left: calc(50% - calc(320 * var(--u))); top: calc(50% - calc(180 * var(--u)));
width: calc(640 * var(--u)); height: calc(360 * var(--u)); min-height: 0; max-width: none; margin: 0;
padding: calc(8 * var(--u));
display: flex; flex-direction: row; align-items: center; justify-content: center; gap: calc(20 * var(--u));
background: none; transform: none; box-shadow: none; overflow: hidden;
}
html.land #scr-final .scroll-poster {
flex: none; width: auto; max-width: none; height: calc(344 * var(--u)); margin: 0;
border-radius: calc(8 * var(--u));
}
html.land #scr-final .poster-inner {
left: 11%; right: 11%; top: 9.5%; bottom: 10%;
transform: none; height: auto; overflow: visible;
}
html.land #scr-final .poster-inner > * { flex-shrink: 0; }
html.land #scr-final .poster-head { font-size: max(calc(10 * var(--u)), 12px); letter-spacing: .3em; text-indent: .3em; }
html.land #scr-final .poster-mode { font-size: max(calc(10 * var(--u)), 12px); margin-top: calc(1 * var(--u)); letter-spacing: .02em; }
html.land #scr-final .poster-name-row { margin-top: calc(5 * var(--u)); min-height: 0; gap: calc(6 * var(--u)); }
html.land #scr-final .poster-name { font-size: max(calc(12 * var(--u)), 12px); letter-spacing: .04em; }

html.land #scr-final .rename-input { width: calc(120 * var(--u)); height: max(calc(20 * var(--u)), 20px); padding: 0 calc(6 * var(--u)); font-size: max(calc(12 * var(--u)), 12px); }
html.land #scr-final .poster-title { margin: calc(3 * var(--u)) 0 calc(1 * var(--u)); font-size: calc(18 * var(--u)); letter-spacing: .02em; text-indent: 0; line-height: 1.25; }
html.land[lang^="zh"] #scr-final .poster-title { letter-spacing: .14em; text-indent: .14em; }
html.land #scr-final .fc-guardian-suffix { font-size: max(calc(10 * var(--u)), 12px); }
html.land #scr-final .poster-feats { gap: calc(3 * var(--u)); margin: calc(2 * var(--u)) 0; }
html.land #scr-final .feat-chip { font-size: max(calc(10 * var(--u)), 12px); line-height: max(calc(13 * var(--u)), 1.15em); padding: 0 calc(4 * var(--u)); border-radius: calc(3 * var(--u)); letter-spacing: 0; }
html.land #scr-final .poster-hero { font-size: max(calc(10 * var(--u)), 12px); gap: calc(4 * var(--u)); margin: calc(1 * var(--u)) 0; }
html.land #scr-final .poster-hero .hero-chip { width: calc(16 * var(--u)); height: calc(16 * var(--u)); flex-basis: calc(16 * var(--u)); }
html.land #scr-final .poster-fc-seal { font-size: max(calc(10 * var(--u)), 12px); margin-top: calc(2 * var(--u)); }
html.land #scr-final .poster-score { font-size: calc(32 * var(--u)); line-height: 1.4; margin-top: calc(-2 * var(--u)); margin-bottom: calc(-2 * var(--u)); }
html.land #scr-final .poster-score::after { font-size: max(calc(11 * var(--u)), 12px); }
html.land #scr-final .poster-record { margin-top: calc(2 * var(--u)); font-size: max(calc(10 * var(--u)), 12px); padding: 0 calc(8 * var(--u)); border-radius: calc(9 * var(--u)); letter-spacing: .04em; }
html.land #scr-final .poster-lamps { margin-top: calc(3 * var(--u)); font-size: max(calc(13 * var(--u)), 12px); gap: calc(2 * var(--u)); }
html.land #scr-final .fin-lamp-txt { display: none; }

html.land #scr-final .poster-team { width: 112%; margin: auto 0 calc(4 * var(--u)); gap: calc(2 * var(--u)); }
html.land #scr-final .poster-team .slot { min-height: 0; height: calc(44 * var(--u)); padding: 0; border-radius: calc(4 * var(--u)); }
html.land #scr-final .poster-team .card { min-height: 0; height: 100%; border-width: calc(1.5 * var(--u)); border-radius: calc(4 * var(--u)); }
html.land #scr-final .poster-team .card-name { display: none; }
html.land #scr-final .poster-team .card-bar { padding: 0 0 calc(1 * var(--u)); }
html.land #scr-final .poster-team .card-stats { font-size: max(calc(10 * var(--u)), 12px); line-height: 1.1; padding: 0; gap: calc(3 * var(--u)); justify-content: center; }
html.land #scr-final .poster-team .stat-cell { gap: 0; }
html.land #scr-final .poster-team .card-cost,
html.land #scr-final .poster-team .card-eldot,
html.land #scr-final .poster-team .card-flags,
html.land #scr-final .poster-team .slot-idx { font-size: max(calc(10 * var(--u)), 12px); }

html.land #scr-final .poster-team .card > .card-bar > .card-flags { top: auto; right: auto; bottom: 100%; left: 50%; transform: translateX(-50%); }
html.land #scr-final .poster-team .card-flags i,
html.land #scr-final .poster-team .card-flags .mk-star3 { font-size: max(calc(9 * var(--u)), 12px); letter-spacing: -.26em; }
html.land #scr-final .poster-foot { display: none; }
html.land #scr-final .poster-tip { display: none; }

html.land:not(.in-tut) #scr-final .land-fin-side {
flex: none; width: calc(232 * var(--u)); max-height: 100%;
display: flex; flex-direction: column; justify-content: center; gap: calc(7 * var(--u));
}
html.land #scr-final .land-fin-side .poster-detail {
margin: 0; font-size: max(calc(12 * var(--u)), 12px); line-height: 1.6; color: var(--paper); text-align: left;
}
html.land #scr-final .land-fin-side .poster-why { margin: 0; padding: calc(4 * var(--u)) calc(7 * var(--u)); font-size: max(calc(10.5 * var(--u)), 12px); line-height: 1.4; text-align: left; border-left-width: calc(2 * var(--u)); }
html.land #scr-final .land-fin-side .fin-deep { margin: 0; text-align: left; }
html.land #scr-final .land-fin-side .fin-deep-big { font-size: calc(16 * var(--u)); }
html.land #scr-final .land-fin-side .fin-deep-sub { font-size: max(calc(12 * var(--u)), 12px); }
html.land #scr-final .land-fin-side .fin-deep-record { font-size: max(calc(10 * var(--u)), 12px); }
html.land #scr-final .land-fin-side .fin-deep-note { font-size: max(calc(10 * var(--u)), 12px); }
html.land #scr-final .land-fin-side .fc-status { align-self: flex-start; margin: 0; font-size: max(calc(10 * var(--u)), 12px); padding: calc(1 * var(--u)) calc(7 * var(--u)) calc(1 * var(--u)) calc(2 * var(--u)); }
html.land #scr-final .land-fin-side .fc-status-art { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

html.land #scr-final .land-fin-side .fin-actions { margin: 0; gap: calc(6 * var(--u)); }

html.land #scr-final .land-fin-side .deep-entry { margin: 0; }

html.land #scr-final .land-fin-side .deep-entry-note { margin: calc(4 * var(--u)) 0 0; font-size: max(calc(10 * var(--u)), 12px); line-height: 1.35; text-align: center; }
html.land #scr-final .land-fin-side .two-btns { display: grid; grid-template-columns: 1fr 1.25fr; gap: calc(8 * var(--u)); width: 100%; margin: 0; }

html.land:not(.in-tut) .land-detail.land-full,
html.land:not(.in-tut) .land-detail.land-intel,
html.land:not(.in-tut) .land-detail.is-empty,
html.land:not(.in-tut) #land-dex-detail {
overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
scrollbar-width: thin; scrollbar-color: rgba(217,180,90,.4) transparent;
}
html.land:not(.in-tut) .land-detail.land-full { display: block; }
html.land:not(.in-tut) .land-detail.is-empty > * { flex-shrink: 0; }
html.land:not(.in-tut) #land-dex-detail { height: 100%; }
html.land:not(.in-tut) .land-full .ld-art { height: calc(92 * var(--u)); }
html.land:not(.in-tut) #land-dex-detail.land-full .ld-art { height: calc(120 * var(--u)); }
html.land:not(.in-tut) .land-full .ld-art-lord .ld-art-img { object-fit: contain; object-position: 50% 50%; }
html.land:not(.in-tut) .land-full .ld-art-hero .ld-art-img { object-position: 50% 10%; }
html.land:not(.in-tut) .ld-tag-ally { background: rgba(58,143,93,.92); }
html.land:not(.in-tut) .land-full .ld-name { line-height: calc(16 * var(--u)); }
html.land:not(.in-tut) .land-full .ld-stats { margin-top: calc(2 * var(--u)); }
html.land:not(.in-tut) .ld-shield { font-size: calc(11 * var(--u)); color: #bcd7f0; align-self: center; }
html.land:not(.in-tut) .ld-flags { display: flex; flex-wrap: wrap; gap: calc(3 * var(--u)); margin-top: calc(3 * var(--u)); }
html.land:not(.in-tut) .ld-flags .peek-chip { font-style: normal; font-size: calc(10 * var(--u)); line-height: calc(13 * var(--u)); padding: 0 calc(4 * var(--u)); border-radius: calc(3 * var(--u)); }
html.land:not(.in-tut) .ld-rel { margin-top: calc(4 * var(--u)); padding: calc(3 * var(--u)) 0; border-top: 1px solid rgba(217,180,90,.16); border-bottom: 1px solid rgba(217,180,90,.16); }
html.land:not(.in-tut) .ld-rel-line { display: flex; align-items: center; gap: calc(3 * var(--u)); font-size: calc(10 * var(--u)); line-height: calc(15 * var(--u)); white-space: nowrap; }
html.land:not(.in-tut) .ld-rel-line .el-badge-img { width: calc(12 * var(--u)) !important; height: calc(12 * var(--u)) !important; flex: none; }
html.land:not(.in-tut) .ld-rel-tag { flex: none; min-width: calc(40 * var(--u)); color: var(--paper-2); }
html.land:not(.in-tut) .ld-rel-el { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html.land:not(.in-tut) .ld-rel-mult { margin-left: auto; flex: none; color: var(--gold); }
html.land:not(.in-tut) .land-full .ld-skill { display: flex; align-items: center; gap: calc(4 * var(--u)); margin-top: calc(5 * var(--u)); }
html.land:not(.in-tut) .ld-summon { display: flex; align-items: flex-start; gap: calc(4 * var(--u)); margin-top: calc(3 * var(--u)); }
html.land:not(.in-tut) .ld-summon-copy { display: flex; flex-direction: column; min-width: 0; }
html.land:not(.in-tut) .ld-summon-copy .ld-note { margin: 0; }
html.land:not(.in-tut) .ld-summon-thumb { flex: none;  width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; object-fit: cover; object-position: 50% 15%; box-shadow: 0 0 0 1px rgba(217,180,90,.5); }
html.land:not(.in-tut) .ld-summon-name { font-size: calc(10 * var(--u)); font-weight: 400; color: var(--paper); }
html.land:not(.in-tut) .ld-tiers { display: flex; flex-direction: column; gap: calc(2 * var(--u)); margin-top: calc(3 * var(--u)); }
html.land:not(.in-tut) .ld-tiers .skill-tier {
display: flex; gap: calc(4 * var(--u)); align-items: baseline; margin: 0;
padding: calc(2 * var(--u)) calc(4 * var(--u)); border-radius: calc(4 * var(--u)); border-width: 1px;
font-size: calc(10 * var(--u)); line-height: 1.3;
}
html.land:not(.in-tut) .ld-tiers .tier-star { flex: none; width: calc(27 * var(--u)); font-size: calc(10 * var(--u)); letter-spacing: -.1em; font-style: normal; }
html.land:not(.in-tut) .ld-tiers .tier-reach { font-size: calc(10 * var(--u)); font-style: normal; }
html.land:not(.in-tut) .ld-tiers.is-off .skill-tier { opacity: .45; text-decoration: line-through; }
html.land:not(.in-tut) .ld-note { margin-top: calc(3 * var(--u)); font-size: calc(10 * var(--u)); line-height: 1.35; color: var(--paper-2); }
html.land:not(.in-tut) .ld-lore { margin-top: calc(5 * var(--u)); font-size: calc(10 * var(--u)); line-height: 1.4; color: rgba(232,221,198,.78); font-style: italic; }
html.land:not(.in-tut) .ld-lore-tag { font-style: normal; font-weight: 700; color: var(--gold); }
html.land:not(.in-tut) .land-person .ld-name { font-size: calc(12 * var(--u)); }
html.land:not(.in-tut) .land-person .ld-text { font-size: calc(10.5 * var(--u)); }

html.land:not(.in-tut) .land-intel .li-head { display: flex; align-items: baseline; justify-content: space-between; }
html.land:not(.in-tut) .land-intel .li-power { font-size: calc(11 * var(--u)); color: var(--gold); font-weight: 700; }
html.land:not(.in-tut) .li-list { display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
html.land:not(.in-tut) .li-row { -webkit-appearance: none; appearance: none; cursor: pointer; margin: 0; width: 100%; display: flex; align-items: center; gap: calc(5 * var(--u)); font-family: inherit; text-align: left; }

html.land:not(.in-tut) .li-thumb { flex: none; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; object-fit: cover; object-position: 50% 15%; border: calc(1.5 * var(--u)) solid; }
html.land:not(.in-tut) .li-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
html.land:not(.in-tut) .li-line { display: flex; align-items: baseline; gap: calc(3 * var(--u)); min-width: 0; }
html.land:not(.in-tut) .li-name { min-width: 0; font-size: calc(10.5 * var(--u)); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.land:not(.in-tut) .li-skill { min-width: 0; font-size: calc(10 * var(--u)); font-weight: 400; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.land:not(.in-tut) .li-star { flex: none; font-style: normal; font-size: calc(10 * var(--u)); color: var(--gold); letter-spacing: -.1em; }
html.land:not(.in-tut) .li-stats { display: flex; align-items: center; gap: calc(4 * var(--u)); font-size: calc(10.5 * var(--u)); line-height: 1.2; font-weight: 700; min-width: 0; }
html.land:not(.in-tut) .li-stats .stat-ico { height: .85em; }
html.land:not(.in-tut) .li-counter { margin-top: calc(6 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(3 * var(--u)); }
html.land:not(.in-tut) .li-counter .counter-badge { font-size: calc(10 * var(--u)); line-height: calc(14 * var(--u)); padding: 0 calc(7 * var(--u)); letter-spacing: 0; }
html.land:not(.in-tut) .li-counter-tip, html.land:not(.in-tut) .li-note { font-size: calc(10 * var(--u)); line-height: 1.4; color: var(--paper-2); }
html.land:not(.in-tut) .li-note { margin-top: calc(4 * var(--u)); color: var(--paper); }

html.land:not(.in-tut) #scr-prep .intel-face:not(.empty) { cursor: pointer; }
html.land:not(.in-tut) #scr-prep .intel-face:not(.empty):hover { box-shadow: 0 0 0 1px #fff3c8; }
html.land:not(.in-tut) #scr-prep .intel-arrow { display: none; }

html.land:not(.in-tut) #land-bt-detail {
position: absolute; left: calc(482 * var(--u)); top: calc(40 * var(--u)); width: calc(150 * var(--u)); height: calc(312 * var(--u)); z-index: 40;
}
html.land:not(.in-tut) #land-bt-detail[hidden] { display: none; }
html.land:not(.in-tut) #land-bt-detail .land-detail { height: 100%; }
html.land:not(.in-tut) #land-bt-detail .land-detail.is-enemy { border-color: rgba(232,115,92,.75); }
html.land:not(.in-tut) #land-bt-detail .land-x {
position: absolute; right: calc(4 * var(--u)); top: calc(4 * var(--u)); z-index: 2;
width: calc(22 * var(--u)); height: calc(22 * var(--u)); padding: 0; margin: 0;
border: 1px solid rgba(217,180,90,.6); border-radius: 50%; background: rgba(10,24,44,.92);
color: #f3e2b6; font-family: inherit; font-size: calc(15 * var(--u)); line-height: 1; cursor: pointer;
-webkit-appearance: none; appearance: none;
}
html.land:not(.in-tut) #land-bt-detail .land-x:hover { border-color: #fff3c8; }
html.land.compact:not(.in-tut) #land-bt-detail .land-x { background: var(--k-paper-d); border-color: rgba(var(--k-ink-rgb), .55); }
html.land.compact:not(.in-tut) #land-bt-detail .land-x:hover { border-color: var(--tbl-cinnabar); }
html.land.compact:not(.in-tut) #land-bt-detail:not(.cpt-hover) { --k-paper-h: calc(36 * var(--u)); }
html.land.compact:not(.in-tut) #land-bt-detail:not(.cpt-hover) .ld-art { height: calc(72 * var(--u)); }
@media (pointer: coarse) {
html.land:not(.in-tut) #land-bt-detail { top: calc(46 * var(--u)); height: calc(306 * var(--u)); }
html.land:not(.in-tut) #land-bt-detail .land-x { width: calc(30 * var(--u)); height: calc(30 * var(--u)); font-size: calc(19 * var(--u)); }
}

html.land .hero-pop { max-width: min(calc(220 * var(--u)), calc(100vw - 16px)); font-size: calc(10.5 * var(--u)); line-height: 1.45; }
html.land .hero-pop-head { font-size: calc(12 * var(--u)); }
html.land .hero-pop-sub { font-size: calc(10 * var(--u)); }
html.land .hero-pop-foot { font-size: calc(10 * var(--u)); }
html.land .toast { bottom: calc(50% - calc(150 * var(--u))); font-size: calc(11 * var(--u)); max-width: calc(420 * var(--u)); }
html.land .confirm { padding: 0; }
html.land .confirm-card { max-width: none; width: calc(300 * var(--u)); }
html.land .confirm-msg { font-size: calc(12 * var(--u)); line-height: 1.6; margin-bottom: calc(10 * var(--u)); }
html.land .confirm-btns { gap: calc(6 * var(--u)); }

html.land .sheet { align-items: center; }
html.land .sheet-panel { max-width: calc(400 * var(--u)); max-height: calc(330 * var(--u)); font-size: calc(11 * var(--u)); }
html.land .sheet-title { font-size: calc(14 * var(--u)); }

html.land .tutorial-guide .guide-tip {
width: calc(270 * var(--u));
padding: calc(20 * var(--u)) calc(46 * var(--u)) calc(20 * var(--u)) calc(76 * var(--u));
font-size: calc(11 * var(--u)); line-height: 1.5;
}
html.land .tutorial-guide .guide-tip .tutorial-next { min-height: calc(26 * var(--u)); margin-top: calc(6 * var(--u)); font-size: calc(11 * var(--u)); }
html.land .tutorial-guide .tutorial-portrait { width: 19%; }
html.land .tutorial-guide .guide-tip.tip-in { animation: tutTipIn .42s cubic-bezier(.2,.8,.3,1.2) both; }

html.land .tutorial-guide .hand { width: calc(42.9 * var(--u)); height: calc(42.9 * var(--u)); line-height: calc(42.9 * var(--u)); animation-name: handBobLand; z-index: 1; }
html.land .tutorial-skip { top: calc(50% - calc(180 * var(--u)) + calc(8 * var(--u))); right: calc(50% - calc(320 * var(--u)) + calc(44 * var(--u))); left: auto; }
html.land .tutorial-dock, html.land .tutorial-battle .tutorial-dock { display: none; }

html.land .land-tut-title { display: none; }
html.land #scr-prep.tut-prep .land-tut-title {
display: block; position: absolute; left: calc(7 * var(--u)); right: calc(6 * var(--u)); top: calc(16 * var(--u));
font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); font-weight: 700; color: var(--gold); letter-spacing: .02em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.land #scr-prep.tut-prep .prep-top .lord-block > .hero-plate { display: none; }
html.land .tutorial-battle-guide .guide-tip { max-height: none; overflow: visible; }
html.land #tutorial-end { padding: 0; }
html.land .tutorial-panel {
width: calc(300 * var(--u)); font-size: max(calc(11 * var(--u)), 12px); line-height: 1.5; }
html.land .tutorial-end-heading { gap: calc(10 * var(--u)); }
html.land .boyi-finish { height: calc(78 * var(--u)); }

html.land .tutorial-lamps { gap: calc(14 * var(--u)); margin: calc(12 * var(--u)) 0; font-size: calc(14 * var(--u)); }
html.land .tutorial-panel p { margin: calc(4 * var(--u)) 0; }

@media (prefers-reduced-motion: reduce) {
html.land .tutorial-guide .hand { animation: none; }
html.land .tutorial-guide .guide-tip.tip-in { animation: none; }
}

html.land.rot, html.land.lbox {
--u: min(calc(var(--app-w) / 640), calc(var(--app-h) / 360));
--vw: calc(var(--app-w) / 100);
--vh: calc(var(--app-h) / 100);
}
html.land.rot body, html.land.lbox body { background: #000; }
html.land.rot #app, html.land.lbox #app {
right: auto; bottom: auto;
width: var(--app-w); height: var(--app-h);
transform-origin: 0 0; transform: var(--app-tf);
}

html.land.rot .battle-log, html.land.lbox .battle-log { max-height: calc(52 * var(--vh)); }

html.land .dbg-vp-ruler { position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; }
html.land .dbg-vp {
position: fixed; left: 50%; top: 50%; z-index: 2147483001; transform: translate(-50%, -50%); pointer-events: none;
margin: 0; padding: 8px 10px; max-width: calc(100vw - 16px); box-sizing: border-box;
background: rgba(0,0,0,.78); color: #ffeb3b; border: 1px solid #ffeb3b; border-radius: 6px;
font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace; white-space: pre; letter-spacing: 0;
}

html.land:not(.in-tut) #scr-prep .row-board .stat-ico,
html.land:not(.in-tut) #scr-prep .row-enemy .stat-ico,
html.land:not(.in-tut) #scr-battle .row-bt .stat-ico { display: none; }

html.land .card-kw {
position: absolute; z-index: 3; pointer-events: none;
right: calc(2 * var(--u)); top: calc(2 * var(--u));
display: flex; flex-direction: column; gap: calc(1.5 * var(--u));
}
html.land .kw-badge {
display: block; width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; overflow: hidden;
font-style: normal; font-size: 0; background: center / contain no-repeat;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}

html.land .kw-strike    { background-image: url("../assets/ui/kw_strike.webp"); }
html.land .kw-death     { background-image: url("../assets/ui/kw_death.webp"); }
html.land .kw-battle    { background-image: url("../assets/ui/kw_battle.webp"); }
html.land .kw-grow      { background-image: url("../assets/ui/kw_grow.webp"); }
html.land .kw-round     { background-image: url("../assets/ui/kw_round.webp"); }
html.land .kw-poison    { background-image: url("../assets/ui/kw_poison.webp"); }
html.land .kw-lifesteal { background-image: url("../assets/ui/kw_lifesteal.webp"); }

html.land .row-bench .card-kw { display: none; }

html.land .fx-ov { display: none; position: absolute; pointer-events: none; background: center / 100% 100% no-repeat; }

html.land .card.card-taunt, html.land .card.st-golden, html.land .card.st-golden-break, html.land .card.has-seal { overflow: visible; }
html.land .card.card-taunt, html.land .card.st-golden, html.land .card.st-golden-break { z-index: 3; }
html.land .card.card-taunt .card-art, html.land .card.st-golden .card-art, html.land .card.st-golden-break .card-art, html.land .card.has-seal .card-art { border-radius: calc(4 * var(--u)); }

html.land .card-taunt > .fx-taunt { display: block; left: -36%; right: -37%; top: -33%; bottom: -35%; z-index: 1; background-image: url("../assets/ui/fx_taunt_frame.webp"); }

html.land .card-taunt > .card-bar { z-index: 2; }

html.land .card.st-golden { border-color: #f2d27a !important; }

html.land .st-golden > .fx-golden { display: block; left: -26%; right: -26%; top: -26%; bottom: -26%; z-index: 3; background-image: url("../assets/ui/fx_golden_bubble.webp"); }

html.land .card-taunt.st-golden > .fx-golden { left: -44%; right: -44%; top: -40%; bottom: -40%; }
html.land .st-golden-break > .fx-golden-break { display: block; left: -26%; right: -26%; top: -26%; bottom: -26%; z-index: 3; background-image: url("../assets/ui/fx_golden_break.webp"); animation: fxBreakOut .3s ease-out forwards; }

html.land #scr-final .poster-team .fx-ov { display: none !important; }

html.land .card.silenced .card-kw, html.land .card.dead-unit .card-kw { display: none; }
html.land .card.silenced > .fx-taunt, html.land .card.silenced > .fx-golden,
html.land .card.dead-unit > .fx-taunt, html.land .card.dead-unit > .fx-golden { display: none; }
html.land .card.silenced.st-golden, html.land .card.dead-unit.st-golden { border-color: inherit !important; }

html.land .card.st-golden {
border-color: #f2d27a !important;
box-shadow: 0 0 0 calc(1.5 * var(--u)) rgba(242,210,122,.85), 0 0 calc(10 * var(--u)) calc(2 * var(--u)) rgba(242,210,122,.55), inset 0 0 calc(16 * var(--u)) rgba(255,226,140,.45);
}
html.land .card-bt.st-golden-break { animation: stGoldenBreak .52s ease-out; }
html.land .st-poison-n {
position: absolute; z-index: 5; pointer-events: none;
left: calc(2 * var(--u)); bottom: calc(18 * var(--u)); min-width: calc(14 * var(--u)); height: calc(13 * var(--u)); padding: 0 calc(3 * var(--u)); border-radius: calc(7 * var(--u));
background: #2e5a2a; color: #e9ffd8; font-size: calc(10 * var(--u)); font-weight: 900; line-height: calc(13 * var(--u)); text-align: center;
box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 0 6px rgba(150,230,90,.6);
}
html.land .st-poison-n::before { content: ''; display: inline-block; width: calc(4 * var(--u)); height: calc(4 * var(--u)); margin-right: calc(1.5 * var(--u)); border-radius: 50%; background: #9de05a; vertical-align: calc(1 * var(--u)); }

html.land .st-poison > .fx-poison { display: block; left: 0; right: 0; top: 0; height: 14%; z-index: 3; background: url("../assets/ui/fx_poison_edge.webp") left top / auto 100% repeat-x; }

html.land .st-burn > .fx-burn { display: block; left: 0; right: 0; bottom: 0; height: 16%; z-index: 3; background: url("../assets/ui/fx_burn_edge.webp") left bottom / auto 100% repeat-x; animation: fxFadeOut .7s ease-in forwards; }
html.land .card-bt.st-poison-tick { animation: stPoisonTick .42s ease-in-out; }
html.land .card-bt.st-charm { rotate: -4deg; }

html.land .st-charm > .fx-charm { display: block; left: 5%; right: 5%; top: 2%; height: 60%; z-index: 4; background: center / contain no-repeat url("../assets/ui/fx_charm_petals.webp"); animation: fxPetals 2.4s ease-in-out infinite; }
html.land .card-bt.st-stun { filter: brightness(.55) saturate(.6); }

html.land .st-stun > .fx-stun { display: block; left: 2%; right: 2%; top: 0; height: 32%; z-index: 4; background: center / contain no-repeat url("../assets/ui/fx_stun_stars.webp"); animation: stStunSpin 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
html.land .card-bt.st-golden-break, html.land .card-bt.st-poison-tick, html.land .fx-stun, html.land .fx-charm { animation: none; }
}

html.land .ld-kws { margin-top: calc(6 * var(--u)); padding-top: calc(5 * var(--u)); border-top: 1px solid rgba(232,221,198,.14); }
html.land .ld-kws-title { font-size: calc(10 * var(--u)); color: rgba(232,221,198,.6); letter-spacing: .04em; margin-bottom: calc(3 * var(--u)); }
html.land .ld-kw { display: grid; grid-template-columns: auto 1fr; column-gap: calc(5 * var(--u)); align-items: start; margin-bottom: calc(4 * var(--u)); }
html.land .ld-kw .kw-badge { grid-row: span 2; margin-top: calc(1 * var(--u)); }
html.land .ld-kw-name { font-size: calc(11 * var(--u)); line-height: calc(13 * var(--u)); color: #f0d79a; }
html.land .ld-kw-desc { grid-column: 2; font-size: calc(10 * var(--u)); line-height: calc(13 * var(--u)); color: rgba(232,221,198,.78); }
html.land .kw-passive { background-color: #7a7f8a; }  html.land .kw-passive::before { content: '·'; }
html.land .kw-prep    { background-color: #9a8a4a; }  html.land .kw-prep::before    { content: '¤'; }

html.land .card-cost.cost-top {
background: linear-gradient(160deg, #fff1b8 0%, #f2c94c 45%, #c9932a 100%) !important;
color: #3a2606 !important; text-shadow: none;
box-shadow: 0 0 0 1px rgba(255,236,170,.95), 0 0 calc(6 * var(--u)) rgba(255,214,102,.85);
}

html.land .card.card-legend:not(.card-bt) { box-shadow: 0 0 calc(4 * var(--u)) rgba(255,214,102,.3); }
html.land .mk-legend {
font-style: normal; color: #3a2606; background: linear-gradient(160deg, #fff1b8, #e6b93e);
border-radius: calc(3 * var(--u)); padding: 0 calc(3 * var(--u)); font-size: calc(10 * var(--u)); line-height: calc(12 * var(--u)); font-weight: 900;
}

html.land .ld-src { margin-top: calc(6 * var(--u)); padding-top: calc(5 * var(--u)); border-top: 1px solid rgba(232,221,198,.14); }
html.land .ld-src-title { font-size: calc(10 * var(--u)); color: rgba(232,221,198,.6); letter-spacing: .04em; margin-bottom: calc(2 * var(--u)); }
html.land .ld-src-where { font-size: calc(11 * var(--u)); line-height: calc(14 * var(--u)); color: #f0d79a; }
html.land .ld-src-text { font-size: calc(10 * var(--u)); line-height: calc(14 * var(--u)); color: rgba(232,221,198,.82); margin-top: calc(2 * var(--u)); }
html.land .ld-src-note { font-size: calc(10 * var(--u)); line-height: calc(13 * var(--u)); color: rgba(232,221,198,.55); margin-top: calc(2 * var(--u)); font-style: italic; }

html.land:not(.in-tut) .ld-tiers .skill-tier { position: relative; }
html.land:not(.in-tut) .ld-tiers .skill-tier .tier-txt { flex: 1 1 auto; min-width: 0; }
html.land:not(.in-tut) .ld-tiers .skill-tier:has(.tier-reach) { margin-top: calc(6 * var(--u)); }
html.land:not(.in-tut) .ld-tiers .tier-reach {
position: absolute; right: calc(3 * var(--u)); top: calc(-7 * var(--u)); margin: 0;
line-height: calc(12 * var(--u)); padding: 0 calc(4 * var(--u)); border-radius: calc(3 * var(--u));
}

html.land .hero-passive.hero-auto { font-weight: 700; }

html.land #scr-final .poster-team { grid-template-columns: repeat(6, 1fr); }
html.land .free-best-line { font-size: calc(11 * var(--u)); line-height: calc(15 * var(--u)); color: rgba(232,221,198,.75); text-align: center; }

html.land .ld-kw .kw-golden { background-color: #d9b44a; color: #3a2a06; }  html.land .ld-kw .kw-golden::before { content: '◇'; }
html.land .ld-kw .kw-taunt  { background-color: #8d8577; }                   html.land .ld-kw .kw-taunt::before  { content: '▣'; }

html.land #scr-final .poster-team .card-kw { display: none; }

html.land:not(.in-tut) .enemy-intel { --face-mini: calc(12 * var(--u)); }

html.land .ld-kw .kw-golden, html.land .ld-kw .kw-taunt, html.land .ld-kw .kw-passive, html.land .ld-kw .kw-prep {
font-size: calc(10 * var(--u)); line-height: calc(12 * var(--u)); text-align: center; color: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.5);
}

html.land .kw-badge.kw-seal { position: absolute; left: 50%; bottom: calc(-7 * var(--u)); width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin-left: calc(-7 * var(--u)); z-index: 5; pointer-events: none; }
html.land .card.silenced > .kw-seal, html.land .card.dead-unit > .kw-seal, html.land #scr-final .poster-team .kw-seal { display: none; }

html.land #btn-speed.hint-pulse { animation: hintPulse .8s ease-in-out 6; }

html.land:not(.in-tut) .ld-art.ld-art-beast { background: radial-gradient(ellipse at 50% 45%, #0d1d33 0%, #081527 70%, #061121 100%); }
html.land:not(.in-tut) .ld-art.ld-art-beast .ld-art-img {

width: auto; height: 100%; max-width: 100%; left: 50%; transform: translateX(-50%); object-fit: contain;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
-webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
mask-composite: intersect;
}

html.land:not(.in-tut) .ld-meta { flex-wrap: nowrap; align-items: flex-start; }
html.land:not(.in-tut) .ld-meta > span { flex: 0 1 auto; min-width: 0; }

html.land:not(.in-tut) #scr-prep .row-shop .card { overflow: visible; }

html.land:not(.in-tut) #scr-prep .row-shop { padding-top: calc(9 * var(--u)); }
html.land:not(.in-tut) #scr-prep .row-shop .slot, html.land:not(.in-tut) #scr-prep .row-shop .card { height: calc(66 * var(--u)); }
html.land:not(.in-tut) #scr-prep.has-bench .row-shop .slot, html.land:not(.in-tut) #scr-prep.has-bench .row-shop .card { height: calc(44 * var(--u)); }

html.land:not(.in-tut) .land-lord-box { height: calc(108 * var(--u)); }
html.land:not(.in-tut) .land-mode-tag {
position: absolute; left: calc(8 * var(--u)); right: calc(6 * var(--u)); top: calc(91 * var(--u));
font-size: calc(10 * var(--u)); line-height: calc(13 * var(--u)); color: #e9cf86; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.land:not(.in-tut) .land-mode-tag.is-free { color: #9fd3e6; }

html.land:not(.in-tut) .land-lord-box { height: calc(120 * var(--u)); }
html.land:not(.in-tut) .land-mode-tag { top: calc(89 * var(--u)); white-space: normal; overflow: visible; line-height: calc(12.5 * var(--u)); }
html.land:not(.in-tut) .ld-hero-soon { margin-top: calc(10 * var(--u)); text-align: center; color: #e9cf86; }

html.land .row-bench .card { overflow: visible; }
html.land .row-bench .card > .mk-up {
position: absolute; right: calc(-4 * var(--u)); top: calc(-5 * var(--u)); z-index: 6;
width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-style: normal; font-weight: 800; font-size: calc(11 * var(--u)); line-height: 1;
color: #1a2414; background: #9fe07a; border: calc(1 * var(--u)) solid #e9f7d8;
box-shadow: 0 0 calc(4 * var(--u)) rgba(159, 224, 122, .8);
pointer-events: none;
}

html.land #scr-start.fresh-visit .today-line,
html.land #scr-start.fresh-visit .omen-line,
html.land #scr-start.fresh-visit .daily-best,
html.land #scr-start.fresh-visit .streak-line,
html.land #scr-start.fresh-visit .dex-seal,
html.land #scr-start.fresh-visit .fc-corner,
html.land #scr-start.fresh-visit #btn-free,
html.land #scr-start.fresh-visit #btn-dex,
html.land #scr-start.fresh-visit #start-hint { display: none !important; }
html.land #scr-start.fresh-visit .ring-deco { margin-bottom: calc(16 * var(--u)); }
html.land #scr-start.fresh-visit #btn-start {
height: calc(46 * var(--u)); font-size: calc(20 * var(--u)); letter-spacing: .16em; text-indent: .16em;
--btn-edge: calc(11 * var(--u)); --btn-lift: calc(3.2 * var(--u));
}

html.land #scr-prep.ft-quiet .land-mode-tag,
html.land #scr-prep.ft-quiet .land-ring-line,
html.land #scr-prep.ft-quiet .land-ring-note,
html.land #scr-prep.ft-quiet .land-bond-rule,
html.land #scr-prep.ft-quiet .bond-none,
html.land #scr-prep.ft-quiet .land-detail.is-empty .ld-hero-soon,
html.land #scr-prep.ft-quiet .land-detail.is-empty .ld-hint,
html.land #scr-prep.ft-quiet #prep-tip { visibility: hidden; }

html.land #scr-hero .hero-offers[data-n="2"] { grid-template-columns: repeat(2, calc(186 * var(--u))); gap: calc(20 * var(--u)); }
html.land #scr-hero .hero-offers[data-n="4"] { grid-template-columns: repeat(4, calc(144 * var(--u))); gap: calc(10 * var(--u)); }

html.land .relic-icon {
position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff3c8 0%, #d9b45a 45%, #7a5a22 100%);
border: calc(1 * var(--u)) solid #f3e2b6; color: #2a1c08; overflow: hidden;
}
html.land .relic-icon.rk-el { background: rgba(10,24,44,.9); border-color: #d9b45a; }
html.land .relic-icon .el-badge-img { width: 82% !important; height: 82% !important; }
html.land .relic-icon .relic-glyph { font-size: calc(11 * var(--u)); font-weight: 800; line-height: 1; }
html.land .relic-icon .relic-icon-img { width: 100%; height: 100%; object-fit: contain; }
html.land .relic-icon.relic-icon-lg { width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-width: calc(2 * var(--u)); }
html.land .relic-icon.relic-icon-lg .relic-glyph { font-size: calc(22 * var(--u)); }

html.land .relic-pick { z-index: 94; }

html.land:not(.in-tut) #scr-prep .prep-dock .relic-slots {
order: 3; flex: none; align-self: center; display: flex; flex-direction: column; gap: calc(3 * var(--u));
}
html.land:not(.in-tut) #scr-prep .prep-dock .relic-slots[hidden] { display: none; }
html.land:not(.in-tut) #scr-prep .prep-dock .relic-slot { width: calc(21 * var(--u)); height: calc(21 * var(--u)); margin: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }

html.land:not(.in-tut) #scr-prep .prep-dock .relic-slot .relic-icon { width: 100%; height: 100%; }
html.land:not(.in-tut) #scr-prep .prep-dock .relic-slot.relic-new::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; animation: relicNew 1.4s ease-out; }
html.land:not(.in-tut) #scr-prep .prep-dock .relic-slot.relic-new::before { animation: relicNewDisc 1.4s ease-out; }
html.land:not(.in-tut) #scr-prep .prep-dock .relic-slot.relic-new > .relic-icon { animation: relicNewIcon 1.4s ease-out; }

html.land:not(.in-tut) #scr-prep .row-shop[data-n="5"] { grid-template-columns: repeat(5, 1fr); padding-left: calc(8 * var(--u)); padding-right: calc(8 * var(--u)); gap: calc(5 * var(--u)); }

html.land:not(.in-tut) #scr-prep .row-shop[data-n="3"] { grid-template-columns: repeat(3, calc((100% - 18 * var(--u)) / 4)); justify-content: center; }
html.land:not(.in-tut) #scr-prep .row-shop[data-n="6"] { grid-template-columns: repeat(6, 1fr); padding-left: calc(4 * var(--u)); padding-right: calc(4 * var(--u)); gap: calc(5 * var(--u)); }

html.land:not(.in-tut) #scr-prep .row-shop .card.card-gift { box-shadow: 0 0 0 calc(2 * var(--u)) #ffd666, 0 0 calc(12 * var(--u)) rgba(255,214,102,.75); }
html.land:not(.in-tut) #scr-prep .row-shop .card .gift-tag {
position: absolute; left: 50%; top: calc(6 * var(--u)); transform: translateX(-50%); z-index: 5; white-space: nowrap;
padding: 0 calc(5 * var(--u)); border-radius: calc(6 * var(--u)); background: rgba(60,38,6,.92); border: calc(1 * var(--u)) solid #ffd666;
color: #ffe9a8; font-size: calc(10 * var(--u)); line-height: calc(13 * var(--u)); font-weight: 700; pointer-events: none;
}
html.land:not(.in-tut) #scr-prep .row-shop .card.card-mirror { box-shadow: 0 0 0 calc(1.5 * var(--u)) #bfefff, 0 0 calc(10 * var(--u)) rgba(150,220,255,.8); }

html.land .card.ghost-unit .card-art { opacity: .5; filter: saturate(.3) hue-rotate(160deg) brightness(1.15); }

html.land .omen-icon {
display: inline-flex; align-items: center; justify-content: center; flex: none;
width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #e6f0ff 0%, #8fa8d8 45%, #2c3c66 100%);
border: calc(1 * var(--u)) solid #cfdcff; color: #0e1630; overflow: hidden;
}
html.land .omen-icon .omen-glyph { font-size: calc(10 * var(--u)); font-weight: 800; line-height: 1; }
html.land .omen-icon .omen-icon-img { width: 100%; height: 100%; object-fit: contain; }
html.land #scr-start .omen-line { position: relative; display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: calc(6 * var(--u)); margin: calc(-4 * var(--u)) 0 calc(7 * var(--u)); white-space: nowrap; }
html.land #scr-start .omen-line[hidden] { display: none; }
html.land #scr-start .omen-chip {
display: inline-flex; align-items: center; gap: calc(4 * var(--u)); cursor: pointer;
padding: calc(1 * var(--u)) calc(8 * var(--u)) calc(1 * var(--u)) calc(2 * var(--u)); border-radius: calc(10 * var(--u));
background: rgba(20,32,60,.75); border: calc(1 * var(--u)) solid rgba(160,185,240,.55); color: #dfe8ff; font: inherit;
font-size: calc(10.5 * var(--u)); line-height: calc(16 * var(--u));
}
html.land #scr-start .omen-next { font-size: calc(10 * var(--u)); color: #b9c3d8; }
html.land #scr-start .omen-desc {
position: absolute; left: 50%; top: calc(100% + 4 * var(--u)); transform: translateX(-50%); z-index: 5; width: max-content; max-width: calc(260 * var(--u));
padding: calc(4 * var(--u)) calc(8 * var(--u)); border-radius: calc(6 * var(--u)); background: rgba(12,20,40,.96); border: calc(1 * var(--u)) solid rgba(160,185,240,.6);
font-size: calc(10.5 * var(--u)); line-height: 1.35; color: #dfe8ff; white-space: normal; pointer-events: none;
}
html.land #scr-start .omen-desc[hidden] { display: none; }
html.land:not(.in-tut) #scr-prep .prep-top .prep-omen {
width: calc(26 * var(--u)); height: calc(26 * var(--u)); padding: 0; margin: 0;
display: flex; align-items: center; justify-content: center; cursor: pointer;
}
html.land:not(.in-tut) #scr-prep .prep-top .prep-omen[hidden] { display: none; }
html.land:not(.in-tut) #scr-prep .prep-top .prep-omen .omen-icon { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
html.land:not(.in-tut) #scr-prep .prep-top .prep-omen .omen-glyph { font-size: calc(11 * var(--u)); }

html.land:not(.in-tut) #bt-overlay .loss-reasons {
width: calc(330 * var(--u)); margin: calc(4 * var(--u)) auto 0; padding: calc(5 * var(--u)) calc(8 * var(--u));
border-radius: calc(7 * var(--u)); background: rgba(8,16,32,.82); border: calc(1 * var(--u)) solid rgba(217,180,90,.5); text-align: left;
}
html.land:not(.in-tut) #bt-overlay .loss-reasons[hidden] { display: none; }
html.land:not(.in-tut) #bt-overlay .lr-head { font-size: calc(10.5 * var(--u)); line-height: calc(14 * var(--u)); color: #e9cf86; font-weight: 700; margin-bottom: calc(2 * var(--u)); }
html.land:not(.in-tut) #bt-overlay .lr-row { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(11 * var(--u)); line-height: 1.35; color: #f3e2b6; margin-top: calc(2 * var(--u)); }

html.land:not(.in-tut) #bt-overlay .lr-ico { flex: none; --k-tag-h: max(calc(16 * var(--u)), 18px); font-size: max(calc(10 * var(--u)), 12px); font-weight: 800; font-style: normal; }
html.land:not(.in-tut) #bt-overlay .lr-next { margin-top: calc(4 * var(--u)); font-size: calc(10 * var(--u)); line-height: 1.35; color: #b9c3d8; }
html.land:not(.in-tut) #scr-prep .loss-pulse { animation: hintPulse .8s ease-in-out 3; border-radius: calc(5 * var(--u)); }
html.land #scr-final .final-last { margin: 0; font-size: max(calc(10.5 * var(--u)), 12px); line-height: 1.4; color: #e9cf86; text-align: left; }
html.land #scr-final .final-last[hidden] { display: none; }
html.land .chushan-unlock { margin-top: calc(6 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.4; color: #ffe9a8; font-weight: 700; }
html.land .chushan-unlock[hidden] { display: none; }

html.land .row-board .card > .mk-down {
position: absolute; left: calc(-4 * var(--u)); top: calc(-5 * var(--u)); z-index: 6;
width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-style: normal; font-weight: 800; font-size: calc(11 * var(--u)); line-height: 1;
color: #2a0e0a; background: #ff9a7a; border: calc(1 * var(--u)) solid #ffe0d6;
box-shadow: 0 0 calc(4 * var(--u)) rgba(255,154,122,.8); pointer-events: none;
}
html.land #scr-prep .card.swap-hl { box-shadow: 0 0 0 calc(1.5 * var(--u)) #ffe9a8, 0 0 calc(10 * var(--u)) rgba(255,214,102,.75); }
html.land .swap-ask {
position: fixed; z-index: 88; transform: none; pointer-events: auto;
width: max-content; max-width: calc(250 * var(--u)); white-space: normal;
font-size: calc(11 * var(--u)); line-height: 1.35; letter-spacing: .02em; }
html.land .swap-ask[hidden] { display: none; }

html.land .relic-icon.has-art, html.land .omen-icon.has-art { background: none; border: none; overflow: visible; }
html.land .relic-icon.has-art .relic-icon-img, html.land .omen-icon.has-art .omen-icon-img { filter: drop-shadow(0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.6)); }

html.land:not(.in-tut) #scr-prep::before,
html.land:not(.in-tut) #scr-battle::before {
content: ''; position: absolute; left: calc(160 * var(--u)); top: calc(2 * var(--u)); width: calc(320 * var(--u)); height: calc(356 * var(--u));
box-sizing: border-box; pointer-events: none;
background: url("../assets/ui/table_default.webp") center / cover no-repeat;
border: calc(14 * var(--u)) solid transparent;
border-image: url("../assets/ui/table_default.webp") 64 / calc(14 * var(--u)) / 0 stretch;
background-origin: border-box; background-clip: padding-box;
}

html.land:not(.in-tut) #scr-prep .p-board, html.land:not(.in-tut) #scr-prep .p-shop { background: rgba(10,24,44,.10); border-color: transparent; }
html.land:not(.in-tut) #scr-prep .p-board .panel-title, html.land:not(.in-tut) #scr-prep .p-shop .panel-title,
html.land:not(.in-tut) #scr-prep .p-board .panel-note, html.land:not(.in-tut) #scr-prep .bond-none {
background: var(--k-ink); border-radius: calc(3 * var(--u)); padding: 0 calc(7 * var(--u)); line-height: calc(17 * var(--u)); color: var(--k-on-dark);
}
html.land:not(.in-tut) #scr-prep .slot-idx, html.land:not(.in-tut) #scr-prep .row-shop .slot-idx { color: rgba(60,40,15,.55); }
html.land:not(.in-tut) #scr-prep .bond-tag { background: var(--k-ink); }
html.land:not(.in-tut) #scr-battle .side-label { display: inline-block; width: auto; background: var(--k-ink); border-radius: calc(3 * var(--u)); padding: 0 calc(8 * var(--u)); color: var(--k-on-dark); }

html.land .toast.toast-top { bottom: auto; top: calc(8 * var(--u)); z-index: 99; }

html.land .cpt-only { display: none; }
html.land.compact:not(.in-tut) #scr-prep .land-left,
html.land.compact:not(.in-tut) #scr-prep .land-right,
html.land.compact:not(.in-tut) #scr-prep .prep-top .lord-block,
html.land.compact:not(.in-tut) #scr-prep .prep-top .tb-mid,
html.land.compact:not(.in-tut) #scr-prep .prep-top #prep-omen,
html.land.compact:not(.in-tut) #scr-prep .enemy-intel,
html.land.compact:not(.in-tut) #scr-prep .enemy-drop .counter-hint,
html.land.compact:not(.in-tut) #scr-prep .enemy-drop .enemy-note,
html.land.compact:not(.in-tut) #scr-prep .p-board .panel-head,
html.land.compact:not(.in-tut) #scr-prep .p-shop .panel-title,
html.land.compact:not(.in-tut) #scr-prep .bond-strip,
html.land.compact:not(.in-tut) #scr-prep #prep-tip,
html.land.compact:not(.in-tut) #scr-prep #tb-lamps,
html.land.compact:not(.in-tut) #scr-prep .bench-tag { display: none !important; }

html.land.compact:not(.in-tut) #scr-prep::before { left: calc(80 * var(--u)); top: calc(50 * var(--u)); width: calc(480 * var(--u)); height: calc(236 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep .topbar.prep-top,
html.land.compact:not(.in-tut) #scr-prep .topbar.prep-top.deep,
html.land.compact:not(.in-tut) #scr-prep .p-enemy,
html.land.compact:not(.in-tut) #scr-prep .p-board,
html.land.compact:not(.in-tut) #scr-prep .p-shop,
html.land.compact:not(.in-tut) #scr-prep .prep-dock,
html.land.compact:not(.in-tut) #scr-prep:not(.has-hero) .prep-dock {
position: absolute; left: 0; top: 0; width: calc(640 * var(--u)); height: 0; padding: 0; margin: 0;
display: block; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
}
html.land.compact:not(.in-tut) #scr-prep .p-shop .panel-head,
html.land.compact:not(.in-tut) #scr-prep .relic-slots,
html.land.compact:not(.in-tut) #scr-prep .prep-dock .actionbar { display: contents; }

html.land.compact:not(.in-tut) .cpt-top {
display: flex; position: absolute; left: 50%; top: calc(4 * var(--u)); transform: translateX(-50%); z-index: 6;
align-items: center; gap: calc(6 * var(--u));
}
html.land.compact:not(.in-tut) .cpt-lord { width: calc(32 * var(--u)); height: calc(32 * var(--u)); overflow: hidden; cursor: pointer; }
html.land.compact:not(.in-tut) .cpt-lord[hidden] { display: none; }
html.land.compact:not(.in-tut) .cpt-lord-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
html.land.compact:not(.in-tut) .cpt-cap { height: calc(22 * var(--u)); font: inherit; font-size: calc(11.5 * var(--u)); line-height: 1; white-space: nowrap; cursor: pointer; }

html.land.compact:not(.in-tut) #scr-prep .row-shop,
html.land.compact:not(.in-tut) #scr-prep .row-board,
html.land.compact:not(.in-tut) #scr-prep .row-enemy {
position: absolute; left: calc(89 * var(--u)); width: calc(462 * var(--u)); padding: 0; margin: 0;
display: grid; justify-content: center; gap: calc(6 * var(--u));
}
html.land.compact:not(.in-tut) #scr-prep .row-board { top: calc(174 * var(--u)); grid-template-columns: repeat(6, calc(72 * var(--u))); }
html.land.compact:not(.in-tut) #scr-prep .row-shop { top: calc(66 * var(--u)); grid-template-columns: repeat(4, calc(72 * var(--u))); gap: calc(12 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .row-shop[data-n="5"] { grid-template-columns: repeat(5, calc(72 * var(--u))); gap: calc(8 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .enemy-drop { display: none !important; }
html.land.compact:not(.in-tut) #scr-prep.cpt-enemy .enemy-drop {
display: block !important; position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; margin: 0; border: 0; background: none; box-shadow: none;
}
html.land.compact:not(.in-tut) #scr-prep .row-enemy { top: calc(62 * var(--u)); grid-template-columns: repeat(6, calc(72 * var(--u))); }
html.land.compact:not(.in-tut) #scr-prep.cpt-enemy .row-shop { visibility: hidden; }
html.land.compact:not(.in-tut) #scr-prep .row-board .slot, html.land.compact:not(.in-tut) #scr-prep .row-board .card,
html.land.compact:not(.in-tut) #scr-prep .row-shop .slot, html.land.compact:not(.in-tut) #scr-prep .row-shop .card,
html.land.compact:not(.in-tut) #scr-prep.has-bench .row-shop .slot, html.land.compact:not(.in-tut) #scr-prep.has-bench .row-shop .card,
html.land.compact:not(.in-tut) #scr-prep .row-enemy .slot, html.land.compact:not(.in-tut) #scr-prep .row-enemy .card { min-height: 0; height: calc(98 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep .row-enemy .card { filter: saturate(.8) brightness(.85); }

html.land.compact:not(.in-tut) #scr-prep .slot-idx { font-size: calc(11.5 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep .prep-top .tb-left { position: absolute; left: calc(560 * var(--u)); top: calc(4 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-top .tb-right { position: absolute; left: calc(560 * var(--u)); top: calc(4 * var(--u)); width: calc(74 * var(--u)); justify-content: flex-end; }
html.land.compact:not(.in-tut) #scr-prep .prep-dock #tb-gold,
html.land.compact:not(.in-tut) #scr-prep:not(.has-hero) .prep-dock #tb-gold {
position: absolute; left: calc(560 * var(--u)); right: auto; top: calc(46 * var(--u)); width: calc(74 * var(--u)); height: calc(30 * var(--u));
justify-content: center; font-size: calc(18 * var(--u)); line-height: calc(30 * var(--u));
}
html.land.compact:not(.in-tut) #scr-prep .p-shop #btn-reroll { position: absolute; left: calc(560 * var(--u)); top: calc(82 * var(--u)); width: calc(74 * var(--u)); height: calc(34 * var(--u)); white-space: nowrap; line-height: 1; font-size: calc(11.5 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock #btn-sell,
html.land.compact:not(.in-tut) #scr-prep .prep-dock #btn-fight { position: absolute; left: calc(560 * var(--u)); width: calc(74 * var(--u)); margin: 0; order: 0; }
html.land.compact:not(.in-tut) #scr-prep .prep-dock #btn-sell { top: calc(262 * var(--u)); height: calc(30 * var(--u)); font-size: calc(12 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock #btn-fight { top: calc(298 * var(--u)); height: calc(52 * var(--u)); font-size: calc(16 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-block { position: absolute; left: calc(268 * var(--u)); top: calc(296 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-face { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-block > .hero-plate { font-size: calc(11.5 * var(--u)); --np-h: calc(19 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .prep-hero { position: absolute; left: calc(332 * var(--u)); top: calc(302 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-passive,
html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-charge { font-size: calc(11.5 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .relic-slot { position: absolute; top: calc(312 * var(--u)); width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock #relic-slot-0 { left: calc(234 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock #relic-slot-1 { left: calc(378 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep .bench-strip { display: none !important; }
html.land.compact:not(.in-tut) #scr-prep.cpt-fan .bench-strip {
display: block !important; position: absolute; left: 0; top: 0; width: 0; height: 0; margin: 0; padding: 0; background: none; border: 0; z-index: 9;
}
html.land.compact:not(.in-tut) #scr-prep.cpt-fan .row-bench { display: block; position: static; }
html.land.compact:not(.in-tut) #scr-prep.cpt-fan .row-bench .slot {
position: absolute; top: calc(var(--fy) * var(--u)); left: calc(var(--fx) * var(--u)); width: calc(66 * var(--u)); height: calc(90 * var(--u)); min-height: 0;
transform: rotate(calc(var(--fr) * 1deg)); transform-origin: 50% 120%; background: rgba(12,24,42,.88); border-color: rgba(217,180,90,.5);
box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.6);
}
html.land.compact:not(.in-tut) #scr-prep.cpt-fan .row-bench .slot:nth-child(1) { --fx: 196; --fy: 76; --fr: -10; }
html.land.compact:not(.in-tut) #scr-prep.cpt-fan .row-bench .slot:nth-child(2) { --fx: 264; --fy: 68; --fr: -5; }
html.land.compact:not(.in-tut) #scr-prep.cpt-fan .row-bench .slot:nth-child(3) { --fx: 332; --fy: 66; --fr: 0; }
html.land.compact:not(.in-tut) #scr-prep.cpt-fan .row-bench .slot:nth-child(4) { --fx: 400; --fy: 68; --fr: 5; }
html.land.compact:not(.in-tut) #scr-prep.cpt-fan .row-bench .slot:nth-child(5) { --fx: 468; --fy: 76; --fr: 10; }
html.land.compact:not(.in-tut) #scr-prep.cpt-fan .row-bench .card { height: 100%; min-height: 0; }
html.land.compact:not(.in-tut) #scr-prep.cpt-fan .row-shop { visibility: hidden; }

html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right {
display: block !important; position: absolute; left: calc(170 * var(--u)); top: calc(40 * var(--u)); width: calc(300 * var(--u)); height: calc(280 * var(--u)); z-index: 60;
}
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-text,
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-foot,
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-meta { font-size: calc(11.5 * var(--u)); }

html.land.compact:not(.in-tut) .cpt-left {
display: flex; flex-direction: column; gap: calc(6 * var(--u));
position: absolute; left: calc(6 * var(--u)); top: calc(6 * var(--u)); width: calc(70 * var(--u)); height: calc(348 * var(--u)); z-index: 4;
}
html.land.compact:not(.in-tut) .cpt-box { display: block; width: 100%; text-align: center; font: inherit; }
html.land.compact:not(.in-tut) button.cpt-box { cursor: pointer; }
html.land.compact:not(.in-tut) .cpt-grow { flex: 1 1 auto; }
html.land.compact:not(.in-tut) .cpt-stage-row { display: flex; align-items: center; justify-content: space-between; gap: calc(3 * var(--u)); }
html.land.compact:not(.in-tut) .cpt-stage { font-size: calc(12 * var(--u)); font-weight: 700; color: #f3e2b6; white-space: nowrap; min-width: 0; }
html.land.compact:not(.in-tut) .cpt-stage-row { flex-wrap: wrap; justify-content: center; }
html.land.compact:not(.in-tut) .cpt-omen { width: calc(20 * var(--u)); height: calc(20 * var(--u)); padding: 0; border: 0; background: none; flex: none; cursor: pointer; }
html.land.compact:not(.in-tut) .cpt-omen[hidden] { display: none; }
html.land.compact:not(.in-tut) .cpt-omen .omen-icon { width: 100%; height: 100%; }
html.land.compact:not(.in-tut) .cpt-lamps { display: flex; justify-content: center; gap: calc(2 * var(--u)); margin-top: calc(3 * var(--u)); font-size: calc(16 * var(--u)); }
html.land.compact:not(.in-tut) .cpt-faces { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(3 * var(--u)); justify-items: center; }
html.land.compact:not(.in-tut) .cpt-face { width: calc(19 * var(--u)); height: calc(19 * var(--u)); border-radius: 50%; border: calc(1.5 * var(--u)) solid rgba(217,180,90,.3); overflow: hidden; background: #0d1a30; }
html.land.compact:not(.in-tut) .cpt-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }
html.land.compact:not(.in-tut) .cpt-face.empty { opacity: .35; }
html.land.compact:not(.in-tut) .cpt-power { display: block; margin-top: calc(4 * var(--u)); font-size: calc(11.5 * var(--u)); line-height: 1.2; color: var(--paper-2); }
html.land.compact:not(.in-tut) .cpt-dots { display: grid; grid-template-columns: repeat(5, 1fr); }
html.land.compact:not(.in-tut) .cpt-dot { display: flex; flex-direction: column; align-items: center; opacity: .5; }
html.land.compact:not(.in-tut) .cpt-dot.on { opacity: 1; }
html.land.compact:not(.in-tut) .cpt-dot i { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; }
html.land.compact:not(.in-tut) .cpt-dot.on i { box-shadow: 0 0 calc(5 * var(--u)) currentColor; }
html.land.compact:not(.in-tut) .cpt-dot b { font-size: calc(11.5 * var(--u)); line-height: 1.2; font-weight: 700; color: #f3e2b6; }
html.land.compact:not(.in-tut) .cpt-bonds-cap { display: block; margin-top: calc(2 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--paper-2); }
html.land #hero-pop-text { white-space: pre-line; }

html.land.compact:not(.in-tut) #scr-prep .row-shop .card .gift-tag { font-size: calc(11.5 * var(--u)); }

html.land.compact:not(.in-tut) #scr-battle::before { left: calc(80 * var(--u)); top: calc(50 * var(--u)); width: calc(480 * var(--u)); height: calc(236 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle .land-bt-left,
html.land.compact:not(.in-tut) #scr-battle .land-log,
html.land.compact:not(.in-tut) #scr-battle .side-label,
html.land.compact:not(.in-tut) #scr-battle .field-knot,
html.land.compact:not(.in-tut) #scr-battle .field-corner,
html.land.compact:not(.in-tut) #scr-battle .bt-top .lord-block > .hero-plate { display: none !important; }
html.land.compact:not(.in-tut) #scr-battle .topbar.bt-top,
html.land.compact:not(.in-tut) #scr-battle:not(.tutorial-battle):not(.tutorial-demo) .topbar.bt-top {
left: 0; top: 0; width: calc(640 * var(--u)); height: 0; background: none; border: 0; box-shadow: none; z-index: 6;
}
html.land.compact:not(.in-tut) #scr-battle .bt-top .lord-face { left: calc(304 * var(--u)); top: calc(6 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle .bt-top .tb-right {
left: calc(560 * var(--u)); top: calc(6 * var(--u)); width: calc(74 * var(--u)); flex-direction: column; align-items: stretch; gap: calc(6 * var(--u));
}
html.land.compact:not(.in-tut) #scr-battle .bt-top .tb-right .bt-ctl,
html.land.compact:not(.in-tut) #scr-battle .bt-top .tb-right .pause-btn { width: 100%; height: calc(34 * var(--u)); font-size: calc(12.5 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle:not(.tutorial-demo) .arena {
left: calc(89 * var(--u)); top: calc(60 * var(--u)); width: calc(462 * var(--u)); height: calc(214 * var(--u));
padding: 0; justify-content: space-between; background: none; border: 0; box-shadow: none;
}
html.land.compact:not(.in-tut) #scr-battle:not(.tutorial-demo) .arena::before,
html.land.compact:not(.in-tut) #scr-battle:not(.tutorial-demo) .arena::after { display: none; }
html.land.compact:not(.in-tut) #scr-battle .field-side { margin: 0; padding: 0; }
html.land.compact:not(.in-tut) #scr-battle .row-bt { display: grid; grid-template-columns: repeat(6, calc(72 * var(--u))); gap: calc(6 * var(--u)); justify-content: center; }
html.land.compact:not(.in-tut) #scr-battle:not(.tutorial-demo) .row-bt .slot { min-height: 0; height: calc(98 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle .row-bt .card { min-height: 0; height: 100%; width: 100%; flex: 1 1 auto; }

html.land.compact:not(.in-tut) #scr-battle .clash-line { height: calc(18 * var(--u)); margin: 0; }
html.land.compact:not(.in-tut) #scr-battle #bt-banner { font-size: calc(12.5 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle .bt-dock,
html.land.compact:not(.in-tut) #scr-battle .bt-dock[hidden] {
left: calc(250 * var(--u)); top: calc(292 * var(--u)); width: calc(140 * var(--u)); height: calc(60 * var(--u)); background: none; border: 0; box-shadow: none;
}
html.land.compact:not(.in-tut) #scr-battle .bt-dock .hero-block > .hero-plate { font-size: calc(11.5 * var(--u)); }
html.land.compact:not(.in-tut) .cpt-bt-left { height: auto; }
html.land.compact:not(.in-tut) .cpt-cap-gap { margin-top: calc(8 * var(--u)); }

html.land.cpt-detail-open .swap-ask { visibility: hidden; }

html.land.compact:not(.in-tut) #scr-battle .cpt-log-btn { display: block; }
html.land.compact:not(.in-tut) #scr-battle.cpt-log .land-log {
display: block !important; position: absolute; left: calc(170 * var(--u)); top: calc(40 * var(--u)); width: calc(300 * var(--u)); height: calc(280 * var(--u)); z-index: 60;
}
html.land.compact:not(.in-tut) #scr-battle.cpt-log .land-log-list { font-size: calc(11.5 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle.cpt-log .land-log-list * { font-size: calc(11.5 * var(--u)); }

html.land.compact:not(.in-tut) #bt-overlay .result-bg { display: none; }
html.land.compact:not(.in-tut) #scr-battle #bt-overlay .result-inner {
width: calc(400 * var(--u)); max-height: calc(344 * var(--u)); }
html.land.compact:not(.in-tut) #bt-overlay .result-line { font-size: calc(11.5 * var(--u)); }
html.land.compact:not(.in-tut) #bt-overlay .loss-reasons { width: 100%; }
html.land.compact:not(.in-tut) #bt-overlay .lr-head, html.land.compact:not(.in-tut) #bt-overlay .lr-next, html.land.compact:not(.in-tut) #bt-overlay .lr-row { font-size: max(calc(11.5 * var(--u)), 12px); }
html.land.compact:not(.in-tut) #scr-battle .slot-idx,
html.land.compact:not(.in-tut) #scr-battle .card-shield { font-size: calc(11.5 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle #bt-overlay #ov-hero { --d: calc(56 * var(--u)); --pl-h: calc(20 * var(--u)); --pl-fs: calc(11.5 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle #bt-overlay #ov-title { margin: 0; }
html.land.compact:not(.in-tut) #scr-battle #bt-overlay #ov-lord { --pl-fs: calc(11.5 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle #bt-overlay .result-sub { margin-top: calc(3 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle #bt-overlay .two-btns { margin-top: calc(6 * var(--u)); }

html.land.compact:not(.in-tut) #scr-battle #bt-overlay .fc-status { font-size: calc(11.5 * var(--u)); }
html.land.compact .toast { font-size: calc(11.5 * var(--u)); }
html.land.compact #scr-hero .hero-intro { font-size: calc(11.5 * var(--u)); }

html.land:not(.in-tut) #scr-battle #bt-overlay .result-inner { max-height: calc(352 * var(--u)); }
html.land:not(.in-tut) #scr-battle #bt-overlay .two-btns { flex: none; }
html.land:not(.in-tut) #scr-battle #bt-overlay.has-reasons #ov-lord { display: none; }
html.land:not(.in-tut) #scr-battle #bt-overlay.has-reasons #ov-title { margin: 0; }
html.land:not(.in-tut) #scr-battle #bt-overlay.has-reasons #ov-hero { --d: calc(44 * var(--u)); --pl-h: calc(19 * var(--u)); --pl-mt: calc(-6 * var(--u)); --pl-fs: calc(12.5 * var(--u)); }
html.land:not(.in-tut) #scr-battle #bt-overlay.has-reasons .result-sub { margin-top: calc(2 * var(--u)); }
html.land:not(.in-tut) #scr-battle #bt-overlay.has-reasons .result-line,
html.land:not(.in-tut) #scr-battle #bt-overlay.has-reasons .result-line:first-child { line-height: calc(15 * var(--u)); }
html.land:not(.in-tut) #scr-battle #bt-overlay.has-reasons .loss-reasons { flex: 0 1 auto; min-height: 0; overflow-y: auto; margin-top: calc(3 * var(--u)); }
html.land:not(.in-tut) #scr-battle #bt-overlay.has-reasons .result-lamps { margin-top: calc(3 * var(--u)); }
html.land:not(.in-tut) #scr-battle #bt-overlay.has-reasons .fc-status { margin-top: calc(3 * var(--u)); }
html.land:not(.in-tut) #scr-battle #bt-overlay.has-reasons .two-btns { margin-top: calc(6 * var(--u)); }
html.land:not(.in-tut) #scr-battle #bt-overlay.has-reasons .result-line:nth-child(2) { display: none; }
html.land.compact:not(.in-tut) #scr-battle #bt-overlay.has-reasons .result-inner { width: calc(440 * var(--u)); }

html.land #scr-start.has-last #start-hint { order: 1; margin: calc(2 * var(--u)) 0 calc(5 * var(--u)); color: #e9cf86; font-size: calc(11 * var(--u)); line-height: 1.3; }
html.land #scr-start.has-last .ring-deco { display: none; }

html.land #scr-start.has-last .brand-sub { display: none; }
html.land #scr-start.has-last .brand { margin-bottom: calc(6 * var(--u)); }
html.land #scr-start.has-last .today-line { margin-bottom: calc(5 * var(--u)); }
html.land #scr-start.has-last .omen-line { margin-bottom: calc(4 * var(--u)); }
html.land #scr-start.has-last .daily-best, html.land #scr-start.has-last .streak-line, html.land #scr-start.has-last #free-best { margin-top: 0; margin-bottom: calc(2 * var(--u)); line-height: 1.25; }
html.land.compact #scr-start .today-tag, html.land.compact #scr-start .today-note, html.land.compact #scr-start .today-date,
html.land.compact #scr-start .deep-chip, html.land.compact #scr-start .daily-best, html.land.compact #scr-start .streak-line,
html.land.compact #scr-start #free-best, html.land.compact #scr-start .omen-next, html.land.compact #scr-start .omen-chip,
html.land.compact #scr-start #start-hint, html.land.compact #scr-start .brand-sub, html.land.compact #scr-start .dex-seal,
html.land.compact #scr-start .fc-count { font-size: calc(11.5 * var(--u)); }

html.land.compact {
--sa-l: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
--sa-r: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
--tbl-side: calc((100 * var(--vw) - 640 * var(--u)) / 2);
--tbl-vside: calc((100 * var(--vh) - 360 * var(--u)) / 2);
--tbl-pl: max(var(--sa-l), min(41px, var(--tbl-side)));
--tbl-pr: max(var(--sa-r), min(41px, var(--tbl-side)));
--tbl-x0: calc(var(--tbl-pl) - var(--tbl-side) + 4 * var(--u));
--tbl-x1: calc(640 * var(--u) + var(--tbl-side) - var(--tbl-pr) - 4 * var(--u));

--tbl-ink: var(--k-ink); --tbl-silk: var(--k-paper); --tbl-wood: var(--k-stone); --tbl-wood-d: var(--k-stone-d); --tbl-brass: var(--k-gold); --tbl-bronze: var(--k-gold-d); --tbl-cinnabar: var(--k-cin);
}

html.land.compact:not(.in-tut) #scr-prep::before,
html.land.compact:not(.in-tut) #scr-battle::before {
left: calc(-1 * var(--tbl-side) - 20px); top: calc(-1 * var(--tbl-vside) - 20px);
width: calc(100 * var(--vw) + 40px); height: calc(100 * var(--vh) + 40px);
z-index: -1; border: 0; border-image: none;
background:
repeating-linear-gradient(176deg, rgba(255,255,255,.035) 0 3px, rgba(0,0,0,.05) 3px 9px),
radial-gradient(ellipse at 50% 40%, #2d5360 0%, var(--tbl-wood) 55%, #183441 100%);
}
html.land.compact:not(.in-tut) #scr-prep::after,
html.land.compact:not(.in-tut) #scr-battle::after {
content: ''; position: absolute; pointer-events: none; z-index: -1;
left: calc(var(--tbl-x0) - 10 * var(--u)); right: calc(640 * var(--u) - var(--tbl-x1) - 10 * var(--u));
top: calc(-1 * var(--tbl-vside) + 6px); height: calc(var(--tbl-vside) + 284 * var(--u));
border-radius: calc(46 * var(--u)) / calc(30 * var(--u));
background:
radial-gradient(ellipse 30% 22% at 14% 30%, rgba(90,120,120,.12), transparent 70%),
radial-gradient(ellipse 34% 24% at 86% 62%, rgba(90,120,120,.12), transparent 70%),
linear-gradient(180deg, #efdfb6, var(--tbl-silk) 60%, #e2cd9c);
box-shadow: 0 0 0 calc(2 * var(--u)) rgba(128,100,58,.85), 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.45);
}

html.land.compact:not(.in-tut) #scr-prep .cpt-left {
left: var(--tbl-x0); top: max(calc(42 * var(--u)), 45px); width: calc(70 * var(--u)); height: auto; gap: calc(6 * var(--u));
}
html.land.compact:not(.in-tut) .cpt-sign { position: relative; width: 100%; font-weight: 700; text-align: center; }

html.land.compact:not(.in-tut) .cpt-sign .cpt-stage { display: block; font-size: max(calc(15 * var(--u)), 15px); color: var(--tbl-ink); letter-spacing: .06em; }
html.land.compact:not(.in-tut) .cpt-sign .cpt-lamps { margin-top: calc(2 * var(--u)); font-size: calc(15 * var(--u)); }
html.land.compact:not(.in-tut) .cpt-omen.cpt-sign { display: flex; align-items: center; gap: calc(4 * var(--u)); height: auto; min-height: 44px; width: 100%; }
html.land.compact:not(.in-tut) .cpt-omen.cpt-sign[hidden] { display: none; }
html.land.compact:not(.in-tut) .cpt-omen.cpt-sign .omen-icon { flex: none; width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
html.land.compact:not(.in-tut) .cpt-sign-txt { flex: 1; font-size: max(calc(11.5 * var(--u)), 12px); line-height: 1.15; color: var(--tbl-ink); text-align: left; }
html.land.compact:not(.in-tut) .cpt-foes.cpt-sign .cpt-face { width: calc(19 * var(--u)); height: calc(19 * var(--u)); border-width: calc(1.5 * var(--u)); }
html.land.compact:not(.in-tut) .cpt-power-h { display: block; margin-top: calc(4 * var(--u)); font-size: max(calc(11.5 * var(--u)), 12px); line-height: 1.15; color: var(--tbl-ink, #3a2a16); }
html.land.compact:not(.in-tut) .cpt-foes.cpt-sign .cpt-power { margin-top: 0; font-size: max(calc(17 * var(--u)), 16px); line-height: 1.1; color: var(--tbl-ink); }
html.land.compact:not(.in-tut) .cpt-bonds.cpt-sign .cpt-dot { opacity: .55; }
html.land.compact:not(.in-tut) .cpt-bonds.cpt-sign .cpt-dot.on { opacity: 1; }
html.land.compact:not(.in-tut) .cpt-dot-el { font-style: normal; font-size: max(calc(11.5 * var(--u)), 12px); line-height: 1.2; color: var(--tbl-ink); }
html.land.compact:not([lang^="zh"]) .cpt-dot-el { display: none; }
html.land.compact:not(.in-tut) .cpt-bonds.cpt-sign .cpt-dot i { width: calc(10 * var(--u)); height: calc(10 * var(--u)); box-shadow: 0 0 0 calc(1 * var(--u)) rgba(58,42,22,.4); }
html.land.compact:not(.in-tut) .cpt-bonds.cpt-sign .cpt-dot b { color: var(--tbl-ink); font-size: max(calc(11.5 * var(--u)), 12px); }

html.land.compact:not(.in-tut) #scr-prep .cpt-top { left: calc(112 * var(--u)); top: calc(2 * var(--u)); transform: none; gap: calc(6 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .cpt-lord { width: calc(46 * var(--u)); height: calc(46 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .cpt-cap { height: 44px; font-size: max(calc(15 * var(--u)), 15px); font-weight: 700; letter-spacing: .04em; }

html.land.compact:not(.in-tut) #scr-prep .prep-top .tb-left { left: calc(452 * var(--u)); top: calc(4 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-top .tb-right { left: calc(498 * var(--u)); top: calc(4 * var(--u)); width: auto; justify-content: flex-start; }
html.land.compact:not(.in-tut) #scr-prep #btn-wuxing { display: none; }
html.land.compact:not(.in-tut) #scr-prep #btn-mute-prep,
html.land.compact:not(.in-tut) #scr-prep #btn-home { width: max(calc(41 * var(--u)), 44px); height: max(calc(41 * var(--u)), 44px); }

html.land.compact:not(.in-tut) #scr-prep .row-shop,
html.land.compact:not(.in-tut) #scr-prep .row-board,
html.land.compact:not(.in-tut) #scr-prep .row-enemy { left: calc(83 * var(--u)); width: calc(474 * var(--u)); gap: calc(6 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .row-board { top: calc(168 * var(--u)); grid-template-columns: repeat(6, calc(74 * var(--u))); }
html.land.compact:not(.in-tut) #scr-prep .row-shop { top: calc(58 * var(--u)); grid-template-columns: repeat(4, calc(74 * var(--u))); gap: calc(12 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .row-shop[data-n="5"] { grid-template-columns: repeat(5, calc(74 * var(--u))); gap: calc(8 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .row-enemy { top: calc(58 * var(--u)); grid-template-columns: repeat(6, calc(74 * var(--u))); }
html.land.compact:not(.in-tut) #scr-prep .row-board .slot, html.land.compact:not(.in-tut) #scr-prep .row-board .card,
html.land.compact:not(.in-tut) #scr-prep .row-shop .slot, html.land.compact:not(.in-tut) #scr-prep .row-shop .card,
html.land.compact:not(.in-tut) #scr-prep.has-bench .row-shop .slot, html.land.compact:not(.in-tut) #scr-prep.has-bench .row-shop .card,
html.land.compact:not(.in-tut) #scr-prep .row-enemy .slot, html.land.compact:not(.in-tut) #scr-prep .row-enemy .card { height: calc(100 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep .kw-badge, html.land.compact:not(.in-tut) #scr-battle .kw-badge { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep .prep-dock #tb-gold,
html.land.compact:not(.in-tut) #scr-prep:not(.has-hero) .prep-dock #tb-gold {
left: calc(var(--tbl-x1) - 66 * var(--u)); top: calc(62 * var(--u)); width: calc(66 * var(--u)); height: calc(44 * var(--u));
display: flex; align-items: center; justify-content: center; gap: calc(3 * var(--u));
font-size: max(calc(20 * var(--u)), 18px); font-weight: 700; line-height: 1;
}
html.land.compact:not(.in-tut) #scr-prep .p-shop #btn-reroll { left: calc(var(--tbl-x1) - 66 * var(--u)); top: calc(124 * var(--u)); width: calc(66 * var(--u)); height: max(calc(38 * var(--u)), 44px); font-size: max(calc(13 * var(--u)), 13px); font-weight: 700; white-space: normal; line-height: 1.1; }

html.land.compact:not(.in-tut) #scr-prep .prep-dock #btn-sell { display: none; }
html.land.compact:not(.in-tut) #scr-prep .prep-dock #btn-fight { left: calc(var(--tbl-x1) - 66 * var(--u)); top: calc(206 * var(--u)); width: calc(66 * var(--u)); height: calc(66 * var(--u)); font-size: max(calc(22 * var(--u)), 20px); font-weight: 900; letter-spacing: .08em; }
html.land.compact:not([lang^="zh"]):not(.in-tut) #scr-prep .prep-dock #btn-fight { font-size: max(calc(16 * var(--u)), 16px); letter-spacing: 0; }

html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-block { left: calc(273 * var(--u)); top: calc(276 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-face { width: calc(54 * var(--u)); height: calc(54 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-block > .hero-plate { font-size: max(calc(11.5 * var(--u)), 12px); --np-h: calc(19 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .relic-slot { top: calc(284 * var(--u)); width: max(calc(41 * var(--u)), 44px); height: max(calc(41 * var(--u)), 44px); overflow: visible; }
html.land.compact:not(.in-tut) #scr-prep .prep-dock #relic-slot-0 { left: calc(226 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock #relic-slot-1 { left: calc(333 * var(--u)); }

html.land.compact:not(.in-tut) .relic-cap {
display: block; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
font-size: max(calc(11.5 * var(--u)), 12px); line-height: 1.2; font-weight: 700;
}
html.land.compact:not(.in-tut) #scr-prep .prep-dock .prep-hero { left: calc(384 * var(--u)); top: calc(286 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-passive,
html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-charge { font-size: max(calc(11.5 * var(--u)), 12px); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-charge { color: var(--tbl-silk); text-shadow: 0 1px 2px rgba(0,0,0,.9); }

html.land.compact:not(.in-tut) #scr-prep .cpt-cap { max-width: calc(117 * var(--u)); white-space: nowrap; overflow: hidden; text-align: left; }
html.land.compact:not(.in-tut) .relic-cap { max-width: calc(62 * var(--u)); overflow: hidden; text-overflow: ellipsis; }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-skill { min-width: 44px; min-height: 44px; }
html.land.compact:not(.in-tut) .cpt-bonds.cpt-sign { min-height: 44px; }

html.land.compact:not(.in-tut) .cpt-cap { white-space: nowrap; overflow: hidden; text-overflow: clip; }
html.land.compact:not([lang^="zh"]):not(.in-tut) #scr-prep .cpt-cap { font-size: max(calc(14 * var(--u)), 14px); }

html.land.compact:not(.in-tut) #scr-battle .cpt-left { left: var(--tbl-x0); top: max(calc(42 * var(--u)), 45px); width: calc(70 * var(--u)); height: auto; gap: calc(6 * var(--u)); }

html.land.compact:not(.in-tut) #scr-battle .bt-top .lord-face { left: calc(112 * var(--u)); top: calc(2 * var(--u)); width: calc(46 * var(--u)); height: calc(46 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle .cpt-bt-cap { display: block; position: absolute; left: calc(164 * var(--u)); top: calc(2 * var(--u)); max-width: calc(117 * var(--u)); height: 44px; line-height: 44px; z-index: 6; font-size: max(calc(15 * var(--u)), 15px); font-weight: 700; letter-spacing: .04em; pointer-events: none; }
html.land.compact:not([lang^="zh"]):not(.in-tut) #scr-battle .cpt-bt-cap { font-size: max(calc(14 * var(--u)), 14px); letter-spacing: 0; }
html.land.compact:not(.in-tut) #scr-battle .cpt-bt-title {
display: block; position: absolute; left: calc(320 * var(--u)); top: calc(16 * var(--u)); transform: translateX(-50%); z-index: 6; pointer-events: none;
padding: 0 calc(26 * var(--u)); color: #5a4428; font-size: max(calc(15 * var(--u)), 15px); font-weight: 700; letter-spacing: .3em; white-space: nowrap;
background: linear-gradient(90deg, transparent, rgba(90,68,40,.6) 18%, transparent 19%, transparent 81%, rgba(90,68,40,.6) 82%, transparent) center / 100% 1px no-repeat;
}

html.land.compact:not(.in-tut) #scr-battle:not(.tutorial-demo) .arena { left: calc(83 * var(--u)); top: calc(52 * var(--u)); width: calc(474 * var(--u)); height: calc(216 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle .row-bt { grid-template-columns: repeat(6, calc(74 * var(--u))); gap: calc(6 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle:not(.tutorial-demo) .row-bt .slot { height: calc(96 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle .clash-line { height: calc(20 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle .clash-cloud { display: none; }
html.land.compact:not(.in-tut) #scr-battle #bt-banner { line-height: calc(20 * var(--u)); font-size: max(calc(12.5 * var(--u)), 12px); font-weight: 700; }

html.land.compact:not(.in-tut) #scr-battle .bt-top .tb-right { left: 0; top: 0; width: 0; height: 0; display: block; }
html.land.compact:not(.in-tut) #scr-battle .bt-top .tb-right .bt-ctl,
html.land.compact:not(.in-tut) #scr-battle .bt-top .tb-right .pause-btn { position: absolute; left: calc(var(--tbl-x1) - 66 * var(--u)); width: calc(66 * var(--u)); height: max(calc(40 * var(--u)), 44px); margin: 0; font-size: max(calc(14 * var(--u)), 14px); font-weight: 700; }
html.land.compact:not(.in-tut) #scr-battle .bt-top #btn-speed { top: calc(62 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle .bt-top #btn-skip { top: calc(110 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle .bt-top #btn-cpt-log { top: calc(158 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle .bt-top #btn-pause { top: calc(206 * var(--u)); height: calc(66 * var(--u)); }

html.land.compact:not(.in-tut) #scr-battle .bt-dock,
html.land.compact:not(.in-tut) #scr-battle .bt-dock[hidden] { left: 0; top: 0; width: calc(640 * var(--u)); height: 0; padding: 0; margin: 0; }
html.land.compact:not(.in-tut) #scr-battle .bt-dock .hero-block { position: absolute; left: calc(273 * var(--u)); top: calc(276 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle .bt-dock .hero-face { width: calc(54 * var(--u)); height: calc(54 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle .bt-dock .hero-block > .hero-plate { font-size: max(calc(11.5 * var(--u)), 12px); }
html.land.compact:not(.in-tut) #scr-battle .bt-dock .bt-skill { position: absolute; left: calc(384 * var(--u)); top: calc(286 * var(--u)); }
html.land.compact:not(.in-tut) .cpt-bt-relics { display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; }
html.land.compact:not(.in-tut) .cpt-bt-relics[hidden] { display: none; }
html.land.compact:not(.in-tut) .cpt-bt-relic { position: absolute; top: calc(284 * var(--u)); width: max(calc(41 * var(--u)), 44px); height: max(calc(41 * var(--u)), 44px); overflow: visible; }
html.land.compact:not(.in-tut) #cpt-bt-relic-0 { left: calc(226 * var(--u)); }
html.land.compact:not(.in-tut) #cpt-bt-relic-1 { left: calc(333 * var(--u)); }
html.land.compact:not(.in-tut) .cpt-bt-relic .relic-icon { width: 100%; height: 100%; }

html.land.compact:not(.in-tut) #scr-prep .cpt-cap { max-width: calc(130 * var(--u)); letter-spacing: .02em; }
html.land.compact:not(.in-tut) #scr-battle .cpt-bt-title { left: calc(340 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle .cpt-bt-cap { max-width: calc(130 * var(--u)); letter-spacing: .02em; }

html.land .bub.side-l { transform: translate(-100%, -50%); }
html.land .bub.side-l::after { left: auto; right: -8px; top: 50%; bottom: auto; margin: -5px 0 0; border: 1px solid rgba(217,180,90,.55); border-left: 0; border-bottom: 0; }

html.land.compact .confirm-card { width: calc(330 * var(--u)); }
html.land.compact .confirm-card .confirm-msg { color: var(--tbl-ink); font-size: max(calc(14 * var(--u)), 14px); line-height: 1.5; font-weight: 700; text-shadow: none; }
html.land.compact .confirm-card .confirm-btns { gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); }

html.land.compact:not(.in-tut) #bt-overlay .result-line, html.land.compact:not(.in-tut) #bt-overlay .result-sub,
html.land.compact:not(.in-tut) #bt-overlay .fc-status { color: var(--tbl-ink); text-shadow: none; }
html.land.compact:not(.in-tut) #bt-overlay .loss-reasons { background: rgba(128,100,58,.10); border: 0; border-radius: calc(4 * var(--u)); box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(128,100,58,.35); }
html.land.compact:not(.in-tut) #bt-overlay .lr-head { color: var(--tbl-cinnabar); }
html.land.compact:not(.in-tut) #bt-overlay .lr-row { color: var(--tbl-ink); }
html.land.compact:not(.in-tut) #bt-overlay .lr-next { color: #5a4428; }
html.land.compact:not(.in-tut) #bt-overlay .two-btns { gap: calc(10 * var(--u)); }

html.land.compact:not(.in-tut) #scr-battle.cpt-log .land-log .land-h,
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .land-h { color: var(--tbl-ink); }
html.land.compact:not(.in-tut) #scr-battle.cpt-log .land-log-list,
html.land.compact:not(.in-tut) #scr-battle.cpt-log .land-log-list *:not([class*="el-"]):not(.log-tag) { color: var(--tbl-ink); }
html.land.compact:not(.in-tut) #scr-battle.cpt-log .land-log-list > * { border-color: rgba(128,100,58,.25); }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right,
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right *,
html.land.compact:not(.in-tut) #land-bt-detail, html.land.compact:not(.in-tut) #land-bt-detail * { color: var(--tbl-ink); text-shadow: none; }

html.land.compact #scr-hero:not([hidden]) {
left: calc(50% - 290 * var(--u)); top: calc(50% - 168 * var(--u)); width: calc(580 * var(--u)); height: calc(336 * var(--u)); overflow: visible; }
html.land.compact #scr-hero::before {
content: ''; position: absolute; z-index: -1; pointer-events: none;
left: calc(290 * var(--u) - 50 * var(--vw) - 20px); top: calc(168 * var(--u) - 50 * var(--vh) - 20px);
width: calc(100 * var(--vw) + 40px); height: calc(100 * var(--vh) + 40px); }

html.land.compact #scr-hero .hero-intro { color: #5a4428; text-shadow: none; }

html.land.compact #scr-hero .hero-offers[data-n="4"] { grid-template-columns: repeat(4, calc(128 * var(--u))); gap: calc(8 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .land-panel, html.land.compact:not(.in-tut) #land-bt-detail .land-panel { background: none; border-color: transparent; box-shadow: none; }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-skill-row.on,
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right [class*="ld-"].on, html.land.compact:not(.in-tut) #land-bt-detail [class*="ld-"].on { background: rgba(128,100,58,.14); }

html.land.compact:not(.in-tut) #land-bt-detail .land-detail.is-enemy { border: calc(2 * var(--u)) solid var(--tbl-cinnabar); border-radius: calc(4 * var(--u)); }
html.land.compact:not(.in-tut) #land-bt-detail .ld-tag { color: #fffaf0; background: var(--tbl-cinnabar); }
html.land.compact:not(.in-tut) #land-bt-detail .ld-tag-ally { background: #2e6f46; }
html.land.compact:not(.in-tut) #scr-battle .bt-paused-hint { font-size: max(calc(11.5 * var(--u)), 12px); }

html.land.compact:not(.in-tut) #bt-overlay #ov-hero-name, html.land.compact:not(.in-tut) #bt-overlay #ov-lord-name { font-size: max(calc(11.5 * var(--u)), 12px) !important; }
html.land.compact #tip-bub { font-size: max(calc(11 * var(--u)), 12px); }

html.land.compact.host-xhs .card-name, html.land.compact.host-xhs .card-cost, html.land.compact.host-xhs .mk-star,
html.land.compact.host-xhs .mk-counter, html.land.compact.host-xhs .mk-merge, html.land.compact.host-xhs .slot-idx, html.land.compact.host-xhs .gift-tag,
html.land.compact.host-xhs .relic-kind, html.land.compact.host-xhs .relic-desc, html.land.compact.host-xhs .hero-intro,
html.land.compact.host-xhs .lr-head, html.land.compact.host-xhs .lr-next, html.land.compact.host-xhs .lr-text, html.land.compact.host-xhs .lr-ico,
html.land.compact.host-xhs .fc-status-txt { font-size: max(calc(11.5 * var(--u)), 12px) !important; }
html.land.compact.host-xhs .result-line { font-size: max(calc(12 * var(--u)), 12px) !important; }
html.land.compact.host-xhs:not(.in-tut) #scr-prep .cpt-lord, html.land.compact.host-xhs:not(.in-tut) #scr-battle .bt-top .lord-face { width: max(calc(46 * var(--u)), 44px); height: max(calc(46 * var(--u)), 44px); }
html.land.compact.host-xhs .cost-old, html.land.compact.host-xhs .card-shield { font-size: max(calc(11.5 * var(--u)), 12px) !important; }
html.land.compact.host-xhs .slot > .float { font-size: max(calc(13 * var(--u)), 12px) !important; }

html.land.compact:not(.in-tut) #scr-prep::after,
html.land.compact:not(.in-tut) #scr-battle::after { content: none; }

html.land { --img-pouch: url("../assets/ui/tbl_pouch.webp"); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock #tb-gold::before { background: var(--img-pouch) center / contain no-repeat; }

html.land.compact .st-poison-n { font-size: max(calc(10 * var(--u)), 12px); }

html.land.compact:not(.in-tut) .relic-cap { text-overflow: clip; }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-passive { display: block; max-width: calc(110 * var(--u)); overflow: hidden; white-space: nowrap; }
html.land.compact:not(.in-tut) .relic-cap.cap-off, html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-passive.cap-off { visibility: hidden; }

html.land.compact:not(.in-tut) #scr-prep::before,
html.land.compact:not(.in-tut) #scr-battle::before {
left: calc(-1 * var(--tbl-side)); top: calc(-1 * var(--tbl-vside)); width: calc(100 * var(--vw)); height: calc(100 * var(--vh));
}
html.land.compact #scr-hero::before {
left: calc(290 * var(--u) - 50 * var(--vw)); top: calc(168 * var(--u) - 50 * var(--vh)); width: calc(100 * var(--vw)); height: calc(100 * var(--vh));
}
html.land.compact #app { overflow: clip; }

html.land.compact {
--tbl-tl: max(var(--tbl-x0), calc(66px - var(--tbl-side)));
--tbl-cc: calc((var(--tbl-x0) + var(--tbl-x1) - 72 * var(--u)) / 2);
}
html.land.compact:not(.in-tut) #scr-prep .cpt-left { display: contents; }
html.land.compact:not(.in-tut) #scr-prep .cpt-stagebox { display: contents; }
html.land.compact:not(.in-tut) #scr-prep .cpt-stagebox .cpt-stage,
html.land.compact:not(.in-tut) #scr-prep .cpt-foes { display: none; }

html.land.compact:not(.in-tut) #scr-prep .cpt-top { left: var(--tbl-tl); gap: calc(4 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .cpt-cap { max-width: calc(128 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .cpt-top .cpt-omen.cpt-sign { display: flex; align-items: center; justify-content: center; position: static; flex: none; width: max(calc(41 * var(--u)), 44px); height: max(calc(41 * var(--u)), 44px); min-height: 0; }
html.land.compact:not(.in-tut) #scr-prep .cpt-top .cpt-omen.cpt-sign[hidden] { display: none; }
html.land.compact:not(.in-tut) #scr-prep .cpt-top .cpt-omen .omen-icon { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .cpt-top .cpt-omen .cpt-sign-txt { display: none; }
html.land.compact:not(.in-tut) #scr-prep .cpt-wx { display: flex; align-items: center; justify-content: center; flex: none; cursor: pointer; width: max(calc(41 * var(--u)), 44px); height: max(calc(41 * var(--u)), 44px); }
html.land.compact:not(.in-tut) #scr-prep .cpt-wx .ring-btn-dots { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep .prep-top .tb-left { left: calc(486 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-top .tb-right { left: calc(530 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep .row-shop,
html.land.compact:not(.in-tut) #scr-prep .row-board,
html.land.compact:not(.in-tut) #scr-prep .row-enemy { left: calc(var(--tbl-cc) - 270 * var(--u)); width: calc(540 * var(--u)); gap: calc(6 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .row-board { top: calc(179 * var(--u)); grid-template-columns: repeat(6, calc(85 * var(--u))); }
html.land.compact:not(.in-tut) #scr-prep .row-enemy { top: calc(58 * var(--u)); grid-template-columns: repeat(6, calc(85 * var(--u))); }
html.land.compact:not(.in-tut) #scr-prep .row-shop,
html.land.compact:not(.in-tut) #scr-prep .row-shop[data-n="4"] { top: calc(58 * var(--u)); grid-template-columns: repeat(4, calc(85 * var(--u))); gap: calc(6 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .row-shop[data-n="3"] { grid-template-columns: repeat(3, calc(85 * var(--u))); }
html.land.compact:not(.in-tut) #scr-prep .row-shop[data-n="5"] { grid-template-columns: repeat(5, calc(85 * var(--u))); gap: calc(6 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .row-shop[data-n="6"] { grid-template-columns: repeat(6, calc(85 * var(--u))); }
html.land.compact:not(.in-tut) #scr-prep .row-board .slot, html.land.compact:not(.in-tut) #scr-prep .row-board .card,
html.land.compact:not(.in-tut) #scr-prep .row-shop .slot, html.land.compact:not(.in-tut) #scr-prep .row-shop .card,
html.land.compact:not(.in-tut) #scr-prep.has-bench .row-shop .slot, html.land.compact:not(.in-tut) #scr-prep.has-bench .row-shop .card,
html.land.compact:not(.in-tut) #scr-prep .row-enemy .slot, html.land.compact:not(.in-tut) #scr-prep .row-enemy .card { height: calc(115 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep .p-shop #btn-reroll { top: calc(112 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock #btn-sell { display: none; }
html.land.compact:not(.in-tut) #scr-prep .prep-dock #btn-sell:not(:disabled) { display: block; position: absolute; left: calc(var(--tbl-x1) - 66 * var(--u)); top: calc(158 * var(--u)); width: calc(66 * var(--u)); height: max(calc(40 * var(--u)), 44px); margin: 0; order: 0; font-size: max(calc(13 * var(--u)), 13px); font-weight: 700; line-height: 1.1; white-space: normal; --btn-pad: 0px; --btn-lift: 0px; --btn-press: 0px; }

html.land.compact:not(.in-tut) #scr-prep .prep-dock #btn-fight { top: calc(210 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-block { left: calc(var(--tbl-cc) - 27 * var(--u)); top: calc(298 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .relic-slot { top: calc(304 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock #relic-slot-0 { left: calc(var(--tbl-cc) - 76 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock #relic-slot-1 { left: calc(var(--tbl-cc) + 35 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .prep-hero { left: calc(var(--tbl-cc) + 84 * var(--u)); top: calc(306 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep #cpt-lamps {
display: flex; flex-direction: column; gap: calc(1 * var(--u)); position: absolute; z-index: 6; margin: 0;
left: calc(var(--tbl-cc) + 22 * var(--u)); top: calc(296 * var(--u)); font-size: max(calc(12 * var(--u)), 12px);
filter: drop-shadow(0 1px 2px rgba(0,0,0,.8));
}
html.land.compact:not(.in-tut) #scr-prep .cpt-bonds.cpt-sign { position: absolute; left: var(--tbl-x0); top: calc(306 * var(--u)); width: auto; min-height: 44px; height: auto; z-index: 5; }
html.land.compact:not(.in-tut) #scr-prep .cpt-bonds .cpt-dots { display: flex; gap: calc(7 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep .cpt-lampout {
display: block; position: absolute; z-index: 70; pointer-events: none;
left: calc(var(--tbl-cc) - 30 * var(--u)); top: calc(120 * var(--u)); font-size: calc(60 * var(--u));
filter: drop-shadow(0 0 calc(14 * var(--u)) rgba(255,190,90,.6)); animation: cptLampOut .9s ease-in forwards;
}

html.land.compact:not(.in-tut) #scr-prep #cpt-lamps { left: calc(var(--tbl-cc) + 29 * var(--u)); top: calc(300 * var(--u)); z-index: 12; }
html.land.compact:not(.in-tut) #scr-prep .cpt-cap { height: auto; min-height: 0; line-height: 1.2; }
html.land.compact:not(.in-tut) #scr-prep .row-shop,
html.land.compact:not(.in-tut) #scr-prep .row-board,
html.land.compact:not(.in-tut) #scr-prep .row-enemy { left: calc(var(--tbl-cc) - 276 * var(--u)); width: calc(552 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .row-board, html.land.compact:not(.in-tut) #scr-prep .row-enemy,
html.land.compact:not(.in-tut) #scr-prep .row-shop[data-n="6"] { grid-template-columns: repeat(6, calc(87 * var(--u))); }
html.land.compact:not(.in-tut) #scr-prep .row-shop, html.land.compact:not(.in-tut) #scr-prep .row-shop[data-n="4"] { grid-template-columns: repeat(4, calc(87 * var(--u))); }
html.land.compact:not(.in-tut) #scr-prep .row-shop[data-n="3"] { grid-template-columns: repeat(3, calc(87 * var(--u))); }
html.land.compact:not(.in-tut) #scr-prep .row-shop[data-n="5"] { grid-template-columns: repeat(5, calc(87 * var(--u))); }

html.land.compact:not(.in-tut) #scr-prep .cpt-cap { max-width: calc(348 * var(--u) - var(--tbl-tl) - 150 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .cpt-cap { letter-spacing: 0; }

html.land.compact:not(.in-tut) #scr-prep .prep-top .tb-left { left: calc(490 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-top .tb-right { left: calc(534 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .cpt-cap { max-width: calc(364 * var(--u) - var(--tbl-tl) - 150 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep .cpt-cap { pointer-events: none; }

html.land.compact { --tbl-tl: max(var(--tbl-x0), calc(68px - var(--tbl-side))); }

html.land.compact:not(.in-tut) #scr-battle #cpt-bt-left { display: none !important; }
html.land.compact:not(.in-tut) #scr-battle .bt-top .lord-face { left: var(--tbl-tl); top: calc(2 * var(--u)); }
html.land.compact:not(.in-tut) .cpt-bt-capwrap {
display: flex; align-items: center; gap: calc(4 * var(--u)); position: absolute; z-index: 6;
left: calc(var(--tbl-tl) + 50 * var(--u)); top: calc(2 * var(--u)); height: max(calc(46 * var(--u)), 44px);
}
html.land.compact:not(.in-tut) #scr-battle .cpt-bt-capwrap .cpt-bt-cap { position: static; display: block; height: auto; line-height: 1.2; max-width: calc(290 * var(--u) - var(--tbl-tl) - 96 * var(--u)); letter-spacing: 0; white-space: nowrap; overflow: hidden; }
html.land.compact:not(.in-tut) .cpt-bt-capwrap .cpt-bt-omen {
display: flex; align-items: center; justify-content: center; flex: none; padding: 0; border: 0; background: none;
width: max(calc(41 * var(--u)), 44px); height: max(calc(41 * var(--u)), 44px);
}
html.land.compact:not(.in-tut) .cpt-bt-capwrap .cpt-bt-omen[hidden] { display: none; }
html.land.compact:not(.in-tut) .cpt-bt-capwrap .cpt-bt-omen .omen-icon { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }

html.land.compact:not(.in-tut) #scr-battle .cpt-bt-title { left: calc(340 * var(--u)); top: calc(14 * var(--u)); }
html.land.compact:not(.in-tut) .cpt-bt-edots {
display: flex; gap: calc(6 * var(--u)); position: absolute; z-index: 6; left: calc(400 * var(--u)); top: calc(14 * var(--u)); pointer-events: none;
}
html.land.compact:not(.in-tut) .cpt-bt-edots .cpt-dot { flex-direction: row; gap: calc(2 * var(--u)); }
html.land.compact:not(.in-tut) .cpt-bt-edots .cpt-dot-el { display: none; }
html.land.compact:not(.in-tut) .cpt-bt-edots .cpt-dot i { width: calc(10 * var(--u)); height: calc(10 * var(--u)); box-shadow: 0 0 0 calc(1 * var(--u)) rgba(58,42,22,.4); }
html.land.compact:not(.in-tut) .cpt-bt-edots .cpt-dot b { color: var(--tbl-ink); font-size: max(calc(12 * var(--u)), 12px); }

html.land.compact:not(.in-tut) #scr-battle:not(.tutorial-demo) .arena { left: calc(var(--tbl-cc) - 276 * var(--u)); top: calc(49 * var(--u)); width: calc(552 * var(--u)); height: calc(246 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle .row-bt { grid-template-columns: repeat(6, calc(87 * var(--u))); }
html.land.compact:not(.in-tut) #scr-battle:not(.tutorial-demo) .row-bt .slot { height: calc(112 * var(--u)); }

html.land.compact:not(.in-tut) .cpt-bt-pdots { display: block; position: absolute; z-index: 5; left: var(--tbl-x0); top: calc(306 * var(--u)); width: auto; min-height: 44px; pointer-events: none; }
html.land.compact:not(.in-tut) .cpt-bt-pdots .cpt-dots { display: flex; gap: calc(7 * var(--u)); }
html.land.compact:not(.in-tut) .cpt-bt-pdots .cpt-dot { opacity: .55; }
html.land.compact:not(.in-tut) .cpt-bt-pdots .cpt-dot.on { opacity: 1; }
html.land.compact:not(.in-tut) .cpt-bt-pdots .cpt-dot i { width: calc(10 * var(--u)); height: calc(10 * var(--u)); box-shadow: 0 0 0 calc(1 * var(--u)) rgba(58,42,22,.4); }
html.land.compact:not(.in-tut) .cpt-bt-pdots .cpt-dot b { color: var(--tbl-ink); font-size: max(calc(11.5 * var(--u)), 12px); }
html.land.compact:not(.in-tut) #scr-battle .bt-dock .hero-block { left: calc(var(--tbl-cc) - 27 * var(--u)); top: calc(298 * var(--u)); }
html.land.compact:not(.in-tut) .cpt-bt-relic { top: calc(304 * var(--u)); }
html.land.compact:not(.in-tut) #cpt-bt-relic-0 { left: calc(var(--tbl-cc) - 76 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep #cpt-lamps,
html.land.compact:not(.in-tut) .cpt-bt-lamps {
display: flex; flex-direction: column; gap: calc(1 * var(--u)); position: absolute; z-index: 12; margin: 0;
left: calc(var(--tbl-cc) + 29 * var(--u)); top: calc(297 * var(--u)); font-size: calc(14 * var(--u));
filter: drop-shadow(0 1px 2px rgba(0,0,0,.85));
}
html.land.compact:not(.in-tut) #scr-prep .prep-dock #relic-slot-1, html.land.compact:not(.in-tut) #cpt-bt-relic-1 { left: calc(var(--tbl-cc) + 50 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .prep-hero, html.land.compact:not(.in-tut) #scr-battle .bt-dock .bt-skill { left: calc(var(--tbl-cc) + 98 * var(--u)); top: calc(306 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep #cpt-lamps,
html.land.compact:not(.in-tut) .cpt-bt-lamps {
top: calc(291 * var(--u)); font-size: calc(17 * var(--u)); gap: 0; padding: calc(2 * var(--u)) calc(1 * var(--u));
border-radius: calc(3 * var(--u)); background: var(--k-ink);
}

html.land.compact:not(.in-tut) #scr-battle .cpt-bt-title { left: calc(360 * var(--u)); }
html.land.compact:not(.in-tut) .cpt-bt-edots { left: calc(420 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle .cpt-bt-capwrap .cpt-bt-cap { max-width: calc(310 * var(--u) - var(--tbl-tl) - 96 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep #cpt-lamps, html.land.compact:not(.in-tut) .cpt-bt-lamps { top: calc(294 * var(--u)); font-size: calc(16 * var(--u)); }

html.land.compact:not(.in-tut) #scr-battle.cpt-log .land-log,
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right, html.land.compact:not(.in-tut) #land-bt-detail { background: var(--tbl-silk); background-clip: content-box; }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right {
left: calc(var(--tbl-cc) - 210 * var(--u)); top: calc(46 * var(--u)); width: calc(420 * var(--u)); height: calc(250 * var(--u));
padding: calc(14 * var(--u)) calc(16 * var(--u)); overflow: hidden; z-index: 60;
}
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right #land-detail {
display: grid; grid-template-columns: calc(118 * var(--u)) minmax(0, 1fr); column-gap: calc(12 * var(--u)); row-gap: calc(3 * var(--u));
align-content: start; height: 100%; padding: 0; overflow-y: auto; background: none; border: 0; box-shadow: none;
}
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right #land-detail > * { grid-column: 2; margin: 0; }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-art {
grid-column: 1; grid-row: 1 / span 12; width: 100%; height: calc(214 * var(--u)); padding: 0;
background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
}
html.land.compact:not(.in-tut) #land-bt-detail .ld-art { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; padding: 0; }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-art-img, html.land.compact:not(.in-tut) #land-bt-detail .ld-art-img {
width: 100%; height: 100%; object-fit: contain; object-position: 50% 30%; border: 0; border-radius: 0; box-shadow: none;
filter: drop-shadow(0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(58,42,22,.35));
}
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-tag { display: none; }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-name-main { font-size: max(calc(17 * var(--u)), 17px); }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-meta,
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-rel-line,
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-skill,
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .tier-txt,
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .tier-star,
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-kws-title,
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-kw-name,
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-kw-desc,
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-lore { font-size: max(calc(11.5 * var(--u)), 12px); line-height: 1.35; }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-stats { font-size: max(calc(15 * var(--u)), 15px); }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .tier-txt { white-space: normal; }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .skill-tier { height: auto; min-height: 0; padding: calc(1 * var(--u)) calc(3 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .skill-tier.on, html.land.compact:not(.in-tut) #land-bt-detail .skill-tier.on { background: rgba(201,162,74,.28); border-radius: calc(3 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right #land-detail > .ld-art { grid-column: 1; grid-row: 1 / span 12; align-self: start; }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right #land-detail > .ld-art .ld-art-img, html.land.compact:not(.in-tut) #land-bt-detail .land-detail > .ld-art .ld-art-img {
-webkit-mask-image: radial-gradient(ellipse 62% 66% at 50% 46%, #000 55%, transparent 100%);
mask-image: radial-gradient(ellipse 62% 66% at 50% 46%, #000 55%, transparent 100%); filter: none;
}

html.land.compact:not(.in-tut) #scr-battle.cpt-log .land-log,
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right,
html.land.compact:not(.in-tut) #land-bt-detail,
html.land.compact:not(.in-tut) .cpt-sign,
html.land.compact:not(.in-tut) #scr-prep .cpt-cap,
html.land.compact:not(.in-tut) #scr-battle .cpt-bt-capwrap .cpt-bt-cap  { border-style: solid; border-color: transparent; border-width: 0; }

html.land.compact { --tbl-x1: calc(640 * var(--u) + var(--tbl-side) - var(--tbl-pr) - 7 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-block,
html.land.compact:not(.in-tut) #scr-battle .bt-dock .hero-block { left: calc(var(--tbl-cc) - 24 * var(--u)); top: calc(296 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-face,
html.land.compact:not(.in-tut) #scr-battle .bt-dock .hero-face { width: calc(48 * var(--u)); height: calc(48 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .relic-slot, html.land.compact:not(.in-tut) .cpt-bt-relic { top: calc(299 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .prep-hero, html.land.compact:not(.in-tut) #scr-battle .bt-dock .bt-skill { top: calc(300 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep #cpt-lamps, html.land.compact:not(.in-tut) .cpt-bt-lamps { left: calc(var(--tbl-cc) + 26 * var(--u)); top: calc(294 * var(--u)); font-size: calc(15 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .cpt-bonds.cpt-sign, html.land.compact:not(.in-tut) .cpt-bt-pdots { top: calc(302 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep .row-shop, html.land.compact:not(.in-tut) #scr-prep .row-enemy { z-index: 4; }
html.land.compact:not(.in-tut) #scr-prep .row-board { z-index: 2; }
html.land.compact:not(.in-tut) #scr-battle .arena > .field-side:first-child { position: relative; z-index: 3; }
html.land.compact:not(.in-tut) #scr-battle .arena > .field-side:last-of-type { position: relative; z-index: 2; }
html.land.compact.host-xhs:not(.in-tut) #scr-prep .prep-dock .hero-face, html.land.compact.host-xhs:not(.in-tut) #scr-battle .bt-dock .hero-face { width: max(calc(48 * var(--u)), 44px); height: max(calc(48 * var(--u)), 44px); }

html.land.compact:not(.in-tut) #scr-prep::before,
html.land.compact:not(.in-tut) #scr-battle::before,
html.land.compact:not(.in-tut) #scr-settle::before,
html.land.compact:not(.in-tut) #scr-final::before { background: #264550 url("../assets/ui/tbl_table.webp") center / 100% 100% no-repeat; }

html.land.compact { --tbl-x1: calc(640 * var(--u) + var(--tbl-side) - var(--tbl-pr) - 12 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep .row-shop, html.land.compact:not(.in-tut) #scr-prep .row-enemy { top: calc(56 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .row-board { top: calc(173 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .row-board .slot, html.land.compact:not(.in-tut) #scr-prep .row-board .card,
html.land.compact:not(.in-tut) #scr-prep .row-shop .slot, html.land.compact:not(.in-tut) #scr-prep .row-shop .card,
html.land.compact:not(.in-tut) #scr-prep.has-bench .row-shop .slot, html.land.compact:not(.in-tut) #scr-prep.has-bench .row-shop .card,
html.land.compact:not(.in-tut) #scr-prep .row-enemy .slot, html.land.compact:not(.in-tut) #scr-prep .row-enemy .card { height: calc(112 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle:not(.tutorial-demo) .arena { top: calc(48 * var(--u)); height: calc(238 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle:not(.tutorial-demo) .row-bt .slot { height: calc(108 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-block,
html.land.compact:not(.in-tut) #scr-battle .bt-dock .hero-block { top: calc(289 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .relic-slot, html.land.compact:not(.in-tut) .cpt-bt-relic { top: calc(292 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .prep-hero, html.land.compact:not(.in-tut) #scr-battle .bt-dock .bt-skill { top: calc(293 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep #cpt-lamps, html.land.compact:not(.in-tut) .cpt-bt-lamps { top: calc(287 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .cpt-bonds.cpt-sign, html.land.compact:not(.in-tut) .cpt-bt-pdots { top: calc(295 * var(--u)); }

html.land.compact {
--tbl-x0: calc(var(--tbl-pl) - var(--tbl-side) + 14 * var(--u));
--tbl-x1: calc(640 * var(--u) + var(--tbl-side) - var(--tbl-pr) - 14 * var(--u));
--tbl-cw: min(calc(87 * var(--u)), calc((var(--tbl-x1) - var(--tbl-x0) - 102 * var(--u)) / 6));
}
html.land.compact:not(.in-tut) #scr-prep .row-shop,
html.land.compact:not(.in-tut) #scr-prep .row-board,
html.land.compact:not(.in-tut) #scr-prep .row-enemy { left: calc(var(--tbl-cc) - 3 * var(--tbl-cw) - 15 * var(--u)); width: calc(6 * var(--tbl-cw) + 30 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .row-board, html.land.compact:not(.in-tut) #scr-prep .row-enemy,
html.land.compact:not(.in-tut) #scr-prep .row-shop[data-n="6"] { grid-template-columns: repeat(6, var(--tbl-cw)); }
html.land.compact:not(.in-tut) #scr-prep .row-shop, html.land.compact:not(.in-tut) #scr-prep .row-shop[data-n="4"] { grid-template-columns: repeat(4, var(--tbl-cw)); }
html.land.compact:not(.in-tut) #scr-prep .row-shop[data-n="3"] { grid-template-columns: repeat(3, var(--tbl-cw)); }
html.land.compact:not(.in-tut) #scr-prep .row-shop[data-n="5"] { grid-template-columns: repeat(5, var(--tbl-cw)); }
html.land.compact:not(.in-tut) #scr-prep .row-shop, html.land.compact:not(.in-tut) #scr-prep .row-enemy { top: calc(55 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .row-board { top: calc(169 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .row-board .slot, html.land.compact:not(.in-tut) #scr-prep .row-board .card,
html.land.compact:not(.in-tut) #scr-prep .row-shop .slot, html.land.compact:not(.in-tut) #scr-prep .row-shop .card,
html.land.compact:not(.in-tut) #scr-prep.has-bench .row-shop .slot, html.land.compact:not(.in-tut) #scr-prep.has-bench .row-shop .card,
html.land.compact:not(.in-tut) #scr-prep .row-enemy .slot, html.land.compact:not(.in-tut) #scr-prep .row-enemy .card { height: calc(108 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle:not(.tutorial-demo) .arena { left: calc(var(--tbl-cc) - 3 * var(--tbl-cw) - 15 * var(--u)); width: calc(6 * var(--tbl-cw) + 30 * var(--u)); top: calc(48 * var(--u)); height: calc(230 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle .row-bt { grid-template-columns: repeat(6, var(--tbl-cw)); }
html.land.compact:not(.in-tut) #scr-battle:not(.tutorial-demo) .row-bt .slot { height: calc(104 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-block,
html.land.compact:not(.in-tut) #scr-battle .bt-dock .hero-block { top: calc(281 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .relic-slot, html.land.compact:not(.in-tut) .cpt-bt-relic { top: calc(284 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .prep-hero, html.land.compact:not(.in-tut) #scr-battle .bt-dock .bt-skill { top: calc(285 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep #cpt-lamps, html.land.compact:not(.in-tut) .cpt-bt-lamps { top: calc(279 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .cpt-bonds.cpt-sign, html.land.compact:not(.in-tut) .cpt-bt-pdots { top: calc(287 * var(--u)); }

html.land .card-elb {
position: absolute; left: calc(2 * var(--u)); top: calc(2 * var(--u)); z-index: 6; pointer-events: none;
width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle at 50% 40%, #1f3a4a, #0f1e33); border: calc(1 * var(--u)) solid rgba(201,162,74,.85);
box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.55);
}
html.land .card-elb .el-badge-img, html.land .card-elb .el-dot { width: 82% !important; height: 82% !important; display: block; }
html.land.compact .card-elb { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }

html.land.compact .row-bench .card-elb { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
html.land #scr-final .poster-team .card-elb { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }

html.land .card-elb { border-width: calc(0.8 * var(--u)); border-color: rgba(243,226,182,.9); box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.6); }
html.land .card-elb-ch {
display: block; color: #fff; font-weight: 900; line-height: 1; font-family: "Songti SC", "STSong", "SimSun", serif;
font-size: max(calc(10 * var(--u)), 10px); text-shadow: 0 1px 1px rgba(0,0,0,.55);
}
html.land.compact .card-elb-ch { font-size: max(calc(12.5 * var(--u)), 12px); }
html.land.compact .row-bench .card-elb-ch { font-size: max(calc(11 * var(--u)), 12px); }
html.land .card-elb .el-badge-img { filter: drop-shadow(0 0 1px rgba(0,0,0,.5)); }

html.land .win-stamp {
position: absolute; inset: 0; z-index: 88; pointer-events: none;
background: radial-gradient(ellipse 46% 52% at 50% 46%, rgba(15,30,51,.32), rgba(15,30,51,0) 70%);
animation: wsShade var(--ws-t, 800ms) ease-out forwards;
}
html.land .win-stamp .ws-seal {
position: absolute; left: 50%; top: 46%; display: flex; align-items: center; justify-content: center;
min-width: calc(92 * var(--u)); height: calc(92 * var(--u)); padding: 0 calc(10 * var(--u)); box-sizing: border-box;
border-radius: calc(8 * var(--u)); background: radial-gradient(circle at 42% 38%, #e0614d, #c84b3c 52%, #8f2d22);
box-shadow: inset 0 0 0 calc(4 * var(--u)) rgba(255,232,214,.32), inset 0 0 0 calc(7 * var(--u)) #b13f30, 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.55);
animation: wsSeal var(--ws-t, 800ms) cubic-bezier(.2,.9,.3,1) forwards; opacity: 0;
}
html.land .win-stamp .ws-char {
color: #fff1e2; font-family: "Kaiti SC", "STKaiti", "KaiTi", "Songti SC", "STSong", serif; font-weight: 900; line-height: 1;
font-size: calc(62 * var(--u)); text-shadow: 0 calc(2 * var(--u)) 0 rgba(90,20,12,.55);
}
html.land:not([lang^="zh"]) .win-stamp .ws-char { font-family: Georgia, "Times New Roman", serif; font-size: calc(28 * var(--u)); letter-spacing: .04em; }
html.land .win-stamp .ws-ring {
position: absolute; left: 50%; top: 46%; width: calc(120 * var(--u)); height: calc(120 * var(--u)); border-radius: 50%;
border: calc(4 * var(--u)) solid rgba(243,210,122,.95); box-shadow: 0 0 calc(18 * var(--u)) rgba(243,210,122,.8), inset 0 0 calc(12 * var(--u)) rgba(243,210,122,.6);
animation: wsRing var(--ws-t, 800ms) ease-out forwards; opacity: 0;
}
html.land .win-stamp .ws-flake {
position: absolute; left: 50%; top: 46%; width: calc(7 * var(--u)); height: calc(4 * var(--u)); border-radius: calc(1 * var(--u));
background: linear-gradient(135deg, #fff3c4, #d9b45a 60%, #a67c25); box-shadow: 0 0 calc(4 * var(--u)) rgba(243,210,122,.8);
animation: wsFlake var(--ws-t, 800ms) cubic-bezier(.15,.8,.35,1) forwards; opacity: 0;
}

html.land .grand { position: absolute; inset: 0; z-index: 96; overflow: hidden; animation: grLayer var(--gr-t, 2800ms) linear forwards; }
html.land .grand .gr-shade { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 50% 45%, rgba(20,34,52,.9), rgba(4,10,20,.97)); }
html.land .grand .gr-rays {
position: absolute; left: 50%; top: 36%; width: 120vmax; height: 120vmax; opacity: 0;
background: repeating-conic-gradient(from 0deg, rgba(243,210,122,.16) 0deg 6deg, rgba(243,210,122,0) 6deg 18deg);
-webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.6) 18%, transparent 42%); mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,.6) 18%, transparent 42%);
animation: grRays var(--gr-t, 2800ms) ease-out var(--gr-slam, 1450ms) forwards;
}
html.land .grand .gr-hero {
position: absolute; left: 1%; bottom: 0; height: 96%; width: auto; max-width: 40%; object-fit: contain; opacity: 0;
-webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 40%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 60% 62% at 50% 40%, #000 55%, transparent 100%);
animation: grHero .5s cubic-bezier(.16,.9,.3,1) .2s forwards;
}
html.land .grand .gr-team {
position: absolute; left: 30%; right: 3%; bottom: 4%; height: 42%; display: flex; justify-content: center; align-items: flex-end; gap: 1%;
}
html.land .grand .gr-beast {
height: 100%; width: calc(94% / var(--gr-n, 6)); object-fit: contain; object-position: 50% 100%; opacity: 0;
-webkit-mask-image: radial-gradient(ellipse 58% 60% at 50% 44%, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse 58% 60% at 50% 44%, #000 50%, transparent 100%);
animation: grBeast .45s ease-out calc(450ms + var(--gr-i, 0) * 110ms) forwards;
}
html.land .grand-chushan .gr-beast { animation-delay: calc(300ms + var(--gr-i, 0) * 70ms); }
html.land .grand .gr-seal {
position: absolute; left: 62%; top: 34%; display: flex; align-items: center; justify-content: center; opacity: 0;
padding: calc(10 * var(--u)) calc(22 * var(--u)); border-radius: calc(8 * var(--u));
background: radial-gradient(circle at 42% 38%, #e0614d, #c84b3c 52%, #8f2d22);
box-shadow: inset 0 0 0 calc(4 * var(--u)) rgba(255,232,214,.3), inset 0 0 0 calc(7 * var(--u)) #b13f30, 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0,0,0,.6);
animation: grSeal .35s cubic-bezier(.2,.9,.3,1) calc(var(--gr-slam, 1450ms) - 250ms) forwards;
}
html.land .grand .gr-seal-txt {
color: #fff1e2; font-family: "Kaiti SC", "STKaiti", "KaiTi", "Songti SC", "STSong", serif; font-weight: 900; line-height: 1.05;
font-size: calc(52 * var(--u)); letter-spacing: .06em; white-space: nowrap; text-shadow: 0 calc(2 * var(--u)) 0 rgba(90,20,12,.55);
}
html.land:not([lang^="zh"]) .grand .gr-seal-txt { font-family: Georgia, "Times New Roman", serif; font-size: calc(26 * var(--u)); letter-spacing: .02em; }
html.land .grand-chushan .gr-seal-txt { font-size: calc(64 * var(--u)); }
html.land .grand .gr-flakes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

html.land .win-stamp .ws-seal {
width: calc(104 * var(--u)); min-width: 0; height: calc(104 * var(--u)); padding: 0; border-radius: 0; box-shadow: none;
background: url("../assets/ui/seal_win.webp") center / 100% 100% no-repeat;
filter: drop-shadow(0 calc(6 * var(--u)) calc(12 * var(--u)) rgba(0,0,0,.55));
}
html.land .grand .gr-seal {
padding: 0; border-radius: 0; box-shadow: none; filter: drop-shadow(0 calc(8 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,.6));
}
html.land .grand-clear .gr-seal { left: 66%; top: 40%; width: calc(76 * var(--u)); height: calc(152 * var(--u)); background: url("../assets/ui/seal_clear.webp") center / 100% 100% no-repeat; }
html.land .grand-chushan .gr-seal { left: 64%; top: 36%; width: calc(124 * var(--u)); height: calc(124 * var(--u)); background: url("../assets/ui/seal_chushan.webp") center / 100% 100% no-repeat; }
html.land[lang="zh"] .win-stamp .ws-char, html.land[lang="zh"] .grand .gr-seal-txt { display: none; }
html.land:not([lang^="zh"]) .win-stamp .ws-char,
html.land:not([lang^="zh"]) .grand .gr-seal-txt {
position: absolute; left: 50%; top: calc(100% + 4 * var(--u)); transform: translateX(-50%); white-space: nowrap;
font-family: Georgia, "Times New Roman", serif; font-size: calc(18 * var(--u)); letter-spacing: .04em; color: #fbeec4;
text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 calc(8 * var(--u)) rgba(200,75,60,.6);
}

html.land .finisher:not(.freeze) { background: #040c1a; }
html.land .finisher .finisher-art { height: 70%; width: auto; max-width: 92%; max-height: none; }
html.land .finisher::after {
content: ''; position: absolute; left: 50%; top: 45%; height: 72%; aspect-ratio: 3 / 4; transform: translate(-50%, -50%);
z-index: 3; pointer-events: none; opacity: 0; transition: opacity .12s linear;
background: radial-gradient(closest-side ellipse at 50% 46%, rgba(4,12,26,0) 58%, rgba(4,12,26,.7) 80%, #040c1a 97%);
box-shadow: 0 0 0 calc(3 * var(--u)) #040c1a;
}
html.land .finisher.slide-in::after, html.land .finisher.slide-out::after { opacity: 1; }

html.land .finisher:not(.freeze) { background: #071627; }
html.land .finisher .finisher-band, html.land .finisher .finisher-lines { display: none; }
html.land .finisher .finisher-art { top: 47%; height: 88%; }
html.land .finisher::after {
top: 47%; height: 90%;
background: radial-gradient(closest-side ellipse at 50% 46%, rgba(7,22,39,0) 50%, rgba(7,22,39,.75) 76%, #071627 94%);
box-shadow: 0 0 0 calc(4 * var(--u)) #071627;
}

html.land[lang^="zh"] .win-stamp .ws-char, html.land[lang^="zh"] .grand .gr-seal-txt { display: none; }

html.land .finisher.cut::after { display: none; }
html.land .finisher .finisher-art.cut { -webkit-mask-image: none; mask-image: none; top: 50%; height: 96%; filter: drop-shadow(0 0 calc(18 * var(--u)) rgba(243,210,122,.25)); }
html.land .grand .gr-hero.cut, html.land .grand .gr-beast.cut { -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.6)); }
html.land .grand .gr-beast.cut { animation-name: grBeastCut; }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right #land-detail > .ld-art .ld-art-img.cut, html.land.compact:not(.in-tut) #land-bt-detail .land-detail > .ld-art .ld-art-img.cut { -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(58,42,22,.35)); }

html.land { --strip-h: calc(11 * var(--u)); }
html.land.compact { --strip-h: calc(14 * var(--u)); }
html.land .card > .card-art { height: calc(100% - var(--strip-h)); bottom: auto; }
html.land .card > .card-bar { bottom: var(--strip-h); }

html.land .card-strip {
position: absolute; left: 0; right: 0; bottom: 0; height: var(--strip-h); z-index: 6; pointer-events: none;
display: flex; align-items: center; gap: calc(1.5 * var(--u)); padding: 0 calc(1.5 * var(--u));
background: linear-gradient(180deg, #1c3248, #0f1e33); border-top: calc(0.8 * var(--u)) solid rgba(201,162,74,.55);
}
html.land .card-strip > .card-elb { position: static; flex: none; width: calc(var(--strip-h) - 2 * var(--u)); height: calc(var(--strip-h) - 2 * var(--u)); }
html.land .card-strip > .card-name, html.land .card-strip > .card-name.long, html.land .card-strip > .card-name.tight {
position: static; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: clip;
line-height: 1; letter-spacing: 0 !important; text-shadow: none; font-size: calc(10 * var(--u)) !important;
}
html.land.compact .card-strip > .card-name, html.land.compact .card-strip > .card-name.long, html.land.compact .card-strip > .card-name.tight { font-size: max(calc(11.5 * var(--u)), 12px) !important; }
html.land .card-strip > .card-kw { position: static; flex: none; flex-direction: row; gap: calc(1 * var(--u)); }
html.land .card-strip > .card-kw .kw-badge { width: calc(var(--strip-h) - 2.5 * var(--u)); height: calc(var(--strip-h) - 2.5 * var(--u)); }
html.land .card .kw-badge.kw-seal { bottom: calc(var(--strip-h) + 1 * var(--u)); }

html.land .row-bench .card > .card-strip, html.land #scr-final .poster-team .card > .card-strip { display: none; }
html.land #scr-final .poster-team .card > .card-art { height: 100%; }
html.land .row-bench .card > .card-bar, html.land #scr-final .poster-team .card > .card-bar { bottom: 0; }

html.land.compact:not(.in-tut) #scr-prep .row-shop .slot, html.land.compact:not(.in-tut) #scr-prep .row-shop .card,
html.land.compact:not(.in-tut) #scr-prep.has-bench .row-shop .slot, html.land.compact:not(.in-tut) #scr-prep.has-bench .row-shop .card,
html.land.compact:not(.in-tut) #scr-prep .row-board .slot, html.land.compact:not(.in-tut) #scr-prep .row-board .card,
html.land.compact:not(.in-tut) #scr-prep .row-enemy .slot, html.land.compact:not(.in-tut) #scr-prep .row-enemy .card { height: calc(115 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .row-shop, html.land.compact:not(.in-tut) #scr-prep .row-enemy { top: calc(52 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .row-board { top: calc(171 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle:not(.tutorial-demo) .arena { top: calc(47 * var(--u)); height: calc(240 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle:not(.tutorial-demo) .row-bt .slot { height: calc(109 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-block, html.land.compact:not(.in-tut) #scr-battle .bt-dock .hero-block { top: calc(284 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .relic-slot, html.land.compact:not(.in-tut) .cpt-bt-relic { top: calc(287 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .prep-hero, html.land.compact:not(.in-tut) #scr-battle .bt-dock .bt-skill { top: calc(288 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep #cpt-lamps, html.land.compact:not(.in-tut) .cpt-bt-lamps { top: calc(282 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .cpt-bonds.cpt-sign, html.land.compact:not(.in-tut) .cpt-bt-pdots { top: calc(290 * var(--u)); }

html.land .card-strip > .card-name.cap-off { visibility: hidden; }
html.land:not(.compact) .card .kw-badge.kw-seal { bottom: calc(0.5 * var(--u)); width: calc(10 * var(--u)); height: calc(10 * var(--u)); margin-left: calc(-5 * var(--u)); z-index: 7; }

html.land .stat-atk.ui2-up:not(.stat-hero), html.land .stat-hp.ui2-up { color: #4cf46c; text-shadow: 0 0 calc(4 * var(--u)) rgba(60, 235, 100, .75), 0 1px 2px #000; }
html.land .stat-atk.ui2-down, html.land .stat-hp.ui2-down { color: #ff5545; text-shadow: 0 0 calc(3 * var(--u)) rgba(255, 70, 50, .55), 0 1px 2px #000; }

html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-stats .stat-atk.ui2-up:not(.stat-hero),
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-stats .stat-hp.ui2-up,
html.land.compact:not(.in-tut) #land-bt-detail .ld-stats .stat-atk.ui2-up:not(.stat-hero), html.land.compact:not(.in-tut) #land-bt-detail .ld-stats .stat-hp.ui2-up { color: #1d6b30; }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-stats .stat-atk.ui2-down,
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-stats .stat-hp.ui2-down,
html.land.compact:not(.in-tut) #land-bt-detail .ld-stats .stat-atk.ui2-down, html.land.compact:not(.in-tut) #land-bt-detail .ld-stats .stat-hp.ui2-down { color: var(--tbl-cinnabar); }
html.land .ui2-jump { animation: ui2Jump calc(150ms * var(--fx-speed)) ease-out; }
html.land .ui2-host { position: relative; }
html.land .ui2-pip {
position: absolute; bottom: 100%; z-index: 6; pointer-events: none;
font-style: normal; font-weight: 800; font-size: max(calc(11 * var(--u)), 12px); line-height: 1; white-space: nowrap;
text-shadow: 0 1px 2px #000, 0 0 calc(2 * var(--u)) #000;
animation: ui2Pip calc(800ms * var(--fx-speed)) ease-out forwards;
}
html.land .ui2-pip-atk { left: 0; }
html.land .ui2-pip-hp { right: 0; }
html.land .ui2-pip.up { color: #6cf58a; }
html.land .ui2-pip.down { color: #ff6050; }

html.land .ui2-heal { --hr: calc(38 * var(--u)); position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 6; pointer-events: none; animation: ui2HealRise calc(820ms * var(--fx-speed)) ease-out forwards; }
html.land .ui2-heal::before {
content: ""; position: absolute; left: 0; top: 0; width: calc(var(--hr) * 1.62); height: calc(var(--hr) * 1.62); border-radius: 50%;
border: calc(2 * var(--u)) solid rgba(130, 255, 196, .9);
box-shadow: 0 0 calc(10 * var(--u)) rgba(70, 230, 160, .85), inset 0 0 calc(10 * var(--u)) rgba(70, 230, 160, .6);
opacity: 0; animation: ui2HealRing calc(700ms * var(--fx-speed)) ease-out forwards;
}
html.land:not(.compact) .ui2-heal { --hr: calc(21 * var(--u)); }
html.land .ui2-leaf {
position: absolute; left: 0; top: 0; width: calc(var(--hr) * .19); height: calc(var(--hr) * .32);
border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #d4ffe2, #34d48a);
box-shadow: 0 0 calc(4 * var(--u)) rgba(80, 240, 170, .9); opacity: 0;
animation: ui2Leaf calc(780ms * var(--fx-speed)) cubic-bezier(.2, .7, .3, 1) calc(var(--i) * 18ms * var(--fx-speed)) forwards;
}

html.land .card-shield.ui2-sh-gain { animation: ui2ShGain calc(260ms * var(--fx-speed)) ease-out; }
html.land .card-shield.ui2-sh-hit { animation: ui2ShHit calc(260ms * var(--fx-speed)) ease-out; }
html.land .card-shield.ui2-sh-break { animation: ui2ShBreak calc(380ms * var(--fx-speed)) ease-out forwards; }
html.land .ui2-shard {
position: absolute; width: calc(10 * var(--u)); height: calc(10 * var(--u)); z-index: 6; pointer-events: none;
background: linear-gradient(135deg, #ffffff, #8db9e4 60%, #4b78a8); clip-path: polygon(0 0, 100% 35%, 35% 100%);
animation: ui2Shard calc(460ms * var(--fx-speed)) cubic-bezier(.15, .8, .35, 1) forwards;
}
html.land .ui2-shard-0 { --dx: calc(-22 * var(--u)); --dy: calc(-22 * var(--u)); --r: 0deg; }
html.land .ui2-shard-1 { --dx: calc(22 * var(--u)); --dy: calc(-22 * var(--u)); --r: 90deg; }
html.land .ui2-shard-2 { --dx: calc(20 * var(--u)); --dy: calc(12 * var(--u)); --r: 180deg; }
html.land .ui2-shard-3 { --dx: calc(-20 * var(--u)); --dy: calc(12 * var(--u)); --r: 270deg; }
@media (prefers-reduced-motion: reduce) {
html.land .ui2-leaf, html.land .ui2-shard { display: none; }
html.land .ui2-pip { animation-name: fadeOutOnly; }
}

html.land #scr-battle .card-bt.ui1-imp { animation: ui1Knock var(--ui1-imp, 150ms) cubic-bezier(.2,.8,.3,1) 1, ui1Flash var(--ui1-flash, 40ms) linear 1; }
html.land #scr-battle .card-bt.ui1-flash { animation: ui1Flash var(--ui1-flash, 40ms) linear 1; }
html.land #scr-battle .card-bt.flying.ui1-flash { animation: ui1Flash var(--ui1-flash, 40ms) linear 1 !important; }
html.land #scr-battle .arena.ui1-shake { animation: ui1Shake var(--ui1-sk-ms, 210ms) linear 1; }
html.land #scr-battle .ui1-sparks { position: absolute; width: 0; height: 0; z-index: 44; pointer-events: none; }
html.land #scr-battle .ui1-spk { position: absolute; left: 0; top: 0; width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); border-radius: 1px; opacity: 0; animation: ui1Spark 360ms cubic-bezier(.15,.75,.35,1) forwards; }
html.land #scr-battle .ui1-spk.red { background: #d8402a; box-shadow: 0 0 calc(2 * var(--u)) rgba(216,64,42,.8); }
html.land #scr-battle .ui1-spk.gold { background: #f3c95a; box-shadow: 0 0 calc(2 * var(--u)) rgba(243,201,90,.85); }
html.land #scr-battle .ui1-spk.pale { background: #fff1c9; }
html.land #scr-battle .card-bt.ui1-gone { opacity: 0; transition: none; }
html.land #scr-battle .card-bt.ui1-shard { position: absolute; margin: 0; z-index: 7; pointer-events: none; transition: none; animation: ui1Shard 560ms cubic-bezier(.2,.65,.35,1) forwards; }
html.land #scr-battle .ui1-star { display: none; }
html.land:not(.in-tut) #scr-battle .burst { --dmg-fs: max(calc(16 * var(--u)), calc(var(--ui1-cw, 80px) * .44)); --burst-w: calc(var(--ui1-cw, 80px) * 1.05); }
html.land:not(.in-tut) #scr-battle .burst.small { --dmg-fs: max(calc(13 * var(--u)), calc(var(--ui1-cw, 80px) * .35)); --burst-w: calc(var(--ui1-cw, 80px) * .8); }
html.land:not(.in-tut) #scr-battle .burst.crit { --dmg-fs: max(calc(19 * var(--u)), calc(var(--ui1-cw, 80px) * .53)); --burst-w: calc(var(--ui1-cw, 80px) * 1.2); }
html.land:not(.in-tut) #scr-battle .ui1-star {
display: block; position: absolute; left: 50%; top: 50%; z-index: 1;
width: calc(var(--burst-w) * .78); height: calc(var(--burst-w) * .78);
background: radial-gradient(circle, #f6764f 0%, #d63a22 42%, #a51d12 70%);
clip-path: polygon(50% 0%, 58% 30%, 80% 8%, 70% 36%, 98% 28%, 75% 50%, 100% 66%, 70% 64%, 82% 94%, 58% 72%, 50% 100%, 42% 72%, 16% 92%, 30% 64%, 0% 70%, 25% 50%, 2% 30%, 30% 36%, 20% 8%, 42% 30%);
-webkit-clip-path: polygon(50% 0%, 58% 30%, 80% 8%, 70% 36%, 98% 28%, 75% 50%, 100% 66%, 70% 64%, 82% 94%, 58% 72%, 50% 100%, 42% 72%, 16% 92%, 30% 64%, 0% 70%, 25% 50%, 2% 30%, 30% 36%, 20% 8%, 42% 30%);
opacity: 0; animation: ui1Star var(--burst-ms) linear forwards;
}
html.land:not(.in-tut) #scr-battle .burst.crit .ui1-star { background: radial-gradient(circle, #ffe08a 0%, #f2a52c 40%, #c3471a 72%); }
html.land:not(.in-tut) #scr-battle .burst-num { z-index: 3; font-weight: 900; letter-spacing: -.03em; animation-name: ui1Num; animation-timing-function: cubic-bezier(.25,.8,.35,1);
color: #fff6e2;
text-shadow:
calc(var(--dmg-fs) * .06) 0 0 #2b0b04, calc(var(--dmg-fs) * -.06) 0 0 #2b0b04, 0 calc(var(--dmg-fs) * .06) 0 #2b0b04, 0 calc(var(--dmg-fs) * -.06) 0 #2b0b04,
calc(var(--dmg-fs) * .045) calc(var(--dmg-fs) * .045) 0 #2b0b04, calc(var(--dmg-fs) * -.045) calc(var(--dmg-fs) * .045) 0 #2b0b04,
calc(var(--dmg-fs) * .045) calc(var(--dmg-fs) * -.045) 0 #2b0b04, calc(var(--dmg-fs) * -.045) calc(var(--dmg-fs) * -.045) 0 #2b0b04,
0 calc(var(--dmg-fs) * .1) calc(var(--dmg-fs) * .12) rgba(4,8,16,.7); }
html.land:not(.in-tut) #scr-battle .burst.crit .burst-num { color: #ffd84a; }
html.land:not(.in-tut) #scr-battle .burst.crit .burst-num-i { animation: none; }
html.land:not(.in-tut) #scr-battle .burst .dmg-marks { align-self: flex-start; margin-left: calc(2 * var(--u)); }
html.land:not(.in-tut) #scr-battle .burst .dmg-mk-crit { font-size: calc(13 * var(--u)); line-height: 1; padding: calc(2 * var(--u)) calc(2.5 * var(--u)); color: #fff3d6; background: #b3261e; border: 1px solid #f3c95a; border-radius: calc(2 * var(--u)); transform: rotate(-10deg); text-shadow: none; box-shadow: 0 1px calc(3 * var(--u)) rgba(0,0,0,.6); }
html.land:not(.in-tut) #scr-battle .burst .dmg-mk-counter { font-size: calc(12 * var(--u)); }
@media (prefers-reduced-motion: reduce) {
html.land:not(.in-tut) #scr-battle .burst-num { animation-name: burstNumRM; }
html.land:not(.in-tut) #scr-battle .ui1-star { animation: none; opacity: 0; }
}

html.land .card-taunt > .fx-taunt {
left: 0; right: 0; top: 0; bottom: 0; background: none; border-style: solid; border-color: transparent; border-width: calc(7 * var(--u));
border-image-source: url("../assets/ui/fx_taunt_frame.webp"); border-image-slice: 44; border-image-repeat: stretch;
}
html.land.compact .card-taunt > .fx-taunt { border-width: calc(8 * var(--u)); }
html.land .st-golden > .fx-golden, html.land .card-taunt.st-golden > .fx-golden {
left: 0; right: 0; top: 0; bottom: 0; background: none; border-style: solid; border-color: transparent; border-width: calc(5 * var(--u));
border-image-source: url("../assets/ui/fx_golden_bubble.webp"); border-image-slice: 28; border-image-repeat: stretch;
}
html.land.compact:not(.in-tut) #scr-prep .row-shop .slot, html.land.compact:not(.in-tut) #scr-prep .row-shop .card,
html.land.compact:not(.in-tut) #scr-prep.has-bench .row-shop .slot, html.land.compact:not(.in-tut) #scr-prep.has-bench .row-shop .card,
html.land.compact:not(.in-tut) #scr-prep .row-board .slot, html.land.compact:not(.in-tut) #scr-prep .row-board .card,
html.land.compact:not(.in-tut) #scr-prep .row-enemy .slot, html.land.compact:not(.in-tut) #scr-prep .row-enemy .card { height: calc(112 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .row-shop, html.land.compact:not(.in-tut) #scr-prep .row-enemy { top: calc(55 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .row-board { top: calc(170 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle:not(.tutorial-demo) .arena { top: calc(49 * var(--u)); height: calc(233 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle:not(.tutorial-demo) .row-bt .slot { height: calc(105 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle:not(.tutorial-demo) .arena > .clash-line { flex: none; min-height: 0; height: calc(23 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-block, html.land.compact:not(.in-tut) #scr-battle .bt-dock .hero-block { top: calc(286 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep #cpt-lamps, html.land.compact:not(.in-tut) .cpt-bt-lamps { left: calc(var(--tbl-cc) + 46 * var(--u)); top: calc(286 * var(--u)); font-size: calc(14 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep .prep-dock #relic-slot-0, html.land.compact:not(.in-tut) #cpt-bt-relic-0 { left: calc(var(--tbl-cc) - 90 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock #relic-slot-1, html.land.compact:not(.in-tut) #cpt-bt-relic-1 { left: calc(var(--tbl-cc) + 68 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .prep-hero, html.land.compact:not(.in-tut) #scr-battle .bt-dock .bt-skill { left: calc(var(--tbl-cc) + 116 * var(--u)); }

html.land.compact:not([lang^="zh"]):not(.in-tut) #scr-prep .prep-dock .hero-block > .hero-plate, html.land.compact:not([lang^="zh"]):not(.in-tut) #scr-battle .bt-dock .hero-block > .hero-plate {
letter-spacing: 0; text-indent: 0;
}

html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-block, html.land.compact:not(.in-tut) #scr-battle .bt-dock .hero-block {
left: calc(var(--tbl-cc) - 44 * var(--u)); width: calc(88 * var(--u)); align-items: center;
}
html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-block > .hero-plate, html.land.compact:not(.in-tut) #scr-battle .bt-dock .hero-block > .hero-plate { max-width: 100%; overflow: hidden; }

html.land.compact:not(.in-tut) #scr-battle .cpt-bt-title { margin-left: calc(10 * var(--u)); max-width: calc(100 * var(--u)); }

html.land .row-bench .card > .card-bar > .card-flags { top: auto; bottom: calc(1 * var(--u)); }

html.land .row-board .card > .mk-down { left: calc(2 * var(--u)); top: calc(2 * var(--u)); font-size: max(calc(11 * var(--u)), 12px); }

html.land.compact { --vs: min(var(--tbl-vside), 12px); --bw41: max(calc(41 * var(--u)), 44px); --bw42: max(calc(42 * var(--u)), 44px); }
html.land.compact:not(.in-tut) #scr-prep .row-shop, html.land.compact:not(.in-tut) #scr-prep .row-shop[data-n], html.land.compact:not(.in-tut) #scr-prep .row-enemy { top: calc(55 * var(--u) + var(--vs)); }

html.land.compact:not(.in-tut) #scr-prep .row-shop[data-n="4"] { top: calc(57 * var(--u) + var(--vs)); }
html.land.compact:not(.in-tut) #scr-prep .row-board { top: calc(170 * var(--u) + var(--vs)); }
html.land.compact:not(.in-tut) #scr-battle:not(.tutorial-demo) .arena { top: calc(49 * var(--u) + var(--vs)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-block, html.land.compact:not(.in-tut) #scr-battle .bt-dock .hero-block { top: calc(286 * var(--u) + var(--vs)); }
html.land.compact:not(.in-tut) #scr-prep #cpt-lamps, html.land.compact:not(.in-tut) .cpt-bt-lamps { top: calc(286 * var(--u) + var(--vs)); }

html.land.compact:not(.in-tut) #scr-prep .prep-dock .relic-slot, html.land.compact:not(.in-tut) .cpt-bt-relic { top: calc(287 * var(--u) + var(--vs)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .prep-hero, html.land.compact:not(.in-tut) #scr-battle .bt-dock .bt-skill { top: calc(288 * var(--u) + var(--vs)); }
html.land.compact:not(.in-tut) #scr-prep .cpt-bonds.cpt-sign, html.land.compact:not(.in-tut) .cpt-bt-pdots { top: calc(290 * var(--u) + var(--vs)); }

html.land.compact:not(.in-tut) #scr-prep .prep-dock #relic-slot-0, html.land.compact:not(.in-tut) #cpt-bt-relic-0 { left: calc(var(--tbl-cc) - 46 * var(--u) - var(--bw42)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .prep-hero, html.land.compact:not(.in-tut) #scr-battle .bt-dock .bt-skill { left: calc(var(--tbl-cc) + 72 * var(--u) + var(--bw42)); }

html.land.compact:not(.in-tut) #scr-prep .prep-top .tb-left { left: calc(531 * var(--u) - var(--bw41)); }

html.land.compact:not(.in-tut) #scr-prep .cpt-cap { max-width: calc(447 * var(--u) - 2 * var(--bw41) - var(--tbl-tl) - max(calc(46 * var(--u)), 44px) - 2 * var(--bw41) - 17 * var(--u)); }

html.land.compact:not(.in-tut) #scr-battle .bt-top #btn-skip { top: calc(62 * var(--u) + max(calc(48 * var(--u)), 46px)); }
html.land.compact:not(.in-tut) #scr-battle .bt-top #btn-cpt-log { top: calc(62 * var(--u) + 2 * max(calc(48 * var(--u)), 46px)); }
html.land.compact:not(.in-tut) #scr-battle .bt-top #btn-pause { top: calc(62 * var(--u) + 3 * max(calc(48 * var(--u)), 46px)); }

html.land .fx.ui3 { opacity: 1; }
html.land .ui3.el-metal { --ui3-c: #f6d873; }
html.land .ui3.el-wood { --ui3-c: #6be39a; }
html.land .ui3.el-water { --ui3-c: #6cc2ff; }
html.land .ui3.el-fire { --ui3-c: #ff7a55; }
html.land .ui3.el-earth { --ui3-c: #e2b46a; }

html.land .ui3-ring { z-index: 32; box-sizing: border-box; border: calc(2 * var(--u)) solid var(--ui3-c, #f6d873); border-radius: calc(5 * var(--u)); box-shadow: 0 0 calc(8 * var(--u)) var(--ui3-c, #f6d873), inset 0 0 calc(10 * var(--u)) var(--ui3-c, #f6d873); animation: ui3Ring calc(600ms * var(--fx-speed)) ease-out both; }
html.land .ui3-ring.ui3-grow { border-width: calc(3 * var(--u)); animation-duration: calc(520ms * var(--fx-speed)); }
html.land .ui3-tag {
z-index: 46; translate: -50% -50%; padding: calc(1 * var(--u)) calc(4 * var(--u)); border-radius: calc(3 * var(--u));
white-space: nowrap; font-style: normal; font-weight: 800; line-height: 1.15; font-size: max(calc(11 * var(--u)), 12px);
color: #fff6dc; background: rgba(10, 20, 36, .88); border: 1px solid var(--ui3-c, #f6d873); box-shadow: 0 0 calc(6 * var(--u)) var(--ui3-c, #f6d873); text-shadow: 0 1px 2px #000;
animation: ui3Tag calc(600ms * var(--fx-speed)) ease-out both;
}

html.land .ui3-fly { width: 0; height: 0; z-index: 2; animation: ui3Fly var(--ui3-ms, 300ms) linear both; }
html.land .ui3-fly::before { content: ""; position: absolute; left: calc(var(--fw) / -2); top: calc(var(--fh) / -2); width: var(--fw); height: var(--fh); }
html.land .ui3-beam { --fw: calc(34 * var(--u)); --fh: calc(11 * var(--u)); rotate: var(--ang); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
html.land .ui3-beam::before { border-radius: 50%; background: radial-gradient(ellipse at 78% 50%, #ffffff 0%, #b4ffd6 18%, #4fe39a 42%, rgba(70, 230, 160, 0) 74%); filter: drop-shadow(0 0 calc(5 * var(--u)) rgba(90, 240, 170, .95)); }
html.land .ui3-stream { --fw: calc(26 * var(--u)); --fh: calc(8 * var(--u)); rotate: var(--ang); animation-timing-function: cubic-bezier(.5, 0, .7, 1); }
html.land .ui3-stream::before { border-radius: 50%; background: radial-gradient(ellipse at 78% 50%, #fff0ea 0%, #ff8a72 20%, #e8261c 46%, rgba(200, 30, 30, 0) 74%); filter: drop-shadow(0 0 calc(4 * var(--u)) rgba(255, 60, 40, .95)); }
html.land .ui3-soul { --fw: calc(22 * var(--u)); --fh: calc(22 * var(--u)); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
html.land .ui3-soul::before { border-radius: 50%; background: radial-gradient(circle, #fffbe8 0%, #ffe08a 35%, rgba(243, 201, 90, .35) 60%, rgba(243, 201, 90, 0) 72%); box-shadow: 0 0 calc(12 * var(--u)) rgba(255, 220, 120, .95); }
html.land .ui3-stone { --fw: calc(22 * var(--u)); --fh: calc(19 * var(--u)); }
html.land .ui3-stone::before {
border-radius: 46% 54% 40% 60% / 55% 45% 55% 45%; background: radial-gradient(circle at 35% 30%, #f4efe2, #a39782 50%, #5a4f3f);
box-shadow: 0 0 0 calc(1 * var(--u)) #2b2216, 0 0 calc(8 * var(--u)) calc(2 * var(--u)) rgba(255, 220, 140, .85);
animation: ui3Lob var(--ui3-ms, 380ms) both; animation-delay: inherit;
}
html.land .ui3-slash { --fw: calc(40 * var(--u)); --fh: calc(40 * var(--u)); rotate: var(--ang); }
html.land .ui3-slash::before { box-sizing: border-box; border-radius: 50%; border-right: calc(6 * var(--u)) solid #fff0d8; filter: drop-shadow(0 0 calc(3 * var(--u)) #ff9a3c) drop-shadow(0 0 calc(6 * var(--u)) #e8401c); }

html.land .ui3-pop { width: 0; height: 0; z-index: 3; }
html.land .ui3-pop::before {
content: ""; position: absolute; left: calc(-17 * var(--u)); top: calc(-17 * var(--u)); width: calc(34 * var(--u)); height: calc(34 * var(--u));
background: radial-gradient(circle, #fffbe8 0%, var(--ui3-c, #f6d873) 40%, rgba(0, 0, 0, 0) 70%);
clip-path: polygon(50% 0%, 60% 36%, 96% 22%, 68% 50%, 96% 78%, 60% 64%, 50% 100%, 40% 64%, 4% 78%, 32% 50%, 4% 22%, 40% 36%);
animation: ui3Pop calc(320ms * var(--fx-speed)) ease-out both;
}
html.land .ui3-pop.el-metal::before { --ui3-c: #f6d873; }

html.land .ui3-block { z-index: 33; animation: ui3Block calc(350ms * var(--fx-speed)) ease-out both; }
html.land .ui3-block::before { content: ""; position: absolute; left: 24%; right: 24%; top: 22%; bottom: 32%; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(170, 215, 255, .8) 40%, rgba(120, 170, 230, .15) 75%); clip-path: polygon(50% 0, 100% 15%, 100% 55%, 50% 100%, 0 55%, 0 15%); }
html.land .ui3-block::after {
content: ""; position: absolute; left: 50%; top: 40%; width: 110%; aspect-ratio: 1; translate: -50% -50%;
background: repeating-conic-gradient(rgba(235, 245, 255, .95) 0deg 4deg, rgba(235, 245, 255, 0) 4deg 30deg);
-webkit-mask-image: radial-gradient(circle, transparent 26%, #000 30%, #000 44%, transparent 50%); mask-image: radial-gradient(circle, transparent 26%, #000 30%, #000 44%, transparent 50%);
}
html.land .ui3-struck {
z-index: 47; font-style: normal; font-weight: 900; white-space: nowrap; line-height: 1; font-size: max(calc(14 * var(--u)), 12px);
color: #c3c9d2; text-decoration: line-through; text-decoration-color: #ff5a48; text-decoration-thickness: calc(2 * var(--u));
text-shadow: 0 1px 2px #000, 0 0 calc(2 * var(--u)) #000; animation: ui3Struck calc(700ms * var(--fx-speed)) ease-out both;
}

html.land .ui3-shdrop { z-index: 33; animation: ui3ShDrop calc(560ms * var(--fx-speed)) cubic-bezier(.3, .7, .4, 1) both; }
html.land .ui3-shdrop::before { content: ""; position: absolute; left: 30%; right: 30%; top: 22%; aspect-ratio: .88; opacity: .85; clip-path: polygon(50% 0, 100% 15%, 100% 55%, 50% 100%, 0 55%, 0 15%); background: linear-gradient(180deg, #f4fbff 0%, #a8d2f5 45%, #4f86c4 100%); }
html.land .ui3-shdrop.ui3-gd::before { background: linear-gradient(180deg, #fff6d6 0%, #f0c766 45%, #b07a26 100%); }
html.land .ui3-shedge { z-index: 33; box-sizing: border-box; border-radius: calc(5 * var(--u)); border: calc(2 * var(--u)) solid #9fd0ff; box-shadow: 0 0 calc(10 * var(--u)) #6fb6ff, inset 0 0 calc(10 * var(--u)) rgba(120, 190, 255, .7); animation: ui3ShEdge calc(560ms * var(--fx-speed)) ease-out both; }
html.land .ui3-shedge.ui3-gd { border-color: #f3cf6a; box-shadow: 0 0 calc(10 * var(--u)) #e8b84a, inset 0 0 calc(10 * var(--u)) rgba(243, 207, 106, .7); }

html.land .ui3-debuff { z-index: 32; background: url("../assets/fx/e07_ray.webp") center top / 100% 100% no-repeat; filter: hue-rotate(140deg) saturate(1.3) brightness(.6); animation: ui3Debuff calc(620ms * var(--fx-speed)) ease-in both; }
html.land .stat-atk.ui3-atk-sink { animation: ui3AtkSink calc(520ms * var(--fx-speed)) ease-out; }

html.land .ui3-spikes { z-index: 3; }
html.land .ui3-spikes::before { content: ""; position: absolute; left: 12%; right: 12%; height: 34%; background: linear-gradient(0deg, #6b5230, #e8c98e 70%, #fff3d0); animation: ui3Spikes calc(420ms * var(--fx-speed)) cubic-bezier(.2, .9, .3, 1) both; }
html.land .ui3-spikes.up::before { bottom: 88%; transform-origin: 50% 100%; clip-path: polygon(0 100%, 12% 30%, 24% 100%, 38% 100%, 50% 0, 62% 100%, 76% 100%, 88% 30%, 100% 100%); }
html.land .ui3-spikes.down::before { top: 88%; transform-origin: 50% 0; background: linear-gradient(180deg, #6b5230, #e8c98e 70%, #fff3d0); clip-path: polygon(0 0, 12% 70%, 24% 0, 38% 0, 50% 100%, 62% 0, 76% 0, 88% 70%, 100% 0); }

html.land .ui3-mist { z-index: 33; }
html.land .ui3-mist::before, html.land .ui3-mist::after {
content: ""; position: absolute; bottom: 4%; width: 72%; aspect-ratio: 1.3; border-radius: 50%;
background: radial-gradient(ellipse, rgba(56, 140, 140, .85) 0%, rgba(120, 220, 110, .55) 45%, rgba(10, 52, 62, 0) 72%);
animation: ui3Mist calc(640ms * var(--fx-speed)) ease-out both;
}
html.land .ui3-mist::before { left: 0; }
html.land .ui3-mist::after { right: 0; animation-delay: calc(70ms * var(--fx-speed)); }
html.land .ui3-pline { z-index: 2; height: calc(5 * var(--u)); margin-top: calc(-2.5 * var(--u)); transform-origin: 0 50%; rotate: var(--ang); border-radius: calc(3 * var(--u)); background: linear-gradient(90deg, rgba(140, 109, 63, .2), #e2b46a 30%, #8cff9e 100%); box-shadow: 0 0 calc(8 * var(--u)) rgba(226, 180, 106, .9); animation: ui3PLine calc(600ms * var(--fx-speed)) ease-out both; }

html.land .card.card-taunt.ui3-taunt-hit > .fx-taunt { animation: ui3Taunt calc(460ms * var(--fx-speed)) ease-out; }

html.land .ui3-bpulse { z-index: 32; box-sizing: border-box; border-radius: calc(5 * var(--u)); border: calc(3 * var(--u)) solid var(--ui3-c, #f6d873); box-shadow: 0 0 calc(14 * var(--u)) var(--ui3-c, #f6d873), inset 0 0 calc(26 * var(--u)) var(--ui3-c, #f6d873); animation: ui3Bpulse calc(560ms * var(--fx-speed)) ease-out both; }

html.land .ui3-coin { z-index: 47; display: flex; align-items: center; gap: calc(2 * var(--u)); white-space: nowrap; font-style: normal; font-weight: 900; line-height: 1; font-size: max(calc(14 * var(--u)), 12px); color: #ffe08a; text-shadow: 0 1px 2px #000, 0 0 calc(4 * var(--u)) rgba(255, 200, 80, .8); animation: ui3Coin calc(900ms * var(--fx-speed)) ease-out both; }
html.land .ui3-coin::before { content: ""; width: calc(20 * var(--u)); height: calc(20 * var(--u)); background: url("../assets/ui/coin.webp") center / contain no-repeat; filter: drop-shadow(0 0 calc(3 * var(--u)) rgba(255, 210, 90, .95)); }

html.land .ui2-heal.ui3-red::before { border-color: rgba(255, 140, 120, .9); box-shadow: 0 0 calc(10 * var(--u)) rgba(240, 70, 50, .85), inset 0 0 calc(10 * var(--u)) rgba(240, 70, 50, .6); }
html.land .ui2-heal.ui3-red .ui2-leaf { background: linear-gradient(135deg, #ffd9d2, #e8443a); box-shadow: 0 0 calc(4 * var(--u)) rgba(255, 80, 60, .9); }

html.land .float.heal.ui3-wood { color: #5fd47e; text-shadow: 0 0 calc(4 * var(--u)) rgba(58, 143, 93, .95), 0 1px 2px #000; }

html.land .fx-e10-motes.ui3-fire, html.land .fx-e10-rise.ui3-fire { filter: sepia(1) saturate(5) hue-rotate(-22deg) brightness(1.1); }

@media (prefers-reduced-motion: reduce) {
html.land .stat-atk.ui3-atk-sink { animation: none; color: #9fd4ff; }
html.land .card.card-taunt.ui3-taunt-hit > .fx-taunt { animation: none; filter: brightness(1.6); }
}

html.land .fx.ui4-bshow { left: 0; top: 0; width: 100%; height: 100%; opacity: 1; pointer-events: auto; z-index: 90; overflow: hidden; cursor: pointer; will-change: auto; animation: none; }
html.land .ui4-bshow .ui4-cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
html.land .ui4-bshow .ui4-box { position: absolute; pointer-events: none; }
html.land .ui4-bshow .ui4-title {
position: absolute; translate: -50% -50%; white-space: nowrap; pointer-events: none;
font-size: calc(30 * var(--u)); font-weight: 700; letter-spacing: .14em; line-height: 1.2;
color: var(--ui4-tc, #f6d77e);
text-shadow: 0 0 calc(10 * var(--u)) rgba(0,0,0,.65), 0 calc(2 * var(--u)) 0 rgba(0,0,0,.6);
opacity: 0; animation: ui4Title calc(var(--ui4-t, 1800ms) * var(--fx-speed, 1)) ease-out both;
}
html.land .ui4-bshow.ui4-foe .ui4-title { font-size: calc(24 * var(--u)); }
html.land .ui4-bshow.ui4-metal { --ui4-tc: #f6d77e; }
html.land .ui4-bshow.ui4-wood { --ui4-tc: #a8e59a; }
html.land .ui4-bshow.ui4-water { --ui4-tc: #a6dcff; }
html.land .ui4-bshow.ui4-fire { --ui4-tc: #ffb877; }
html.land .ui4-bshow.ui4-earth { --ui4-tc: #e8cb94; }
html.land .ui4-bshow.ui4-zt { --ui4-tc: #ffe28a; }
html.land .ui4-bshow .ui4-skip {
position: absolute; right: calc(14 * var(--u)); bottom: calc(8 * var(--u)); pointer-events: none;
font-size: calc(10 * var(--u)); letter-spacing: .08em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7);
opacity: 0; animation: ui4Skip calc(var(--ui4-t, 1800ms) * var(--fx-speed, 1)) linear both;
}
html.land .card.ui4-lit { animation: ui4Lit calc(760ms * var(--ui4-k, 1)) ease-out 1; }

html.land.compact:not(.in-tut) #relic-slot-0 > .relic-cap, html.land.compact:not(.in-tut) #cpt-bt-relic-0 > .relic-cap { left: auto; right: 0; transform: none; text-align: right; }
html.land.compact:not(.in-tut) #relic-slot-1 > .relic-cap, html.land.compact:not(.in-tut) #cpt-bt-relic-1 > .relic-cap { left: 0; transform: none; text-align: left; max-width: calc(46 * var(--u)); }

html.land.compact:not(.in-tut) #relic-slot-1 > .relic-cap, html.land.compact:not(.in-tut) #cpt-bt-relic-1 > .relic-cap { max-width: max(calc(66 * var(--u)), 68px); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .prep-hero, html.land.compact:not(.in-tut) #scr-battle .bt-dock .bt-skill { left: calc(var(--tbl-cc) + 68 * var(--u) + max(calc(66 * var(--u)), 68px)); }

html.land .fx.ui3.kunwu-slash { opacity: 1; pointer-events: none; overflow: hidden; }
html.land .kunwu-slash::before, html.land .kunwu-slash::after {
content: ''; position: absolute; left: -10%; top: 50%; width: 120%; height: calc(5 * var(--u)); margin-top: calc(-2.5 * var(--u));
background: linear-gradient(90deg, rgba(255,255,255,0), #fffbe8 35%, #f3d27a 60%, rgba(243,210,122,0));
filter: drop-shadow(0 0 calc(4 * var(--u)) #ffe9a8); rotate: -32deg;
animation: kunwuSlash calc(420ms * var(--fx-speed, 1)) ease-out both;
}
html.land .kunwu-slash::after { rotate: 28deg; animation-delay: calc(60ms * var(--fx-speed, 1)); }

html.land.compact:not(.in-tut) .relic-slot > .relic-cap, html.land.compact:not(.in-tut) .cpt-bt-relic > .relic-cap { white-space: normal; line-height: 1.1; overflow-wrap: normal; word-break: normal; text-wrap: balance; width: max-content; }

html.land .audio-diag { position: fixed; left: 8px; top: 8px; right: 8px; z-index: 9999; max-height: 70%; overflow: auto; white-space: pre-wrap; word-break: break-all;
font-family: Menlo, monospace; font-size: max(calc(11 * var(--u)), 12px); line-height: 1.35; color: #b8f5b0; background: rgba(0,0,0,.85); border: 1px solid #4a8; border-radius: 6px; padding: 8px; }

html.land.compact:not(.in-tut) #relic-slot-0 > .relic-cap, html.land.compact:not(.in-tut) #cpt-bt-relic-0 > .relic-cap,
html.land.compact:not(.in-tut) #relic-slot-1 > .relic-cap, html.land.compact:not(.in-tut) #cpt-bt-relic-1 > .relic-cap { min-width: 100%; text-align: center; }

html.land.compact .tips #tip-point { width: 38px; height: 38px; }
html.land.compact .tips #tip-point .hand-art { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 2px 4px rgba(0,0,0,.6)); }

html.land .omen-open { cursor: pointer; }
html.land .omen-open .omen-open-card { width: calc(250 * var(--u)); text-align: center; color: #f3e2b6; }
html.land.compact .omen-open .omen-open-card { width: calc(260 * var(--u)); color: var(--tbl-ink); }
html.land .omen-open-kicker { font-size: max(calc(11 * var(--u)), 12px); line-height: 1.3; font-weight: 700; letter-spacing: .18em; color: #e9c46a; }
html.land.compact .omen-open-kicker { color: var(--tbl-cinnabar); }
html.land .omen-open-row { display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); margin-top: calc(6 * var(--u)); margin-bottom: calc(4 * var(--u)); }
html.land .omen-open-row .omen-icon { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
html.land .omen-open-name { font-size: max(calc(20 * var(--u)), 18px); line-height: 1.2; font-weight: 800; letter-spacing: .06em; }
html.land .omen-open-hint { font-size: max(calc(14 * var(--u)), 14px); line-height: 1.45; font-weight: 700; overflow-wrap: break-word; }
html.land .omen-open-tap { margin-top: calc(8 * var(--u)); font-size: max(calc(11 * var(--u)), 12px); line-height: 1.3; opacity: .62; }

html.land .ui5-pulse .omen-icon { animation: ui5Pulse 1.3s ease-in-out 1; }
html.land .ui5-flash .omen-icon { animation: ui5Flash .85s ease-out 1; }

html.land .card > .ui5-omen-tag {
position: absolute; left: calc(2 * var(--u)); right: calc(2 * var(--u)); top: 30%; width: -webkit-fit-content; width: fit-content; margin-left: auto; margin-right: auto;
box-sizing: border-box; z-index: 9; pointer-events: none; max-height: 2.8em;
display: block; text-align: center; white-space: normal; word-break: keep-all; overflow-wrap: normal; overflow: hidden;
padding-left: calc(4 * var(--u)); padding-right: calc(4 * var(--u)); border-radius: calc(3 * var(--u));
font-style: normal; font-weight: 800; line-height: 1.25; font-size: max(calc(10 * var(--u)), 12px);
color: #fff3c4; background: rgba(10, 20, 36, .8); border: 1px solid #f3d36b; text-shadow: 0 1px 2px #000;
animation: ui5Tag 1.2s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
html.land .ui5-pulse .omen-icon, html.land .ui5-flash .omen-icon { animation: none; }
html.land .card > .ui5-omen-tag { animation: none; }
}

html.land:not(.compact):not(.in-tut) #scr-battle:not(.tutorial-demo) .arena .bt-omen-desk {
position: absolute; top: calc(-18 * var(--u)); left: calc(50 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u)); z-index: 2; pointer-events: none;
}
html.land:not(.compact) #scr-battle .bt-omen-desk .omen-icon { width: 100%; height: 100%; }
html.land.compact #scr-battle .bt-omen-desk { display: none; }

html.land .card > .ui5-omen-tag { top: 8%; }

html.land #scr-prep .prep-dock .relic-slot[hidden], html.land .cpt-bt-relic[hidden] { display: none; }
html.land:not(.compact):not(.in-tut) #scr-prep .prep-dock .relic-slots[data-cap="4"] {
display: grid; grid-template-columns: repeat(2, calc(19 * var(--u))); grid-auto-rows: calc(19 * var(--u)); gap: calc(2 * var(--u));
}
html.land:not(.compact):not(.in-tut) #scr-prep .prep-dock .relic-slots[data-cap="4"] .relic-slot { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }
html.land:not(.compact):not(.in-tut) #scr-prep .prep-dock .relic-slots[data-cap="4"][hidden] { display: none; }
html.land:not(.compact):not(.in-tut) #scr-prep .prep-dock #relic-more, html.land:not(.compact) #cpt-bt-relic-more { display: none; }

html.land:not(.compact):not(.in-tut) #scr-prep.ui6-deep4 .prep-dock { gap: calc(2 * var(--u)); }
html.land:not(.compact):not(.in-tut) #scr-prep.ui6-deep4 .prep-dock #btn-sell, html.land:not(.compact):not(.in-tut) #scr-prep.ui6-deep4 .prep-dock #btn-fight { width: calc(74 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep .prep-dock #relic-slot-2, html.land.compact:not(.in-tut) #scr-prep .prep-dock #relic-slot-3 { display: none; }
html.land.compact:not(.in-tut) #scr-prep .prep-dock #relic-more, html.land.compact:not(.in-tut) #cpt-bt-relic-more {
left: calc(var(--tbl-cc) - 49 * var(--u) - 2 * var(--bw42));
}
html.land.compact:not(.in-tut) #scr-prep .prep-dock #relic-more[hidden], html.land.compact:not(.in-tut) #cpt-bt-relic-more[hidden] { display: none; }
html.land.compact:not(.in-tut) .ui6-deep4 #relic-slot-0 > .relic-cap, html.land.compact:not(.in-tut) .ui6-deep4 #cpt-bt-relic-0 > .relic-cap { max-width: 100%; }

html.land.compact:not([lang^="zh"]):not(.in-tut) #scr-prep .prep-dock #relic-more, html.land.compact:not([lang^="zh"]):not(.in-tut) #cpt-bt-relic-more {
left: calc(var(--tbl-cc) - 65 * var(--u) - 2 * var(--bw42));
}
html.land.compact:not([lang^="zh"]):not(.in-tut) .ui6-deep4 #relic-slot-0 > .relic-cap, html.land.compact:not([lang^="zh"]):not(.in-tut) .ui6-deep4 #cpt-bt-relic-0 > .relic-cap { max-width: calc(100% + 16 * var(--u)); }
html.land.compact:not(.in-tut) .ui6-more > .relic-cap { left: 0; right: 0; transform: none; width: auto; min-width: 0; max-width: 100%; text-align: center; }
html.land.compact:not(.in-tut) .ui6-more .relic-icon { width: 100%; height: 100%; }
html.land.compact:not(.in-tut) .ui6-more.is-stack .relic-icon { box-shadow: calc(3 * var(--u)) calc(-3 * var(--u)) 0 calc(-1 * var(--u)) rgba(201,162,74,.85); }
html.land.compact:not(.in-tut) .ui6-more > .ui6-more-n {
position: absolute; right: 0; bottom: 0; z-index: 2; pointer-events: none;
min-width: calc(18 * var(--u)); padding-left: calc(3 * var(--u)); padding-right: calc(3 * var(--u)); border-radius: calc(8 * var(--u));
font-style: normal; font-weight: 800; line-height: 1.2; font-size: max(calc(11.5 * var(--u)), 12px); text-align: center;
color: #fff3c4; background: var(--tbl-cinnabar, #a3392c); box-shadow: 0 0 0 1px rgba(243,211,107,.85);
}

html.land #scr-prep .prep-dock #btn-refine[hidden] { display: none; }
html.land.compact:not(.in-tut) #scr-prep .prep-dock #btn-refine:not([hidden]) { display: block; position: absolute; left: calc(var(--tbl-x1) - 66 * var(--u)); top: calc(132 * var(--u) - max(calc(19 * var(--u)), 22px)); width: calc(66 * var(--u)); height: max(calc(38 * var(--u)), 44px); margin: 0; order: 0; z-index: 3; font-size: max(calc(13 * var(--u)), 13px); font-weight: 700; line-height: 1.1; white-space: normal; --btn-pad: 0px; --btn-lift: 0px; --btn-press: 0px; }

html.land.compact:not(.in-tut) #scr-prep.ui6-rf .p-shop #btn-reroll { visibility: hidden; }

html.land:not(.compact):not(.in-tut) #scr-prep .prep-dock #btn-refine:not([hidden]) { position: absolute; left: calc(316 * var(--u)); top: calc(20 * var(--u)); width: calc(150 * var(--u)); height: calc(26 * var(--u)); min-height: 0; margin: 0; z-index: 3; font-size: calc(12 * var(--u)); line-height: 1; letter-spacing: .02em; --btn-pad: 0px; --btn-lift: calc(2.5 * var(--u)); }
html.land:not(.compact):not(.in-tut) #scr-prep.ui6-rf .prep-dock .tip { visibility: hidden; }

html.land .ui6-rf-ask { font-weight: 800; }
html.land .ui6-rf-desc { margin-top: calc(4 * var(--u)); font-weight: 400; }
html.land.compact .confirm-card .ui6-rf-desc { font-weight: 600; }

html.land .land-bond-desc > .ui6-rf-tag {
display: inline-block; margin-right: calc(4 * var(--u)); padding-left: calc(3 * var(--u)); padding-right: calc(3 * var(--u)); border-radius: calc(3 * var(--u));
font-size: calc(10 * var(--u)); line-height: 1.3; font-weight: 700; color: #f3d27a; background: rgba(217,180,90,.2); border: 1px solid rgba(217,180,90,.6);
}
html.land.compact:not(.in-tut) #cpt-bonds .cpt-dot.ui6-rf { opacity: 1; }
html.land.compact:not(.in-tut) #cpt-bonds .cpt-dot.ui6-rf b {
color: var(--tbl-cinnabar, #a3392c); text-decoration: underline; text-decoration-color: #c99a2e; text-decoration-thickness: calc(2 * var(--u)); text-underline-offset: calc(1 * var(--u));
}
html.land.compact:not(.in-tut) #cpt-bonds .cpt-dot.ui6-rf i { box-shadow: 0 0 0 calc(1.5 * var(--u)) #e0b64a, 0 0 calc(4 * var(--u)) #e0b64a; }

html.land.compact:not(.in-tut) #scr-prep .prep-dock #btn-sell:not(:disabled) { top: calc(158 * var(--u) + max(0px, 44px - 40 * var(--u))); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock #btn-fight { top: calc(210 * var(--u) + 2 * max(0px, 44px - 40 * var(--u))); }

html.land.compact:not(.in-tut) #scr-prep .prep-dock #btn-fight { display: flex; align-items: center; justify-content: center; line-height: 1; }
html.land.compact:not(.in-tut)[lang^="zh"] #scr-prep .prep-dock #btn-fight { font-size: max(calc(20 * var(--u)), 20px); letter-spacing: 0; word-spacing: -0.25em; }

html.land.compact:not(.in-tut) #scr-prep .cpt-bonds.cpt-sign { display: flex; flex-direction: column; justify-content: center; }
html.land:not(.in-tut) #scr-battle:not(.tutorial-demo) .arena .side-label { line-height: calc(17 * var(--u)); }

html.land.compact:not([lang^="zh"]):not(.in-tut) #scr-prep .cpt-cap { max-width: calc(435 * var(--u) - 2 * var(--bw41) - var(--tbl-tl) - max(calc(46 * var(--u)), 44px) - 2 * var(--bw41) - 17 * var(--u)); }

html.land #scr-start .omen-chip.home-omen { display: inline-flex; align-items: center; justify-content: center; padding-left: calc(6 * var(--u)); padding-right: calc(6 * var(--u)); }

html.land:not(.compact) #scr-prep .prep-dock #btn-sell { --face-top: 0; --face-bottom: .82; }

html.land #scr-start .omen-chip.home-omen { padding-top: calc(2 * var(--u)); padding-bottom: calc(2 * var(--u)); }
html.land #scr-battle .bt-paused, html.land .bt-paused#bt-paused { padding-bottom: 14px; }

html.land:not(.in-tut) #scr-battle .bt-paused { padding-top: calc(7 * var(--u)); padding-bottom: calc(8 * var(--u)); }

html.land.compact:not(.in-tut) .cpt-bt-edots { top: calc(19 * var(--u)); align-items: center; }
html.land.compact:not(.in-tut) .cpt-bt-edots .cpt-dot { align-items: center; opacity: .55; }
html.land.compact:not(.in-tut) .cpt-bt-edots .cpt-dot.on { opacity: 1; }
html.land.compact:not(.in-tut) .cpt-bt-edots .cpt-dot b { font-size: max(calc(11.5 * var(--u)), 12px); line-height: 1; }

html.land:not(.compact):not(.in-tut) #scr-prep .prep-dock .hero-block > .hero-plate { --np-h: calc(16 * var(--u)); margin-top: calc(-6.5 * var(--u)); }
html.land:not(.compact):not(.in-tut) #scr-battle .bt-dock .hero-block > .hero-plate { --np-h: calc(16 * var(--u)); margin-top: calc(-7.5 * var(--u)); }
html.land:not(.compact):not(.in-tut) #scr-prep .prep-top .lord-block > .hero-plate { --np-h: calc(18 * var(--u)); top: calc(11.6 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-block > .hero-plate { --np-h: max(calc(21 * var(--u)), 22px); margin-top: calc(12 * var(--u) - 0.473 * max(calc(22 * var(--u)), 23px) - 0.5 * max(calc(21 * var(--u)), 22px)); }
html.land.compact:not(.in-tut) #scr-battle .bt-dock .hero-block > .hero-plate { --np-h: max(calc(21 * var(--u)), 22px); margin-top: calc(10 * var(--u) - 0.473 * max(calc(22 * var(--u)), 23px) - 0.5 * max(calc(21 * var(--u)), 22px)); }

html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-block > .hero-plate, html.land.compact:not(.in-tut) #scr-battle .bt-dock .hero-block > .hero-plate { --np-cap: calc(19 * var(--u) * 80 / 112); }
html.land:not(.compact):not(.in-tut) #scr-prep .prep-dock .hero-block > .hero-plate, html.land:not(.compact):not(.in-tut) #scr-battle .bt-dock .hero-block > .hero-plate { --np-cap: calc(18 * var(--u) * 80 / 112); }

html.land:not(.in-tut) #scr-battle #bt-overlay #ov-lord { --pl-h: calc(19 * var(--u)); }
html.land:not(.in-tut) #scr-battle #bt-overlay #ov-hero { --pl-h: calc(20 * var(--u)); }
html.land.compact:not(.in-tut) #scr-battle #bt-overlay #ov-lord { --pl-h: max(calc(20 * var(--u)), 20px); }
html.land.compact:not(.in-tut) #scr-battle #bt-overlay #ov-hero { --pl-h: max(calc(20 * var(--u)), 20px); }
html.land:not(.in-tut) #scr-battle #bt-overlay.has-reasons #ov-hero { --pl-h: max(calc(19 * var(--u)), 19px); }

html.land.compact:not(.in-tut) .mk-silence { font-size: max(calc(10 * var(--u)), 12px); min-width: max(calc(12 * var(--u)), 14px); height: max(calc(12 * var(--u)), 14px); line-height: max(calc(12 * var(--u)), 14px); }

html.land.compact.host-xhs:not([lang^="zh"]):not(.in-tut) #scr-prep .p-shop #btn-reroll { font-size: max(calc(12 * var(--u)), 12px); }
html.land.compact.host-xhs:not([lang^="zh"]):not(.in-tut) #scr-prep .prep-dock #btn-fight { font-size: max(calc(15 * var(--u)), 15px); }

html.land.compact.host-xhs:not([lang^="zh"]):not(.in-tut) #scr-prep .cpt-cap { max-width: calc(435 * var(--u) - 2 * var(--bw41) - var(--tbl-tl) - max(calc(46 * var(--u)), 44px) - 2 * var(--bw41) - 17 * var(--u) + 10px); word-spacing: -0.15em; }
html.land.compact.host-xhs:not([lang^="zh"]):not(.in-tut) #scr-battle .cpt-bt-capwrap .cpt-bt-cap { word-spacing: -0.15em; }

html.land.compact .swap-ask { font-size: max(calc(11 * var(--u)), 12px); }

html.land:not(.compact):not(.in-tut) #scr-prep .prep-top .lord-block > .hero-plate { max-width: calc(100 * var(--u)); --np-cap: calc(20 * var(--u) * 80 / 112); }

html.land.compact:not([lang^="zh"]):not(.in-tut) #scr-prep .prep-dock .hero-block > .hero-plate, html.land.compact:not([lang^="zh"]):not(.in-tut) #scr-battle .bt-dock .hero-block > .hero-plate { --np-cap: calc(19 * var(--u) * 44 / 112); --np-gap: 3.2px; letter-spacing: -0.06em; }

html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-block > .hero-plate, html.land.compact:not(.in-tut) #scr-battle .bt-dock .hero-block > .hero-plate { --np-gap: max(calc(3.5 * var(--u)), 3.5px); }
html.land.compact:not([lang^="zh"]):not(.in-tut) #scr-prep .prep-dock .hero-block > .hero-plate, html.land.compact:not([lang^="zh"]):not(.in-tut) #scr-battle .bt-dock .hero-block > .hero-plate { --np-gap: 3.2px; letter-spacing: -0.06em; }

html.land.compact:not([lang^="zh"]):not(.in-tut) .cpt-bt-edots { left: calc(426 * var(--u)); }

html.land.compact:not([lang^="zh"]) .omen-open .omen-open-card { width: calc(360 * var(--u)); }

html.land.compact .swap-ask { max-width: calc(360 * var(--u)); }

html.land.compact:not([lang^="zh"]):not(.in-tut) #scr-prep .prep-dock #btn-refine:not([hidden]) { font-size: max(calc(12 * var(--u)), 12px); letter-spacing: 0; }
html.land.compact.host-xhs:not([lang^="zh"]):not(.in-tut) #scr-prep .prep-dock #btn-refine:not([hidden]) { left: calc(var(--tbl-x1) - 66 * var(--u) - 9px); width: calc(66 * var(--u) + 9px); }

html.land:not(.in-tut) .ld-tiers .skill-tier:has(.tier-reach) { margin-top: calc(11 * var(--u)); }
html.land:not(.in-tut) .ld-tiers .tier-reach { top: calc(-11 * var(--u)); }

html.land .lord-block > .hero-plate, html.land .hero-block > .hero-plate, html.land #bt-overlay .duel-face > .hero-plate {
display: flex; align-items: center; justify-content: center;
padding-top: 1px; padding-bottom: 0;
}

html.land.compact:not(.in-tut) #scr-prep .row-shop, html.land.compact:not(.in-tut) #scr-prep .row-shop[data-n] { top: calc(57 * var(--u) + var(--vs)); }

html.land:not(.compact):not(.in-tut) #scr-prep .prep-dock .hero-block > .hero-plate { --np-h: calc(17 * var(--u)); margin-top: calc(-7 * var(--u)); --np-gap: calc(3.5 * var(--u)); }
html.land:not(.compact):not(.in-tut) #scr-battle .bt-dock .hero-block > .hero-plate { --np-h: calc(17 * var(--u)); margin-top: calc(-8 * var(--u)); --np-gap: calc(3.5 * var(--u)); }
html.land:not(.compact):not(.in-tut) #scr-prep .prep-top .lord-block > .hero-plate { --np-h: calc(19 * var(--u)); top: calc(11.1 * var(--u)); }

html.land.compact .ld-meta, html.land.compact .ld-meta *, html.land.compact .ld-py, html.land.compact .ld-rel-line, html.land.compact .ld-rel-line *, html.land.compact .ld-skill,
html.land.compact .ld-tiers .tier-star, html.land.compact .ld-tiers .tier-txt, html.land.compact .ld-tiers .tier-reach, html.land.compact .ld-kws-title, html.land.compact .ld-kw-name, html.land.compact .ld-kw-desc,
html.land.compact .ld-src-title, html.land.compact .ld-src-where, html.land.compact .ld-src-text, html.land.compact .ld-lore, html.land.compact .ld-lore-tag, html.land.compact .ld-hint,
html.land.compact .hero-pop, html.land.compact #hero-pop-sub, html.land.compact #hero-pop-text, html.land.compact #hero-pop-foot { font-size: max(calc(10.5 * var(--u)), 12px); }
html.land.compact .ld-name-main, html.land.compact #hero-pop-head { font-size: max(calc(13 * var(--u)), 14px); }

html.land.compact:not(.in-tut) .ld-tiers .tier-reach { line-height: 14px; top: -15px; }
html.land.compact:not(.in-tut) .ld-tiers .skill-tier:has(.tier-reach) { margin-top: 16px; }

html.land.compact:not(.in-tut) .ld-rel-line { flex-wrap: wrap; white-space: normal; line-height: 1.3; }
html.land.compact:not(.in-tut) .ld-rel-el { overflow: visible; text-overflow: clip; }

html.land #scr-start.gate {

--ga-ink: var(--k-ink); --ga-mist: var(--k-ink-2); --ga-silk: var(--k-paper); --ga-gold: var(--k-gold); --ga-cloud: var(--k-on-dark); --ga-cin: var(--k-cin);
--s: min(calc(var(--vh) * 100 / 946), calc(var(--vw) * 100 / 1560));
--ga-side: max(calc(34 * var(--u)), 48px);
}

html.land.rot #scr-start.gate { --ga-side: 20px; }
html.land #scr-start.gate:not([hidden]) {
background: #d9d6c4 url("../assets/bg/splash.webp") center / cover no-repeat;
}
html.land #scr-start.gate .start-wrap { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; width: auto; padding: 0; display: block; }
html.land #scr-start.gate [hidden] { display: none !important; }
html.land #scr-start.gate .crest, html.land #scr-start.gate .brand-sub, html.land #scr-start.gate .ring-deco { display: none; }

html.land #scr-start.gate .gate-mid { position: static; }
html.land #scr-start.gate .brand {
position: absolute; left: calc(50% - 320 * var(--s)); top: calc(75 / 946 * 100%); margin: 0;
width: calc(640 * var(--s)); height: calc(224 * var(--s));
display: flex; align-items: center; justify-content: center;
background: url("../assets/ui/home_plaque.webp") center / 100% 100% no-repeat;
}
html.land #scr-start.gate .brand-title {
width: calc(560 * var(--s)); height: calc(150 * var(--s)); margin: 0; overflow: hidden; white-space: nowrap;
font-size: max(calc(12 * var(--u)), 12px); line-height: calc(150 * var(--s)); color: transparent; text-shadow: none; letter-spacing: 0; text-indent: 0;
background: url("../assets/ui/home_title_zh.webp") center / 100% 100% no-repeat;
}
html.land:not([lang^="zh"]) #scr-start.gate .brand-title { background-image: url("../assets/ui/home_title_en.webp"); }

html.land #scr-start.gate .gate-low {
position: absolute; left: calc(50% - 304 * var(--s)); bottom: calc(146 / 946 * 100%); width: calc(608 * var(--s)); margin: 0;
display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}
html.land #scr-start.gate.fresh-visit .gate-low { top: calc(448 / 946 * 100%); bottom: auto; justify-content: flex-start; }

html.land #scr-start.gate .gate-low .btn-main, html.land #scr-start.gate .gate-low .btn-sub { flex: none; margin: 0; max-width: 100%; }
html.land #scr-start.gate .gate-low .btn-main {
order: 2; width: calc(608 * var(--s)); --k-btn-main-h: max(calc(124 * var(--s)), 48px); margin-bottom: max(calc(14 * var(--s)), 6px);
font-size: max(calc(19 * var(--u)), 16px); letter-spacing: .08em; text-indent: .08em; white-space: nowrap;
}
html.land:not([lang^="zh"]) #scr-start.gate .gate-low .btn-main { font-size: max(calc(15 * var(--u)), 14px); letter-spacing: .02em; text-indent: .02em; }
html.land #scr-start.gate .gate-low .btn-sub {
order: 3; width: calc(512 * var(--s)); --k-btn-sub-h: max(calc(104 * var(--s)), 44px);
font-size: max(calc(13.5 * var(--u)), 13px); letter-spacing: .04em; text-indent: .04em;
}
html.land:not([lang^="zh"]) #scr-start.gate .gate-low .btn-sub { font-size: max(calc(12.5 * var(--u)), 13px); letter-spacing: 0; text-indent: 0; }

html.land #app #scr-start.gate.fresh-visit .gate-low { padding-top: calc(max(calc(106 * var(--s)), 44px) + 14 * var(--s)); }
html.land #app #scr-start.gate.fresh-visit .gate-low #btn-start { letter-spacing: .18em; text-indent: .18em; }
html.land:not([lang^="zh"]) #app #scr-start.gate.fresh-visit .gate-low #btn-start { letter-spacing: .1em; text-indent: .1em; }

html.land #scr-start.gate .resume-box { order: 2; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0; }
html.land #app #scr-start.gate .gate-low #btn-resume { order: 0; font-size: max(calc(15 * var(--u)), 14px); letter-spacing: .04em; text-indent: 0; white-space: nowrap; padding-left: calc(60 * var(--s)); padding-right: calc(60 * var(--s)); }
html.land #app #scr-start.gate .gate-low #btn-restart { order: 0; }

html.land #scr-start.gate .fc-corner {
position: absolute; left: var(--ga-side); top: calc(385 / 946 * 100%); bottom: auto; margin: 0; width: calc(352 * var(--s));
display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--s));
}
html.land #scr-start.gate.fresh-visit #fc-corner:not([hidden]) { display: flex !important; }
html.land #scr-start.gate .fc-poke { width: calc(352 * var(--s)); height: calc(352 * var(--s)); }
html.land #scr-start.gate .fc-art { border-radius: 0; box-shadow: none; object-fit: contain; object-position: 50% 50%; }
html.land #scr-start.gate .fc-line {
max-width: none; width: max-content; text-align: center; white-space: nowrap;
font-size: max(calc(10 * var(--u)), 12px); line-height: 1.35; letter-spacing: 0;
}
html.land #scr-start.gate.fresh-visit .fc-line { display: none; }

html.land #scr-start.gate #btn-dex {
position: absolute; right: calc(var(--ga-side) + 30 * var(--s)); top: calc(735 / 946 * 100% - max(calc(288 * var(--s)), 124px) * 192 / 288); margin: 0;
width: max(calc(288 * var(--s)), 124px); height: calc(max(calc(288 * var(--s)), 124px) * 192 / 288); min-height: 0;
display: block; z-index: 0;
border: 0; border-image: none; border-radius: 0; background: none; box-shadow: none;
padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0;
--btn-edge: 0px; --btn-pad: 0px; --btn-lift: 0px; --btn-press: 0px;
letter-spacing: 0; text-indent: 0; text-shadow: none;
}
html.land #scr-start.gate #btn-dex::before {
content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1;
background: url("../assets/ui/home_codex.webp") center / 100% 100% no-repeat;
}
html.land #scr-start.gate #btn-dex:active { border-image: none; transform: translateY(calc(2 * var(--s))); }
html.land #scr-start.gate .gate-dex-sign {
position: absolute; left: calc(118.5 / 288 * 100%); top: calc(30.5 / 192 * 100%); width: calc(47 / 288 * 100%); height: calc(79 / 192 * 100%);
box-sizing: border-box; transform: skewX(-22deg);
display: flex; align-items: center; justify-content: center;
color: var(--ga-ink); font-size: max(calc(11 * var(--u)), 12px); line-height: 1.05; font-weight: 800; letter-spacing: 0; text-align: center; white-space: normal;
}
html.land:not([lang^="zh"]) #scr-start.gate .gate-dex-sign {
left: 50%; top: calc(70 / 192 * 100%); width: auto; height: auto; transform: translate(-56%, -50%) skewX(-22deg);
padding-left: max(calc(14 * var(--s)), 6px); padding-right: max(calc(14 * var(--s)), 6px); padding-top: max(calc(8 * var(--s)), 4px); padding-bottom: max(calc(8 * var(--s)), 4px);
background: var(--k-on-dark); box-shadow: inset 0 0 0 max(calc(3 * var(--s)), 1px) var(--k-gold); letter-spacing: 0; white-space: nowrap;
}

html.land #scr-start.gate .gate-tools {
position: absolute; right: calc(var(--ga-side) + 18 * var(--s)); top: calc(738 / 946 * 100%); bottom: auto;
display: flex; align-items: flex-start; gap: calc(16 * var(--s));
}

html.land #scr-start.gate .gate-tool {
--k-round: max(calc(84 * var(--s)), 38px);
position: relative; margin: 0; order: 0; flex: none; width: max(calc(110 * var(--s)), 44px); height: auto; min-height: max(calc(122 * var(--s)), 48px);
flex-direction: column; justify-content: flex-start; gap: calc(2 * var(--s)); padding-top: 0; padding-bottom: 0;
color: var(--k-on-dark); font-size: max(calc(11 * var(--u)), 12px); line-height: 1.1; letter-spacing: 0; text-indent: 0;
text-shadow: 0 0 calc(4 * var(--s)) var(--k-ink), 0 calc(1 * var(--s)) calc(3 * var(--s)) var(--k-ink), 0 0 calc(8 * var(--s)) var(--k-ink);
}
html.land #scr-start.gate .gate-tool::before { top: calc(var(--k-round) / 2); }
html.land #scr-start.gate #btn-howto > span { max-width: max(calc(130 * var(--s)), 50px); text-align: center; white-space: normal; }
html.land #scr-start.gate .gate-ico, html.land #scr-start.gate .gate-globe {
display: block; flex: none; width: var(--k-round); height: var(--k-round); margin: 0;
background: url("../assets/ui/home_icon_help.webp") center / 76% 76% no-repeat;
}
html.land #scr-start.gate .gate-globe { background-image: url("../assets/ui/home_icon_language.webp"); }

html.land #scr-start.gate #btn-mute::after {
content: ""; position: absolute; left: 50%; top: calc(var(--k-round) / 2); width: var(--k-round); height: var(--k-round); transform: translate(-50%, -50%);
background: var(--snd-on) center / 76% 76% no-repeat; pointer-events: none; z-index: 1;
}
html.land #scr-start.gate #btn-mute.is-muted::after { background-image: var(--snd-off); }
html.land #scr-start.gate #btn-lang .lang-sep, html.land #scr-start.gate #btn-lang .lang-opt:not(.on) { display: none; }
html.land #scr-start.gate #btn-lang .lang-opt.on { color: inherit; font-weight: 700; opacity: 1; }

html.land #scr-start.gate.fresh-visit .gate-trial, html.land #scr-start.gate.fresh-visit .gate-best { display: none; }

html.land .gate-sheet { --s: min(calc(var(--vh) * 100 / 946), calc(var(--vw) * 100 / 1560)); }
html.land .gate-sheet .gate-sheet-card {
--k-paper-h: max(calc(84 * var(--u)), 72px);
width: min(max(calc(860 * var(--s)), 310px), calc(100 * var(--vw) - 24px)); max-height: calc(100 * var(--vh) - 16px); overflow: hidden;
text-align: center; font-size: max(calc(12 * var(--u)), 13px); line-height: 1.45;
}
html.land .gate-sheet .gate-sheet-title {
font-size: max(calc(16 * var(--u)), 16px); line-height: 1.25; font-weight: 800; letter-spacing: .12em; color: var(--k-ink); margin-bottom: calc(3 * var(--u));
}
html.land:not([lang^="zh"]) .gate-sheet .gate-sheet-title { letter-spacing: .02em; }
html.land .gate-sheet .today-line {
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: calc(8 * var(--u)); margin: 0 0 calc(8 * var(--u));
}
html.land .gate-sheet .today-date, html.land .gate-sheet .today-note { font-size: max(calc(12 * var(--u)), 13px); color: var(--k-ink-2); opacity: 1; letter-spacing: .02em; }
html.land .gate-sheet .today-date { font-weight: 700; color: var(--k-ink); }
html.land .gate-sheet .omen-line {
display: block; margin: 0 0 calc(8 * var(--u)); text-align: left; white-space: normal;
padding-left: calc(10 * var(--u)); padding-right: calc(10 * var(--u)); padding-top: calc(7 * var(--u)); padding-bottom: calc(7 * var(--u));
background: rgba(var(--k-ink-rgb), .07); border-left: calc(3 * var(--u)) solid var(--k-gold);
}
html.land .gate-sheet .omen-line[hidden] { display: none; }
html.land .gate-sheet .gate-omen-head { display: flex; align-items: center; gap: calc(6 * var(--u)); margin-bottom: calc(4 * var(--u)); }
html.land .gate-sheet .gate-omen-head .omen-icon { width: max(calc(22 * var(--u)), 22px); height: max(calc(22 * var(--u)), 22px); }
html.land .gate-sheet .gate-omen-head .omen-name { font-size: max(calc(14 * var(--u)), 14px); font-weight: 800; color: var(--k-ink); }
html.land .gate-sheet .gate-omen-desc { font-size: max(calc(12 * var(--u)), 13px); line-height: 1.45; color: var(--k-ink); }
html.land .gate-sheet .gate-omen-hint { margin-top: calc(3 * var(--u)); font-size: max(calc(12 * var(--u)), 13px); line-height: 1.45; color: var(--k-cin); font-weight: 700; }
html.land .gate-sheet .gate-status { font-size: max(calc(12.5 * var(--u)), 13px); font-weight: 700; color: var(--k-ink-2); }
html.land .gate-sheet .gate-status.done { color: var(--k-ink); }
html.land .gate-sheet .gate-next { margin-top: calc(3 * var(--u)); font-size: max(calc(12 * var(--u)), 13px); color: var(--k-ink-2); }
html.land .gate-sheet .gate-rec-list { display: flex; flex-direction: column; align-items: center; gap: calc(5 * var(--u)); }
html.land .gate-sheet .gate-rec-list .daily-best, html.land .gate-sheet .gate-rec-list .streak-line, html.land .gate-sheet .gate-rec-list .free-best-line,
html.land .gate-sheet .gate-rec-list .deep-chip, html.land .gate-sheet .gate-rec-list .hint, html.land .gate-sheet .gate-rec-list .fc-count, html.land .gate-sheet .gate-rec-list .dex-seal {
margin: 0; padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; border: 0; background: none; box-shadow: none;
font-size: max(calc(12.5 * var(--u)), 13px); line-height: 1.4; color: var(--k-ink); letter-spacing: .02em; text-align: center; max-width: 100%; opacity: 1;
}
html.land .gate-sheet .gate-rec-list .daily-best { font-size: max(calc(14 * var(--u)), 14px); font-weight: 800; color: var(--k-cin); }
html.land .gate-sheet .gate-rec-list .streak-line { display: flex; gap: calc(4 * var(--u)); }
html.land .gate-sheet .gate-rec-list .streak-line[hidden], html.land .gate-sheet .gate-rec-list [hidden] { display: none; }
html.land .gate-sheet .gate-rec-list .streak-ico { width: max(calc(13 * var(--u)), 14px); height: max(calc(13 * var(--u)), 14px); }
html.land .gate-sheet .gate-rec-list .streak-sub { color: var(--k-ink-2); }
html.land .gate-sheet .gate-rec-list .streak-sub.done { color: var(--k-ink); }
html.land .gate-sheet .gate-rec-list .hint { color: var(--k-cin-d); }
html.land .gate-sheet .gate-rec-list .fc-count { color: var(--k-ink-2); }
html.land .gate-sheet .gate-rec-list .fc-seg { white-space: nowrap; }
html.land .gate-sheet .gate-rec-list .dex-seal { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); color: var(--k-gold-d); font-weight: 700; }
html.land .gate-sheet .gate-rec-list .dex-seal[hidden] { display: none; }
html.land .gate-sheet .confirm-btns { display: flex; flex-direction: column; align-items: center; margin-top: calc(4 * var(--u)); }

html.land .gate-sheet .gate-sheet-x { min-width: max(calc(300 * var(--s)), 128px); --k-btn-sub-h: max(calc(96 * var(--s)), 44px); font-size: max(calc(13 * var(--u)), 13px); letter-spacing: .04em; }

html.land .fx-x-glow { box-sizing: border-box; border-radius: calc(5 * var(--u)); border: calc(2 * var(--u)) solid var(--xg, #f6d873); box-shadow: 0 0 calc(12 * var(--u)) var(--xg, #f6d873), inset 0 0 calc(12 * var(--u)) var(--xg, #f6d873); animation: xfxGlow calc(600ms * var(--fx-speed)) ease-out both; }
html.land .fx-x-glow.el-earth { --xg: #d9a55a; }
html.land .fx-x-glow.el-water { --xg: #7cc8ff; }
html.land .fx-x-glow.el-metal { --xg: #f6d873; }

html.land .fx-tt-vortex {
background-image: url("../assets/fx/e05_vortex_sheet.webp"); background-size: 800% 100%; background-position: 0 0;
filter: sepia(1) saturate(1.6) hue-rotate(-12deg) brightness(.5) contrast(1.25);
animation: xfxSheet8 calc(var(--xt) * var(--fx-speed)) steps(8) calc(var(--xd) * var(--fx-speed)) both, xfxSeq calc(var(--xt) * var(--fx-speed)) linear calc(var(--xd) * var(--fx-speed)) both;
}
html.land .fx-tt-maw { animation: xttMaw calc(var(--xt) * var(--fx-speed)) cubic-bezier(.3, .7, .4, 1) calc(var(--xd) * var(--fx-speed)) both; }
html.land .fx-tt-maw.xfx-s { animation-name: xttMawS; }

html.land .fx-tt-maw { background: url("../assets/fx/fx_taotie_maw.webp") center / contain no-repeat; }
html.land .fx-tt-ghost {
overflow: hidden; box-sizing: border-box; border-radius: calc(5 * var(--u)); border: calc(2 * var(--u)) solid #8a6430; background: #1d1408;
filter: sepia(.7) brightness(.78) contrast(1.1);
animation: xttSpiral calc(var(--xt) * var(--fx-speed)) cubic-bezier(.45, .05, .7, .4) calc(var(--xd) * var(--fx-speed)) both;
}
html.land .fx-tt-ghost > img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
html.land .fx-tt-spark { width: 0; height: 0; animation: xttSpiral calc(var(--xt) * var(--fx-speed)) cubic-bezier(.45, .05, .7, .4) calc(var(--xd) * var(--fx-speed)) both; }
html.land .fx-tt-spark::before { content: ""; position: absolute; left: calc(-5 * var(--u)); top: calc(-5 * var(--u)); width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: radial-gradient(circle, #fff3c8 0%, #f0b850 40%, rgba(160, 100, 30, 0) 72%); }
html.land .fx-tt-bite { box-sizing: border-box; border-radius: 50%; border: calc(3 * var(--u)) solid #f0c766; box-shadow: 0 0 calc(12 * var(--u)) rgba(214, 150, 44, .95), inset 0 0 calc(10 * var(--u)) rgba(120, 70, 20, .8); animation: xttBite calc(var(--xt) * var(--fx-speed)) ease-out calc(var(--xd) * var(--fx-speed)) both; }

html.land .fx-tw-veil { transform-origin: 50% 100%; animation: xtwVeil calc(var(--xt) * var(--fx-speed)) ease-out calc(var(--xd) * var(--fx-speed)) both; }
html.land .fx-tw-veil.xfx-en { transform-origin: 50% 0; }
html.land .fx-tw-veil.xfx-s { animation-name: xtwVeilS; }
html.land .fx-tw-veil::before, html.land .fx-tw-veil::after { content: ""; position: absolute; inset: 0; }
html.land .fx-tw-veil::before { background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(90, 170, 235, .16) 0 64%, rgba(90, 170, 235, .42) 71%, rgba(150, 215, 255, .85) 79%, rgba(236, 249, 255, .98) 85%, rgba(110, 180, 240, .7) 92%, rgba(80, 160, 230, 0) 100%); }
html.land .fx-tw-veil::after {
background: repeating-linear-gradient(100deg, rgba(255, 255, 255, .55) 0 calc(1 * var(--u)), rgba(255, 255, 255, 0) calc(1 * var(--u)) calc(6 * var(--u)));
-webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 100%, transparent 70%, #000 78%, #000 92%, transparent 99%); mask-image: radial-gradient(ellipse 50% 100% at 50% 100%, transparent 70%, #000 78%, #000 92%, transparent 99%);
}
html.land .fx-tw-veil.xfx-en::before, html.land .fx-tw-veil.xfx-en::after { transform: scaleY(-1); }
html.land .fx-tw-splash { background: url("../assets/ui/burst_water.webp") center / contain no-repeat; animation: xtwSplash calc(var(--xt) * var(--fx-speed)) ease-out calc(var(--xd) * var(--fx-speed)) both; }

html.land .fx-qq-wind { animation: xqqWind calc(var(--xt) * var(--fx-speed)) ease-out calc(var(--xd) * var(--fx-speed)) both; }
html.land .fx-qq-wind::before, html.land .fx-qq-wind::after { content: ""; position: absolute; inset: 0; }
html.land .fx-qq-wind::before {
background: url("../assets/fx/e05_vortex_sheet.webp") 0 0 / 800% 100% no-repeat;
filter: grayscale(1) brightness(.28) contrast(1.6) drop-shadow(0 0 calc(2 * var(--u)) #3fb0a8) drop-shadow(0 0 calc(6 * var(--u)) rgba(10, 70, 80, .9));
animation: xfxSheet8 calc(var(--xt) * var(--fx-speed)) steps(8) calc(var(--xd) * var(--fx-speed)) both;
}
html.land .fx-qq-wind::after {
inset: -8%; border-radius: 50%;
background: repeating-conic-gradient(rgba(6, 20, 26, .85) 0deg 14deg, rgba(40, 120, 125, .5) 16deg, rgba(6, 20, 26, 0) 22deg 45deg);
-webkit-mask-image: radial-gradient(circle closest-side, transparent 34%, #000 46%, #000 78%, transparent 100%); mask-image: radial-gradient(circle closest-side, transparent 34%, #000 46%, #000 78%, transparent 100%);
animation: xqqSwirl calc(var(--xt) * var(--fx-speed)) linear calc(var(--xd) * var(--fx-speed)) both;
}
html.land .fx-qq-wind.xfx-en::after { animation-direction: reverse; }
html.land .fx-qq-wisp, html.land .fx-qq-tail { width: 0; height: 0; animation: xqqWisp calc(var(--xt) * var(--fx-speed)) cubic-bezier(.55, 0, .85, .45) calc(var(--xd) * var(--fx-speed)) both; }
html.land .fx-qq-wisp { rotate: var(--ang); }
html.land .fx-qq-wisp::before { content: ""; position: absolute; left: calc(-34 * var(--u)); top: calc(-10 * var(--u)); width: calc(46 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; background: radial-gradient(ellipse at 75% 50%, #ffffff 0%, #d9f5f1 22%, #4fb3ad 48%, rgba(10, 60, 70, 0) 75%); filter: drop-shadow(0 0 calc(4 * var(--u)) rgba(60, 170, 165, .95)); }
html.land .fx-qq-tail::before { content: ""; position: absolute; left: calc(-6 * var(--u)); top: calc(-6 * var(--u)); width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: radial-gradient(circle, #e9faf7 0%, #4fb3ad 45%, rgba(10, 60, 70, 0) 75%); }
html.land .fx-qq-flash { box-sizing: border-box; border-radius: calc(5 * var(--u)); border: calc(2 * var(--u)) solid #fff1c2; box-shadow: 0 0 calc(14 * var(--u)) #ffd76a, inset 0 0 calc(16 * var(--u)) rgba(255, 226, 140, .85); animation: xqqFlash calc(var(--xt) * var(--fx-speed)) ease-out calc(var(--xd) * var(--fx-speed)) both; }

html.land .ui3-tag.xfx-hp { --ui3-c: #f0c766; color: #ffe6a0; }
@media (prefers-reduced-motion: reduce) {
html.land .fx-tt-vortex, html.land .fx-qq-wind::before { background-position: -300% 0 !important; }
html.land .fx-qq-wind::after { animation: none; }
}

html.land .fx-kn-hit { z-index: 32; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(190, 228, 255, .8) 22%, rgba(90, 160, 240, .35) 50%, rgba(60, 130, 230, 0) 70%); animation: exbKnHit calc(300ms * var(--fx-speed)) ease-out calc(120ms * var(--fx-speed)) both; }
html.land .fx-kn-hit.fx-lite { animation-duration: calc(260ms * var(--fx-speed)); animation-delay: calc(60ms * var(--fx-speed)); }

html.land .fx-kn-wave { z-index: 2; border-radius: 50%; background: radial-gradient(circle closest-side, rgba(90, 160, 255, 0) 0 72%, rgba(90, 160, 255, .45) 84%, rgba(240, 248, 255, 1) 92%, rgba(120, 185, 255, .75) 96%, rgba(90, 160, 255, 0) 100%); animation: exbKnWave calc(600ms * var(--fx-speed)) cubic-bezier(.2, .6, .35, 1) calc((200ms + var(--fx-stagger, 0ms)) * var(--fx-speed)) both; }
html.land .fx-kn-wave.fx-lite { animation-duration: calc(380ms * var(--fx-speed)); animation-delay: calc(90ms * var(--fx-speed)); }

html.land .fx-kn-dust { z-index: 32; animation: exbKnDust calc(350ms * var(--fx-speed)) ease-out calc(200ms * var(--fx-speed)) both; }
html.land .fx-kn-dust > .fx-e09-dust { position: absolute; left: -22%; right: -22%; bottom: -4%; top: auto; width: auto; height: 52%; margin: 0; background-position: center bottom; background-size: 100% 100%; background-repeat: no-repeat; opacity: 1; animation: none; }
html.land .fx-kn-dust.fx-up > .fx-e09-dust { bottom: auto; top: -4%; transform: scaleY(-1); }

html.land .fx-kn-jolt { z-index: 32; box-sizing: border-box; border-radius: calc(5 * var(--u)); border: calc(2 * var(--u)) solid #cfe6ff; box-shadow: 0 0 calc(10 * var(--u)) #7fb8ff, inset 0 0 calc(12 * var(--u)) rgba(150, 200, 255, .75); animation: exbKnJolt calc(260ms * var(--fx-speed)) ease-out calc(650ms * var(--fx-speed)) both; }

html.land .fx-kn-bolt { z-index: 33; animation: exbKnBolt calc(320ms * var(--fx-speed)) steps(1, end) both; }
html.land .fx-kn-bolt > .fx-e06-bolt { position: absolute; left: 50%; top: -6%; width: 40%; height: 86%; margin: 0; transform: translateX(-50%); background-position: center top; background-size: contain; background-repeat: no-repeat; opacity: 1; animation: none; filter: drop-shadow(0 0 calc(4 * var(--u)) #bfe0ff); }
html.land .fx-kn-boltflash { z-index: 32; border-radius: calc(5 * var(--u)); background: radial-gradient(ellipse at 50% 35%, rgba(255, 255, 255, .85) 0%, rgba(160, 205, 255, .5) 40%, rgba(120, 180, 255, 0) 75%); animation: exbFade calc(260ms * var(--fx-speed)) ease-out calc(30ms * var(--fx-speed)) both; }

html.land .fx-bz-glow { z-index: 32; box-sizing: border-box; border-radius: calc(5 * var(--u)); border: calc(2 * var(--u)) solid #ffe08a; box-shadow: 0 0 calc(12 * var(--u)) #f3c95a, inset 0 0 calc(14 * var(--u)) rgba(255, 214, 120, .7); animation: exbFade calc(1150ms * var(--fx-speed)) ease-out both; }

html.land .slot > .fx-bz-scroll { z-index: auto; }
html.land .slot:has(> .fx-bz-scroll) { z-index: 5; }
html.land .fx-bz-scroll { animation: exbFade calc(1100ms * var(--fx-speed)) ease-out both; }
html.land .fx-bz-scroll::before {
content: ""; position: absolute; left: 50%; top: 50%; width: 200%; aspect-ratio: 1; border-radius: 50%;
background: repeating-conic-gradient(rgba(255, 226, 150, .85) 0deg 3deg, rgba(255, 226, 150, 0) 3deg 15deg);
-webkit-mask-image: radial-gradient(circle, transparent 52%, #000 56%, #000 66%, transparent 70%); mask-image: radial-gradient(circle, transparent 52%, #000 56%, #000 66%, transparent 70%);
filter: drop-shadow(0 0 calc(4 * var(--u)) rgba(255, 210, 110, .9));
animation: exbSpin calc(1100ms * var(--fx-speed)) linear both;
}

html.land .fx-bz-vortex { z-index: 32; animation: exbFade calc(620ms * var(--fx-speed)) ease-out calc(100ms * var(--fx-speed)) both; }
html.land .fx-bz-vortex > .fx-e05-vortex {
position: absolute; opacity: 1; filter: sepia(1) saturate(4) hue-rotate(-8deg) brightness(1.25);
animation: fxVortex12 calc(600ms * var(--fx-speed)) steps(12) calc(100ms * var(--fx-speed)) reverse both;
}

html.land .fx-bz-rune { z-index: 3; animation: exbBzRune calc(520ms * var(--fx-speed)) cubic-bezier(.45, .05, .55, .95) calc((300ms + var(--fx-stagger, 0ms)) * var(--fx-speed)) both; }
html.land .fx-bz-rune.fx-lite { animation-duration: calc(400ms * var(--fx-speed)); animation-delay: calc(var(--fx-stagger, 0ms) * var(--fx-speed)); }
html.land .fx-bz-rune > canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

html.land .fx-by-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("../assets/fx/fx_biyi_wing.webp") center / 100% 100% no-repeat; }

html.land .fx-bz-veil { z-index: 32; animation: exbFade calc(400ms * var(--fx-speed)) ease-out calc(850ms * var(--fx-speed)) both; }
html.land .fx-bz-veil > .fx-e08-veil { position: absolute; left: 6%; right: 6%; top: 50%; width: auto; height: auto; aspect-ratio: 1; margin: 0; transform: translateY(-50%); background-position: center; background-size: contain; background-repeat: no-repeat; opacity: 1; animation: none; filter: sepia(1) saturate(3.2) hue-rotate(-12deg) brightness(1.2); }

html.land .fx-bz-tag {
z-index: 46; translate: -50% -50%; padding: calc(2 * var(--u)) calc(5 * var(--u)); border-radius: calc(3 * var(--u));
white-space: nowrap; font-weight: 800; line-height: 1.15; font-size: max(calc(11 * var(--u)), 12px);
color: #fff3c8; background: rgba(28, 20, 6, .9); border: 1px solid #f3cf6a; box-shadow: 0 0 calc(7 * var(--u)) rgba(243, 201, 90, .9); text-shadow: 0 1px 2px #000;
animation: exbBzTag calc(800ms * var(--fx-speed)) ease-out calc(900ms * var(--fx-speed)) both;
}
html.land .fx-bz-tag.fx-lite { animation-duration: calc(600ms * var(--fx-speed)); animation-delay: calc(100ms * var(--fx-speed)); }

html.land .fx-by-wing { z-index: 3; animation: exbByWing calc(850ms * var(--fx-speed)) ease-in-out both; }
html.land .fx-by-wing > .fx-by-art { top: 12.5%; height: 75%; transform-origin: 6% 84%; filter: drop-shadow(0 0 calc(4 * var(--u)) rgba(255, 205, 90, .85)); animation: exbByFlap calc(212ms * var(--fx-speed)) ease-in-out 4; }
html.land .fx-by-wing.fx-flip > .fx-by-art { --fl: -1; transform: scaleX(-1); }

html.land .slot > .fx-by-pair { z-index: auto; }
html.land .slot:has(> .fx-by-pair) { z-index: 5; }
html.land .fx-by-pair > .fx-by-art { filter: drop-shadow(0 0 calc(5 * var(--u)) rgba(255, 205, 90, .9)); }
html.land .fx-by-r { transform-origin: 6% 84%; animation: exbByPairR calc(350ms * var(--fx-speed)) ease-out calc(750ms * var(--fx-speed)) both; }
html.land .fx-by-l { transform-origin: 94% 84%; animation: exbByPairL calc(350ms * var(--fx-speed)) ease-out calc(750ms * var(--fx-speed)) both; }
html.land .fx-by-l > .fx-by-art { transform: scaleX(-1); }
html.land .fx-by-r.fx-lite, html.land .fx-by-l.fx-lite { animation-duration: calc(460ms * var(--fx-speed)); animation-delay: 0ms; }
html.land .fx-by-ray { z-index: 32; animation: exbByRay calc(350ms * var(--fx-speed)) ease-in calc(700ms * var(--fx-speed)) both; }
html.land .fx-by-ray > .fx-e07-ray { position: absolute; left: 50%; top: -40%; width: 32%; height: 96%; margin: 0; transform: translateX(-50%); background-position: center top; background-size: 100% 100%; background-repeat: no-repeat; opacity: 1; animation: none; }
html.land .fx-by-ray.fx-lite { animation-delay: 0ms; }

@media (prefers-reduced-motion: reduce) {
html.land .fx-kn-wave, html.land .fx-kn-dust, html.land .fx-kn-jolt, html.land .fx-kn-bolt, html.land .fx-bz-rune, html.land .fx-bz-scroll, html.land .fx-bz-vortex, html.land .fx-by-wing, html.land .fx-by-pair { display: none; }
}

html.land.compact {
--bb-y: calc(287 * var(--u) + var(--vs));
--bb-sw: max(calc(46 * var(--u)), 44px);
--bb-sh: max(calc(58 * var(--u)), 56px);
--bb-g: calc(3.5 * var(--u));
--bb-lw: max(calc(15 * var(--u)), 16px);
--bb-r0: calc(var(--tbl-x0) + max(calc(103 * var(--u)), 100px) + 6 * var(--u));
--bb-hero: calc(var(--bb-r0) + var(--bw41) + 5 * var(--u));
--bb-r1: calc(var(--bb-hero) + 93 * var(--u));
--bb-pk: calc(var(--bb-r1) + var(--bw41) + 6 * var(--u));
--bb-bw: calc(5 * var(--bb-sw) + 4 * var(--bb-g));

--bb-s0: max(calc(var(--bb-pk) + var(--bb-lw) + 3 * var(--u)), calc(var(--tbl-cc) + 3 * var(--tbl-cw) + 15 * var(--u) - var(--bb-bw)));
--bb-lab: calc(var(--bb-s0) - 3 * var(--u) - var(--bb-lw));
--fs-d: max(calc(20.5 * var(--u)), 22px);
--fs-p: max(calc(6 * var(--u)), 6px);
--fs-r: calc(531 * var(--u) - var(--bw41) - 5 * var(--u));
--fs-w: calc(6 * var(--fs-d) + 10 * var(--u) + 2 * var(--fs-p));
}

html.land.compact:not(.in-tut) #scr-prep .p-shop .bench-strip {
display: block !important; position: absolute; left: 0; top: 0; width: 0; height: 0; margin: 0; padding: 0;
border: 0; border-radius: 0; background: none; box-shadow: none; z-index: 5; animation: none;
}
html.land.compact:not(.in-tut) #scr-prep .p-shop #bench-row {
display: grid; position: absolute; left: var(--bb-s0); top: var(--bb-y); width: auto; margin: 0; padding: 0;
grid-template-columns: repeat(5, var(--bb-sw)); gap: var(--bb-g);
}
html.land.compact:not(.in-tut) #scr-prep .p-shop #bench-row .slot {
position: relative; left: auto; top: auto; width: var(--bb-sw); height: var(--bb-sh); min-height: 0; margin: 0; padding: 0; transform: none;
transition: box-shadow 300ms ease-out;
}
html.land.compact:not(.in-tut) #scr-prep .p-shop #bench-row .card { height: 100%; min-height: 0; }
html.land.compact:not(.in-tut) #scr-prep .p-shop #bench-row .slot-idx { color: transparent; }

html.land.compact:not(.in-tut) #scr-prep .p-shop #bench-row .slot.bench-land {
box-shadow: 0 0 0 max(calc(2 * var(--u)), 2px) rgba(243,207,106,.95), 0 0 calc(10 * var(--u)) rgba(243,207,106,.85); transition: none;
}

html.land.compact:not(.in-tut) .cpt-bench-label {
display: flex; align-items: center; justify-content: center; position: absolute; z-index: 5; pointer-events: none;
left: var(--bb-lab); top: var(--bb-y); width: var(--bb-lw); height: var(--bb-sh); padding: 0; box-sizing: border-box;
writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap; letter-spacing: 0;
font-size: max(calc(12 * var(--u)), 12px); line-height: 1; font-weight: 700; color: var(--tbl-ink);
}
html.land.compact:not([lang^="zh"]):not(.in-tut) .cpt-bench-label { letter-spacing: 0; font-weight: 600; }

html.land.compact:not(.in-tut) #scr-battle .bt-dock .bt-skill { display: none; }

html.land.compact:not(.in-tut) #scr-prep .prep-dock #relic-slot-0, html.land.compact:not(.in-tut) #cpt-bt-relic-0 { left: var(--bb-r0); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-block, html.land.compact:not(.in-tut) #scr-battle .bt-dock .hero-block { left: var(--bb-hero); width: calc(88 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock #relic-slot-1, html.land.compact:not(.in-tut) #cpt-bt-relic-1 { left: var(--bb-r1); }

html.land.compact:not(.in-tut) #scr-prep .prep-dock #relic-more, html.land.compact:not(.in-tut) #cpt-bt-relic-more,
html.land.compact:not([lang^="zh"]):not(.in-tut) #scr-prep .prep-dock #relic-more, html.land.compact:not([lang^="zh"]):not(.in-tut) #cpt-bt-relic-more { left: calc(var(--bb-r1) + var(--bw41) + 5 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep.ui6-deep4, html.land.compact:not(.in-tut) #scr-battle.ui6-deep4 {
--bb-pk: calc(var(--bb-r1) + 2 * var(--bw41) + 11 * var(--u));
--bb-s0: max(calc(var(--bb-pk) + var(--bb-lw) + 3 * var(--u)), calc(var(--tbl-cc) + 3 * var(--tbl-cw) + 15 * var(--u) - var(--bb-bw)));
--bb-lab: calc(var(--bb-s0) - 3 * var(--u) - var(--bb-lw));
}

html.land.compact:not(.in-tut) #scr-prep #cpt-lamps,
html.land.compact:not(.in-tut) #scr-battle .cpt-bt-lamps {
display: flex; flex-direction: row; align-items: center; gap: calc(2 * var(--u)); position: absolute; z-index: 7; margin: 0; padding: 0; pointer-events: none;
left: auto; right: calc(640 * var(--u) - var(--tbl-tl) + 4px); top: calc(2 * var(--u) + max(calc(23 * var(--u)), 22px)); transform: translateY(-50%);
font-size: max(calc(13 * var(--u)), 12px);
}

html.land.compact:not(.in-tut) #scr-prep .cpt-foe-strip.cpt-sign { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; position: absolute; z-index: 6; left: calc(var(--fs-r) - var(--fs-w)); top: calc(4 * var(--u) - 1.5px); width: var(--fs-w); height: max(calc(44 * var(--u)), 47px); min-height: 0; margin: 0; cursor: pointer; font: inherit; line-height: 1; }

html.land.compact:not(.in-tut) #scr-prep .cpt-foe-dots { display: flex; gap: calc(2 * var(--u)); flex: none; }

html.land.compact:not(.in-tut) #scr-prep .cpt-foe-dot { --k-seal: var(--fs-d); display: block; flex: none; box-sizing: border-box; }
html.land.compact:not(.in-tut) #scr-prep .cpt-foe-dot.empty { opacity: .4; }
html.land.compact:not(.in-tut) #scr-prep .cpt-foe-dot img { position: absolute; left: 15%; top: 15%; display: block; width: 70%; height: 70%; border-radius: 50%; object-fit: cover; object-position: 50% 15%; }
html.land.compact:not(.in-tut) #scr-prep .cpt-foe-txt,
html.land.compact:not(.in-tut) #scr-prep .cpt-foe-back {
display: block; max-width: 100%; overflow: hidden; white-space: nowrap; font-size: max(calc(11.5 * var(--u)), 12px); line-height: 1; font-weight: 700; margin-top: calc(.5 * var(--u));
}
html.land.compact:not(.in-tut) #scr-prep .cpt-foe-back { display: none; }
html.land.compact:not(.in-tut) #scr-prep .cpt-foe-strip.on .cpt-foe-txt { display: none; }
html.land.compact:not(.in-tut) #scr-prep .cpt-foe-strip.on .cpt-foe-back { display: block; color: #7a2a1c; }
html.land.compact:not(.in-tut) #scr-prep .cpt-foe-strip.foe-tight .cpt-foe-txt { font-size: max(calc(10 * var(--u)), 12px); letter-spacing: -.01em; }

html.land.compact:not(.in-tut) #scr-prep .cpt-cap,
html.land.compact:not([lang^="zh"]):not(.in-tut) #scr-prep .cpt-cap { max-width: calc(var(--fs-r) - var(--fs-w) - var(--tbl-tl) - max(calc(46 * var(--u)), 44px) - 2 * var(--bw41) - 17 * var(--u)); }
html.land.compact.host-xhs:not([lang^="zh"]):not(.in-tut) #scr-prep .cpt-cap { max-width: calc(var(--fs-r) - var(--fs-w) - var(--tbl-tl) - max(calc(46 * var(--u)), 44px) - 2 * var(--bw41) - 17 * var(--u)); }

html.land.compact.host-xhs:not(.in-tut) #scr-prep:not(.cpt-retire) { --fs-r: calc(var(--tbl-x1) - 2 * var(--bw41) - 6 * var(--u)); }
html.land.compact.host-xhs:not(.in-tut) #scr-prep:not(.cpt-retire) .prep-top .tb-right { left: calc(var(--tbl-x1) - var(--bw41)); }
html.land.compact.host-xhs:not(.in-tut) #scr-prep:not(.cpt-retire) .prep-top .tb-left { left: calc(var(--tbl-x1) - 2 * var(--bw41) - 3 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep .prep-dock .prep-hero {
display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; position: absolute; margin: 0;
left: calc(var(--tbl-x1) - 66 * var(--u)); width: calc(66 * var(--u));
top: calc((322 * var(--u) + max(calc(38 * var(--u)), 44px) + 2 * max(0px, 44px - 40 * var(--u)) - max(calc(52.5 * var(--u)), 56px)) / 2);
}
html.land.compact:not(.in-tut) #scr-prep .prep-dock .prep-hero > .hero-passive { max-width: 100%; text-align: center; line-height: 1; }
html.land.compact:not(.in-tut) #scr-prep.cpt-selling .prep-dock .prep-hero { visibility: hidden; }

html.land.compact:not(.in-tut) #scr-prep .prep-dock #relic-slot-0 > .relic-cap, html.land.compact:not(.in-tut) #scr-battle #cpt-bt-relic-0 > .relic-cap,
html.land.compact:not(.in-tut) #scr-prep .prep-dock #relic-slot-1 > .relic-cap, html.land.compact:not(.in-tut) #scr-battle #cpt-bt-relic-1 > .relic-cap {
left: 50%; right: auto; transform: translateX(-50%); min-width: 100%; max-width: calc(100% + 8 * var(--u)); text-align: center;
}

html.land.compact:not(.in-tut) #scr-prep #bench-row .card > .mk-up { font-size: max(calc(11 * var(--u)), 12px); }

html.land.compact:not(.in-tut) #scr-prep.cpt-relic-fold .prep-dock #relic-slot-1,
html.land.compact:not(.in-tut) #scr-battle.cpt-relic-fold #cpt-bt-relic-1 { display: none; }
html.land.compact:not(.in-tut) #scr-prep.cpt-relic-fold .prep-dock #relic-more,
html.land.compact:not(.in-tut) #scr-battle.cpt-relic-fold #cpt-bt-relic-more,
html.land.compact:not([lang^="zh"]):not(.in-tut) #scr-prep.cpt-relic-fold .prep-dock #relic-more,
html.land.compact:not([lang^="zh"]):not(.in-tut) #scr-battle.cpt-relic-fold #cpt-bt-relic-more { left: var(--bb-r1); }
html.land.compact:not(.in-tut) #scr-prep.ui6-deep4.cpt-relic-fold, html.land.compact:not(.in-tut) #scr-battle.ui6-deep4.cpt-relic-fold {
--bb-pk: calc(var(--bb-r1) + var(--bw41) + 6 * var(--u));
--bb-s0: max(calc(var(--bb-pk) + var(--bb-lw) + 3 * var(--u)), calc(var(--tbl-cc) + 3 * var(--tbl-cw) + 15 * var(--u) - var(--bb-bw)));
--bb-lab: calc(var(--bb-s0) - 3 * var(--u) - var(--bb-lw));
}

html.land.compact:not(.in-tut) #scr-prep.cpt-retire { --fs-w: calc(4.75 * var(--fs-d) + 2 * var(--fs-p)); }
html.land.compact:not(.in-tut) #scr-prep.cpt-retire .cpt-foe-dots { gap: 0; }
html.land.compact:not(.in-tut) #scr-prep.cpt-retire .cpt-foe-dot + .cpt-foe-dot { margin-left: calc(-.25 * var(--fs-d)); }

html.land.compact:not(.in-tut) #scr-prep .p-shop #btn-reroll { white-space: pre-line; }
html.land.compact.host-xhs:not(.in-tut) #scr-prep .p-shop #btn-reroll { font-size: max(calc(12 * var(--u)), 12px); }

html.land { --snd-on: url("../assets/ui/home_icon_sound_on.webp"); --snd-off: url("../assets/ui/home_icon_sound_off.webp"); }
html.land.compact:not(.in-tut) #scr-prep #btn-mute-prep,
html.land.compact:not(.in-tut) #scr-battle #btn-mute-bt { --mute-d: max(calc(41 * var(--u)), 44px); display: block; width: var(--mute-d); height: var(--mute-d); min-width: 0; min-height: 0; margin: 0; }

html.land.compact:not(.in-tut) #scr-prep #btn-mute-prep .mute-glyph { display: none; }

html.land.compact:not(.in-tut) #scr-battle #btn-mute-bt {
position: absolute; z-index: 7;
left: calc(var(--tbl-x1) - 33 * var(--u) - var(--mute-d) / 2); top: calc(292 * var(--u));
}

html.land.compact.lbox body { background: #183441; }
@media (hover: hover) and (pointer: fine), (min-width: 700px) and (min-height: 700px) {
html.land.compact:not(.host-xhs) #scr-prep #cpt-lamps,
html.land.compact:not(.host-xhs) #scr-battle .cpt-bt-lamps {
flex-direction: column; gap: 0; font-size: max(calc(11 * var(--u)), 12px); line-height: 1; pointer-events: auto;
right: calc(640 * var(--u) - var(--tbl-tl) + 5px); top: calc(2 * var(--u) + max(calc(23 * var(--u)), 22px));
}
html.land.compact:not([lang^="zh"]):not(.host-xhs) #scr-prep .prep-dock .hero-block > .hero-plate, html.land.compact:not([lang^="zh"]):not(.host-xhs) #scr-battle .bt-dock .hero-block > .hero-plate { --np-gap: calc(3.2 * var(--u)); }

html.land.compact:not(.host-xhs) .cpt-bt-edots { top: calc(19.73 * var(--u)); }
}
html.land.compact #scr-prep.cpt-detail.cpt-hover .land-right {
left: 0; top: 0; width: calc(268 * var(--u)); height: auto; max-height: calc(352 * var(--u));
padding: calc(11 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)); pointer-events: none; overflow: hidden; z-index: 70;
}
html.land.compact #scr-prep.cpt-detail.cpt-hover .land-right #land-detail {
grid-template-columns: calc(60 * var(--u)) minmax(0, 1fr); column-gap: calc(8 * var(--u)); row-gap: calc(1 * var(--u)); height: auto; overflow: visible;
}
html.land.compact #scr-prep.cpt-detail.cpt-hover .land-right #land-detail > .ld-art { grid-column: 1; grid-row: 1 / span 3; height: calc(72 * var(--u)); align-self: start; }
html.land.compact #scr-prep.cpt-detail.cpt-hover .land-right #land-detail > :nth-child(n+5) { grid-column: 1 / -1; }
html.land.compact #scr-prep.cpt-detail.cpt-hover .land-right #land-detail * { font-size: max(calc(10 * var(--u)), 12px); line-height: 1.28; }
html.land.compact #scr-prep.cpt-detail.cpt-hover .land-right #land-detail .ld-name-main { font-size: max(calc(15 * var(--u)), 15px); }
html.land.compact #scr-prep.cpt-detail.cpt-hover .land-right #land-detail .ld-stats, html.land.compact #scr-prep.cpt-detail.cpt-hover .land-right #land-detail .ld-stats * { font-size: max(calc(13 * var(--u)), 13px); }
html.land.compact #scr-prep.cpt-detail.cpt-hover .land-right .skill-tier { padding: 0 calc(3 * var(--u)); }
html.land #land-bt-detail.cpt-hover { width: calc(268 * var(--u)); height: auto; max-height: calc(346 * var(--u)); overflow: hidden; pointer-events: none; z-index: 70; }
html.land.compact #land-bt-detail.cpt-hover { padding: calc(11 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)); box-sizing: border-box; }
html.land #land-bt-detail.cpt-hover .land-x { display: none; }
html.land #land-bt-detail.cpt-hover .land-detail.land-full {
display: grid; grid-template-columns: calc(60 * var(--u)) minmax(0, 1fr); column-gap: calc(8 * var(--u)); row-gap: calc(1 * var(--u));
align-content: start; height: auto; max-height: calc(346 * var(--u)); overflow: hidden; padding: calc(8 * var(--u)) calc(9 * var(--u));
}
html.land.compact #land-bt-detail.cpt-hover .land-detail.land-full { padding: 0 0 calc(1 * var(--u)); }
html.land #land-bt-detail.cpt-hover .land-detail.land-full > * { grid-column: 2; margin: 0; min-width: 0; }
html.land #land-bt-detail.cpt-hover .land-detail.land-full > .ld-art { grid-column: 1; grid-row: 1 / span 4; height: calc(78 * var(--u)); }
html.land #land-bt-detail.cpt-hover .land-detail.land-full > :nth-child(n+6) { grid-column: 1 / -1; }
html.land #land-bt-detail.cpt-hover .land-detail * { font-size: max(calc(10 * var(--u)), 12px); line-height: 1.28; }
html.land #land-bt-detail.cpt-hover .land-detail .ld-name-main { font-size: max(calc(14 * var(--u)), 14px); }
html.land #land-bt-detail.cpt-hover .land-detail [class*="stat-"] { font-size: max(calc(13 * var(--u)), 13px); }

html.land.compact:not([lang^="zh"]):not(.in-tut) #scr-battle #bt-banner { white-space: nowrap; letter-spacing: -0.015em !important; max-width: calc(100% - 8 * var(--u)); }

html.land #app #scr-start.gate .gate-low .btn-main.is-loading { pointer-events: auto; cursor: progress; }
html.land #app #scr-start.gate.queued .gate-low .btn-main.is-loading { animation: ui13Wait .9s ease-in-out infinite; }
html.land #scr-start.gate.booting .gate-tools { visibility: hidden; pointer-events: none; }

html.land #btn-speed.hint-pulse.hint-hold { animation: hintPulse 1.4s ease-in-out infinite; }

html.land #btn-skip.skip-nudge { animation: hintPulse 1.2s ease-in-out infinite; }
html.land.compact:not(.in-tut) #scr-battle .bt-top #btn-skip.skip-nudge { font-size: max(calc(12 * var(--u)), 12px); letter-spacing: 0; white-space: nowrap; }

html.land #scr-start.gate { --trh: max(calc(106 * var(--s)), 44px); --tjs: max(calc(52 * var(--s)), 44px); --gate-gap: max(calc(14 * var(--s)), 6px); --k-btn-sub-h-home: max(calc(104 * var(--s)), 44px); --cap-h: 0px; }
html.land:not(.rot):not([lang^="zh"]) #scr-start.gate { --trh: max(calc(660 * var(--s) * 106 / 592), 48px); }

html.land #scr-start.gate .gate-tj {
--k-tj: var(--tjs); position: absolute; z-index: 2; left: calc(100% + max(calc(10 * var(--s)), 6px));
bottom: calc(var(--k-btn-sub-h-home) + var(--gate-gap) + var(--cap-h) + max(calc(124 * var(--s)), 48px) / 2 - var(--tjs) / 2);
margin: 0; padding: 0; border: 0; background-color: transparent; cursor: pointer; appearance: none; font-family: inherit; -webkit-tap-highlight-color: transparent;
}
html.land #scr-start.gate .gate-tj-bolt {
display: block; width: 44%; height: 56%; background: var(--k-on-dark-2);
clip-path: polygon(62% 0, 14% 56%, 44% 56%, 34% 100%, 86% 40%, 56% 40%);
}
html.land #scr-start.gate .gate-tj.on .gate-tj-bolt { display: none; }
html.land #scr-start.gate .gate-tj:not(:disabled):active { transform: translateY(calc(2 * var(--s))); }
html.land #scr-start.gate .gate-tj:focus-visible { outline: 2px solid var(--k-gold); outline-offset: 3px; }
html.land #scr-start.gate.fresh-visit .gate-tj { display: none; }

html.land #scr-start.gate .gate-dex-count {
position: absolute; right: calc(3 / 288 * 100%); bottom: calc(10 / 192 * 100%); z-index: 1; font-style: normal; box-sizing: border-box;
--k-tag-h: max(calc(16 * var(--u)), 18px); letter-spacing: 0; font-style: normal;
}

html.land .gate-sheet .gate-rec-col { display: flex; flex-direction: column; align-items: center; gap: calc(5 * var(--u)); min-width: 0; }
html.land .gate-sheet.has-realm .gate-sheet-card { width: min(max(calc(1240 * var(--s)), 460px), calc(100 * var(--vw) - 24px)); }
html.land .gate-sheet.has-realm .gate-rec-list { flex-direction: row; align-items: flex-start; justify-content: center; gap: calc(14 * var(--u)); }
html.land .gate-sheet.has-realm .gate-realm { flex: 1.3 1 0; min-width: 0; padding-right: calc(12 * var(--u)); border-right: 1px solid rgba(16,47,59,.22); }
html.land .gate-sheet.has-realm .gate-rec-col { flex: 1 1 0; }
html.land .gate-sheet .gate-realm { width: 100%; text-align: left; display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
html.land .gate-sheet .gate-realm .gr-head { display: flex; align-items: baseline; justify-content: space-between; gap: calc(8 * var(--u)); }
html.land .gate-sheet .gate-realm .gr-title { font-size: max(calc(12 * var(--u)), 12px); font-weight: 700; color: var(--k-ink-2); letter-spacing: .08em; }
html.land .gate-sheet .gate-realm .gr-name { font-size: max(calc(15 * var(--u)), 15px); font-weight: 800; color: var(--k-cin); }
html.land .gate-sheet .gate-realm .gr-sub { font-size: max(calc(12 * var(--u)), 12px); line-height: 1.3; color: var(--k-ink-2); }
html.land .gate-sheet .gate-realm .gr-bar { --k-xp-slot-h: max(calc(12 * var(--u)), 12px); width: 100%; flex: none; }
html.land .gate-sheet .gate-realm .gr-list { display: flex; flex-direction: column; gap: calc(3 * var(--u)); margin-top: calc(3 * var(--u)); }
html.land .gate-sheet .gate-realm .gr-row { display: block; padding-left: 1.3em; text-indent: -1.3em; font-size: max(calc(11 * var(--u)), 12px); line-height: 1.3; color: var(--k-ink-2); }
html.land .gate-sheet .gate-realm .gr-row.got { color: var(--k-ink); }
html.land .gate-sheet .gate-realm .gr-row.cur { font-weight: 800; }
html.land .gate-sheet .gate-realm .gr-mark { display: inline-block; width: 1.3em; text-indent: 0; color: var(--k-ink); font-weight: 800; }
html.land .gate-sheet .gate-realm .gr-extra { font-size: max(calc(12 * var(--u)), 12px); color: var(--k-cin-d); font-weight: 700; margin-top: calc(2 * var(--u)); }
html.land .gate-sheet .gate-tj-note { font-size: max(calc(12 * var(--u)), 12px); line-height: 1.4; color: var(--k-cin-d); font-weight: 700; margin-top: calc(3 * var(--u)); }

html.land .fav-row { display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--u)); margin: calc(4 * var(--u)) 0; }
html.land .fav-row .fav-btn { min-height: 44px; min-width: 44px; width: auto; max-width: 100%; white-space: nowrap; padding-left: calc(18 * var(--u)); padding-right: calc(18 * var(--u)); font-size: max(calc(12 * var(--u)), 13px); letter-spacing: .04em; }
html.land .fav-row .fav-btn.on { filter: saturate(1.2) brightness(1.08); box-shadow: 0 0 0 2px #f2d27a; }
html.land .fav-row .fav-note { font-size: max(calc(10 * var(--u)), 12px); line-height: 1.3; color: var(--paper-2); text-align: center; }

html.land #scr-start.gate .gate-tj.no-room { display: none; }
html.land .gate-sheet.has-realm .gate-sheet-card { display: flex; flex-direction: column; }
html.land .gate-sheet.has-realm .gate-sheet-body, html.land .gate-sheet.has-realm .gate-rec-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
html.land .gate-sheet.has-realm .confirm-btns { flex: none; }
html.land .gate-sheet .gate-tj-btn {
min-height: 44px; min-width: 44px; margin: calc(6 * var(--u)) auto 0; padding-left: calc(18 * var(--u)); padding-right: calc(18 * var(--u));
font-size: max(calc(12 * var(--u)), 13px); letter-spacing: .04em; font-weight: 700;
}

html.land #scr-settle:not([hidden]) {
position: absolute; left: calc(50% - calc(320 * var(--u))); top: calc(50% - calc(180 * var(--u)));
width: calc(640 * var(--u)); height: calc(360 * var(--u)); min-height: 0; max-width: none; margin: 0; padding: 0;
display: flex; align-items: center; justify-content: center;
background: none; transform: none; box-shadow: none; overflow: visible;
}
html.land #scr-settle .settle-card { width: calc(600 * var(--u)); box-sizing: border-box; }
html.land #scr-settle .settle-cols { display: grid; grid-template-columns: minmax(0, 1fr) calc(184 * var(--u)); gap: calc(20 * var(--u)); align-items: center; }
html.land #scr-settle .settle-main { min-width: 0; }

html.land #scr-settle .settle-sub { margin-top: calc(2 * var(--u)); font-size: max(calc(13 * var(--u)), 12px); line-height: 1.35; color: #5a4428; }
html.land #scr-settle .settle-xp { margin-top: calc(8 * var(--u)); display: flex; flex-wrap: wrap; align-items: baseline; column-gap: calc(8 * var(--u)); row-gap: calc(2 * var(--u)); }
html.land #scr-settle .settle-xp[hidden] { display: none; }
html.land #scr-settle .settle-xp-lab { flex: none; font-size: max(calc(13 * var(--u)), 12px); font-weight: 700; color: #5a4428; }
html.land #scr-settle .settle-xp-num { flex: none; font-size: calc(36 * var(--u)); line-height: 1; font-weight: 900; color: var(--tbl-cinnabar, #c84b3c); text-shadow: 0 calc(1 * var(--u)) 0 rgba(255,240,210,.7); font-variant-numeric: tabular-nums; }
html.land #scr-settle .settle-why { min-width: 0; flex: 1 1 100%; font-size: max(calc(11.5 * var(--u)), 12px); line-height: 1.3; color: #5a4428; }
html.land #scr-settle .settle-realm {
margin-top: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(7 * var(--u)); border-radius: calc(4 * var(--u));
background: rgba(128,100,58,.10); box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(128,100,58,.35);
}
html.land #scr-settle .settle-realm-row { display: flex; align-items: baseline; justify-content: space-between; gap: calc(8 * var(--u)); }
html.land #scr-settle .settle-realm-name { font-size: max(calc(15 * var(--u)), 14px); font-weight: 900; letter-spacing: .06em; color: var(--tbl-ink, #3a2a16); }
html.land:not([lang^="zh"]) #scr-settle .settle-realm-name { letter-spacing: 0; }
html.land #scr-settle .settle-realm-pts { font-size: max(calc(12 * var(--u)), 12px); font-weight: 700; color: #5a4428; font-variant-numeric: tabular-nums; }
html.land #scr-settle .settle-bar { margin-top: calc(5 * var(--u)); }

html.land #scr-settle .settle-next { margin-top: calc(6 * var(--u)); min-height: calc(34 * var(--u)); font-size: max(calc(12 * var(--u)), 12px); line-height: 1.4; color: var(--tbl-ink, #3a2a16); }
html.land #scr-settle.settle-up .settle-realm { animation: settleGlow 1.4s ease-out 1; }
html.land #scr-settle .settle-side { display: flex; flex-direction: column; justify-content: center; gap: calc(8 * var(--u)); }
html.land #scr-settle .settle-btn-row { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }

html.land #scr-settle .settle-foot { margin-top: calc(10 * var(--u)); padding-top: calc(8 * var(--u)); border-top: calc(1 * var(--u)) solid rgba(128,100,58,.35); }
html.land #scr-settle .settle-line { margin: 0; font-size: max(calc(12.5 * var(--u)), 12px); line-height: 1.45; }
html.land #scr-settle .settle-line[hidden] { display: none; }
html.land #scr-settle .settle-line + .settle-line { margin-top: calc(3 * var(--u)); }
html.land #scr-settle .settle-tomorrow { color: var(--tbl-ink, #3a2a16); font-weight: 700; }
html.land #scr-settle .settle-nemesis { color: var(--tbl-cinnabar, #c84b3c); }

html.land #scr-settle.settle-fx .settle-xp-num { animation: settleFloat .9s cubic-bezier(.2,.9,.3,1) both; }
html.land #scr-settle.settle-fx .settle-why { animation: settleFade .6s ease-out .5s both; }

html.land .grand.grand-realm .gr-seal { left: 50%; top: 46%; width: auto; min-width: calc(190 * var(--u)); height: calc(104 * var(--u)); box-sizing: border-box; padding-left: calc(16 * var(--u)); padding-right: calc(16 * var(--u)); border-radius: calc(8 * var(--u)); background: radial-gradient(circle at 42% 38%, #e0614d, #c84b3c 52%, #8f2d22); box-shadow: inset 0 0 0 calc(4 * var(--u)) rgba(255,232,214,.3), inset 0 0 0 calc(7 * var(--u)) #b13f30; }
html.land .grand.grand-realm .gr-seal b.gr-seal-txt { display: block; position: static; transform: none; font-size: calc(44 * var(--u)); letter-spacing: .1em; color: #fff1e2; text-shadow: 0 calc(2 * var(--u)) 0 rgba(90,20,12,.55); }
html.land:not([lang^="zh"]) .grand.grand-realm .gr-seal b.gr-seal-txt { font-size: calc(28 * var(--u)); letter-spacing: .01em; }
html.land .grand-realm .gr-kicker, html.land .grand-realm .gr-unlock {
position: absolute; left: 50%; transform: translateX(-50%); width: calc(380 * var(--u)); text-align: center; opacity: 0;
animation: grFadeUp .5s ease-out calc(var(--gr-slam, 1000ms) + 150ms) forwards;
}
html.land .grand-realm .gr-kicker { top: 46%; margin-top: calc(-86 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 900; letter-spacing: .5em; text-indent: .5em; color: #f3d27a; text-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,.7); }
html.land:not([lang^="zh"]) .grand-realm .gr-kicker { letter-spacing: .3em; text-indent: .3em; font-size: calc(16 * var(--u)); }
html.land .grand-realm .gr-unlock { top: 46%; margin-top: calc(64 * var(--u)); font-size: max(calc(14 * var(--u)), 13px); line-height: 1.4; color: #fbeec4; text-shadow: 0 1px 3px rgba(0,0,0,.9); }

html.land:not(.in-tut) #scr-battle #bt-overlay .two-btns.has-swap { grid-template-columns: calc(84 * var(--u)) minmax(calc(150 * var(--u)), 1.3fr) minmax(calc(84 * var(--u)), 1fr); width: 100%; max-width: calc(420 * var(--u)); gap: calc(8 * var(--u)); }

html.land .pp-layer { z-index: 93; }
html.land .pp-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(12 * var(--u)); max-width: 100%; }

html.land .pp-row { display: flex; align-items: flex-start; justify-content: center; gap: calc(14 * var(--u)); }

@media (prefers-reduced-motion: reduce) {  }
html.land #scr-prep.partner-wait #shop-row, html.land #scr-prep.partner-wait #btn-reroll { visibility: hidden; }

html.land .hero-aid {
display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); margin-top: calc(6 * var(--u)); max-width: 100%; cursor: pointer;
font-size: max(calc(12 * var(--u)), 12px); line-height: 1.3; font-weight: 700; color: #5a2a00; text-align: left;
}
html.land .hero-aid[hidden] { display: none; }
html.land .hero-aid-chip { flex: none; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; border: calc(1.5 * var(--u)) solid #c9a24a; object-fit: cover; }
html.land .hero-aid-txt { min-width: 0; }

html.land #tip-bub.dexnew { border-color: #ffd86b; box-shadow: 0 0 0 calc(2 * var(--u)) rgba(255,216,107,.6), 0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.5); font-weight: 800; }

html.land #scr-hero .hero-offers[data-n="3"], html.land #scr-hero .hero-offers[data-n="4"] { margin-top: max(calc(22 * var(--u)), 26px); }
html.land.compact .toast { font-size: max(calc(11.5 * var(--u)), 12px); }

html.land .gate-sheet .lang-grid {
display: grid; grid-template-columns: 1fr 1fr; width: 100%; row-gap: max(calc(5 * var(--u)), 4px); column-gap: max(calc(10 * var(--u)), 8px); margin-top: calc(2 * var(--u));
}
html.land .gate-sheet .lang-pick {
--k-tab-h: 44px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; letter-spacing: 0;
font-size: max(calc(14 * var(--u)), 14px);
}
html.land .gate-sheet .lang-grid { grid-auto-flow: row dense; }
html.land .gate-sheet .lang-pick.wide { grid-column: 1 / -1; }

html.land #hero-pop.over-relic { z-index: 99; }

html.land .card > .ui5-omen-tag { white-space: nowrap; text-overflow: ellipsis; max-width: calc(100% - 4 * var(--u)); max-height: none; }

html.land.compact:not(.in-tut):not([lang^="zh"]) #scr-battle .cpt-bt-title { padding-left: calc(10 * var(--u)); padding-right: calc(10 * var(--u)); overflow: hidden; text-overflow: clip; box-sizing: border-box; }
html.land.compact:not(.in-tut) #scr-battle .cpt-bt-title.cap-off { visibility: hidden; }

html.land:not([lang^="zh"]) .bond-row { grid-template-columns: minmax(58px, 1.25fr) repeat(3, minmax(0, 1fr)); }

html.land.compact:not(.in-tut) #scr-prep .p-shop #btn-reroll.btn-long { font-size: max(calc(11.5 * var(--u)), 12px); }

html.land #scr-start.gate .gate-priv {
position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 3; white-space: nowrap;
font-size: max(calc(11 * var(--u)), 12px); letter-spacing: .02em;
text-shadow: 0 0 calc(4 * var(--s)) var(--k-ink), 0 calc(1 * var(--s)) calc(3 * var(--s)) var(--k-ink), 0 0 calc(8 * var(--s)) var(--k-ink);
}
html.land #scr-start.gate .gate-priv[hidden] { display: none; }
html.land #scr-start.gate.booting .gate-priv { visibility: hidden; pointer-events: none; }

html.land .gate-sheet .set-row { display: grid; grid-template-columns: 1fr 1fr; width: 100%; column-gap: max(calc(10 * var(--u)), 8px); margin-top: max(calc(5 * var(--u)), 4px); }
html.land .gate-sheet .set-row[hidden], html.land .gate-sheet .set-priv[hidden] { display: none; }
html.land .gate-sheet .set-btn, html.land .gate-sheet .priv-toggle {
--k-tab-h: 44px; min-width: 0; white-space: normal; text-align: center; letter-spacing: 0; line-height: 1.2;
font-size: max(calc(12.5 * var(--u)), 13px);
}
html.land .gate-sheet .set-priv { margin: 0; font-size: max(calc(12 * var(--u)), 12px); line-height: 1.3; color: var(--k-ink-2); text-align: center; }
html.land .gate-sheet .priv-link { vertical-align: middle; font-size: max(calc(12 * var(--u)), 12px); color: var(--k-cin); text-decoration-color: var(--k-cin); }

html.land .gate-sheet .priv-card, html.land .gate-sheet .board-card { display: flex; flex-direction: column; align-items: stretch; width: min(max(calc(1000 * var(--s)), 340px), calc(100 * var(--vw) - 24px)); }
html.land .gate-sheet .priv-body {
flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; text-align: left; outline: none;
max-height: calc(100 * var(--vh) - 168px); padding-right: calc(6 * var(--u));
}
html.land .gate-sheet .priv-sec { margin-bottom: calc(8 * var(--u)); }
html.land .gate-sheet .priv-h { margin: 0 0 calc(2 * var(--u)); font-size: max(calc(13.5 * var(--u)), 14px); font-weight: 800; color: var(--k-cin); letter-spacing: .02em; }
html.land .gate-sheet .priv-p, html.land .gate-sheet .priv-li { margin: 0 0 calc(3 * var(--u)); font-size: max(calc(12 * var(--u)), 12px); line-height: 1.5; color: var(--k-ink); }
html.land .gate-sheet .priv-li { display: flex; align-items: baseline; gap: .3em; padding-left: .3em; }
html.land .gate-sheet .priv-li::before { content: "·"; flex: none; width: .6em; text-align: center; font-weight: 900; }
html.land .gate-sheet .priv-contact { margin-top: calc(4 * var(--u)); font-weight: 700; user-select: text; -webkit-user-select: text; }
html.land .gate-sheet .priv-updated { color: var(--k-ink-2); }
html.land .gate-sheet .priv-toggle { flex: none; margin-top: calc(6 * var(--u)); align-self: center; width: min(100%, calc(300 * var(--u))); }

html.land .gate-sheet .bd-meta { font-size: max(calc(12 * var(--u)), 12px); color: var(--k-ink-2); font-weight: 700; margin-bottom: calc(4 * var(--u)); }
html.land .gate-sheet .bd-me { display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); margin-bottom: calc(6 * var(--u)); }
html.land .gate-sheet .bd-myname { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: max(calc(14 * var(--u)), 14px); font-weight: 800; color: var(--k-ink); }
html.land .gate-sheet .bd-nav { flex: none; min-width: 44px; padding-left: calc(var(--k-btn-sub-h) * .25); padding-right: calc(var(--k-btn-sub-h) * .25); font-size: max(calc(14 * var(--u)), 14px); letter-spacing: 0; text-indent: 0; }
html.land .gate-sheet #btn-bd-prev { padding-bottom: .3em; line-height: 1; }
html.land .gate-sheet .bd-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; max-height: calc(100 * var(--vh) - 238px); text-align: left; }
html.land .gate-sheet .bd-list:empty { display: none; }
html.land .gate-sheet .bd-row { display: flex; align-items: baseline; gap: calc(8 * var(--u)); padding: calc(2 * var(--u)) calc(6 * var(--u)); font-size: max(calc(12.5 * var(--u)), 13px); line-height: 1.35; color: var(--k-ink); border-bottom: 1px solid rgba(16,47,59,.12); }
html.land .gate-sheet .bd-row.mine { background: rgba(174,67,53,.12); font-weight: 800; }
html.land .gate-sheet .bd-rk { flex: none; min-width: 2.2em; text-align: right; font-variant-numeric: tabular-nums; color: var(--k-gold-d); }
html.land .gate-sheet .bd-nm { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: calc(4 * var(--u)); }
html.land .gate-sheet .bd-nm-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.land .gate-sheet .bd-you { flex: none; font-style: normal; font-size: max(calc(11 * var(--u)), 12px); font-weight: 800; line-height: 1.2; padding-left: calc(4 * var(--u)); padding-right: calc(4 * var(--u)); border-radius: calc(3 * var(--u)); }
html.land .gate-sheet .bd-you { color: var(--k-ink); background: var(--k-gold); }
html.land .gate-sheet .bd-sc { flex: none; font-variant-numeric: tabular-nums; font-weight: 800; }

html.land .gate-sheet .bd-sc { text-align: right; }
html.land .gate-sheet .bd-dif { flex: none; width: 2.7em; margin-left: calc(-4 * var(--u)); text-align: left; font-style: normal; font-size: max(calc(11 * var(--u)), 12px); font-weight: 700; color: var(--k-ink-2); white-space: nowrap; }
html.land .gate-sheet .bd-pin { flex: none; margin-top: calc(3 * var(--u)); border-top: 2px solid rgba(174,67,53,.45); text-align: left; }
html.land .gate-sheet .bd-pin[hidden] { display: none; }
html.land .gate-sheet .bd-msg { margin: calc(6 * var(--u)) 0 0; font-size: max(calc(13 * var(--u)), 13px); font-weight: 700; color: var(--k-cin-d); text-align: center; }
html.land .gate-sheet .bd-msg[hidden] { display: none; }

html.land .gate-sheet .gate-board-link { font-size: max(calc(13 * var(--u)), 13px); color: var(--k-cin); text-decoration-color: var(--k-cin); }
html.land .gate-sheet .gate-board-link[hidden] { display: none; }

html.land #scr-settle .settle-rank { color: var(--tbl-ink, #3a2a16); font-weight: 700; }
html.land #scr-final .final-rank { margin: 0; font-size: max(calc(10.5 * var(--u)), 12px); line-height: 1.4; color: #e9cf86; text-align: left; }
html.land #scr-final .final-rank[hidden] { display: none; }
html.land.compact:not(.in-tut) #scr-final .final-rank { color: var(--k-ink); }
html.land .rank-link {
display: inline-block; min-height: 44px; min-width: 44px; box-sizing: border-box; cursor: pointer; font-family: inherit; vertical-align: middle;
padding-left: calc(4 * var(--u)); padding-right: calc(4 * var(--u)); padding-top: 0; padding-bottom: 0; border: 0; background: none; box-shadow: none;
font-size: max(calc(12.5 * var(--u)), 12px); font-weight: 800; color: #c84b3c; text-decoration: underline; text-underline-offset: 2px;
}
html.land #scr-final .rank-link { color: #ffd86b; }

html.land.compact:not(.in-tut) #scr-prep .prep-dock .prep-hero > .hero-passive { overflow: visible; max-width: none; width: calc(100% + 6 * var(--u)); margin-left: calc(-3 * var(--u)); }

html.land {
--k-stone: #0b3c4e;
--k-stone-d: #082a36;
--k-cin: #ae4335;
--k-cin-d: #8a2a1e;
--k-paper: #f6ebd8;
--k-paper-d: #e2cfa8;
--k-ink: #102f3b;
--k-ink-2: #5e7e80;
--k-on-dark: #f4ebd6;
--k-on-dark-2: #cdbf9f;
--k-gold: #c08e41;
--k-gold-d: #8c6a35;
--k-ink-rgb: 16, 47, 59; --k-gold-rgb: 192, 142, 65; --k-stone-rgb: 11, 60, 78;
}
html.land .btn-main, html.land .btn-sub, html.land .k-sign, html.land .k-plaque, html.land .k-tip, html.land .k-paper, html.land .k-settle, html.land .k-tab, html.land .k-tag, html.land .k-xp, html.land .k-xp > .k-xp-fill {
box-sizing: border-box; border-style: solid; border-color: transparent; border-width: 0; border-radius: 0; border-image-repeat: stretch;
background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.land .btn-main, html.land .btn-sub, html.land .btn-text, html.land .k-tab, html.land .k-round {
-webkit-appearance: none; appearance: none; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
html.land .btn-main, html.land .btn-sub {
--k-btn-main-h: calc(40 * var(--u)); --k-btn-sub-h: calc(40 * var(--u)); --k-pad-y: 3px; transform-origin: 50% 50%;
display: inline-flex; align-items: center; justify-content: center; gap: .35em; position: relative; vertical-align: middle;
min-width: 44px; min-height: max(44px, var(--k-btn-main-h)); margin: 0; padding-top: var(--k-pad-y); padding-bottom: var(--k-pad-y);
font-size: max(calc(15 * var(--u)), 14px); font-weight: 700; line-height: 1.15; white-space: nowrap; text-align: center; letter-spacing: .04em;
}
html.land .btn-sub { min-height: max(44px, var(--k-btn-sub-h)); font-size: max(calc(14 * var(--u)), 13px); }
html.land .btn-main { color: var(--k-on-dark); text-shadow: 0 1px 0 rgba(90, 16, 8, .55); }
html.land .btn-sub { color: var(--k-ink); }
html.land .btn-main:not(:disabled):not(.is-disabled):active, html.land .btn-sub:not(:disabled):not(.is-disabled):active,
html.land .btn-text:not(:disabled):not(.is-disabled):active, html.land .k-tab:not(:disabled):not(.is-disabled):active,
html.land button.k-sign:not(:disabled):not(.is-disabled):active, html.land .k-sign.is-tap:not(.is-disabled):active {
padding-top: calc(var(--k-pad-y) + 1px); padding-bottom: calc(var(--k-pad-y) - 1px);
}
html.land .btn-main:not(:disabled):not(.is-disabled):active, html.land .btn-sub:not(:disabled):not(.is-disabled):active {
padding-top: calc(var(--k-pad-y) + 2px); padding-bottom: calc(var(--k-pad-y) - 2px); transform: scale(.97);
}
html.land .btn-main::after, html.land .btn-sub::after { content: ""; position: absolute; left: 0; top: -2px; right: 0; bottom: -2px; }
html.land .btn-main[hidden], html.land .btn-sub[hidden], html.land .btn-text[hidden], html.land .k-sign[hidden], html.land .k-plaque[hidden], html.land .k-tip[hidden], html.land .k-paper[hidden], html.land .k-settle[hidden], html.land .k-tabs[hidden], html.land .k-tab[hidden], html.land .k-tag[hidden], html.land .k-xp[hidden], html.land .k-round[hidden], html.land .k-frame-beast[hidden], html.land .k-frame-hero[hidden], html.land .k-frame-relic[hidden], html.land .k-slot[hidden], html.land .k-seal[hidden], html.land .k-tj[hidden], html.land .k-lamp[hidden] { display: none !important; }
html.land .btn-main:disabled, html.land .btn-main.is-disabled { color: rgba(244, 235, 214, .62); text-shadow: none; cursor: default; }
html.land .btn-sub:disabled, html.land .btn-sub.is-disabled { color: rgba(var(--k-ink-rgb), .45); cursor: default; }
html.land .btn-text {
--k-pad-y: 2px; display: inline-flex; align-items: center; justify-content: center; position: relative; vertical-align: middle;
min-width: 44px; min-height: 44px; margin: 0; box-sizing: border-box; border: 0; border-radius: 0; background: none; box-shadow: none;
padding-left: calc(6 * var(--u)); padding-right: calc(6 * var(--u)); padding-top: var(--k-pad-y); padding-bottom: var(--k-pad-y);
font-size: max(calc(13 * var(--u)), 12px); font-weight: 700; line-height: 1.2; color: var(--k-ink);
text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: .28em; text-decoration-color: rgba(var(--k-ink-rgb), .55);
}
html.land .btn-text:not(:disabled):not(.is-disabled):active { color: #061d26; text-decoration-color: var(--k-ink); }
html.land .btn-text.on-dark { color: var(--k-on-dark); text-decoration-color: rgba(244, 235, 214, .6); }
html.land .btn-text:disabled, html.land .btn-text.is-disabled { opacity: .45; cursor: default; }
html.land .k-sign {
--k-sign-h: calc(34 * var(--u)); --k-pad-y: 1px; display: inline-flex; align-items: center; justify-content: center; position: relative;
min-height: var(--k-sign-h); padding-top: var(--k-pad-y); padding-bottom: var(--k-pad-y); margin: 0;
font-size: max(calc(14 * var(--u)), 12px); font-weight: 700; line-height: 1.2; color: var(--k-ink); white-space: nowrap;
}
html.land button.k-sign, html.land .k-sign.is-tap { cursor: pointer; font-family: inherit; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
html.land .k-sign:disabled, html.land .k-sign.is-disabled { color: rgba(var(--k-ink-rgb), .5); cursor: default; }
html.land .k-plaque {
--k-plaque-h: calc(48 * var(--u)); display: inline-flex; align-items: center; justify-content: center; position: relative;
min-height: var(--k-plaque-h); padding-top: 0; padding-bottom: 0; margin: 0;
font-size: max(calc(21 * var(--u)), 16px); font-weight: 700; line-height: 1.1; letter-spacing: .12em; color: var(--k-on-dark); white-space: nowrap;
text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
}
html.land .k-tip {
--k-tip-h: calc(30 * var(--u)); display: inline-flex; align-items: center; justify-content: center; position: relative;
min-height: var(--k-tip-h); padding-top: calc(2 * var(--u)); padding-bottom: calc(2 * var(--u)); margin: 0;
font-size: max(calc(12 * var(--u)), 12px); font-weight: 700; line-height: 1.3; color: var(--k-ink); text-align: center;
}
html.land .k-paper { --k-paper-h: calc(192 * var(--u)); display: block; position: relative; color: var(--k-ink); }
html.land .k-settle { --k-settle-h: calc(256 * var(--u)); display: block; position: relative; color: var(--k-ink); }
html.land .k-tabs { display: flex; align-items: stretch; justify-content: center; gap: 0; }
html.land .k-tab {
--k-tab-h: calc(30 * var(--u)); --k-pad-y: 1px; display: inline-flex; align-items: center; justify-content: center; position: relative; flex: 1 1 0;
min-width: 44px; min-height: var(--k-tab-h); margin: 0; padding-top: var(--k-pad-y); padding-bottom: var(--k-pad-y);
font-size: max(calc(13 * var(--u)), 12px); font-weight: 700; line-height: 1.15; color: var(--k-ink); white-space: nowrap;
}
html.land .k-tab.is-on, html.land .k-tab[aria-selected="true"] { color: var(--k-on-dark); text-shadow: 0 1px 0 rgba(90, 16, 8, .5); }
html.land .k-tab:disabled, html.land .k-tab.is-disabled { color: rgba(var(--k-ink-rgb), .45); cursor: default; }
html.land .k-tag {
--k-tag-h: calc(20 * var(--u)); display: inline-flex; align-items: center; justify-content: center; position: relative;
min-height: var(--k-tag-h); padding-top: 0; padding-bottom: 0; margin: 0;
font-size: max(calc(11 * var(--u)), 12px); font-weight: 700; line-height: 1.1; color: var(--k-ink); white-space: nowrap;
}
html.land .btn-text::after, html.land .k-tab::after, html.land button.k-sign::after, html.land .k-sign.is-tap::after {
content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
}
html.land .k-xp { --k-xp-slot-h: calc(14 * var(--u)); --p: 0; display: block; position: relative; height: var(--k-xp-slot-h); }
html.land .k-xp > .k-xp-fill { position: absolute; display: block; clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
html.land .k-xp.is-empty > .k-xp-fill { display: none; }
html.land .k-round {
--k-round: calc(30 * var(--u)); --k-pad-y: 1px; display: inline-flex; align-items: center; justify-content: center; position: relative; vertical-align: middle;
width: max(44px, var(--k-round)); height: max(44px, var(--k-round)); margin: 0; box-sizing: border-box; border: 0; border-radius: 0; background: none; box-shadow: none;
padding-left: 0; padding-right: 0; padding-top: var(--k-pad-y); padding-bottom: var(--k-pad-y); color: var(--k-on-dark);
font-size: max(calc(13 * var(--u)), 12px); font-weight: 700; line-height: 1; isolation: isolate;
}
html.land .k-round::before {
content: ""; position: absolute; left: 50%; top: 50%; width: var(--k-round); height: var(--k-round); transform: translate(-50%, -50%);
background-repeat: no-repeat; pointer-events: none; z-index: -1;
}
html.land .k-round > * { position: relative; z-index: 1; }
html.land .k-round:not(:disabled):not(.is-disabled):active { padding-top: calc(var(--k-pad-y) + 1px); padding-bottom: calc(var(--k-pad-y) - 1px); }
html.land .k-round:disabled, html.land .k-round.is-disabled { cursor: default; color: rgba(244, 235, 214, .5); }
html.land .k-frame-beast, html.land .k-frame-hero, html.land .k-frame-relic {
--k-card-w: calc(64 * var(--u)); display: block; position: relative; width: var(--k-card-w); box-sizing: border-box;
}
html.land .k-frame-beast { height: calc(var(--k-card-w) * 1.5); }
html.land .k-frame-hero { height: calc(var(--k-card-w) * 1.4545); }
html.land .k-frame-relic { height: calc(var(--k-card-w) * 1.25); }
html.land .k-frame-beast::after, html.land .k-frame-hero::after, html.land .k-frame-relic::after {
content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; pointer-events: none; z-index: 1;
}
html.land .k-frame-beast.k-skin-gilt.is-selected::after { filter: drop-shadow(0 0 calc(2 * var(--u)) rgba(255, 214, 120, .95)) drop-shadow(0 0 calc(5 * var(--u)) rgba(240, 180, 60, .6)); }
html.land .k-frame-art { position: absolute; z-index: 0; overflow: hidden; background-size: cover; background-position: 50% 30%; background-repeat: no-repeat; }
html.land .k-over { position: absolute; z-index: 2; }
html.land .k-slot { --k-card-w: calc(64 * var(--u)); display: block; position: relative; width: var(--k-card-w); height: calc(var(--k-card-w) * 1.5); background-repeat: no-repeat; }
html.land .k-frame-beast > [class*="k-pos-"] { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; }
html.land .k-frame-beast { --k-card-fs: max(calc(10 * var(--u)), 12px); }
html.land .k-frame-beast > .k-pos-name, html.land .k-frame-beast > .k-pos-atk, html.land .k-frame-beast > .k-pos-hp { font-size: var(--k-card-fs, max(calc(10 * var(--u)), 12px)); font-weight: 700; line-height: 1; white-space: nowrap; }
html.land .k-frame-beast > .k-pos-cost { left: 11.875%; top: 11.25%; width: 12.5%; height: 8.3333%; }
html.land .k-frame-beast > .k-pos-star { left: 26.875%; top: 8.3333%; width: 46.25%; height: 6.6667%; }
html.land .k-frame-beast > .k-pos-el { left: 75.625%; top: 11.25%; width: 12.5%; height: 8.3333%; }
html.land .k-frame-beast > .k-pos-bond { left: 11.875%; top: 22.5%; width: 39.375%; height: 6.25%; }
html.land .k-frame-beast > .k-pos-counter { left: 75.625%; top: 22.5%; width: 12.5%; height: 8.3333%; }
html.land .k-frame-beast > .k-pos-name { left: 15%; top: 82.5%; width: 70%; height: 6.25%; }
html.land .k-frame-beast > .k-pos-atk { left: 15%; top: 89.5833%; width: 21.875%; height: 5.4167%; }
html.land .k-frame-beast > .k-pos-dr { left: 45%; top: 89.1667%; width: 10%; height: 6.6667%; }
html.land .k-frame-beast > .k-pos-hp { left: 63.125%; top: 89.5833%; width: 21.875%; height: 5.4167%; }
html.land .k-seal { --k-seal: calc(18 * var(--u)); display: inline-flex; align-items: center; justify-content: center; position: relative; width: var(--k-seal); height: var(--k-seal);
background-repeat: no-repeat; font-size: max(calc(10 * var(--u)), 12px); font-weight: 800; line-height: 1; color: var(--k-on-dark); text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
html.land .k-seal-cost { color: var(--k-ink); text-shadow: none; }
html.land .k-tj { --k-tj: calc(24 * var(--u)); display: inline-flex; align-items: center; justify-content: center; width: var(--k-tj); height: var(--k-tj); background-repeat: no-repeat;
font-size: max(calc(12 * var(--u)), 12px); font-weight: 800; line-height: 1; color: var(--k-cin); }
html.land .k-tj[class*="k-tj-"] { color: transparent; text-shadow: none; }
html.land .k-lamp { --k-lamp-w: calc(16 * var(--u)); display: inline-block; position: relative; width: var(--k-lamp-w); height: calc(var(--k-lamp-w) * 1.5); background-repeat: no-repeat; vertical-align: bottom; }
html.land .k-lamp.is-on::after { content: ""; position: absolute; background-repeat: no-repeat; pointer-events: none; }

html.land .btn-main {
border-image-source: url("../assets/kit/cmp/btn_main_normal.webp"); border-image-slice: 25 88 25 88 fill; border-image-width: calc(var(--k-btn-main-h) * 0.2907) calc(var(--k-btn-main-h) * 1.0233);
padding-left: calc(var(--k-btn-main-h) * 0.88); padding-right: calc(var(--k-btn-main-h) * 0.88);
}
html.land .btn-main:not(:disabled):not(.is-disabled):active { border-image-source: url("../assets/kit/cmp/btn_main_pressed.webp"); }
html.land .btn-main:disabled,
html.land .btn-main.is-disabled { border-image-source: url("../assets/kit/cmp/btn_main_disabled.webp"); }
html.land .btn-sub {
border-image-source: url("../assets/kit/cmp/btn_sub_normal.webp"); border-image-slice: 25 65 25 65 fill; border-image-width: calc(var(--k-btn-sub-h) * 0.3247) calc(var(--k-btn-sub-h) * 0.8442);
padding-left: calc(var(--k-btn-sub-h) * 0.3799); padding-right: calc(var(--k-btn-sub-h) * 0.3799);
}
html.land .btn-sub:not(:disabled):not(.is-disabled):active { border-image-source: url("../assets/kit/cmp/btn_sub_pressed.webp"); }
html.land .btn-sub:disabled,
html.land .btn-sub.is-disabled { border-image-source: url("../assets/kit/cmp/btn_sub_disabled.webp"); }
html.land .k-sign {
border-image-source: url("../assets/kit/cmp/sign_normal.webp"); border-image-slice: 36 60 36 60 fill; border-image-width: calc(var(--k-sign-h) * 0.375) calc(var(--k-sign-h) * 0.625);
padding-left: calc(var(--k-sign-h) * 0.3438); padding-right: calc(var(--k-sign-h) * 0.3438);
}
html.land button.k-sign:not(:disabled):not(.is-disabled):active,
html.land .k-sign.is-tap:not(.is-disabled):active { border-image-source: url("../assets/kit/cmp/sign_pressed.webp"); }
html.land .k-sign:disabled,
html.land .k-sign.is-disabled { border-image-source: url("../assets/kit/cmp/sign_disabled.webp"); }
html.land .k-plaque {
border-image-source: url("../assets/kit/cmp/plaque.webp"); border-image-slice: 41 96 41 96 fill; border-image-width: calc(var(--k-plaque-h) * 0.3565) calc(var(--k-plaque-h) * 0.8348);
padding-left: calc(var(--k-plaque-h) * 0.5176); padding-right: calc(var(--k-plaque-h) * 0.5176);
}
html.land .k-tip {
border-image-source: url("../assets/kit/cmp/tip.webp"); border-image-slice: 21 83 21 83 fill; border-image-width: calc(var(--k-tip-h) * 0.2917) calc(var(--k-tip-h) * 1.1528);
padding-left: calc(var(--k-tip-h) * 0.5187); padding-right: calc(var(--k-tip-h) * 0.5187);
}
html.land .k-paper {
border-image-source: url("../assets/kit/cmp/paper.webp"); border-image-slice: 62 74 62 74 fill; border-image-width: calc(var(--k-paper-h) * 0.2153) calc(var(--k-paper-h) * 0.2569);
padding-left: calc(var(--k-paper-h) * 0.1079); padding-right: calc(var(--k-paper-h) * 0.1079);
padding-top: calc(var(--k-paper-h) * 0.0904); padding-bottom: calc(var(--k-paper-h) * 0.0904);
}
html.land .k-tab {
border-image-source: url("../assets/kit/cmp/tab_off.webp"); border-image-slice: 15 39 15 39 fill; border-image-width: calc(var(--k-tab-h) * 0.3261) calc(var(--k-tab-h) * 0.8478);
padding-left: calc(var(--k-tab-h) * 0.2967); padding-right: calc(var(--k-tab-h) * 0.2967);
}
html.land .k-tab.is-on,
html.land .k-tab[aria-selected="true"] { border-image-source: url("../assets/kit/cmp/tab_on.webp"); }
html.land .k-tab:not(:disabled):not(.is-disabled):active { border-image-source: url("../assets/kit/cmp/tab_pressed.webp"); }
html.land .k-tab:disabled,
html.land .k-tab.is-disabled { border-image-source: url("../assets/kit/cmp/tab_disabled.webp"); }
html.land .k-tag {
border-image-source: url("../assets/kit/cmp/tag.webp"); border-image-slice: 13 50 13 50 fill; border-image-width: calc(var(--k-tag-h) * 0.3023) calc(var(--k-tag-h) * 1.1628);
padding-left: calc(var(--k-tag-h) * 0.4884); padding-right: calc(var(--k-tag-h) * 0.4884);
}
html.land .k-settle {
border-image-source: url("../assets/kit/cmp/settle.webp"); border-image-slice: 101 139 101 139 fill; border-image-width: calc(var(--k-settle-h) * 0.263) calc(var(--k-settle-h) * 0.362);
padding-left: calc(var(--k-settle-h) * 0.152); padding-right: calc(var(--k-settle-h) * 0.152);
padding-top: calc(var(--k-settle-h) * 0.1105); padding-bottom: calc(var(--k-settle-h) * 0.1105);
}
html.land .k-xp { border-image-source: url("../assets/kit/cmp/xp_slot.webp"); border-image-slice: 14 50 14 50 fill; border-image-width: calc(var(--k-xp-slot-h) * 0.2917) calc(var(--k-xp-slot-h) * 1.0417); }
html.land .k-xp > .k-xp-fill {
left: calc(var(--k-xp-slot-h) * 1.0625); right: calc(var(--k-xp-slot-h) * 1.0625); top: calc(var(--k-xp-slot-h) * 0.3125); bottom: calc(var(--k-xp-slot-h) * 0.3125);
border-image-source: url("../assets/kit/cmp/xp_fill.webp"); border-image-slice: 6 12 6 12 fill; border-image-width: calc(var(--k-xp-slot-h) * 0.1184) calc(var(--k-xp-slot-h) * 0.2368);
}
html.land .k-frame-beast::after,
html.land .k-slot { background-image: url("../assets/kit/cmp/frames_a.webp"); }
html.land .k-frame-beast.k-skin-thunder::after,
html.land .k-frame-beast.k-skin-gilt::after,
html.land .k-frame-hero::after,
html.land .k-frame-relic::after { background-image: url("../assets/kit/cmp/frames_b.webp"); }
html.land .k-frame-beast.k-cs-leiwen::after,
html.land .k-frame-beast.k-cs-leiwen.is-selected::after,
html.land .k-frame-beast.k-cs-leiwen.is-unbuyable::after,
html.land .k-frame-beast.k-cs-leiwen.k-skin-thunder::after,
html.land .k-frame-beast.k-cs-leiwen.k-skin-thunder.is-selected::after,
html.land .k-frame-beast.k-cs-leiwen.k-skin-thunder.is-unbuyable::after,
html.land .k-frame-beast.k-cs-leiwen.k-skin-gilt::after,
html.land .k-frame-beast.k-cs-leiwen.k-skin-gilt.is-selected::after,
html.land .k-frame-beast.k-cs-leiwen.k-skin-gilt.is-unbuyable::after,
html.land .k-frame-beast.k-cs-liujin::after,
html.land .k-frame-beast.k-cs-liujin.is-selected::after,
html.land .k-frame-beast.k-cs-liujin.is-unbuyable::after,
html.land .k-frame-beast.k-cs-liujin.k-skin-thunder::after,
html.land .k-frame-beast.k-cs-liujin.k-skin-thunder.is-selected::after,
html.land .k-frame-beast.k-cs-liujin.k-skin-thunder.is-unbuyable::after,
html.land .k-frame-beast.k-cs-liujin.k-skin-gilt::after,
html.land .k-frame-beast.k-cs-liujin.k-skin-gilt.is-selected::after,
html.land .k-frame-beast.k-cs-liujin.k-skin-gilt.is-unbuyable::after { background-image: url("../assets/kit/cmp/frames_c.webp"); }
html.land .k-round::before,
html.land .k-lamp,
html.land .k-lamp.is-on::after,
html.land .k-seal { background-image: url("../assets/kit/cmp/seals_a.webp"); }
html.land .k-tj { background-image: url("../assets/kit/cmp/seals_b.webp"); }
html.land .k-frame-beast::after { background-size: 406.25% 100%; background-position: 0% 0%; }
html.land .k-frame-beast.is-selected::after { background-size: 406.25% 100%; background-position: 33.3333% 0%; }
html.land .k-frame-beast.is-unbuyable::after { background-size: 406.25% 100%; background-position: 66.6667% 0%; }
html.land .k-frame-beast.k-skin-thunder::after { background-size: 333.8542% 394.0972%; background-position: 0% 0%; }
html.land .k-frame-beast.k-skin-thunder.is-selected::after { background-size: 333.8542% 394.0972%; background-position: 43.6526% 0%; }
html.land .k-frame-beast.k-skin-thunder.is-unbuyable::after { background-size: 333.8542% 394.0972%; background-position: 87.3051% 0%; }
html.land .k-frame-beast.k-skin-gilt::after { background-size: 333.8542% 394.0972%; background-position: 0% 34.4746%; }
html.land .k-frame-beast.k-skin-gilt.is-selected::after { background-size: 333.8542% 394.0972%; background-position: 43.6526% 34.4746%; }
html.land .k-frame-beast.k-skin-gilt.is-unbuyable::after { background-size: 333.8542% 394.0972%; background-position: 87.3051% 34.4746%; }
html.land .k-frame-beast.k-cs-leiwen::after { background-size: 406.25% 505.5556%; background-position: 0% 0%; }
html.land .k-frame-beast.k-cs-leiwen.is-selected::after { background-size: 406.25% 505.5556%; background-position: 33.3333% 0%; }
html.land .k-frame-beast.k-cs-leiwen.is-unbuyable::after { background-size: 406.25% 505.5556%; background-position: 66.6667% 0%; }
html.land .k-frame-beast.k-cs-leiwen.k-skin-thunder::after { background-size: 406.25% 505.5556%; background-position: 66.6667% 25%; }
html.land .k-frame-beast.k-cs-leiwen.k-skin-thunder.is-selected::after { background-size: 406.25% 505.5556%; background-position: 100% 25%; }
html.land .k-frame-beast.k-cs-leiwen.k-skin-thunder.is-unbuyable::after { background-size: 406.25% 505.5556%; background-position: 0% 50%; }
html.land .k-frame-beast.k-cs-leiwen.k-skin-gilt::after { background-size: 406.25% 505.5556%; background-position: 33.3333% 50%; }
html.land .k-frame-beast.k-cs-leiwen.k-skin-gilt.is-selected::after { background-size: 406.25% 505.5556%; background-position: 66.6667% 50%; }
html.land .k-frame-beast.k-cs-leiwen.k-skin-gilt.is-unbuyable::after { background-size: 406.25% 505.5556%; background-position: 100% 50%; }
html.land .k-frame-beast.k-cs-liujin::after { background-size: 406.25% 505.5556%; background-position: 100% 0%; }
html.land .k-frame-beast.k-cs-liujin.is-selected::after { background-size: 406.25% 505.5556%; background-position: 0% 25%; }
html.land .k-frame-beast.k-cs-liujin.is-unbuyable::after { background-size: 406.25% 505.5556%; background-position: 33.3333% 25%; }
html.land .k-frame-beast.k-cs-liujin.k-skin-thunder::after { background-size: 406.25% 505.5556%; background-position: 0% 75%; }
html.land .k-frame-beast.k-cs-liujin.k-skin-thunder.is-selected::after { background-size: 406.25% 505.5556%; background-position: 33.3333% 75%; }
html.land .k-frame-beast.k-cs-liujin.k-skin-thunder.is-unbuyable::after { background-size: 406.25% 505.5556%; background-position: 66.6667% 75%; }
html.land .k-frame-beast.k-cs-liujin.k-skin-gilt::after { background-size: 406.25% 505.5556%; background-position: 100% 75%; }
html.land .k-frame-beast.k-cs-liujin.k-skin-gilt.is-selected::after { background-size: 406.25% 505.5556%; background-position: 0% 100%; }
html.land .k-frame-beast.k-cs-liujin.k-skin-gilt.is-unbuyable::after { background-size: 406.25% 505.5556%; background-position: 33.3333% 100%; }
html.land .k-frame-hero::after { background-size: 303.7915% 369.7068%; background-position: 0% 70.5314%; }
html.land .k-frame-hero.is-selected::after { background-size: 303.7915% 369.7068%; background-position: 50% 70.5314%; }
html.land .k-frame-hero.is-unbuyable::after { background-size: 303.7915% 369.7068%; background-position: 100% 70.5314%; }
html.land .k-frame-relic::after { background-size: 333.8542% 472.9167%; background-position: 0% 100%; }
html.land .k-frame-relic.is-selected::after { background-size: 333.8542% 472.9167%; background-position: 43.6526% 100%; }
html.land .k-frame-relic.is-unbuyable::after { background-size: 333.8542% 472.9167%; background-position: 87.3051% 100%; }
html.land .k-slot { background-size: 406.25% 100%; background-position: 100% 0%; }
html.land .k-round::before { background-size: 551.0417% 184.375%; background-position: 0% 0%; }
html.land .k-round:not(:disabled):not(.is-disabled):active::before { background-size: 551.0417% 184.375%; background-position: 23.0947% 0%; }
html.land .k-round:disabled::before,
html.land .k-round.is-disabled::before { background-size: 551.0417% 184.375%; background-position: 46.1894% 0%; }
html.land .k-lamp { background-size: 687.013% 153.913%; background-position: 66.3717% 0%; }
html.land .k-lamp.is-on::after { background-size: 2204.1667% 453.8462%; background-position: 75.4455% 0%;
left: 42.8571%; top: 15.6522%; width: 31.1688%; height: 33.913%;
}
html.land .k-seal-cost { background-size: 912.069% 305.1724%; background-position: 86.8365% 0%; }
html.land .k-seal-kw,
html.land .k-seal-kwflow { background-size: 912.069% 305.1724%; background-position: 100% 0%; }
html.land .k-seal-metal { background-size: 912.069% 305.1724%; background-position: 0% 100%; }
html.land .k-seal-wood { background-size: 912.069% 305.1724%; background-position: 13.1635% 100%; }
html.land .k-seal-water { background-size: 912.069% 305.1724%; background-position: 26.327% 100%; }
html.land .k-seal-fire { background-size: 912.069% 305.1724%; background-position: 39.4904% 100%; }
html.land .k-seal-earth { background-size: 912.069% 305.1724%; background-position: 52.6539% 100%; }
html.land .k-seal-atk { background-size: 1230.2326% 411.6279%; background-position: 63.786% 88.806%; }
html.land .k-seal-hp { background-size: 1230.2326% 411.6279%; background-position: 73.4568% 88.806%; }
html.land .k-tj { background-size: 625.974% 100%; background-position: 0% 0%; }
html.land .k-tj.k-tj-1 { background-size: 625.974% 100%; background-position: 20% 0%; }
html.land .k-tj.k-tj-2 { background-size: 625.974% 100%; background-position: 40% 0%; }
html.land .k-tj.k-tj-3 { background-size: 625.974% 100%; background-position: 60% 0%; }
html.land .k-tj.k-tj-4 { background-size: 625.974% 100%; background-position: 80% 0%; }
html.land .k-tj.k-tj-5 { background-size: 625.974% 100%; background-position: 100% 0%; }
html.land .k-frame-beast > .k-frame-art { left: 7.8125%; top: 7.2917%; width: 84.375%; height: 87.1528%; }
html.land .k-frame-hero > .k-frame-art { left: 8.0569%; top: 6.5147%; width: 83.4123%; height: 67.7524%; }
html.land .k-frame-relic > .k-frame-art { left: 9.8958%; top: 10.8333%; width: 80.2083%; height: 78.75%; }

html.land.hd .btn-main {
border-image-source: url("../assets/kit/std/btn_main_normal.webp"); border-image-slice: 42 146 42 146 fill; border-image-width: calc(var(--k-btn-main-h) * 0.2917) calc(var(--k-btn-main-h) * 1.0139); border-image-outset: 0;
padding-left: calc(var(--k-btn-main-h) * 0.8719); padding-right: calc(var(--k-btn-main-h) * 0.8719);
}
html.land.hd .btn-main:not(:disabled):not(.is-disabled):active { border-image-source: url("../assets/kit/std/btn_main_pressed.webp"); }
html.land.hd .btn-main:disabled,
html.land.hd .btn-main.is-disabled { border-image-source: url("../assets/kit/std/btn_main_disabled.webp"); }
html.land.hd .btn-sub {
border-image-source: url("../assets/kit/std/btn_sub_normal.webp"); border-image-slice: 42 109 42 109 fill; border-image-width: calc(var(--k-btn-sub-h) * 0.3281) calc(var(--k-btn-sub-h) * 0.8516); border-image-outset: 0;
padding-left: calc(var(--k-btn-sub-h) * 0.3832); padding-right: calc(var(--k-btn-sub-h) * 0.3832);
}
html.land.hd .btn-sub:not(:disabled):not(.is-disabled):active { border-image-source: url("../assets/kit/std/btn_sub_pressed.webp"); }
html.land.hd .btn-sub:disabled,
html.land.hd .btn-sub.is-disabled { border-image-source: url("../assets/kit/std/btn_sub_disabled.webp"); }
html.land.hd .k-sign {
border-image-source: url("../assets/kit/std/sign_normal.webp"); border-image-slice: 71 96 37 96 fill; border-image-width: calc(var(--k-sign-h) * 0.6339) calc(var(--k-sign-h) * 0.8571) calc(var(--k-sign-h) * 0.3304) calc(var(--k-sign-h) * 0.8571); border-image-outset: calc(var(--k-sign-h) * 0.4286) 0 0 0;
padding-left: calc(var(--k-sign-h) * 0.4714); padding-right: calc(var(--k-sign-h) * 0.4714);
}
html.land.hd button.k-sign:not(:disabled):not(.is-disabled):active,
html.land.hd .k-sign.is-tap:not(.is-disabled):active { border-image-source: url("../assets/kit/std/sign_pressed.webp"); }
html.land.hd .k-sign:disabled,
html.land.hd .k-sign.is-disabled { border-image-source: url("../assets/kit/std/sign_disabled.webp"); }
html.land.hd .k-plaque {
border-image-source: url("../assets/kit/std/plaque.webp"); border-image-slice: 68 160 68 160 fill; border-image-width: calc(var(--k-plaque-h) * 0.3542) calc(var(--k-plaque-h) * 0.8333); border-image-outset: 0;
padding-left: calc(var(--k-plaque-h) * 0.5167); padding-right: calc(var(--k-plaque-h) * 0.5167);
}
html.land.hd .k-tip {
border-image-source: url("../assets/kit/std/tip.webp"); border-image-slice: 35 138 35 138 fill; border-image-width: calc(var(--k-tip-h) * 0.2917) calc(var(--k-tip-h) * 1.15); border-image-outset: 0;
padding-left: calc(var(--k-tip-h) * 0.5175); padding-right: calc(var(--k-tip-h) * 0.5175);
}
html.land.hd .k-paper {
border-image-source: url("../assets/kit/std/paper.webp"); border-image-slice: 103 124 103 124 fill; border-image-width: calc(var(--k-paper-h) * 0.2146) calc(var(--k-paper-h) * 0.2583); border-image-outset: 0;
padding-left: calc(var(--k-paper-h) * 0.1085); padding-right: calc(var(--k-paper-h) * 0.1085);
padding-top: calc(var(--k-paper-h) * 0.0901); padding-bottom: calc(var(--k-paper-h) * 0.0901);
}
html.land.hd .k-tab {
border-image-source: url("../assets/kit/std/tab_off.webp"); border-image-slice: 25 65 25 65 fill; border-image-width: calc(var(--k-tab-h) * 0.3247) calc(var(--k-tab-h) * 0.8442); border-image-outset: 0;
padding-left: calc(var(--k-tab-h) * 0.2955); padding-right: calc(var(--k-tab-h) * 0.2955);
}
html.land.hd .k-tab.is-on,
html.land.hd .k-tab[aria-selected="true"] { border-image-source: url("../assets/kit/std/tab_on.webp"); }
html.land.hd .k-tab:not(:disabled):not(.is-disabled):active { border-image-source: url("../assets/kit/std/tab_pressed.webp"); }
html.land.hd .k-tab:disabled,
html.land.hd .k-tab.is-disabled { border-image-source: url("../assets/kit/std/tab_disabled.webp"); }
html.land.hd .k-tag {
border-image-source: url("../assets/kit/std/tag.webp"); border-image-slice: 21 83 21 83 fill; border-image-width: calc(var(--k-tag-h) * 0.2917) calc(var(--k-tag-h) * 1.1528); border-image-outset: 0;
padding-left: calc(var(--k-tag-h) * 0.4842); padding-right: calc(var(--k-tag-h) * 0.4842);
}
html.land.hd .k-settle {
border-image-source: url("../assets/kit/std/settle.webp"); border-image-slice: 168 231 168 231 fill; border-image-width: calc(var(--k-settle-h) * 0.2625) calc(var(--k-settle-h) * 0.3609); border-image-outset: 0;
padding-left: calc(var(--k-settle-h) * 0.1516); padding-right: calc(var(--k-settle-h) * 0.1516);
padding-top: calc(var(--k-settle-h) * 0.1103); padding-bottom: calc(var(--k-settle-h) * 0.1103);
}
html.land.hd .k-xp { border-image-source: url("../assets/kit/std/xp_slot.webp"); border-image-slice: 23 83 23 83 fill; border-image-width: calc(var(--k-xp-slot-h) * 0.2875) calc(var(--k-xp-slot-h) * 1.0375); border-image-outset: 0; }
html.land.hd .k-xp > .k-xp-fill {
left: calc(var(--k-xp-slot-h) * 1.05); right: calc(var(--k-xp-slot-h) * 1.05); top: calc(var(--k-xp-slot-h) * 0.3125); bottom: calc(var(--k-xp-slot-h) * 0.3125);
border-image-source: url("../assets/kit/std/xp_fill.webp"); border-image-slice: 10 20 10 20 fill; border-image-width: calc(var(--k-xp-slot-h) * 0.1172) calc(var(--k-xp-slot-h) * 0.2344);
}
html.land.hd .k-frame-beast::after,
html.land.hd .k-slot { background-image: url("../assets/kit/std/frames_a.webp"); }
html.land.hd .k-frame-beast.k-skin-thunder::after,
html.land.hd .k-frame-beast.k-skin-gilt::after,
html.land.hd .k-frame-hero::after,
html.land.hd .k-frame-relic::after { background-image: url("../assets/kit/std/frames_b.webp"); }
html.land.hd .k-frame-beast.k-cs-leiwen::after,
html.land.hd .k-frame-beast.k-cs-leiwen.is-selected::after,
html.land.hd .k-frame-beast.k-cs-leiwen.is-unbuyable::after,
html.land.hd .k-frame-beast.k-cs-leiwen.k-skin-thunder::after,
html.land.hd .k-frame-beast.k-cs-leiwen.k-skin-thunder.is-selected::after,
html.land.hd .k-frame-beast.k-cs-leiwen.k-skin-thunder.is-unbuyable::after,
html.land.hd .k-frame-beast.k-cs-leiwen.k-skin-gilt::after,
html.land.hd .k-frame-beast.k-cs-leiwen.k-skin-gilt.is-selected::after,
html.land.hd .k-frame-beast.k-cs-leiwen.k-skin-gilt.is-unbuyable::after,
html.land.hd .k-frame-beast.k-cs-liujin::after,
html.land.hd .k-frame-beast.k-cs-liujin.is-selected::after,
html.land.hd .k-frame-beast.k-cs-liujin.is-unbuyable::after,
html.land.hd .k-frame-beast.k-cs-liujin.k-skin-thunder::after,
html.land.hd .k-frame-beast.k-cs-liujin.k-skin-thunder.is-selected::after,
html.land.hd .k-frame-beast.k-cs-liujin.k-skin-thunder.is-unbuyable::after,
html.land.hd .k-frame-beast.k-cs-liujin.k-skin-gilt::after,
html.land.hd .k-frame-beast.k-cs-liujin.k-skin-gilt.is-selected::after,
html.land.hd .k-frame-beast.k-cs-liujin.k-skin-gilt.is-unbuyable::after { background-image: url("../assets/kit/std/frames_c.webp"); }
html.land.hd .k-round::before,
html.land.hd .k-lamp,
html.land.hd .k-lamp.is-on::after,
html.land.hd .k-seal { background-image: url("../assets/kit/std/seals_a.webp"); }
html.land.hd .k-tj { background-image: url("../assets/kit/std/seals_b.webp"); }
html.land.hd .k-frame-beast::after { background-size: 403.75% 100%; background-position: 0% 0%; }
html.land.hd .k-frame-beast.is-selected::after { background-size: 403.75% 100%; background-position: 33.3333% 0%; }
html.land.hd .k-frame-beast.is-unbuyable::after { background-size: 403.75% 100%; background-position: 66.6667% 0%; }
html.land.hd .k-frame-beast.k-skin-thunder::after { background-size: 332.5% 392.5%; background-position: 0% 0%; }
html.land.hd .k-frame-beast.k-skin-thunder.is-selected::after { background-size: 332.5% 392.5%; background-position: 43.5484% 0%; }
html.land.hd .k-frame-beast.k-skin-thunder.is-unbuyable::after { background-size: 332.5% 392.5%; background-position: 87.0968% 0%; }
html.land.hd .k-frame-beast.k-skin-gilt::after { background-size: 332.5% 392.5%; background-position: 0% 34.4729%; }
html.land.hd .k-frame-beast.k-skin-gilt.is-selected::after { background-size: 332.5% 392.5%; background-position: 43.5484% 34.4729%; }
html.land.hd .k-frame-beast.k-skin-gilt.is-unbuyable::after { background-size: 332.5% 392.5%; background-position: 87.0968% 34.4729%; }
html.land.hd .k-frame-beast.k-cs-leiwen::after { background-size: 403.75% 503.3333%; background-position: 0% 0%; }
html.land.hd .k-frame-beast.k-cs-leiwen.is-selected::after { background-size: 403.75% 503.3333%; background-position: 33.3333% 0%; }
html.land.hd .k-frame-beast.k-cs-leiwen.is-unbuyable::after { background-size: 403.75% 503.3333%; background-position: 66.6667% 0%; }
html.land.hd .k-frame-beast.k-cs-leiwen.k-skin-thunder::after { background-size: 403.75% 503.3333%; background-position: 66.6667% 25%; }
html.land.hd .k-frame-beast.k-cs-leiwen.k-skin-thunder.is-selected::after { background-size: 403.75% 503.3333%; background-position: 100% 25%; }
html.land.hd .k-frame-beast.k-cs-leiwen.k-skin-thunder.is-unbuyable::after { background-size: 403.75% 503.3333%; background-position: 0% 50%; }
html.land.hd .k-frame-beast.k-cs-leiwen.k-skin-gilt::after { background-size: 403.75% 503.3333%; background-position: 33.3333% 50%; }
html.land.hd .k-frame-beast.k-cs-leiwen.k-skin-gilt.is-selected::after { background-size: 403.75% 503.3333%; background-position: 66.6667% 50%; }
html.land.hd .k-frame-beast.k-cs-leiwen.k-skin-gilt.is-unbuyable::after { background-size: 403.75% 503.3333%; background-position: 100% 50%; }
html.land.hd .k-frame-beast.k-cs-liujin::after { background-size: 403.75% 503.3333%; background-position: 100% 0%; }
html.land.hd .k-frame-beast.k-cs-liujin.is-selected::after { background-size: 403.75% 503.3333%; background-position: 0% 25%; }
html.land.hd .k-frame-beast.k-cs-liujin.is-unbuyable::after { background-size: 403.75% 503.3333%; background-position: 33.3333% 25%; }
html.land.hd .k-frame-beast.k-cs-liujin.k-skin-thunder::after { background-size: 403.75% 503.3333%; background-position: 0% 75%; }
html.land.hd .k-frame-beast.k-cs-liujin.k-skin-thunder.is-selected::after { background-size: 403.75% 503.3333%; background-position: 33.3333% 75%; }
html.land.hd .k-frame-beast.k-cs-liujin.k-skin-thunder.is-unbuyable::after { background-size: 403.75% 503.3333%; background-position: 66.6667% 75%; }
html.land.hd .k-frame-beast.k-cs-liujin.k-skin-gilt::after { background-size: 403.75% 503.3333%; background-position: 100% 75%; }
html.land.hd .k-frame-beast.k-cs-liujin.k-skin-gilt.is-selected::after { background-size: 403.75% 503.3333%; background-position: 0% 100%; }
html.land.hd .k-frame-beast.k-cs-liujin.k-skin-gilt.is-unbuyable::after { background-size: 403.75% 503.3333%; background-position: 33.3333% 100%; }
html.land.hd .k-frame-hero::after { background-size: 302.2727% 367.9688%; background-position: 0% 70.5539%; }
html.land.hd .k-frame-hero.is-selected::after { background-size: 302.2727% 367.9688%; background-position: 50% 70.5539%; }
html.land.hd .k-frame-hero.is-unbuyable::after { background-size: 302.2727% 367.9688%; background-position: 100% 70.5539%; }
html.land.hd .k-frame-relic::after { background-size: 332.5% 471%; background-position: 0% 100%; }
html.land.hd .k-frame-relic.is-selected::after { background-size: 332.5% 471%; background-position: 43.5484% 100%; }
html.land.hd .k-frame-relic.is-unbuyable::after { background-size: 332.5% 471%; background-position: 87.0968% 100%; }
html.land.hd .k-slot { background-size: 403.75% 100%; background-position: 100% 0%; }
html.land.hd .k-round::before { background-size: 535% 182.5%; background-position: 0% 0%; }
html.land.hd .k-round:not(:disabled):not(.is-disabled):active::before { background-size: 535% 182.5%; background-position: 23.5632% 0%; }
html.land.hd .k-round:disabled::before,
html.land.hd .k-round.is-disabled::before { background-size: 535% 182.5%; background-position: 47.1264% 0%; }
html.land.hd .k-lamp { background-size: 668.75% 152.0833%; background-position: 67.5824% 0%; }
html.land.hd .k-lamp.is-on::after { background-size: 2675% 494.9153%; background-position: 75.7282% 0%;
left: 46.0938%; top: 16.6667%; width: 25%; height: 30.7292%;
}
html.land.hd .k-seal-cost { background-size: 891.6667% 304.1667%; background-position: 86.8421% 0%; }
html.land.hd .k-seal-kw,
html.land.hd .k-seal-kwflow { background-size: 891.6667% 304.1667%; background-position: 100% 0%; }
html.land.hd .k-seal-metal { background-size: 891.6667% 304.1667%; background-position: 0% 100%; }
html.land.hd .k-seal-wood { background-size: 891.6667% 304.1667%; background-position: 13.1579% 100%; }
html.land.hd .k-seal-water { background-size: 891.6667% 304.1667%; background-position: 26.3158% 100%; }
html.land.hd .k-seal-fire { background-size: 891.6667% 304.1667%; background-position: 39.4737% 100%; }
html.land.hd .k-seal-earth { background-size: 891.6667% 304.1667%; background-position: 52.6316% 100%; }
html.land.hd .k-seal-atk { background-size: 1188.8889% 405.5556%; background-position: 63.7755% 89.0909%; }
html.land.hd .k-seal-hp { background-size: 1188.8889% 405.5556%; background-position: 73.4694% 89.0909%; }
html.land.hd .k-tj { background-size: 615.625% 100%; background-position: 0% 0%; }
html.land.hd .k-tj.k-tj-1 { background-size: 615.625% 100%; background-position: 20% 0%; }
html.land.hd .k-tj.k-tj-2 { background-size: 615.625% 100%; background-position: 40% 0%; }
html.land.hd .k-tj.k-tj-3 { background-size: 615.625% 100%; background-position: 60% 0%; }
html.land.hd .k-tj.k-tj-4 { background-size: 615.625% 100%; background-position: 80% 0%; }
html.land.hd .k-tj.k-tj-5 { background-size: 615.625% 100%; background-position: 100% 0%; }
html.land.hd .k-frame-beast > .k-frame-art { left: 7.8125%; top: 7.0833%; width: 84.375%; height: 87.5%; }
html.land.hd .k-frame-hero > .k-frame-art { left: 7.9545%; top: 6.4453%; width: 83.8068%; height: 67.7734%; }
html.land.hd .k-frame-relic > .k-frame-art { left: 10%; top: 10.75%; width: 80.3125%; height: 79%; }

html.land { --c-scrim: rgba(var(--k-ink-rgb), .62); }

html.land .confirm, html.land #tutorial-end, html.land .sheet, html.land:not(.in-tut) #bt-overlay:not([hidden]) { background: var(--c-scrim); -webkit-backdrop-filter: none; backdrop-filter: none; }
html.land .btn-main.is-wide, html.land .btn-sub.is-wide { width: 100%; }

html.land .confirm-card.k-paper { --k-paper-h: calc(116 * var(--u)); max-width: calc(100vw - 16px); box-sizing: border-box; text-align: center; color: var(--k-ink); }
html.land .confirm-card .confirm-msg { color: var(--k-ink); text-shadow: none; }
html.land .confirm-card .confirm-btns { display: flex; flex-direction: column; align-items: stretch; gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); }
html.land .confirm-card .confirm-btns > .btn-main, html.land .confirm-card .confirm-btns > .btn-sub { width: 100%; }
html.land .confirm-card .confirm-btns > .btn-sub { --k-btn-sub-h: calc(34 * var(--u)); }
html.land .confirm-card .confirm-btns > .btn-main { --k-btn-main-h: calc(38 * var(--u)); }

html.land #bt-overlay .result-inner.k-settle { --k-settle-h: calc(128 * var(--u)); color: var(--k-ink); box-sizing: border-box; }
html.land #bt-overlay #ov-title.k-plaque { --k-plaque-h: calc(36 * var(--u)); min-width: calc(104 * var(--u)); font-size: max(calc(22 * var(--u)), 18px); letter-spacing: .3em; text-indent: .3em; margin: 0; }
html.land:not([lang^="zh"]) #bt-overlay #ov-title.k-plaque { letter-spacing: .08em; text-indent: .08em; }
html.land #bt-overlay .result-sub, html.land #bt-overlay .result-line, html.land #bt-overlay .fc-status { color: var(--k-ink); text-shadow: none; }
html.land #bt-overlay .loss-reasons { background: rgba(var(--k-ink-rgb), .06); border-radius: 0; box-shadow: inset 0 0 0 1px rgba(var(--k-gold-rgb), .55); color: var(--k-ink); }
html.land #bt-overlay .lr-head { color: var(--k-cin); }
html.land #bt-overlay .lr-row { color: var(--k-ink); }
html.land #bt-overlay .lr-next { color: var(--k-ink-2); }
html.land #bt-overlay .two-btns > .btn-main, html.land #bt-overlay .two-btns > .btn-sub { width: 100%; min-width: 0; padding-left: calc(var(--k-btn-main-h) * .5); padding-right: calc(var(--k-btn-main-h) * .5); font-size: max(calc(14 * var(--u)), 14px); }
html.land #bt-overlay .two-btns > .btn-sub { padding-left: calc(var(--k-btn-sub-h) * .3); padding-right: calc(var(--k-btn-sub-h) * .3); }

html.land #scr-settle .settle-card.k-settle { --k-settle-h: calc(150 * var(--u)); color: var(--k-ink); }
html.land #scr-settle .settle-head.k-plaque { --k-plaque-h: calc(36 * var(--u)); font-size: max(calc(20 * var(--u)), 16px); letter-spacing: .12em; padding-left: calc(var(--k-plaque-h) * .6); padding-right: calc(var(--k-plaque-h) * .6); white-space: normal; text-align: center; justify-self: start; max-width: 100%; }
html.land #scr-settle .settle-bar.k-xp { --k-xp-slot-h: calc(14 * var(--u)); margin-top: calc(5 * var(--u)); width: 100%; height: var(--k-xp-slot-h); }

html.land #scr-settle .settle-side > .btn-main, html.land #scr-settle .settle-side > .btn-sub, html.land #scr-settle .settle-btn-row > .btn-sub { width: 100%; }
html.land #scr-settle .settle-realm { background: rgba(var(--k-ink-rgb), .06); border-radius: 0; box-shadow: inset 0 0 0 1px rgba(var(--k-gold-rgb), .55); }

html.land.compact #scr-hero::before { background: var(--c-scrim); }
html.land #scr-hero.k-paper { --k-paper-h: calc(128 * var(--u)); box-sizing: border-box; color: var(--k-ink); }
html.land #scr-hero #hero-title.k-plaque { --k-plaque-h: calc(32 * var(--u)); flex: none; margin: 0; max-width: calc(100% - 100 * var(--u)); font-size: max(calc(15 * var(--u)), 14px); letter-spacing: .06em; white-space: normal; text-align: center; line-height: 1.2; }
html.land #scr-hero .hero-intro { color: var(--k-ink-2); text-shadow: none; margin: calc(4 * var(--u)) 0 calc(4 * var(--u)); font-size: max(calc(11.5 * var(--u)), 12px); }
html.land #scr-hero .hero-offers { flex: 0 0 auto; margin-top: 0; align-items: start; justify-content: center; }
html.land #scr-hero .hero-offers[data-n="3"], html.land #scr-hero .hero-offers[data-n="4"] { margin-top: 0; }
html.land #scr-hero .hero-offers[data-n="2"] { grid-template-columns: repeat(2, calc(176 * var(--u))); gap: calc(24 * var(--u)); }
html.land #scr-hero .hero-offers[data-n="3"] { grid-template-columns: repeat(3, calc(150 * var(--u))); gap: calc(14 * var(--u)); }
html.land #scr-hero .hero-offers[data-n="4"] { grid-template-columns: repeat(4, calc(124 * var(--u))); gap: calc(8 * var(--u)); }
html.land #scr-hero .hero-choice { -webkit-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; cursor: pointer; font-family: inherit; color: var(--k-ink); -webkit-tap-highlight-color: transparent; }
html.land #scr-hero .hero-choice[hidden] { display: none; }
html.land #scr-hero .hero-choice:focus-visible { outline: 2px solid var(--k-cin); outline-offset: 2px; }
html.land #scr-hero .hero-kframe { --k-card-w: calc(104 * var(--u)); flex: none; }
html.land #scr-hero .hero-offers[data-n="4"] .hero-kframe { --k-card-w: calc(96 * var(--u)); }
html.land .k-frame-hero > .k-frame-art > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
html.land .k-frame-hero > .hero-choice-name { left: 7%; right: 7%; top: 77.5%; height: 15%; display: flex; align-items: center; justify-content: center; gap: calc(3 * var(--u)); font-size: max(calc(13 * var(--u)), 12px); font-weight: 800; line-height: 1; color: var(--k-ink); white-space: nowrap; margin: 0; }
html.land .k-frame-hero > .hero-choice-name .el-badge-img { width: calc(13 * var(--u)) !important; height: calc(13 * var(--u)) !important; }
html.land #scr-hero .hero-choice-one { flex: none; width: 100%; margin: calc(4 * var(--u)) 0 0; min-height: 0; font-size: max(calc(11.5 * var(--u)), 12px); line-height: 1.3; color: var(--k-ink); text-align: center; letter-spacing: 0; }
html.land .k-frame-hero.is-selected::after, html.land .k-frame-relic.is-selected::after { filter: drop-shadow(0 0 calc(2 * var(--u)) rgba(255, 214, 120, .95)) drop-shadow(0 0 calc(5 * var(--u)) rgba(240, 180, 60, .55)); }
html.land #scr-hero #btn-hero-confirm.btn-main { flex: none; margin: calc(6 * var(--u)) auto 0; width: calc(200 * var(--u)); }

html.land .k-round .home-icon { width: calc(14 * var(--u)); height: calc(13 * var(--u)); }
html.land .k-round .home-icon::before { border-left-width: calc(7 * var(--u)); border-right-width: calc(7 * var(--u)); border-bottom-width: calc(6 * var(--u)); border-bottom-color: var(--k-on-dark); }
html.land .k-round .home-icon::after { left: calc(2 * var(--u)); right: calc(2 * var(--u)); top: calc(6 * var(--u)); bottom: calc(1 * var(--u)); border-width: calc(1.5 * var(--u)); border-top-width: 0; border-color: var(--k-on-dark); }
html.land #scr-hero #btn-hero-home, html.land .relic-pick .relic-home { --k-round: calc(32 * var(--u)); position: absolute; z-index: 3; right: calc(8 * var(--u)); top: calc(6 * var(--u)); margin: 0; }
html.land.compact #scr-hero #btn-hero-home { top: max(calc(6 * var(--u)), calc(46px - 50 * var(--vh) + 168 * var(--u))); }

html.land .confirm.relic-pick .relic-panel.k-paper {
--k-paper-h: calc(128 * var(--u)); position: relative; box-sizing: border-box; width: min(calc(452 * var(--u)), calc(100 * var(--vw) - 16px)); max-width: none; height: auto; max-height: calc(100 * var(--vh) - 8px);
display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: flex-start; column-gap: calc(10 * var(--u)); row-gap: calc(4 * var(--u)); margin: 0; color: var(--k-ink);
}
html.land .relic-pick .relic-head { flex: 0 0 100%; display: flex; flex-direction: column; align-items: center; margin: 0; }
html.land .relic-pick .relic-title.k-plaque { --k-plaque-h: calc(32 * var(--u)); max-width: calc(100% - 96 * var(--u)); font-size: max(calc(16 * var(--u)), 14px); letter-spacing: .08em; text-indent: 0; white-space: normal; text-align: center; line-height: 1.2; }
html.land .relic-pick .relic-sub { max-width: calc(100% - 96 * var(--u)); margin: calc(3 * var(--u)) auto calc(6 * var(--u)); color: var(--k-ink-2); text-shadow: none; text-align: center; font-size: max(calc(11.5 * var(--u)), 12px); line-height: 1.3; }
html.land .relic-pick .relic-offers { flex: 0 0 100%; display: flex; justify-content: center; gap: calc(10 * var(--u)); margin: calc(6 * var(--u)) 0 0; padding: 0; background: none; }
html.land .relic-pick .relic-choice { --k-card-w: calc(112 * var(--u)); flex: none; -webkit-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; cursor: pointer; font-family: inherit; color: var(--k-ink); text-align: center; -webkit-tap-highlight-color: transparent; }
html.land .relic-pick .relic-choice:focus-visible { outline: 2px solid var(--k-cin); outline-offset: 2px; }
html.land .relic-pick .relic-face { z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: calc(2 * var(--u)); box-sizing: border-box; padding: calc(4 * var(--u)) calc(3 * var(--u)); }
html.land .relic-pick .relic-face .relic-icon { flex: none; width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
html.land .relic-pick .relic-name { flex: none; max-width: 100%; font-size: max(calc(13 * var(--u)), 12px); font-weight: 800; line-height: 1.2; color: var(--k-ink); overflow-wrap: break-word; }
html.land .relic-pick .relic-desc { flex: 1 1 auto; min-height: 0; max-width: 100%; font-size: max(calc(11.5 * var(--u)), 12px); line-height: 1.25; color: var(--k-ink); display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }
html.land .relic-pick .relic-kind.k-tag { position: absolute; left: 50%; top: calc(-9 * var(--u)); transform: translateX(-50%); max-width: calc(100% + 8 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.land .relic-pick .relic-choice.is-match .relic-kind { color: var(--k-cin); }
html.land .relic-pick #btn-relic-confirm.btn-main { flex: none; margin: calc(6 * var(--u)) 0 0; width: auto; min-width: calc(120 * var(--u)); }
html.land .relic-pick .relic-reroll.btn-sub { flex: none; margin: calc(6 * var(--u)) 0 0; --k-btn-sub-h: calc(34 * var(--u)); }

html.land .pp-wrap { gap: calc(8 * var(--u)); }
html.land .pp-title.k-plaque { --k-plaque-h: calc(38 * var(--u)); font-size: max(calc(19 * var(--u)), 16px); letter-spacing: .1em; text-indent: 0; max-width: calc(100vw - 16px); white-space: normal; text-align: center; }
html.land .pp-row { display: flex; align-items: flex-start; justify-content: center; gap: calc(16 * var(--u)); padding-top: calc(10 * var(--u)); }
html.land .pp-card.k-frame-beast { --k-card-w: calc(112 * var(--u)); --pp-s: 1.5; --k-card-fs: max(calc(15 * var(--u)), 18px); flex: none; -webkit-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; cursor: pointer; font-family: inherit; color: var(--k-on-dark); text-align: left; -webkit-tap-highlight-color: transparent; transition: transform .12s ease-out; }
html.land .pp-card.k-frame-beast:hover, html.land .pp-card.k-frame-beast:focus-visible { transform: translateY(calc(-3 * var(--u))); outline: none; }
html.land .pp-card.k-frame-beast:active { transform: scale(.97); }
html.land .pp-card.pp-counter { filter: drop-shadow(0 0 calc(3 * var(--u)) rgba(255, 214, 120, .9)); }
html.land .pp-card .pp-art { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; pointer-events: none; }
html.land .pp-card > .k-pos-name { font-weight: 800; }

html.land .pp-card > .pp-x.k-tag { --k-tag-h: calc(18 * var(--u) * var(--pp-s)); position: absolute; left: 5%; top: 10%; z-index: 3; font-style: normal; letter-spacing: 0; font-size: max(calc(16.5 * var(--u)), 18px); color: var(--k-cin); }
html.land .pp-card.k-frame-beast .k-seal { --k-seal: calc(18 * var(--u) * var(--pp-s)); font-size: max(calc(16.5 * var(--u)), 18px); }
html.land .pp-card.k-frame-beast .k-name { font-size: max(calc(13 * var(--u)), 14px); }
html.land .pp-skip.btn-text { margin-top: calc(2 * var(--u)); }

html.land .toast.k-tip { --k-tip-h: calc(30 * var(--u)); width: max-content; white-space: nowrap; font-size: max(calc(11.5 * var(--u)), 12px); color: var(--k-ink); }
html.land .swap-ask.k-paper { --k-paper-h: calc(72 * var(--u)); box-sizing: border-box; color: var(--k-ink); text-shadow: none; }
html.land .swap-ask .swap-ask-text { color: var(--k-ink); }
html.land .swap-ask .swap-btn.btn-main { --k-btn-main-h: calc(30 * var(--u)); font-size: max(calc(12 * var(--u)), 12px); }
html.land .swap-ask .swap-x.k-round { --k-round: calc(22 * var(--u)); position: absolute; right: calc(2 * var(--u) - 22px); top: calc(2 * var(--u) - 22px); margin: 0; font-size: max(calc(12 * var(--u)), 12px); }
html.land .hero-pop.k-paper { --k-paper-h: calc(84 * var(--u)); box-sizing: border-box; color: var(--k-ink); }
html.land .hero-pop-head { color: var(--k-cin); }
html.land .hero-pop-sub { color: var(--k-gold-d); }
html.land .hero-pop-foot { color: var(--k-ink-2); }

html.land .tutorial-panel.k-paper { --k-paper-h: calc(128 * var(--u)); color: var(--k-ink); text-align: center; }
html.land .tutorial-end-heading h2.k-plaque { --k-plaque-h: calc(34 * var(--u)); font-size: max(calc(16 * var(--u)), 14px); letter-spacing: .1em; text-indent: 0; white-space: normal; line-height: 1.2; text-align: center; margin: 0; flex: 1 1 0; }
html.land .tutorial-panel > .btn-main, html.land .tutorial-panel > .btn-sub { display: flex; width: 100%; margin-top: calc(8 * var(--u)); }

html.land .sheet-panel.k-paper { --k-paper-h: calc(140 * var(--u)); color: var(--k-ink); animation: none; }
html.land .sheet-panel .sheet-title, html.land .sheet-panel .sheet-name { color: var(--k-ink); }
html.land .sheet-panel .sheet-sub, html.land .sheet-panel .sheet-tip { color: var(--k-ink-2); }
html.land .sheet-panel .sheet-block-title { color: var(--k-gold-d); }
html.land .sheet-panel .grow-txt, html.land .sheet-panel .bond-row .bc1, html.land .sheet-panel .bond-row .bc2 { color: var(--k-ink); }
html.land .sheet-panel .sheet-rule, html.land .sheet-panel .bond-row.head { color: var(--k-ink-2); }
html.land .sheet-panel .bond-row .bc3 { color: var(--k-cin); }
html.land .sheet-panel .bond-row.head .bc3 { color: var(--k-gold-d); }
html.land .sheet-panel .bond-table { background: rgba(var(--k-ink-rgb), .06); border-color: rgba(var(--k-gold-rgb), .55); border-radius: 0; }
html.land .sheet-panel .bond-row { border-top-color: rgba(var(--k-gold-rgb), .35); }

html.land .toast.k-tip, html.land .swap-ask.k-paper, html.land .hero-pop.k-paper { position: fixed; }

html.land #scr-battle #bt-overlay .result-inner.k-settle { padding-left: calc(var(--k-settle-h) * .152); padding-right: calc(var(--k-settle-h) * .152); padding-top: calc(var(--k-settle-h) * .1105); padding-bottom: calc(var(--k-settle-h) * .1105); }
html.land .relic-pick .relic-choice { --k-card-w: calc(122 * var(--u)); }
html.land .swap-ask.k-paper { --k-paper-h: calc(92 * var(--u)); }
html.land .sheet-panel .ring-node-cn { font-size: max(calc(12 * var(--u)), 12px); color: var(--k-ink); text-shadow: none; }

html.land #scr-dex:not([hidden]) {
position: absolute; left: calc(50% - calc(320 * var(--u))); top: calc(50% - calc(180 * var(--u)));
width: calc(640 * var(--u)); height: calc(360 * var(--u)); min-height: 0; max-width: none; margin: 0; padding: 0;
display: block; background: none; transform: none; box-shadow: none; overflow: hidden;
}
html.land #scr-dex .dex-sheet { position: absolute; left: 0; top: 0; width: 100%; height: 100%; --k-paper-h: calc(58 * var(--u)); pointer-events: none; }
html.land #scr-dex .topbar { position: absolute; left: 0; top: 0; width: 100%; height: 0; padding: 0; margin: 0; background: none; border: 0; min-height: 0; display: block; }
html.land #scr-dex .topbar .tb-left, html.land #scr-dex .topbar .tb-right { display: contents; }
html.land #scr-dex .topbar .stage-no {
position: absolute; left: calc(50% - calc(95 * var(--u))); top: calc(7 * var(--u)); width: calc(190 * var(--u)); box-sizing: border-box;
--k-plaque-h: calc(28 * var(--u)); font-size: max(calc(14 * var(--u)), 14px); letter-spacing: .16em;
}
html.land #scr-dex .dex-count {
position: absolute; left: calc(20 * var(--u)); top: calc(9 * var(--u)); width: calc(200 * var(--u)); margin: 0;
display: flex; flex-wrap: wrap; align-content: flex-start; column-gap: .8em;
font-size: max(calc(10 * var(--u)), 12px); line-height: 1.2; letter-spacing: 0; color: var(--k-ink-2);
}
html.land #scr-dex .dex-count[hidden] { display: none; }
html.land #scr-dex .dex-count .dex-seg { white-space: nowrap; }
html.land #scr-dex .dex-back { --k-round: calc(28 * var(--u)); position: absolute; right: calc(12 * var(--u)); top: calc(5 * var(--u)); }
html.land #scr-dex .dex-back .home-icon { width: calc(13 * var(--u)); height: calc(12 * var(--u)); }
html.land #scr-dex .dex-back .home-icon::before { border-left-width: calc(6.5 * var(--u)); border-right-width: calc(6.5 * var(--u)); border-bottom-width: calc(5.5 * var(--u)); }
html.land #scr-dex .dex-back .home-icon::after { left: calc(2 * var(--u)); right: calc(2 * var(--u)); top: calc(5.5 * var(--u)); bottom: calc(1 * var(--u)); border-width: calc(1.5 * var(--u)); border-top-width: 0; }
html.land #scr-dex .dex-tabs, html.land #scr-dex .crest, html.land #scr-dex .dex-row-head, html.land #scr-dex .dex-people-heading { display: none; }
html.land #scr-dex .dex-panel[hidden], html.land #scr-dex .dex-legend[hidden] { display: none; }
html.land:not(.in-tut) #scr-dex .land-dex-tabs { position: absolute; left: calc(22 * var(--u)); top: calc(42 * var(--u)); display: flex; gap: calc(4 * var(--u)); justify-content: flex-start; }
html.land #scr-dex .land-dex-tab { --k-tab-h: calc(24 * var(--u)); flex: 0 0 auto; font-size: max(calc(10 * var(--u)), 12px); }

html.land #scr-dex .dex-body {
position: absolute; left: calc(22 * var(--u)); top: calc(74 * var(--u)); width: calc(436 * var(--u)); height: calc(258 * var(--u)); box-sizing: border-box;
padding: calc(3 * var(--u)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(var(--k-ink-rgb), .35) transparent;
}
html.land #scr-dex #dex-beasts:not([hidden]) {
--dex-cw: calc((calc(412 * var(--u)) - (var(--dex-cols, 9) - 1) * calc(4 * var(--u))) / var(--dex-cols, 9));
display: flex; flex-direction: column; gap: calc(5 * var(--u));
}
html.land #scr-dex .dex-row { display: block; margin: 0; }
html.land #scr-dex .dex-grid { display: grid; grid-template-columns: repeat(var(--dex-cols, 9), var(--dex-cw)); gap: calc(4 * var(--u)); }
html.land #scr-dex .dex-cell {
--k-card-w: var(--dex-cw); --k-card-fs: max(calc(6.4 * var(--u)), 12px);
-webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; background-color: transparent; font-family: inherit; color: var(--k-on-dark); cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
html.land #scr-dex .dex-cell:hover .k-frame-art { filter: brightness(1.12); }
html.land #scr-dex .dex-cell.dex-topcost { filter: drop-shadow(0 0 calc(2 * var(--u)) rgba(var(--k-gold-rgb), .9)); }
html.land #scr-dex .k-frame-art { background-color: var(--k-stone-d); }
html.land #scr-dex .dex-art, html.land #scr-dex .dex-hero-art, html.land #scr-dex .dex-lord-art, html.land #scr-dex .ld-art-img {
position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block;
}
html.land #scr-dex .dex-lord-art, html.land #scr-dex .ld-art-lord .ld-art-img { object-fit: contain; object-position: 50% 50%; }
html.land #scr-dex .dex-hero-art { object-position: 50% 10%; }
html.land #scr-dex .dex-s1 .dex-art { filter: saturate(0) brightness(.35); }
html.land #scr-dex .dex-q { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: max(calc(14 * var(--u)), 12px); font-weight: 700; color: rgba(var(--k-ink-rgb), .4); }

html.land #scr-dex .dex-cell > .dex-name, html.land #scr-dex .dex-cell > .dex-mk { display: none; }
html.land.hd[lang^="zh"] #scr-dex .dex-cell > .dex-name { display: flex; margin: 0; text-align: center; letter-spacing: 0; line-height: 1; white-space: normal; overflow-wrap: break-word; }
html.land.hd #scr-dex .dex-cell > .dex-mk { display: block; left: 5%; width: 90%; top: 6.5%; height: auto; text-align: center; white-space: nowrap; line-height: 1; color: #f4d88a; text-shadow: 0 1px 1px rgba(0, 0, 0, .8); font-style: normal; font-size: max(calc(10 * var(--u)) * .54, 12px); font-weight: 800; letter-spacing: -.05em; }
html.land #scr-dex .dex-cell > .dex-fav-mk {
position: absolute; left: 8%; top: 8%; z-index: 3; padding: 0 calc(2 * var(--u)); border-radius: 2px; background: var(--k-cin); color: var(--k-on-dark);
font-style: normal; font-size: max(calc(10 * var(--u)) * .6, 12px); line-height: 1.25; font-weight: 800; white-space: nowrap;
}

html.land #scr-dex #dex-people:not([hidden]) { display: block; --dex-pw: calc((calc(412 * var(--u)) - 4 * calc(6 * var(--u))) / 5); }
html.land #scr-dex.ldt-heroes #dex-people > :nth-child(n+3), html.land #scr-dex.ldt-lords #dex-people > :nth-child(-n+2) { display: none; }
html.land #scr-dex .dex-people-list { display: grid; grid-template-columns: repeat(5, var(--dex-pw)); gap: calc(6 * var(--u)); }
html.land #scr-dex .dex-person {
--k-card-w: var(--dex-pw); -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; background-color: transparent; font-family: inherit; cursor: pointer;
text-align: center; color: var(--k-ink); -webkit-tap-highlight-color: transparent;
}
html.land #scr-dex .dex-person:hover .k-frame-art { filter: brightness(1.1); }
html.land #scr-dex .dex-person.unseen img { filter: saturate(0) brightness(.3); }
html.land #scr-dex .dex-person-copy { position: absolute; z-index: 2; left: 9%; top: 79%; width: 82%; height: 15%; display: flex; align-items: center; justify-content: center; margin: 0; }
html.land #scr-dex .dex-person-name { max-width: 100%; font-size: max(calc(10.5 * var(--u)), 12px); line-height: 1.3; font-weight: 700; color: var(--k-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
html.land #scr-dex .dex-person.unseen .dex-person-name { color: var(--k-ink-2); }
html.land #scr-dex .dex-person-element, html.land #scr-dex .dex-person-skill, html.land #scr-dex .dex-person-lore, html.land #scr-dex .dex-person-state { display: none; }

html.land #scr-dex .dex-legend {
position: absolute; left: calc(24 * var(--u)); top: calc(334 * var(--u)); width: calc(430 * var(--u)); height: calc(12 * var(--u)); padding: 0; margin: 0;
display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 0 calc(10 * var(--u)); font-size: max(calc(10 * var(--u)) * .8, 12px); line-height: 1; color: var(--k-ink-2); white-space: nowrap;
}
html.land #scr-dex:not(.ldt-beasts) .dex-legend, html.land.compact #scr-dex .dex-legend { display: none; }
html.land #scr-dex .dex-legend span { display: inline-flex; align-items: center; gap: calc(3 * var(--u)); }
html.land #scr-dex .dex-lg { display: inline-block; width: calc(8 * var(--u)); height: calc(8 * var(--u)); box-sizing: border-box; border: 1px solid var(--k-ink-2); background: var(--k-paper-d); }
html.land #scr-dex .dex-lg.lg1 { background: var(--k-ink-2); }
html.land #scr-dex .dex-lg.lg2 { background: var(--k-stone); border-color: var(--k-stone-d); }
html.land #scr-dex .dex-lg.lg3 { background: var(--k-stone); border: calc(1.5 * var(--u)) solid var(--k-ink-2); }
html.land #scr-dex .dex-lg.lg4 { background: var(--k-stone); border: calc(1.5 * var(--u)) solid var(--k-gold); }

html.land #scr-dex .dex-credits { display: none; }
html.land #scr-dex.ldt-credits .dex-credits {
display: block; position: absolute; left: calc(24 * var(--u)); top: calc(74 * var(--u)); width: calc(592 * var(--u)); height: calc(262 * var(--u)); margin: 0; overflow-x: hidden; overflow-y: auto;
scrollbar-width: thin; scrollbar-color: rgba(var(--k-ink-rgb), .35) transparent;
}
html.land #scr-dex.ldt-credits .dex-body, html.land #scr-dex.ldt-credits .dex-credits-btn { display: none; }
html.land #scr-dex .dex-credits-body { margin: 0; column-count: 2; column-gap: calc(14 * var(--u)); }
html.land #scr-dex .credit-row { font-size: max(calc(10 * var(--u)), 12px); line-height: 1.4; margin-bottom: calc(4 * var(--u)); break-inside: avoid; color: var(--k-ink); }
html.land #scr-dex.ldt-credits .land-dex-right { display: none; }

html.land:not(.in-tut) #scr-dex .land-dex-right { position: absolute; left: calc(466 * var(--u)); top: calc(46 * var(--u)); width: calc(158 * var(--u)); height: calc(294 * var(--u)); }
html.land:not(.in-tut) #land-dex-detail.k-paper {
--k-paper-h: calc(38 * var(--u)); height: 100%; display: block; color: var(--k-ink);
padding-left: calc(var(--k-paper-h) * 0.108 + 2 * var(--u)); padding-right: calc(var(--k-paper-h) * 0.108 + 2 * var(--u));
padding-top: calc(var(--k-paper-h) * 0.09 + 2 * var(--u)); padding-bottom: calc(var(--k-paper-h) * 0.09 + 2 * var(--u));
scrollbar-width: thin; scrollbar-color: rgba(var(--k-ink-rgb), .35) transparent;
}
html.land #land-dex-detail .ld-art-kit { display: flex; justify-content: center; height: auto; margin: 0 0 calc(4 * var(--u)); border-radius: 0; background: none; box-shadow: none; overflow: visible; }
html.land #land-dex-detail .k-frame-beast, html.land #land-dex-detail .k-frame-hero { --k-card-w: calc(76 * var(--u)); --k-card-fs: max(calc(7 * var(--u)), 12px); }
html.land #land-dex-detail .k-frame-beast > .k-pos-name { text-align: center; letter-spacing: 0; line-height: 1; white-space: normal; overflow-wrap: break-word; }
html.land #land-dex-detail .ld-name { color: var(--k-ink); }
html.land #land-dex-detail .ld-py, html.land #land-dex-detail .ld-note, html.land #land-dex-detail .ld-foot, html.land #land-dex-detail .ld-hint { color: var(--k-ink-2); }
html.land #land-dex-detail .ld-meta { color: var(--k-ink); align-items: center; gap: calc(4 * var(--u)); }
html.land #land-dex-detail .ld-meta > span.ld-cost { font-weight: 700; }
html.land #land-dex-detail .k-seal { --k-seal: calc(18 * var(--u)); flex: none; font-style: normal; }
html.land #land-dex-detail .ld-stats { gap: calc(8 * var(--u)); align-items: center; margin-top: calc(4 * var(--u)); }
html.land #land-dex-detail .ld-stats .k-seal { --k-seal: calc(26 * var(--u)); }
html.land #land-dex-detail .ld-rel { border-top-color: rgba(var(--k-ink-rgb), .2); border-bottom-color: rgba(var(--k-ink-rgb), .2); }
html.land #land-dex-detail .ld-rel-line .k-seal { --k-seal: calc(15 * var(--u)); }
html.land #land-dex-detail .ld-rel-tag { color: var(--k-ink-2); }
html.land #land-dex-detail .ld-rel-el { color: var(--k-ink); }
html.land #land-dex-detail .ld-rel-mult { color: var(--k-cin-d); font-weight: 700; }
html.land #land-dex-detail .ld-skill { color: var(--k-cin); }
html.land #land-dex-detail .ld-text, html.land #land-dex-detail .ld-summon-name { color: var(--k-ink); }
html.land #land-dex-detail .ld-lore { color: var(--k-ink-2); }
html.land #land-dex-detail .ld-lore-tag, html.land #land-dex-detail .ld-src-where, html.land #land-dex-detail .ld-kw-name { color: var(--k-cin-d); }
html.land #land-dex-detail .ld-kws, html.land #land-dex-detail .ld-src { border-top-color: rgba(var(--k-ink-rgb), .2); }
html.land #land-dex-detail .ld-kws-title, html.land #land-dex-detail .ld-src-title, html.land #land-dex-detail .ld-src-note { color: var(--k-ink-2); }
html.land #land-dex-detail .ld-kw-desc, html.land #land-dex-detail .ld-src-text { color: var(--k-ink); }
html.land #land-dex-detail .ld-kw .k-seal { grid-row: span 2; --k-seal: calc(20 * var(--u)); }
html.land #land-dex-detail .ld-kw .k-seal > .kw-badge { width: 72%; height: 72%; margin: 0; filter: none; }
html.land #land-dex-detail .ld-tiers .skill-tier { background: rgba(var(--k-ink-rgb), .06); border: 1px solid transparent; border-radius: 0; color: var(--k-ink-2); }
html.land #land-dex-detail .ld-tiers .skill-tier.on { background: rgba(174, 67, 53, .1); border-color: var(--k-cin); color: var(--k-ink); }
html.land #land-dex-detail .ld-tiers .tier-star { color: var(--k-gold-d); }
html.land #land-dex-detail .ld-tiers .skill-tier.on .tier-star { color: var(--k-cin); }
html.land #land-dex-detail .ld-tiers .tier-reach.k-tag { position: static; align-self: center; margin: 0 0 0 auto; flex: none; --k-tag-h: calc(16 * var(--u)); font-size: max(calc(10 * var(--u)) * .9, 12px); }
html.land #land-dex-detail .ld-tiers .skill-tier:has(.tier-reach) { margin-top: 0; }
html.land #land-dex-detail .fav-row .fav-note { color: var(--k-ink-2); }
html.land #land-dex-detail .fav-row .fav-btn { --k-btn-sub-h: calc(30 * var(--u)); min-height: 44px; }
html.land #land-dex-detail .ld-stat { display: inline-flex; align-items: center; gap: calc(3 * var(--u)); }
html.land #land-dex-detail .ld-stat-word { font-size: max(calc(10 * var(--u)), 12px); font-weight: 700; color: var(--k-ink-2); }
html.land #land-dex-detail .k-frame-hero > .k-pos-plate {
position: absolute; z-index: 2; left: 9%; top: 79%; width: 82%; height: 15%; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
line-height: calc(var(--k-card-w) * 1.4545 * 0.15); font-size: var(--k-card-fs, max(calc(10 * var(--u)), 12px)); font-weight: 700; color: var(--k-ink); letter-spacing: 0;
}
html.land #land-dex-detail .k-seal > .el-badge-img { width: 78% !important; height: 78% !important; }
html.land #land-dex-detail .ld-tiers .tier-star { width: auto; min-width: calc(27 * var(--u)); }

html.land #scr-start.gate .btn-main::after, html.land #scr-start.gate .btn-sub::after,
html.land .gate-sheet .btn-sub::after { left: 0; right: 0; }

html.land #scr-start.gate .fc-line { padding-top: .5em; padding-bottom: .5em; }

html.land .gate-sheet [hidden], html.land #scr-start.gate [hidden] { display: none !important; }
html.land #scr-hero.k-paper { --k-paper-h: calc(112 * var(--u)); }
html.land #scr-hero .hero-kframe { --k-card-w: calc(92 * var(--u)); }
html.land #scr-hero .hero-offers[data-n="4"] .hero-kframe { --k-card-w: calc(84 * var(--u)); }
html.land #scr-hero .hero-intro { margin: calc(2 * var(--u)) 0 calc(3 * var(--u)); }
html.land #scr-hero #btn-hero-confirm.btn-main { margin-top: calc(4 * var(--u)); }

html.land #bt-overlay.has-reasons .result-inner.k-settle { --k-settle-h: calc(100 * var(--u)); }
html.land #bt-overlay.has-reasons #ov-title.k-plaque { --k-plaque-h: calc(30 * var(--u)); font-size: max(calc(18 * var(--u)), 16px); min-width: calc(88 * var(--u)); }

html.land .card.k-frame-beast {
width: auto; height: 100%; min-height: 0; aspect-ratio: 2 / 3; margin: 0 auto; flex: none; overflow: visible;
border: 0; border-radius: 0; background: none; box-shadow: none; --k-seal: calc(19 * var(--u)); --k-tag-h: calc(18 * var(--u));
}
html.land .k-frame-beast::after { border-radius: 0; }
html.land .k-frame-beast > .k-frame-art { right: auto; bottom: auto; object-fit: cover; object-position: 50% 15%; border-radius: 0; }
html.land .k-frame-beast.is-unbuyable > .k-frame-art { filter: grayscale(.7) brightness(.7); }
html.land .k-frame-beast > .k-pos-star { left: 7.8%; width: auto; justify-content: flex-start; gap: 2px; }
html.land .k-frame-beast > .k-pos-counter { flex-direction: column; align-items: flex-end; gap: 2px; left: auto; right: 7.8%; width: auto; justify-content: flex-start; }
html.land .k-frame-beast > .card-kw { position: absolute; z-index: 2; right: calc(18.125% + var(--k-seal) / 2 + 2px); top: 10.5%; display: flex; flex-direction: row; gap: 2px; }
html.land .k-frame-beast:has(> .k-pos-star) > .card-kw { right: 7.8%; top: 26%; }
html.land .k-frame-beast:has(> .k-pos-star):has(> .k-pos-counter) > .card-kw { top: 36%; }
html.land .k-frame-beast .k-tag { --k-tag-h: calc(18 * var(--u)); font-style: normal; letter-spacing: 0; }
html.land .k-frame-beast .mk-star { color: var(--k-cin); text-shadow: none; letter-spacing: -.12em; }
html.land .k-frame-beast .mk-counter, html.land .k-frame-beast .mk-king { color: var(--k-cin); }
html.land .k-frame-beast .k-name { font-size: max(calc(9 * var(--u)), 12px); color: var(--k-ink); text-align: center; white-space: normal; line-height: .96; text-shadow: none; overflow-wrap: break-word; min-width: 0; max-width: 100%; }
html.land .k-frame-beast .k-seal { flex: none; font-size: max(calc(11 * var(--u)), 12px); letter-spacing: -.04em; }
html.land .k-frame-beast .k-seal .el-badge-img { width: 70% !important; height: 70% !important; }
html.land .k-frame-beast .kw-seal { position: static; margin: 0; width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
html.land .k-frame-beast .card-shield { position: absolute; left: 50%; bottom: 100%; right: auto; top: auto; transform: translateX(-50%); }

html.land .row-bench .k-frame-beast > .card-kw { display: none; }
html.land .row-bench .k-frame-beast { --k-seal: calc(13 * var(--u)); }
html.land .row-bench .k-frame-beast .k-tag { --k-tag-h: calc(12 * var(--u)); }

html.land #scr-prep .slot, html.land #scr-battle .slot, html.land #scr-final .slot { border: 0; background: none; box-shadow: none; }
html.land .slot > .k-slot { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); height: auto; width: auto; aspect-ratio: 2 / 3; display: flex; align-items: center; justify-content: center; color: rgba(var(--k-ink-rgb), .45); }
html.land .slot.drop-hot > .k-slot, html.land .slot.slot-beckon > .k-slot { filter: drop-shadow(0 0 calc(4 * var(--u)) rgba(var(--k-gold-rgb), .95)); }
html.land .k-mark .omen-icon { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
html.land .slot.slot-beckon { animation: none; }
html.land .k-frame-beast .card-shield.ui2-sh {
z-index: 3; margin: 0 0 calc(1 * var(--u)); min-width: calc(17 * var(--u)); height: calc(19 * var(--u)); padding: 0 calc(2 * var(--u)) calc(2.5 * var(--u));
display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 0; box-shadow: none;
background: linear-gradient(180deg, #e2f1ff 0%, #9cc3e6 52%, #5d8dbf 100%); clip-path: polygon(50% 0, 100% 15%, 100% 55%, 50% 100%, 0 55%, 0 15%);
color: var(--k-ink); font-size: max(calc(10.5 * var(--u)), 12px); font-weight: 800; line-height: 1; text-shadow: none;
}

html.land #scr-prep #btn-fight { --k-btn-main-h: calc(34 * var(--u)); padding-left: calc(4 * var(--u)); padding-right: calc(4 * var(--u)); }
html.land #scr-prep .btn-sub, html.land #scr-battle .btn-sub { --k-btn-sub-h: calc(30 * var(--u)); padding-left: calc(5 * var(--u)); padding-right: calc(5 * var(--u)); white-space: normal; }
html.land .pause-btn .pause-icon { border-color: var(--k-ink); border-top-color: transparent; border-bottom-color: transparent; }
html.land .pause-btn:not(.on) .pause-icon { border-top: 0; border-bottom: 0; }
html.land #btn-home, html.land #btn-mute-prep, html.land #btn-mute-bt, html.land #cpt-wx { --k-round: calc(40 * var(--u)); }
html.land #btn-home .home-icon { filter: brightness(1.6); }
html.land #btn-mute-prep::after, html.land #btn-mute-bt::after {
content: ""; position: absolute; left: 50%; top: 50%; width: calc(28 * var(--u)); height: calc(28 * var(--u)); transform: translate(-50%, -50%);
border-radius: 50%; background: var(--snd-on) center / 118% 118% no-repeat; pointer-events: none;
}
html.land #btn-mute-prep.is-muted::after, html.land #btn-mute-bt.is-muted::after { background-image: var(--snd-off); }

html.land .hero-face.k-round::before, html.land .cpt-lord.k-round::before, html.land .relic-slot.k-round::before, html.land .hero-skill.k-round::before { width: 100%; height: 100%; }
html.land .hero-face.k-round > .hero-frame::after { display: none; }
html.land .cpt-lord.k-round > .cpt-lord-img { width: 80%; height: 80%; margin: 10%; border-radius: 50%; }
html.land .relic-slot.k-round > .relic-icon { width: 66%; height: 66%; margin: auto; }
html.land .hero-skill.k-round > .hero-skill-icon { width: 70%; height: 70%; }
html.land .hero-skill.k-round.is-disabled > .hero-skill-icon { filter: grayscale(1) brightness(.8); }
html.land .hero-face.k-round > .hero-frame { position: absolute; }

html.land #scr-prep .k-sign, html.land #scr-battle .k-sign { --k-sign-h: calc(30 * var(--u)); }
html.land #scr-battle #bt-banner { --k-tag-h: calc(20 * var(--u)); white-space: nowrap; }
html.land #scr-battle #bt-banner:empty { display: none; }
html.land #scr-prep #cpt-cap, html.land #scr-battle #cpt-bt-cap { min-height: var(--k-sign-h); height: auto; line-height: 1.2; }
html.land #scr-prep #cpt-bonds, html.land #scr-battle .cpt-bt-pdots { color: var(--k-ink); }
html.land #scr-battle #bt-banner.result-lose { color: var(--k-cin); }
html.land #scr-prep #cpt-cap, html.land #scr-battle #cpt-bt-cap { display: flex; align-items: center; padding-left: calc(10 * var(--u)); padding-right: calc(10 * var(--u)); }
html.land #scr-prep #cpt-bonds, html.land #scr-battle .cpt-bt-pdots { --k-sign-h: calc(22 * var(--u)); height: auto; min-height: 44px; padding-top: calc(var(--k-sign-h) * .3); padding-bottom: calc(var(--k-sign-h) * .3); }

html.land .lamp.k-lamp { --k-lamp-w: .86em; }
html.land .lamp.k-lamp.lamp-off { filter: none; }
html.land .lamp.k-lamp > .lamp-flame { display: none; }

html.land .tips .bub.k-tip, html.land #guide:not(.tutorial-guide) .bub.k-tip {
padding-top: calc(3 * var(--u)); padding-bottom: calc(3 * var(--u)); text-shadow: none; letter-spacing: .02em; color: var(--k-ink);
}
html.land .bub.k-tip::after { background: var(--k-paper); border-color: var(--k-gold-d); z-index: -1; }
html.land .lamp.k-lamp.is-on::after { display: block; }

html.land #tutorial-skip.btn-text, html.land #guide-skip.btn-text { min-height: 44px; height: auto; font-size: max(calc(12 * var(--u)), 12px); }
html.land .tutorial-guide .guide-tip.k-tip { font-size: max(calc(11 * var(--u)), 12px); }
html.land #tutorial-skip.btn-text { position: fixed; }
html.land #guide-skip.btn-text { position: absolute; }
html.land .tutorial-guide .guide-tip.k-tip { display: block; text-align: left; }
html.land .tutorial-guide .guide-tip .tutorial-next.btn-sub { display: flex; margin-left: auto; font-size: max(calc(11 * var(--u)), 12px); }
html.land .li-row.btn-text { justify-content: flex-start; text-decoration: none; padding-left: calc(2 * var(--u)); padding-right: calc(4 * var(--u)); color: inherit; }

html.land .k-frame-beast > [class*="k-pos-"] > .k-tag { flex: none; max-width: 100%; white-space: normal; text-align: center; line-height: 1.05; letter-spacing: -.02em; padding: calc(3 * var(--u)) calc(var(--k-tag-h) * .3); }
html.land.hd #scr-prep #cpt-bonds, html.land.hd #scr-battle .cpt-bt-pdots { padding-top: calc(var(--k-sign-h) * .37); padding-bottom: calc(var(--k-sign-h) * .23); }

html.land { --k-wood: #c39a66; --k-wood-d: #9a7346; }

html.land .k-frame-beast.is-selected::after { filter: drop-shadow(0 0 calc(2 * var(--u)) rgba(255, 214, 120, .95)) drop-shadow(0 0 calc(5 * var(--u)) rgba(240, 180, 60, .6)); }

html.land .k-slot:not(#k-wood) { background: var(--k-paper-d); box-shadow: inset 0 0 0 calc(4 * var(--u)) var(--k-wood), inset 0 0 0 calc(4 * var(--u) + 1px) rgba(var(--k-ink-rgb), .5), 0 0 0 1px rgba(var(--k-ink-rgb), .6); border-radius: 2px; }

html.land .card-taunt > .fx-taunt { filter: saturate(1.35) hue-rotate(-12deg) brightness(.68) contrast(1.2); }

html.land .k-frame-beast.card-taunt > .fx-taunt { border-bottom-width: calc(3.5 * var(--u)); }

html.land .bub.dock::after { display: none; }
html.land .bub.dock { text-align: center; }
html.land .tip-flash { animation: tipFlash 350ms ease-in-out 6 alternate; }
html.land .card.card-taunt.tip-flash { animation: none; }
html.land .card.card-taunt.tip-flash > .fx-taunt { animation: ui3Taunt 700ms ease-out 3; }
@media (prefers-reduced-motion: reduce) {
html.land .tip-flash, html.land .card.card-taunt.tip-flash > .fx-taunt { animation: none; filter: brightness(1.25); }
}

html.land .hero-plate.k-sign, html.land #scr-prep .hero-plate.k-sign, html.land #scr-battle .hero-plate.k-sign, html.land #bt-overlay .hero-plate.k-sign { --k-sign-h: var(--np-h, calc(24 * var(--u))); height: var(--k-sign-h); color: var(--k-ink); text-shadow: none; box-sizing: border-box; min-width: 0; }
html.land .hero-plate.k-sign .plate-name, html.land .hero-plate.k-sign .stage-no { color: var(--k-ink); text-shadow: none; }

html.land.compact:not(.in-tut) .cpt-bench-label.k-paper { --k-paper-h: calc(var(--bb-lw) * 1.1); color: var(--k-ink); }

html.land.compact:not(.in-tut) #scr-prep .prep-dock #tb-gold { --k-sign-h: calc(34 * var(--u)); height: var(--k-sign-h); top: calc(62 * var(--u) + (44 * var(--u) - var(--k-sign-h)) / 2); color: var(--k-ink); text-shadow: none; padding-left: calc(var(--k-sign-h) * .3); padding-right: calc(var(--k-sign-h) * .3); }
html.land.compact:not(.in-tut) #scr-prep .prep-dock #tb-gold::before { content: ""; flex: none; position: static; width: calc(20 * var(--u)); height: calc(22 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep .cpt-top .cpt-omen.k-round, html.land.compact:not(.in-tut) .cpt-omen.k-round { position: relative; --k-round: calc(38 * var(--u)); width: max(calc(41 * var(--u)), 44px); height: max(calc(41 * var(--u)), 44px); }
html.land.compact:not(.in-tut) .cpt-omen.k-round .omen-icon { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }

html.land.compact:not(.in-tut) .relic-cap.k-tag, html.land.compact:not(.in-tut) #scr-prep .prep-dock .hero-passive.k-tag { --k-tag-h: calc(10 * var(--u)); color: var(--k-ink); text-shadow: none; padding-left: calc(var(--k-tag-h) * .3); padding-right: calc(var(--k-tag-h) * .3); box-sizing: border-box; letter-spacing: -.02em; }
html.land.compact:not(.in-tut) .relic-cap.k-tag:empty { display: none; }

html.land:not(.in-tut) #scr-battle #bt-overlay .duel-face > .hero-plate.k-sign { width: max-content; min-width: 0; }

html.land.compact:not(.in-tut) #scr-settle::before,
html.land.compact:not(.in-tut) #scr-final::before {
content: ''; position: absolute; z-index: -1; pointer-events: none; box-sizing: border-box;
left: calc(-1 * var(--tbl-side)); top: calc(-1 * var(--tbl-vside)); width: calc(100 * var(--vw)); height: calc(100 * var(--vh));
}
html.land.compact:not(.in-tut) #scr-final:not([hidden]) { overflow: visible; }

html.land.compact:not(.in-tut) #scr-final .land-fin-side .poster-detail,
html.land.compact:not(.in-tut) #scr-final .land-fin-side .poster-why,
html.land.compact:not(.in-tut) #scr-final .land-fin-side .fin-deep-sub,
html.land.compact:not(.in-tut) #scr-final .final-last { color: var(--k-ink); }
html.land.compact:not(.in-tut) #scr-final .land-fin-side .fin-deep-big { color: var(--k-cin); text-shadow: none; }
html.land.compact:not(.in-tut) #scr-final .land-fin-side .fin-deep-record { color: var(--k-cin); background: none; border-color: var(--k-cin); border-radius: 2px; }
html.land.compact:not(.in-tut) #scr-final .land-fin-side .fin-deep-note,
html.land.compact:not(.in-tut) #scr-final .land-fin-side .deep-entry-note { color: var(--k-ink-2); }
html.land.compact:not(.in-tut) #scr-final .land-fin-side .fc-status { color: var(--k-ink); background: rgba(var(--k-ink-rgb), .06); border-color: var(--k-gold-d); border-radius: 2px; }
html.land.compact:not(.in-tut) #scr-final .land-fin-side .fin-dex-link { color: var(--k-ink); text-decoration-color: rgba(var(--k-ink-rgb), .55); }

html.land.compact:not(.host-xhs) .tutorial-skip, html.land.compact:not(.host-xhs):not(.in-tut) .guide-skip:not(.tutorial-skip) { right: calc(50% - 320 * var(--u) + 160 * var(--u)); }
html.land.compact.host-xhs .tutorial-skip, html.land.compact.host-xhs:not(.in-tut) .guide-skip:not(.tutorial-skip) { right: calc(50% - 320 * var(--u) + 66 * var(--u)); }

html.land .mk-dots { display: inline-flex; align-items: center; gap: calc(1 * var(--u)); padding: calc(.8 * var(--u)) calc(1.2 * var(--u)); border-radius: calc(4 * var(--u)); background: rgba(18, 14, 10, .62); border: 0; box-shadow: 0 0 0 1px rgba(255, 236, 190, .35); }
html.land .mk-dot { display: block; width: max(7px, calc(8 * var(--u))); height: max(7px, calc(8 * var(--u))); border-radius: 50%; border: 1px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .22); box-sizing: border-box; }
html.land.compact .mk-dots { gap: calc(.8 * var(--u)); padding-left: calc(.6 * var(--u)); padding-right: calc(.6 * var(--u)); }
html.land .mk-dot.on { background: #e0533f; border-color: #ffd7c9; }
html.land .mk-dot.next { border-color: #f3d27a; animation: mkDotNext 1.1s ease-in-out infinite; }

html.land .k-frame-beast > .k-pos-star.kp-merge-dots { flex-wrap: wrap; align-content: flex-start; align-items: flex-start; row-gap: calc(1.5 * var(--u)); }
html.land .k-frame-beast > .k-pos-star > .mk-merge ~ .mk-dots { margin-right: 100%; }
html.land .card .mk-star .mk-star-hollow { opacity: .5; letter-spacing: 0; }

html.land.host-xhs:not([lang^="zh"]) .row-board .card .mk-star .mk-star-hollow { display: none; }
html.land .card.merge-fly { position: fixed; z-index: 31; pointer-events: none; margin: 0; transform-origin: 50% 50%; }
html.land .card.merge-wait { opacity: .3; transition: none; }
html.land .card .merge-pop { position: absolute; left: 50%; top: 42%; z-index: 6; pointer-events: none; transform: translate(-50%, -50%); opacity: 0; white-space: nowrap;
font-weight: 900; font-size: calc(26 * var(--u)); line-height: 1; color: #fff3c4;
text-shadow: 1px 1px 0 #6b3f0c, -1px 1px 0 #6b3f0c, 1px -1px 0 #6b3f0c, -1px -1px 0 #6b3f0c, 0 0 calc(8 * var(--u)) rgba(243, 190, 80, .95); animation: mergePop .95s ease-out forwards; }
html.land .card .merge-pop3 { color: #ffe08a; font-size: calc(30 * var(--u)); }
@media (prefers-reduced-motion: reduce) {
html.land .mk-dot.next { animation: none; background: #f3d27a; }
html.land .card .merge-pop { animation: mergePopRm .95s steps(1) forwards; opacity: 1; }
}

html.land #tj-sheet .tj-card { width: min(max(calc(1060 * var(--s)), 400px), calc(100 * var(--vw) - 24px)); display: flex; flex-direction: column; }
html.land #tj-sheet .tj-tabs { gap: calc(3 * var(--u)); margin: calc(4 * var(--u)) 0 calc(6 * var(--u)); flex: none; }
html.land #tj-sheet .tj-tab { flex: 1 0 auto; min-width: 44px; font-size: max(calc(12 * var(--u)), 12px); }
html.land #tj-sheet .tj-detail { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; text-align: left; display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
html.land #tj-sheet .tj-head { display: flex; align-items: center; gap: calc(6 * var(--u)); }
html.land #tj-sheet .tj-seal { --k-tj: max(calc(26 * var(--u)), 26px); flex: none; }
html.land #tj-sheet .tj-name { font-size: max(calc(15 * var(--u)), 14px); font-weight: 800; color: var(--k-ink); line-height: 1.2; }
html.land #tj-sheet .tj-state { --k-tag-h: max(calc(18 * var(--u)), 18px); margin-left: auto; flex: none; }
html.land #tj-sheet .tj-state.is-lock { color: var(--k-ink-2); }
html.land #tj-sheet .tj-row { margin: 0; font-size: max(calc(12 * var(--u)), 12px); line-height: 1.4; color: var(--k-ink); }
html.land #tj-sheet .tj-k { color: var(--k-ink-2); font-weight: 700; }
html.land #tj-sheet .tj-mult { font-weight: 800; color: var(--k-cin-d); }
html.land #tj-sheet .tj-lock { font-weight: 700; color: var(--k-cin); }
html.land #tj-sheet .confirm-btns { flex: none; }

html.land #scr-settle .settle-tj { display: flex; flex-direction: column; align-items: flex-start; gap: calc(2 * var(--u)); margin-top: calc(3 * var(--u)); font-size: max(calc(12.5 * var(--u)), 12px); line-height: 1.3; font-weight: 800; color: var(--k-cin-d); }
html.land #scr-settle .settle-tj[hidden] { display: none; }
html.land #scr-settle .settle-tj-seal { --k-tj: max(calc(28 * var(--u)), 26px); flex: none; }
html.land #scr-settle .settle-tj-txt { min-width: 0; white-space: nowrap; }
html.land #scr-settle .settle-tj-line { display: flex; flex-wrap: wrap; align-items: center; column-gap: calc(6 * var(--u)); max-width: 100%; }
html.land #scr-settle .settle-tj-line[hidden] { display: none; }

html.land #scr-settle .settle-tj.has-seal #settle-tj-l2 { padding-left: calc(max(28 * var(--u), 26px) + 6 * var(--u)); box-sizing: border-box; }

html.land #scr-dex .dex-skins { display: none; }
html.land #scr-dex.ldt-skins .dex-skins {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(10 * var(--u));
position: absolute; left: calc(24 * var(--u)); top: calc(74 * var(--u)); width: calc(592 * var(--u)); height: calc(262 * var(--u));
}
html.land #scr-dex.ldt-skins .dex-body, html.land #scr-dex.ldt-skins .land-dex-right { display: none; }
html.land #scr-dex .skin-opts { display: flex; justify-content: center; gap: calc(28 * var(--u)); }
html.land #scr-dex .skin-opt {
--k-card-w: calc(84 * var(--u)); width: calc(132 * var(--u)); min-height: 44px; display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u));
-webkit-appearance: none; appearance: none; margin: 0; padding: calc(4 * var(--u)) 0; border: 0; background-color: transparent; font-family: inherit; color: var(--k-ink); cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
html.land #scr-dex .skin-opt.is-locked { cursor: default; }
html.land #scr-dex .skin-opt:not(.is-locked):active .skin-card { transform: translateY(2px); }
html.land #scr-dex .skin-opt.is-locked .dex-art { filter: saturate(0) brightness(.75); }
html.land #scr-dex .skin-name { font-size: max(calc(12 * var(--u)), 12px); font-weight: 800; line-height: 1.2; text-align: center; }
html.land #scr-dex .skin-state { --k-tag-h: max(calc(18 * var(--u)), 18px); min-height: var(--k-tag-h); font-size: max(calc(11 * var(--u)), 12px); line-height: 1.25; text-align: center; }
html.land #scr-dex .skin-state.is-lock { color: var(--k-ink-2); font-weight: 700; white-space: normal; }
html.land #scr-dex .skin-note { margin: 0; font-size: max(calc(11 * var(--u)), 12px); line-height: 1.3; color: var(--k-ink-2); text-align: center; }

html.land #scr-start.gate .gbr-line { display: flex; align-items: center; justify-content: flex-start; gap: calc(3 * var(--u)); max-width: 100%; }
html.land #scr-start.gate .gbr-seal { --k-tj: max(calc(16 * var(--u)), 16px); flex: none; }
html.land #scr-final .poster-tj { display: flex; align-items: center; justify-content: center; gap: calc(4 * var(--u)); max-width: 100%; margin: calc(3 * var(--u)) 0 0; }
html.land #scr-final .poster-tj[hidden] { display: none; }
html.land #scr-final .poster-tj-seal { --k-tj: max(calc(16 * var(--u)), 16px); flex: none; }
html.land #scr-final .poster-tj-txt { min-width: 0; font-size: max(calc(11 * var(--u)), 12px); line-height: 1.2; font-weight: 700; letter-spacing: .04em; color: #f3d98f; }
html.land:not([lang^="zh"]) #scr-final .poster-tj-txt { letter-spacing: 0; }
html.land .gate-sheet .bd-seal { --k-tj: max(calc(16 * var(--u)), 16px); flex: none; align-self: center; }

html.land #scr-settle .settle-tj .settle-tj-go { flex: none; white-space: nowrap; margin-top: -9px; margin-bottom: -9px; padding-left: 0; justify-content: flex-start; }

html.land body:has(#partner-pick:not([hidden])) #cpt-bench-label,
html.land body:has(#partner-pick:not([hidden])) #bench-strip,
html.land body:has(#partner-pick:not([hidden])) .cpt-bench { visibility: hidden; }

html.land #scr-settle .settle-side .settle-tj { margin-top: 0; }

html.land .gate-sheet .gate-rec-col .gr-tj { display: flex; align-items: center; justify-content: center; gap: calc(5 * var(--u)); max-width: 100%; min-width: 0; }
html.land .gate-sheet .gate-rec-col .gr-tj[hidden] { display: none; }
html.land .gate-sheet .gate-rec-col .gr-seal { --k-tj: max(calc(18 * var(--u)), 18px); flex: none; }
html.land .gate-sheet .gate-rec-col .gr-tj-t { min-width: 0; font-size: max(calc(14 * var(--u)), 14px); font-weight: 800; line-height: 1.2; color: var(--k-cin-d); }

html.land .cpt-sell { display: none; }
html.land.compact:not(.in-tut) .cpt-sell {
--k-paper-h: calc(48 * var(--u)); padding-left: calc(2 * var(--u)); padding-right: calc(2 * var(--u)); position: absolute; left: calc(var(--tbl-x1) - 66 * var(--u)); top: calc(56 * var(--u)); width: calc(66 * var(--u)); height: calc(110 * var(--u)); z-index: 8; box-sizing: border-box;
align-items: center; justify-content: center; text-align: center; font-size: max(calc(13 * var(--u)), 13px); font-weight: 700; line-height: 1.3; color: var(--k-cin-d);
}
html.land.compact:not(.in-tut) #scr-prep.cpt-dragging .cpt-sell { display: flex; }
html.land.compact:not(.in-tut) .cpt-sell.drop-hot { filter: drop-shadow(0 0 calc(5 * var(--u)) var(--k-cin)) drop-shadow(0 0 calc(2 * var(--u)) var(--k-cin)); color: var(--k-cin); }

html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right,
html.land.compact:not(.in-tut) #scr-battle.cpt-log .land-log { --k-paper-h: calc(66 * var(--u)); filter: drop-shadow(0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.55)); }
html.land.compact:not(.in-tut) #land-bt-detail { --k-paper-h: calc(66 * var(--u)); filter: drop-shadow(0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.55)); }

html.land.compact:not(.in-tut) #scr-final .land-fin-side.k-settle { --k-settle-h: calc(84 * var(--u)); box-sizing: border-box; width: calc(262 * var(--u)); display: flex; padding: calc(12 * var(--u)) calc(17 * var(--u)); }
html.land.compact:not(.in-tut) #scr-final .land-fin-side .poster-why.k-tag { display: flex; flex: none; align-items: center; justify-content: flex-start; white-space: normal; text-align: left; line-height: 1.3; padding-top: calc(var(--k-tag-h) * .4); padding-bottom: calc(var(--k-tag-h) * .4); padding-left: calc(var(--k-tag-h) * .4884); padding-right: calc(var(--k-tag-h) * .4884); border-left-width: 0; border-radius: 0; background: none; }
html.land.compact:not(.in-tut) #scr-final .land-fin-side .poster-why.k-tag[hidden] { display: none; }

@media (max-height: 400px) {
html.land.compact:not(.in-tut) #scr-final .land-fin-side.k-settle { gap: calc(4 * var(--u)); }
html.land.compact:not(.in-tut) #scr-final .land-fin-side .poster-detail { line-height: 1.4; }
html.land.compact:not(.in-tut) #scr-final .final-last { line-height: 1.3; }
}

html.land #scr-final .poster-team .slot > .k-slot:not(#k-wood) { background: rgba(255,248,230,.06); background-image: none; border-radius: calc(4 * var(--u)); box-shadow: inset 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0,0,0,.75), inset 0 0 0 1px rgba(232,221,198,.18); }

html.land .gate-sheet.has-realm .gate-sheet-card { width: min(calc(600 * var(--u)), calc(100 * var(--vw) - 24px)); }
html.land .gate-sheet .gate-realm .gr-extra { display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
html.land .gate-sheet .gate-realm .gr-x { line-height: 1.3; }
html.land #gate-rec-sheet .confirm-btns { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: calc(14 * var(--u)); }
html.land #gate-rec-sheet .gate-sheet-card .gate-rec-list { padding-bottom: 3px; }
html.land .gate-sheet .gate-realm .gr-later { font-size: max(calc(12 * var(--u)), 12px); line-height: 1.3; color: var(--k-ink-2); }
html.land .gate-sheet .gate-realm .gr-later[hidden] { display: none; }

@media (min-width: 780px) and (min-height: 440px) {
html.land.compact:not(.host-xhs):not(.in-tut) #scr-prep:not(.ui6-deep4), html.land.compact:not(.host-xhs):not(.in-tut) #scr-battle:not(.ui6-deep4) {
--bb-sw: calc(44 * var(--u));
--bb-bw: calc(5 * var(--bb-sw) + 4 * var(--bb-g));
--bb-r0: calc(var(--tbl-x0) + max(calc(103 * var(--u)), 100px) + 23.5 * var(--u));
--bb-hero: calc(var(--bb-r0) + var(--bw41) + 19.5 * var(--u));
--bb-r1: calc(var(--bb-hero) + 107.5 * var(--u));
--bb-pk: calc(var(--bb-r1) + 60.5 * var(--u));
--bb-s0: max(calc(var(--bb-pk) + var(--bb-lw) + 3 * var(--u)), calc(var(--tbl-cc) + 3 * var(--tbl-cw) + 15 * var(--u) - var(--bb-bw)));
--bb-lab: calc(var(--bb-s0) - 3 * var(--u) - var(--bb-lw));
}
}

@media (min-width: 780px) and (min-height: 440px) {
html.land.compact:not(.host-xhs):not(.in-tut) #scr-prep.ui6-deep4:not(.cpt-relic-fold), html.land.compact:not(.host-xhs):not(.in-tut) #scr-battle.ui6-deep4:not(.cpt-relic-fold) {
--bb-sw: calc(36 * var(--u));
--bb-sh: calc(54 * var(--u));
--bb-g: calc(3 * var(--u));
--bb-bw: calc(5 * var(--bb-sw) + 4 * var(--bb-g));
--bb-r0: calc(var(--tbl-x0) + max(calc(103 * var(--u)), 100px) + 23.5 * var(--u));
--bb-hero: calc(var(--bb-r0) + var(--bw41) + 19.5 * var(--u));
--bb-r1: calc(var(--bb-hero) + 107.5 * var(--u));
--bb-pk: calc(var(--bb-r1) + 2 * var(--bw41) + 23.5 * var(--u));
--bb-s0: max(calc(var(--bb-pk) + var(--bb-lw) + 3 * var(--u)), calc(var(--tbl-cc) + 3 * var(--tbl-cw) + 15 * var(--u) - var(--bb-bw)));
--bb-lab: calc(var(--bb-s0) - 3 * var(--u) - var(--bb-lw));
}
html.land.compact:not(.host-xhs):not(.in-tut) #scr-prep.ui6-deep4:not(.cpt-relic-fold) .prep-dock #relic-more, html.land.compact:not(.host-xhs):not(.in-tut) #scr-battle.ui6-deep4:not(.cpt-relic-fold) #cpt-bt-relic-more { left: calc(var(--bb-r1) + var(--bw41) + 19.5 * var(--u)); }
}

html.land .k-frame-beast { --kf-x: 7.8125%; --kf-w: 84.375%; --kf-t: 7.2917%; --kf-b: 5.5556%; --kf-nx: 2%; --kf-nw: 96%; --kf-sl: -2.0833%; }
html.land.hd .k-frame-beast { --kf-x: 7.8125%; --kf-w: 84.375%; --kf-t: 7.0833%; --kf-b: 5.4167%; --kf-nx: 7.8125%; --kf-nw: 84.375%; --kf-sl: -9.259%; }

html.land .k-frame-beast:not(#k-wood) > .k-pos-name {
left: var(--kf-nx); width: var(--kf-nw); top: auto; bottom: var(--kf-b); height: auto; min-height: 13.5%; box-sizing: border-box;
align-items: center; justify-content: center; text-align: center;
padding: calc(var(--kf-ov, 0px) + 2px) 1px calc(2 * var(--u));
background: linear-gradient(180deg, #fbf3e2 0%, var(--k-paper) 45%, #ecdcbc 100%);
box-shadow: inset 0 0 0 1px rgba(var(--k-gold-rgb), .5), 0 -1px 0 rgba(var(--k-ink-rgb), .85);
color: var(--k-ink); overflow: visible;
}
html.land .card.k-frame-beast > .k-pos-name, html.land .pp-card > .k-pos-name, html.land #land-dex-detail .k-frame-beast > .k-pos-name { display: flex; }

html.land .pp-card.k-frame-beast { --k-seal: calc(18 * var(--u) * var(--pp-s)); }
html.land .card.k-frame-beast, html.land .pp-card.k-frame-beast { --kf-sw: calc(var(--k-seal) * 1.3); --kf-sh: calc(var(--k-seal) * 1.3); --kf-aw: calc(var(--k-seal) * 1.3); --kf-ah: calc(var(--k-seal) * 1.3); --kf-ov: calc(var(--kf-sh) * .2); }

html.land.host-xhs .card.k-frame-beast { --kf-sw: calc(var(--k-seal) * 1.2); --kf-sh: calc(var(--k-seal) * 1.2); --kf-aw: calc(var(--k-seal) * 1.2); --kf-ah: calc(var(--k-seal) * 1.2); }
html.land .k-frame-beast > .k-pos-name > [class*="k-pos-"] { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; bottom: calc(100% - var(--kf-ov, 0px)); width: var(--kf-sw); height: var(--kf-sh); }
html.land .k-frame-beast > .k-pos-name > .k-pos-atk { left: var(--kf-sl); width: var(--kf-aw); height: var(--kf-ah); }
html.land .k-frame-beast > .k-pos-name > .k-pos-hp { right: var(--kf-sl); }
html.land .k-frame-beast > .k-pos-name > .k-pos-dr { left: 50%; width: auto; height: auto; transform: translateX(-50%); }
html.land:not(.hd):not([lang^="zh"]) body .k-frame-beast .k-name { letter-spacing: -.04em !important; }

html.land .row-bench .k-frame-beast:not(#k-wood) > .k-pos-name { min-height: 0; height: calc(var(--k-tag-h) + 3 * var(--u)); padding: 0; }
html.land .row-bench .k-frame-beast > .k-pos-name > * { display: none; }
html.land .row-bench .k-frame-beast > .k-pos-star { z-index: 3; top: auto; bottom: var(--kf-b); left: var(--kf-nx); width: var(--kf-nw); height: calc(var(--k-tag-h) + 3 * var(--u)); justify-content: center; }

html.land .k-pos-atk, html.land .k-pos-hp { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }
html.land .k-frame-beast .k-seal.k-seal-atk, html.land .k-frame-beast .k-seal.k-seal-hp { width: 100%; height: 100%; box-sizing: border-box; text-shadow: none; }
html.land .k-frame-beast .k-seal.k-seal-atk { padding-bottom: 8.3%; }
html.land .k-frame-beast .k-seal-atk > .stat-atk { position: relative; z-index: 1; color: var(--k-ink); font-weight: 900; line-height: 1; letter-spacing: 0; text-shadow: 1px 0 0 var(--k-paper), -1px 0 0 var(--k-paper), 0 1px 0 var(--k-paper), 0 -1px 0 var(--k-paper), 1px 1px 0 var(--k-paper), -1px -1px 0 var(--k-paper), 1px -1px 0 var(--k-paper), -1px 1px 0 var(--k-paper); }
html.land .k-frame-beast .k-seal-atk > .stat-atk.ui2-up:not(.stat-hero) { color: #176b2d; }
html.land .k-frame-beast .k-seal-atk > .stat-atk.ui2-down { color: #a9201a; }
html.land .k-frame-beast .k-seal-atk > .stat-atk.stat-hero { color: #7a4500; }
html.land .k-frame-beast .k-seal-hp > .stat-hp { position: relative; z-index: 1; color: var(--k-paper); font-weight: 900; text-shadow: 0 1px 0 rgba(60, 10, 8, .6), 0 0 2px rgba(60, 10, 8, .55); letter-spacing: 0; }

html.land .k-frame-beast .mk-counter, html.land .k-frame-beast .mk-merge { font-size: max(calc(8 * var(--u)), 12px); line-height: 1.05; }
html.land .k-frame-beast > .k-pos-star > .mk-merge { --k-tag-h: calc(14 * var(--u)); padding-top: calc(2 * var(--u)); padding-bottom: calc(2 * var(--u)); padding-left: calc(var(--k-tag-h) * .3); padding-right: calc(var(--k-tag-h) * .3); }
html.land .k-frame-beast > .k-pos-counter > .k-tag { --k-tag-h: calc(14 * var(--u)); padding-top: calc(2 * var(--u)); padding-bottom: calc(2 * var(--u)); padding-left: calc(var(--k-tag-h) * .3); padding-right: calc(var(--k-tag-h) * .3); }

html.land .k-frame-beast > .k-pos-cost { left: 50%; top: 0; width: max-content; height: auto; transform: translate(-50%, -52%); z-index: 4; }
html.land .k-frame-beast > .k-pos-cost > .k-price { --k-tag-h: calc(15 * var(--u)); display: inline-flex; align-items: center; justify-content: center; gap: calc(2 * var(--u)); white-space: nowrap; max-width: none; font-style: normal; letter-spacing: 0; padding-top: calc(1.5 * var(--u)); padding-bottom: calc(1.5 * var(--u)); padding-left: calc(var(--k-tag-h) * .42); padding-right: calc(var(--k-tag-h) * .42); }
html.land .k-frame-beast .k-price-coin { flex: none; width: calc(14 * var(--u)); height: calc(14 * var(--u)); min-width: 14px; min-height: 14px; display: block; pointer-events: none; background: var(--img-pouch) center / contain no-repeat; }
html.land .k-frame-beast .k-price-n { font-size: max(calc(11 * var(--u)), 12px); font-weight: 800; line-height: 1; color: var(--k-ink); }
html.land .k-frame-beast.is-unbuyable .k-price-n { color: #9c2218; }
html.land .k-frame-beast > .k-pos-cost > .cost-old { position: absolute; left: calc(100% + 3px); top: 50%; transform: translateY(-50%); color: var(--k-paper); text-shadow: 0 1px 2px #000, 0 0 3px #000; font-size: max(calc(10 * var(--u)), 12px); font-weight: 700; line-height: 1; white-space: nowrap; }
html.land .pp-card.k-frame-beast .k-price { --k-tag-h: calc(15 * var(--u) * var(--pp-s)); }
html.land .pp-card.k-frame-beast .k-price-coin { width: calc(14 * var(--u) * var(--pp-s)); height: calc(14 * var(--u) * var(--pp-s)); }
html.land .pp-card.k-frame-beast .k-price-n { font-size: max(calc(13 * var(--u)), 14px); }

html.land #land-dex-detail .k-frame-beast, html.land #scr-dex .dex-cell.k-frame-beast { --kf-ov: 0px; }
html.land #scr-dex .dex-cell.k-frame-beast > .k-pos-name { min-height: 0; padding: calc(1 * var(--u)) calc(1 * var(--u)); }

html.land #scr-start.gate {
--day-w: max(calc(540 * var(--s)), 264px); --day-h1: max(calc(100 * var(--s)), 46px); --day-h2: max(calc(132 * var(--s)), 66px);
--cap-fs: max(calc(10 * var(--u)), 12px);
}
html.land[lang^="zh"] #scr-start.gate { --day-w: max(calc(480 * var(--s)), 250px); }
html.land.rot #scr-start.gate { --day-w: max(calc(480 * var(--s)), 236px); }
html.land #scr-start.gate.has-cap { --cap-h: calc(var(--cap-fs) * 2.1); }
html.land.lbox #scr-start.gate.has-cap { --cap-h: calc(var(--cap-fs) * 1.6); }

html.land #scr-start.gate .gate-trial {
order: 1; flex: none; flex-direction: column; gap: calc(1 * var(--u)); margin: 0 0 var(--gate-gap);
width: var(--day-w); height: var(--day-h1); --k-sign-h: var(--day-h1);
font-size: max(calc(10 * var(--u)), 12px); line-height: 1.2; letter-spacing: 0;
}
html.land #scr-start.gate .gate-trial.two-rows { height: var(--day-h2); --k-sign-h: var(--day-h2); }
html.land #scr-start.gate .gate-day-l1 { display: block; max-width: 100%; white-space: nowrap; font-weight: 800; line-height: 1.45; }
html.land #scr-start.gate .gate-day-l1.is-nem { color: var(--k-cin-d); }
html.land #scr-start.gate .gate-day-l2 { display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); max-width: 100%; min-width: 0; white-space: nowrap; }
html.land #scr-start.gate .gate-trial-ico { display: flex; flex: none; }
html.land #scr-start.gate .gate-trial-ico .omen-icon { width: max(calc(32 * var(--s)), 16px); height: max(calc(32 * var(--s)), 16px); }
html.land #scr-start.gate .gate-trial-txt { white-space: nowrap; }

html.land #scr-start.gate .gate-cap {
order: 2; flex: none; margin: 0 0 calc(var(--gate-gap) * .75); height: var(--cap-h); --k-tip-h: var(--cap-h); min-height: 0; max-width: 100%; box-sizing: border-box;
white-space: nowrap; font-size: max(calc(10 * var(--u)), 12px); font-weight: 700; line-height: 1; letter-spacing: .02em; color: var(--k-ink);
}
html.land #scr-start.gate .resume-box .gate-cap { order: 0; }
html.land #scr-start.gate.has-cap .gate-low .btn-main { margin-bottom: calc(var(--gate-gap) * .25); }
html.land #scr-start.gate .gate-low .btn-sub { white-space: nowrap; }

html.land #scr-start.gate .gate-best {
position: absolute; right: max(calc(14 * var(--u)), 10px); top: calc(196 / 946 * 100%); margin: 0;
--gbw: calc(max(calc(236 * var(--s)), 128px) * var(--gbk, 1)); --gbh: calc(var(--gbw) * .46); --k-sign-h: calc(var(--gbh) * .6);
width: var(--gbw); height: var(--gbh); min-height: 0; flex-direction: column; gap: 0;
padding-left: calc(var(--gbw) * .1); padding-right: calc(var(--gbw) * .1); padding-top: calc(var(--gbh) * .08); padding-bottom: calc(var(--gbh) * .08);
}
html.land #scr-start.gate .gate-best-realm { display: flex; flex-direction: column; align-items: flex-start; gap: calc(2 * var(--u)); width: 100%; max-width: 100%; }
html.land #scr-start.gate .gbr-txt { font-size: max(calc(8 * var(--u)), 12px); line-height: 1; font-weight: 800; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; color: var(--ga-ink); }
html.land #scr-start.gate .gbr-barrow { display: flex; align-items: center; gap: calc(3 * var(--u)); width: 100%; }
html.land #scr-start.gate .gbr-bar { --k-xp-slot-h: max(calc(8 * var(--u)), 9px); flex: 1 1 0; min-width: 0; width: auto; margin: 0; }
html.land #scr-start.gate .gbr-num { flex: none; font-size: max(calc(6.5 * var(--u)), 12px); line-height: 1; font-weight: 700; white-space: nowrap; color: var(--ga-ink); }

html.land .narrow-hint {
position: fixed; left: 12px; right: 12px; top: 10px; z-index: 2147482000; margin: 0; padding: 6px 10px; text-align: center; pointer-events: none;
font-size: max(calc(12 * var(--u)), 13px); line-height: 1.35; font-weight: 700; color: var(--k-on-dark); background: rgba(var(--k-ink-rgb), .9); border: 1px solid var(--k-gold);
}

html.land.hd #scr-start.gate { --day-w: max(calc(640 * var(--s)), 264px); --day-h2: max(calc(108 * var(--s)), 66px); }
html.land.hd[lang^="zh"] #scr-start.gate { --day-w: max(calc(540 * var(--s)), 250px); }
html.land.hd #scr-start.gate .gate-trial { font-size: max(calc(12.5 * var(--u)), 12px); }
html.land.hd #scr-start.gate .gbr-txt { font-size: max(calc(9.5 * var(--u)), 12px); }
html.land.hd #scr-start.gate .gbr-num { font-size: max(calc(7.5 * var(--u)), 12px); }

html.land.compact:not(.rot):not(.host-xhs) #scr-start.gate .gate-best {
right: max(calc(14 * var(--u)), 10px, min(42px, calc((var(--vw) * 100 - 640 * var(--u)) / 2)));
}

html.land .card.k-frame-beast.k-row-zh { --kf-zi: max(calc(15 * var(--u)), 14px); --kf-ov: 0px; }
html.land .pp-card.k-frame-beast.k-row-zh { --kf-zi: max(calc(15 * var(--u) * var(--pp-s)), 14px); --kf-ov: 0px; }
html.land:not(.hd) .k-frame-beast.k-row-zh { --kf-nx: 0%; --kf-nw: 100%; --kf-sl: 0%; }
html.land .k-frame-beast.k-row-zh:not(#k-wood) > .k-pos-name { min-height: calc(var(--kf-zi) * 1.25); padding: 0; gap: 0; justify-content: space-between; }
html.land .k-frame-beast.k-row-zh > .k-pos-name > .k-pos-el, html.land .k-frame-beast.k-row-zh > .k-pos-name > .k-pos-kwn { position: static; flex: none; width: var(--kf-zi); height: var(--kf-zi); bottom: auto; transform: none; display: flex; align-items: center; justify-content: center; }
html.land .k-frame-beast.k-row-zh > .k-pos-name > .k-pos-el > .k-seal { --k-seal: var(--kf-zi); }
html.land .k-frame-beast.k-row-zh > .k-pos-name > .k-pos-kwn > .kw-badge { width: 100%; height: 100%; }
html.land .k-frame-beast.k-row-zh > .k-pos-name > .k-name { flex: 1 1 0; min-width: 0; max-width: none; white-space: nowrap; text-align: center; }
html.land .card.silenced > .k-pos-name > .k-pos-kwn, html.land .card.dead-unit > .k-pos-name > .k-pos-kwn { visibility: hidden; }
html.land .k-frame-beast.k-row-zh > .k-pos-counter { top: 11.25%; }
html.land .k-frame-beast.k-row-zh > .card-kw { right: 7.8%; top: 10.5%; }
html.land .k-frame-beast.k-row-zh:has(> .k-pos-star) > .card-kw { top: 10.5%; }
html.land .k-frame-beast.k-row-zh:has(> .k-pos-counter) > .card-kw, html.land .k-frame-beast.k-row-zh:has(> .k-pos-star):has(> .k-pos-counter) > .card-kw { top: 29%; }

html.land .k-frame-beast .card-kw .kw-badge:not(#k-wood) { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
html.land .k-frame-beast.k-row-zh > .k-pos-counter > .k-tag { padding-top: calc(2.4 * var(--u)); padding-bottom: calc(2.4 * var(--u)); }

html.land.host-xhs .k-frame-beast:not(.k-row-zh) > .k-pos-counter > .k-tag { border-image: none; background: none; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; color: var(--k-paper); text-shadow: 0 0 2px var(--k-ink), 0 0 2px var(--k-ink), 0 1px 1px var(--k-ink); }

html.land .k-frame-beast > .k-pos-cost { gap: calc(1 * var(--u)); align-items: stretch; }
html.land .k-mark, html.land .k-frame-beast > .k-pos-cost > .k-mark { --k-tag-h: calc(15 * var(--u)); display: inline-flex; align-items: center; justify-content: center; gap: calc(1.5 * var(--u)); flex: none; white-space: nowrap; max-width: none; font-style: normal; padding-top: calc(1.5 * var(--u)); padding-bottom: calc(1.5 * var(--u)); padding-left: calc(var(--k-tag-h) * .32); padding-right: calc(var(--k-tag-h) * .32); }

html.land .tips .bub > .k-mark { --k-tag-h: calc(15 * var(--u)); display: inline-flex; align-items: center; justify-content: center; gap: calc(1.5 * var(--u)); flex: none; vertical-align: middle; margin-right: calc(5 * var(--u)); margin-bottom: calc(1 * var(--u)); white-space: nowrap; max-width: none; font-style: normal; padding-top: calc(1.5 * var(--u)); padding-bottom: calc(1.5 * var(--u)); padding-left: calc(var(--k-tag-h) * .32); padding-right: calc(var(--k-tag-h) * .32); }
html.land .k-mark > .k-seal { --k-seal: max(calc(14 * var(--u)), 14px); flex: none; }
html.land .k-mark > .k-seal > .el-badge-img { width: 78% !important; height: 78% !important; }
html.land .k-mark-up { flex: none; width: calc(7 * var(--u)); min-width: 6px; height: calc(11 * var(--u)); min-height: 10px; background: var(--k-cin); clip-path: polygon(50% 0, 100% 46%, 66% 46%, 66% 100%, 34% 100%, 34% 46%, 0 46%); }
html.land .k-mark-pin { flex: none; width: calc(7 * var(--u)); min-width: 6px; height: calc(9 * var(--u)); min-height: 8px; background: linear-gradient(160deg, #f7df8e 0%, #dcab47 50%, #b07f2e 100%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
html.land .k-frame-beast > .k-pos-cost > .cost-old { z-index: 1; }

html.land .k-frame-beast:has(> .k-pos-cost) > .k-pos-star { align-items: flex-start; }

html.land.host-xhs .k-frame-beast > .k-pos-star > .mk-merge { padding-top: calc(2.5 * var(--u)); padding-bottom: calc(2.5 * var(--u)); }
html.land.host-xhs .k-frame-beast:not(.k-row-zh):has(> .k-pos-star) > .k-pos-counter { top: 26%; }

html.land.host-xhs .k-frame-beast:not(.k-row-zh):has(> .k-pos-star):has(> .k-pos-counter) > .card-kw { right: auto; left: 7.8%; top: 30%; }

html.land .swap-ask.swap-mini .swap-ask-text { display: none; }
html.land .swap-ask.swap-mini.k-paper { --k-paper-h: calc(40 * var(--u)); }

html.land.compact:not(.in-tut) #scr-prep.cpt-detail:not(.cpt-hover) .land-right { left: calc(8 * var(--u)); width: calc(2 * var(--tbl-cc) - 16 * var(--u)); top: calc(46 * var(--u)); height: auto; max-height: calc(100 * var(--vh) - 54 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail:not(.cpt-hover) .land-right #land-detail { height: auto; max-height: calc(100 * var(--vh) - 82 * var(--u)); grid-template-columns: calc(92 * var(--u)) minmax(0, 1.15fr) minmax(0, 1fr); column-gap: calc(12 * var(--u)); row-gap: calc(2 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail:not(.cpt-hover) .land-right #land-detail > .ld-art { height: calc(150 * var(--u)); }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail:not(.cpt-hover) .land-right #land-detail > .ld-aux { grid-column: 3; grid-row: 1 / span 12; align-self: start; display: flex; flex-direction: column; min-width: 0; }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-aux { display: contents; }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right #land-detail > .ld-aux > * { grid-column: 1 / -1; }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail:not(.cpt-hover) .land-right #land-detail > .ld-aux > * { grid-column: auto; }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail:not(.cpt-hover) .land-right .ld-aux .ld-kws { margin-top: 0; padding-top: 0; border-top: 0; }
html.land.compact .ld-aux > .ld-lore-tog { display: none; }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail:not(.cpt-hover) .land-right .ld-aux > .ld-lore-tog {
display: flex; align-items: center; flex: none; box-sizing: border-box; min-height: 44px; width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
font: inherit; font-weight: 700; font-size: max(calc(11.5 * var(--u)), 12px); line-height: 1.35; text-align: left; color: var(--k-cin-d); }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail:not(.cpt-hover) .land-right .ld-aux:not(.lore-open) > .ld-lore { display: none; }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail:not(.cpt-hover) .land-right .ld-aux > .ld-lore { margin-top: 0; }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-tiers .tier-star { width: 3.6em; }
html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-tiers .skill-tier { column-gap: max(calc(4 * var(--u)), 5px); }

html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-note, html.land.compact:not(.in-tut) #scr-prep.cpt-detail .land-right .ld-summon-name { font-size: max(calc(10 * var(--u)), 12px); }

html.land .swap-ask:not(.swap-mini) > .swap-mark { display: inline-flex; vertical-align: middle; margin: 0 calc(5 * var(--u)) 0 0; --k-tag-h: calc(18 * var(--u)); }
html.land .swap-ask:not(.swap-mini) > .swap-mark + .swap-ask-text { display: inline; }
html.land .swap-ask:not(.swap-mini) > .swap-mark ~ .swap-btn { display: flex; }
html.land .swap-ask.swap-mini > .swap-mark { display: inline-flex; vertical-align: middle; margin: 0 calc(5 * var(--u)) 0 0; --k-tag-h: calc(18 * var(--u)); }

html.land .swap-ask .swap-x.k-round { right: 0; top: 0; }
html.land .swap-ask::before { content: ""; float: right; width: calc(max(44px, 22 * var(--u)) + 4px - var(--k-paper-h) * 0.1079); height: calc(max(44px, 22 * var(--u)) - var(--k-paper-h) * 0.0904); margin-bottom: 4px; }

html.land .swap-ask.swap-mini.k-paper { padding-left: 2px; padding-right: 2px; }
html.land .swap-ask.swap-mini::before { width: calc(max(44px, 22 * var(--u)) + 1px); }
html.land .swap-ask.swap-mini > .swap-mark { margin-right: 2px; }
html.land .swap-ask.swap-mini .swap-btn.btn-main { padding-left: 22px; padding-right: 22px; }

html.land .relic-pick .relic-desc.rd-scroll { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; touch-action: pan-y; }

html.land #scr-settle .settle-tj.has-seal #settle-tj-l3 { padding-left: calc(max(28 * var(--u), 26px) + 6 * var(--u)); box-sizing: border-box; }
html.land #scr-settle #settle-tj-skin { white-space: normal; }
html.land #scr-start.gate .gate-dex-new {
position: absolute; right: calc(24 / 288 * 100%); top: calc(14 / 192 * 100%); z-index: 2; box-sizing: border-box; pointer-events: none; font-style: normal;
width: max(calc(9 * var(--u)), 12px); height: max(calc(9 * var(--u)), 12px); border-radius: 50%; background: var(--k-cin); box-shadow: 0 0 0 max(calc(2 * var(--u)), 1.5px) var(--k-paper), 0 1px 3px rgba(var(--k-ink-rgb), .5);
}
html.land #scr-start.gate .gate-dex-new[hidden] { display: none; }

html.land.compact #scr-prep.cpt-hover .land-detail.ld-trim-lore .ld-lore, html.land #land-bt-detail.cpt-hover .land-detail.ld-trim-lore .ld-lore { display: none; }
html.land.compact #scr-prep.cpt-hover .land-detail.ld-trim-note .ld-note, html.land #land-bt-detail.cpt-hover .land-detail.ld-trim-note .ld-note { display: none; }

html.land #scr-start .brand-five { display: none; }
html.land[data-target="cg"] #scr-start.gate .brand-five {
display: block; position: absolute; left: 50%; top: calc(100% - 22 * var(--s)); transform: translate(-50%, -50%); margin: 0;
padding: calc(3 * var(--s)) calc(22 * var(--s)) calc(2 * var(--s)); border: max(1px, calc(2 * var(--s))) solid var(--k-gold); border-radius: calc(4 * var(--s));
background: var(--k-ink); box-shadow: 0 calc(2 * var(--s)) calc(6 * var(--s)) rgba(0, 0, 0, .35);
white-space: nowrap; font-family: Georgia, "Times New Roman", serif; font-weight: 700;
font-size: max(calc(10 * var(--u)), 12px); line-height: 1.15; letter-spacing: .26em !important; text-indent: .26em !important;
color: var(--k-gold); pointer-events: none;
}

html.land #bt-overlay .ov-home-mini { --k-round: calc(26 * var(--u)); position: absolute; left: calc(var(--k-settle-h) * .1); bottom: calc(var(--k-settle-h) * .09); z-index: 3; opacity: .55; }

html.land:not(.in-tut) #scr-battle #bt-overlay.ft-result .two-btns { grid-template-columns: calc(150 * var(--u)); justify-content: center; }
html.land:not(.in-tut) #scr-battle #bt-overlay.ft-result .two-btns.has-swap { grid-template-columns: minmax(calc(150 * var(--u)), 1.3fr) minmax(calc(84 * var(--u)), 1fr); max-width: calc(340 * var(--u)); }
html.land #bt-overlay .ov-home-mini[hidden] { display: none; }
html.land #bt-overlay .ov-home-mini .home-icon { filter: none; }