/* MOO RANCH — warm sunset gold/orange + meadow green, pixel UI, mobile-first */
@font-face{font-family:Silk;src:url(../fonts/silk-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Silk;src:url(../fonts/silk-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:VT;src:url(../fonts/vt323.woff2) format("woff2");font-display:swap}
:root{--ink:#3a2416;--ink2:#6b4a30;--paper:#fff3dc;--card:#fffaf0;--gold:#f3ba2f;--gold2:#c48a12;--orange:#f2762e;--sun:#ffb347;--green:#5fae3e;--green2:#3d7f2a;--sky:#ffd9a0;--line:#3a2416;--red:#d9443a;--mute:#8a6a50}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;overflow-x:hidden}
html[lang^=zh] .en,html:not([lang^=zh]) .zh{display:none!important}
a{color:var(--orange);text-decoration:none}a:hover{text-decoration:underline}
img{image-rendering:pixelated}
h1,h2,h3,.px{font-family:Silk,system-ui,sans-serif;letter-spacing:.02em;line-height:1.15}
h1{font-size:clamp(30px,8vw,58px);margin:.2em 0}
h2{font-size:clamp(22px,5.5vw,34px);margin:.2em 0 .5em}
h3{font-size:18px;margin:.2em 0 .5em}
.num{font-family:VT,monospace;font-size:1.35em;line-height:1}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
section{padding:36px 0}
.kicker{font-family:Silk;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.mute{color:var(--mute)}.small{font-size:13px}.center{text-align:center}
.hide{display:none!important}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:1fr}.g3{grid-template-columns:1fr}.g4{grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}

/* pixel panel */
.panel{background:var(--card);border:3px solid var(--line);border-radius:4px;padding:16px;box-shadow:4px 4px 0 var(--line);position:relative}
.panel.gold{background:linear-gradient(#fff6d6,#ffe9b0)}
.panel.green{background:linear-gradient(#eefbe2,#d8f2c4)}

/* header */
.top{position:sticky;top:0;z-index:50;background:linear-gradient(90deg,#ff9a3c,#ffc94d);border-bottom:3px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:10px;height:58px}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);font-family:Silk;font-weight:700;font-size:18px;white-space:nowrap}
.brand img{width:38px;height:38px;border:2px solid var(--line);border-radius:6px;background:#fff}
.brand:hover{text-decoration:none}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{color:var(--ink);font-family:Silk;font-size:13px;padding:8px 10px;border-radius:4px}
.nav a.on,.nav a:hover{background:#fff3;text-decoration:none;box-shadow:inset 0 -3px 0 var(--ink)}
.lang,.burger{white-space:nowrap;font:700 12px Silk,system-ui;background:var(--card);color:var(--ink);border:2px solid var(--line);border-radius:4px;padding:6px 8px;cursor:pointer}
.burger{display:none;font-size:18px;padding:2px 10px}
.xlink{display:none;color:var(--ink);padding:6px}.xlink.show{display:inline-flex}
@media(max-width:820px){.nav{display:none;position:absolute;top:58px;left:0;right:0;flex-direction:column;background:#ffc94d;border-bottom:3px solid var(--line);padding:6px 12px 12px}
.nav.open{display:flex}.burger{display:inline-block}.lang{margin-left:auto}.nav a{font-size:15px;padding:12px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:700 14px Silk,system-ui;color:var(--ink);background:var(--gold);border:3px solid var(--line);border-radius:4px;padding:11px 16px;cursor:pointer;box-shadow:3px 3px 0 var(--line);min-height:46px;text-decoration:none!important;transition:transform .05s}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.btn.alt{background:var(--card)}.btn.green{background:#8fd46a}.btn.orange{background:var(--orange);color:#fff}
.btn.sm{padding:6px 10px;min-height:36px;font-size:12px;box-shadow:2px 2px 0 var(--line)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.badge{display:inline-block;font:700 11px Silk;padding:3px 7px;border:2px solid var(--line);border-radius:3px;background:var(--card)}
.badge.live{background:#8fd46a}.badge.soon{background:#ffe08a}.badge.off{background:#e8d8c4}.badge.prem{background:#ffd34d}.badge.good{background:#b6e388}.badge.std{background:#e8f4ff}

/* hero */
.hero{background:linear-gradient(#ff8a3d 0%,#ffb35c 35%,#ffd98a 70%,#bfe58f 70.2%,#8fd46a 100%);border-bottom:3px solid var(--line);position:relative;overflow:hidden}
.hero .wrap{display:grid;gap:22px;padding-top:28px;padding-bottom:28px}
@media(min-width:900px){.hero .wrap{grid-template-columns:1.05fr 1fr;align-items:center}}
.hero p.lead{font-size:17px;max-width:560px}
.hero .avatar{width:96px;height:96px;border:3px solid var(--line);border-radius:8px;box-shadow:3px 3px 0 var(--line)}
.sunball{position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:#fff1a8;opacity:.55}

/* map */
.mapbox{position:relative;border:3px solid var(--line);border-radius:4px;box-shadow:4px 4px 0 var(--line);background:#7cc653;overflow:hidden;touch-action:manipulation}
.mapbox canvas{touch-action:pan-y;display:block;width:100%;height:auto;image-rendering:pixelated;cursor:pointer}
.maptag{position:absolute;left:8px;top:8px;font:700 11px Silk;background:#fffaf0e6;border:2px solid var(--line);border-radius:3px;padding:3px 7px}
.mapback{position:absolute;right:8px;top:8px}
.legend{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border:2px solid var(--line);margin-right:4px;vertical-align:-1px}
.chips{display:flex;gap:6px;overflow-x:auto;padding:8px 0 4px;scrollbar-width:none}
.chips button{flex:0 0 auto;font:700 11px Silk;border:2px solid var(--line);border-radius:3px;background:var(--card);padding:6px 9px;cursor:pointer;color:var(--ink)}
.chips button.on{background:var(--gold)}

/* stats */
.stat{padding:12px}.stat b{display:block;font-family:VT;font-size:30px;line-height:1}.stat span{font-size:12px;color:var(--mute)}

/* cows */
.cows{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:560px){.cows{grid-template-columns:repeat(3,1fr)}}@media(min-width:900px){.cows{grid-template-columns:repeat(4,1fr)}}
.cow{background:var(--card);border:3px solid var(--line);border-radius:4px;padding:8px;box-shadow:3px 3px 0 var(--line);font-size:12px}
.cow img{width:100%;aspect-ratio:1;display:block;border:2px solid var(--line);border-radius:3px;background:#ffd98a}
.cow .nm{font:700 12px Silk;margin:6px 0 2px}.cow .acts{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.cow.sel{outline:4px solid var(--orange)}
.bar{height:8px;background:#e8d8c4;border:2px solid var(--line);border-radius:2px;overflow:hidden;margin:4px 0}.bar i{display:block;height:100%;background:var(--green)}

/* forms */
label{display:block;font:700 11px Silk;letter-spacing:.06em;margin:12px 0 5px;color:var(--ink2)}
input,select{width:100%;font:16px system-ui;padding:10px;border:3px solid var(--line);border-radius:4px;background:#fff;color:var(--ink)}
.status{min-height:20px;font-size:13px;margin-top:8px;word-break:break-word}
.notice{border:2px dashed var(--orange);background:#fff1dc;padding:10px 12px;border-radius:4px;font-size:14px}
.notice.err{border-color:var(--red);background:#ffe5e0}
.log{white-space:pre-wrap;font:12px/1.4 ui-monospace,monospace;background:#2a1a10;color:#ffe9b0;border-radius:4px;padding:10px;max-height:260px;overflow:auto;min-height:40px}
.addr{font:12px ui-monospace,monospace;word-break:break-all}
table.kv{width:100%;border-collapse:collapse}table.kv td{padding:6px 4px;border-bottom:2px dotted #e3cfb3;vertical-align:top}
table.board{width:100%;border-collapse:collapse;font-size:14px}
table.board th{font:700 11px Silk;text-align:left;padding:8px 6px;border-bottom:3px solid var(--line)}
table.board td{padding:8px 6px;border-bottom:2px dotted #e3cfb3}
table.board tr.me td{background:#fff1b8}
.medal{font-family:VT;font-size:22px}

/* steps */
.steps{counter-reset:s;display:grid;gap:12px}
.step{padding-left:52px;position:relative}
.step:before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:38px;height:38px;display:flex;align-items:center;justify-content:center;font:700 18px Silk;background:var(--gold);border:3px solid var(--line);border-radius:4px}
.split{display:flex;height:34px;border:3px solid var(--line);border-radius:4px;overflow:hidden;font:700 12px Silk}
.split div{display:flex;align-items:center;justify-content:center;border-right:3px solid var(--line)}.split div:last-child{border:0}
.foot{background:#3a2416;color:#ffe9b0;padding:22px 0;margin-top:30px;font-size:13px}.foot a{color:#ffd34d}
.foot .row{justify-content:space-between}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:#fff3dc;padding:10px 16px;border-radius:4px;z-index:9999;font-size:14px;max-width:92vw}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--card);border-top:3px solid var(--line);box-shadow:0 -4px 0 var(--line);padding:14px 16px 20px;max-height:70vh;overflow:auto;transform:translateY(105%);transition:transform .2s}
.sheet.open{transform:none}.sheet:not(.open){visibility:hidden}
@media(min-width:900px){.sheet{left:auto;right:20px;bottom:20px;width:380px;border:3px solid var(--line);border-radius:4px;box-shadow:4px 4px 0 var(--line)}}
.x{float:right;background:none;border:0;font:700 22px Silk;cursor:pointer;color:var(--ink)}
.walker{position:absolute;bottom:6px;width:48px;image-rendering:pixelated;animation:walk 18s linear infinite}
@keyframes walk{from{left:-60px}to{left:105%}}