@font-face{font-family:'ValtrixFont1';src:url('../assets/fonts/FONTS/Pretendard-1.3.9/web/variable/woff2/PretendardVariable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'ValtrixFont2';src:url('../assets/fonts/FONTS/Pretendard-1.3.9/web/static/woff2/Pretendard-Black.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'ValtrixFont3';src:url('../assets/fonts/FONTS/Pretendard-1.3.9/web/static/woff2/Pretendard-Bold.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'ValtrixFont4';src:url('../assets/fonts/FONTS/Pretendard-1.3.9/web/static/woff2/Pretendard-ExtraBold.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'ValtrixFont5';src:url('../assets/fonts/FONTS/Pretendard-1.3.9/web/static/woff2/Pretendard-ExtraLight.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'ValtrixFont6';src:url('../assets/fonts/FONTS/Pretendard-1.3.9/web/static/woff2/Pretendard-Light.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'ValtrixFont7';src:url('../assets/fonts/FONTS/Pretendard-1.3.9/web/static/woff2/Pretendard-Medium.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'ValtrixFont8';src:url('../assets/fonts/FONTS/Pretendard-1.3.9/web/static/woff2/Pretendard-Regular.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
:root{
 --font-body:'ValtrixFont1',system-ui,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
 --font-display:'ValtrixFont2','ValtrixFont1',system-ui,sans-serif;
 --bg:#f1f6fb;--ink:#07121f;--muted:#66798f;--sub:#8ea0b4;--panel:rgba(255,255,255,.82);
 --panel2:rgba(255,255,255,.56);--line:rgba(63,133,200,.22);--accent:#348dd8;--accent2:#b49654;
 --danger:#e94465;--glow:rgba(52,141,216,.23);--shadow:rgba(37,72,110,.14);--copy:#348dd8;
}
body.night-mode{
 --bg:#07101b;--ink:#edf5ff;--muted:#a8b4c6;--sub:#77859a;--panel:rgba(9,16,29,.82);
 --panel2:rgba(20,29,47,.62);--line:rgba(89,182,220,.20);--accent:#6bcdf2;--accent2:#e94465;
 --danger:#ff456f;--glow:rgba(233,68,101,.24);--shadow:rgba(0,0,0,.42);--copy:#ff456f;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;min-height:100%;overflow-x:hidden}
body{background:#0a0d13;font-family:var(--font-body);color:var(--ink);line-height:1.6;font-feature-settings:"kern";text-rendering:optimizeLegibility}
button{font-family:var(--font-body);color:inherit;cursor:pointer}
.phone-shell{position:relative;width:100%;max-width:430px;min-height:100vh;margin:0 auto;background:var(--bg);overflow:hidden;box-shadow:0 0 80px rgba(0,0,0,.45)}
.city-layer{position:fixed;left:50%;top:0;transform:translateX(-50%);width:min(100vw,430px);height:100vh;overflow:hidden;z-index:0;pointer-events:none;background:#edf4fb}
.city{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .9s cubic-bezier(.22,1,.36,1),filter .9s cubic-bezier(.22,1,.36,1);transform:scale(1.05)}
.city-night{opacity:0}.night-mode .city-night{opacity:1}.night-mode .city-day{opacity:0}
.day-mode .city-day{filter:brightness(1.18) saturate(.45) contrast(.82) blur(2px)}.night-mode .city-night{filter:brightness(.48) saturate(.72) contrast(.88) blur(1.5px)}
.city-wash{position:absolute;inset:0;background:linear-gradient(180deg,rgba(244,249,253,.70),rgba(244,249,253,.91) 48%,rgba(244,249,253,.99));transition:.9s}
.night-mode .city-wash{background:linear-gradient(180deg,rgba(4,8,15,.58),rgba(7,16,27,.88) 50%,rgba(7,16,27,.98))}
.grain{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,42,90,.12) 0 1px,transparent 1.4px);background-size:28px 28px;opacity:.14;mix-blend-mode:multiply}.night-mode .grain{opacity:.10;mix-blend-mode:screen}
.scan{position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:100% 7px;opacity:.08}.particles{position:absolute;inset:0}.p{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);opacity:.18;animation:drift linear infinite}@keyframes drift{from{transform:translateY(105vh)}to{transform:translateY(-12vh)}}

.entry{position:relative;z-index:5;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px}.entry.hide{opacity:0;pointer-events:none;filter:blur(10px);transform:scale(1.02);transition:.7s cubic-bezier(.22,1,.36,1)}
.entry-card{width:100%;text-align:center;padding:28px 18px;border:1px solid rgba(255,255,255,.32);border-radius:34px;background:linear-gradient(160deg,rgba(9,18,31,.38),rgba(255,255,255,.16));backdrop-filter:blur(20px);box-shadow:0 26px 80px rgba(0,0,0,.25);position:relative;overflow:hidden}
.entry-card:before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 120deg,transparent,rgba(107,205,242,.14),transparent,rgba(233,68,101,.10),transparent);animation:spin 14s linear infinite}.entry-card>*{position:relative}@keyframes spin{to{transform:rotate(360deg)}}
.entry-symbol{width:150px;height:124px;object-fit:contain;filter:drop-shadow(0 18px 28px var(--glow));margin-bottom:6px}.entry-title span{display:block;font-family:var(--font-display);font-size:clamp(42px,15vw,66px);font-weight:900;letter-spacing:-.06em;line-height:.9}.entry-title b{display:block;font-size:11px;letter-spacing:.18em;margin-top:12px;color:var(--accent);font-weight:800}.entry-sub{font-family:var(--font-body);color:var(--muted);font-size:12px;margin:15px 0 20px;letter-spacing:.04em}
.start-btn{width:100%;border:0;border-radius:999px;padding:16px;background:linear-gradient(90deg,var(--accent),#7789df,var(--accent2));color:white;font-weight:900;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 14px 36px var(--glow)}.entry-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}.entry-meta span{border:1px solid var(--line);border-radius:16px;padding:10px 4px;background:rgba(255,255,255,.22);font-size:10px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.06em}.skip-btn{border:0;background:transparent;color:var(--sub);font-size:12px;margin-top:18px}

.app{position:relative;z-index:2;display:none;min-height:100vh;padding-bottom:38px}.app.show{display:block;animation:fadeUp .55s cubic-bezier(.22,1,.36,1)}@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.top{position:sticky;top:0;z-index:20;padding:10px 12px 8px;background:linear-gradient(180deg,rgba(244,249,253,.86),rgba(244,249,253,.52));backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}.night-mode .top{background:linear-gradient(180deg,rgba(7,16,27,.90),rgba(7,16,27,.56))}
.brand{border:0;background:transparent;display:block;margin:0 auto 8px}.brand img{width:130px;height:31px;object-fit:contain;filter:drop-shadow(0 8px 18px var(--glow))}
.menu{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.menu::-webkit-scrollbar{display:none}.nav{flex:0 0 auto;border:1px solid var(--line);background:var(--panel2);border-radius:999px;padding:8px 10px;color:var(--muted);font-size:10px;font-weight:850;letter-spacing:.06em}.nav.active{background:linear-gradient(90deg,var(--accent),var(--accent2));border-color:transparent;color:white}

.screen{display:none;padding:16px 14px 0}.screen.active{display:block;animation:fadeUp .42s ease both}
.hero{min-height:calc(100vh - 110px);display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:16px}.hero-symbol{width:128px;height:112px;object-fit:contain;filter:drop-shadow(0 14px 24px var(--glow));margin-bottom:18px}.hero-kicker{color:var(--muted);font-size:12px;letter-spacing:.04em;margin-bottom:4px}.hero h1{font-family:var(--font-display);font-size:clamp(54px,18vw,78px);font-weight:900;letter-spacing:-.075em;line-height:.88;margin:2px 0 18px;text-shadow:0 12px 32px rgba(0,0,0,.12)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:10px}.stats div{border:1px solid var(--line);border-radius:18px;background:var(--panel);backdrop-filter:blur(14px);padding:10px 4px;text-align:center;box-shadow:0 12px 28px var(--shadow)}.stats b{display:block;font-family:var(--font-display);font-size:17px;font-weight:900}.stats span{font-size:9px;color:var(--muted);text-transform:uppercase;font-weight:800;letter-spacing:.04em}
.mode-card{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:24px;background:var(--panel);backdrop-filter:blur(18px);box-shadow:0 16px 38px var(--shadow);padding:13px 14px;margin:10px 0}.mode-card small{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.10em;font-weight:800}.mode-card strong{font-family:var(--font-display);font-size:13px;letter-spacing:.03em}
.switch{width:72px;height:36px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.55);padding:3px;box-shadow:inset 0 2px 10px rgba(0,0,0,.08)}.switch i{display:block;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#fff,var(--accent));box-shadow:0 6px 18px var(--glow);transition:.45s cubic-bezier(.22,1,.36,1)}.night-mode .switch i{transform:translateX(34px);background:linear-gradient(135deg,var(--danger),#67d3ff)}
.audio-row{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}.pill{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:9px 12px;font-size:11px;font-weight:850;color:var(--ink);white-space:nowrap}.pill.ghost{color:var(--muted)}.touching{transform:scale(.96);filter:brightness(1.08)}
.headline-card,.world-file,.champion-card,.champion-detail,.empty-archive,.news-list article,.arena-list article,.news-logo{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:var(--panel);backdrop-filter:blur(18px);box-shadow:0 18px 44px var(--shadow)}
.headline-card,.world-file{padding:16px;cursor:pointer}.headline-card span,.file-top span{font-size:10px;color:var(--accent);letter-spacing:.12em;text-transform:uppercase;font-weight:850}.headline-card b{display:block;font-size:19px;letter-spacing:-.04em;margin:5px 0 7px}.headline-card em{font-size:11px;color:var(--sub);font-style:normal}
.section-head{padding:6px 2px 14px}.section-head span{font-size:10px;color:var(--accent);letter-spacing:.14em;text-transform:uppercase;font-weight:850}.section-head h2{font-family:var(--font-display);font-size:31px;font-weight:900;letter-spacing:-.06em;line-height:1.05}.file-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.file-top b{font-size:15px;text-transform:uppercase;letter-spacing:.06em}.world-file p{font-size:14px;line-height:1.86;color:var(--ink)}

.champion-list{display:flex;flex-direction:column;gap:14px;margin-top:16px}.champion-card{padding:16px;transition:.45s cubic-bezier(.22,1,.36,1)}.champion-card:before{content:"";position:absolute;right:-60px;top:-70px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 66%);pointer-events:none}.haeil:before{background:radial-gradient(circle,rgba(233,68,101,.26),transparent 66%)}.champion-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.champion-top span{font-size:10px;color:var(--muted);font-weight:850;letter-spacing:.14em}.champion-top b{font-size:10px;color:white;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:999px;padding:6px 9px}.champion-main{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}.champion-main small{font-size:10px;color:var(--accent);letter-spacing:.10em;font-weight:850}.champion-main h3{font-family:var(--font-display);font-size:34px;font-weight:900;letter-spacing:-.065em;line-height:.95;margin-top:5px}.champion-main em{font-style:normal;color:var(--muted);font-weight:850;font-size:13px}.open-file{border:1px solid var(--line);background:var(--panel2);border-radius:999px;padding:9px 12px;font-size:10px;font-weight:850;color:var(--muted);white-space:nowrap}.loadout{display:grid;grid-template-columns:.7fr 1.2fr .7fr;gap:7px;margin-top:15px}.loadout span{border:1px solid var(--line);border-radius:14px;padding:8px 4px;background:rgba(255,255,255,.18);text-align:center;font-size:9px;font-weight:850;color:var(--muted);letter-spacing:.02em}.mini-note{margin-top:10px;color:var(--sub);font-size:12px;letter-spacing:.02em}.champion-detail{max-height:0;opacity:0;margin-top:0;padding:0 14px;transition:max-height .7s cubic-bezier(.22,1,.36,1),opacity .45s,padding .45s,margin .45s;cursor:pointer}.champion-card.open .champion-detail{max-height:520px;opacity:1;margin-top:14px;padding:14px;overflow:auto}.detail-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.detail-title b{font-size:12px;letter-spacing:.08em;text-transform:uppercase}.detail-title span{font-size:10px;color:var(--accent);font-weight:850}.champion-detail p{font-size:14px;line-height:1.86;color:var(--ink)}

.empty-archive,.news-logo{padding:22px;text-align:center}.empty-archive img{width:110px;filter:drop-shadow(0 14px 28px var(--glow));margin-bottom:10px}.empty-archive b{display:block;font-family:var(--font-display);font-size:24px}.empty-archive p{color:var(--muted);font-size:13px;margin-top:6px}.news-logo img{width:230px;max-width:90%;height:auto;filter:drop-shadow(0 16px 28px rgba(233,68,101,.18))}.news-list,.arena-list{display:flex;flex-direction:column;gap:12px;margin-top:14px}.news-list article,.arena-list article{padding:15px;cursor:pointer}.news-list span{font-size:10px;color:var(--accent2);font-weight:850;letter-spacing:.12em}.news-list b,.arena-list b{display:block;font-size:17px;letter-spacing:-.03em;margin:4px 0}.news-list p,.arena-list span{color:var(--muted);font-size:13px}
.copyfx{outline:1px solid var(--copy)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.36),0 0 28px var(--glow)!important}.copyfx:after{content:"";position:absolute;inset:-45%;background:linear-gradient(112deg,transparent 25%,rgba(255,255,255,.16) 36%,rgba(255,255,255,.82) 50%,rgba(255,255,255,.22) 62%,transparent 74%);transform:translateX(-100%) rotate(8deg);animation:glass 2.1s cubic-bezier(.22,1,.36,1) forwards;pointer-events:none}@keyframes glass{to{transform:translateX(100%) rotate(8deg)}}
.toast{position:fixed;left:50%;bottom:22px;z-index:100;transform:translateX(-50%) translateY(16px);opacity:0;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(18px);border-radius:999px;padding:11px 18px;font-size:13px;font-weight:850;box-shadow:0 16px 40px var(--shadow);transition:.25s}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(min-width:431px){.phone-shell{min-height:100vh}}

.hero-symbol{margin-top:40px;margin-bottom:24px}
.menu{padding-bottom:4px}
.nav{position:relative;overflow:hidden}
.nav.active{
background:linear-gradient(135deg,var(--accent),var(--accent2));
box-shadow:0 8px 24px var(--glow), inset 0 1px 0 rgba(255,255,255,.25);
}
.nav.active:before{
content:"";
position:absolute;
inset:1px;
border-radius:999px;
background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 60%);
pointer-events:none;
}
.live-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(8,12,20,.68);
border:1px solid rgba(255,70,70,.28);
backdrop-filter:blur(14px);
color:#fff;
font-size:11px;
font-weight:900;
letter-spacing:.12em;
margin-bottom:14px;
width:max-content;
box-shadow:0 0 24px rgba(255,70,70,.18);
}
.day-mode .live-badge{
background:rgba(255,255,255,.72);
color:#8b0f1f;
}
.live-badge i{
width:10px;
height:10px;
border-radius:50%;
background:#ff334f;
box-shadow:0 0 14px #ff334f;
animation:blink 1.2s infinite;
display:block;
}
@keyframes blink{
0%,100%{opacity:1;transform:scale(1)}
50%{opacity:.3;transform:scale(.78)}
}

.hero-symbol{margin-top:52px!important}
.audio-row.single{justify-content:flex-start}
.live-stat b{
color:#ff4461!important;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
}
.live-stat i{
width:8px;
height:8px;
border-radius:50%;
background:#ff3355;
display:inline-block;
box-shadow:0 0 12px #ff3355;
animation:liveBlink 1.2s infinite;
}
@keyframes liveBlink{
0%,100%{opacity:1}
50%{opacity:.35}
}
.nav.active{
background:linear-gradient(135deg,var(--accent),var(--accent2));
}
.nav.active::after{
display:none!important;
}

/* v12: home emblem behind season + live stat + single bgm */
.hero{position:relative}
.hero-symbol{
position:absolute!important;
left:4px!important;
bottom:116px!important;
width:104px!important;
height:104px!important;
margin:0!important;
opacity:.90;
z-index:0;
filter:drop-shadow(0 10px 18px var(--glow));
}
.hero h1{
position:relative;
z-index:1;
margin-bottom:2px!important;
}
.hero-kicker{
order:10;
margin-top:0!important;
margin-bottom:16px!important;
position:relative;
z-index:2;
}
.stats,.mode-card,.audio-row{position:relative;z-index:3}
.audio-row.single{justify-content:flex-start}
.live-badge{display:none!important}
.live-stat b{
color:#ff3d5c!important;
display:flex!important;
align-items:center;
justify-content:center;
gap:6px;
}
.live-stat i{
width:8px;
height:8px;
border-radius:50%;
background:#ff3355;
display:inline-block;
box-shadow:0 0 12px #ff3355;
animation:liveBlink 1.15s infinite;
}
@keyframes liveBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.32;transform:scale(.74)}}

