/* 2PISO V7 · Edición Parqués Clásico. Estilo cálido y móvil primero. */
:root{--navy:#081e1a;--bg:#081b18;--card:#19312c;--ink:#fff8e7;--muted:#c6d4c8;--border:#f3e6c12b;--gold:#f3c96b;--purple:#e0aa80;--lime:#bce8a3}
html{background:#081b18}
body{background:radial-gradient(ellipse 85% 55% at 78% 12%,#194c3e 0%,transparent 62%),#091c18;color:#fff8e7}
.sitebar{background:#0b231ceF;border-bottom:1px solid #e7c18035;min-height:78px}
.brand-badge{background:#f1cc77;color:#113326;border-radius:14px;box-shadow:0 10px 20px #0005;font-size:38px}
.brand-name small{color:#dbc998}
.navlinks{color:#e4efe2}.navlinks a:hover{color:#ffd783}
.btn-gold{background:linear-gradient(120deg,#ffe4a4,#e9bc64);color:#18342b;box-shadow:0 10px 28px #e8b7642a}
.btn-outline{border:1px solid #ecdba56d;color:#fff5d8;background:#ffffff0c}.btn:hover:not(:disabled){box-shadow:0 14px 34px #0005}
.eyebrow,.section-no,.small-overline{color:#e7c47a}
.hero{position:relative;min-height:600px;grid-template-columns:minmax(345px,.91fr) minmax(460px,1.09fr);padding-top:45px;padding-bottom:25px;isolation:isolate}
.hero:before{content:'';position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 75% 45%,#37836636,transparent 48%)}
.hero-copy h1{font-size:clamp(74px,8.6vw,140px);line-height:.91;letter-spacing:-2.8px;margin:24px 0}
.hero-copy h1 em,.section-heading h2 em,.premium-band h2 em,.cta-final h2 em,.ladder h2 em{color:#f6ca77}
.hero-copy p{color:#e0ebdf;font-size:15px;max-width:520px;line-height:1.65}
.hero-buttons{margin:27px 0 36px}
.trustline strong{color:#ffe2a1}
.hero-art{min-height:535px}
.hero-glow{background:radial-gradient(ellipse,#d7a44724,transparent 70%)}
.art-board{width:min(100%,575px);transform:rotate(-4deg);animation:none;filter:drop-shadow(0 20px 35px #0008)}
.hero-art:hover .art-board{transform:rotate(-1deg) scale(1.025)}
.hero-float{background:#0c241edb;border:1px solid #e7cc906b;box-shadow:0 20px 38px #0006}
.hero-float span:last-child,.art-caption{color:#d6d0b6}
.stripe{background:linear-gradient(100deg,#e7c57b,#d4e7c7,#ddac6e);color:#18342b;min-height:46px;font-size:20px}
.section{padding-top:70px;padding-bottom:70px}
.section-heading{margin-bottom:25px}
.section-heading p,.premium-band p,.ladder p{color:#c8dace}
.live-mini{border-color:#e0d09a4d;background:#ffffff10}
.mode-card{min-height:335px;border-radius:22px;box-shadow:inset 0 1px 0 #ffffff33;border:1px solid #ffffff25;transition:transform .25s ease,filter .25s ease}
.mode-card:hover{transform:translateY(-6px);filter:saturate(1.1)}
.mode-card.friends{background:linear-gradient(150deg,#277961,#123c34 75%,#0a2c24)}
.mode-card.join{background:linear-gradient(150deg,#9a623b,#633922 75%,#35201b)}
.mode-card.solo{background:linear-gradient(150deg,#455e9b,#263654 75%,#18263d)}
.mode-card:before{background:linear-gradient(to top,#08140ee0,transparent 87%)}
.mode-card h3{font-size:43px}.mode-card p{color:#e9e8d8}
.mode-illustration{transform:translateX(-50%) rotate(-9deg) scale(.82);top:-7px}.join-symbol{transform:translateX(-50%) rotate(-7deg) scale(.82);top:19px}.bot-illustration{transform:translateX(-50%) scale(.78);top:4px}
.premium-band{background:linear-gradient(128deg,#1d543d,#1d322a 52%,#664a2b);border:1px solid #f1d29c55;border-radius:24px;margin:10px 24px}
.premium-band .section-no{color:#ffe6a9}
.cta-final{background:radial-gradient(ellipse at 50% 50%,#376f51a1,transparent 65%)}
footer{border-top:1px solid #edce8742}
/* Mesa clásica: tablero de marfil y madera, nunca oscuro circular. */
.game-shell{background:radial-gradient(ellipse at 40% 40%,#1e5240 0%,#0f3329 54%,#081a16 100%)}
.game-top{background:#102c23;border-bottom:1px solid #efd18c52}
.game-layout{max-width:1450px;grid-template-columns:minmax(0,1.45fr) minmax(290px,.72fr);gap:16px}
.board-column{min-width:0}
.board-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 8px 12px;font-size:11px;font-weight:900;letter-spacing:1.3px;color:#ecd9ae}
.board-toolbar button{color:#fff7e2;background:#123e31;border:1px solid #f4d08e78;border-radius:11px;padding:9px 12px;font-size:12px;font-weight:800;min-height:38px}
.board-viewport{width:100%;border-radius:20px;overflow:hidden;position:relative}
.board-stage{width:100%;background:linear-gradient(140deg,#3a291b,#6b4929 38%,#34251b);border:4px solid #d9ad5f;border-radius:20px;box-shadow:0 16px 36px #0009,inset 0 0 12px #e8cb806e;overflow:hidden;position:relative}
.board-stage canvas{display:block;width:100%;height:auto;touch-action:manipulation}
.board-watermark{display:none}
.dice-panel{margin-top:12px;background:linear-gradient(135deg,#183e31,#10291f);border-color:#efd79c77;border-radius:18px;box-shadow:0 10px 24px #0004}
.die{background:linear-gradient(145deg,#ffffff,#efdfb8);border-color:#e0b666;color:#20362c}
.dice-left small{color:#d5d8c8}.table-theme{color:#f7d797}.dice-fairness{color:#b7d3be}
.move-choices{display:flex;flex-wrap:wrap;gap:7px}
.move-choice{border-radius:12px;min-height:45px;background:#fff8df;color:#16362b;border:2px solid #d9b263;font-weight:900;padding:10px 14px;box-shadow:0 3px 0 #987540}
.move-choice:disabled{opacity:.35}.move-legend{width:100%;color:#f6e0ac;font-size:12px;font-weight:800}
.panel{border:1px solid #edd49d44;background:#12352a;border-radius:16px}.panel-title{color:#ffdf9e}
.game-sidebar{max-height:calc(100vh - 105px)}.player-seat{background:#ffffff09}.player-seat.turning{background:#f6cf7230;border:1px solid #f9da9e}
.chat-panel{background:#143a2c}.chat-form input{background:#08231b}.chat-form button{background:#f2c771}
.network-indicator{background:#723932;color:#fff;padding:8px 10px;border-radius:8px;font-size:11px;font-weight:700}
.ready-match{margin-top:9px;width:100%;background:#e4f4d9;color:#1f5a3a;border:2px solid #60b888}.ready-match.is-ready{background:#19543d;color:#ddf7df}
/* Accesibilidad: objetivos y pistas visibles para manos pequeñas. */
.board-stage:focus-within{outline:3px solid #ffd584}
@media(max-width:1000px){.hero{grid-template-columns:minmax(300px,.9fr) minmax(360px,1.1fr)}.hero-art{min-height:440px}.game-layout{grid-template-columns:minmax(0,1.3fr) minmax(270px,.75fr)}}
@media(max-width:820px){
 .sitebar{min-height:68px}.hero{display:flex;flex-direction:column;padding-top:35px}.hero-copy h1{font-size:clamp(65px,12vw,105px)}.hero-art{min-height:0;padding:5px 10px 34px}.art-board{width:min(100%,470px);margin:auto;transform:rotate(-3deg)}.art-caption{bottom:9px}.hero-buttons{margin-bottom:18px}
 .game-layout{display:flex;flex-direction:column;padding:4px 7px 92px}.board-viewport{width:100%}.board-stage{width:100%}.board-toolbar{padding:7px 5px}.game-sidebar{max-height:none}.board-viewport.zoomed{max-height:65dvh;overflow:auto;touch-action:pan-x pan-y;border:3px solid #f3d181}.board-viewport.zoomed .board-stage{width:710px;max-width:none;aspect-ratio:1;min-width:710px}.board-viewport.zoomed canvas{width:100%;height:auto}
 .dice-panel{padding:12px}.move-choice{flex:1 1 42%;font-size:13px;min-height:50px}.game-mobile-dock{background:#0d3227;border-top:1px solid #f4d18195}.game-mobile-dock button{color:#f7e5bf}
 .game-sidebar{display:flex}.mode-card{min-height:330px}
}
@media(max-width:550px){
 .sitebar{padding:10px 13px}.hero{padding:34px 16px 0}.hero-copy h1{font-size:clamp(62px,15vw,84px);line-height:.93;letter-spacing:-1.7px}.hero-copy p{font-size:14px;line-height:1.6}.hero-art{padding:0 0 32px}.art-board{width:100%;transform:rotate(-2deg)!important}.hero-buttons .btn{font-size:11px}.trustline{margin-bottom:5px}.section{padding:46px 14px}.mode-grid{grid-template-columns:1fr}.mode-card,.mode-card:last-child{min-height:330px}.premium-band{margin:0 8px}.game-shell{padding-bottom:90px}.game-top{padding:7px}.game-layout{padding:4px 5px 100px;gap:5px}.board-toolbar{font-size:9px;letter-spacing:.35px;padding:4px 4px 8px}.board-toolbar button{font-size:10px;min-height:34px;padding:7px 10px}.board-stage{border-width:3px;border-radius:12px}.board-viewport{border-radius:12px}.dice-panel{border-radius:14px}.dice-controls .btn{font-size:11px}.game-title{padding-bottom:6px}.game-mobile-dock{padding-bottom:calc(9px + env(safe-area-inset-bottom))}.seat-list{grid-template-columns:1fr 1fr}.ready-match{min-height:48px}
}
@media(prefers-reduced-motion:reduce){.hero-art:hover .art-board{transform:none}}