/* Rounded enamel controls, native character medallions and responsive light. */
.portal .portal-header__inner{gap:20px}
.portal #nav{gap:7px}
.portal #nav>:is(a,button):not(.game-button){
 --nav-icon:url('/static/nostalgia/game-icons/icon-quests.png');
 position:relative;isolation:isolate;display:inline-flex;gap:7px;min-height:46px;
 padding:9px 10px;border:1px solid #7595ac88;border-radius:13px;
 background:linear-gradient(180deg,#3c6b8b80,#204d6c 48%,#173d5b 50%,#1e4865);
 box-shadow:inset 0 1px #a8d9ed4a,inset 0 -2px #0d2c4470,0 3px 0 #0d2b4380;
 color:#eff8ff;transform:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s,color .2s;
}
.portal #nav>:is(a,button):not(.game-button)::before{
 content:'';position:relative;inset:auto;display:block;flex:none;width:21px;height:25px;
 border:0;border-radius:0;background:var(--nav-icon) center/contain no-repeat;
 transform:none;filter:drop-shadow(0 2px 1px #071c3299);transition:transform .25s ease;
}
.portal #nav>:is(a,button):not(.game-button)::after{
 content:'';position:absolute;inset:3px;width:auto;height:auto;border:1px solid #d9efff20;
 border-radius:9px;background:none;transform:none;pointer-events:none;
}
.portal #nav>a[href*="about-game"]{--nav-icon:url('/static/nostalgia/game-icons/icon-skills.png')}
.portal #nav>a[href*="#world"]{--nav-icon:url('/static/nostalgia/game-icons/totem-aurora.png')}
.portal #nav>a[href="/guide"]{--nav-icon:url('/static/nostalgia/game-icons/icon-gathering.png')}
.portal #nav>a[href*="discord"]{--nav-icon:url('/static/nostalgia/discord-mark.svg')}
.portal #nav>.account-nav-link:not(.game-button){--nav-icon:url('/static/nostalgia/native-f002.png');margin-left:0;border-color:#d7bb7b;background:linear-gradient(#527694,#2d5674 45%,#214663 48%,#315c78)}
.portal #nav>:is(a,button):not(.game-button):is(:hover,:focus-visible),
.portal #nav>a:not(.game-button):is(.active,[aria-current="location"]){
 color:#fff1bd;border-color:#e5c681;background:linear-gradient(#527f9e,#2e6285 47%,#204e70 50%,#2b5e7e);
 box-shadow:inset 0 1px #d6f5ff7d,inset 0 0 0 2px #ffe5a72a,0 4px 0 #0c2a43,0 0 18px #8ccfe83d;
 transform:translateY(-2px);
}
.portal #nav>:is(a,button):not(.game-button):hover::before{transform:translateY(-2px) rotate(-7deg) scale(1.12)}
.portal #nav>:is(a,button):not(.game-button):active{transform:translateY(2px);box-shadow:inset 0 2px 5px #0c2a4380,0 1px 0 #0c2a43}

