/* The home page in the Naruto look (pages/index.html; promoted from the /preview/naruto-home preview on 2026-10-16).
   Loaded by the home only, after site.css, naruto.css and home.css, so every rule here is home-only. The shared pieces
   (tokens, headband heads, scrolls, buttons, stamps, board, chakra line, seal) live in naruto.css. Look: the Hidden
   Leaf at night with a parchment accent: a village gate hero, a Summoning Scroll block, mission scrolls with D to S rank
   stamps (the game's own tier letters), a mission board and a notice board. Game art is shown as it is (never tinted). */
/* ---------- hero: the village gate (lintel, two pillars), the title art, a parchment plate ---------- */
.nk-gate { padding: var(--sp-6) 0 0; }
.nk-lintel { position: relative; z-index: 2; height: 50px; margin: 12px -6px 0; border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 37px), linear-gradient(180deg, #7a4a24 0%, var(--nk-wood) 55%, var(--nk-wood-3) 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 220, 170, 0.25); }
.nk-lintel::before { content: ""; position: absolute; left: -18px; right: -18px; top: -14px; height: 16px; background: linear-gradient(180deg, #4a2c14, #2a170a);
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 22px 100%); border-radius: 2px; }
.nk-lintel-sign { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 7px 16px; white-space: nowrap;
  background: var(--nk-parchment); color: var(--nk-ink); box-shadow: 0 0 0 3px var(--nk-wood-3), 0 6px 14px rgba(0, 0, 0, 0.5); border-radius: 2px; }
.nk-leaf-ico { width: 28px; height: 28px; color: var(--nk-red); }
.nk-lintel-t { font: 400 0.95rem/1 var(--nk-brush); letter-spacing: 0.04em; }
.nk-gate-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); align-items: stretch; padding: 0 22px;
  background: radial-gradient(circle at 75% 40%, rgba(255, 190, 80, 0.12), transparent 60%), linear-gradient(180deg, #0f1830, #0b1222); }
.nk-gate-in::before, .nk-gate-in::after { content: ""; position: absolute; top: 0; bottom: -10px; width: 22px; z-index: 1;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 23px), var(--nk-rod-v); box-shadow: 0 0 14px rgba(0, 0, 0, 0.6); }
.nk-gate-in::before { left: 0; }
.nk-gate-in::after { right: 0; }
.nk-gate-art { grid-column: 2; grid-row: 1; position: relative; min-height: 540px; overflow: hidden; }
.nk-gate-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.nk-gate-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0b1222 0%, rgba(11, 18, 34, 0) 22%), linear-gradient(0deg, rgba(11, 18, 34, 0.55), transparent 30%); pointer-events: none; }
.nk-gate-plate { grid-column: 1; grid-row: 1; align-self: center; margin: 44px 8px 44px 30px; padding: 30px 32px 28px; }
.nk-logo { display: block; width: min(300px, 70%); height: auto; aspect-ratio: 960 / 530; margin: -8px 0 10px -6px; filter: drop-shadow(0 3px 4px rgba(60, 30, 5, 0.35)); }
.nk-gate-plate h1 { margin: 0 0 8px; font: 400 clamp(1.7rem, 1.2rem + 1.7vw, 2.45rem)/1.12 var(--nk-brush); color: var(--nk-red-ink); letter-spacing: 0.01em; }
.nk-lead { margin: 12px 0 18px; max-width: 58ch; color: var(--nk-ink-2); font-size: var(--fs-base); }
.nk-lead em { color: var(--nk-ink); font-style: normal; font-weight: 800; }
[data-page="home"] .hub-meta { margin: 0; min-height: 1.5em; color: var(--nk-ink-3); font-size: var(--fs-sm); }
[data-page="home"] .hub-meta b { color: var(--nk-ink); font: 700 var(--fs-base)/1 var(--head); font-variant-numeric: tabular-nums; }
[data-page="home"] .hub-meta i { font-style: normal; color: var(--nk-ink-3); margin: 0 8px; }
[data-page="home"] .nk-gate-plate .sk { background: rgba(90, 53, 25, 0.18); }
/* the live server tag, in ink on the paper */
[data-page="home"] .status-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 0; margin: 0 0 12px; padding: 5px 10px; border: 0; border-radius: var(--blade-sm);
  background: rgba(23, 110, 60, 0.13); box-shadow: inset 0 0 0 1px rgba(23, 110, 60, 0.35); font: 700 0.6875rem/1.3 var(--head); letter-spacing: 0.08em; text-transform: uppercase; color: #17532f; }
