/* ===========================================================
   崧崧的家 · 样式表
   想换整体配色：改 :root 里的变量；
   想换季节/天气的小院颜色：改 .scene[data-season=...] / [data-weather=...] 段。
   =========================================================== */

:root{
  --ink:#22283d;
  --ink-soft:#5b6480;
  --card:rgba(255,255,255,.78);
  --card-line:rgba(255,255,255,.85);
  --accent:#ff7b6b;
  --accent-2:#5b8dff;
  --radius:26px;
  --shadow:0 18px 40px rgba(38,50,90,.13);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.65;
  background:
    radial-gradient(1200px 700px at 12% -10%, #dfeaff 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 0%, #ffe6ef 0%, transparent 55%),
    linear-gradient(170deg,#f6f9ff 0%,#eef6ff 40%,#f4fff8 100%);
  background-attachment:fixed;
}

img,svg{display:block;max-width:100%}

a{color:inherit;text-decoration:none}

code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:rgba(91,141,255,.12);
  padding:1px 6px;border-radius:6px;font-size:.9em;
}

.aurora{
  position:fixed;inset:-20% -10% auto -10%;height:70vh;pointer-events:none;z-index:0;
  background:
    radial-gradient(600px 320px at 20% 30%, rgba(140,190,255,.35), transparent 70%),
    radial-gradient(560px 300px at 70% 20%, rgba(255,180,205,.35), transparent 70%),
    radial-gradient(500px 280px at 45% 60%, rgba(170,255,220,.28), transparent 70%);
  filter:blur(20px);
}

/* ============ 顶栏 ============ */
.topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px clamp(14px,4vw,40px);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.7);
}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{
  width:40px;height:40px;display:grid;place-items:center;font-size:21px;
  background:linear-gradient(140deg,#fff2d9,#ffd9e3);
  border-radius:14px;box-shadow:0 6px 16px rgba(255,140,150,.25);
}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text b{font-size:17px;letter-spacing:.04em}
.brand-text small{font-size:11px;color:var(--ink-soft);letter-spacing:.14em;text-transform:uppercase}
.topbar nav{display:flex;gap:6px;flex-wrap:wrap}
.topbar nav a{
  padding:8px 13px;border-radius:999px;font-size:14px;color:var(--ink-soft);
  transition:.2s;
}
.topbar nav a:hover{background:#fff;color:var(--ink);box-shadow:0 6px 16px rgba(60,80,140,.14)}

/* ============ 通用面板 ============ */
main{
  position:relative;z-index:1;
  width:min(1240px,100%);
  margin:0 auto;
  padding:clamp(18px,3vw,34px) clamp(14px,4vw,40px) 40px;
  display:flex;flex-direction:column;gap:clamp(18px,2.4vw,30px);
}
.panel{
  background:var(--card);
  border:1px solid var(--card-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  padding:clamp(18px,2.6vw,30px);
}
.panel-head h2{
  margin:0 0 6px;font-size:clamp(20px,2.4vw,26px);letter-spacing:.02em;
}
.panel-head p{margin:0;color:var(--ink-soft);font-size:15px;max-width:74ch}

.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:11px 18px;border-radius:999px;border:1px solid rgba(120,140,190,.25);
  background:#fff;color:var(--ink);font-size:15px;font-family:inherit;cursor:pointer;
  box-shadow:0 8px 18px rgba(60,80,140,.1);transition:.18s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px rgba(60,80,140,.16)}
.btn:active{transform:translateY(0)}
.btn.primary{
  background:linear-gradient(135deg,var(--accent),#ffb36b);
  color:#fff;border-color:transparent;
  box-shadow:0 12px 24px rgba(255,123,107,.32);
}

/* ============ 小院 ============ */
.hero{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(18px,2.4vw,32px);align-items:center}
.pill{
  display:inline-block;padding:5px 12px;border-radius:999px;font-size:13px;
  background:linear-gradient(135deg,#fff1d6,#ffe0ea);color:#a65a4b;
}
.hero h1{
  margin:12px 0 10px;
  font-size:clamp(30px,4.6vw,50px);letter-spacing:.04em;line-height:1.15;
  background:linear-gradient(135deg,#33406b,#ff7b6b 60%,#f0a53c);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lede{margin:0 0 14px;color:var(--ink-soft);font-size:15.5px}
.tips{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14.5px;color:#4c5673}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}

.scene-wrap{display:flex;flex-direction:column;gap:10px}
.scene{
  position:relative;
  aspect-ratio:1200/640;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 24px 50px rgba(40,60,110,.22), inset 0 0 0 1px rgba(255,255,255,.4);
  isolation:isolate;
  cursor:crosshair;
  /* 默认：春天白天 */
  --sky-top:#a9dcff; --sky-bot:#eaf8ff;
  --glow-a:rgba(255,232,154,.85); --glow-b:rgba(255,232,154,0);
  --sun:#ffd75e; --cloud:#ffffff; --cloud-op:1;
  --hill-back:#b8e59c; --hill-front:#8fd06f;
  --leaf:#8ed86a; --leaf2:#cbf3a8; --trunk:#8a6244; --branch:#7a5539;
  --wall:#fff6ea; --roof:#e8705c; --roof-edge:#c95647;
  --fence:#f0e2ce; --glass:#bfe0f5; --glass-glow:0;
  --veil:rgba(255,255,255,0);
  --stars-op:0; --moon-op:0; --sun-op:1; --blossom-op:1;
  --flowers-op:1; --snow-op:0; --foliage-snow-op:0; --smoke-op:.24;
  --rainbow-op:0; --sun-shift:0px; --sun-lift:0px;
}

/* ---- 季节 ---- */
.scene[data-season="spring"]{
  --sky-top:#a9dcff; --sky-bot:#eaf8ff;
  --hill-back:#bdea9f; --hill-front:#95d574;
  --leaf:#8ed86a; --leaf2:#cdf4ab; --blossom-op:1; --flowers-op:1;
  --wall:#fff6ea; --roof:#e8705c; --fence:#f2e5d2;
}
.scene[data-season="summer"]{
  --sky-top:#7cc9ff; --sky-bot:#ddf3ff;
  --hill-back:#86cf64; --hill-front:#4fa63f;
  --leaf:#2f9b34; --leaf2:#5cc44c; --blossom-op:0; --flowers-op:.9;
  --wall:#fffaf0; --roof:#d9604c; --fence:#f4e8d6;
}
.scene[data-season="autumn"]{
  --sky-top:#ffd9a0; --sky-bot:#fff4e2;
  --hill-back:#eccb74; --hill-front:#d8a445;
  --leaf:#e08a35; --leaf2:#f5bb5c; --blossom-op:0; --flowers-op:.55;
  --wall:#fff4e4; --roof:#c9593f; --fence:#f0dfc6;
}
.scene[data-season="winter"]{
  --sky-top:#c8ddf0; --sky-bot:#f4fbff;
  --hill-back:#e9f1f9; --hill-front:#d5e4f0;
  --leaf:#9db6c6; --leaf2:#cfe0ea; --blossom-op:0; --flowers-op:0;
  --wall:#fbf7f0; --roof:#b7564a; --fence:#e6e9ee; --glass:#cfe6f7;
  --snow-op:.95; --foliage-snow-op:.9;
}

/* ---- 时间 ---- */
.scene[data-time="dusk"]{
  --sky-top:#f79d5c; --sky-bot:#ffdcab;
  --sun:#ff9a4d; --sun-shift:-470px; --sun-lift:250px;
  --glow-a:rgba(255,180,110,.9); --glow-b:rgba(255,150,90,0);
  --veil:rgba(255,140,80,.2);
}
.scene[data-time="night"]{
  --sky-top:#101a3c; --sky-bot:#3b5a95;
  --hill-back:#263c66; --hill-front:#1c2c4d;
  --leaf:#1e4250; --leaf2:#2b5a63; --trunk:#3b3129; --branch:#332b23;
  --wall:#dfe6ef; --roof:#7a3b34; --fence:#8b98ad;
  --cloud:#8fa2c9; --cloud-op:.62; --glass:#ffd479; --glass-glow:1;
  --stars-op:1; --moon-op:1; --sun-op:0; --blossom-op:.35;
  --flowers-op:.3; --smoke-op:.4;
  --veil:rgba(12,20,48,.42);
}

/* ---- 天气（白天/黄昏时的天空变化） ---- */
.scene[data-time="day"][data-weather="rain"],
.scene[data-time="dusk"][data-weather="rain"],
.scene[data-time="day"][data-weather="storm"],
.scene[data-time="dusk"][data-weather="storm"]{
  --sky-top:#8ea5bb; --sky-bot:#ccd9e5; --cloud:#c6d1dc; --sun-op:.12; --glow-a:rgba(190,205,220,.5);
}
.scene[data-time="day"][data-weather="snow"]{--sky-top:#c2d6e8; --sky-bot:#f6fbff; --cloud:#e8f1f8; --sun-op:.35}
.scene[data-time="day"][data-weather="fog"]{--sky-top:#dfe6ec; --sky-bot:#f5f7f8; --cloud:#eef2f5; --sun-op:.3}
.scene[data-time="day"][data-weather="tornado"]{--sky-top:#6e7f83; --sky-bot:#b9c8ba; --cloud:#77878a; --sun-op:.15}
.scene[data-time="day"][data-weather="cloudy"]{--sky-top:#a9cdea; --sky-bot:#eef6fb; --cloud:#ffffff; --sun-op:.6}
.scene[data-time="day"][data-weather="rainbow"]{--sky-top:#9fd6ff; --sky-bot:#eefaff; --sun-op:.7}

/* ---- 天气：压暗/染色（所有时间通用） ---- */
.scene[data-weather="rain"]{--veil:rgba(58,84,112,.24)}
.scene[data-weather="storm"]{--veil:rgba(38,54,84,.34)}
.scene[data-weather="fog"]{--veil:rgba(226,232,238,.42)}
.scene[data-weather="tornado"]{--veil:rgba(72,88,74,.28)}
.scene[data-weather="cloudy"]{--veil:rgba(200,215,230,.16)}
.scene[data-weather="rainbow"]{--rainbow-op:.72}

.scene[data-time="night"][data-weather="rain"],
.scene[data-time="night"][data-weather="storm"]{--veil:rgba(8,15,34,.58)}
.scene[data-time="night"][data-weather="snow"]{--veil:rgba(26,42,74,.46)}
.scene[data-time="night"][data-weather="fog"]{--veil:rgba(40,55,80,.5)}
.scene[data-time="night"][data-weather="tornado"]{--veil:rgba(10,22,20,.55)}
.scene[data-time="night"][data-weather="rainbow"]{--veil:rgba(12,20,48,.4);--rainbow-op:.35}
.scene[data-time="dusk"][data-weather="rain"],
.scene[data-time="dusk"][data-weather="storm"]{--veil:rgba(90,70,80,.3)}
.scene[data-time="dusk"][data-weather="tornado"]{--veil:rgba(110,80,60,.3)}

/* ---- 背景 SVG ---- */
.scene-bg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.sky{fill:url(#skyGrad)}
.sky-top{stop-color:var(--sky-top)}
.sky-bot{stop-color:var(--sky-bot)}
.glow-a{stop-color:var(--glow-a)}
.glow-b{stop-color:var(--glow-b)}
.sun{opacity:var(--sun-op);transition:opacity .6s;transform:translate(var(--sun-shift),var(--sun-lift));transition:transform 1.1s ease,opacity .6s}
.sun-glow{fill:url(#sunGlow)}
.sun-core{fill:var(--sun)}
.moon{opacity:var(--moon-op);transition:opacity .6s}
.moon-core{fill:#fdf6d8}
.moon-cut{fill:var(--sky-top);opacity:.96;transition:fill .6s}
.stars circle{fill:#fff8d8;opacity:var(--stars-op);transition:opacity .8s;animation:twinkle 3.4s ease-in-out infinite}
.stars circle:nth-child(3n){animation-delay:.9s}
.stars circle:nth-child(3n+1){animation-delay:1.7s}

.cloud{opacity:var(--cloud-op);transition:opacity .6s,fill .6s;fill:var(--cloud)}
.cloud.c1{animation:drift 34s ease-in-out infinite alternate}
.cloud.c2{animation:drift 46s ease-in-out infinite alternate-reverse}
.cloud.c3{animation:drift 30s ease-in-out infinite alternate}
.scene[data-weather="tornado"] .cloud{animation:swirl 7s linear infinite;transform-origin:600px 400px}
.scene[data-weather="storm"] .cloud.c1{animation:drift 12s ease-in-out infinite alternate}
.scene[data-weather="storm"] .cloud.c2{animation:drift 9s ease-in-out infinite alternate-reverse}
.scene[data-weather="cloudy"] .cloud.c3{opacity:1;fill:#e7eef6}

.birds{transform:translateX(-240px);animation:fly 46s linear infinite}
.birds path{fill:none;stroke:#4a5570;stroke-width:4;stroke-linecap:round;opacity:.7}
.birds{opacity:.85}
.scene[data-time="night"] .birds{animation-play-state:paused;opacity:0}
.scene[data-weather="rain"] .birds,.scene[data-weather="storm"] .birds,
.scene[data-weather="snow"] .birds,.scene[data-weather="tornado"] .birds{opacity:0}

.rainbow{opacity:var(--rainbow-op);transition:opacity .8s;fill:none}
.rainbow circle:nth-child(1){stroke:#ff8181;stroke-width:30}
.rainbow circle:nth-child(2){stroke:#ffb165;stroke-width:30}
.rainbow circle:nth-child(3){stroke:#ffe066;stroke-width:30}
.rainbow circle:nth-child(4){stroke:#8fe08f;stroke-width:30}
.rainbow circle:nth-child(5){stroke:#7cc4ff;stroke-width:30}
.rainbow circle:nth-child(6){stroke:#b79bff;stroke-width:30}

.hill-back{fill:var(--hill-back);transition:fill .8s}
.hill-front{fill:var(--hill-front);transition:fill .8s}

.house .wall{fill:var(--wall);transition:fill .8s}
.house .roof{fill:var(--roof);transition:fill .8s}
.house .chimney{fill:var(--wall);opacity:.9}
.house .roof-edge{fill:none;stroke:var(--roof-edge);stroke-width:6;stroke-linejoin:round;opacity:.55}
.house .door{fill:#a9683f}
.house .knob{fill:#ffd166}
.house .glass{fill:var(--glass);transition:fill .8s;filter:drop-shadow(0 0 10px rgba(255,214,120,var(--glass-glow)))}
.house .mullion{stroke:#fff8ec;stroke-width:5;opacity:.75}
.house .roof-snow{fill:#fdfeff;opacity:var(--snow-op);transition:opacity .8s}
.house .smoke{opacity:var(--smoke-op);fill:#dfe6ee}
.smoke circle{animation:puff 6s ease-in-out infinite}
.smoke circle:nth-child(2){animation-delay:1.4s}
.smoke circle:nth-child(3){animation-delay:2.8s}
.smoke circle:nth-child(4){animation-delay:4s}

.fence .rail{stroke:var(--fence);stroke-width:11;stroke-linecap:round;transition:stroke .8s}
.fence .posts rect{fill:var(--fence);transition:fill .8s}

.tree .trunk{fill:var(--trunk);transition:fill .8s}
.tree .branch{fill:none;stroke:var(--branch);stroke-width:9;stroke-linecap:round;transition:stroke .8s}
.tree .foliage ellipse{fill:var(--leaf);transition:fill .8s}
.tree .foliage ellipse:nth-child(2),
.tree .foliage ellipse:nth-child(4){fill:var(--leaf2)}
.tree[data-bare="1"] .foliage{opacity:0}
.tree .foliage{opacity:1;transition:opacity .8s,fill .8s}
.tree .blossoms circle{fill:#ffb7cd;opacity:var(--blossom-op);transition:opacity .8s}
.tree .foliage-snow{fill:#fdfeff;opacity:var(--foliage-snow-op);transition:opacity .8s}
.tree{transform-origin:1002px 566px;animation:sway 7s ease-in-out infinite}
.scene[data-weather="tornado"] .tree{animation:shakeTree .32s linear infinite}

.flowers circle{opacity:var(--flowers-op);transition:opacity .8s}
.flowers circle:nth-child(odd){fill:#ffd166}
.flowers circle:nth-child(even){fill:#ff9ec4}
.tufts path{fill:none;stroke:#5fa347;stroke-width:5;stroke-linecap:round;opacity:.6;transition:opacity .8s}
.scene[data-season="winter"] .tufts path{opacity:.15}
.scene[data-season="autumn"] .tufts path{stroke:#b08a3e}
.snow-mounds ellipse{fill:#fdffff;opacity:var(--snow-op);transition:opacity .9s}

.veil{position:absolute;inset:0;z-index:2;background:var(--veil);transition:background .8s;pointer-events:none}
.scene[data-time="night"] .veil{background:linear-gradient(180deg,rgba(10,18,44,.5),rgba(20,32,64,.32))}
.scene[data-time="dusk"] .veil{background:linear-gradient(180deg,rgba(255,150,90,.26),rgba(255,110,80,.1))}

/* ---- 天气画布 ---- */
.weather-canvas{position:absolute;inset:0;z-index:5;pointer-events:none;width:100%;height:100%}

/* ---- 一家人 ---- */
.cast{position:absolute;inset:0;z-index:3}
.person{position:absolute;left:var(--x);bottom:11.5%;width:var(--w);transform-origin:50% 100%;
  transition:transform .25s ease,filter .4s}
.person:hover{transform:translateY(-5px) scale(1.035)}
.person .chibi{width:100%;height:auto;cursor:pointer;
  filter:drop-shadow(0 10px 12px rgba(30,45,80,.22));
  animation:float 4s ease-in-out infinite;animation-delay:calc(var(--order) * .5s)}

.chibi .face,.chibi .ear,.chibi .skin{fill:var(--skin)}
.chibi .hair{fill:var(--hair)}
.chibi .hair-light{fill:var(--hair2)}
.chibi .glints circle{fill:#fff}
.chibi .brows path{fill:none;stroke:var(--hair);stroke-width:4;stroke-linecap:round;opacity:.75}
.chibi .blush ellipse{fill:#ff9aa2;opacity:.4}
.chibi .eyes ellipse{fill:#2f2724}
.chibi .mouth{fill:none;stroke:#8a4a3f;stroke-width:4.2;stroke-linecap:round}
.chibi .mouth-open{fill:#6d3a34;stroke:none}
.chibi .tongue{fill:#ff7d92}
.chibi .eye-slit{fill:none;stroke:#3a2c28;stroke-width:4.6;stroke-linecap:round}
.chibi .ground-shadow{fill:rgba(40,60,100,.16);transition:opacity .4s}
.chibi .shoe{fill:var(--shoe)}
.chibi .shirt{fill:var(--shirt)}
.chibi .shirt-band{fill:var(--band)}
.chibi .sleeve{fill:var(--sleeve,var(--shirt))}
.chibi .hem{fill:none;stroke:rgba(120,124,138,.35);stroke-width:3;stroke-linecap:round}
.chibi .print-bg{fill:#fdfcf7;stroke:rgba(120,130,150,.4);stroke-width:1.6}
.chibi .print-sun{fill:#f0a53c}
.chibi .print-blue{fill:#5b8dff}
.chibi .print-pink{fill:#ff8fb0}
.chibi .print-line{fill:#9aa3b2}
.chibi .chest{fill:var(--band);font-size:11px;font-family:ui-monospace,Menlo,monospace;letter-spacing:.1em}
.chibi .legs rect{fill:var(--pants)}
.chibi .toon{fill:var(--toy)}
.chibi .glasses rect{fill:rgba(255,255,255,.42);stroke:#3b3b45;stroke-width:3}
.chibi .glasses path{fill:none;stroke:#3b3b45;stroke-width:3;stroke-linecap:round}

/* 眨眼 */
.chibi .eyes{transform-box:fill-box;transform-origin:center;
  animation:hushEyes 5.6s infinite;animation-delay:var(--blink,0s)}
.chibi .blink{opacity:0;animation:showLids 5.6s infinite;animation-delay:var(--blink,0s)}
.chibi .blink path{fill:none;stroke:#3a2c28;stroke-width:4.4;stroke-linecap:round}

/* 道具 */
.prop{opacity:0;transition:opacity .45s}
.prop-umbrella{animation:umbBob 4.4s ease-in-out infinite}
.umb-canopy{fill:var(--umb)}
.umb-rib{fill:none;stroke:#6e6257;stroke-width:3;stroke-linecap:round}
.umb-shaft{fill:none;stroke:#6e6257;stroke-width:6;stroke-linecap:round}
.umb-handle{fill:none;stroke:#6e6257;stroke-width:6;stroke-linecap:round}
.scarf{fill:var(--scarf)}
.scarf-tail{fill:var(--scarf)}
.beanie{fill:var(--scarf)}
.beanie-rib{fill:rgba(255,255,255,.35)}
.cap-top{fill:var(--cap)}
.cap-brim{fill:var(--cap);opacity:.82}
.cap-band{fill:rgba(60,45,30,.22)}

.scene[data-weather="rain"] .prop-umbrella,
.scene[data-weather="storm"] .prop-umbrella,
.scene[data-weather="snow"] .prop-scarf,
.scene[data-weather="tornado"] .prop-scarf{opacity:1}
.scene[data-season="summer"][data-weather="sunny"] .prop-cap,
.scene[data-season="summer"][data-weather="rainbow"] .prop-cap,
.scene[data-season="summer"][data-weather="cloudy"] .prop-cap{opacity:1}

/* 天气下的小动作 */
.scene[data-weather="tornado"] .person .chibi{animation:wobble .5s ease-in-out infinite}
.scene[data-weather="tornado"] .person{animation:lift 2.6s ease-in-out infinite;animation-delay:calc(var(--order) * .3s)}
.scene[data-weather="snow"] .person .chibi{animation:shiver .28s linear infinite}
.scene[data-weather="tornado"] .umb-canopy{transform-origin:110px 40px;animation:flip 1.2s ease-in-out infinite}

/* 气泡 */
.bubble{
  position:absolute;left:50%;bottom:100%;transform:translate(-50%,-4px) scale(.86);
  opacity:0;transition:.24s cubic-bezier(.2,.9,.3,1.2);pointer-events:none;
  background:#fff;color:#2a2f45;padding:8px 13px;border-radius:15px;font-size:clamp(10px,1.02vw,14px);
  white-space:nowrap;box-shadow:0 10px 22px rgba(40,55,95,.2);font-weight:500;
}
.bubble::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:#fff;
}
.person.speaking .bubble{opacity:1;transform:translate(-50%,-14px) scale(1)}

/* ---- 场景角标 ---- */
.scene-badge{
  position:absolute;left:14px;top:14px;z-index:6;
  padding:7px 13px;border-radius:999px;font-size:13px;font-weight:600;color:#2b3350;
  background:rgba(255,255,255,.82);backdrop-filter:blur(8px);
  box-shadow:0 8px 18px rgba(40,60,110,.18);
}
.scene-hint{
  position:absolute;right:14px;bottom:12px;z-index:6;font-size:12px;color:#fff;
  padding:6px 11px;border-radius:999px;background:rgba(30,45,80,.42);backdrop-filter:blur(6px);
}
.scene-note{margin:0;font-size:13.5px;color:var(--ink-soft)}

/* ============ 天气台控件 ============ */
.control-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;margin:16px 0 14px;
}
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-size:12.5px;letter-spacing:.1em;color:var(--ink-soft)}
.field select{
  appearance:none;font-family:inherit;font-size:15px;color:var(--ink);
  padding:12px 40px 12px 15px;border-radius:16px;cursor:pointer;
  border:1px solid rgba(120,140,190,.25);background:#fff;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6480' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;background-size:17px;
  box-shadow:0 8px 18px rgba(60,80,140,.08);transition:.2s;
}
.field select:hover,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 10px 22px rgba(255,123,107,.2)}
.field.small select{padding:9px 36px 9px 12px;font-size:14px;border-radius:13px}

.switch{
  display:flex;align-items:center;gap:10px;align-self:end;
  padding:11px 16px;border-radius:16px;background:#fff;cursor:pointer;
  border:1px solid rgba(120,140,190,.25);box-shadow:0 8px 18px rgba(60,80,140,.08);
}
.switch input{width:18px;height:18px;accent-color:var(--accent)}

.presets{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  font-family:inherit;font-size:14px;cursor:pointer;
  padding:9px 15px;border-radius:999px;color:var(--ink);
  border:1px dashed rgba(120,140,190,.45);background:rgba(255,255,255,.85);
  transition:.18s;
}
.chip:hover{background:linear-gradient(135deg,#fff3e2,#ffe6ee);border-style:solid;transform:translateY(-2px)}
.state-line{
  margin:16px 0 0;font-size:14.5px;color:#434c6b;
  padding:11px 16px;border-radius:16px;background:rgba(91,141,255,.1);
}

/* ============ 一家人卡片 ============ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:18px}
.card{
  position:relative;padding:20px 20px 24px;border-radius:22px;text-align:center;
  background:linear-gradient(180deg,#ffffff,#f9fbff);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 14px 30px rgba(50,70,120,.1);
  transition:.25s;
}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 40px rgba(50,70,120,.16)}
.avatar{width:132px;margin:0 auto 10px}
.avatar .chibi{cursor:default;filter:drop-shadow(0 10px 14px rgba(30,45,80,.16))}
.card .avatar .prop{display:none}
.card h3{margin:4px 0 4px;font-size:19px}
.card .tag{margin:0 0 10px;font-size:13px;color:#c2574a;background:#fff0ec;display:inline-block;padding:3px 12px;border-radius:999px}
.card p{margin:0;font-size:14.4px;color:var(--ink-soft)}

/* ============ 游戏专区 ============ */
.sub-head{margin:22px 0 6px;font-size:clamp(17px,1.9vw,20px);letter-spacing:.02em}
.sub-note{margin:0 0 12px;color:var(--ink-soft);font-size:14.6px;max-width:78ch}

.game{
  margin-top:18px;padding:clamp(12px,1.8vw,18px);border-radius:24px;color:#e9eeff;
  background:linear-gradient(180deg,#121d3a,#1d2c56 60%,#22345f);
  box-shadow:0 24px 50px rgba(20,30,60,.35),inset 0 1px 0 rgba(255,255,255,.09);
}
.game-hud{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.stat{
  flex:1 1 104px;padding:9px 13px;border-radius:14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
}
.stat span{display:block;font-size:11px;letter-spacing:.14em;color:#9db0da}
.stat b{font-size:19px;letter-spacing:.02em}

.stage{
  position:relative;height:clamp(240px,32vw,300px);border-radius:18px;overflow:hidden;
  background:linear-gradient(#16224a,#2b3f74 62%,#3b5189);
  box-shadow:inset 0 0 60px rgba(0,0,0,.35);
}
.stage-sky{position:absolute;inset:0;background:radial-gradient(50% 46% at 76% 20%,rgba(255,225,150,.4),transparent 70%)}
.skyline{
  position:absolute;left:0;right:0;bottom:64px;height:160px;
  background:
    repeating-linear-gradient(90deg,rgba(10,18,38,.85) 0 44px,transparent 44px 78px),
    repeating-linear-gradient(90deg,rgba(16,26,50,.75) 22px 74px,transparent 74px 140px);
  background-size:100% 100%,100% 100%;
  background-position:0 bottom,0 bottom;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.3) 70%,transparent);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.3) 70%,transparent);
  animation:scrollSky .9s linear infinite;
  opacity:.9;
}
.road{position:absolute;left:0;right:0;bottom:0;height:76px;background:linear-gradient(#4b5170,#2c3149)}
.road-dash{
  position:absolute;top:22px;left:0;right:0;height:6px;
  background:repeating-linear-gradient(90deg,rgba(247,243,222,.85) 0 44px,transparent 44px 92px);
}
.stage[data-state="running"] .road-dash{animation:dashRoad .55s linear infinite}
.stage[data-state="running"] .skyline{animation-duration:.55s}

.runner{position:absolute;bottom:44px;width:clamp(86px,11vw,124px);transition:left .3s cubic-bezier(.2,.9,.2,1),transform .4s ease}
.runner svg{width:100%;height:auto;overflow:visible}
.runner.police{left:5%}
.runner.thief{left:78%}
.runner .rshadow{fill:rgba(0,0,0,.32)}
.runner .head{fill:#f6c9a2}
.runner .torso{fill:#3b425f}
.runner .leg,.runner .arm{fill:#2b3048}
.runner .shoe{fill:#151a2c}
.runner .torso{stroke:none}
.police .torso{fill:#2c4180}
.police .leg{fill:#22345f}
.police .arm{fill:#2c4180}
.police .cap{fill:#1d2b58}
.police .cap-brim{fill:#111c3d}
.police .cap-badge{fill:#ffd166}
.police .uniform path{fill:#f7f3e2;opacity:.9}
.police .badge{fill:#ffd166}
.police .belt{fill:#111a33}
.police .cuff{fill:none;stroke:#dfe6f5;stroke-width:5;opacity:0}
.police .eyes ellipse{fill:#2b2b33}
.police .smile{fill:none;stroke:#a35b4b;stroke-width:4;stroke-linecap:round}
.police .blush{fill:none;stroke:#ff9aa2;stroke-width:5;opacity:.6}
.thief .stripes rect{fill:#e8ecf6}
.thief .beanie{fill:#1a1f36}
.thief .beanie-pom{fill:#e8ecf6}
.thief .mask{fill:#0f1324}
.thief .eyes ellipse{fill:#fff}
.thief .sack path{fill:#c9a06a}
.thief .sack text{font-size:26px;text-anchor:middle}
.thief .smirk{fill:none;stroke:#f0d7c0;stroke-width:4;stroke-linecap:round}

.runner .leg,.runner .arm{transform-box:fill-box}
.runner.running .leg-front{animation:swingLeg .4s ease-in-out infinite alternate;transform-origin:50% 4%}
.runner.running .leg-back{animation:swingLeg .4s ease-in-out infinite alternate-reverse;transform-origin:50% 4%}
.runner.running .arm-front{animation:swingLeg .4s ease-in-out infinite alternate-reverse;transform-origin:50% 6%}
.runner.running .arm-back{animation:swingLeg .4s ease-in-out infinite alternate;transform-origin:50% 6%}
.runner.running .rbody{animation:bobRun .4s ease-in-out infinite alternate}
.runner.running{animation:none}

.stage[data-state="caught"] .police .cuff{opacity:1;animation:cuffFlash .4s steps(2) infinite}
.stage[data-state="caught"] .thief{animation:tripped .5s ease-out}
.stage[data-state="escaped"] .thief{transform:translateX(220%);transition:transform 1s cubic-bezier(.3,0,.8,.4)}
.runner.stumble{animation:stumble .45s ease-out}

.police-car{position:absolute;bottom:36px;left:1%;width:clamp(92px,12vw,150px);transition:left .35s ease;z-index:2;opacity:.95}
.police-car svg{width:100%;height:auto}
.police-car .carbody path{fill:#243a72}
.police-car .chair{fill:#8fb8ff;opacity:.7}
.police-car .wheel{fill:#101527}
.police-car .car-text{fill:#dce6ff;font-size:13px;text-anchor:middle;letter-spacing:.06em}
.police-car .cshadow{fill:rgba(0,0,0,.3)}
.police-car .lamp{opacity:.35}
.police-car .l1{fill:#ff5d5d}
.police-car .l2{fill:#5db3ff}
.stage[data-state="running"] .police-car .l1,.stage[data-state="caught"] .police-car .l1{animation:blinkA .5s steps(2) infinite}
.stage[data-state="running"] .police-car .l2,.stage[data-state="caught"] .police-car .l2{animation:blinkB .5s steps(2) infinite}

.catch-bar{position:absolute;left:16px;right:16px;top:14px;display:flex;align-items:center;gap:12px;z-index:4}
.catch-bar em{font-style:normal;font-size:12px;letter-spacing:.16em;color:#c6d4f6;white-space:nowrap}
.catch-track{flex:1;height:12px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.35)}
.catch-track i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#ffd166,#ff8f5e,#ff5d7a);transition:width .28s ease}

.stage-banner{
  position:absolute;left:0;right:0;top:42%;z-index:6;text-align:center;
  font-size:clamp(20px,3.4vw,34px);font-weight:800;letter-spacing:.06em;
  color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.45);
  opacity:0;transform:scale(.7);transition:.28s cubic-bezier(.2,.9,.3,1.4);pointer-events:none;
}
.stage-banner.show{opacity:1;transform:scale(1)}
.stage-hint{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:5;
  font-size:13px;color:#d5e0ff;background:rgba(10,18,40,.5);padding:6px 14px;border-radius:999px;
  backdrop-filter:blur(6px);transition:opacity .3s;
}
.stage[data-state="running"] .stage-hint{opacity:0}

.typer{
  margin-top:14px;padding:16px;border-radius:18px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
}
.word-box{text-align:center;padding:10px 0 16px;min-height:104px}
.word{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(26px,4.6vw,44px);font-weight:700;letter-spacing:.08em;
  color:#cfdcff;word-break:break-all;
}
.word .cn{display:block;font-family:inherit;font-size:.62em;letter-spacing:.24em;color:#ffd166;margin-bottom:6px}
.word .done{color:#6ff2a6}
.word .next{color:#ffd166;border-bottom:5px solid #ffd166;border-radius:2px}
.word .rest{color:#aebbdd}
.word-hint{margin-top:6px;font-size:13px;color:#93a4cd}
.word-box.wrong{animation:shakeX .3s}
.word-box.wrong .word{color:#ff8f8f}

.type-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.typebox{flex:1 1 260px}
.typebox input{
  width:100%;padding:14px 18px;border-radius:15px;font-size:20px;font-family:inherit;
  color:#fff;background:rgba(8,14,32,.55);border:2px solid rgba(140,170,255,.35);
  letter-spacing:.06em;transition:.2s;
}
.typebox input::placeholder{color:#7c8cb8;font-size:15px;letter-spacing:0}
.typebox input:focus{outline:none;border-color:#ffd166;box-shadow:0 0 0 4px rgba(255,209,102,.18)}
.game-btns{display:flex;gap:9px;flex-wrap:wrap}
.game-btns .btn{background:rgba(255,255,255,.1);color:#e9eeff;border-color:rgba(255,255,255,.18);box-shadow:none}
.game-btns .btn:hover{background:rgba(255,255,255,.18)}
.game-btns .btn.primary{background:linear-gradient(135deg,#ff7b6b,#ffb36b);color:#fff;border-color:transparent}

.game-meta{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;margin-top:14px}
.game-meta .field{color:#c6d4f6}
.game-meta .field select{background-color:rgba(8,14,32,.55);color:#e9eeff;border-color:rgba(140,170,255,.3)}
.game-tip{margin:0;font-size:13px;color:#96a6cd}
kbd{
  font-family:ui-monospace,Menlo,monospace;font-size:12px;padding:2px 7px;border-radius:6px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#e9eeff;
}

/* ============ 涂鸦板 ============ */
.draw{margin-top:6px}
.draw-body{display:grid;grid-template-columns:minmax(0,1fr) 254px;gap:18px;align-items:start}
.draw-canvas-wrap{
  position:relative;border-radius:18px;overflow:hidden;background:#fff;
  box-shadow:0 18px 36px rgba(30,48,95,.18),inset 0 0 0 1px rgba(255,255,255,.6);
}
.draw-canvas-wrap[data-bg="paper"]{background:linear-gradient(#ffffff,#f6fbff)}
.draw-canvas-wrap[data-bg="spring"]{background:linear-gradient(#eaf7ff,#d9f0c9)}
.draw-canvas-wrap[data-bg="night"]{background:linear-gradient(#1b2450,#31518f)}
.draw-canvas-wrap[data-bg="snow"]{background:linear-gradient(#f6fbff,#e4eef8)}
#dCanvas{display:block;width:100%;aspect-ratio:14/9;touch-action:none;cursor:crosshair}
.draw-hint{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:14px;color:#4c5673;background:rgba(255,255,255,.88);
  padding:8px 16px;border-radius:999px;pointer-events:none;
  box-shadow:0 6px 16px rgba(40,60,110,.14);transition:opacity .45s;
}
.draw-hint.hide{opacity:0}

.draw-tools{display:flex;flex-direction:column;gap:14px}
.tool-row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.tool-label{font-size:12.5px;letter-spacing:.1em;color:var(--ink-soft);min-width:54px}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{
  width:30px;height:30px;padding:0;border-radius:50%;cursor:pointer;
  border:2px solid #fff;box-shadow:0 3px 9px rgba(40,60,110,.22);transition:.15s;
}
.swatch:hover{transform:scale(1.12)}
.swatch.active{box-shadow:0 0 0 3px var(--accent),0 3px 9px rgba(40,60,110,.22)}
.tbtn{padding:9px 13px;font-size:14px}
.tbtn.active{background:linear-gradient(135deg,var(--accent),#ffb36b);color:#fff;border-color:transparent}
.tbtn.stamp{font-size:19px;line-height:1;padding:6px 10px}
.mini-check{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:13.5px;color:var(--ink-soft);padding:7px 12px;border-radius:13px;
  background:#fff;border:1px solid rgba(120,140,190,.25);box-shadow:0 5px 12px rgba(60,80,140,.07);
}
.mini-check input{width:16px;height:16px;accent-color:var(--accent)}
.draw-field{gap:6px}
.draw-field span{font-size:12.5px;color:var(--ink-soft)}
.draw-field input[type="range"]{width:100%;accent-color:var(--accent)}
.mini-select{
  appearance:none;font-family:inherit;font-size:14px;color:var(--ink);cursor:pointer;
  padding:9px 34px 9px 12px;border-radius:13px;background:#fff;
  border:1px solid rgba(120,140,190,.25);box-shadow:0 6px 14px rgba(60,80,140,.08);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6480' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;background-size:16px;
}
.draw-actions{margin-top:2px}
.draw-tip{margin:0;font-size:12.5px;color:var(--ink-soft);line-height:1.6}
.draw-tip kbd{background:#f0f4fb;border-color:#dbe3f0;color:#4c5673}

/* ============ 页脚 ============ */
footer{
  position:relative;z-index:1;text-align:center;padding:8px 20px 46px;color:var(--ink-soft);font-size:14px;
}
footer p{margin:4px 0}
footer .tiny{font-size:12.5px;opacity:.8}

/* ============ 动画 ============ */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes hushEyes{0%,90%,100%{transform:scaleY(1)}93%,96%{transform:scaleY(.12)}}
@keyframes showLids{0%,90%,100%{opacity:0}93%,96%{opacity:1}}
@keyframes drift{from{transform:translateX(-26px)}to{transform:translateX(26px)}}
@keyframes swirl{from{transform:rotate(0) translateX(0)}to{transform:rotate(360deg)}}
@keyframes twinkle{0%,100%{opacity:var(--stars-op)}50%{opacity:calc(var(--stars-op) * .35)}}
@keyframes fly{from{transform:translate(-260px,120px)}to{transform:translate(1420px,60px)}}
@keyframes puff{0%{transform:translate(0,0) scale(.7);opacity:.5}100%{transform:translate(-28px,-46px) scale(1.5);opacity:0}}
@keyframes sway{0%,100%{transform:rotate(-.6deg)}50%{transform:rotate(.6deg)}}
@keyframes shakeTree{0%,100%{transform:rotate(-2.6deg)}50%{transform:rotate(2.6deg)}}
@keyframes wobble{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-6px)}}
@keyframes lift{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes flip{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(14deg) scale(1.06)}}
@keyframes shiver{0%,100%{transform:translateX(-1.5px)}50%{transform:translateX(1.5px)}}
@keyframes umbBob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4px) rotate(1deg)}}
@keyframes scrollSky{to{background-position:-122px bottom,130px bottom}}
@keyframes dashRoad{to{background-position-x:-92px}}
@keyframes swingLeg{from{transform:rotate(-18deg)}to{transform:rotate(20deg)}}
@keyframes bobRun{from{transform:translateY(2px) rotate(-1deg)}to{transform:translateY(-6px) rotate(1deg)}}
@keyframes stumble{0%{transform:translateY(0) rotate(0)}30%{transform:translateY(-10px) rotate(-12deg)}60%{transform:translateY(2px) rotate(6deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes tripped{0%{transform:rotate(0)}100%{transform:rotate(78deg) translateY(10px)}}
@keyframes cuffFlash{0%,49%{opacity:1}50%,100%{opacity:.35}}
@keyframes blinkA{0%,49%{opacity:.95}50%,100%{opacity:.15}}
@keyframes blinkB{0%,49%{opacity:.15}50%,100%{opacity:.95}}
@keyframes shakeX{0%,100%{transform:translateX(0)}25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}

/* ============ 响应式 ============ */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr}
  .hero-copy{order:1}
  .scene-wrap{order:2}
  .draw-body{grid-template-columns:1fr}
}
@media (max-width:620px){
  .topbar{flex-direction:column;align-items:flex-start;gap:8px}
  .brand-text small{display:none}
  .scene-hint{display:none}
  .word-box{min-height:88px}
  .runner{bottom:38px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.06s !important}
  html{scroll-behavior:auto}
}