:root{--color-bg-top:#ffe9a8;--color-bg-bottom:#a0e7e5;--color-board-light:#fff8e7;--color-board-dark:#ffe3b3;--color-board-border:#6c4ac3;--color-primary:#6c4ac3;--color-primary-dark:#4f33a3;--color-accent:#ff8a5b;--color-accent-dark:#f06543;--color-success:#34c98e;--color-player1:#ff5d5d;--color-player1-dark:#d63d3d;--color-player2:#4d8dff;--color-player2-dark:#2c6fe0;--color-text:#3a2e58;--color-text-light:#6f6391;--color-card-bg:#fff;--shadow-soft:0 8px 24px #6c4ac32e;--shadow-card:0 4px 14px #6c4ac31f;--radius-lg:20px;--radius-md:14px;--radius-sm:8px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{color:var(--color-text);background:linear-gradient(160deg, var(--color-bg-top) 0%, var(--color-bg-bottom) 100%);background-attachment:fixed;min-height:100vh;font-family:Trebuchet MS,Segoe UI,Verdana,Helvetica,Arial,sans-serif}button{cursor:pointer;font-family:inherit}button:disabled{cursor:not-allowed;opacity:.6}.app-shell{flex-direction:column;align-items:center;gap:16px;min-height:100vh;padding:16px;display:flex}.game-title{color:var(--color-primary);text-shadow:2px 3px #fff9;text-align:center;letter-spacing:1px;margin:8px 0 0;font-size:clamp(28px,5vw,44px);font-weight:800}.game-title .emoji{animation:2.4s ease-in-out infinite wiggle;display:inline-block}.game-layout{grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:20px;width:100%;max-width:1100px;display:grid}@media (max-width:880px){.game-layout{grid-template-columns:1fr}}.menu-card{background:var(--color-card-bg);border-radius:var(--radius-lg);width:100%;max-width:480px;box-shadow:var(--shadow-soft);flex-direction:column;gap:18px;margin-top:12px;padding:28px 24px;animation:.4s pop-in;display:flex}.menu-section-label{color:var(--color-text-light);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;font-size:15px;font-weight:700}.mode-options{flex-direction:column;gap:10px;display:flex}.mode-option{border-radius:var(--radius-md);text-align:left;background:#fbfaff;border:2px solid #ece6fb;align-items:center;gap:12px;padding:14px 16px;font-size:16px;font-weight:600;transition:all .15s;display:flex}.mode-option:hover{border-color:var(--color-primary);transform:translateY(-2px)}.mode-option.selected{border-color:var(--color-primary);background:#f1ecff;box-shadow:0 0 0 3px #6c4ac326}.mode-option .icon{font-size:26px}.name-inputs{flex-direction:column;gap:12px;display:flex}.name-field{flex-direction:column;gap:6px;display:flex}.name-field label{color:var(--color-text-light);align-items:center;gap:6px;font-size:13px;font-weight:700;display:flex}.name-field .token-dot{border-radius:50%;width:12px;height:12px;display:inline-block}.name-field input{border-radius:var(--radius-sm);color:var(--color-text);background:#fbfaff;border:2px solid #ece6fb;outline:none;padding:10px 12px;font-family:inherit;font-size:15px;transition:border-color .15s}.name-field input:focus{border-color:var(--color-primary)}.start-button{background:linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));color:#fff;border-radius:var(--radius-md);letter-spacing:.04em;box-shadow:0 6px 0 var(--color-accent-dark), 0 8px 16px #f065434d;border:none;padding:16px;font-size:18px;font-weight:800;transition:transform 80ms,box-shadow 80ms;transform:translateY(-2px)}.start-button:active{box-shadow:0 2px 0 var(--color-accent-dark), 0 4px 8px #f065434d;transform:translateY(2px)}.menu-subtitle{text-align:center;color:var(--color-text-light);margin:-8px 0 0;font-size:15px}.turn-indicator{background:var(--color-card-bg);border-radius:var(--radius-md);width:100%;max-width:1100px;box-shadow:var(--shadow-card);justify-content:center;align-items:center;gap:10px;padding:12px 18px;font-size:17px;font-weight:700;animation:.3s pop-in;display:flex}.turn-indicator .turn-dot{border-radius:50%;flex-shrink:0;width:16px;height:16px;animation:1.4s ease-in-out infinite pulse-dot}.board-wrapper{aspect-ratio:1;border-radius:var(--radius-lg);background:var(--color-board-border);width:100%;max-width:720px;box-shadow:var(--shadow-soft);margin:0 auto;padding:10px;position:relative}.board-grid{border-radius:var(--radius-md);background:var(--color-board-light);grid-template-rows:repeat(10,1fr);grid-template-columns:repeat(10,1fr);width:100%;height:100%;display:grid;position:relative;overflow:hidden}.board-cell{border:1px solid #6c4ac314;justify-content:flex-start;align-items:flex-start;transition:background .2s;display:flex;position:relative}.board-cell.light{background:var(--color-board-light)}.board-cell.dark{background:var(--color-board-dark)}.board-cell:hover{filter:brightness(1.04)}.board-cell.start-cell{background:repeating-linear-gradient(45deg,#34c98e2e,#34c98e2e 6px,#0000 6px 12px)}.board-cell.win-cell{background:repeating-linear-gradient(45deg,#ff8a5b47,#ff8a5b47 6px,#0000 6px 12px)}.cell-number{color:var(--color-text-light);z-index:1;-webkit-user-select:none;user-select:none;padding:3px 5px;font-size:clamp(8px,1.6vw,13px);font-weight:700}.board-cell.win-cell .cell-number{color:var(--color-accent-dark)}.board-cell.start-cell .cell-number{color:var(--color-success)}.cell-icon{z-index:1;-webkit-user-select:none;user-select:none;font-size:clamp(10px,2vw,16px);position:absolute;bottom:2px;right:3px}.board-overlay{pointer-events:none;z-index:2;width:calc(100% - 20px);height:calc(100% - 20px);position:absolute;inset:10px}.token-layer{pointer-events:none;z-index:5;width:calc(100% - 20px);height:calc(100% - 20px);position:absolute;inset:10px}.player-token{color:#fff;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;font-size:clamp(8px,1.8vw,13px);font-weight:800;transition:top .35s cubic-bezier(.34,1.56,.64,1),left .35s cubic-bezier(.34,1.56,.64,1);display:flex;position:absolute;transform:translate(-50%,-50%);box-shadow:0 3px 6px #00000040}.player-token.token-player1{background:linear-gradient(145deg, var(--color-player1), var(--color-player1-dark))}.player-token.token-player2{background:linear-gradient(145deg, var(--color-player2), var(--color-player2-dark))}.player-token.event-ladder{animation:.6s ladder-pop}.player-token.event-snake{animation:.5s snake-shake}.player-token.event-win{animation:.8s infinite winner-bounce}.side-panel{flex-direction:column;gap:14px;display:flex}.player-card{background:var(--color-card-bg);border-radius:var(--radius-md);box-shadow:var(--shadow-card);border:2px solid #0000;align-items:center;gap:12px;padding:14px 16px;transition:all .25s;display:flex}.player-card.active{border-color:var(--color-accent);box-shadow:0 0 0 4px #ff8a5b26, var(--shadow-card);transform:translateY(-2px)}.player-card.winner{border-color:var(--color-success);background:linear-gradient(135deg,#f0fff8,#fff)}.player-card-token{border:2px solid #fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:16px;display:flex;box-shadow:0 2px 5px #0003}.player-card-token.token-player1{background:linear-gradient(145deg, var(--color-player1), var(--color-player1-dark))}.player-card-token.token-player2{background:linear-gradient(145deg, var(--color-player2), var(--color-player2-dark))}.player-card-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.player-card-name{white-space:nowrap;text-overflow:ellipsis;font-size:15px;font-weight:700;overflow:hidden}.player-card-position{color:var(--color-text-light);font-size:13px}.player-card-badge{color:var(--color-success);text-transform:uppercase;letter-spacing:.04em;background:#34c98e1f;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:800}.dice-panel{background:var(--color-card-bg);border-radius:var(--radius-md);box-shadow:var(--shadow-card);flex-direction:column;align-items:center;gap:14px;padding:20px;display:flex}.roll-button{background:linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));color:#fff;border-radius:var(--radius-md);letter-spacing:.03em;width:100%;box-shadow:0 5px 0 var(--color-primary-dark);border:none;padding:14px;font-size:17px;font-weight:800;transition:transform 80ms,box-shadow 80ms}.roll-button:active:not(:disabled){box-shadow:0 2px 0 var(--color-primary-dark);transform:translateY(3px)}.roll-button:disabled{background:#c9c2e6;box-shadow:0 5px #b3aad6}.activity-feed{background:var(--color-card-bg);border-radius:var(--radius-md);box-shadow:var(--shadow-card);flex-direction:column;gap:8px;padding:14px 16px;display:flex}.activity-title{color:var(--color-text-light);text-transform:uppercase;letter-spacing:.06em;font-size:13px;font-weight:800}.activity-message{border-radius:var(--radius-sm);background:#f7f5ff;padding:10px 12px;font-size:14px;line-height:1.4;animation:.3s slide-in}.activity-message.latest{border-left:4px solid var(--color-accent);font-weight:600}.activity-history{flex-direction:column;gap:6px;max-height:160px;display:flex;overflow-y:auto}.activity-history .activity-message{opacity:.85;background:#fbfaff;border-left:4px solid #e4ddfb;font-size:12.5px}.control-buttons{gap:10px;display:flex}.control-button{border-radius:var(--radius-sm);color:var(--color-text);background:#fff;border:2px solid #ece6fb;flex:1;padding:10px;font-size:13px;font-weight:700;transition:all .15s}.control-button:hover{border-color:var(--color-primary);background:#f7f5ff}.sound-toggle{background:var(--color-card-bg);width:46px;height:46px;box-shadow:var(--shadow-card);z-index:50;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:20px;transition:transform .15s;display:flex;position:fixed;top:16px;right:16px}.sound-toggle:hover{transform:scale(1.08)}.dice{width:64px;height:64px;box-shadow:var(--shadow-card), inset 0 0 0 2px #ece6fb;background:#fff;border-radius:14px;grid-template-rows:1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr;gap:2px;padding:8px;display:grid}.dice.rolling{animation:.7s dice-roll}.die-pip{background:var(--color-primary);border-radius:50%;place-self:center;width:10px;height:10px}.die-pip.empty{background:0 0}.modal-overlay{z-index:100;background:#3a2e588c;justify-content:center;align-items:center;padding:16px;animation:.25s fade-in;display:flex;position:fixed;inset:0}.winner-modal{background:var(--color-card-bg);border-radius:var(--radius-lg);text-align:center;width:100%;max-width:380px;padding:32px 28px;animation:.5s cubic-bezier(.34,1.56,.64,1) winner-pop;position:relative;overflow:hidden;box-shadow:0 20px 60px #0000004d}.winner-modal h2{color:var(--color-primary);margin:10px 0 4px;font-size:26px}.winner-modal .trophy{font-size:56px;animation:1s infinite winner-bounce;display:block}.winner-modal p{color:var(--color-text-light);margin:0 0 20px;font-size:15px}.winner-modal-buttons{flex-direction:column;gap:10px;display:flex}.confetti-piece{z-index:-1;border-radius:2px;animation:linear forwards confetti-fall;position:absolute;top:-10px}@keyframes pop-in{0%{opacity:0;transform:translateY(12px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes wiggle{0%,to{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.3)}}@keyframes dice-roll{0%{transform:rotate(0)scale(1)}25%{transform:rotate(120deg)scale(1.1)}50%{transform:rotate(240deg)scale(.95)}75%{transform:rotate(330deg)scale(1.08)}to{transform:rotate(360deg)scale(1)}}@keyframes ladder-pop{0%{transform:translate(-50%,-50%)scale(1)}30%{filter:brightness(1.3);transform:translate(-50%,-50%)scale(1.4)}60%{transform:translate(-50%,-50%)scale(.9)}to{transform:translate(-50%,-50%)scale(1)}}@keyframes snake-shake{0%,to{transform:translate(-50%,-50%)rotate(0)}20%{transform:translate(-60%,-50%)rotate(-12deg)}40%{transform:translate(-40%,-50%)rotate(10deg)}60%{transform:translate(-58%,-50%)rotate(-8deg)}80%{transform:translate(-42%,-50%)rotate(6deg)}}@keyframes winner-bounce{0%,to{transform:translate(-50%,-50%)translateY(0)}50%{transform:translate(-50%,-50%)translateY(-10px)}}@keyframes winner-pop{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@keyframes confetti-fall{to{opacity:.3;transform:translateY(100vh)rotate(720deg)}}@media (max-width:480px){.menu-card{padding:20px 16px}.dice{width:54px;height:54px}.player-card{padding:10px 12px}.player-card-token{width:30px;height:30px}}