:root {
    --snake-night: #08101a;
    --snake-blue: #315f82;
    --snake-blue-deep: #193b58;
    --snake-shell: #b9cbd5;
    --snake-lcd: #a9ba72;
    --snake-lcd-dark: #203222;
    --snake-lcd-mid: #617346;
    color-scheme: dark;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; }

html,
body {
    width: 100%;
    min-width: 320px;
    min-height: 100%;
    margin: 0;
    overflow: hidden;
    color: #edf5f8;
    background: #050a10;
}

button,
a {
    color: inherit;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}

button { cursor: pointer; }

[hidden] { display: none !important; }

.snake-shell {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 100dvh;
    background:
        radial-gradient(ellipse at 50% 33%, rgba(60, 106, 139, .2), transparent 45%),
        #050a10;
}

.snake-stage {
    position: relative;
    width: min(100%, calc(100dvh * .5625));
    height: 100dvh;
    min-height: 600px;
    overflow: hidden;
    background:
        linear-gradient(rgba(130, 170, 194, .035) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(90deg, rgba(130, 170, 194, .035) 1px, transparent 1px) 0 0 / 24px 24px,
        radial-gradient(circle at 50% 42%, #172939 0, #0b1622 48%, #060b12 100%);
    box-shadow: 0 0 0 1px rgba(119, 164, 191, .09), 0 0 80px rgba(36, 73, 98, .18);
    isolation: isolate;
}

.snake-stage::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.018), transparent 20% 80%, rgba(255,255,255,.018)),
        radial-gradient(ellipse at 50% 100%, rgba(96, 137, 163, .14), transparent 48%);
    content: "";
    pointer-events: none;
}

.snake-stage:fullscreen,
.snake-stage:-webkit-full-screen {
    width: min(100vw, calc(100dvh * .5625));
    height: 100dvh;
    margin: auto;
}

body.snake-pseudo-fullscreen .snake-stage {
    position: fixed;
    z-index: 9999;
    inset: 0;
    width: min(100vw, calc(100dvh * .5625));
    height: 100dvh;
    margin: auto;
}

.snake-ambience,
.snake-ambience i {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.snake-ambience i {
    top: auto;
    width: 170px;
    height: 170px;
    border: 1px solid rgba(128, 174, 200, .09);
    border-radius: 50%;
    filter: blur(.2px);
    animation: snake-orbit 18s linear infinite;
}

.snake-ambience i:nth-child(1) { right: -96px; bottom: 19%; }
.snake-ambience i:nth-child(2) { bottom: 6%; left: -118px; width: 230px; height: 230px; animation-duration: 27s; animation-direction: reverse; }
.snake-ambience i:nth-child(3) { top: 18%; right: -40px; left: auto; width: 80px; height: 80px; animation-duration: 12s; }

.snake-header {
    position: absolute;
    z-index: 10;
    top: max(11px, env(safe-area-inset-top));
    right: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 51px;
    padding: 7px 9px;
    border: 1px solid rgba(134, 177, 201, .16);
    border-bottom-color: rgba(147, 190, 207, .28);
    border-radius: 7px;
    background: rgba(7, 15, 24, .82);
    box-shadow: 0 7px 20px rgba(0,0,0,.19), inset 0 1px rgba(255,255,255,.035);
    backdrop-filter: blur(9px);
}

.snake-brand,
.snake-live {
    display: flex;
    align-items: center;
}

.snake-brand { gap: 9px; }
.snake-brand > span:last-child { display: grid; }
.snake-brand strong { font-size: clamp(10px, 3vw, 14px); letter-spacing: .14em; }
.snake-brand small { margin-top: 2px; color: #73899a; font-size: 5px; font-weight: 900; letter-spacing: .2em; }

.snake-brand__mark {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 6px);
    align-items: center;
    gap: 1px;
    width: 34px;
    height: 27px;
    padding: 5px 3px;
    border: 1px solid rgba(178, 203, 160, .44);
    border-radius: 4px;
    background: #9eb073;
    box-shadow: inset 0 0 0 2px rgba(31, 49, 34, .16);
}

.snake-brand__mark i {
    display: block;
    width: 6px;
    height: 6px;
    background: #243927;
}

.snake-brand__mark i:nth-child(2) { transform: translateY(5px); }
.snake-brand__mark i:nth-child(3) { transform: translateY(5px); }

.snake-live {
    display: grid;
    grid-template-columns: auto auto;
    gap: 2px 5px;
    text-align: right;
}

.snake-live i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #b8d580;
    box-shadow: 0 0 8px #9ebc6c;
    animation: snake-pulse .8s ease-in-out infinite alternate;
}

