.game-sound{display:flex;gap:7px;align-items:center;white-space:nowrap;font-size:11px;color:#d4e2df;cursor:pointer;margin-inline-start:10px}.game-sound input{accent-color:#7bddbc;width:17px;height:17px;cursor:pointer}
.game-snakes{background:#101d22;background-image:repeating-linear-gradient(30deg,transparent 0,transparent 3px,#ffffff02 3px,#ffffff02 4px)}
.game-snakes .lab-main{padding:14px 20px 20px}.snakes-game{max-width:760px}.snakes-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.snakes-heading h1{font-size:24px;margin:3px 0;color:#f4f3df}.snakes-heading small{font-size:10px;color:#93aca8}.race-target{display:flex;gap:9px;align-items:center;font-size:25px;font-weight:800;color:#edc67e}.race-target small{font-weight:400}
.snakes-top{padding:6px 0 14px;gap:10px}.snakes-top>div{border:1px solid #3c5558;background:#1d3035;min-width:140px;padding:8px 12px;border-radius:6px;gap:10px}.snakes-top>div.active{border-color:#c6dd98;background:#263d3b;box-shadow:inset 0 -2px #c6dd98}.snakes-top>div>span:not(.token-key){display:flex;flex-direction:column;gap:3px}.snakes-top small{font-size:9px;color:#a3b8b5}.snakes-top b{font-size:21px;margin-inline-start:auto;font-family:Arial,sans-serif}.snakes-top strong{font-size:12px;color:#d3e4ce;font-weight:500;max-width:230px}.token-key{width:23px;height:23px;border:2px solid #ffffff9c;box-shadow:inset -3px -3px 4px #0005,0 2px 3px #0006}
.snakes-frame{padding:15px;border:1px solid #a29e7f;border-radius:8px;background:repeating-linear-gradient(2deg,#334744 0,#49615a 2px,#354c46 4px,#29423b 7px);box-shadow:inset 0 0 0 4px #172b25,inset 0 0 0 6px #9b9c77,0 20px 36px #0006;width:min(100%,calc(100dvh - 250px));margin:auto;box-sizing:border-box;position:relative}
.snakes-frame:before,.snakes-frame:after{content:'';position:absolute;top:5px;width:5px;height:5px;background:#c8b477;border-radius:50%;box-shadow:0 1px 2px #000}.snakes-frame:before{left:5px}.snakes-frame:after{right:5px}
.snakes-frame .snakes-board{width:100%;border:2px solid #b8c2a2;border-radius:2px;box-shadow:inset 0 0 14px #31492c80;isolation:isolate}
.snake-cell{border:0;box-shadow:inset 0 0 0 .5px #70866a55,inset 0 1px 0 #fff9;background-image:repeating-linear-gradient(0deg,transparent 0,transparent 2px,#fff1 2px,#fff1 3px)}
.snake-cell.tone-0{background-color:#cde0d0}.snake-cell.tone-1{background-color:#f4e9c9}.snake-cell.tone-2{background-color:#d6e4ed}.snake-cell.tone-3{background-color:#eee0cd}
.snake-cell span{font-size:11px;line-height:14px;color:#3b534c;top:2px;left:3px;z-index:2;text-shadow:0 1px #fff9}.finish-cell{background-color:#ddcc81!important}.finish-cell:after{content:'';position:absolute;inset:30%;background:repeating-conic-gradient(#586855 0% 25%,#f6edbd 0% 50%) 0 0/8px 8px;border:1px solid #667052;opacity:.6}
.snake-cell.event-cell{z-index:1;animation:tile-pulse .55s ease-out 2}.snake-cell.event-cell:after{content:'';position:absolute;inset:12%;border-radius:50%;border:2px solid #fff4a5;box-shadow:0 0 0 4px #ffdd7f55,0 0 16px #ffdc7b;z-index:3}.snake-cell.event-cell.snake:after{border-color:#ff9d9d;box-shadow:0 0 0 4px #ff777755,0 0 16px #ff7777}@keyframes tile-pulse{50%{filter:brightness(1.27)}}
.snakes-frame .board-token{width:4.5%;background:none;border:0;box-shadow:none;aspect-ratio:.72;transform:translate(-50%,-60%);isolation:isolate;transition:none;display:block}
.board-token:before{content:'';position:absolute;bottom:0;width:100%;height:36%;border-radius:50%;background:radial-gradient(ellipse at 35% 25%,#ffaaaa,#a92846 70%);box-shadow:0 2px 0 #70213a,2px 4px 4px #0006;border:1px solid #ffe1d999}
.board-token:after{content:'';position:absolute;left:22%;width:56%;top:20%;height:58%;border-radius:35% 35% 25% 25%;background:linear-gradient(90deg,#a82d48,#ff899c 38%,#c23b54 75%);z-index:1}
.board-token>i{position:absolute;width:61%;aspect-ratio:1;top:0;left:19.5%;border-radius:50%;background:radial-gradient(circle at 32% 26%,#ffe0da,#f76587 40%,#9c2647);box-shadow:0 1px 1px #761e44;border:1px solid #ffffff80;z-index:2}.board-token>b{position:absolute;inset:22% 0 0;text-align:center;z-index:3;font-size:10px;line-height:22px;text-shadow:0 1px 2px #000}
.board-token.player-1:before{background:radial-gradient(ellipse at 35% 25%,#bddcfc,#216bb2 70%);box-shadow:0 2px 0 #153e73,2px 4px 4px #0006}.board-token.player-1:after{background:linear-gradient(90deg,#21548b,#7dccf2 38%,#2874b2 75%)}.board-token.player-1>i{background:radial-gradient(circle at 32% 26%,#ecffff,#72c6eb 40%,#255698);box-shadow:0 1px 1px #17364f}
.snakes-bottom{padding:16px 0 0;gap:15px}.snakes-bottom #snakeRoll{background:linear-gradient(#cae9b3,#9ac791);border:1px solid #daebbd;box-shadow:0 3px 0 #42644c,0 5px 10px #0004;min-width:170px;height:46px;font-weight:700;font-size:14px}.snakes-bottom #snakeReset{background:#253c3c;border:1px solid #55706b;color:#d5e4d7;min-width:44px;padding:0;font-size:24px;box-shadow:0 2px 0 #091f1c}.dice-pedestal{width:58px;height:55px;display:grid;place-items:center}.dice-pedestal .live-die{width:42px;rotate:-8deg}.dice-in-motion{animation:dice-rock .25s ease-in-out alternate 2}
@keyframes dice-rock{to{rotate:12deg;translate:0 -3px}}
@media(max-width:700px){.game-tarneeb .lab-header nav,.game-hand .lab-header nav{width:auto;flex:1;min-width:0}.game-sound{margin:0;gap:4px;font-size:10px;flex-shrink:0}.game-sound input{width:16px;height:16px}.game-snakes .lab-main{padding:12px 8px!important}.snakes-heading{padding:0 3px;margin-bottom:5px}.snakes-heading h1{font-size:21px}.snakes-heading small{font-size:9px}.race-target{font-size:23px}.snakes-top{gap:5px;padding:6px 0 10px}.snakes-top>div{min-width:98px;padding:6px;gap:6px}.snakes-top b{font-size:17px}.snakes-top strong{font-size:10px;line-height:1.6}.snakes-top small{font-size:8px}.token-key{width:18px;height:18px}.snakes-frame{width:100%;padding:10px}.snake-cell span{font-size:8px;line-height:10px;top:1px;left:2px}.snakes-frame .board-token{width:4.8%}.board-token>b{font-size:8px;line-height:16px}.snakes-bottom{padding:14px 0}.snakes-bottom #snakeRoll{min-width:155px}.snakes-frame .snakes-board{border-width:1px}}
@media(max-height:550px) and (orientation:landscape){.game-snakes .snakes-game{display:grid;grid-template-columns:minmax(280px,1fr) 230px;gap:10px;max-width:900px;direction:ltr}.snakes-heading{grid-column:2;grid-row:1;direction:rtl}.snakes-top{grid-column:2;grid-row:2;flex-wrap:wrap;direction:rtl;align-content:center}.snakes-top strong{order:3;max-width:none;width:100%}.snakes-frame{grid-column:1;grid-row:1/4;width:min(100%,calc(100dvh - 85px));padding:8px}.snakes-bottom{grid-column:2;grid-row:3;flex-wrap:wrap;align-content:center;padding:0;direction:rtl}.snakes-bottom #snakeRoll{min-width:130px}.game-snakes .lab-main{padding:8px!important}.snakes-top>div{min-width:100px}.snakes-heading h1{font-size:20px}}
@media(prefers-reduced-motion:reduce){.dice-in-motion{animation:none}}
.snakes-frame{width:min(100%,calc(100dvh - 320px))}
@media(max-width:700px){.snakes-frame{width:100%}}
@media(max-height:550px) and (orientation:landscape){.game-snakes .lab-header{height:42px;min-height:42px;padding:4px 10px}.game-snakes .lab-brand{display:none}.game-snakes .snakes-game{grid-template-columns:minmax(250px,1fr) 260px;grid-template-rows:48px 115px 1fr;height:calc(100dvh - 65px)}.snakes-frame{width:min(100%,calc(100dvh - 75px));align-self:center}.snakes-top{justify-content:space-between;gap:5px;padding:0}.snakes-top>div{min-width:113px;padding:6px}.snakes-bottom{gap:10px;flex-wrap:nowrap}.snakes-bottom #snakeRoll{min-width:122px}.dice-pedestal{width:44px}}