/* v13 HOME title layout correction */
.hero{
  position:relative;
  justify-content:flex-start!important;
  padding-top:48px!important;
  padding-bottom:16px!important;
  min-height:calc(100vh - 110px);
}
.hero-symbol{
  position:absolute!important;
  left:18px!important;
  top:34px!important;
  bottom:auto!important;
  width:104px!important;
  height:104px!important;
  margin:0!important;
  opacity:.92!important;
  z-index:0!important;
  pointer-events:none;
  filter:drop-shadow(0 10px 18px var(--glow));
}
.hero h1{
  position:relative!important;
  z-index:1!important;
  margin-top:38px!important;
  margin-bottom:0!important;
  line-height:.82!important;
}
.hero-kicker{
  order:0!important;
  position:relative!important;
  z-index:2!important;
  margin:2px 0 14px!important;
  font-size:12px!important;
  color:var(--muted)!important;
  transform:none!important;
}
.stats{
  margin-top:0!important;
  margin-bottom:10px!important;
}
.mode-card{
  margin-top:10px!important;
}
.audio-row.single{
  margin-top:0!important;
}

/* v14 exact home composition */
.hero{
position:relative;
padding-top:38px!important;
}
.hero-symbol{
position:absolute!important;
left:14px!important;
top:44px!important;
width:82px!important;
height:82px!important;
z-index:0!important;
opacity:.92!important;
pointer-events:none;
}
.hero h1{
position:relative!important;
z-index:2!important;
margin-top:26px!important;
margin-left:0!important;
margin-bottom:0!important;
line-height:.83!important;
letter-spacing:-.06em!important;
}
.hero-kicker{
position:relative!important;
z-index:3!important;
margin-top:-2px!important;
margin-left:4px!important;
margin-bottom:14px!important;
font-size:12px!important;
letter-spacing:.01em!important;
color:rgba(34,52,78,.58)!important;
font-weight:500!important;
}