.snake-live span { color: #aecb78; font-size: 5px; font-weight: 950; letter-spacing: .14em; }
.snake-live strong { grid-column: 1 / 3; font-size: 10px; letter-spacing: .08em; }

.snake-phone {
    position: absolute;
    z-index: 3;
    top: calc(max(11px, env(safe-area-inset-top)) + 62px);
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 65px);
    left: 50%;
    display: grid;
    grid-template-rows: 9px 18px auto 32px minmax(0, 1fr);
    gap: 6px;
    width: min(calc(100% - 34px), 620px);
    height: min(calc(100% - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), 1150px);
    min-height: 455px;
    margin-block: auto;
    padding: 18px clamp(16px, 5vw, 25px) 13px;
    overflow: hidden;
    border: 1px solid rgba(231, 244, 249, .42);
    border-radius: 41% 41% 19% 19% / 10% 10% 7% 7%;
    background:
        linear-gradient(98deg, #678ba5 0, #adc3cf 12%, #d8e1e5 32%, #b9cbd5 67%, #7294aa 89%, #3e6684 100%);
    box-shadow:
        0 25px 38px rgba(0,0,0,.5),
        0 0 0 4px rgba(17, 39, 56, .58),
        inset 8px 0 13px rgba(255,255,255,.19),
        inset -12px 0 18px rgba(20, 48, 68, .2);
    transform: translateX(-50%);
}

.snake-phone::before {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 3.5%;
    left: 3.5%;
    height: 59%;
    border-radius: 44% 44% 27% 27% / 12% 12% 9% 9%;
    background:
        radial-gradient(ellipse at 48% 5%, rgba(122, 173, 205, .72), transparent 23%),
        linear-gradient(96deg, #173d5d, #326d97 17%, #224e71 54%, #163957 82%, #0f2c45);
    box-shadow: inset 0 -5px 13px rgba(5, 20, 31, .42), inset 0 1px rgba(255,255,255,.18);
    content: "";
}

.snake-phone::after {
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 42%;
    background: radial-gradient(ellipse at 50% 0, rgba(255,255,255,.3), transparent 56%);
    content: "";
    pointer-events: none;
}

.snake-phone > * { position: relative; z-index: 2; }

.snake-phone__shine {
    position: absolute;
    z-index: 1;
    top: -2%;
    left: 12%;
    width: 17%;
    height: 93%;
    border-radius: 50%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
    filter: blur(7px);
    pointer-events: none;
    transform: rotate(2deg);
}

.snake-speaker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.snake-speaker i {
    width: 17px;
    height: 3px;
    border-radius: 999px;
    background: #102d43;
    box-shadow: inset 0 1px 1px #071c2b, 0 1px rgba(255,255,255,.15);
}

.snake-phone__model {
    color: rgba(224, 239, 246, .92);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .13em;
    text-align: center;
    text-shadow: 0 1px #102d45;
}

.snake-phone__model span {
    margin-left: 4px;
    color: rgba(190, 217, 231, .65);
    font-size: 5px;
    letter-spacing: .18em;
}

.snake-screen-bezel {
    width: 100%;
    aspect-ratio: 84 / 48;
    padding: clamp(9px, 2.8vw, 14px);
    border: 1px solid rgba(8, 29, 43, .9);
    border-radius: 20% 20% 14% 14% / 28% 28% 21% 21%;
    background: linear-gradient(145deg, #0c2c44, #193f59 50%, #071e31);
    box-shadow: inset 0 0 0 3px rgba(112, 155, 180, .16), 0 7px 11px rgba(0,0,0,.3);
}

.snake-screen-glass {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 3px solid #263a35;
    border-radius: 6% / 10%;
    background: var(--snake-lcd);
    box-shadow:
        inset 4px 6px 9px rgba(42, 56, 36, .36),
        inset -2px -2px 5px rgba(225, 239, 171, .25),
        0 0 0 2px rgba(8, 23, 27, .45);
}

#snakeCanvas {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--snake-lcd);
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.snake-lcd-grid {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(25, 45, 29, .045) 1px, transparent 1px) 0 0 / 1.1905% 2.0833%,
        linear-gradient(90deg, rgba(25, 45, 29, .04) 1px, transparent 1px) 0 0 / 1.1905% 2.0833%;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.snake-lcd-glare {
    position: absolute;
    top: -30%;
    left: 7%;
    width: 22%;
    height: 160%;
    background: linear-gradient(90deg, transparent, rgba(240, 250, 207, .17), transparent);
    pointer-events: none;
    transform: rotate(24deg);
}

.snake-readout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    border: 1px solid rgba(13, 40, 57, .25);
    border-radius: 8px;
    background: rgba(216, 227, 231, .55);
    box-shadow: inset 0 1px rgba(255,255,255,.38);
}

.snake-readout span {
    display: grid;
    align-content: center;
    justify-items: center;
    border-right: 1px solid rgba(13, 40, 57, .16);
}

.snake-readout span:last-child { border-right: 0; }
.snake-readout small { color: #4a6676; font-size: 5px; font-weight: 950; letter-spacing: .14em; }
.snake-readout strong { margin-top: 2px; color: #142d3d; font-size: 11px; letter-spacing: .09em; }

.snake-input-area {
    min-height: 145px;
}

.snake-softkeys {
    position: absolute;
    top: 0;
    right: 2%;
    left: 2%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.snake-softkeys i {
    width: 31%;
    height: 18px;
    border-radius: 50% 50% 32% 32% / 68% 68% 38% 38%;
    background: linear-gradient(#dfe8eb, #819aaa);
    box-shadow: 0 2px 3px rgba(21, 45, 60, .4), inset 0 1px #f8fcfd;
}

.snake-softkeys span { color: #375261; font: 900 5px/1 Arial, sans-serif; letter-spacing: .13em; }

.snake-navigation {
    position: absolute;
    z-index: 3;
    top: 21px;
    left: 50%;
    width: clamp(72px, 28%, 104px);
    height: 42px;
    border-radius: 48%;
    background: linear-gradient(#2c5d7d, #143d5c);
    box-shadow: 0 4px 5px rgba(21, 45, 61, .5), inset 0 1px rgba(255,255,255,.26);
    transform: translateX(-50%);
}

.snake-navigation i,
.snake-navigation b {
    position: absolute;
    transition: transform .07s ease, filter .07s ease;
}

.snake-navigation i { width: 26%; height: 45%; }
.snake-navigation i::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    content: "";
    transform: translate(-50%, -50%);
}

.snake-navigation i:nth-child(1) { top: 0; left: 37%; }
.snake-navigation i:nth-child(1)::before { border-bottom-color: #b9cad3; transform: translate(-50%, -75%); }
.snake-navigation i:nth-child(2) { top: 27%; right: 0; }
.snake-navigation i:nth-child(2)::before { border-left-color: #b9cad3; transform: translate(-25%, -50%); }
.snake-navigation i:nth-child(3) { bottom: 0; left: 37%; }
.snake-navigation i:nth-child(3)::before { border-top-color: #b9cad3; transform: translate(-50%, -25%); }
.snake-navigation i:nth-child(4) { top: 27%; left: 0; }
.snake-navigation i:nth-child(4)::before { border-right-color: #b9cad3; transform: translate(-75%, -50%); }

.snake-navigation b {
    top: 50%;
    left: 50%;
    width: 23px;
    height: 16px;
    border-radius: 50%;
    background: #173b56;
    box-shadow: inset 0 1px rgba(255,255,255,.15);
    transform: translate(-50%, -50%);
}

.snake-navigation.is-up i[data-snake-direction="up"] { transform: translateY(2px); filter: brightness(.7); }
.snake-navigation.is-right i[data-snake-direction="right"] { transform: translateX(-2px); filter: brightness(.7); }
.snake-navigation.is-down i[data-snake-direction="down"] { transform: translateY(-2px); filter: brightness(.7); }
.snake-navigation.is-left i[data-snake-direction="left"] { transform: translateX(2px); filter: brightness(.7); }

.snake-call-keys {
    position: absolute;
    z-index: 2;
    top: 29px;
    right: 8%;
    left: 8%;
    display: flex;
    justify-content: space-between;
}

.snake-call-keys i {
    width: 26%;
    height: 17px;
    border-radius: 50%;
    background: linear-gradient(#7fa476, #3e6d52);
    box-shadow: 0 3px 4px rgba(19, 46, 54, .35), inset 0 1px rgba(255,255,255,.3);
    transform: rotate(8deg);
}

.snake-call-keys i:last-child { background: linear-gradient(#b87e76, #824846); transform: rotate(-8deg); }

.snake-keypad {
    position: absolute;
    top: 72px;
    right: 5%;
    bottom: auto;
    left: 5%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    aspect-ratio: 1;
    max-height: calc(100% - 72px);
    gap: clamp(3px, .7vh, 7px) clamp(10px, 3.5vw, 20px);
}

.snake-keypad i {
    display: grid;
    min-height: 15px;
    place-items: center;
    border: 1px solid rgba(49, 78, 94, .32);
    border-radius: 50% 50% 42% 42% / 63% 63% 40% 40%;
    color: #183446;
    background: linear-gradient(#e5ecee, #93aab7 72%, #6d8999);
    box-shadow: 0 3px 3px rgba(23, 48, 62, .34), inset 0 1px #fff;
    font-style: normal;
}

.snake-keypad b { font: 900 clamp(7px, 2.1vw, 11px)/1 Arial, sans-serif; }

.snake-event {
    position: absolute;
    z-index: 14;
    top: 45%;
    left: 50%;
    display: grid;
    min-width: 160px;
    padding: 9px 18px;
    border: 1px solid rgba(176, 203, 155, .42);
    border-radius: 4px;
    background: rgba(12, 27, 34, .92);
    box-shadow: 0 10px 28px rgba(0,0,0,.38);
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.9);
    transition: opacity .18s ease, transform .18s ease;
}

.snake-event.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.snake-event span { color: #9dbb71; font-size: 5px; font-weight: 950; letter-spacing: .2em; }
.snake-event strong { margin-top: 4px; font-size: 12px; letter-spacing: .13em; }

.snake-pause {
    position: absolute;
    z-index: 30;
    inset: 0;
    align-content: center;
    justify-items: center;
    padding: 30px;
    background: rgba(5, 11, 17, .9);
    text-align: center;
    backdrop-filter: blur(10px);
}

.snake-pause:not([hidden]) { display: grid; }
.snake-pause span { color: #b4d07e; font-size: 8px; font-weight: 950; letter-spacing: .22em; }
.snake-pause strong { margin: 9px 0 18px; font-size: 15px; }
.snake-pause button {
    min-width: 180px;
    min-height: 42px;
    border: 1px solid rgba(169, 195, 125, .55);
    border-radius: 5px;
    color: #18291d;
    background: #aec47e;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .08em;
}

.snake-controls {
    position: absolute;
    z-index: 24;
    right: 12px;
    bottom: max(11px, env(safe-area-inset-bottom));
    left: 12px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    height: 50px;
    overflow: hidden;
    border: 1px solid rgba(133, 174, 197, .2);
    border-radius: 8px;
    background: rgba(6, 14, 22, .89);
    box-shadow: 0 8px 22px rgba(0,0,0,.33);
    backdrop-filter: blur(10px);
}

.snake-controls a,
.snake-controls button {
    display: grid;
    min-width: 0;
    min-height: 44px;
    padding: 0;
    place-items: center;
    border: 0;
    border-right: 1px solid rgba(133, 174, 197, .12);
    color: #a9bac5;
    background: transparent;
    text-decoration: none;
}

.snake-controls > :last-child { border-right: 0; }
.snake-controls a:hover,
.snake-controls button:hover,
.snake-controls a:focus-visible,
.snake-controls button:focus-visible { color: #d8e8ee; background: rgba(151, 181, 121, .11); outline: none; }
.snake-controls svg { width: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.snake-controls span { color: #b7ce84; font-size: 9px; font-weight: 950; }
.snake-icon-play,
.snake-icon-muted,
.snake-icon-exit { display: none; }
.snake-controls button.is-paused .snake-icon-pause,
.snake-controls button.is-muted .snake-icon-sound { display: none; }
.snake-controls button.is-paused .snake-icon-play,
.snake-controls button.is-muted .snake-icon-muted { display: block; }
.snake-controls button.is-fullscreen .snake-icon-enter { display: none; }
.snake-controls button.is-fullscreen .snake-icon-exit { display: block; }

.snake-fullscreen {
    position: absolute;
    z-index: 20;
    right: 50%;
    bottom: calc(max(11px, env(safe-area-inset-bottom)) + 57px);
    display: grid;
    grid-template-columns: 26px auto;
    grid-template-rows: auto auto;
    min-width: 190px;
    min-height: 42px;
    padding: 6px 12px;
    border: 1px solid rgba(173, 200, 130, .35);
    border-radius: 999px;
    color: #dbe8d0;
    background: rgba(9, 21, 28, .92);
    box-shadow: 0 8px 20px rgba(0,0,0,.36);
    text-align: left;
    transform: translateX(50%);
    transition: opacity .2s ease, transform .2s ease;
    backdrop-filter: blur(8px);
}

.snake-fullscreen span { grid-row: 1 / 3; align-self: center; color: #b7cf83; font-size: 18px; }
.snake-fullscreen strong { font-size: 7px; letter-spacing: .12em; }
.snake-fullscreen small { color: #718490; font-size: 5px; }
.snake-fullscreen.is-hidden { opacity: 0; pointer-events: none; transform: translate(50%, 7px); }

@keyframes snake-pulse { to { opacity: .42; transform: scale(.72); } }
@keyframes snake-orbit { to { transform: rotate(360deg) scale(1.05); } }

@media (max-height: 690px) {
    .snake-stage { min-height: 0; }
    .snake-phone { top: 66px; bottom: 65px; height: auto; min-height: 420px; margin-block: 0; padding-top: 13px; grid-template-rows: 7px 14px auto 27px minmax(0, 1fr); gap: 4px; }
    .snake-phone__model { font-size: 9px; }
    .snake-input-area { min-height: 127px; }
    .snake-navigation { top: 17px; height: 35px; }
    .snake-call-keys { top: 24px; }
    .snake-keypad { top: 61px; }
    .snake-fullscreen { display: none; }
    .snake-controls { height: 46px; }
}

@media (max-height: 540px) {
    .snake-header { top: max(4px, env(safe-area-inset-top)); right: 7px; left: 7px; height: 39px; padding: 4px 7px; }
    .snake-brand__mark { width: 29px; height: 23px; transform: scale(.86); transform-origin: left center; }
    .snake-brand { gap: 4px; }
    .snake-brand small { display: none; }
    .snake-live strong { font-size: 8px; }
    .snake-phone {
        top: 48px;
        bottom: 49px;
        width: min(calc(100% - 18px), 620px);
        min-height: 0;
        padding: 8px 10px 6px;
        grid-template-rows: 6px 12px auto 22px minmax(0, 1fr);
        gap: 2px;
    }
    .snake-speaker i { width: 11px; height: 2px; }
    .snake-phone__model { font-size: 7px; }
    .snake-phone__model span { display: none; }
    .snake-screen-bezel { padding: 5px; }
    .snake-readout small { font-size: 4px; }
    .snake-readout strong { font-size: 7px; }
    .snake-input-area { min-height: 98px; }
    .snake-softkeys i { height: 11px; }
    .snake-softkeys span { display: none; }
    .snake-navigation { top: 13px; width: 64px; height: 27px; }
    .snake-call-keys { top: 18px; }
    .snake-call-keys i { height: 10px; }
    .snake-keypad { top: 47px; max-height: calc(100% - 47px); gap: 2px 8px; }
    .snake-keypad i { min-height: 8px; }
    .snake-controls { right: 7px; bottom: max(4px, env(safe-area-inset-bottom)); left: 7px; height: 40px; }
    .snake-controls a,
    .snake-controls button { min-height: 38px; }
    .snake-controls svg { width: 17px; }
}

@media (max-width: 350px) {
    .snake-phone { width: calc(100% - 26px); padding-right: 14px; padding-left: 14px; }
    .snake-header { right: 9px; left: 9px; }
    .snake-controls { right: 9px; left: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .snake-ambience i,
    .snake-live i { animation: none; }
    .snake-event,
    .snake-fullscreen,
    .snake-navigation i { transition: none; }
}