*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Georgia,serif;background:radial-gradient(ellipse at center,#1b4332 0%,#081c15 100%);min-height:100vh;color:#f0e6d0;user-select:none;}
#app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;}

/* INTRO */
#intro{text-align:center;background:rgba(0,0,0,0.5);border:2px solid #b8860b;border-radius:20px;padding:3rem 2.5rem;max-width:480px;width:90%;box-shadow:0 0 60px rgba(184,134,11,0.25);}
.intro-name-wrap{display:flex;flex-direction:column;gap:0.4rem;margin:1.2rem 0 1rem;}
.intro-lbl{font-size:0.72rem;color:#b8860b;text-transform:uppercase;letter-spacing:0.1em;}
.intro-input{background:rgba(255,255,255,0.07);border:1.5px solid rgba(184,134,11,0.5);border-radius:8px;color:#fdf6e3;font-size:1rem;padding:0.5rem 0.8rem;text-align:center;outline:none;width:100%;box-sizing:border-box;}
.intro-input:focus{border-color:#ffd700;}
#intro h1{font-family:'Palatino Linotype',Palatino,serif;font-size:4rem;color:#ffd700;text-shadow:2px 2px 0 #8b0000;margin-bottom:0.3rem;letter-spacing:0.1em;}
#intro p{color:#c8b08a;font-style:italic;margin-bottom:2rem;font-size:1.05rem;}
.suits-deco{font-size:1.5rem;letter-spacing:0.5rem;color:#ffd700;margin-bottom:1.5rem;}

/* BOARD */
/* Card=52px, gap=5px, 4 cols = 4*52+3*5=223px, table padding=12px → table=247px
   Side col = 86px, cross total = 86+4+247+4+86 = 427px
   Board matches that so scorebar aligns perfectly */
#board{width:100%;max-width:440px;padding:0.5rem;display:flex;flex-direction:column;gap:0.4rem;min-height:100vh;margin:0 auto;}
/* CROSS LAYOUT — fixed columns so sides align with scorebar edges */
.cross-wrap{display:grid;grid-template-columns:86px 247px 86px;grid-template-rows:auto auto auto;gap:0.4rem;align-items:center;}
.cross-top{grid-column:1/-1;grid-row:1;display:flex;justify-content:center;}
.cross-left{grid-column:1;grid-row:2;display:flex;justify-content:flex-end;}
.cross-center{grid-column:2;grid-row:2;}
.cross-right{grid-column:3;grid-row:2;display:flex;justify-content:flex-start;}
.cross-bottom{grid-column:1/-1;grid-row:3;display:flex;justify-content:center;}
/* Side players (left/right) — vertical cards, fixed width */
.player-row.side{flex-direction:column;align-items:center;width:82px;padding:0.4rem 0.3rem;gap:0.3rem;}
.player-row.side .cards-wrap{flex-direction:column;flex-wrap:nowrap;gap:2px;align-items:center;}
.player-row.side .card-count{margin-left:0;margin-top:2px;}
.player-row.side .pname{min-width:unset;text-align:center;}

/* SCORE BAR */
.scorebar{display:flex;align-items:center;gap:0.5rem;background:rgba(0,0,0,0.4);border-radius:10px;padding:0.4rem 0.8rem;flex-wrap:wrap;width:100%;}
.score-block{display:flex;flex-direction:column;align-items:center;min-width:90px;}
.score-lbl{font-size:0.65rem;color:#b8860b;text-transform:uppercase;letter-spacing:0.08em;}
.score-num{font-size:1.5rem;font-weight:bold;color:#ffd700;font-family:'Palatino Linotype',serif;}
.score-vs{font-size:0.8rem;color:rgba(255,255,255,0.3);margin:0 0.3rem;}
.ronda-info{font-size:0.72rem;color:rgba(255,255,255,0.4);margin-left:auto;}
.tendido-status{font-size:0.72rem;color:#ffd700;border:1px solid rgba(184,134,11,0.5);border-radius:20px;padding:0.2rem 0.7rem;background:rgba(184,134,11,0.12);white-space:nowrap;}
.tendido-status.used{color:rgba(255,255,255,0.3);border-color:rgba(255,255,255,0.15);background:transparent;text-decoration:line-through;}

/* LOG */
.log-bar{background:rgba(0,0,0,0.3);border-radius:8px;padding:0.35rem 0.8rem;font-size:0.82rem;min-height:28px;text-align:center;color:#c8b08a;}

/* PLAYER ROW */
.player-row{display:flex;align-items:center;background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.07);border-radius:10px;padding:0.35rem 0.6rem;gap:0.5rem;}
.player-row.active-turn{border-color:rgba(184,134,11,0.6);background:rgba(184,134,11,0.07);}
.player-row.is-human{border-color:rgba(100,180,100,0.35);}
.player-row.human-panel{flex-direction:column;align-items:stretch;gap:0.3rem;padding:0.4rem 0.6rem;width:100%;}
.player-row.top-panel{flex-direction:column;align-items:stretch;gap:0.3rem;padding:0.4rem 0.6rem;width:100%;}
.human-info-row{display:flex;align-items:center;gap:0.4rem;}
.human-cards-row{display:flex;flex-wrap:wrap;gap:4px;align-items:center;}
.player-row.has-mano{border-color:rgba(255,215,0,0.7);background:rgba(255,215,0,0.05);}
.mano-badge{font-size:0.58rem;background:rgba(255,215,0,0.15);color:#ffd700;border:1px solid rgba(255,215,0,0.5);border-radius:10px;padding:1px 6px;white-space:nowrap;font-weight:bold;letter-spacing:0.04em;}
.pname{font-size:0.68rem;text-transform:uppercase;letter-spacing:0.1em;color:#b8860b;min-width:55px;white-space:nowrap;}
.cards-wrap{display:flex;gap:3px;flex-wrap:wrap;flex:1;align-items:center;}
.card-count{font-size:0.7rem;color:rgba(255,255,255,0.3);margin-left:auto;white-space:nowrap;}
.team-badge{font-size:0.58rem;padding:1px 5px;border-radius:10px;text-transform:uppercase;letter-spacing:0.08em;font-weight:bold;}
.t0{background:rgba(59,130,246,0.2);color:#93c5fd;border:1px solid rgba(59,130,246,0.3);}
.t1{background:rgba(239,68,68,0.2);color:#fca5a5;border:1px solid rgba(239,68,68,0.3);}
.thinking{font-size:0.72rem;color:#c8b08a;font-style:italic;animation:pulse 1s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* TABLE */
.table-area{background:radial-gradient(ellipse at center,#1e7040 0%,#154a2a 60%,#0d3019 100%);border:2px solid rgba(184,134,11,0.35);border-radius:14px;padding:0.6rem;min-height:90px;display:flex;flex-direction:column;gap:0.3rem;width:247px;box-sizing:border-box;}
.table-lbl{font-size:0.6rem;text-transform:uppercase;letter-spacing:0.15em;color:rgba(255,255,255,0.3);}
.table-cards{display:grid;grid-template-columns:repeat(4,52px);gap:5px;justify-content:center;align-items:start;}
.table-empty{color:rgba(255,255,255,0.2);font-style:italic;font-size:0.9rem;grid-column:1/-1;text-align:center;}

/* CARDS */
.card{width:52px;height:85px;border-radius:6px;border:1.5px solid #999;background:#fdf6e3;display:flex;flex-direction:column;justify-content:space-between;padding:3px;cursor:pointer;position:relative;transition:transform 0.1s,box-shadow 0.1s;flex-shrink:0;}
.card.sm{width:36px;height:55px;padding:2px;}
.card.lg{width:100px;height:145px;border-radius:10px;padding:6px;border-width:2px;cursor:default;}
.card.lg .cr-num{font-size:1.5rem;min-width:20px;}
.card.lg .cr-top{gap:4px;padding:2px;}
.card.back{background:repeating-linear-gradient(45deg,#7b0e0e,#7b0e0e 4px,#5a0a0a 4px,#5a0a0a 8px);border-color:#5a0a0a;cursor:default;}
.card.red-c .cr,.card.red-c .cr-sm{color:#c00;}
.card.blk-c .cr,.card.blk-c .cr-sm{color:#111;}
.card.selected{transform:translateY(-6px);box-shadow:0 6px 18px rgba(255,215,0,0.5);border-color:#ffd700;}
.card.playable:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgba(255,255,255,0.2);}
.cr-top{display:flex;align-items:center;gap:2px;padding:1px;}
.cr-bot{align-self:flex-end;transform:rotate(180deg);}
.cr-num{font-size:0.85rem;font-weight:900;line-height:1;min-width:11px;font-family:'Palatino Linotype',Georgia,serif;}
.card.sm .cr-num{font-size:0.65rem;min-width:8px;}
.cr-icon-sm{display:flex;align-items:center;line-height:1;flex-shrink:0;}
.cr-mid-icon svg{max-width:100%;max-height:100%;display:block;}
.cr-mid-icon{display:flex;justify-content:center;align-items:center;flex:1;overflow:hidden;min-height:0;}
/* Red suits number color */
.card.red-c .cr-num{color:#c00;}
.card.blk-c .cr-num{color:#111;}
.card-order{position:absolute;top:2px;right:2px;background:rgba(0,0,0,0.55);color:#ffd700;font-size:0.45rem;font-weight:bold;border-radius:3px;padding:1px 3px;line-height:1;pointer-events:none;}
.score-cards{font-size:0.62rem;color:rgba(255,255,255,0.4);margin-top:1px;}

/* ACTIONS */
.actions{display:flex;align-items:center;gap:0.6rem;padding:0.4rem 0.2rem;flex-wrap:wrap;}
.hint{font-size:0.78rem;color:#c8b08a;}
.hint.porrazo{color:#ff9999;font-weight:bold;}
.hint.lugar{color:#ffd700;}
.hint.levanta{color:#93c5fd;}
.turn-badge{font-size:0.78rem;color:#ffd700;border:1px solid rgba(184,134,11,0.4);border-radius:20px;padding:0.2rem 0.7rem;background:rgba(184,134,11,0.1);}

/* BUTTONS */
.btn{padding:0.45rem 1.1rem;border-radius:8px;border:1.5px solid rgba(255,255,255,0.2);font-family:Georgia,serif;font-size:0.88rem;cursor:pointer;transition:all 0.15s;}
.btn-gold{background:linear-gradient(135deg,#b8860b,#8b6508);color:#1a0a00;border-color:#ffd700;font-weight:bold;}
.btn-gold:hover{background:linear-gradient(135deg,#d4a010,#a07a10);}
.btn-gold:disabled{opacity:0.35;cursor:not-allowed;transform:none;}
.btn-outline{background:rgba(255,255,255,0.05);color:#f0e6d0;border-color:rgba(184,134,11,0.5);}
.btn-outline:hover{background:rgba(184,134,11,0.15);}

/* PLAY OVERLAY */
.play-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:50;animation:fadeInOv 0.15s ease-out;}
@keyframes fadeInOv{from{opacity:0}to{opacity:1}}
.play-bubble{background:#0d2e15;border:2px solid #b8860b;border-radius:16px;padding:1.2rem 1.5rem;text-align:center;min-width:180px;box-shadow:0 0 40px rgba(184,134,11,0.3);}
.play-who{font-size:0.75rem;color:#b8860b;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.4rem;}
.play-card-big{margin:0 auto 0.6rem;}
.play-result{margin-top:0.3rem;font-size:0.95rem;font-weight:bold;padding:0.35rem 0.7rem;border-radius:8px;border:1px solid;}
.play-result.normal{color:#f0e6d0;border-color:rgba(255,255,255,0.2);background:rgba(0,0,0,0.4);font-size:0.9rem;}
.play-result.lugar{color:#ffd700;border-color:#b8860b;background:rgba(184,134,11,0.15);}
.play-result.porrazo{color:#ff9999;border-color:#8b0000;background:rgba(139,0,0,0.25);animation:shakePorrazo 0.4s ease;}
.play-result.limpia{color:#6bffb8;border-color:#0a5c38;background:rgba(10,92,56,0.25);}
.play-result.levanta{color:#93c5fd;border-color:#1e40af;background:rgba(30,64,175,0.15);}
@keyframes shakePorrazo{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* MODAL */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(3px);}
.modal{background:#0d2e15;border:2px solid #b8860b;border-radius:16px;padding:2rem 1.8rem;max-width:440px;width:92%;text-align:center;box-shadow:0 0 50px rgba(184,134,11,0.3);animation:popIn 0.25s ease-out;}
@keyframes popIn{from{opacity:0;transform:scale(0.85)}to{opacity:1;transform:scale(1)}}
.modal h2{font-family:'Palatino Linotype',serif;font-size:1.8rem;color:#ffd700;margin-bottom:0.8rem;}
.modal-body{color:#c8b08a;font-size:0.92rem;line-height:1.7;margin-bottom:1.2rem;}
.breakdown{background:rgba(0,0,0,0.3);border-radius:8px;padding:0.7rem;margin:0.8rem 0;text-align:left;}
.breakdown div{display:flex;justify-content:space-between;font-size:0.85rem;color:#c8b08a;padding:0.15rem 0;border-bottom:1px solid rgba(255,255,255,0.05);}
.breakdown .total{border-bottom:none;color:#ffd700;font-weight:bold;}

/* WINNER SCREEN */
#winner-screen{position:fixed;inset:0;z-index:200;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;background:radial-gradient(ellipse at center,#1a3a1a 0%,#050e05 100%);}
#winner-screen.show{display:flex;}
.winner-trophy{font-size:5rem;margin-bottom:0.5rem;animation:trophyBounce 0.6s ease-out 0.3s both;}
@keyframes trophyBounce{from{opacity:0;transform:scale(0.3) translateY(-40px)}to{opacity:1;transform:scale(1) translateY(0)}}
.winner-title{font-family:'Palatino Linotype',Palatino,serif;font-size:clamp(1.5rem,6vw,3rem);color:#ffd700;text-shadow:0 0 30px rgba(255,215,0,0.6),2px 2px 0 #8b0000;margin-bottom:0.4rem;animation:slideUp 0.5s ease-out 0.5s both;}
.winner-team{font-family:'Palatino Linotype',Palatino,serif;font-size:clamp(2rem,9vw,4.5rem);font-weight:bold;margin-bottom:1rem;animation:slideUp 0.5s ease-out 0.7s both;}
.winner-team.t0{color:#93c5fd;text-shadow:0 0 40px rgba(147,197,253,0.5);}
.winner-team.t1{color:#fca5a5;text-shadow:0 0 40px rgba(252,165,165,0.5);}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.winner-members{font-size:1.1rem;color:#c8b08a;font-style:italic;margin-bottom:0.5rem;animation:slideUp 0.5s ease-out 0.85s both;}
.winner-score{font-size:1rem;color:rgba(255,255,255,0.4);margin-bottom:2rem;animation:slideUp 0.5s ease-out 1s both;}
.winner-score b{color:#ffd700;}
.winner-btn{animation:slideUp 0.5s ease-out 1.2s both;}
.confetti-bar{position:absolute;top:0;left:0;right:0;height:8px;background:repeating-linear-gradient(90deg,#ffd700 0px,#ffd700 20px,#ff6b6b 20px,#ff6b6b 40px,#6bffb8 40px,#6bffb8 60px,#93c5fd 60px,#93c5fd 80px);animation:confettiSlide 1s linear infinite;}
@keyframes confettiSlide{from{background-position:0 0}to{background-position:80px 0}}
.confetti-bar.bottom{top:auto;bottom:0;}


/* ── RESPONSIVE: mobile portrait ─────────────────────────────────────────────
   Screen ≤ 430px (most phones portrait):
   Card shrinks to 40px → 4 cols = 4*40+3*4=172px, table w=196px
   Side col = 66px, cross = 66+4+196+4+66 = 336px → board max 350px
   ────────────────────────────────────────────────────────────────────────── */
@media(max-width:430px){
  #board{max-width:350px;padding:0.3rem;}
  .cross-wrap{grid-template-columns:66px 196px 66px;gap:0.25rem;}
  .table-area{width:196px;padding:0.4rem;min-height:75px;}
  .table-cards{grid-template-columns:repeat(4,40px);gap:4px;}
  .card{width:40px;height:65px;padding:2px;border-radius:5px;}
  .card.sm{width:28px;height:44px;padding:1px;}
  .card.lg{width:78px;height:112px;padding:4px;}
  .card.lg .cr-num{font-size:1.1rem;}
  .cr-num{font-size:0.7rem;min-width:9px;}
  .player-row.side{width:62px;padding:0.3rem 0.2rem;}
  .scorebar{padding:0.3rem 0.5rem;gap:0.3rem;}
  .score-num{font-size:1.2rem;}
  .score-lbl{font-size:0.58rem;}
  .score-block{min-width:72px;}
  .pname{font-size:0.6rem;min-width:44px;}
  .tendido-status{font-size:0.62rem;padding:0.15rem 0.5rem;}
  .ronda-info{font-size:0.62rem;}
  #intro{padding:2rem 1.5rem;}
  #intro h1{font-size:2.8rem;}
  .modal{padding:1.4rem 1.2rem;}
  .modal h2{font-size:1.4rem;}
  .btn{font-size:0.8rem;padding:0.4rem 0.9rem;}
}

/* Very small phones ≤ 360px */
@media(max-width:360px){
  #board{max-width:310px;}
  .cross-wrap{grid-template-columns:56px 176px 56px;gap:0.2rem;}
  .table-area{width:176px;}
  .table-cards{grid-template-columns:repeat(4,36px);gap:3px;}
  .card{width:36px;height:59px;}
  .card.sm{width:26px;height:40px;}
  .player-row.side{width:52px;}
  .score-num{font-size:1rem;}
  .score-block{min-width:60px;}
}