/* 洛克王国世界 · 公共设计系统 */
:root{
  --ink:#263b32;--ink-soft:#42574b;--muted:#64736b;--muted-2:#748078;
  --green:#3d684c;--green-deep:#254b36;--green-soft:#edf3ee;--green-mist:#e1ebe3;
  --orange:#bd643e;--orange-deep:#9d4e2c;--gold:#ca9b48;--gold-soft:#faf0db;
  --pink-50:#fff8f9;--pink-100:#fcf4f5;--pink-200:#f6e6e9;--pink-300:#ecd0d7;
  --pink-400:#dba9b7;--pink-chip:#f8e8ec;--pink-chip-ink:#95475e;
  --paper:#fffdfa;--paper-soft:#fffaf5;--line:#dbe2db;--line-soft:#e9ede7;
  --ok:#3d8050;--err:#b44747;--focus-ring:0 0 0 3px #3d684c26;
  --card:#fff;--card-grad:linear-gradient(155deg,#fff,#fffdf9);--card-line:#e2e6de;
  --accent-grad:linear-gradient(90deg,#cf9473,#d6b46a,#84a88a);
  --font-serif:"Noto Serif SC","Songti SC","STZhongsong",Georgia,serif;
  --font-ui:system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --text-xs:12px;--text-sm:13px;--text-base:14px;--text-md:15px;--text-lg:18px;--text-xl:22px;
  --text-hero:clamp(36px,4.5vw,58px);--h1:var(--text-hero);--leading-tight:1.2;--leading-body:1.8;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px;--sp-8:44px;--sp-9:56px;
  --r-s:8px;--r-m:12px;--r-l:18px;--r-xl:24px;--r-pill:999px;
  --shadow-1:0 2px 8px #273b3005;--shadow-2:0 8px 28px #273b300b;--shadow-3:0 18px 60px #273b3020;
  --glow-green:0 4px 12px #3d684c1a;--inner-light:inset 0 1px 0 #ffffffa6;
  --ease:cubic-bezier(.22,.61,.36,1);--ease-spring:cubic-bezier(.22,.61,.36,1);
  --dur-fast:.16s;--dur:.22s;--dur-slow:.35s;--header-h:80px;
  --bg-gradient:linear-gradient(155deg,#fff8f6 0%,#fcf4f5 38%,#f4f7f1 100%);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{margin:0;min-width:280px;min-height:100vh;color:var(--ink);font:14px/1.65 var(--font-ui);background:var(--bg-gradient);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--green);text-underline-offset:4px;transition:color var(--dur-fast)}
a:hover{color:var(--orange-deep)}
h1,h2,h3,h4{line-height:1.3;text-wrap:balance;letter-spacing:-.02em}
p{margin:0 0 12px}
button,input,select,textarea{font:inherit;color:inherit}
button,a,input,select,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--green);outline-offset:4px}
[hidden]{display:none!important}
::selection{background:var(--pink-200);color:var(--green-deep)}
[id]{scroll-margin-top:calc(var(--header-h) + 20px)}
mark{color:var(--orange-deep);background:var(--gold-soft);padding:0 2px;border-radius:3px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:8px;left:16px;z-index:100;padding:12px 18px;background:var(--green-deep);color:#fff;border-radius:10px;transform:translateY(-160%)}
.skip-link:focus{transform:none;color:#fff}
.shell{width:min(1280px,calc(100% - 64px));margin-inline:auto}
main{padding-bottom:12px;min-width:0}
.site-header{position:sticky;top:0;z-index:50;background:#fffaf6f5;border-bottom:1px solid var(--line-soft);transition:box-shadow var(--dur)}
.site-header.is-scrolled{box-shadow:var(--shadow-2)}
.header-in{min-height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:11px;flex:none;color:var(--ink);text-decoration:none}
.brand-mark{width:44px;height:44px;object-fit:contain}
.brand strong{display:block;font:700 17px/1.5 var(--font-serif);letter-spacing:.08em;color:var(--green-deep)}
.brand small{display:block;font-size:9px;letter-spacing:.12em;color:var(--muted)}
.nav{display:flex;align-items:center;gap:3px;flex-wrap:nowrap}
.nav a{padding:11px 12px;white-space:nowrap;border-radius:9px;color:var(--muted);text-decoration:none;font-size:13px;font-weight:500}
.nav a:hover{background:var(--green-soft);color:var(--green-deep)}
.nav a.active{background:var(--green-soft);color:var(--green-deep);font-weight:700}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:var(--r-m);background:#fff}
.nav-toggle .bar,.nav-toggle .bar::before,.nav-toggle .bar::after{display:block;width:18px;height:2px;border-radius:2px;background:var(--green-deep);position:relative}
.nav-toggle .bar::before,.nav-toggle .bar::after{content:"";position:absolute;left:0}
.nav-toggle .bar::before{top:-6px}.nav-toggle .bar::after{top:6px}
.site-tabbar,.drawer-head,.nav-backdrop{display:none}
.hero{padding:44px 2px 30px}
.eyebrow{display:flex;align-items:center;gap:9px;color:var(--orange-deep);font-size:10px;font-weight:700;letter-spacing:.2em}
.eyebrow::before{content:"";width:18px;height:1px;background:currentColor;flex:none}
.hero h1{margin:14px 0 16px;font:700 var(--text-hero)/1.2 var(--font-serif);letter-spacing:.015em}
.hero h1 span,.api-hero h1 span{color:var(--green);margin-left:.1em}
.hero p,.lead{max-width:740px;color:var(--muted);font:14px/1.9 var(--font-ui);margin:0;overflow-wrap:anywhere}
.status-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.tag,.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;max-width:100%;border:1px solid var(--line-soft);border-radius:var(--r-pill);background:#ffffffb8;color:var(--muted);font:12px/1.5 var(--font-ui)}
.tag i{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.tag[data-state="error"] i{background:var(--err)}
.tag[data-state="loading"] i,.tag[data-state="closed"] i{background:var(--gold)}
.board{position:relative;padding:28px;min-width:0;border:1px solid var(--line);border-radius:var(--r-xl);background:#ffffffb8;box-shadow:var(--shadow-2)}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}
.section-heading h2{font-size:20px;margin:0 0 4px}
.section-heading p{color:var(--muted);font-size:12px;margin:0}
.section-kicker{display:block;color:var(--orange-deep);font-size:10px;font-weight:700;letter-spacing:.15em;margin-bottom:7px}
.utility-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.utility-links a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:12px;text-decoration:none;background:#ffffff8c}
.utility-links a:hover{background:var(--green-soft);border-color:#a4bba8}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 18px;border:1px solid transparent;border-radius:var(--r-m);font:600 13px/1.4 var(--font-ui);text-decoration:none;white-space:nowrap;transition:background var(--dur),border-color var(--dur),box-shadow var(--dur)}
.btn-primary{background:var(--green-deep);color:#fff;box-shadow:var(--glow-green)}
.btn-primary:hover{background:#356047;color:#fff}
.btn-ghost{background:#fff;color:var(--ink-soft);border-color:var(--line)}
.btn-ghost:hover{background:var(--green-soft);border-color:#a9bbaa;color:var(--green-deep)}
.btn:disabled{opacity:.48;cursor:not-allowed;box-shadow:none}
.btn[aria-busy="true"]::before{content:"";width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.input,textarea,select{width:100%;min-width:0;min-height:46px;padding:11px 14px;background:#fff;border:1px solid #ccd7cc;border-radius:var(--r-m);font:15px/1.5 var(--font-ui);transition:border-color var(--dur),box-shadow var(--dur)}
.input:focus,textarea:focus,select:focus{outline:none;border-color:var(--green);box-shadow:var(--focus-ring)}
.input::placeholder,textarea::placeholder{color:var(--muted-2)}
.card{position:relative;min-width:0;border:1px solid var(--card-line);border-radius:var(--r-l);background:var(--card);box-shadow:var(--shadow-1);transition:border-color var(--dur),box-shadow var(--dur)}
.card:hover{border-color:#bdcdbd;box-shadow:var(--shadow-2)}
.badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:6px;background:var(--pink-chip);color:var(--pink-chip-ink);font:500 11px/1.4 var(--font-ui)}
.badge.alt{background:var(--green-soft);color:var(--green)}
.badge[data-el]{background:var(--el-bg,#eef0f3);color:var(--el-ink,#5b6472)}
.badge[data-el]::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:5px;flex:none}
.badge[data-el="普通"]{--el-bg:#eef0f3;--el-ink:#5b6472}
.badge[data-el="草"]{--el-bg:#e3f2e6;--el-ink:#33804a}
.badge[data-el="火"]{--el-bg:#fce5df;--el-ink:#b23f29}
.badge[data-el="水"]{--el-bg:#dfedf8;--el-ink:#2b6fa5}
.badge[data-el="光"]{--el-bg:#faf0d3;--el-ink:#806215}
.badge[data-el="地"]{--el-bg:#f3e7d9;--el-ink:#8a5f37}
.badge[data-el="冰"]{--el-bg:#ddf2f4;--el-ink:#226d79}
.badge[data-el="龙"]{--el-bg:#e7e4fa;--el-ink:#5247b2}
.badge[data-el="电"]{--el-bg:#faf1cf;--el-ink:#7c620e}
.badge[data-el="毒"]{--el-bg:#f1e3f6;--el-ink:#83419c}
.badge[data-el="虫"]{--el-bg:#ecf3da;--el-ink:#567318}
.badge[data-el="武"]{--el-bg:#f7e5df;--el-ink:#a04a34}
.badge[data-el="翼"]{--el-bg:#e4eef9;--el-ink:#416da5}
.badge[data-el="萌"]{--el-bg:#fbe4ee;--el-ink:#a84576}
.badge[data-el="幽"]{--el-bg:#eceaf2;--el-ink:#6c6284}
.badge[data-el="恶"]{--el-bg:#e3e3ea;--el-ink:#464656}
.badge[data-el="机械"]{--el-bg:#e6ebf1;--el-ink:#52627a}
.badge[data-el="幻"]{--el-bg:#f5e8f8;--el-ink:#8e46a8}
.badge[data-el="圣"]{--el-bg:#fdf3d8;--el-ink:#806316}
.empty{grid-column:1/-1;padding:48px 20px;border:1px dashed var(--line);border-radius:var(--r-l);text-align:center;color:var(--muted);background:#fafbf8;font:14px/1.8 var(--font-ui)}
.empty-symbol{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 14px;border-radius:50%;background:var(--green-soft);color:var(--green);font-size:25px}
.empty b{display:block;font-size:17px;color:var(--ink);margin-bottom:8px}
.empty p{margin:0 auto 16px;max-width:480px;overflow-wrap:anywhere}
.empty .btn{margin-top:4px}
.skeleton{position:relative;overflow:hidden;min-width:0;border:1px solid var(--line-soft);border-radius:var(--r-l);background:#fff;padding:20px}
.skeleton span{display:block;height:12px;background:#edf1eb;border-radius:6px;margin:0 0 16px;width:75%}
.skeleton span:first-child{width:50px;height:50px;border-radius:12px}
.skeleton span:last-child{width:55%}
.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffffb3,transparent);transform:translateX(-100%);animation:shimmer 1.6s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.card-details{margin-top:12px;font:13px/1.8 var(--font-ui);color:var(--muted);overflow-wrap:anywhere}
.card-details summary{cursor:pointer;list-style:none}
.card-details summary::-webkit-details-marker{display:none}
.card-details summary span{display:block;color:var(--green);font-size:12px;font-weight:600;margin-top:7px}
.card-details[open] summary{font-size:0}
.card-details[open] summary span{font-size:0}
.card-details[open] summary span::after{content:"收起说明";font-size:12px}
.card-details[open] .desc{display:block;overflow:visible;-webkit-line-clamp:unset}
.table-scroll{max-width:100%;overflow:auto;overscroll-behavior-x:contain;border-radius:var(--r-m)}
footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:36px 0 0;padding:22px 2px 30px;border-top:1px solid var(--line);font:12px/1.7 var(--font-ui);color:var(--muted)}
.footer-links{display:flex;gap:16px;flex-wrap:wrap}
.footer-links a{text-decoration:none}
.backtop{position:fixed;right:22px;bottom:24px;z-index:30;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:14px;color:var(--green-deep);background:#fff;box-shadow:var(--shadow-2);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity var(--dur),transform var(--dur),visibility var(--dur)}
.backtop.show{opacity:1;visibility:visible;transform:none}
.sakura{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.sakura i{position:absolute;top:-24px;width:9px;height:13px;border-radius:80% 0 80% 0;background:#e9bdc94d;animation:sakura-fall 22s linear infinite}
@keyframes sakura-fall{0%{transform:translate(0,-30px) rotate(0)}100%{transform:translate(80px,110vh) rotate(300deg)}}
.page-hidden .sakura i{animation-play-state:paused}
@media(min-width:921px) and (max-width:1140px){.shell{width:calc(100% - 40px)}.nav{gap:0}.nav a{padding:11px 8px;font-size:12px}.brand strong{font-size:15px}.brand small{font-size:8px}.brand-mark{width:38px;height:38px}.header-in{gap:12px}}
@media(max-width:920px){
  :root{--header-h:72px}
  .shell{width:calc(100% - 36px)}
  .nav-toggle{display:flex}
  .nav{position:fixed;top:0;bottom:0;right:0;z-index:55;display:flex;flex-direction:column;align-items:stretch;gap:5px;width:min(340px,88vw);padding:22px 20px calc(22px + env(safe-area-inset-bottom,0px));overflow:auto;overscroll-behavior:contain;background:var(--paper);box-shadow:-12px 0 60px #20372826;transform:translateX(105%);visibility:hidden;transition:transform var(--dur-slow),visibility var(--dur-slow)}
  .nav.open{transform:none;visibility:visible}
  .nav a{padding:13px 16px;font-size:14px;min-height:46px}
  .nav a.active{background:var(--green-mist)}
  .drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0 20px;margin-bottom:8px;border-bottom:1px solid var(--line)}
  .drawer-head small{display:block;font-size:9px;color:var(--muted);letter-spacing:.16em;margin-bottom:8px}
  .drawer-head strong{font-size:20px}
  .drawer-close{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#fff;font-size:26px;line-height:1}
  .nav-backdrop{display:block;position:fixed;inset:0;z-index:45;background:#223b324d;opacity:0;visibility:hidden;transition:opacity var(--dur),visibility var(--dur)}
  .nav-backdrop.show{opacity:1;visibility:visible}
  .site-tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40;padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:#fffdf9f5;box-shadow:0 -4px 20px #263b3208}
  .tab-item{display:flex;flex:1;min-width:0;align-items:center;justify-content:center;flex-direction:column;gap:4px;min-height:50px;background:none;border:0;font:500 10px/1.4 var(--font-ui);color:var(--muted);text-decoration:none}
  .tab-ico{display:grid;place-items:center;width:44px;height:27px;border-radius:10px}
  .tab-item svg{width:20px;height:20px}
  .tab-item.active{color:var(--green-deep);font-weight:700}
  .tab-item.active .tab-ico{background:var(--green-mist)}
  body.has-tabbar{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
  .backtop{right:16px;bottom:calc(82px + env(safe-area-inset-bottom,0px))}
  .hero{padding:32px 0 24px}
  .board{padding:22px}
  .sakura{display:none}
}
@media(max-width:600px){
  :root{--header-h:66px;--text-hero:36px}
  .shell{width:calc(100% - 28px)}
  .brand-mark{width:38px;height:38px}.brand strong{font-size:15px}.brand small{font-size:8px}
  .hero{padding:28px 0 22px}.hero h1{margin:12px 0 14px}.hero p,.lead{font-size:13px}
  .eyebrow{font-size:9px;letter-spacing:.15em}
  .board{padding:18px 14px;border-radius:18px}
  .status-row{margin-top:18px;gap:6px}.tag{font-size:11px;padding:6px 9px}
  .section-heading{align-items:flex-start;gap:10px}.section-heading h2{font-size:18px}
  .btn{padding:11px 14px}.input,textarea,select{font-size:16px}
  footer{display:block;text-align:center;margin-top:24px;padding-bottom:20px}.footer-links{justify-content:center;margin-top:12px}
  .empty{padding:34px 14px}.empty b{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .sakura{display:none}
}
@media print{.site-header,.site-tabbar,.backtop,.sakura,.skip-link,.toolbar,.pager{display:none!important}body{background:#fff!important;padding:0!important}.shell{width:100%}.board{box-shadow:none;border:0}a{color:inherit}.hero{padding-top:0}}