/* Pork Chop app shell — mobile-first, PWA, chibi pig theme.
   Theme vars can be overridden at runtime from themes/<name>/theme.json */
:root{
  --red:#c8102e; --red-dark:#9c0c24; --gold:#f4b942; --gold-soft:#ffe1a1;
  --bg:#1a0f14; --panel:#2b1a22; --panel2:#3a2430;
  --ink:#f7f0e6; --muted:#c4aea0;
  --felt:#1e5c3a; --felt-dark:#0d3520; --taccent:#f4b942;
  --card-red:#d64545;
  --sat:env(safe-area-inset-top, 0px); --sab:env(safe-area-inset-bottom, 0px);
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--ink);
  height:100vh; height:100dvh; overflow:hidden; overscroll-behavior:none;
  user-select:none; -webkit-user-select:none;
}
body::before{ /* subtle felt texture backdrop */
  content:""; position:fixed; inset:0; z-index:-1;
  background:url("art/bg-felt.webp") center/cover, var(--bg);
  opacity:.5;
}
#app{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:560px;margin:0 auto}
.hidden{display:none!important}
#app.bare #topbar,#app.bare #tabbar{display:none}

/* ---------- header ---------- */
#topbar{
  display:flex;align-items:center;gap:10px;
  padding:calc(var(--sat) + 10px) 14px 10px;
  background:linear-gradient(180deg,#2b0d16,#1a0f14);
  border-bottom:2px solid var(--red-dark);
  flex:0 0 auto;
}
#brand-mini{width:40px;height:40px;border-radius:50%;border:2px solid var(--gold);object-fit:cover;background:var(--panel)}
#wordmark{font-weight:900;font-size:20px;letter-spacing:2px;color:var(--gold);text-shadow:0 2px 0 #5b0a18;flex:1}
#game-badge{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
#game-badge img{width:38px;height:38px;border-radius:12px;border:2px solid var(--taccent);object-fit:cover}
#game-badge-name{font-weight:900;font-size:18px;color:var(--taccent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#chip-pill{margin-left:auto;background:var(--panel2);border:1px solid var(--gold);color:var(--gold);
  font-weight:800;font-size:15px;padding:7px 12px;border-radius:999px;white-space:nowrap}
.iconbtn{
  width:44px;height:44px;border-radius:50%;border:2px solid var(--gold);
  background:var(--panel2);color:var(--gold);font-size:22px;font-weight:900;cursor:pointer;flex:0 0 auto;
}
#btn-back{font-size:30px;line-height:1}

/* ---------- views ---------- */
#views{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;-webkit-overflow-scrolling:touch}
.view{display:none;padding:14px 14px 20px;min-height:100%}
.view.on{display:block;animation:viewIn .22s ease}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- welcome splash ---------- */
#view-welcome{padding:0;display:none}
#view-welcome.on{display:flex}
.splash{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--sat) + 24px) 22px calc(var(--sab) + 30px);text-align:center;
  background:radial-gradient(ellipse at 50% 30%,#3a0f1c 0%,#1a0f14 70%);
}
#splash-banner{
  width:min(94vw,480px);border-radius:20px;border:3px solid var(--gold);
  box-shadow:0 14px 60px rgba(200,16,46,.45);animation:floaty 3.2s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
#splash-tag{margin:20px 0 6px;font-size:19px;font-weight:800;color:var(--gold-soft)}
.splash-btn{font-size:22px!important;padding:18px!important;max-width:340px;animation:pulseBtn 1.8s ease-in-out infinite}
@keyframes pulseBtn{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.splash .muted{margin-top:10px}

/* ---------- gate ---------- */
.gate-wrap{display:flex;flex-direction:column;align-items:center;padding-top:4vh}
#gate-hero{width:min(72vw,300px);border-radius:24px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.gate-card{margin-top:-28px;background:var(--panel);border:2px solid var(--red-dark);border-radius:var(--radius);
  padding:22px 18px;width:min(88vw,340px);text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.45)}
