@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Rajdhani:wght@300;400;600;700&family=Orbitron:wght@400;700;900&display=swap');

:root {
  --gold: #c9a84c; --gold-light: #e8c97a; --gold-dark: #8a6a2a;
  --gold-glow: rgba(201,168,76,0.35);
  --bg: #0e0c06; --panel: linear-gradient(160deg, #2a1e08, #181006);
  --panel-border: #6a4e1a;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--bg);
  background-image:radial-gradient(ellipse at 20% 10%,#1a1004 0%,transparent 60%),radial-gradient(ellipse at 80% 90%,#12080a 0%,transparent 55%);
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  padding:14px 10px 40px;font-family:'Rajdhani',sans-serif;color:var(--gold-light);
}
header{text-align:center;margin-bottom:14px;}
h1{
  font-family:'Cinzel Decorative',serif;font-size:clamp(1.4rem,4vw,2.2rem);
  color:var(--gold-light);text-shadow:0 0 30px var(--gold-glow),0 2px 4px rgba(0,0,0,0.8);
  letter-spacing:0.1em;line-height:1.1;
}
.subtitle{font-size:0.72rem;color:var(--gold-dark);letter-spacing:0.25em;text-transform:uppercase;margin-top:2px;}

/* ── TOAST NOTIFICATIONS ── */
#toastContainer{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);
  z-index:9999;display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none;width:min(480px,90vw);
}
.toast{
  font-family:'Orbitron',monospace;font-size:0.72rem;font-weight:700;
  letter-spacing:0.1em;padding:12px 20px;border-radius:12px;
  text-align:center;border:2px solid;
  backdrop-filter:blur(10px);
  animation:toastIn 0.35s cubic-bezier(.175,.885,.32,1.275), toastOut 0.3s ease 2.3s forwards;
  box-shadow:0 4px 24px rgba(0,0,0,0.6);
  width:100%;
}
@keyframes toastIn{from{opacity:0;transform:translateY(-20px) scale(0.9);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes toastOut{from{opacity:1;}to{opacity:0;transform:translateY(-10px);}}
.toast-info{background:rgba(26,16,4,0.95);border-color:var(--gold-dark);color:var(--gold-light);}
.toast-turn{background:rgba(26,16,4,0.95);border-color:var(--gold);color:var(--gold-light);}
.toast-eat{background:rgba(40,5,5,0.95);border-color:#e74c3c;color:#ff8080;}
.toast-goal{background:rgba(5,30,10,0.95);border-color:#27ae60;color:#80ff90;}
.toast-dice{background:rgba(10,20,40,0.95);border-color:#3498db;color:#80c8ff;}
.toast-noMove{background:rgba(30,20,5,0.95);border-color:#f39c12;color:#f1c40f;}
.toast-win{background:rgba(20,14,2,0.95);border-color:var(--gold-light);color:#fff;}

/* ── SCREENS ── */
.screen{display:none;}
.screen.active{display:flex;flex-direction:column;align-items:center;width:100%;}

/* ── MENU ── */
.menu-card{
  background:var(--panel);border:2px solid var(--panel-border);
  border-radius:20px;padding:32px 28px;max-width:420px;width:100%;
  box-shadow:0 0 60px rgba(201,168,76,0.1),inset 0 0 40px rgba(0,0,0,0.5);text-align:center;
}
.menu-section{margin-bottom:22px;}
.menu-label{
  font-family:'Orbitron',monospace;font-size:0.58rem;font-weight:700;
  letter-spacing:0.2em;color:var(--gold-dark);text-transform:uppercase;margin-bottom:10px;display:block;
}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.mode-btn{
  background:rgba(201,168,76,0.07);border:1px solid var(--gold-dark);border-radius:10px;
  padding:12px 8px;color:var(--gold-light);font-family:'Rajdhani',sans-serif;
  font-size:0.88rem;font-weight:600;cursor:pointer;transition:all 0.2s;text-transform:uppercase;
}
.mode-btn:hover,.mode-btn.selected{background:rgba(201,168,76,0.18);border-color:var(--gold-light);box-shadow:0 0 16px rgba(201,168,76,0.25);color:#fff;}
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.diff-btn{
  background:rgba(201,168,76,0.05);border:1px solid var(--gold-dark);border-radius:8px;
  padding:10px 6px;color:var(--gold-dark);font-family:'Orbitron',monospace;
  font-size:0.56rem;font-weight:700;letter-spacing:0.08em;cursor:pointer;transition:all 0.2s;text-transform:uppercase;
}
.diff-btn.selected{background:rgba(201,168,76,0.18);border-color:var(--gold);color:var(--gold-light);}
.diff-btn:hover{border-color:var(--gold-dark);color:var(--gold);}
.start-btn{
  font-family:'Cinzel Decorative',serif;font-size:0.9rem;letter-spacing:0.08em;
  padding:14px 40px;border-radius:12px;border:none;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#0e0c06;font-weight:700;cursor:pointer;
  box-shadow:0 4px 20px rgba(201,168,76,0.35);transition:all 0.2s;width:100%;margin-top:8px;
}
.start-btn:hover{box-shadow:0 6px 30px rgba(201,168,76,0.55);transform:translateY(-2px);}

/* ── GAME LAYOUT ── */
.game-layout{display:flex;gap:14px;align-items:flex-start;width:100%;max-width:1260px;flex-wrap:wrap;justify-content:center;}
.game-col{display:flex;flex-direction:column;gap:10px;align-items:center;}
.side-col{display:flex;flex-direction:column;gap:10px;min-width:260px;max-width:310px;flex:1;}

/* ── PANELS ── */
.panel{
  background:var(--panel);border:2px solid var(--panel-border);
  border-radius:16px;padding:14px;
  box-shadow:0 0 30px rgba(201,168,76,0.08),inset 0 0 20px rgba(0,0,0,0.4);width:100%;
}
.panel-title{
  font-family:'Orbitron',monospace;font-size:0.58rem;font-weight:700;
  letter-spacing:0.18em;color:var(--gold-dark);text-transform:uppercase;margin-bottom:10px;text-align:center;
}

/* ── INFO BAR ── */
.info-bar{
  display:flex;gap:8px;align-items:center;justify-content:space-between;
  width:100%;max-width:590px;
  background:var(--panel);border:2px solid var(--panel-border);
  border-radius:12px;padding:8px 14px;box-shadow:0 0 20px rgba(201,168,76,0.07);
}
.info-item{text-align:center;}
.info-label{font-family:'Orbitron',monospace;font-size:0.44rem;letter-spacing:0.1em;color:var(--gold-dark);display:block;}
.info-val{font-family:'Orbitron',monospace;font-size:0.85rem;color:var(--gold-light);font-weight:700;}
.info-sep{width:1px;height:30px;background:var(--panel-border);}

/* ── DICE ── */
.dice-area{display:flex;gap:12px;align-items:center;justify-content:center;margin-bottom:10px;}
.die{
  width:52px;height:52px;border-radius:10px;
  background:linear-gradient(135deg,#2a1e08,#181006);border:2px solid var(--gold-dark);
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  padding:6px;gap:3px;
  box-shadow:0 0 16px rgba(201,168,76,0.15),inset 0 2px 4px rgba(0,0,0,0.5);
  cursor:pointer;transition:all 0.15s;
}
.die.rolling{animation:dieRoll 0.5s ease;border-color:var(--gold-light);box-shadow:0 0 24px var(--gold-glow);}
@keyframes dieRoll{
  0%{transform:rotate(0deg) scale(1);}20%{transform:rotate(-12deg) scale(1.08);}
  50%{transform:rotate(10deg) scale(0.95);}80%{transform:rotate(-5deg) scale(1.04);}
  100%{transform:rotate(0deg) scale(1);}
}
.dot{width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f0d060,#c9a84c);
  box-shadow:0 0 4px rgba(201,168,76,0.5);visibility:hidden;}
.dot.on{visibility:visible;}
.die-label{font-family:'Orbitron',monospace;font-size:0.55rem;color:var(--gold-dark);text-align:center;margin-top:3px;}
.roll-btn{
  font-family:'Orbitron',monospace;font-size:0.62rem;font-weight:700;letter-spacing:0.1em;
  padding:11px 22px;border-radius:9px;border:none;cursor:pointer;text-transform:uppercase;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#0e0c06;transition:all 0.2s;box-shadow:0 3px 14px rgba(201,168,76,0.3);
}
.roll-btn:hover:not(:disabled){box-shadow:0 4px 22px rgba(201,168,76,0.5);transform:translateY(-1px);}
.roll-btn:disabled{opacity:0.35;cursor:not-allowed;}

/* ── BOARD ── */
.board-wrapper{position:relative;width:min(560px,96vw);height:min(560px,96vw);}
#parchisBoard{width:100%;height:100%;border-radius:12px;border:3px solid var(--gold-dark);
  box-shadow:0 0 50px rgba(201,168,76,0.18),inset 0 0 30px rgba(0,0,0,0.3);}

/* ── PLAYER CARDS ── */
.player-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.player-card{
  border-radius:10px;padding:10px;border:1px solid rgba(138,106,42,0.3);
  background:rgba(0,0,0,0.3);transition:all 0.3s;
}
.player-card.active-player{border-color:var(--gold);box-shadow:0 0 14px rgba(201,168,76,0.25);background:rgba(201,168,76,0.07);}
.pc-header{display:flex;align-items:center;gap:6px;margin-bottom:6px;}
.pc-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;border:2px solid rgba(255,255,255,0.2);}
.pc-name{font-family:'Orbitron',monospace;font-size:0.56rem;font-weight:700;color:var(--gold-light);letter-spacing:0.08em;}
.pc-type{font-size:0.6rem;color:var(--gold-dark);margin-left:auto;}
.pc-pieces{display:flex;gap:4px;}
.piece-ind{width:12px;height:12px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,0.15);}
.piece-ind.home{opacity:0.3;}
.piece-ind.out{opacity:1;box-shadow:0 0 5px currentColor;}
.piece-ind.ingoal{background:linear-gradient(135deg,#f0d060,#c9a84c) !important;border-color:#f0d060;}
.pc-stat{font-size:0.6rem;color:var(--gold-dark);margin-top:3px;}
.pc-winp{font-family:'Orbitron',monospace;font-size:0.68rem;font-weight:700;margin-top:3px;}

/* ── ASSISTANT ── */
.assistant-panel{
  background:var(--panel);border:2px solid var(--panel-border);border-radius:16px;
  overflow:hidden;box-shadow:0 0 30px rgba(201,168,76,0.08);width:100%;
}
.assistant-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;cursor:pointer;background:rgba(201,168,76,0.05);
  border-bottom:1px solid rgba(138,106,42,0.3);
}
.assistant-title{font-family:'Orbitron',monospace;font-size:0.6rem;font-weight:700;letter-spacing:0.14em;color:var(--gold);text-transform:uppercase;}
.assistant-toggle{
  font-family:'Orbitron',monospace;font-size:0.5rem;color:var(--gold-dark);
  background:rgba(201,168,76,0.1);border:1px solid var(--panel-border);
  border-radius:5px;padding:3px 8px;cursor:pointer;transition:all 0.2s;
}
.assistant-toggle:hover{background:rgba(201,168,76,0.2);color:var(--gold-light);}
.assistant-body{padding:12px 14px;}
.assistant-body.hidden{display:none;}

/* Metrics */
.metric-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.metric-label{font-size:0.66rem;color:var(--gold-dark);min-width:90px;flex-shrink:0;}
.metric-bar{flex:1;height:6px;background:rgba(255,255,255,0.06);border-radius:3px;overflow:hidden;}
.metric-fill{height:100%;border-radius:3px;transition:width 0.6s ease;}
.metric-val{font-family:'Orbitron',monospace;font-size:0.62rem;color:var(--gold-light);min-width:38px;text-align:right;}
.divider{height:1px;background:rgba(138,106,42,0.2);margin:10px 0;}

/* Recommendation */
.rec-box{background:rgba(201,168,76,0.06);border:1px solid rgba(138,106,42,0.4);border-radius:8px;padding:10px;}
.rec-title{font-family:'Orbitron',monospace;font-size:0.52rem;color:var(--gold-dark);letter-spacing:0.12em;margin-bottom:5px;}
.rec-text{font-size:0.77rem;color:var(--gold-light);line-height:1.5;}
.rec-formula{font-size:0.66rem;color:var(--gold-dark);margin-top:5px;}

/* Move options */
.move-options{display:flex;flex-direction:column;gap:5px;margin-top:8px;}
.move-opt{
  display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;
  background:rgba(0,0,0,0.25);border:1px solid rgba(138,106,42,0.25);
  cursor:pointer;transition:all 0.2s;
}
.move-opt:hover{border-color:var(--gold-dark);background:rgba(201,168,76,0.08);}
.move-opt.best{border-color:var(--gold) !important;background:rgba(201,168,76,0.12) !important;}
.move-piece-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;}
.move-desc{font-size:0.73rem;color:var(--gold-light);flex:1;}
.move-score{font-family:'Orbitron',monospace;font-size:0.6rem;color:var(--gold);}
.move-empty{font-size:0.72rem;color:var(--gold-dark);text-align:center;padding:10px;}

/* ── DICE DISTRIBUTION TABLE (enhanced) ── */
.dice-dist-table{width:100%;border-collapse:collapse;font-size:0.68rem;}
.dice-dist-table th{
  font-family:'Orbitron',monospace;font-size:0.44rem;color:var(--gold-dark);
  padding:5px 4px;text-align:center;border-bottom:1px solid rgba(138,106,42,0.3);
  letter-spacing:0.06em;white-space:nowrap;
}
.dice-dist-table td{
  padding:3px 4px;text-align:center;border-bottom:1px solid rgba(138,106,42,0.08);
  font-family:'Rajdhani',sans-serif;font-weight:600;vertical-align:middle;
}
.dice-dist-table tr:hover td{background:rgba(201,168,76,0.04);}
.dice-dist-table tr.highlighted-row td{background:rgba(201,168,76,0.12);border-color:rgba(201,168,76,0.3);}
.dice-dist-table tr.highlighted-row td:first-child{color:var(--gold-light);font-weight:700;}
.prob-bar-mini{width:36px;height:5px;background:rgba(255,255,255,0.06);border-radius:2px;overflow:hidden;display:inline-block;vertical-align:middle;margin-left:3px;}
.prob-bar-mini-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--gold-dark),var(--gold));}
.outcome-tags{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;}
.tag{
  font-size:0.52rem;font-family:'Orbitron',monospace;letter-spacing:0.04em;
  padding:1px 4px;border-radius:3px;white-space:nowrap;font-weight:700;
}
.tag-eat{background:rgba(231,76,60,0.25);color:#ff8070;border:1px solid rgba(231,76,60,0.4);}
.tag-goal{background:rgba(39,174,96,0.25);color:#80e890;border:1px solid rgba(39,174,96,0.4);}
.tag-salir{background:rgba(52,152,219,0.25);color:#80c8ff;border:1px solid rgba(52,152,219,0.4);}
.tag-move{background:rgba(201,168,76,0.12);color:var(--gold-dark);border:1px solid rgba(138,106,42,0.3);}
.tag-safe{background:rgba(255,255,255,0.08);color:#aaa;border:1px solid rgba(255,255,255,0.15);}
.tag-double{background:rgba(155,89,182,0.25);color:#c880ff;border:1px solid rgba(155,89,182,0.4);}
.tag-none{background:rgba(255,255,255,0.04);color:#555;border:1px solid rgba(255,255,255,0.08);}

/* Win prob bars */
.win-bars-container{margin-bottom:2px;}

/* Log */
.log-area{max-height:85px;overflow-y:auto;font-size:0.66rem;color:var(--gold-dark);line-height:1.7;
  scrollbar-width:thin;scrollbar-color:var(--gold-dark) transparent;}
.log-entry{border-left:2px solid rgba(138,106,42,0.3);padding-left:7px;margin-bottom:2px;}
.log-entry.hl{border-color:var(--gold);color:var(--gold-light);}

/* Turn indicator */
.turn-indicator{
  font-family:'Orbitron',monospace;font-size:0.56rem;letter-spacing:0.1em;color:var(--gold);
  text-align:center;padding:6px;background:rgba(201,168,76,0.07);
  border-radius:6px;border:1px solid rgba(138,106,42,0.3);
}

/* Game over modal */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.8);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:100;}
.overlay.active{display:flex;}
.modal{
  background:linear-gradient(160deg,#2a1e08,#181006);border:2px solid var(--gold);
  border-radius:20px;padding:36px 32px;text-align:center;max-width:380px;
  box-shadow:0 0 80px rgba(201,168,76,0.3);
  animation:modalIn 0.4s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes modalIn{from{transform:scale(0.7);opacity:0;}to{transform:scale(1);opacity:1;}}
.modal h2{font-family:'Cinzel Decorative',serif;font-size:1.5rem;color:var(--gold-light);margin-bottom:8px;}
.modal p{font-size:0.85rem;color:var(--gold-dark);margin-bottom:20px;line-height:1.6;}
.modal-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.btn-secondary{
  font-family:'Orbitron',monospace;font-size:0.58rem;font-weight:700;letter-spacing:0.08em;
  padding:9px 16px;border-radius:8px;border:1px solid var(--gold-dark);background:transparent;
  color:var(--gold-dark);cursor:pointer;transition:all 0.2s;text-transform:uppercase;
}
.btn-secondary:hover{background:rgba(201,168,76,0.1);color:var(--gold-light);border-color:var(--gold);}

@media(max-width:820px){.game-layout{flex-direction:column;align-items:center;}.side-col{max-width:590px;width:100%;}}