/* Warm illustrated family-game styling. */
body{background:radial-gradient(ellipse at 50% 0,#b6d56e 0,#78a54e 45%,#3e733e 100%);color:#54391e;min-height:100vh}body:before{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 25%,#eaff9d22 0,transparent 28%),radial-gradient(circle at 90% 70%,#173c2020 0,transparent 25%);z-index:-1}header{padding:17px 28px 4px;max-width:1330px}.brand{font-family:Nunito,system-ui,sans-serif;font-weight:900;font-size:27px;color:#fff4b9;text-shadow:0 3px #355d25,2px 0 #355d25,-2px 0 #355d25}.brand span{color:#ffdb78}header button{background:linear-gradient(#d8a96c,#ba8149);border:2px solid #81582f;box-shadow:inset 0 2px 0 #f7d899,0 3px 0 #5f452b;border-radius:12px;padding:8px 15px;font-size:13px;font-weight:900;color:#4c341d;text-shadow:0 1px #edd7ae}.intro{margin:8px 0 19px}.eyebrow{color:#eff7c9;font-size:10px;letter-spacing:3px;text-shadow:0 1px #477736}.intro h1{font-family:Nunito,system-ui,sans-serif;color:#fff0ac;font-weight:900;font-size:clamp(29px,4vw,48px);text-shadow:0 4px #4e702b,2px 0 #4e702b,-2px 0 #4e702b,0 -2px #4e702b;letter-spacing:-1px;margin:5px}.intro p{color:#f7ffe0;text-shadow:0 1px #537738;font-size:13px}main{max-width:1330px;grid-template-columns:minmax(0,1fr) 285px;gap:21px;padding:0 25px 24px;align-items:start}.board{border:11px solid #a7733e;border-top-color:#dfb16b;border-left-color:#c69958;border-radius:29px;box-shadow:0 7px 0 #654425,0 13px 0 #476b30,0 22px 40px #244f3866;background:#a2c55d;outline:2px solid #71512c;isolation:isolate}.board>svg{border-radius:15px}.panel{background:repeating-linear-gradient(0deg,#ffffff00 0,#ffffff00 13px,#b5763320 14px,#ffffff00 15px),linear-gradient(110deg,#f9ddb2,#edc991 65%,#f8dfb1);border:5px solid #a16e38;border-top-color:#dfad67;border-left-color:#c79657;box-shadow:0 5px 0 #624225,inset 0 0 0 1px #ffe7b8,0 12px 20px #244d2826;border-radius:21px;padding:16px}.label{color:#8c653a;font-size:10px;letter-spacing:1.7px}.panel h2{font-family:Nunito,system-ui,sans-serif;font-weight:900;color:#674323;font-size:24px;text-shadow:0 1px #fff4db;margin:5px 0 8px}.side{gap:19px}.player{background:#fcebd16b;padding:4px 9px 4px 2px;border:2px solid transparent;margin:5px 0;gap:8px;min-height:62px;transition:background .2s}.player.active{background:linear-gradient(#f7ffd9,#d7ec96);border-color:#82a743;box-shadow:inset 0 2px #fff5cf,0 3px 0 #8f994333}.avatar{width:63px;height:63px;background:transparent;box-shadow:none;flex-shrink:0}.avatar svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 2px 1px #64452150)}.player b{font-weight:900;font-size:15px;color:#5e4127}.player small{font-size:10px;color:#8d795c}.pos{color:#5b6a32;min-width:27px;text-align:center;background:#fff4da;border:1px solid #d9bd8e;border-radius:9px;font-size:16px;padding:3px}.turn{background:repeating-linear-gradient(0deg,#ffffff00 0,#ffffff00 18px,#8c521320 19px,#ffffff00 20px),linear-gradient(110deg,#f8ce8a,#edb663);color:#664423}.turn .label{color:#795328}.dice{margin:19px 0 20px;gap:16px;perspective:400px}.die{width:64px;height:64px;background:linear-gradient(140deg,#fffefa 0,#fff7d8 70%,#e9d7b1 100%);border:2px solid #fff1c5;border-bottom:3px solid #b7a16f;border-radius:15px;box-shadow:2px 5px 0 #b08e55,3px 8px 9px #674c3d50;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:11px;gap:4px;transform:rotate(-7deg)}.die:nth-child(2){transform:rotate(9deg)}.pip{border-radius:50%;background:radial-gradient(circle at 70% 75%,#41662e,#29431f);box-shadow:inset 1px 2px 2px #132b1a66,0 1px 0 #fff}.roll{background:linear-gradient(#c0ee6c 0,#9bd449 45%,#74b632 100%);border:3px solid #f2ffba;border-bottom-color:#62952f;box-shadow:0 5px 0 #4c7c27,0 8px 11px #66521b55,inset 0 3px 0 #dfffac;border-radius:20px;color:#31581b;font-size:24px;font-weight:900;letter-spacing:.5px;text-shadow:0 1px #d9f798;padding:12px;transition:filter .15s,transform .15s}.roll:hover:enabled{filter:brightness(1.08);transform:translateY(-1px)}.roll:active:enabled{transform:translateY(3px);box-shadow:0 2px 0 #4c7c27}.roll:disabled{opacity:.7;font-size:19px}.message{color:#78552e;font-weight:800;font-size:12px;background:#fff1c08c;border-radius:12px;padding:10px;min-height:58px;line-height:1.5;margin:17px 0 0}.legend{font-size:11px;color:#7e603c;gap:8px}.legend strong{color:#674423}.help-panel h2{font-size:20px}.bottom{color:#d7e9bd;font-size:12px;letter-spacing:.4px;padding:0 0 22px;text-shadow:0 1px #3f703b}.pawn{transition:transform .19s ease-out;pointer-events:none}.pawn.current{filter:drop-shadow(0 0 3px #ffefab)}.tile:hover{filter:brightness(1.1)}dialog{background:linear-gradient(130deg,#fff0cb,#f4d49e);border:7px solid #ae7b43;color:#654527;box-shadow:0 8px 0 #78552e,0 20px 100px #0004}dialog h2{font-family:Nunito,system-ui;font-weight:900}dialog button{background:linear-gradient(#a7d967,#6eac39);border:2px solid #e2f7bc;box-shadow:0 3px #4c7729;font-weight:900;color:#274919}dialog::backdrop{background:#203f2799;backdrop-filter:blur(3px)}select{border-color:#c5a06a}.board.zoomed>svg{min-width:950px}
@media(max-width:850px){header{padding:13px 13px 5px;gap:6px}.brand{font-size:20px}header>div:last-child{display:flex;gap:6px}header button{padding:7px 9px;font-size:11px;border-radius:9px}.intro{margin:8px 0 14px}.intro .eyebrow{font-size:8px;letter-spacing:2px}.intro h1{font-size:34px;line-height:1.1;margin:7px}.intro p{font-size:11px;padding:0 15px}main{padding:0 11px 22px;gap:19px;grid-template-columns:1fr}.board{border-width:7px;border-radius:20px}.board>svg{border-radius:11px}.side{display:grid;grid-template-columns:1fr;gap:17px}.side>.panel:first-child{padding:5px 7px;border-radius:16px}.side>.panel:first-child>.label,.side>.panel:first-child>h2{display:none}#players{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.player{padding:2px;display:grid;grid-template-columns:1fr;gap:0;text-align:center;margin:0;position:relative;min-height:0;border-radius:12px}.avatar{width:65px;height:65px;margin:auto}.player-copy b{font-size:12px}.player-copy small{display:none}.pos{position:absolute;top:4px;right:3px;font-size:11px;min-width:20px;border-radius:6px;padding:1px;box-shadow:0 2px 2px #0001}.turn{grid-column:auto;grid-row:auto;padding:12px;display:grid;grid-template-columns:125px 1fr;gap:0 14px;align-items:center;border-radius:17px}.turn .label{grid-column:1/-1;letter-spacing:1px;margin-bottom:5px;font-size:10px}.dice{grid-row:2;grid-column:1;margin:7px 0 10px;gap:12px}.die{height:48px;width:48px;padding:8px;border-radius:11px;gap:3px}.roll{grid-row:2;grid-column:2;font-size:22px;padding:10px;border-radius:15px}.roll:disabled{font-size:15px}.message{grid-row:3;grid-column:1/-1;min-height:0;margin-top:7px;padding:8px;font-size:11px}.help-panel{display:none}.bottom{font-size:10px}.board.zoomed>svg{min-width:850px}}
@media(max-width:370px){header .brand{font-size:16px}header button{padding:7px;font-size:10px}.intro h1{font-size:29px}.avatar{width:57px;height:57px}}
@media(prefers-reduced-motion:reduce){.pawn{transition:none}}
.die{place-items:stretch}.pip,.empty{display:block;width:100%;height:100%;min-width:0;min-height:0}.inspect-art{display:block;width:210px;height:210px;margin:0 auto 8px;filter:drop-shadow(0 8px 7px #78552633)}.event-caption{text-align:center}#eventDialog h2{text-align:center;margin-bottom:4px}#eventDialog>button{display:block;margin:18px auto 0}.tile[role=button]{cursor:pointer}.tile:focus-visible{outline:none;filter:brightness(1.18) drop-shadow(0 0 5px #fff)}
.tile>*{pointer-events:none}.tile>.tile-hit{pointer-events:all}.tile-hit{cursor:pointer}
/* Brighter toy-board finish and a tall phone layout. */
body{background:radial-gradient(ellipse at 50% 0,#dae989 0,#98c359 48%,#527f36 100%)}header{flex-wrap:wrap}header>div:last-child{display:flex;gap:7px;flex-wrap:wrap}.board{border-top-color:#f5c875;border-left-color:#d9a657;border-bottom-color:#94622f;box-shadow:0 7px 0 #654425,0 13px 0 #476b30,0 22px 40px #244f3866,inset 0 0 20px #fff5a8}.board.splash:after{content:'💦';position:absolute;left:50%;top:50%;font-size:100px;pointer-events:none;animation:plons 1.3s both}.board.winner{box-shadow:0 0 35px 12px #ffe66d,0 7px 0 #654425}.board.winner:after{content:'🎉';position:absolute;left:43%;top:45%;font-size:90px;pointer-events:none;animation:celebrate .7s ease-in-out infinite alternate}@keyframes plons{0%{transform:translate(-50%,-40%) scale(.3);opacity:0}30%{transform:translate(-50%,-60%) scale(1.4);opacity:1}100%{transform:translate(-50%,-100%) scale(1);opacity:0}}@keyframes celebrate{to{transform:translateY(-18px) rotate(12deg)}}#sound[aria-pressed=false]{filter:saturate(.5)}button:focus-visible{outline:3px solid #fff5ad;outline-offset:4px}
@media(max-width:600px){header{justify-content:center;padding:10px 8px 7px}.brand{font-size:25px}header>div:last-child{justify-content:center;gap:6px}header button{padding:8px 10px;font-size:11px;min-height:37px}.intro{margin:7px 0 12px}.intro h1{font-size:29px}.intro .eyebrow{display:none}.intro p{margin:4px 0;font-size:11px}main{padding:0 8px 18px;gap:14px}.board{border-width:6px;border-radius:18px}.board>svg{border-radius:10px}.side{gap:12px}.avatar{width:67px;height:67px}.turn{position:sticky;bottom:8px;z-index:2;grid-template-columns:120px 1fr}.board.zoomed>svg{min-width:720px}.tile text{font-size:21px}.tile[data-tile="0"] text{font-size:10px}.bottom{padding-bottom:12px}}