/* v15: correct HOME order and remove accidental empty gap */
.hero{
  display:block!important;
  min-height:auto!important;
  padding-top:22px!important;
  padding-bottom:14px!important;
}
.hero-symbol{
  position:absolute!important;
  left:10px!important;
  top:16px!important;
  width:86px!important;
  height:86px!important;
  z-index:0!important;
  opacity:.92!important;
  pointer-events:none!important;
  margin:0!important;
}
.hero h1{
  position:relative!important;
  z-index:2!important;
  margin:18px 0 6px 0!important;
  line-height:.83!important;
  letter-spacing:-.06em!important;
}
.stats{
  margin-top:0!important;
  margin-bottom:2px!important;
}
.hero-kicker{
  display:block!important;
  position:relative!important;
  z-index:3!important;
  margin:0 0 12px 3px!important;
  padding:0!important;
  order:initial!important;
  font-size:12px!important;
  line-height:1.1!important;
  letter-spacing:.01em!important;
  color:rgba(34,52,78,.58)!important;
  font-weight:500!important;
}
.night-mode .hero-kicker{
  color:rgba(225,237,255,.60)!important;
}
.mode-card{
  margin-top:0!important;
  margin-bottom:10px!important;
}
.audio-row.single{
  margin-top:0!important;
  margin-bottom:12px!important;
}
.headline-card{
  margin-top:0!important;
}

/* v16: exact requested overlap and text order */
.hero{
  display:block!important;
  min-height:auto!important;
  padding-top:36px!important;
  padding-bottom:14px!important;
}
.hero-symbol{
  position:absolute!important;
  left:8px!important;
  top:52px!important;
  width:92px!important;
  height:92px!important;
  z-index:1!important;
  opacity:.96!important;
  pointer-events:none!important;
  margin:0!important;
  filter:drop-shadow(0 10px 18px var(--glow));
}
.hero h1{
  position:relative!important;
  z-index:2!important;
  margin:34px 0 0 0!important;
  line-height:.83!important;
  letter-spacing:-.06em!important;
}
.hero-kicker{
  display:block!important;
  position:relative!important;
  z-index:3!important;
  margin:0 0 7px 4px!important;
  padding:0!important;
  font-size:12px!important;
  line-height:1!important;
  letter-spacing:.01em!important;
  color:rgba(34,52,78,.58)!important;
  font-weight:500!important;
}
.night-mode .hero-kicker{
  color:rgba(225,237,255,.62)!important;
}
.stats{
  margin-top:0!important;
  margin-bottom:10px!important;
  position:relative!important;
  z-index:4!important;
}
.mode-card{
  margin-top:0!important;
}

/* v17: remove home emblem, restore city-view top breathing space */
#home .hero-symbol{
  display:none!important;
}
#home .hero{
  display:block!important;
  min-height:auto!important;
  padding-top:155px!important;
  padding-bottom:14px!important;
}
#home .hero h1{
  margin:0 0 0 0!important;
  position:relative!important;
  z-index:2!important;
}
#home .hero-kicker{
  margin:0 0 8px 4px!important;
  position:relative!important;
  z-index:2!important;
}
#home .stats{
  margin-top:0!important;
  margin-bottom:10px!important;
}
#home .mode-card{
  margin-top:0!important;
}
#home .audio-row.single{
  margin-top:0!important;
  margin-bottom:56px!important;
}
#home .headline-card{
  margin-top:0!important;
}

/* v18: push home block down and attach sound/motto spacing */
#home .hero{
  padding-top:230px!important;
  padding-bottom:0!important;
}
#home .hero h1{
  margin:0!important;
}
#home .hero-kicker{
  margin:0 0 8px 4px!important;
}
#home .stats{
  margin-bottom:10px!important;
}
#home .mode-card{
  margin-bottom:8px!important;
}
#home .audio-row.single{
  margin-top:0!important;
  margin-bottom:8px!important;
}
#home .headline-card{
  margin-top:0!important;
}

/* v19: push ALL home UI much lower for city showcase */
#home .hero{
  padding-top:360px!important;
}
#home .hero h1{
  margin:0 0 2px 0!important;
}
#home .hero-kicker{
  margin:0 0 10px 4px!important;
}
#home .stats{
  margin-bottom:14px!important;
}
#home .mode-card{
  margin-bottom:12px!important;
}
#home .audio-row.single{
  margin-bottom:14px!important;
}

/* v20: character situation example blocks */
.situation-zone{
  margin-top:16px;
  border-top:1px solid var(--line);
  padding-top:13px;
}
.situation-title{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
  margin-bottom:10px;
}
.situation-title span{
  color:var(--accent);
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
}
.situation-title small{
  color:var(--muted);
  font-size:10px;
  line-height:1.25;
  text-align:right;
}
.situation-scroll{
  display:flex;
  gap:10px;
  overflow-x:auto;
  scrollbar-width:none;
  padding:2px 2px 6px;
  scroll-snap-type:x mandatory;
}
.situation-scroll::-webkit-scrollbar{display:none}
.situation-card{
  flex:0 0 168px;
  min-height:122px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.46),rgba(255,255,255,.16));
  color:var(--ink);
  box-shadow:0 12px 28px var(--shadow);
  padding:13px;
  text-align:left;
  scroll-snap-align:start;
}
.night-mode .situation-card{
  background:linear-gradient(145deg,rgba(22,34,56,.66),rgba(10,16,28,.46));
}
.situation-card:before{
  content:"";
  position:absolute;
  right:-32px;
  top:-36px;
  width:88px;
  height:88px;
  border-radius:50%;
  background:radial-gradient(circle,var(--glow),transparent 66%);
  pointer-events:none;
}
.haeil-situation:before{
  background:radial-gradient(circle,rgba(255,65,94,.28),transparent 66%);
}
.situation-card span{
  display:block;
  color:var(--accent);
  font-size:11px;
  font-weight:900;
  margin-bottom:7px;
}
.situation-card b{
  position:absolute;
  top:11px;
  right:12px;
  font-family:var(--font-display);
  font-size:18px;
  letter-spacing:-.04em;
  opacity:.42;
}
.situation-card p{
  font-size:12px!important;
  line-height:1.55!important;
  color:var(--ink)!important;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.situation-card em{
  position:absolute;
  left:13px;
  bottom:11px;
  font-style:normal;
  color:var(--muted);
  font-size:10px;
}
.champion-card.open .champion-detail{
  max-height:780px!important;
}

/* v21: situation blocks as 2x2 grid, no content preview */
.situation-scroll{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  overflow:visible!important;
  padding:2px 0 4px!important;
  scroll-snap-type:none!important;
}
.situation-card{
  flex:none!important;
  width:100%!important;
  min-height:96px!important;
  border-radius:22px!important;
  padding:14px 12px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
}
.situation-card span{
  font-size:12px!important;
  margin:0!important;
  color:var(--accent)!important;
}
.situation-card b{
  top:50%!important;
  right:14px!important;
  transform:translateY(-50%)!important;
  font-size:28px!important;
  opacity:.18!important;
}
.situation-card p,
.situation-card em{
  display:none!important;
}
.champion-card.open .champion-detail{
  max-height:920px!important;
}

/* v22: compact situation cards */
.situation-scroll{
  gap:8px!important;
}
.situation-card{
  min-height:74px!important;
  border-radius:18px!important;
  padding:10px 11px!important;
}
.situation-card span{
  font-size:11px!important;
  line-height:1.2!important;
}
.situation-card b{
  font-size:22px!important;
  right:11px!important;
}

/* v24 Lorebook archive */
.lore-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--panel);
  backdrop-filter:blur(18px);
  box-shadow:0 16px 38px var(--shadow);
  padding:14px;
  margin-bottom:14px;
  position:relative;
  overflow:hidden;
}
.lore-toolbar b{
  display:block;
  font-size:12px;
  letter-spacing:.12em;
  color:var(--accent);
}
.lore-toolbar span{
  display:block;
  margin-top:3px;
  font-size:11px;
  color:var(--muted);
}
.copy-all-lore{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 13px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:white;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
}
.lore-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.lore-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:26px;
  background:var(--panel);
  backdrop-filter:blur(18px);
  box-shadow:0 16px 38px var(--shadow);
}
.lore-head{
  display:flex;
  gap:12px;
  padding:14px;
  border-bottom:1px solid var(--line);
}
.lore-code{
  width:52px;
  min-width:52px;
  height:52px;
  border-radius:18px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  background:rgba(255,255,255,.24);
  color:var(--accent);
  font-family:var(--font-display);
  font-weight:900;
  font-size:13px;
}
.lore-title-wrap{
  flex:1;
  min-width:0;
}
.lore-title{
  position:relative;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:12px;
  display:inline-block;
  padding:2px 3px;
  font-size:18px;
  font-weight:900;
  letter-spacing:-.04em;
  color:var(--ink);
  cursor:pointer;
}
.lore-sub{
  display:block;
  margin-top:3px;
  font-size:10px;
  color:var(--muted);
  letter-spacing:.08em;
  font-weight:800;
}
.lore-tags{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
}
.lore-tag{
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.18);
  color:var(--accent);
  font-size:11px;
  font-weight:850;
  padding:5px 8px;
}
.lore-body{
  position:relative;
  overflow:hidden;
  border:1px solid transparent;
  padding:14px 14px 16px;
  font-size:14px;
  line-height:1.86;
  color:var(--ink);
  white-space:pre-wrap;
  cursor:pointer;
}
.lore-title.copyfx,
.lore-tags.copyfx,
.lore-body.copyfx,
.lore-toolbar.copyfx{
  outline:1px solid var(--copy)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 0 24px var(--glow)!important;
}


