/* Le serpent des lettres */
.a-snake { background: linear-gradient(135deg, #3fa86b, #8aab2f); }
.snake-wrap { flex: 1; display: flex; flex-direction: column; gap: .4rem; min-height: 0; align-items: center; }
.snake-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: min(100%, 980px); }
.snake-target { display: inline-flex; align-items: center; gap: .6rem; background: rgba(255, 253, 244, .95); border: 4px solid #e7d8b0; border-radius: 999px; padding: .15rem 1rem .15rem .9rem; font-weight: 700; font-size: clamp(1rem, 2.6vmin, 1.4rem); box-shadow: var(--shadow); --tile: clamp(40px, 8vmin, 60px); }
.snake-tools { display: flex; gap: .4rem; }
.icon-btn.small { width: 2.6rem; height: 2.6rem; font-size: 1.2rem; }
.icon-btn.small.on { background: #d6f3df; border-color: #3fa86b; }
.snake-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem; max-width: min(100%, 720px); }
.snake-strip .sl { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; background: rgba(255, 255, 255, .55); color: #5a5a6a; }
.snake-strip .sl.done { background: #5fc08a; color: #fff; }
.snake-strip .sl.now { background: #ffd45c; color: var(--ink); transform: scale(1.3); box-shadow: 0 0 0 3px #fff; }
.snake-play { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; width: 100%; }
.snake-board { position: relative; --cell: 40px; aspect-ratio: var(--cols) / var(--rows); height: min(100%, 100vh); max-width: min(100%, 980px); max-height: 100%; border-radius: 1.2rem; border: 6px solid #fff; box-shadow: var(--shadow); overflow: hidden;
  background: repeating-conic-gradient(#a8dca0 0 25%, #96d08e 0 50%) 0 0 / calc(200% / var(--cols)) calc(200% / var(--rows)); }
.snake-board.paused { filter: saturate(.5); }
.snake-board.bitten { animation: shake .5s; }
@media (min-aspect-ratio: 1/1) { .snake-board { height: auto; width: min(82vw, calc((100vh - 17rem) * 1.5)); } }
@media (max-aspect-ratio: 1/1) { .snake-board { height: auto; width: min(92vw, calc((100vh - 24rem) * 8 / 11)); } }
.snake-start { position: absolute; left: 50%; top: 12%; translate: -50% 0; background: rgba(255, 253, 244, .95); border-radius: 999px; padding: .3em 1em; font-weight: 700; text-align: center; z-index: 5; max-width: 92%; pointer-events: none; animation: pxbob 1.8s ease-in-out infinite; }
.seg, .snake-item { position: absolute; left: 0; top: 0; width: var(--cell); height: var(--cell); display: flex; align-items: center; justify-content: center; will-change: transform; }
.seg { background: #3f9d52; border: 3px solid #2f7d4f; border-radius: 38%; box-sizing: border-box; z-index: 2; }
.seg.odd { background: #4caf7d; }
.seg.head { background: #2f8f4a; z-index: 4; border-radius: 45%; }
.seg .seg-tile { --tile: calc(var(--cell) * .86); border-width: 2px; box-shadow: none; }
.seg .seg-tile .g { font-size: calc(var(--cell) * .4); }
.seg.head .eyes { position: absolute; inset: 0; transform: rotate(var(--rot, 0rad)); }
.seg.head .eyes::before, .seg.head .eyes::after { content: ''; position: absolute; left: 58%; width: 24%; height: 24%; border-radius: 50%; background: #fff; border: 2px solid #1d3b2a; box-shadow: inset -2px 0 0 #1d3b2a; }
.seg.head .eyes::before { top: 16%; } .seg.head .eyes::after { bottom: 16%; }
.seg.head .tongue { position: absolute; inset: 0; transform: rotate(var(--rot, 0rad)); }
.seg.head .tongue::after { content: ''; position: absolute; left: 92%; top: 46%; width: 36%; height: 8%; background: #e0566a; border-radius: 4px; }
.snake-item { z-index: 3; transition: none; }
.snake-item .si { --tile: calc(var(--cell) * .92); animation: pxbob 1.6s ease-in-out infinite; }
.snake-item .si .g { font-size: calc(var(--cell) * .48); }
.snake-item.hint .si { box-shadow: 0 0 0 6px #ffd45c, var(--shadow); }
.dpad { display: grid; grid-template-columns: repeat(4, 3.6rem); grid-template-rows: 3.2rem; gap: .4rem; flex: none; }
.dp { border-radius: 1rem; background: #fffbe8; border: 3px solid #e7d8b0; font-size: 1.3rem; box-shadow: 0 4px 0 rgba(90, 60, 30, .22); touch-action: none; }
.dp:active { transform: translateY(2px); background: #d6f3df; }
.dp { grid-row: 1; }
.dp.left { grid-column: 1; } .dp.up { grid-column: 2; } .dp.down { grid-column: 3; } .dp.right { grid-column: 4; }
@media (min-aspect-ratio: 1/1) { .mode-snake .snake-wrap { padding-left: clamp(84px, 17vmin, 150px); } }

.snake-modes { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.sm-row { display: flex; gap: clamp(.6rem, 2.5vw, 1.4rem); flex-wrap: wrap; justify-content: center; }
.snake-mode { display: flex; flex-direction: column; align-items: center; gap: .3rem; width: clamp(150px, 26vmin, 230px); padding: 1rem .8rem; border-radius: 1.6rem; color: #fff; border: 4px solid rgba(255, 255, 255, .85); box-shadow: 0 7px 0 rgba(40, 30, 20, .25), 0 14px 26px rgba(40, 30, 20, .2); text-align: center; }
.snake-mode:active { transform: translateY(4px); }
.snake-mode.last { outline: 5px solid #ffd45c; outline-offset: 3px; }
.sm-icon { font-size: clamp(2.6rem, 8vmin, 4rem); filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .2)); }
.sm-name { font-weight: 700; font-size: clamp(1.2rem, 3vmin, 1.7rem); text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.sm-text { font-size: clamp(.85rem, 2vmin, 1.05rem); }
.snake-mode.m-easy { background: linear-gradient(135deg, #4caf7d, #2f8f6a); }
.snake-mode.m-normal { background: linear-gradient(135deg, #f59e42, #e0743a); }
.snake-mode.m-hard { background: linear-gradient(135deg, #8a63d2, #b0457f); }

.snake-start { width: 88%; border-radius: 1rem; font-size: .85rem; top: 4%; }