@charset "UTF-8";
:root{color-scheme:light;--ink:#20203d;--cream:#fff8e9;--red:#f4475a;--red-dark:#bd263b;--green:#20bf78;--green-dark:#108752;--yellow:#ffc928;--yellow-dark:#d59500;--blue:#347cf0;--blue-dark:#1651b5;--line:#d8cfbf;--font:"Avenir Next",Avenir,ui-rounded,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(circle at 8% 5%,#fff 0 5%,transparent 5.5%),linear-gradient(135deg,#fff8e8,#f3ecff);color:var(--ink);font:16px/1.4 var(--font);-webkit-font-smoothing:antialiased}button{font:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:4px solid #7759de;outline-offset:3px}h1,h2,p{margin:0}.skip{position:fixed;top:-80px;left:12px;z-index:100;padding:10px;background:var(--ink);color:white}.skip:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.topbar{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(14px,4vw,38px);border-bottom:1px solid #e8dece;background:#fffaf0e8;backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:950;text-decoration:none}.brand img{width:34px;height:34px}.game-label{padding:5px 12px;border-radius:999px;background:#eee5ff;color:#6446c3;font-size:.8rem;font-weight:900}.setup-shell{width:min(980px,calc(100% - 28px));margin:clamp(26px,5vw,58px) auto}.setup-hero{text-align:center}.pawn-party{position:relative;width:210px;height:92px;margin:0 auto 18px}.pawn-party .pawn{position:absolute;bottom:3px}.pawn-party .red{left:14px}.pawn-party .green{left:56px}.pawn-party .yellow{right:55px}.pawn-party .blue{right:13px}.pawn-party b{position:absolute;left:84px;top:3px;width:47px;height:47px;display:grid;place-items:center;border-radius:13px;background:white;box-shadow:0 7px 0 #d8cfbf;font-size:1.7rem;transform:rotate(8deg)}.pawn{display:block;width:34px;height:48px;border-radius:50% 50% 42% 42%/35% 35% 65% 65%;background:currentColor;box-shadow:inset -5px -7px 0 #0002,0 4px 7px #2d254a2e}.pawn::before{content:"";position:absolute;width:21px;height:21px;margin:0 0 0 6px;transform:translateY(-9px);border-radius:50%;background:currentColor;box-shadow:inset -4px -4px 0 #0002}.pawn.red{color:var(--red)}.pawn.green{color:var(--green)}.pawn.yellow{color:var(--yellow)}.pawn.blue{color:var(--blue)}.eyebrow{color:#765bd2;font-size:.72rem;font-weight:950;letter-spacing:.15em;text-transform:uppercase}.setup-hero h1{margin:10px 0 16px;font-size:clamp(2.7rem,7vw,5rem);line-height:.96;letter-spacing:-.065em}.setup-hero h1 em{color:#f4475a;font-family:Georgia,serif}.setup-hero>p:last-child{max-width:590px;margin:auto;color:#716a7d;font-size:1.08rem}.setup-card{margin-top:34px;padding:clamp(19px,4vw,34px);border:2px solid #e6dccb;border-radius:28px;background:white;box-shadow:0 20px 0 #ded4c4,0 30px 70px #3d2b7127}.setup-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.setup-head h2{font-size:1.35rem}.text-button{border:0;background:none;color:#6648c3;font-weight:900}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mode-card{min-height:150px;padding:20px;text-align:left;border:3px solid #eee6da;border-radius:22px;background:#fffaf2;color:var(--ink)}.mode-card[aria-pressed=true]{border-color:#765bd2;background:#f1ebff;box-shadow:0 7px 0 #c9bced}.mode-card>span{display:block;font-size:2rem}.mode-card strong{display:block;margin:9px 0 3px;font-size:1.15rem}.mode-card small{color:#746d7f}.count-section{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:24px 0}.count-section>span{font-weight:900}.count-row{display:flex;gap:7px}.count-row button{width:74px;height:58px;border:2px solid #e1d8ca;border-radius:15px;background:white;color:var(--ink);font-weight:950;font-size:1.1rem}.count-row button small{display:block;font-size:.62rem;color:#81798a}.count-row button[aria-pressed=true]{border-color:#20203d;background:#20203d;color:white}.count-row button[aria-pressed=true] small{color:#ddd7ec}.start-button{width:100%;height:58px;border:0;border-radius:16px;background:#20bf78;color:#102d21;font-weight:950;font-size:1.05rem;box-shadow:0 7px 0 #108752}.start-button span{float:right}.game-shell{width:min(1260px,calc(100% - 22px));margin:12px auto}.game-head{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px}.game-head>div:first-child{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:9px}.turn-dot{grid-row:1/3;width:13px;height:13px;border-radius:50%}.game-head strong{font-size:1rem}.game-head small{color:#766e80;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:62vw}.game-actions{display:flex;gap:6px}.game-actions button,.dialog-head button{width:42px;height:42px;border:2px solid #dfd6c8;border-radius:13px;background:white;color:var(--ink);font-weight:950;font-size:1.15rem}.play-layout{display:grid;grid-template-columns:minmax(420px,820px) 270px;gap:20px;justify-content:center;align-items:center}.board-frame{padding:8px;border:4px solid var(--ink);border-radius:27px;background:#fff;box-shadow:0 12px 0 #cec3b4,0 24px 50px #30265f2d}.board{position:relative;display:grid;grid-template-columns:repeat(15,1fr);aspect-ratio:1;overflow:hidden;border:2px solid var(--ink);border-radius:16px;background:white}.home-zone{z-index:1;margin:6%;border-radius:18%;box-shadow:inset 0 0 0 5px #fff9}.zone-red{grid-area:1/1/7/7;background:#ff97a3}.zone-green{grid-area:1/10/7/16;background:#7ce3b5}.zone-yellow{grid-area:10/10/16/16;background:#ffe37b}.zone-blue{grid-area:10/1/16/7;background:#82b1ff}.cell{z-index:2;border:.5px solid #cabfae;background:#fff}.cell-red{background:var(--red)}.cell-green{background:var(--green)}.cell-yellow{background:var(--yellow)}.cell-blue{background:var(--blue)}.cell.safe::after{content:"★";position:absolute;inset:0;display:grid;place-items:center;color:white;font-size:clamp(.42rem,1vw,.75rem)}.center-home{z-index:2;grid-area:7/7/10/10;background:conic-gradient(from 45deg,var(--green) 0 25%,var(--yellow) 0 50%,var(--blue) 0 75%,var(--red) 0);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.corner-ui{z-index:3;align-self:center;justify-self:center;width:66%;height:66%;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:24%;background:#fffef9e8;box-shadow:0 5px 14px #35254a2b;text-align:center}.corner-red{grid-area:1/1/7/7}.corner-green{grid-area:1/10/7/16}.corner-yellow{grid-area:10/10/16/16}.corner-blue{grid-area:10/1/16/7}.corner-name{max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(.55rem,1.2vw,.78rem);font-weight:950}.corner-score{margin-top:4px;font-size:clamp(.48rem,1vw,.66rem);font-weight:800;color:#746d7f}.corner-dice{width:clamp(42px,7vw,66px);height:clamp(42px,7vw,66px);display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin:6px 0 1px;padding:9px;border:0;border-radius:20%;background:white;color:#aaa6b1;box-shadow:0 6px 0 #d2c9bb,0 8px 18px #382e552b}.corner-dice i{width:clamp(5px,1vw,9px);height:clamp(5px,1vw,9px);align-self:center;justify-self:center;border-radius:50%;background:currentColor}.corner-dice.active{color:var(--ink);cursor:pointer;box-shadow:0 6px 0 currentColor,0 9px 22px #30245755}.corner-red .corner-dice.active{color:var(--red-dark)}.corner-green .corner-dice.active{color:var(--green-dark)}.corner-yellow .corner-dice.active{color:var(--yellow-dark)}.corner-blue .corner-dice.active{color:var(--blue-dark)}.corner-dice:disabled{cursor:default}.corner-dice.rolling{animation:dice-roll .62s ease-in-out}.token{z-index:7;width:62%;height:78%;place-self:center;padding:0;border:0;background:transparent;color:var(--red)}.token-red{color:var(--red)}.token-green{color:var(--green)}.token-yellow{color:var(--yellow)}.token-blue{color:var(--blue)}.token i{position:relative;display:block;width:68%;height:70%;margin:25% auto 0;border:2px solid #fff;border-radius:50% 50% 42% 42%/35% 35% 65% 65%;background:currentColor;box-shadow:inset -4px -5px 0 #0002,0 2px 4px #28213d60}.token i::before{content:"";position:absolute;width:72%;aspect-ratio:1;left:14%;top:-37%;border:2px solid #fff;border-radius:50%;background:currentColor;box-shadow:inset -3px -3px 0 #0002}.token.movable{cursor:pointer;animation:pawn-hop .9s infinite}.token.movable i{filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 4px currentColor)}.token:disabled{opacity:1}.token.stacked{width:48%;height:62%}.token.stack-0{transform:translate(-20%,-18%)}.token.stack-1{transform:translate(20%,-18%)}.token.stack-2{transform:translate(-20%,18%)}.token.stack-3{transform:translate(20%,18%)}.token.finished{width:40%;height:50%}.race-panel{padding:24px;border:2px solid #e2d8c8;border-radius:24px;background:white;box-shadow:0 15px 45px #30265f21}.race-panel h1{margin:8px 0 20px;font-size:2rem;line-height:1.05;letter-spacing:-.045em}.standing{display:grid;grid-template-columns:12px 1fr auto;gap:9px;align-items:center;padding:12px 0;border-top:1px solid #eee6da}.standing i,.turn-dot{background:var(--dot)}.dot-red{--dot:var(--red)}.dot-green{--dot:var(--green)}.dot-yellow{--dot:var(--yellow)}.dot-blue{--dot:var(--blue)}.standing i{width:11px;height:11px;border-radius:50%}.standing.active span{font-weight:950}.legend{display:grid;gap:7px;margin-top:20px;padding-top:17px;border-top:1px solid #e9e0d3;color:#766f7c;font-size:.8rem}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px}.dialog-head h2{margin:0}dialog{width:min(500px,calc(100% - 26px));padding:25px;border:0;border-radius:24px;color:var(--ink);box-shadow:0 30px 90px #20183c88}dialog::backdrop{background:#21193d99;backdrop-filter:blur(4px)}dialog ol{padding-left:22px}dialog li{margin:9px 0}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.dialog-actions button{min-height:45px;padding:0 15px;border:0;border-radius:12px;font-weight:900}.dialog-actions .danger{background:var(--red);color:white}
.cell{position:relative}
.p-0-0{grid-area:1/1}
.p-0-1{grid-area:1/2}
.p-0-2{grid-area:1/3}
.p-0-3{grid-area:1/4}
.p-0-4{grid-area:1/5}
.p-0-5{grid-area:1/6}
.p-0-6{grid-area:1/7}
.p-0-7{grid-area:1/8}
.p-0-8{grid-area:1/9}
.p-0-9{grid-area:1/10}
.p-0-10{grid-area:1/11}
.p-0-11{grid-area:1/12}
.p-0-12{grid-area:1/13}
.p-0-13{grid-area:1/14}
.p-0-14{grid-area:1/15}
.p-1-0{grid-area:2/1}
.p-1-1{grid-area:2/2}
.p-1-2{grid-area:2/3}
.p-1-3{grid-area:2/4}
.p-1-4{grid-area:2/5}
.p-1-5{grid-area:2/6}
.p-1-6{grid-area:2/7}
.p-1-7{grid-area:2/8}
.p-1-8{grid-area:2/9}
.p-1-9{grid-area:2/10}
.p-1-10{grid-area:2/11}
.p-1-11{grid-area:2/12}
.p-1-12{grid-area:2/13}
.p-1-13{grid-area:2/14}
.p-1-14{grid-area:2/15}
.p-2-0{grid-area:3/1}
.p-2-1{grid-area:3/2}
.p-2-2{grid-area:3/3}
.p-2-3{grid-area:3/4}
.p-2-4{grid-area:3/5}
.p-2-5{grid-area:3/6}
.p-2-6{grid-area:3/7}
.p-2-7{grid-area:3/8}
.p-2-8{grid-area:3/9}
.p-2-9{grid-area:3/10}
.p-2-10{grid-area:3/11}
.p-2-11{grid-area:3/12}
.p-2-12{grid-area:3/13}
.p-2-13{grid-area:3/14}
.p-2-14{grid-area:3/15}
.p-3-0{grid-area:4/1}
.p-3-1{grid-area:4/2}
.p-3-2{grid-area:4/3}
.p-3-3{grid-area:4/4}
.p-3-4{grid-area:4/5}
.p-3-5{grid-area:4/6}
.p-3-6{grid-area:4/7}
.p-3-7{grid-area:4/8}
.p-3-8{grid-area:4/9}
.p-3-9{grid-area:4/10}
.p-3-10{grid-area:4/11}
.p-3-11{grid-area:4/12}
.p-3-12{grid-area:4/13}
.p-3-13{grid-area:4/14}
.p-3-14{grid-area:4/15}
.p-4-0{grid-area:5/1}
.p-4-1{grid-area:5/2}
.p-4-2{grid-area:5/3}
.p-4-3{grid-area:5/4}
.p-4-4{grid-area:5/5}
.p-4-5{grid-area:5/6}
.p-4-6{grid-area:5/7}
.p-4-7{grid-area:5/8}
.p-4-8{grid-area:5/9}
.p-4-9{grid-area:5/10}
.p-4-10{grid-area:5/11}
.p-4-11{grid-area:5/12}
.p-4-12{grid-area:5/13}
.p-4-13{grid-area:5/14}
.p-4-14{grid-area:5/15}
.p-5-0{grid-area:6/1}
.p-5-1{grid-area:6/2}
.p-5-2{grid-area:6/3}
.p-5-3{grid-area:6/4}
.p-5-4{grid-area:6/5}
.p-5-5{grid-area:6/6}
.p-5-6{grid-area:6/7}
.p-5-7{grid-area:6/8}
.p-5-8{grid-area:6/9}
.p-5-9{grid-area:6/10}
.p-5-10{grid-area:6/11}
.p-5-11{grid-area:6/12}
.p-5-12{grid-area:6/13}
.p-5-13{grid-area:6/14}
.p-5-14{grid-area:6/15}
.p-6-0{grid-area:7/1}
.p-6-1{grid-area:7/2}
.p-6-2{grid-area:7/3}
.p-6-3{grid-area:7/4}
.p-6-4{grid-area:7/5}
.p-6-5{grid-area:7/6}
.p-6-6{grid-area:7/7}
.p-6-7{grid-area:7/8}
.p-6-8{grid-area:7/9}
.p-6-9{grid-area:7/10}
.p-6-10{grid-area:7/11}
.p-6-11{grid-area:7/12}
.p-6-12{grid-area:7/13}
.p-6-13{grid-area:7/14}
.p-6-14{grid-area:7/15}
.p-7-0{grid-area:8/1}
.p-7-1{grid-area:8/2}
.p-7-2{grid-area:8/3}
.p-7-3{grid-area:8/4}
.p-7-4{grid-area:8/5}
.p-7-5{grid-area:8/6}
.p-7-6{grid-area:8/7}
.p-7-7{grid-area:8/8}
.p-7-8{grid-area:8/9}
.p-7-9{grid-area:8/10}
.p-7-10{grid-area:8/11}
.p-7-11{grid-area:8/12}
.p-7-12{grid-area:8/13}
.p-7-13{grid-area:8/14}
.p-7-14{grid-area:8/15}
.p-8-0{grid-area:9/1}
.p-8-1{grid-area:9/2}
.p-8-2{grid-area:9/3}
.p-8-3{grid-area:9/4}
.p-8-4{grid-area:9/5}
.p-8-5{grid-area:9/6}
.p-8-6{grid-area:9/7}
.p-8-7{grid-area:9/8}
.p-8-8{grid-area:9/9}
.p-8-9{grid-area:9/10}
.p-8-10{grid-area:9/11}
.p-8-11{grid-area:9/12}
.p-8-12{grid-area:9/13}
.p-8-13{grid-area:9/14}
.p-8-14{grid-area:9/15}
.p-9-0{grid-area:10/1}
.p-9-1{grid-area:10/2}
.p-9-2{grid-area:10/3}
.p-9-3{grid-area:10/4}
.p-9-4{grid-area:10/5}
.p-9-5{grid-area:10/6}
.p-9-6{grid-area:10/7}
.p-9-7{grid-area:10/8}
.p-9-8{grid-area:10/9}
.p-9-9{grid-area:10/10}
.p-9-10{grid-area:10/11}
.p-9-11{grid-area:10/12}
.p-9-12{grid-area:10/13}
.p-9-13{grid-area:10/14}
.p-9-14{grid-area:10/15}
.p-10-0{grid-area:11/1}
.p-10-1{grid-area:11/2}
.p-10-2{grid-area:11/3}
.p-10-3{grid-area:11/4}
.p-10-4{grid-area:11/5}
.p-10-5{grid-area:11/6}
.p-10-6{grid-area:11/7}
.p-10-7{grid-area:11/8}
.p-10-8{grid-area:11/9}
.p-10-9{grid-area:11/10}
.p-10-10{grid-area:11/11}
.p-10-11{grid-area:11/12}
.p-10-12{grid-area:11/13}
.p-10-13{grid-area:11/14}
.p-10-14{grid-area:11/15}
.p-11-0{grid-area:12/1}
.p-11-1{grid-area:12/2}
.p-11-2{grid-area:12/3}
.p-11-3{grid-area:12/4}
.p-11-4{grid-area:12/5}
.p-11-5{grid-area:12/6}
.p-11-6{grid-area:12/7}
.p-11-7{grid-area:12/8}
.p-11-8{grid-area:12/9}
.p-11-9{grid-area:12/10}
.p-11-10{grid-area:12/11}
.p-11-11{grid-area:12/12}
.p-11-12{grid-area:12/13}
.p-11-13{grid-area:12/14}
.p-11-14{grid-area:12/15}
.p-12-0{grid-area:13/1}
.p-12-1{grid-area:13/2}
.p-12-2{grid-area:13/3}
.p-12-3{grid-area:13/4}
.p-12-4{grid-area:13/5}
.p-12-5{grid-area:13/6}
.p-12-6{grid-area:13/7}
.p-12-7{grid-area:13/8}
.p-12-8{grid-area:13/9}
.p-12-9{grid-area:13/10}
.p-12-10{grid-area:13/11}
.p-12-11{grid-area:13/12}
.p-12-12{grid-area:13/13}
.p-12-13{grid-area:13/14}
.p-12-14{grid-area:13/15}
.p-13-0{grid-area:14/1}
.p-13-1{grid-area:14/2}
.p-13-2{grid-area:14/3}
.p-13-3{grid-area:14/4}
.p-13-4{grid-area:14/5}
.p-13-5{grid-area:14/6}
.p-13-6{grid-area:14/7}
.p-13-7{grid-area:14/8}
.p-13-8{grid-area:14/9}
.p-13-9{grid-area:14/10}
.p-13-10{grid-area:14/11}
.p-13-11{grid-area:14/12}
.p-13-12{grid-area:14/13}
.p-13-13{grid-area:14/14}
.p-13-14{grid-area:14/15}
.p-14-0{grid-area:15/1}
.p-14-1{grid-area:15/2}
.p-14-2{grid-area:15/3}
.p-14-3{grid-area:15/4}
.p-14-4{grid-area:15/5}
.p-14-5{grid-area:15/6}
.p-14-6{grid-area:15/7}
.p-14-7{grid-area:15/8}
.p-14-8{grid-area:15/9}
.p-14-9{grid-area:15/10}
.p-14-10{grid-area:15/11}
.p-14-11{grid-area:15/12}
.p-14-12{grid-area:15/13}
.p-14-13{grid-area:15/14}
.p-14-14{grid-area:15/15}
@keyframes dice-roll{0%{transform:rotate(0) scale(1)}35%{transform:rotate(150deg) scale(.82)}70%{transform:rotate(300deg) scale(1.12)}100%{transform:rotate(360deg) scale(1)}}@keyframes pawn-hop{50%{transform:translateY(-18%) scale(1.08)}}
@media(max-width:760px){body.playing{height:100dvh;overflow:hidden}.playing .topbar{display:none}.game-shell{width:100%;height:100dvh;margin:0;padding:max(6px,env(safe-area-inset-top)) 6px max(6px,env(safe-area-inset-bottom));display:flex;flex-direction:column}.game-head{min-height:52px;height:52px;padding:2px 6px;flex:0 0 auto}.game-head small{max-width:55vw}.game-actions button{width:39px;height:39px;border-radius:12px}.play-layout{display:block;flex:1;min-height:0}.board-frame{height:min(calc(100dvh - 66px),100vw);width:min(calc(100dvh - 66px),100vw);max-width:100%;margin:auto;padding:4px;border-width:3px;border-radius:19px;box-shadow:0 7px 0 #cec3b4}.board{border-radius:11px}.race-panel{display:none}.corner-ui{width:70%;height:70%;border-radius:20%}.corner-dice{width:clamp(39px,12vw,58px);height:clamp(39px,12vw,58px);padding:8px;border-radius:18%}.corner-name{font-size:clamp(.5rem,2.2vw,.7rem)}.corner-score{font-size:clamp(.45rem,1.8vw,.62rem)}.cell.safe::after{font-size:clamp(.42rem,2vw,.68rem)}.token{width:78%;height:88%}.token i{border-width:1.5px}.token i::before{border-width:1.5px}.setup-shell{margin-top:23px}.mode-grid{grid-template-columns:1fr}.mode-card{min-height:112px}.count-section{align-items:flex-start;flex-direction:column}.count-row{width:100%}.count-row button{flex:1}.setup-card{border-radius:22px}.setup-head{align-items:flex-start;flex-direction:column}}
@media(max-width:380px){.corner-name{display:none}.corner-score{margin-top:2px}.corner-dice{margin:2px}.game-head small{font-size:.68rem}.game-actions{gap:3px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.yard-spot{z-index:4;width:82%;height:82%;place-self:center;border:3px solid #fff;border-radius:50%;background:#fff9;box-shadow:inset 0 0 0 3px #0000000c,0 2px 4px #392d5120}.spot-red{box-shadow:inset 0 0 0 4px #f4475a55,0 2px 4px #392d5120}.spot-green{box-shadow:inset 0 0 0 4px #20bf7855,0 2px 4px #392d5120}.spot-yellow{box-shadow:inset 0 0 0 4px #ffc92877,0 2px 4px #392d5120}.spot-blue{box-shadow:inset 0 0 0 4px #347cf055,0 2px 4px #392d5120}.corner-ui{width:34%;height:34%;border-radius:18%;background:#fff;box-shadow:0 4px 0 #00000018,0 6px 16px #35254a24}.corner-name{position:absolute;padding:3px 7px;border-radius:999px;background:#fffde9e8;box-shadow:0 1px 4px #0002}.corner-red .corner-name,.corner-green .corner-name{top:7%}.corner-yellow .corner-name,.corner-blue .corner-name{bottom:7%}.corner-dice{margin:0}.cell.safe{background:#fff}.cell.safe::before{content:"";position:absolute;inset:14%;border-radius:50%;background:#765bd2}.cell.safe::after{z-index:1;color:#fff;font-size:clamp(.45rem,1.05vw,.78rem)}.cell-red.safe::before{background:var(--red-dark)}.cell-green.safe::before{background:var(--green-dark)}.cell-yellow.safe::before{background:var(--yellow-dark)}.cell-blue.safe::before{background:var(--blue-dark)}.token{width:88%;height:108%;filter:drop-shadow(0 2px 2px #1f173f55)}.token i{width:76%;height:67%;margin:31% auto 0;border-radius:48% 48% 35% 35%/34% 34% 66% 66%;border:1.5px solid #fff9;box-shadow:inset -5px -6px 0 #0002,inset 4px 3px 0 #ffffff3d,0 3px 4px #28213d66}.token i::before{width:76%;left:12%;top:-43%;border:1.5px solid #fff9;box-shadow:inset -4px -4px 0 #0002,inset 3px 2px 0 #ffffff55}.token i::after{content:"";position:absolute;left:-11%;right:-11%;bottom:-5%;height:24%;border-radius:50%;background:currentColor;box-shadow:inset -4px -3px 0 #0002}.token.stepping{z-index:12;animation:step-pop .145s ease-out}.token.cut{z-index:14;animation:cut-spin .5s ease-in forwards}.board.animating .token:not(.stepping):not(.cut){pointer-events:none}.standing b{color:#7d7588;font-size:.7rem;font-weight:800;text-transform:uppercase}.legend span:first-child{color:#674bbb;font-weight:900}@keyframes step-pop{50%{transform:translateY(-34%) scale(1.12)}}@keyframes cut-spin{35%{transform:scale(1.32) rotate(-18deg);filter:brightness(1.35)}100%{transform:scale(.2) rotate(300deg);opacity:0}}
@media(max-width:760px){.corner-ui{width:32%;height:32%}.yard-spot{width:86%;height:86%;border-width:2px}.corner-name{font-size:clamp(.45rem,1.8vw,.62rem)}.token{width:96%;height:116%}.cell.safe::before{inset:10%}}

/* Stable, classic board surface: pawns move on their own composited layer. */
:root{--red:#ed2335;--red-dark:#b90f23;--green:#08a942;--green-dark:#08772f;--yellow:#f3cf16;--yellow-dark:#a97d00;--blue:#20a6e8;--blue-dark:#0874ac}.board-frame{padding:5px;border-radius:17px;background:#fff}.board{border-radius:8px;background:#fff;isolation:isolate}.home-zone{position:relative;margin:0;border-radius:0;box-shadow:none}.home-zone::after{content:"";position:absolute;inset:18%;border:2px solid #ffffffaa;border-radius:4px;background:#fff;box-shadow:0 2px 0 #00000012}.zone-red{background:var(--red)}.zone-green{background:var(--green)}.zone-yellow{background:var(--yellow)}.zone-blue{background:var(--blue)}.yard-spot{width:72%;height:72%;border:2px solid currentColor;background:color-mix(in srgb,currentColor 28%,white);box-shadow:inset 0 0 0 2px #fff,0 1px 2px #0003}.spot-red{color:var(--red);box-shadow:inset 0 0 0 2px #fff,0 1px 2px #0003}.spot-green{color:var(--green);box-shadow:inset 0 0 0 2px #fff,0 1px 2px #0003}.spot-yellow{color:var(--yellow-dark);box-shadow:inset 0 0 0 2px #fff,0 1px 2px #0003}.spot-blue{color:var(--blue);box-shadow:inset 0 0 0 2px #fff,0 1px 2px #0003}.corner-ui{z-index:6;width:31%;height:31%;border-radius:13%;box-shadow:0 3px 0 #0002,0 4px 10px #0002}.corner-name{z-index:2}.cell{border-color:#b7b7b1}.cell.safe::before{display:none}.cell.safe::after{content:"☆";color:#77736f;font-size:clamp(.72rem,1.7vw,1.08rem);font-weight:900;text-shadow:0 1px #fff}.cell-red.safe,.cell-green.safe,.cell-yellow.safe,.cell-blue.safe{color:#fff}.cell-red.safe{background:var(--red)}.cell-green.safe{background:var(--green)}.cell-yellow.safe{background:var(--yellow)}.cell-blue.safe{background:var(--blue)}.cell-red.safe::after{content:"→"}.cell-green.safe::after{content:"↓"}.cell-yellow.safe::after{content:"←"}.cell-blue.safe::after{content:"↑"}.cell-red.safe::after,.cell-green.safe::after,.cell-yellow.safe::after,.cell-blue.safe::after{color:#fff;text-shadow:none}
.board>.token{position:absolute;left:0;top:0;width:calc(100% / 15);height:calc(100% / 15);place-self:auto;animation:none;translate:var(--token-x) calc(var(--token-y) - 22%);transition:translate .105s linear;will-change:translate}.token.movable{animation:none}.token.movable i{animation:pawn-hop .9s infinite}.token.stepping{animation:none}.token.stepping i{animation:step-pop .145s ease-out}.token.cut{animation:none}.token.cut i{animation:cut-spin .5s ease-in forwards}.tr-0{--token-y:0%}.tr-1{--token-y:100%}.tr-2{--token-y:200%}.tr-3{--token-y:300%}.tr-4{--token-y:400%}.tr-5{--token-y:500%}.tr-6{--token-y:600%}.tr-7{--token-y:700%}.tr-8{--token-y:800%}.tr-9{--token-y:900%}.tr-10{--token-y:1000%}.tr-11{--token-y:1100%}.tr-12{--token-y:1200%}.tr-13{--token-y:1300%}.tr-14{--token-y:1400%}.tc-0{--token-x:0%}.tc-1{--token-x:100%}.tc-2{--token-x:200%}.tc-3{--token-x:300%}.tc-4{--token-x:400%}.tc-5{--token-x:500%}.tc-6{--token-x:600%}.tc-7{--token-x:700%}.tc-8{--token-x:800%}.tc-9{--token-x:900%}.tc-10{--token-x:1000%}.tc-11{--token-x:1100%}.tc-12{--token-x:1200%}.tc-13{--token-x:1300%}.tc-14{--token-x:1400%}
@media(max-width:760px){.board-frame{padding:3px;border-radius:12px}.board{border-radius:5px}.corner-ui{width:30%;height:30%}.yard-spot{width:76%;height:76%}.board>.token{width:calc(100% / 15);height:calc(100% / 15)}}

/* Pin pawns: compact normally, larger with a landing ring when selectable. */
.play-layout{grid-template-columns:minmax(420px,820px)}.board>.token{overflow:visible;isolation:isolate;filter:none;transform-origin:50% 100%;transition:translate .105s linear,scale .14s ease}.token::before{content:"";position:absolute;z-index:1;top:38%;left:25%;width:50%;height:72%;background:color-mix(in srgb,currentColor 42%,white);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(-1.5px 0 #202020) drop-shadow(1.5px 0 #202020) drop-shadow(0 2px #202020)}.token i{position:relative;z-index:2;display:block;width:72%;height:auto;aspect-ratio:1;margin:-5% auto 0;border:2.5px solid #202020;border-radius:50%;background:color-mix(in srgb,currentColor 42%,white);box-shadow:inset 3px 3px 0 #ffffff70}.token i::before{content:"";position:absolute;inset:10% 14% 44% 25%;width:auto;aspect-ratio:auto;margin:0;transform:none;border:0;border-radius:50%;background:#ffffff70;box-shadow:none}.token i::after{display:none}.token.movable{z-index:15;scale:1.2}.token.movable::after{content:"";position:absolute;z-index:0;left:13%;bottom:-38%;width:74%;height:28%;border:2.5px solid #202020;border-radius:50%;background:color-mix(in srgb,currentColor 42%,white);box-shadow:0 2px 0 #0002}.token.movable i{animation:none;filter:none}.token.stepping{animation:pin-step .145s ease-out}.token.stepping i{animation:none}.token.cut{animation:pin-cut .5s ease-in forwards}.token.cut i{animation:none}@keyframes pin-step{50%{transform:translateY(-34%) scale(1.08)}}@keyframes pin-cut{35%{transform:scale(1.35) rotate(-18deg)}100%{transform:scale(.2) rotate(300deg);opacity:0}}
@media(max-width:760px){.play-layout{display:block}.token i{border-width:2px}.token.movable::after{border-width:2px}}

/* Keep every player's pawn, yard, lane, and center home on one palette. */
.zone-red,.cell-red{background:var(--red)}.zone-green,.cell-green{background:var(--green)}.zone-yellow,.cell-yellow{background:var(--yellow)}.zone-blue,.cell-blue{background:var(--blue)}.center-home{background:conic-gradient(from 45deg,var(--yellow) 0 25%,var(--blue) 0 50%,var(--red) 0 75%,var(--green) 0)}.token::before,.token i,.token.movable::after{background:currentColor}

/* Both pawn states stay inside one track cell, including the selection base. */
.board>.token{scale:.8;transform-origin:50% 50%}.token::before{top:34%;left:29%;width:42%;height:48%}.token i{width:58%;margin:1% auto 0}.token.movable{scale:1}.token.movable::after{left:20%;bottom:2%;width:60%;height:18%;box-shadow:inset 0 2px 0 #ffffff45}

/* Explicit head and cone keep the pawn silhouette readable at track-cell size. */
.home-zone::after{inset:12%}.yard-spot{width:62%;height:62%}.board>.token{scale:.86}.token::before{display:none}.token i{width:60%;margin:0 auto;border-width:2px;box-shadow:inset 2px 2px 0 #ffffff70,0 1px 1px #0003}.token>b{position:absolute;z-index:1;top:43%;left:24%;width:52%;height:53%;display:block;background:#202020;clip-path:polygon(0 0,100% 0,50% 100%)}.token>b::after{content:"";position:absolute;inset:2px 2px 3px;background:currentColor;clip-path:polygon(0 0,100% 0,50% 100%)}.token.movable{scale:1}.token.movable::after{left:18%;bottom:1%;width:64%;height:17%;background:currentColor}.token.stepping>b,.token.cut>b{animation:none}@media(max-width:760px){.token>b::after{inset:1.5px 1.5px 2px}.yard-spot{width:66%;height:66%}}

@media(max-width:760px){.playing .play-layout{display:grid;place-items:center;align-content:center}.playing .board-frame{margin:0 auto}}

/* Track pawns and stacks are centered within one grid square. */
.board>.token.on-track{scale:.72}.board>.token.on-track.movable{scale:.86}.board>.token.stacked{scale:.56}.token.stack-0{transform:translate(-20%,-18%)}.token.stack-1{transform:translate(20%,-18%)}.token.stack-2{transform:translate(-20%,18%)}.token.stack-3{transform:translate(20%,18%)}

.board{grid-template-rows:repeat(15,1fr)}

/* Reference-style map-pin pawn: colored head, white tapered body, double rim. */
.token i{width:62%;border:2px solid #202020;background:currentColor;box-shadow:0 0 0 2px #fff,0 0 0 3px color-mix(in srgb,currentColor 72%,#202020),0 2px 3px #0005,inset 2px 2px 0 #ffffff75}.token>b{top:38%;left:22%;width:56%;height:60%;background:color-mix(in srgb,currentColor 72%,#202020);clip-path:polygon(0 0,100% 0,88% 34%,54% 100%,46% 100%,12% 34%)}.token>b::after{inset:3px 3px 4px;background:#fff;clip-path:polygon(0 0,100% 0,88% 34%,54% 100%,46% 100%,12% 34%)}@media(max-width:760px){.token>b::after{inset:2px 2px 3px}}

/* Robust pin silhouette: a white teardrop stem with two visible diagonal edges. */
.token i{width:56%}.token>b{top:62%;left:28%;width:44%;height:58%;background:#fff;border:2.5px solid color-mix(in srgb,currentColor 72%,#202020);border-top:0;border-left:0;border-radius:0 0 48% 0;clip-path:none;transform:rotate(45deg);transform-origin:50% 50%;box-shadow:1px 1px 1px #0003}.token>b::after{display:none}.board>.token.on-track{scale:.82}.board>.token.on-track.movable{scale:.92}.board>.token.stacked{scale:.58}@media(max-width:760px){.token>b{border-width:2px}.board>.token.on-track{scale:.86}.board>.token.on-track.movable{scale:.96}.board>.token.stacked{scale:.6}}

/* Circular pawns with a separate rotating dashed move indicator. */
.board>.token{display:grid;place-items:center;scale:1;translate:var(--token-x) var(--token-y);transform-origin:50% 50%}.token i{grid-area:1/1;width:58%;margin:0;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px color-mix(in srgb,currentColor 72%,#202020),0 2px 3px #0005,inset 2px 2px 0 #ffffff75}.token>b{display:none}.board>.token.on-track,.board>.token.on-track.movable{scale:1}.board>.token.stacked{scale:.62}.token.movable::after{content:"";position:absolute;z-index:3;inset:2%;width:auto;height:auto;border:3px dashed currentColor;border-radius:50%;background:transparent;box-shadow:none;animation:move-ring-spin 2.4s linear infinite}.token.movable i{animation:none;filter:none}@keyframes move-ring-spin{to{transform:rotate(360deg)}}@media(max-width:760px){.board>.token.on-track,.board>.token.on-track.movable{scale:1}.board>.token.stacked{scale:.64}.token.movable::after{border-width:3px}}

.token.movable.same-color::after{border-color:#fff;filter:drop-shadow(0 0 2px color-mix(in srgb,currentColor 80%,#202020))}

.corner-ui.ranked{background:linear-gradient(145deg,#fffdf3,#fff1b5);border:2px solid #fff;box-shadow:0 3px 0 #0002,0 0 0 3px currentColor}.corner-red.ranked{color:var(--red)}.corner-green.ranked{color:var(--green)}.corner-yellow.ranked{color:var(--yellow-dark)}.corner-blue.ranked{color:var(--blue)}.corner-rank{display:grid;place-items:center;line-height:1}.corner-rank strong{margin-top:5px;color:var(--ink);font-size:clamp(.72rem,1.6vw,1rem)}.trophy-cup{position:relative;display:block;width:42px;height:38px;filter:drop-shadow(0 3px 2px #7b510044)}.trophy-cup::before,.trophy-cup::after{content:"";position:absolute;top:5px;width:11px;height:13px;border:3px solid #d48b00}.trophy-cup::before{left:1px;border-right:0;border-radius:9px 0 0 9px}.trophy-cup::after{right:1px;border-left:0;border-radius:0 9px 9px 0}.trophy-cup i{position:absolute;z-index:2;top:1px;left:9px;width:24px;height:22px;border:2px solid #9b6500;border-radius:4px 4px 12px 12px;background:linear-gradient(100deg,#ffc72f 0 24%,#fff0a1 38%,#f2a900 72%);box-shadow:inset 0 -4px 0 #d88e00}.trophy-cup i::after{content:"";position:absolute;left:9px;top:19px;width:3px;height:9px;border-radius:2px;background:#9b6500}.trophy-cup b{position:absolute;z-index:3;left:11px;bottom:0;width:20px;height:5px;border:2px solid #9b6500;border-radius:5px 5px 2px 2px;background:#ffc72f}.placement-celebration{text-align:center}.placement-celebration>.trophy-cup{margin:0 auto 24px;transform:scale(1.5);transform-origin:50% 100%}.placement-celebration p{margin:6px 0;font-size:1.3rem}.placement-celebration small{color:#746d7f}@media(max-width:760px){.corner-ui.ranked{border-width:1px;box-shadow:0 2px 0 #0002,0 0 0 2px currentColor}.corner-rank strong{margin-top:3px;font-size:clamp(.55rem,2.4vw,.72rem)}.corner-rank .trophy-cup{transform:scale(.72);margin:-5px}}

.corner-dice .dice-idle{grid-column:1/-1;align-self:stretch;justify-self:stretch;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr)}.corner-dice .dice-idle i{width:clamp(4px,.8vw,7px);height:clamp(4px,.8vw,7px)}.dice-idle i:nth-child(1){grid-area:1/1}.dice-idle i:nth-child(2){grid-area:1/3}.dice-idle i:nth-child(3){grid-area:2/2}.dice-idle i:nth-child(4){grid-area:3/1}.dice-idle i:nth-child(5){grid-area:3/3}

/* A visible install action works with native prompts and iOS instructions. */
.topbar-actions{display:flex;align-items:center;gap:9px}.install-ludo{min-height:38px;display:inline-flex;align-items:center;gap:9px;padding:7px 13px;border:2px solid #6e50cd;border-radius:13px;background:#765bd2;color:#fff;font-size:.78rem;font-weight:950;box-shadow:0 4px 0 #4e359e;transition:transform .14s ease,box-shadow .14s ease}.install-ludo:hover{transform:translateY(-2px);box-shadow:0 6px 0 #4e359e}.install-ludo:active{transform:translateY(2px);box-shadow:0 2px 0 #4e359e}.install-ludo.installed{border-color:#b9ae9e;background:#ded6ca;color:#645c69;box-shadow:0 3px 0 #b9ae9e}.install-ludo b{font:inherit}.install-glyph{position:relative;display:inline-block;width:16px;height:17px;border-bottom:2.5px solid currentColor}.install-glyph::before{content:"";position:absolute;left:7px;top:0;width:2.5px;height:10px;border-radius:2px;background:currentColor}.install-glyph::after{content:"";position:absolute;left:4px;top:5px;width:7px;height:7px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg)}.game-actions .install-glyph{display:block;margin:auto;width:15px;height:16px}
@media(max-width:480px){.topbar{padding-inline:10px}.topbar-actions{gap:6px}.game-label{display:none}.install-ludo{min-height:36px;padding:6px 10px}.install-ludo b{font-size:.72rem}}

/* The board controls keep the same visual weight from phone to desktop. */
.corner-dice{transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}.corner-dice.active{cursor:pointer}.corner-dice.active:active{transform:translateY(3px);box-shadow:0 2px 0 #d7cdbd,0 4px 8px #211a3c25}@media(hover:hover){.corner-dice.active:hover{transform:translateY(-3px);filter:brightness(1.025);box-shadow:0 9px 0 #d7cdbd,0 13px 18px #211a3c2b}}
@media(max-width:760px){.token i{width:60%;border-width:1.25px;box-shadow:0 0 0 1px #fff,0 0 0 2px color-mix(in srgb,currentColor 72%,#202020),0 1px 2px #0004,inset 1px 1px 0 #ffffff75}.token.movable::after{inset:4%;border-width:2px}.token.movable.same-color::after{filter:drop-shadow(0 0 1px color-mix(in srgb,currentColor 80%,#202020))}.corner-dice{padding:clamp(7px,1.8vw,9px)}.corner-dice .dice-idle{gap:1px}.corner-dice .dice-idle i{width:clamp(3.5px,1.2vw,5px);height:clamp(3.5px,1.2vw,5px)}}

/* Interactive CSS-built setup dice and matching circular Ludo pawns. */
.pawn-party{width:250px;height:108px;margin-bottom:14px}.hero-pawn{position:absolute;bottom:8px;width:42px;height:42px;border:3px solid #202020;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px #fff,0 6px 0 color-mix(in srgb,currentColor 72%,#202020),0 10px 14px #2a214b38}.hero-pawn::before{content:"";position:absolute;inset:8% 19% 48% 28%;border-radius:50%;background:#ffffff8c}.hero-pawn::after{content:"";position:absolute;left:16%;right:16%;bottom:-19%;height:18%;border-radius:50%;background:#30283d30}.hero-red{left:18px;color:var(--red)}.hero-green{left:70px;color:var(--green)}.hero-yellow{right:70px;color:var(--yellow)}.hero-blue{right:18px;color:var(--blue)}.pawn-party .hero-die{position:absolute;z-index:3;left:94px;top:0;width:62px;height:62px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:4px;padding:11px;border:2px solid #d8cfbf;border-radius:16px;background:#fff;color:var(--ink);box-shadow:0 8px 0 #d8cfbf,0 13px 22px #30265f30;transform:rotate(7deg);transition:transform .18s ease,box-shadow .18s ease}.pawn-party .hero-die:hover{transform:rotate(0) translateY(-3px);box-shadow:0 11px 0 #d8cfbf,0 17px 25px #30265f35}.pawn-party .hero-die:active{transform:rotate(0) translateY(4px);box-shadow:0 4px 0 #d8cfbf,0 8px 14px #30265f2d}.pawn-party .hero-die i{width:8px;height:8px;place-self:center;border-radius:50%;background:currentColor}.pawn-party .hero-die b{position:static;left:auto;top:auto;width:auto;height:auto;display:block;border:0;background:transparent;box-shadow:none;transform:none}.pawn-party .hero-die.rolling{animation:hero-die-roll .68s ease-in-out}.pawn-party.rolling .hero-pawn{animation:hero-pawn-cheer .52s ease-out}.pawn-party.rolling .hero-green{animation-delay:.05s}.pawn-party.rolling .hero-yellow{animation-delay:.1s}.pawn-party.rolling .hero-blue{animation-delay:.15s}@keyframes hero-die-roll{30%{transform:translateY(-16px) rotate(-22deg) scale(.92)}65%{transform:translateY(-7px) rotate(20deg) scale(1.08)}100%{transform:rotate(7deg)}}@keyframes hero-pawn-cheer{50%{translate:0 -11px;scale:1.08}}@media(max-width:520px){.pawn-party{scale:.86;margin-bottom:4px}}

/* CSS illustrations replace emoji in the play-mode cards. */
.mode-card{position:relative;overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}.mode-card:hover{transform:translateY(-3px);border-color:#cfc2ec;box-shadow:0 7px 0 #e0d7c9,0 12px 24px #382a6420}.mode-card:active{transform:translateY(2px)}.mode-card[aria-pressed=true]{background:linear-gradient(145deg,#f7f2ff,#ebe3ff);box-shadow:0 7px 0 #c9bced,0 14px 28px #5c3eb925}.mode-card[aria-pressed=true]::after{content:"";position:absolute;right:18px;top:18px;width:12px;height:12px;border:4px solid #fff;border-radius:50%;background:#765bd2;box-shadow:0 0 0 2px #765bd2}.mode-card>.mode-art{position:relative;width:88px;height:48px;display:block;font-size:initial}.mode-art i{position:absolute;width:31px;height:31px;border:2px solid #202020;border-radius:50%;box-shadow:0 0 0 2px #fff,0 4px 0 #2b234340}.mode-art i::after{content:"";position:absolute;inset:10% 22% 52% 28%;border-radius:50%;background:#ffffff8c}.bot-art i{left:3px;top:9px;background:var(--red)}.bot-art em{position:absolute;left:35px;top:23px;width:13px;height:3px;border-radius:3px;background:#b9acd7}.bot-art b{position:absolute;left:51px;top:3px;width:38px;height:38px;display:grid;place-items:center;border:2px solid #20203d;border-radius:11px;background:linear-gradient(145deg,#8a70e8,#6546c7);color:#fff;font-size:.72rem;font-style:normal;font-weight:950;letter-spacing:.04em;box-shadow:0 5px 0 #49309c,0 8px 13px #392a6630}.bot-art b::before,.bot-art b::after{content:"";position:absolute;left:7px;right:7px;height:3px;background:repeating-linear-gradient(90deg,#f4eeff 0 3px,transparent 3px 7px)}.bot-art b::before{top:-5px}.bot-art b::after{bottom:-5px}.friends-art b{position:absolute;left:7px;top:7px;width:72px;height:35px;border:2px dashed #c5b7df;border-radius:50%;background:#f5f0ff}.friends-art i{z-index:1;top:8px}.friends-art i:nth-of-type(1){left:8px;background:var(--red)}.friends-art i:nth-of-type(2){left:29px;top:3px;background:var(--green)}.friends-art i:nth-of-type(3){left:50px;background:var(--blue)}.mode-card[aria-pressed=true] .mode-art{animation:mode-art-pop .3s ease-out}@keyframes mode-art-pop{50%{transform:scale(1.08)}}@media(max-width:760px){.mode-card>.mode-art{width:78px;height:43px;transform:scale(.9);transform-origin:left center}.mode-card[aria-pressed=true]::after{right:14px;top:14px}}