/* v25 lore polish */
.lore-card{
  border-radius:30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.58)),
    radial-gradient(circle at top right, rgba(88,165,255,.14), transparent 42%);
  border:1px solid rgba(132,166,214,.22);
  box-shadow:
    0 24px 60px rgba(60,88,122,.12),
    inset 0 1px 0 rgba(255,255,255,.82);
  transition:transform .35s ease, box-shadow .35s ease;
}
.lore-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg,
      transparent 0%,
      rgba(255,255,255,.28) 42%,
      transparent 72%);
  opacity:.55;
  pointer-events:none;
}
.lore-card:hover{
  transform:translateY(-3px);
  box-shadow:
    0 30px 72px rgba(60,88,122,.16),
    inset 0 1px 0 rgba(255,255,255,.92);
}
.lore-head{
  align-items:center;
  padding:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.28), transparent);
}
.lore-code{
  width:58px;
  min-width:58px;
  height:58px;
  border-radius:22px;
  background:
    linear-gradient(145deg, rgba(77,150,235,.14), rgba(255,255,255,.44));
  border:1px solid rgba(132,166,214,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 10px 24px rgba(89,128,178,.12);
}
.lore-title{
  font-size:20px;
  letter-spacing:-.055em;
}
.lore-tags{
  padding-top:4px;
  border-bottom:none;
}
.lore-tag{
  background:rgba(88,165,255,.09);
  border:1px solid rgba(88,165,255,.18);
  color:#4d7fbd;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.lore-body{
  margin:0 14px 14px;
  border-radius:22px;
  background:rgba(255,255,255,.34);
  border:1px solid rgba(132,166,214,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  font-size:14.4px;
  line-height:1.92;
}

/* v26 lore fixes */
.lore-head{cursor:pointer;position:relative;overflow:hidden}
.lore-head.copyfx{
  outline:1px solid var(--copy)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 0 24px var(--glow)!important;
}
.night-mode .lore-card{
  background:
    linear-gradient(180deg, rgba(13,22,39,.88), rgba(8,14,26,.78)),
    radial-gradient(circle at top right, rgba(107,205,242,.18), transparent 42%)!important;
  border-color:rgba(107,205,242,.22)!important;
  box-shadow:
    0 24px 60px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.night-mode .lore-card::before{
  opacity:.22!important;
}
.night-mode .lore-head{
  background:linear-gradient(180deg, rgba(255,255,255,.05), transparent)!important;
  border-bottom-color:rgba(107,205,242,.13)!important;
}
.night-mode .lore-code{
  background:linear-gradient(145deg, rgba(107,205,242,.14), rgba(255,255,255,.04))!important;
  border-color:rgba(107,205,242,.24)!important;
  color:#8fe4ff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px rgba(0,0,0,.22)!important;
}
.night-mode .lore-title{
  color:#edf6ff!important;
}
.night-mode .lore-tag{
  background:rgba(107,205,242,.10)!important;
  border-color:rgba(107,205,242,.20)!important;
  color:#8fe4ff!important;
  box-shadow:none!important;
}
.night-mode .lore-body{
  background:rgba(5,10,20,.36)!important;
  border-color:rgba(107,205,242,.14)!important;
  color:#dceaff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.night-mode .lore-toolbar{
  background:rgba(9,16,29,.82)!important;
}

/* v27: richer copy feedback for lore title / keyword areas */
.lore-head.copyfx,
.lore-tags.copyfx{
  outline:1px solid var(--copy)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.42),
    inset 0 0 28px rgba(255,255,255,.18),
    0 0 28px var(--glow)!important;
  border-color:var(--copy)!important;
  transition:border-color 2.2s cubic-bezier(.22,1,.36,1),
             box-shadow 2.2s cubic-bezier(.22,1,.36,1),
             outline-color 2.2s cubic-bezier(.22,1,.36,1);
}
.lore-head.copyfx:after,
.lore-tags.copyfx:after{
  content:"";
  position:absolute;
  inset:-55%;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,.72) 0%,
      rgba(255,255,255,.34) 24%,
      rgba(255,255,255,.10) 46%,
      transparent 68%),
    linear-gradient(115deg,
      transparent 28%,
      rgba(255,255,255,.14) 38%,
      rgba(255,255,255,.78) 50%,
      rgba(255,255,255,.20) 61%,
      transparent 76%);
  transform:translateX(-120%) rotate(8deg);
  animation:loreGlassWide 2.25s cubic-bezier(.22,1,.36,1) forwards;
  mix-blend-mode:screen;
}
.lore-head.copyfx:before,
.lore-tags.copyfx:before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      transparent,
      color-mix(in srgb, var(--copy) 20%, transparent),
      transparent);
  opacity:0;
  animation:loreAfterGlow 2.25s cubic-bezier(.22,1,.36,1) forwards;
}

  58%{opacity:.72}
  100%{transform:translateX(122%) rotate(8deg);opacity:0}
}

  100%{opacity:0}
}
.night-mode .lore-head.copyfx,
.night-mode .lore-tags.copyfx{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 0 34px rgba(107,205,242,.08),
    0 0 30px var(--glow)!important;
}
.night-mode .lore-head.copyfx:after,
.night-mode .lore-tags.copyfx:after{
  background:
    radial-gradient(ellipse at center,
      rgba(143,228,255,.55) 0%,
      rgba(255,255,255,.28) 25%,
      rgba(143,228,255,.09) 48%,
      transparent 70%),
    linear-gradient(115deg,
      transparent 28%,
      rgba(143,228,255,.12) 38%,
      rgba(255,255,255,.58) 50%,
      rgba(143,228,255,.16) 61%,
      transparent 76%);
}

/* v28: MAIN reset button */
.topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.topline .brand{
  margin:0!important;
}
.main-reset{
  border:1px solid var(--line);
  background:var(--panel2);
  color:var(--muted);
  border-radius:999px;
  padding:8px 12px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.10em;
  box-shadow:0 8px 20px var(--shadow);
}

