/* ==========================================================
   雀雀計 Money！— 設計系統（提煉自 mockup-c 趣味插畫風）
   暖橘奶油底 · 粗棕框卡片 · emoji 貼紙 · 彈簧按鈕
   ========================================================== */

:root{
  --cream:#fff7ea;
  --peach:#ffd9b8;
  --orange:#ff8a3d;
  --orange-deep:#e86a1c;
  --teal:#2bb3a3;
  --teal-deep:#178f82;
  --pink:#ff6b8a;
  --yellow:#ffc93c;
  --brown:#4a2f1d;
  --brown-soft:#8a6a52;
  --white:#ffffff;
  --shadow:0 6px 0 rgba(74,47,29,.15);
  --radius-card:22px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

html{font-size:16px}
@keyframes pageIn{from{transform:translateX(100%);opacity:.4}to{transform:none;opacity:1}}
.page-in{animation:pageIn .28s cubic-bezier(.22,.9,.36,1)}
body{
  font-family:'Noto Sans TC',sans-serif;
  background:repeating-linear-gradient(-45deg,#ffeacc 0 18px,#ffedcf 18px 36px);
  color:var(--brown);
  min-height:calc(100vh + 1px); /* 可捲動 → 手機下滑時自動收起 URL bar */
  display:flex;flex-direction:column;align-items:center;
  padding:0 0 48px;
}

/* 手機殼外框：手機全幅、桌機置中帶粗框 */
.app-shell{
  width:100%;max-width:430px;min-height:100vh;
  background:var(--cream);
  position:relative;
  padding-bottom:32px;
}
@media (min-width:480px){
  body{padding:28px 12px 64px}
  .app-shell{
    min-height:auto;
    border-radius:36px;
    border:4px solid var(--brown);
    box-shadow:0 10px 0 var(--brown),0 30px 60px rgba(74,47,29,.3);
    overflow:hidden;
  }
}
/* 頂部彩帶 */
.app-shell::before{
  content:"";position:absolute;top:0;left:0;right:0;height:8px;z-index:50;
  background:linear-gradient(90deg,var(--orange) 25%,var(--yellow) 50%,var(--teal) 75%,var(--pink));
}

.boot-spinner{text-align:center;padding:80px 20px;font-weight:900;color:var(--brown-soft)}
.spin-tile{display:inline-block;font-size:30px;animation:wobble 1s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(14deg)}}

h1.page-title{font-family:'Baloo 2','Noto Sans TC',sans-serif;font-size:22px;font-weight:800;text-align:center;padding-top:26px}
p.page-sub{font-size:12px;color:var(--brown-soft);font-weight:700;margin:4px 0 24px;text-align:center}

/* ---------------- 頂欄（內頁） ---------------- */
.topbar{
  display:flex;align-items:center;gap:10px;
  padding:22px 16px 6px;
}
.topbar .back{
  width:40px;height:40px;border-radius:14px;flex-shrink:0;
  background:#fff;border:3px solid var(--brown);box-shadow:var(--shadow);
  font-size:18px;font-weight:900;color:var(--brown);cursor:pointer;
  text-decoration:none;display:flex;align-items:center;justify-content:center;
}
.topbar .back:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(74,47,29,.15)}
.topbar .tb-title{flex:1;font-family:'Baloo 2','Noto Sans TC',sans-serif;font-size:19px;font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .tb-emoji{font-size:22px}

/* ---------------- 主畫面 hero ---------------- */
.hero-band{
  margin-top:8px;padding:16px 20px 6px;display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.game-name{font-family:'Baloo 2','Noto Sans TC',sans-serif;font-size:22px;font-weight:800;min-width:0}
.game-name .mj{display:inline-block;font-size:20px;transform:rotate(8deg)}
.mode-badge{
  font-size:11px;font-weight:900;color:#fff;background:var(--pink);flex-shrink:0;
  padding:5px 12px;border-radius:99px;border:2.5px solid var(--brown);
  box-shadow:0 3px 0 var(--brown);transform:rotate(3deg);
}
.mode-badge.full{background:var(--teal);transform:rotate(-3deg)}
.status-badge{
  display:inline-block;margin:6px 20px 0;font-size:11px;font-weight:900;
  color:#fff;background:var(--brown-soft);padding:4px 12px;border-radius:99px;border:2.5px solid var(--brown);
}
.round-bubble{margin:4px 20px 0;display:inline-block;font-size:12px;font-weight:700;color:var(--brown-soft)}

/* ---------------- 玩家卡 ---------------- */
.players{padding:14px 16px 4px;display:flex;flex-direction:column;gap:12px}
.pcard{
  display:flex;align-items:center;gap:12px;
  border-radius:var(--radius-card);padding:12px 14px;border:3px solid var(--brown);
  box-shadow:var(--shadow);position:relative;
  transform:rotate(-.6deg);
  animation:pop-in .35s cubic-bezier(.34,1.56,.64,1) backwards;
}
.players .pcard:nth-child(2){transform:rotate(.7deg);animation-delay:.05s}
.players .pcard:nth-child(3){transform:rotate(-.4deg);animation-delay:.1s}
.players .pcard:nth-child(4){transform:rotate(.5deg);animation-delay:.15s}
@keyframes pop-in{from{opacity:0;transform:scale(.85)}to{opacity:1}}
.pcard.win{background:linear-gradient(135deg,#fff3c9,#ffe9a8)}
.pcard.lose{background:#fff}
.pface{
  font-size:30px;width:52px;height:52px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:3px solid var(--brown);
}
.pinfo{flex:1;min-width:0}
.pname{font-size:16px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pseat{font-size:11px;color:var(--brown-soft);font-weight:700}
.pamt{font-family:'Baloo 2',sans-serif;font-size:26px;font-weight:800;line-height:1;text-align:right;white-space:nowrap}
.pamt.pos{color:var(--teal-deep)}
.pamt.neg{color:var(--pink)}
.pamt.zero{color:var(--brown-soft)}
.pamt .u{font-size:13px}
.sticker{
  position:absolute;top:-12px;left:-8px;font-size:12px;font-weight:900;color:#fff;
  padding:3px 10px;border-radius:99px;border:2.5px solid var(--brown);
  box-shadow:0 2px 0 var(--brown);transform:rotate(-6deg);
}
.sticker.crown{background:var(--yellow);color:var(--brown)}

/* ---------------- 按鈕 ---------------- */
.actions{padding:18px 16px 26px;display:flex;flex-direction:column;gap:14px;align-items:center}
.btn-big{
  width:88%;cursor:pointer;
  font-family:'Baloo 2','Noto Sans TC',sans-serif;font-size:21px;font-weight:800;
  color:#fff;background:var(--orange);
  border:3.5px solid var(--brown);border-radius:99px;padding:16px 0;
  box-shadow:0 7px 0 var(--brown);
  letter-spacing:.1em;position:relative;
}
.btn-big::after{content:"🀄";position:absolute;right:22px;top:50%;transform:translateY(-50%) rotate(12deg);font-size:20px}
.btn-big:active:not(:disabled){transform:translateY(5px);box-shadow:0 2px 0 var(--brown)}
.btn-big:disabled{filter:grayscale(.9);opacity:.6;cursor:not-allowed}
.btn-trio{display:flex;gap:12px;width:100%;justify-content:center}
.btn-mini{
  flex:1;max-width:104px;text-align:center;
  background:#fff;border:3px solid var(--brown);border-radius:20px;
  padding:10px 0 8px;box-shadow:var(--shadow);
  cursor:pointer;font-family:inherit;color:inherit;
}
.btn-mini:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(74,47,29,.15)}
.btn-mini .ic{font-size:22px;display:block}
.btn-mini .tx{font-size:12px;font-weight:900;color:var(--brown-soft);margin-top:2px}
.btn-party{
  width:88%;cursor:pointer;
  font-family:'Baloo 2','Noto Sans TC',sans-serif;font-size:19px;font-weight:800;
  color:#fff;background:var(--teal);letter-spacing:.1em;
  border:3.5px solid var(--brown);border-radius:99px;padding:15px 0;
  box-shadow:0 7px 0 var(--brown);
}
.btn-party:active:not(:disabled){transform:translateY(5px);box-shadow:0 2px 0 var(--brown)}
.btn-party:disabled{filter:grayscale(.9);opacity:.55;cursor:not-allowed}
.btn-danger-pill{
  cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:900;color:var(--pink);
  background:none;border:2.5px dashed var(--pink);border-radius:99px;
  padding:9px 20px;
}
.btn-danger-pill:active{transform:translateY(2px)}
.link-back{font-size:17px;font-weight:900;color:var(--brown-soft);background:none;border:none;cursor:pointer;font-family:inherit;text-decoration:underline dotted;padding:6px 10px}

/* ---------------- flow 步驟頭 ---------------- */
.flow-label{
  text-align:center;font-size:11px;font-weight:900;color:#fff;background:var(--teal);
  padding:14px 0 10px;letter-spacing:.25em;margin-top:8px;
}
.flow-label.alt{background:var(--orange)}
.step-head{text-align:center;padding:18px 20px 8px}
.step-emoji{font-size:38px;display:block;line-height:1;animation:wobble 1.6s ease-in-out infinite}
.step-title{font-family:'Baloo 2','Noto Sans TC',sans-serif;font-size:23px;font-weight:800;margin-top:8px}
.step-sub{font-size:12.5px;color:var(--brown-soft);font-weight:700;margin-top:4px}

/* ---------------- 結算 flow：選贏家 ---------------- */
.winner-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 20px}
.wbubble{
  border-radius:22px;background:#fff;border:3px solid var(--brown);
  box-shadow:var(--shadow);text-align:center;padding:10px 8px 8px;
  transform:rotate(-1deg);cursor:pointer;font-family:inherit;color:inherit;
}
.wbubble:nth-child(2){transform:rotate(1.2deg)}
.wbubble:nth-child(3){transform:rotate(.8deg)}
.wbubble:nth-child(4){transform:rotate(-1deg)}
.wbubble.sel{
  background:linear-gradient(150deg,#fff3c9,#ffe1a0);
  border-color:var(--orange-deep);border-width:4px;
  box-shadow:0 6px 0 rgba(232,106,28,.35);
}
.wbubble .pface{width:44px;height:44px;font-size:22px;margin:0 auto 4px}
.wbubble .nm{font-size:14px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wbubble .pick{height:18px;font-size:11px;font-weight:900;color:var(--orange-deep);margin-top:2px}

/* ---------------- 結算 flow：自摸 / 出衝 toggle ---------------- */
.toggle-wrap{padding:14px 18px;display:flex;gap:14px}
.tg-card{
  flex:1;text-align:center;padding:16px 6px;border-radius:24px;
  background:#fff;border:3px solid var(--brown);box-shadow:var(--shadow);
  cursor:pointer;font-family:inherit;color:inherit;
}
.tg-card:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(74,47,29,.15)}
.tg-card.sel{background:var(--teal);color:#fff;border-color:var(--teal-deep);box-shadow:0 6px 0 var(--teal-deep)}
.tg-card .em{font-size:32px;display:block}
.tg-card .t1{font-size:17px;font-weight:900;margin-top:6px;letter-spacing:.15em}
.tg-card .t2{font-size:10.5px;font-weight:700;color:var(--brown-soft);margin-top:3px}
.tg-card.sel .t2{color:rgba(255,255,255,.85)}
.speech-tip{
  margin:4px 18px;background:#fff;border:2.5px dashed var(--orange);border-radius:18px;
  padding:11px 15px;font-size:12px;font-weight:700;color:var(--brown-soft);line-height:1.7;text-align:center;
}
.speech-tip b{color:var(--orange-deep)}

/* ---------------- 結算 flow：番數 tiles ---------------- */
.fan-wrap{padding:16px 18px 4px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.fan-tile{
  aspect-ratio:.92;border-radius:16px;background:#fff;border:3px solid var(--brown);
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transform:rotate(-1.5deg);cursor:pointer;font-family:inherit;color:inherit;
  transition:transform .12s;
}
.fan-tile:nth-child(even){transform:rotate(1.5deg)}
.fan-tile.on{
  background:var(--orange);border-color:var(--brown);
  transform:scale(1.12) rotate(0)!important;
  box-shadow:0 7px 0 rgba(74,47,29,.3);z-index:2;
}
.fan-tile .fn{font-family:'Baloo 2',sans-serif;font-size:22px;font-weight:800;line-height:1}
.fan-tile .fp{font-size:9.5px;font-weight:900;color:var(--brown-soft);margin-top:3px}
.fan-tile.on .fn,.fan-tile.on .fp{color:#fff}
.party-note{text-align:center;font-size:13px;font-weight:900;color:var(--teal-deep);padding:12px 10px 4px}

/* ---------------- 結算 flow：出衝者 rows ---------------- */
.loser-zone{padding:14px 18px;display:flex;flex-direction:column;gap:12px}
.lrow{
  display:flex;align-items:center;gap:12px;
  background:#fff;border:3px solid var(--brown);border-radius:22px;
  padding:10px 14px;box-shadow:var(--shadow);
  cursor:pointer;font-family:inherit;color:inherit;text-align:left;width:100%;
}
.lrow.sel{background:var(--pink);border-color:#d94b68;box-shadow:0 6px 0 #d94b68}
.lrow .pface{width:42px;height:42px;font-size:22px}
.lrow .pname{flex:1;font-size:15px}
.lrow .pay{font-family:'Baloo 2',sans-serif;font-size:19px;font-weight:800;color:var(--pink);white-space:nowrap}
.lrow.sel .pay,.lrow.sel .pname{color:#fff}
.lrow.sel .pseat{color:rgba(255,255,255,.85)}

/* ---------------- 結算 flow：收據確認 ---------------- */
.receipt-fun{
  margin:14px 18px;background:#fff;border:3.5px solid var(--brown);border-radius:26px;
  overflow:hidden;box-shadow:0 8px 0 rgba(74,47,29,.18);
}
.rf-head{background:var(--yellow);text-align:center;padding:14px;border-bottom:3.5px solid var(--brown)}
.rf-head .lbl{font-size:12px;font-weight:900;color:var(--brown)}
.rf-head .big{font-family:'Baloo 2',sans-serif;font-size:44px;font-weight:800;color:var(--teal-deep);line-height:1.1}
.rf-body{padding:8px 18px 12px}
.rf-row{display:flex;align-items:center;gap:10px;padding:10px 0;font-size:14.5px;font-weight:700}
.rf-row+.rf-row{border-top:2px dashed var(--peach)}
.rf-row .val{margin-left:auto;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:18px}
.val.m{color:var(--pink)}
.rf-sum{text-align:center;font-size:11px;font-weight:900;color:var(--teal-deep);padding:6px 0 8px;letter-spacing:.1em}
.confirm-fun{padding:2px 18px 26px;display:flex;flex-direction:column;gap:12px;align-items:center}

/* ---------------- 步驟 dots ---------------- */
.dots{display:flex;gap:7px;justify-content:center;padding:12px 0 22px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--peach);border:2px solid var(--brown)}
.dot.on{background:var(--orange)}

/* ---------------- 表單 ---------------- */
.form-wrap{padding:8px 20px 8px;display:flex;flex-direction:column;gap:16px}
.field label.flbl{display:block;font-size:13px;font-weight:900;margin-bottom:7px}
.field label.flbl .req{color:var(--pink)}
.txt-input{
  width:100%;font-family:inherit;font-size:16px;font-weight:700;color:var(--brown);
  background:#fff;border:3px solid var(--brown);border-radius:16px;
  padding:11px 14px;outline:none;
}
.txt-input:focus{border-color:var(--orange-deep);box-shadow:0 0 0 3px rgba(255,138,61,.25)}
.txt-input.err{border-color:var(--pink)}
.names-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.name-cell{position:relative}
.name-cell .mini-face{
  position:absolute;top:-9px;left:-6px;font-size:15px;background:#fff;
  border:2.5px solid var(--brown);border-radius:50%;width:28px;height:28px;z-index:2;
  display:flex;align-items:center;justify-content:center;transform:rotate(-8deg);
}
.name-cell .txt-input{padding-left:30px;font-size:15px}
.price-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.price-cell{position:relative}
.price-cell .plabel{
  position:absolute;top:-8px;left:50%;transform:translateX(-50%);z-index:2;
  font-size:10px;font-weight:900;background:var(--yellow);color:var(--brown);
  border:2px solid var(--brown);border-radius:99px;padding:0 7px;
}
.price-cell .txt-input{
  text-align:center;font-family:'Baloo 2',sans-serif;font-size:16px;
  padding:13px 4px 9px;border-radius:13px;-moz-appearance:textfield;appearance:textfield;
}
.price-cell .txt-input::-webkit-outer-spin-button,
.price-cell .txt-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.form-err{font-size:12.5px;font-weight:900;color:var(--pink);text-align:center;min-height:18px}

/* ---------------- 遊戲列表 ---------------- */
.glist{padding:10px 16px 8px;display:flex;flex-direction:column;gap:14px}
.gcard{
  background:#fff;border:3px solid var(--brown);border-radius:24px;
  box-shadow:var(--shadow);padding:14px 16px;cursor:pointer;
  transform:rotate(-.4deg);position:relative;font-family:inherit;color:inherit;text-align:left;width:100%;
}
.gcard:nth-child(even){transform:rotate(.5deg)}
.gcard:active{transform:translateY(3px) rotate(0);box-shadow:0 2px 0 rgba(74,47,29,.15)}
.gcard .gc-top{display:flex;align-items:center;gap:8px}
.gcard .gc-name{flex:1;font-family:'Baloo 2','Noto Sans TC',sans-serif;font-size:17px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcard .gc-meta{font-size:11px;color:var(--brown-soft);font-weight:700;margin-top:4px}
.gcard .gc-nets{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.net-chip{
  font-size:11px;font-weight:900;border-radius:99px;padding:3px 9px;
  border:2px solid var(--brown);background:var(--cream);
}
.net-chip.pos{color:var(--teal-deep);background:#e2f6f0}
.net-chip.neg{color:var(--pink);background:#ffe9ee}
.gcard .fin-ribbon{
  position:absolute;top:-10px;right:-6px;font-size:10.5px;font-weight:900;color:#fff;
  background:var(--brown-soft);border:2.5px solid var(--brown);border-radius:99px;
  padding:2px 10px;transform:rotate(4deg);
}
.gcard .fin-ribbon.active-ribbon{background:#e8837f;border-color:#c2542a;transform:rotate(-3deg)}
.empty-note{text-align:center;padding:44px 20px;color:var(--brown-soft);font-weight:700;font-size:14px;line-height:2}
.empty-note .big{font-size:42px;display:block}

/* ---------------- 歷史局列表 ---------------- */
.hlist{padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.hrow{
  position:relative;
  display:flex;align-items:center;gap:10px;background:#fff;
  border:3px solid var(--brown);border-radius:20px;padding:10px 13px;box-shadow:var(--shadow);
}
.hrow:nth-child(even){transform:rotate(.35deg)}
.hrow:nth-child(odd){transform:rotate(-.35deg)}
.hseq{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:var(--peach);border:2.5px solid var(--brown);
  display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:14px;
}
.hmain{flex:1;min-width:0}
.htitle{font-size:13.5px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hsub{font-size:11px;color:var(--brown-soft);font-weight:700;margin-top:1px}
.hdate{position:absolute;top:-6px;right:8px;font-size:10px;color:var(--brown-soft);font-weight:700;background:#fff;padding:1px 6px;border-radius:8px}
.hfans{
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:15px;flex-shrink:0;
  color:var(--orange-deep);
}

/* ---------------- 分享 modal 內容 ---------------- */
.share-box{
  margin:4px 18px;background:#fff;border:3px dashed var(--teal-deep);border-radius:20px;
  padding:14px;text-align:center;
}
.share-box .sb-lbl{font-size:12px;font-weight:900;color:var(--brown-soft)}
.share-box .sb-url{
  margin-top:8px;font-size:12px;font-weight:700;color:var(--teal-deep);
  word-break:break-all;line-height:1.6;background:var(--cream);
  border:2px solid var(--peach);border-radius:12px;padding:9px 10px;
}
.btn-copy{
  margin-top:10px;cursor:pointer;font-family:inherit;
  font-size:14px;font-weight:900;color:#fff;background:var(--teal);
  border:3px solid var(--brown);border-radius:99px;padding:10px 26px;
  box-shadow:0 4px 0 var(--brown);
}
.btn-copy:active{transform:translateY(3px);box-shadow:0 1px 0 var(--brown)}
.live-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--pink);
  border:2px solid var(--brown);margin-right:5px;animation:blink 1.4s infinite;
}
@keyframes blink{50%{opacity:.25}}

/* ---------------- 統計頁 ---------------- */
.tabs{display:flex;gap:8px;padding:10px 18px 2px}
.tab-btn{
  flex:1;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:900;color:var(--brown-soft);
  background:#fff;border:3px solid var(--brown);border-radius:99px;padding:9px 0;
  box-shadow:var(--shadow);
}
.tab-btn.on{background:var(--orange);color:#fff;border-color:var(--brown);box-shadow:0 5px 0 rgba(74,47,29,.3)}
.stat-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 18px}
.scard{
  background:#fff;border:3px solid var(--brown);border-radius:18px;
  padding:12px 10px;text-align:center;box-shadow:var(--shadow);
}
.scard .sv{font-family:'Baloo 2',sans-serif;font-size:24px;font-weight:800;line-height:1.1}
.scard .sl{font-size:10.5px;font-weight:900;color:var(--brown-soft);margin-top:3px}
.big-round-card{
  margin:2px 18px 8px;background:linear-gradient(135deg,#fff3c9,#ffe9a8);
  border:3px solid var(--brown);border-radius:20px;padding:13px 16px;box-shadow:var(--shadow);
  text-align:center;font-weight:900;font-size:13px;
}
.rank-list{padding:4px 18px 10px;display:flex;flex-direction:column;gap:9px}
.rank-row{display:flex;align-items:center;gap:9px;background:#fff;border:2.5px solid var(--brown);border-radius:16px;padding:8px 12px;box-shadow:var(--shadow)}
.rank-row .rpos{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:17px;width:30px;text-align:center;flex-shrink:0}
.rank-row:first-child .rpos{color:var(--orange-deep)}
.rank-row .rname{font-size:13.5px;font-weight:900;width:64px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-row .rbar-track{flex:1;height:14px;background:var(--cream);border:2px solid var(--peach);border-radius:99px;overflow:hidden}
.rank-row .rbar{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--orange),var(--yellow));transition:width .5s cubic-bezier(.34,1.56,.64,1)}
.rank-row .rbar.neg{background:linear-gradient(90deg,var(--pink),#ff9db1)}
.rank-row .rnet{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:14px;width:56px;text-align:right;flex-shrink:0}
.player-chips{display:flex;gap:7px;padding:8px 18px;flex-wrap:wrap}
.chip{
  cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:900;
  background:#fff;color:var(--brown);border:2.5px solid var(--brown);
  border-radius:99px;padding:6px 13px;box-shadow:0 3px 0 rgba(74,47,29,.15);
}
.chip.on{background:var(--teal);color:#fff;box-shadow:0 3px 0 var(--teal-deep)}
.chart-card{margin:8px 18px;background:#fff;border:3px solid var(--brown);border-radius:20px;padding:13px 14px 10px;box-shadow:var(--shadow)}
.chart-card .cc-title{font-size:12px;font-weight:900;color:var(--brown-soft);margin-bottom:8px}
.dist-wrap{display:flex;align-items:flex-end;gap:5px;height:110px;padding:0 2px}
.dist-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:3px}
.dist-bar{width:100%;max-width:26px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,var(--orange),var(--yellow));border:2px solid var(--brown);border-bottom:none;min-height:3px;transition:height .45s cubic-bezier(.34,1.56,.64,1)}
.dist-num{font-family:'Baloo 2',sans-serif;font-size:11px;font-weight:800;color:var(--orange-deep)}
.dist-x{display:flex;gap:5px;padding:4px 2px 0}
.dist-x span{flex:1;text-align:center;font-size:9.5px;font-weight:900;color:var(--brown-soft)}
.trend-svg{width:100%;height:auto;display:block}

/* ---------------- 登入頁 ---------------- */
.login-hero{padding:64px 24px 10px;text-align:center}
.login-hero .lh-tiles{font-size:52px;letter-spacing:-6px;display:block;transform:rotate(-4deg);animation:wobble 2s ease-in-out infinite}
.login-title{font-family:'Baloo 2','Noto Sans TC',sans-serif;font-size:32px;font-weight:800;margin-top:14px}
.login-sub{font-size:13px;font-weight:700;color:var(--brown-soft);margin-top:6px;line-height:1.8}
.btn-google{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:82%;margin:38px auto 0;cursor:pointer;text-decoration:none;
  background:#fff;border:3.5px solid var(--brown);border-radius:99px;
  padding:15px 0;box-shadow:0 7px 0 var(--brown);
  font-family:'Noto Sans TC',sans-serif;font-size:17px;font-weight:900;color:var(--brown);
}
.btn-google:active{transform:translateY(5px);box-shadow:0 2px 0 var(--brown)}
.login-foot{margin-top:40px;font-size:11px;font-weight:700;color:var(--brown-soft);text-align:center}
.user-pill{
  position:absolute;top:18px;right:16px;z-index:60;
  font-size:11px;font-weight:900;color:var(--brown);
  background:#fff;border:2.5px solid var(--brown);border-radius:99px;padding:4px 12px;
  box-shadow:0 2px 0 var(--brown);cursor:pointer;
}

/* ---------------- Modal / Toast ---------------- */
.modal-mask{
  position:fixed;inset:0;z-index:100;
  background:rgba(74,47,29,.45);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.modal-mask[hidden]{display:none}
.modal-card{
  width:100%;max-width:330px;background:var(--cream);
  border:4px solid var(--brown);border-radius:28px;
  box-shadow:0 10px 0 var(--brown),0 30px 60px rgba(0,0,0,.25);
  padding:22px 22px 18px;text-align:center;
  animation:pop-in .25s cubic-bezier(.34,1.56,.64,1);
}
.modal-emoji{font-size:40px;line-height:1}
.modal-title{font-family:'Baloo 2','Noto Sans TC',sans-serif;font-size:19px;font-weight:800;margin-top:8px}
.modal-body{font-size:13px;font-weight:700;color:var(--brown-soft);line-height:1.9;margin-top:8px}
.modal-body b{color:var(--pink)}
.modal-btns{display:flex;gap:10px;margin-top:16px}
.btn-modal{
  flex:1;cursor:pointer;font-family:inherit;font-size:15px;font-weight:900;
  border:3px solid var(--brown);border-radius:99px;padding:11px 0;
  box-shadow:0 4px 0 var(--brown);color:#fff;background:var(--brown-soft);
}
.btn-modal-cancel{background:#fff;color:var(--brown-soft)}
.btn-modal-ok.danger{background:var(--pink)}
.btn-modal:active{transform:translateY(3px);box-shadow:0 1px 0 var(--brown)}

.toast-wrap{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:120;
  display:flex;flex-direction:column;gap:8px;align-items:center;width:max-content;max-width:92vw;
}
.toast{
  background:var(--brown);color:#fff;font-size:13px;font-weight:900;
  border-radius:99px;padding:11px 22px;box-shadow:0 8px 24px rgba(74,47,29,.4);
  animation:toast-in .3s cubic-bezier(.34,1.56,.64,1);max-width:100%;
}
.toast.err{background:#c0392b}
.toast.ok{background:var(--teal-deep)}
@keyframes toast-in{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1}}

/* ---------------- 開新局：風位 badge ---------------- */
.wind-badge{
  position:absolute;top:-9px;right:-6px;z-index:2;
  font-size:10px;font-weight:900;color:#fff;
  border:2.5px solid var(--brown);border-radius:99px;padding:1px 8px;
  box-shadow:0 2px 0 var(--brown);transform:rotate(6deg);pointer-events:none;
}
.wind-badge.w1{background:var(--orange)}
.wind-badge.w2{background:var(--teal)}
.wind-badge.w3{background:var(--pink)}
.wind-badge.w4{background:var(--brown-soft)}
.name-cell .txt-input{padding-right:46px} /* 避開右上風位 badge */

/* ---------------- 打骰頁 ---------------- */
.dice-hint{text-align:center;font-size:11px;font-weight:700;color:var(--brown-soft);padding:4px 20px 0;line-height:1.7}
.dice-board{
  margin:16px auto 0;width:min(92%,340px);
  display:grid;gap:10px;
  grid-template-columns:1fr 1.15fr 1fr;
  grid-template-areas:". n ." "w c e" ". s .";
}
.pos-n{grid-area:n}.pos-w{grid-area:w}.pos-e{grid-area:e}.pos-s{grid-area:s}.pos-c{grid-area:c}

.dseat{
  position:relative;background:#fff;border:3px solid var(--brown);border-radius:20px;
  box-shadow:var(--shadow);text-align:center;padding:13px 5px 10px;cursor:pointer;user-select:none;
}
.pos-n.dseat{transform:rotate(-1deg)}
.pos-w.dseat{transform:rotate(1.2deg)}
.pos-e.dseat{transform:rotate(-.8deg)}
.pos-s.dseat{transform:rotate(.9deg)}
.dseat .wind-tag{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  font-size:10px;font-weight:900;color:#fff;white-space:nowrap;
  border:2.5px solid var(--brown);border-radius:99px;padding:1px 8px;
  animation:windPop .35s cubic-bezier(.34,1.56,.64,1) both; /* 揀完東位先彈出嚟 */
}
@keyframes windPop{from{opacity:0;transform:translateX(-50%) translateY(-9px) scale(.5)}to{opacity:1;transform:translateX(-50%)}}
.dseat .wind-tag.w1{background:var(--orange)}
.dseat .wind-tag.w2{background:var(--teal)}
.dseat .wind-tag.w3{background:var(--pink)}
.dseat .wind-tag.w4{background:var(--brown-soft)}
.dface{
  width:40px;height:40px;border-radius:50%;margin:5px auto 4px;
  display:flex;align-items:center;justify-content:center;
  background:var(--cream);border:2.5px solid var(--brown);font-size:21px;
}
.dname{font-size:13px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 先取麻雀：紅圈高亮 */
.dseat.first{
  border-color:#e04545;
  box-shadow:0 0 0 4px rgba(224,69,69,.35),var(--shadow);
  animation:firstPulse 1.2s ease-in-out infinite;
}
.dseat.first::after{
  content:"🎯";position:absolute;top:-15px;left:-9px;
  font-size:17px;transform:rotate(-12deg);
}
@keyframes firstPulse{0%,100%{box-shadow:0 0 0 4px rgba(224,69,69,.35),var(--shadow)}50%{box-shadow:0 0 0 8px rgba(224,69,69,.16),var(--shadow)}}

/* 東位（＝莊）：成張卡金黃色企理唔同晒 + 皇冠 */
.dseat.dealer{
  background:linear-gradient(165deg,#fffdf4,#ffe9b3);
  border-color:#d9961a;
  box-shadow:0 0 0 3px rgba(255,182,46,.35),var(--shadow);
}
.dseat.dealer .dface{background:#ffedc4;border-color:#d9961a}
.dseat.dealer::before{
  content:"👑";position:absolute;top:-15px;right:-8px;
  font-size:16px;transform:rotate(10deg);pointer-events:none;
  filter:drop-shadow(0 2px 0 rgba(74,47,29,.28));
}

.dice-center{position:relative;display:flex;align-items:center;justify-content:center}
.dice-roll-btn{
  width:100%;height:100%;min-height:96px;cursor:pointer;font-family:inherit;color:inherit;
  background:#fff;border:3px dashed var(--orange);border-radius:24px;
  padding:12px 6px;box-shadow:var(--shadow);text-align:center;
}
.dice-roll-btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(74,47,29,.15)}
.dice-roll-btn.done{border-style:solid;border-color:var(--teal)}
/* 未揀東位：掣鎖住灰晒 */
.dice-roll-btn.locked{
  border-color:#cdbba0;background:#f8f3ea;box-shadow:none;
  cursor:not-allowed;opacity:.62;
}
.dice-roll-btn.locked .dice-emoji{animation:none;filter:grayscale(.7)}
.dice-roll-btn.locked .pill-tx{color:#a38c67}
.dice-roll-btn .dice-emoji{font-size:26px;letter-spacing:-3px;display:inline-block;animation:wobble 2.4s ease-in-out infinite}
.dice-roll-btn .pill-tx{font-size:11px;font-weight:900;color:var(--orange-deep);margin-top:6px}
.dice-roll-btn.done .pill-tx{color:var(--teal-deep)}
.dice-row{display:flex;gap:8px;justify-content:center;align-items:center}
.die{
  width:38px;height:38px;border-radius:10px;position:relative;flex-shrink:0;
  background:#fff;border:3px solid var(--brown);box-shadow:0 3px 0 rgba(74,47,29,.2);
}
.pip{
  position:absolute;width:7px;height:7px;border-radius:50%;background:var(--brown);
  transform:translate(-50%,-50%);
}
.dice-row.rolling .die{animation:diceShake .14s linear infinite}
@keyframes diceShake{
  0%{transform:rotate(-9deg) translateY(-2px)}
  50%{transform:rotate(9deg) translateY(2px)}
  100%{transform:rotate(-9deg) translateY(-2px)}
}

/* 先取方向箭嘴：由骰盅射出去中頭彩嗰邊 */
.dice-arrow{
  position:absolute;left:50%;top:50%;z-index:6;
  width:15px;height:48px;margin:-24px 0 0 -7.5px;pointer-events:none;
}
.dice-arrow.to-n{transform:rotate(0deg) translateY(-62px)}
.dice-arrow.to-e{transform:rotate(90deg) translateY(-62px)}
.dice-arrow.to-s{transform:rotate(180deg) translateY(-62px)}
.dice-arrow.to-w{transform:rotate(-90deg) translateY(-62px)}
.dice-arrow i{
  position:relative;display:block;width:100%;height:100%;
  filter:drop-shadow(0 2px 0 rgba(74,47,29,.28));
  animation:arrowShoot .55s cubic-bezier(.25,1.2,.45,1) both .05s;
}
.dice-arrow i::before{ /* 箭桿 */
  content:"";position:absolute;left:3.5px;top:12px;width:8px;height:30px;
  background:#e04545;border-radius:5px;
}
.dice-arrow i::after{ /* 箭咀 */
  content:"";position:absolute;left:-1px;top:-2px;width:17px;height:19px;
  background:#e04545;clip-path:polygon(50% 0,100% 100%,50% 76%,0 100%);
}
@keyframes arrowShoot{from{opacity:0;transform:scale(.4) translateY(16px)}to{opacity:1;transform:none}}

.dice-result{text-align:center;padding:16px 18px 4px}
.dice-sum{font-family:'Baloo 2','Noto Sans TC',sans-serif;font-size:20px;font-weight:800}
/* 先取結果大 banner：一眼睇到邊個先取 */
.pick-banner{
  position:relative;margin:14px auto 0;max-width:330px;
  background:#fff;border:3px solid var(--brown);border-radius:22px;
  padding:16px 16px 13px;
  box-shadow:0 6px 0 rgba(74,47,29,.22),var(--shadow);
  animation:bannerPop .45s cubic-bezier(.34,1.56,.64,1) both;
}
.pick-banner::before{
  content:"取牌位置";
  position:absolute;top:-13px;left:50%;transform:translateX(-50%) rotate(-2deg);
  font-size:15px;font-weight:900;color:#fff;background:#e04545;
  border:2.5px solid var(--brown);border-radius:99px;padding:3px 16px;white-space:nowrap;
}
.pb-main{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:2px}
.pb-face{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--cream);border:2.5px solid var(--brown);font-size:22px;
}
.pb-name{
  font-family:'Baloo 2','Noto Sans TC',sans-serif;font-size:24px;font-weight:800;color:var(--brown);
  max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.15;
}
.pb-wind{
  font-size:11px;font-weight:900;color:#fff;flex-shrink:0;
  border:2.5px solid var(--brown);border-radius:99px;padding:2px 9px;
  box-shadow:0 2px 0 var(--brown);
}
.pb-wind.w1{background:var(--orange)}
.pb-wind.w2{background:var(--teal)}
.pb-wind.w3{background:var(--pink)}
.pb-wind.w4{background:var(--brown-soft)}
.pb-verdict{margin-top:6px;font-size:12.5px;font-weight:900;color:#e04545;letter-spacing:.14em}
@keyframes bannerPop{from{opacity:0;transform:translateY(16px) scale(.9)}to{}}