@import url('/tatari-companion/page-layout.css');
/* Shared public navbar, scoped so legacy tools keep their own content layout. */
@font-face{font-family:Critters;src:url('/tatari-companion/assets/game-font.ttf') format('truetype');font-display:swap}
.navbar{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:3vw;margin:16px;padding:10px 2vw;background:#282625;color:#fff;border:0;border-radius:24px;min-height:78px;height:auto;font-family:Critters,system-ui,sans-serif}
.navbar .brand{flex:0 0 130px;display:flex;align-items:center;width:130px;padding:0;margin:0;text-decoration:none}.navbar .brand img{width:130px;height:auto;max-height:58px;object-fit:contain}
.navbar nav{display:flex;justify-content:space-between;align-items:center;gap:1.5vw;flex:1;padding:0;margin:0}.navbar nav>a,.navbar summary{font-family:Critters,system-ui,sans-serif;text-transform:uppercase;font-size:clamp(16px,1.5vw,28px);font-weight:800;white-space:nowrap;min-height:44px;display:flex;align-items:center;padding:0;color:#fff;text-decoration:none;background:transparent;border-radius:0}
.navbar summary{list-style:none;gap:10px;cursor:pointer}.navbar summary::-webkit-details-marker{display:none}.navbar summary::after{content:'▼';font-size:.8em}.navbar details{position:relative;padding:0;margin:0;border:0}.navbar details[open]>summary{color:#ffdb00}.navbar details.languages summary::after{display:none}
.navbar .dropdown{position:absolute;top:calc(100% + 20px);left:auto;right:0;min-width:220px;max-width:min(320px,calc(100vw - 32px));background:#282625;border-radius:14px;padding:12px;box-shadow:0 8px 24px #0004;display:flex;flex-direction:column;gap:4px}.navbar .dropdown a,.navbar .dropdown span{font:16px/1.4 Poppins,system-ui,sans-serif;padding:10px;border-radius:8px;color:#fff;display:block;text-transform:none;text-decoration:none}.navbar .dropdown a:hover{background:#45413b}.navbar .dropdown span{color:#d4d0c9}.navbar .dropdown small{font:13px Poppins,system-ui,sans-serif;color:#ffdf71;padding:10px}.navbar .menu-toggle{display:none;border:0;background:none;color:#fff;font-family:Critters,system-ui,sans-serif;cursor:pointer}.navbar a:focus-visible,.navbar button:focus-visible,.navbar summary:focus-visible{outline:3px solid #ffdb00;outline-offset:3px}
.legacy-tools .site-footer{display:block;padding:0;height:auto}.legacy-tools>.navbar{flex-wrap:nowrap}.legacy-tools .app>aside{top:0}.legacy-tools .app nav[aria-label=Tools] a{font-family:'DM Sans',sans-serif}.legacy-tools .skip{position:absolute;top:-100px;left:20px;z-index:50;background:#282625;padding:12px;color:#fff}.legacy-tools .skip:focus{top:10px}
@media(max-width:1100px){.navbar{gap:16px}.navbar .brand,.navbar .brand img{width:100px;flex-basis:100px}.navbar nav{gap:12px}.navbar nav>a,.navbar summary{font-size:16px}.navbar summary{gap:5px}}
@media(max-width:900px){.navbar{margin:12px;padding:10px 16px;border-radius:18px;min-height:66px;gap:12px}.navbar .brand,.navbar .brand img{width:100px;flex-basis:100px}.navbar .menu-toggle{display:flex;align-items:center;min-height:44px;font-size:20px}.navbar nav{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;padding:16px;background:#282625;border-radius:18px;max-height:calc(100svh - 110px);overflow:auto}.navbar nav.open{display:flex;flex-direction:column;align-items:stretch;gap:4px}.navbar nav>a,.navbar summary{font-size:20px;padding:8px 12px}.navbar details .dropdown{position:static;min-width:0;max-width:none;box-shadow:none;padding:0 12px 10px;background:#36332f;margin:4px 0 8px}.navbar .languages summary::after{content:'Language';display:block;font-size:16px}}

/* Canonical compact chrome: sizing is independent of each page's body styles. */
.navbar.navbar{box-sizing:border-box;line-height:normal;margin:12px;min-height:62px;padding:8px 2vw;border-radius:19px;gap:20px}
.navbar.navbar *{box-sizing:border-box}
.navbar.navbar .brand{flex:0 0 104px;width:104px}
.navbar.navbar .brand img{width:104px;max-height:46px}
.navbar.navbar #navigation{justify-content:center;gap:clamp(12px,2vw,38px)}
.navbar.navbar #navigation>a,.navbar.navbar #navigation>details>summary{font-size:clamp(14px,1.1vw,20px);line-height:normal}
.navbar.navbar .account-nav{font-family:Critters,system-ui,sans-serif;font-size:clamp(16px,1.5vw,22.4px);line-height:normal;padding:5px;min-height:0;border:0;background:transparent;color:#fff;text-transform:uppercase;cursor:pointer;flex-shrink:0;margin-left:auto}.navbar.navbar .account-nav:hover{color:#ffcf40}
.navbar.navbar .languages img{width:27px;height:27px}
@media(min-width:901px) and (max-width:1100px){.navbar.navbar{gap:14px}.navbar.navbar .brand{flex-basis:84px;width:84px}.navbar.navbar .brand img{width:84px}.navbar.navbar #navigation{gap:10px}}
@media(max-width:900px){.navbar.navbar{min-height:66px;padding:10px 16px;border-radius:18px;gap:8px}.navbar.navbar .brand{flex-basis:100px;width:100px;margin-right:auto}.navbar.navbar .brand img{width:100px}.navbar.navbar #navigation{align-items:stretch;gap:4px}.navbar.navbar #navigation>a,.navbar.navbar #navigation>details>summary{font-size:20px}.navbar.navbar .menu-toggle{font-size:18px;line-height:normal}}

@media(min-width:901px){.navbar.navbar #navigation .dropdown{min-width:250px}}