/* ============ 深海大富翁：黃金捕魚一番賞 ============ */
:root{
  --abyss:#04121f;
  --deep:#07263c;
  --sea:#0b3a57;
  --teal:#12708f;
  --glow:#3fe0ff;
  --gold:#ffd24a;
  --gold-2:#ff9d2e;
  --danger:#ff3b57;
  --ok:#42f5a3;
  --ink:#eaf6ff;
  --dim:#8fb6cc;
  --panel:rgba(6,32,50,.72);
  --line:rgba(63,224,255,.22);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"PingFang TC","Microsoft JhengHei","Noto Sans TC","Segoe UI Emoji",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 50% -10%,#0e5a7e 0%,transparent 60%),
    radial-gradient(900px 600px at 20% 110%,#0a3f5e 0%,transparent 55%),
    linear-gradient(180deg,#03101c 0%,#062a42 45%,#04121f 100%);
  overflow:hidden;
  user-select:none;
}
button{font-family:inherit;cursor:pointer}
.hidden{display:none !important}

#app{
  height:100vh;
  display:grid;
  grid-template-rows:auto 1fr auto auto;
  gap:8px;
  padding:10px 14px 8px;
}

/* 水中光線 + 氣泡氛围 */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    repeating-linear-gradient(102deg,rgba(255,255,255,.045) 0 3px,transparent 3px 90px),
    repeating-linear-gradient(78deg,rgba(255,255,255,.03) 0 2px,transparent 2px 120px);
  mix-blend-mode:screen;
  animation:caustic 14s linear infinite;
}
@keyframes caustic{0%{transform:translateX(-4%)}100%{transform:translateX(4%)}}
#app{position:relative;z-index:1}

/* ============ ① 一番賞賞池（懸掛海報） ============ */
#kuji-bar{
  position:relative;
  background:linear-gradient(180deg,rgba(10,44,66,.95),rgba(6,26,42,.92));
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 16px 10px;
  box-shadow:0 12px 30px rgba(0,0,0,.45),inset 0 0 40px rgba(63,224,255,.06);
}
#kuji-bar .hang{position:absolute;top:-10px;left:0;right:0;height:10px}
#kuji-bar .hook{
  position:absolute;top:-4px;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#cfe9f7,#5b7f95 60%,#22445c);
  box-shadow:0 3px 6px rgba(0,0,0,.5);
}
#kuji-bar .hook:nth-child(1){left:12%}
#kuji-bar .hook:nth-child(2){left:50%}
#kuji-bar .hook:nth-child(3){left:88%}

