/* 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}

/* bet picker */
#bet-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.bet-chip{background:var(--panel2);border:2px solid var(--gold);border-radius:12px;padding:14px 6px;
  font-size:17px;font-weight:900;color:var(--gold);cursor:pointer}
.bet-chip.sel{background:var(--red);border-color:#fff;color:#fff;transform:scale(1.05)}
.bet-chip.cant{opacity:.35;cursor:not-allowed;border-style:dashed}
.bet-chip small{display:block;font-size:10px;font-weight:400;opacity:.8;margin-top:2px}
.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;gap:14px}
.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:3.2;object-fit:cover;display:block;background:var(--panel2)}
.game-btn.featured img{aspect-ratio:2.6}
/* name ribbon: pennant fused to the right edge, no separate label bar */
.gribbon{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  background:linear-gradient(135deg,#f4b942,#c8862a);
  color:#2b0d0d;font-weight:900;font-size:17px;letter-spacing:.5px;
  padding:10px 16px 10px 30px;max-width:62%;
  clip-path:polygon(22px 0,100% 0,100% 100%,22px 100%,0 50%);
  box-shadow:-4px 0 12px rgba(0,0,0,.4);
}
.gribbon .gname{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fee{position:absolute;left:10px;bottom:10px;background:rgba(26,15,20,.88);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{
  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}

/* ---------- world chat + friends (v17 social) ---------- */
#view-chat.on{display:flex;flex-direction:column;height:100%}
#chat-subtabs{display:flex;gap:8px;padding:10px 12px 4px}
.subtab{
  flex:1;padding:10px;border-radius:12px;border:2px solid transparent;cursor:pointer;
  background:var(--panel2);color:#fff;font-weight:800;font-size:15px;position:relative;
}
.subtab.active{border-color:var(--gold);background:#3a2b1a}
#chat-world-pane,#chat-friends-pane,#chat-thread-pane{flex:1;display:flex;flex-direction:column;min-height:0}
#world-head{padding:2px 14px}
#world-list,#thread-list{
  flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px;min-height:120px;
}
#world-input-row,#thread-input-row{display:flex;gap:8px;padding:8px 10px calc(var(--sab) + 10px)}
#world-input,#thread-input,#friend-add-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;
}
#world-input:focus,#thread-input:focus,#friend-add-input:focus{outline:none;border-color:var(--gold)}
.quick-row{display:flex;gap:6px;overflow-x:auto;padding:8px 10px;border-top:1px solid #ffffff22}
.qchip{
  flex:0 0 auto;padding:8px 12px;border-radius:999px;cursor:pointer;font-size:13px;font-weight:700;
  background:var(--panel2);border:2px solid var(--gold);color:#fff;white-space:nowrap;
}
.qchip:active{transform:scale(.94)}
#friend-add-row{display:flex;gap:8px;padding:10px 12px}
.frow{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:var(--panel2);border-radius:10px;padding:10px 12px;margin:0 12px 8px;font-size:14px;
}
.frow.fclick{cursor:pointer}
.frow.fclick:active{transform:scale(.98)}
.mini-btn{
  padding:6px 12px;border-radius:999px;border:none;cursor:pointer;font-weight:800;font-size:13px;
  background:linear-gradient(180deg,var(--gold),#d1942a);color:#3a2200;
}
.mini-btn.ghost{background:#ffffff22;color:#fff}
#thread-head{display:flex;align-items:center;gap:8px;padding:8px 12px}
#thread-head b{font-size:16px}
#thread-head .iconbtn{width:34px;height:34px;font-size:16px}
#view-chat .badge{position:static;margin-left:6px}
.tab .badge{position:absolute;top:2px;right:8px}
.subtab .badge{position:absolute;top:4px;right:10px}
#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;}
.suit-img{width:1em;height:1em;object-fit:contain;vertical-align:-0.15em}
.pcard.red{color:var(--card-red)}
.pcard.sel{border-color:var(--gold);transform:translateY(-8px)!important;box-shadow:0 6px 14px rgba(244,185,66,.5);z-index:5}
/* selected-cards preview tray: floats above the hand so big cards never block taps */
#sel-tray{display:flex;justify-content:center;gap:6px;padding:8px;min-height:0}
#sel-tray.hidden{display:none}
#sel-tray .pcard{width:64px;height:92px;cursor:pointer;animation:emote-in .2s ease-out}
.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 .tico img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid transparent;display:block;margin:0 auto}
.tab.active .tico img{border-color:var(--gold)}
.cur-ico{width:20px;height:20px;object-fit:contain;vertical-align:-4px}
.cur-ico.big{width:28px;height:28px;vertical-align:-6px}
.cur-ico.world{width:36px;height:36px;vertical-align:-8px}
/* ---------- table browser ---------- */
.games-head{display:flex;justify-content:flex-end;margin-bottom:8px}
.trophy-btn{background:var(--panel);border:2px solid var(--gold);border-radius:50%;width:52px;height:52px;
  cursor:pointer;padding:4px;box-shadow:0 0 12px rgba(244,185,66,.4)}
.trophy-btn img{width:100%;height:100%;object-fit:cover;border-radius:50%}
#leaders-list{display:flex;flex-direction:column;gap:8px}
.lb-row{display:flex;align-items:center;gap:12px;background:var(--panel);border:2px solid var(--red-dark);
  border-radius:var(--radius);padding:10px 14px}
.lb-rank{font-size:20px;font-weight:900;color:var(--gold);min-width:36px;text-align:center}
.lb-row:nth-child(1) .lb-rank{font-size:26px}
.lb-name{flex:1;font-weight:900;color:#fff;font-size:15px}
.lb-name small{display:block;color:var(--gold-soft);font-weight:700;font-size:12px}
.lb-chips{font-weight:900;color:var(--gold);font-size:15px}
.lb-chips .cur-ico{width:18px;height:18px;vertical-align:-3px}
/* ---------- settings ---------- */
.pig-top{position:relative;display:inline-block}
.settings-btn{position:absolute;top:-8px;right:-8px;width:44px;height:44px;border-radius:50%;
  background:var(--panel2);border:2px solid var(--gold);padding:4px}
.settings-btn img{width:100%;height:100%;object-fit:cover;border-radius:50%}
#set-sfx .cur-ico{width:28px;height:28px;vertical-align:middle}
.set-row{display:flex;align-items:center;justify-content:space-between;
  padding:14px 4px;border-bottom:1px solid var(--red-dark);font-weight:800;color:#fff}
.set-row:last-child{border-bottom:none}
.toggle-btn{background:var(--panel2);border:2px solid var(--gold);color:#fff;border-radius:999px;
  padding:8px 18px;font-weight:900;font-size:16px;cursor:pointer}
/* ---------- pig RPG ---------- */
#pig-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}
.stat-box{background:var(--panel2);border:1px solid var(--red-dark);border-radius:12px;
  padding:10px;text-align:center}
.stat-box .stat-name{font-size:11px;font-weight:800;color:var(--gold-soft);text-transform:uppercase;letter-spacing:1px}
.stat-box .stat-val{font-size:20px;font-weight:900;color:var(--gold)}
#gear-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 14px}
.gear-slot{background:var(--panel2);border:2px dashed var(--red-dark);border-radius:12px;
  aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;padding:6px}
.gear-slot.filled{border-style:solid;border-color:var(--gold)}
.gear-slot img{width:48px;height:48px;object-fit:contain}
.gear-slot .gear-name{font-size:10px;font-weight:800;color:#fff;text-align:center;margin-top:4px;line-height:1.2}
.gear-slot .gear-slot-name{font-size:10px;font-weight:800;color:var(--gold-soft);text-transform:uppercase}
/* gear picker + shop */
.gear-pick{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto}
.gear-pick-btn{display:flex;align-items:center;gap:12px;background:var(--panel2);
  border:2px solid var(--red-dark);border-radius:12px;padding:10px;cursor:pointer;color:#fff;text-align:left}
.gear-pick-btn.equipped{border-color:var(--gold)}
.gear-pick-btn img{width:48px;height:48px;object-fit:contain}
.gear-pick-btn small{color:var(--gold-soft);font-weight:700}
#gear-shop{margin-top:20px}
#gear-shop h3{color:var(--gold);margin:0 0 12px}
.gear-shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gear-shop-item{background:var(--panel2);border:2px solid var(--red-dark);border-radius:12px;
  padding:12px;text-align:center}
.gear-shop-item.owned{opacity:.6}
.gear-shop-item img{width:64px;height:64px;object-fit:contain}
.gear-shop-item .gear-name{font-weight:900;color:#fff;font-size:13px;margin:6px 0 2px}
.gear-shop-item .gear-stats{font-size:11px;color:var(--gold-soft);font-weight:700;margin-bottom:8px}
.gear-shop-item .mini-btn{display:inline-flex;align-items:center;gap:4px}
/* ---------- tournaments ---------- */
.tourney-head{text-align:center;margin-bottom:14px}
.tourney-head h2{color:var(--gold);margin:0 0 4px;font-size:22px}
.tr-card{background:var(--panel);border:2px solid var(--red-dark);border-radius:var(--radius);
  padding:16px;margin-bottom:12px}
.tr-card.live{border-color:var(--gold);box-shadow:0 0 16px rgba(244,185,66,.35)}
.tr-name{font-weight:900;color:#fff;font-size:17px;margin-bottom:6px}
.tr-meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--gold-soft);font-size:13px;font-weight:700;margin-bottom:10px}
.tr-meta .cur-ico{width:16px;height:16px;vertical-align:-3px}
.tr-prizes{display:flex;gap:8px;margin-bottom:12px}
.tr-prize{background:var(--panel2);border:1px solid var(--gold);border-radius:999px;
  padding:6px 12px;font-size:12px;font-weight:800;color:var(--gold)}
.tr-prize .cur-ico{width:14px;height:14px;vertical-align:-2px}
.tr-actions{display:flex;gap:8px}
.tr-actions .big-btn{margin:0;padding:12px}
.tr-status{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.tr-status.upcoming{color:#7fc97f}.tr-status.active{color:var(--gold)}.tr-status.finished{color:#888}
.tr-empty{text-align:center;color:var(--gold-soft);padding:30px;font-weight:700}
.tables-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tables-head h2{color:var(--gold);font-size:20px;flex:1;margin:0}
.tables-head .iconbtn{font-size:28px;width:44px;height:44px}
.tables-sort{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.tables-sort span{color:var(--gold-soft);font-weight:700;font-size:13px}
.sort-btn{background:var(--panel2);border:1px solid var(--red-dark);color:#fff;border-radius:999px;
  padding:8px 14px;font-weight:800;font-size:13px;cursor:pointer}
.sort-btn.sel{background:var(--gold);color:#2b0d0d;border-color:var(--gold)}
#tables-list{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.tbl-row{display:flex;align-items:center;gap:12px;background:var(--panel);border:2px solid var(--red-dark);
  border-radius:var(--radius);padding:12px 14px}
.tbl-info{flex:1}
.tbl-host{font-weight:900;color:#fff;font-size:15px}
.tbl-meta{color:var(--gold-soft);font-size:13px;font-weight:700;margin-top:2px}
.tbl-meta .cur-ico{width:16px;height:16px;vertical-align:-3px}
.tbl-join{background:var(--gold);color:#2b0d0d;border:none;border-radius:999px;
  padding:10px 20px;font-weight:900;font-size:14px;cursor:pointer}
.tbl-empty{text-align:center;color:var(--gold-soft);padding:20px;font-weight:700}
.tables-create{background:var(--panel);border:2px solid var(--red-dark);border-radius:var(--radius);padding:16px}
.tables-create h3{color:var(--gold);margin:0 0 12px;font-size:16px}
#tbl-presets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tbl-custom{display:flex;gap:8px}
.tbl-custom input{flex:1;background:var(--panel2);border:1px solid var(--red-dark);color:#fff;
  border-radius:var(--radius);padding:12px;font-size:15px;font-weight:700}
.tbl-custom .big-btn{width:auto;margin:0;padding:12px 18px}
#tbl-note{margin:10px 0 0}

#update-bar{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--gold);color:#2b0d0d;
  font-weight:800;text-align:center;padding:10px;font-size:14px;box-shadow:0 2px 12px rgba(0,0,0,.5)}
#update-bar .mini-btn{margin-left:8px;background:#2b0d0d;color:var(--gold);border:none}
#update-bar.hidden{display:none}
.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}
#ready-list{margin:8px 0}
.ready-row{display:flex;justify-content:space-between;padding:6px 10px;font-size:14px;
  background:var(--panel2);border-radius:8px;margin-bottom:4px}
.ready-row .st{font-weight:900}
#deal-countdown{font-size:15px;font-weight:700;color:var(--gold);margin:6px 0}
#between-ui .big-btn{margin-top:8px}

/* ---------- 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}
.arow.armed{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
.arow.armed .arow-label{color:var(--gold)}

/* 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%)}

/* ---------- admin panel (v18) ---------- */
.view-title{padding:14px 16px 4px;font-size:20px}
.panel{background:var(--panel2);border-radius:14px;margin:10px 12px;padding:12px}
.panel h3{margin:0 0 10px;font-size:16px}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:4px 12px}
.stat-card{background:var(--panel2);border-radius:12px;padding:10px 6px;text-align:center}
.stat-ico{font-size:20px}
.stat-num{font-size:16px;font-weight:900;color:var(--gold)}
.stat-lbl{font-size:10px;opacity:.75}
#adm-add-row,#adm-search-row,#adm-code-row,.adm-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
#adm-add-row input,#adm-search-row input,#adm-code-row input,#adm-code-row select,.adm-row input,.adm-row select,.agrant input,.agrant select{
  border-radius:10px;border:2px solid var(--red-dark);background:#fff;color:#222;
  font-size:14px;padding:8px 10px;min-width:0;
}
#adm-search-row input{flex:1}
#adm-add-row input{flex:1 1 100px}
#adm-code-row input,#adm-code-row select,.adm-row input,.adm-row select{flex:1 1 80px}
.goldbtn{
  padding:8px 16px;border-radius:999px;border:none;cursor:pointer;font-weight:800;font-size:14px;
  background:linear-gradient(180deg,var(--gold),#d1942a);color:#3a2200;
}
.arow{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  background:rgba(0,0,0,.2);border-radius:10px;padding:8px 10px;margin-bottom:6px;font-size:14px;
}
.arow-main{min-width:0;overflow:hidden}
.arow-btns{flex:0 0 auto}
.arow-btns .mini-btn{padding:6px 10px;font-size:13px}
.agrant{display:flex;gap:6px;margin:-2px 0 8px;align-items:center}
.agrant input{width:90px}
.small{font-size:12px}
.code{font-family:monospace;font-size:15px;letter-spacing:1px;color:var(--gold)}
#adm-pager{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:6px}
#redeem-row{display:flex;gap:8px;margin:8px 0}
#redeem-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;text-transform:uppercase;
}
#redeem-input:focus{outline:none;border-color:var(--gold)}
.pig-diamonds{font-size:18px;font-weight:900;color:#7dd3fc;margin:4px 0}

/* game-over modal: always-visible close (never trap the player) */
.modal .box{position:relative}
.modal-x{
  position:absolute;top:8px;right:10px;width:34px;height:34px;border-radius:50%;
  border:2px solid var(--gold);background:rgba(0,0,0,.4);color:#fff;font-size:16px;
  cursor:pointer;z-index:2;
}
.modal-x:active{transform:scale(.92)}

/* ---------- emote picker + shop (v20) ---------- */
#emote-picker{
  position:fixed;left:12px;right:12px;bottom:150px;z-index:60;
  background:var(--panel);border:2px solid var(--gold);border-radius:14px;
  padding:10px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  max-height:220px;overflow-y:auto;box-shadow:0 8px 30px rgba(0,0,0,.6);
}
#emote-picker .emote{width:52px;height:52px;font-size:24px}
#emote-picker .emote img{width:40px;height:40px;object-fit:contain}
.emote img{width:32px;height:32px;object-fit:contain;pointer-events:none}
/* emotes rendered inside chat bubbles */
.chat-emote{width:44px;height:44px;object-fit:contain;vertical-align:middle}
.cmsg.mine .chat-emote{background:transparent}
.shop-head{display:flex;justify-content:space-between;align-items:center;margin:10px 2px 6px;font-size:15px}
#emote-shop{display:flex;flex-direction:column;gap:8px}
.shop-card{background:var(--panel2);border-radius:12px;padding:10px 12px}
.shop-emotes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.shop-emotes img{width:44px;height:44px;object-fit:contain}
/* playful emote motion: idle bob, tap pop, chat pop-in */
@keyframes emote-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(1.5deg)}}
@keyframes emote-pop{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-8deg)}100%{transform:scale(1)}}
@keyframes emote-in{from{transform:scale(.2);opacity:0}60%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}
#emote-picker .emote img,#emote-row .emote img{animation:emote-bob 2.4s ease-in-out infinite}
#emote-picker .emote:nth-child(2n) img,#emote-row .emote:nth-child(2n) img{animation-delay:.4s}
#emote-picker .emote:nth-child(3n) img,#emote-row .emote:nth-child(3n) img{animation-delay:.8s}
#emote-picker .emote:active img,#emote-row .emote:active img{animation:emote-pop .35s ease-out}
.chat-emote{width:44px;height:44px;object-fit:contain;vertical-align:middle;animation:emote-in .3s ease-out}
.shop-info{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.shop-info .owned{color:var(--gold);font-weight:800}
.shop-info .mini-btn[disabled]{opacity:.4}
#emote-row{display:flex;gap:6px;justify-content:center;padding:8px;border-top:1px solid #ffffff22;flex-wrap:wrap}

/* admin account detail modal */
#um-body{margin:8px 0 12px}
.um-row{display:flex;justify-content:space-between;gap:10px;padding:7px 2px;border-bottom:1px solid #ffffff14;font-size:14px}
.um-row b{text-align:right;overflow-wrap:anywhere}
#um-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
#um-actions .mini-btn{font-size:13px;padding:8px 10px}
#adm-mail-key{
  flex:1;min-width:0;border-radius:10px;border:2px solid var(--red-dark);
  background:#fff;color:#222;font-size:14px;padding:8px 10px;
}
#adm-mail-key:focus{outline:none;border-color:var(--gold)}