/* v28: make lore title/keyword copy feedback use the whole rectangular area */
.lore-head,
.lore-tags{
  border:1px solid transparent!important;
  border-radius:22px!important;
  margin:0 12px;
}
.lore-head{
  margin-top:12px;
  padding:12px!important;
  border-bottom:none!important;
}
.lore-tags{
  margin-top:8px;
  padding:10px 12px!important;
  background:rgba(255,255,255,.22);
}
.night-mode .lore-tags{
  background:rgba(5,10,20,.24);
}
.lore-head.copyfx,
.lore-tags.copyfx{
  border-color:var(--copy)!important;
  outline:none!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.34),
    inset 0 0 22px rgba(255,255,255,.12),
    0 0 24px var(--glow)!important;
  overflow:hidden!important;
  position:relative!important;
}

.lore-head.copyfx:after,
.lore-tags.copyfx:after{
  content:""!important;
  position:absolute!important;
  inset:-38%!important;
  pointer-events:none!important;
  background:linear-gradient(112deg,
    transparent 25%,
    rgba(255,255,255,.13) 36%,
    rgba(255,255,255,.78) 50%,
    rgba(255,255,255,.20) 62%,
    transparent 76%)!important;
  transform:translateX(-100%) rotate(8deg)!important;
  animation:glass 2.1s cubic-bezier(.22,1,.36,1) forwards!important;
  mix-blend-mode:screen;
}
.night-mode .lore-head.copyfx,
.night-mode .lore-tags.copyfx{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 0 26px rgba(107,205,242,.08),
    0 0 24px var(--glow)!important;
}
.night-mode .lore-head.copyfx:after,
.night-mode .lore-tags.copyfx:after{
  background:linear-gradient(112deg,
    transparent 25%,
    rgba(143,228,255,.12) 36%,
    rgba(255,255,255,.56) 50%,
    rgba(143,228,255,.16) 62%,
    transparent 76%)!important;
}

/* v29: restore centered top logo, move MAIN beside SOUND */
.topline{display:block!important;margin:0!important}
.top .brand{
  display:block!important;
  margin:0 auto 8px!important;
  text-align:center!important;
}
#mainBtn{display:none!important}
#homeMainBtn{
  color:var(--muted);
}

/* v29: title/tag copy effect same broad glass sweep as content */
.lore-head.copyfx,
.lore-tags.copyfx{
  border-color:var(--copy)!important;
  outline:none!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.36),
    0 0 28px var(--glow)!important;
  overflow:hidden!important;
  position:relative!important;
}

.lore-head.copyfx:after,
.lore-tags.copyfx:after{
  content:""!important;
  position:absolute!important;
  inset:-45%!important;
  pointer-events:none!important;
  background:linear-gradient(112deg,
    transparent 25%,
    rgba(255,255,255,.16) 36%,
    rgba(255,255,255,.82) 50%,
    rgba(255,255,255,.22) 62%,
    transparent 74%)!important;
  transform:translateX(-100%) rotate(8deg)!important;
  animation:glass 2.1s cubic-bezier(.22,1,.36,1) forwards!important;
  mix-blend-mode:screen!important;
}
.night-mode .lore-head.copyfx:after,
.night-mode .lore-tags.copyfx:after{
  background:linear-gradient(112deg,
    transparent 25%,
    rgba(143,228,255,.14) 36%,
    rgba(255,255,255,.65) 50%,
    rgba(143,228,255,.18) 62%,
    transparent 74%)!important;
}

/* v30 updated city visuals */
body.day-mode .city-backdrop,
body.day-mode .hero-bg,
body.day-mode .home-bg{
  background-image:
    linear-gradient(to bottom, rgba(244,248,255,.10), rgba(244,248,255,.82)),
    url('../assets/images/city_day.webp')!important;
  background-size:cover!important;
  background-position:center top!important;
}
body.night-mode .city-backdrop,
body.night-mode .hero-bg,
body.night-mode .home-bg{
  background-image:
    linear-gradient(to bottom, rgba(2,6,18,.22), rgba(2,6,18,.82)),
    url('../assets/images/city_night.webp')!important;
  background-size:cover!important;
  background-position:center top!important;
}

/* v30 copy effect identical to content copy */
.lore-head.copyfx,
.lore-tags.copyfx{
  overflow:hidden!important;
  position:relative!important;
}
.lore-head.copyfx::after,
.lore-tags.copyfx::after{
  content:""!important;
  position:absolute!important;
  inset:-20%!important;
  pointer-events:none!important;
  background:
    linear-gradient(
      110deg,
      transparent 24%,
      rgba(255,255,255,.10) 34%,
      rgba(255,255,255,.92) 48%,
      rgba(255,255,255,.16) 60%,
      transparent 74%
    )!important;
  transform:translateX(-130%) skewX(-14deg)!important;
  animation:contentSweep 2.1s cubic-bezier(.22,1,.36,1) forwards!important;
  mix-blend-mode:screen!important;
}
.night-mode .lore-head.copyfx::after,
.night-mode .lore-tags.copyfx::after{
  background:
    linear-gradient(
      110deg,
      transparent 24%,
      rgba(120,220,255,.08) 34%,
      rgba(255,255,255,.82) 48%,
      rgba(120,220,255,.12) 60%,
      transparent 74%
    )!important;
}
@keyframes contentSweep{
  0%{
    transform:translateX(-130%) skewX(-14deg);
    opacity:0;
  }
  12%{opacity:1;}
  100%{
    transform:translateX(130%) skewX(-14deg);
    opacity:0;
  }
}

/* v32 corrected city visuals */
body.day-mode .city-backdrop,
body.day-mode .hero-bg,
body.day-mode .home-bg,
body.day-mode #home{
  background-image:
    linear-gradient(to bottom, rgba(245,248,255,.03), rgba(245,248,255,.42)),
    url('../assets/images/city_day.webp')!important;
  background-size:cover!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
}

body.night-mode .city-backdrop,
body.night-mode .hero-bg,
body.night-mode .home-bg,
body.night-mode #home{
  background-image:
    linear-gradient(to bottom, rgba(3,6,18,.08), rgba(3,6,18,.46)),
    url('../assets/images/city_night.webp')!important;
  background-size:cover!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
}

/* remove heavy blur/white wash */
.home-overlay,
.hero-overlay,
.city-overlay{
  backdrop-filter:none!important;
  background:transparent!important;
}

/* EXACT SAME COPY SWEEP AS CONTENT COPY */
.lore-head.copyfx,
.lore-tags.copyfx{
  position:relative!important;
  overflow:hidden!important;
  border-color:var(--copy)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.25),
    0 0 22px var(--glow)!important;
}

.lore-head.copyfx::after,
.lore-tags.copyfx::after{
  content:""!important;
  position:absolute!important;
  top:-120%!important;
  left:-55%!important;
  width:46%!important;
  height:340%!important;
  pointer-events:none!important;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.14) 25%,
    rgba(255,255,255,.95) 50%,
    rgba(255,255,255,.14) 75%,
    rgba(255,255,255,0) 100%
  )!important;
  transform:rotate(24deg) translateX(-240%)!important;
  animation:exactCopySweep 2.1s cubic-bezier(.22,1,.36,1) forwards!important;
  mix-blend-mode:screen!important;
  filter:blur(2px)!important;
}

.night-mode .lore-head.copyfx::after,
.night-mode .lore-tags.copyfx::after{
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(125,220,255,.10) 25%,
    rgba(255,255,255,.88) 50%,
    rgba(125,220,255,.10) 75%,
    rgba(255,255,255,0) 100%
  )!important;
}

@keyframes exactCopySweep{
  0%{
    transform:rotate(24deg) translateX(-240%);
    opacity:0;
  }
  10%{
    opacity:1;
  }
  100%{
    transform:rotate(24deg) translateX(420%);
    opacity:0;
  }
}

/* v33 REAL lore title/tag copy shine */
.lore-head,
.lore-tags{
  position:relative!important;
  overflow:hidden!important;
}

.lore-head.copyfx::before,
.lore-tags.copyfx::before{
  content:""!important;
  position:absolute!important;
  top:-180%!important;
  left:-60%!important;
  width:42%!important;
  height:420%!important;
  z-index:20!important;
  pointer-events:none!important;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.12) 22%,
    rgba(255,255,255,.95) 50%,
    rgba(255,255,255,.12) 78%,
    rgba(255,255,255,0) 100%
  )!important;
  filter:blur(3px)!important;
  opacity:1!important;
  transform:rotate(24deg) translateX(-260%)!important;
  animation:loreRealSweep 2s cubic-bezier(.22,1,.36,1) forwards!important;
  mix-blend-mode:screen!important;
}

.night-mode .lore-head.copyfx::before,
.night-mode .lore-tags.copyfx::before{
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(125,220,255,.10) 22%,
    rgba(255,255,255,.92) 50%,
    rgba(125,220,255,.10) 78%,
    rgba(255,255,255,0) 100%
  )!important;
}