.kuji-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.kuji-logo b{
  display:block;font-size:20px;letter-spacing:2px;
  background:linear-gradient(180deg,#fff3c4,var(--gold) 45%,var(--gold-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 22px rgba(255,180,60,.35);
}
.kuji-logo small{color:var(--dim);letter-spacing:3px;font-size:10px}
.kuji-remain{display:flex;align-items:baseline;gap:6px;margin-left:auto}
.kuji-remain .lbl{font-size:12px;color:var(--dim)}
.kuji-remain b{
  font-size:30px;color:var(--gold);text-shadow:0 0 16px rgba(255,210,74,.55);
  font-variant-numeric:tabular-nums;
}
.kuji-remain i{font-size:14px;color:var(--dim);font-style:normal}
.kuji-remain b.low{color:var(--danger);animation:pulseRed .7s infinite}
@keyframes pulseRed{50%{text-shadow:0 0 26px rgba(255,59,87,.9);transform:scale(1.06)}}
.pool-hint{
  margin-left:12px;font-size:12px;padding:4px 10px;border-radius:999px;
  background:rgba(255,157,46,.14);border:1px solid rgba(255,157,46,.4);color:#ffd79a;
}

#kuji-prizes{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.prize{
  position:relative;flex:0 0 auto;min-width:132px;
  padding:8px 10px;border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(0,0,0,.25));
  border:1px solid rgba(255,255,255,.14);
  transition:transform .18s;
}
.prize:hover{transform:translateY(-3px)}
.prize .grade{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--dim)}
.prize .pic{font-size:26px;line-height:1.1;margin:2px 0}
.prize .name{font-size:12.5px;line-height:1.35;min-height:34px}
.prize .cnt{font-size:11px;color:var(--dim);margin-top:4px}
.prize .cnt b{color:var(--ink)}
.prize.r-legend{border-color:rgba(255,210,74,.75);box-shadow:0 0 22px rgba(255,180,60,.35) inset,0 0 14px rgba(255,180,60,.25)}
.prize.r-legend .grade{color:var(--gold)}
.prize.r-epic{border-color:rgba(180,120,255,.6);box-shadow:0 0 16px rgba(160,90,255,.22) inset}
.prize.r-epic .grade{color:#c9a4ff}
.prize.r-rare{border-color:rgba(63,224,255,.5)}
.prize.r-rare .grade{color:var(--glow)}
.prize.r-miss .pic{opacity:.6}
.prize.soldout{filter:grayscale(.75) brightness(.7)}
.prize .stamp{
  position:absolute;inset:auto 6px 6px auto;
  font-size:11px;font-weight:800;letter-spacing:1px;color:#ff5c5c;
  border:2px solid #ff5c5c;border-radius:4px;padding:1px 5px;
  transform:rotate(-11deg);opacity:.92;
  text-shadow:0 0 6px rgba(255,60,60,.5);
}
.prize.last-one{border-color:#fff}
.prize.last-one.glow{
  animation:lastGlow 1.1s linear infinite;
}
@keyframes lastGlow{
  0%{box-shadow:0 0 0 rgba(255,0,0,0);border-color:#ff4d4d}
  20%{box-shadow:0 0 22px rgba(255,180,0,.6);border-color:#ffb400}
  40%{box-shadow:0 0 22px rgba(60,255,120,.6);border-color:#3cff78}
  60%{box-shadow:0 0 22px rgba(60,180,255,.6);border-color:#3cb4ff}
  80%{box-shadow:0 0 22px rgba(190,90,255,.6);border-color:#be5aff}
  100%{box-shadow:0 0 0 rgba(255,0,0,0);border-color:#ff4d4d}
}

/* ============ ② 棋盤 + 海洋 ============ */
#stage{
  display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:12px;
  min-height:0;
}
#board-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;gap:8px}
#board{
  position:relative;
  width:min(100%,calc(100vh - 330px));
  aspect-ratio:1/1;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(8,40,62,.55),rgba(4,20,34,.75));
  border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(0,0,0,.5),inset 0 0 60px rgba(0,0,0,.4);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s;
}
#board.zoom{transform:scale(1.14);filter:blur(3px) brightness(.55)}
#ocean{
  position:absolute;left:12.5%;top:12.5%;width:75%;height:75%;
  border-radius:14px;
  background:radial-gradient(120% 90% at 50% 0%,#0f5c80 0%,#073048 55%,#031826 100%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.6);
}
#tiles{
  position:absolute;inset:0;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);
}
.tile{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:3px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.28));
  font-size:10.5px;line-height:1.15;text-align:center;
  transition:background .2s,box-shadow .2s,transform .2s;
}
.tile .ic{font-size:17px}
.tile .nm{color:#cfe6f5}
.tile .idx{position:absolute;top:2px;left:3px;font-size:8px;color:rgba(255,255,255,.28)}
.tile.corner{
  background:linear-gradient(180deg,rgba(255,210,74,.22),rgba(255,157,46,.08));
  border-color:rgba(255,210,74,.55);
}
.tile.corner .nm{color:#ffe6a8;font-weight:700}
.tile.t-boss{background:linear-gradient(180deg,rgba(255,59,87,.22),rgba(0,0,0,.3));border-color:rgba(255,59,87,.5)}
.tile.t-fate{background:linear-gradient(180deg,rgba(160,90,255,.2),rgba(0,0,0,.3));border-color:rgba(160,90,255,.45)}
.tile.t-chest{background:linear-gradient(180deg,rgba(66,245,163,.16),rgba(0,0,0,.3));border-color:rgba(66,245,163,.4)}
.tile.hit{animation:tileHit .55s ease-out}
@keyframes tileHit{
  0%{box-shadow:0 0 0 rgba(63,224,255,0);transform:scale(1)}
  35%{box-shadow:0 0 26px rgba(63,224,255,.9);transform:scale(1.12);background:rgba(63,224,255,.28)}
  100%{box-shadow:0 0 0 rgba(63,224,255,0);transform:scale(1)}
}
#token{
  position:absolute;width:9%;z-index:6;
  transform:translate(-50%,-50%);
  transition:left .26s cubic-bezier(.3,1.4,.4,1),top .26s cubic-bezier(.3,1.4,.4,1);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.6));
  pointer-events:none;
}
#token svg{width:100%;display:block;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3px) rotate(-2deg)}}

