:root{--cell-size:3rem;--border-radius-snake:20%;--warning-color:gold;--snake-color:#32cd32;--secondary-color:64, 224, 208;--font-monospace:ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;font-family:ui-rounded,Hiragino Maru Gothic ProN,Quicksand,Comfortaa,Manjari,Arial Rounded MT,Arial Rounded MT Bold,Calibri,source-sans-pro,sans-serif;font-weight:400}html,body,main{min-height:100vh;margin:0}main{box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:1em;padding:1em;display:flex}#container{border:dashed 3px rgba(var(--secondary-color), 100%);background-color:rgba(var(--secondary-color), 20%);width:calc(10 * min(var(--cell-size), 9vw));grid-template-columns:repeat(10,1fr);transition:all 1s;display:grid;position:relative}.loose{filter:saturate(0)}#container:after{content:"";font-family:var(--font-monospace);text-transform:uppercase;opacity:0;justify-content:center;align-items:center;font-size:4em;transition:opacity 1s;display:flex;position:absolute;inset:0}#container.loose:after{content:"Perdu";opacity:1}[data-locale=en] #container.loose:after{content:"Game over"}.cell{height:min(var(--cell-size), 9vw);width:min(var(--cell-size), 9vw);border-radius:var(--border-radius-snake);box-sizing:border-box;transition:all .2s}.snake{background-color:var(--snake-color);border-radius:var(--border-radius-snake);border-color:#228b22}.snake[data-is-snake-head=""]{background-image:linear-gradient(45deg, var(--snake-color) 20%, rgba(35, 153, 35, calc(var(--part-percent) * 1% + 25%)) 20%, rgba(35, 153, 35, calc(var(--part-percent) * 1% + 25%)) 40%, var(--snake-color) 40%, var(--snake-color) 70%, rgba(35, 153, 35, calc(var(--part-percent) * 1% + 25%)) 70%, rgba(35, 153, 35, calc(var(--part-percent) * 1% + 25%)) 90%, var(--snake-color) 90%);background-size:clamp(10%, calc(100% - var(--part-percent) * 1%), 100%) clamp(10%, calc(100% - var(--part-percent) * 1%), 100%)}.snake[data-is-snake-head=yes]{border-radius:100%;position:relative}.snake[data-is-snake-head=yes]:before{content:"~" / "";z-index:-1;font-size:var(--cell-size);color:red;transition:all .2s;display:block;position:absolute;transform:rotate(90deg)translate(-7px,-2px)}[data-direction=top]{& .snake[data-is-snake-head=yes]{border-bottom-right-radius:var(--border-radius-snake);border-bottom-left-radius:var(--border-radius-snake)}& .snake[data-is-snake-head=yes]:before{transform:rotate(90deg)translate(-.6em,-.3em)}}[data-direction=right]{& .snake[data-is-snake-head=yes]{border-top-left-radius:var(--border-radius-snake);border-bottom-left-radius:var(--border-radius-snake)}& .snake[data-is-snake-head=yes]:before{transform:rotate(180deg)translate(-.7em)}}[data-direction=bottom]{& .snake[data-is-snake-head=yes]{border-top-right-radius:var(--border-radius-snake);border-top-left-radius:var(--border-radius-snake)}& .snake[data-is-snake-head=yes]:before{transform:rotate(270deg)translate(-.4em,.1em)}}[data-direction=left]{& .snake[data-is-snake-head=yes]{border-top-right-radius:var(--border-radius-snake);border-bottom-right-radius:var(--border-radius-snake)}& .snake[data-is-snake-head=yes]:before{transform:rotate(360deg)translate(-.4em,-.1em)}}.snake.appear{animation:.25s appear}@keyframes appear{0%{transform:scale(0)}to{transform:scale(1)}}.point{width:50%;height:50%;margin:calc(var(--cell-size) / 4);background-color:red;border-radius:30%}.preobstacle{border:dashed 3px var(--warning-color);background-size:100% 100%!important}.preobstacle[data-time-to-spawn="9"]{background-image:conic-gradient(#2228 10%,#0000 10%)}.preobstacle[data-time-to-spawn="8"]{background-image:conic-gradient(#2228 20%,#0000 20%)}.preobstacle[data-time-to-spawn="7"]{background-image:conic-gradient(#2228 30%,#0000 30%)}.preobstacle[data-time-to-spawn="6"]{background-image:conic-gradient(#2228 40%,#0000 40%)}.preobstacle[data-time-to-spawn="5"]{background-image:conic-gradient(#2228 50%,#0000 50%)}.preobstacle[data-time-to-spawn="4"]{background-image:conic-gradient(#2228 60%,#0000 60%)}.preobstacle[data-time-to-spawn="3"]{background-image:conic-gradient(#2228 70%,#0000 70%)}.preobstacle[data-time-to-spawn="2"]{background-image:conic-gradient(#2228 80%,#0000 80%)}.preobstacle[data-time-to-spawn="1"]{background-image:conic-gradient(#2228 90%,#0000 90%)}.preobstacle[data-time-to-spawn="0"]{background-image:conic-gradient(#2228 100%,#0000 100%)}.obstacle{background-color:#2228;background-image:linear-gradient(-45deg, transparent 33%, var(--warning-color) 33%, var(--warning-color) 66%, transparent 66%)}#infos,#pointsCounterCont{color:rgb(var(--secondary-color));text-align:center;text-transform:uppercase;font-size:2em}#pointsCounterCont{position:relative}#controlGrid{grid-template-areas:"void top void2""left bottom right";justify-content:center;margin-block-end:1em;display:grid}#controlGrid button{width:2em;height:2em}#pointsInfos{grid-template-columns:auto auto;justify-content:center;align-items:center;gap:1ch;display:grid}.legend{height:var(--cell-size);width:var(--cell-size);border-radius:var(--border-radius-snake);box-sizing:border-box;display:inline-block}.flyingPoints{font-size:2em;animation:2s both flyingPoints;position:absolute;left:100%}@keyframes flyingPoints{0%{opacity:.5;bottom:0;transform:scale(1)}to{opacity:0;bottom:20px;transform:scale(.5)}}.miniU{opacity:.7;font-size:40%;position:absolute;bottom:10px;right:65px}button,input{font-family:var(--font-monospace);font-weight:400;font-size:inherit;text-transform:inherit;border:3px ridge;padding:5px 10px;position:relative}button:not(:disabled):hover,input:not(:disabled):hover{color:inherit}button:disabled{filter:grayscale(.5)brightness(.5)}.growShrink{animation:2s linear infinite growShrink}@keyframes growShrink{0%,50%,to{transform:scale(1)}25%{transform:scale(.8)}75%{transform:scale(1.2)}}form{border:solid;margin-block:1em;padding:1em;font-size:.7em}input[type=submit]{margin-block-start:1em}@media print{.cell{print-color-adjust:exact}}