/* Layout belongs to the game, not to the concept image. No complete board or
   mock-up is present in any background. Narrow screens reflow the SAME controls. */
body.sl-playing{overflow:hidden;height:100dvh;min-height:0}body.sl-playing #app{height:100%;min-height:0}
.sl-game{--sl-height:100dvh;--sl-brass:#d5ae68;--sl-panel:#1c1b16;box-sizing:border-box;height:var(--sl-height);width:100%;max-width:1700px;margin:0 auto;padding:max(7px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:grid;grid-template-columns:190px minmax(0,1fr) 220px;grid-template-rows:40px minmax(0,1fr) 28px;grid-template-areas:"top top top" "players arena dock" "foot foot foot";gap:12px;overflow:hidden;color:#f3e4c3;background:radial-gradient(ellipse at 50% -40%,#3c574335,transparent 70%),linear-gradient(#101816e8,#060d0ded),url('assets/ladders/stone.webp') repeat;font-family:Georgia,'Times New Roman',serif}
.sl-game button{font:inherit}.sl-top{grid-area:top;display:flex;align-items:center;justify-content:space-between;gap:12px}.sl-top>div{display:flex;gap:9px}.sl-icon{border:1px solid #a88043;border-radius:9px;background:linear-gradient(#302b1f,#171c18);color:#e9ca82;box-shadow:inset 0 0 0 2px #0c110dd9,0 3px 5px #0005;width:39px;height:38px;padding:0;display:grid;place-items:center;font-size:23px!important;line-height:1}.sl-local{font:10px system-ui,sans-serif;color:#b5bca8;margin-right:auto}.sl-local i{display:inline-block;width:6px;height:6px;background:#97bd84;margin:0 6px 1px 0;border-radius:50%}.sl-players{grid-area:players;min-height:0;display:flex;flex-direction:column;gap:14px}.sl-plaque{background:linear-gradient(110deg,#3a2518d9,#151913eb),url('assets/ladders/stone.webp');border:2px solid #a17941;border-radius:15px;box-shadow:inset 0 0 0 3px #372516,inset 0 0 0 4px #d2b370,0 7px 14px #0007;padding:20px 10px;text-align:center}.sl-brand>span{display:block;margin:0 auto 6px;width:31px;color:#e4b968}.sl-brand svg{width:100%}.sl-brand h1{font-size:23px;line-height:1.12;margin:0;color:#f4d48b;letter-spacing:.7px;text-shadow:0 3px #2c200e}.sl-roster{display:flex;flex-direction:column;gap:12px}.sl-player{border:1px solid #786443;box-shadow:inset 0 0 0 2px #312a20,0 5px 10px #0006;background:linear-gradient(100deg,color-mix(in srgb,var(--player-color) 20%,#141817),#161d19);border-radius:11px;padding:13px 8px;display:flex;align-items:center;gap:9px;min-width:0;position:relative}.sl-player.active{border-color:#f3c97c;box-shadow:inset 0 0 0 2px #6a4c26,0 0 0 1px #d0a359,0 0 16px #d9b35f22}.sl-player.active::after{content:'◆';color:#fbe5a1;position:absolute;right:7px;top:5px;font-size:8px}.sl-player img{width:57px;height:57px;object-fit:contain;filter:drop-shadow(0 3px 2px #0008)}.sl-player>div{min-width:0}.sl-player b{display:block;font-size:14px;color:#ffeec7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sl-player small{display:block;font:10px system-ui,sans-serif;color:#c4bca6;margin-top:6px}.sl-player.placed small{color:#f7d484}
.sl-arena{grid-area:arena;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.sl-frame{box-sizing:border-box;flex:none;position:relative;padding:17px;background:linear-gradient(120deg,#bd934b,#f7d797 14%,#553f21 16%,#9c7036 18%,#392d1d 75%,#d1a15d 80%,#64431d);border:2px solid #6a4c24;box-shadow:0 0 0 1px #d6b273,0 10px 25px #000b,inset 0 0 0 3px #deb66a,inset 0 0 0 6px #3c2a15,inset 0 0 0 8px #b18a47;border-radius:5px}.sl-frame::before{content:'';position:absolute;inset:10px;border:1px solid #ebcf87;box-shadow:inset 0 0 0 3px #091c30,inset 0 0 0 4px #916936;pointer-events:none;z-index:20}.sl-board{width:100%;height:100%;position:relative;isolation:isolate;border:2px solid #372818;background:#d7c197}.sl-tiles,.sl-ladders,.sl-snakes,.sl-coins{position:absolute;inset:0;width:100%;height:100%}.sl-tiles{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(10,minmax(0,1fr))}.sl-tile{--tile:#ebdbb9;border:0;border-radius:0;padding:0;min-width:0;min-height:0;position:relative;background:linear-gradient(135deg,#ffffff09,#0000000d),var(--tile);box-shadow:inset 0 0 0 .55px #332a1ca8,inset 2px 2px 1px #ffffd630,inset -2px -2px 1px #0000001c;touch-action:manipulation;color:#231d17;cursor:help!important}.sl-tile::before{content:'';position:absolute;inset:1px;pointer-events:none;background:url('assets/ladders/tile.webp') center/100% 100%;mix-blend-mode:soft-light;opacity:.5}.sl-tile::after{content:'';position:absolute;inset:15%;pointer-events:none;border:1px solid #ffffff0d;transform:rotate(45deg);border-radius:18%}.sl-tile.ivory{--tile:#ebdcbf}.sl-tile.red{--tile:#961f2b;color:#ffe8bc}.sl-tile.blue{--tile:#1b5582;color:#fff1c7}.sl-tile.green{--tile:#09644e;color:#f9edc8}.sl-tile.gold{--tile:#daaa28}.sl-tile.purple{--tile:#544270;color:#f5e9c8}.sl-tile.rose{--tile:#9e2856;color:#ffecdc}.sl-tile.bronze{--tile:#a26330;color:#fff2d6}.sl-number{position:absolute;left:9%;top:7%;z-index:6;font-size:clamp(10px,1.55vw,24px);font-weight:700;line-height:1;text-shadow:0 1px 1px #ffffff20,0 0 2px var(--tile),0 0 4px var(--tile);pointer-events:none}.sl-home-crown{position:absolute;bottom:8%;right:16%;width:45%;color:#efc66b}.sl-home-crown svg{width:100%}.sl-selected{box-shadow:inset 0 0 0 3px #f9dc8e,inset 0 0 12px #fffccba0!important}.sl-selected .sl-number{color:white}.sl-ladders{z-index:2;pointer-events:none;overflow:visible;filter:drop-shadow(2px 3px 1px #0008)}.sl-snakes{z-index:3;pointer-events:none}.sl-snake{position:absolute;object-fit:fill;filter:drop-shadow(1px 3px 1.8px #170c09b0);user-select:none}.sl-path-active{filter:drop-shadow(0 0 3px #fff1a1) drop-shadow(0 0 6px #d6b14a)!important}.sl-coins{z-index:10;pointer-events:none}.sl-coin{position:absolute;width:6.9%;aspect-ratio:1;transform:translate(-50%,-50%) scale(var(--coin-scale,1));filter:drop-shadow(0 2px 1px #000a);pointer-events:none}.sl-coin img{display:block;width:100%;height:100%;object-fit:contain}.sl-coin.sl-offboard{visibility:hidden}.sl-coin.sl-moving{z-index:10;filter:drop-shadow(0 3px 2px #0009) drop-shadow(0 0 4px #ffe6b5)}.sl-coin-finished{opacity:.85}.sl-corner{position:absolute;z-index:25;width:23px;height:23px;background:linear-gradient(135deg,#d4a14d,#fae1a3 45%,#785127 48%,#d6a76a);border:1px solid #6c491c;border-radius:2px;transform:rotate(45deg);box-shadow:0 0 0 2px #231b10,0 0 0 3px #d2a65b}.sl-corner::after{content:'';position:absolute;inset:5px;background:linear-gradient(135deg,#6ee4ff,#228bcf 44%,#074b88 49%,#62d9ef);border:1px solid #132d46;box-shadow:0 0 0 1px #f4ca73}.sl-corner.tl{top:2px;left:2px}.sl-corner.tr{top:2px;right:2px}.sl-corner.bl{bottom:2px;left:2px}.sl-corner.br{bottom:2px;right:2px}
.sl-dock{grid-area:dock;min-height:0;min-width:0;display:flex;flex-direction:column;gap:12px;justify-content:center}.sl-turn,.sl-recent,.sl-finishers:not(:empty){padding:16px 12px;border:1px solid #ad8651;border-radius:12px;background:linear-gradient(#272519d9,#151a13ea);box-shadow:inset 0 0 0 3px #3c3120,0 5px 10px #0007}.sl-turn{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}.sl-turn img{width:84px;height:84px;object-fit:contain}.sl-turn small{font:10px system-ui,sans-serif;letter-spacing:2px;color:#e7c07a}.sl-turn strong{display:block;color:#f6e9c6;font-size:19px;margin-top:5px}.sl-turn span{font:11px system-ui,sans-serif;color:#c5bea3;display:block;margin-top:5px}.sl-dock h2{color:#e9c078;font-size:12px;letter-spacing:1px;margin:0 0 8px}.sl-recent p{font:10px/1.55 system-ui,sans-serif;margin:0;padding:6px 0;border-bottom:1px solid #7c664233;color:#c8bfa9}.sl-recent p:last-child{border:0}.sl-finishers span{display:block;font-size:12px;padding:3px 0}.sl-finishers b{color:#edc474;display:inline-block;width:28px}.sl-roll-tray{border:2px solid #997749;border-radius:12px;background:linear-gradient(#403327,#131a15);box-shadow:inset 0 0 0 2px #644726,0 4px 0 #171c15,0 8px 15px #0007;display:flex;flex-direction:column;gap:15px;align-items:center;padding:18px 10px}.sl-die-button{background:transparent;border:0;padding:0;display:grid;place-items:center;width:65px;height:64px;opacity:1!important}.sl-die{width:58px;height:58px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:5px;padding:11px;border:1px solid #e9d7b6;border-radius:13px;background:linear-gradient(135deg,#fff7e6,#d3bda3);box-shadow:inset 0 2px 1px #fffff2,inset -3px -2px 6px #95755380,2px 5px 0 #9b7b52,3px 7px 1px #2d281d,0 12px 10px #0007;transform:rotate(-6deg)}.sl-die i{border-radius:50%;background:#251c16;box-shadow:inset 0 1px 1px #000b,0 1px 0 #fff8;visibility:hidden}.sl-die[data-value='0'] i:nth-child(5),.sl-die[data-value='1'] i:nth-child(5),.sl-die[data-value='2'] i:nth-child(1),.sl-die[data-value='2'] i:nth-child(9),.sl-die[data-value='3'] i:nth-child(1),.sl-die[data-value='3'] i:nth-child(5),.sl-die[data-value='3'] i:nth-child(9),.sl-die[data-value='4'] i:nth-child(1),.sl-die[data-value='4'] i:nth-child(3),.sl-die[data-value='4'] i:nth-child(7),.sl-die[data-value='4'] i:nth-child(9),.sl-die[data-value='5'] i:nth-child(1),.sl-die[data-value='5'] i:nth-child(3),.sl-die[data-value='5'] i:nth-child(5),.sl-die[data-value='5'] i:nth-child(7),.sl-die[data-value='5'] i:nth-child(9),.sl-die[data-value='6'] i:nth-child(1),.sl-die[data-value='6'] i:nth-child(3),.sl-die[data-value='6'] i:nth-child(4),.sl-die[data-value='6'] i:nth-child(6),.sl-die[data-value='6'] i:nth-child(7),.sl-die[data-value='6'] i:nth-child(9){visibility:visible}.sl-die[data-value='1'] i:nth-child(5){background:#9a1e23}.sl-tumbling{animation:slTumble .18s ease-in-out infinite}@keyframes slTumble{0%{transform:translate(-3px,-5px) rotate(-20deg)}50%{transform:translate(4px,1px) rotate(22deg)}100%{transform:translate(-3px,-5px) rotate(-20deg)}}.sl-roll{background:linear-gradient(#16824c,#086331 45%,#063d22);border:2px solid #f1cf80;color:#fff0c3;border-radius:10px;box-shadow:inset 0 0 0 2px #b28a3b,inset 0 0 0 4px #075023,0 4px 0 #462e16,0 5px 0 #b79a59;min-height:54px;width:100%;font:bold 25px Georgia,serif!important;letter-spacing:2px;padding:10px 5px;text-shadow:0 2px #302419;white-space:nowrap}.sl-roll:hover:not(:disabled){filter:brightness(1.12)}.sl-roll:disabled{opacity:.66}.sl-action{font:11px/1.45 system-ui,sans-serif;min-height:32px;max-height:40px;overflow:hidden;color:#d3c7a4;margin:0;text-align:center}.sl-footer{grid-area:foot;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#c4b693;font:11px system-ui,sans-serif;overflow:hidden}.sl-footer span{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sl-text{border:0;background:none;color:#d5bd83;font-size:12px!important;min-height:28px;padding:2px 7px;white-space:nowrap}.sl-modal{width:min(460px,calc(100% - 26px));max-height:calc(100dvh - 36px);border:2px solid #bc9454;border-radius:14px;padding:20px;color:#f0dfbc;background:linear-gradient(#262a1a,#111c15);box-shadow:0 20px 90px #000c}.sl-modal::backdrop{background:#03100adc;backdrop-filter:blur(4px)}.sl-modal-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}.sl-modal h2{font-size:23px;color:#f2ce88;margin:0}.sl-modal h3{font-size:16px;color:#dfbf80}.sl-modal p{font:13px/1.75 system-ui,sans-serif}.sl-menu-actions{display:flex;flex-direction:column;gap:13px}.sl-secondary{border:1px solid #b58f53;border-radius:8px;background:#242c1f;color:#f1dfb6;min-height:44px}.sl-route-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;font:12px system-ui,sans-serif}.sl-route-list span{padding:9px;background:#9c874018;border:1px solid #9b855b55;border-radius:5px}.sl-route-list b{display:block;margin-top:4px}.sl-results>div{display:flex;align-items:center;gap:16px;margin:10px 0;padding:8px;background:#a4924620;border:1px solid #9e834d;border-radius:8px}.sl-results img{width:44px;height:44px}.sl-results b{font-size:22px;color:#efd086}.sl-results{margin-bottom:22px}
@media(min-width:1600px){.sl-game{grid-template-columns:220px minmax(0,1fr) 250px}.sl-number{font-size:26px}.sl-brand h1{font-size:27px}.sl-player img{width:69px;height:69px}.sl-player b{font-size:16px}}
@media(max-width:1080px){.sl-game{grid-template-columns:148px minmax(0,1fr) 172px;gap:9px}.sl-brand{padding:15px 6px}.sl-brand h1{font-size:18px}.sl-player{gap:5px;padding:10px 5px}.sl-player img{width:40px;height:40px}.sl-player b{font-size:12px}.sl-player small{font-size:9px}.sl-turn img{width:62px;height:62px}.sl-turn{padding:10px}.sl-roll-tray{padding:14px 8px;gap:12px}.sl-number{font-size:16px}}
@media(max-width:700px),(orientation:portrait){.sl-game{grid-template-columns:minmax(0,1fr);grid-template-rows:36px 47px minmax(0,min(calc(100vw - 16px),calc(var(--sl-height) - 244px - env(safe-area-inset-bottom)))) 94px 25px;align-content:start;grid-template-areas:"top" "players" "arena" "dock" "foot";padding:6px max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:7px}.sl-top{height:36px}.sl-icon{width:36px;height:35px;font-size:20px!important}.sl-brand{display:none}.sl-roster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:100%;gap:5px}.sl-players{display:block}.sl-player{padding:4px 3px;gap:4px;border-radius:7px}.sl-player img{width:28px;height:28px}.sl-player b{font:600 10px system-ui,sans-serif}.sl-player small{font:9px system-ui,sans-serif;margin-top:4px}.sl-player.active::after{font-size:6px;top:2px;right:4px}.sl-frame{padding:11px}.sl-frame::before{inset:7px}.sl-corner{width:15px;height:15px}.sl-corner::after{inset:3px}.sl-number{font-size:clamp(9px,3.1vw,16px);left:8%;top:7%}.sl-dock{display:grid;grid-template-columns:minmax(0,1fr) minmax(175px,52%);grid-template-rows:63px 24px;gap:7px;align-items:center;width:100%;max-width:660px;justify-self:center}.sl-turn{height:63px;border:0;border-radius:0;box-shadow:none;background:none;flex-direction:row;text-align:left;padding:0;gap:7px;overflow:hidden}.sl-turn img{width:39px;height:39px}.sl-turn>div{min-width:0}.sl-turn small{font-size:8px;letter-spacing:1.3px}.sl-turn strong{font-size:14px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sl-turn span{font-size:10px;margin-top:2px}.sl-recent,.sl-finishers{display:none}.sl-roll-tray{height:63px;display:grid;grid-template-columns:47px minmax(0,1fr);gap:8px;padding:6px 6px;align-items:center;border-radius:8px}.sl-die-button{width:43px;height:46px}.sl-die{width:39px;height:39px;gap:3px;padding:7px;border-radius:9px;box-shadow:inset 0 1px 1px #fff9,1px 3px 0 #92764f,2px 5px 4px #0008}.sl-roll{min-height:43px;max-height:47px;padding:5px 2px;font-size:18px!important;letter-spacing:1px;border-radius:7px}.sl-action{grid-column:1/-1;min-height:24px;max-height:24px;margin:0;font-size:10px;line-height:1.4;display:flex;align-items:center;justify-content:center}.sl-footer{font-size:10px}.sl-text{font-size:11px!important}.sl-route-list{font-size:11px}}
@media(orientation:landscape) and (max-height:600px){.sl-game{grid-template-columns:minmax(0,1fr) 180px;grid-template-rows:34px minmax(0,1fr) 24px;grid-template-areas:"top top" "arena dock" "foot foot";gap:6px;padding:5px 10px}.sl-top{height:34px}.sl-players{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.sl-dock{display:flex;gap:8px;max-width:none;align-self:stretch;justify-content:center}.sl-turn{flex-direction:row;padding:8px;gap:8px}.sl-turn img{width:42px;height:42px}.sl-turn strong{font-size:14px}.sl-turn small{font-size:8px}.sl-turn span{font-size:10px}.sl-recent{display:none}.sl-finishers:not(:empty){display:none}.sl-roll-tray{display:grid;grid-template-columns:48px minmax(0,1fr);padding:12px 8px;gap:10px}.sl-die-button{width:45px;height:45px}.sl-die{width:39px;height:39px;padding:7px;gap:3px}.sl-roll{font-size:16px!important;min-height:45px;letter-spacing:.8px;padding:4px}.sl-number{font-size:12px}.sl-frame{padding:10px}.sl-frame::before{inset:7px}.sl-corner{width:14px;height:14px}.sl-corner::after{inset:3px}.sl-action{font-size:10px;max-height:44px}.sl-icon{width:33px;height:31px}.sl-local{font-size:9px}}
@media(max-width:359px) and (orientation:portrait){.sl-game{gap:5px;grid-template-rows:34px 43px minmax(0,1fr) 90px 24px}.sl-player img{width:22px;height:22px}.sl-player b{font-size:9px}.sl-player small{font-size:8px}.sl-dock{grid-template-columns:minmax(0,1fr) 164px}.sl-turn img{display:none}.sl-number{font-size:10px}}
@media(prefers-reduced-motion:reduce){.sl-tumbling{animation:none!important}}
/* Short landscape still keeps all player positions visible. */
@media(orientation:landscape) and (max-height:600px){.sl-game{grid-template-rows:34px 38px minmax(0,1fr) 24px;grid-template-areas:"top top" "players dock" "arena dock" "foot foot"}.sl-players{position:static;left:auto;width:auto;height:38px;overflow:visible;display:block}.sl-brand{display:none}.sl-roster{height:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.sl-player{padding:4px;gap:5px;border-radius:6px}.sl-player img{width:26px;height:26px}.sl-player b{font-size:10px}.sl-player small{font-size:9px;margin-top:3px}}

/* RC9 online additions use the existing board; no raster screenshot layer. */
.sl-chat-button{position:relative;font-size:18px!important}
.sl-chat-button>span:empty{display:none}
.sl-chat-button>span{position:absolute;right:-4px;top:-4px;min-width:16px;padding:1px 3px;border-radius:8px;background:#ad322d;color:#fff;font:700 10px system-ui}
.sl-local.sl-offline i{background:#e2a15e}
.sl-top .sl-local{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-reconnect{position:absolute;inset:8px;z-index:35;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;background:#061c16d9;backdrop-filter:blur(3px);color:#f4e3bd}
.sl-reconnect h2{font-size:22px;margin:0 0 8px}.sl-reconnect p{font:12px/1.6 system-ui;margin:0 0 12px}
.sl-reconnect button{min-width:130px;padding:8px 14px}
.sl-vote{border:1px solid #c19466;border-radius:7px;padding:3px 8px;background:#522f21;color:#ffddb0;font:11px system-ui!important;min-height:28px;white-space:nowrap}
.sl-results strong small{display:block;font:11px system-ui;color:#d4c39d;margin-top:5px}
.sl-top .sl-icon{min-width:44px;width:44px;min-height:44px;height:44px}
.sl-game{grid-template-rows:44px minmax(0,1fr) 32px}
.sl-top{min-height:44px}
.sl-footer .sl-text{min-height:32px}
@media(max-width:700px),(orientation:portrait){
 .sl-game{grid-template-rows:44px 47px minmax(0,min(calc(100vw - 16px),calc(var(--sl-height) - 260px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))) 94px 32px;padding-top:max(6px,env(safe-area-inset-top));gap:7px}
 .sl-top{height:44px;gap:5px}.sl-top>div{gap:5px}.sl-local{font-size:9px}.sl-local i{margin-right:4px}
 .sl-die-button{min-height:44px;min-width:44px}.sl-roll{min-height:44px}
 .sl-footer .sl-vote{min-height:32px}
}
@media(orientation:landscape) and (max-height:600px){
 .sl-game{grid-template-rows:44px 38px minmax(0,1fr) 28px;grid-template-areas:"top top" "players dock" "arena dock" "foot foot";padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
 .sl-top{height:44px}.sl-footer .sl-text{min-height:28px}.sl-local{font-size:10px}
}
@media(max-width:359px) and (orientation:portrait){
 .sl-game{gap:5px;grid-template-rows:44px 43px minmax(0,1fr) 90px 28px}.sl-local{font-size:8px}.sl-top .sl-icon{min-width:40px;width:40px}.sl-footer .sl-text{min-height:28px}
}