#dice-pop{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:9;text-align:center;pointer-events:none;
}
#dice-pop .splash{font-size:64px;animation:splash .5s ease-out}
@keyframes splash{0%{transform:scale(.3);opacity:0}40%{transform:scale(1.3);opacity:1}100%{transform:scale(1.6);opacity:0}}
#dice-pop .num{
  font-size:76px;font-weight:900;color:var(--gold);
  text-shadow:0 0 26px rgba(255,180,60,.8),0 4px 0 #8a5a00;
  animation:numIn .45s cubic-bezier(.2,1.6,.3,1);
}
@keyframes numIn{0%{transform:scale(.2) rotate(-20deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
#dice-pop .cap{font-size:13px;color:#ffe6a8;letter-spacing:2px}

#tile-callout{
  position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
  z-index:9;padding:7px 14px;border-radius:999px;pointer-events:none;white-space:nowrap;
  background:rgba(4,20,34,.92);border:1px solid var(--line);
  font-size:13px;box-shadow:0 8px 22px rgba(0,0,0,.5);
  animation:callout .35s ease-out;
}
@keyframes callout{0%{transform:translate(-50%,14px);opacity:0}100%{transform:translate(-50%,0);opacity:1}}

#board-hint{
  min-height:22px;font-size:13px;color:#ffd79a;text-align:center;
  text-shadow:0 0 12px rgba(255,157,46,.35);
}

/* ============ 右側面板 ============ */
#side{display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto;scrollbar-width:thin}
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  box-shadow:inset 0 0 24px rgba(0,0,0,.3);
}
.panel h4{margin:0 0 8px;font-size:12px;letter-spacing:1px;color:var(--glow);font-weight:600}
.player{display:flex;align-items:center;gap:10px}
.player .avatar{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:22px;
  background:radial-gradient(circle at 35% 30%,#12708f,#062a42);border:1px solid var(--line);
}
.player .who b{display:block;font-size:14px}
.player .who small{color:var(--dim);font-size:11px}

.pip-row{display:flex;gap:4px;flex-wrap:wrap}
.pip{
  width:22px;height:22px;border-radius:5px;display:grid;place-items:center;font-size:12px;
  background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.22);color:rgba(255,255,255,.25);
}
.pip.on{
  background:linear-gradient(180deg,rgba(255,210,74,.9),rgba(255,157,46,.75));
  border:1px solid #ffd24a;color:#3a2600;box-shadow:0 0 12px rgba(255,190,60,.5);
}
.pip.just{animation:pipPop .45s cubic-bezier(.2,1.7,.3,1)}
@keyframes pipPop{0%{transform:scale(.2);opacity:0}100%{transform:scale(1);opacity:1}}
.hint{margin:8px 0 0;font-size:11.5px;color:var(--dim);line-height:1.5}
.hint b{color:var(--gold)}

#pool-status{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:#cfe6f5}
#pool-status .row{display:flex;justify-content:space-between;gap:8px}
#pool-status .row span{color:var(--dim)}
#pool-status .row b.hot{color:var(--gold)}
#pool-status .row b.out{color:#ff6b6b}
#btn-buyall{
  margin-top:9px;width:100%;padding:9px;border-radius:9px;border:0;font-weight:800;font-size:13px;color:#2b0033;
  background:linear-gradient(90deg,#ff4d4d,#ffb400,#3cff78,#3cb4ff,#be5aff);
  background-size:300% 100%;animation:rainbow 2.4s linear infinite;
  box-shadow:0 0 22px rgba(255,180,0,.5);
}
@keyframes rainbow{0%{background-position:0 0}100%{background-position:300% 0}}

