/* Sala Cero v17.1 — Generala clásica, legible y estable */
:root{
  --g-bg:#080b08;
  --g-panel:#10281f;
  --g-panel2:#0a1a14;
  --g-felt:#0d6a46;
  --g-felt-dark:#08452f;
  --g-wood:#4a2412;
  --g-wood-dark:#1c0c06;
  --g-line:rgba(236,205,135,.24);
  --g-gold:#e7bd68;
  --g-gold2:#f7d994;
  --g-cream:#f4ead2;
  --g-text:#fff8e8;
  --g-muted:#c7c3b5;
  --g-green:#7bd8a9;
  --g-red:#e4776d;
}
html{font-size:16px}
html,body{
  background:
    radial-gradient(circle at 50% -10%,rgba(231,189,104,.12),transparent 34%),
    linear-gradient(180deg,#0b0f0b 0,#050705 100%);
  color:var(--g-text);
}
body{font-size:1rem;line-height:1.45}
.g-noise{opacity:.12;background-size:7px 7px}

/* Cabecera de madera, más seria y más visible */
.g-topbar{
  min-height:78px;
  padding:max(10px,var(--safe-top)) clamp(18px,2vw,34px) 10px;
  border-bottom:1px solid rgba(244,218,160,.25);
  background:
    linear-gradient(90deg,rgba(255,255,255,.025),transparent 22%,rgba(255,255,255,.02) 70%,transparent),
    linear-gradient(180deg,#4a2513 0,#281108 60%,#120804 100%);
  box-shadow:0 12px 32px rgba(0,0,0,.35),inset 0 -1px rgba(255,220,150,.12);
}
.g-brand-mark{width:50px;height:50px;border-radius:14px;font-size:30px;box-shadow:0 8px 26px rgba(0,0,0,.28)}
.g-brand strong{font-size:.94rem;letter-spacing:.14em}
.g-brand small{font-size:.64rem;letter-spacing:.2em}
.g-icon-button,.g-soft-button{
  min-height:46px;
  padding:0 18px;
  border-color:rgba(244,218,160,.24);
  background:rgba(8,15,11,.62);
  font-size:.82rem;
}
.g-icon-button{width:48px;padding:0;font-size:1.25rem;background:linear-gradient(145deg,var(--g-gold2),#bd8237)}

/* Menú propio de Generala */
.g-shell{width:min(1760px,100%);padding:24px clamp(18px,2vw,34px);margin:auto}
.g-welcome{
  min-height:calc(100dvh - 126px);
  grid-template-columns:minmax(0,1fr) minmax(410px,.75fr);
  gap:32px;
  padding:18px;
  border:1px solid rgba(235,205,135,.18);
  border-radius:30px;
  background:
    radial-gradient(circle at 22% 12%,rgba(255,255,255,.06),transparent 28%),
    repeating-linear-gradient(12deg,rgba(255,255,255,.015) 0 1px,transparent 1px 5px),
    linear-gradient(145deg,#0f5a3c,#073a29 70%,#06271d);
  box-shadow:inset 0 0 0 10px rgba(58,27,12,.72),inset 0 0 0 12px rgba(231,189,104,.22),0 28px 70px rgba(0,0,0,.35);
}
.g-hero-copy{padding:44px 36px}
.g-kicker{font-size:.76rem;letter-spacing:.17em}
.g-hero-copy h1{font-size:clamp(3.6rem,5vw,6.4rem);line-height:.94;text-shadow:0 3px 18px rgba(0,0,0,.3)}
.g-hero-copy p{max-width:720px;font-size:1.08rem;line-height:1.75;color:#e4ded0}
.g-dice-showcase-classic{min-height:510px;display:grid;place-items:center;isolation:isolate}
.g-show-felt{position:absolute;inset:7% 4%;border-radius:50%;border:1px solid rgba(247,217,148,.22);background:radial-gradient(circle,#11734d,#08442f 68%,#062d21);box-shadow:inset 0 0 40px rgba(0,0,0,.36),0 24px 50px rgba(0,0,0,.2)}
.g-show-cup{position:relative;z-index:3;height:440px;max-width:74%;object-fit:contain;filter:drop-shadow(0 28px 24px rgba(0,0,0,.42));transform:translateY(4px)}
.g-dice-showcase-classic .g-show-die{z-index:4;width:94px;border-radius:22px;font-size:2.5rem}
.g-dice-showcase-classic .g-show-die.d1{left:4%;top:63%}
.g-dice-showcase-classic .g-show-die.d2{right:3%;top:57%}
.g-dice-showcase-classic .g-show-die.d3{left:18%;bottom:2%}
.g-dice-showcase-classic .g-show-seal{z-index:5;left:auto;right:7%;top:14%;width:96px;height:96px}
.g-mode-grid{gap:18px;margin:0 18px 18px}
.g-mode-card{min-height:235px;padding:26px;border-color:rgba(235,205,135,.22);border-radius:20px;background:linear-gradient(145deg,rgba(15,48,37,.96),rgba(6,27,20,.98));box-shadow:0 18px 38px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.04)}
.g-mode-card.featured{background:radial-gradient(circle at 95% 0,rgba(231,189,104,.18),transparent 44%),linear-gradient(145deg,#174d3a,#08281f)}
.g-mode-symbol{width:52px;height:52px;margin-bottom:25px;border-radius:14px;font-size:1.4rem}
.g-mode-card small{font-size:.72rem}
.g-mode-card strong{font-size:1.75rem;margin:8px 0 10px}
.g-mode-card p{min-height:66px;font-size:.92rem;line-height:1.6;color:#d1cec1}
.g-mode-card>b{font-size:.82rem}
.g-mode-no{font-size:.75rem}

/* Mesa principal, con tapete y marco de madera */
.g-game{
  grid-template-columns:360px minmax(720px,1fr) 330px;
  gap:18px;
  min-height:calc(100dvh - 126px);
  align-items:stretch;
}
.g-score-panel,.g-side-panel>section{
  border:1px solid rgba(235,205,135,.24);
  border-radius:22px;
  background:
    radial-gradient(circle at 15% 0,rgba(255,255,255,.04),transparent 30%),
    linear-gradient(155deg,#12382b,#071b14 82%);
  box-shadow:0 24px 55px rgba(0,0,0,.26),inset 0 0 0 1px rgba(255,255,255,.025);
}
.g-score-panel{padding:22px}
.g-panel-heading{margin-bottom:14px}
.g-panel-heading span,.g-intel-card>span,.g-log-card>span{font-size:.72rem;letter-spacing:.15em}
.g-panel-heading h2,.g-intel-card h2,.g-log-card h2{font-size:2rem;margin-top:4px}
.g-panel-heading button{width:40px;height:40px;font-size:1.15rem;border-color:rgba(235,205,135,.22)}
.g-score-scroll{max-height:calc(100dvh - 270px)}
.g-score-table{width:max-content;min-width:100%;border-spacing:0 7px;font-size:.84rem}
.g-score-table th{padding:7px 8px;font-size:.72rem;white-space:nowrap}
.g-score-table th:not(:first-child),.g-score-table td:not(:first-child){min-width:68px}
.g-score-table td{height:39px;padding:8px 10px;font-size:.88rem;background:rgba(255,255,255,.045)}
.g-score-table td:first-child{min-width:128px;font-size:.82rem}
.g-score-table tr.total-row td{font-size:1rem}
.g-score-footer{margin-top:14px;padding-top:14px;font-size:.82rem}

.g-table{
  min-height:calc(100dvh - 126px);
  padding:22px 24px 26px;
  border:10px solid #4d2815;
  border-radius:30px;
  background:
    radial-gradient(circle at 50% 38%,rgba(64,186,124,.18),transparent 40%),
    repeating-linear-gradient(30deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px),
    linear-gradient(145deg,#0e754c,#075338 70%,#063e2c);
  box-shadow:inset 0 0 0 2px rgba(239,203,128,.28),inset 0 0 52px rgba(0,0,0,.4),0 30px 70px rgba(0,0,0,.36);
  overflow:hidden;
}
.g-table::before{content:"";position:absolute;inset:4px;border-radius:17px;border:1px solid rgba(247,217,148,.34);pointer-events:none}
.g-table-inlay{inset:15px;border-color:rgba(247,217,148,.22);border-radius:15px}
.g-turn-banner{
  width:min(760px,96%);
  min-width:0;
  grid-template-columns:56px 1fr auto;
  gap:14px;
  padding:10px 14px 10px 10px;
  border-color:rgba(247,217,148,.25);
  background:rgba(7,25,18,.78);
}
.g-avatar{width:56px;height:56px;border-radius:14px;font-size:.88rem}
.g-turn-banner span{font-size:.7rem}
.g-turn-banner strong{font-size:1.55rem}
.g-roll-counter b{font-size:1.08rem}

/* Cubilete real y animación de dados */
.g-roll-stage{flex:1;width:min(1000px,100%);min-height:535px;margin-top:4px;justify-content:flex-start}
.g-cup-launcher{
  width:230px;
  height:338px;
  margin:8px 0 2px;
  border:0;
  background:transparent;
  filter:drop-shadow(0 26px 26px rgba(0,0,0,.4));
  isolation:isolate;
  transform-origin:50% 22%;
}
.g-cup-launcher::before,.g-cup-launcher::after{display:none!important}
.g-cup-launcher img{position:absolute;z-index:3;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.g-cup-shadow{position:absolute;z-index:0;left:50%;bottom:33px;width:150px;height:30px;transform:translateX(-50%);border-radius:50%;background:rgba(0,0,0,.42);filter:blur(9px)}
.g-cup-label{z-index:5;bottom:0;padding:8px 14px;font-size:.74rem;letter-spacing:.13em;background:rgba(4,19,13,.88);border-color:rgba(247,217,148,.32);box-shadow:0 8px 18px rgba(0,0,0,.22)}
.g-cup-dice-source{position:absolute;z-index:2;left:50%;top:16px;width:130px;height:100px;transform:translateX(-50%);pointer-events:none}
.g-cup-dice-source i{position:absolute;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(145deg,#fffaf0,#d8ccb1);box-shadow:0 7px 12px rgba(0,0,0,.3);color:#2b1b13;font-style:normal;font-weight:900;font-size:.7rem;opacity:0}
.g-cup-dice-source i:nth-child(1){left:7px;top:8px}.g-cup-dice-source i:nth-child(2){left:42px;top:0}.g-cup-dice-source i:nth-child(3){right:12px;top:10px}.g-cup-dice-source i:nth-child(4){left:27px;top:42px}.g-cup-dice-source i:nth-child(5){right:30px;top:43px}
.g-cup-launcher:hover:not(.disabled):not(:disabled){transform:translateY(-3px);filter:drop-shadow(0 32px 30px rgba(0,0,0,.45))}
.g-dice-tray{flex:0 0 auto;width:min(920px,100%);gap:clamp(12px,1.4vw,22px);padding:8px 4px 24px;min-height:148px;perspective:1100px}
.g-die{--die:clamp(92px,7.2vw,118px);border-radius:20%;box-shadow:0 20px 28px rgba(0,0,0,.34),inset 0 0 0 3px rgba(65,42,21,.14),inset 8px 8px 16px rgba(255,255,255,.78)}
.g-die .pip{background:#22160f}
.g-die i{bottom:-28px;font-size:.68rem}
.g-die.held{transform:translateY(-15px);box-shadow:0 28px 34px rgba(0,0,0,.38),0 0 0 4px var(--g-gold2)}
.g-roll-stage.waiting .g-dice-tray .g-die{opacity:0;transform:translateY(-220px) scale(.38);pointer-events:none}
.g-roll-stage.first-roll .g-cup-dice-source i,.g-roll-stage.reroll .g-cup-dice-source i{animation:gMiniDiceIntoCup .42s ease-in both}
.g-roll-stage.first-roll .g-cup-dice-source i:nth-child(2),.g-roll-stage.reroll .g-cup-dice-source i:nth-child(2){animation-delay:.04s}
.g-roll-stage.first-roll .g-cup-dice-source i:nth-child(3),.g-roll-stage.reroll .g-cup-dice-source i:nth-child(3){animation-delay:.08s}
.g-roll-stage.first-roll .g-cup-dice-source i:nth-child(4),.g-roll-stage.reroll .g-cup-dice-source i:nth-child(4){animation-delay:.12s}
.g-roll-stage.first-roll .g-cup-dice-source i:nth-child(5),.g-roll-stage.reroll .g-cup-dice-source i:nth-child(5){animation-delay:.16s}
.g-roll-stage.rolling .g-cup-launcher{animation:gClassicCupShake .78s cubic-bezier(.36,.07,.19,.97)}
.g-roll-stage.first-roll .g-die:not(.held){animation:gFirstDiceSpill .8s cubic-bezier(.2,.8,.2,1) both!important}
.g-roll-stage.reroll .g-die:not(.held){animation:gDiceReturnAndSpill .8s cubic-bezier(.2,.8,.2,1) both!important}
.g-roll-stage .g-die:nth-child(1){--to-center:220px;--rot:-310deg}.g-roll-stage .g-die:nth-child(2){--to-center:110px;--rot:250deg}.g-roll-stage .g-die:nth-child(3){--to-center:0px;--rot:-280deg}.g-roll-stage .g-die:nth-child(4){--to-center:-110px;--rot:320deg}.g-roll-stage .g-die:nth-child(5){--to-center:-220px;--rot:-240deg}
.g-roll-stage .g-die:nth-child(2){animation-delay:.04s!important}.g-roll-stage .g-die:nth-child(3){animation-delay:.08s!important}.g-roll-stage .g-die:nth-child(4){animation-delay:.12s!important}.g-roll-stage .g-die:nth-child(5){animation-delay:.16s!important}
@keyframes gClassicCupShake{0%{transform:translate(0,0) rotate(0)}10%{transform:translate(-9px,-4px) rotate(-8deg)}22%{transform:translate(10px,-10px) rotate(9deg)}34%{transform:translate(-13px,-3px) rotate(-12deg)}46%{transform:translate(12px,-12px) rotate(11deg)}58%{transform:translate(-10px,-2px) rotate(-9deg)}70%{transform:translate(9px,-8px) rotate(7deg)}82%{transform:translate(-5px,-2px) rotate(-4deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes gMiniDiceIntoCup{0%{opacity:0;transform:translateY(-25px) rotate(0) scale(.8)}35%{opacity:1}100%{opacity:0;transform:translateY(74px) rotate(230deg) scale(.45)}}
@keyframes gFirstDiceSpill{0%,38%{opacity:0;transform:translate(var(--to-center),-265px) scale(.35) rotate(0)}55%{opacity:1;transform:translate(calc(var(--to-center)*.52),-125px) scale(.75) rotate(var(--rot))}78%{transform:translate(0,12px) scale(1.07) rotate(calc(var(--rot)*1.4))}90%{transform:translate(0,-7px) scale(.98) rotate(calc(var(--rot)*1.55))}100%{opacity:1;transform:translate(0,0) scale(1) rotate(calc(var(--rot)*1.6))}}
@keyframes gDiceReturnAndSpill{0%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}28%{opacity:.15;transform:translate(var(--to-center),-255px) scale(.4) rotate(var(--rot))}46%{opacity:0;transform:translate(var(--to-center),-255px) scale(.35) rotate(var(--rot))}60%{opacity:1;transform:translate(calc(var(--to-center)*.45),-110px) scale(.75) rotate(calc(var(--rot)*1.4))}82%{transform:translate(0,11px) scale(1.06) rotate(calc(var(--rot)*1.8))}100%{opacity:1;transform:translate(0,0) scale(1) rotate(calc(var(--rot)*2))}}

.g-table-message{min-height:30px;font-size:.88rem;color:#f0eadb}
.g-roll-button{min-width:300px;min-height:66px;padding:7px 22px;border-radius:16px;grid-template-columns:46px 1fr;box-shadow:0 18px 32px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.5)}
.g-roll-button>span{font-size:1.8rem}.g-roll-button b{font-size:1.02rem}.g-roll-button small{font-size:.76rem}
.g-category-panel{width:min(1000px,100%);margin-top:18px;padding:16px;border-color:rgba(247,217,148,.26);background:rgba(5,32,22,.58)}
.g-category-heading{margin-bottom:12px}.g-category-heading span{font-size:.76rem}.g-category-heading small{font-size:.78rem;color:#d4d0c4}
.g-category-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.g-category-button{min-height:64px;padding:9px;border-color:rgba(247,217,148,.18);border-radius:12px;background:rgba(255,255,255,.055)}
.g-category-button span{font-size:.75rem;color:#d8d4c7}.g-category-button strong{font-size:1.22rem;margin-top:2px}
.g-category-button.best{background:rgba(231,189,104,.18);box-shadow:0 0 24px rgba(231,189,104,.11)}

.g-side-panel{gap:16px}.g-side-panel>section{padding:22px}.g-intel-card p{font-size:.88rem;line-height:1.65;color:#d1cec3}.g-log-card{min-height:350px}.g-log-card>div{max-height:calc(100dvh - 390px);margin-top:13px}.g-log-entry{padding:11px 0;font-size:.78rem;line-height:1.55}.g-danger-button{min-height:50px;font-size:.82rem}

/* Modales legibles */
.g-modal{width:min(760px,calc(100vw - 24px))}.g-modal-card{padding:34px}.g-modal-card h1{font-size:2.45rem}.g-field>span,.g-choice-group legend{font-size:.82rem}.g-field input,.g-field select{min-height:50px;font-size:1rem}.g-choice-group label>span{min-height:92px}.g-choice-group b{font-size:.95rem}.g-choice-group small{font-size:.77rem}.g-toggle-list b{font-size:.9rem}.g-toggle-list small{font-size:.76rem}.g-primary-button{min-height:56px;font-size:.95rem}.g-rules-grid p{font-size:.82rem}.g-rules-grid h3{font-size:1.25rem}.g-text-button{font-size:.82rem}

@media(max-width:1500px){
  .g-game{grid-template-columns:320px minmax(650px,1fr) 300px}
  .g-score-panel{padding:18px}
  .g-roll-stage{min-height:510px}
  .g-cup-launcher{width:205px;height:302px}
  .g-die{--die:clamp(84px,7vw,104px)}
  .g-panel-heading h2,.g-intel-card h2,.g-log-card h2{font-size:1.72rem}
}
@media(max-width:1280px){
  .g-game{grid-template-columns:320px minmax(0,1fr)}
  .g-side-panel{display:none}
  .g-table{min-height:calc(100dvh - 122px)}
}
@media(max-width:900px){
  .g-topbar{min-height:66px;padding-inline:12px}.g-brand-mark{width:42px;height:42px;font-size:25px}.g-brand strong{font-size:.82rem}.g-brand small{font-size:.55rem}.g-soft-button{padding:0 13px;font-size:.72rem}
  .g-shell{padding:0}.g-game{display:block;min-height:calc(100dvh - 66px);padding-bottom:104px}
  .g-table{min-height:calc(100dvh - 66px);border-width:6px;border-radius:0;padding:12px 10px 22px}
  .g-score-panel{position:fixed;left:8px;right:8px;bottom:max(8px,var(--safe-bottom));z-index:900;max-height:88px;padding:10px 12px;border-radius:17px;overflow:hidden;transition:max-height .3s ease}
  .g-score-panel.expanded{max-height:76dvh}.g-score-scroll{max-height:58dvh}.g-panel-heading{margin:0}.g-panel-heading h2{font-size:1.35rem}.g-panel-heading span{font-size:.63rem}.g-score-footer{margin-top:6px;padding-top:6px}
  .g-turn-banner{width:100%;grid-template-columns:44px 1fr auto;padding:7px}.g-avatar{width:44px;height:44px}.g-turn-banner strong{font-size:1.15rem}
  .g-roll-stage{min-height:auto;width:100%}.g-cup-launcher{width:150px;height:220px;margin:5px 0 0}.g-cup-label{font-size:.58rem;padding:6px 10px}.g-cup-shadow{width:105px;bottom:24px}
  .g-dice-tray{width:100%;gap:7px;min-height:90px;padding:4px 0 16px}.g-die{--die:clamp(54px,16.5vw,68px)}.g-die i{bottom:-18px;font-size:.52rem}
  .g-roll-stage.waiting .g-dice-tray .g-die{transform:translateY(-150px) scale(.35)}
  .g-table-message{font-size:.75rem;min-height:24px}.g-roll-button{min-width:240px;min-height:56px;grid-template-columns:40px 1fr}.g-roll-button b{font-size:.9rem}.g-roll-button small{font-size:.66rem}
  .g-category-panel{margin-top:10px;margin-bottom:84px;padding:10px;max-height:250px;overflow:auto}.g-category-heading span{font-size:.65rem}.g-category-heading small{display:none}.g-category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.g-category-button{min-height:52px}.g-category-button span{font-size:.62rem}.g-category-button strong{font-size:1rem}
  .g-welcome{display:block;min-height:calc(100dvh - 66px);padding:14px 12px 28px;border-radius:0;box-shadow:inset 0 0 0 5px rgba(58,27,12,.65),inset 0 0 0 7px rgba(231,189,104,.18)}.g-hero-copy{padding:22px 8px}.g-hero-copy h1{font-size:3.1rem}.g-hero-copy p{font-size:.95rem}.g-dice-showcase-classic{min-height:330px}.g-show-cup{height:300px}.g-dice-showcase-classic .g-show-die{width:66px;font-size:1.8rem}.g-dice-showcase-classic .g-show-seal{width:70px;height:70px}.g-mode-grid{grid-template-columns:1fr;margin:0 4px;gap:12px}.g-mode-card{min-height:175px;padding:20px}.g-mode-card strong{font-size:1.45rem}.g-mode-card p{min-height:auto;font-size:.86rem}
}
@media(max-width:430px){
  .g-top-actions .g-soft-button:last-child{display:none}.g-icon-button{width:42px;min-height:42px}.g-topbar{min-height:60px}
  .g-table{min-height:calc(100dvh - 60px)}.g-cup-launcher{width:132px;height:194px}.g-dice-tray{gap:5px}.g-die{--die:56px}.g-category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.g-category-button{min-height:50px;padding:5px}.g-category-button span{font-size:.58rem}.g-score-table td{font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){
  .g-roll-stage.rolling .g-cup-launcher,.g-roll-stage.first-roll .g-die,.g-roll-stage.reroll .g-die,.g-cup-dice-source i{animation:none!important}
}