:root {
--ink: #050a18; --panel: rgba(8, 18, 44, 0.94); --panel2: rgba(16, 34, 74, 0.95); --line: #2f78c0; --line2: #5ac8ff;
--text: #e8f4ff; --dim: #8aa4c8; --gold: #ffd84a; --red: #ff5a5a; --green: #7ae06a;
--font: "Trebuchet MS", "Verdana", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "PingFang TC", "PingFang HK", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0a1438; color: var(--text); font-family: var(--font); }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
.hidden { display: none !important; }
.ic { width: 24px; height: 24px; image-rendering: pixelated; vertical-align: middle; flex: none; }
.ic.tiny { width: 16px; height: 16px; }
.ic.big { width: 48px; height: 48px; }
.ic.dim { opacity: 0.35; }
.ic.flip { transform: scaleX(-1); }
button { font-family: var(--font); color: var(--text); cursor: pointer; touch-action: manipulation; border-radius: 0; }
img { -webkit-user-drag: none; user-select: none; }
#ui { touch-action: manipulation; }
input { font-family: var(--font); }

body.hant { --font: "Trebuchet MS", "Verdana", "PingFang TC", "PingFang HK", "Microsoft JhengHei", "Noto Sans TC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
.langpick { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: rgba(2, 6, 20, 0.86); pointer-events: auto; }
.langcard { width: min(640px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 12px; text-align: center; background: var(--panel); border: 3px solid var(--line2); box-shadow: 0 4px 0 var(--ink); }
.langcard h2 { margin: 0; font-size: 20px; }
.langbtns { display: flex; gap: 10px; }
.langcard .langbtn { flex: 1 1 0; min-width: 0; min-height: 64px; justify-content: center; font-size: 22px; text-transform: none; letter-spacing: 0; }
.langcard .langbtn.on { border-color: var(--gold); background: #3a3414; color: #ffe9a8; }
.langnote { margin: 0; font-size: 12px; line-height: 1.35; color: var(--dim); }
.langrow { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 520px) { .langbtns { flex-direction: column; } .langcard .langbtn { min-height: 56px; } }
@media (max-height: 340px) { .langcard { gap: 8px; padding: 8px 12px 8px; } .langcard h2 { font-size: 16px; } .langcard .langbtn { min-height: 54px; font-size: 20px; } .langnote { font-size: 11px; } }
h2, h3 { margin: 0.4em 0; letter-spacing: 0.04em; }
body.zh h2, body.zh h3, body.zh .btn, body.zh .tab, body.zh .codein, body.zh .phead h2, body.zh #title h3 { letter-spacing: 0 !important; text-transform: none !important; }
@media (hover: hover) {
.btn:hover { border-color: var(--line2); background: #1c3e80; }
.btn.primary:hover { background: #2a82cc; }
.tab:hover, .item:hover, .slot:hover, .card:hover { border-color: var(--line2); }
.hbtn:hover, .tbtn:hover { border-color: var(--line2); }
}

.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; background: var(--panel2); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--ink), inset 0 -3px 0 rgba(0,0,0,0.3); font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; color: var(--text); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn[disabled] { opacity: 0.45; cursor: default; }
.btn.primary { background: #1a6ab0; border-color: #8fe4ff; }
.btn.danger { border-color: #c04a5a; background: #3a1428; }
.btn.small { min-height: 44px; min-width: 52px; justify-content: center; padding: 4px 10px; font-size: 13px; }
.btn span { display: flex; flex-direction: column; align-items: flex-start; }
.btn small { font-size: 12px; color: var(--dim); text-transform: none; letter-spacing: 0; }
.btn.dim { opacity: 0.55; }
.btn.tog.on { background: #1a6ab0; border-color: #8fe4ff; }


#title { position: fixed; inset: 0; overflow-y: auto; display: flex; justify-content: center; align-items: flex-start; padding: 12px; background: linear-gradient(90deg, rgba(5,10,24,0.55), rgba(5,10,24,0.1) 50%, rgba(5,10,24,0.55)); }
.titlebox { width: min(760px, 100%); text-align: center; margin: auto; padding: 8px 0 18px; }
.logo-wrap { display: inline-flex; align-items: flex-start; gap: 6px; }
#logo { width: 344px; max-width: 60vw; height: auto; image-rendering: pixelated; }
.beta { background: var(--gold); color: #2a1a00; font-weight: 800; font-size: 14px; padding: 2px 8px; border: 2px solid #8a5a0c; box-shadow: 0 3px 0 var(--ink); transform: rotate(6deg); margin-top: 6px; }
.tagline { margin: 4px 0 2px; font-size: 18px; color: #bfeeff; text-shadow: 2px 2px 0 var(--ink); }
.subnote { margin: 0 auto 6px; max-width: 560px; font-size: 13px; color: var(--gold); text-shadow: 1px 1px 0 var(--ink); }
#title h3 { font-size: 14px; color: var(--dim); text-transform: uppercase; text-shadow: 1px 1px 0 var(--ink); }
.cards { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.card { width: 230px; padding: 8px; background: var(--panel); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--ink); text-align: left; display: flex; flex-direction: column; gap: 2px; }
.card.sel { border-color: var(--gold); background: #142a5a; box-shadow: 0 3px 0 var(--ink), 0 0 0 2px var(--gold); }
.card .portrait { height: 52px; width: auto; max-width: 100%; image-rendering: pixelated; align-self: center; object-fit: contain; }
.card b { font-size: 17px; }
.card small { color: var(--gold); font-size: 12px; }
.card .desc { margin: 2px 0; font-size: 12px; color: var(--dim); line-height: 1.35; }
.card .abil { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; }
.card .abil span { display: inline-flex; align-items: center; gap: 4px; }
.card .abil .ic { width: 16px; height: 16px; }
.cards.mini .card { width: 120px; align-items: center; text-align: center; }
.cards.mini .portrait { height: 32px; }
.namerow { margin: 10px 0 4px; display: flex; justify-content: center; gap: 8px; align-items: center; }
#name, .codein { height: 44px; width: 220px; padding: 0 10px; font-size: 16px; color: var(--text); background: var(--ink); border: 2px solid var(--line); outline: none; user-select: text; -webkit-user-select: text; }
#name:focus, .codein:focus { border-color: var(--line2); }
.partybadge { padding: 6px 10px; border: 2px solid #7ff0ff; color: #7ff0ff; background: var(--panel); font-weight: 700; }

button.partybadge { font: inherit; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; }
.joinchip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 2px 2px 10px; border: 2px solid var(--gold); color: #ffe9a8; background: var(--panel); font-weight: 700; box-shadow: 0 0 10px rgba(255,216,74,0.35); }
.joinchip .joinx { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; }
body.touch .joinchip .joinx { width: 40px; height: 40px; }
.startrow { display: flex; flex-direction: column; align-items: center; }
.playrow { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }
.playrow .btn { min-width: 200px; }
.playrow .btn b { font-size: 17px; }
.netline { font-size: 12px; color: var(--dim); margin: 2px 0 8px; text-shadow: 1px 1px 0 var(--ink); }
.netline.up, .netline.on { color: var(--green); }
.netline.down { color: #ffb070; }

.oceanrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 0 0 8px; }
.oceanrow.hidden { display: none; }
.oceanrow .oclabel { font-size: 12px; color: var(--dim); text-shadow: 1px 1px 0 var(--ink); }
.oceanrow .ocbtn { font: inherit; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px; border: 2px solid #2a3a5a; background: var(--panel); color: var(--text); cursor: pointer; white-space: nowrap; }
.oceanrow .ocbtn.on { border-color: #7ff0ff; color: #7ff0ff; box-shadow: 0 0 8px rgba(127,240,255,0.35); }
.oceanrow .ocbtn:disabled { opacity: 0.5; cursor: default; }
.oceanrow .ocbtn small { font-size: 11px; color: var(--gold); }
body.touch .oceanrow .ocbtn { min-height: 44px; }

.oeline { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; color: var(--dim); margin: 0 0 8px; text-shadow: 1px 1px 0 var(--ink); }
.oeline.on { color: #ffd84a; }
.oeline.blood { color: #ff6a6a; }
.evline.oeline { justify-content: flex-start; margin: 0; }
.menurow { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }


#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#hud .tl { position: absolute; left: 10px; top: 8px; width: min(300px, 40vw); pointer-events: none; }
.statrow { display: flex; gap: 6px; align-items: flex-start; }
.lv { min-width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: var(--panel); border: 2px solid var(--gold); color: var(--gold); font-size: 14px; box-shadow: 0 2px 0 var(--ink); text-align: center; line-height: 1; padding: 0 3px; }
.bars { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.bar { position: relative; height: 16px; background: rgba(5,10,24,0.85); border: 2px solid #0a1630; overflow: hidden; display: flex; align-items: center; }
.bar .ic { position: relative; z-index: 2; margin-left: 2px; }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; transition: width 0.12s linear; }
.fill.hp { background: linear-gradient(#ff7a7a, #d83a4a); }
.fill.sh { background: rgba(160,230,255,0.7); z-index: 1; }
.fill.xp { background: linear-gradient(#ffe680, #d8a020); }
.fill.air { background: linear-gradient(#bff6ff, #4ab8e8); }
.fill.air.low { animation: blink 0.5s steps(2) infinite; }
.fill.boss { background: linear-gradient(#ff7ac0, #a02a6a); }
.xpbar { height: 8px; }
.bartext { position: relative; z-index: 2; margin-left: auto; margin-right: 4px; font-size: 12px; line-height: 1; font-weight: 700; text-shadow: 1px 1px 0 var(--ink); }
.partylist { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.pmem { display: flex; align-items: center; gap: 4px; font-size: 12px; text-shadow: 1px 1px 0 var(--ink); color: #7ff0ff; white-space: nowrap; }
.pmem .pn { min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.pmem .ps { color: var(--dim); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pmem.away { opacity: 0.55; }
.pmem .bar.mini { height: 6px; width: 48px; flex: none; border-width: 1px; }
#hud .tr { position: absolute; right: 8px; top: 8px; display: flex; gap: 6px; align-items: center; }
.ocean { font-size: 12px; color: #c8d4e8; text-shadow: 1px 1px 0 var(--ink); margin-right: 4px; padding: 0 4px; background: rgba(5,10,24,0.45); }
body.bossing:not(.touch) .ocean { visibility: hidden; }
@media (min-height: 461px) { body.bossing.touch .ocean { visibility: hidden; } }
.hbtn { min-width: 44px; height: 44px; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; background: var(--panel); border: 2px solid var(--line); box-shadow: 0 2px 0 var(--ink); font-size: 12px; }
.gaugewrap { position: absolute; right: 12px; top: 64px; min-width: 64px; display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; }
.depthtext { font-size: 15px; text-shadow: 2px 2px 0 var(--ink); }
.zonetext { white-space: nowrap; font-size: 12px; color: var(--dim); text-shadow: 1px 1px 0 var(--ink); text-align: right; margin-bottom: 4px; }
.gauge { position: relative; width: 12px; height: min(34vh, 220px); background: var(--ink); border: 2px solid #0a1630; }
.gauge .zone { position: absolute; left: 0; right: 0; }
.z-shallows { background: #2a92c8; } .z-twilight { background: linear-gradient(#1f4ca0, #0c1440); }
.gauge .me { position: absolute; left: -6px; width: 20px; height: 4px; margin-top: -2px; background: #ffffff; box-shadow: 0 0 0 1px var(--ink); }
.gauge .safe { position: absolute; left: -4px; width: 16px; height: 2px; background: var(--red); }
.gauge .best { position: absolute; right: -4px; width: 6px; height: 2px; background: var(--gold); }
.warn { position: absolute; left: 50%; top: 66%; transform: translateX(-50%); padding: 6px 14px; background: rgba(80,0,20,0.85); border: 2px solid var(--red); font-size: 15px; font-weight: 700; text-shadow: 1px 1px 0 var(--ink); animation: pulse 0.8s ease-in-out infinite; pointer-events: none; text-align: center; max-width: 80vw; }
.warn.soft { background: rgba(0,40,80,0.8); border-color: var(--line2); animation: none; }
.bossbar { position: absolute; left: var(--bbx, 50%); top: var(--bby, 6px); width: var(--bbw, 360px); box-sizing: border-box; text-align: center; pointer-events: none; background: rgba(5,8,20,0.78); border: 2px solid #3a1028; padding: 2px 8px 5px; box-shadow: 0 3px 0 var(--ink); }
.bossbar .bname { font-size: 13px; font-weight: 700; color: #ff9ad0; text-shadow: 1px 1px 0 var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.bossbar .bar { height: 12px; border-color: #5a1438; }


.bossbar.enter .fill.boss { animation: bbFill 0.6s ease-out; }
.bossbar.enter .bname { display: inline-block; animation: bbName 1.2s ease-out; transform-origin: 50% 60%; }
.bossbar.enter { animation: bbFrame 0.6s ease-out; }
@keyframes bbFill { from { width: 0; } }

@keyframes bbName { 0% { transform: scale(1.3); color: #ffffff; } 20% { transform: scale(1.22); color: #ffffff; } 100% { transform: scale(1); } }
@keyframes bbFrame { 0% { box-shadow: 0 0 0 2px rgba(255,154,208,0.9), 0 3px 0 var(--ink); } 100% { box-shadow: 0 0 0 2px rgba(255,154,208,0), 0 3px 0 var(--ink); } }
@media (prefers-reduced-motion: reduce) { .bossbar.enter, .bossbar.enter .fill.boss, .bossbar.enter .bname { animation: none; } }
.abilities { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; align-items: flex-end; }
.tbtn { position: relative; width: 56px; height: 56px; background: rgba(8,18,44,0.75); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; touch-action: none; padding: 0; }
.tbtn .ic { width: 32px; height: 32px; position: relative; z-index: 2; }
.tbtn small { font-size: 12px; line-height: 1; position: relative; z-index: 2; text-shadow: 1px 1px 0 var(--ink); }
.tbtn .cd { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(5,10,24,0.75); z-index: 1; }
.tbtn.ready { border-color: var(--line2); }
.tbtn.down { background: #2a82cc; transform: translateY(2px); }
.tbtn .autotag { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); z-index: 3; padding: 0 4px; font-size: 10px; line-height: 13px; white-space: nowrap; color: var(--gold); background: rgba(80,60,0,0.85); border: 1px solid #8a6a14; text-shadow: 1px 1px 0 var(--ink); }
.tbtn.bite.noauto .autotag { color: #ffd0d0; background: rgba(120,0,30,0.92); border-color: var(--red); }
.tbtn.bite.noauto { border-color: var(--red); }
.tbtn.bite.strike { border-color: #e8ffb0; animation: strikepulse 0.7s ease-in-out infinite alternate; }
.tbtn.bite.strike .autotag { color: #1a2a04; background: #e8ffb0; border-color: #fff; }
@keyframes strikepulse { from { box-shadow: 0 0 0 0 rgba(232,255,176,0.2); } to { box-shadow: 0 0 14px 4px rgba(232,255,176,0.75); } }
@media (prefers-reduced-motion: reduce) { .tbtn.bite.strike { animation: none; box-shadow: 0 0 10px 3px rgba(232,255,176,0.6); } }
body:not(.touch) .tbtn.bite { display: none; }
body:not(.touch) .tbtn { width: 48px; height: 48px; }
body.touch .tbtn.bite { width: 84px; height: 84px; border-radius: 0; }
body.touch .tbtn.bite .ic { width: 44px; height: 44px; }
body.touch .tbtn.ab1, body.touch .tbtn.ab2 { width: 64px; height: 64px; margin-bottom: 26px; }
body.touch .abilities { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
.stick { position: fixed; left: 0; top: 0; width: 100px; height: 100px; border: 2px solid rgba(200,240,255,0.35); background: rgba(10,30,70,0.25); pointer-events: none !important; }
.stick i { position: absolute; left: 30px; top: 30px; width: 40px; height: 40px; background: rgba(200,240,255,0.45); border: 2px solid rgba(255,255,255,0.6); }
body.touch .gaugewrap { top: 60px; }
body.touch .gauge { height: min(26vh, 160px); }

@media (min-height: 600px) {
body.touch .tbtn.bite { width: 96px; height: 96px; }
body.touch .tbtn.ab1, body.touch .tbtn.ab2 { width: 72px; height: 72px; margin-bottom: 30px; }
body.touch .abilities { gap: 12px; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); }
}

#hint { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 8px 16px; background: rgba(8,18,44,0.85); border: 2px solid var(--gold); font-size: 15px; text-shadow: 1px 1px 0 var(--ink); pointer-events: none !important; max-width: 60vw; text-align: center; animation: bob 1.6s ease-in-out infinite; }
body.touch #hint { bottom: auto; top: 58px; font-size: 13px; padding: 6px 12px; max-width: min(38vw, 420px); }
body.touch #banner { top: 25%; }
#banner { position: fixed; left: 50%; top: 11%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none !important; }


body.bossing #banner { top: var(--bbb, 70px); }
body.bossing .bn, body.bossing .bn.boss { font-size: 13px; padding: 2px 10px; max-width: 46vw; border-width: 1px; }

body.deadscreen #hud .travelbtn { visibility: hidden; }
.bn { padding: 6px 18px; background: rgba(8,18,44,0.85); border: 2px solid var(--line2); font-size: 18px; font-weight: 700; text-shadow: 2px 2px 0 var(--ink); transition: opacity 0.5s, transform 0.5s; text-align: center; max-width: 80vw; }
.bn.boss { border-color: #ff6aa0; color: #ffc0de; font-size: 20px; }
.bn.landmark { border-color: #c8a0ff; color: #f0e4ff; font-size: 20px; padding: 6px 18px; box-shadow: 0 0 18px rgba(200,160,255,0.5); }
.bn.level { border-color: var(--gold); color: var(--gold); }
.bn.air { border-color: #7ad8ff; color: #bff0ff; }
.bn.sting { border-color: #ff7ac8; color: #ffd0ec; }
.bn.ascend { border-color: #d8b8ff; color: #ffe9a8; font-size: 20px; text-shadow: 0 0 8px rgba(255,216,74,0.6); }
.bn.brood { border-color: #c07aff; color: #f0c8ff; font-size: 20px; box-shadow: 0 0 14px rgba(180,90,255,0.5); }


.bn.stagger { background: #ffd84a; border-color: #fff4b8; color: #2a1800; text-shadow: none; }
.bn.out { opacity: 0; transform: translateY(-10px); }
#toasts { z-index: 50; position: fixed; left: 10px; bottom: 12px; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 4px; pointer-events: none !important; max-width: 46vw; }
body.touch #toasts { left: max(10px, env(safe-area-inset-left)); bottom: auto; top: var(--toast-top, 64px); flex-direction: column; max-width: min(30vw, 260px); }
body.touch #title:not(.hidden) ~ #toasts { top: 10px; }
body.touch .toast { font-size: 12px; }
body.touch .warn { top: auto; bottom: 120px; max-width: 40vw; font-size: 13px; }
.toast { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; background: rgba(8,18,44,0.9); border: 2px solid var(--line); font-size: 13px; font-weight: 700; text-shadow: 1px 1px 0 var(--ink); transition: opacity 0.5s; }
.toast.out { opacity: 0; }
#netstatus { position: fixed; left: 50%; top: 40%; transform: translateX(-50%); display: none; }
#netstatus.show { display: flex; gap: 10px; align-items: center; padding: 10px 16px; background: var(--panel); border: 2px solid var(--gold); font-weight: 700; }
#netstatus.show.soft { top: 64px; padding: 4px 12px; font-size: 13px; border-color: #c89a3a; pointer-events: none !important; }


#dead { position: fixed; inset: 0; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 12px; background: rgba(2,4,14,0.55); }
#dead .box { width: min(520px, 100%); margin: auto; padding: 12px 16px; background: #08122c; border: 2px solid var(--line); box-shadow: 0 4px 0 var(--ink); text-align: center; }
#dead h2 { display: flex; align-items: center; justify-content: center; gap: 8px; }
.cause { color: #ffb0b0; margin: 0 0 8px; }

.cause img.killer { height: 28px; width: auto; image-rendering: pixelated; vertical-align: middle; margin: -6px 7px -6px 0; }
.dstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px; margin: 4px 0 6px; }
.dstat { display: flex; flex-direction: row; align-items: center; gap: 6px; padding: 5px 8px; background: var(--ink); border: 2px solid #1a3a6a; min-width: 0; }
.dstat b { font-size: 16px; color: var(--text); white-space: nowrap; margin-left: auto; }
.dstat span { font-size: 12px; color: var(--dim); line-height: 1.2; }
.dstat b.long { white-space: normal; text-align: right; font-size: 13px; line-height: 1.15; min-width: 0; }
.medal { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 12px; }
.medal .best { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
#dead .playrow .btn { min-width: 0; }
#dead .cards.mini { margin: 4px 0; }
.srow { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-bottom: 1px solid rgba(90,200,255,0.15); text-align: left; }
.srow span { flex: 1; color: var(--dim); }
.best { color: var(--gold); font-weight: 700; font-size: 17px; margin: 6px 0 0; }
.rank { margin: 2px 0; }
.rank a { color: #7ff0ff; display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.kept { font-size: 12px; color: var(--dim); }



#panel { position: fixed; inset: 0; z-index: 45; display: flex; align-items: center; justify-content: center; background: rgba(2,4,14,0.55); padding: 8px; }
.pbox { width: min(720px, 100%); max-height: 100%; display: flex; flex-direction: column; background: var(--panel); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--ink); }
.pbox.pause, .pbox.settings, .pbox.party, .pbox.help { width: min(480px, 100%); }
.phead { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 4px 14px; border-bottom: 2px solid #0a1630; background: var(--panel2); }
.phead h2 { font-size: 18px; text-transform: uppercase; }
.x { width: 44px; height: 44px; background: transparent; border: 0; }
.pbody { overflow-y: auto; padding: 8px 14px 14px; -webkit-overflow-scrolling: touch; }
.col { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.col .btn { justify-content: flex-start; }
.pausecol .btn { min-height: 48px; }
.note { font-size: 13px; color: var(--dim); margin: 4px 0 8px; line-height: 1.4; }
.err { color: #ff8a8a; font-size: 13px; }
.dimtxt { color: var(--dim); font-size: 12px; }
.helprow { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; margin: 6px 0; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; border-bottom: 1px solid rgba(90,200,255,0.15); }
.setrow input[type=range] { width: min(200px, 45%); height: 44px; margin: 0; accent-color: #5ac8ff; touch-action: pan-x; }
.setrow > div { display: flex; gap: 6px; }
.tabs { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.tab { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 12px; background: var(--ink); border: 2px solid #1a3a6a; font-size: 14px; text-transform: uppercase; color: var(--dim); }
.tab.on { border-color: var(--line2); color: var(--text); background: var(--panel2); }
.tabs.cls .tab { min-height: 44px; font-size: 13px; }
.slots { display: flex; gap: 8px; flex-wrap: wrap; }
.slot { width: 76px; height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--ink); border: 2px solid #1a3a6a; padding: 2px; }

.slot.depth.empty { border-style: dashed; }
.slot.sel, .item.sel { outline: 3px solid #ffffff; outline-offset: 2px; position: relative; z-index: 1; }
.slot small { font-size: 12px; color: var(--dim); line-height: 1.1; }
.tile { position: relative; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; flex: none; }
.tile .ic { width: 36px; height: 36px; }
.prac { position: absolute; right: -2px; top: -2px; font-style: normal; font-size: 12px; line-height: 12px; font-weight: 800; color: var(--ink); background: #ffb070; padding: 0 2px; box-shadow: 1px 1px 0 var(--ink); }
.stats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0; font-size: 13px; }
.stats span { display: inline-flex; gap: 4px; align-items: center; }
.syn { font-size: 12px; margin: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.chip { padding: 2px 6px; border: 1px solid var(--gold); color: var(--gold); }
.detail { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border: 2px solid var(--line); background: var(--ink); margin: 6px 0; }
.detail p { margin: 4px 0; font-size: 13px; }
.detail { align-items: center; }
.detail .dtext { flex: 1; min-width: 0; }
.detail .row { display: flex; flex-direction: column; gap: 6px; flex: none; }
.detail .swapbtn { display: flex; align-items: center; gap: 6px; text-align: left; max-width: 190px; }
.detail .swapbtn .tile { width: 26px; height: 26px; flex: none; }
.detail .swapbtn .tile .ic { width: 18px; height: 18px; }
.detail .swapbtn > span:last-child { display: flex; flex-direction: column; min-width: 0; font-size: 12px; }
.detail .swapbtn > span:last-child > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail .swaplost { color: #ffb36b; font-size: 11px; text-transform: none; }
.detail .swapwon { color: #8fe88a; font-size: 11px; text-transform: none; }
.detail .swaplbl { font-size: 11px; }
.detail .swapstat { color: #cfe6ff; font-size: 11px; text-transform: none; }
.srow .cardpic { width: auto; height: 18px; max-width: 40px; image-rendering: pixelated; }
.srow .frstate { color: var(--dim); font-size: 12px; }
.inv { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; padding: 3px; }
.item { position: relative; height: 64px; background: var(--ink); border: 2px solid #1a3a6a; display: flex; align-items: center; justify-content: center; padding: 0; }
.item .cnt { position: absolute; right: 3px; bottom: 1px; font-size: 12px; text-shadow: 1px 1px 0 var(--ink); }
.item .eqmark { position: absolute; left: 2px; top: 1px; }

.item .relnew { position: absolute; right: -6px; top: -6px; z-index: 2; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); border: 1px solid var(--ink); box-shadow: 0 0 6px rgba(255,216,74,0.8); }

.inv > .detail { grid-column: 1 / -1; margin: 0; }

.item .iname { display: none; }
body.touch .item { height: 92px; flex-direction: column; gap: 2px; }
body.touch .item .iname { display: block; max-width: 100%; padding: 0 3px; font-size: 10px; line-height: 1.1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.touch .invite .linkin { min-height: 40px; font-size: 14px; }
body.touch .inv { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
body.touch .item .iname { align-self: stretch; text-align: left; padding: 0 22px 0 4px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 22px; }
.item.no { opacity: 0.4; }
.item.dimitem { opacity: 0.45; }
.item.ready { animation: glow 1.2s ease-in-out infinite; }
.forgebox { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; padding: 8px; background: var(--ink); border: 2px solid #1a3a6a; margin-bottom: 8px; }
.clam { width: 240px; height: 128px; image-rendering: pixelated; }
.finfo p { margin: 4px 0; font-size: 14px; }
.codex { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
.cx { padding: 4px 6px; border: 1px solid #1a3a6a; display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 13px; }
.cx small { width: 100%; color: var(--dim); font-size: 12px; }
.cx.unk { color: var(--dim); }
.partycode { text-align: center; padding: 10px; border: 2px dashed #7ff0ff; margin: 6px 0; }
.partycode small { display: block; color: var(--dim); }
.partycode b { font-size: 34px; letter-spacing: 0.25em; color: #7ff0ff; user-select: text; -webkit-user-select: text; }
.joinrow { display: flex; gap: 6px; }
.joinrow .codein { flex: 1; width: auto; min-width: 0; text-transform: uppercase; letter-spacing: 0.2em; }
.joinrow .codein:placeholder-shown { letter-spacing: 0.04em; text-transform: none; }

#rotate { display: none; }

body.portrait #rotate { display: flex; position: fixed; inset: 0; z-index: 50; align-items: center; justify-content: center; background: #0a1438; text-align: center; padding: 24px; font-size: 18px; }
#rotate .rlogo { display: block; width: min(320px, 80vw); height: auto; margin: 0 auto 48px; image-rendering: pixelated; }
#rotate .phone { display: block; position: relative; width: 72px; height: 124px; margin: 0 auto 44px; border: 6px solid #8fe4ff; background: var(--ink); box-shadow: 6px 6px 0 #050a18; animation: turn 2.4s steps(1) infinite; }
#rotate .phone i { position: absolute; left: 6px; right: 6px; top: 14px; bottom: 14px; background: #2a92c8; }
#rotate p { margin: 0 auto; max-width: 18em; font-size: clamp(22px, 7vw, 30px); font-weight: 700; line-height: 1.3; color: var(--gold); text-shadow: 2px 2px 0 var(--ink); }
#rotate p.held { display: none; margin-top: 14px; font-size: clamp(15px, 4.6vw, 19px); color: var(--text); }
body.playing #rotate p.held { display: block; }
@keyframes turn { 0%, 45% { transform: rotate(0deg); } 50%, 95% { transform: rotate(90deg); } }


@media (max-height: 460px) {
#title { padding: 6px 12px; }
.titlebox { padding: 0 0 6px; }
#logo { width: 164px; }
.beta { font-size: 12px; padding: 1px 6px; margin-top: 2px; }
.tagline { font-size: 14px; margin: 0; } .subnote { font-size: 12px; margin: 0 auto 4px; max-width: none; }
#title h3 { display: none; }
.cards { gap: 8px; }
.card { width: 200px; padding: 4px 8px; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; align-content: center; }
.card .desc { display: none; }
.card .portrait { height: 28px; grid-row: span 2; max-width: 64px; }
.card b { font-size: 15px; line-height: 1.1; } .card small { line-height: 1.1; }
.card .abil { grid-column: 1 / -1; gap: 0 8px; }
.startrow { flex-direction: row; justify-content: center; gap: 8px; margin-top: 8px; }
.namerow { margin: 0; flex-direction: column; gap: 4px; }
#name { width: 170px; }
.playrow { margin: 0; gap: 8px; }
.playrow .btn { min-width: 150px; padding: 4px 12px; }
.netline { margin: 4px 0; }
.oceanrow { margin: 0 0 4px; gap: 4px; } .oceanrow .ocbtn { padding: 2px 8px; font-size: 12px; }
.menurow .btn.small { padding: 4px 8px; }
.phead { padding: 2px 4px 2px 12px; } .phead h2 { font-size: 16px; }
.pbody { padding: 6px 12px 10px; }

.pbox.pause { width: min(760px, 100%); }
.pbox.pause .note { margin: 0 0 4px; font-size: 12px; }
.pausecol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pausecol .btn { min-height: 44px; padding: 4px 8px; }
.pausecol .btn:first-child, .pausecol .btn.danger { grid-column: span 2; }
.slot { width: 64px; height: 70px; }
.tabs { margin-bottom: 4px; }
#panel h3 { margin: 4px 0; font-size: 15px; }
#hud .tr { flex-wrap: wrap; justify-content: flex-end; max-width: 60vw; }
.ocean { position: absolute; right: 0; top: 50px; margin: 0; white-space: nowrap; }
.gaugewrap, body.touch .gaugewrap { top: 74px; }
#hud .killfeed { top: 70px; right: 84px; }

#dead { padding: 6px; }
#dead .box { width: min(640px, 100%); }
#dead h2 { font-size: 18px; margin: 0 0 2px; } .cause { margin: 0 0 4px; }
.dstat { padding: 3px 2px; } .dstat .ic { width: 16px; height: 16px; } .dstat b { font-size: 15px; }
.kept { margin: 2px 0; }
.cards.mini .card { width: auto; min-width: 116px; display: flex; flex-direction: row; justify-content: center; gap: 6px; padding: 2px 8px; min-height: 44px; }
.cards.mini .card .portrait { max-width: 44px; }
.cards.mini .portrait { height: 22px; }
.cards.mini .card b { font-size: 13px; white-space: nowrap; }
.cards.mini .card small { white-space: nowrap; }
#dead .playrow { margin: 4px 0 0; }
#hud .tl { width: min(240px, 34vw); }
.lv { min-width: 40px; height: 40px; font-size: 12px; }
.bar { height: 14px; } .xpbar { height: 6px; }
.gauge, body.touch .gauge { height: 110px; }
.warn { top: 16%; font-size: 13px; }
body.touch .warn { top: auto; }
.bn { font-size: 15px; } .bn.boss, .bn.brood, .bn.ascend { font-size: 15px; }
.clam { width: 180px; height: 96px; }
#dead .box { padding: 8px 12px; } .srow { padding: 2px 6px; min-height: 30px; }
}
@keyframes blink { 50% { opacity: 0.35; } }
@keyframes pulse { 50% { transform: translateX(-50%) scale(1.04); } }
@keyframes bob { 50% { transform: translateX(-50%) translateY(-4px); } }
@keyframes glow { 50% { box-shadow: 0 0 10px rgba(255,216,74,0.7); } }


.minimap { position: absolute; left: 10px; bottom: 12px; width: 240px; height: 110px; image-rendering: pixelated; border: 2px solid #0a1630; background: rgba(5,10,24,0.6); pointer-events: none; opacity: 1; }

#hud .minimap { pointer-events: none; }


body:not(.touch) #hud .minimap { pointer-events: auto; cursor: zoom-out; }

.mapbtn { display: none; }
body.touch #hud .mapbtn { display: inline-flex; position: absolute; right: 190px; top: 128px; min-width: 44px; height: 44px; padding: 0 4px; justify-content: center; }


body.touch:not(.lefty) #hud .minimap { pointer-events: auto; }
@media (max-height: 460px) { body.touch #hud .mapbtn { right: 172px; top: 112px; } }
body.touch #hud .minimap.big { pointer-events: auto; position: fixed; left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: min(92vw, 720px); height: min(70vh, 330px); opacity: 1; z-index: 30; border-color: #3a5a8c; box-shadow: 0 0 0 1px rgba(160,210,255,0.25), 0 6px 24px rgba(0,0,0,0.7); }
.travelcol .soonrow { cursor: default; opacity: 0.85; }
.travelcol .btn b { text-wrap: balance; }

.rtag { font-style: normal; font-size: 10px; font-weight: 700; padding: 0 4px; border: 1px solid; border-radius: 2px; background: rgba(5,8,18,0.6); vertical-align: 1px; text-transform: uppercase; letter-spacing: 0.5px; }
body:not(.touch) #hud .minimap { transition: width 0.5s ease-in-out, height 0.5s ease-in-out; }

#hud .minimap.big, #panel .pbox.map { --mapk: 2.05; }
#hud .minimap.big.undersea, #panel .pbox.map:has(.minimap.undersea) { --mapk: 4; }

#hud .minimap.big.raidsea, #panel .pbox.map:has(.minimap.raidsea) { --mapk: 3; }

body:not(.touch) #hud .minimap.big { --mw: min(640px, calc(100vw - 40px), calc((100vh - 140px) * var(--mapk))); width: var(--mw); height: calc(var(--mw) / var(--mapk)); z-index: 40; border-color: #3a5a8c; box-shadow: 0 0 0 1px rgba(160,210,255,0.25), 0 6px 24px rgba(0,0,0,0.6); }
body.touch .minimap { width: 150px; height: 69px; left: auto; right: 36px; bottom: auto; top: 128px; }




@media (max-height: 460px) { .minimap { width: 150px; height: 69px; } body.touch .minimap { width: 132px; height: 60px; left: auto; right: 36px; top: 112px; bottom: auto; opacity: 0.85; } }

@media (max-height: 460px) { body.touch.bossing .minimap { opacity: 0.3; } }
body:not(.touch) #toasts { bottom: 112px; }

body:not(.touch):not(.panelopen) #title:not(.hidden) ~ #toasts { bottom: auto; top: 10px; flex-direction: column; }

body:has(#hud .minimap.big) #toasts { opacity: 0; }
@media (max-height: 460px) { body:not(.touch) #toasts { bottom: 80px; } }
.fill.hp.low { animation: blink 0.5s steps(2) infinite; }
.card.locked { filter: grayscale(0.7); }
.card.locked > * { opacity: 0.6; }
.card .lockline { color: #ffd84a; }

.quest { display: flex; gap: 10px; align-items: center; padding: 8px; border: 2px solid #1a3a6a; background: var(--ink); margin: 6px 0; }
.quest.done { border-color: var(--green); opacity: 0.75; }
.quest.bonus { border-color: var(--gold); background: #1a1a08; box-shadow: inset 0 0 12px rgba(255,216,74,0.18); }
.quest.bonus.done { border-color: var(--green); }
#panel h3.bonushead { color: var(--gold); }
.note.bonusnext { color: #ffd84a; }
.quest .qtext { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.quest .qbar { width: 100%; height: 8px; }
.quest small { color: var(--dim); font-size: 12px; }
.relicdex { display: flex; flex-direction: column; gap: 3px; }
.rdrow { display: flex; align-items: center; gap: 3px; }
.rdname { width: 120px; font-size: 12px; color: var(--dim); flex: none; }
.rdrow .tile { width: 32px; height: 32px; }
.rdrow .tile .ic { width: 26px; height: 26px; }
.tile.none { background: #070c1c; }
.z-midnight { background: #0a0f2a; } .z-abyss { background: #1a0a08; } .z-trench { background: #08030a; }
.questtrack { white-space: pre-line; line-height: 1.35; margin-top: 6px; padding: 4px 8px; min-height: 30px; background: rgba(8,18,44,0.75); border: 2px solid #3a6a2a; color: #b8f0a0; font-size: 12px; text-align: left; pointer-events: auto; max-width: 100%; }
body.touch .questtrack { min-height: 44px; }
.unlocknext { color: #ffd84a; }

@media (max-height: 460px) {
#title .cards { flex-wrap: nowrap; gap: 6px; }
#title .card { width: min(150px, calc((100vw - 72px) / 8)); padding: 4px 6px; }
#title .card .abil { display: none; }


#title .card .lockline { display: block; font-size: 11px; line-height: 1.2; grid-column: 1 / -1; margin: 0; }
#title .card .lvtag { white-space: nowrap; display: inline-block; }
#title .card b { font-size: 14px; }
#title .card small { font-size: 11px; }
}
@media (max-height: 460px) and (max-width: 700px) { #title .card { width: min(120px, calc((100vw - 66px) / 8)); } }
@media (max-height: 380px) {
#title .subnote { display: none; }


#title .oeline { display: block; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96vw; margin-left: auto; margin-right: auto; }
#title .menurow .btn.small { min-height: 38px; padding-top: 2px; padding-bottom: 2px; }
}

.sigrow { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; pointer-events: auto; }
.sigrow.hidden { display: none; }
.sigrow .sig { font: inherit; font-size: 11px; padding: 3px 6px; min-height: 26px; white-space: nowrap; border: 2px solid #2a3a5a; background: rgba(10,12,22,0.85); color: #7ff0ff; cursor: pointer; text-shadow: 1px 1px 0 var(--ink); }
.sigrow .sig.s1 { color: #ff8a8a; } .sigrow .sig.s2 { color: #ff9ad0; } .sigrow .sig.s3 { color: #ffd84a; } .sigrow .sig.sreg { color: #9affd8; }
.sigrow .sig:active { transform: translateY(1px); border-color: #7ff0ff; }
body.touch .sigrow .sig { min-height: 32px; padding: 4px 8px; font-size: 12px; }

.dstat { position: relative; }
.dstat.pb { border-color: var(--gold); box-shadow: 0 0 8px rgba(255,216,74,0.45); }
.dstat .pbtag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: bold; color: var(--ink); background: var(--gold); padding: 0 4px; white-space: nowrap; }

.tbtn .key { position: absolute; left: 3px; top: 1px; font-size: 11px; color: var(--gold); text-shadow: 1px 1px 0 var(--ink); z-index: 3; }
body.touch .tbtn .key { display: none; }
body:not(.touch) .abilities .tbtn.ab1 { order: 1; }
body:not(.touch) .abilities .tbtn.ab2 { order: 2; }
body:not(.touch) .abilities .tbtn.bite { order: 3; }


@media (min-width: 960px) and (min-height: 461px) {
.titlebox { width: min(1200px, 100%); }
#title .cards:not(.mini) .card { width: calc((min(1200px, 100vw - 24px) - 70px) / 8); }
}
@media (min-width: 960px) and (max-height: 800px) and (min-height: 461px) {
#logo { width: 254px; }
.tagline { font-size: 16px; }
}
.quest .qreward { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 92px; text-align: center; }
.quest .qreward .qrname { font-size: 10px; line-height: 1.15; color: var(--text); }
body.touch.bannering #hint { opacity: 0; }
.sigrow.cool .sig, .sigrow .sig.off { opacity: 0.4; }

body.touch #hint { font-size: 14px; }
body.touch .questtrack { font-size: 13px; }
body.touch .toast { font-size: 13px; }

#geartip { position: fixed; z-index: 60; max-width: 300px; padding: 8px 10px; background: rgba(6,12,30,0.96); border: 2px solid var(--line2); box-shadow: 0 3px 0 var(--ink); pointer-events: none; font-size: 13px; line-height: 1.35; text-shadow: 1px 1px 0 var(--ink); }
#geartip.hidden { display: none; }
#geartip b { display: block; font-size: 14px; margin-bottom: 3px; }
#geartip p { margin: 3px 0 0; }

.bossbar .stagbar { height: 4px; margin-top: 2px; background: rgba(0,0,0,0.5); border: 1px solid #5a4a14; }
.bossbar.mini .stagbar { display: none; }
.bossbar .stagbar .fill.stag { display: block; height: 100%; width: 0; background: var(--gold); transition: width 0.15s; }
.bossbar.staggered { border-color: var(--gold); }
.bossbar.staggered .bname { color: var(--gold); }
@keyframes stagpulse { 50% { opacity: 0.45; } }
.bossbar.staggered .stagbar .fill.stag { animation: stagpulse 0.5s ease-in-out infinite; }

.bossbar .btop { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.bossbar .bmood { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 800; padding: 0 5px; border: 1px solid; line-height: 15px; text-shadow: 1px 1px 0 var(--ink); }
.bossbar .bmood.hidden, .bossbar .shellbar.hidden { display: none; }
.bossbar .brec { display: inline-block; }
.bossbar .bparty { font-size: 11px; font-weight: 800; line-height: 15px; color: #ff9ad0; text-shadow: 1px 1px 0 var(--ink); }
.bossbar .bmood .ic.tiny { width: 12px; height: 12px; }
.bossbar.m-enraged { border-color: #b8401a; }
.bossbar.m-enraged .bmood { color: #ffb070; border-color: #ff6a2a; background: rgba(90,20,0,0.75); }
.bossbar.m-armored .bmood { color: #e4ecf4; border-color: #a8b4c4; background: rgba(40,48,60,0.8); }
.bossbar.m-stormy .bmood { color: #bff4ff; border-color: #5ac8ff; background: rgba(10,40,70,0.8); }
.bossbar.m-brood { border-color: #a04ad0; box-shadow: 0 3px 0 var(--ink), 0 0 10px rgba(180,90,255,0.45); }
.bossbar.m-brood .bmood { color: #f0c8ff; border-color: #c07aff; background: rgba(50,10,70,0.85); animation: stagpulse 1.6s ease-in-out infinite; }
.bossbar .shellbar { height: 5px; margin: 2px 0 1px; background: rgba(0,0,0,0.5); border: 1px solid #6a7484; }
.bossbar .shellbar .fill.shell { display: block; height: 100%; width: 100%; background: linear-gradient(#f4f8ff, #8e9aac); transition: width 0.15s; }

.pbox.noocean .nooc { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.pbox.noocean .nooc img { width: 32px; height: 32px; flex: none; }

.card .lvtag { font-style: normal; font-size: 12px; margin-left: 6px; padding: 0 5px; background: rgba(255,216,74,0.18); border: 1px solid #8a6a14; color: var(--gold); }
.cards.mini .card small.lvtag { display: block; margin: 2px 0 0; }
#btn-respawn:disabled { opacity: 0.6; cursor: default; }


#btn-respawn.waiting { opacity: 0.6; }
#btn-respawn.armed { border-color: var(--gold); animation: glow 1s ease-in-out infinite; }

#geartip b .ic, #geartip .syn .ic { width: 20px; height: 20px; vertical-align: middle; margin-right: 6px; image-rendering: pixelated; }
#geartip .syn { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0; font-size: 13px; margin: 5px 0 0; color: var(--dim); }
#geartip .syn span { flex: 1; min-width: 0; }
#geartip .syn .ic { flex: none; margin-top: 1px; }
.synmate { outline: 2px solid var(--gold); outline-offset: -2px; box-shadow: 0 0 10px rgba(255,216,74,0.65) !important; animation: synpulse 0.9s ease-in-out infinite; }
@keyframes synpulse { 50% { box-shadow: 0 0 3px rgba(255,216,74,0.3); } }

.setrow.keyrow { min-height: 40px; }
.btn.keycap { min-width: 64px; min-height: 34px; text-transform: none; letter-spacing: 0; }
.btn.keycap.empty { color: var(--dim); }
.btn.keycap.wait { border-color: var(--gold); color: var(--gold); }
.btn.keycap.fixed { opacity: 0.55; cursor: default; box-shadow: none; }

.zoombtns { display: flex; flex-direction: column; gap: 6px; margin-right: 12px; }
body:not(.touch) .zoombtns { display: none; }
.zblabel { font-size: 10px; font-weight: 700; color: #cfe8ff; text-align: center; text-shadow: 1px 1px 0 var(--ink); margin-bottom: -3px; }
.tbtn.zb { width: 44px; height: 44px; font-size: 22px; font-weight: 700; line-height: 1; opacity: 0.85; text-shadow: 1px 1px 0 var(--ink); }

.pvptag { display: block; margin: 1px 0 2px; padding: 0 4px; font-weight: 800; font-size: 11px; color: #fff; background: #b8283a; border: 1px solid #ff6a6a; text-align: center; letter-spacing: 1px; }
.pvptag.hidden { display: none; }
.killfeed { position: absolute; top: 46px; right: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; pointer-events: none; z-index: 5; }
.killfeed .kf { font-size: 12px; padding: 2px 6px; background: rgba(6,10,26,0.78); border-left: 3px solid #ff6a6a; color: var(--dim); transition: opacity 0.5s; }
.killfeed .kf b { color: var(--text); }
.killfeed .kf.mine { border-left-color: var(--gold); }
.killfeed .kf i { color: var(--gold); font-style: normal; }
.killfeed .kf.out { opacity: 0; }
.bn.pvp { border-color: #ff6a6a; color: #ffd0d0; }

.invite:not(.pbox) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; }
.invite:not(.pbox) small { width: 100%; color: var(--dim); }
.invite .linkin { flex: 1; min-width: 160px; font: inherit; font-size: 12px; padding: 4px 6px; background: var(--ink); color: var(--text); border: 1px solid #1a3a6a; }
.srow.fr { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.srow.fr > span { flex: 1; min-width: 120px; }
.srow.fr small { color: var(--dim); }
.srow.fr.mutual > span { color: #ffb0e0; }


#msgs { display: contents; }
#hud.hidden ~ #msgs .warn { display: none; }
@keyframes pulsein { 50% { transform: scale(1.04); } }
@media (max-height: 460px) {
body.touch #msgs { display: flex; flex-direction: column; align-items: center; gap: 4px; position: fixed; top: 8px; left: calc((min(240px, 34vw) + 10px + 100vw - 296px) / 2); transform: translateX(-50%); width: calc(100vw - 322px - min(240px, 34vw)); pointer-events: none !important; }
body.touch.bossing #msgs { top: var(--bbb, 62px); }


@media (max-width: 760px) { body.touch #msgs { top: 56px; left: 50%; width: min(400px, 60vw); } body.touch.bossing #msgs { top: var(--bbb, 92px); } }
body.touch.vicon #msgs { top: var(--vicb, 50%); }
body.touch.lessonon:not(.vicon) #msgs { top: var(--lessonb, 120px); }
body.touch #msgs .warn, body.touch #msgs #banner { position: static; transform: none; max-width: 100%; }
body.touch #msgs .warn { font-size: 12px; padding: 4px 10px; animation: pulsein 0.8s ease-in-out infinite; }
body.touch #msgs .warn.soft { animation: none; }
body.touch #msgs .bn { font-size: 14px; padding: 4px 12px; max-width: 100%; box-sizing: border-box; }


body.touch.meunder #msgs .bn:not(.ask):not(.sting) { opacity: 0.3 !important; }


@media (max-height: 340px) { body.touch.bossing #msgs .bn { font-size: 12px; line-height: 1.3; padding-bottom: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; opacity: 0.75; } body.touch.bossing #msgs .bn.ask, body.touch.bossing #msgs .bn.sting { -webkit-line-clamp: 3; opacity: 1; } }
body.touch.warning #hint { opacity: 0; }
body.touch #hint { left: calc((min(240px, 34vw) + 10px + 100vw - 180px) / 2); max-width: calc(100vw - 206px - min(240px, 34vw)); box-sizing: border-box; }
}

#panel:not(.hidden) { animation: fadeIn 0.16s ease-out; }
#panel.fresh:not(.hidden) .pbox { animation: boxIn 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.1); }
.bn { animation: bnIn 0.24s ease-out; }
.toast { animation: toastIn 0.2s ease-out; }
#dead:not(.hidden) .box { animation: boxIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes boxIn { from { opacity: 0; transform: translateY(10px) scale(0.97); } }
@keyframes bnIn { from { opacity: 0; transform: translateY(-8px); } }
@keyframes toastIn { from { opacity: 0; transform: translateX(-12px); } }

@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}


#btn-respawn b { display: inline-block; min-width: 8.5em; text-align: center; }

.keychip { flex: none; padding: 1px 5px; font: inherit; font-size: 11px; line-height: 14px; text-transform: none; letter-spacing: 0; color: var(--dim); border: 1px solid var(--line2); background: rgba(0,0,0,0.3); }
body.touch .keychip { display: none; }
.rarlad { margin: 2px 0 6px; font-size: 12px; line-height: 1.5; }
.rarlad span { font-weight: bold; white-space: nowrap; }
.fill.xp.apex { background: linear-gradient(90deg, #c89b2a, #ffd84a); box-shadow: 0 0 6px rgba(255,216,74,0.6); }
.pvptag.grace { background: #2a6a4a; color: #d8ffe8; }

.pvptag.out { display: flex; align-items: center; justify-content: center; gap: 3px; padding: 1px 6px; font-size: 12px; background: #1a4a6a; color: #d8f4ff; border-color: #7fd8ff; letter-spacing: 0; }
.pvptag.out.hidden { display: none; }
.pvptag.oetag { display: flex; align-items: center; justify-content: center; gap: 2px; background: #2a2410; color: #ffd84a; border-color: #8a7a2a; letter-spacing: 0; font-weight: 700; }
.pvptag.oetag.blood { background: #3a0a12; color: #ff8a8a; border-color: #b8283a; }
.pvptag.oetag.golden { background: #3a2a04; color: #ffe27a; border-color: #ffc83a; box-shadow: 0 0 6px rgba(255,200,60,0.5); }
.pvptag.oetag.riches { background: #1e2410; color: #e8d08a; border-color: #a08a3a; }
.pvptag.oetag.deep { background: #061a2a; color: #9ae8ff; border-color: #2a7aa0; }
.pvptag.oetag.mega { background: #4a1a06; color: #ffe08a; border-color: #ff9a3a; box-shadow: 0 0 8px rgba(255,150,50,0.6); }
@media (prefers-reduced-motion: no-preference) { .pvptag.oetag.mega { animation: megapulse 1.2s ease-in-out infinite alternate; } }
@keyframes megapulse { from { box-shadow: 0 0 4px rgba(255,150,50,0.4); } to { box-shadow: 0 0 12px rgba(255,170,60,0.9); } }
.pvptag.oetag.hidden { display: none; }
.pvptag.hidetag { background: #2a2a3a; color: #e8ffb0; border-color: #8aa04a; }
.card .newtag { display: inline-block; white-space: nowrap; margin-left: 6px; padding: 0 5px; background: #ffd84a; color: #2a1800; font-style: normal; font-size: 11px; border-radius: 2px; animation: newPulse 1.2s ease-in-out infinite alternate; }
@keyframes newPulse { from { opacity: 0.75; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .card .newtag { animation: none; } }
.codex .cx.lore { cursor: pointer; text-align: left; font: inherit; color: inherit; background: inherit; border: inherit; }
.codex .cx.lore.sel { outline: 2px solid var(--gold); }
.lorebox { margin: 6px 0 10px; padding: 8px 10px; border: 2px solid var(--gold); background: #141008; }
.lorebox b { color: var(--gold); }
.lorebox p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; }
body.deadscreen .tbtn, body.deadscreen .zoombtns, body.deadscreen #stick { visibility: hidden; }
#panel.top { align-items: flex-start; }
.slot.stolen { filter: grayscale(1) brightness(0.55); border-style: dashed; }
#panel.top .pbox { margin-top: min(4vh, 32px); max-height: calc(100% - min(4vh, 32px)); }
#panel.nonmodal { background: none; pointer-events: none; align-items: flex-start; }
#panel.nonmodal .pbox { pointer-events: auto; margin-top: 56px; max-width: min(420px, 92vw); }


.zonenote { margin: -2px 0 6px; font-size: 13px; line-height: 1.4; font-style: italic; opacity: 0.85; }
.zonenote.unk { opacity: 0.5; }



#drownfx { position: fixed; inset: 0; pointer-events: none; box-shadow: inset 0 0 70px 26px rgba(255,40,70,0.9); opacity: 0; transition: opacity 0.4s; }
body.drowning #drownfx { opacity: 1; animation: drownpulse 1s ease-in-out infinite; }
@keyframes drownpulse { 50% { opacity: 0.55; } }


.forgenote { margin: 4px 0; padding: 3px 6px; font-weight: 700; border-left: 3px solid; }
.forgenote.ok { color: var(--gold); border-color: var(--gold); background: rgba(80,60,0,0.35); }
.forgenote.fail { color: #ffb0a0; border-color: #ff7a6a; background: rgba(80,20,20,0.35); }

.note.fightwarn { color: #ff8a7a; font-weight: 700; }

body.deadscreen #toasts { visibility: hidden; }
body.deadscreen #hud .gaugewrap .depthtext, body.deadscreen #hud .gaugewrap .zonetext, body.deadscreen #hud .gaugewrap .pvptag { visibility: hidden; }
body.deadscreen #hud .statrow { visibility: hidden; }
.note.dtip { color: #bfe6ff; }


.chatbox { position: absolute; left: 10px; bottom: 132px; width: min(380px, 36vw); display: flex; flex-direction: column; gap: 3px; pointer-events: none; z-index: 6; }
.chatbox.hidden { display: none; }
.chatlog { display: flex; flex-direction: column; gap: 1px; }
.cl { font-size: 13px; line-height: 1.3; padding: 1px 6px; background: rgba(5,10,24,0.55); color: #e8eef8; text-shadow: 1px 1px 0 var(--ink); transition: opacity 1.2s; word-break: break-word; }
.cl.old { opacity: 0; }
.chatbox.open .cl, .chatbox.open .cl.old { opacity: 1; }
.cl .cc { font-style: normal; font-size: 11px; font-weight: 700; margin-right: 5px; padding: 0 3px; border: 1px solid currentColor; opacity: 0.9; }
.cl .cn { font-weight: 700; cursor: pointer; pointer-events: auto; color: #ffe9a8; }
.cl .cn:hover { text-decoration: underline; }

.chatbox:not(.open) .cl.old .cn { pointer-events: none; }
.cl .cn.me { color: #b8c8e0; }
.ch-g .cc { color: #e8eef8; }
.ch-p .cc { color: #7ff0ff; } .cl.ch-p { color: #c8f8ff; }
.ch-u .cc { color: #8aff9a; } .cl.ch-u { color: #d0ffd6; }
.ch-d .cc { color: #ff9ad8; } .cl.ch-d { color: #ffd6ee; }
.chatbar { display: flex; gap: 4px; pointer-events: auto; }
.chatbar.hidden { display: none; }
.chatch { font: inherit; font-size: 12px; font-weight: 700; padding: 4px 8px; background: #0a1630; color: #e8eef8; border: 2px solid var(--line2); cursor: pointer; white-space: nowrap; }
.chatch.ch-p { color: #7ff0ff; } .chatch.ch-u { color: #8aff9a; } .chatch.ch-d { color: #ff9ad8; }
.chatin { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 5px 8px; background: rgba(5,10,24,0.9); color: #fff; border: 2px solid var(--line2); outline: none; }
.chatin:focus { border-color: #8fe4ff; }
.chatmore { font: inherit; padding: 0 8px; background: #0a1630; color: #bfe6ff; border: 2px solid var(--line2); cursor: pointer; }
.hbtn.chatbtn { position: relative; }
.badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ff4a6a; color: #fff; font-size: 11px; font-style: normal; font-weight: 700; line-height: 16px; text-align: center; }
.badge.hidden { display: none; }
.chattabs .badge, .thread .badge { position: static; display: inline-block; margin-left: 5px; }
.chatpanel-log { height: min(46vh, 340px); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 4px; background: rgba(5,10,24,0.5); border: 2px solid #0a1630; margin: 6px 0; }
.chatpanel-log .cl { background: none; opacity: 1; }
.chatsend { display: flex; gap: 6px; }
.chatsend .chatin { font-size: 15px; padding: 8px; }
.threads { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.thread.on { border-color: #ff9ad8; color: #ff9ad8; }

.ghead { display: flex; align-items: baseline; gap: 8px; margin: 6px 0; }
.gtagbig { color: #8aff9a; font-size: 20px; }
.ghead .gname { font-size: 18px; font-weight: 700; }
.gcode { letter-spacing: 2px; color: var(--gold); margin: 0 8px; }
.gmem .dot { width: 8px; height: 8px; border-radius: 50%; background: #4a5470; display: inline-block; margin-right: 6px; font-style: normal; flex: none; }
.gmem .dot.on { background: #6aff8a; box-shadow: 0 0 4px #6aff8a; }
.gmem:not(.on) span { opacity: 0.6; }
.role { margin-left: 4px; font-weight: 700; }
.role-leader { color: var(--gold); } .role-officer { color: #8fe4ff; } .role-member { color: #b8c8e0; }
.gcreate .gname { flex: 2; } .gcreate .gtag { flex: 1; max-width: 90px; }
.ginvite { border-left: 3px solid #8aff9a; }

@media (max-height: 460px) { .chatbox { display: none; } .chatpanel-log { height: 34vh; } .pbox.chat { width: min(600px, 100%); } }


body:not(.touch).playing #toasts { bottom: auto; top: var(--toast-top, 160px); flex-direction: column; }

body.touch.panelopen #toasts { visibility: hidden; }


body:not(.touch).panelopen #toasts { top: auto; bottom: 8px; flex-direction: column-reverse; }
body.panelopen #hud .lesson, body.deadscreen #hud .lesson { display: none; }
.pbox.chat .note a { color: #8aff9a; text-decoration: none; font-weight: 700; }


.tbtn .cdnum { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: #ffffff; text-shadow: 0 0 4px #000, 2px 2px 0 var(--ink); z-index: 4; pointer-events: none; }
.tbtn:not(.cooling) .cdnum { display: none; }
.tbtn.cooling .ic { filter: grayscale(1) brightness(0.55); }
.tbtn.cooling { border-color: #3a4468; }
.tbtn.cooling .cd { background: rgba(5,10,24,0.55); }
.tbtn.ready:not(.bite) { border-color: #8fe4ff; box-shadow: 0 3px 0 var(--ink), 0 0 10px rgba(143,228,255,0.6); }
.tbtn.justready { animation: readyflash 0.7s ease-out; }
@keyframes readyflash { 0% { box-shadow: 0 0 0 0 rgba(255,240,150,0.95), 0 0 18px rgba(255,240,150,0.9); background: rgba(255,240,150,0.45); } 100% { box-shadow: 0 0 0 16px rgba(255,240,150,0), 0 0 10px rgba(143,228,255,0.6); } }


.tbtn.tutglow:not(.bite) { border-color: #ffd84a; animation: tutglow 0.8s ease-in-out infinite alternate; }
@keyframes tutglow { from { box-shadow: 0 3px 0 var(--ink), 0 0 0 0 rgba(255,216,74,0.2); } to { box-shadow: 0 3px 0 var(--ink), 0 0 14px 4px rgba(255,216,74,0.8); } }
@media (prefers-reduced-motion: reduce) { .tbtn.tutglow:not(.bite) { animation: none; box-shadow: 0 3px 0 var(--ink), 0 0 10px 3px rgba(255,216,74,0.7); } }


.cnname { margin: 0 0 4px; font-size: 22px; font-weight: 700; letter-spacing: 6px; color: #bff6ff; text-shadow: 2px 2px 0 var(--ink); }
.cnname:empty { display: none; }

.whoname { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: #ffe9a8; text-align: center; }
.quote { margin: 0 0 10px; padding: 6px 10px; background: rgba(5,10,24,0.55); border-left: 3px solid #7ff0ff; color: #e8eef8; word-break: break-word; }
.reasons { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.reason, .repblock { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(255,255,255,0.05); cursor: pointer; min-height: 32px; }
.reason input, .repblock input { width: 18px; height: 18px; accent-color: #7ff0ff; }
.repnote { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 6px 8px; background: #0b1630; color: #e8eef8; border: 2px solid #2b4a7a; resize: vertical; }
.repleft { display: block; text-align: right; color: var(--dim); margin-bottom: 6px; }
.repblock { margin-bottom: 6px; }
.chatpanel-log .cl .ct { cursor: pointer; }
.pbox.report, .pbox.chatwho { width: min(420px, 100%); }

.pbox.info { width: min(640px, 100%); }
.ilvrow { display: flex; align-items: center; gap: 10px; margin: 6px 0; flex-wrap: wrap; }
.ilvrow span { min-width: 150px; font-weight: 700; }
.ilevel { flex: 1; min-width: 160px; accent-color: #7ff0ff; height: 28px; }
.istats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px; margin: 6px 0; }
.istats.mini { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.istat { padding: 4px 8px; border: 1px solid #1a3a6a; background: rgba(5,10,24,0.4); display: flex; flex-direction: column; }
.istat span { font-size: 12px; color: var(--dim); }
.istat b { font-size: 16px; }
.istat small { font-size: 11px; color: var(--dim); }
.iab { padding: 6px 8px; border: 1px solid #1a3a6a; margin-bottom: 6px; }
.iab > small { margin-left: 8px; color: #7ff0ff; }
.iab p { margin: 4px 0; }
.iranks { margin: 0; padding-left: 16px; font-size: 13px; color: var(--dim); }
.iranks li.got { color: #8aff9a; }
.iranks i { font-style: normal; font-weight: 700; margin-right: 2px; }
.icr { padding: 6px 8px; border: 1px solid #1a3a6a; margin-bottom: 6px; }
.icrh { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.icrh small, .idrops { color: var(--dim); font-size: 12px; }
.icr p { margin: 4px 0; font-size: 13px; }

.ifact { margin: 6px 0 2px; padding: 4px 8px; border-left: 3px solid var(--gold); background: #0c1a2e; font-size: 13px; line-height: 1.45; }
.ifact .ic.tiny { vertical-align: -3px; margin-right: 4px; }
.ifact b { color: var(--gold); margin-right: 2px; }
.lorebox .ifact { margin-top: 8px; background: transparent; }

.pbox.name { width: min(460px, 100%); }
.namein { width: 100%; box-sizing: border-box; font-size: 18px; text-align: center; margin: 4px 0; }
.nameerr { color: #ff8a7a; font-weight: 700; }

.namepick { display: flex; gap: 8px; align-items: center; }
.namepick .namein { flex: 1; min-width: 0; }
.namepick .namedice { flex: none; min-height: 44px; white-space: nowrap; }
.nameerr.ok { color: #9af07a; }
.namejoin { color: #ffe9a8; }
.namejoin .ic { vertical-align: middle; }
.namejoin .linkbtn { font: inherit; color: #ffe9a8; background: none; border: none; border-bottom: 1px dashed #ffe9a8; padding: 0 2px; cursor: pointer; }


body.touch .namejoin .linkbtn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 6px; vertical-align: middle; border-bottom: 0; text-decoration: underline dashed; text-underline-offset: 3px; }
.namerules { margin: 6px 0; padding-left: 18px; font-size: 13px; color: var(--dim); }
.namerules li { margin-bottom: 3px; }
.namewait { color: #ffd27a; }
.namenote { margin: 0 0 4px; font-size: 12px; color: var(--dim); text-align: center; }


.tbtn .abname { display: none; }
body.touch .tbtn .abname { display: block; position: relative; z-index: 2; max-width: 100%; padding: 0 2px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; font-style: normal; font-size: 11px; line-height: 12px; white-space: nowrap; color: #d8e4ee; text-shadow: 1px 1px 0 var(--ink); pointer-events: none; }


.chatpanel-log .cl.ch-g .cc, .chatpanel-log .cl.ch-p .cc, .chatpanel-log .cl.ch-u .cc { display: none; }
@media (max-height: 460px) {
.pbox.chat { height: 100%; }
.pbox.chat .pbody { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pbox.chat .chatpanel-log { flex: 1; height: auto; min-height: 48px; margin: 4px 0; }
.chattabs { margin-bottom: 2px; }
.chattabs .tab { min-height: 34px; padding: 2px 10px; }
}
.helphead { margin: 10px 0 4px; font-size: 15px; color: #7ff0ff; }
.helphead:first-child { margin-top: 0; }

.pbox.talents { width: min(980px, 100%); }
.hbtn.talbtn { position: relative; }
.hbtn.talbtn.pulse { border-color: #ffd84a; animation: talpulse 1.4s ease-in-out infinite; }
@keyframes talpulse { 0%, 100% { box-shadow: 0 2px 0 var(--ink), 0 0 0 rgba(255,216,74,0); } 50% { box-shadow: 0 2px 0 var(--ink), 0 0 12px rgba(255,216,74,0.8); } }

.hbtn.giftbtn { border-color: #ffd84a; animation: giftpulse 2.4s ease-in-out infinite; }
@keyframes giftpulse { 0%, 100% { box-shadow: 0 2px 0 var(--ink), 0 0 0 rgba(255,216,74,0); } 50% { box-shadow: 0 2px 0 var(--ink), 0 0 9px rgba(255,216,74,0.6); } }
@media (prefers-reduced-motion: reduce) { .hbtn.giftbtn { animation: none; } }
.talhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; min-height: 36px; }
.talpts { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border: 2px solid #2b4a7a; background: rgba(5,10,24,0.5); }
.talpts b { font-size: 22px; }
.talpts.has { border-color: #ffd84a; color: #ffe9a8; }
.talwho { flex: 1; color: var(--dim); min-width: 160px; }
.talreset { margin-left: auto; }


.talwho.talsum { color: #8aff9a; }
.taldone { display: inline-flex; align-items: center; gap: 4px; color: #8aff9a; font-size: 14px; }
.talbuilds { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.talbuilds > b { color: var(--dim); font-size: 12px; }
.talbuild { display: flex; gap: 2px; }
.talbuild .tbload { display: flex; flex-direction: column; align-items: flex-start; min-width: 104px; line-height: 1.1; }
.talbuild .tbload small { font-size: 10px; color: var(--dim); }
.talbuild.on .tbload, .talbuild.on .tbload:disabled { border-color: #ffd84a; opacity: 1; }
.talbuild.on .tbload small { color: #ffe9a8; }
.talbuild.empty .tbload { opacity: 0.6; }
body.touch .talbuild .tbload { min-width: 88px; }
.talbrtabs { display: none; }
.talbody { display: flex; flex-direction: column; gap: 8px; }
.taltree { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; flex: 1; min-width: 0; }
.talbr { border: 2px solid #1a3a6a; padding: 6px; background: rgba(5,10,24,0.35); }
.talbrh { display: flex; align-items: center; gap: 6px; color: var(--bc); }
.talbrh b { font-size: 15px; text-transform: uppercase; letter-spacing: 1px; }
.talblurb { display: block; color: var(--dim); font-size: 11px; min-height: 28px; margin: 2px 0 4px; }
.talgrid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, 52px); gap: 0; justify-items: center; align-items: center; }
.tallines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tallines line { stroke: #2b4a7a; stroke-width: 0.06; }
.tallines line.lit { stroke: var(--bc); stroke-width: 0.09; }
.taln { position: relative; z-index: 1; width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; background: #0b1630; border: 2px solid #2b4a7a; cursor: pointer; }
.taln .ic { width: 24px; height: 24px; }
.taln.pick { border-radius: 50%; }
.taln.cap { width: 46px; height: 46px; border-width: 3px; transform: rotate(45deg); }
.taln.cap .ic, .taln.cap .talr { transform: rotate(-45deg); }
.taln .talr { position: absolute; right: -6px; bottom: -6px; font-style: normal; font-size: 10px; line-height: 12px; padding: 0 2px; background: #05070f; color: var(--dim); border: 1px solid #2b4a7a; }
.taln.cap .talr { right: -8px; bottom: -8px; }
.taln.locked, .taln.taken { opacity: 0.38; filter: grayscale(0.8); }
.taln.nopts { opacity: 0.7; }
.taln.open { border-color: var(--bc); box-shadow: 0 0 8px color-mix(in srgb, var(--bc) 60%, transparent); }
.taln.some, .taln.max { border-color: var(--bc); background: color-mix(in srgb, var(--bc) 28%, #0b1630); }
.taln.max .talr, .taln.some .talr { color: #fff; border-color: var(--bc); }
.taln.sel { outline: 2px solid #ffffff; outline-offset: 2px; }
.taln.just { animation: talburst 1s ease-out; }
@keyframes talburst { 0% { box-shadow: 0 0 0 0 var(--bc); transform: scale(1.35); } 60% { box-shadow: 0 0 0 16px transparent; } 100% { transform: scale(1); } }
.taln.cap.just { animation: talburstcap 1s ease-out; }
@keyframes talburstcap { 0% { box-shadow: 0 0 0 0 var(--bc); transform: rotate(45deg) scale(1.5); } 60% { box-shadow: 0 0 0 24px transparent; } 100% { transform: rotate(45deg) scale(1); } }
.taldet { border: 2px solid var(--bc, #2b4a7a); padding: 8px; background: rgba(5,10,24,0.55); min-height: 64px; }
.tallearn { max-width: 320px; }
.taldet.hint { --bc: #2b4a7a; color: var(--dim); }
.taldeth { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.taldeth b { color: var(--bc); font-size: 16px; }
.taldeth small { width: 100%; color: var(--dim); }
.taldet p { margin: 6px 0; font-size: 13px; line-height: 1.35; }
.talnext { color: #8aff9a; }
.talneed { color: #ffb07a; }
.talmax { color: #8aff9a; font-weight: 700; }
.tallearn { width: 100%; }

@media (max-width: 860px), (max-height: 520px) {
.talbrtabs { display: flex; flex-wrap: nowrap; overflow-x: auto; }
.talbrtabs .tab { flex: none; min-height: 36px; padding: 2px 8px; font-size: 12px; }
.talbrtabs .tab.on { border-color: var(--bc); color: var(--bc); }
.talbrtabs .tab .ic { width: 18px; height: 18px; }
.taltree { grid-template-columns: 1fr; }
.talbr { display: none; }
.talbr.on { display: block; }
.talblurb { min-height: 0; }
.talbody { flex-direction: row; align-items: flex-start; }
.taltree { flex: 1; }
.talgrid { grid-template-rows: repeat(5, 46px); max-width: 260px; margin: 0 auto; }
.taldet { width: 44%; flex: none; }
}

@media (max-height: 520px) {
.talhead { gap: 8px; margin-bottom: 4px; }
.talpts { padding: 2px 8px; } .talpts b { font-size: 18px; }
.talwho { font-size: 11px; }
.talbrtabs { margin-bottom: 4px; }
.talbrtabs .tab { min-height: 32px; }
.talblurb { display: none; }
.talbr { padding: 4px; }
.talgrid { grid-template-rows: repeat(5, 38px); }

.taln { width: 34px; height: 34px; } .taln .ic { width: 22px; height: 22px; }
.taln::after { content: ''; position: absolute; inset: -5px; }
.taln.cap { width: 34px; height: 34px; }
.taldet p { font-size: 12px; margin: 4px 0; }

body.touch .talbrh { display: none; }
.talbuilds { gap: 4px; margin-bottom: 3px; }
.talbuilds > b { display: none; }
.talbuild .tbload { min-width: 0; min-height: 26px; padding: 0 6px; flex-direction: row; gap: 4px; align-items: center; }
.talbuild .tbload small { display: none; }
.talbuild .tbsave { min-height: 26px; padding: 0 6px; }
.talhead { margin-bottom: 2px; }
body.touch .talreset { min-height: 30px; }
}
@media (max-width: 520px) { .talbody { flex-direction: column; } .taldet { width: auto; } }



@media (max-height: 460px) {
body.touch #hud .tr .hbtn { flex-direction: column; justify-content: center; gap: 1px; min-width: 50px; padding: 0 4px; font-size: 11px; line-height: 1; }
body.touch #hud .tr .hbtn > .ic { width: 20px; height: 20px; }
}



@media (min-height: 461px) and (max-width: 900px) {
body.touch #hud .tr .hbtn { flex-direction: column; justify-content: center; gap: 2px; min-width: 52px; padding: 0 5px; font-size: 11px; line-height: 1; }
body.touch #hud .tr .hbtn > .ic { width: 22px; height: 22px; }
}

.pbox.coach { width: min(460px, 92vw); max-width: min(460px, 92vw); }

#hud .lesson { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: min(380px, 44vw); display: flex; gap: 8px; align-items: center; padding: 6px 8px; background: rgba(8,18,44,0.88); border: 2px solid #ffd84a; box-shadow: 0 3px 0 var(--ink); pointer-events: auto; z-index: 45; animation: fadeIn 0.2s ease-out; }
#hud .lesson.hidden { display: none; }
#hud:has(.lesson:not(.hidden)) ~ #hint { display: none; }
#hud .lesson .lessonic { width: 28px; height: 28px; flex: none; }
#hud .lesson .lessontext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#hud .lesson .lessontext b { color: #ffe9a8; font-size: 13px; }
#hud .lesson .lessontext small { font-size: 11px; line-height: 1.3; color: var(--text); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }

#hud .lesson .lessontext { cursor: pointer; }
#hud .lesson.open .lessontext small, body.touch #hud .lesson.open .lessontext small { -webkit-line-clamp: unset; display: block; }
body.touch #hud .lesson.open { width: min(380px, 52vw); }
#hud .lesson .lessonbtns { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
#hud .lesson .x { background: none; border: 0; padding: 2px; cursor: pointer; }
#hud .lesson .x img { width: 14px; height: 14px; }
body.touch #hud .lesson { top: 54px; width: min(330px, 42vw); padding: 4px 6px; }
body.touch #hud .lesson .lessontext small { -webkit-line-clamp: 4; font-size: 12px; }
.coachhi { position: relative; outline: 3px solid #ffd84a !important; outline-offset: 3px; animation: coachpulse 1s ease-in-out infinite; z-index: 2; }
@keyframes coachpulse { 0%, 100% { outline-color: #ffd84a; box-shadow: 0 0 0 0 rgba(255,216,74,0.7); } 50% { outline-color: #fff6c8; box-shadow: 0 0 14px 4px rgba(255,216,74,0.6); } }


.slot.trophy:not(.on) { border-style: dashed; }
.slot.trophy.on { border-style: solid; border-color: #ffd84a; }
.pbox.trophies { width: min(640px, 100%); }
.trow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #1a3a6a; margin-bottom: 4px; opacity: 0.6; }
.trow.got { opacity: 1; border-color: #2b4a7a; }
.trow.on { border-color: #ffd84a; background: rgba(255,216,74,0.08); }
.trow > .ic { width: 28px; height: 28px; flex: none; }
.trow > div { flex: 1; }
.trow p { margin: 2px 0; font-size: 13px; }
.trow small { color: #ffd27a; }


.slot.spirit { border-color: #2f7a6c; }
.slot.spirit:not(.on) { border-style: dashed; }
.slot.spirit.on { border-style: solid; border-color: #7af0d0; }
.pbox.spirits { width: min(720px, 100%); }
.sphead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.sphead .spwho { font-weight: 700; }
.spslot { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--ink); border: 2px dashed #2f7a6c; padding: 0; }
.spslot.on { border-style: solid; border-color: #7af0d0; }
.spslot .ic { width: 32px; height: 32px; }
.sphead .spcount { color: var(--dim); margin-left: auto; }
.spgrid { display: grid; grid-template-columns: 1fr; gap: 4px; }
@media (min-width: 600px) { .spgrid { grid-template-columns: 1fr 1fr; } }
.spcard, .spwrap > .spcard { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 8px; border: 1px solid #1f4a5a; }
.spcard.got { border-color: #2f7a6c; }
.spcard.on { border-color: #7af0d0; background: rgba(122,240,208,0.08); }
.spcard > .ic { width: 32px; height: 32px; flex: none; }
.spcard.missing > .ic { filter: grayscale(1) brightness(0.55); }
.spcard.locked > .ic { filter: brightness(0) opacity(0.5); }
.spcard .sptext { flex: 1; min-width: 0; }
.spcard .sptext b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.spcard .spchip { font-style: normal; font-weight: 400; font-size: 11px; padding: 0 5px; border: 1px solid #2f7a6c; color: #7af0d0; }
.spcard.missing .spchip { color: var(--dim); border-color: #2b4a7a; }
.spcard p { margin: 2px 0; font-size: 12px; line-height: 1.3; }
.spcard small { display: block; color: #ffd27a; font-size: 11px; line-height: 1.3; }
.spcard .btn.small { flex: none; }
.spwrap { grid-column: 1 / -1; }
.spswap { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0 2px 40px; }
.spswap .btn.small { text-transform: none; letter-spacing: 0; }
#panel h3.sphd { display: flex; align-items: center; gap: 8px; }
#panel h3.sphd .btn.small { font-size: 12px; }
#hud .victory .vrow.spirit { color: #7af0d0; font-weight: 700; margin-top: 4px; }
#hud .victory .vrow.spirit.quiet { font-weight: 400; opacity: 0.85; }
@media (min-height: 700px) and (min-width: 700px) { .spcard p { font-size: 14px; } .spcard .sptext b { font-size: 15px; } .spcard small { font-size: 12px; } }


.questtrack { display: flex; flex-direction: column; gap: 2px; white-space: normal; }
.questtrack .qline { display: flex; align-items: center; gap: 5px; }
.questtrack .qline.bonus { color: #ffd84a; }
.questtrack .qline.alldone { color: #8affb0; }
.questtrack .qline.alldone .qric { border-color: #3a8a4a; }
.questtrack .qline.weekly { color: #c8b8ff; }
.questtrack .qline.track { color: #ffe9a8; }
.questtrack .qline.boss { color: #ff9a8a; }
.questtrack .qline.boss { align-items: flex-start; }
.questtrack .qline.boss .qric { margin-top: 1px; }
.questtrack .qline.boss small { display: block; color: #ffd8a8; font-size: 11px; }
body.touch .questtrack .qline.boss small { font-size: 12px; }
.questtrack .qric { width: 16px; height: 16px; flex: none; image-rendering: pixelated; border: 1px solid; background: rgba(5,10,24,0.6); }
body:not(.touch) .questtrack .qric { cursor: pointer; }
.questtrack .qgoal { margin-top: 2px; padding-top: 2px; border-top: 1px solid rgba(138,255,154,0.25); color: #d8f4c8; }
body.touch .questtrack { font-size: 12px; }
body.touch .questtrack .qric { width: 14px; height: 14px; }
body.touch .questtrack.folded .qgoal { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }


.pvpbtn.off { border-color: #7ae06a; }
.evline { display: flex; align-items: center; gap: 4px; }
.quest .qreward .qrxp { font-size: 10px; line-height: 1.15; color: #b8f0a0; }
.quest .qswap, .quest .qmap { margin-top: 4px; align-self: flex-start; font-size: 11px; padding: 2px 8px; }
.quest .qswap img, .quest .qmap img { width: 12px; height: 12px; }

body.touch .questtrack.folded:not(:has(.qgoal)) > :not(:first-child) { display: none; }
body.touch .questtrack.folded:has(.qgoal) > :not(.qgoal) { display: none; }
body.touch .questtrack.folded::after { content: attr(data-more); display: block; margin-top: 2px; color: #8affb0; font-size: 12px; font-weight: 700; }
body.touch .questtrack { position: relative; -webkit-touch-callout: none; user-select: none; }

.panelsafe { position: fixed; top: 48px; left: 50%; transform: translateX(-50%); z-index: 60; padding: 3px 10px; font-size: 12px; background: rgba(8,30,20,0.9); border: 2px solid #3a8a4a; color: #b8f0a0; pointer-events: none; }
.panelsafe.bad { background: rgba(50,8,12,0.92); border-color: #ff5a5a; color: #ffd0d0; }
.panelsafe.soon { background: rgba(50,36,6,0.92); border-color: #ffb84a; color: #ffe2a8; }
.panelsafe.hidden { display: none; }
.phead .panelsafe { position: static; transform: none; margin: 0 8px; align-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#panel.hurting .pbox { animation: panelHurt 0.6s ease-out; }
@keyframes panelHurt { 0% { box-shadow: 0 0 0 3px #ff3a3a, 0 4px 0 var(--ink); } 100% { box-shadow: 0 4px 0 var(--ink); } }
.questtrack .qline.bossback { color: #c8b8e0; }
#banner .bn.mend, .bn.mend { border-color: #7ae06a; }

.item .irar { position: absolute; left: 3px; top: 1px; font-size: 9px; line-height: 1; text-shadow: 1px 1px 0 var(--ink); pointer-events: none; }

.helptabs { flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.helptabs .tab { display: flex; align-items: center; gap: 4px; }
.helptabs .tab .ic { width: 16px; height: 16px; }
body.touch .helptabs .tab { min-height: 30px; padding: 2px 7px; font-size: 12px; }
body.touch .helptabs .tab .ic { width: 14px; height: 14px; }
body.touch .talbuild { gap: 8px; }
body.touch .talbuild .btn { min-height: 36px; }
body.lessonon:not(.touch) #banner { top: calc(11% + 64px); }
body.lessonon.touch #banner { top: 25%; }
.tbtn.nope { animation: nope 0.28s linear; }
@keyframes nope { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .tbtn.nope { animation: none; outline: 2px solid #ff6a6a; } }

@media (min-width: 700px) and (min-height: 461px) {
.pausecol { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pausecol > :first-child, .pausecol > div, .pausecol > .pvpbtn { grid-column: span 2; }
}
.tabs .eqbest { margin-left: auto; align-self: center; }


@media (max-height: 460px) {
body.touch:has(.gaugewrap .pvptag:not(.hidden)) .minimap { top: 134px; }
body.touch:has(.gaugewrap .pvptag:not(.hidden) ~ .pvptag:not(.hidden)) .minimap { top: 152px; }
body.touch:has(.gaugewrap .pvptag:not(.hidden) ~ .pvptag:not(.hidden) ~ .pvptag:not(.hidden)) .minimap { top: 170px; }
body.touch:has(.gaugewrap .pvptag:not(.hidden)) #hud .mapbtn { top: 134px; }
body.touch:has(.gaugewrap .pvptag:not(.hidden) ~ .pvptag:not(.hidden)) #hud .mapbtn { top: 152px; }
body.touch:has(.gaugewrap .pvptag:not(.hidden) ~ .pvptag:not(.hidden) ~ .pvptag:not(.hidden)) #hud .mapbtn { top: 170px; }
}

#hud .victory { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); z-index: 35; min-width: 240px; padding: 10px 18px; text-align: center; background: rgba(20,14,2,0.9); border: 3px solid var(--gold); box-shadow: 0 0 24px rgba(255,216,74,0.45), 0 4px 0 var(--ink); pointer-events: auto; cursor: pointer; animation: vicIn 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
#hud .victory.hidden { display: none; }
#hud .victory .vtitle { display: block; font-size: 26px; letter-spacing: 3px; color: var(--gold); text-shadow: 2px 2px 0 var(--ink); }
#hud .victory .vboss { font-size: 15px; font-weight: 700; color: #ffe9a8; margin: 2px 0 6px; display: flex; align-items: center; justify-content: center; gap: 4px; }
#hud .victory .vrow { font-size: 13px; color: var(--text); display: flex; align-items: center; justify-content: center; gap: 4px; }
#hud .victory .vrow.blood { color: #ff8a8a; }
#hud .victory .vrow.vshare { display: block; max-width: 300px; margin: 0 auto 4px; color: #ffe9a8; }
#hud .victory .vrow.vmood { font-weight: 700; } #hud .victory .vrow.m-enraged { color: #ffb070; } #hud .victory .vrow.m-armored { color: #e4ecf4; } #hud .victory .vrow.m-stormy { color: #bff4ff; } #hud .victory .vrow.m-brood { color: #f0c8ff; }
#hud .victory .vrow.trophy { color: var(--gold); font-weight: 700; margin-top: 4px; }
body.touch #hud .victory { top: 12%; min-width: 200px; padding: 6px 12px; }
body.touch #hud .victory .vtitle { font-size: 20px; }
@keyframes vicIn { from { transform: translateX(-50%) scale(0.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #hud .victory { animation: none; } }
body.vicon #banner { top: var(--vicb, calc(18% + 150px)); }
body.vicon #hint { display: none; }
body.vicon.touch #banner { top: var(--vicb, calc(12% + 120px)); }
.taldet .tallearn { margin: 6px 0 2px; }
.card .lockbar { display: block; height: 4px; margin-top: 3px; background: rgba(0,0,0,0.45); border: 1px solid #3a4a6a; }
.card .lockbar b { display: block; height: 100%; background: var(--gold); }

#title .card { position: relative; }
#title .card .cardinfo { position: absolute; top: 4px; right: 4px; line-height: 0; opacity: 0.9; }
#title .card .cardinfo .ic { width: 16px; height: 16px; }

.pbox.animal { width: min(480px, 100%); }
.ashead { display: flex; align-items: center; gap: 12px; }
.ashead .portrait { height: 52px; width: auto; max-width: 40%; image-rendering: pixelated; object-fit: contain; }
.ashead .asrole { display: block; color: var(--gold); font-size: 14px; }
.ashead .lvtag { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-style: normal; }
.asdesc { margin: 6px 0; font-size: 14px; line-height: 1.4; }
.asunlock { margin: 6px 0; padding: 6px 8px; border: 2px solid var(--line); background: rgba(8,18,44,0.5); }
.asunlock p { margin: 0 0 4px; font-size: 13px; }
.asunlock .lockbar { display: block; height: 5px; margin-bottom: 6px; background: rgba(0,0,0,0.45); border: 1px solid #3a4a6a; }
.asunlock .lockbar b { display: block; height: 100%; background: var(--gold); }
.aslist { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.asrow { display: flex; align-items: flex-start; gap: 8px; }
.asrow .ic { flex: none; width: 22px; height: 22px; }
.asrow p { margin: 0; font-size: 13px; line-height: 1.35; color: var(--dim); }
.asrow p b { color: var(--text); }
.trackbtn.on { border-color: var(--gold); color: #ffe9a8; box-shadow: 0 0 6px rgba(255,216,74,0.45); }
.skin .trackbtn { margin-top: 2px; min-height: 30px; padding: 2px 8px; }
body.touch .skin .trackbtn { min-height: 36px; }

.asunlock p.trackwhere { margin: 4px 0 0; font-size: 12px; }


.qtracked { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; padding: 2px 4px 2px 2px; border: 2px solid rgba(255,233,168,0.45); background: rgba(255,233,168,0.07); }
.qtracked .qtgo { flex: 1; min-width: 0; min-height: 36px; display: flex; align-items: center; gap: 6px; padding: 2px 6px; font: inherit; font-size: 13px; color: #ffe9a8; text-align: left; background: none; border: 0; cursor: pointer; }
body.touch .qtracked .qtgo { min-height: 44px; }
.qtracked .trackbtn { flex: none; }
@media (max-height: 460px) { .ashead .portrait { height: 36px; } .asdesc { font-size: 13px; margin: 4px 0; } .aslist { gap: 4px; } }


@media (max-width: 760px) { body.touch #hud .lesson { top: 54px; width: min(280px, 42vw); } }
@media (min-height: 461px) { body.touch #hud .lesson { top: 64px; width: min(320px, 40vw); } }
@media (max-height: 460px) { .pausecol .oesched, .pausecol .evline:not(.oeline):not(.oefixlist) { display: none; } }


@media (max-height: 460px) { .pausecol > div:has(> .evline) { min-width: 0; } .pausecol .evline.oeline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } }


@media (max-height: 460px) { .pausecol .evline.oeline { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; } }




@media (max-height: 460px) { .pausecol .evline.oefixlist { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; margin: 0; } }


@media (max-height: 460px) {
#title .cards:not(.mini) .card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 1px; }
#title .card b { display: flex; flex-direction: column; align-items: center; line-height: 1.15; max-width: 100%; overflow-wrap: anywhere; }
#title .card .lvtag, #title .card .newtag { margin-left: 0; margin-top: 1px; }
#title .card .lockline { text-align: center; }


#title .subnote { display: none; }
#title .cnname { display: none; }
#title .menurow .btn.small { min-height: 38px; padding-top: 2px; padding-bottom: 2px; }
}
@media (max-height: 460px) and (max-width: 700px) {
#title .card b { font-size: 12px; }
#title .card small { font-size: 10px; }
#title .card .lockline { font-size: 10px; }
#title .card .portrait { height: 22px; }
}


@media (max-height: 460px) { #title .card small, #title .card .lockline { font-size: 12px; line-height: 1.1; } }
@media (max-height: 460px) and (max-width: 700px) { #title .card { padding-left: 2px; padding-right: 2px; } }


@media (max-height: 400px) { #title .card.locked > small { display: none; } }
body.touch .item .iname { font-size: 12px; min-height: 26px; }
body.touch .item .irar { font-size: 12px; }
body.touch .item:has(.irar) { padding-top: 12px; }
body.touch .item .irar ~ .eqmark { left: auto; right: 2px; }

.quest .qrwait { color: #ffd84a; }
.btn.danger.armed { background: #a8243a; color: #fff; }

.travelcol .btn.strong { border-color: #c8643a; }
.travelcol .btn.strong b { color: #ffb48a; }
.travelcol .btn.strong.armed { background: #8a3a1e; }
.travelcol .btn.strong.armed b { color: #fff; }

.btn:has(> .drain) { position: relative; }
.btn > .drain { position: absolute; left: 6px; right: 6px; bottom: 5px; height: 3px; background: #ffd84a; box-shadow: 0 1px 0 var(--ink); transform-origin: left center; animation-name: drain2; animation-timing-function: linear; animation-fill-mode: forwards; pointer-events: none; }
@keyframes drain2 { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.btn.unarmed { animation: unarm 0.7s ease-out; }
@keyframes unarm { 0% { background: #3a4a6a; border-color: #ffd84a; } 100% { } }
@media (prefers-reduced-motion: reduce) { .btn > .drain { animation: none; transform: none; } .btn.unarmed { animation: none; } }

.lvhint { color: var(--dim); font-size: 0.85em; text-transform: none; letter-spacing: 0; }
.startpick .lvhint.goalhint { color: #8aff9a; }


.startpick .btn.tog.on::before { content: ''; display: inline-block; flex: none; width: 5px; height: 10px; margin: 0 8px 3px 2px; border: solid currentColor; border-width: 0 3px 3px 0; transform: rotate(45deg); vertical-align: middle; }
.spcard small.spnow { color: #8affb0; }
.spcard .spgo { align-self: center; }

.hbtn.travelbtn.cancel { border-color: #ffd84a; color: #ffd84a; }
.sigrow .sig.sreg.cancel { color: #ffd84a; border-color: #ffd84a; }


.pvptag.flash { animation: tagflash 0.4s ease-in-out 3; }
@keyframes tagflash { 50% { filter: brightness(1.8); transform: scale(1.08); } }
.zonetext.flash { animation: zoneflash 0.4s ease-in-out 3; }
@keyframes zoneflash { 50% { color: #8ff0a8; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .pvptag.flash, .zonetext.flash { animation: none; outline: 2px solid #ffd84a; } }


.travelcol .btn b, .startpick .btn { word-break: keep-all; overflow-wrap: anywhere; }
.travelcol .btn b { text-align: left; }
.questtrack .qline.qaway { opacity: 0.55; }


body.touch.tb-small .abilities { transform: scale(0.82); transform-origin: bottom right; }
body.touch.tb-big .abilities { transform: scale(1.18); transform-origin: bottom right; }
body.touch.lefty .abilities { right: auto; left: max(14px, env(safe-area-inset-left)); flex-direction: row-reverse; }
body.touch.lefty.tb-small .abilities, body.touch.lefty.tb-big .abilities { transform-origin: bottom left; }
body.touch.lefty .zoombtns { margin-right: 0; margin-left: 12px; }
body.touch.nozoom .zoombtns { display: none; }
body.touch.tb-clear .abilities .tbtn { opacity: 0.5; }
.pausecol .zoomrow { display: flex; align-items: center; gap: 8px; justify-content: center; }
.pausecol .zoomrow .btn { min-width: 48px; font-size: 18px; }
.startrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 6px 0; }
.startrow > span { color: var(--dim); font-size: 13px; }

.pearls { margin-top: 8px; }
.pearllist { display: flex; flex-wrap: wrap; gap: 6px; }
.pearlchip { display: flex; align-items: center; gap: 5px; padding: 3px 8px; border: 2px solid #3a4a7a; background: rgba(5,10,24,0.6); font-size: 12px; }
.pearlchip .ic { width: 22px; height: 22px; image-rendering: pixelated; }
.pearlchip small { color: var(--dim); font-size: 10px; }
.pearlchip.locked { opacity: 0.75; }
.victory .vrow.pearl { color: #ffe9f8; }

.ascbadge { display: inline-block; font-style: normal; font-weight: 700; font-size: 11px; line-height: 14px; padding: 0 4px; color: #1a1030; background: #bfe8ff; }
.ascbadge.a2 { background: #d8b8ff; } .ascbadge.a3 { background: #ffd84a; }
.asclist { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.ascchip { display: flex; align-items: center; gap: 5px; padding: 3px 8px; border: 2px solid #3a4a7a; background: rgba(5,10,24,0.6); color: inherit; font: inherit; font-size: 12px; cursor: pointer; min-height: 32px; }
.ascchip .ic, .asccost .ic, .ascrowt .ic, .asctrade .ic { width: 22px; height: 22px; image-rendering: pixelated; }
.ascchip.sel { border-color: var(--gold); background: rgba(60,48,10,0.55); }
.ascchip.locked { opacity: 0.6; }
.ascbox { border: 2px solid #3a4a7a; background: rgba(5,10,24,0.55); padding: 8px 10px; margin: 6px 0; }
.ascbox h3 { margin: 0 0 4px; }
.ascbox p { margin: 4px 0; }
.ascgives { margin: 2px 0 6px 18px; padding: 0; }
.asccost { display: flex; align-items: center; gap: 6px; }
.asctrade { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.asctrade .note { flex-basis: 100%; margin: 0; }
.asctrade .btn { display: inline-flex; align-items: center; gap: 4px; }
.ascrowt .btn { display: inline-flex; align-items: center; gap: 6px; }
@media (max-height: 420px) { .pbox.ascend > .pbody > .note { display: none; } .ascbox { padding: 5px 8px; } .ascbox p { margin: 2px 0; } .asclist { gap: 4px; margin: 4px 0; } .ascchip { padding: 2px 6px; } }

.titletravel { display: flex; justify-content: center; margin-top: 4px; }
.titletravel:empty { display: none; }
.travelcol .btn.on { border-color: var(--gold); }


.travelh { margin: 8px 0 4px; font-size: 14px; }



body.touch .taln, body.touch .tabs .tab { min-height: 44px; min-width: 44px; }




@media (min-height: 521px) { body.touch .talgrid { grid-template-rows: repeat(5, 58px); } }
body.touch .ilevel { min-height: 44px; }


.skins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 560px) { .skins { grid-template-columns: repeat(2, 1fr); } }
.skin { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px; background: var(--panel); border: 2px solid var(--line); text-align: center; }
.skin .portrait { height: 64px; max-width: 100%; image-rendering: pixelated; object-fit: contain; }
.skin.on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.skin.t2 { border-color: #6a5ad8; } .skin.t3 { border-color: #d8a830; }
.skin.locked .portrait { opacity: 0.85; }
.skin .dimtxt { font-size: 11px; margin: 0; line-height: 1.25; }
.skin .lockbar { display: block; width: 100%; height: 4px; margin-top: 2px; background: rgba(0,0,0,0.45); border: 1px solid #3a4a6a; }
.skin .lockbar b { display: block; height: 100%; background: var(--gold); }
.skin small { color: var(--gold); font-size: 11px; }


@keyframes radiantGlow { 0%, 100% { box-shadow: inset 0 0 0 2px #fff0a0, 0 0 4px #fff0a0; } 50% { box-shadow: inset 0 0 0 2px #ffffff, 0 0 12px #ffe060; } }
.tile[data-gr="7"], .slot.r7, .item.r7 { animation: radiantGlow 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .tile[data-gr="7"], .slot.r7, .item.r7 { animation: none; box-shadow: inset 0 0 0 2px #fff0a0, 0 0 8px #ffe060; } }
.skin .sdone { color: #8affb0; text-decoration: line-through; }
#title .card .lvtag { white-space: nowrap; }


.hbtn.gearbtn { position: relative; }
.badge.relbadge { background: #2a6a3a; min-width: 22px; }
.badge.relbadge.pop { animation: relpop 0.35s ease-out; }
@keyframes relpop { 0% { transform: scale(1.6); } 100% { transform: scale(1); } }


@media (max-height: 460px) {
body.touch #msgs { top: var(--msgt, 56px); left: var(--msgl, 50%); width: var(--msgw, min(400px, 60vw)); transform: none; }
body.touch.bossing #msgs { top: var(--bbb, 92px); }
body.touch #hud .lesson { top: var(--rowb, 54px); left: var(--msgl, 50%); transform: none; width: min(330px, var(--msgw, 42vw)); }
}



body.touch .questtrack.folded:has(.qgoal) { display: flex; align-items: center; gap: 6px; }
body.touch .questtrack.folded .qgoal { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; flex: 1; min-width: 0; white-space: normal; overflow: hidden; margin-top: 0; padding-top: 0; border-top: 0; line-height: 1.2; }
body.touch .questtrack.folded:has(.qgoal)::after { flex: none; margin: 0; padding: 0 4px; border: 1px solid #3a6a2a; }





@media (max-height: 520px) {
body.touch .taln, body.touch .taln.cap { min-height: 0; min-width: 0; }
body.touch .taln::after { inset: -4px; }
.talgrid { grid-template-rows: repeat(5, 42px); }
}


@media (max-height: 420px) {
.talgrid { grid-template-rows: repeat(5, 40px); }
#panel.top .pbox { margin-top: 0; max-height: 100%; }
.taln, .taln.cap, body.touch .taln, body.touch .taln.cap { width: 32px; height: 32px; } .taln .ic { width: 22px; height: 22px; }
.taln .talr { right: -9px; bottom: -4px; font-size: 9px; line-height: 10px; }
.talbuilds, .talbrtabs { margin-bottom: 2px; }
.taln::after, body.touch .taln::after { inset: -4px; }
.taln.cap::after, body.touch .taln.cap::after { inset: -1px; }
.talbuild .tbload, .talbuild .tbsave { min-height: 26px; }
.talhead { margin-bottom: 2px; }
.talbrtabs .tab { min-height: 30px; }
}
.bossbar .bairlow { color: #ff5a5a; animation: stagpulse 0.6s ease-in-out infinite; }
.swapbtn { max-width: 100%; } .swapbtn > span { white-space: normal; overflow-wrap: anywhere; min-width: 0; text-align: left; }


.celebrate { position: fixed; inset: 0; z-index: 70; pointer-events: none; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(255,224,138,0.55) 0%, rgba(255,200,60,0.18) 40%, rgba(0,0,0,0) 70%); animation: celFade 2.4s ease-out forwards; }
.celebrate .celbox { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 24px; background: rgba(20,14,2,0.88); border: 3px solid var(--gold); box-shadow: 0 0 40px rgba(255,216,74,0.7), 0 4px 0 var(--ink); animation: celPop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.4); text-align: center; }
.celebrate .celbox .ic.big { width: 48px; height: 48px; }
.celebrate .celbox b { font-size: 26px; color: var(--gold); text-shadow: 2px 2px 0 var(--ink); }
.celebrate .celbox span { font-size: 15px; color: var(--text); }
@keyframes celFade { 0% { opacity: 0; } 8% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes celPop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
body.touch .celebrate .celbox b { font-size: 20px; }

.celebrate .celrays { position: absolute; left: 50%; top: 50%; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,216,74,0.34) 0deg 9deg, rgba(255,216,74,0) 9deg 30deg); -webkit-mask-image: radial-gradient(circle, #000 0%, #000 28%, transparent 68%); mask-image: radial-gradient(circle, #000 0%, #000 28%, transparent 68%); animation: celRays 2.4s linear forwards; }
@keyframes celRays { 0% { transform: scale(0.3) rotate(0deg); } 14% { transform: scale(1) rotate(7deg); } 100% { transform: scale(1.06) rotate(50deg); } }
.celebrate .celbox { position: relative; }
.celebrate .celtop { display: flex; align-items: center; justify-content: center; gap: 10px; }
.celebrate .celpic { height: 48px; width: auto; max-width: 150px; image-rendering: pixelated; object-fit: contain; }
body.touch .celebrate .celrays { width: 340px; height: 340px; margin: -170px 0 0 -170px; }
body.touch .celebrate .celpic { height: 36px; max-width: 110px; }
@media (prefers-reduced-motion: reduce) { .celebrate .celrays { animation: none; } .celebrate .celbox { animation: none; } }


.bossbar .bheal { color: #7aff8a; }
.bossbar.healing .fill.boss { background: linear-gradient(90deg, #3aa04a, #7aff8a); animation: healPulse 0.6s ease-in-out infinite alternate; }
@keyframes healPulse { from { filter: brightness(1); } to { filter: brightness(1.35); } }



@media (min-width: 700px) and (max-height: 640px) and (min-height: 461px) {
#logo { width: 200px; }
.tagline { font-size: 14px; margin: 2px 0; }
#title .card .desc:not(.lockline) { display: none; }
#title .card { padding: 6px; }
#title .card .portrait { height: 40px; }
#title .card b { font-size: 15px; }
.card .lvtag, .card .newtag { white-space: nowrap; }
.titlebox { padding: 0 0 6px; }
#title { padding: 6px 12px; }
#title h3 { margin: 2px 0; }
.subnote { margin-bottom: 2px; }
}


#title::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 22px; pointer-events: none; background: linear-gradient(transparent, rgba(5,10,24,0.75)); }




#hud .lesson { background: #0a1430; }
#hint { background: #0a1430; }
body:not(.touch) #hud .lesson { top: auto; bottom: 64px; }
body.lessonon:not(.touch) #banner { top: 11%; }
body.touch #msgs { max-height: calc(50vh - 34px - var(--msgt, 56px)); overflow: hidden; }
body.deadscreen #netstatus.show.soft { top: auto; bottom: 8px; }


body.touch .bn, body.touch .bn.boss, body.touch .bn.ascend, body.touch .bn.brood { font-size: 13px; padding: 3px 10px; line-height: 1.25; }
body.touch.bossing .bn { font-size: 12px; }
body.touch.lessonon:not(.vicon) #msgs { max-height: max(64px, calc(50vh - 30px - var(--lessonb, 120px))); }


.stick { border-radius: 50%; border: 3px solid rgba(160,230,255,0.5); background: radial-gradient(circle, rgba(20,60,110,0.15) 40%, rgba(20,60,110,0.4) 100%); box-shadow: 0 0 12px rgba(90,200,255,0.25), inset 0 0 10px rgba(90,200,255,0.2); }
.stick i { border-radius: 50%; background: radial-gradient(circle at 40% 35%, #e8faff, #7ad8ff 55%, #2a80c0); border: 2px solid rgba(255,255,255,0.85); box-shadow: 0 0 10px rgba(120,220,255,0.6); }

.tbtn .cdnum { inset: auto 2px 2px auto; font-size: 14px; padding: 0 3px; background: rgba(5,10,24,0.8); align-items: center; justify-content: center; }
.tallearnrow { display: flex; gap: 6px; flex-wrap: wrap; }
.invtools { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin: 2px 0 6px; } .invtools small { color: var(--dim); margin-left: 4px; }


#dead { pointer-events: none; } #dead .box { pointer-events: auto; }
body.deadscreen #hud .tr { pointer-events: auto; }
.chatbtn .badge.dm { background: #c050ff; }
.pvpchoice .row { display: flex; gap: 6px; flex-wrap: wrap; } .pvpchoice .note { margin: 0 0 4px; }






body.touch.bossfight .questtrack, body.touch.bossfight .questtrack.folded:has(.qgoal) { display: none !important; }
body.touch.bossfight #toasts { display: none; }


body.touch.bossfight #hint { display: none !important; }
body.touch.bossing:not(.bossfight) #hint { top: var(--bbb, 92px); }
.bossbar .bhint { display: none; }
body.touch.bossfight .bossbar .bhint:not(:empty) { display: block; margin-top: 2px; font-size: 10px; line-height: 1.2; color: #ffe8a8; text-shadow: 1px 1px 0 var(--ink); }
@media (max-height: 340px) { body.touch.bossfight .bossbar .bhint:not(:empty) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
body.touch .tbtn .abname { white-space: normal !important; text-overflow: clip !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.05 !important; text-align: center; }
.stick { opacity: 0.45; transition: opacity 0.15s; } .stick.moving { opacity: 0.9; }
.tbtn small { white-space: normal; text-align: center; line-height: 1.05; max-width: 100%; overflow-wrap: anywhere; }
body.touch .tbtn small { font-size: 11px; }
.bossbar.duo .fill.shell { background: linear-gradient(90deg, #6a3ab0, #b070ff); }


.pbox .geartabs { position: sticky; top: -1px; z-index: 5; background: #0b1630; padding: 4px 0; }




.hbtn.ascbtn.dim { opacity: 0.5; filter: grayscale(0.7); }
.toast { white-space: normal; overflow-wrap: anywhere; }
body:has(#panel:not(.hidden):not(.nonmodal)) #toasts { z-index: 44; }
body.vicon #toasts { visibility: hidden; }
.travelcol .btn { width: 100%; box-sizing: border-box; }

.xpbar.qpop { animation: xpQpop 0.5s ease-out; }
@keyframes xpQpop { 0% { filter: brightness(2.2); transform: scaleY(1.9); } 100% { filter: brightness(1); transform: scaleY(1); } }






@media (max-height: 460px) {
body.touch #hud .lesson { top: var(--msgt, 56px); width: min(400px, var(--msgw, 42vw)); min-height: 44px; padding: 2px 2px 2px 6px; gap: 6px; }
body.touch #hud .lesson .lessonic { width: 20px; height: 20px; }
body.touch #hud .lesson .lessontext { gap: 0; }
body.touch #hud .lesson .lessontext b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.touch #hud .lesson:not(.open) .lessontext small { -webkit-line-clamp: 1; }
body.touch #hud .lesson .lessonbtns { flex-direction: row; align-items: center; gap: 0; }
body.touch #hud .lesson .lessonbtns .btn { min-height: 38px; min-width: 0; padding: 2px 8px; font-size: 12px; }
body.touch #hud .lesson .x { width: 34px; height: 40px; }


body.touch #hud .lesson .lessonbtns .lessonspend ~ .btn { display: none; }
body.touch #hud .lesson.open { width: min(400px, var(--msgw, 52vw)); }
body.touch #hud .lesson.open .lessontext b { white-space: normal; }
body.touch #hud .victory { top: var(--msgt, 56px); left: var(--msgl, 50%); transform: none; width: min(420px, var(--msgw, 60vw)); min-width: 0; padding: 3px 10px 4px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 12px; animation: fadeIn 0.25s ease-out; }
body.touch.bossing #hud .victory { top: var(--bbb, 62px); }
body.touch #hud .victory .vtitle { font-size: 16px; letter-spacing: 2px; }
body.touch #hud .victory .vboss { margin: 0; font-size: 13px; }
body.touch #hud .victory .vrow { font-size: 12px; }
body.touch #hud .victory .vrow.vshare { flex-basis: 100%; margin: 0; }
body.touch.vicon #msgs { max-height: max(48px, calc(50vh - 30px - var(--vicb, 120px))); }
}


.questtrack .qgshort { display: none; }
body.touch .questtrack.folded .qgfull { display: none; }
body.touch .questtrack.folded .qgshort { display: inline; }
body.touch .questtrack.folded:has(.qgoal) { flex-direction: row; padding-top: 2px; padding-bottom: 2px; }


@media (max-height: 460px) {
body.touch .minimap { width: 104px; height: 48px; }
body.touch:not(.lefty) #hud .minimap { pointer-events: auto; }
body.touch:not(.lefty) #hud .mapbtn { display: none; }
}



.pbox.map { width: min(900px, 100%, calc((100vh - 150px) * var(--mapk) + 32px)); }
#panel .pbox.map .minimap { position: static; display: block; width: min(100%, calc((100vh - 150px) * var(--mapk))); margin: 0 auto; height: auto; aspect-ratio: var(--mapk); max-height: calc(100vh - 100px); transform: none; opacity: 1; pointer-events: auto; cursor: pointer; border-color: #3a5a8c; }


body.touch .tbtn .cdnum { inset: 2px 2px auto auto; font-size: 13px; line-height: 15px; }
body.touch .tbtn.ab3 { width: 64px; height: 64px; margin-bottom: 26px; }
@media (min-height: 600px) { body.touch .tbtn.ab3 { width: 72px; height: 72px; margin-bottom: 30px; } }


@media (min-height: 461px) {
body.touch:has(.gaugewrap .pvptag:not(.hidden) ~ .pvptag:not(.hidden)) .minimap, body.touch:has(.gaugewrap .pvptag:not(.hidden) ~ .pvptag:not(.hidden)) #hud .mapbtn { top: 146px; }
body.touch:has(.gaugewrap .pvptag:not(.hidden) ~ .pvptag:not(.hidden) ~ .pvptag:not(.hidden)) .minimap, body.touch:has(.gaugewrap .pvptag:not(.hidden) ~ .pvptag:not(.hidden) ~ .pvptag:not(.hidden)) #hud .mapbtn { top: 164px; }
}


body.deadscreen.panelopen #dead { visibility: hidden; }


.pbox { position: relative; }
.morehint { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 2px 12px; font-size: 12px; font-weight: 700; color: #ffe9a8; background: rgba(8,18,44,0.95); border: 2px solid var(--gold); box-shadow: 0 2px 0 var(--ink); animation: bob 1.6s ease-in-out infinite; }
#title > .morehint { position: fixed; bottom: 8px; z-index: 2; }
body:not(.touch) .morehint { display: none; }

@media (max-height: 460px) {
.pbox.talents .pbody { display: flex; flex-direction: column; }
.pbox.talents .pbody > * { flex: none; }
.pbox.talents .talbuilds { order: 1; margin: 6px 0 0; }
}


@media (min-width: 700px) and (min-height: 461px) {
body.touch #title .card .desc:not(.lockline) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.touch #title .cards:not(.mini) .card b { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; }
body.touch #title .card .lvtag, body.touch #title .card .newtag { margin-left: 0; white-space: nowrap; }
}
@media (min-width: 700px) and (max-width: 959px) and (min-height: 461px) {
body.touch #title .cards:not(.mini) .card { width: calc((100vw - 54px) / 4); }
}

@media (min-width: 700px) and (min-height: 461px) {
body.touch #dead .box { width: min(880px, 100%); }
body.touch #dead .cards.mini .card { width: 98px; }
body.touch #dead .dstats { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
}


@media (orientation: portrait) and (min-height: 461px) {
body.touch #hud .lesson, body.touch #hud .victory { top: var(--toast-top, 180px); }
body.touch.lessonon:not(.vicon) #banner { top: var(--lessonb, 25%); }
}


body.vicon.lessonon:not(.touch) #banner { top: var(--vicb, calc(18% + 150px)); }


body:not(.touch) .toast { max-width: min(560px, calc(50vw - 200px)); }


@media (orientation: portrait) and (min-height: 461px) and (max-width: 900px) {
body.touch .ocean { position: absolute; right: 0; top: 50px; margin: 0; white-space: nowrap; }
body.touch .gaugewrap { top: 74px; }
}


body.panelopen #hud .badge { visibility: hidden; }
.morehint { left: auto; right: 10px; transform: none; opacity: 0.92; }
#title > .morehint { left: auto; right: 12px; }



.startrow.startpick { flex-direction: row; }
.pausecol.travelcol.bosscol > .btn { grid-column: 1 / -1; }

.pbox.login { width: min(520px, 100%); }
.loginweek { font-weight: 700; color: var(--gold); margin: 2px 0 6px; text-align: center; }
.logintrack { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 8px; }
.lday { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border: 2px solid var(--line); background: rgba(8,18,44,0.6); font-size: 11px; min-width: 0; }
.lday small { font-size: 10px; color: var(--dim); white-space: nowrap; }
.lday .ic { width: 24px; height: 24px; }
.lday.done { opacity: 0.55; }
.lday.now { border-color: var(--gold); box-shadow: 0 0 10px rgba(255,216,74,0.45); opacity: 1; }
.lday.big { border-color: #e07ad8; }
.lday.big.now { border-color: var(--gold); }
.lday .ltick { position: absolute; right: 1px; bottom: 1px; width: 12px; height: 12px; }
.loginrew { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; text-align: left; }
.loginrew.got { color: var(--gold); }
.titlelogin { margin: 4px 0 0; font-size: 13px; color: #ffe9a8; display: flex; align-items: center; justify-content: center; gap: 4px; }
.titlelogin .tlnext { margin-left: 2px; }
.pvptag.boosttag { color: #e8ffd0; background: #2a6a2a; border-color: #7ae06a; }
.btn.loginlink { width: 100%; margin-bottom: 6px; }
body.touch .lday small { font-size: 9px; }
.pmem .ps.psea { color: #c8a0ff; }

body.touch .tbtn.dash { width: 64px; height: 64px; margin-bottom: 26px; }
@media (min-height: 600px) { body.touch .tbtn.dash { width: 72px; height: 72px; margin-bottom: 30px; } }
body:not(.touch) .abilities .tbtn.dash { order: 0; }
.pvptag.sharetag { color: #e8f4ff; background: #2a4a7a; border-color: #7ac8ff; }


@media (max-height: 380px) {
.pbox.login .note { display: none; }
.pbox.login .loginweek { margin: 0 0 2px; }
.pbox.login .logintrack { margin-bottom: 4px; }
.pbox.login .lday { padding: 2px 1px; }
.pbox.login .lday .ic { width: 18px; height: 18px; }
.pbox.login .loginrew { margin: 2px 0; }
.pbox.login .col { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pbox.login .col > p { width: 100%; margin: 0; }
}

.clam.busy { cursor: pointer; touch-action: manipulation; }
.clam.tap { animation: clamtap 0.12s ease-out; }
@keyframes clamtap { 50% { transform: scale(1.06); } }

.clam.won { animation: clamwon 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
@keyframes clamwon { 0% { transform: scale(1); filter: brightness(1.6); } 30% { transform: scale(1.1); } 100% { transform: scale(1); filter: none; } }
.clam.won.tap { animation: clamtap 0.12s ease-out; }
@media (prefers-reduced-motion: reduce) { .clam.won { animation: none; } }
.clamcol { display: flex; flex-direction: column; align-items: center; }
.forgetap { margin: 2px 0 0; text-align: center; font-size: 12px; }

select.musicpick { font: inherit; font-size: 13px; color: #e8f4ff; background: #0d1b3a; border: 2px solid var(--line); padding: 4px 6px; max-width: 60%; min-height: 32px; }

.mapzoom { display: flex; justify-content: center; gap: 10px; margin-top: 6px; }
.mapzoom .btn { min-width: 48px; min-height: 40px; font-size: 22px; font-weight: 700; }
#hud .minimap.big, #panel .pbox.map .minimap { touch-action: none; }

.bossbar { transition: opacity 0.25s; }
.bossbar.overboss { opacity: 0.35; }

@media (max-height: 500px) { body.touch .forgebox.empty { display: none; } }


@media (max-height: 420px) {
body.touch #msgs .bn { font-size: 12px; line-height: 1.3; padding: 3px 10px 0; border-bottom-width: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.touch #msgs .bn.ask, body.touch #msgs .bn.sting { -webkit-line-clamp: 3; }
body.touch #msgs .warn { font-size: 11px; padding: 3px 8px; }
}


.morehint { left: 0; right: auto; width: 100%; box-sizing: border-box; bottom: 0; transform: none; justify-content: center; min-height: 0; padding: 1px 8px; font-size: 10px; opacity: 0.85; pointer-events: none; border: none; border-radius: 0; background: linear-gradient(rgba(8,18,44,0), rgba(8,18,44,0.92)); }
#title > .morehint { left: 0; right: auto; width: 100%; }


.talbrtabs .tab .badge { position: static; display: inline-block; margin-left: 2px; background: rgba(255,255,255,0.14); color: var(--text); }

.tbtn .autotag.dashtag { color: #dff4ff; background: rgba(20,70,120,0.9); border-color: #7ac8ff; }


body:not(.touch) .tbtn .autotag.dashtag { top: auto; bottom: 2px; }
body:not(.touch) .tbtn.cooling .autotag.dashtag { display: none; }


@media (max-height: 800px) and (min-width: 900px) {
body:not(.touch) #title .card .desc:not(.lockline) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

.logintrack button.lday { font: inherit; color: inherit; cursor: pointer; }
.lday.peek { border-color: #7ac8ff; box-shadow: 0 0 8px rgba(122,200,255,0.5); opacity: 1; }
.loginrew.peekline { font-weight: 600; color: #cfe6ff; margin: 2px 0 6px; }
.logintoday { margin: 4px 0 8px; padding: 6px 8px; border: 2px solid var(--line); background: rgba(8,18,44,0.5); font-size: 13px; }
.logintoday .ltq { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.logintoday .ltq.done { opacity: 0.6; }

.logintoday button.ltweek { font: inherit; width: 100%; margin-top: 6px; padding: 4px 8px; color: #ffe9a8; text-align: left; background: rgba(255,233,168,0.07); border: 1px solid rgba(255,233,168,0.45); cursor: pointer; }
body.touch .logintoday button.ltweek { min-height: 36px; }
@media (max-height: 380px) { .logintoday { display: none; } }

.namenote.ok { color: #9af07a; }
.namenote.bad { color: #ffb0b0; }
.namenote .linkbtn { font: inherit; color: #ffe9a8; background: none; border: none; border-bottom: 1px dashed #ffe9a8; padding: 0 2px; cursor: pointer; }


.morehint, #title > .morehint { left: 50%; right: auto; width: auto; transform: translateX(-50%); bottom: 4px; padding: 2px 10px; min-height: 0; font-size: 11px; opacity: 0.95; pointer-events: auto; border: 1px solid #ffe9a8; border-radius: 10px; background: rgba(8,18,44,0.94); box-shadow: 0 2px 6px rgba(0,0,0,0.5); }
body:not(.touch) .morehint:not(.hidden) { display: inline-flex; }


.pbox.morepad { padding-bottom: 28px; }
.pbox.morepad > .morehint { bottom: 3px; }



@media (min-height: 461px) and (max-height: 1100px) {
#title { padding-top: 6px; padding-bottom: 6px; }
.titlebox { padding: 0 0 6px; }
.namerow { margin: 4px 0 2px; }
.playrow { margin: 4px 0; }
.titletravel { margin-top: 0; }
.titletravel .startrow { margin: 2px 0; }
.titlelogin { margin-top: 2px; }
.netline { margin: 2px 0 2px; }
.oeline { margin: 0 0 4px; }
}
@media (min-width: 960px) and (max-height: 800px) and (min-height: 461px) { #logo { width: 220px; } }


@media (min-width: 700px) and (min-height: 461px) and (max-height: 800px) {
.pbox.pause { width: min(720px, 100%); }
.pbox.pause .pausecol { grid-template-columns: repeat(3, 1fr); }
.pbox.pause .pausecol > :first-child, .pbox.pause .pausecol > div, .pbox.pause .pausecol > .pvpbtn { grid-column: 1 / -1; }
}



@media (max-height: 460px) {
.namerow { flex-direction: row; }
.namerow .partybadge, .namerow .joinchip { white-space: nowrap; }
.namenote.saved { display: none; }
.namenote.joining { display: none; }



.startrow > .namenote { flex: 1 1 0; min-width: 96px; max-width: max-content; }
.titletravel { margin-top: 0; }
.titletravel .startrow { margin: 2px 0; }
#title .titlelogin, #title .netline { display: inline-flex; vertical-align: middle; margin: 2px 6px; }
#title .netline:empty { display: none; }
#title .titlebox { width: min(900px, 100%); }
#title .menurow { gap: 4px; }
#title .menurow .btn.small { padding-left: 6px; padding-right: 6px; }
}


@media (max-height: 380px) {
#title .tagline { display: none; }
#title .titlebox > .startrow { margin-top: 2px; margin-bottom: 2px; }
#title .oeline { margin-bottom: 2px; }
}


@media (max-height: 500px) {
body.touch .tbtn.ab1, body.touch .tbtn.ab2, body.touch .tbtn.ab3, body.touch .tbtn.dash { width: 52px; height: 52px; margin-bottom: 18px; }
body.touch .tbtn.bite { width: 70px; height: 70px; }
body.touch .tbtn.bite .ic { width: 36px; height: 36px; }
body.touch .tbtn .ic { width: 26px; height: 26px; }
body.touch .tbtn .abname, body.touch .tbtn small { font-size: 10px; }
body.touch .abilities { gap: 6px; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); }
body.touch #hud .hbtn { height: 38px; min-width: 38px; padding: 0 6px; font-size: 11px; }
body.touch #hud .hbtn .ic { width: 18px; height: 18px; }

body.touch .questtrack.folded { min-height: 0; max-width: min(34vw, 300px); padding: 2px 6px; font-size: 11px; line-height: 1.25; background: rgba(8,18,44,0.5); border-width: 1px; }
body.touch .questtrack.folded .qgoal { -webkit-line-clamp: 1; margin-top: 0; padding-top: 0; border-top: none; }
body.touch .questtrack.folded::after { font-size: 10px; margin-top: 0; }
}



.logo-wrap { position: relative; }
.newsbtn { position: relative; }
#title .newsbtn { position: absolute; left: calc(100% + 14px); top: 0; bottom: 0; margin: auto 0; height: 40px; min-height: 0; white-space: nowrap; }

@media (max-width: 640px) and (orientation: portrait) { #title .newsbtn { position: static; display: inline-flex; margin: 6px auto 0; } }
.newsdot { position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink); box-shadow: 0 0 6px rgba(255,216,74,0.75); pointer-events: none; }
.pbox.news { width: min(600px, 100%); }
.pbox.news > .pbody > .note { margin-top: 2px; }
.nday { margin-bottom: 4px; }
.ndate { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--gold); margin: 10px 0 4px; text-shadow: 1px 1px 0 var(--ink); }
.nitem { border: 2px solid #1a3a6a; background: var(--ink); margin-bottom: 4px; }
.nitem.open { border-color: var(--line); }

.nitem.fresh { border-left-color: var(--gold); }
.nhead { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 10px; background: transparent; border: 0; text-align: left; font-size: 15px; line-height: 1.25; }
.nhead b { flex: 1; min-width: 0; }
.nfold { transform: rotate(-90deg); transition: transform 0.15s; }
.nitem.open .nfold { transform: none; }
.ntag { flex: none; font-style: normal; font-size: 11px; font-weight: 700; line-height: 16px; padding: 0 6px; border: 1px solid; white-space: nowrap; }
.ntag.new { background: var(--gold); color: var(--ink); border-color: #8a6a14; }
.ntag.big { color: var(--gold); border-color: #8a6a14; background: rgba(80,60,0,0.35); }
.ntag.fix { color: #8fe4ff; border-color: var(--line); background: rgba(20,60,110,0.35); }
.nlines { margin: 0; padding: 0 12px 10px 36px; list-style: none; }
.nlines li { position: relative; font-size: 14px; line-height: 1.45; margin: 3px 0; }
.nlines li::before { content: ''; position: absolute; left: -14px; top: 0.6em; width: 6px; height: 6px; background: var(--line2); }
.nitem:not(.open) .nlines { display: none; }
.col .btn.nolder { justify-content: center; }
@media (hover: hover) { .nhead:hover { background: #10224a; } }
@media (prefers-reduced-motion: reduce) { .nfold { transition: none; } }

@media (max-height: 460px) {
#title .newsbtn { height: 40px; padding: 2px 8px; }
#title .newsbtn::before { content: ''; position: absolute; inset: -4px -2px; }
#title .newsbtn .ic { width: 20px; height: 20px; }
#title .newsdot { top: -3px; right: -3px; }
.nhead { min-height: 40px; font-size: 14px; padding: 4px 8px; }
.nlines { padding: 0 10px 8px 32px; }
.nlines li { font-size: 13px; }
.ndate { margin: 6px 0 3px; font-size: 13px; }
}




:root { --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --st: env(safe-area-inset-top, 0px); }
body.touch #hud .tl { left: max(10px, var(--sl)); top: max(8px, var(--st)); }
body.touch #hud .tr { right: max(8px, var(--sr)); top: max(8px, var(--st)); }
body.touch .gaugewrap { right: max(12px, var(--sr)); }




.qwrap { position: relative; max-width: 100%; width: fit-content; }
.qwrap.qhidden > .questtrack, .qwrap.qhidden > .qctl, .qwrap:has(> .questtrack.hidden) > .qctl { display: none; }


@media (max-height: 499px) { body.touch .questtrack { pointer-events: none; } }
.qctl { position: absolute; top: 6px; bottom: 0; right: 3px; display: flex; align-items: center; gap: 5px; pointer-events: auto; }
.qwrap:has(> .questtrack:not(.folded)) > .qctl { align-items: flex-start; top: 9px; bottom: auto; }
.qctl button, .qshow { position: relative; display: inline-flex; align-items: center; gap: 2px; min-height: 18px; padding: 0 4px; font: inherit; font-size: 11px; font-weight: 700; line-height: 1; color: #8affb0; background: rgba(8,18,44,0.85); border: 1px solid #3a6a2a; pointer-events: auto; }
.qctl button::after, .qshow::after { content: ''; position: absolute; inset: -9px -2px; }
.qctl .qclose::after { inset: -9px -9px -9px -2px; }
.qctl .ic.tiny, .qshow .ic.tiny { width: 12px; height: 12px; }
.qctl .qclose { padding: 0 3px; color: var(--text); }
.qctl .qmoren:empty { display: none; }
.qctl .qmore.qfold .qmoren, .qctl .qmore.qfold .ic { display: none; }
.qctl .qmore.qfold::before { content: '\2212'; font-size: 13px; }
.qshow { margin-top: 6px; min-height: 22px; padding: 0 6px; }
.qshow::after { inset: -8px; }
body:not(.touch) .qctl .qmore { display: none; }



.qctl .qgo { color: #ffb8a8; border-color: #8a4a3a; }
body:not(.touch) .qctl .qgo { display: none; }
.questtrack .qgomark { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 0 5px; vertical-align: 1px; font-size: 11px; font-weight: 700; line-height: 15px; color: #ffe0d8; background: rgba(138,74,58,0.55); border: 1px solid #c86a5a; border-radius: 4px; cursor: pointer; }
.questtrack .qgomark .ic.tiny { width: 11px; height: 11px; }
.questtrack .qgomark:hover { background: rgba(200,106,90,0.7); }
body.touch .questtrack .qgomark { display: none; }
body.touch .questtrack.hasgo, body.touch .questtrack.folded.hasgo { padding-right: 118px; }
.questtrack .qline.later { opacity: 0.7; font-size: 11px; }


.questtrack .qgboss, .questtrack .qgoal.nogoal { display: none; }
body.touch .questtrack.folded .qgoal:has(.qgboss) .qgshort { display: none; }
body.touch .questtrack.folded .qgboss { display: inline; color: #ffc8b8; }
.questtrack { padding-right: 26px; }
body.touch .questtrack, body.touch .questtrack.folded { padding-right: 70px; }
body.touch .questtrack.folded::after { display: none; }
body.touch.bossfight .qctl, body.touch.bossfight .qshow { display: none; }
@media (max-height: 460px) {

body.touch .questtrack.folded { width: min(224px, 30vw); max-width: none; min-height: 0; padding: 2px 70px 2px 6px; font-size: 11px; line-height: 1.25; background: rgba(8,18,44,0.5); border-width: 1px; }
body.touch .questtrack.folded .qgoal { -webkit-line-clamp: 2; }
body.touch .questtrack.folded .qgoal.long { -webkit-line-clamp: 3; }
body.touch .questtrack.folded:not(:has(.qgoal)) > :first-child span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }



body.touch #hud .tr { top: max(6px, var(--st)); }
body.touch #hud .tr.narrow { gap: 4px; }
body.touch #hud .tr.narrow .hbtn { min-width: 40px; padding: 0 3px; font-size: 10px; }
body.touch .ocean { top: 40px; font-size: 11px; padding: 0 3px; }


body.touch .gaugewrap { top: calc(62px + var(--st)); display: grid; grid-template-columns: auto auto; justify-content: end; justify-items: end; align-items: baseline; column-gap: 5px; min-width: 0; }
body.touch .gaugewrap .depthtext { grid-column: 2; grid-row: 1; font-size: 14px; line-height: 17px; }
body.touch .gaugewrap .zonetext { grid-column: 1; grid-row: 1; margin: 0; font-size: 11px; }
body.touch .gaugewrap .pvptag { grid-column: 1 / -1; margin: 1px 0 0; font-size: 10px; line-height: 13px; letter-spacing: 0; }
body.touch .gaugewrap .pvptag .ic.tiny { width: 12px; height: 12px; }
body.touch .gaugewrap .gauge { position: fixed; top: 100px; right: max(12px, var(--sr)); height: 56px; }
body.touch .minimap { opacity: 1; }
body.touch #hud .killfeed { top: var(--kft, 70px); right: var(--kfr, 84px); }
.phead h2 { white-space: nowrap; flex: none; }

body.touch #toasts { max-height: calc(100vh - var(--toast-top, 64px) - 6px); overflow: hidden; }
}


@media (min-height: 341px) and (max-height: 460px) {
body.touch .ocean { font-size: 12px; }
body.touch .gaugewrap .zonetext { font-size: 12px; }
body.touch .gaugewrap .pvptag { font-size: 12px; line-height: 15px; }
}


.dailyboss { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0 0 6px; }
.dailyboss:empty { display: none; }
.dailyboss .dbline { margin: 0; text-transform: none; letter-spacing: 0; text-align: left; white-space: normal; color: #c8b8e0; }
.dailyboss .dbline.up { color: #ff9a8a; }
.dailyboss .dbline small { display: block; color: #ffd8a8; }
.dailyboss button.dbline { gap: 6px; font-size: 13px; }
.dailyboss button.dbline > img { width: 18px; height: 18px; flex: none; }


.bestnote { margin: 2px 0 6px; padding: 3px 6px; color: #d8f0c8; border-left: 3px solid var(--green); background: rgba(20,60,20,0.35); }
.bestnote .ic.tiny { vertical-align: -2px; }




#title .startpick > span, #title .titlelogin, #title .netline:not(:empty), #title .oeline:not(:empty), #title .namenote:not(:empty) { background: rgba(5, 10, 24, 0.62); border-radius: 8px; padding: 1px 8px; }
.titlebox .titlelogin, .titlebox .netline, .titlebox .oeline, .titlebox .namenote { width: fit-content; max-width: 96vw; margin-left: auto; margin-right: auto; box-sizing: border-box; }



@media (max-height: 460px) { #title .startrow > .namenote { max-width: max-content; margin-left: 0; margin-right: 0; } }



#hud .lesson .lessontext { position: relative; }
#hud .lesson .lessonmore { display: none; }
#hud .lesson.cut:not(.open) .lessontext small { padding-right: 38px; }
#hud .lesson.cut:not(.open) .lessonmore { display: block; position: absolute; right: 0; bottom: 1px; padding: 0 4px; font-size: 10px; font-style: normal; font-weight: 700; line-height: 13px; color: #ffe9a8; background: rgba(8,18,44,0.95); border: 1px solid rgba(255,233,168,0.6); border-radius: 6px; pointer-events: none; }



body.touch .qctl { gap: 4px; }
body.touch .qctl button { min-height: 24px; }
body.touch .qctl .qclose { min-width: 26px; justify-content: center; }
body.touch .qctl button::after { inset: -10px -2px; }
body.touch .qctl .qclose::after { inset: -10px -10px -10px -2px; }



body.touch .qwrap:has(> .questtrack.folded) > .qctl { top: 0; }
@media (max-height: 500px) { body.touch .questtrack.folded { min-height: 26px; justify-content: center; } }


.fill.comp { background: linear-gradient(#efe4ff, #9a7ad8); }



#hud .compchip { display: flex; align-items: center; gap: 4px; margin-top: 5px; pointer-events: none; color: #e0d0ff; font-size: 12px; text-shadow: 1px 1px 0 var(--ink); }
#hud .compchip.hidden { display: none; }
#hud .compchip .cportrait { pointer-events: auto; position: relative; flex: none; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(24,14,48,0.8); border: 2px solid #8a6ac8; cursor: pointer; }
#hud .compchip .cportrait img { max-width: 36px; max-height: 32px; image-rendering: pixelated; }
#hud .compchip .cmodes { display: flex; gap: 4px; flex: none; }
#hud .compchip .modebtn { pointer-events: auto; position: relative; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(10,12,22,0.85); border: 2px solid #3a2a5a; cursor: pointer; }
#hud .compchip .modebtn img { width: 24px; height: 24px; image-rendering: pixelated; opacity: 0.65; }
#hud .compchip .modebtn.on { border-color: #c8a8ff; background: rgba(64,40,120,0.92); box-shadow: inset 0 0 0 1px #e0d0ff; }
#hud .compchip .modebtn.on img { opacity: 1; }
#hud .compchip .modebtn:active { transform: translateY(1px); }
#hud .compchip .cinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#hud .compchip .cname { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud .compchip .cbar { width: 100%; height: 7px; }
#hud .compchip .cbar.hidden { display: none; }
#hud .compchip .cstate { color: #c8a8ff; font-size: 11px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#hud .compchip .cstate:empty { display: none; }
#hud .compchip .cmode { color: var(--dim); font-size: 11px; }
#hud .compchip.waiting .cportrait img { opacity: 0.5; }

#hud .compchip .cplus { position: absolute; right: 1px; bottom: 0; font-style: normal; font-size: 10px; font-weight: bold; line-height: 1; color: #fff; text-shadow: 1px 1px 0 var(--ink); pointer-events: none; }
#hud .compchip .cplus:empty { display: none; }
#hud .compchip .cbars { display: flex; align-items: center; gap: 3px; }
#hud .compchip .cbars .cbar { flex: 2; min-width: 0; }
#hud .compchip .cmore { display: flex; gap: 3px; flex: 1.4; min-width: 0; }
#hud .compchip .cmore.hidden { display: none; }
#hud .compchip .cmore .bar { flex: 1; min-width: 0; height: 7px; }
#hud .compchip .cmore .bar.away { opacity: 0.45; }


#hud .compchip .crow { display: flex; align-items: center; gap: 3px; min-width: 0; }
#hud .compchip .cdot { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ink); box-shadow: 0 0 0 1px rgba(224,208,255,0.6); }
#hud .compchip .cdot.hidden { display: none; }
#hud .compchip .crow > .bar { flex: 1; min-width: 0; }
#hud .compchip .cbars > .crow { flex: 2; }
#hud .compchip.many .cbars > .crow { flex: none; }
#hud .compchip.many .cbars { flex-direction: column; align-items: stretch; gap: 2px; }
#hud .compchip.many .cmore { flex-direction: column; gap: 2px; flex: none; }
#hud .compchip.many .cbar, #hud .compchip.many .cmore .bar { height: 8px; border-width: 1px; }
#hud .compchip .cmore .crow.away { opacity: 0.45; }

.pmem.comp { padding-left: 14px; color: #c8a8ff; }
.pmem.comp .cpic { width: auto; height: 14px; max-width: 26px; image-rendering: pixelated; }
.pmem.comp .plv { color: var(--dim); }

.pbox.comp { width: min(620px, 100%); }
.compcount { display: flex; align-items: center; gap: 4px; margin: 0 0 6px; color: #e0d0ff; }
.compmodes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 8px; }
.compmodes .compmode { min-height: 44px; padding: 4px 6px; gap: 6px; text-transform: none; letter-spacing: 0; text-align: left; }
.compmodes .compmode > span { display: flex; flex-direction: column; min-width: 0; }
.compmodes .compmode b { font-size: 13px; }
.compmodes .compmode small { font-size: 11px; line-height: 1.2; white-space: normal; }
.compmodes .compmode.primary { border-color: #c8a8ff; }
.compnamebox { margin: 0 0 8px; padding: 6px 8px; border: 1px solid #5a4a8a; background: rgba(40,24,80,0.35); }
.compnamebox label { display: flex; align-items: center; gap: 2px; font-size: 12px; color: #e0d0ff; margin-bottom: 4px; }
.compnamerow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.compnamerow .compname { flex: 1; min-width: 120px; min-height: 40px; font: inherit; font-size: 15px; padding: 4px 8px; background: #0a1024; color: var(--text); border: 2px solid #5a4a8a; }
.compnamebox .note { margin: 4px 0 0; }
.compnamebox .note.compok { color: #c8f0b0; }
.comppanel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.compcard { display: flex; align-items: center; gap: 8px; padding: 6px; border: 2px solid #2a2a4a; background: rgba(10,12,28,0.6); cursor: pointer; min-height: 44px; }
.compcard .portrait { width: 44px; height: 30px; object-fit: contain; image-rendering: pixelated; flex: none; }
.compcard .ctext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.compcard .ctext b { color: #e0d0ff; font-size: 14px; }
.compcard .ctext small { font-size: 11px; color: var(--dim); line-height: 1.25; }
.compcard .ctext .role { color: #c8b8e0; }
.compcard .ctext .cap { color: #ffd8a8; }
.compcard.on { border-color: #c8a8ff; background: rgba(64,40,120,0.45); }
.compcard.sel { box-shadow: inset 0 0 0 1px #e0d0ff; }
.compcard .compout { display: inline-flex; align-items: center; gap: 2px; color: #c8f0b0; font-size: 12px; white-space: nowrap; }
.compcard .compbtns { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.compcard .compbtns .btn { min-height: 36px; }
.comphow { color: #c8b8e0; margin: 0 0 6px; }
.compcard.missing { cursor: default; opacity: 0.85; }
.compcard.missing .portrait { filter: brightness(0) opacity(0.55); }
.compcard.missing .ctext b { color: var(--dim); }
@media (max-width: 600px) { .comppanel { grid-template-columns: 1fr; } .compmodes { grid-template-columns: 1fr; } }

.srow.compcardrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: #c8a8ff; margin-top: 6px; }
.srow.compcardrow > span { flex: 1; min-width: 120px; }
.srow.compcardrow .cpic, #hud .lesson .cpic { image-rendering: pixelated; object-fit: contain; }
.srow.compcardrow .cpic { width: 30px; height: 20px; }
#dead .compwaits { color: #e0d0ff; }
#hud .lesson .lessonic.cpic { width: 40px; height: 28px; }
@media (max-height: 460px) { body.touch #hud .lesson .lessonic.cpic { width: 30px; height: 20px; } }


#hud .lesson .lessonbtns.tamebtns { flex-direction: row; align-items: center; gap: 4px; }
#hud .lesson .lessonbtns .tameyes, #hud .lesson .lessonbtns .tameno { min-height: 44px; min-width: 64px; }

#hud .lesson .lessonbtns .tameyes { animation: tamecall 0.9s ease-in-out 3; }
#hud .lesson .lessonbtns .tameyes.again { animation-iteration-count: 5; }
@keyframes tamecall { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,168,255,0); } 50% { box-shadow: 0 0 0 4px rgba(200,168,255,0.85); } }
@media (prefers-reduced-motion: reduce) { #hud .lesson .lessonbtns .tameyes { animation: none; box-shadow: 0 0 0 2px rgba(200,168,255,0.85); } }
#hud .lesson .tamebar { display: block; height: 3px; margin-top: 2px; background: #c8a8ff; transform-origin: left; animation: tamebar linear forwards; }
@keyframes tamebar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

#hud .lesson .lessontext .tshort, #hud .lesson .tamebtns .tameic { display: none; }
#hud .lesson .tamebtns .tameic { width: 22px; height: 22px; }
#hud .lesson .lessontext:has(.tamebar) .lessonmore { bottom: 6px; }




@media (min-height: 461px) {
#hud .lesson:has(.ttyes) { flex-wrap: wrap; }
#hud .lesson .lessonbtns.tamebtns:has(.ttyes) { flex: 1 0 100%; justify-content: flex-end; }
}




@media (max-height: 460px) {
body.touch #hud .compchip { gap: 4px; margin-top: 4px; margin-bottom: 4px; }
body.touch #hud .compchip .cportrait { width: 40px; height: 30px; }
body.touch #hud .compchip .cportrait img { max-width: 28px; max-height: 24px; }
body.touch #hud .compchip .modebtn { width: 40px; height: 30px; min-width: 0; min-height: 0; }
body.touch #hud .compchip .modebtn img { width: 20px; height: 20px; }
body.touch #hud .compchip .cportrait::after, body.touch #hud .compchip .modebtn::after { content: ''; position: absolute; left: -4px; right: -4px; top: -16px; bottom: -2px; }
body.touch #hud .compchip .cmodes { gap: 4px; }
body.touch #hud .compchip .cname, body.touch #hud .compchip .cmode { display: none; }
body.touch #hud .compchip .cstate { font-size: 10px; line-height: 12px; }
body.touch .pmem.comp .pn, body.touch .pmem.comp .plv, body.touch .pmem.comp .ps { display: none; }
body.touch .pmem.comp { padding-left: 10px; }
body.touch #hud .lesson .lessonbtns .tameyes, body.touch #hud .lesson .lessonbtns .tameno { min-height: 44px; padding: 2px 8px; }

body.touch #hud .lesson .lessonbtns.tamebtns { gap: 10px; }



body.touch #hud .lesson:not(.open) .lessontext .tlong, body.touch #hud .lesson:not(.open) .tamebtns .tw { display: none; }
body.touch #hud .lesson:not(.open) .lessontext .tshort { display: inline; }
body.touch #hud .lesson:not(.open) .tamebtns .tameic { display: block; }
body.touch #hud .lesson:not(.open) .lessonbtns .tameyes, body.touch #hud .lesson:not(.open) .lessonbtns .tameno { min-width: 44px; padding: 2px; justify-content: center; }
body.touch #hud .lesson.open:has(.tamebtns) { flex-wrap: wrap; }
body.touch #hud .lesson.open .lessonbtns.tamebtns { flex: 1 0 100%; justify-content: flex-end; }

body.touch #hud .lesson.open .lessontext b { white-space: normal; }



body.touch #hud .tl.full .pmem.comp { display: none; }
body.touch #hud .tl.full .pmem .pcomp { display: inline-flex; }
body.touch #hud .tl.full .sigrow { flex-wrap: nowrap; width: max-content; }
body.touch #hud .tl.full .sigrow .sig { min-height: 28px; padding: 2px 6px; font-size: 11px; }
body.touch #hud .tl.full2 .qwrap { display: none; }
}

.pmem .pcomp { display: none; align-items: center; gap: 2px; flex: none; color: #c8a8ff; }
.pmem .pcomp.away { opacity: 0.55; }
.pmem .pcomp .cpic { width: auto; height: 12px; max-width: 22px; image-rendering: pixelated; }
.pmem .pcomp .bar.mini { width: 26px; }
.pmem.comp .pcomp.pmore { display: inline-flex; margin-left: 2px; }


body.touch #hud .compchip button, body.touch #hud .qctl button, body.touch #hud .qshow, body.touch #hud .sigrow .sig { touch-action: none; }













.crownbox { margin-top: 8px; width: 168px; padding: 4px 6px 5px; background: rgba(6,10,26,0.62); border: 1px solid rgba(255,216,74,0.35); border-radius: 4px; pointer-events: none; color: var(--text); font-size: 12px; line-height: 16px; box-sizing: border-box; }
.crownbox.hidden { display: none; }
.crownbox .chead { display: flex; align-items: center; gap: 4px; color: var(--gold); font-weight: 700; font-size: 11px; letter-spacing: 0.02em; }
.crownbox .crownic { width: 14px; height: 14px; }
.crownbox .crows { list-style: none; margin: 2px 0 0; padding: 0; }
.crownbox .crows li { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.crownbox .crows .cn { width: 10px; color: var(--dim); font-weight: 600; text-align: right; flex: none; }
.crownbox .crows .cname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crownbox .crows .clv { flex: none; color: var(--dim); font-style: normal; }
.crownbox .crows li.crowned .cname { color: var(--gold); font-weight: 700; }
.crownbox .crows li.me .cname { color: #7ff0ff; font-weight: 700; }
.crownbox .crows li .crownic { width: 12px; height: 12px; margin-left: -2px; }
.crownbox .cchip, .crownbox .cfight { display: none; }
.crownbox.fight .cpanel { display: none; }
.crownbox.fight .cfight { display: block; color: #7ff0ff; font-weight: 600; }
.crownbox.fight.notme { display: none; }
.killfeed .kf .kfcrown { width: 12px; height: 12px; margin-right: 2px; vertical-align: -1px; }
@media (min-height: 520px) and (min-width: 520px) {
body.touch .crownbox { position: fixed; margin: 0; top: var(--crt, 200px); right: var(--crr, 12px); width: var(--crw, 150px); }
}
@media (max-height: 519px), (max-width: 519px) {


body.touch .crownbox { position: static; margin: 3px 0 0; padding: 0; width: 0; min-width: max(100%, 90px); max-width: 150px; background: none; border: 0; justify-self: end; grid-column: 1 / -1; display: flex; justify-content: flex-end; }
body.touch .crownbox.hidden, body.touch .crownbox.fight, body.touch .crownbox.cramped { display: none; }
body.touch .crownbox .cchip { display: flex; align-items: center; gap: 3px; max-width: 100%; min-width: 0; box-sizing: border-box; height: 22px; padding: 0 6px; background: rgba(6,10,26,0.72); border: 1px solid rgba(255,216,74,0.45); border-radius: 4px; color: var(--text); font: inherit; font-size: 11px; line-height: 14px; white-space: nowrap; pointer-events: auto; touch-action: none; }
body.touch .crownbox .cchip .crownic { width: 12px; height: 12px; }
body.touch .crownbox .cchip .cname { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--gold); }
body.touch .crownbox .cchip .cme { flex: none; color: #7ff0ff; font-style: normal; }
body.touch .crownbox .cchip .cme.hidden { display: none; }
body.touch .crownbox .cpanel { display: none; }
body.touch .crownbox.open .cpanel { display: block; position: fixed; z-index: 20; right: max(12px, var(--sr)); width: 160px; box-sizing: border-box; padding: 4px 6px 5px; background: rgba(6,10,26,0.9); border: 1px solid rgba(255,216,74,0.45); border-radius: 4px; pointer-events: none; }


@media (max-height: 270px) { body.touch .crownbox { margin-top: 1px; } body.touch .crownbox .cchip { height: 19px; } }
}


.socialbox { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; border: 2px dashed var(--line); }
.socialbox .socialask { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: #ffd84a; }
.socialbox .socialrow { display: flex; gap: 6px; flex-wrap: wrap; }
.socialbox .socialrow .btn { flex: 1 1 200px; justify-content: flex-start; min-height: 48px; }
.socialbox .socialrow .btn small { white-space: normal; text-align: left; }
.pausecol > .socialbox { grid-column: 1 / -1; }
.social-discord { border-color: #8a6ac8; }
.social-qq { border-color: #5ac8ff; }
@media (max-height: 460px) { .socialbox { padding: 4px 6px; gap: 4px; } .socialbox .socialrow .btn { min-height: 44px; } }



#hud .hbtn.raidoff, #hud .sigrow .sig.raidoff { opacity: 0.45; }



.bossbar .rmark, .bossbar .rleave { display: none; }
.bossbar.raid { border-color: #1c4a66; padding-right: 66px; }
.bossbar.raid .bname { color: #9fe4ff; }
.bossbar.raid .bname .rtime { color: #ffffff; font-variant-numeric: tabular-nums; }
.bossbar.raid .bname .rcount { font-weight: 400; color: #cfe8ff; white-space: nowrap; }
.bossbar.raid .bar { border-color: #14405a; }
.bossbar.raid .fill.boss { background: linear-gradient(#7ad8ff, #2a7ad0); }
.bossbar.raid .rmark { display: block; position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #0e1220; box-shadow: 0 0 0 1px rgba(255,255,255,0.4); z-index: 2; }
.bossbar.raid .rmark.r66 { left: 66.6%; }
.bossbar.raid .rmark.r33 { left: 33.3%; }
.bossbar.raid .stagbar { display: none; }
.bossbar.raid.staggered .fill.boss { background: linear-gradient(#ffe680, #d8a020); }
.bossbar.raid .rleave { display: flex; align-items: center; justify-content: center; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-width: 54px; min-height: 26px; padding: 2px 6px; font: inherit; font-size: 12px; font-weight: 700; color: #ffe0d8; background: rgba(60,20,20,0.9); border: 1px solid #c86a5a; cursor: pointer; pointer-events: auto; }
.bossbar.raid .rleave.hidden { display: none; }
.bossbar.raid .rleave.cancel { color: #ffd84a; border-color: #ffd84a; }
.bossbar.raid .rleave:hover { background: rgba(110,40,40,0.95); }



body.touch .bossbar.raid { min-height: 52px; padding-right: 54px; display: flex; flex-direction: column; justify-content: center; }
body.touch .bossbar.raid .rleave { top: 2px; bottom: 2px; right: 0; transform: none; min-width: 46px; min-height: 44px; padding: 2px 3px; font-size: 11px; touch-action: none; }



.bossbar.raid.overboss { opacity: 1; background: rgba(5,8,20,0.62); }


body.touch.bossfight #toasts:has(.toast.raidsay) { display: flex; }
body.touch.bossfight #toasts:has(.toast.raidsay) .toast:not(.raidsay) { display: none; }

.bn.raidend { border-color: #5ac8ff; color: #cfe8ff; }


.questtrack .qline.raid { color: #9fe4ff; }
.questtrack .qline.raid.low { color: #d8f4c8; }
.questtrack .qline.raid.join { cursor: pointer; }
.questtrack .qraidmark { color: #e8f8ff; background: rgba(42,122,208,0.5); border-color: #5ac8ff; }
.questtrack .qraidmark:hover { background: rgba(60,150,240,0.75); }
.questtrack .qraidmark .keychip { margin-left: 3px; padding: 0 3px; font-size: 10px; line-height: 12px; color: #e8f8ff; }
.qraid { position: relative; display: inline-flex; align-items: center; gap: 3px; margin-top: 8px; min-height: 26px; padding: 0 8px; font: inherit; font-size: 12px; font-weight: 700; line-height: 1; color: #9fe4ff; background: rgba(8,18,44,0.9); border: 1px solid #2a7ad0; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: auto; touch-action: none; }
.qraid::after { content: ''; position: absolute; inset: -10px -2px; }
.qraid .ic.tiny { width: 13px; height: 13px; }
body:not(.touch) .qraid, .qraid.low { display: none; }

.qwrap > .questtrack.raidturn ~ .qctl .qgo { visibility: hidden; }
body.touch.bossfight .qraid, body.touch #hud .tl.full2 .qraid { display: none; }


#hud .lesson .raidyes { gap: 6px; }


body:not(.touch) #hud .lesson:has(.raidbtns) { width: min(470px, 56vw); }
@media (min-height: 461px) { body.touch #hud .lesson:has(.raidbtns) { width: min(460px, 60vw); } }
#hud .lesson .raidyes .rshort, #hud .lesson .rsubshort { display: none; }
#hud .lesson .rsubshort { font-variant-numeric: tabular-nums; }
@media (max-height: 460px) {

body.touch #hud .lesson:not(.open) .rsublong { display: none; }
body.touch #hud .lesson:not(.open) .rsubshort { display: inline; }
body.touch #hud .lesson:not(.open) .raidyes .rlong { display: none; }
body.touch #hud .lesson:not(.open) .raidyes .rshort { display: inline; }
body.touch #hud .lesson:not(.open) .lessonbtns .raidyes { min-width: 52px; padding: 2px 8px; }
}

#dead.raidfell { background: rgba(2,4,14,0.25); }
#dead .box.raidfall, body.touch #dead .box.raidfall { width: min(320px, 100%); text-align: center; padding: 8px 14px 10px; }
#dead .box.raidfall h2 { margin: 0 0 2px; font-size: 18px; }
#dead .box.raidfall .rfwait { display: block; font-size: 22px; color: var(--gold); text-shadow: 2px 2px 0 var(--ink); }
#dead .box.raidfall .note { margin: 4px 0 6px; }
#dead .box.raidfall .playrow { justify-content: center; margin: 0; }
#dead .box.raidfall .playrow .btn { min-height: 44px; }
body.touch #dead.raidfell .box.raidfall { margin-top: calc(var(--bbb, 100px) + 4px); }
body.touch.vicon #dead.raidfell .box.raidfall { margin-top: var(--vicb, 120px); }

@media (max-height: 460px) {
#dead .box.raidfall, body.touch #dead .box.raidfall { width: min(430px, 100%); display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: center; text-align: left; padding: 4px 6px 4px 10px; }
#dead .box.raidfall h2 { grid-column: 1; justify-content: flex-start; font-size: 13px; margin: 0; }
#dead .box.raidfall h2 img { width: 16px; height: 16px; }
#dead .box.raidfall .rfwait { grid-column: 1; font-size: 17px; }
#dead .box.raidfall .note { grid-column: 1; margin: 0; font-size: 11px; line-height: 1.25; }
#dead .box.raidfall .playrow { grid-column: 2; grid-row: 1 / span 3; }
#dead .box.raidfall .playrow .btn { padding: 4px 10px; font-size: 13px; }
}

#hud .victory.raidres { max-width: min(440px, 92vw); }
body:not(.touch) #hud .victory.raidres { top: calc(var(--bbb, 52px) + 8px); }
@media (min-height: 461px) { body.touch #hud .victory.raidres { top: calc(var(--bbb, 110px) + 6px); } }
#hud .victory.raidres .vtitle.lost { font-size: 20px; letter-spacing: 1px; color: #9fe4ff; }
#hud .victory.raidres .vrow { margin-top: 2px; }
#hud .victory.raidres .vrow span { min-width: 0; overflow-wrap: anywhere; }
#hud .victory.raidres .vrow.rsub { color: #ffe9a8; font-weight: 700; margin-bottom: 4px; }
#hud .victory.raidres .vrow.rreward { color: var(--gold); font-weight: 700; margin-top: 5px; }
#hud .victory.raidres .vrow.rwhy, #hud .victory.raidres .vrow.rowed { color: #ffe9a8; margin-top: 5px; }
#hud .victory.raidres .vrow.rhome { color: var(--dim); margin-top: 4px; }
#hud .victory.raidres .rmore, #hud .victory.raidres .vrow .rshort { display: none; }


@media (max-height: 460px) {
body.touch #hud .victory.raidres { top: var(--bby, 6px); left: var(--bbx, 50%); width: var(--bbw, 60vw); max-width: none; gap: 0 8px; padding: 2px 8px 3px; }
body.touch #hud .victory.raidres.open { max-height: calc(100vh - var(--bby, 6px) - 8px); overflow-y: auto; }
body.touch #hud .victory.raidres .vtitle, body.touch #hud .victory.raidres .vtitle.lost { font-size: 14px; letter-spacing: 1px; }
body.touch #hud .victory.raidres .vrow { font-size: 11px; line-height: 1.3; margin: 0; }
body.touch #hud .victory.raidres .vrow .ic.tiny { width: 11px; height: 11px; }
body.touch #hud .victory.raidres:not(.open) .vrow.rtop, body.touch #hud .victory.raidres:not(.open) .vrow.rhealer, body.touch #hud .victory.raidres:not(.open) .vrow.rscales, body.touch #hud .victory.raidres:not(.open) .vrow.rwins { display: none; }
body.touch #hud .victory.raidres:not(.open) .vrow .rfull { display: none; }
body.touch #hud .victory.raidres:not(.open) .vrow .rshort { display: inline; }
body.touch #hud .victory.raidres:not(.open) .rmore { position: relative; display: inline-flex; align-items: center; min-height: 18px; padding: 0 8px; font: inherit; font-size: 11px; font-weight: 700; color: #ffe9a8; background: rgba(8,18,44,0.95); border: 1px solid #ffd84a; }
body.touch #hud .victory.raidres .rmore::after { content: ''; position: absolute; inset: -14px -8px; }
body.touch:has(#hud .victory.raidres:not(.hidden)) .bossbar.raid { visibility: hidden; }
}

.oeline.raidline:empty { display: none; }
.oeline.raidline.on, .evline.raidline.on { color: #9fe4ff; }
@media (max-height: 460px) { .pausecol .evline.raidline:not(.oeline):not(.oefixlist) { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; } }

.evline.raidline .rshort { display: none; }
@media (max-height: 460px) { .pausecol .evline.raidline .rfull { display: none; } .pausecol .evline.raidline .rshort { display: inline; } }
.pausecol .btn.raidbtn { border-color: #5ac8ff; }




#title.door { align-items: center; background: radial-gradient(ellipse at 50% 45%, rgba(5,10,24,0.05), rgba(5,10,24,0.6) 75%); }
#title.door > .titlebox { display: none; }
.doorbox { width: min(860px, 100%); margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 6px 0 10px; }
.doorlogo { display: flex; flex-direction: column; align-items: center; }
.doorlogo #logo { width: 440px; max-width: 72vw; filter: drop-shadow(0 4px 0 rgba(5,10,24,0.7)); }
.doorlogo .cnname { margin: 0; }
.doortag { margin: -4px 0 0; font-size: 18px; color: #bfeeff; text-shadow: 2px 2px 0 var(--ink); }
.doorpick { margin: 4px 0 -4px; font-size: 13px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; text-shadow: 1px 1px 0 var(--ink); }
body.zh .doorpick { letter-spacing: 0; text-transform: none; }


#title.door .cards { flex-wrap: nowrap; gap: 8px; justify-content: center; max-width: 100%; }
body #title.door .cards:not(.mini) .card { width: min(100px, calc((100vw - 82px - var(--sl) - var(--sr)) / 8)); min-width: 0; min-height: 84px; padding: 6px 4px 5px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 2px; transition: transform 0.12s; }
body #title.door .cards .card p.desc, #title.door .card .abil, #title.door .card > small { display: none; }
#title.door .card .portrait { height: 40px; max-width: 88px; grid-row: auto; }
#title.door .card b { font-size: 14px; display: flex; flex-direction: column; align-items: center; line-height: 1.15; max-width: 100%; overflow-wrap: anywhere; }
#title.door .card .lvtag, #title.door .card .newtag { margin-left: 0; margin-top: 2px; }
#title.door .card.sel { transform: translateY(-3px); }
#title.door .card.locked { opacity: 0.62; }
#title.door .card.locked .portrait { filter: grayscale(0.7) brightness(0.8); }

.doorgo { display: flex; gap: 12px; align-items: flex-end; justify-content: center; flex-wrap: wrap; margin-top: 2px; }
.doorname { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.doorname small { font-size: 11px; color: var(--dim); text-shadow: 1px 1px 0 var(--ink); }
#title.door #name { width: 210px; height: 56px; font-size: 18px; }
#title.door #name::placeholder { color: #6f89b0; }
#title.door #btn-online { min-width: 250px; min-height: 64px; padding: 6px 26px; justify-content: center; background: #1f86d8; border-color: #bff2ff; box-shadow: 0 4px 0 var(--ink), inset 0 -4px 0 rgba(0,0,0,0.3), 0 0 18px rgba(127,240,255,0.35); animation: doorGlow 2.4s ease-in-out infinite; }
#title.door #btn-online > span { align-items: center; }
#title.door #btn-online b { font-size: 26px; letter-spacing: 0.08em; }
body.zh #title.door #btn-online b { letter-spacing: 0.02em; }
#title.door #btn-online small { display: none; }
#title.door #btn-online .ic { width: 28px; height: 28px; }
#title.door #btn-online:active { transform: translateY(3px); }
@keyframes doorGlow { 50% { box-shadow: 0 4px 0 var(--ink), inset 0 -4px 0 rgba(0,0,0,0.3), 0 0 28px rgba(127,240,255,0.7); } }
@media (prefers-reduced-motion: reduce) { #title.door #btn-online { animation: none; } }
.doorchips { display: flex; gap: 8px; justify-content: center; }
.doorchips:not(:has(> :not(.hidden))) { display: none; }
#title.door .namenote { margin: -4px 0 0; }
#title.door .namenote:not(.bad) { display: none; }
#title.door .netline { margin: -4px 0 0; }
#title.door .netline:empty { display: none; }

.doormenu { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 2px; }
#title.door .doorbtn { position: relative; flex-direction: column; gap: 1px; min-width: 76px; min-height: 52px; padding: 4px 8px; font-size: 11px; }
#title.door .doorbtn > span { align-items: center; white-space: nowrap; }
#title.door .newsbtn.doorbtn { position: relative; left: auto; top: auto; bottom: auto; margin: 0; height: auto; display: inline-flex; }
#title.door .doorbtn .ic { width: 20px; height: 20px; }
#title.door .doorbtn .newsdot, .giftdot { position: absolute; top: -5px; right: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink); box-shadow: 0 0 6px rgba(255,216,74,0.75); pointer-events: none; }
.giftdot.hidden { display: none; }
#title.door > .morehint { display: none; }


#title.door .doormore { margin-top: -2px; }
#title.door .doormorebtn, #title.door .doorbackbtn { display: none; }

@media (max-height: 460px) {
#title.door { padding-top: 4px; padding-bottom: max(4px, env(safe-area-inset-bottom, 0px)); }
.doorbox { gap: 6px; padding: 2px 0 4px; }
.doorlogo #logo { width: 230px; }
.doortag, .doorpick, .doorname small, .doorlogo .cnname { display: none; }
#title.door .cards { gap: 6px; }



body #title.door .cards:not(.mini) .card { width: min(96px, calc((100vw - 68px - var(--sl) - var(--sr)) / 8)); min-width: 0; flex: 0 1 auto; min-height: 0; padding: 3px 2px; }
#title.door .card .portrait { height: 28px; }
#title.door .card b { font-size: 12px; }
#title.door .card .lvtag, #title.door .card .newtag { font-size: 10px; }
.doorgo { gap: 8px; margin-top: 0; flex-wrap: nowrap; }
#title.door #name { width: 180px; height: 48px; font-size: 16px; }
#title.door #btn-online { min-width: 200px; min-height: 50px; padding: 2px 18px; }
#title.door #btn-online b { font-size: 22px; }
#title.door #btn-online .ic { width: 22px; height: 22px; }
.doormenu { gap: 6px; flex-wrap: nowrap; margin-top: 0; }
#title.door .doorbtn { min-width: 64px; min-height: 46px; padding: 2px 6px; font-size: 10px; }
#title.door .doorbtn .ic { width: 18px; height: 18px; }
#title.door .doormore { margin-top: 0; }
#title.door .doormorebtn, #title.door .doorbackbtn { display: inline-flex; }
#title.door:not(.doormoreon) .doormore, #title.door.doormoreon .doormenu:not(.doormore) { display: none; }
}


@media (max-height: 280px) {
.doorbox { gap: 4px; }
#title.door .card .portrait { height: 22px; }
}


#title.door { padding-left: max(12px, var(--sl)); padding-right: max(12px, var(--sr)); padding-bottom: max(4px, env(safe-area-inset-bottom, 0px)); }