/* Hall of Iron: crafted metal, woven standards and quiet charcoal surfaces. */
:root{--brand-color:#E0B84A;--muted:#A0A7B3}
.brand{justify-content:space-between;gap:8px;padding-bottom:12px;min-height:66px}
.brand-lockup{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0}
.brand-mark{color:var(--brand-color);width:38px;height:46px;display:grid;place-items:center;flex:none}
.brand .brand-name{font-size:18px;letter-spacing:2.2px;background:linear-gradient(180deg,#f5f0e1 20%,var(--brand-color));background-clip:text;-webkit-background-clip:text;color:transparent;white-space:nowrap}
.brand-tools{display:flex;gap:7px;align-items:center;flex:none;min-width:42px}
.brand .topic{position:relative;inset:auto;width:40px;height:40px;animation:none;border-width:1px}
.brand .topic svg{width:25px;height:25px;filter:none}
.settings-button{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface2);color:var(--muted);flex:none}
.settings-button svg{width:21px;height:21px;filter:none}
nav.tabs{box-shadow:0 -6px 28px #0002;padding-top:5px}
nav.tabs button{min-height:51px;position:relative;gap:3px;border-radius:10px;margin:0 2px;transition:background .15s,color .15s}
nav.tabs button.on{background:var(--accent-soft)}
nav.tabs button.on::before{content:"";position:absolute;top:-5px;left:30%;right:30%;height:2px;border-radius:0 0 2px 2px;background:var(--accent)}
nav.tabs button svg{stroke-width:1.7;width:23px;height:23px}
.nav-brand{color:var(--brand-color);height:25px;display:grid;place-items:center}
.nav-brand svg{height:27px!important;width:27px!important}
.settings-links{display:grid;gap:10px;margin-top:18px}
.settings-links>button{display:flex;align-items:center;gap:14px;padding:17px 14px;text-align:left;background:var(--surface2);border:1px solid var(--line);border-radius:13px;color:var(--text);min-height:74px}
.settings-links svg{width:23px;height:23px;color:var(--accent);flex:none}
.settings-links span{flex:1}.settings-links b{display:block;font-size:14px}.settings-links small{display:block;color:var(--muted);font-size:12px;margin-top:5px;line-height:1.4}.settings-links i{font-style:normal;color:var(--muted);font-size:24px}
.eyebrow{font-size:10px;letter-spacing:1.9px;text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:5px}
.card{box-shadow:0 8px 24px #00000015,inset 0 1px 0 #ffffff03}
.friend-code-card{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));background:radial-gradient(ellipse at 100% 0,var(--accent-soft),transparent 65%),var(--surface)}
.friend-code{flex:1;min-width:0;text-align:center;font-size:24px;letter-spacing:4px;font-weight:700;background:var(--bg)}
.sharing-note{margin:16px 0 0;padding-top:13px;border-top:1px solid var(--line);font-size:11px;line-height:1.6;color:var(--muted)}
.friend-code-pending{padding:15px 0;font-size:13px;color:var(--muted)}
.relic-icon{filter:drop-shadow(0 2px 2px #0008)}
.prestige-emblem{filter:drop-shadow(0 4px 5px #0008);background-size:contain!important}
.em0{background-image:url(art-rank-0.webp)}.em1{background-image:url(art-rank-1.webp)}.em2{background-image:url(art-rank-2.webp)}.em3{background-image:url(art-rank-3.webp)}.em4{background-image:url(art-rank-4.webp)}.em5{background-image:url(art-rank-5.webp)}.em6{background-image:url(art-rank-6.webp)}.em7{background-image:url(art-rank-7.webp)}.em8{background-image:url(art-rank-8.webp)}
.ch0{background-image:url(art-chest-0.webp)}.ch1{background-image:url(art-chest-1.webp)}.ch2{background-image:url(art-chest-2.webp)}.ch3{background-image:url(art-chest-3.webp)}.ch4{background-image:url(art-chest-4.webp)}.ch5{background-image:url(art-chest-5.webp)}
.avp-ares{background-image:url(art-portrait-ares.webp)}.avp-zeus{background-image:url(art-portrait-zeus.webp)}.avp-atlas{background-image:url(art-portrait-atlas.webp)}.avp-heracles{background-image:url(art-portrait-heracles.webp)}.avp-nike{background-image:url(art-portrait-nike.webp)}.avp-milo{background-image:url(art-portrait-milo.webp)}.avp-flex{background-image:url(art-portrait-flex.webp)}.avp-squat{background-image:url(art-portrait-squat.webp)}.avp-deadlift{background-image:url(art-portrait-deadlift.webp)}.avp-stone{background-image:url(art-portrait-stone.webp)}.avp-bench{background-image:url(art-portrait-bench.webp)}
.relic-frame>svg{filter:drop-shadow(0 2px 2px #000a)!important}
.relic-banner{filter:drop-shadow(0 5px 7px #0007)!important}
.relic-banner[data-level="8"]{filter:drop-shadow(0 5px 7px #0008) drop-shadow(0 0 12px #d8ac5530)!important}
.bnr{isolation:isolate}.bnfx{opacity:.65}
.relic-card{background:radial-gradient(ellipse at 50% 5%,color-mix(in srgb,var(--rc) 13%,transparent),transparent 70%),linear-gradient(145deg,#272a30,#101217 65%);border:1px solid color-mix(in srgb,var(--rc) 65%,#444);box-shadow:inset 0 0 0 3px #0a0b0f,inset 0 0 0 4px color-mix(in srgb,var(--rc) 25%,#333),0 3px 10px #0005;padding-top:21px;gap:7px}
.relic-card::before{content:"";position:absolute;inset:7px;border:1px solid color-mix(in srgb,var(--rc) 22%,transparent);border-radius:6px;pointer-events:none;background:none!important;animation:none!important;z-index:0!important}
.relic-card.r3{background:radial-gradient(ellipse at 30% 0,#9e79272e,transparent 70%),linear-gradient(145deg,#282217,#12100c 70%);border-color:#b29655;box-shadow:inset 0 0 0 3px #16120a,inset 0 0 0 4px #7d663830,0 4px 12px #0007}
.relic-card.r4{background:radial-gradient(ellipse at 50% 0,#755f963b,transparent 60%),linear-gradient(145deg,#211a2e,#0e101a 75%);border:1px solid #baa0d2;box-shadow:inset 0 0 0 3px #141019,inset 0 0 0 4px #d6ba6e55,0 4px 16px #a278c926}
.relic-card.r4::before{inset:7px!important;border-radius:6px!important;background:none!important;border:1px solid #d6ba6e60;animation:none!important;z-index:0!important}
.relic-card.r4::after{display:none}
.relic-card .lc-r{background:#101218e0!important;color:var(--rc)!important;letter-spacing:1.3px;font-size:8px;border-bottom:1px solid color-mix(in srgb,var(--rc) 25%,transparent);padding:4px 0}
.relic-card .lc-n,.relic-card.r3 .lc-n{color:#f3eee1;text-shadow:0 1px 2px #000;font-size:11px;z-index:1}
.relic-card .lc-g{position:relative;z-index:1;display:grid;place-items:center;filter:drop-shadow(0 3px 4px #0006)}
.relic-card .lc-g .relic-portrait{border-radius:7px;width:56px;height:56px;object-fit:cover;box-shadow:0 0 0 1px color-mix(in srgb,var(--rc) 35%,#333)}
.relic-card .lc-s,.relic-card.r3 .lc-s,.relic-card.r4 .lc-s{background:none;color:var(--rc);text-shadow:none;font-size:10px;z-index:1}
.relic-card.r3::after{opacity:.15}.lgrid .relic-card.r3::after{display:none}
.chestbtn{background:radial-gradient(ellipse at 50% 40%,var(--accent-soft),transparent 70%),var(--surface2);border:1px solid var(--line);box-shadow:inset 0 1px 0 #ffffff06,0 4px 12px #0003;border-radius:16px;padding:15px 12px;min-height:160px}
.chestbtn .chi{filter:drop-shadow(0 5px 5px #0007)}
.pick{background:linear-gradient(145deg,var(--surface2),var(--surface));box-shadow:inset 0 1px 0 #ffffff04;min-height:70px}
.pick.on{box-shadow:inset 0 0 0 1px var(--accent),0 0 12px var(--accent-soft)}
.pick.lock{opacity:.72}.pick em{font-size:9px}
.pick .av{box-shadow:0 2px 5px #0007;border:1px solid var(--line)}
.av .avp{background-color:#111318;box-shadow:inset 0 0 0 1px #ffffff20}
.av.r4::before,.av.r4::after{display:none!important}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.iconbtn,.btn{min-height:40px}
@media(max-width:420px){.brand .brand-name{font-size:16px;letter-spacing:1.2px}.brand{gap:4px}.brand-tools{gap:4px}.brand .topic,.settings-button{width:34px;height:38px}.brand-mark{width:29px}.brand-mark svg{width:34px}.brand-lockup{gap:3px}.friend-code{font-size:21px;letter-spacing:3px}}
@media(max-width:350px){.brand .brand-name{font-size:14px;letter-spacing:.6px}.brand .topic,.settings-button{width:30px}.brand-mark{width:25px}nav.tabs button{font-size:10px;margin:0 1px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}.bnfx,.fire{display:none!important}.topic,.relic-card::before,.relic-card::after,.av::before,.av::after{animation:none!important;transition:none!important}}

/* Effects remain small, slow and limited to hero-size rewards. */
.workout-settings{position:absolute;right:16px;top:12px;z-index:8}
.prestige-emblem[data-animated="1"]::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,#fff6d67a 48%,transparent 58%);background-size:340% 100%;background-position:150% 0;mask-image:var(--emblem);-webkit-mask-image:var(--emblem);mask-size:contain;-webkit-mask-size:contain;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;opacity:0;pointer-events:none}
.prestige-emblem[data-animated="1"][data-tier="3"]::after,.prestige-emblem[data-animated="1"][data-tier="4"]::after,.prestige-emblem[data-animated="1"][data-tier="5"]::after,.prestige-emblem[data-animated="1"][data-tier="6"]::after,.prestige-emblem[data-animated="1"][data-tier="8"]::after{animation:relicGlint 9s ease-in-out infinite}
.prestige-emblem[data-tier="7"][data-animated="1"]{animation:titanHeat 5s ease-in-out infinite}
.prestige-emblem[data-tier="8"][data-animated="1"]{animation:legendHalo 7s ease-in-out infinite}
.relic-frame[data-animated="1"]::after{content:"";position:absolute;inset:-7%;border-radius:50%;background:radial-gradient(circle at 18% 20%,#fff8dc 0 1px,transparent 3px),radial-gradient(circle at 84% 72%,#fff8dc 0 1px,transparent 3px);opacity:0;animation:frameGlint 8s ease-in-out infinite;pointer-events:none}
.relic-banner[data-level="5"] .bnfx,.relic-banner[data-level="6"] .bnfx,.relic-banner[data-level="7"] .bnfx,.relic-banner[data-level="8"] .bnfx{opacity:.8}
.relic-banner[data-level="8"] svg{filter:drop-shadow(0 0 3px #ead28d30)}
.chestbtn:hover .chi{transform:translateY(-3px);filter:drop-shadow(0 8px 7px #0008)}
.chestbtn .chi{transition:transform .2s,filter .2s}
.lc-in.relic-card:hover{border-color:var(--rc);box-shadow:inset 0 0 0 3px #0a0b0f,0 5px 15px color-mix(in srgb,var(--rc) 18%,transparent)}
@keyframes relicGlint{0%,55%,100%{opacity:0;background-position:160% 0}62%{opacity:.5}77%{opacity:0;background-position:-60% 0}}
@keyframes titanHeat{0%,100%{filter:drop-shadow(0 3px 4px #0009) drop-shadow(0 0 2px #ff661a25)}50%{filter:drop-shadow(0 3px 4px #0009) drop-shadow(0 0 7px #ff7e2848)}}
@keyframes legendHalo{0%,100%{filter:drop-shadow(0 3px 4px #0009) drop-shadow(0 0 4px #c9a3ed28)}50%{filter:drop-shadow(0 3px 4px #0009) drop-shadow(0 0 9px #d6b0f84d)}}
@keyframes frameGlint{0%,35%,65%,100%{opacity:0}48%{opacity:.8}55%{opacity:.2}}
html[data-low] .prestige-emblem,html[data-low] .prestige-emblem::after,html[data-low] .relic-frame::after,html[data-lite] .prestige-emblem,html[data-lite] .prestige-emblem::after,html[data-lite] .relic-frame::after{animation:none!important}
html.scrolling .prestige-emblem,html.scrolling .prestige-emblem::after,html.scrolling .relic-frame::after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.prestige-emblem,.prestige-emblem::after,.relic-frame::after,.chestbtn .chi{animation:none!important;transition:none!important;transform:none!important}}
.em0{--emblem:url(art-rank-0.webp)}
.em1{--emblem:url(art-rank-1.webp)}
.em2{--emblem:url(art-rank-2.webp)}
.em3{--emblem:url(art-rank-3.webp)}
.em4{--emblem:url(art-rank-4.webp)}
.em5{--emblem:url(art-rank-5.webp)}
.em6{--emblem:url(art-rank-6.webp)}
.em7{--emblem:url(art-rank-7.webp)}
.em8{--emblem:url(art-rank-8.webp)}

.brand-mark .app-brand-image{width:46px;height:52px;max-width:none;filter:drop-shadow(0 2px 3px #0007)}
.nav-brand .app-brand-image{width:27px;height:27px}
@media(max-width:420px){.brand-mark .app-brand-image{width:35px;height:43px}}

.brand-mark .app-brand-image{width:46px;height:52px;max-width:none;filter:drop-shadow(0 2px 3px #0007)}
.nav-brand .app-brand-image{width:27px;height:27px}
@media(max-width:420px){.brand-mark .app-brand-image{width:35px;height:43px}}
