/* 九宮虎姬 共用樣式：三個玩法版本都吃這一份 */
:root{
  --bg:#120b1c; --panel:#1d1230; --line:#573a7d;
  --gold:#f6c453; --gold2:#ffe9a8; --text:#f6efff; --dim:#a894c4;
  --ok:#4ade80; --bad:#f87171; --p1:#f6c453; --p2:#6ea8ff;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{overflow-x:hidden}
body{
  min-height:100dvh;color:var(--text);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  background:radial-gradient(90% 60% at 50% -10%,#4b2a6b 0%,#1c1029 55%,var(--bg) 100%);
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 10px 28px;
}
body::before{
  content:"";position:fixed;inset:-20%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%,#f6c45322,transparent 45%),
    radial-gradient(circle at 80% 20%,#a855f733,transparent 40%),
    radial-gradient(circle at 60% 90%,#22d3ee1a,transparent 45%);
  animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{to{transform:translate3d(2%,-2%,0) scale(1.06)}}

h1{
  font-size:clamp(16px,2.4vw,22px);letter-spacing:3px;text-align:center;
  background:linear-gradient(180deg,#fff6d8,var(--gold) 60%,#c98a1e);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 6px #0009);
}

/* 版本切換列 */
.vers{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.vers a{
  font-size:12px;text-decoration:none;color:var(--gold2);padding:5px 10px;border-radius:99px;
  border:1px solid var(--line);background:#2a1a40;
}
.vers a.on{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#3a2400;font-weight:700}

/* 角色 */
.hero{display:none}
@media (min-width:1080px){
  .hero{
    display:block;position:fixed;left:0;bottom:0;
    height:min(62vh,620px);width:auto;max-width:25vw;object-fit:contain;object-position:bottom center;
    z-index:-1;pointer-events:none;filter:drop-shadow(0 12px 40px #000c);
    animation:float 6s ease-in-out infinite alternate;
  }
  .say.on{display:block;animation:sayIn .35s cubic-bezier(.2,1.6,.4,1)}
}
@keyframes float{to{transform:translateY(-12px)}}
.hero.react{animation:heroJump .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes heroJump{
  30%{transform:translateY(-26px) scale(1.06) rotate(-2deg)}
  60%{transform:translateY(4px) scale(.98)}100%{transform:none}
}
.hero.shake{animation:heroShake .5s}
@keyframes heroShake{20%{transform:rotate(-3deg)}45%{transform:rotate(3deg)}70%{transform:rotate(-2deg)}100%{transform:none}}
.hero.glow{filter:drop-shadow(0 0 26px #f6c453cc) drop-shadow(0 12px 40px #000c)}
.say{
  display:none;position:fixed;left:min(20vw,250px);bottom:min(52vh,420px);z-index:3;
  max-width:190px;padding:10px 14px;border-radius:16px 16px 16px 4px;
  background:linear-gradient(180deg,#fff8e6,#ffe9a8);color:#3a2400;
  font-size:15px;font-weight:800;line-height:1.5;text-align:center;box-shadow:0 8px 24px #000a;
}
@keyframes sayIn{from{transform:scale(.6) translateY(10px);opacity:0}}
.cat{
  position:absolute;right:min(-6vw,-46px);bottom:-18px;width:min(24vw,150px);z-index:8;
  pointer-events:none;transform:translateY(125%) rotate(12deg);opacity:0;
  transition:transform .45s cubic-bezier(.2,1.7,.4,1),opacity .2s linear;
  filter:drop-shadow(0 8px 20px #000a);
}
.cat.on{transform:translateY(6%) rotate(0);opacity:1}
.cat.big{animation:catBig .9s cubic-bezier(.2,1.5,.4,1)}
@keyframes catBig{40%{transform:translateY(-6%) scale(1.22) rotate(-6deg)}100%{transform:translateY(6%)}}

/* 背景金幣 */
.coin{
  position:fixed;top:-40px;z-index:-1;pointer-events:none;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff3c4,#f6c453 45%,#b8860b 100%);
  box-shadow:0 0 10px #f6c45366;animation:fall linear forwards;
}
@keyframes fall{
  0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.85}
  90%{opacity:.5}100%{transform:translateY(105vh) rotate(720deg) scaleX(.4);opacity:0}
}

/* 共用元件 */
.stats{display:flex;gap:8px;width:min(96vw,560px)}
.st{
  flex:1;background:linear-gradient(180deg,#2e1c47,#1a1029);border:1px solid var(--line);
  border-radius:12px;padding:6px 4px;text-align:center;box-shadow:inset 0 1px 0 #ffffff14;
}
.st b{display:block;font-size:10px;color:var(--dim);letter-spacing:1px}
.st span{font-size:clamp(15px,2.6vw,20px);color:var(--gold2);font-weight:700;font-variant-numeric:tabular-nums}
.st.warn span{color:var(--bad);animation:pulse .5s infinite alternate}
@keyframes pulse{to{transform:scale(1.12)}}

.timebar{width:min(96vw,560px);height:8px;border-radius:99px;background:#2a1a3d;
  overflow:hidden;border:1px solid var(--line)}
.timebar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#4ade80,#f6c453 60%,#f87171);transition:width .25s linear}

.btn{
  height:52px;border:none;border-radius:16px;cursor:pointer;font-size:18px;font-weight:800;
  letter-spacing:3px;color:#3a2400;background:linear-gradient(180deg,#fff0c4,var(--gold));
  box-shadow:0 5px 0 #a97a12,0 10px 26px #0008;
}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #a97a12}
.btn.ghost{background:#2a1a40;color:var(--gold2);border:1px solid var(--line);box-shadow:none;font-weight:700}
.levels{display:flex;gap:8px;width:min(96vw,560px)}
.lv{
  flex:1;padding:9px 4px;border-radius:12px;cursor:pointer;font-size:13px;font-weight:700;
  border:1px solid var(--line);background:#2a1a40;color:var(--gold2);line-height:1.4;
}
.lv b{display:block;font-size:10px;font-weight:500;color:var(--dim)}
.lv.on{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#3a2400;border-color:var(--gold)}
.lv.on b{color:#6b4a00}
.note{font-size:11px;color:var(--dim);text-align:center;max-width:560px;line-height:1.7}
.note b{color:var(--gold2)}

/* 飄分與粒子 */
.float{
  position:absolute;pointer-events:none;font-weight:800;font-size:clamp(14px,3vw,22px);
  color:var(--gold2);text-shadow:0 2px 8px #000;z-index:9;animation:floatup .9s ease-out forwards;
}
@keyframes floatup{to{transform:translateY(-46px) scale(1.15);opacity:0}}
.spark{position:absolute;width:7px;height:7px;border-radius:50%;pointer-events:none;z-index:9;
  animation:spark .7s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}

/* 結算 */
.over{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;
  background:#0b0714dd;backdrop-filter:blur(6px);padding:16px}
.over.on{display:flex;animation:fade .3s}
@keyframes fade{from{opacity:0}}
.card{
  width:min(94vw,460px);background:linear-gradient(180deg,#2f1d48,#1a1028);border:1px solid var(--line);
  border-radius:20px;padding:20px;text-align:center;box-shadow:0 20px 60px #000b;
  animation:cardin .4s cubic-bezier(.2,1.5,.4,1);max-height:92vh;overflow:auto;
}
@keyframes cardin{from{transform:scale(.85) translateY(20px);opacity:0}}
.card h2{font-size:24px;color:var(--gold);letter-spacing:2px;margin-bottom:4px}
.card .big{font-size:44px;font-weight:900;color:var(--gold2);margin:6px 0;
  font-variant-numeric:tabular-nums;text-shadow:0 3px 0 #7a4a00}
.card .line{display:flex;justify-content:space-between;font-size:14px;color:var(--dim);
  padding:6px 2px;border-bottom:1px dashed #ffffff1a}
.card .line span{color:var(--text);font-weight:700}
.weak{margin-top:12px;text-align:left}
.weak h3{font-size:13px;color:var(--gold);margin-bottom:6px}
.weak ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.weak li{background:#3a2456;border:1px solid var(--line);border-radius:8px;padding:4px 8px;font-size:13px}
.weak li i{font-style:normal;color:var(--bad);font-size:11px}
.card .btn{margin-top:16px;width:100%}