*{box-sizing:border-box}
:root{--bg:#0b1220;--panel:#142033;--line:#29364d;--red:#ef4444;--blue:#3b82f6;--green:#22c55e;--yellow:#facc15}
body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;background:#0c1422;color:#f8fafc}
button,input,select{font:inherit}
button{border:0;border-radius:10px;padding:10px 14px;background:#6366f1;color:#fff;font-weight:800;cursor:pointer}
button:disabled{opacity:.42;cursor:not-allowed}
.secondary{background:#334155}.success{background:#16a34a}.hidden{display:none!important}

/* portada */
.landing{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top,#26334d,#0b1020 55%)}
.landing-card{width:min(900px,100%)}h1{font-size:clamp(2rem,5vw,4rem);margin:.2em 0}
.forms{display:grid;grid-template-columns:1fr 1fr;gap:18px}.panel{background:#182235;border:1px solid #31405c;border-radius:18px;padding:22px;display:grid;gap:14px}
.panel input,.panel select{width:100%;padding:12px;border-radius:10px;border:1px solid #42506b;background:#0f172a;color:#fff}.panel label{display:grid;gap:7px;color:#cbd5e1}

.topbar{height:62px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;background:#07101d;border-bottom:1px solid #263246;position:sticky;top:0;z-index:30}
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;min-height:calc(100vh - 62px)}
.game-main{padding:14px 18px 28px;min-width:0}.status{text-align:center;margin:2px 0 10px;color:#cbd5e1}
.players{display:grid;grid-template-columns:repeat(4,minmax(135px,1fr));gap:8px;margin:0 auto 12px;max-width:980px}
.player-card{border:2px solid transparent;background:#172338;border-radius:14px;padding:9px;min-height:84px;transition:.2s}
.player-card.active{box-shadow:0 0 0 3px #fff4;transform:translateY(-1px)}
.player-card.red{border-color:var(--red)}.player-card.blue{border-color:var(--blue)}.player-card.green{border-color:var(--green)}.player-card.yellow{border-color:#d9b800}
.player-name{font-weight:900;margin-bottom:6px}.pieces-list{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.mini-piece{font-size:10px;padding:5px 6px;text-align:left;background:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-piece.red{background:#c83b3b}.mini-piece.blue{background:#2969c8}.mini-piece.green{background:#199149}.mini-piece.yellow{background:#b59300;color:#fff}
.mini-piece.movable{outline:2px solid #fff;animation:pulse 1s infinite}

.board-shell{display:grid;justify-items:center;gap:12px}
.ludo-board{width:min(72vh,680px,96vw);aspect-ratio:1;display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);position:relative;background:#fff;border:8px solid #263246;border-radius:18px;box-shadow:0 18px 50px #0007;overflow:hidden}

/* Casas grandes de colores */
.home-zone{z-index:0;display:grid;place-items:center;padding:12%;border:1px solid #d4d9e2}
.home-zone.red{grid-column:1/7;grid-row:1/7;background:var(--red)}
.home-zone.blue{grid-column:10/16;grid-row:1/7;background:var(--blue)}
.home-zone.yellow{grid-column:1/7;grid-row:10/16;background:var(--yellow)}
.home-zone.green{grid-column:10/16;grid-row:10/16;background:var(--green)}
.home-inner{width:74%;height:74%;background:#fff;border-radius:14%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:13%;padding:13%;box-shadow:inset 0 0 0 2px #0001}
.home-slot{border-radius:50%;display:grid;place-items:center;position:relative;box-shadow:inset 0 0 0 2px #0002}
.home-zone.red .home-slot{background:#ffc5c5}.home-zone.blue .home-slot{background:#bfdbfe}.home-zone.green .home-slot{background:#bbf7d0}.home-zone.yellow .home-slot{background:#fef3a7}

.track-cell,.lane-cell{z-index:3;border:1px solid #b9c0ca;background:#fff;display:grid;place-items:center;position:relative;min-width:0;min-height:0}
.track-cell.safe::after{content:'★';font-size:clamp(9px,1.5vw,18px);color:#667085;line-height:1}
.track-cell.start-red{background:#ff6b6b}.track-cell.start-blue{background:#60a5fa}.track-cell.start-green{background:#4ade80}.track-cell.start-yellow{background:#fde047}
.track-cell.start-red::after,.track-cell.start-blue::after,.track-cell.start-green::after,.track-cell.start-yellow::after{content:'★';color:#fff;text-shadow:0 1px 2px #0005}
.lane-cell.red{background:#ff7b7b}.lane-cell.blue{background:#74adff}.lane-cell.green{background:#58db83}.lane-cell.yellow{background:#ffe76a}

/* Centro con los cuatro triángulos característicos */
.goal-center{grid-column:7/10;grid-row:7/10;z-index:2;position:relative;background:conic-gradient(from 45deg,var(--blue) 0 25%,var(--green) 0 50%,var(--yellow) 0 75%,var(--red) 0 100%);border:1px solid #b9c0ca;overflow:hidden}
.goal-center::after{content:'';position:absolute;inset:34%;background:#fff;border-radius:50%;box-shadow:0 0 0 2px #ffffff99}
.goal-pieces{position:absolute;inset:6%;z-index:4;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:2px;pointer-events:none}

.piece-on-board{z-index:8;width:72%;height:72%;min-width:0;min-height:0;padding:0;border-radius:50%;font-size:clamp(8px,1vw,12px);border:2px solid #fff;box-shadow:0 2px 5px #0008;position:absolute;inset:14%;display:grid;place-items:center;line-height:1;color:#fff;text-shadow:0 1px 1px #0008}
.piece-on-board.red{background:#dc2626}.piece-on-board.blue{background:#2563eb}.piece-on-board.green{background:#16a34a}.piece-on-board.yellow{background:#d9a900}
.piece-on-board.movable{animation:piecePulse .85s infinite;box-shadow:0 0 0 3px #fff,0 0 16px #fff}
.piece-on-board.stack-1{transform:translate(11%,-11%) scale(.82)}.piece-on-board.stack-2{transform:translate(-11%,11%) scale(.82)}.piece-on-board.stack-3{transform:translate(11%,11%) scale(.72)}
.goal-token{width:22%;aspect-ratio:1;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 3px #0008}
.goal-token.red{background:#dc2626}.goal-token.blue{background:#2563eb}.goal-token.green{background:#16a34a}.goal-token.yellow{background:#d9a900}

.game-controls{width:min(680px,96vw);display:flex;justify-content:center}
.dice-box{width:100%;background:#142033;border:1px solid #31405c;border-radius:16px;padding:10px 16px;display:flex;align-items:center;justify-content:center;gap:16px;box-shadow:0 8px 28px #0003}
.die{font-size:54px;line-height:1;min-width:58px;text-align:center}.turn-info{font-weight:900;margin-bottom:7px;min-height:20px}.control-buttons{display:flex;gap:7px;flex-wrap:wrap}

.chat{background:#0f172a;border-left:1px solid #263246;display:grid;grid-template-rows:auto 1fr auto auto;min-height:0;max-height:calc(100vh - 62px);position:sticky;top:62px}
.chat-head{padding:14px;display:flex;justify-content:space-between;border-bottom:1px solid #263246}.icon-btn{padding:4px 9px;background:#334155}
.messages{padding:12px;overflow:auto;display:flex;flex-direction:column;gap:8px}.chat-msg{background:#1e293b;border-left:4px solid #64748b;padding:8px 10px;border-radius:8px}.chat-msg.red{border-left-color:var(--red)}.chat-msg.blue{border-left-color:var(--blue)}.chat-msg.green{border-left-color:var(--green)}.chat-msg.yellow{border-left-color:#d8b400}.chat-msg b{display:block;font-size:12px;color:#cbd5e1}.chat-msg span{word-break:break-word}
.quick-emojis{display:flex;gap:4px;padding:8px;overflow:auto}.quick-emojis button{padding:7px;background:#1e293b}.chat form{display:flex;gap:6px;padding:10px}.chat input{min-width:0;flex:1;padding:10px;border-radius:9px;border:1px solid #334155;background:#111827;color:white}.chat.collapsed .messages,.chat.collapsed .quick-emojis,.chat.collapsed form{display:none}.chat.collapsed{grid-template-rows:auto}
@keyframes pulse{50%{filter:brightness(1.35)}}@keyframes piecePulse{50%{transform:scale(1.16);filter:brightness(1.15)}}

@media(max-width:1000px){.game-layout{grid-template-columns:1fr}.chat{position:static;max-height:42vh;border-left:0;border-top:1px solid #263246}.players{grid-template-columns:1fr 1fr}.ludo-board{width:min(78vh,680px,96vw)}}
@media(max-width:560px){.game-main{padding:8px}.topbar{font-size:13px}.players{grid-template-columns:1fr 1fr;font-size:12px}.player-card{padding:7px;min-height:72px}.pieces-list{grid-template-columns:1fr}.ludo-board{border-width:5px;border-radius:10px}.home-zone{padding:9%}.home-inner{width:80%;height:80%;gap:10%;padding:10%}.dice-box{padding:9px 10px;gap:10px}.die{font-size:44px;min-width:48px}.control-buttons button{padding:8px 10px;font-size:13px}}