@keyframes loreRealSweep{
  0%{
    transform:rotate(24deg) translateX(-260%);
    opacity:0;
  }
  12%{
    opacity:1;
  }
  100%{
    transform:rotate(24deg) translateX(520%);
    opacity:0;
  }
}


/* v34 FINAL: lore title/keyword copy shine, no suppressed pseudo-element */
.lore-head.copyfx::before,
.lore-tags.copyfx::before{
  display:none!important;
  content:none!important;
}

.lore-head,
.lore-tags{
  position:relative!important;
  overflow:hidden!important;
}

.lore-head.copyfx,
.lore-tags.copyfx{
  position:relative!important;
  overflow:hidden!important;
  border-color:var(--copy)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.32),
    0 0 24px var(--glow)!important;
}

.lore-head.copyfx::after,
.lore-tags.copyfx::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  top:-130%!important;
  left:-70%!important;
  width:52%!important;
  height:360%!important;
  z-index:999!important;
  pointer-events:none!important;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.16) 24%,
    rgba(255,255,255,.96) 50%,
    rgba(255,255,255,.18) 76%,
    rgba(255,255,255,0) 100%
  )!important;
  filter:blur(2px)!important;
  opacity:0;
  transform:rotate(23deg) translateX(-240%)!important;
  animation:loreFinalShine 2.15s cubic-bezier(.22,1,.36,1) forwards!important;
  mix-blend-mode:screen!important;
}

.night-mode .lore-head.copyfx::after,
.night-mode .lore-tags.copyfx::after{
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(120,220,255,.14) 24%,
    rgba(255,255,255,.88) 50%,
    rgba(120,220,255,.16) 76%,
    rgba(255,255,255,0) 100%
  )!important;
}

@keyframes loreFinalShine{
  0%{
    transform:rotate(23deg) translateX(-240%)!important;
    opacity:0;
  }
  12%{
    opacity:1;
  }
  100%{
    transform:rotate(23deg) translateX(520%)!important;
    opacity:0;
  }
}

/* v34: make SEASON 27 readable on city background */
.hero h1{
  text-shadow:
    0 2px 0 rgba(255,255,255,.34),
    0 10px 28px rgba(4,14,32,.28),
    0 0 26px rgba(90,160,230,.20)!important;
}
.night-mode .hero h1{
  text-shadow:
    0 2px 0 rgba(255,255,255,.10),
    0 12px 34px rgba(0,0,0,.58),
    0 0 30px rgba(110,215,255,.22)!important;
}


/* v35 HARD FIX: actual DOM shine layer for lore title/keyword copy */
.lore-head,
.lore-tags{
  position:relative!important;
  overflow:hidden!important;
}

.lore-head.copyfx::before,
.lore-head.copyfx::after,
.lore-tags.copyfx::before,
.lore-tags.copyfx::after{
  content:none!important;
  display:none!important;
  animation:none!important;
  background:none!important;
}

.copy-shine-layer{
  position:absolute;
  top:-120%;
  left:-65%;
  width:48%;
  height:340%;
  z-index:9999;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.14) 24%,
    rgba(255,255,255,.96) 50%,
    rgba(255,255,255,.18) 76%,
    rgba(255,255,255,0) 100%
  );
  filter:blur(2px);
  opacity:0;
  transform:rotate(23deg) translateX(-260%);
  animation:copyShineLayerMove 2.15s cubic-bezier(.22,1,.36,1) forwards;
  mix-blend-mode:screen;
}

.night-mode .copy-shine-layer{
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(125,220,255,.12) 24%,
    rgba(255,255,255,.90) 50%,
    rgba(125,220,255,.16) 76%,
    rgba(255,255,255,0) 100%
  );
}

@keyframes copyShineLayerMove{
  0%{transform:rotate(23deg) translateX(-260%);opacity:0;}
  10%{opacity:1;}
  100%{transform:rotate(23deg) translateX(560%);opacity:0;}
}

.lore-head.copyfx,
.lore-tags.copyfx{
  border-color:var(--copy)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.32),
    0 0 24px var(--glow)!important;
}

/* v35 keep SEASON readable */
.hero h1{
  text-shadow:
    0 2px 0 rgba(255,255,255,.34),
    0 10px 28px rgba(4,14,32,.30),
    0 0 28px rgba(90,160,230,.24)!important;
}
.night-mode .hero h1{
  text-shadow:
    0 2px 0 rgba(255,255,255,.10),
    0 12px 34px rgba(0,0,0,.62),
    0 0 30px rgba(110,215,255,.26)!important;
}

/* v36: prevent character detail copy shine from expanding document height */
.champion-detail,
.champion-detail.copyfx{
  position:relative!important;
  overflow:hidden!important;
  contain:paint!important;
}

.champion-detail.copyfx::after{
  inset:-20%!important;
  width:auto!important;
  height:auto!important;
  max-height:none!important;
  overflow:hidden!important;
  transform:translateX(-100%) rotate(8deg)!important;
}

.champion-card.open .champion-detail{
  overflow:auto!important;
  overscroll-behavior:contain;
}

/* keep the shine clipped inside the visible detail panel */
.champion-card.open .champion-detail.copyfx{
  overflow:hidden!important;
}

/* v37: stable character detail expansion, no jumpy internal scroll */
.champion-detail,
.champion-detail.copyfx,
.champion-card.open .champion-detail,
.champion-card.open .champion-detail.copyfx{
  overflow:hidden!important;
  overscroll-behavior:auto!important;
  contain:none!important;
}

.champion-card.open .champion-detail{
  max-height:none!important;
  height:auto!important;
  opacity:1!important;
  margin-top:14px!important;
  padding:14px!important;
}

/* character detail shine clipped but does not affect layout */
.champion-detail.copyfx::after{
  position:absolute!important;
  inset:-30%!important;
  width:auto!important;
  height:auto!important;
  max-height:none!important;
  transform:translateX(-100%) rotate(8deg)!important;
}

/* situation blocks remain visible without creating separate scroll behavior */
.situation-scroll{
  overflow:visible!important;
}

/* v38: force corrected day/night city image layers */
.city-layer .city-day{
  content:url('../assets/images/city_day.webp')!important;
  opacity:1!important;
  display:block!important;
}
.city-layer .city-night{
  content:url('../assets/images/city_night.webp')!important;
  opacity:0!important;
  display:block!important;
}
body.night-mode .city-layer .city-day{
  opacity:0!important;
}
body.night-mode .city-layer .city-night{
  opacity:1!important;
}
body.day-mode .city-layer .city-day{
  opacity:1!important;
}
body.day-mode .city-layer .city-night{
  opacity:0!important;
}
/* make the city more visible, less washed */
.city-wash{
  background:linear-gradient(180deg,rgba(245,248,255,.10),rgba(245,248,255,.46) 55%,rgba(245,248,255,.82))!important;
}
body.night-mode .city-wash{
  background:linear-gradient(180deg,rgba(3,6,18,.10),rgba(3,6,18,.50) 55%,rgba(3,6,18,.82))!important;
}
.day-mode .city-day{
  filter:brightness(1.03) saturate(.92) contrast(.98)!important;
}
.night-mode .city-night{
  filter:brightness(.88) saturate(1.05) contrast(1.03)!important;
}

/* v38: character detail real DOM shine layer, clipped without changing scroll height */
.champion-detail{
  position:relative!important;
  overflow:hidden!important;
}
.champion-detail.copyfx::before,
.champion-detail.copyfx::after{
  content:none!important;
  display:none!important;
}
.champion-shine-layer{
  position:absolute;
  top:-80%;
  left:-60%;
  width:50%;
  height:260%;
  z-index:9999;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.14) 24%,
    rgba(255,255,255,.92) 50%,
    rgba(255,255,255,.18) 76%,
    rgba(255,255,255,0) 100%);
  filter:blur(2px);
  opacity:0;
  transform:rotate(23deg) translateX(-260%);
  animation:championShineMove 2.15s cubic-bezier(.22,1,.36,1) forwards;
  mix-blend-mode:screen;
}
.night-mode .champion-shine-layer{
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(125,220,255,.12) 24%,
    rgba(255,255,255,.82) 50%,
    rgba(125,220,255,.16) 76%,
    rgba(255,255,255,0) 100%);
}
@keyframes championShineMove{
  0%{transform:rotate(23deg) translateX(-260%);opacity:0;}
  10%{opacity:1;}
  100%{transform:rotate(23deg) translateX(560%);opacity:0;}
}
.champion-detail.copyfx{
  border-color:var(--copy)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),0 0 24px var(--glow)!important;
}

