:root{
  --blue:#2f6fe4;
  --pink:#e8478f;
  --yellow:#f0b400;
  --purple:#8a4fd6;
  --bg:#12341f;
  --bg2:#0c2416;
  --ink:#f4f1e8;
  --panel:rgba(0,0,0,.28);

  /* 安全區（iPhone 瀏海／Home Indicator） */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);

  /* 所有人的手牌共用同一組尺寸；同時被畫面高度與寬度限制住 */
  --ch:clamp(58px, min(13.6vh, 19vw), 110px);
  --cw:calc(var(--ch) / 1.45);
  --chb:calc(var(--ch) * 1.2);
  --cwb:calc(var(--chb) / 1.45);

  /* 對手的牌相對自己手牌的比例：手機上要縮小才塞得下 5 個對手 */
  --ofac:1;
  --ocw:calc(var(--cw) * var(--ofac));
  --och:calc(var(--ch) * var(--ofac));

  --logh:56px;
}
@supports (height:100dvh){
  :root{ --ch:clamp(58px, min(13.6dvh, 19vw), 110px) }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  color:var(--ink);
  background:radial-gradient(ellipse at 50% 30%,#1b4a2b 0%,var(--bg) 45%,var(--bg2) 100%);
  overflow:hidden;
  /* 觸控裝置：不要橡皮筋捲動、不要雙擊縮放、不要長按選字／灰色點擊高亮 */
  overscroll-behavior:none;
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
}
.hidden{display:none !important}
.screen{height:100vh;display:flex;flex-direction:column}
@supports (height:100dvh){ .screen{height:100dvh} }

/* ---------- setup ---------- */
#setup{
  align-items:center;justify-content:center;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(var(--sat) + 8px) calc(var(--sar) + 8px) calc(var(--sab) + 8px) calc(var(--sal) + 8px);
}
.setup-box{
  width:min(560px,94vw);background:var(--panel);border:1px solid rgba(255,255,255,.12);
  border-radius:18px;padding:26px 24px;backdrop-filter:blur(6px);margin:16px 0;
}
.setup-box h1{margin:0 0 22px;font-size:clamp(26px,6vw,34px);letter-spacing:2px}
.setup-box h1 span{color:var(--yellow)}
.field{margin-bottom:16px}
.field>label{display:block;font-size:13px;opacity:.75;margin-bottom:8px;letter-spacing:1px}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{
  flex:1;min-width:56px;min-height:44px;padding:10px 6px;border-radius:10px;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:var(--ink);
  font-size:15px;transition:.15s;-webkit-appearance:none;appearance:none;
}
.seg button.on{background:var(--yellow);color:#1c1200;border-color:var(--yellow);font-weight:700}
.seg button:active{transform:scale(.96)}
.seats{display:flex;flex-direction:column;gap:8px}
.seat{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);padding:8px 12px;border-radius:10px}
.seat .nm{width:56px;font-weight:600}
.seat .seg{flex:1}
.seat .seg button{padding:6px;font-size:13px;min-width:auto;min-height:40px}
.seat.fixed{opacity:.7}
.check{display:flex;align-items:center;gap:10px;font-size:15px;opacity:.9;min-height:44px}
.check input{width:22px;height:22px}
button.primary{
  width:100%;min-height:52px;padding:14px;margin-top:6px;border:0;border-radius:12px;cursor:pointer;
  background:linear-gradient(180deg,#ffd34d,#f0a500);color:#241700;
  font-size:17px;font-weight:800;letter-spacing:2px;-webkit-appearance:none;appearance:none;
}
button.primary:active{transform:scale(.985);filter:brightness(.95)}
button.ghost{
  border:1px solid rgba(255,255,255,.2);background:transparent;color:var(--ink);
  padding:8px 14px;min-height:38px;border-radius:9px;cursor:pointer;font-size:13px;
  -webkit-appearance:none;appearance:none;
}
button.ghost:active{background:rgba(255,255,255,.16)}
.hint{font-size:12px;opacity:.6;text-align:center;margin:10px 0 0}

/* ---------- topbar ---------- */
#topbar{
  display:flex;align-items:center;gap:14px;flex-wrap:nowrap;
  padding:calc(var(--sat) + 8px) calc(var(--sar) + 12px) 8px calc(var(--sal) + 12px);
  background:rgba(0,0,0,.25);
}
.stat{display:flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
.stat .k{opacity:.6}
.stat .v{font-weight:700;font-size:16px}
#dirIcon{display:inline-block}
#dirIcon.spin{animation:dirspin .6s cubic-bezier(.4,1.4,.5,1)}
@keyframes dirspin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.swatch{width:22px;height:22px;border-radius:50%;display:inline-block;border:2px solid rgba(255,255,255,.6)}
#quitBtn{margin-left:auto}

/* ---------- 對手座位（上方）---------- */
/* 手機上人多時改成可橫向滑動，不要換行把畫面撐爆 */
.pseats{
  display:flex;align-items:flex-start;gap:12px;
  justify-content:center;
  justify-content:safe center;   /* 塞不下時從左邊開始，不要把最左邊那位切掉 */
  padding:14px 10px 0;flex-wrap:nowrap;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.pseats::-webkit-scrollbar{display:none}
.pseat{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:10px 12px 6px;border-radius:18px;transition:.2s;flex:0 0 auto;
  background:rgba(0,0,0,.16);border:2px solid rgba(255,255,255,.06);
}
.pseat.active{border-color:var(--yellow);background:rgba(240,180,0,.09);box-shadow:0 0 24px rgba(240,180,0,.22)}
.pseat .who{font-size:13px;white-space:nowrap}
.pseat .who b{font-weight:800;letter-spacing:1px}
.pseat .who span{opacity:.6;font-size:11px}
.pseat.said .who::after{content:" 最後一張！";color:var(--yellow);font-weight:800;font-size:11px}

/* 扇形手牌 */
.fan{display:flex;justify-content:center;align-items:flex-start;height:calc(var(--och) + 20px)}
.fan .card{
  width:var(--ocw);height:var(--och);
  position:relative;transform:rotate(var(--a,0deg));transform-origin:50% 165%;
}
.pseat.active .fan .card:last-child{box-shadow:0 6px 16px rgba(240,180,0,.5)}

/* ---------- table ---------- */
.table{
  flex:1 1 auto;min-height:calc(var(--chb) + 40px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;
}
/* 桌面（橢圓桌布） */
.table::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(1180px,94vw);height:min(600px,86%);border-radius:50%;
  background:radial-gradient(ellipse at 50% 32%,rgba(255,255,255,.07),rgba(0,0,0,.12) 72%);
  border:2px solid rgba(255,255,255,.08);
  box-shadow:inset 0 0 90px rgba(0,0,0,.4),0 12px 40px rgba(0,0,0,.25);
  pointer-events:none;
}

/* 拖曳投放區 */
.dropzone{
  position:absolute;inset:8px 10px;border-radius:20px;pointer-events:none;
  border:2px dashed rgba(255,255,255,.25);opacity:0;transition:.18s;
  display:flex;align-items:flex-start;justify-content:center;padding-top:8px;
  font-size:13px;letter-spacing:2px;color:rgba(255,255,255,.45);
}
.dropzone.show{opacity:1}
.dropzone.hot{
  border-color:var(--yellow);background:rgba(240,180,0,.10);
  box-shadow:inset 0 0 40px rgba(240,180,0,.18);color:var(--yellow);
}
.dropzone.bad.hot{border-color:#e05656;background:rgba(224,86,86,.10);box-shadow:none;color:#ffb3b3}
.dropzone.hot span::after{content:"　放開出牌"}
.dropzone.bad.hot span::after{content:"　這張牌不能出"}

/* 方向指示環 */
.ringwrap{
  position:absolute;left:50%;top:50%;width:min(340px,74vw,42vh);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;perspective:900px;
}
.ringflip{
  width:100%;height:100%;color:rgba(255,255,255,.30);
  transition:transform .55s cubic-bezier(.4,1.5,.5,1),color .4s;
}
.ringwrap.ccw .ringflip{transform:rotateY(180deg)}
.ringwrap.flash .ringflip{color:var(--yellow);filter:drop-shadow(0 0 10px rgba(240,180,0,.65))}
.ringflip svg{width:100%;height:100%;display:block}
/* 平常靜止不動，只有迴轉時整個環水平翻轉一次 */
@media (prefers-reduced-motion:reduce){.ringflip{transition:none}}

.pile{display:flex;align-items:center;gap:clamp(16px,6vw,46px);position:relative;z-index:1}
.discard{width:var(--cwb);height:var(--chb);display:flex;align-items:center;justify-content:center}

/* 牌堆：橫放的一疊 */
.deck{
  position:relative;width:var(--chb);height:var(--cwb);cursor:pointer;transition:transform .15s;
  touch-action:manipulation;
}
.deck:active{transform:scale(.95)}
.deck .card{
  position:absolute;left:50%;top:50%;width:var(--cwb);height:var(--chb);margin:0;
  transform:translate(-50%,-50%) rotate(90deg);
}
.deck .card:nth-child(2){transform:translate(-50%,-50%) rotate(90deg) translate(3px,3px)}
.deck .card:nth-child(3){transform:translate(-50%,-50%) rotate(90deg) translate(6px,6px)}
.decklabel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:13px;letter-spacing:3px;color:#ffd9d9;text-shadow:0 2px 6px rgba(0,0,0,.8);
  pointer-events:none;
}
.banner{
  margin-top:10px;min-height:24px;font-size:clamp(13px,3.6vw,16px);font-weight:700;
  color:var(--yellow);text-shadow:0 2px 8px rgba(0,0,0,.5);text-align:center;padding:0 10px;
}

/* ---------- cards ---------- */
.card{
  width:var(--cw);height:var(--ch);border-radius:9px;position:relative;cursor:default;
  background:#fff;color:#222;box-shadow:0 4px 10px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  transition:transform .12s,box-shadow .12s;
  border:3px solid #fff;
}
.card.big{width:var(--cwb);height:var(--chb)}
.card .mid{font-size:calc(var(--cw) * .40);font-weight:900;line-height:1}
.card .mid.small{font-size:calc(var(--cw) * .23)}
.card.big .mid{font-size:calc(var(--cwb) * .40)}
.card.big .mid.small{font-size:calc(var(--cwb) * .23)}
.card .corner{position:absolute;font-size:calc(var(--cw) * .19);font-weight:800;line-height:1}
.card .corner.tl{top:4px;left:5px}
.card .corner.br{bottom:4px;right:5px;transform:rotate(180deg)}
.card.c-blue{color:var(--blue);border-color:var(--blue)}
.card.c-pink{color:var(--pink);border-color:var(--pink)}
.card.c-yellow{color:#c08c00;border-color:var(--yellow)}
.card.c-purple{color:var(--purple);border-color:var(--purple)}
.card.wild{background:conic-gradient(var(--blue) 0 25%,var(--pink) 0 50%,var(--yellow) 0 75%,var(--purple) 0);color:#fff;border-color:#fff}
.card.wild .mid{text-shadow:0 2px 6px rgba(0,0,0,.7)}
.card.back{
  background:repeating-linear-gradient(45deg,#8d1b1b,#8d1b1b 8px,#6d1212 8px,#6d1212 16px);
  color:#ffd9d9;border-color:#fff;font-weight:800;letter-spacing:2px;cursor:pointer;
}
.card.playable{cursor:pointer}
.card.dim{opacity:.42;filter:grayscale(.5)}
.card.justdrawn{outline:3px solid var(--yellow);outline-offset:2px}

/* 滑鼠：hover 抬起 */
@media (hover:hover) and (pointer:fine){
  .seg button:hover{background:rgba(255,255,255,.14)}
  button.primary:hover{filter:brightness(1.07)}
  button.ghost:hover{background:rgba(255,255,255,.1)}
  .deck:hover{transform:translateY(-3px)}
  .hand .card.playable:hover{
    transform:rotate(var(--a,0deg)) translateY(-20px);
    box-shadow:0 14px 26px rgba(0,0,0,.55);z-index:6;
  }
  .picker-row button:hover{transform:translateY(-4px)}
}
/* 觸控：沒有 hover，改成可出的牌本來就浮起來一點＋按下去有回饋 */
@media (hover:none){
  .hand .card.playable{
    transform:rotate(var(--a,0deg)) translateY(-10px);
    box-shadow:0 10px 20px rgba(0,0,0,.5);
  }
  .hand .card.playable:active{
    transform:rotate(var(--a,0deg)) translateY(-22px) scale(1.04);
    box-shadow:0 16px 28px rgba(0,0,0,.6);z-index:6;
  }
}

/* 拖曳中的牌（脫離手牌流，改用 fixed 定位） */
.card.dragging{
  position:fixed;z-index:60;margin:0;transition:none;pointer-events:auto;
  box-shadow:0 18px 34px rgba(0,0,0,.55);cursor:grabbing;touch-action:none;
}
.card.snapback{transition:transform .22s cubic-bezier(.3,1.2,.5,1)}
.hand .card{touch-action:none}

/* 飛牌動畫層 */
.fx{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.fly{position:fixed;left:0;top:0;pointer-events:none;will-change:transform;box-shadow:0 14px 28px rgba(0,0,0,.5)}
@keyframes landpop{0%{transform:scale(1.14)}100%{transform:scale(1)}}
.discard .card.landed{animation:landpop .18s ease-out}

/* ---------- hand ---------- */
.hand-area{
  background:rgba(0,0,0,.3);border-top:2px solid rgba(255,255,255,.1);
  padding:6px calc(var(--sar) + 12px) calc(var(--sab) + 10px) calc(var(--sal) + 12px);
  transition:.2s;flex:0 0 auto;
}
.hand-area.active{border-top-color:var(--yellow);box-shadow:0 -8px 26px rgba(240,180,0,.16)}
.hand-head{display:flex;align-items:center;gap:10px;margin-bottom:2px;min-height:38px}
#handOwner{font-weight:800;letter-spacing:1px;font-size:clamp(12px,3.4vw,15px)}
.hand-actions{margin-left:auto;display:flex;gap:8px}
button.declare{
  border:0;border-radius:9px;padding:8px 16px;min-height:40px;cursor:pointer;
  font-weight:800;letter-spacing:1px;white-space:nowrap;
  background:linear-gradient(180deg,#ff6a6a,#d92b2b);color:#fff;
  animation:pulse 1s infinite;-webkit-appearance:none;appearance:none;
}
button.declare.done{background:#2c7a4b;animation:none}
button.declare:active{filter:brightness(.9)}
@keyframes pulse{50%{transform:scale(1.06)}}
.hand{
  display:flex;justify-content:center;align-items:flex-start;
  overflow:visible;padding:26px 2px 4px;
  height:calc(var(--ch) + 34px);
}

/* ---------- log ---------- */
.logbox{
  height:var(--logh);overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:4px calc(var(--sar) + 14px) 4px calc(var(--sal) + 14px);
  font-size:12.5px;line-height:1.6;opacity:.85;background:rgba(0,0,0,.18);flex:0 0 auto;
}
.logbox div{border-bottom:1px dashed rgba(255,255,255,.07)}

/* ---------- overlays ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:20;
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--sat) + 12px) calc(var(--sar) + 12px) calc(var(--sab) + 12px) calc(var(--sal) + 12px);
}
.picker{
  background:#1b3a27;border:1px solid rgba(255,255,255,.16);border-radius:16px;
  padding:24px 26px;text-align:center;min-width:min(300px,86vw);max-width:94vw;
  max-height:100%;overflow-y:auto;
}
.picker.wide{min-width:min(340px,88vw)}
.picker h3{margin:0 0 16px;font-size:clamp(17px,4.6vw,20px)}
.picker-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.picker-row button{
  width:clamp(60px,17vw,70px);height:clamp(76px,22vw,88px);
  border-radius:10px;border:3px solid #fff;cursor:pointer;
  font-size:clamp(24px,7vw,30px);color:#fff;font-weight:900;
  -webkit-appearance:none;appearance:none;
}
.picker-row button:active{transform:scale(.94)}
/* 排名：前三名金／銀／銅＋獎牌，第四名以後紅色 */
.rank{
  list-style:none;text-align:left;padding:0;margin:0 0 18px;
  display:flex;flex-direction:column;gap:7px;font-size:16px;
}
.rank li{
  display:flex;align-items:center;gap:10px;
  padding:7px 12px;border-radius:11px;
  background:rgba(255,255,255,.05);border:1px solid transparent;
}
.rank .medal{flex:0 0 auto;width:1.7em;text-align:center;font-size:20px;font-weight:800}
.rank .nm{font-weight:800;letter-spacing:1px;white-space:nowrap}
.rank .res{margin-left:auto;padding-left:10px;font-size:14px;opacity:.85;white-space:nowrap}

.rank .r1{                       /* 金黃色 */
  color:#ffd34d;background:rgba(255,211,77,.13);border-color:rgba(255,211,77,.5);
  box-shadow:0 0 20px rgba(255,211,77,.18);
}
.rank .r2{                       /* 銀白色 */
  color:#e7edf3;background:rgba(231,237,243,.10);border-color:rgba(231,237,243,.42);
}
.rank .r3{                       /* 銅棕色 */
  color:#e29a5a;background:rgba(226,154,90,.13);border-color:rgba(226,154,90,.5);
}
.rank .r4{                       /* 第四名以後 */
  color:#ef8080;background:rgba(239,128,128,.08);border-color:rgba(239,128,128,.26);
}
.rank .r4 .medal{opacity:.75;font-size:16px}

/* ---------- 小螢幕 / 直向手機 ---------- */
@media (max-width:820px){
  #topbar{gap:10px;font-size:12px}
  .stat .v{font-size:15px}
  .pseats{gap:6px;padding:10px 4px 0}
  .pseat{padding:6px 8px 4px;border-radius:14px}
  .pseat .who{font-size:11.5px}
  .pseat .who span{display:none}
  .pile{gap:clamp(14px,7vw,30px)}
  :root{--logh:46px}
  .hand{padding:22px 2px 2px}
}
/* 手機：對手的牌縮小，5 個對手也要塞得進一個螢幕寬 */
@media (max-width:720px){
  :root{--ofac:.62}
  .pseat .who{font-size:11px}
}

/* ---------- 橫向手機：高度很矮，砍掉可省的區塊 ---------- */
@media (orientation:landscape) and (max-height:520px){
  :root{
    --ch:clamp(50px, 15vh, 84px);
    --logh:0px;
  }
  @supports (height:100dvh){ :root{ --ch:clamp(50px, 15dvh, 84px) } }
  #topbar{padding-top:calc(var(--sat) + 4px);padding-bottom:4px;gap:10px}
  .logbox{display:none}
  .pseats{padding:6px 8px 0;gap:6px}
  .pseat{padding:4px 8px 2px}
  .fan{height:calc(var(--och) + 12px)}
  .hand{padding:18px 2px 0;height:calc(var(--ch) + 24px)}
  .hand-head{min-height:32px;margin-bottom:0}
  .banner{margin-top:4px;min-height:20px}
  .table{min-height:calc(var(--chb) + 20px)}
  .ringwrap{width:min(300px,52vw,80vh)}
  /* 結算名單壓扁，6 個人加上按鈕要能一次看完，不用捲 */
  .picker{padding:14px 18px}
  .picker h3{margin-bottom:10px;font-size:16px}
  .rank{gap:4px;margin-bottom:10px;font-size:14px}
  .rank li{padding:3px 10px}
  .rank .medal{font-size:16px}
  .rank .res{font-size:12px}
  .picker button.primary{min-height:42px;padding:9px;font-size:15px;margin-top:2px}
}

/* ---------- iPad：桌面尺寸但仍是觸控 ---------- */
@media (min-width:820px) and (hover:none){
  .pseats{gap:14px}
  .hand-head{min-height:44px}
  button.declare{padding:10px 20px;min-height:46px}
  button.ghost{min-height:44px;padding:10px 16px}
}