[data-page="home"] .status-pill .status-dot { width: 7px; height: 7px; background: #1f9d55; }
[data-page="home"] .status-pill[data-state="maintenance"], [data-page="home"] .status-pill[data-state="slow"], [data-page="home"] .status-pill[data-state="partial"] { background: rgba(160, 100, 0, 0.14); box-shadow: inset 0 0 0 1px rgba(160, 100, 0, 0.4); color: #6b4300; }
[data-page="home"] .status-pill[data-state="offline"] { background: rgba(168, 35, 27, 0.12); box-shadow: inset 0 0 0 1px rgba(168, 35, 27, 0.4); color: var(--nk-red-ink); }
[data-page="home"] .status-pill[data-state="maintenance"] .status-dot, [data-page="home"] .status-pill[data-state="slow"] .status-dot,
[data-page="home"] .status-pill[data-state="partial"] > .status-dot { background: #c27c00; }
[data-page="home"] .status-pill[data-state="offline"] .status-dot { background: var(--nk-red); }
[data-page="home"] .status-worlds { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); color: var(--text); }


/* ---------- sections ---------- */
.nk-sec { position: relative; margin-top: var(--sp-12); }
.nk-main > .nk-sec:first-child { margin-top: var(--sp-8); }

/* ---------- Choose your path (explore tiles) ---------- */
[data-page="home"] .ex-tile { position: relative; padding-left: 16px; background: linear-gradient(90deg, #17223a, var(--surface));
  box-shadow: 0 0 0 1px rgba(255, 204, 77, 0.16), inset 5px 0 0 var(--nk-wood-2), inset 7px 0 0 var(--nk-wood-3); }
[data-page="home"] .ex-tile:hover { background: linear-gradient(90deg, #1d2a47, var(--surface-2)); box-shadow: 0 0 0 1px rgba(255, 204, 77, 0.45), inset 5px 0 0 var(--nk-wood-2), inset 7px 0 0 var(--nk-wood-3); }
[data-page="home"] .ex-ico { border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 204, 77, 0.35); }
[data-page="home"] .ex-name { font-family: var(--nk-brush); font-weight: 400; letter-spacing: 0.02em; }

/* ---------- Server time + numbers (wooden plaques with a kunai-orange top) ---------- */
[data-page="home"] .clock-block { margin: 0; gap: var(--sp-3); }
[data-page="home"] .clock-block .clk-card { padding: 14px 18px; border: 0; border-radius: var(--blade-sm);
  background: linear-gradient(180deg, rgba(138, 85, 40, 0.16), transparent 60%), var(--surface); box-shadow: 0 0 0 1px rgba(255, 204, 77, 0.14), inset 0 3px 0 var(--accent); }
[data-page="home"] .clock-block strong { font: 700 var(--fs-xl)/1.15 var(--head); margin-top: 4px; }
[data-page="home"] .clock-block .clk-card:first-child strong { color: var(--gold); }
[data-page="home"] .clock-block small, [data-page="home"] .clock-block .clk-zone { font-size: var(--fs-xs); }
[data-page="home"] .stats > .stat, [data-page="home"] .stats > .skc-stat { box-shadow: 0 0 0 1px rgba(255, 204, 77, 0.12), inset 3px 0 0 var(--leaf); }

/* ---------- the Summoning Scroll ---------- */
.nk-summon { isolation: isolate; overflow: hidden; padding: 22px 34px 26px; border-radius: 4px;
  background: radial-gradient(circle at 88% 14%, rgba(255, 204, 77, 0.14), transparent 42%), linear-gradient(160deg, #3d1013 0%, #250a0d 55%, #150910 100%);
  box-shadow: 0 0 0 1px rgba(255, 204, 77, 0.28), inset 0 0 0 5px rgba(0, 0, 0, 0.22), var(--shadow-card); }
.nk-summon::before, .nk-summon::after { content: ""; position: absolute; top: 0; bottom: 0; width: 14px; background: var(--nk-rod-v); z-index: 0; }
.nk-summon::before { left: 0; }
.nk-summon::after { right: 0; }
.nk-summon .nk-head { --nk-stitch: rgba(255, 220, 160, 0.25); --nk-cloth-bg: linear-gradient(180deg, #8a2620 0%, #651714 55%, #4a0f0e 100%); }
.nk-summon .nk-kicker { color: #f3c88a; }
.nk-summon .nk-sub, [data-page="home"] .nk-summon .nw-when { color: #e2c7ad; }
[data-page="home"] .nk-summon .sbl-art { box-shadow: 0 0 0 1px rgba(255, 204, 77, 0.3); }
[data-page="home"] .nk-summon .sbl-card:hover .sbl-art, [data-page="home"] .nk-summon .sbl-card:focus-visible .sbl-art { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(255, 204, 77, 0.35); }
[data-page="home"] .nk-summon .mq-row-label { color: #f3dcc0; }

/* ---------- New ninja: registration cards with a gold frame and the element glow ---------- */
[data-page="home"] .nf-card { box-shadow: 0 0 0 1px rgba(255, 204, 77, 0.22), inset 0 -3px 0 var(--el, var(--accent)), 0 16px 28px -18px rgba(0, 0, 0, 0.8); }
[data-page="home"] .nf-card .nf-art { box-shadow: inset -2px 0 0 rgba(255, 204, 77, 0.25); }
[data-page="home"] .nf-card .nf-body h3 { font-family: var(--nk-brush); font-weight: 400; letter-spacing: 0.01em; }
[data-page="home"] .nf-open { color: var(--gold); }
[data-page="home"] .nf-open::after { content: ""; display: inline-block; width: 16px; height: 7px; margin-left: 6px; background: currentColor; clip-path: polygon(0 38%, 55% 38%, 55% 0, 100% 50%, 55% 100%, 55% 62%, 0 62%); }
[data-page="home"] .nf-top .nf-el { width: 24px; height: 24px; filter: drop-shadow(0 0 4px var(--el, transparent)); }

/* ---------- Mission board (the weekly rotation on a wooden board) ---------- */
[data-page="home"] .nk-board .rot-bar { margin-bottom: 4px; }
[data-page="home"] .nk-board .chip { min-height: 34px; border-radius: 2px; background: var(--nk-parchment); color: var(--nk-ink); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); font-weight: 700; }
[data-page="home"] .nk-board .chip[aria-pressed="true"] { background: var(--nk-red); color: #fff; box-shadow: 0 0 0 1px #f3c88a, 0 2px 4px rgba(0, 0, 0, 0.4); }
[data-page="home"] .nk-board .mq-row-label { display: inline-block; margin: 16px 0 8px; padding: 4px 10px; border-radius: 2px; background: var(--nk-parchment); color: var(--nk-ink);
  font: 700 0.75rem/1.3 var(--head); letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); }
[data-page="home"] .nk-board .rot-when, [data-page="home"] .nk-board .faint { color: #e8cfae; }
[data-page="home"] .nk-board .rot-line { color: #ead9c3; }
[data-page="home"] .nk-board .rot-line a, [data-page="home"] .nk-board a.mq-cap { color: var(--gold); }
[data-page="home"] .nk-board .mq-cap { color: #ead9c3; }
[data-page="home"] .nk-board .mq-cap-on { color: #7ef0a8; }
[data-page="home"] .nk-board .marquee { border-radius: 3px; background: rgba(0, 0, 0, 0.25); }

/* ---------- Game modes as mission scrolls with a rank stamp (the game's tier letters in a red seal) ---------- */
[data-page="home"] .modes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; }
[data-page="home"] .mode { position: relative; overflow: visible; margin: 7px 0; border: 0; border-radius: 2px; background: var(--nk-parchment); color: var(--nk-ink);
  box-shadow: inset 0 0 30px rgba(120, 70, 20, 0.25), inset 0 0 0 1px rgba(90, 53, 25, 0.35), 0 16px 28px -16px rgba(0, 0, 0, 0.85); }
[data-page="home"] .mode::before { content: ""; position: absolute; left: -7px; right: -7px; top: -7px; height: 12px; border-radius: 6px; background: var(--nk-rod); z-index: 2; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); }
[data-page="home"] .mode:hover { transform: translateY(-3px); color: var(--nk-ink); box-shadow: inset 0 0 30px rgba(120, 70, 20, 0.25), inset 0 0 0 1px rgba(90, 53, 25, 0.5), 0 0 0 2px rgba(255, 204, 77, 0.6), 0 20px 30px -16px rgba(0, 0, 0, 0.9); }
[data-page="home"] .mode-img { margin: 10px 10px 0; border-bottom: 0; border-radius: 2px; background: radial-gradient(circle at 50% 55%, rgba(255, 138, 31, 0.22), transparent 70%), #1a1209; box-shadow: inset 0 0 0 1px rgba(43, 29, 16, 0.6); }
[data-page="home"] .mode-body { padding: 12px 16px 16px; }
[data-page="home"] .mode-body h3 { justify-content: flex-start; flex-wrap: wrap; gap: 4px 10px; font: 400 var(--fs-md)/1.2 var(--nk-brush); color: var(--nk-red-ink); letter-spacing: 0.01em; }
[data-page="home"] .mode-body p { color: var(--nk-ink-2); font-size: var(--fs-sm); }
[data-page="home"] .mode .badge, [data-page="home"] .nk-notice .badge { background: rgba(43, 29, 16, 0.08); color: var(--nk-ink); box-shadow: inset 0 0 0 1px rgba(43, 29, 16, 0.45); font-family: var(--head); }
[data-page="home"] .mode .badge.b-ok { color: #14532d; box-shadow: inset 0 0 0 1px rgba(20, 83, 45, 0.55); }
[data-page="home"] .mode .badge.b-wip, [data-page="home"] .mode .badge.b-partial { color: #6b3a00; box-shadow: inset 0 0 0 1px rgba(107, 58, 0, 0.55); }
/* .b-test carries !important in site.css: the paper version needs it too (scoped to this page) */
[data-page="home"] .mode .badge.b-test, [data-page="home"] .nk-notice .badge.b-test { color: #5a3700 !important; background: rgba(160, 100, 0, 0.13) !important; box-shadow: inset 0 0 0 1px rgba(110, 70, 0, 0.5); }
[data-page="home"] .nk-notice .badge.b-ok { color: #14532d; box-shadow: inset 0 0 0 1px rgba(20, 83, 45, 0.55); }
[data-page="home"] .nk-notice .badge.b-wip { color: #6b3a00; box-shadow: inset 0 0 0 1px rgba(107, 58, 0, 0.55); }
/* the rank stamp: a red seal ring with the game's own rank letter inside, by the card's link */
[data-page="home"] .mode::after { content: ""; position: absolute; z-index: 3; width: 58px; height: 58px; border-radius: 50%;
  background: var(--nk-rank, none) center / 30px auto no-repeat, radial-gradient(circle, rgba(255, 245, 220, 0.95) 0 52%, transparent 53%), radial-gradient(circle, transparent 0 58%, var(--nk-red) 59% 66%, transparent 67% 72%, var(--nk-red) 73% 76%, transparent 77%);
  transform: rotate(-12deg); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); pointer-events: none; }
[data-page="home"] .mode::after { right: 2px; top: 2px; }
[data-page="home"] .mode[href*="kind=story"] { --nk-rank: url("/img/ui/tier-d.webp"); }
[data-page="home"] .mode[href*="kind=coop"], [data-page="home"] .mode[href*="kind=trials"] { --nk-rank: url("/img/ui/tier-c.webp"); }
[data-page="home"] .mode[href*="kind=emergency"] { --nk-rank: url("/img/ui/tier-b.webp"); }
[data-page="home"] .mode[href*="ninja-road"], [data-page="home"] .mode[href*="ultimate-showdown"] { --nk-rank: url("/img/ui/tier-a.webp"); }
[data-page="home"] .mode[href*="boss-raid"], [data-page="home"] .mode[href*="giant-boss-rush"], [data-page="home"] .mode[href*="phantom-castle"] { --nk-rank: url("/img/ui/tier-s.webp"); }
[data-page="home"] .modes > .skc-mode { margin: 7px 0; }

/* ---------- Your first mission (join + downloads) on a big scroll ---------- */
.nk-join { padding: 34px 36px 30px; }
.nk-join .nk-stamp { top: 22px; right: 26px; width: 74px; height: 74px; background-size: 38px auto, auto, auto; }
.nk-kicker-ink { color: var(--nk-red-ink); }
.nk-join h2 { margin: 4px 0 6px; padding-right: 84px; font: 400 clamp(1.35rem, 1.1rem + 1vw, 1.9rem)/1.15 var(--nk-brush); color: var(--nk-ink); }
.nk-join-lead { margin: 0 0 20px; color: var(--nk-ink-2); }
.nk-steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: nk; }
.nk-steps li { position: relative; padding: 16px 16px 16px 16px; border-radius: 2px; background: rgba(255, 250, 235, 0.45); box-shadow: inset 0 0 0 1px rgba(90, 53, 25, 0.3); counter-increment: nk; }
.nk-steps li::before { content: counter(nk); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 10px; border-radius: 50%; background: var(--nk-ink); color: var(--nk-paper);
  font: 400 1rem/1 var(--nk-brush); box-shadow: 0 0 0 2px var(--nk-paper), 0 0 0 3px var(--nk-ink); }
.nk-steps h3 { margin: 0 0 6px; font: 700 var(--fs-md)/1.2 var(--head); color: var(--nk-ink); }
.nk-steps p { margin: 0; color: var(--nk-ink-2); font-size: var(--fs-sm); }
.nk-steps em { font-style: normal; font-weight: 800; color: var(--nk-ink); }
[data-page="home"] .nk-note { margin: 16px 0 0; padding: 10px 14px; border: 0; border-radius: 2px; background: rgba(168, 35, 27, 0.08); box-shadow: inset 3px 0 0 var(--nk-red); color: var(--nk-ink); font-size: var(--fs-sm); }

/* ---------- Roster strips ---------- */
#roster-band #mq-cards { margin-top: var(--sp-3); }
[data-page="home"] .mq-card { box-shadow: 0 0 0 1px rgba(255, 204, 77, 0.2); }
[data-page="home"] .mq-ic img { border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 204, 77, 0.3); }

/* ---------- Notice board (patch notes + news): paper notes pinned on wood ---------- */
.nk-notice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; margin-top: var(--sp-12); padding: 4px 22px 24px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 61px), repeating-linear-gradient(180deg, rgba(255, 210, 160, 0.025) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #44270f, #2f1909); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 4px #2a1708, inset 0 0 0 5px rgba(255, 210, 160, 0.12), var(--shadow-card); }
.nk-notice > .nk-sec { margin-top: 22px; }
[data-page="home"] .nk-notice .update-list { gap: 14px; }
[data-page="home"] .nk-notice .update, [data-page="home"] .nk-notice .news-item { position: relative; border: 0; border-radius: 2px; background: var(--nk-parchment); color: var(--nk-ink);
  box-shadow: inset 0 0 22px rgba(120, 70, 20, 0.22), 0 6px 12px rgba(0, 0, 0, 0.45); }
[data-page="home"] .nk-notice .news-item { margin-bottom: 14px; padding: 18px; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; }
[data-page="home"] .nk-notice .update::before, [data-page="home"] .nk-notice .news-item::before { content: ""; position: absolute; top: -5px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff8a7a, var(--nk-red) 55%, #5a0f0b); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); }
[data-page="home"] .nk-notice .update:nth-child(odd), [data-page="home"] .nk-notice .news-item:nth-child(odd) { transform: rotate(-0.4deg); }
[data-page="home"] .nk-notice .update:nth-child(even), [data-page="home"] .nk-notice .news-item:nth-child(even) { transform: rotate(0.4deg); }
[data-page="home"] .nk-notice h3 { color: var(--nk-ink); }
[data-page="home"] .nk-notice p, [data-page="home"] .nk-notice ul, [data-page="home"] .nk-notice .news-date { color: var(--nk-ink-2); }
[data-page="home"] .nk-notice .faint { color: var(--nk-ink-3); }
[data-page="home"] .nk-notice .news-date { font: 700 var(--fs-xs)/1.3 var(--head); letter-spacing: 0.06em; text-transform: uppercase; }
[data-page="home"] .nk-notice .tag { color: var(--nk-red-ink); }
[data-page="home"] .nk-notice a:not(.nk-link) { color: var(--nk-red-ink); }
[data-page="home"] .nk-notice .skc-update, [data-page="home"] .nk-notice .skc-news { background: rgba(241, 227, 192, 0.12); }

/* ---------- Discord band ---------- */
.nk-discord { overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 28px; padding: 26px 30px; border-radius: var(--blade);
  background: radial-gradient(circle at 12% 50%, rgba(88, 101, 242, 0.25), transparent 55%), var(--surface); box-shadow: 0 0 0 1px rgba(255, 204, 77, 0.18), var(--shadow-card); }
.nk-discord-leaf { position: absolute; left: -30px; top: 50%; width: 200px; height: 200px; margin-top: -100px; color: rgba(160, 190, 255, 0.07); pointer-events: none; }
.nk-discord > div { position: relative; min-width: 0; }
.nk-discord h2 { margin: 0 0 6px; font: 400 clamp(1.2rem, 1rem + 0.8vw, 1.6rem)/1.2 var(--nk-brush); color: #fff3d6; }
.nk-discord p { margin: 0; color: var(--muted); max-width: 60ch; }
.nk-main { padding-bottom: var(--sp-12); }

/* ---------- scrolls unroll as they come into view (browsers with scroll-driven animations; others show them open) ---------- */
@supports (animation-timeline: view()) {
  .nk-join, [data-page="home"] .mode { animation: nk-unroll linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
}
@keyframes nk-unroll { from { clip-path: inset(-40px -40px calc(100% - 26px) -40px); } to { clip-path: inset(-40px -40px -40px -40px); } }
@media (prefers-reduced-motion: reduce) {
  .nk-join, [data-page="home"] .mode { animation: none; }
}

/* ---------- tablets and phones ---------- */
@media (max-width: 1100px) {
  [data-page="home"] .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nk-notice { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .nk-gate { padding-top: var(--sp-4); }
  .nk-gate-in { grid-template-columns: minmax(0, 1fr); padding: 0 12px 18px; }
  .nk-gate-in::before, .nk-gate-in::after { width: 12px; }
  .nk-gate-art { grid-column: 1; grid-row: 1; min-height: 0; aspect-ratio: 800 / 267; }
  .nk-gate-art::after { background: linear-gradient(0deg, rgba(11, 18, 34, 0.6), transparent 35%); }
  .nk-gate-plate { grid-column: 1; grid-row: 2; margin: -14px 8px 0; padding: 22px 18px 20px; }
  .nk-logo { display: none; }
  .nk-cta { display: grid; grid-template-columns: minmax(0, 1fr); }
  .nk-btn { width: 100%; }
}
@media (max-width: 760px) {
  .nk-sec { margin-top: var(--sp-10); }
  .nk-summon { padding: 18px 22px 20px; }
  .nk-summon::before, .nk-summon::after { width: 9px; }
  .nk-join { padding: 26px 18px 22px; }
  .nk-join .nk-stamp { top: 14px; right: 12px; width: 60px; height: 60px; background-size: 30px auto, auto, auto; }
  .nk-join h2 { padding-right: 62px; }
  .nk-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  [data-page="home"] .modes { grid-template-columns: minmax(0, 1fr); }
  .nk-notice { padding: 2px 12px 18px; margin-left: calc(-1 * min(var(--gutter), 8px)); margin-right: calc(-1 * min(var(--gutter), 8px)); }
  [data-page="home"] .nk-notice .news-item { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px; }
  .nk-discord { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; }
  .nk-lintel-sign { padding: 6px 12px; gap: 8px; }
  .nk-lintel { margin-left: 0; margin-right: 0; }
  .nk-lintel::before { left: -8px; right: -8px; }
  [data-page="home"] .ex-tile { padding-left: 14px; }
}
@media (max-width: 560px) {
  [data-page="home"] .ex-grid { grid-template-columns: minmax(0, 1fr); }
  [data-page="home"] .ex-tile { align-items: center; }
}
@media (max-width: 430px) {
  .nk-lintel-t { font-size: 0.85rem; }
  [data-page="home"] .mode::after { width: 50px; height: 50px; background-size: 26px auto, auto, auto; }
}

/* ---------- phone + tablet pass (owner request 2026-10-16: "it needs to be mobile friendly"), checked in Chrome mobile
   emulation at 320 / 360 / 390 / 430 / 768 px: body text 14 px or more (captions 13 px), tap targets 44 px or more,
   a shorter gate hero, the join stamp clear of the text. ---------- */
@media (max-width: 899px) {
  /* type: the page's secondary text at 14 px, captions at 13 px (header and footer keep the site sizes) */
  .nk-gate, .nk-main { --fs-sm: 0.875rem; --fs-xs: 0.8125rem; }
  .nk-kicker { font-size: 0.75rem; }
  .nk-sub, [data-page="home"] .hub-meta, .nk-steps p, [data-page="home"] .mode-body p, .nk-discord p,
  [data-page="home"] .nf-src, [data-page="home"] .nf-card .nf-title, [data-page="home"] .nk-note, [data-page="home"] .ex-line { font-size: 0.875rem; }
  [data-page="home"] .status-pill { font-size: 0.75rem; }
  .nk-gate { padding-top: var(--sp-3); }
  /* tablets: the four hero buttons as a 2 x 2 grid instead of four full-width bars */
  .nk-cta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nk-cta > .nk-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* tap targets */
  .nk-link, .nk-head .nk-link { min-height: 44px; font-size: 0.8125rem; }
  [data-page="home"] .nk-board .chip { min-height: 44px; padding: 0 16px; }
  [data-page="home"] .nf-open { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: -10px; padding-top: 0; font-size: 0.8125rem; }
  [data-page="home"] .nf-link { display: inline-block; padding: 8px 0; margin: -8px 0; }
  [data-page="home"] .nk-notice .news-item li:last-child > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 560px) {
  .nk-cta { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .nk-gate-in { padding: 0 10px 14px; }
  .nk-gate-plate { margin: -12px 4px 0; padding: 18px 16px 18px; }
  .nk-gate-plate h1 { font-size: clamp(1.45rem, 1.05rem + 2.2vw, 1.75rem); }
  [data-page="home"] .status-pill { margin-bottom: 10px; }
  .nk-lead { margin: 10px 0 16px; }
  .nk-lintel-sign { padding: 6px 12px; }
}
@media (max-width: 760px) {
  /* the join scroll's D stamp: keep the kicker and the title clear of it */
  .nk-join .nk-kicker-ink { padding-right: 66px; }
  .nk-join h2 { padding-right: 66px; }
  /* join steps: the number seal beside the heading, not on a line of its own */
  .nk-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 14px; }
  .nk-steps li::before { grid-row: 1; margin: 0; }
  .nk-steps h3 { grid-column: 2; margin: 0; }
  .nk-steps p { grid-column: 1 / -1; margin-top: 8px; }
}
@media (max-width: 400px) {
  [data-page="home"] .clock-block .clk-card { padding: 12px 12px; }
  [data-page="home"] .clock-block strong { font-size: 1.15rem; }
  .nk-join .nk-stamp { width: 52px; height: 52px; background-size: 26px auto, auto, auto; }
  .nk-join .nk-kicker-ink, .nk-join h2 { padding-right: 56px; }
  /* section heads on the smallest phones: a smaller plate and band so the kicker stays on one line */
  .nk-plate { width: 50px; height: 40px; }
  .nk-plate svg { width: 24px; height: 24px; }
  .nk-head-t { margin-left: -18px; padding: 6px 22px 6px 26px; }
  .nk-kicker { letter-spacing: 0.08em; }
}