/* ---------- SNAKES & LADDERS ---------- */
.cab[data-world="snakes"]{--w1:#DDFBEC;--w2:#93E6C3}
.cab[data-world="snakes"] .cab-world{background:
  radial-gradient(circle at 1px 1px,rgba(26,16,51,.07) 2.4px,transparent 3px) 0 0/42px 42px,
  radial-gradient(ellipse 180px 120px at 4% 104%,rgba(39,225,160,.55),transparent 70%),
  radial-gradient(ellipse 220px 130px at 98% 106%,rgba(31,196,138,.45),transparent 70%)}

.sl-game{position:absolute;inset:0;container-type:size}
.sl-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2.4cqh,22px);padding:4px 12px min(90px,12cqh)}
.sl-game .sl-board{--bs:min(94cqw,100cqh - 170px,620px);position:relative;flex:none;width:var(--bs);height:var(--bs);border:var(--bd);border-radius:20px;box-shadow:0 7px 0 var(--ink);background:#FFFBF2;overflow:hidden}
.sl-game .sl-cells{position:absolute;inset:0;display:grid;grid-template:repeat(6,1fr)/repeat(6,1fr)}
.sl-game .sl-cell{position:relative;background:var(--cc);border:0;border-radius:0;padding:0;color:var(--ink);transition:background .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.sl-game .sl-cell:disabled{cursor:default}
.sl-game .sl-cell::after{content:"";position:absolute;inset:7%;border-radius:22%;border:3px dashed transparent;transition:border-color .2s,background .2s}
.sl-game .sl-cell.sl-ask{cursor:pointer}
.sl-game .sl-cell.sl-ask::after{border-color:rgba(26,16,51,.55);background:rgba(255,255,255,.55);animation:slAsk 1s ease-in-out 4 alternate backwards;animation-delay:calc(var(--k)*70ms)}
.sl-game .sl-cell.sl-ask:hover::after,.sl-game .sl-cell.sl-ask:focus-visible::after{background:var(--sun);border-style:solid;border-color:var(--ink)}
.sl-game .sl-cell:focus-visible{outline:4px solid var(--grape);outline-offset:-4px;border-radius:6px}
@keyframes slAsk{from{transform:scale(.86);opacity:.4}}
.sl-game .sl-cell.sl-yes::after{background:var(--mint);border:3px solid var(--ink);animation:slPop .5s var(--spring)}
.sl-game .sl-cell.sl-nope::after{background:#FFB3C8;border:3px solid var(--ink);animation:slNope .45s}
@keyframes slPop{from{transform:scale(.4)}}
@keyframes slNope{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.sl-game .sl-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.sl-game .sl-tok{position:absolute;left:0;top:0;width:12.5%;aspect-ratio:1;transform:translate(-50%,-56%);pointer-events:none;z-index:2;filter:drop-shadow(0 3px 0 rgba(26,16,51,.25))}
.sl-game .sl-tok svg{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 90%}
.sl-game .sl-tok.sl-sq svg{animation:slSquash .28s ease-out}
@keyframes slSquash{35%{transform:scale(1.18,.8)}70%{transform:scale(.94,1.06)}}
.sl-game .sl-tok.sl-champ svg{animation:slChamp .7s var(--spring)}
@keyframes slChamp{50%{transform:scale(1.5) rotate(-10deg)}}

.sl-side{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(14px,4cqw,26px)}
.sl-game .sl-who{width:clamp(44px,12cqw,58px);aspect-ratio:1;padding:6px;border-radius:50%;background:rgba(255,255,255,.55);border:3px solid rgba(26,16,51,.25);opacity:.55;transform:scale(.88);transition:transform .3s var(--spring),opacity .3s,background .3s,border-color .3s}
.sl-game .sl-who svg{display:block;width:100%;height:100%;overflow:visible}
.sl-game .sl-who.sl-on{opacity:1;transform:scale(1);background:#fff;border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.sl-game .sl-diebox{position:relative}
.sl-game .sl-die{display:block;width:clamp(78px,22cqw,100px);aspect-ratio:1;padding:6px;background:#fff;border:var(--bd);border-radius:26%;box-shadow:0 6px 0 var(--ink),inset 0 -7px 0 rgba(26,16,51,.08);transition:transform .15s var(--spring),box-shadow .15s,background .2s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.sl-game .sl-die svg{display:block;width:100%;height:100%}
.sl-game .sl-die circle{fill:var(--ink);transition:r .15s}
.sl-game .sl-die circle.sl-pip{fill:var(--orange);stroke:var(--ink);stroke-width:3}
.sl-game .sl-die[aria-disabled="false"]:hover{transform:translateY(-3px) rotate(-4deg)}
.sl-game .sl-die[aria-disabled="false"]:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}
.sl-game .sl-die[aria-disabled="true"]{cursor:default}
.sl-game .sl-die.sl-otn{background:#FFE6D6}
.sl-game .sl-die.sl-roll{animation:slRoll .5s ease-in-out}
.sl-game .sl-die.sl-land{animation:slLand .32s var(--spring)}
@keyframes slRoll{20%{transform:rotate(-16deg) translateY(-8px)}45%{transform:rotate(14deg) translateY(-12px)}70%{transform:rotate(-8deg) translateY(-4px)}}
@keyframes slLand{40%{transform:scale(1.12,.9)}}
.sl-game .sl-hand{left:62%;top:52%}

/* wide screens: die panel beside the board */
@container (min-aspect-ratio:5/4){
  .sl-wrap{flex-direction:row;justify-content:center;align-items:center;gap:clamp(20px,4cqw,56px);padding:8px 24px 24px}
  .sl-game .sl-board{--bs:min(100cqh - 48px,100cqw - 260px,640px)}
  .sl-side{flex-direction:column}
}

/* cartridge */
.cart:hover .a-snk,.cart:focus-visible .a-snk{animation:slArtSnk 1.1s ease-in-out infinite alternate}
@keyframes slArtSnk{to{transform:translate(-3px,4px)}}

@media (prefers-reduced-motion:reduce){.sl-game *{animation-duration:.01ms!important}}