:root {
  --felt: #0b5b3b;
  --felt-dark: #063a28;
  --felt-light: #12724d;
  --gold: #d2b071;
  --cream: #f1ead8;
  --ink: #13261f;
  --wood: #6f351b;
  --danger: #ffc9c9;
  --shadow: 0 12px 30px rgba(0,0,0,.28);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { color: var(--cream); }
button, input { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.page-auth {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.08), transparent 34%),
    radial-gradient(circle at 50% 50%, var(--felt-light), var(--felt-dark) 72%);
  display: grid;
  place-items: center;
  padding: 24px;
}
.auth-shell { width: min(470px, 100%); }
.auth-card {
  background: linear-gradient(180deg, rgba(250,246,233,.98), rgba(229,216,187,.98));
  color: var(--ink);
  border: 3px solid #8e5e32;
  border-radius: 24px;
  box-shadow: 0 0 0 8px rgba(58,25,10,.7), var(--shadow);
  padding: 34px;
  text-align: center;
}
.auth-card h1 { margin: 8px 0 0; font-family: Georgia, serif; font-size: 2.2rem; }
.auth-card h2 { margin-bottom: 8px; }
.muted { color: #5b665f; margin-top: 6px; }
.mini-card-fan { display:flex; justify-content:center; gap:8px; font-size:2rem; }
.mini-card-fan span:nth-child(2), .mini-card-fan span:nth-child(3) { color:#a72828; }
.auth-card form { display:grid; gap:16px; text-align:left; margin-top:28px; }
.auth-card label { font-weight: 700; display:grid; gap:7px; }
.auth-card input {
  border:1px solid #9f9279; border-radius:10px; padding:12px 13px; background:#fffef9;
  outline:none;
}
.auth-card input:focus { border-color:#176b4a; box-shadow:0 0 0 3px rgba(23,107,74,.15); }
.primary, .secondary, .player-button, .header-button {
  border: 0; border-radius: 12px; padding: 12px 18px; font-weight: 800;
}
.primary { background: linear-gradient(#1a7b55,#0b5b3b); color:white; box-shadow:0 4px 0 #06412b; }
.primary:hover { filter:brightness(1.08); }
.secondary { background:#ddd2ba; color:#283b34; }
.wide { width:100%; }
.message { min-height:1.4em; color:#a12a2a; font-weight:700; }
.link-button { background:none; border:0; text-decoration:underline; color:#53615b; margin-top:18px; }
.player-choice { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:28px 0 12px; }
.player-button { min-height:130px; display:grid; place-items:center; background:#0c6545; color:#fff; box-shadow:0 5px 0 #06422e; }
.player-button strong { font-family:Georgia,serif; font-size:2rem; }
.player-button span { opacity:.85; }
.waiting-panel { margin-top:26px; }
.spinner { width:42px; height:42px; border:4px solid rgba(11,91,59,.2); border-top-color:#0b5b3b; border-radius:50%; animation:spin 1s linear infinite; margin:0 auto 14px; }
@keyframes spin { to { transform:rotate(360deg); } }
.presence-row { display:flex; justify-content:center; gap:10px; margin:18px 0; }
.presence { padding:8px 14px; border-radius:999px; background:#bbb3a1; color:#4e554f; font-weight:800; }
.presence.online { background:#d8f1df; color:#0b6b3f; }

.page-game {
  min-height:100vh;
  background: linear-gradient(90deg,#3e1b0e,#7b3c1d 4%,#4d200f 7%,#4d200f 93%,#7b3c1d 96%,#3e1b0e);
  overflow-x:hidden;
}
.game-frame { min-height:100vh; border:10px solid rgba(92,43,20,.95); box-shadow: inset 0 0 30px #2c1208; }
.game-header {
  height:78px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:18px;
  padding:0 24px; background:linear-gradient(180deg,#f4efdf,#d9ceb2); color:#18382c;
  border-bottom:4px solid #6a3d20;
}
.brand { display:flex; align-items:center; gap:14px; font-family:Georgia,serif; font-size:1.4rem; }
.brand-suits { letter-spacing:4px; }
.clock-block { display:flex; gap:16px; align-items:center; font-size:1.05rem; font-weight:800; }
#clock { background:#103d2e; color:white; padding:8px 12px; border-radius:8px; font-variant-numeric:tabular-nums; }
#turn-label { color:#0b6646; }
.header-button { justify-self:end; padding:8px 12px; background:#b6a98e; color:#20352d; }
.felt-table {
  min-height:calc(100vh - 98px);
  position:relative;
  padding:24px clamp(18px,3vw,50px) 58px;
  background:
    radial-gradient(circle at 50% 48%, rgba(26,122,82,.55), transparent 36%),
    repeating-linear-gradient(35deg,rgba(255,255,255,.012) 0 2px,transparent 2px 5px),
    linear-gradient(180deg,#0d5f40,#06442f);
  display:grid;
  grid-template-rows:minmax(190px,auto) minmax(300px,1fr) minmax(190px,auto);
  gap:18px;
}
.player-zone {
  display:grid; grid-template-columns:190px minmax(420px, 1fr); gap:28px; align-items:center;
  width:min(1050px, 100%); margin:0 auto; padding:12px 18px;
  border-radius:18px; border:1px solid rgba(255,255,255,.08);
  transition:.2s ease;
}
.active-player-zone { box-shadow:0 0 0 2px rgba(255,226,148,.45), 0 0 35px rgba(255,226,148,.12); background:rgba(255,255,255,.025); }
.talon-box { border:2px solid rgba(210,176,113,.7); border-radius:16px; padding:10px; background:rgba(4,49,33,.45); }
.hand-box { min-width:0; }
.zone-label { text-align:center; font-family:Georgia,serif; font-weight:800; color:#efe5c8; margin-bottom:7px; text-shadow:0 2px 2px #0008; }
.zone-label b { display:inline-grid; place-items:center; min-width:25px; height:25px; border-radius:999px; background:#164f3b; margin-left:6px; }
.hand-row { display:flex; justify-content:center; gap:clamp(6px,1.1vw,16px); min-height:148px; align-items:center; }
.single-card-slot, .card-button, .pile-button, .build-slot { border:0; background:transparent; padding:0; }
.single-card-slot { width:94px; height:132px; display:grid; place-items:center; margin:auto; border-radius:9px; }
.playing-card { width:94px; height:132px; object-fit:contain; filter:drop-shadow(0 5px 6px rgba(0,0,0,.35)); user-select:none; }
.card-button { border-radius:9px; transition:transform .13s ease, filter .13s ease; }
.card-button:hover, .selectable-source:hover { transform:translateY(-5px); }
.selected-card { outline:4px solid #f2cf74 !important; outline-offset:3px; transform:translateY(-8px); filter:drop-shadow(0 0 10px rgba(255,222,122,.6)); }
.empty-pile { width:94px; height:132px; border:2px dashed rgba(236,223,186,.4); border-radius:9px; display:grid; place-items:center; color:#d2c8ab; font-size:.8rem; }

.center-zone {
  display:grid; grid-template-columns:145px minmax(620px, 1fr) 145px; gap:22px; align-items:center;
  width:min(1240px,100%); margin:0 auto;
}
.side-pile-box { text-align:center; }
.pile-button { border-radius:10px; }
.pile-button:hover { transform:translateY(-3px); }
.pile-count { margin-top:7px; font-weight:800; color:#e8ddbf; }
.build-area { min-width:0; }
.build-heading { text-align:center; font-family:Georgia,serif; font-size:1.3rem; font-weight:800; margin-bottom:12px; }
.build-heading span { font-family:inherit; font-size:.8rem; opacity:.65; margin-left:8px; }
.build-grid { display:grid; grid-template-columns:repeat(8,minmax(72px,1fr)); gap:10px; }
.build-slot {
  min-width:0; height:138px; border:2px dashed rgba(219,202,157,.35); border-radius:11px;
  position:relative; display:grid; place-items:center; color:#b9ad8d; transition:.13s ease;
}
.build-slot:hover { border-color:#e1c880; background:rgba(255,255,255,.035); transform:translateY(-3px); }
.build-slot .playing-card { width:min(100%,94px); height:132px; }
.ace-slot { font-family:Georgia,serif; font-size:2.2rem; opacity:.48; }
.build-slot small { position:absolute; bottom:8px; font-size:.62rem; opacity:.55; }
.build-count { position:absolute; right:-6px; top:-7px; background:#e7d19a; color:#163b2e; border-radius:999px; min-width:23px; height:23px; display:grid; place-items:center; font-size:.75rem; font-weight:900; box-shadow:0 2px 6px #0006; }
.discard-target { min-width:94px; min-height:132px; }
.action-message {
  position:absolute; left:50%; bottom:13px; transform:translateX(-50%); background:rgba(3,42,29,.86);
  border:1px solid rgba(238,214,153,.3); color:#f4e9c8; padding:8px 16px; border-radius:999px;
  max-width:min(780px,90%); text-align:center; font-size:.9rem;
}
.action-message.error { background:rgba(117,25,25,.92); color:#fff; }

.winner-overlay { position:fixed; inset:0; background:rgba(0,0,0,.68); display:grid; place-items:center; z-index:20; padding:20px; }
.winner-card { background:#efe7d1; color:#16392c; border:4px solid #9a6532; border-radius:24px; padding:35px; text-align:center; box-shadow:var(--shadow); width:min(430px,100%); }
.winner-icon { font-size:4rem; color:#b68a2b; }
.winner-card h2 { font-family:Georgia,serif; font-size:2rem; margin:.2em 0; }

@media (max-width: 1000px) {
  .game-header { grid-template-columns:1fr auto; height:auto; min-height:76px; padding:10px 14px; }
  .clock-block { grid-column:1/-1; grid-row:2; justify-content:center; padding-bottom:4px; }
  .felt-table { grid-template-rows:auto auto auto; }
  .player-zone { grid-template-columns:140px 1fr; gap:14px; }
  .center-zone { grid-template-columns:110px 1fr 110px; gap:10px; }
  .build-grid { grid-template-columns:repeat(4,1fr); }
  .playing-card, .single-card-slot, .empty-pile { width:76px; height:106px; }
  .hand-row { min-height:115px; }
  .build-slot { height:112px; }
  .build-slot .playing-card { height:106px; }
}

@media (max-width: 650px) {
  .brand strong { display:none; }
  .player-zone { grid-template-columns:105px 1fr; padding:8px; gap:8px; }
  .center-zone { grid-template-columns:84px 1fr 84px; }
  .playing-card, .single-card-slot, .empty-pile { width:58px; height:82px; }
  .hand-row { gap:2px; min-height:88px; }
  .build-grid { gap:5px; }
  .build-slot { height:88px; }
  .build-slot .playing-card { height:82px; }
  .zone-label { font-size:.78rem; }
}