.gate-card input{
  width:100%;padding:14px;border-radius:12px;border:2px solid var(--panel2);
  background:#1a0f14;color:var(--ink);font-size:18px;text-align:center;margin-bottom:12px;user-select:text;-webkit-user-select:text;
}
.gate-card input:focus{outline:none;border-color:var(--gold)}
/* auth tabs */
.gate-tabs{display:flex;gap:8px;width:min(88vw,340px);margin:14px 0 4px;position:relative;z-index:2}
.gate-tab{flex:1;padding:11px 4px;border-radius:12px;border:2px solid var(--red-dark);
  background:#2a0f16;color:#e8b7c0;font-weight:800;font-size:14px;cursor:pointer}
.gate-tab.active{background:var(--red);border-color:var(--gold);color:#fff}
.form-err{color:#ff9aa5;font-size:13px;margin:8px 0 0;min-height:0}
/* topbar user pill */
#user-pill{display:flex;align-items:center;gap:6px;background:#2a0f16;border:2px solid var(--red-dark);
  color:var(--ink);border-radius:999px;padding:6px 12px;font-weight:800;font-size:14px;cursor:pointer}
/* guest nudge banner */
#guest-nudge{margin:8px 12px 0;padding:10px 14px;border-radius:12px;background:#2a0f16;
  border:2px dashed var(--gold);color:var(--ink);font-size:14px;text-align:center}
#guest-nudge button{background:var(--gold);border:none;border-radius:8px;padding:4px 10px;
  font-weight:800;cursor:pointer;color:#3a2200}

/* ---------- buttons ---------- */
.big-btn{
  display:block;width:100%;padding:15px;border:none;border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,var(--red),var(--red-dark));color:#fff;
  font-size:18px;font-weight:800;letter-spacing:.5px;margin:8px 0;
  box-shadow:0 4px 0 #5b0a18, 0 6px 16px rgba(0,0,0,.4);
}
.big-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #5b0a18}
.big-btn.ghost{background:var(--panel2);color:var(--gold);border:2px solid var(--gold);box-shadow:none}
.big-btn:disabled{opacity:.4}
.muted{color:var(--muted);font-size:12px}

