/* 天气的影响 —— 版式与配色
   面向三年级：大字号、高对比、圆润；投影与平板都能看清。 */

:root{
  --ink:#1b3a55;
  --ink-2:#54748f;
  --blue:#2f8ef0;
  --blue-d:#1b6fd0;
  --orange:#ff9b3d;
  --orange-d:#e07812;
  --green:#23b574;
  --green-l:#e6f9ef;
  --red:#ff5f5f;
  --red-l:#ffeded;
  --purple:#8a6ff0;
  --yellow:#ffd166;
  --card:#ffffff;
  --line:#dbe9f6;
  --radius:22px;
  --font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",
         system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}

html,body{
  margin:0;min-height:100%;
  background:linear-gradient(165deg,#e6f4ff 0%,#f2fbff 45%,#eef3ff 100%);
  background-attachment:fixed;
  font-family:var(--font);color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

.app{position:relative;max-width:1560px;margin:0 auto;padding:16px 20px 40px}

/* ───────────── 顶栏 ───────────── */
.bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 20px;background:var(--card);
  border:2px solid var(--line);border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(31,90,150,.10);
}
.brand{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.brand h1{margin:0;font-size:32px;font-weight:900;letter-spacing:1px}
.tag{background:linear-gradient(135deg,var(--blue),#5aa9f7);color:#fff;
  font-size:15px;font-weight:800;padding:5px 13px;border-radius:999px}
.sub{font-size:16px;font-weight:700;color:var(--ink-2)}
.bar-actions{display:flex;flex-wrap:wrap;gap:10px}

.chip{
  font-family:inherit;font-size:17px;font-weight:800;
  padding:11px 18px;min-height:46px;border-radius:999px;cursor:pointer;
  border:2px solid var(--line);background:#f7fbff;color:var(--ink);
  transition:transform .12s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
.chip:hover{background:#eaf5ff;border-color:#bcdcf7;color:var(--blue-d)}
.chip:active{transform:translateY(2px)}

/* ───────────── 标签栏 ───────────── */
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
@media (max-width:860px){ .tabs{grid-template-columns:1fr} }

.tab{
  font-family:inherit;text-align:left;cursor:pointer;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:14px 18px;border-radius:20px;
  background:var(--card);border:2px solid var(--line);color:var(--ink);
  box-shadow:0 6px 18px rgba(31,90,150,.08);
  transition:transform .12s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.tab:hover{border-color:#bcdcf7}
.tab:active{transform:translateY(2px)}
.tab .tab-i{font-size:26px;line-height:1}
.tab .tab-t{font-size:20px;font-weight:900}
.tab .tab-d{
  flex-basis:100%;padding-left:36px;
  font-size:14px;font-weight:700;color:var(--ink-2);
}
.tab.on{
  background:linear-gradient(135deg,#2f8ef0,#5aa9f7);
  border-color:transparent;color:#fff;
  box-shadow:0 10px 26px rgba(47,142,240,.32);
}
.tab.on .tab-d{color:#dcecff}

/* ───────────── 面板 ───────────── */
.panel{display:none;margin-top:16px}
.panel.on{display:block;animation:fadeUp .3s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.hint-bar{
  margin-bottom:14px;padding:11px 20px;border-radius:16px;
  background:#fff7e8;border:2px solid #ffe2b8;
  font-size:17px;font-weight:800;color:#8a5a1e;
}
.sec-title{margin:18px 0 12px;font-size:23px;font-weight:900;color:var(--ink)}

/* ═══════ 面板一：情境判断 ═══════ */
.scene{
  display:flex;align-items:stretch;gap:0;overflow:hidden;
  background:var(--card);border:2px solid var(--line);border-radius:var(--radius);
  box-shadow:0 10px 28px rgba(31,90,150,.10);
}
.scene-side{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:22px 16px;text-align:center;
}
.scene-arrow{display:flex;align-items:center;font-size:30px;color:#bcd8f0;padding:0 6px}
.scene-emoji{font-size:64px;line-height:1;transition:transform .3s ease}
.scene-emoji.wx{animation:wxIn .45s ease}
@keyframes wxIn{0%{transform:scale(.6) rotate(-12deg);opacity:0}100%{transform:none;opacity:1}}
.scene-who{font-size:22px;font-weight:900}
.scene-where{font-size:16px;font-weight:700;color:var(--ink-2)}
.scene-side:last-child{background:linear-gradient(160deg,#eef7ff,#e3f1ff)}

.ask{margin:20px 0 14px;font-size:26px;font-weight:900;text-align:center}

.opts{display:flex;flex-direction:column;gap:12px}
.opt{
  font-family:inherit;text-align:left;cursor:pointer;
  display:flex;align-items:center;gap:14px;
  padding:16px 22px;min-height:62px;border-radius:18px;
  background:#f8fbff;border:2px solid var(--line);color:var(--ink);
  font-size:20px;font-weight:800;line-height:1.45;
  transition:transform .12s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
.opt .mk{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#e8f2fc;color:var(--blue-d);font-size:18px;font-weight:900;
}
.opt:hover{background:#eaf5ff;border-color:#b9dbf8}
.opt:active{transform:translateY(2px)}
.opt.right{background:var(--green-l);border-color:#8fe0bb;color:#0f7a4c}
.opt.right .mk{background:#c8f0dd;color:#0f7a4c}
.opt.wrong{background:var(--red-l);border-color:#ffb3b3;color:#c0392b;animation:shake .4s ease}
.opt.wrong .mk{background:#ffd6d6;color:#c0392b}
.opt.dim{opacity:.55}
@keyframes shake{
  0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}
  45%{transform:translateX(6px)}70%{transform:translateX(-4px)}
}

.fb{
  margin:16px 0 0;padding:16px 22px;border-radius:18px;
  background:#f4f9ff;border:2px dashed #bcdcf7;
  font-size:19px;font-weight:800;color:var(--ink-2);line-height:1.6;
}
.fb.ok{background:var(--green-l);border-color:#b6ecd1;color:#0f7a4c}
.fb.no{background:var(--red-l);border-color:#ffc9c9;color:#c0392b}

.scene-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;margin-top:18px;
}
.prog{display:flex;align-items:center;gap:12px;flex:1;min-width:240px}
.pbar{flex:1;height:16px;border-radius:999px;background:#e8f1fa;border:2px solid var(--line);overflow:hidden}
.pbar i{display:block;height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg,#4fd39a,var(--green));
  transition:width .45s cubic-bezier(.34,1.56,.64,1)}
.prog span{font-size:17px;font-weight:900;color:var(--ink-2);white-space:nowrap}
.nav{display:flex;gap:10px}

.mini{
  font-family:inherit;font-size:17px;font-weight:900;
  padding:11px 20px;min-height:48px;border-radius:999px;cursor:pointer;
  background:var(--blue);border:2px solid transparent;color:#fff;
  transition:transform .12s ease,filter .2s ease;
}
.mini:hover{filter:brightness(1.07)}
.mini:active{transform:translateY(2px)}
.mini.ghost{background:#fff;color:var(--blue-d);border-color:#bcdcf7}
.mini:disabled{opacity:.4;cursor:not-allowed;filter:none;transform:none}

/* 应对小抄（全部答对后出现） */
.cheat{
  display:none;margin-top:22px;padding:20px;border-radius:var(--radius);
  background:linear-gradient(160deg,#fffdf6,#fff6e6);
  border:2px solid #ffe2b8;
}
.cheat.show{display:block;animation:fadeUp .4s ease}
.cheat-head{font-size:22px;font-weight:900;color:var(--orange-d);margin-bottom:14px}
.cheat-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.ci{
  display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;
  padding:12px 16px;border-radius:16px;background:#fff;border:2px solid #ffe9cc;
}
.ci i{grid-row:span 2;font-size:28px;font-style:normal}
.ci b{font-size:18px;font-weight:900}
.ci span{font-size:15px;font-weight:700;color:var(--ink-2);line-height:1.45}

/* ═══════ 面板二：翻转卡 ═══════ */
.flips{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){ .flips{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .flips{grid-template-columns:1fr} }

.flip{perspective:1200px}
.flip-in{
  position:relative;min-height:250px;cursor:pointer;
  transition:transform .6s cubic-bezier(.4,.2,.2,1);
  transform-style:preserve-3d;
}
.flip.on .flip-in{transform:rotateY(180deg)}
.face{
  position:absolute;inset:0;border-radius:20px;padding:18px 16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;text-align:center;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border:2px solid var(--line);box-shadow:0 8px 22px rgba(31,90,150,.10);
}
.front{background:linear-gradient(160deg,#ffffff,#eef7ff)}
.back{background:linear-gradient(160deg,#eafaf1,#dff6e9);border-color:#b6ecd1;transform:rotateY(180deg)}
.back.hard{background:linear-gradient(160deg,#fff3e6,#ffe7cf);border-color:#ffd0a1}
.face .em{font-size:46px;line-height:1}
.face .role{font-size:21px;font-weight:900}
.face .q{font-size:16px;font-weight:700;color:var(--ink-2)}
.face .ans{font-size:17px;font-weight:800;line-height:1.6;color:#0f7a4c}
.back.hard .ans{color:#a85812}
.face .tap{
  margin-top:2px;font-size:14px;font-weight:800;color:var(--blue-d);
  background:#e8f2fc;padding:5px 12px;border-radius:999px;
}

/* 台风大卡 */
.typhoon{perspective:1400px}
.typhoon .flip-in{min-height:380px}
.typhoon .face{padding:26px 30px;gap:12px}
.typhoon .front{background:linear-gradient(160deg,#eef4ff,#dfe9ff);border-color:#c3d4f7}
.typhoon .back{background:linear-gradient(160deg,#fff1f1,#ffe1e1);border-color:#ffbcbc}
.typhoon .big-em{font-size:64px;line-height:1;animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.typhoon .head{font-size:24px;font-weight:900}
.typhoon .sub2{font-size:17px;font-weight:700;color:var(--ink-2)}
.typhoon .who-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:4px}
.typhoon .who{
  display:flex;align-items:center;gap:9px;padding:10px 18px;border-radius:16px;
  background:#fff;border:2px solid #d6e4fb;font-size:18px;font-weight:800;
}
.typhoon .who i{font-style:normal;font-size:24px}
.typhoon .cost{display:grid;gap:8px;width:100%;max-width:820px;text-align:left}
.typhoon .cost div{
  display:flex;gap:10px;align-items:flex-start;
  padding:9px 14px;border-radius:14px;background:#fff;border:2px solid #ffd2d2;
  font-size:17px;font-weight:800;color:#a83232;line-height:1.5;
}
.typhoon .cost i{font-style:normal;font-size:20px;flex:0 0 auto}
.typhoon .punch{
  margin-top:6px;padding:12px 22px;border-radius:16px;
  background:#c0392b;color:#fff;font-size:20px;font-weight:900;
}

/* ═══════ 面板三：天气与植物 ═══════ */
.wbar{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){ .wbar{grid-template-columns:1fr} }
.wbtn{
  font-family:inherit;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px;border-radius:20px;min-height:64px;
  background:var(--card);border:2px solid var(--line);color:var(--ink);
  font-size:21px;font-weight:900;
  box-shadow:0 6px 18px rgba(31,90,150,.08);
  transition:transform .12s ease,border-color .2s ease,background .2s ease;
}
.wbtn i{font-style:normal;font-size:28px}
.wbtn:hover{border-color:#bcdcf7}
.wbtn:active{transform:translateY(2px)}
.wbtn.on{background:linear-gradient(135deg,#2f8ef0,#5aa9f7);border-color:transparent;color:#fff;
  box-shadow:0 10px 26px rgba(47,142,240,.30)}

.wtoggle{display:flex;gap:10px;justify-content:center;margin:16px 0}
.tbtn{
  font-family:inherit;font-size:18px;font-weight:900;cursor:pointer;
  padding:12px 24px;min-height:50px;border-radius:999px;
  background:#fff;border:2px solid var(--line);color:var(--ink-2);
  transition:transform .12s ease,background .2s ease,color .2s ease,border-color .2s ease;
}
.tbtn.on[data-lv="good"]{background:var(--green-l);border-color:#8fe0bb;color:#0f7a4c}
.tbtn.on[data-lv="bad"]{background:var(--red-l);border-color:#ffb3b3;color:#c0392b}
.tbtn:active{transform:translateY(2px)}

.plant-card{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:28px 24px 26px;border-radius:var(--radius);
  border:2px solid var(--line);
  background:linear-gradient(170deg,#fffdf3,#eefaf1);
  box-shadow:0 10px 28px rgba(31,90,150,.10);
  transition:background .45s ease,border-color .45s ease;
}
.plant-card.sun-good{background:linear-gradient(170deg,#fffbe8,#fff2c9);border-color:#ffe08a}
.plant-card.sun-bad {background:linear-gradient(170deg,#fff3e2,#ffe0bd);border-color:#ffc07a}
.plant-card.rain-good{background:linear-gradient(170deg,#eef8ff,#dcf0ff);border-color:#a9d8f7}
.plant-card.rain-bad {background:linear-gradient(170deg,#e9eef5,#cfd9e6);border-color:#9fb3c8}
.plant-card.wind-good{background:linear-gradient(170deg,#eefcf8,#dcf6ee);border-color:#a7e2d0}
.plant-card.wind-bad {background:linear-gradient(170deg,#eef1f8,#d9e2f2);border-color:#a9b8d8}

.plant-sky{font-size:44px;line-height:1;transition:font-size .35s ease}
.plant-emoji{
  font-size:104px;line-height:1;
  transition:transform .45s cubic-bezier(.34,1.4,.64,1),filter .45s ease;
}
.plant-emoji.wilt{transform:rotate(-22deg) scale(.86);filter:saturate(.55) brightness(.95)}
.plant-emoji.fall{transform:rotate(-46deg) translateY(10px) scale(.9);filter:saturate(.6) brightness(.95)}
.plant-emoji.strong{transform:scale(1.12)}
.plant-tag{
  padding:7px 20px;border-radius:999px;
  font-size:19px;font-weight:900;
  background:var(--green-l);color:#0f7a4c;border:2px solid #b6ecd1;
}
.plant-tag.bad{background:var(--red-l);color:#c0392b;border-color:#ffc9c9}
.plant-text{
  margin:4px 0 0;max-width:900px;text-align:center;
  font-size:21px;font-weight:800;line-height:1.7;color:var(--ink);
}

/* ───────────── 撒花 ───────────── */
.rain{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:70}
.rain span{position:absolute;bottom:-60px;font-size:34px;animation:rise 2.6s linear forwards}
@keyframes rise{
  0%{transform:translateY(0) rotate(0);opacity:0}
  12%{opacity:1}
  100%{transform:translateY(-104vh) rotate(360deg);opacity:0}
}

/* ───────────── 小屏 ───────────── */
@media (max-width:1120px){
  .brand h1{font-size:26px}
  .scene-who{font-size:19px}
  .ask{font-size:22px}
  .opt{font-size:18px;padding:14px 18px}
  .plant-emoji{font-size:84px}
  .plant-text{font-size:19px}
  .typhoon .head{font-size:21px}
  .typhoon .cost div{font-size:16px}
}