/* 2PISO V12: presentación de lanzamiento, clasificación clara y móvil prioritario */
:root{--v12-cream:#fff4d5;--v12-gold:#ffcd72;--v12-deep:#061f1a;--v12-border:#f0ca7945}
body{background:radial-gradient(ellipse at 82% 6%,#17553e 0,#08271e 43%,#061b17 100%);color:var(--v12-cream)}
.sitebar{background:#06271eeb;border-bottom:1px solid #efd08a30;backdrop-filter:blur(16px);box-shadow:0 8px 38px #0003}
.sitebar .btn-gold,.v8-hero .btn-gold{box-shadow:0 5px 0 #986632,0 14px 28px #f5bd3e38;background:linear-gradient(135deg,#ffe8a1,#f1bb60);color:#102e22}
.sitebar .btn-gold:hover,.v8-hero .btn-gold:hover{box-shadow:0 3px 0 #986632,0 20px 32px #ffce6666;transform:translateY(-2px)}
.v8-main{max-width:1510px}
.v8-hero{min-height:410px;padding:24px clamp(18px,4.7vw,78px) 5px;gap:22px;grid-template-columns:minmax(0,.97fr) minmax(0,1.03fr);background:radial-gradient(ellipse at 76% 40%,#13563b 0,transparent 76%)}
.v8-hero:after{content:"";position:absolute;right:15%;top:9%;height:210px;width:210px;border-radius:50%;border:1px solid #edcd6b26;pointer-events:none}
.v8-hero h1{font-size:clamp(58px,6.1vw,100px);line-height:.97;letter-spacing:-.052em;font-weight:900;margin:0 0 20px;text-wrap:balance;text-shadow:0 10px 35px #0005}
.v8-hero h1 em{display:block;background:linear-gradient(110deg,#fff0c4,#f7c96f 65%,#e2a447);color:transparent;-webkit-background-clip:text;background-clip:text}
.v8-lead{max-width:570px;font-size:clamp(14px,1.22vw,17px);line-height:1.6;margin-bottom:24px}
.v8-hero .v8-hero-actions .btn{border-radius:15px;min-height:52px;font-size:12px;letter-spacing:.02em}
.v8-hero-caption{margin-top:17px;color:#d3e4d4;font-size:11px}
.v8-hero-visual{height:390px}.v8-hero-image{max-height:390px;filter:drop-shadow(0 30px 34px #0008)}.v8-hero-label{top:8%;left:2%;background:#092a20;border-radius:14px}
.v8-themes{margin-top:1px;border-color:#ffe1a24f;background:linear-gradient(110deg,#0f4635,#0e332a);box-shadow:0 18px 35px #0005;padding:12px 15px;border-radius:18px}
.v8-themes-title{flex-basis:195px}.v8-themes-title h2{font-size:14px}.v8-themes-title p{font-size:10px}.v8-theme{height:74px}.v8-theme span{font-size:11px}
.v8-perks{display:none}
.v8-lobby{margin-top:15px;gap:13px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.v8-lobby-intro,.v8-public{padding:18px 22px;border-radius:18px;box-shadow:0 12px 30px #0003}
.v8-lobby-intro h2{font-size:clamp(28px,3vw,44px)}.v8-lobby-intro p{margin:0}.v8-lobby-actions{margin-top:14px}
.v8-bottom{padding:13px 18px;margin-top:12px;gap:10px}.v8-bottom h2{font-size:21px}.v8-bottom-info p{display:none}.v8-footer{padding-top:14px;padding-bottom:14px}
/* Juego: zonas visualmente distinguibles, con nombre, asiento y clasificación provisional separados */
.game-shell{background:radial-gradient(ellipse at 24% 21%,#1a523e 0,#0b2b23 48%,#081b18 100%)}
.game-top{background:#09291ff2;box-shadow:0 5px 24px #0003;border-bottom:1px solid #efd0943a}
.game-layout{max-width:1670px;grid-template-columns:minmax(0,1.43fr) minmax(310px,.57fr);gap:17px;padding:13px 1.5vw}
.board-stage{border:3px solid #e9bf76;border-radius:24px;background:#e6d4a3;box-shadow:0 14px 40px #0008,inset 0 0 20px #0003}
.board-stage canvas{touch-action:manipulation}
.board-toolbar{color:#fce4ab}
.dice-panel{background:#0d382a;border:1px solid #f2cb8a82;box-shadow:0 10px 25px #0004}
.dice-panel .dice-fairness{color:#d5e3cf}
.game-sidebar .panel{background:linear-gradient(150deg,#123d2d,#0a3027);border:1px solid #edce8a56;box-shadow:0 5px 25px #0003}
.game-sidebar>.panel:first-child{border-color:#f1d2989c}
.panel-title{color:#ffdf94;font-size:11px}.seat-list{gap:8px}
.v12-score-caption{grid-column:1/-1;font-weight:900;font-size:10px;letter-spacing:.14em;color:#d8c99d;padding:5px 2px 3px}
.player-seat.v12-player-seat{position:relative;border:1px solid color-mix(in srgb,var(--seat-color) 35%,transparent);background:#ffffff07;padding:9px;gap:10px;min-height:57px;transition:transform .15s,background .15s,border-color .15s}
.player-seat.v12-player-seat.turning{background:#f6d38920;border:2px solid #ffe3a8;box-shadow:0 0 0 2px #ffe0a322}
.player-seat.v12-player-seat.v12-me{background:#c2e7c115}
.v12-position{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;background:#f5d48b;color:#183529;font-size:13px;font-weight:1000;border-radius:10px;box-shadow:0 3px 0 #b27d35}
.v12-player-seat:nth-child(2) .v12-position{background:#ffe2a0}
.v12-player-seat:nth-child(3) .v12-position{background:#dfe9ed}
.v12-player-seat:nth-child(4) .v12-position{background:#d7ac7b}
.v12-player-seat .seat-face{border-radius:50%;width:40px;height:40px;background:#092820;border-width:3px}
.v12-player-seat .seat-meta b{font-size:13px;color:#fef8e9}.v12-player-seat .seat-meta small{font-size:10px;color:#c8decf;line-height:1.4;white-space:normal}
.v12-rank-side{display:flex;flex-direction:column;align-items:end;gap:7px;min-width:85px}.v12-rank-side strong{font-size:9px;color:#f2d08b;white-space:nowrap}
.v12-progress{display:block;height:5px;border-radius:20px;background:linear-gradient(to right,#ffe59e 0 var(--percent),#315848 var(--percent) 100%);width:95px}
.v12-empty{opacity:.55}
.game-events .events-list{max-height:102px}.chat-messages{min-height:80px}.game-sidebar .chat-panel{background:#0b2d24}
.btn,.v8-theme,.player-seat,.die,.move-choice{transition:filter .18s,transform .18s,border-color .18s,box-shadow .18s}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffde8d;outline-offset:3px}
@media(hover:hover){.v8-theme:hover,.open-room-item:hover{transform:translateY(-3px)}.btn:hover:not(:disabled){filter:brightness(1.1)}}
@media(max-width:1000px){.v8-hero{grid-template-columns:1fr 1fr;min-height:350px}.v8-hero-visual{height:330px}.v8-hero-image{max-height:330px}.v8-hero h1{font-size:clamp(47px,5.8vw,69px)}.game-layout{grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:10px}}
@media(max-width:820px){.v8-hero{display:flex;min-height:0;gap:0;padding:23px 15px 0}.v8-hero-visual{height:auto;min-height:0;max-width:580px}.v8-hero-image{max-height:340px}.v8-hero h1{font-size:clamp(43px,8.6vw,70px)}.v8-themes{margin-top:2px}.v8-lobby{grid-template-columns:1fr}.game-layout{display:flex;flex-direction:column;padding:7px}.game-sidebar{display:flex;max-height:none}.board-stage{width:100%}}
@media(max-width:570px){.sitebar{padding-left:11px;padding-right:11px}.sitebar .brand-name{font-size:24px}.sitebar .brand-name small{font-size:6px}.v8-hero{padding:19px 13px 0}.v8-hero h1{font-size:clamp(46px,12vw,65px);margin-bottom:13px}.v8-hero .v8-hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.v8-hero .v8-hero-actions .btn:first-child{grid-column:1/-1}.v8-hero .v8-hero-actions .btn{min-height:48px}.v8-lead{font-size:13px;margin-bottom:16px}.v8-hero-caption{font-size:10px;line-height:1.4}.v8-hero-visual{min-height:0;margin-top:0}.v8-hero-image{max-height:240px;object-fit:contain}.v8-hero-label{top:8px;font-size:9px;left:0}.v8-themes{margin-left:9px;margin-right:9px;padding:10px}.v8-themes-title{display:none}.v8-theme{height:83px}.v8-lobby{margin-left:9px;margin-right:9px;gap:9px}.v8-lobby-intro,.v8-public{padding:14px}.v8-lobby-intro h2{font-size:29px}.v8-bottom{margin-left:9px;margin-right:9px;flex-direction:column;gap:12px}.v8-bottom-actions{min-width:0;width:100%}.v8-footer{padding:17px 14px}.board-stage{border-radius:12px;border-width:2px}.game-layout{padding:4px}.dice-panel{padding:9px}.v12-score-caption{grid-column:1/-1;font-size:9px}.seat-list{grid-template-columns:1fr 1fr;gap:6px}.player-seat.v12-player-seat{padding:7px 6px;gap:5px;min-height:70px;flex-wrap:wrap;align-items:center}.v12-position{flex-basis:22px;width:22px;height:25px;border-radius:7px;font-size:10px}.v12-player-seat .seat-face{height:30px;width:30px;font-size:15px}.v12-player-seat .seat-meta{flex:1 1 calc(100% - 63px)}.v12-player-seat .seat-meta b{font-size:10px}.v12-player-seat .seat-meta small{font-size:9px}.v12-rank-side{flex:1 1 100%;align-items:stretch;min-width:0;gap:3px}.v12-rank-side strong{font-size:9px}.v12-progress{width:100%}.game-sidebar>.panel:first-child{padding:10px}}
@media(max-width:360px){.seat-list{grid-template-columns:1fr}.v12-rank-side{flex-basis:65px}.v8-hero h1{font-size:42px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}