/* Painted navigation, with labels and a compact, constant footprint in combat. */
.menu-art{display:block;flex:none;width:42px;height:42px;background-image:url('/assets/art/navigation-015.webp');background-size:400% 200%;background-repeat:no-repeat;pointer-events:none}
.menu-art-game{background-position:0 0}.menu-art-hero{background-position:33.333333% 0}.menu-art-party{background-position:66.666667% 0}.menu-art-more{background-position:100% 0}
.menu-art-stats{background-position:0 100%}.menu-art-equipment{background-position:33.333333% 100%}.menu-art-skills{background-position:66.666667% 100%}.menu-art-lantern{background-position:100% 100%}
nav.tabs{z-index:25;gap:5px;padding:5px max(10px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));border-top:2px solid #a88954;background:linear-gradient(180deg,#594c34 0,#232b25 4px,#101814 15px,#101512 95%,#3b3325);box-shadow:0 -5px 22px #0007,inset 0 1px #f2d29b55;backdrop-filter:none}
nav.tabs button{position:relative;isolation:isolate;min-width:0;min-height:65px;height:65px;padding:3px 5px 4px;gap:1px;border:1px solid #73614066;border-radius:9px;background:linear-gradient(150deg,#35403588,#111a15 70%);box-shadow:inset 0 1px #d1ba7c15;color:#d2cfb9;transition:border-color .18s,background .18s,color .18s}
nav.tabs button::before,.hero-tabs button::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(ellipse at 50% 35%,#e7bb6542,transparent 70%);opacity:0;transition:opacity .2s;pointer-events:none}
nav.tabs button .menu-art{width:40px;height:40px;filter:brightness(.85) saturate(.8) drop-shadow(0 2px 2px #0009);transition:transform .18s,filter .18s}
nav.tabs button .menu-label{font:600 11px/14px system-ui,sans-serif;letter-spacing:.04em;text-shadow:0 1px 2px #000}
nav.tabs button.active{color:#ffe5af;background:linear-gradient(160deg,#63523888,#20271b);border-color:#d1ac6b;box-shadow:inset 0 0 0 1px #eed09c22,0 0 10px #e0ad4518}
nav.tabs button.active::before,.hero-tabs button.active::before{opacity:1}
nav.tabs button.active .menu-art{filter:brightness(1.12) saturate(1.1) drop-shadow(0 0 4px #dfb76570)}
nav.tabs button.active::after{position:absolute;bottom:-3px;left:calc(50% - 3px);width:6px;height:6px;margin:0;border:1px solid #ffe7b1;border-radius:1px;background:#dca94e;box-shadow:0 0 6px #ffc75a88;transform:rotate(45deg)}
nav.tabs button:active .menu-art,.hero-tabs button:active .menu-art{transform:scale(.92)}
nav.tabs button:focus-visible,.hero-tabs button:focus-visible{outline:2px solid #ffe4a5;outline-offset:2px}
.hero-tabs{gap:6px;padding:6px;border:1px solid #9c8050;border-radius:13px;background:linear-gradient(150deg,#484233,#111c17 60%);box-shadow:inset 0 1px #e2c99133,0 5px 14px #0003}
.hero-tabs button{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:77px;padding:6px 2px;border:1px solid #74634266;border-radius:8px;background:linear-gradient(145deg,#38423288,#101a15);color:#d2cfb9;transition:border-color .18s,color .18s}
.hero-tabs .menu-art{width:42px;height:42px;filter:brightness(.9) drop-shadow(0 2px 2px #0009);transition:transform .18s,filter .18s}
.hero-tabs .menu-label{font-size:12px;line-height:16px;font-weight:600;white-space:nowrap}
.hero-tabs button.active{background:linear-gradient(150deg,#6c593a77,#263021);border-color:#d8b678;color:#ffe6b1;box-shadow:inset 0 0 0 1px #e6d19d22}
.hero-tabs button.active .menu-art{filter:brightness(1.12) drop-shadow(0 0 5px #dca54c50)}
.landing h1{font-size:clamp(2.25rem,4.9vw,4.3rem);line-height:1.08}
.landing .create-community{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:6px 10px}
.create-community .menu-art{width:32px;height:32px;filter:drop-shadow(0 1px 2px #49321b88)}
.landing .feature-line{margin-top:14px}
@media(hover:hover){nav.tabs button:hover,.hero-tabs button:hover{border-color:#d3b47b;color:#ffe6b5}nav.tabs button:hover .menu-art,.hero-tabs button:hover .menu-art{transform:translateY(-2px)}}
@media(min-width:900px){nav.tabs{width:580px;bottom:20px;border:2px solid #9f8453;border-radius:15px;padding:6px 9px;box-shadow:0 8px 35px #0009,inset 0 1px #f2d29b44}}
@media(max-width:650px){.landing{gap:16px}.landing .art{height:165px;border-radius:90px 90px 12px 12px;background-position:center 43%}.landing h1{font-size:clamp(2.1rem,8.8vw,3rem);margin:10px 0 12px}.landing .eyebrow{font-size:10px;letter-spacing:.16em}.landing-actions{margin-top:18px}}
@media(prefers-reduced-motion:reduce){nav.tabs button,nav.tabs button .menu-art,nav.tabs button::before,.hero-tabs button,.hero-tabs .menu-art,.hero-tabs button::before{transition:none}}
.reduce-motion nav.tabs button,.reduce-motion nav.tabs .menu-art,.reduce-motion nav.tabs button::before,.reduce-motion .hero-tabs button,.reduce-motion .hero-tabs .menu-art,.reduce-motion .hero-tabs button::before{transition:none}