/* =============================================================
   GAME: Animal Link
   ============================================================= */
.board-animallink { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; }
.al-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.al-top { display: flex; align-items: center; gap: 10px; width: var(--fw, 100%); max-width: 100%; }
.al-timer {
  position: relative; flex: 1; min-width: 80px; height: 14px; border-radius: 999px; overflow: hidden;
  background: #1c1030; box-shadow: inset 0 0 0 1px rgba(255, 154, 92, .35), inset 0 2px 4px rgba(0, 0, 0, .6);
}
.al-timer-fill {
  position: absolute; inset: 2px; border-radius: inherit; transform-origin: 0 50%;
  background: linear-gradient(90deg, #ff5c8a, #ff9a5c 45%, #ffd23f); box-shadow: 0 0 10px rgba(255, 154, 92, .7);
}
.al-timer-fill::after { content: ""; position: absolute; inset: 0 0 50% 0; border-radius: inherit; background: rgba(255, 255, 255, .28); }
.al-low .al-timer-fill { background: linear-gradient(90deg, #ff2d55, #ff5c5c); animation: alLow .7s ease-in-out infinite; }
@keyframes alLow { 50% { opacity: .55; } }
.al-tools { display: flex; gap: 6px; }
.al-tool {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 12px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 .86rem var(--font-body); color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(255, 154, 92, .45), 0 3px 0 rgba(0, 0, 0, .35);
}
.al-tool svg { width: 18px; height: 18px; fill: #ffb27a; }
.al-tool:hover:not(:disabled) { box-shadow: inset 0 0 0 1px #ff9a5c, 0 0 14px rgba(255, 154, 92, .4), 0 3px 0 rgba(0, 0, 0, .35); }
.al-tool:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 0 0 1px #ff9a5c, 0 1px 0 rgba(0, 0, 0, .35); }
.al-tool:disabled { opacity: .45; cursor: default; }
.al-tool:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.al-badge { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font-size: .75rem; color: #2a1200; background: #ffb27a; }
.al-tool-pause { padding: 6px 10px; }
.al-tool-pause[aria-pressed="true"] svg { fill: #fff; }
@media (max-width: 520px) {
  .al-top { flex-wrap: wrap; }
  .al-timer { flex-basis: 100%; order: 2; }
  .al-tools { width: 100%; }
  .al-tool { flex: 1; justify-content: center; }
  .al-tool-pause { flex: 0 0 auto; }
}

.al-field {
  --cw: 40px; --ch: 46px;
  position: relative; border-radius: 14px; outline: none; touch-action: manipulation;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 154, 92, .12), transparent 60%),
    linear-gradient(180deg, #24112e, #160a22);
  box-shadow: 0 0 0 2px #ff9a5c, 0 0 26px rgba(255, 154, 92, .32), inset 0 -5px 0 rgba(0, 0, 0, .3);
}
.al-field:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 26px rgba(255, 154, 92, .5); }
.al-tiles { position: absolute; left: calc(var(--cw) / 2); top: calc(var(--ch) / 2); }
.al-tile {
  position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); padding: 1.5px; border: 0; background: none; cursor: pointer;
  transition: transform .22s cubic-bezier(.3, .8, .4, 1); -webkit-tap-highlight-color: transparent;
}
.al-tile.al-still { transition: none; }
.al-face {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: calc(var(--cw) * .18);
  background: linear-gradient(160deg, #fffdf6, #fbeed6 60%, #f1dcb8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), inset 0 -3px 0 #dcc196, 0 2px 0 #9c7a4c, 0 4px 6px rgba(0, 0, 0, .45);
  transition: transform .12s, box-shadow .12s;
}
.al-face svg { width: 88%; height: 88%; overflow: visible; }
.al-tile:hover .al-face { transform: translateY(-1px); box-shadow: inset 0 0 0 1px #fff, inset 0 -3px 0 #dcc196, 0 3px 0 #9c7a4c, 0 0 12px rgba(255, 210, 63, .45); }
.al-sel { z-index: 2; }
.al-sel .al-face {
  transform: translateY(-3px) scale(1.06);
  background: linear-gradient(160deg, #fffbe0, #ffe9a8);
  box-shadow: 0 0 0 3px #ffd23f, 0 0 18px 2px rgba(255, 154, 92, .8), inset 0 -3px 0 #e0b860, 0 5px 0 #9c7a4c;
}
.al-hint .al-face { box-shadow: 0 0 0 3px #3de8ff, 0 0 16px rgba(61, 232, 255, .8), inset 0 -3px 0 #dcc196; animation: alHint 1s ease-in-out infinite; }
@keyframes alHint { 50% { transform: translateY(-2px) scale(1.05); } }
.al-no .al-face { animation: alNo .32s ease; }
@keyframes alNo { 25% { translate: -3px 0; box-shadow: 0 0 0 3px #ff3d5e; } 75% { translate: 3px 0; } }
.al-gone { pointer-events: none; z-index: 3; }
.al-gone .al-face { animation: alGone .42s ease-in forwards; }
@keyframes alGone { 0% { transform: scale(1.08); box-shadow: 0 0 0 3px #fff, 0 0 26px #ffd23f; } 45% { transform: scale(1.22); filter: brightness(1.3); } 100% { transform: scale(.2) rotate(18deg); opacity: 0; } }
.al-shuf .al-face { animation: alShuf .45s ease; }
@keyframes alShuf { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg) scale(.9); } 100% { transform: rotateY(0); } }
.al-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 4; opacity: 0; }
.al-lines.al-fade { animation: alLine .5s ease-out forwards; }
.al-lines polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.al-lines .al-glow { stroke: #ff9a5c; stroke-width: 9; opacity: .55; filter: blur(3px); }
.al-lines .al-core { stroke: #fff6c8; stroke-width: 3.5; }
.al-lines circle { fill: #ffd23f; }
@keyframes alLine { 0% { opacity: 1; } 65% { opacity: 1; } 100% { opacity: 0; } }
.al-cursor {
  position: absolute; left: calc(var(--cw) / 2); top: calc(var(--ch) / 2); width: var(--cw); height: var(--ch); border-radius: 9px; pointer-events: none; z-index: 5;
  box-shadow: 0 0 0 3px #fff, 0 0 12px #3de8ff; opacity: 0; transition: transform .1s;
}
.al-field.al-kbd:focus .al-cursor { opacity: 1; }
.al-paused .al-tiles { filter: blur(10px) brightness(.5); }
.al-over .al-tile { cursor: default; }
.al-over .al-face { filter: grayscale(.6) brightness(.8); }
.board-animallink { position: relative; }
.al-banner {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 22px; border-radius: 16px; background: rgba(22, 8, 30, .9); box-shadow: 0 0 0 2px #ff9a5c, 0 0 30px rgba(255, 154, 92, .5);
  text-align: center; opacity: 0; scale: .8; pointer-events: none; transition: opacity .2s, scale .25s cubic-bezier(.3, 1.6, .5, 1);
}
.al-banner.al-show { opacity: 1; scale: 1; }
.al-paused .al-banner.al-show { pointer-events: auto; cursor: pointer; }
.al-banner strong { font: 800 1.3rem var(--font-head, system-ui); text-transform: uppercase; color: #ffd9a8; text-shadow: 0 0 14px #ff9a5c; }
.al-banner span { color: var(--muted); font-weight: 600; }
.al-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.al-num { color: #ffc08f; font-variant-numeric: tabular-nums; }
.al-mode { color: var(--muted); font-size: .88rem; }
@media (prefers-reduced-motion: reduce) {
  .al-tile { transition: none; }
  .al-hint .al-face, .al-low .al-timer-fill { animation: none; }
}