:root {
  --bg: #09111c;
  --panel: #122537;
  --line: #31516a;
  --gold: #ffd078;
  --gold2: #ffe2a5;
  --teal: #62e0ce;
  --muted: #b6c6d3;
  --coral: #ff947f;
  --violet: #b79aff;
}

body {
  background:
    radial-gradient(ellipse at 14% 3%, #d27e3730, transparent 27%),
    radial-gradient(ellipse at 82% 14%, #25baaa28, transparent 29%),
    radial-gradient(ellipse at 88% 65%, #8057d018, transparent 30%),
    var(--bg);
}

.topbar { border-bottom-color: #547482; box-shadow: 0 8px 30px #0004; }
.brand-mark { background: linear-gradient(145deg, #3b2525, #16434b); box-shadow: 0 0 24px #ffb45e38; }
.nav a:hover { color: var(--teal); border-color: var(--teal); }
.hero { position: relative; }
.hero::before { content: ""; position: absolute; width: 280px; height: 280px; border: 1px solid #ffd07822; border-radius: 50%; left: -170px; top: 20px; pointer-events: none; }
.hero h1 em { background: linear-gradient(100deg, #ffe09f, #ff9f83 50%, #a994ff); color: transparent; background-clip: text; }
.button-gold { background: linear-gradient(115deg, #ffbc70, #ffe1a0 58%, #ffe7bc); box-shadow: 0 8px 30px #f8a85335; }
.hero-card { background: linear-gradient(145deg, #245062, #163548 55%, #312946); border-color: #6a9aab; box-shadow: 0 30px 70px #0008, 0 0 50px #36d2c61b; }
.hero-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 40%, #ffffff10 50%, transparent 60%); transform: translateX(-100%); animation: sheen 9s ease-in-out infinite; pointer-events: none; }
.hero-shimmer { position: absolute; right: 42px; bottom: 64px; color: #ffd7a6; font-size: 24px; opacity: .8; animation: float 4s ease-in-out infinite; }
.live i { box-shadow: 0 0 12px var(--teal); }
.hero-card-number { color: #fff3da; text-shadow: 0 3px 25px #ffe59b42; }

.wiki-callout { display: flex; align-items: center; gap: 15px; width: min(100%, 530px); padding: 15px 17px; margin-top: 30px; border: 1px solid #5b748b; border-radius: 13px; background: linear-gradient(110deg, #194153, #242b45); box-shadow: 0 12px 25px #0003; transition: transform .2s, border-color .2s; }
.wiki-callout:hover { transform: translateY(-2px); border-color: var(--gold); }
.wiki-callout strong, .wiki-callout small { display: block; }
.wiki-callout strong { color: #ffe2aa; font-size: 13px; }
.wiki-callout small { color: #b9d1db; font-size: 11px; line-height: 1.5; margin-top: 3px; }
.wiki-callout > span:last-child { color: var(--teal); margin-left: auto; }
.wiki-symbol { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #162833; font-weight: 900; background: linear-gradient(135deg, #ffe0a0, #79e2cf); }

.rank-count { white-space: nowrap; border: 1px solid #5e7c8b; border-radius: 100px; padding: 9px 16px; color: #c9d9e2; font-size: 12px; background: #1b3143; }
.rank-count span { color: var(--gold2); font-size: 16px; font-weight: 800; }
.ranking-categories { display: grid; gap: 13px; margin: 25px 0 38px; }
.ranking-group { border: 1px solid #38566c; border-radius: 14px; padding: 17px 18px; background: linear-gradient(120deg, #162b3d, #111f32); }
.ranking-group:nth-child(2) { background: linear-gradient(120deg, #322c3e, #1a2639); border-color: #684b67; }
.ranking-group:nth-child(3) { background: linear-gradient(120deg, #2a2a48, #172536); border-color: #635985; }
.ranking-group-title { display: flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: #d9e4ed; font-weight: 800; margin-bottom: 12px; }
.group-icon { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; font-size: 12px; }
.group-icon.emerald { color: #0b342f; background: var(--teal); }
.group-icon.coral { color: #4a1c1b; background: var(--coral); }
.group-icon.violet { color: #241c43; background: var(--violet); }
.ranking-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.ranking-buttons button { border: 1px solid #567287; border-radius: 100px; color: #d8e8f1; background: #1a3549; padding: 8px 13px; font-size: 12px; font-weight: 700; transition: transform .18s, border-color .18s, background .18s; }
.ranking-buttons button:hover { transform: translateY(-2px); border-color: var(--gold); }
.ranking-buttons button.selected { color: #182639; border-color: #ffe0a2; background: linear-gradient(120deg, #ffd789, #82e0d0); box-shadow: 0 4px 18px #eec68144; }
.ranking-headline { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin: 0 0 18px; }
.ranking-headline .eyebrow { margin-bottom: 4px; }
.ranking-headline h3 { margin: 0; font-size: 25px; }
.ranking-headline > span { color: var(--muted); font-size: 12px; text-align: right; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 17px; }
.podium:empty { display: none; }
.podium-card { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 125px; padding: 17px; border-radius: 12px; border: 1px solid #597c8b; background: linear-gradient(135deg, #1d3b4b, #1c2b40); overflow: hidden; }
.podium-card::after { content: "✦"; position: absolute; right: 10px; top: -22px; font-size: 108px; color: #ffffff09; }
.podium-card.place-1 { border-color: #d7ad66; background: linear-gradient(120deg, #55402f, #283e4e); }
.podium-card.place-2 { border-color: #8db7be; }
.podium-card.place-3 { border-color: #c58d78; background: linear-gradient(120deg, #493638, #26364a); }
.podium-medal { font-size: 25px; line-height: 1; color: var(--gold2); }
.podium-card strong { font-size: 16px; overflow-wrap: anywhere; }
.podium-card small { color: #b9d9df; font-size: 12px; }
.table-card { border-color: #3b6173; box-shadow: 0 18px 45px #0003; }
th { background: #204056; }
tbody tr:nth-child(even) { background: #ffffff06; }
tbody tr:hover { background: #5dd7d010; }
.character-card { border-color: #3b6070; background: linear-gradient(145deg, #1b3c4a, #1a263d); box-shadow: 0 14px 30px #0002; }
.character-card:nth-child(3n+2) { background: linear-gradient(145deg, #413343, #1b2c40); }
.character-card:nth-child(3n+3) { background: linear-gradient(145deg, #37424f, #1b2d3c); }
.admin-card { border-color: #755f7a; background: linear-gradient(120deg, #332b48, #1a3446); }
.footer a { color: var(--teal); font-weight: 800; }
.footer a:hover { color: var(--gold2); }

@keyframes sheen { 0%, 70%, 100% { transform: translateX(-110%); } 82% { transform: translateX(110%); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-10deg); } 50% { transform: translateY(-9px) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .hero-card::after, .hero-shimmer { animation: none; } }
@media (max-width: 670px) { .podium { grid-template-columns: 1fr; } .podium-card { min-height: 100px; } .ranking-headline { align-items: start; flex-direction: column; } .ranking-headline > span { text-align: left; } }

:root{--gold:#d6b878;--muted:#bcb1c7;--line:#71617a;--violet:#a967e2;--panel:rgba(17,13,26,.94)}
*{box-sizing:border-box}body{margin:0;color:#f6f1f6;background:#0c0911;font-family:Inter,Arial,sans-serif;font-size:14px}
body:before{content:"";position:absolute;z-index:-1;inset:0 0 auto;height:810px;background:linear-gradient(180deg,rgba(7,5,12,.08) 0%,rgba(9,6,13,.30) 37%,#0d0a13 98%),url('forest.png') center top/cover no-repeat}
.wrap{width:min(1480px,calc(100% - 48px));margin:auto}.top{height:265px;position:relative;text-align:center;padding-top:48px}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.38em;color:#eee3f6;text-shadow:0 2px 8px #000}.logo{font-family:Cinzel,Georgia,serif;font-size:78px;font-weight:700;line-height:1.05;letter-spacing:.09em;color:#ece7ee;text-shadow:0 4px 0 #28212e,0 7px 8px #000,0 0 35px #b782e7}.logo span{color:#d7b773}.sublogo{font-family:Cinzel,serif;letter-spacing:.6em;color:#e5d3fa;text-shadow:0 2px 7px #000}.top-note{position:absolute;right:0;top:22px;background:rgba(15,12,22,.8);border:1px solid #786a80;border-radius:6px;padding:9px 13px;color:#d7cfe0;font-size:12px}
.nav{height:66px;border:1px solid #8d7894;border-top:2px solid #c5a7d4;border-radius:8px;background:linear-gradient(#2b2134,#130f1d);box-shadow:0 12px 22px #000b,inset 0 1px 1px #ffffff30;display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:22px}.nav a{padding:20px 31px;color:#e5dbe9;text-decoration:none;text-transform:uppercase;letter-spacing:.09em;font:600 13px Cinzel,Georgia,serif;border-right:1px solid #594b62}.nav a:last-child{border:0}.nav a.active{color:#f8de9d;background:linear-gradient(#5d3d70,#32223d);box-shadow:inset 0 -3px var(--gold)}
.grid{display:grid;grid-template-columns:310px minmax(0,1fr) 310px;gap:18px}.panel{position:relative;background:var(--panel);border:1px solid #7e687e;border-radius:8px;box-shadow:0 16px 28px #000a,inset 0 0 0 3px #17101d,inset 0 0 0 4px #42334b;overflow:hidden}.panel:before,.panel:after{content:"◆";position:absolute;top:11px;color:#bb84e7;text-shadow:0 0 10px #9b3fc9}.panel:before{left:12px}.panel:after{right:12px}.panel h2{margin:0;padding:19px 22px;text-align:center;font:600 19px Cinzel,Georgia,serif;color:#f3e7f6;background:linear-gradient(#30213b,#211827);border-bottom:1px solid #685574}.panel h3{margin:0 0 13px;color:var(--gold);font:600 18px Cinzel,Georgia,serif}.inside{padding:18px}.small{font-size:12px;color:var(--muted)}.rankrow{display:grid;grid-template-columns:30px 1fr 54px;gap:4px;align-items:center;padding:10px 5px;border-bottom:1px solid #473b4b;font-size:13px}.rankrow:nth-child(1),.rankrow:nth-child(2),.rankrow:nth-child(3){background:#b774e20d}.rankrow b{color:#e4c67d}.rankrow strong{font-weight:600}.rankrow em{font-style:normal;text-align:right;color:#d8c7dd}.rankhead{display:grid;grid-template-columns:30px 1fr 54px;color:#a999ac;font-size:11px;text-transform:uppercase;letter-spacing:.08em;padding:0 5px 9px;border-bottom:1px solid #6d5c72}.rankhead span:last-child{text-align:right}.button{display:block;text-align:center;background:linear-gradient(#6c467f,#40294f);color:white;border:1px solid #a47aaf;border-radius:5px;padding:12px;font:600 12px Cinzel,Georgia,serif;text-decoration:none;box-shadow:inset 0 1px #ffffff30}.button.gold{background:linear-gradient(#806744,#473523);border-color:#c5a36a;color:#ffe4aa}.mt{margin-top:17px}
.lead{background:linear-gradient(120deg,#392449a3,#160f21bd);border:1px solid #72557f;border-radius:7px;padding:21px 24px;margin-bottom:15px}.lead .small{text-transform:uppercase;letter-spacing:.16em;color:#d2adef}.lead h1{font:600 33px Cinzel,Georgia,serif;margin:8px 0 7px;color:#f6e5ff}.lead p{line-height:1.55;margin:0;color:#d8d0dc}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:15px}.metric{background:#21192a;border:1px solid #56415f;border-radius:6px;padding:14px 16px}.metric strong{display:block;font:600 26px Cinzel,serif;color:#f0d99c}.metric span{font-size:12px;color:#cbbfd0}.subgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.box{border:1px solid #5a4861;border-radius:6px;background:#1a1421;padding:17px 18px;min-height:190px}.box p{margin:0 0 12px;color:#c9bdcf;line-height:1.5}.line{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #45374d;color:#e9deec}.line b{color:#e9d08c}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.chip{font-size:12px;border:1px solid #665073;background:#30213b;color:#eadcef;border-radius:20px;padding:7px 10px}.section-label{font:600 14px Cinzel,serif;color:#d8b87b;margin:19px 0 12px}.categories{display:flex;flex-wrap:wrap;gap:8px}.categories span{background:#241b2e;border:1px solid #61506a;border-radius:5px;padding:8px 10px;color:#ddd0e2;font-size:12px}
label{display:block;color:#d9cbdc;font-size:12px;margin:0 0 7px}.input{width:100%;background:#130f1a;border:1px solid #6e5875;border-radius:4px;color:#f4edf5;padding:12px;margin-bottom:15px;font:14px Inter,Arial,sans-serif}.input::placeholder{color:#8f8197}.login-note{text-align:center;line-height:1.5;margin:15px 0 19px}.login-bottom{text-align:center;margin-top:17px;color:#cfc3d3}.login-bottom a{color:#e4c77f;text-decoration:none}.aside-info{margin-top:15px;padding:15px;background:#1d1526;border:1px solid #594763;border-radius:5px;line-height:1.55;color:#c9bfd0}.aside-info a{color:#dec18b}.footer{padding:20px 0 35px;text-align:center;color:#aa9caf;font-size:11px}.note{display:inline-block;background:#2b2036;border:1px solid #695575;border-radius:4px;padding:7px 10px;color:#e2d7e8}
@media(max-width:1100px){.grid{grid-template-columns:1fr 1fr}.main{grid-column:1/-1;grid-row:1}.nav a{padding:20px 13px}.logo{font-size:54px}}@media(max-width:700px){.grid{display:block}.panel{margin-bottom:14px}.metrics,.subgrid{grid-template-columns:1fr}.top{height:225px}.logo{font-size:40px}.nav{height:auto;flex-wrap:wrap}.nav a{padding:12px}.wrap{width:calc(100% - 24px)}}

/* Active portal: the approved concept layered onto live account and ranking views. */
:root{--bg:#0c0911;--panel2:#241b2e;--text:#f6f1f6;--gold2:#f4dea9;--teal:#b993df;--coral:#d0a286;font-family:Arial,sans-serif}
body{background:#0c0911;font-family:Arial,sans-serif}
body:before{height:850px;pointer-events:none}
button,input{font-family:Arial,sans-serif}
.shell{width:min(1480px,calc(100% - 48px))}
.site-hero{height:265px;text-align:center;padding:48px 20px 0}
.hero-title>span{font-size:12px;letter-spacing:.38em;color:#eee3f6;text-shadow:0 2px 8px #000}
.hero-title h1{font:700 clamp(44px,5.4vw,78px)/1.1 Georgia,serif;letter-spacing:.09em;color:#efe9f2;text-shadow:0 4px 0 #28212e,0 7px 8px #000,0 0 35px #b782e7;margin:7px 0 2px}
.hero-title strong{font:600 14px Georgia,serif;letter-spacing:.55em;color:#e5d3fa;text-shadow:0 2px 7px #000}
.nav{height:66px;position:relative;z-index:2;margin:0 0 22px;display:flex;gap:0;align-items:center;justify-content:center;flex-wrap:nowrap;border:1px solid #8d7894;border-top:2px solid #c5a7d4;border-radius:8px;background:linear-gradient(#2b2134,#130f1d);box-shadow:0 12px 22px #000b,inset 0 1px 1px #ffffff30}
.nav a{display:block;margin:0;padding:22px 27px;color:#e5dbe9;text-decoration:none;text-transform:uppercase;letter-spacing:.09em;font:600 13px Georgia,serif;border:0;border-right:1px solid #594b62;white-space:nowrap}
.nav a:last-child{border-right:0}.nav a.active,.nav a:hover{color:#f8de9d;background:linear-gradient(#5d3d70,#32223d);box-shadow:inset 0 -3px var(--gold)}
.home-layout{display:grid;grid-template-columns:310px minmax(0,1fr) 310px;gap:18px;align-items:stretch}
.ornate-panel{position:relative;min-width:0;background:var(--panel);border:1px solid #7e687e;border-radius:8px;box-shadow:0 16px 28px #000a,inset 0 0 0 3px #17101d,inset 0 0 0 4px #42334b;overflow:hidden}
.ornate-panel:before,.ornate-panel:after{content:"◆";position:absolute;top:11px;color:#bb84e7;text-shadow:0 0 10px #9b3fc9}.ornate-panel:before{left:12px}.ornate-panel:after{right:12px}
.ornate-panel>h2{margin:0;padding:19px 22px;text-align:center;font:600 19px Georgia,serif;color:#f3e7f6;background:linear-gradient(#30213b,#211827);border-bottom:1px solid #685574}.panel-inner{padding:18px}
.preview-head,.preview-row{display:grid;grid-template-columns:30px minmax(0,1fr) 54px;gap:4px;align-items:center}.preview-head{color:#a999ac;font-size:11px;text-transform:uppercase;letter-spacing:.08em;padding:0 5px 9px;border-bottom:1px solid #6d5c72}.preview-head span:last-child{text-align:right}.preview-row{padding:10px 5px;border-bottom:1px solid #473b4b;font-size:13px}.preview-row:nth-child(-n+3){background:#b774e20d}.preview-row b{color:#e4c67d}.preview-row strong{overflow-wrap:anywhere}.preview-row em{font-style:normal;text-align:right;color:#d8c7dd}.loading{font-size:12px;color:var(--muted)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:43px;border-radius:5px;padding:11px 14px;font:600 12px Georgia,serif;box-shadow:inset 0 1px #ffffff30}.button-violet{background:linear-gradient(#6c467f,#40294f);border:1px solid #a47aaf;color:white}.button-gold{background:linear-gradient(#806744,#473523);border:1px solid #c5a36a;color:#ffe4aa;box-shadow:inset 0 1px #ffffff30}.button-quiet{background:transparent;border:1px solid #5b4661;color:#d8c7dd}.ranking-preview .button{display:flex;width:100%;margin-top:17px}
.welcome{background:linear-gradient(120deg,#392449a3,#160f21bd);border:1px solid #72557f;border-radius:7px;padding:21px 24px;margin-bottom:15px}.welcome small{font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:#d2adef}.welcome h3{font:600 32px Georgia,serif;margin:8px 0 7px;color:#f6e5ff}.welcome p{line-height:1.55;margin:0;color:#d8d0dc}
.world-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:15px}.world-metrics>div{background:#21192a;border:1px solid #56415f;border-radius:6px;padding:14px 16px}.world-metrics strong{display:block;font:600 26px Georgia,serif;color:#f0d99c}.world-metrics span{font-size:12px;color:#cbbfd0}
.home-boards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.home-boards>div{border:1px solid #5a4861;border-radius:6px;background:#1a1421;padding:17px 18px;min-height:190px}.home-boards h3,.more-rankings h3{margin:0 0 13px;color:var(--gold);font:600 18px Georgia,serif}.board-row{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid #45374d;color:#e9deec;font-size:13px}.board-row span{overflow-wrap:anywhere}.board-row b{color:#e9d08c;text-align:right;white-space:nowrap}.board-caption{font-size:12px;color:var(--muted);line-height:1.5;margin:12px 0 0}
.more-rankings{margin-top:19px}.more-rankings h3{font-size:14px}.more-rankings>div{display:flex;flex-wrap:wrap;gap:8px}.more-rankings a{font-size:12px;border:1px solid #665073;background:#30213b;color:#eadcef;border-radius:5px;padding:8px 10px}.more-rankings a:hover{border-color:var(--gold);color:var(--gold2)}
.login-panel .panel-inner>div>p:first-child{text-align:center;line-height:1.5;margin:17px 0 19px}.login-panel label{display:block;color:#d9cbdc;font-size:12px;margin:0 0 15px}.login-panel input{width:100%;background:#130f1a;border:1px solid #6e5875;border-radius:4px;color:#f4edf5;padding:12px;margin-top:7px;font-size:14px}.login-panel input:focus{outline:2px solid #c49bda}.login-panel input::placeholder{color:#8f8197}.login-panel .full{width:100%}.signup{text-align:center;margin:17px 0;color:#cfc3d3}.signup button{color:#e4c77f;background:none;border:0;text-decoration:underline;padding:0}.login-help{margin-top:15px;padding:15px;background:#1d1526;border:1px solid #594763;border-radius:5px;line-height:1.55;color:#c9bfd0}.login-help p{margin:5px 0 14px}.login-help a{color:#dec18b;text-decoration:underline}.login-panel #logged-in-panel p{line-height:1.5}.login-panel #logged-in-panel .button{width:100%;margin:5px 0}
.section{scroll-margin-top:20px}.section h2{font-family:Georgia,serif;color:#f4e5f6}.section-head p{color:#cbbdd0}.ranking-group,.ranking-group:nth-child(2),.ranking-group:nth-child(3){background:linear-gradient(120deg,#251a2f,#17111f);border-color:#65516c}.ranking-buttons button{background:#30213b;border-color:#665073;color:#eadcef}.ranking-buttons button.selected{background:linear-gradient(#826098,#503b63);border-color:#b99ac6;color:white}.rank-count{background:#251a2f;border-color:#665073}.podium-card,.podium-card.place-1,.podium-card.place-3{background:linear-gradient(130deg,#31223c,#1b1423);border-color:#7a6080}.table-card,.character-card,.admin-card,.empty-card{background:#1a1421;border-color:#665073}th{background:#2b2035}td{border-color:#45374d}.character-card:nth-child(3n+2),.character-card:nth-child(3n+3){background:#21182b}.character-card .tag{color:#d1a9e9}.footer{border-color:#625069}.footer a{color:#dec18b}
dialog{background:#1b1424;border-color:#8b7094}dialog input{background:#130f1a;border-color:#665073}dialog input:focus{border-color:#d6b878}.auth-tabs{background:#130f1a;border-color:#665073}.auth-tabs button.selected{background:#513a60;color:#f5deae}.dialog-eyebrow{color:#d7bb80}
@media(max-width:1130px){.home-layout{grid-template-columns:280px minmax(0,1fr)}.login-panel{grid-column:1/-1}.login-panel .panel-inner{display:grid;grid-template-columns:1fr 1fr;gap:20px}.login-panel .login-help{margin:0}}
@media(max-width:820px){.shell{width:calc(100% - 28px)}.nav{height:auto;flex-wrap:wrap}.nav a{padding:15px}.home-layout{grid-template-columns:1fr}.home-center,.login-panel{grid-column:auto}.ranking-preview{order:2}.home-center{order:1}.login-panel{order:3}.world-metrics{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.site-hero{height:195px;padding-top:45px}.hero-title h1{font-size:31px;letter-spacing:.04em;white-space:nowrap}.hero-title strong{font-size:10px;letter-spacing:.4em}.nav a{padding:11px;font-size:11px}.world-metrics,.home-boards,.login-panel .panel-inner{grid-template-columns:1fr}.welcome h3{font-size:26px}.world-metrics>div{padding:10px 13px}.login-panel .login-help{margin-top:12px}.board-row b{white-space:normal}}

/* Yohara: each menu item opens one view, with the approved forest artwork intact. */
.site-hero{height:238px;padding-top:40px}
.hero-title h1{font-size:clamp(52px,6.4vw,88px);letter-spacing:.16em;animation:hero-arrive .8s ease-out both}
.hero-title>span,.hero-title strong{animation:hero-arrive .8s .12s ease-out both}
.page-view:not([hidden]){animation:view-arrive .42s cubic-bezier(.2,.75,.25,1) both}
.section.page-view{min-height:460px;padding-top:22px}
.nav a{position:relative;transition:color .22s ease,background .22s ease,box-shadow .22s ease,transform .22s ease}
.nav a:hover{color:#fff3d4;background:linear-gradient(#493253,#2b1e34);box-shadow:inset 0 -3px #b987df,0 0 22px #9b51c733;transform:translateY(-2px)}
.nav a.active{box-shadow:inset 0 -3px var(--gold),0 0 19px #b987df44}
.button,.ranking-buttons button,.auth-tabs button,.signup button,.dialog-close,.home-action{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,color .22s ease,background .22s ease}
.button:hover,.ranking-buttons button:hover,.auth-tabs button:hover,.home-action:hover{transform:translateY(-3px);border-color:#d8b5f1;box-shadow:0 10px 24px #0009,0 0 19px #aa62d044,inset 0 1px #ffffff44}
.button:active,.ranking-buttons button:active,.auth-tabs button:active,.home-action:active,.nav a:active{transform:translateY(1px) scale(.98)}
.button-gold:hover{border-color:#ffe0a3;box-shadow:0 10px 25px #0009,0 0 22px #d6b87866,inset 0 1px #ffffff55}
.signup button:hover,.dialog-close:hover{color:#fff0c6;text-shadow:0 0 12px #d5adf0;transform:translateY(-2px)}
.nav a:focus-visible,.button:focus-visible,.ranking-buttons button:focus-visible,.auth-tabs button:focus-visible,.home-action:focus-visible,.signup button:focus-visible{outline:2px solid #f4dea9;outline-offset:3px}
.home-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.home-action{min-height:88px;display:flex;align-items:center;gap:12px;padding:15px 16px;border:1px solid #745481;border-radius:7px;background:linear-gradient(135deg,#372245,#201729);color:#f8ecfa;box-shadow:inset 0 1px #ffffff19}
.home-action:nth-child(2){background:linear-gradient(135deg,#30233e,#191526)}
.home-action-icon{width:38px;height:38px;flex:none;display:grid;place-items:center;border:1px solid #966eb0;border-radius:50%;color:#f3dca0;background:#4b315e;font-size:20px;box-shadow:0 0 15px #b46ee955}
.home-action strong{display:block;font:600 16px Georgia,serif;color:#f2e7f4}
.home-action small{display:block;margin-top:4px;color:#cdbdd6;font-size:11px;line-height:1.35}
.home-action-arrow{margin-left:auto;align-self:flex-start;color:#e5c792;font-size:19px;transition:transform .22s ease}
.home-action:hover .home-action-arrow{transform:translate(3px,-3px)}
.ranking-preview,.home-center,.login-panel{transition:border-color .25s ease,box-shadow .25s ease}
.ranking-preview:hover,.home-center:hover,.login-panel:hover{border-color:#a781b5;box-shadow:0 17px 34px #000b,0 0 25px #74389b2e,inset 0 0 0 3px #17101d}
@keyframes view-arrive{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes hero-arrive{from{opacity:0;transform:translateY(12px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(max-width:700px){.site-hero{height:190px;padding-top:43px}.hero-title h1{font-size:clamp(36px,8vw,54px)}.home-actions{grid-template-columns:1fr}.section.page-view{min-height:360px}}
@media(prefers-reduced-motion:reduce){.hero-title h1,.hero-title>span,.hero-title strong,.page-view:not([hidden]){animation:none}.nav a,.button,.ranking-buttons button,.auth-tabs button,.signup button,.dialog-close,.home-action,.home-action-arrow{transition:none}}

/* Character dossier: the game data is displayed without edit controls. */
.character-profile{max-width:1100px;margin:0 auto;padding-bottom:35px}
.character-profile[hidden],.character-grid[hidden]{display:none}
.character-profile>.button{margin:0 0 24px}
.profile-open{margin-top:20px;width:100%;cursor:pointer}
.profile-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px;border-bottom:1px solid #8d6b9c;padding-bottom:14px}
.profile-heading h3{margin:0;color:#f3d8ff;font:normal clamp(30px,4vw,46px) Georgia,serif}
.profile-heading span{color:#d0b8dc}
.profile-panel{background:linear-gradient(135deg,#24172e,#17121e);border:1px solid #72547f;box-shadow:0 12px 28px #0004;border-radius:10px;padding:22px;margin:0 0 18px}
.profile-panel h4{font:normal 23px Georgia,serif;color:#f0d5f5;margin:0 0 17px}
.profile-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:10px}
.profile-stat{background:#352440;border:1px solid #654d73;border-radius:8px;padding:12px 14px;min-height:70px;display:flex;flex-direction:column;justify-content:space-between;gap:6px}
.profile-stat span{color:#c7adc9;font-size:13px}.profile-stat strong{color:#fff0d3;font-size:19px;overflow-wrap:anywhere}
.profile-items{border-top:1px solid #584463;padding:12px 0}.profile-items summary{cursor:pointer;color:#e8c8ef;font-weight:700}.profile-items summary:hover{color:#fff}
.profile-item-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:9px;padding:15px 0 0}
.profile-item{background:#31243a;border:1px solid #604b6d;border-radius:7px;padding:12px;display:flex;flex-direction:column;gap:5px}
.profile-item strong{color:#f7e8fa}.profile-item span,.profile-item small{color:#c5b3ca}.profile-item small{line-height:1.45}
@media(max-width:700px){.profile-heading{display:block}.profile-heading span{display:block;margin-top:7px}.profile-panel{padding:16px}.profile-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-stat strong{font-size:16px}}