/* 角的分类互动课件 公共样式（适配希沃触摸一体机 1920×1080） */
:root{
  --blue:#2f6fde; --blue-d:#1d4fb0; --orange:#ff8a1f; --orange-d:#e06a00;
  --green:#22a35a; --red:#e5484d; --purple:#7b5cd6; --ink:#24324a; --muted:#5d6b82;
  --card:#ffffffee; --line:#dfe6f2;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",sans-serif;color:var(--ink);
  background:#eef5ff url(bg-page.jpg) center/cover no-repeat;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;
  -webkit-tap-highlight-color:transparent;
}
img{-webkit-user-drag:none;pointer-events:none}
.app{height:100vh;display:flex;flex-direction:column}
header{
  height:84px;flex:none;display:flex;align-items:center;gap:18px;padding:0 24px;
  background:linear-gradient(90deg,#2f6fde,#4b8cf2);color:#fff;box-shadow:0 3px 12px #1d4fb033;
}
header .tag{background:#ffffff2e;border:2px solid #ffffff66;border-radius:30px;padding:6px 18px;font-size:22px}
header h1{font-size:34px;letter-spacing:2px}
header .sp{flex:1}
.hbtn{
  min-width:64px;height:58px;border-radius:16px;border:2px solid #ffffff88;background:#ffffff22;color:#fff;
  font-size:22px;padding:0 16px;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;
}
.hbtn:active{background:#ffffff44}
main{flex:1;display:flex;min-height:0;padding:16px;gap:16px}
.stage{flex:1;position:relative;background:var(--card);border-radius:24px;box-shadow:0 6px 24px #2f6fde1f;overflow:hidden}
.stage svg{width:100%;height:100%;display:block}
.panel{width:360px;flex:none;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.panel .group{background:var(--card);border-radius:20px;padding:14px;box-shadow:0 4px 16px #2f6fde14;display:flex;flex-direction:column;gap:10px}
.panel .gt{font-size:20px;color:var(--muted);padding-left:4px}
.btn{
  min-height:64px;border:none;border-radius:16px;font-size:24px;font-weight:bold;font-family:inherit;cursor:pointer;
  color:#fff;background:var(--blue);box-shadow:0 5px 0 var(--blue-d);display:flex;align-items:center;justify-content:center;gap:10px;
  padding:0 14px;transition:transform .08s,filter .2s;
}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--blue-d)}
.btn.o{background:var(--orange);box-shadow:0 5px 0 var(--orange-d)}
.btn.g{background:var(--green);box-shadow:0 5px 0 #157a40}
.btn.p{background:var(--purple);box-shadow:0 5px 0 #5a3eb0}
.btn.w{background:#fff;color:var(--blue);box-shadow:0 5px 0 #c9d6ee;border:2px solid #c9d6ee}
.btn.on{filter:brightness(1.12);outline:4px solid #ffd54a;outline-offset:2px}
.btn .n{display:inline-flex;width:36px;height:36px;border-radius:50%;background:#ffffff33;align-items:center;justify-content:center;font-size:22px}
.row{display:flex;gap:10px}.row .btn{flex:1}
/* 提示气泡 + 角宝宝 */
.tip{
  position:absolute;left:24px;top:20px;max-width:62%;background:#fff;border:3px solid #ffcf8a;border-radius:20px;
  padding:14px 20px;font-size:26px;line-height:1.5;box-shadow:0 4px 14px #ff8a1f22;transition:opacity .3s;
}
.tip b{color:var(--orange-d)}
.mascot{position:absolute;right:10px;bottom:6px;width:170px;transition:transform .4s}
.mascot.jump{animation:jump .6s ease 2}
@keyframes jump{50%{transform:translateY(-30px) rotate(-6deg)}}
/* 结论卡片 */
.card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;
  background:#fff;border-radius:28px;padding:30px 40px;box-shadow:0 20px 60px #1d4fb044;border:4px solid #8fb5f7;
  min-width:560px;max-width:80%;text-align:center;transition:all .35s cubic-bezier(.3,1.5,.6,1);z-index:10;
}
.card.show{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
.card h2{font-size:40px;color:var(--blue-d);margin-bottom:14px}
.card p{font-size:30px;line-height:1.7}
.card .big{font-size:44px;font-weight:bold;color:var(--orange-d);margin:8px 0}
.card.side{left:auto;right:24px;top:24px;transform:scale(.6);transform-origin:top right;min-width:0;width:480px;padding:26px 28px;text-align:left}
.card.side.show{transform:scale(1)}
.card.side h2{font-size:34px}.card.side p{font-size:27px}.card.side .big{font-size:36px}
.card .x{position:absolute;right:14px;top:10px;width:56px;height:56px;border-radius:50%;border:none;background:#eef3fb;font-size:30px;color:var(--muted);cursor:pointer}
/* SVG 通用 */
.lbl{font-size:30px;font-weight:bold;fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:6px}
.deg{font-size:44px;font-weight:bold;fill:var(--orange-d);paint-order:stroke;stroke:#fff;stroke-width:8px}
.hint-pulse{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.9}50%{opacity:.25}}
.fade{transition:opacity .4s}