/* The village art is authored at 1×. All image buckets below are integer multiples. */
:root { --night:#203c36; --night-2:#2c473d; --paper:#f4eddb; --paper-2:#e8ddc3; --ink:#354338; --amber:#edbf76; --brick:#a06440; --ember:#ffe3a1; --mist:#b8c6b2; --line-dark:#4e6452; --line-paper:#cfbf9e; --shadow-pixel:3px 3px 0 #b8a680; }
html,body { background:var(--night); }
body { font-size:15px; }
h1,h2,h3 { word-break:keep-all; }
h2 { font-family:var(--font-body); font-size:42px; line-height:1.35; font-weight:800; letter-spacing:-.045em; }
.pixel-art { image-rendering:pixelated; image-rendering:crisp-edges; }
.skip-link { position:fixed; top:-80px; left:16px; padding:12px 20px; color:var(--ink); background:var(--paper); z-index:100; }
.skip-link:focus { top:12px; }
.site-header { background:#203832; border-bottom:1px solid #53654f; }
.header-inner { min-height:78px; gap:32px; }
.brand-sprite { width:32px; height:32px; flex-shrink:0; }
.brand strong { font-size:19px; letter-spacing:0; }
.brand small { font-size:9px; color:#b8c6b2; }
.nav-link { font-family:var(--font-body); font-size:12px; font-weight:600; }
.nav-link[aria-current="page"] { background:#334d3e; border-bottom-color:var(--amber); }
.auth-status { color:#c0cab8; }
.button { font-family:var(--font-body); font-size:13px; font-weight:750; min-height:46px; border-width:1px; box-shadow:0 3px 0 #796546; padding:12px 20px; }
.button-amber { background:#edbf76; color:#354033; border-color:#f9dca4; }
.button:hover { transform:translateY(-2px); }
.button:active { transform:translateY(1px); }
.button-small { min-height:40px; padding:8px 15px; }
.text-link { font-size:13px; font-family:var(--font-body); }
.eyebrow { font-family:var(--font-body); color:var(--amber); font-size:10px; font-weight:700; letter-spacing:.19em; }
.village-container { width:min(1160px,calc(100% - 64px)); margin-inline:auto; }
.village-hero { position:relative; height:820px; isolation:isolate; overflow:hidden; background:#243d40; }
.village-landscape { position:absolute; width:1920px; height:880px; max-width:none; left:calc(50% - 960px); bottom:-56px; z-index:-1; }
.village-title { text-align:center; position:relative; margin:auto; padding-top:56px; width:min(740px,calc(100% - 32px)); }
.village-kicker { color:#d8dac4; font-family:var(--font-pixel); font-size:12px; margin:0 0 14px; letter-spacing:.1em; }
.village-title h1 { font-family:var(--font-body); font-size:104px; line-height:1.05; letter-spacing:-.075em; font-weight:900; margin:0; color:#ffedc3; text-shadow:0 3px 0 #967f55,0 6px 0 #263f3a; }
.village-title h1 span { display:block; font-family:var(--font-pixel); font-size:16px; font-weight:400; letter-spacing:.16em; margin-top:19px; text-shadow:0 2px 0 #263f3a; }
.village-intro { color:#e3e2cc; font-size:14px; margin:20px 0; }
.mobile-break { display:none; }
.village-actions { display:flex; justify-content:center; align-items:center; gap:26px; }
.village-actions .button { padding:13px 27px; }
.village-tour { display:inline-flex; gap:18px; align-items:center; font-size:13px; text-decoration:none; padding:12px 0; color:#f4eddb; border-bottom:1px solid #829080; }
.village-caption { position:absolute; bottom:22px; left:32px; right:32px; display:flex; align-items:center; justify-content:space-between; font-size:10px; color:#efe7cb; }
.village-caption>span { display:flex; gap:12px; align-items:center; background:#203c36; padding:8px 12px; }
.village-caption b { font-size:11px; font-family:var(--font-pixel); font-weight:400; }
.village-caption i { display:inline-block; width:5px; height:5px; background:#e9c37d; }
.motion-toggle { background:#203c36; border:1px solid #748263; color:#f4eddb; font-size:10px; padding:9px 12px; min-height:36px; }
.motion-toggle:disabled { opacity:1; }
.village-spark { position:absolute; width:3px; height:3px; background:#ffe4a3; box-shadow:4px -9px 0 #bfa777; pointer-events:none; animation:firefly 5s steps(5,end) infinite; }
.spark-a { left:calc(50% - 242px); top:65%; }
.spark-b { left:calc(50% + 211px); top:76%; animation-delay:-2s; }
.spark-c { left:calc(50% + 124px); top:51%; animation-delay:-4s; }
@keyframes firefly { 0%,100% { translate:0 0; opacity:0; } 30% { opacity:1; } 65% { opacity:1; } 90% { translate:4px -16px; opacity:0; } }
html[data-village-motion="paused"] .village-spark { animation:none; opacity:.55; }
.village-ribbon { display:flex; justify-content:center; align-items:center; gap:58px; padding:23px 24px; background:#1d342b; border-top:1px solid #6c7754; color:#c9d1b9; font-size:12px; }
.village-ribbon b { font-family:var(--font-pixel); color:#f4d496; margin-right:7px; font-size:18px; }
.village-ribbon i { color:#879575; font-size:10px; font-style:normal; }
.defenders-section { background:#f4eddb; color:var(--ink); padding:84px 0 54px; border-bottom:1px solid #c5bb9e; }
.village-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:42px; }
.village-section-heading h2 { margin:10px 0 0; }
.village-section-heading>p { font-size:14px; line-height:1.9; color:#6d715c; margin-bottom:5px; }
.defenders-section .eyebrow { color:#8e6c43; }
.defender-shelf { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.defender { min-width:0; }
.defender-stage { height:212px; background:#e5dfc7; position:relative; display:grid; place-items:center; border:1px solid #d1c6aa; border-bottom:6px solid #a28c65; }
.defender:nth-child(2) .defender-stage { background:#e6dcc5; }
.defender:nth-child(3) .defender-stage { background:#dce1ce; }
.defender:nth-child(4) .defender-stage { background:#e6dcd0; }
.defender-stage:after { content:''; position:absolute; bottom:28px; width:72px; height:6px; background:#b7b596; box-shadow:8px -3px 0 #c8c6a8,-8px -3px 0 #c8c6a8; }
.bread-portrait { width:auto; height:auto; position:relative; z-index:1; }
.defender:nth-child(1) .bread-portrait { width:96px; height:96px; }
.defender:nth-child(2) .bread-portrait { width:104px; height:96px; }
.defender:nth-child(3) .bread-portrait,.defender:nth-child(4) .bread-portrait { width:96px; height:96px; }
.specimen-number { position:absolute; left:14px; top:12px; font-size:9px; color:#786b4b; font-family:var(--font-pixel); }
.specimen-star { position:absolute; right:14px; bottom:15px; color:#9f8a61; font-size:17px; }
.defender-label { padding:19px 4px 5px; }
.defender-label>span { color:#80785e; font-size:10px; }
.defender-label h3 { font-family:var(--font-pixel); font-weight:700; font-size:18px; margin:5px 0 7px; }
.defender-label p { font-size:12px; color:#6d715c; margin:0; }
.shelf-link { display:flex; justify-content:center; gap:24px; width:fit-content; margin:38px auto 0; font-size:13px; color:#526348; text-decoration:none; border-bottom:1px solid #a6af91; padding:8px; }
.craft-section { padding-block:90px; display:grid; grid-template-columns:1fr 1.3fr; align-items:center; gap:60px; }
.craft-copy h2 { margin:16px 0 23px; }
.craft-copy>p:not(.eyebrow) { color:#bfcbb6; max-width:330px; font-size:14px; line-height:1.95; margin-bottom:25px; }
.craft-board { border:1px solid #819070; padding:10px; background:#344b3e; box-shadow:6px 6px 0 #172e29; min-width:0; }
.scene-window { position:relative; height:352px; overflow:hidden; }
.workbench-art { position:absolute; width:768px; height:352px; max-width:none; left:calc(50% - 384px); }
.recipe-steps { display:flex; gap:12px; list-style:none; padding:16px 4px 8px; justify-content:space-between; margin:0; font-size:11px; color:#e5e3cb; }
.recipe-steps b { color:#ebc57d; margin-right:5px; font-size:10px; }
.journey-section { background:#dce0cb; color:#344b3e; padding:64px 0; }
.journey-inner { display:grid; grid-template-columns:1.2fr 1fr; gap:64px; align-items:center; }
.journey-map { height:320px; overflow:hidden; position:relative; border:8px solid #efead6; outline:1px solid #b3b798; box-shadow:5px 5px 0 #b0b598; }
.journey-map img { position:absolute; width:1120px; height:480px; max-width:none; left:calc(50% - 560px); top:calc(50% - 240px); }
.map-label { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); background:#f1e7c9; box-shadow:3px 3px 0 #576143; padding:8px 14px; font-family:var(--font-pixel); font-size:10px; white-space:nowrap; color:#4c573e; }
.journey-copy .eyebrow { color:#697d56; }
.journey-copy h2 { font-size:36px; margin:13px 0 20px; }
.journey-copy>p:not(.eyebrow) { font-size:14px; line-height:2; color:#627256; margin-bottom:24px; }
.page-section { padding-block:62px; }
.section-heading h2 { font-size:32px; }
.section-heading { margin-bottom:28px; }
.section-records { padding-top:78px; }
.stat-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
.stat-card,.state-card,.guide-card { box-shadow:none; border:1px solid #d3c39e; background:#f1e8d0; }
.stat-card { padding:18px; }
.stat-card h3,.state-title { font-family:var(--font-body); font-size:16px; line-height:1.6; }
.stat-card .state-kicker { padding-top:46px; background:transparent url('/assets/village/dona.svg') top left / 48px 48px no-repeat; color:#765c39; }
.stat-card:nth-child(2) .state-kicker,.stat-card:nth-child(3) .state-kicker { background-image:url('/assets/village/tussin.svg'); background-size:32px 32px; }
.stat-card:nth-child(4) .state-kicker { background-image:url('/assets/village/baguette.svg'); }
.guide-card { padding:0 22px 22px; overflow:hidden; }
.guide-card:nth-child(n) { transform:none; }
.guide-scene { height:150px; margin:0 -22px 23px; position:relative; overflow:hidden; background:#65795b; border-bottom:3px solid #ad956d; }
.guide-scene img { position:absolute; width:640px; height:240px; max-width:none; left:calc(50% - 320px); top:calc(50% - 120px); }
.card-title { font-family:var(--font-body); font-size:20px; line-height:1.55; letter-spacing:-.025em; }
.card-description { font-size:13px; line-height:1.8; }
.community-preview .state-card { position:relative; padding-left:106px; min-height:155px; background:#f1e8d0 url('/assets/village/tussin.svg') 23px center / 64px 64px no-repeat; }
.patch-feature { background:#c5ab79; color:#304234; border:1px solid #dac798; padding:36px!important; }
.patch-feature h2 { font-size:28px; }
.patch-feature .eyebrow { color:#594c33; }
.patch-stamp { transform:none; background:#426149; color:#efe4c4; border:2px solid #e4d6b4; box-shadow:3px 3px 0 #8f805b; }
.launch-section { position:relative; padding-block:90px; }
.launch-copy h2 { font-size:43px; }
.store-link { border:1px solid #7c8d6b; background:#2b4739; box-shadow:3px 3px 0 #172e29; }
.store-link strong { font-family:var(--font-body); }
.site-footer { border-top:1px solid #657554; padding-block:32px; }
/* Secondary destinations share the landscape and retain their functional forms. */
.page-intro { position:relative; isolation:isolate; min-height:340px; }
.page-intro:after { content:''; position:absolute; z-index:-1; right:-90px; top:30px; width:420px; height:270px; background:url('/assets/village/adventure-world.webp') center / 560px 240px no-repeat; opacity:.32; }
.page-intro h1 { max-width:810px; font-family:var(--font-body); font-size:48px; letter-spacing:-.04em; line-height:1.35; }
.page-intro>p:not(.eyebrow) { max-width:650px; }
.page-intro h1 em { color:#e8c383; }
.records-panel,.community-compose,.community-thread { box-shadow:none; }
:focus-visible { outline:3px solid #d39337; }
@media(min-width:1921px){ .village-landscape { width:2880px; height:1320px; left:calc(50% - 1440px); bottom:-220px; } .village-hero { height:1100px; } }
@media(max-width:1100px){ .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .craft-section,.journey-inner { gap:30px; } .header-inner { gap:18px; } .defender-stage { height:185px; } .village-section-heading>p { font-size:13px; } }
@media(max-width:960px){ .village-hero { height:770px; } .village-title { padding-top:46px; } .village-title h1 { font-size:90px; } .header-inner { padding-block:12px; } .site-nav { margin-top:0; } .nav-link { padding:8px 12px; } .village-ribbon { gap:30px; } .craft-section { grid-template-columns:1fr; } .craft-copy { max-width:620px; } .craft-copy>p:not(.eyebrow) { max-width:550px; } .craft-board { max-width:768px; } .journey-inner { grid-template-columns:1fr 1fr; gap:30px; } .journey-copy h2 { font-size:30px; } }
@media(max-width:680px){
 .village-container { width:calc(100% - 40px); } .header-inner { width:calc(100% - 32px); gap:9px 16px; } .brand strong { font-size:17px; } .brand small { font-size:8px; } .nav-list { gap:3px; } .nav-link { font-size:11px; padding:8px 9px; } .nav-list li:first-child .nav-link { padding-left:7px; } .header-account .button { min-height:36px; }
 .village-hero { height:675px; } .village-landscape { width:960px; height:440px; left:calc(50% - 480px); bottom:15px; } .village-title { padding-top:37px; } .village-title h1 { font-size:76px; } .village-title h1 span { font-size:12px; margin-top:14px; } .village-kicker { font-size:10px; letter-spacing:0; } .village-intro { font-size:12px; line-height:1.85; margin:20px 0; } .mobile-break { display:block; } .village-actions { gap:22px; } .village-actions .button { font-size:12px; padding:12px 20px; } .village-tour { font-size:11px; gap:12px; }
 .village-caption { bottom:15px; left:12px; right:12px; gap:6px; } .village-caption>span { gap:7px; font-size:8px; padding:7px 8px; } .village-caption b { font-size:9px; } .motion-toggle { font-size:8px; padding:6px 8px; min-height:36px; } .spark-a { left:calc(50% - 85px); top:67%; } .spark-b { left:calc(50% + 119px); top:80%; } .spark-c { left:calc(50% + 47px); top:58%; }
 .village-ribbon { gap:14px; font-size:9px; padding:20px 10px; } .village-ribbon b { font-size:13px; margin-right:3px; } .village-ribbon i { font-size:7px; }
 .defenders-section { padding:50px 0 38px; } .village-section-heading { display:block; margin-bottom:28px; } h2 { font-size:32px; } .village-section-heading>p { margin-top:19px; font-size:12px; } .defender-shelf { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 14px; } .defender-stage { height:161px; } .defender-stage:after { bottom:16px; } .specimen-number { font-size:8px; top:9px; left:10px; } .defender-label { padding:13px 0 0; } .defender-label>span { font-size:9px; } .defender-label h3 { font-size:15px; } .defender-label p { font-size:10px; word-break:keep-all; } .shelf-link { font-size:12px; margin-top:30px; }
 .craft-section { padding-block:50px; gap:25px; } .craft-copy h2 { margin:12px 0 17px; } .craft-copy>p:not(.eyebrow) { font-size:13px; } .scene-window { height:176px; } .workbench-art { width:384px; height:176px; left:calc(50% - 192px); } .craft-board { padding:7px; } .recipe-steps { font-size:9px; gap:3px; padding:13px 0 5px; } .recipe-steps b { font-size:9px; margin-right:2px; }
 .journey-section { padding:40px 0; } .journey-inner { grid-template-columns:1fr; gap:33px; } .journey-map { height:225px; border-width:5px; } .journey-map img { width:560px; height:240px; left:calc(50% - 280px); top:calc(50% - 120px); } .journey-copy h2 { font-size:30px; } .journey-copy>p:not(.eyebrow) { font-size:13px; } .map-label { font-size:9px; }
 .page-section { padding-block:43px; } .section-heading h2 { font-size:28px; } .section-heading { gap:14px; margin-bottom:24px; } .stat-grid { grid-template-columns:1fr; } .stat-card { padding:18px; } .guide-scene { height:150px; } .guide-card { padding-bottom:18px; } .guide-grid { gap:22px; } .card-title { font-size:18px; } .community-preview .state-card { padding-left:85px; background-position:12px center; } .patch-feature { padding:25px!important; } .patch-feature h2 { font-size:26px; } .launch-copy h2 { font-size:34px; } .launch-section { padding-block:54px; } .page-intro { min-height:330px; } .page-intro h1 { font-size:34px; } .page-intro:after { top:70px; right:-160px; opacity:.17; }
}
@media(prefers-reduced-motion:reduce){ .village-spark { animation:none; } .button:hover,.button:active { transform:none; } }
.defenders-section h2,.journey-copy h2 { color:#354b3c; }
.patch-feature h2,.patch-feature h2 em { color:#304234; }
.defender-stage,.defender-label { transition:background-color .2s; }
@media(min-width:961px){ .section-guides .guide-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* High-density environment illustrations are a separate layer from native game sprites. */
.village-hero { height:945px; background:#0e2533; }
.village-landscape.illustration-art { width:1536px; height:1024px; left:calc(50% - 768px); top:0; bottom:auto; image-rendering:auto; }
.village-title { padding-top:48px; }
.village-title h1 { color:#fff0c8; }
.village-intro { color:#e2e7dd; }
.scene-window { height:auto; aspect-ratio:3/2; }
.workbench-art.illustration-art { position:static; display:block; width:100%; height:auto; max-width:100%; image-rendering:auto; }
@media(min-width:1537px){ .village-hero { height:min(1200px,66.6667vw); } .village-landscape.illustration-art { width:100%; height:auto; left:0; } }
@media(max-width:960px) and (min-width:681px){ .village-hero { height:925px; } .village-title { padding-top:42px; } }
@media(max-width:680px){ .village-hero { height:754px; } .village-landscape.illustration-art { width:768px; height:512px; max-width:none; left:calc(50% - 434px); top:auto; bottom:16px; } .village-title { padding-top:32px; } .village-title h1 { font-size:76px; } .village-caption { bottom:13px; } .spark-a { top:74%; } .spark-b { top:85%; } .spark-c { top:65%; } }
.journey-map { height:auto; aspect-ratio:3/2; }
.journey-map img.illustration-art { position:static; width:100%; height:100%; object-fit:cover; max-width:100%; image-rendering:auto; }
.guide-scene img.illustration-art { width:100%; height:100%; left:0; top:0; object-fit:cover; image-rendering:auto; }
.guide-card:first-child .guide-scene img.illustration-art { object-position:center 67%; }
.page-intro:after { background-image:url('/assets/village/adventure-world.webp'); background-size:cover; opacity:.25; width:480px; height:300px; }
@media(max-width:680px){ .page-intro:after { opacity:.13; } }

@media(max-width:680px){ .village-landscape.illustration-art { z-index:-2; } .village-hero:after { content:""; position:absolute; z-index:-1; left:0; right:0; bottom:448px; height:80px; background:linear-gradient(#0e2533,transparent); pointer-events:none; } }
.record-card { padding:20px; }
.record-card:before { content:''; display:block; height:40px; margin-bottom:12px; background:url('/assets/village/dona.svg') left center / 48px 48px no-repeat; }
.record-card:nth-child(2):before,.record-card:nth-child(3):before { background-image:url('/assets/village/tussin.svg'); background-size:32px 32px; }
.record-card:nth-child(4):before { background-image:url('/assets/village/baguette.svg'); }
.page-intro:after { opacity:1; width:390px; height:260px; right:0; top:60px; border:5px solid #52644d; box-shadow:5px 5px 0 #172e29; }
.page-intro h1 { max-width:750px; }
body[data-page="guide"] .page-intro:after,body[data-page="patch-notes"] .page-intro:after { background-image:url('/assets/village/bakery-workshop.webp'); }
body[data-page="community"] .page-intro:after { background-image:url('/assets/village/dawn-bakery.webp'); background-position:center 65%; }
@media(max-width:1100px) and (min-width:681px){ .page-intro:after { position:relative; display:block; width:100%; height:230px; top:auto; right:auto; margin-top:28px; } }
@media(max-width:680px){
 .page-intro:after { position:relative; display:block; width:100%; height:200px; top:auto; right:auto; margin-top:28px; opacity:1; }
 #home-records { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:14px; scrollbar-color:#c5b082 #354f3d; }
 #home-records>.record-card,#home-records>.state-card { flex:0 0 calc(100% - 28px); scroll-snap-align:start; min-width:0; }
}
/* Guide cards use native links; detail URLs survive refresh and browser history. */
.guide-card-link { text-decoration:none; transition:border-color .15s,box-shadow .15s; }
.guide-card-link:hover { border-color:#edbf76; box-shadow:0 0 0 2px #edbf76; }
.guide-card-link:focus-visible { outline:3px solid #edbf76; outline-offset:5px; }
main>.guide-detail { width:min(860px,calc(100% - 48px)); padding-block:45px 72px; }
.guide-back { display:inline-block; margin-bottom:32px; padding:8px 0; }
.guide-detail-meta { margin-bottom:14px; }
.guide-detail-title { max-width:780px; font-family:var(--font-body); font-size:46px; line-height:1.35; letter-spacing:-.04em; margin-bottom:18px; }
.guide-detail-lede { color:#c4cdbb; font-size:16px; line-height:1.8; max-width:710px; }
.guide-detail-art { display:block; width:100%; height:300px; object-fit:cover; object-position:center 62%; margin:30px 0 0; border:1px solid #8a9775; }
.guide-detail-body { background:#f4eddb; color:#354338; padding:40px 48px; }
.guide-step + .guide-step { margin-top:34px; padding-top:30px; border-top:1px solid #cbbf9f; }
.guide-step h2,.guide-checklist h2 { font-family:var(--font-body); font-size:24px; line-height:1.5; letter-spacing:-.025em; color:#354b3c; margin-bottom:16px; }
.guide-step p { line-height:1.95; word-break:keep-all; overflow-wrap:anywhere; margin-bottom:14px; }
.guide-step p:last-child { margin-bottom:0; }
.guide-checklist { padding:24px; margin-top:34px; background:#e3e4ce; border-left:3px solid #77855d; }
.guide-checklist h2 { font-size:20px; }
.guide-checklist ul { padding-left:20px; margin:0; }
.guide-checklist li { padding-block:5px; line-height:1.8; word-break:keep-all; }
.guide-detail-nav { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:30px; }
.guide-detail-nav .text-link { line-height:1.8; text-align:right; word-break:keep-all; }
.guide-detail-nav .button { flex-shrink:0; }
@media(max-width:680px){ main>.guide-detail { width:calc(100% - 32px); padding-block:24px 48px; } .guide-back { margin-bottom:24px; } .guide-detail-title { font-size:30px; } .guide-detail-lede { font-size:14px; } .guide-detail-art { height:210px; margin-top:24px; } .guide-detail-body { padding:26px 20px; } .guide-step h2 { font-size:21px; } .guide-step p { font-size:14px; } .guide-checklist { padding:19px 16px; } .guide-checklist li { font-size:13px; } .guide-detail-nav { flex-direction:column; align-items:stretch; gap:20px; } .guide-detail-nav .button { text-align:center; } .guide-detail-nav .text-link { text-align:left; } }
/* The records room is a compact ledger, not a stack of article cards. */
body[data-page="records"] .page-intro { min-height:0; padding-block:36px 24px; }
body[data-page="records"] .page-intro h1 { font-size:36px; margin-bottom:12px; max-width:740px; }
body[data-page="records"] .page-intro>p:not(.eyebrow) { font-size:13px; line-height:1.8; margin-bottom:12px; max-width:650px; }
body[data-page="records"] .page-intro:after { width:260px; height:140px; top:36px; right:0; }
body[data-page="records"] .page-section:not(.page-intro) { padding-block:24px 48px; }
body[data-page="records"] .section-heading h2 { font-size:25px; }
body[data-page="records"] .section-heading { margin-bottom:18px; }
.record-tabs { display:flex; gap:4px; padding:5px; margin-bottom:20px; border:1px solid #657758; background:#1c342c; flex-wrap:wrap; }
.record-tab { color:#c7d1bf; padding:11px 20px; font-size:13px; text-decoration:none; line-height:1.5; text-align:center; flex:1; white-space:nowrap; }
.record-tab[aria-current="page"] { background:#edbf76; color:#304135; font-weight:800; box-shadow:0 2px 0 #7e6945; }
.record-tab:not([aria-current]):hover { background:#3b5643; color:#f5ecd3; }
.record-scope { display:flex; gap:16px; justify-content:space-between; align-items:center; flex-wrap:wrap; padding:0 0 18px; }
.record-scope-note { font-size:11px; color:#bdc9b1; line-height:1.8; margin:0; }
.season-form { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.season-label { color:#d6dccb; font-size:12px; }
.season-select { background:#f3e9d0; color:#344638; border:1px solid #9ba985; padding:10px 36px 10px 12px; font-family:var(--font-body); font-size:13px; min-height:42px; }
.season-form .button { margin:0; min-height:42px; }
.record-panel>.section-heading { display:flex; flex-direction:row; gap:12px; align-items:center; margin-bottom:16px; }
.record-panel-title { font-family:var(--font-body); font-size:19px; color:#f4e7c9; margin:0; letter-spacing:-.02em; }
.record-panel>.section-heading .section-note { font-size:10px; margin:0; color:#aebfa6; }
.rank-podium { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:24px; }
.rank-winner { display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:8px 16px; padding:22px 18px; color:#354438; background:#eee2bf; border:1px solid #c9b77d; }
.rank-winner-1 { background:#f3dfaa; border-color:#d9b66a; }
.rank-winner-2 { background:#dbe3d6; border-color:#a8b9a8; }
.rank-winner-3 { background:#e8d6c2; border-color:#c1a789; }
.rank-identity { min-width:0; }
.rank-honour { display:block; font-size:9px; font-family:var(--font-pixel); color:#665231; margin-bottom:8px; }
.rank-winner-2 .rank-honour { color:#495b47; }
.rank-winner-3 .rank-honour { color:#674832; }
.rank-name { font-family:var(--font-body); font-size:16px; font-weight:800; letter-spacing:-.025em; line-height:1.5; margin:0; overflow-wrap:anywhere; word-break:keep-all; }
.rank-detail { color:#53624f; font-size:11px; line-height:1.65; margin:4px 0 0; }
.rank-value { font-family:var(--font-body); font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.4; color:#344b3b; white-space:nowrap; }
.rank-winner>.rank-value { grid-column:2; }
.rank-medal { display:grid; place-items:center; width:44px; height:48px; position:relative; flex-shrink:0; font-family:var(--font-pixel); font-weight:700; font-size:17px; line-height:1; color:#604719; background:#e5c478; clip-path:polygon(12% 0,88% 0,88% 8%,100% 8%,100% 78%,50% 100%,0 78%,0 8%,12% 8%); }
.rank-medal-1:before { content:''; width:20px; height:10px; position:absolute; top:5px; background:#86602b; clip-path:polygon(0 0,30% 35%,50% 0,70% 35%,100% 0,88% 100%,12% 100%); }
.rank-medal-1 .rank-number { padding-top:10px; }
.rank-medal-2 { background:#bbccba; color:#3f5744; }
.rank-medal-3 { background:#d1ab83; color:#573b24; }
.rank-medal-plain { clip-path:none; background:transparent; color:#586148; font-size:14px; width:40px; height:36px; }
.records-list { background:#f3eddb; color:#354438; border:1px solid #cfcaad; }
.rank-columns,.rank-row { display:grid; grid-template-columns:48px minmax(0,1fr) minmax(100px,auto); align-items:center; gap:16px; padding-inline:20px; }
.rank-columns { padding-block:12px; color:#535d46; font-size:10px; border-bottom:1px solid #d0c8a9; background:#e9e5ce; }
.rank-columns>span:last-child { text-align:right; }
.rank-row { padding-block:12px; min-height:70px; border-bottom:1px solid #dcd6bc; }
.rank-row:last-child { border-bottom:0; }
.rank-row:nth-child(odd) { background:#efead5; }
.rank-row>.rank-value { font-size:17px; text-align:right; }
.rank-row .rank-name { font-size:14px; }
.rank-row .rank-detail { font-size:11px; margin-top:2px; }
.record-footer { display:flex; align-items:center; justify-content:space-between; margin-top:18px; gap:16px; }
.record-footer p { color:#adbc9e; margin:0; font-size:11px; }
.home-record-entry { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid #d7cbaa; }
.home-record-entry:last-child { border-bottom:0; }
.home-record-entry .rank-medal { width:28px; height:32px; font-size:11px; }
.home-record-entry .rank-medal-1:before { width:14px; height:7px; top:3px; }
.home-record-entry .rank-medal-1 .rank-number { padding-top:7px; }
.home-rank-identity { display:grid; min-width:0; gap:2px; }
.home-rank-identity strong { color:#344638; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.home-rank-identity>span { font-size:12px; color:#756747; font-variant-numeric:tabular-nums; }
@media(max-width:1100px){ body[data-page="records"] .page-intro:after { position:absolute; display:block; width:210px; height:125px; margin:0; opacity:.65; } body[data-page="records"] .page-intro>p:not(.eyebrow) { max-width:calc(100% - 240px); } .rank-winner { gap:8px 12px; padding:18px 12px; grid-template-columns:40px minmax(0,1fr); } .rank-winner .rank-medal { width:36px; height:42px; } .rank-name { font-size:14px; } .rank-value { font-size:18px; } }
@media(max-width:680px){
 body[data-page="records"] .page-intro { padding-block:24px 12px; } body[data-page="records"] .page-intro h1 { font-size:27px; } body[data-page="records"] .page-intro>p:not(.eyebrow) { font-size:12px; max-width:100%; } body[data-page="records"] .page-intro:after { display:none; } body[data-page="records"] .intro-rule { display:flex; gap:12px; flex-wrap:wrap; font-size:9px; } body[data-page="records"] .intro-rule span { border:0; padding:0; }
 body[data-page="records"] .page-section:not(.page-intro) { padding-top:14px; } body[data-page="records"] .section-heading h2 { font-size:23px; } body[data-page="records"] .section-heading { gap:8px; }
 .record-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin-bottom:16px; } .record-tab { padding:11px 6px; font-size:11px; }
 .record-scope { gap:10px; padding-bottom:16px; } .season-form { gap:8px; width:100%; } .season-label { flex-basis:100%; font-size:11px; } .season-select { flex:1; min-width:0; font-size:12px; padding:10px 24px 10px 10px; } .season-form .button { font-size:11px; padding:10px 12px; } .record-scope-note { font-size:10px; }
 .record-panel>.section-heading { align-items:flex-start; flex-direction:column; margin-bottom:14px; } .record-panel-title { font-size:17px; } .record-panel>.section-heading .section-note { font-size:9px; }
 .rank-podium { gap:8px; margin-bottom:18px; } .rank-winner { display:flex; flex-direction:column; justify-content:flex-start; text-align:center; padding:14px 7px; gap:9px; } .rank-winner .rank-medal { width:32px; height:38px; font-size:14px; } .rank-honour { font-size:8px; margin-bottom:7px; } .rank-winner .rank-name { font-size:12px; line-height:1.6; } .rank-winner .rank-detail { font-size:9px; margin-top:5px; } .rank-winner>.rank-value { font-size:15px; margin-top:auto; white-space:normal; overflow-wrap:anywhere; } .rank-medal-1:before { width:16px; height:8px; top:4px; }
 .rank-columns,.rank-row { grid-template-columns:32px minmax(0,1fr) auto; gap:10px; padding-inline:12px; } .rank-columns { font-size:9px; padding-block:10px; } .rank-row { padding-block:12px; min-height:68px; } .rank-row .rank-medal { width:28px; font-size:12px; } .rank-row .rank-name { font-size:12px; } .rank-row .rank-detail { font-size:9px; } .rank-row>.rank-value { font-size:14px; } .record-footer { gap:10px; } .record-footer p { font-size:10px; }
}
body[data-page="records"] main>.page-intro { width:min(1200px,calc(100% - 48px)); max-width:none; }
body[data-page="records"] .intro-rule { margin-top:12px; }
@media(max-width:680px){ body[data-page="records"] main>.page-intro { width:calc(100% - 32px); } }