.snake-dialog{box-sizing:border-box;width:min(96vw,470px);max-height:98vh;padding:8px}
.snake-overlay-close{position:absolute;z-index:8;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));display:grid;place-items:center;width:44px;height:44px;border:3px solid var(--ink);border-radius:4px;padding:0;background:var(--red);color:var(--comic-paper-light);box-shadow:4px 4px 0 var(--ink);font:900 32px/1 Comic,Arial,sans-serif;cursor:pointer;touch-action:manipulation}.snake-overlay-close:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}.snake-overlay-close:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}.snake-overlay-close:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.snake-phone{position:relative;width:min(100%,410px,42vh);aspect-ratio:831/1893;margin:auto;border:0;border-radius:0;padding:0;background:transparent;box-shadow:none;color:#202521;font-family:Arial,sans-serif}
.snake-phone-photo{position:absolute;z-index:3;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.snake-phone-speaker,.snake-phone-brand{display:none}
.snake-screen-shell{position:absolute;z-index:2;top:calc(27.2% - 10px);left:calc(18.4% - 10px);width:calc(63.2% + 20px);height:calc(19.25% + 20px);margin:0;border:0;border-radius:0;padding:1.7% 1.8% 1.1%;background:#829571;box-shadow:none;transform:none;overflow:hidden}
.snake-screen-head{position:absolute;z-index:2;right:0;bottom:3%;left:0;display:flex;justify-content:center;gap:5px;height:auto;margin:0;font:700 clamp(7px,2.1vw,10px)/1 Arial,sans-serif;text-align:center;text-transform:uppercase}
.snake-screen{display:block;width:100%;height:82%;aspect-ratio:auto;border:0;background:#829571;image-rendering:pixelated;touch-action:none}
.snake-screen:focus-visible{outline:0}
.snake-message{position:absolute;z-index:2;right:0;bottom:11%;left:0;height:auto;min-height:0;margin:0;font:700 clamp(7px,2vw,10px)/1 Arial,sans-serif;text-align:center;text-transform:uppercase}
.snake-soft-keys{position:absolute;z-index:5;top:52%;left:14%;display:grid;grid-template-columns:29% 42% 29%;gap:0;width:72%;height:12.5%;margin:0}
.snake-soft-keys button,.snake-keypad button{width:100%;height:100%;min-height:0;border:0;border-radius:40%;padding:0;background:transparent;color:transparent;box-shadow:none;cursor:pointer;touch-action:manipulation}
.snake-soft-keys button:nth-child(2){border-radius:40%;background:transparent;color:transparent}
.snake-keypad{position:absolute;z-index:5;top:64.3%;left:12.4%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:1.4% 7%;width:75.2%;height:29.3%;transform:rotate(-.3deg)}
.snake-keypad button{border-radius:50%}
.snake-keypad button[data-snake-direction]{background:transparent}
.snake-soft-keys button:active,.snake-keypad button:active{background:transparent;transform:none;box-shadow:none}
.snake-soft-keys button:focus,.snake-soft-keys button:focus-visible,.snake-keypad button:focus,.snake-keypad button:focus-visible{outline:0;background:transparent;box-shadow:none}
.snake-help{position:absolute;z-index:4;right:8px;bottom:7px;margin:0;font:700 10px/1.3 Arial,sans-serif}
.snake-help span{display:none;width:190px;border:2px solid var(--ink);padding:7px;background:var(--yellow);box-shadow:3px 3px 0 var(--ink)}
.snake-help:hover span{display:block}
@media(max-width:590px){html.snake-game-open,body.snake-game-open{overflow:hidden}.snake-dialog[open]{inset:0;display:grid;place-items:center;width:100dvw;max-width:none;height:100dvh;max-height:none;margin:0;padding:4px;overflow:hidden}.snake-overlay-close{top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));width:42px;height:42px}.snake-phone{width:min(calc(100dvw - 8px),calc((100dvh - 8px)*831/1893));max-width:390px;padding:0}.snake-screen{max-height:none;border-width:1px}.snake-keypad button{min-height:0}}

.snake-keypad button[data-snake-direction]{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.snake-colours{position:relative;display:flex;justify-content:center;gap:8px;margin:12px auto 4px;width:max-content;max-width:100%;z-index:7}
.snake-colours button{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:48px;min-height:56px;border:2px solid transparent;border-radius:7px;padding:5px;background:#202521;color:#fff;font:700 11px/1.2 Arial,sans-serif;cursor:pointer;touch-action:manipulation}
.snake-colours button::before{content:"";display:block;width:24px;height:24px;border:2px solid #fff;border-radius:50%;background:var(--case-colour)}
.snake-colours button[aria-pressed="true"]{border-color:#fff}
.snake-colours button:focus-visible{outline:3px solid #ffda00;outline-offset:2px}
.snake-phone{width:min(100%,410px,calc((100dvh - 100px)*831/1893))}
@media(max-width:590px){.snake-dialog[open]{grid-template-rows:minmax(0,1fr) auto;align-content:center;padding:8px 4px max(8px,env(safe-area-inset-bottom))}.snake-phone{width:min(calc(100dvw - 8px),calc((100dvh - 100px - env(safe-area-inset-bottom))*831/1893));max-width:390px}.snake-colours{margin:4px auto 0}}