:root{background:#0b1421;color:#edf5ff;font-size:17px;--blue:#146447}body{min-height:100dvh;background:radial-gradient(ellipse at top,#19352f,#0b1421 75%)}main{max-width:540px;margin:auto;padding:8px 14px max(16px,env(safe-area-inset-bottom))}.title{padding:6px 0}.title h1{letter-spacing:-.5px}.title .icon{background:#203948;color:white}button{min-height:48px}button.secondary{background:#24384d;color:#f0f6ff}.toolbar{display:flex;gap:8px;margin:8px 0}.toolbar button{flex:1;font-size:16px;padding:9px}.scores{display:flex;justify-content:space-between;gap:12px;margin:14px 0;color:#acbdd0;font-size:15px}.scores strong{display:block;font-size:24px;color:white;font-variant-numeric:tabular-nums}.arena{position:relative;margin:auto}canvas{display:block;width:100%;background:#101e2e;border:1px solid #40576c;border-radius:12px;touch-action:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#0a1722cb;border-radius:12px;text-align:center;padding:18px;gap:12px}.overlay strong{font-size:27px}.overlay p{margin:0;max-width:280px;color:#d3e0ec}.overlay button{min-width:150px;background:#66e2a3;color:#103326}.hint{font-size:14px;text-align:center;color:#bbccde;margin:10px 0;min-height:20px}.direction{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,52px);justify-content:center;gap:8px}.direction button,.block-controls button{background:#243d50;color:#fff;user-select:none;touch-action:none;box-shadow:0 3px 0 #080f18;font-size:25px;padding:4px}.direction [data-direction=up]{grid-column:2}.direction [data-direction=left]{grid-column:1;grid-row:2}.direction [data-direction=down]{grid-column:2;grid-row:2}.direction [data-direction=right]{grid-column:3;grid-row:2}.bottom-actions{display:flex;gap:8px;margin:14px 0}.bottom-actions button{flex:1}.offline{color:#a8c0b5;text-align:center}.block-game{display:grid;grid-template-columns:minmax(0,1fr) 80px;gap:12px;max-width:380px;margin:auto}.block-game .arena{width:100%}.block-game aside{font-size:14px;color:#b9cde4}.block-game aside canvas{margin:6px 0 16px;border-radius:6px}.block-game aside button{padding:6px;font-size:14px;width:100%}.block-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:380px;margin:12px auto}.block-controls .drop{grid-column:1/5;font-size:18px;min-height:44px}.blocks{--blue:#59429c;background:radial-gradient(ellipse at top,#292447,#0b1421 75%)}.blocks .overlay button{background:#cbb0ff;color:#30244c}.blocks .scores{margin:8px 0}.blocks .scores strong{font-size:21px}.blocks .arena canvas{border-radius:5px}.blocks .overlay{border-radius:5px}.blocks .bottom-actions{max-width:380px;margin:10px auto}.blocks .hint{margin:7px 0}@media(max-height:760px) and (orientation:portrait){.snake .arena{max-width:min(100%,calc(100dvh - 355px))}.scores{margin:8px 0}.scores strong{font-size:21px}.bottom-actions{margin:10px 0}.blocks .block-game{max-width:calc((100dvh - 300px)/2 + 92px)}}@media(orientation:landscape) and (max-height:600px){main{max-width:900px;display:grid;grid-template-columns:1fr 1fr;column-gap:24px}.title,.toolbar,.scores,.hint,.direction,.block-controls,.bottom-actions,.offline{grid-column:2}.arena,.block-game{grid-column:1;grid-row:1/9;align-self:center}.snake .arena{width:min(100%,90dvh)}.block-game{width:min(100%,calc(44dvh + 92px))}.scores{margin:6px 0}.offline{margin:4px 0}.block-controls{width:100%}.bottom-actions{width:100%}}
dialog p{white-space:pre-line}
@media(orientation:portrait){.snake .arena{max-width:min(100%,calc(100dvh - 455px))}.blocks .block-game{max-width:min(380px,calc((100dvh - 450px)/2 + 92px))}}
@media(max-height:760px) and (orientation:portrait){main{padding-top:2px;padding-bottom:6px}.title{padding:2px 0}.title h1{font-size:24px}.title .icon{min-height:40px}.toolbar{margin:5px 0}.toolbar button{min-height:40px;padding:6px}.scores{margin:5px 0}.scores strong{font-size:19px}.hint{font-size:13px;margin:6px 0}.direction{grid-template-rows:repeat(2,44px);gap:6px}.direction button{min-height:44px}.bottom-actions{margin:8px 0}.bottom-actions button{min-height:42px}.offline{margin:6px 0}.snake .arena{max-width:min(100%,calc(100dvh - 390px))}.blocks .block-game{grid-template-columns:minmax(0,1fr) 60px;gap:8px;max-width:calc((100dvh - 365px)/2 + 68px)}.blocks .block-game aside{font-size:12px}.blocks .block-game aside canvas{margin:4px 0 8px}.blocks .block-game aside button{font-size:11px;padding:2px;min-height:40px}.block-controls{gap:6px;margin:7px auto}.block-controls button{min-height:42px}.overlay{padding:8px;gap:8px}.overlay strong{font-size:21px}.overlay p{font-size:13px}.overlay button{min-width:0;width:100%;padding:8px;font-size:16px}}
@media(orientation:landscape) and (max-height:600px){main{padding-top:2px;padding-bottom:2px;row-gap:0}.title{padding:0}.title .icon{min-height:36px}.toolbar{margin:3px 0}.toolbar button{min-height:38px;padding:5px}.scores strong{font-size:19px}.hint{margin:3px 0;font-size:12px}.direction{grid-template-rows:repeat(2,40px);gap:4px}.direction button{min-height:40px}.bottom-actions{margin:5px 0}.bottom-actions button{min-height:38px;padding:5px}.offline{margin:3px 0}.block-game{grid-template-columns:minmax(0,1fr) 60px;gap:8px;width:min(100%,calc(44dvh + 68px))}.block-game aside{font-size:12px}.block-game aside canvas{margin:3px 0 8px}.block-game aside button{min-height:34px;font-size:11px;padding:2px}.block-controls{margin:5px 0;gap:5px}.block-controls button{min-height:38px}.block-controls .drop{min-height:38px}.overlay{padding:8px}.overlay p{font-size:13px}.overlay button{min-width:0;width:100%}}