/* v40 from v38: scoped situation copy feedback, faster border fade */
.situation-card{
  position:relative!important;
  overflow:hidden!important;
}
.situation-card.situation-fastfx{
  border-color:var(--copy)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    0 0 18px var(--glow)!important;
}
.situation-card.situation-fastfx::before,
.situation-card.situation-fastfx::after{
  content:none!important;
  display:none!important;
}
.situation-fast-shine{
  position:absolute;
  top:-90%;
  left:-62%;
  width:52%;
  height:280%;
  z-index:9999;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.14) 24%,
    rgba(255,255,255,.88) 50%,
    rgba(255,255,255,.16) 76%,
    rgba(255,255,255,0) 100%);
  filter:blur(2px);
  opacity:0;
  transform:rotate(23deg) translateX(-260%);
  animation:situationFastShineMove 1.15s cubic-bezier(.22,1,.36,1) forwards;
  mix-blend-mode:screen;
}
.night-mode .situation-fast-shine{
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(125,220,255,.10) 24%,
    rgba(255,255,255,.78) 50%,
    rgba(125,220,255,.12) 76%,
    rgba(255,255,255,0) 100%);
}
@keyframes situationFastShineMove{
  0%{transform:rotate(23deg) translateX(-260%);opacity:0;}
  12%{opacity:1;}
  100%{transform:rotate(23deg) translateX(560%);opacity:0;}
}

/* v41: same city image framing on all tabs, match HOME */
.screen,
#home,
#champions,
#archive,
#newsroom,
#arenas{
  background:transparent!important;
  background-image:none!important;
}
.app,
.phone-shell{
  background:transparent!important;
}
.city-layer{
  position:fixed!important;
  left:50%!important;
  top:0!important;
  transform:translateX(-50%)!important;
  width:min(100vw,430px)!important;
  height:100vh!important;
  z-index:0!important;
}
.city-layer .city{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center top!important;
  transform:none!important;
}
.city-layer .city-day{
  content:url('../assets/images/city_day.webp')!important;
}
.city-layer .city-night{
  content:url('../assets/images/city_night.webp')!important;
}
body.day-mode .city-layer .city-day{opacity:1!important}
body.day-mode .city-layer .city-night{opacity:0!important}
body.night-mode .city-layer .city-day{opacity:0!important}
body.night-mode .city-layer .city-night{opacity:1!important}
.city-wash{
  background:linear-gradient(180deg,rgba(245,248,255,.10),rgba(245,248,255,.46) 55%,rgba(245,248,255,.82))!important;
}
body.night-mode .city-wash{
  background:linear-gradient(180deg,rgba(3,6,18,.10),rgba(3,6,18,.50) 55%,rgba(3,6,18,.82))!important;
}

/* v41: very fast situation tap/copy feedback */
.situation-card.situation-fastfx{
  border-color:var(--copy)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 12px var(--glow)!important;
  transition:border-color .18s ease, box-shadow .18s ease!important;
}
.situation-fast-shine{
  animation:situationFastShineMoveV41 .55s cubic-bezier(.22,1,.36,1) forwards!important;
  filter:blur(1.2px)!important;
}
@keyframes situationFastShineMoveV41{
  0%{transform:rotate(23deg) translateX(-260%);opacity:0;}
  18%{opacity:1;}
  100%{transform:rotate(23deg) translateX(560%);opacity:0;}
}

/* v41: character detail visual effect only on the actual text box, not full outer frame */
.character-detail-copybox{
  position:relative!important;
  overflow:hidden!important;
  border-radius:20px;
}
.character-detail-copybox.copyfx{
  border-color:var(--copy)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 0 18px var(--glow)!important;
}
.character-detail-copybox.copyfx::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:-35%!important;
  pointer-events:none!important;
  background:linear-gradient(112deg,transparent 25%,rgba(255,255,255,.14) 36%,rgba(255,255,255,.82) 50%,rgba(255,255,255,.20) 62%,transparent 74%)!important;
  transform:translateX(-100%) rotate(8deg)!important;
  animation:glass .85s cubic-bezier(.22,1,.36,1) forwards!important;
  mix-blend-mode:screen;
}
.champion-detail.copyfx,
.champion-card.open .champion-detail.copyfx{
  box-shadow:none!important;
  border-color:var(--line)!important;
}
.champion-detail.copyfx::before,
.champion-detail.copyfx::after,
.champion-shine-layer{
  display:none!important;
}

/* v42: Character Detail title clipping fix */
.character-detail-copybox{
  padding-top:12px!important;
}
.character-detail-copybox .detail-title{
  overflow:visible!important;
  min-height:24px!important;
  line-height:1.25!important;
  padding-top:2px!important;
}
.character-detail-copybox .detail-title b{
  line-height:1.25!important;
  display:block!important;
}

/* v46: restore situation copy shine + fast border, scoped only to situation card */
.situation-card{
  position:relative!important;
  overflow:hidden!important;
}

.situation-card.situation-fastfx{
  border-color:var(--copy)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 0 16px var(--glow)!important;
  transition:border-color .16s ease, box-shadow .16s ease!important;
}

.situation-card.situation-fastfx::before,
.situation-card.situation-fastfx::after{
  content:none!important;
  display:none!important;
}

.situation-fast-shine{
  display:block!important;
  position:absolute!important;
  top:-100%!important;
  left:-68%!important;
  width:54%!important;
  height:310%!important;
  z-index:9999!important;
  pointer-events:none!important;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.16) 24%,
    rgba(255,255,255,.94) 50%,
    rgba(255,255,255,.18) 76%,
    rgba(255,255,255,0) 100%
  )!important;
  filter:blur(1.4px)!important;
  opacity:0;
  transform:rotate(23deg) translateX(-270%)!important;
  animation:situationShineV46 .68s cubic-bezier(.22,1,.36,1) forwards!important;
  mix-blend-mode:screen!important;
}

.night-mode .situation-fast-shine{
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(125,220,255,.12) 24%,
    rgba(255,255,255,.84) 50%,
    rgba(125,220,255,.15) 76%,
    rgba(255,255,255,0) 100%
  )!important;
}

@keyframes situationShineV46{
  0%{transform:rotate(23deg) translateX(-270%)!important;opacity:0;}
  16%{opacity:1;}
  100%{transform:rotate(23deg) translateX(580%)!important;opacity:0;}
}

/* v47 integrated copy shine: character detail + situation */
.character-detail-copybox,
.situation-card{
  position:relative!important;
  overflow:hidden!important;
}

.character-detail-copybox.integrated-copyfx,
.situation-card.integrated-copyfx{
  border-color:var(--copy)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 0 18px var(--glow)!important;
}

.character-integrated-shine,
.situation-integrated-shine{
  display:block!important;
  position:absolute!important;
  top:-100%!important;
  left:-68%!important;
  width:54%!important;
  height:310%!important;
  z-index:9999!important;
  pointer-events:none!important;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.16) 24%,
    rgba(255,255,255,.94) 50%,
    rgba(255,255,255,.18) 76%,
    rgba(255,255,255,0) 100%
  )!important;
  filter:blur(1.4px)!important;
  opacity:0;
  transform:rotate(23deg) translateX(-270%)!important;
  animation:integratedShineV47 .72s cubic-bezier(.22,1,.36,1) forwards!important;
  mix-blend-mode:screen!important;
}

.night-mode .character-integrated-shine,
.night-mode .situation-integrated-shine{
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(125,220,255,.12) 24%,
    rgba(255,255,255,.84) 50%,
    rgba(125,220,255,.15) 76%,
    rgba(255,255,255,0) 100%
  )!important;
}

@keyframes integratedShineV47{
  0%{transform:rotate(23deg) translateX(-270%)!important;opacity:0;}
  15%{opacity:1;}
  100%{transform:rotate(23deg) translateX(580%)!important;opacity:0;}
}

/* v48 TESTED: visible copy shine, normal blend, no screen blending */
.character-detail-copybox,
.situation-card{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
}

.character-detail-copybox.integrated-copyfx,
.situation-card.integrated-copyfx{
  border-color:var(--copy)!important;
  outline:1px solid var(--copy)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.45),
    inset 0 0 24px rgba(255,255,255,.16),
    0 0 20px var(--glow)!important;
}

.character-integrated-shine,
.situation-integrated-shine{
  display:block!important;
  position:absolute!important;
  top:-70%!important;
  left:-80%!important;
  width:72%!important;
  height:250%!important;
  z-index:2147483647!important;
  pointer-events:none!important;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.28) 18%,
    rgba(255,255,255,1) 48%,
    rgba(255,255,255,.42) 62%,
    rgba(255,255,255,0) 100%
  )!important;
  filter:blur(.8px)!important;
  opacity:1!important;
  transform:rotate(21deg) translateX(-220%)!important;
  animation:visibleShineV48 .95s cubic-bezier(.22,1,.36,1) forwards!important;
  mix-blend-mode:normal!important;
}

