@font-face {
  font-family: "Nis Display";
  src: url("nis-display.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper: #f7f2e6;
  --ink: #242f27;
  --muted: #50594e;
  --green: #264940;
  --line: #d0c8b7;
  --rust: #963e2c;
  --rust-deep: #782d20;
  --sea: #173a36;
  --cream: #fffaf0;
  --display: "Nis Display", "Songti SC", "Noto Serif CJK SC", SimSun, serif;
}

body { background: #d5d9c7; }
body::before { background-position: center; background-size: cover; }
body > header, body > main, body > footer { max-width: 1440px; }
body > header, body > main { background: var(--paper); }
.shell { width: calc(100% - 96px); max-width: 1232px; }
.skip-link { position: absolute; z-index: 5; top: 8px; left: 8px; padding: 12px; background: var(--cream); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.nav { min-height: 69px; }
.brand small { font-size: 11px; }
.nav nav { gap: clamp(15px, 3vw, 42px); }
.nav nav a { display: inline-flex; align-items: center; min-height: 44px; }
.nav nav a:hover { color: var(--rust); text-underline-offset: 5px; }
.version { border: 0; border-left: 1px solid var(--line); border-radius: 0; padding-left: 16px; color: var(--muted); font: 600 11px/1.4 system-ui, sans-serif; }

.hero { color: var(--ink); background: #eee7d7; border-bottom: 1px solid var(--line); }
.hero-inner {
  grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr);
  min-height: 0;
  gap: clamp(28px, 5vw, 78px);
  padding-block: clamp(40px, 4vw, 62px);
}
.hero h1, .section h2, .rajika-header h2 { font-family: var(--display); font-weight: 700; letter-spacing: .015em; }
.hero h1 { margin: 0; font-size: clamp(54px, 6.65vw, 102px); line-height: 1.07; }
.intro { max-width: 22em; margin: 23px 0; color: var(--muted); line-height: 1.85; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 21px; }
.hero-actions a { display: inline-flex; align-items: center; min-height: 46px; }
.hero .cta { border-radius: 3px; background: var(--rust); color: var(--cream); gap: 20px; }
.hero .cta:hover { background: var(--rust-deep); }
.hero-lucky-link { gap: 5px; color: var(--rust-deep); font-size: 14px; font-weight: 650; text-decoration: underline; text-underline-offset: 4px; }
.hero-index { display: flex; flex-wrap: wrap; gap: 6px 15px; margin-top: 24px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.hero-index strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.map-plate { margin: 0; padding: 8px 8px 0; border: 1px solid #c7baa0; background: var(--cream); box-shadow: 0 12px 24px #51412618; }
.map-scene { position: relative; isolation: isolate; }
.atlas-map { display: block; width: 100%; aspect-ratio: 1.62; object-fit: cover; }
.map-coordinate { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 38px; padding: 5px; border: 1px solid #f4e9c780; background: #173a36dd; color: var(--cream); font: 12px/1.2 ui-monospace, monospace; }
.map-coordinate b { font-size: 18px; }
.map-specimen { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 9px; padding: 4px 12px 4px 6px; border: 1px solid #e0cf9f; border-radius: 3px; background: #213932; color: var(--cream); text-align: left; }
.map-specimen:hover { background: #335548; }
.map-specimen img { width: 54px; height: 50px; object-fit: contain; image-rendering: pixelated; }
.map-specimen small, .map-plate figcaption small { font: 600 11px/1.3 ui-monospace, monospace; letter-spacing: .06em; }
.map-specimen small { display: block; color: #ebd6a4; }
.map-specimen strong { display: block; margin-top: 3px; }
.map-specimen strong span { margin-left: 7px; color: #ebd6a4; }
.map-plate figcaption { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 7px; font-weight: 750; }
.map-plate figcaption small { color: var(--muted); margin-left: 7px; }
.map-plate .map-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-left: 0; color: var(--rust-deep); white-space: nowrap; }

.section { padding-block: clamp(46px, 6vw, 86px); }
.section h2, .rajika-header h2 { font-size: clamp(35px, 4.6vw, 59px); }
.section-head { margin-bottom: 19px; }
.section-head p { margin-top: 9px; }
#atlas { scroll-margin-top: 0; padding-top: clamp(46px, 4.4vw, 64px); }
.edition-filters { margin: 10px 0 0; }
.outline, .pager button { background: var(--cream); border-color: var(--line); border-radius: 4px; }
.filters { padding: 14px; border-color: var(--line); border-radius: 5px; background: #ebe5d8; }
.filter-row label { background: var(--cream); border-color: var(--line); border-radius: 4px; }
.filter-row input, .filter-row select { min-height: 44px; }
.chip { min-height: 36px; border-color: var(--line); background: var(--cream); }
.chip:hover { border-color: var(--green); }
.results { padding-top: 10px; border-top: 1px solid var(--line); }
.cards { gap: 16px; }
.card { border-radius: 5px; border-color: var(--line); background: var(--cream); }
.card:hover { border-color: #8d8b70; box-shadow: 0 4px 12px #54472f18; }
.art {
  background:
    radial-gradient(ellipse at 50% 71%, #b8ba9270, transparent 58%),
    repeating-linear-gradient(90deg, transparent 0 23px, #857b6316 23px 24px),
    repeating-linear-gradient(0deg, transparent 0 23px, #857b6316 23px 24px),
    #ece8d8;
}
.compare-toggle { min-height: 32px; background: var(--cream); border-color: var(--line); }
.card-info { border-top: 1px solid var(--line); }
.family, .place { color: var(--muted); }

.rajika-section { background: var(--sea); color: var(--cream); padding-block: clamp(48px, 6vw, 84px); }
.rajika-header p:not(.rajika-kicker), .lucky-results-head > span, .storage-status { color: #d0dcd2; }
.rajika-header > a { display: inline-flex; align-items: center; min-height: 44px; color: #f6dfaa; }
.rajika-layout { border: 1px solid #89a19a66; border-radius: 5px; background: #1d443f; box-shadow: none; }
.lucky-ticket, .lucky-ticket:hover {
  margin: 0;
  min-height: 330px;
  border: 0;
  border-right: 1px solid #89a19a66;
  border-radius: 0;
  background: radial-gradient(ellipse at 50% 55%, #4b6654, #193833 75%);
  box-shadow: none;
}
.lucky-ticket:before { inset: 12px; border-color: #e1c99255; border-radius: 1px; }
.lucky-ticket:hover:before { border-color: #e1c992b0; }
.ticket-pack-art { height: 265px; flex: none; margin: auto 0; }
.draw-actions button { min-height: 46px; }
.lucky-collection, .lucky-empty { border-color: #89a19a66; border-radius: 5px; background: #234842; color: var(--cream); }
.lucky-empty strong, .lucky-empty span, .lucky-collection small, .lucky-collection summary b { color: #d8e3da; }
.rajika-section .lucky-card { color: var(--ink); }
.lucky-empty { padding: 14px; text-align: center; }
.rajika-section .collection-grid > p { color: #d8e3da; }
.rajika-section .lucky-card-top, .rajika-section .lucky-card-foot { color: #485c47; font-size: 11px; }
.rajika-section .lucky-card-top b { font-size: 19px; }
.rajika-section .lucky-card-foot span { color: var(--rust-deep); }
.rajika-section .ticket-label, .summon-brand small { font-size: 11px; }
.summon-heading .summon-stage-label { color: #d7c18d; font: 11px/1.4 ui-monospace, monospace; letter-spacing: .1em; margin: 9px 0 0; }

.guide { background: #eee7d7; border-bottom: 1px solid var(--line); }
.guides { gap: 22px; }
.guides article { padding: 15px 0 0; border: 0; border-top: 1px solid #a69476; border-radius: 0; background: transparent; }
.guides article > span { color: var(--rust); }
.sources a { text-underline-offset: 4px; }
body > footer { background: #243c32; color: var(--cream); }

@media (max-width: 960px) {
  .shell { width: calc(100% - 56px); }
  .hero-inner { gap: 26px; }
  .hero h1 { font-size: clamp(50px, 7.7vw, 73px); }
  .atlas-map { aspect-ratio: 1.26; }
}
@media (max-width: 720px) {
  .shell { width: calc(100% - 36px); }
  .nav { min-height: 60px; gap: 12px; }
  .nav nav { gap: 14px; font-size: 13px; }
  .nav nav a:nth-child(n+3):not(.mobile-nav), .nav .version { display: none; }
  .hero-inner { grid-template-columns: 1fr; gap: 22px; padding-block: 30px; }
  .hero h1 { font-size: clamp(48px, 11vw, 73px); }
  .intro { margin-block: 13px 16px; font-size: 14px; }
  .hero-index { margin-top: 15px; }
  .atlas-map { aspect-ratio: 1.55; }
  .map-plate { padding: 5px 5px 0; }
  .map-coordinate { top: 7px; right: 7px; width: 30px; }
  .map-specimen { left: 6px; bottom: 6px; }
  .map-specimen img { width: 40px; height: 40px; }
  .map-plate figcaption small { display: none; }
  .cards { gap: 10px; }
  .chip { min-height: 40px; padding-inline: 9px; }
  .rajika-layout { grid-template-columns: minmax(0, 1fr); }
  .lucky-ticket, .lucky-ticket:hover { min-height: 262px; border-right: 0; border-bottom: 1px solid #89a19a66; }
  .ticket-pack-art { height: 206px; }
  .lucky-controls { padding: 21px 16px; }
  .draw-actions button { min-width: 0; flex: 1; gap: 7px; padding-inline: 10px; }
}
@media (max-width: 440px) {
  .filter-row label:not(.search) { gap: 4px; padding-inline: 5px; }
  .filter-row label:not(.search) span { font-size: 11px; }
  .filter-row select { padding-inline: 0; }
  .section-head p { font-size: 13px; }
}