.portal .game-button,.portal #nav>.game-button,.portal .page .btn:not(.btn--ghost){
 position:relative;isolation:isolate;overflow:visible;min-height:55px;padding:12px 24px;
 border:3px solid transparent;border-radius:17px;
 background:linear-gradient(180deg,#65b7d4 0%,#3797bc 10%,#227da7 47%,#175981 49%,#15496f 88%,#286d91 100%) padding-box,
 linear-gradient(135deg,#fff3bf,#d2a34f 29%,#9a652b 48%,#ffe9a5 72%,#a66e30) border-box;
 box-shadow:inset 0 2px 0 #dbfaff8c,inset 0 -3px 0 #0a355e80,0 5px 0 #765328,0 8px 0 #102e4340,0 12px 18px #08263b33;
 color:#fff9df;text-shadow:0 1px 1px #0d3858;font-weight:900;letter-spacing:.01em;
 transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.portal .game-button::before,.portal #nav>.game-button::before,.portal .page .btn:not(.btn--ghost)::before{
 content:'';position:absolute;inset:0;width:auto;height:auto;transform:none;border:0;border-radius:14px;
 background:linear-gradient(115deg,transparent 28%,#fffce375 43%,#fffdf6a6 48%,transparent 61%) -100% 0/250% 100% no-repeat;
 opacity:.65;pointer-events:none;animation:ao-enamel-light 3.8s ease-in-out infinite;
}
.portal .game-button::after,.portal #nav>.game-button::after,.portal .page .btn:not(.btn--ghost)::after{
 content:'';position:absolute;inset:4px;width:auto;height:auto;border:1px solid #fff1bd80;border-radius:10px;
 background:radial-gradient(circle at 5px 5px,#fff6c1 0 1px,transparent 2px),radial-gradient(circle at calc(100% - 5px) calc(100% - 5px),#fff6c1 0 1px,transparent 2px);
 box-shadow:inset 0 1px 0 #ffffff24;transform:none;pointer-events:none;
}
.portal .game-button--gold,.portal #nav>.game-button--gold,.portal .page .btn--royal{
 background:linear-gradient(180deg,#fffbe7,#ffe8ad 15%,#f5d38a 47%,#dcaf5b 50%,#eac47c 85%,#f8d99c) padding-box,
 linear-gradient(135deg,#fff9da,#c08d3d 30%,#946027 48%,#ffe9b0 73%,#a97935) border-box;
 color:#503b1d;text-shadow:0 1px #fff5d4;box-shadow:inset 0 2px #ffffffb8,inset 0 -3px #a7793540,0 5px 0 #866031,0 8px 0 #102e4333,0 12px 18px #08263b2b;
}
.portal .game-button:is(:hover,:focus-visible),.portal #nav>.game-button:is(:hover,:focus-visible),.portal .page .btn:not(.btn--ghost):not(:disabled):is(:hover,:focus-visible){
 transform:translateY(-4px);filter:brightness(1.1);
 box-shadow:inset 0 2px #edfcffbb,inset 0 -3px #0a355e66,0 7px 0 #765328,0 12px 24px #80d0ed55,0 0 0 3px #fff0bc30;
}
.portal .game-button:is(:hover,:focus-visible)::before,.portal #nav>.game-button:is(:hover,:focus-visible)::before,.portal .page .btn:not(.btn--ghost):hover::before{animation-duration:1.45s;opacity:1}
.portal .game-button:active,.portal #nav>.game-button:active,.portal .page .btn:not(:disabled):active{
 transform:translateY(3px);filter:brightness(1.04);box-shadow:inset 0 3px 5px #16384f66,0 2px 0 #765328,0 4px 9px #08263b33;
}
.portal :is(.game-button,.page .btn):focus-visible,.portal #nav>:is(a,button):focus-visible{outline:3px solid #ffdf8e;outline-offset:5px}
.portal .game-button>.button-icon{
 z-index:3;width:43px;height:49px;object-fit:contain;border-radius:50%;padding:3px;margin:-13px 4px -10px -7px;
 border:2px solid #f4dc9b;background:radial-gradient(circle at 40% 28%,#e3f8ff,#5299b8 60%,#19466c);
 box-shadow:inset 0 1px 2px #ffffffe0,0 3px 0 #8b652e,0 4px 8px #0b294766;
 transform:rotate(-5deg);transition:transform .3s cubic-bezier(.2,.8,.3,1.3),filter .25s;
}
.portal .game-button--gold>.button-icon{background:radial-gradient(circle at 40% 28%,#fffdf0,#eed294 65%,#c49851)}
.portal .game-button:hover>.button-icon,.portal .game-button:focus-visible>.button-icon{transform:translateY(-6px) rotate(7deg) scale(1.16);filter:drop-shadow(0 0 5px #fff0b59c)}
.portal .game-button>span:not(.button-feedback){transition:transform .25s ease}
.portal .game-button:hover>span:not(.button-feedback){transform:translateX(2px)}
.portal .page .btn>.download-button-character{width:42px;height:47px;object-fit:contain;transition:transform .25s ease;filter:drop-shadow(0 3px 1px #0d2f4c66)}
.portal .page .btn:hover>.download-button-character{transform:translateY(-5px) rotate(-6deg) scale(1.12)}
.portal #nav>.game-button{min-height:48px;padding:9px 15px;gap:7px;border-radius:14px;font-size:12px}
.portal #nav>.game-button::before{border-radius:11px}.portal #nav>.game-button::after{border-radius:8px}
.portal #nav .game-button>.button-icon{width:24px;height:28px;flex:none;margin:-4px 0;border:0;border-radius:0;padding:0;box-shadow:none;background:none;transform:none}
.portal #nav .game-button:hover>.button-icon{transform:translateY(-3px) rotate(-8deg) scale(1.12)}
.portal .nav-toggle{border:2px solid #d4b777;border-radius:13px;background:linear-gradient(#47718d,#234e6e 48%,#173d5a 50%,#2b5673);box-shadow:inset 0 1px #bedfee70,0 3px 0 #0d2b43;color:#fff3d1;transition:transform .2s,filter .2s}
.portal .nav-toggle:hover{filter:brightness(1.17);transform:translateY(-2px)}
.portal .nav-toggle:active{transform:translateY(2px)}
.portal .filters{gap:8px;padding-bottom:12px;border:0}
.portal .filters button{position:relative;border:1px solid #91afc1;border-radius:10px;padding:8px 15px;background:linear-gradient(#f8fcff,#dfeaf2);color:#2a5876;box-shadow:inset 0 1px #fff,0 2px 0 #bacbd6;transition:transform .2s,background .2s,box-shadow .2s}
.portal .filters button:hover{background:#fff3ce;transform:translateY(-2px);box-shadow:0 3px 0 #b59b65}
.portal .filters button[aria-pressed=true]{border-color:#b08a46;border-bottom:1px solid #b08a46;background:linear-gradient(#fff5d4,#efd08f);color:#5e4523;box-shadow:inset 0 1px #fffdf0,0 2px 0 #ad8950}
.portal .homeland-tabs button{border-radius:15px}
.portal .homeland-tabs button[aria-selected=true]{border-radius:15px;box-shadow:inset 0 0 0 3px #eee2bd,0 3px 0 #baa77d}
.portal .page .btn--ghost{border-radius:10px;transition:transform .2s,background .2s}.portal .page .btn--ghost:hover{transform:translateY(-2px);background:#fff0c6}
.portal .page .btn:disabled{filter:none;transform:none;box-shadow:none;opacity:.6}.portal .page .btn:disabled::before{animation:none;content:none}
.portal .button-feedback{position:absolute!important;inset:3px;z-index:4!important;overflow:hidden;border-radius:inherit;pointer-events:none;transform:none!important}
.portal .button-ripple{position:absolute;width:20px;height:20px;left:var(--ripple-x);top:var(--ripple-y);margin:-10px;border-radius:50%;background:#fff8d1a3;box-shadow:0 0 18px #fff5c488;transform:scale(0);animation:ao-button-ripple .65s ease-out forwards;pointer-events:none}
@keyframes ao-enamel-light{0%{background-position:150% 0}72%,100%{background-position:-100% 0}}
@keyframes ao-button-ripple{to{transform:scale(24);opacity:0}}
@media(max-width:1160px){
 .portal-header__inner{width:calc(100% - 32px);min-height:88px}.portal .portal-brand{width:150px}.portal .nav-toggle{display:inline-flex}
 .portal #nav{position:absolute;top:100%;right:0;left:0;display:none;grid-template-columns:1fr 1fr;gap:10px;padding:15px;border:1px solid #bf9855;border-radius:0 0 18px 18px;background:#173c5b;box-shadow:0 8px 14px #173c5b40}
 .portal #nav.open{display:grid}.portal #nav>:is(a,button),.portal #nav>:is(a,button):not(.game-button){justify-content:flex-start;min-height:46px;margin:0;padding:10px 13px}.portal #nav>.game-button{justify-content:center}
}
@media(max-width:760px){
 .portal .hero-actions{gap:15px}.portal .hero-actions .game-button{min-height:56px;border-radius:16px;padding:10px 14px;font-size:12px;gap:5px}
 .portal .hero-actions .game-button>.button-icon{width:35px;height:42px;margin:-10px 2px -8px -5px;padding:2px}
 .portal .page .btn--lg{padding:12px 15px;font-size:14px}.portal .page .btn>.download-button-character{width:33px;height:39px}
}
@media(max-width:420px){.portal #nav{grid-template-columns:1fr;max-height:calc(100svh - 95px);overflow-y:auto;padding:13px}.portal .hero-actions{gap:14px}.portal .hero-actions .game-button{padding-inline:11px;font-size:11px}}
@media(max-height:400px) and (max-width:1160px){.portal-header__inner{min-height:50px;padding:4px 0}.portal .portal-brand{width:96px}.portal .nav-toggle{min-height:32px;padding:5px 11px}.portal #nav{max-height:calc(100svh - 60px);overflow-y:auto}}
.portal[data-motion=paused] .game-button::before,.portal[data-motion=paused] .page .btn::before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.portal :is(.game-button,.page .btn,.nav-toggle,.filters button),.portal #nav>:is(a,button),.portal .game-button>*,.portal #nav>:is(a,button)::before{transition:none!important}.portal .game-button::before,.portal .page .btn::before{animation:none!important}.portal .button-ripple{display:none}.portal .game-button:hover>.button-icon{transform:none}}
