/* ══════════════════════════════════════════════════════════════════ NIHONER MEGA MENU v2 (prefix: nmm-) Larger type, higher contrast, plain words. Built to feel big and capable without ever feeling busy. ══════════════════════════════════════════════════════════════════ */ .nmm, .nmm *, .nmm *::before, .nmm *::after { box-sizing: border-box; } .nmm { --nmm-red: #bc002d; --nmm-red-br: #e60033; --nmm-red-deep: #8f0022; --nmm-red-soft: #fdeef1; --nmm-red-mist: #fff7f8; --nmm-ink: #16161a; --nmm-ink-soft: #43434e; /* darkened from v1 for contrast */ --nmm-ink-mute: #63636f; /* was #8a8a95 — failed comfortable contrast */ --nmm-paper: #ffffff; --nmm-warm: #fbf9f7; --nmm-line: #ece0e0; --nmm-shadow: 0 30px 80px -26px rgba(22,22,26,.34), 0 2px 10px rgba(22,22,26,.06); --nmm-font: 'Inter','Helvetica Neue',-apple-system,BlinkMacSystemFont,'Segoe UI','Hiragino Sans','Noto Sans JP',sans-serif; --nmm-jp: 'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif; font-family: var(--nmm-font); position: relative; z-index: 9000; background: var(--nmm-paper); color: var(--nmm-ink); border-bottom: 1px solid var(--nmm-line); -webkit-font-smoothing: antialiased; } .nmm.is-stuck { position: sticky; top: 0; } body.admin-bar .nmm.is-stuck { top: 32px; } @media (max-width: 782px) { body.admin-bar .nmm.is-stuck { top: 46px; } } @media (max-width: 600px) { body.admin-bar .nmm.is-stuck { top: 0; } } .nmm a { text-decoration: none; } /* Colour-critical rules are written at 0-2-1 or higher so a broad `.nmm a` rule can never out-specify them again. */ .nmm a, .nmm button { color: inherit; } /* ── top utility bar ───────────────────────────────── */ .nmm-topbar { background: var(--nmm-ink); color: #fff; font-size: 14px; } .nmm-topbar-in { max-width: 1320px; margin: 0 auto; padding: 0 24px; height: 44px; display: flex; align-items: center; gap: 4px; } .nmm-tb-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-right: 10px; white-space: nowrap; } .nmm-tb-links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; } .nmm-tb-links::-webkit-scrollbar { display: none; } .nmm a.nmm-tb { color: rgba(255,255,255,.88); padding: 6px 12px; border-radius: 7px; white-space: nowrap; font-weight: 500; transition: background .14s ease, color .14s ease; } .nmm a.nmm-tb:hover { background: rgba(255,255,255,.14); color: #fff; } .nmm-tb-right { margin-left: auto; display: flex; align-items: center; gap: 2px; } /* ── main bar ──────────────────────────────────────── */ .nmm-bar { max-width: 1320px; margin: 0 auto; padding: 0 24px; height: 78px; display: flex; align-items: center; gap: 6px; } .nmm-brand { display: flex; align-items: center; gap: 12px; margin-right: 16px; flex-shrink: 0; } .nmm-mark { width: 40px; height: 40px; border-radius: 50%; background: var(--nmm-red); display: grid; place-items: center; font-family: var(--nmm-jp); font-size: 20px; line-height: 1; box-shadow: 0 5px 16px -4px rgba(188,0,45,.55); } .nmm .nmm-mark { color: #fff; } .nmm-word { font-weight: 800; font-size: 22px; letter-spacing: -.025em; } /* ── top-level items ───────────────────────────────── */ .nmm-nav { display: flex; align-items: center; gap: 2px; height: 100%; } .nmm-nav-item { display: flex; align-items: center; height: 100%; position: static; } .nmm-top { position: relative; display: flex; align-items: center; gap: 9px; height: 78px; padding: 0 17px; font-size: 17px; font-weight: 650; background: none; border: 0; cursor: pointer; font-family: inherit; white-space: nowrap; transition: color .16s ease; } .nmm button.nmm-top { color: var(--nmm-ink-soft); } .nmm button.nmm-top:hover, .nmm button.nmm-top[aria-expanded="true"] { color: var(--nmm-red); } .nmm-top::after { content: ""; position: absolute; left: 17px; right: 17px; bottom: 0; height: 3px; background: var(--nmm-red); border-radius: 3px 3px 0 0; transform: scaleX(0); transition: transform .2s cubic-bezier(.2,.8,.3,1); } .nmm-top:hover::after, .nmm-top[aria-expanded="true"]::after { transform: scaleX(1); } .nmm-k { font-family: var(--nmm-jp); font-size: 18px; line-height: 1; color: var(--nmm-red); opacity: .7; transition: opacity .16s ease; } .nmm-top:hover .nmm-k, .nmm-top[aria-expanded="true"] .nmm-k { opacity: 1; } .nmm-caret { width: 10px; height: 7px; opacity: .5; transition: transform .2s ease; flex-shrink: 0; } .nmm-top[aria-expanded="true"] .nmm-caret { transform: rotate(180deg); } .nmm-badge { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--nmm-red); padding: 3px 7px; border-radius: 20px; } .nmm .nmm-badge { color: #fff; } /* ── right cluster ─────────────────────────────────── */ .nmm-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* The daily-loop button. Quiet until there is something to do, then it carries a count — the only number in the bar, so it cannot be missed or ignored. */ .nmm a.nmm-today { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--nmm-line, #e8e2da); background: transparent; color: var(--nmm-ink, #1b1b1f) !important; font-size: 14.5px; font-weight: 700; text-decoration: none !important; transition: border-color .15s, background .15s, transform .1s; white-space: nowrap; } .nmm a.nmm-today:hover, .nmm a.nmm-today:focus-visible { border-color: var(--nmm-red, #bc002d); background: var(--nmm-red-soft, #fff3f5); color: var(--nmm-red, #bc002d) !important; transform: translateY(-1px); } .nmm .nmm-today-jp { font-size: 15px; line-height: 1; color: var(--nmm-red, #bc002d); } .nmm a.nmm-today:hover .nmm-today-jp { color: inherit; } .nmm .nmm-today-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--nmm-red, #bc002d); color: #fff; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; } .nmm-right .nmm-nav-item { position: static; } .nmm a.nmm-link { padding: 11px 15px; font-size: 16px; font-weight: 600; color: var(--nmm-ink-soft); border-radius: 10px; } .nmm a.nmm-link:hover { color: var(--nmm-red); background: var(--nmm-red-mist); } /* 0-2-1 — this is the rule that rendered black-on-red in v1 */ .nmm a.nmm-cta { padding: 13px 24px; font-size: 16px; font-weight: 700; border-radius: 100px; background: var(--nmm-red); color: #ffffff; box-shadow: 0 8px 22px -8px rgba(188,0,45,.65); transition: transform .16s ease, box-shadow .16s ease, background .16s ease; white-space: nowrap; } .nmm a.nmm-cta:hover, .nmm a.nmm-cta:focus-visible { background: var(--nmm-red-br); color: #ffffff; transform: translateY(-1px); box-shadow: 0 12px 28px -10px rgba(188,0,45,.75); } /* ── panel ─────────────────────────────────────────── */ .nmm-panel { position: absolute; left: 0; right: 0; top: 100%; width: 100%; background: var(--nmm-paper); border-top: 1px solid var(--nmm-line); box-shadow: var(--nmm-shadow); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .18s ease, transform .18s cubic-bezier(.2,.8,.3,1), visibility .18s; pointer-events: none; } .nmm-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .nmm-panel-in { max-width: 1320px; margin: 0 auto; padding: 34px 24px 28px; display: grid; gap: 38px; grid-template-columns: minmax(292px, 340px) 1fr; } /* ── feature card ──────────────────────────────────── */ .nmm-feature { position: relative; overflow: hidden; border-radius: 20px; padding: 28px 26px 24px; background: linear-gradient(158deg, var(--nmm-red-deep) 0%, var(--nmm-red) 54%, #d4003a 100%); display: flex; flex-direction: column; } .nmm a.nmm-feature { color: #ffffff; } /* 0-2-1 */ .nmm-feature::before { content: ""; position: absolute; right: -58px; top: -58px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.11); } .nmm-feature .fsub { position: relative; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom: 8px; } .nmm-feature h3 { position: relative; margin: 0 0 10px; font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -.022em; color: #ffffff; } .nmm-feature p { position: relative; margin: 0 0 20px; font-size: 15px; line-height: 1.62; color: rgba(255,255,255,.93); } .nmm-feature .go { position: relative; margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: #fff; padding: 11px 20px; border-radius: 100px; font-size: 15px; font-weight: 700; transition: gap .16s ease; } .nmm .nmm-feature .go { color: var(--nmm-red); } .nmm-feature:hover .go { gap: 13px; } /* ── columns ───────────────────────────────────────── */ .nmm-cols { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); align-content: start; } .nmm-col-group { display: flex; flex-direction: column; } .nmm-head { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--nmm-ink-mute); margin: 0 0 12px; padding-bottom: 9px; border-bottom: 1px solid var(--nmm-line); } .nmm-item { display: block; padding: 10px 12px; margin: 0 -12px 2px; border-radius: 11px; transition: background .14s ease; } .nmm-item:hover { background: var(--nmm-red-mist); } .nmm-item .t { display: block; font-size: 16px; font-weight: 650; line-height: 1.35; } .nmm .nmm-item .t { color: var(--nmm-ink); } .nmm .nmm-item:hover .t { color: var(--nmm-red); } .nmm-item .d { display: block; font-size: 13.5px; line-height: 1.5; margin-top: 3px; } .nmm .nmm-item .d { color: var(--nmm-ink-mute); } /* ── panel footer ──────────────────────────────────── */ .nmm-foot { grid-column: 1 / -1; margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--nmm-line); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .nmm a.nmm-pill { font-size: 14.5px; font-weight: 600; color: var(--nmm-ink-soft); background: var(--nmm-warm); border: 1px solid var(--nmm-line); padding: 9px 17px; border-radius: 100px; transition: .14s ease; } .nmm a.nmm-pill:hover { border-color: var(--nmm-red); color: var(--nmm-red); background: var(--nmm-red-mist); } /* ── scrim ─────────────────────────────────────────── */ .nmm-scrim { position: fixed; inset: 0; background: rgba(18,14,14,.30); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; z-index: -1; } .nmm-scrim.is-open { opacity: 1; visibility: visible; } /* ── mobile ────────────────────────────────────────── */ .nmm-burger { display: none; margin-left: auto; align-items: center; gap: 9px; height: 48px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--nmm-line); background: var(--nmm-paper); cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 700; } .nmm button.nmm-burger { color: var(--nmm-ink); } .nmm-burger i { display: block; width: 19px; height: 2.5px; background: currentColor; border-radius: 2px; position: relative; } .nmm-burger i::before, .nmm-burger i::after { content: ""; position: absolute; left: 0; width: 19px; height: 2.5px; background: currentColor; border-radius: 2px; } .nmm-burger i::before { top: -6.5px; } .nmm-burger i::after { top: 6.5px; } @media (max-width: 1140px) { /* ── Bar ────────────────────────────────────────── Order: burger · brand · account. The account trigger STAYS VISIBLE — an earlier version hid .nmm-right wholesale on mobile, which removed the only route a signed-in member had to their profile, billing and log out. */ .nmm-topbar-in { height: auto; padding: 7px 14px; flex-wrap: nowrap; gap: 2px; overflow-x: auto; } .nmm-tb-label { display: none; } .nmm-tb-right { margin-left: auto; } .nmm a.nmm-tb { padding: 7px 11px; font-size: 13.5px; } .nmm-bar { height: 62px; padding: 0 12px; gap: 10px; } .nmm-brand { margin-right: 0; gap: 9px; } .nmm-mark { width: 34px; height: 34px; font-size: 17px; } .nmm-word { font-size: 18px; } .nmm-nav { display: none; } .nmm-burger { display: flex; order: -1; margin-left: 0; height: 44px; padding: 0 12px; gap: 8px; } .nmm-burger span { font-size: 14px; } .nmm-right { margin-left: auto; gap: 6px; } .nmm-right .nmm-link { display: none; } /* Pricing lives in the drawer */ .nmm a.nmm-today { padding: 8px 11px; gap: 5px; } .nmm .nmm-today-t { display: none; } /* the mark and the count still read */ .nmm a.nmm-cta { padding: 11px 16px; font-size: 14.5px; } .nmm-acct { height: 44px; padding: 0 6px; } .nmm-acct .nmm-caret { display: none; } .nmm-acct .nmm-badge { display: none; } /* shown in the drawer instead */ .nmm-right .nmm-nav-item .nmm-panel { display: none !important; } /* ── Drawer ─────────────────────────────────────── Full remaining viewport height with momentum scrolling, starting cleanly below the header bar. */ .nmm.is-mobile-open .nmm-nav { display: block; position: fixed; left: 0; right: 0; top: var(--nmm-bar-top, 62px); bottom: 0; height: calc(100vh - var(--nmm-bar-top, 62px)); height: calc(100dvh - var(--nmm-bar-top, 62px)); background: var(--nmm-paper); border-top: 1px solid var(--nmm-line); box-shadow: var(--nmm-shadow); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 0 calc(32px + env(safe-area-inset-bottom, 0px)); z-index: 9999; } /* Nav item wrapper on mobile */ .nmm-nav-item { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--nmm-line); } /* Rows: 56px targets, comfortably above the 44px minimum. */ .nmm-top { width: 100%; height: auto; min-height: 56px; padding: 16px 20px; justify-content: flex-start; font-size: 17.5px; font-weight: 700; gap: 12px; border: 0; background: transparent; text-align: left; transition: background .16s ease, color .16s ease; } .nmm-top .nmm-top-label { flex: 1; text-align: left; } .nmm-top::after { display: none; } .nmm-top .nmm-k { font-size: 20px; opacity: 1; width: 24px; text-align: center; flex-shrink: 0; } .nmm-caret { margin-left: auto; width: 12px; height: 8px; opacity: .55; transition: transform .22s cubic-bezier(.2,.8,.3,1); flex-shrink: 0; } .nmm-top[aria-expanded="true"] { background: var(--nmm-red-mist) !important; color: var(--nmm-red) !important; } .nmm-top[aria-expanded="true"] .nmm-caret { transform: rotate(180deg); opacity: .9; } /* Accordion panel inline inside mobile drawer */ .nmm-panel { position: static; width: 100%; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-top: 1px solid var(--nmm-line); pointer-events: auto; display: none; background: var(--nmm-warm); border-bottom: 0; } .nmm-panel.is-open { display: block; } .nmm-panel-in { grid-template-columns: 1fr; gap: 16px; padding: 18px 18px 22px; max-width: 100%; } .nmm-cols { grid-template-columns: 1fr; gap: 14px; } .nmm-col-group { display: flex; flex-direction: column; gap: 4px; } /* A compact feature card — styled for mobile touch */ .nmm-feature { border-radius: 14px; padding: 18px 18px 16px; } .nmm-feature h3 { font-size: 19px; } .nmm-feature p { font-size: 14px; margin-bottom: 14px; } .nmm-feature .fsub { font-size: 11px; } .nmm-feature .go { padding: 10px 16px; font-size: 14px; } /* Mobile link cards */ .nmm-head { font-size: 11.5px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--nmm-line); color: var(--nmm-ink-mute); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .nmm-item { display: block; padding: 12px 14px; min-height: 48px; border-radius: 10px; background: #ffffff; border: 1px solid var(--nmm-line); margin: 0 0 6px; transition: background .14s ease, border-color .14s ease; text-decoration: none; } .nmm-item .t { font-size: 15.5px; font-weight: 650; color: var(--nmm-ink); } .nmm-item .d { font-size: 13px; line-height: 1.45; margin-top: 2px; color: var(--nmm-ink-mute); } .nmm-foot { padding-top: 12px; gap: 8px; border-top: 1px solid var(--nmm-line); margin-top: 4px; display: flex; flex-wrap: wrap; } .nmm a.nmm-pill { padding: 9px 15px; font-size: 13.5px; border-radius: 100px; background: #ffffff; border: 1px solid var(--nmm-line); } /* Drawer footer: the actions that were in the desktop right cluster. */ .nmm-mobile-cta { display: flex; gap: 10px; padding: 20px 18px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--nmm-line); margin-top: 8px; } .nmm-mobile-cta .nmm-cta, .nmm-mobile-cta .nmm-link { flex: 1 1 auto; text-align: center; justify-content: center; display: inline-flex; align-items: center; } .nmm-mobile-cta .nmm-link { border: 1.5px solid var(--nmm-line); border-radius: 100px; padding: 12px 16px; font-weight: 600; } /* Mobile account summary at the top of the drawer. */ .nmm-mobile-me { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--nmm-line); background: var(--nmm-warm); text-decoration: none; } .nmm-mobile-me .nmm-avatar { width: 40px; height: 40px; } .nmm-mobile-me .nmm-me-info { display: flex; flex-direction: column; gap: 2px; } .nmm-mobile-me .who { font-weight: 700; font-size: 16px; line-height: 1.25; color: var(--nmm-ink); } .nmm-mobile-me .go { margin-left: auto; font-size: 13.5px; font-weight: 700; color: var(--nmm-red); white-space: nowrap; } .nmm-scrim { top: 0; } } @media (min-width: 1141px) { .nmm-mobile-cta, .nmm-mobile-me { display: none; } } /* Very small phones */ @media (max-width: 380px) { .nmm-word { display: none; } .nmm-burger span { display: none; } .nmm-burger { padding: 0 11px; } } @media (prefers-reduced-motion: reduce) { .nmm *, .nmm *::after, .nmm *::before { transition: none !important; } } .nmm :focus-visible { outline: 3px solid var(--nmm-red); outline-offset: 2px; border-radius: 7px; } /* ── account trigger (members) ──────────────────────── */ .nmm-acct{gap:9px;padding:0 13px} /* Avatar token. Two things made a perfectly valid photo read as a broken image here: 1. No edge. Most member avatars are phone snaps with a pale background, and the bar behind them is white — so the circle had no boundary and the subject appeared to bleed straight into the page. The ring and the faint inner shadow give it a rim in every case, including white-on-white. 2. Centre crop. `object-position` defaults to 50% 50%, which on a normal half-body photo lands on the chest and pushes the face out of the frame at 30px. Faces sit high in almost every portrait, so the crop is biased upward. The source is requested at 96px rather than 30px: on a 2x or 3x phone the 30px box needs 60–90 real pixels, and a 30px source was being upscaled into a smear. */ .nmm-avatar{display:inline-flex;width:30px;height:30px;border-radius:50%;overflow:hidden;flex-shrink:0; position:relative;background:var(--nmm-warm,#faf7f3); box-shadow:0 0 0 1.5px #fff, 0 0 0 2.5px var(--nmm-line,#ece0e0)} .nmm-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;border-radius:50%} /* Hairline over the photo itself, so light avatars still show a defined rim. */ .nmm-avatar::after{content:'';position:absolute;inset:0;border-radius:50%; box-shadow:inset 0 0 0 1px rgba(22,22,26,.10);pointer-events:none} .nmm-acct:hover .nmm-avatar{box-shadow:0 0 0 1.5px #fff, 0 0 0 2.5px var(--nmm-red,#bc002d)} .nmm-acct-name{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* The bar runs out of room before the mobile breakpoint: at ~1280px the six doors plus the account button overflowed the viewport by ~67px, and since body is overflow-x:clip the account button was simply cut off rather than scrollable. Shed the least important width first — the account name, then the door padding — so every door stays reachable. */ @media(max-width:1380px){.nmm-acct-name{display:none}} @media(max-width:1300px){ .nmm-top{padding:0 12px;font-size:16px;gap:7px} .nmm-bar{padding:0 16px;gap:2px} } @media(max-width:1140px){ .nmm-top{padding:0 9px;font-size:15px} .nmm-top .nmm-k{display:none} } /* ══════════════════════════════════════════════════════════════════ THEME ARMOUR The BuddyBoss theme ships GLOBAL !important hover rules: a:hover { color: var(--bb-primary-color) !important } a:hover { background-color: var(--bb-body-background-color) !important } and --bb-primary-color on this site is #B2002B — red. Because they carry !important, they beat this component's styles no matter how specific it is, which turned every hovered row red-on-pink, including the grey description text that is supposed to stay quiet. Countering a third-party !important is the one legitimate use of !important, so these overrides are scoped strictly inside .nmm and nowhere else. ══════════════════════════════════════════════════════════════════ */ /* Neutralise the blanket link-hover background across the whole component. */ .nmm a:hover, .nmm a:focus { background-color: transparent !important; } /* Panel rows: soft tint, red title, description stays muted and readable. */ .nmm a.nmm-item:hover, .nmm a.nmm-item:active { background-color: var(--nmm-red-mist) !important; border-color: var(--nmm-red) !important; } .nmm a.nmm-item:hover .t, .nmm a.nmm-item:active .t { color: var(--nmm-red) !important; } .nmm a.nmm-item:hover .d, .nmm a.nmm-item:active .d { color: var(--nmm-ink-mute) !important; } .nmm a.nmm-item .t { color: var(--nmm-ink) !important; } .nmm a.nmm-item .d { color: var(--nmm-ink-mute) !important; } /* Primary button: white on red, in every state. */ .nmm a.nmm-cta, .nmm a.nmm-cta:hover, .nmm a.nmm-cta:focus { color: #ffffff !important; background-color: var(--nmm-red) !important; } .nmm a.nmm-cta:hover { background-color: var(--nmm-red-br) !important; } /* Feature card: white text on the red gradient, never recoloured. */ .nmm a.nmm-feature, .nmm a.nmm-feature:hover { color: #ffffff !important; background-color: transparent !important; } .nmm a.nmm-feature:hover h3 { color: #ffffff !important; } .nmm a.nmm-feature:hover p { color: rgba(255,255,255,.93) !important; } .nmm a.nmm-feature .go, .nmm a.nmm-feature:hover .go { color: var(--nmm-red) !important; background-color: #ffffff !important; } /* Dark top bar: stays white on a translucent highlight. */ .nmm a.nmm-tb:hover { color: #ffffff !important; background-color: rgba(255,255,255,.14) !important; } /* Secondary links and pills. */ .nmm a.nmm-link:hover { color: var(--nmm-red) !important; background-color: var(--nmm-red-mist) !important; } .nmm a.nmm-pill:hover { color: var(--nmm-red) !important; background-color: var(--nmm-red-mist) !important; } /* ── BUTTON ARMOUR ───────────────────────────────────────────────── The top-level doors and the account trigger are

浪

Kanji Ronin

漢字の道 · The Way of Kanji

A kanji appears. One correct meaning hides among four choices. Strike fast — the clock is watching. Train through 5 stages, from beginner strokes to master-level characters.

⚔️ 5 stages 🎓 N5 → N1 🔥 Combo system ⬆️ Level up 💯 Free

—

浪人 · Lv.1

🏆 Best: 0

Choose your path

← Back to Nihoner Games

+10 XP