.log ul,#log{list-style:none;margin:0;padding:0;max-height:150px;overflow:auto;font-size:11.5px;line-height:1.7;scrollbar-width:thin}
#log li{color:#bcd7e8;border-bottom:1px dashed rgba(255,255,255,.07);padding:2px 0}
#log li b{color:var(--gold)}
#log li.warn b{color:var(--danger)}
#log li.good b{color:var(--ok)}

.dev-row{display:flex;flex-wrap:wrap;gap:6px}
.dev-row button{
  flex:1 1 45%;padding:7px 6px;font-size:11.5px;border-radius:8px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#cfe6f5;
}
.dev-row button:hover{background:rgba(63,224,255,.16)}

/* ============ ③ 底部操作列 ============ */
#control{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 14px;border-radius:12px;
  background:linear-gradient(180deg,rgba(10,44,66,.9),rgba(4,20,34,.9));
  border:1px solid var(--line);
}
.stat{display:flex;align-items:baseline;gap:6px}
.stat span{font-size:11.5px;color:var(--dim)}
.stat b{font-size:22px;font-variant-numeric:tabular-nums}
.stat.coins b{color:var(--gold);text-shadow:0 0 14px rgba(255,210,74,.45)}
.stat.tix b{color:var(--glow);text-shadow:0 0 14px rgba(63,224,255,.45)}
.cost{font-size:11.5px;color:var(--dim)}
.cost b{color:#ffd79a}
#btn-roll{
  margin-left:auto;padding:13px 26px;border:0;border-radius:12px;font-size:16px;font-weight:800;letter-spacing:1px;
  color:#241500;background:linear-gradient(180deg,#ffe07a,#ffb02e 55%,#ff7a1a);
  box-shadow:0 8px 0 #a45a00,0 12px 26px rgba(255,140,20,.4);
  transition:transform .12s,box-shadow .12s;
}
#btn-roll:hover{transform:translateY(-2px);box-shadow:0 10px 0 #a45a00,0 16px 30px rgba(255,140,20,.5)}
#btn-roll:active{transform:translateY(4px);box-shadow:0 4px 0 #a45a00}
#btn-roll:disabled{filter:grayscale(.7) brightness(.6);box-shadow:0 6px 0 #444;cursor:not-allowed}
#btn-roll.ready{animation:readyPulse 1.1s ease-in-out infinite}
@keyframes readyPulse{50%{box-shadow:0 8px 0 #a45a00,0 12px 34px rgba(255,180,40,.75)}}
#btn-kuji{
  padding:12px 18px;border-radius:12px;font-size:14px;font-weight:700;
  background:linear-gradient(180deg,#57e0ff,#1a8fb8);border:0;color:#02222f;
  box-shadow:0 6px 0 #0d5b78;
}
#btn-kuji:disabled{filter:grayscale(.8) brightness(.55);box-shadow:0 5px 0 #333;cursor:not-allowed}
#btn-kuji.can{animation:kujiCall 1s ease-in-out infinite}
@keyframes kujiCall{50%{box-shadow:0 6px 0 #0d5b78,0 0 26px rgba(87,224,255,.7)}}
.mute{font-size:11.5px;color:var(--dim);display:flex;gap:5px;align-items:center}

#marquee{
  overflow:hidden;border-radius:8px;border:1px solid rgba(255,210,74,.28);
  background:rgba(4,20,34,.8);height:30px;display:flex;align-items:center;
}
#marquee-track{
  display:inline-block;white-space:nowrap;font-size:12.5px;color:#ffd79a;
  animation:scroll 34s linear infinite;padding-left:100%;
}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
#marquee-track b{color:var(--gold)}
#marquee-track .sep{color:rgba(255,255,255,.25);margin:0 18px}

/* ============ 打魚 overlay ============ */
.overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center}
#fishing{background:radial-gradient(120% 100% at 50% 40%,rgba(6,40,64,.92),rgba(2,8,14,.98))}
#fishing .alarm{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 50%,transparent 45%,rgba(255,40,70,.35) 100%);
  animation:alarmFlash 1s steps(2,end) infinite;
}
@keyframes alarmFlash{50%{opacity:.15}}
#fish-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.fish-hud{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:min(760px,86vw);text-align:center;z-index:3}
.boss-name{
  font-size:26px;font-weight:900;letter-spacing:2px;color:#ff5c72;
  text-shadow:0 0 22px rgba(255,60,90,.8);animation:warnBlink .8s steps(2,end) infinite;
}
@keyframes warnBlink{50%{opacity:.35}}
.hpbar{
  position:relative;margin-top:10px;height:22px;border-radius:11px;overflow:hidden;
  background:rgba(0,0,0,.55);border:2px solid rgba(255,90,110,.6);
}
#hp-fill{
  height:100%;width:100%;
  background:linear-gradient(90deg,#ff2d4f,#ff7a3d);
  box-shadow:0 0 18px rgba(255,60,80,.7);transition:width .12s linear;
}
#hp-text{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 3px #000}
.timer{
  position:absolute;right:-6px;top:52px;font-size:40px;font-weight:900;color:#fff;
  text-shadow:0 0 18px rgba(255,255,255,.5);font-variant-numeric:tabular-nums;
}
.timer.urgent{color:#ff4d4d;animation:pulseRed .5s infinite}
.fish-tip{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:13px;color:#9fc6dd;z-index:3}
.fish-tip b{color:var(--gold)}

/* ============ 一番賞開獎 overlay ============ */
#kuji-draw{background:radial-gradient(100% 100% at 50% 45%,rgba(20,60,90,.94),rgba(2,8,14,.98))}
#kuji-draw .rays{
  position:absolute;inset:-40%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,210,74,.16) 0deg 6deg,transparent 6deg 18deg);
  animation:spin 12s linear infinite;opacity:.5;
}
@keyframes spin{to{transform:rotate(360deg)}}
.box-stage{position:relative;display:grid;place-items:center;gap:14px}
#kuji-box{position:relative;width:230px;height:190px}
#kuji-box .box-lid{
  position:absolute;top:0;left:0;right:0;height:44px;border-radius:10px;
  background:linear-gradient(180deg,#ff6a3d,#c9341b);border:2px solid #ffd24a;
  transform-origin:50% 100%;z-index:2;
}
#kuji-box .box-body{
  position:absolute;bottom:0;left:0;right:0;height:150px;border-radius:10px;
  background:linear-gradient(180deg,#12708f,#073048);border:2px solid #ffd24a;
  display:grid;place-items:center;
}
.box-mark{position:absolute;top:10px;left:0;right:0;text-align:center;font-size:12px;letter-spacing:3px;color:#ffd24a}
.box-q{font-size:74px;font-weight:900;color:rgba(255,210,74,.85);text-shadow:0 0 26px rgba(255,180,60,.6)}
#kuji-box.shake{animation:boxShake .42s cubic-bezier(.36,.07,.19,.97) infinite}
@keyframes boxShake{
  0%,100%{transform:translate(0,0) rotate(0)}
  20%{transform:translate(-7px,2px) rotate(-3deg)}
  40%{transform:translate(6px,-3px) rotate(3deg)}
  60%{transform:translate(-5px,3px) rotate(-2deg)}
  80%{transform:translate(5px,-2px) rotate(2deg)}
}
#kuji-box.open .box-lid{animation:lidUp .6s cubic-bezier(.2,1.5,.3,1) forwards}
@keyframes lidUp{to{transform:translateY(-58px) rotate(-24deg)}}
#kuji-arm{position:absolute;top:-96px;left:50%;transform:translateX(-50%);font-size:78px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
#kuji-arm.reach{animation:reach 1.5s cubic-bezier(.3,1.3,.3,1) forwards}
@keyframes reach{0%{transform:translate(-50%,-40px) rotate(-8deg)}55%{transform:translate(-50%,58px) rotate(6deg)}100%{transform:translate(-50%,-10px) rotate(0)}}
#kuji-countdown{font-size:14px;color:#ffd79a;letter-spacing:2px;min-height:20px}

#kuji-reveal{
  position:absolute;inset:0;display:grid;place-items:center;z-index:4;
  background:radial-gradient(60% 50% at 50% 50%,rgba(255,210,74,.28),transparent 70%);
}
.reveal-card{
  width:min(460px,88vw);padding:26px 24px;border-radius:18px;text-align:center;
  background:linear-gradient(180deg,rgba(12,50,74,.96),rgba(4,18,30,.96));
  border:2px solid var(--gold);box-shadow:0 0 60px rgba(255,180,60,.45);
  animation:cardIn .55s cubic-bezier(.2,1.6,.3,1);
}
@keyframes cardIn{0%{transform:scale(.4) rotate(-8deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.reveal-card .grade{font-size:15px;letter-spacing:4px;color:var(--gold);font-weight:800}
.reveal-card .pic{font-size:82px;margin:8px 0;filter:drop-shadow(0 0 22px rgba(255,200,80,.6))}
.reveal-card .name{font-size:24px;font-weight:900;margin-bottom:6px}
.reveal-card .sub{font-size:12.5px;color:var(--dim);margin-bottom:16px}
.reveal-card .go{
  padding:12px 22px;border:0;border-radius:11px;font-size:15px;font-weight:800;color:#241500;
  background:linear-gradient(180deg,#ffe07a,#ff9d2e);box-shadow:0 6px 0 #a45a00;
}
.reveal-card.epic{border-color:#b478ff;box-shadow:0 0 60px rgba(160,90,255,.5)}
.reveal-card.epic .grade{color:#c9a4ff}
.reveal-card.last{border-color:#fff;box-shadow:0 0 70px rgba(255,255,255,.5)}
.reveal-card.miss{border-color:rgba(255,255,255,.2);box-shadow:none}
.reveal-card.miss .grade{color:var(--dim)}

/* ============ Toast / FX ============ */
#toast-layer{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:70;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{
  padding:10px 18px;border-radius:999px;font-size:14px;font-weight:700;
  background:rgba(4,20,34,.94);border:1px solid var(--line);color:var(--ink);
  box-shadow:0 10px 26px rgba(0,0,0,.5);animation:toastIn .3s ease-out;
}
.toast.gold{border-color:rgba(255,210,74,.7);color:#ffe6a8;box-shadow:0 0 26px rgba(255,180,60,.35)}
.toast.danger{border-color:rgba(255,59,87,.7);color:#ffb3bf;box-shadow:0 0 26px rgba(255,60,90,.35)}
.toast.out{animation:toastOut .3s ease-in forwards}
@keyframes toastIn{0%{transform:translateY(-16px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes toastOut{to{transform:translateY(-12px);opacity:0}}

#fx-layer{position:fixed;inset:0;z-index:65;pointer-events:none;overflow:hidden}
.float-num{
  position:fixed;font-weight:900;font-size:20px;color:var(--gold);
  text-shadow:0 0 12px rgba(255,180,60,.7),0 2px 3px rgba(0,0,0,.7);
  animation:floatUp 1.1s ease-out forwards;white-space:nowrap;
}
.float-num.tix{color:var(--glow);text-shadow:0 0 12px rgba(63,224,255,.7)}
@keyframes floatUp{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:1;transform:translateY(-10px) scale(1.1)}100%{transform:translateY(-70px) scale(1);opacity:0}}
.confetti{position:fixed;width:9px;height:14px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{0%{transform:translateY(-10vh) rotate(0);opacity:1}100%{transform:translateY(105vh) rotate(720deg);opacity:.1}}

/* 響應式 */
@media (max-width:1080px){
  #stage{grid-template-columns:1fr}
  #side{flex-direction:row;flex-wrap:wrap;overflow:visible}
  .panel{flex:1 1 220px}
  #board{width:min(100%,calc(100vh - 420px))}
}