/* ---------- games grid ---------- */
.ad-slot:empty{display:none}
.ad-slot{margin:2px 0 12px;text-align:center}
#games-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.game-btn{
  position:relative;border:none;cursor:pointer;border-radius:var(--radius);overflow:hidden;
  background:var(--panel);padding:0;text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,.45);border:2px solid transparent;
  transition:transform .08s ease;
}
.game-btn:active{transform:scale(.96)}
.game-btn.featured{grid-column:1/-1}
.game-btn img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--panel2)}
.game-btn.featured img{aspect-ratio:2.2}
.gmeta{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 8px;background:linear-gradient(180deg,#3a2430,#2b1a22)}
.gname{font-weight:900;font-size:16px;color:var(--gold-soft);flex:1}
.fee{background:#1a0f14;border:1px solid var(--gold);color:var(--gold);font-size:12px;font-weight:800;
  padding:4px 9px;border-radius:999px;white-space:nowrap}
.qbtn{
  position:absolute;top:8px;right:8px;width:38px;height:38px;border-radius:50%;
  background:rgba(26,15,20,.85);border:2px solid var(--gold);color:var(--gold);
  font-size:19px;font-weight:900;cursor:pointer;line-height:1;
}
/* per-game lobby identity — matches table themes */
.game-btn[data-game="tien-len"]{border-color:#2e7d4f}
.game-btn[data-game="phom"]{border-color:#3f7fae}
.game-btn[data-game="mau-binh"]{border-color:#b8862e}
.game-btn[data-game="sam-loc"]{border-color:#c96a25}
.game-btn[data-game="lieng"]{border-color:#a8892e}

/* ---------- pig view ---------- */
.pig-card{background:var(--panel);border:2px solid var(--red-dark);border-radius:var(--radius);
  padding:22px 18px;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.45)}
#pig-avatar{width:110px;height:110px;border-radius:50%;border:3px solid var(--gold);object-fit:cover;background:var(--panel2)}
#pig-name-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px}
#pig-name{font-size:20px}
#pig-rename{width:34px;height:34px;font-size:15px}
#pig-level{margin-top:6px;color:var(--gold-soft);font-size:15px}
#xp-bar{height:12px;background:#1a0f14;border-radius:999px;margin:10px 4px 4px;overflow:hidden;border:1px solid var(--panel2)}
#xp-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold),#ffdf8a);border-radius:999px;transition:width .4s ease}
#pig-xp-note{margin-bottom:8px}
.pig-chips{font-size:24px;font-weight:900;color:var(--gold);margin:10px 0}

/* ---------- table themes (per game identity) ---------- */
#view-table[data-theme="tien-len"]{--felt:#1e5c3a;--felt-dark:#0d3520;--taccent:#f4b942}
#view-table[data-theme="phom"]{--felt:#1d4e6b;--felt-dark:#0e2a3e;--taccent:#8fd8ff}
#view-table[data-theme="mau-binh"]{--felt:#6e2020;--felt-dark:#380f0f;--taccent:#ffd766}
#view-table[data-theme="sam-loc"]{--felt:#5e2a10;--felt-dark:#331505;--taccent:#ffa14d}
#view-table[data-theme="lieng"]{--felt:#4d3c12;--felt-dark:#261e07;--taccent:#ffd35e}

/* ---------- table ---------- */
#view-table{padding:10px}
#table-felt{
  position:relative;overflow:hidden;
  background:radial-gradient(ellipse at center,var(--felt) 0%,var(--felt-dark) 100%);
  border-radius:var(--radius);padding:10px;min-height:62vh;
  display:flex;flex-direction:column;border:2px solid rgba(244,185,66,.25);
}
#table-felt::after{ /* faint game-art watermark = instant game identity */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.10;
  background:center/240px no-repeat;
}
#view-table[data-theme="tien-len"] #table-felt::after{background-image:url(art/game-tien-len.webp)}
#view-table[data-theme="phom"] #table-felt::after{background-image:url(art/game-phom.webp)}
#view-table[data-theme="mau-binh"] #table-felt::after{background-image:url(art/game-mau-binh.webp)}
#view-table[data-theme="sam-loc"] #table-felt::after{background-image:url(art/game-sam-loc.webp)}
#view-table[data-theme="lieng"] #table-felt::after{background-image:url(art/game-lieng.webp)}

/* seat slots */
.seat-row{display:flex;justify-content:center;flex:0 0 auto}
#table-mid{display:flex;align-items:center;justify-content:space-between;flex:1;min-height:150px}
.seat{display:flex;flex-direction:column;align-items:center;width:104px;flex:0 0 auto;position:relative;z-index:1}
.avatar{position:relative;width:64px;height:64px}
.avatar img{width:64px;height:64px;border-radius:50%;object-fit:cover;background:#00000055;
  border:3px solid var(--taccent);display:block;
  box-shadow:0 0 0 2px var(--red-dark),0 4px 12px rgba(0,0,0,.55),0 0 14px rgba(244,185,66,.25)}
.avatar .ccount{
  position:absolute;right:-8px;bottom:-4px;min-width:26px;height:26px;padding:0 5px;
  background:var(--taccent);color:#1a0f14;font-weight:900;font-size:13px;
  border-radius:999px;display:flex;align-items:center;justify-content:center;
  border:2px solid #1a0f14;
}
.avatar::before{ /* timer ring */
  content:"";position:absolute;inset:-7px;border-radius:50%;
  background:conic-gradient(var(--taccent) 0deg 100deg,transparent 100deg 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
  opacity:0;
}
.seat.turn .avatar::before{opacity:1;animation:ringspin 1.2s linear infinite}
@keyframes ringspin{to{transform:rotate(360deg)}}
.seat.turn .avatar img{box-shadow:0 0 18px var(--taccent)}
.nbanner{
  margin-top:6px;max-width:100px;padding:4px 10px;border-radius:8px;
  background:linear-gradient(180deg,var(--red),var(--red-dark));color:#fff;
  font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.seat.me .nbanner{background:linear-gradient(180deg,var(--gold),#d1942a);color:#3a2200}
.seat.me .avatar img{border-color:var(--gold)}
.sstack{font-size:12px;font-weight:800;color:var(--gold-soft);margin-top:3px}
/* empty tappable seat */
.seat.empty{cursor:pointer}
.seat.empty .avatar{
  width:64px;height:64px;border-radius:50%;border:3px dashed var(--gold);
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);animation:seatPulse 1.6s ease-in-out infinite;
}
.seat.empty .avatar span{font-size:30px;color:var(--gold);font-weight:900;line-height:1}
@keyframes seatPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 rgba(244,185,66,0)}50%{transform:scale(1.07);box-shadow:0 0 22px rgba(244,185,66,.55)}}
.seat.empty .nbanner{background:var(--panel2);border:1px solid var(--gold);color:var(--gold);box-shadow:none}

/* side actions (emote / chat) — round buttons on the felt edge */
.side-actions{
  position:absolute;right:8px;top:38%;display:flex;flex-direction:column;gap:10px;z-index:3;
}
.side-actions .iconbtn{width:46px;height:46px;font-size:21px;background:rgba(43,26,34,.9)}

/* ---------- live table chat drawer ---------- */
#view-table{position:relative}
#chat-drawer{
  position:absolute;left:10px;right:10px;bottom:calc(var(--sab) + 10px);z-index:20;
  display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg,#2b0d16,#1a0f14);
  border:2px solid var(--gold);border-radius:16px 16px 12px 12px;
  box-shadow:0 -8px 30px rgba(0,0,0,.6);
  transform:translateY(calc(100% + 24px));transition:transform .25s ease;
}
#chat-drawer.on{transform:none}
#chat-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 8px 8px 14px;font-weight:900;color:#fff;
  background:linear-gradient(180deg,var(--red),var(--red-dark));
}
#chat-head .iconbtn{width:34px;height:34px;font-size:15px;background:rgba(0,0,0,.3)}
#chat-list{
  flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;
  min-height:110px;max-height:36vh;
}
.cmsg{align-self:flex-start;max-width:85%}
.cmsg.mine{align-self:flex-end}
.cbanner{
  display:inline-block;padding:3px 10px;border-radius:8px;margin-bottom:2px;
  background:linear-gradient(180deg,var(--red),var(--red-dark));color:#fff;
  font-size:11px;font-weight:800;
}
.cmsg.mine .cbanner{background:linear-gradient(180deg,var(--gold),#d1942a);color:#3a2200}
.ctime{opacity:.75;font-weight:400;margin-left:6px}
.ctext{
  background:#fffdf8;color:#222;border-radius:10px;padding:8px 12px;font-size:14px;
  word-break:break-word;box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.cmsg.mine .ctext{background:#fff3d6;border:2px solid var(--gold)}
#emote-row{display:flex;gap:6px;justify-content:center;padding:8px;border-top:1px solid #ffffff22}
.emote{
  width:42px;height:42px;font-size:22px;border-radius:50%;cursor:pointer;
  border:2px solid var(--gold);background:var(--panel2);
}
.emote:active{transform:scale(.92)}
#chat-input-row{display:flex;gap:8px;padding:8px 10px calc(var(--sab) + 10px);border-top:1px solid #ffffff22}
#chat-input{
  flex:1;min-width:0;border-radius:999px;border:2px solid var(--red-dark);
  background:#fff;color:#222;font-size:15px;padding:10px 16px;
}
#chat-input:focus{outline:none;border-color:var(--gold)}
#btn-chat{position:relative}
#chat-badge{
  position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;padding:0 5px;
  background:var(--red);color:#fff;border:2px solid #fff;border-radius:999px;
  font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center;
}
#pile-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;z-index:1}
.pile{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;padding:6px;min-height:96px;max-width:100%}
.pile .who{width:100%;text-align:center;font-size:12px;color:var(--gold-soft);font-weight:700}
.dealer-spot{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px}
.dealer-spot img{width:84px;border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.dealer-spot .hint{font-size:14px;font-weight:800;color:var(--gold-soft)}
.status{text-align:center;margin:4px 0;min-height:22px;color:var(--taccent);font-weight:800;font-size:15px}

/* fanned hand — always a fan, never a stacked deck.
   Readability guarantee: every card exposes a 30px left strip holding a
   fixed 24px corner rank (never shrinks). Narrow screens shrink CARD WIDTH,
   never text. step=30, cw=clamp(w-(n-1)*30, 40, 70). */
.hand{
  display:flex;align-items:flex-end;justify-content:center;
  padding:14px 6px 4px;min-height:118px;position:relative;z-index:2;
}
.pcard{
  flex:0 0 auto;width:70px;height:112px;background:#fffdf8;border-radius:10px;color:#222;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;cursor:pointer;border:3px solid transparent;
  box-shadow:0 3px 8px rgba(0,0,0,.45);position:relative;
  touch-action:manipulation; /* no double-tap zoom delay: double-tap selects the pair */
}
/* real-card face: corner indices top-left + bottom-right (rotated 180°),
   modest center pip in harmony with the corners — never giant.
   The 24px rank is condensed (letter-spacing + scaleX) so even "10"
   fits the 30px readable strip of the fan. */
.pcard .corner{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1;}
.pcard .corner.tl{top:5px;left:6px;}
.pcard .corner.br{bottom:5px;right:6px;transform:rotate(180deg);}
.pcard .rank{font-size:24px;font-weight:800;letter-spacing:-1px;display:inline-block;transform:scaleX(.88);transform-origin:left top;}
.pcard .corner .cs{font-size:20px;line-height:1;margin-top:2px;}
.pcard .pip{font-size:30px;line-height:1;}
.pcard.red{color:var(--card-red)}
.pcard.sel{border-color:var(--gold);transform:translateY(-16px)!important;box-shadow:0 10px 20px rgba(244,185,66,.5);z-index:5}
.pcard.small{width:56px;height:80px;cursor:default}
.pcard.small .corner.tl{top:3px;left:4px;}
.pcard.small .corner.br{bottom:3px;right:4px;}
.pcard.small .rank{font-size:15px;}
.pcard.small .corner .cs{font-size:13px;}
.pcard.small .pip{font-size:22px;}
/* ---- custom Pork Chop deck: pig face cards + card backs ---- */
.pcard .face{width:54px;height:64px;object-fit:cover;border-radius:7px;display:block}
.pcard.small .face{width:38px;height:44px}
.pcard.facecard{box-shadow:inset 0 0 0 2px var(--gold),0 3px 8px rgba(0,0,0,.45)}
.pcard.back{background:url('art/card-back.webp') center/cover no-repeat,#a41225;border-color:#f4b942}
.pcard.mini{width:34px;height:48px;border-radius:6px;flex:0 0 auto;cursor:default}
/* seat mini face-down stack: overlapping backs + count badge */
.handstack{position:absolute;right:-10px;bottom:-6px;width:46px;height:58px;pointer-events:none}
.handstack .pcard.mini{position:absolute;left:0;bottom:0;
  transform:translate(calc(var(--i,0)*4px),calc(var(--i,0)*-4px));
  box-shadow:0 2px 5px rgba(0,0,0,.5)}
.handstack .ccount{position:absolute;right:-8px;top:-10px;min-width:26px;height:26px;padding:0 5px;
  background:var(--taccent);color:#1a0f14;font-weight:900;font-size:13px;
  border-radius:999px;display:flex;align-items:center;justify-content:center;
  border:2px solid #1a0f14;z-index:2}
/* face-down minis elsewhere (e.g. Mậu Binh submitted rows) use the real back art */
.mini.back{background:url('art/card-back.webp') center/cover no-repeat,var(--red-dark)}
.controls{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:8px;position:relative;z-index:2}
.controls .big-btn{width:auto;flex:1;margin:0;padding:14px 8px}
.controls .iconbtn{margin:0}

/* ---------- tab bar ---------- */
#tabbar{
  flex:0 0 auto;display:flex;background:#20090f;border-top:2px solid var(--red-dark);
  padding:6px 8px calc(var(--sab) + 8px);
}
.tab{
  flex:1;background:none;border:none;color:var(--muted);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 0 4px;border-radius:12px;min-height:60px;
}
.tab .tico{font-size:26px;line-height:1}
.tab .tlabel{font-size:12px;font-weight:800}
.tab.active{color:var(--gold)}
.tab.active .tico{filter:drop-shadow(0 0 8px rgba(244,185,66,.7))}
#tabbar.hidden{display:none}

/* ---------- modals ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;z-index:50;padding:20px}
.modal.on{display:flex;animation:viewIn .18s ease}
.modal .box{background:var(--panel);border:2px solid var(--red-dark);border-radius:var(--radius);
  padding:22px;max-width:400px;width:100%;text-align:center;max-height:80vh;overflow-y:auto}
.modal h2{color:var(--gold);margin-bottom:12px;font-size:21px}
#rules-list{text-align:left;margin:0 0 14px 4px;list-style:none}
#rules-list li{padding:8px 0 8px 30px;position:relative;font-size:15px;line-height:1.45;border-bottom:1px solid var(--panel2)}
#rules-list li:last-child{border-bottom:none}
#rules-list li::before{content:"🐷";position:absolute;left:2px;top:8px}
.place{display:flex;justify-content:space-between;padding:8px 4px;border-bottom:1px solid var(--panel2);font-size:15px}
#over-body .chips{font-size:19px;color:var(--gold);font-weight:900;margin-top:12px}

/* ---------- mậu binh arrangement ---------- */
.arrange{display:flex;flex-direction:column;gap:6px;width:100%;max-width:340px;padding:4px}
.arrange-hint{text-align:center;font-size:12px;font-weight:800;color:var(--gold-soft)}
.arow{background:#00000033;border-radius:10px;padding:6px 8px;cursor:pointer;border:2px solid transparent;transition:border-color .15s}
.arow:active{border-color:var(--gold)}
.arow-label{display:flex;justify-content:space-between;font-size:12px;font-weight:900;color:var(--ink);margin-bottom:4px}
.arow-eval{color:var(--gold);font-weight:800}
.arow-slots{display:flex;gap:4px;min-height:46px;align-items:center}
.slot-empty{width:34px;height:46px;border:2px dashed #ffffff55;border-radius:6px;flex:0 0 auto}
.arow.lung .arow-label{color:#ff8a8a}
.lung-warn{text-align:center;color:#ff6b6b;font-weight:900;font-size:13px;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.55}}
.arow-btns{display:flex;gap:8px}
.arow-btns .big-btn{flex:1;margin:0;padding:12px 6px;font-size:14px}
.arow.done .arow-slots{cursor:default}

/* mini cards (arrange rows, phỏm melds/discards) */
.mini{width:34px;height:46px;background:#fffdf8;border-radius:6px;color:#222;flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-weight:800;font-size:13px;line-height:1.15;box-shadow:0 2px 5px rgba(0,0,0,.4);cursor:pointer}
.mini .s{font-size:15px}
.mini.red{color:var(--card-red)}
.mini.back{background:linear-gradient(135deg,var(--red) 30%,var(--red-dark) 70%);font-size:18px;cursor:default}
.mini.empty{background:transparent;box-shadow:none;border:2px dashed #ffffff44;color:#ffffff88;cursor:default}

/* ---------- phỏm center ---------- */
.phom-mid{display:flex;gap:18px;align-items:center;justify-content:center;margin-bottom:4px}
.stock,.discard{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--gold-soft);font-weight:700}
.stock{font-size:26px}
.meld-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;margin:2px 0;max-width:100%}
.meld-who{font-size:11px;font-weight:900;color:var(--ink);min-width:44px;text-align:right}
.meld{display:flex;gap:2px;background:#00000033;border-radius:6px;padding:2px}
.meld .mini{cursor:default}

/* ---------- liêng betting center ---------- */
.bet-info{font-size:17px;color:var(--gold);font-weight:900;text-align:center}
.bets{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.bet{font-size:12px;font-weight:700;background:#00000033;border-radius:999px;padding:4px 10px}
.bet.folded{opacity:.45;text-decoration:line-through}

/* ---------- game over extras ---------- */
.special-win{text-align:center;font-size:16px;font-weight:900;color:var(--gold);margin-bottom:10px;
  background:#00000033;border-radius:10px;padding:8px}

/* ---------- toast ---------- */
#toast{
  position:fixed;left:50%;bottom:calc(var(--sab) + 90px);transform:translateX(-50%) translateY(20px);
  background:var(--panel2);border:2px solid var(--gold);color:var(--ink);
  padding:12px 20px;border-radius:999px;font-weight:700;font-size:14px;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:99;max-width:90vw;text-align:center;
}
#toast.on{opacity:1;transform:translateX(-50%)}