*{box-sizing:border-box} [hidden]{display:none!important} body{margin:0;font-family:Arial,sans-serif;color:#173047;background:#edf3f7;line-height:1.5} main{max-width:1160px;margin:auto;padding:24px} h1,h2{color:#143a54} button{font:inherit;cursor:pointer;padding:10px 18px;border:1px solid #aac0c7;border-radius:8px;background:#f6fafb;color:#173047;transition:transform .15s,background .15s,box-shadow .15s} button:hover:not(:disabled){background:#e1eff0;transform:translateY(-2px)} button:disabled{opacity:.55;cursor:default} button:focus-visible{outline:3px solid #3673d0;outline-offset:3px} .primary{background:#176b72;color:#fff;border-color:#176b72;font-weight:bold} .primary:hover:not(:disabled){background:#10555a;box-shadow:0 5px 12px #176b7240}.menu{max-width:520px;margin:12vh auto;text-align:center;background:#fff;border:1px solid #d0e1e5;border-radius:18px;padding:48px 24px;box-shadow:0 16px 40px #1730471c;animation:appear .35s ease-out}.menu h1{font-size:clamp(2rem,6vw,3rem);margin:0}.byline{margin:0 0 32px;color:#52717d}.menu>button{min-width:150px;margin:6px}.player-select{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:25px 0} header{display:flex;align-items:center;justify-content:space-between;gap:12px} header h1{font-size:clamp(1.4rem,4vw,2rem)}.game{display:grid;grid-template-columns:minmax(0,650px) minmax(230px,1fr);gap:26px;align-items:start}.board-wrap{position:relative;aspect-ratio:1;border:6px solid #284e63;border-radius:12px;overflow:hidden;background:white;box-shadow:0 10px 25px #17304726}.board{width:100%;height:100%;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);direction:ltr}.cell{border:1px solid #c9d8de;padding:2px 4px;font-size:clamp(9px,1.4vw,15px);background:#f8fbfc}.cell:nth-child(even){background:#e6f1ef}#paths,#pieces{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .piece{position:absolute;display:grid;place-items:center;width:3.6%;height:3.6%;min-width:12px;min-height:12px;border:2px solid white;border-radius:50%;box-shadow:0 2px 5px #0008;color:#fff;font-size:clamp(8px,1vw,12px);font-weight:bold;transform:translate(-50%,-50%);transition:left .3s ease-in-out,top .3s ease-in-out}.controls{background:#fff;padding:22px;border:1px solid #d3e1e6;border-radius:12px;box-shadow:0 8px 24px #17304714}.controls h2{margin-top:0}#turn{font-size:1.15rem;font-weight:bold}.dot{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:middle;margin-left:5px}#die{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:10px;border:2px solid #284e63;font-size:1.5rem;vertical-align:middle;background:white;box-shadow:0 3px 0 #b9cbd2}.rolling{animation:tumble .18s linear infinite}#players{margin-top:22px}.player-row{display:flex;justify-content:space-between;padding:8px;border-bottom:1px solid #dce7ea}.player-row.active{background:#eaf5f4;border-radius:6px}.rules{font-size:.9rem;color:#526b77}.overlay{position:fixed;inset:0;background:#0b2639ba;display:grid;place-items:center;padding:18px;z-index:10}.dialog{width:min(100%,520px);max-height:90vh;overflow:auto;background:white;border-radius:16px;padding:28px;box-shadow:0 15px 50px #0005;animation:appear .25s ease-out}.dialog h2{margin-top:0}.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.answers button{width:100%}#feedback{font-weight:bold}@keyframes tumble{0%,100%{transform:rotate(-8deg) scale(.95)}50%{transform:rotate(8deg) scale(1.08)}}@keyframes appear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){main{padding:14px}.game{grid-template-columns:1fr}.controls{grid-row:1}.piece{border-width:1px}header h1{margin:.5em 0}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.piece.travel{transition:left 1.1s ease-in-out,top 1.1s ease-in-out}
.board.dense .cell{font-size:clamp(7px,1vw,11px);padding:0 2px}