.night-mode .character-integrated-shine,
.night-mode .situation-integrated-shine{
  background:linear-gradient(
    90deg,
    rgba(120,225,255,0) 0%,
    rgba(120,225,255,.22) 18%,
    rgba(255,255,255,.96) 48%,
    rgba(120,225,255,.36) 62%,
    rgba(120,225,255,0) 100%
  )!important;
  box-shadow:0 0 20px rgba(120,225,255,.22)!important;
}

@keyframes visibleShineV48{
  0%{
    transform:rotate(21deg) translateX(-220%)!important;
    opacity:0;
  }
  12%{
    opacity:1;
  }
  75%{
    opacity:1;
  }
  100%{
    transform:rotate(21deg) translateX(460%)!important;
    opacity:0;
  }
}

/* If any old pseudo copy effect exists, disable it only for these two areas */
.character-detail-copybox.integrated-copyfx::before,
.character-detail-copybox.integrated-copyfx::after,
.situation-card.integrated-copyfx::before,
.situation-card.integrated-copyfx::after{
  content:none!important;
  display:none!important;
}


/* v49 CLEAN COPY SYSTEM: actual DOM shine, no pseudo conflicts */
.character-detail-copybox,
.character-detail-copybox,
.situation-card,
.lore-toolbar{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
}

.character-detail-copybox{
  border:1px solid var(--line);
  border-radius:20px;
  padding:14px;
  background:rgba(255,255,255,.16);
  margin-bottom:14px;
}

.night-mode .character-detail-copybox{
  background:rgba(5,10,20,.22);
}

.character-detail-copybox .detail-title,
.character-detail-copybox .detail-title{
  min-height:26px!important;
  line-height:1.35!important;
  overflow:visible!important;
  margin-bottom:10px!important;
}

.character-detail-copybox .detail-title b,
.character-detail-copybox .detail-title b{
  display:block!important;
  line-height:1.35!important;
  padding-top:1px!important;
}

.character-detail-copybox.valtrix-copied,
.character-detail-copybox.valtrix-copied,
.situation-card.valtrix-copied,
.lore-toolbar.valtrix-copied{
  border-color:var(--copy)!important;
  outline:1px solid var(--copy)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.34),
    0 0 18px var(--glow)!important;
}

.valtrix-shine{
  display:block!important;
  position:absolute!important;
  top:-85%!important;
  left:-78%!important;
  width:70%!important;
  height:280%!important;
  z-index:2147483647!important;
  pointer-events:none!important;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.24) 20%,
    rgba(255,255,255,1) 48%,
    rgba(255,255,255,.36) 62%,
    rgba(255,255,255,0) 100%
  )!important;
  filter:blur(.8px)!important;
  opacity:1!important;
  transform:rotate(21deg) translateX(-230%)!important;
  animation:valtrixCleanShine .82s cubic-bezier(.22,1,.36,1) forwards!important;
  mix-blend-mode:normal!important;
}

.night-mode .valtrix-shine{
  background:linear-gradient(
    90deg,
    rgba(120,225,255,0) 0%,
    rgba(120,225,255,.22) 20%,
    rgba(255,255,255,.96) 48%,
    rgba(120,225,255,.34) 62%,
    rgba(120,225,255,0) 100%
  )!important;
}

@keyframes valtrixCleanShine{
  0%{transform:rotate(21deg) translateX(-230%)!important;opacity:0;}
  12%{opacity:1;}
  70%{opacity:1;}
  100%{transform:rotate(21deg) translateX(470%)!important;opacity:0;}
}

/* Disable old parent shine layers in character detail */
.champion-detail > .champion-shine-layer,
.champion-detail > .character-integrated-shine,
.champion-detail > .situation-integrated-shine,
.champion-detail > .situation-fast-shine{
  display:none!important;
}
.champion-detail.copyfx,
.champion-detail.integrated-copyfx{
  box-shadow:none!important;
  outline:none!important;
}
/* v51 AUDIT FIX: stable DOM shine layer for character detail + situation */
.character-detail-copybox,
.situation-card,
.lore-toolbar{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
}

.situation-card{
  display:flex!important;
}

.character-detail-copybox{
  display:block!important;
  border:1px solid var(--line);
  border-radius:20px;
  padding:14px;
  margin-bottom:14px;
  background:rgba(255,255,255,.16);
}

.night-mode .character-detail-copybox{
  background:rgba(5,10,20,.24);
}

.character-detail-copybox .detail-title{
  min-height:28px!important;
  line-height:1.35!important;
  overflow:visible!important;
  margin-bottom:10px!important;
}

.character-detail-copybox .detail-title b{
  display:block!important;
  line-height:1.35!important;
  padding-top:1px!important;
}

.copy-react{
  border-color:var(--copy)!important;
  outline:1px solid var(--copy)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.38),
    inset 0 0 22px rgba(255,255,255,.12),
    0 0 18px var(--glow)!important;
}

.copy-shine-layer{
  display:block!important;
  position:absolute!important;
  top:-85%!important;
  left:-78%!important;
  width:72%!important;
  height:285%!important;
  z-index:2147483647!important;
  pointer-events:none!important;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.25) 19%,
    rgba(255,255,255,1) 48%,
    rgba(255,255,255,.42) 63%,
    rgba(255,255,255,0) 100%
  )!important;
  filter:blur(.6px)!important;
  opacity:1!important;
  transform:rotate(21deg) translateX(-230%)!important;
  animation:copyShineLayerFinal .82s cubic-bezier(.22,1,.36,1) forwards!important;
  mix-blend-mode:normal!important;
}

.night-mode .copy-shine-layer{
  background:linear-gradient(
    90deg,
    rgba(120,225,255,0) 0%,
    rgba(120,225,255,.24) 19%,
    rgba(255,255,255,.98) 48%,
    rgba(120,225,255,.38) 63%,
    rgba(120,225,255,0) 100%
  )!important;
}

@keyframes copyShineLayerFinal{
  0%{transform:rotate(21deg) translateX(-230%)!important;opacity:0;}
  12%{opacity:1;}
  70%{opacity:1;}
  100%{transform:rotate(21deg) translateX(470%)!important;opacity:0;}
}

/* Disable old layer names for these areas */
.character-detail-copybox > .valtrix-shine,
.situation-card > .valtrix-shine,
.character-detail-copybox > .character-integrated-shine,
.situation-card > .situation-integrated-shine,
.situation-card > .situation-fast-shine{
  display:none!important;
}

/* 복사 버튼이면 무조건 레이아웃을 가두도록 강제 설정 */
[data-copy] {
    position: relative !important;
    overflow: hidden !important;
}

/* 아카이브 로어북 태그/제목 등 인라인 요소가 이펙트를 정상적으로 품도록 블록화 */
span[data-copy], b[data-copy], em[data-copy] {
    display: inline-block !important;
}

/* 글자나 배경에 묻히지 않도록 무조건 최상단(z-index: 999999) 위로 지나가는 빛 이펙트 */
.copy-shine-layer {
    position: absolute !important;
    top: 0 !important;
    left: -150% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    transform: skewX(-25deg) !important;
    pointer-events: none !important;
    z-index: 999999 !important;
    animation: finalShineSweep 0.65s ease-in-out forwards !important;
}

@keyframes finalShineSweep {
    0% { left: -150%; }
    100% { left: 200%; }
}

/* 모바일 화면 튕김(고무줄 현상) 및 가로 흔들림 완벽 차단 */
html, body {
    overscroll-behavior: none !important; /* 위아래 튕김, 당겨서 새로고침 방지 */
    overflow-x: hidden !important; /* 가로로 스와이프되면서 미세하게 흔들리는 현상 방지 */
    touch-action: pan-y; /* 사용자가 화면을 축소/확대하거나 맘대로 비트는 것을 방지하고 위아래 스크롤만 허용 */
}

/* 앱 전체를 감싸는 껍데기도 단단하게 고정 */
.phone-shell, .app {
    overscroll-behavior: none !important;
}

/* 상단 헤더 메뉴 모바일 화면 완벽 고정 */
header.top, .top {
    position: -webkit-sticky !important; /* 아이폰(사파리) 완벽 지원 */
    position: sticky !important;
    top: 0 !important; /* 화면 맨 위에 밀착 */
    z-index: 9999 !important; /* 어떤 요소보다도 무조건 제일 위에 떠 있도록 설정 */
    
    /* 스크롤 시 글자 겹침 방지용 고급스러운 반투명 배경 & 블러 효과 */
    background: rgba(7, 16, 31, 0.85) !important; 
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* --- 스크롤 및 모바일 바운스 픽스 --- */
html, body {
  overscroll-behavior-y: none;
  background-color: #07101f; 
}

#app, .screen {
  overflow-y: auto;
  overscroll-behavior-y: none;
  /* 모바일에서 부드러운 스크롤감을 위해 추가 */
  -webkit-overflow-scrolling: touch; 
}