/* ========================================
   大老二 四人對戰 — Premium Stylesheet
   ======================================== */

/* ---------- Reset & Variables ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#0a0e1a;
  --felt:#0d3320;
  --felt-light:#145a35;
  --felt-border:#1b7a4a;
  --gold:#fbbf24;
  --gold-dim:#92711a;
  --accent:#6366f1;
  --accent-glow:rgba(99,102,241,.35);
  --red:#ef4444;
  --card-w:58px;
  --card-h:82px;
  --card-r:8px;
  --card-shadow:0 2px 8px rgba(0,0,0,.5);
  --toast-bg:rgba(0,0,0,.82);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans TC","Microsoft JhengHei",sans-serif;
  --radius:12px;
  --transition:.25s cubic-bezier(.4,0,.2,1);
}

html{font-size:15px}
body{
  font-family:var(--font);
  background:var(--bg);
  color:#e2e8f0;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

/* ---------- Ad Banners ---------- */
.ad-banner{max-width:1100px;margin:10px auto;padding:0 12px;text-align:center;min-height:50px}
.ad-banner ins{display:block}

/* ---------- Top Bar ---------- */
.top-bar{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1100px;margin:0 auto;padding:10px 16px;
}
.back-link{color:var(--gold);text-decoration:none;font-size:.85rem;white-space:nowrap}
.back-link:hover{text-decoration:underline}
.game-title{font-size:clamp(1rem,3vw,1.4rem);font-weight:800;text-align:center;flex:1}
.game-title .subtitle{font-weight:400;font-size:.75em;opacity:.7}
.round-badge{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  padding:4px 14px;border-radius:20px;font-size:.8rem;white-space:nowrap;
}

