/* Burger menu shared by every page of kanjiblitz.com */
.nav-btn { position: fixed; top: 14px; right: 14px; z-index: 60; width: 52px; height: 52px; padding: 0; border-radius: 50%; border: 3px solid #f0c35e; background: linear-gradient(180deg, #cf2d24, #8c1812); box-shadow: 0 6px 18px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.25); cursor: pointer; display: grid; place-items: center; transition: transform .25s ease, box-shadow .25s ease; -webkit-tap-highlight-color: transparent; }
.nav-btn:hover { transform: scale(1.08) rotate(-4deg); }
.nav-btn:focus-visible { outline: 3px solid #fff4dc; outline-offset: 3px; }
.nav-btn span { grid-area: 1 / 1; width: 22px; height: 3px; border-radius: 3px; background: #fff4dc; transition: transform .38s cubic-bezier(.7,-.4,.3,1.4), opacity .2s ease, width .3s ease; }
.nav-btn span:nth-child(1) { transform: translateY(-7px); }
.nav-btn span:nth-child(3) { transform: translateY(7px); width: 14px; translate: -4px 0; }
.nav-btn:hover span:nth-child(3) { width: 22px; translate: 0 0; }
.nav-open .nav-btn { transform: rotate(180deg); }
.nav-open .nav-btn span:nth-child(1) { transform: rotate(45deg); }
.nav-open .nav-btn span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-open .nav-btn span:nth-child(3) { transform: rotate(-45deg); width: 22px; translate: 0 0; }

.nav-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(20,8,16,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s; }
.nav-open .nav-backdrop { opacity: 1; visibility: visible; transition: opacity .4s ease; }

.nav-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 58; width: min(86vw, 340px); padding: 86px 22px 22px; display: flex; flex-direction: column; color: #2a160c; font-family: "Segoe UI", system-ui, -apple-system, "Noto Sans", Roboto, sans-serif; background-color: #f6ead0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cg fill='none' stroke='%23a37d3d' stroke-opacity='.28' stroke-width='1.1'%3E%3Ccircle cx='20' cy='20' r='19'/%3E%3Ccircle cx='20' cy='20' r='13'/%3E%3Ccircle cx='20' cy='20' r='7'/%3E%3Ccircle cx='0' cy='20' r='19'/%3E%3Ccircle cx='0' cy='20' r='13'/%3E%3Ccircle cx='0' cy='20' r='7'/%3E%3Ccircle cx='40' cy='20' r='19'/%3E%3Ccircle cx='40' cy='20' r='13'/%3E%3Ccircle cx='40' cy='20' r='7'/%3E%3C/g%3E%3C/svg%3E"); border-left: 4px solid #7a5530; box-shadow: -18px 0 44px rgba(0,0,0,.55); transform: translateX(104%); visibility: hidden; transition: transform .55s cubic-bezier(.2,.9,.25,1), visibility 0s linear .55s; overflow: hidden; }
.nav-panel::before { content: ""; position: absolute; inset: 10px 10px 10px 6px; border: 2px solid #f0c35e; border-radius: 14px; pointer-events: none; }
.nav-open .nav-panel { transform: translateX(0); visibility: visible; transition: transform .55s cubic-bezier(.2,.9,.25,1); }
.nav-title { margin: 0 0 14px 10px; color: #b3201a; font-weight: 800; font-size: .85rem; letter-spacing: .22em; text-transform: uppercase; }
.nav-panel a.nav-link { position: relative; display: flex; align-items: center; gap: 14px; margin: 0 0 10px; padding: 12px 14px; border-radius: 14px; background: #fff8e8; border: 2px solid #e9d7aa; color: #2a160c; text-decoration: none; font-weight: 700; font-size: 1.1rem; opacity: 0; translate: 46px 0; transition: opacity .35s ease, translate .5s cubic-bezier(.2,.9,.25,1), background .2s ease, border-color .2s ease, transform .2s ease; }
.nav-open .nav-panel a.nav-link { opacity: 1; translate: 0 0; }
.nav-open .nav-panel a.nav-link:nth-of-type(1) { transition-delay: .18s, .18s, 0s, 0s, 0s; }
.nav-open .nav-panel a.nav-link:nth-of-type(2) { transition-delay: .26s, .26s, 0s, 0s, 0s; }
.nav-open .nav-panel a.nav-link:nth-of-type(3) { transition-delay: .34s, .34s, 0s, 0s, 0s; }
.nav-open .nav-panel a.nav-link:nth-of-type(4) { transition-delay: .42s, .42s, 0s, 0s, 0s; }
.nav-panel a.nav-link:hover, .nav-panel a.nav-link:focus-visible { background: #fff; border-color: #f0c35e; transform: translateX(-4px); outline: none; }
.nav-panel a.nav-link .k { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.5rem; font-weight: 800; color: #fff4dc; background: linear-gradient(160deg, #d6362b, #8c1812); border: 2px solid #f0c35e; }
.nav-panel a.nav-link[aria-current="page"] { background: #fff; border-color: #b3201a; }
.nav-panel a.nav-link[aria-current="page"]::after { content: ""; margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: #b3201a; }
.nav-cat { margin-top: auto; align-self: center; width: 130px; opacity: 0; translate: 0 40px; transition: opacity .4s ease .5s, translate .6s cubic-bezier(.2,.9,.25,1) .5s; }
.nav-open .nav-cat { opacity: 1; translate: 0 0; animation: nav-bob 4s ease-in-out 1.2s infinite; }
@keyframes nav-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.nav-note { margin: 8px 0 0; text-align: center; color: #6a4a30; font-size: .85rem; }
@media (prefers-reduced-motion: reduce) {
  .nav-btn, .nav-btn span, .nav-panel, .nav-backdrop, .nav-panel a.nav-link, .nav-cat { transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important; }
}