/* Crit — Card Game Styles (ported from original) */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --felt: #1a5c30; --felt-dark: #0e3a1d; --felt-light: #2a7a44;
  --gold: #f0c040; --gold-light: #fff085;
  --card-w: 64px; --card-h: 90px; --card-r: 7px; --gap: 9px;
}

body {
  background: radial-gradient(ellipse at 50% 0%, var(--felt-light) 0%, var(--felt) 45%, var(--felt-dark) 100%);
  min-height: 100vh;
  font-family: 'Trebuchet MS', Arial, sans-serif;
  color: #f0f0f0;
}

header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px;
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.title { font-size:1.9rem; font-weight:900; letter-spacing:8px; color:var(--gold); text-shadow:0 2px 10px rgba(0,0,0,0.6); }
.btn-new { background:transparent; border:1.5px solid var(--gold); color:var(--gold); padding:6px 18px; border-radius:4px; font-size:.75rem; font-weight:700; letter-spacing:1.5px; cursor:pointer; transition:all .15s; text-decoration:none; display:inline-block; }
.btn-new:hover { background:var(--gold); color:#111; }

#status { text-align:center; padding:7px 12px; min-height:34px; font-size:.88rem; opacity:.9; background:rgba(0,0,0,0.15); }

#layout { display:flex; flex-direction:column; gap:8px; padding:10px 16px 16px; max-width:1000px; margin:0 auto; }

.zone { background:rgba(0,0,0,0.18); border:1.5px solid rgba(255,255,255,0.07); border-radius:10px; padding:10px 14px; transition:border-color .25s, box-shadow .25s; }
.zone.active { border-color:var(--gold); box-shadow:0 0 22px rgba(240,192,64,0.28); }
.zone-label { font-size:.65rem; letter-spacing:2.5px; text-transform:uppercase; opacity:.55; margin-bottom:8px; }
.zone-label .turn-tag { color:var(--gold); opacity:1; font-weight:700; }
.zone-label .cpu-tag  { color:#80c8ff; opacity:1; font-weight:700; }
.zone-label .joker-tag { color:#e080ff; opacity:1; font-weight:700; }
.hand { display:flex; gap:var(--gap); flex-wrap:wrap; min-height:var(--card-h); align-items:center; }

#mid { display:grid; grid-template-columns:90px 1fr 220px; gap:12px; align-items:start; }
.col-label { font-size:.62rem; letter-spacing:2px; text-transform:uppercase; opacity:.45; text-align:center; margin-bottom:6px; }
#dp-col { display:flex; flex-direction:column; align-items:center; gap:5px; }
.dp-wrap { position:relative; width:var(--card-w); height:var(--card-h); }
#tbl-col { display:flex; flex-direction:column; align-items:center; gap:6px; }
.table-grid { display:grid; grid-template-columns:repeat(3,var(--card-w)); grid-template-rows:repeat(2,var(--card-h)); gap:var(--gap); }

#cmp-col { display:flex; flex-direction:column; gap:10px; background:rgba(0,0,0,0.22); border-radius:9px; padding:10px; max-height:260px; overflow-y:auto; }
#cmp-col::-webkit-scrollbar { width:5px; }
#cmp-col::-webkit-scrollbar-thumb { background:rgba(255,255,255,.2); border-radius:3px; }
.player-runs-block { display:flex; flex-direction:column; gap:5px; }
.runs-header { display:flex; justify-content:space-between; align-items:baseline; font-size:.62rem; letter-spacing:1.5px; text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:4px; opacity:.65; }
.runs-header .run-count { color:var(--gold); font-weight:800; font-size:.78rem; opacity:1; }
.runs-empty { font-size:.6rem; opacity:.3; letter-spacing:1px; text-align:center; padding:4px 0; }
.run-row { display:flex; gap:3px; flex-wrap:wrap; background:rgba(0,0,0,.2); border-radius:5px; padding:4px 5px; }

.mc { width:28px; height:40px; border-radius:4px; flex-shrink:0; font-family:'Trebuchet MS',Arial,sans-serif; font-weight:800; display:flex; flex-direction:column; justify-content:space-between; padding:2px 3px; user-select:none; }
.mc.red   { background:#fafafa; color:#cc0000; border:1px solid rgba(0,0,0,.15); box-shadow:1px 1px 3px rgba(0,0,0,.25); }
.mc.black { background:#fafafa; color:#111;    border:1px solid rgba(0,0,0,.15); box-shadow:1px 1px 3px rgba(0,0,0,.25); }
.mc.joker { background:linear-gradient(135deg,#f5eeff,#e8d4ff); color:#5500bb; border:1px solid rgba(0,0,0,.15); box-shadow:1px 1px 3px rgba(0,0,0,.25); }
.mc .mv { font-size:.62rem; line-height:1; }
.mc .ms { font-size:.5rem;  line-height:1; }
.mc .mbr { align-self:flex-end; transform:rotate(180deg); }

.card { width:var(--card-w); height:var(--card-h); border-radius:var(--card-r); flex-shrink:0; user-select:none; }
.cf { background:#fafafa; border:1px solid rgba(0,0,0,.18); box-shadow:1px 2px 6px rgba(0,0,0,.32); display:flex; flex-direction:column; justify-content:space-between; padding:3px 5px; position:relative; overflow:hidden; }
.cf.red   { color:#cc0000; }
.cf.black { color:#111; }
.cf.joker { color:#5500bb; background:linear-gradient(135deg,#f5eeff,#e8d4ff); }
.cf .corner { display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; }
.cf .corner .v { font-size:.82rem; font-weight:800; }
.cf .corner .s { font-size:.68rem; }
.cf .br { align-self:flex-end; transform:rotate(180deg); }
.cf .big-suit { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:1.7rem; opacity:.1; pointer-events:none; }

/* Joker prompts */
.cf.joker-clickable { cursor:pointer; outline:2px solid #c060ff; outline-offset:2px; animation:joker-glow 1.4s ease-in-out infinite; }
@keyframes joker-glow { 0%,100%{box-shadow:0 0 6px rgba(192,96,255,.3);} 50%{box-shadow:0 0 18px 4px rgba(192,96,255,.85);} }
.joker-label { position:absolute; bottom:3px; left:50%; transform:translateX(-50%); font-size:.45rem; font-weight:900; letter-spacing:1px; color:#e080ff; text-transform:uppercase; white-space:nowrap; background:rgba(85,0,187,.6); padding:1px 4px; border-radius:3px; }

/* Run highlight */
@keyframes run-glow { 0%,100%{box-shadow:0 0 0 rgba(64,255,128,0);} 50%{box-shadow:0 0 22px 4px rgba(64,255,128,.85);} }
.run-highlight { animation:run-glow .35s ease-in-out 3; outline:2px solid rgba(64,255,128,.8); outline-offset:2px; }

.cb {
  background-color:#1e46c0;
  background-image:linear-gradient(135deg,#1a3a9a 25%,transparent 25%),linear-gradient(225deg,#1a3a9a 25%,transparent 25%),linear-gradient(315deg,#1a3a9a 25%,transparent 25%),linear-gradient(45deg,#1a3a9a 25%,transparent 25%);
  background-size:10px 10px; border:1.5px solid #3358d4; box-shadow:1px 2px 6px rgba(0,0,0,.4); position:relative;
}
.cb::after { content:''; position:absolute; inset:4px; border-radius:4px; border:1.5px solid rgba(255,255,255,.2); }
.pc { cursor:pointer; transition:transform .12s, box-shadow .12s; }
.pc:hover { transform:translateY(-5px); box-shadow:2px 8px 14px rgba(0,0,0,.55) !important; }
.pile-badge { position:absolute; bottom:5px; right:5px; background:rgba(255,255,255,.92); color:#1e3aa0; font-size:.62rem; font-weight:700; padding:1px 5px; border-radius:8px; z-index:2; }
.pe { width:var(--card-w); height:var(--card-h); border-radius:var(--card-r); border:1.5px dashed rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-size:.58rem; letter-spacing:1px; opacity:.35; text-transform:uppercase; }
.empty-hand { font-size:.72rem; opacity:.38; align-self:center; letter-spacing:1px; text-transform:uppercase; }

/* Main overlay */
#overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.78); z-index:300; align-items:center; justify-content:center; }
#overlay.show { display:flex; }
.ov-box { background:linear-gradient(160deg,#1f6b38 0%,#0e3a1d 100%); border:2px solid var(--gold); border-radius:16px; padding:36px 48px; text-align:center; max-width:400px; box-shadow:0 24px 64px rgba(0,0,0,.65); }
.ov-box h2 { font-size:1.45rem; color:var(--gold); margin-bottom:12px; letter-spacing:1px; }
.ov-box p  { font-size:.92rem; opacity:.88; margin-bottom:26px; line-height:1.6; white-space:pre-line; }
.ov-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn-ov { background:var(--gold); color:#111; border:none; padding:12px 28px; border-radius:6px; font-size:.88rem; font-weight:800; letter-spacing:1.5px; cursor:pointer; transition:background .15s; }
.btn-ov:hover { background:var(--gold-light); }
.btn-ov.secondary { background:transparent; border:1.5px solid rgba(255,255,255,.3); color:rgba(255,255,255,.75); }
.btn-ov.secondary:hover { background:rgba(255,255,255,.1); color:white; }

/* Joker picker */
#jp-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:400; align-items:center; justify-content:center; }
#jp-overlay.show { display:flex; }
.jp-box { background:linear-gradient(160deg,#1f6b38,#0e3a1d); border:2px solid #c060ff; border-radius:14px; padding:22px 28px; text-align:center; min-width:300px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.jp-title { font-size:.78rem; letter-spacing:2px; text-transform:uppercase; color:#e080ff; margin-bottom:16px; }
.jp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:14px; }
.jp-btn { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:white; border-radius:4px; padding:7px 4px; font-size:.82rem; font-weight:700; cursor:pointer; transition:all .15s; }
.jp-btn:hover { background:#c060ff; border-color:#c060ff; }
.jp-cancel { background:transparent; border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.5); border-radius:4px; padding:5px 16px; font-size:.72rem; cursor:pointer; transition:all .15s; }
.jp-cancel:hover { color:white; border-color:rgba(255,255,255,.5); }

/* Split picker */
#split-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:450; align-items:center; justify-content:center; }
#split-overlay.show { display:flex; }
.split-box { background:linear-gradient(160deg,#1f6b38,#0e3a1d); border:2px solid var(--gold); border-radius:14px; padding:24px 28px; text-align:center; max-width:520px; width:92%; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.split-title { font-size:.78rem; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:4px; }
.split-sub   { font-size:.67rem; opacity:.5; letter-spacing:.5px; margin-bottom:16px; }
.split-cards-row { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; padding:4px 0 24px; }
.split-card-wrap { position:relative; transition:transform .12s; }
.split-card-wrap.toggleable { cursor:pointer; }
.split-card-wrap.toggleable:hover { transform:translateY(-3px); }
.split-card-wrap.toggleable .mc { outline:1.5px solid rgba(240,192,64,.65); outline-offset:2px; border-radius:4px; transition:opacity .15s; }
.split-card-wrap.excluded .mc { opacity:.22; outline:1.5px solid rgba(255,255,255,.18) !important; }
.sc-tag { position:absolute; bottom:-17px; left:50%; transform:translateX(-50%); font-size:.42rem; font-weight:700; letter-spacing:.8px; text-transform:uppercase; white-space:nowrap; }
.split-card-wrap:not(.excluded) .sc-tag { color:var(--gold); }
.split-card-wrap.excluded .sc-tag { color:#666; }
.split-footer { display:flex; justify-content:center; margin-top:2px; }

/* New game form */
.name-field { margin-bottom:20px; }
.name-field label { display:block; font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase; opacity:.6; margin-bottom:6px; }
.name-field input { background:rgba(0,0,0,.3); border:1.5px solid rgba(255,255,255,.2); color:white; padding:10px 14px; border-radius:6px; font-size:.92rem; width:100%; max-width:280px; outline:none; transition:border-color .15s; }
.name-field input:focus { border-color:var(--gold); }
.name-field input::placeholder { color:rgba(255,255,255,.3); }

/* Game over overlay */
#game-over-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.78); z-index:500; align-items:center; justify-content:center; }
#game-over-overlay.show { display:flex; }

/* Reveal overlay (card flip backdrop) */
#reveal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:998; pointer-events:none; }

/* Animation layer (flying cards) */
#animation-layer { position:fixed; inset:0; pointer-events:none; z-index:1001; }

/* Input gating during animations and CPU turn */
#game-board.animating .pc { pointer-events:none; }
#game-board.animating .joker-clickable { pointer-events:none; cursor:default; animation:none; }
#game-board.cpu-turn .pc { pointer-events:none; cursor:default; }
#game-board.cpu-turn .joker-clickable { pointer-events:none; cursor:default; animation:none; }