/* ---------- Game Table ---------- */
.table-wrapper{
  max-width:1100px;margin:8px auto;padding:0 8px;
}
.game-table{
  position:relative;
  background:radial-gradient(ellipse at 50% 50%,var(--felt-light),var(--felt) 70%,#091a10 100%);
  border:3px solid var(--felt-border);
  border-radius:var(--radius);
  min-height:520px;
  display:grid;
  grid-template-columns:140px 1fr 140px;
  grid-template-rows:auto 1fr auto;
  grid-template-areas:
    ".     north  ."
    "west  centre east"
    ".     south  .";
  padding:10px;
  box-shadow:inset 0 0 60px rgba(0,0,0,.4),0 8px 40px rgba(0,0,0,.5);
}

/* ---------- Seats ---------- */
.seat{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px;gap:6px;z-index:1}
.seat-north{grid-area:north}
.seat-west{grid-area:west}
.seat-east{grid-area:east}
.seat-south{grid-area:south}

/* Player info */
.player-info{
  display:flex;align-items:center;gap:8px;
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.1);
  border-radius:30px;padding:4px 14px 4px 4px;
  transition:border-color var(--transition),box-shadow var(--transition);
}
.player-info.active{
  border-color:var(--gold);
  box-shadow:0 0 12px rgba(251,191,36,.35);
}
.avatar{
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
  background:rgba(255,255,255,.08);
}
.player-meta{display:flex;flex-direction:column;line-height:1.2}
.player-name{font-size:.78rem;font-weight:600;color:#fff}
.card-count{font-size:.7rem;color:var(--gold)}

/* ---------- AI Hands (back of cards) ---------- */
.hand-north,.hand-west,.hand-east{display:flex;gap:2px;flex-wrap:wrap;justify-content:center}
.ai-card-back{
  width:30px;height:42px;border-radius:4px;
  background:linear-gradient(135deg,#1e40af,#3730a3);
  border:1.5px solid #4338ca;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;
  font-size:.55rem;color:rgba(255,255,255,.35);
}
.hand-west,.hand-east{flex-direction:column;max-height:260px;overflow:hidden}
.hand-west .ai-card-back,.hand-east .ai-card-back{width:36px;height:26px}

/* ---------- Centre Play Zone ---------- */
.centre{
  grid-area:centre;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;min-height:180px;
}
.play-zone{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  min-height:120px;justify-content:center;
}
.play-label{
  font-size:.85rem;color:rgba(255,255,255,.55);
  background:rgba(0,0,0,.3);padding:4px 16px;border-radius:20px;
  transition:opacity var(--transition);
}
.played-cards{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.pass-indicators{display:flex;gap:16px;font-size:.8rem;min-height:24px}
.pass-tag{
  padding:2px 12px;border-radius:12px;
  background:rgba(239,68,68,.15);color:#fca5a5;font-size:.75rem;
  animation:fadeSlideIn .3s ease;
}

/* ---------- Player Hand (South) ---------- */
.hand-south{
  display:flex;gap:4px;justify-content:center;flex-wrap:wrap;
  padding:6px 4px;min-height:var(--card-h);
}

/* ---------- Cards ---------- */
.card{
  width:var(--card-w);height:var(--card-h);
  background:#fff;border-radius:var(--card-r);
  border:2px solid #d1d5db;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;position:relative;
  transition:transform .2s ease,border-color .15s ease,box-shadow .15s ease;
  box-shadow:var(--card-shadow);
  font-weight:700;
}
.card:hover{transform:translateY(-8px);z-index:5}
.card.selected{
  transform:translateY(-14px);
  border-color:var(--gold);
  box-shadow:0 0 14px rgba(251,191,36,.5),var(--card-shadow);
}
.card.disabled{opacity:.45;cursor:default;pointer-events:none}
.card .rank{font-size:1.05rem;line-height:1}
.card .suit{font-size:1.15rem;line-height:1;margin-top:1px}
.card.red{color:#dc2626}
.card.black{color:#1e293b}

/* Small cards for play zone */
.card-sm{
  width:44px;height:62px;
  font-size:.85rem;
  border-radius:6px;
  cursor:default;
  animation:cardDeal .35s ease;
}
.card-sm .rank{font-size:.85rem}
.card-sm .suit{font-size:.95rem}

@keyframes cardDeal{
  from{opacity:0;transform:scale(.7) translateY(-20px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes fadeSlideIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---------- Action Bar ---------- */
.action-bar{
  display:flex;justify-content:center;gap:10px;
  max-width:500px;margin:10px auto;padding:0 16px;flex-wrap:wrap;
}
.btn{
  padding:10px 22px;border:none;border-radius:10px;font-size:.95rem;font-weight:700;
  cursor:pointer;transition:all var(--transition);font-family:var(--font);
  letter-spacing:.3px;
}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn-play{
  background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;
  box-shadow:0 4px 14px rgba(22,163,74,.35);min-width:100px;
}
.btn-play:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(22,163,74,.45)}
.btn-pass{
  background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;
  box-shadow:0 4px 14px rgba(220,38,38,.3);min-width:100px;
}
.btn-pass:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(220,38,38,.4)}
.btn-hint{background:rgba(255,255,255,.1);color:#fbbf24;border:1px solid rgba(251,191,36,.3)}
.btn-hint:not(:disabled):hover{background:rgba(251,191,36,.15)}
.btn-sort{background:rgba(255,255,255,.1);color:#94a3b8;border:1px solid rgba(148,163,184,.2)}
.btn-sort:not(:disabled):hover{background:rgba(255,255,255,.15)}
.btn-reset{
  background:transparent;color:#f87171;border:1px solid rgba(248,113,113,.3);
  font-size:.8rem;padding:6px 16px;margin-top:8px;border-radius:8px;
}

/* ---------- Status Toast ---------- */
.status-toast{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);
  background:var(--toast-bg);color:#fff;padding:12px 28px;border-radius:12px;
  font-size:1.05rem;font-weight:700;pointer-events:none;
  opacity:0;transition:opacity .25s ease,transform .25s ease;z-index:100;
  backdrop-filter:blur(8px);
  text-align:center;white-space:nowrap;
}
.status-toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.75);
  display:none;align-items:center;justify-content:center;z-index:200;
  backdrop-filter:blur(4px);
}
.modal-overlay.show{display:flex}
.modal-box{
  background:linear-gradient(160deg,#1e293b,#0f172a);
  border:1px solid rgba(255,255,255,.12);border-radius:20px;
  padding:36px 32px;text-align:center;max-width:420px;width:90%;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:modalPop .35s ease;
}
@keyframes modalPop{from{opacity:0;transform:scale(.85) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-icon{font-size:3.5rem;margin-bottom:12px;display:block}
.modal-title{font-size:1.6rem;font-weight:800;margin-bottom:16px}
.modal-scores{margin-bottom:20px;font-size:.9rem;color:#94a3b8;line-height:1.8}
.modal-scores .winner{color:var(--gold);font-weight:700;font-size:1rem}
.modal-btn{min-width:160px;font-size:1.05rem;padding:12px 28px}

/* ---------- Stats Panel ---------- */
.stats-panel{
  max-width:500px;margin:12px auto;padding:0 16px;
}
.stats-panel summary{
  cursor:pointer;color:var(--gold);font-size:.9rem;font-weight:600;
  padding:8px 0;list-style:none;
}
.stats-panel summary::before{content:'▶ ';font-size:.7rem;transition:transform .2s ease;display:inline-block}
.stats-panel[open] summary::before{transform:rotate(90deg)}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:8px;
}
.stat{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:12px 8px;text-align:center;
}
.stat-val{display:block;font-size:1.4rem;font-weight:800;color:var(--gold)}
.stat-lbl{display:block;font-size:.7rem;color:#64748b;margin-top:2px;text-transform:uppercase;letter-spacing:.5px}

/* ---------- Footer ---------- */
.game-footer{
  text-align:center;padding:16px;font-size:.8rem;color:#475569;
}
.game-footer a{color:var(--accent);text-decoration:none}
.game-footer a:hover{text-decoration:underline}

/* ============ Responsive ============ */
@media(max-width:800px){
  .game-table{
    grid-template-columns:80px 1fr 80px;
    min-height:420px;padding:6px;
  }
  .hand-west,.hand-east{max-height:200px}
  .hand-west .ai-card-back,.hand-east .ai-card-back{width:30px;height:22px}
  .ai-card-back{width:24px;height:34px}
  :root{--card-w:48px;--card-h:68px}
  .card-sm{width:38px;height:54px}
  .card-sm .rank{font-size:.75rem}
  .card-sm .suit{font-size:.8rem}
}

@media(max-width:520px){
  .game-table{
    grid-template-columns:50px 1fr 50px;
    min-height:360px;
  }
  :root{--card-w:42px;--card-h:60px;--card-r:6px}
  .card .rank{font-size:.9rem}
  .card .suit{font-size:1rem}
  .card:hover{transform:translateY(-6px)}
  .card.selected{transform:translateY(-10px)}
  .card-sm{width:34px;height:48px}
  .hand-south{gap:2px}
  .hand-west .ai-card-back,.hand-east .ai-card-back{width:24px;height:18px}
  .ai-card-back{width:20px;height:28px}
  .player-info{padding:3px 8px 3px 3px}
  .avatar{width:26px;height:26px;font-size:.8rem}
  .player-name{font-size:.7rem}
  .card-count{font-size:.65rem}
  .btn{padding:8px 14px;font-size:.85rem}
  .action-bar{gap:6px}
  .top-bar{padding:6px 10px}
}