* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; color: #f6efd8; }
#frame { position: fixed; inset: 0; background: #15120e; overflow: hidden; }
#viewport { position: absolute; left: 0; top: 0; right: 440px; bottom: 60px; image-rendering: pixelated; }
#viewport canvas { display: block; image-rendering: pixelated; }
#bottom-bar { position: absolute; left: 0; bottom: 0; right: 440px; height: 60px; background: rgba(20, 14, 8, .92); border-top: 2px solid #6b5326; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-size: 18px; }
#side { position: absolute; right: 0; top: 0; width: 440px; bottom: 0; background: linear-gradient(#21180f, #120d08); border-left: 3px solid #8a6a2c; display: flex; flex-direction: column; padding: 8px 12px; gap: 6px; overflow: hidden; }
#debug { position: absolute; left: 8px; bottom: 66px; font: 14px monospace; color: #9f9; text-shadow: 0 0 2px #000; }

.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: hsl(var(--hue, 30) 55% 42%); border: 2px solid #f3d27a; flex: none; }
.avatar.big { width: 52px; height: 52px; font-size: 24px; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* Side rail (440 wide) budget at 1080p: board 340 + chase + town event + gift feed + notices (fills) + status + host 100. */
#board { background: rgba(60, 40, 16, .55); border: 2px solid #b8913a; border-radius: 10px; padding: 6px 10px; height: 340px; flex-shrink: 0; overflow: hidden; }
#board .avatar.big { width: 34px; height: 34px; font-size: 16px; }
.board-title { text-align: center; font-size: 25px; font-weight: 900; color: #ffd86a; text-shadow: 0 0 10px #ff9a2a, 0 2px 0 #5a2a00; letter-spacing: 2px; }
.board-tabs { display: flex; flex-wrap: nowrap; justify-content: center; gap: 3px; margin: 2px 0 6px; }
.tab { font-size: 12px; padding: 2px 5px; flex: none; border-radius: 10px; background: #3a2a14; color: #b8a27a; white-space: nowrap; }
.tab.on { background: #ffcf4a; color: #3a2000; font-weight: 800; }
.board-empty { text-align: center; color: #c9b48a; padding: 40px 0; font-size: 18px; }
.rank-row { display: flex; align-items: center; gap: 10px; padding: 2px 6px; border-radius: 8px; margin-bottom: 2px; }
.rank-row.r1 { background: linear-gradient(90deg, rgba(255, 200, 60, .45), rgba(255, 200, 60, .05)); border: 1px solid #ffd86a; animation: shine 2.4s infinite; }
.rank-row.r2 { background: linear-gradient(90deg, rgba(220, 220, 240, .35), transparent); border: 1px solid #d8dce8; }
.rank-row.r3 { background: linear-gradient(90deg, rgba(220, 140, 80, .35), transparent); border: 1px solid #d89060; }
.rank-row.r4 { padding: 0 6px; font-size: 14px; line-height: 22px; }
.rank-no { width: 34px; text-align: center; font-weight: 900; font-size: 18px; color: #e8d6a8; }
.r1 .rank-no { font-size: 26px; color: #ffd86a; text-shadow: 0 0 8px #ff9a2a; }
.r2 .rank-no, .r3 .rank-no { font-size: 22px; }
.rank-info { flex: 1; min-width: 0; }
.rank-name { font-weight: 800; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r1 .rank-name { font-size: 19px; color: #fff3c0; }
.r4 .rank-name { font-size: 14px; display: inline; }
.rank-value { font-size: 13px; color: #e8c880; }
.r4 .rank-value { display: inline; margin-left: 8px; font-size: 13px; }
.rank-up { color: #6aff8a; font-weight: 900; font-size: 16px; animation: pop 1s infinite alternate; }
.rank-row.offline { opacity: .75; }
#chase:empty { display: none; }
#chase { font-size: 16px; color: #ffe9a8; background: rgba(140, 40, 20, .5); border: 1px solid #ff7a4a; border-radius: 8px; padding: 6px 10px; text-align: center; }

#notices { flex: 1; min-height: 0; background: rgba(0, 0, 0, .35); border-radius: 10px; padding: 6px 10px; overflow: hidden; }
.panel-title { font-weight: 900; color: #ffd86a; font-size: 18px; margin-bottom: 4px; }
.notice { font-size: 15px; line-height: 1.35; padding: 2px 0; border-bottom: 1px dashed rgba(255, 255, 255, .08); }
.notice.gold { color: #ffd86a; font-weight: 800; text-shadow: 0 0 6px rgba(255, 160, 40, .7); }
.notice.purple { color: #d6b0ff; }
.notice.white { color: #e9e4d8; }
/* Side-rail status: what comes next; market, tribulations and the merit stele in town. */
#schedule { flex-shrink: 0; background: rgba(0, 0, 0, .35); border-radius: 10px; padding: 6px 10px; font-size: 14px; display: flex; flex-direction: column; gap: 3px; }
#schedule[hidden] { display: none; }
/* Season, time, weather and (in town) the like bars: a small panel at the top right of the game view. */
/* Town strip along the top of the game view: season, weather, buffs, the two like meters and what comes next. */
#sky-hud { position: absolute; top: 0; left: 0; right: 440px; height: 40px; z-index: 4; pointer-events: none; background: linear-gradient(rgba(14, 10, 6, .78), rgba(14, 10, 6, .55)); border-bottom: 1px solid rgba(184, 145, 58, .6); padding: 0 52px 0 14px; display: flex; align-items: center; gap: 18px; font-size: 13px; color: #f0e6cc; white-space: nowrap; overflow: hidden; }
#sky-hud { font-variant-numeric: tabular-nums; }
#sky-hud .sky-clock { flex: none; width: 236px; overflow: hidden; text-overflow: ellipsis; color: #cfe6ff; font-weight: 800; font-size: 14px; }
#sky-hud .sky-hint { color: #b8e0c8; font-size: 12px; }
#sky-hud .buff { flex: none; width: 190px; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
#sky-hud .sky-bars { flex: none; display: flex; gap: 12px; }
#sky-hud .likes { flex: none; display: flex; flex-direction: column; gap: 2px; font-size: 12px; width: 150px; overflow: hidden; text-overflow: ellipsis; }
#sky-hud .likes span { overflow: hidden; text-overflow: ellipsis; }
#sky-hud .bar { height: 5px; }
#sky-hud .sky-list { display: flex; align-items: center; gap: 12px; margin-left: auto; min-width: 0; overflow: hidden; }
#sky-hud .sky-list-title { color: #ffd86a; font-weight: 800; font-size: 13px; }
#sky-hud .sky-item { flex: none; display: flex; gap: 5px; font-size: 13px; }
#sky-hud .sky-item b { color: #9fe8ff; font-weight: 800; }
/* The weather panel is a town thing; activity scenes keep only the ♪ button up there. */
body:not([data-scene="town"]) #sky-hud { display: none; }
.clock { color: #cfe6ff; font-weight: 700; }
.buff { color: #8affc0; font-weight: 800; }
.trib { color: #b8d8ff; }
.merit { color: #ffd86a; font-size: 14px; }
.market { color: #ffe0a0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { height: 8px; background: rgba(255, 255, 255, .15); border-radius: 4px; overflow: hidden; position: relative; }
.bar::after { content: ""; position: absolute; inset: 0; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, #6ad1e3, #b3f0ff); }
.bar.xp::after { background: linear-gradient(90deg, #e3a43a, #ffe08a); }
/* The host sits at the bottom of the side rail. */
#host { height: 132px; flex-shrink: 0; background: rgba(0, 0, 0, .35); border: 2px solid #6b5326; border-radius: 10px; display: flex; gap: 8px; padding: 6px 10px; align-items: center; }
#host[hidden] { display: none; }
.host-face { width: 112px; height: 122px; align-self: flex-end; flex-shrink: 0; display: grid; place-items: end center; font-size: 48px; font-weight: 900; color: #fff3c0; background: radial-gradient(circle at 50% 60%, #3a6a66, #1a2a28); border-radius: 10px; overflow: hidden; transition: transform .2s; }
.host-face.art { background: radial-gradient(circle at 50% 70%, rgba(120, 200, 190, .35), transparent 70%); }
.host-face img { width: 64px; height: 84px; object-fit: contain; image-rendering: pixelated; }
.host-face canvas { width: 112px; height: 128px; image-rendering: pixelated; display: block; margin-top: -6px; }
/* The avatar animates itself; no bob on the whole box. */
@keyframes hostbob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
.host-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-self: stretch; justify-content: center; }
.host-name { color: #8affd8; font-weight: 900; font-size: 15px; }
.host-line { color: #fff6dc; font-size: 14px; font-weight: 800; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.host-prev { color: #9a8a6a; font-size: 12px; line-height: 1.3; max-height: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Viewer card: in the side rail, town only. */
/* Viewer card: a wide strip along the bottom of the town view, just above the command bar. */
#focus-card { position: absolute; left: 0; right: 440px; bottom: 60px; z-index: 5; pointer-events: none; background: linear-gradient(rgba(20, 14, 8, .6), rgba(20, 14, 8, .86)); border-top: 2px solid #b8913a; padding: 6px 14px; font-size: 13px; display: grid; grid-template-columns: 300px 1fr; grid-template-rows: auto 1fr; column-gap: 16px; row-gap: 4px; }
#focus-card .focus-head { grid-row: 1 / 3; align-self: center; }
#focus-card .bar.xp { grid-column: 2; align-self: center; }
#focus-card .focus-lines { grid-column: 2; margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 14px; row-gap: 1px; }
#focus-card .focus-lines > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#focus-card .focus-lines .patron { display: flex; gap: 8px; align-items: center; }
#focus-card .focus-lines .root { color: #ffd86a; }
#focus-card .focus-lines .patron .bar { flex: 1; margin: 0; }
#focus-card[hidden] { display: none; }
#focus-card .avatar.big { width: 40px; height: 40px; font-size: 18px; }
#focus-card .focus-lines .patron, #focus-card .focus-lines .ties { grid-column: span 2; }
#town-event:empty { display: none; }
#town-event .ev-box { padding: 6px 10px; gap: 4px; }
#town-event .ev-head { font-size: 19px; }
#town-event .ev-sub, #town-event .ev-row { font-size: 14px; }
.focus-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.focus-title { flex: 1; }
.focus-name { font-size: 22px; font-weight: 900; color: #fff3c0; }
.focus-level { color: #ffd86a; }
.focus-reason { background: #ffcf4a; color: #3a2000; font-weight: 800; padding: 2px 8px; border-radius: 10px; font-size: 13px; }
.focus-lines { margin-top: 6px; display: grid; gap: 2px; color: #e9e4d8; }
.focus-lines .ties { color: #ffc8e8; }
.focus-lines .patron { color: #ffd86a; font-weight: 700; }
.focus-lines .patron .bar { margin-top: 2px; height: 4px; }
.focus-name.gold { color: #ffd86a; }
.focus-lines .mine { color: #7affd0; font-weight: 800; }
.focus-lines .gate { color: #ff9a7a; font-weight: 700; }

.cmds { display: flex; gap: 10px; align-items: center; flex: 1; min-width: 0; margin-right: 16px; }
.cmd-label { color: #c9b48a; flex-shrink: 0; }
.cmd-lane { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.cmd-track { display: inline-flex; gap: 22px; white-space: nowrap; animation: marquee var(--dur, 40s) linear infinite; }
.cmd-item { display: inline-flex; align-items: center; gap: 6px; }
.cmd { background: #3a2a14; border: 1px solid #b8913a; border-radius: 6px; padding: 2px 10px; color: #ffe9a8; font-weight: 700; }
.cmd-tip { color: #c9b48a; font-size: 15px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.stats { flex-shrink: 0; }
.stats { display: flex; gap: 18px; color: #e8d6a8; }

/* Gift feed in the side rail: newest on top, a few kept so the stage itself is never covered. */
#gift-feed { background: rgba(0, 0, 0, .35); border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
#gift-feed:empty { display: none; }
.gift-list { display: flex; flex-direction: column; gap: 4px; }
.banner { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 30px; padding: 0 10px; border-radius: 20px; animation: slidein .45s ease-out; font-size: 15px; }
.banner .avatar { width: 26px; height: 26px; font-size: 13px; }
.banner.old { opacity: .7; }
.banner.white { background: linear-gradient(90deg, rgba(255, 255, 255, .25), transparent); }
.banner.purple { background: linear-gradient(90deg, rgba(160, 90, 255, .7), rgba(60, 20, 120, .2)); box-shadow: 0 0 12px #a05aff; }
.banner.gold { background: linear-gradient(90deg, rgba(255, 190, 40, .85), rgba(140, 70, 0, .3)); box-shadow: 0 0 12px #ffb020; color: #fff; font-size: 16px; }
.banner.omen, .banner.legend { background: linear-gradient(90deg, #ff5a3a, #ffd040, #ff5a3a); background-size: 200% 100%; animation: slidein .45s ease-out, flow 2s linear infinite; color: #fff; font-size: 17px; font-weight: 900; box-shadow: 0 0 16px #ff8a2a; }
.banner-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner .who { font-weight: 900; color: #fff6c8; }
.banner .gift { font-weight: 900; color: #ffe06a; }
.banner .combo { font-weight: 900; color: #ff6a4a; font-size: 1.2em; animation: pop .5s infinite alternate; }
.banner-reward { font-weight: 900; color: #fff; text-shadow: 0 0 6px #000; white-space: nowrap; font-size: 13px; }

/* Big gifts: a golden glow around the stage edges and a banner along its bottom; the middle stays clear. */
#fullscreen-fx { position: absolute; left: 0; top: 0; right: 440px; bottom: 60px; display: flex; align-items: flex-end; pointer-events: none; z-index: 10; box-shadow: inset 0 0 70px 6px rgba(255, 200, 60, .22); animation: edgeglow 1.6s ease-in-out infinite alternate; }
@keyframes edgeglow { to { box-shadow: inset 0 0 90px 10px rgba(255, 220, 90, .32); } }
.fs { width: 100%; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 18px; padding: 10px 24px 14px; text-align: center; animation: slideup .5s ease-out; background: linear-gradient(transparent, rgba(60, 30, 0, .85) 30%, rgba(30, 14, 0, .92)); border-top: 2px solid #ffd86a; }
.fs.legend { background: linear-gradient(transparent, rgba(80, 20, 60, .85) 30%, rgba(30, 6, 30, .92)); border-top-color: #ff8ae0; }
@keyframes slideup { from { transform: translateY(100%); } to { transform: none; } }
.fs-title { font-size: 40px; font-weight: 900; color: #fff3b0; text-shadow: 0 0 18px #ff9a2a, 0 3px 0 #6a2a00; letter-spacing: 6px; }
.fs-name { font-size: 34px; font-weight: 900; color: #fff; text-shadow: 0 0 12px #ffd040; }
.fs-gift { font-size: 24px; color: #ffe9a8; }
.fs-reward { width: 100%; font-size: 24px; font-weight: 900; color: #ffffff; text-shadow: 0 0 10px #ff8a2a; }
.fs-items { font-size: 17px; color: #ffe9a8; }
.fs-buff { font-size: 18px; color: #8affc0; font-weight: 800; }
.fs-thanks { font-size: 20px; color: #fff; animation: pop .6s infinite alternate; }

#event-top { position: absolute; left: calc((100% - 440px) / 2); top: 12px; transform: translateX(-50%); width: min(860px, calc(100% - 520px)); z-index: 5; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* Bottom activity panel sits to the right of the focus card (left: 16px, 420px wide) so neither covers the other. */
#event-panel { position: absolute; left: 16px; right: 456px; bottom: 70px; z-index: 5; pointer-events: none; }
/* Activity scenes: no viewer card, the activity panel moves to the bottom-left corner. */
body:not([data-scene="town"]) #focus-card { display: none; }
.ev-box { width: 100%; background: rgba(20, 14, 8, .86); border: 2px solid #b8913a; border-radius: 12px; padding: 8px 14px; display: flex; flex-direction: column; gap: 6px; }
.ev-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 24px; font-weight: 900; color: #ffd86a; }
.ev-time { font-size: 20px; color: #fff; }
.ev-sub { font-size: 16px; color: #e8d6a8; }
.ev-row { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 16px; color: #f0e6cc; }
.ev-row b { color: #ffe06a; }
.ev-announce { background: linear-gradient(90deg, rgba(140, 40, 20, .9), rgba(200, 120, 20, .9)); border: 2px solid #ffd86a; border-radius: 30px; padding: 8px 28px; font-size: 28px; font-weight: 900; color: #fff6c8; text-shadow: 0 2px 0 #5a2a00; animation: pop .7s infinite alternate; white-space: nowrap; }
.hp { position: relative; height: 26px; background: #3a1010; border: 2px solid #000; border-radius: 6px; overflow: hidden; }
.hp i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 1) * 100%); background: linear-gradient(#ff7a5a, #b8201a); transition: width .8s; }
.hp.enraged i { background: linear-gradient(#ff3a3a, #7a0010); animation: shine 1s infinite; }
.hp span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: 1; white-space: nowrap; font-size: 16px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px #000; }
.ev-cast { position: relative; height: 22px; background: rgba(120, 20, 10, .6); border: 1px solid #ff5a3a; border-radius: 6px; overflow: hidden; animation: nudge .5s infinite alternate; }
.ev-cast i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, rgba(255, 90, 58, .5), rgba(255, 60, 30, .9)); }
.ev-cast span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 900; color: #ffd8c8; text-shadow: 0 1px 2px #000; }
.layers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.layer { background: rgba(255, 255, 255, .08); border-radius: 6px; padding: 4px; text-align: center; font-size: 14px; }
.layer b { display: block; font-size: 22px; color: #ffe06a; }
.groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.group { background: rgba(255, 255, 255, .08); border-radius: 6px; padding: 4px 8px; font-size: 14px; }
.group .g-name { font-weight: 900; color: #ffd86a; font-size: 16px; }
.group .champ { color: #ffe06a; font-weight: 900; }
.lot { display: flex; justify-content: space-between; align-items: center; font-size: 20px; }
.lot .price { font-size: 26px; font-weight: 900; color: #ffe06a; }
.lot .call { color: #ff9a6a; font-weight: 900; font-size: 24px; animation: pop .4s infinite alternate; }
.next-event { color: #ffd86a; font-weight: 800; }
.vote { color: #9fe8ff; font-size: 14px; }
#result-card { position: absolute; left: calc((100% - 440px) / 2); top: 190px; translate: -50% 0; width: min(900px, calc(100% - 520px)); z-index: 6; background: radial-gradient(rgba(60, 40, 16, .96), rgba(20, 14, 8, .96)); border: 3px solid #ffd86a; border-radius: 18px; padding: 18px 28px; box-shadow: 0 0 40px rgba(255, 200, 60, .5); animation: zoomin .5s ease-out; }
.rc-title { text-align: center; font-size: 44px; font-weight: 900; color: #ffe9a8; text-shadow: 0 0 14px #ff9a2a; }
.rc-sub { text-align: center; color: #e8c880; font-size: 18px; margin-bottom: 10px; }
.rc-row { display: flex; align-items: center; gap: 12px; font-size: 22px; padding: 4px 8px; border-radius: 8px; }
.rc-row:first-of-type { background: linear-gradient(90deg, rgba(255, 200, 60, .4), transparent); }
.rc-rank { width: 40px; text-align: center; font-weight: 900; color: #ffd86a; font-size: 26px; }
.rc-name { flex: 1; font-weight: 900; }
.rc-text { color: #ffe06a; }
.rc-lines { margin-top: 10px; font-size: 17px; color: #f0e6cc; display: grid; gap: 4px; }
.rc-foot { text-align: right; color: #b8a27a; font-size: 14px; margin-top: 6px; }
#transition { position: absolute; left: 0; top: 0; right: 440px; bottom: 60px; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #0a0806; pointer-events: none; }
#transition[hidden], #result-card[hidden] { display: none; }
#transition.play { animation: dissolve 2.6s ease-in forwards; }
.tr-title { font-size: 80px; font-weight: 900; color: #ffe9a8; letter-spacing: 16px; text-shadow: 0 0 30px #ff9a2a; }
.tr-sub { font-size: 30px; color: #e8c880; margin-top: 8px; }
@keyframes dissolve { 0%, 45% { opacity: 1; } 100% { opacity: 0; } }

@keyframes slidein { from { transform: translateX(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideout { to { transform: translateX(60px); opacity: 0; } }
@keyframes pop { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes nudge { from { transform: scale(1); } to { transform: scale(1.02); } }
@keyframes flow { to { background-position: 200% 0; } }
@keyframes zoomin { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes shine { 50% { box-shadow: 0 0 16px rgba(255, 210, 80, .8); } }
@keyframes spin { to { filter: hue-rotate(360deg); } }

/* Narrow windows (laptop preview): drop the HUD rail and give the stage the full width. */
@media (max-width: 1240px) {
  #side { display: none; }
  #sky-hud { right: 16px; }
  #sound-ctl { right: 22px; }
  body:not([data-scene="town"]) #sound-ctl { right: 52px; }
  #skip-scene { right: 16px; }
  #viewport, #bottom-bar, #transition, #fullscreen-fx { right: 0; }
  #event-top { left: 50%; width: min(860px, calc(100% - 80px)); }
  #event-panel { right: 16px; }
  #result-card { left: 50%; width: min(900px, calc(100% - 80px)); }
}
@media (max-width: 960px) {
  #event-panel { left: 16px; bottom: auto; top: 130px; }
}
.votes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.vote-col { position: relative; display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .06); border-radius: 6px; padding: 2px 8px; overflow: hidden; }
.vote-col b { font-size: 20px; z-index: 1; }
.vote-col span { margin-left: auto; font-weight: 900; color: #fff3d0; z-index: 1; }
.vote-col i { position: absolute; left: 0; bottom: 0; height: 4px; width: calc(var(--p, 0) * 100%); transition: width .5s; }
.stats .queue { color: #ffcf6a; font-weight: 900; }
.hp.shield { height: 22px; background: #2a2410; }
.hp.shield span { font-size: 13px; }
.hp.shield i { background: linear-gradient(#ffe8a0, #d8a83a); }
.weather-hint { color: #b8e0c8; font-size: 13px; }
.sect-hint { color: #e8d6a8; font-size: 13px; }
.sect-hint b { margin: 0 2px; }
.likes.chest .bar::after { background: linear-gradient(90deg, #e3a43a, #ffe08a); }

/* Live activity ranking in the side rail. */
#board.live { padding: 8px 10px; }
.live-sub { color: #ffcf8a; font-weight: 900; font-size: 15px; margin: 6px 0 3px; border-left: 4px solid #ff9a3a; padding-left: 6px; }
.live-list { display: flex; flex-direction: column; gap: 3px; }
.live-row { position: relative; display: flex; align-items: center; gap: 8px; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, .05); font-size: 15px; overflow: hidden; }
.live-row.r1 { background: rgba(255, 200, 60, .22); border: 1px solid #ffd86a; font-size: 17px; }
.live-row.r2 { background: rgba(220, 220, 240, .16); }
.live-row.r3 { background: rgba(220, 140, 80, .16); }
.live-row.down { opacity: .55; }
.live-no { width: 22px; text-align: center; font-weight: 900; color: #ffd86a; position: relative; z-index: 1; }
.live-name { flex: 1; min-width: 0; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 1; }
.live-val { color: #ffe9a8; font-weight: 800; white-space: nowrap; position: relative; z-index: 1; }
.live-bar { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, rgba(255, 120, 60, .35), rgba(255, 180, 60, .08)); transition: width .8s; }
.live-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.live-pair .live-row { font-size: 13px; padding: 2px 6px; }
.live-foot { margin-top: 6px; text-align: center; color: #9fe8ff; font-weight: 800; font-size: 15px; }
.hp .ticks { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--n, 5) - 2px), rgba(0,0,0,.6) calc(100% / var(--n, 5) - 2px) calc(100% / var(--n, 5))); }

/* Sound switches and volume sliders, folded behind the ♪ button. */
/* The ♪ button sits in the top-right corner of the weather panel; its sliders drop down below it. */
#sound-ctl { position: absolute; right: 450px; top: 6px; z-index: 20; font-size: 14px; }
/* Outside town the ♪ moves left to make room for 「跳过场景」 on its right. */
body:not([data-scene="town"]) #sound-ctl { right: 486px; }
/* Round like the ♪ button, icon only. */
#skip-scene { position: absolute; right: 450px; top: 6px; z-index: 20; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid #b8913a; background: rgba(20, 14, 8, .8); color: #ffd86a; font-size: 13px; line-height: 1; font-weight: 900; cursor: pointer; display: grid; place-items: center; }
#skip-scene:hover { background: #5a3a12; }
#skip-scene:disabled { opacity: .5; cursor: default; }
body[data-scene="town"] #skip-scene, body:not([data-scene]) #skip-scene { display: none; }
#sound-ctl .sc-panel { position: absolute; right: 0; top: 34px; width: max-content; white-space: nowrap; }
#sound-ctl .sc-toggle { width: 28px; height: 28px; font-size: 15px !important; border-radius: 50%; border: 2px solid #b8913a; background: rgba(20, 14, 8, .8); color: #ffd86a; font-size: 18px; font-weight: 900; cursor: pointer; }
#sound-ctl .sc-panel { display: grid; grid-template-columns: auto 140px; gap: 6px 10px; align-items: center; background: rgba(20, 14, 8, .9); border: 2px solid #b8913a; border-radius: 10px; padding: 8px 12px; color: #f0e6cc; }
#sound-ctl .sc-panel[hidden] { display: none; }
#sound-ctl input[type=range] { accent-color: #ffd86a; }
.ev-sub.fallen { color: #ffb0a0; font-size: 14px; }
/* In town the activity banner clears the top strip. */

/* Second thin town strip under the top bar: market and the merit stele. */
#sky-sub { position: absolute; top: 40px; left: 0; right: 440px; height: 24px; z-index: 4; pointer-events: none; background: rgba(14, 10, 6, .5); padding: 0 14px; display: flex; align-items: center; gap: 24px; font-size: 12px; color: #e8d6a8; white-space: nowrap; overflow: hidden; }
#sky-sub[hidden], body:not([data-scene="town"]) #sky-sub { display: none; }
#sky-sub .market { color: #ffe0a0; }
#sky-sub .merit { color: #ffd86a; }
body[data-scene="town"] #event-top { top: 50px; }
/* 极品现世: a golden card that pops in over the middle of the stage. */
#rare-card { position: absolute; left: calc((100% - 440px) / 2); top: 120px; translate: -50% 0; z-index: 9; pointer-events: none; width: 380px; padding: 16px 20px 18px; text-align: center; border-radius: 16px; border: 3px solid #ffd86a; background: radial-gradient(circle at 50% 30%, rgba(120, 80, 10, .95), rgba(30, 18, 6, .95)); box-shadow: 0 0 40px 10px rgba(255, 200, 60, .6); animation: rarein .6s ease-out, rareglow 1s ease-in-out infinite alternate; overflow: hidden; }
#rare-card[hidden] { display: none; }
#rare-card.divine { border-color: #fff3c0; box-shadow: 0 0 60px 18px rgba(255, 230, 140, .8); }
#rare-card .rare-rays { position: absolute; inset: -50%; background: repeating-conic-gradient(rgba(255, 220, 120, .18) 0 10deg, transparent 10deg 20deg); animation: spinrays 6s linear infinite; }
#rare-card > :not(.rare-rays) { position: relative; }
#rare-card .rare-title { font-size: 34px; font-weight: 900; letter-spacing: 8px; color: #fff3b0; text-shadow: 0 0 14px #ff9a2a, 0 2px 0 #6a2a00; }
#rare-card .rare-icon { width: 129px; height: 144px; margin: 6px auto; background: center / 100% 100% no-repeat; image-rendering: pixelated; filter: drop-shadow(0 0 12px #ffd86a); animation: pop .8s infinite alternate; }
#rare-card .rare-item { font-size: 24px; font-weight: 900; color: #ffe06a; text-shadow: 0 0 10px #ff9a2a; }
#rare-card .rare-who { font-size: 16px; color: #fff6dc; margin-top: 4px; }
#pk-window { position: absolute; right: 456px; top: 92px; z-index: 8; width: 440px; color: #fff3dc; font-size: 15px; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55)); }
#pk-window[hidden], body:not([data-scene="town"]) #pk-window { display: none; }
#pk-window .pk-title { padding: 6px 0 4px; text-align: center; font-size: 19px; font-weight: 900; color: #ffd86a; letter-spacing: 6px; text-shadow: 0 0 8px #ff7a2a, 0 2px 0 #4a1400; background: linear-gradient(180deg, #5a1a0e, #2a1008); border: 2px solid #d8a040; border-bottom: 0; border-radius: 12px 12px 0 0; }
#pk-window .pk-head { display: grid; grid-template-columns: 1fr 66px 1fr; align-items: center; gap: 6px; padding: 6px 10px 8px; background: rgba(24, 14, 8, .94); border-left: 2px solid #d8a040; border-right: 2px solid #d8a040; }
#pk-window .pk-head:empty { display: none; }
#pk-window .pk-side .pk-top { display: flex; align-items: center; gap: 6px; }
#pk-window .pk-side.b .pk-top { flex-direction: row-reverse; text-align: right; }
#pk-window .pk-av { width: 38px; height: 38px; font-size: 19px; flex: none; border: 2px solid #d8a040; }
#pk-window .pk-info { min-width: 0; }
#pk-window .pk-name { font-weight: 900; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pk-window .pk-realm { font-size: 12px; color: #c8b89a; }
#pk-window .pk-wanted { display: inline-block; padding: 0 5px; border-radius: 4px; background: #a02020; color: #fff; font-size: 11px; font-weight: 800; }
#pk-window .pk-bar { position: relative; height: 15px; margin-top: 4px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }
#pk-window .pk-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ff3a2a, #ffa05a); transition: width .5s ease-out .35s; }
#pk-window .pk-side.b .pk-bar i { inset: 0 0 0 auto; }
#pk-window .pk-bar.mp { height: 6px; }
#pk-window.waiting { width: 300px; }
#pk-window .pk-vsline { font-size: 16px; font-weight: 900; color: #fff3dc; text-align: center; }
#pk-window .pk-betcall { color: #ffd86a; font-weight: 800; text-align: center; }
#pk-window.waiting .pk-wait { text-align: center; }
#pk-window .pk-bar.mp i { background: linear-gradient(90deg, #3a7aff, #7ac0ff); }
#pk-window .pk-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; font-weight: 800; text-shadow: 0 1px 1px #000; }
#pk-window .pk-bar.mp span { display: none; }
#pk-window .pk-mid { text-align: center; font-weight: 900; color: #ffd86a; font-size: 13px; white-space: nowrap; }
/* The duel stage is drawn by the stage canvas underneath this transparent hole. */
#pk-window .pk-arena { height: 200px; border-left: 2px solid #d8a040; border-right: 2px solid #d8a040; box-shadow: inset 0 0 18px rgba(0, 0, 0, .6); }
#pk-window .pk-arena[hidden] { display: none; }
#pk-window .pk-foot { padding: 6px 10px 8px; background: rgba(24, 14, 8, .94); border: 2px solid #d8a040; border-top: 1px solid rgba(216, 160, 64, .5); border-radius: 0 0 12px 12px; }
#pk-window .pk-foot[hidden] { display: none; }
#pk-window .pk-arena[hidden] + .pk-foot, #pk-window .pk-head:empty + .pk-arena[hidden] + .pk-foot { border-top: 2px solid #d8a040; }
#pk-window .pk-line { font-size: 13px; line-height: 1.45; color: #e8dcc4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pk-window .pk-line:last-child { color: #fff; font-weight: 800; }
#pk-window .pk-line.spell { color: #9ad0ff; }
#pk-window .pk-line.pill { color: #8affc0; }
#pk-window .pk-line.art, #pk-window .pk-line.array { color: #ffd86a; }
#pk-window .pk-line.crit { color: #ffb04a; }
#pk-window .pk-result .pk-line { white-space: normal; color: #ffe8a0; }
#pk-window .pk-pot { margin-top: 4px; font-size: 13px; color: #ffd86a; text-align: center; }
#pk-window .pk-wait { margin-top: 4px; font-size: 13px; color: #c8b89a; }
@keyframes rarein { from { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.08); } to { transform: none; opacity: 1; } }
@keyframes rareglow { to { box-shadow: 0 0 70px 20px rgba(255, 210, 80, .85); } }
@keyframes spinrays { to { transform: rotate(360deg); } }
#result-card .rc-bets { margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(255, 216, 106, .5); display: grid; grid-template-columns: 1fr 1fr; gap: 3px 16px; font-size: 16px; }
#result-card .rc-bets-title { grid-column: 1 / -1; color: #ffd86a; font-weight: 900; font-size: 18px; }
#result-card .rc-bet { color: #c8b89a; }
#result-card .rc-bet.win { color: #8affc0; font-weight: 800; }
/* 境界榜: the big realm as a coloured badge. */
.realm-badge { display: inline-block; padding: 0 6px; margin-right: 2px; border-radius: 4px; font-weight: 900; font-size: .95em; color: #fff; background: hsl(var(--realm-hue) 60% 38%); box-shadow: inset 0 0 0 1px hsl(var(--realm-hue) 70% 62%); text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
/* 装备与背包: under the viewer card (which moves up while it shows). */
#focus-card.with-kit { bottom: 152px; }
#kit-card { position: absolute; left: 0; right: 440px; bottom: 60px; height: 92px; z-index: 5; pointer-events: none; display: grid; grid-template-columns: 22px auto 22px minmax(0, 1fr) 22px auto; align-items: center; column-gap: 8px; padding: 6px 14px;
  background: linear-gradient(rgba(26, 18, 10, .9), rgba(16, 11, 6, .95)); border-top: 1px solid rgba(184, 145, 58, .55); }
#kit-card[hidden], body:not([data-scene="town"]) #kit-card { display: none; }
#kit-card .kit-title { writing-mode: vertical-rl; letter-spacing: 6px; font-size: 14px; font-weight: 900; color: #ffd86a; text-shadow: 0 0 6px rgba(255, 160, 40, .6); text-align: center; }
#kit-card .kit-gear, #kit-card .kit-bag { display: flex; gap: 6px; align-items: stretch; height: 80px; min-width: 0; overflow: hidden; }
#kit-card .kit-slot, #kit-card .kit-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 84px; flex: none; padding: 3px 4px 2px; border-radius: 8px;
  background: radial-gradient(circle at 50% 38%, rgba(255, 220, 140, .14), rgba(0, 0, 0, .25) 70%); border: 1px solid rgba(255, 220, 140, .18); }
#kit-card .kit-icon { flex: none; background-repeat: no-repeat; image-rendering: pixelated; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
#kit-card .kit-slot .kit-icon { margin-top: 1px; }
#kit-card .kit-label { font-size: 11px; color: #b8a27a; line-height: 13px; }
#kit-card .kit-name { margin-top: auto; max-width: 100%; font-size: 12px; line-height: 15px; color: #f1e6d0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kit-card .kit-count { font-size: 12px; line-height: 13px; font-weight: 800; color: #ffd86a; }
#kit-card .kit-item .kit-icon { margin-top: 2px; }
#kit-card .kit-plus { position: absolute; top: 2px; right: 4px; font-size: 11px; font-weight: 900; color: #fff; padding: 0 4px; border-radius: 6px; background: linear-gradient(#ff8a3a, #c0461a); }
#kit-card .kit-more { align-self: center; padding: 0 10px; font-size: 16px; font-weight: 900; color: #c8b89a; }
#kit-card .qx { opacity: .55; border-style: dashed; }
#kit-card .qx .kit-name { color: #8a7a62; }
/* Quality: 凡 grey, 灵 green, 宝 blue-violet, 仙 gold, 神 red-gold. */
#kit-card .q0 .kit-name { color: #d8d0c0; }
#kit-card .q1 { border-color: rgba(106, 208, 138, .55); } #kit-card .q1 .kit-name { color: #8ae8a4; }
#kit-card .q2 { border-color: rgba(160, 130, 255, .6); box-shadow: inset 0 0 10px rgba(160, 130, 255, .25); } #kit-card .q2 .kit-name { color: #c0a8ff; }
#kit-card .q3 { border-color: rgba(255, 200, 74, .8); box-shadow: inset 0 0 12px rgba(255, 200, 74, .3), 0 0 8px rgba(255, 200, 74, .35); } #kit-card .q3 .kit-name { color: #ffd86a; }
#kit-card .q4 { border-color: rgba(255, 120, 60, .9); box-shadow: inset 0 0 14px rgba(255, 120, 60, .35), 0 0 10px rgba(255, 140, 60, .5); } #kit-card .q4 .kit-name { color: #ffa060; }
.rank-icon { flex: none; background-repeat: no-repeat; image-rendering: pixelated; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); margin-right: 4px; }
/* 坊市 column down the left of the town, between the top strip and the viewer card; reuses the kit cells. */
  background: radial-gradient(circle at 50% 30%, rgba(255, 220, 140, .14), rgba(0, 0, 0, .25) 70%); border: 1px solid rgba(255, 220, 140, .2); }
/* Town layout: the map keeps to the box left of the 坊市 rail, under the top strip and above the viewer card,
   so no panel covers it; the PK window sits at the map's lower right. */
body[data-scene="town"] #viewport { top: 40px; right: 440px; bottom: 234px; }
body[data-scene="town"] #pk-window { right: 448px; top: 48px; bottom: auto; }
body[data-scene="town"] #focus-card, body[data-scene="town"] #kit-card { right: 440px; }
body[data-scene="town"] #focus-card { bottom: 152px; }
/* Enhancement glow on the 装备 cells from +7: pale orange, warming and brightening up to +15. */
#kit-card .kit-slot.e7 { border-color: rgba(255,200,150,0.60); box-shadow: 0 0 5px rgba(255,200,150,0.41), inset 0 0 7px rgba(255,200,150,0.29); }
#kit-card .kit-slot.e8 { border-color: rgba(255,190,130,0.65); box-shadow: 0 0 6px rgba(255,190,130,0.46), inset 0 0 8px rgba(255,190,130,0.34); }
#kit-card .kit-slot.e9 { border-color: rgba(255,178,110,0.70); box-shadow: 0 0 7px rgba(255,178,110,0.52), inset 0 0 9px rgba(255,178,110,0.38); }
#kit-card .kit-slot.e10 { border-color: rgba(255,165,90,0.75); box-shadow: 0 0 8px rgba(255,165,90,0.57), inset 0 0 10px rgba(255,165,90,0.43); }
#kit-card .kit-slot.e11 { border-color: rgba(255,152,70,0.80); box-shadow: 0 0 10px rgba(255,152,70,0.63), inset 0 0 12px rgba(255,152,70,0.47); }
#kit-card .kit-slot.e12 { border-color: rgba(255,140,50,0.85); box-shadow: 0 0 11px rgba(255,140,50,0.68), inset 0 0 13px rgba(255,140,50,0.52); }
#kit-card .kit-slot.e13 { border-color: rgba(255,150,30,0.90); box-shadow: 0 0 12px rgba(255,150,30,0.74), inset 0 0 14px rgba(255,150,30,0.56); }
#kit-card .kit-slot.e14 { border-color: rgba(255,165,20,0.95); box-shadow: 0 0 13px rgba(255,165,20,0.79), inset 0 0 15px rgba(255,165,20,0.61); }
#kit-card .kit-slot.e15 { border-color: rgba(255,185,10,1.00); box-shadow: 0 0 14px rgba(255,185,10,0.85), inset 0 0 16px rgba(255,185,10,0.65); }
#kit-card .kit-slot.glow { animation: kitglow 1.6s ease-in-out infinite alternate; }
@keyframes kitglow { from { filter: brightness(1); } to { filter: brightness(1.18); } }
#kit-card .kit-slot.glow .kit-plus { background: linear-gradient(#ffd27a, #ff7a1a); box-shadow: 0 0 6px #ffb040; }
/* Town bottom bar: commands on the left half, the 坊市 strip on the right half; the counts live in the top strip. */
.bb-shop { display: none; }
body[data-scene="town"] #bottom-bar .stats { display: none; }
body[data-scene="town"] #bottom-bar .cmds { flex: 0 0 calc(50% - 16px); margin-right: 8px; }
body[data-scene="town"] .bb-shop { display: flex; flex: 1; min-width: 0; height: 100%; align-items: center; gap: 8px; border-left: 1px solid rgba(184, 145, 58, .5); padding-left: 10px; }
.bb-shop .shop-label { flex: none; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.bb-shop .shop-label b { color: #ffd86a; font-size: 17px; letter-spacing: 4px; }
.bb-shop .shop-label span { color: #b8a27a; font-size: 11px; }
.bb-shop .shop-window { flex: 1; min-width: 0; overflow: hidden; }
.bb-shop .shop-window.scrolling { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); }
.bb-shop .shop-list { display: inline-flex; gap: 6px; white-space: nowrap; will-change: transform; }
.bb-shop .shop-cell { flex: none; display: flex; align-items: center; gap: 4px; height: 46px; padding: 2px 8px 2px 4px; border-radius: 8px; background: radial-gradient(circle at 25% 50%, rgba(255, 220, 140, .14), rgba(0, 0, 0, .25) 70%); border: 1px solid rgba(255, 220, 140, .22); }
.bb-shop .kit-icon { flex: none; background-repeat: no-repeat; image-rendering: pixelated; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.bb-shop .shop-info { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.bb-shop .kit-name { font-size: 13px; line-height: 15px; color: #f1e6d0; }
.bb-shop .shop-price { padding: 0 6px; border-radius: 8px; font-size: 12px; line-height: 15px; font-weight: 800; color: #3a2000; background: linear-gradient(#ffe07a, #e0a83a); }
.bb-shop .shop-empty { color: #8a7a62; font-size: 13px; }
.bb-shop .q1 { border-color: rgba(106, 208, 138, .55); } .bb-shop .q1 .kit-name { color: #8ae8a4; }
.bb-shop .q2 { border-color: rgba(160, 130, 255, .6); } .bb-shop .q2 .kit-name { color: #c0a8ff; }
.bb-shop .q3 { border-color: rgba(255, 200, 74, .8); } .bb-shop .q3 .kit-name { color: #ffd86a; }
.bb-shop .q4 { border-color: rgba(255, 120, 60, .9); } .bb-shop .q4 .kit-name { color: #ffa060; }
#sky-hud .sky-stats { flex: none; margin-left: auto; display: flex; gap: 12px; color: #f0e6cc; font-weight: 800; }
#sky-hud .sky-stats + .sky-list { margin-left: 0; }
/* The town's top strip is full (counts + 活动预告), so the weather hint gives way there. */
body[data-scene="town"] #sky-hud .sky-hint { display: none; }
#sky-hud .buff:empty { width: 0; margin-right: -18px; }
/* Viewer card: one line of combat numbers; mount and pet pictures right of the bag. */
#focus-card .focus-lines .stats-row { grid-column: 1 / -1; display: flex; gap: 14px; }
#focus-card .stats-row .st { display: inline-flex; gap: 4px; align-items: baseline; }
#focus-card .stats-row .st i { font-style: normal; color: #b8a27a; font-size: 12px; }
#focus-card .stats-row .st b { font-weight: 800; color: #f1e6d0; }
#focus-card .stats-row .s-hp b { color: #ff8a7a; } #focus-card .stats-row .s-mp b { color: #8ac8ff; } #focus-card .stats-row .s-atk b { color: #ffc86a; } #focus-card .stats-row .s-def b { color: #9ae8b0; }
#kit-card .mount-pic, #kit-card .pet-pic { margin-top: 2px; image-rendering: pixelated; background-repeat: no-repeat; }
/* Activity scenes: the online / new / total counts are a town thing (shown in its top strip). */
body:not([data-scene="town"]) #bottom-bar .stats > span:not(.queue) { display: none; }

/* English edition (stage-lang.mjs sets data-lang): Latin text is about twice as wide as Chinese, so titles lose
   their wide letter-spacing, long lines get a size smaller, and one-line slots end in an ellipsis instead of wrapping. */
body[data-lang="en"] [class*="title"] { letter-spacing: 1px !important; }
body[data-lang="en"] #kit-card .kit-title { text-orientation: mixed; font-size: 12px; white-space: nowrap; }
body[data-lang="en"] .board-title { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-lang="en"] .tab { font-size: 11px; padding: 2px 4px; }
body[data-lang="en"] .rank-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-lang="en"] .r4 .rank-name { max-width: 150px; }
body[data-lang="en"] .rank-row.r4 .rank-info { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-lang="en"] #kit-card .kit-label { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-lang="en"] #kit-card .kit-plus { top: auto; bottom: 17px; right: 3px; font-size: 10px; }
body[data-lang="en"] #sky-hud .sky-stats { gap: 10px; font-size: 12px; }
body[data-lang="en"] .rank-no, body[data-lang="en"] .rc-rank { letter-spacing: 0; }
body[data-lang="en"] .notice { font-size: 13.5px; line-height: 1.3; }
body[data-lang="en"] #chase { font-size: 14px; }
body[data-lang="en"] .host-line { font-size: 13px; line-height: 1.3; -webkit-line-clamp: 5; }
body[data-lang="en"] .bb-shop .kit-name { font-size: 11px; }
/* Bottom card, English: item names may take two short lines instead of being cut after a few letters. */
body[data-lang="en"] #kit-card .kit-name { font-size: 10.5px; line-height: 11px; white-space: normal; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
body[data-lang="en"] #kit-card .kit-slot .kit-icon { transform: scale(.85); margin: -3px 0 -4px; }
body[data-lang="en"] #kit-card .kit-item .kit-icon { transform: scale(.9); margin: -1px 0 -2px; }
body[data-lang="en"] #kit-card .kit-count { font-size: 11px; line-height: 12px; }
body[data-lang="en"] #focus-card { font-size: 12px; }
body[data-lang="en"] #focus-card .focus-head { font-size: 12px; line-height: 1.3; }
body[data-lang="en"] #focus-card .focus-head > div { min-width: 0; }
body[data-lang="en"] .focus-reason { font-size: 11px; line-height: 13px; max-width: 92px; white-space: normal; text-align: center; flex: none; }
body[data-lang="en"] .focus-name { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-lang="en"] .focus-level { font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body[data-lang="en"] .live-row { font-size: 13.5px; }
body[data-lang="en"] .live-row.r1 { font-size: 15px; }
body[data-lang="en"] .cmd-tip { font-size: 13px; }
/* The black scene-change curtain: long English titles wrap in two lines instead of running off the screen. */
body[data-lang="en"] .tr-title { font-size: 54px; max-width: 88%; text-align: center; line-height: 1.15; }
body[data-lang="en"] .tr-sub { font-size: 24px; max-width: 80%; text-align: center; }