/* garlicoin.org: 2048 and Whack-a-clove.
   Loaded after /assets/site.css by the pages that need it (their <head> links it). Split out of site.css on
   2026-10-21: keep a rule here only if just these pages use it; anything shared goes in site.css. */

.g2048-score { min-width: 0; padding: 8px 10px; }
.g2048-score .label { font-size: .7rem; line-height: 1.2; }
.g2048-score { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; display: grid; }
.g2048-score strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.g2048-frame { position: relative; max-width: 400px; border-radius: 16px; overflow: hidden; }
.g2048-board { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 8px; background: #8a7351; border-radius: 16px; touch-action: none; user-select: none; }
.g2048-board .cell { aspect-ratio: 1; border-radius: 10px; background: rgba(255,255,255,.18); }
.g2048-tiles { position: absolute; inset: 8px; pointer-events: none; }
.tile { position: absolute; left: 0; top: 0; width: calc(25% - 6px); height: calc(25% - 6px); transition: transform .11s ease-in-out; color: #2b2416; z-index: 1; }
.tile-in { width: 100%; height: 100%; border-radius: 10px; background: var(--tbg, #f7f1e3); display: grid; place-content: center; text-align: center; box-shadow: var(--tring, none); }
.tile strong { font-size: clamp(1.1rem, 5vw, 1.8rem); line-height: 1; }
.tile span { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; opacity: .75; margin-top: 2px; }
.tile.new .tile-in { animation: tilein .18s ease-out; }
.tile.pop { z-index: 2; }
.tile.pop .tile-in { animation: tilepop .2s ease-in-out; }
@keyframes tilein { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes tilepop { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } }
.tile.v2 { --tbg: #f7f1e3; }
.tile.v4 { --tbg: #f2e6cf; }
.tile.v8 { --tbg: #f6d9a0; }
.tile.v16 { --tbg: #f3c56f; }
.tile.v32 { --tbg: #f2b632; }
.tile.v64 { --tbg: #e09a12; color: #fff; }
.tile.v128 { --tbg: #c47d1a; color: #fff; }
.tile.v256 { --tbg: #a8612a; color: #fff; }
.tile.v512 { --tbg: #8a5410; color: #fff; }
.tile.v1024 { --tbg: #5a9a4a; color: #fff; }
.tile.v2048 { --tbg: #2b2416; color: #fff4d4; --tring: 0 0 0 3px #f2b632 inset; }
.tile.v2048 .tile-in { background: var(--tbg) url(/assets/img/logo.svg) center / 78% no-repeat; }
.tile.v2048 strong, .tile.v2048 span { text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.tile.v4096, .tile.v8192 { --tbg: #2b2416; color: #f2b632; }
@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
  .tile.new .tile-in, .tile.pop .tile-in { animation: none; }
}
/* whack */
.whack-frame { position: relative; max-width: 400px; border-radius: 16px; overflow: hidden; background: linear-gradient(#8fbf6a, #5a9a4a); padding: 14px; }
.hole .soil { position: absolute; left: 6%; right: 6%; bottom: 8%; height: 38%; border-radius: 50%; background: radial-gradient(#8a6a3f, #5e4425); box-shadow: inset 0 -6px 0 rgba(0,0,0,.2); z-index: 2; }
.hole .skin { fill: #f7f1e3; stroke: #b9a98a; stroke-width: 3; }
.hole .lines { fill: none; stroke: #d9cdb2; stroke-width: 2.5; }
.hole .root { fill: none; stroke: #5a9a4a; stroke-width: 3; stroke-linecap: round; }
.hole.gold .skin { fill: #f8d464; stroke: #a86c00; }
.hole.gold .lines { stroke: #e0a92a; }
.hole.rotten .skin { fill: #4a3630; stroke: #140c09; }
.hole.rotten .lines { stroke: #2b1c17; }
.hole.rotten .root { stroke: #8a5aa0; }
.hole .gcoin { display: none; width: 100%; height: 100%; }
.hole.gold .gcoin { display: block; }
.whack-combo strong { color: #966000; min-height: 1.3em; }
.g2048-float { position: absolute; left: 0; top: 0; width: calc(25% - 6px); height: calc(25% - 6px); display: grid; place-content: center; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); pointer-events: none; z-index: 3; animation: floatup .8s ease-out forwards; }
.g2048-score strong.bump { animation: bump .25s ease-out; }
@keyframes bump { 50% { transform: scale(1.25); color: #a86c00; } }
.g2048-board.party { animation: party 1s ease-in-out 2; }
@keyframes party { 50% { box-shadow: 0 0 0 6px #f2b632, 0 0 40px #f2b632; } }
/* round two: 2048 tight board, whack hammer, fever, swarm banner, dirt */
.g2048-board.tight { box-shadow: 0 0 0 3px #ff8a80; }
@media (hover: hover) {
  .whack-frame { cursor: none; }
}
.hammer { position: absolute; width: 44px; height: 44px; margin: -36px 0 0 -6px; pointer-events: none; opacity: 0; z-index: 6; transform-origin: 10% 90%; transition: opacity .15s; }
.hammer.show { opacity: 1; }
.hammer::before { content: ""; position: absolute; left: 6px; top: 16px; width: 6px; height: 30px; background: #8a5410; border-radius: 3px; transform: rotate(-35deg); }
.hammer::after { content: ""; position: absolute; left: 10px; top: 0; width: 30px; height: 16px; background: linear-gradient(#d9a866, #a8702f); border: 2px solid #6b4a2a; border-radius: 5px; transform: rotate(-35deg); }
.hammer.swing { animation: swing .15s ease-out; }
@keyframes swing { 0% { transform: rotate(0); } 40% { transform: rotate(-55deg); } 100% { transform: rotate(0); } }
.whack-banner { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-weight: 800; font-size: 1.6rem; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.6); pointer-events: none; z-index: 6; animation: floatup .9s ease-out forwards; }
.hole .dirt { position: absolute; left: 50%; top: 60%; width: 6px; height: 6px; border-radius: 50%; background: #6b4a2a; pointer-events: none; z-index: 3; animation: dirt .6s ease-out forwards; }
@media (min-width: 761px) {
  .g2048-stage, .whack-stage { grid-template-columns: minmax(0, 520px) minmax(300px, 1fr); }
  .g2048-frame, .whack-frame { max-width: 520px; }
}
@media (max-height: 560px) and (min-aspect-ratio: 4/3) {
  /* 2048 and whack on a short landscape screen (a phone on its side): the score row moves beside the board */
  .game-page .flappy-stage.g2048-stage, .game-page .flappy-stage.whack-stage { grid-template-columns: minmax(0, 1fr); }
  .game-page .flappy-stage.g2048-stage.fitted, .game-page .flappy-stage.whack-stage.fitted { grid-template-columns: var(--game-w); }
  .game-page .g2048-stage > div:first-child, .game-page .whack-stage > div:first-child { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 10px; align-items: start; }
  .game-page .g2048-stage > div:first-child > *, .game-page .whack-stage > div:first-child > * { grid-column: 1 / -1; }
  .game-page .g2048-stage > div:first-child > .g2048-head, .game-page .whack-stage > div:first-child > .g2048-head { grid-column: 1; grid-template-columns: 1fr 1fr; margin: 0; }
  .game-page .g2048-stage > div:first-child > .g2048-frame, .game-page .whack-stage > div:first-child > .whack-frame { grid-column: 2; margin: 0; }
}
/* 2048: tile numbers grow with the board */
.game-page .g2048-board { container-type: inline-size; }
.game-page .tile strong { font-size: clamp(1.1rem, 8cqw, 3.4rem); }
.game-page .tile span { font-size: clamp(.6rem, 2.3cqw, 1.05rem); }
.whack-frame .whack-banner { animation: banner-pop .9s ease-out forwards; }
@keyframes banner-pop { 0% { transform: scale(.5); opacity: 0; } 18% { transform: scale(1.12); opacity: 1; } 30% { transform: scale(1); } 75% { opacity: 1; } 100% { transform: translateY(-30px); opacity: 0; } }
.whack-frame { background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.6px), radial-gradient(rgba(40,80,30,.14) 1.5px, transparent 2.2px), linear-gradient(#8fbf6a, #5a9a4a); background-size: 18px 18px, 26px 26px, auto; background-position: 0 0, 9px 13px, 0 0; }
.hole.bonk .clove { transform: translateY(20%) scale(.9); }
@media (prefers-reduced-motion: reduce) {
  .whack-frame .whack-banner { animation: none; }
}
/* 2048: merge effects sit in a wrapper on the tile's square (the "+n" used to drift off toward the corner) */
.g2048-fx { position: absolute; left: 0; top: 0; width: calc(25% - 6px); height: calc(25% - 6px); pointer-events: none; z-index: 3; }
.g2048-fx .g2048-float { position: absolute; inset: 0; width: auto; height: auto; animation: g2048-rise .8s ease-out forwards; }
@keyframes g2048-rise { 15% { transform: translateY(-6px) scale(1.15); opacity: 1; } to { transform: translateY(-56px); opacity: 0; } }
.g2048-ring { position: absolute; inset: 0; border-radius: 12px; border: 4px solid #ffe28a; box-shadow: 0 0 12px rgba(242,182,50,.7); animation: g2048-ring .45s ease-out forwards; }
.g2048-ring.v1024, .g2048-ring.v2048, .g2048-ring.v4096, .g2048-ring.v8192 { border-color: #fff; border-width: 6px; }
@keyframes g2048-ring { from { transform: scale(.92); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.g2048-spark { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #ffe28a; box-shadow: 0 0 6px #f2b632; animation: dirt .6s ease-out forwards; }
.g2048-board.thud { animation: g2048-thud .18s ease-out; }
@keyframes g2048-thud { 40% { transform: scale(1.018); } }
@media (prefers-reduced-motion: reduce) {
  .g2048-fx .g2048-float, .g2048-ring, .g2048-spark, .g2048-board.thud { animation: none; }
  .g2048-ring, .g2048-spark { display: none; }
}
/* 2048: the merge ring and the sparks glow with spread-only shadows (a blurred shadow had to be painted afresh for
   every merge, the main cost the polish pass added); the ring sits under the "+n" */
.g2048-ring { box-shadow: 0 0 0 3px rgba(255,226,138,.38), inset 0 0 0 2px rgba(255,255,255,.45); z-index: -1; }
.g2048-spark { box-shadow: 0 0 0 2px rgba(242,182,50,.45); }
.whack-frame.hurry, .whack-frame.fever, .whack-frame.ouch { animation: none; }
.whack-frame.hurry::before, .whack-frame.fever::before, .whack-frame.ouch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; opacity: 0; }
/* only while one of them is on: an empty full-board layer still costs compositing */
.whack-frame.hurry::before { box-shadow: inset 0 0 0 4px #ff8a80; animation: whack-glow .5s ease-in-out infinite alternate; }
.whack-frame.fever { box-shadow: inset 0 0 0 4px #f2b632; }
.whack-frame.fever::before { box-shadow: inset 0 0 0 10px #ffe28a; animation: whack-glow .4s ease-in-out infinite alternate; }
.whack-frame.ouch::after { box-shadow: inset 0 0 0 6px rgba(179,38,30,.6); animation: whack-ouch .3s ease-out; }
@keyframes whack-glow { from { opacity: 0; } to { opacity: 1; } }
@keyframes whack-ouch { 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .whack-frame::before, .whack-frame::after { animation: none; opacity: 0; }
}
/* the score's bump (2048 and Whack-a-clove): the size still eases, the gold is simply held for the bump instead of
   fading in and out, which repainted the number on every frame of every bump */
.g2048-score strong.bump { animation: bump-size .25s ease-out, bump-gold .25s step-end; }
@keyframes bump-size { 50% { transform: scale(1.25); } }
@keyframes bump-gold { from { color: #a86c00; } }
/* Whack-a-clove's score cards keep their layout and paint to themselves: the numbers change on every hit */
.whack-stage .g2048-score { contain: layout paint; }