/* garlicoin.org: the arcade: game frames, title screens, results, the Play hub and every game but kart's own parts.
   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. */

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; box-shadow: var(--shadow); z-index: 50; font-weight: 600; max-width: calc(100vw - 32px); margin: 0; text-align: center; }
/* flappy */
.flappy-stage { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; align-items: start; justify-content: center; }
.flappy-frame { position: relative; width: 100%; max-width: 360px; margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); touch-action: none; }
.flappy-frame canvas { display: block; width: 100%; height: auto; }
.flappy-over { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: rgba(43,36,22,.72); color: #fff; padding: 20px; gap: 8px; }
.flappy-over h2 { margin: 0; font-size: 1.6rem; }
.flappy-over .big { font-size: 3rem; font-weight: 800; line-height: 1; }
.flappy-over p { margin: 0; }
.flappy-over form { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.flappy-over input { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); font: inherit; width: 150px; background: #fff; color: #2b2416; }
.flappy-over .btn { padding: 8px 14px; }
.board { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.board li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.board li:first-child { border-top: 0; }
.board li span::before { counter-increment: rank; content: counter(rank) '. '; color: var(--muted); font-weight: 700; }
/* garlic @names on the boards (up to 21 characters) link to their profile page; on the Play hub they're bold text */
.board li span { min-width: 0; overflow-wrap: anywhere; }
.board li span a, .board li span.garlic-name { font-weight: 700; }
.board-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) {
  .flappy-stage { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .board-grid { grid-template-columns: minmax(0, 1fr); }
}
.flappy-over[hidden] { display: none; }
.ball { display: inline-grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--ink); color: var(--card); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 800; }
.ball.big { width: 64px; height: 64px; font-size: 1.8rem; }
.reveal { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 18px; border-radius: var(--radius); background: var(--card); border: 2px solid var(--line); box-shadow: var(--shadow); margin-bottom: 20px; font-weight: 700; animation: fresh 1s ease-out; }
.reveal.hit { border-color: var(--ok); background: var(--ok-soft); }
.reveal.miss { border-color: var(--line); }
.roulette-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.roulette-facts { grid-template-columns: 1fr 1fr; margin-bottom: 12px; }
.spins { list-style: none; margin: 0; padding: 0; }
.spins li { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: .9rem; }
.spins li:first-child { border-top: 0; }
.spins li em { font-style: normal; color: var(--muted); text-align: right; }
.spins li.hit em { color: var(--ok); font-weight: 700; }
.spins li.open em { color: var(--gold-text); }
.spins li strong { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
@media (max-width: 860px) {
  .roulette-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .wheel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* 2048 */
.g2048-stage { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
.g2048-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: stretch; margin-bottom: 10px; }
.g2048-head .btn { grid-column: span 2; align-self: stretch; }
.g2048-head .btn { align-self: center; }
.touch-pad { display: none; justify-items: center; gap: 6px; margin-top: 12px; }
.touch-pad div { display: flex; gap: 6px; }
.touch-pad button { width: 56px; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 1.1rem; cursor: pointer; touch-action: manipulation; }
@media (hover: none), (max-width: 760px) {
  .touch-pad { display: grid; }
}
.holes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hole { position: relative; aspect-ratio: 1; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; overflow: hidden; border-radius: 50% / 40%; }
.hole .clove { position: absolute; left: 25%; right: 25%; bottom: 20%; height: 70%; transform: translateY(110%); transition: transform .12s ease-out; z-index: 1; }
.hole.up .clove { transform: translateY(0); }
.hole .clove svg { width: 100%; height: 100%; }
.hole.bonk .clove { transform: translateY(20%) scale(.9); }
.hole .float { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-weight: 800; font-size: 1.3rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); animation: floatup .7s ease-out forwards; z-index: 3; pointer-events: none; }
.hole .float.bad { color: #ff8a80; }
/* breadris */
.breadris-stage { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; }
.breadris-frame { position: relative; width: 240px; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.breadris-frame canvas { display: block; width: 240px; height: 480px; }
.breadris-side { display: grid; gap: 16px; }
.breadris-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.breadris-pad { display: grid; }
.breadris-pad button { min-width: 56px; }
@media (max-width: 640px) {
  .breadris-stage { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .breadris-side { width: 100%; }
  .breadris-facts { grid-template-columns: 1fr 1fr; }
}
@media (hover: hover) and (min-width: 641px) {
  .breadris-pad { display: none; }
}
/* play hub */
.play-live { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.play-live > div { display: grid; gap: 6px; justify-items: start; }
.play-live p { margin: 0; }
.play-big { font-size: 1.8rem; font-weight: 800; }
.play-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 24px; }
.play-card { text-decoration: none; color: inherit; display: grid; align-content: start; gap: 6px; transition: transform .15s, border-color .15s; }
.play-card:hover { transform: translateY(-2px); border-color: var(--gold); }
.play-card h2 { margin: 0; font-size: 1.1rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.play-card p { margin: 0; }
.play-card .pill { font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; background: var(--gold); color: var(--on-gold); }
.play-card.coins { border-color: var(--gold); }
.play-best { color: var(--gold-text); font-weight: 700; }
.play-board { font-size: .85rem; margin-top: 4px; }
@media (max-width: 640px) {
  .play-live { grid-template-columns: minmax(0, 1fr); }
}
.flappy-over { z-index: 5; }
@media (max-width: 760px) {
  .g2048-stage, .whack-stage { grid-template-columns: minmax(0, 1fr); }
}
/* arcade round 4: landscape games (Garlic Run, Hash Sniper) get a wider frame */
.arcade-wide { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); }
.arcade-wide .flappy-frame { max-width: 480px; }
@media (max-width: 760px) {
  .arcade-wide { grid-template-columns: minmax(0, 1fr); }
}
.flappy-frame canvas { touch-action: none; -webkit-user-select: none; user-select: none; }
/* the results overlay must fit a 480×320 canvas that is only ~240 px tall on a phone */
.arcade-wide .flappy-over { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; justify-content: safe center; overflow: auto; gap: 4px; padding: 10px 16px; }
.arcade-wide .flappy-over h2 { font-size: 1.15rem; }
.arcade-wide .flappy-over .big { font-size: 1.9rem; }
.arcade-wide .flappy-over p { font-size: .9rem; }
.arcade-wide .flappy-over form { margin-top: 2px; }
/* Super Garlic: touch pad and tools */
.super-pad { display: none; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; touch-action: none; }
.super-pad-left, .super-pad-right { display: flex; gap: 8px; }
.super-pad button { width: 64px; height: 56px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 800; font-size: 1.1rem; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.super-pad-right button { width: 110px; }
.super-pad button.on { background: var(--gold, #f2b632); color: #2b2416; }
@media (hover: none), (max-width: 760px) {
  .super-pad { display: flex; }
}
.super-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
.super-tools .btn { padding: 8px 12px; }
/* polish pass: medals, Garlicoin in whack, 2048 floats and bumps, hurry-up */
.medal { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0; font-weight: 800; }
.medal img { width: 36px; height: 36px; }
.medal.silver img { filter: grayscale(1) brightness(1.25); }
.medal.bronze img { filter: sepia(1) hue-rotate(-25deg) saturate(1.6) brightness(.85); }
.hole.gold .clove svg { display: none; }
.holes.thump { animation: thump .12s ease-out; }
@keyframes thump { 50% { transform: translateY(2px); } }
.whack-frame.hurry { animation: hurry .5s ease-in-out infinite alternate; }
@keyframes hurry { to { box-shadow: 0 0 0 4px #ff8a80 inset; } }
.whack-frame.fever { animation: feverglow .4s ease-in-out infinite alternate; }
@keyframes feverglow { from { box-shadow: 0 0 0 4px #f2b632 inset; } to { box-shadow: 0 0 0 10px #ffe28a inset; } }
@media (min-width: 761px) {
  /* bigger games on big screens: the canvas scales to its column, capped by the window height in the script */
  /* the score card always keeps at least 300px; the game shrinks first */
  .flappy-stage { grid-template-columns: minmax(0, 560px) minmax(300px, 1fr); }
  .flappy-frame { max-width: 560px; }
  .arcade-wide { grid-template-columns: minmax(0, 820px) minmax(300px, 1fr); }
  .arcade-wide .flappy-frame { max-width: 820px; }
}
@media (min-width: 761px) and (min-height: 600px) {
  /* results overlays: full-size text only when the frame is big (a wide screen that is also tall: on a landscape phone
   the frame is ~360x240 and needs the compact sizes). On any screen the overlay scrolls instead of clipping, and
   centres only while its content fits (safe center), so the heading and "Play again" are never cut off */
  .arcade-wide .flappy-over { gap: 8px; padding: 20px; }
  .arcade-wide .flappy-over h2 { font-size: 1.6rem; }
  .arcade-wide .flappy-over .big { font-size: 3rem; }
  .arcade-wide .flappy-over p { font-size: 1rem; }
}
.flappy-over { overflow: auto; overscroll-behavior: contain; place-content: safe center; }
.flappy-over h2 + .big { margin-top: 6px; }
@media (min-width: 761px) {
  /* "Ouch!" and the big score don't touch */
  /* a game frame narrower than its column (fitCanvas caps it by the window height) sits at the column's left edge,
   under the page heading and beside the board; on a phone the game is the only column and sits centred */
  .flappy-stage .flappy-frame { margin-left: 0; }
}
@media (max-width: 760px) {
  .flappy-stage .super-tools { justify-content: center; }
}
@media (max-height: 599px) {
  .flappy-over { gap: 4px; padding: 10px 14px; }
  .flappy-over h2 { font-size: 1.15rem; }
  .flappy-over .big { font-size: 1.9rem; }
  .flappy-over p { font-size: .9rem; }
  .flappy-over h2 + .big { margin-top: 2px; }
  .flappy-over form { margin-top: 2px; }
  .flappy-over .medal img { width: 26px; height: 26px; }
}
/* big games (main.game-page on every game page): the playfield is sized from the whole window by fitFrame() in
   arcade.js (as wide as the column allows, as tall as the window less a margin) and the page scrolls it to the top of
   the window when a round starts. The stage then gets .fitted and --game-w: the game's column shrinks to the game
   and the pair is centred, tall games beside the high-score card, wide games (and any game on a phone or a
   portrait tablet) above it. The page is wider than the usual 1080px column so wide games can grow, and the
   heading card is compact. */
.game-page { max-width: 1640px; gap: 16px; }
.game-page .page-head { padding: 14px 22px; gap: 4px 16px; align-items: center; border-top-width: 4px; }
.game-page .page-icon { width: 44px; height: 44px; border-radius: 13px; }
.game-page .page-icon svg { width: 22px; height: 22px; }
.game-page .page-head h1 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: 0 0 2px; }
.game-page .page-head .lead { margin: 0; max-width: 100ch; font-size: .95rem; line-height: 1.45; }
.game-page .flappy-stage { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 20px; justify-content: center; }
.game-page .flappy-stage.fitted { grid-template-columns: var(--game-w) minmax(280px, 360px); }
.game-page .flappy-stage.arcade-wide { grid-template-columns: minmax(0, 1fr); }
.game-page .flappy-stage.arcade-wide.fitted { grid-template-columns: var(--game-w); }
.game-page .flappy-stage > div:first-child { min-width: 0; }
.game-page .flappy-frame, .game-page .g2048-frame, .game-page .whack-frame { max-width: none; margin-left: auto; margin-right: auto; }
.game-page .flappy-stage .super-tools { justify-content: center; }
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .game-page .flappy-stage, .game-page .flappy-stage.arcade-wide { grid-template-columns: minmax(0, 1fr); }
  .game-page .flappy-stage.fitted { grid-template-columns: min(100%, var(--game-w)); }
}
@media (max-width: 640px) {
  .game-page.wrap { padding: 12px 8px 32px; gap: 12px; }
  .game-page .page-head { padding: 14px 16px; }
  .game-page .flappy-stage { gap: 12px; }
}
@media (max-width: 560px) {
  /* a wide game on a phone is only ~210-250px tall: its results overlay tightens up so "Play again" and the post form fit */
  .game-page .arcade-wide .flappy-over { gap: 2px; padding: 6px 10px; }
  .game-page .arcade-wide .flappy-over h2 + .big { margin-top: 0; }
  .game-page .arcade-wide .flappy-over .big { font-size: 1.6rem; }
  .game-page .arcade-wide .flappy-over p { font-size: .8rem; line-height: 1.3; }
  .game-page .arcade-wide .flappy-over .btn { padding: 6px 14px; }
  .game-page .arcade-wide .flappy-over input { padding: 6px 10px; width: 140px; }
}
@media (max-height: 420px) {
  /* short screens (a phone on its side, ~390px tall) and very short frames (a wide game on a portrait phone, ~210px):
   the results overlay goes compact again so a long scorecard, the post form and its message fit without scrolling */
  .game-page .flappy-over { gap: 2px; padding: 6px 10px; }
  .game-page .flappy-over h2 { font-size: 1rem; }
  .game-page .flappy-over .big { font-size: 1.5rem; }
  .game-page .flappy-over h2 + .big { margin-top: 0; }
  .game-page .flappy-over p { font-size: .78rem; line-height: 1.3; }
  .game-page .flappy-over form { gap: 4px; margin-top: 0; }
  .game-page .flappy-over .btn { padding: 5px 12px; }
  .game-page .flappy-over input { padding: 5px 8px; width: 130px; }
}
@media (max-width: 420px) {
  .game-page .arcade-wide .flappy-over { gap: 1px; padding: 4px 8px; }
  .game-page .arcade-wide .flappy-over h2 { font-size: 1rem; }
  .game-page .arcade-wide .flappy-over .big { font-size: 1.4rem; }
  .game-page .arcade-wide .flappy-over p { font-size: .75rem; line-height: 1.25; }
  .game-page .arcade-wide .flappy-over form { gap: 4px; margin-top: 0; }
  .game-page .arcade-wide .flappy-over .btn { padding: 4px 12px; }
  .game-page .arcade-wide .flappy-over input { padding: 4px 8px; }
}
/* Garlic Dash 3D */
.dash-frame { aspect-ratio: 16 / 9; background: #fde7a3; }
.dash-frame canvas { display: block; width: 100%; height: auto; touch-action: none; }
.dash-hud { position: absolute; left: 12px; top: 10px; color: #2b2416; font-weight: 800; font-size: 1.6rem; line-height: 1; text-shadow: 0 1px 0 rgba(255,255,255,.6); pointer-events: none; z-index: 2; display: grid; gap: 4px; }
.dash-hud .dash-sub { font-size: .85rem; font-weight: 700; opacity: .85; display: flex; align-items: center; gap: 4px; }
.dash-coin { width: 14px; height: 14px; vertical-align: middle; }
.dash-banner { position: absolute; left: 0; right: 0; top: 22%; text-align: center; font-weight: 800; font-size: 2rem; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.5); opacity: 0; pointer-events: none; z-index: 3; }
.dash-banner.show { animation: dashbanner 1.4s ease-out forwards; }
@keyframes dashbanner { 0% { opacity: 0; transform: translateY(10px) scale(.9); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
.dash-intro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #fff; background: rgba(43,36,22,.45); z-index: 4; padding: 16px; gap: 6px; pointer-events: none; }
.dash-intro h2 { margin: 0; font-size: 2rem; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.dash-intro p { margin: 0; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.dash-intro[hidden] { display: none; }
/* Dash lane radar */
.dash-radar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 2; pointer-events: none; }
.dash-radar-lane { width: 34px; height: 12px; border-radius: 6px; background: rgba(43,36,22,.25); border: 2px solid rgba(255,255,255,.5); transition: background .15s, transform .15s; }
.dash-radar-lane.here { border-color: #fff; }
.dash-radar-lane.low { background: #c47d1a; }
.dash-radar-lane.mid { background: #7a4410; }
.dash-radar-lane.wide { background: #6b3a10; }
.dash-radar-lane.tall { background: #2b7fc4; }
.dash-radar-lane.air { background: #8e8e96; }
.dash-radar-lane.soon { transform: scaleY(1.5); box-shadow: 0 0 10px rgba(255,255,255,.7); }
/* /play/: room for today's three best and two lines of lotto text before they load, so the games don't jump down */
.play-board { min-height: 4.6em; }
.play-live p.small { min-height: 2.9em; }
.play-grid:empty { min-height: 100vh; }
/* ---------- /squadron/: Clove Squadron ---------- */
.sq-frame { background: #070618; container-type: inline-size; }
.sq-stage { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
html.sq-playing, html.sq-playing body { overscroll-behavior: none; }
html.sq-playing .sq-frame canvas { cursor: none; }
/* the ship flies to the pointer: the arrow would hide it */
.sq-panel { z-index: 6; }
.sq-panel .sq-buttons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.sq-title { background: linear-gradient(180deg, rgba(6,4,24,.05) 0%, rgba(6,4,24,.35) 45%, rgba(6,4,24,.78) 100%); }
.sq-kicker { font-size: clamp(.62rem, 3cqw, .85rem); letter-spacing: .18em; text-transform: uppercase; color: #ffd27a; font-weight: 800; }
.sq-logo { font-family: Fredoka, Nunito, system-ui, sans-serif; font-weight: 600; font-size: clamp(2rem, 15cqw, 4.6rem) !important; line-height: .92; margin: 2px 0 6px !important;
  background: linear-gradient(180deg, #fffbe8 0%, #ffe28a 45%, #f2b632 70%, #c77a10 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #5a2a08) drop-shadow(0 6px 14px rgba(255,120,200,.45)); }
.sq-tag { color: #f5ecd7; font-size: clamp(.78rem, 3.6cqw, 1rem); text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.sq-best { color: #d9cdb2; min-height: 1em; }
.sq-list { text-align: left; margin: 6px auto 4px; padding-left: 1.1em; max-width: 32em; font-size: clamp(.74rem, 3.5cqw, .95rem); line-height: 1.4; display: grid; gap: 6px; }
.sq-list b { display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%; color: #fff; font-size: .8em; }
.sq-list .sq-s { background: #3f9a2a; }
.sq-list .sq-b { background: #c8452a; }
.sq-vol { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; color: var(--muted, inherit); }
.sq-vol input { width: 92px; accent-color: #f2b632; }
/* ---------- arcade title screen (arcade.js titleScreen) and the garlicoin.org Arcade sign (ARCADE_MARK) ---------- */
.arcade-title { position: absolute; inset: 0; z-index: 7; container-type: size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(3px, 2.2cqh, 12px);
  padding: 10px 16px; text-align: center; color: #fff; cursor: pointer; overflow: hidden; -webkit-user-select: none; user-select: none;
  background: radial-gradient(ellipse at 50% 38%, rgba(43,30,52,.6), rgba(20,15,8,.86) 78%); -webkit-backdrop-filter: blur(clamp(3px, 1.2cqw, 8px)); backdrop-filter: blur(clamp(3px, 1.2cqw, 8px)); }
.arcade-title > * { margin: 0; }
.arcade-mark { display: block; width: min(80cqw, 88cqh, 440px); height: auto; flex: none; text-transform: none; letter-spacing: normal; }
.arcade-title .arcade-mark { filter: drop-shadow(0 0 12px rgba(255,120,200,.4)); animation: am-in .5s ease-out both; }
.arcade-mark .am-lit { animation: am-chase .9s steps(2, jump-none) infinite; }
@keyframes am-chase { to { stroke-dashoffset: -12.61; } }
@keyframes am-in { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
.arcade-name { font-family: Fredoka, Nunito, system-ui, sans-serif; font-weight: 600; font-size: clamp(1.25rem, min(11cqw, 13cqh), 3.8rem); line-height: 1;
  background: linear-gradient(180deg, #fffbe8 0%, #ffe28a 45%, #f2b632 70%, #c77a10 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #5a2a08) drop-shadow(0 4px 10px rgba(255,120,200,.35)); padding: 0 .1em; }
.arcade-tag { color: #f5ecd7; font-size: clamp(.74rem, min(3.8cqw, 5.4cqh), 1.2rem); max-width: 30em; line-height: 1.3; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.arcade-title .arcade-play { padding: 8px 26px; font-size: clamp(.9rem, min(4.4cqw, 6.4cqh), 1.35rem); box-shadow: 0 0 0 3px rgba(255,210,122,.25), 0 4px 14px rgba(0,0,0,.35); }
.arcade-best { color: #d9cdb2; font-size: clamp(.72rem, min(3.4cqw, 5cqh), 1.05rem); font-weight: 700; }
@container (max-height: 270px) {
  .arcade-tag { display: none; }
}
.sq-kicker .arcade-mark { width: min(62cqw, 300px); margin: 0 auto; filter: drop-shadow(0 0 12px rgba(255,120,200,.4)); }
@media (prefers-reduced-motion: reduce) {
  .arcade-mark .am-lit, .arcade-title .arcade-mark { animation: none; }
}
/* 2026-10-20 games polish: the arcade games' game-over card (.over-fx) fades in with its lines rising one after
   another and the score popping; a new best glows gold */
.over-fx:not([hidden]) { animation: over-in .3s ease-out both; }
.over-fx:not([hidden]) > * { animation: over-up .38s ease-out both; }
.over-fx:not([hidden]) > :nth-child(2) { animation-delay: .05s; }
.over-fx:not([hidden]) > :nth-child(3) { animation-delay: .1s; }
.over-fx:not([hidden]) > :nth-child(4) { animation-delay: .15s; }
.over-fx:not([hidden]) > :nth-child(n+5) { animation-delay: .2s; }
.over-fx:not([hidden]) > .big { animation: over-pop .5s cubic-bezier(.3, 1.7, .5, 1) .08s both; }
@keyframes over-in { from { background-color: rgba(43,36,22,0); } }
@keyframes over-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes over-pop { from { opacity: 0; transform: scale(.4); } }
.over-fx.new-best h2 { color: #ffd27a; text-shadow: 0 0 14px rgba(242,182,50,.75), 0 2px 0 #5a2a08; }
.over-fx.new-best .big { color: #ffe28a; text-shadow: 0 0 18px rgba(242,182,50,.6); }
.over-fx .best-badge { justify-self: center; align-self: center; margin: 0 auto; padding: 2px 12px; border-radius: 999px; background: linear-gradient(#ffe28a, #f2b632); color: #5a2a08; font-weight: 800; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 0 14px rgba(242,182,50,.6); }
.over-fx .best-badge[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .over-fx:not([hidden]), .over-fx:not([hidden]) > *, .over-fx:not([hidden]) > .big { animation: none; }
}
/* whack: a "pow" star where the hammer lands, gold sparks, a red pulse for a rotten clove, and banners that pop in
   the middle of the board (they used to slide off to the left with floatup) */
.hole .pow { position: absolute; left: 50%; top: 45%; width: 64%; aspect-ratio: 1; margin: -32% 0 0 -32%; z-index: 2; pointer-events: none; animation: pow .36s ease-out forwards;
  background: radial-gradient(circle, #fff 0 18%, #ffe28a 19% 34%, rgba(255,226,138,0) 36%); clip-path: polygon(50% 0, 61% 34%, 98% 35%, 68% 57%, 79% 92%, 50% 71%, 21% 92%, 32% 57%, 2% 35%, 39% 34%); }
.hole .pow.rotten { background: radial-gradient(circle, #c9a3d9 0 20%, #6b4a6a 21% 36%, rgba(0,0,0,0) 38%); }
@keyframes pow { from { transform: scale(.3) rotate(-20deg); opacity: 1; } 60% { opacity: 1; } to { transform: scale(1.25) rotate(10deg); opacity: 0; } }
.hole .spark { position: absolute; left: 50%; top: 45%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #ffe28a; box-shadow: 0 0 6px #f2b632; z-index: 3; pointer-events: none; animation: dirt .55s ease-out forwards; }
.whack-frame.ouch { animation: ouch .3s ease-out; }
@keyframes ouch { 30% { box-shadow: 0 0 0 6px rgba(179,38,30,.6) inset; } }
.hole .clove { transform: translateY(132%); }
/* fully down: the root no longer peeks out under the mound */
.hole.up .clove { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .hole .pow, .hole .spark, .whack-frame.ouch, .whack-frame.hurry, .whack-frame.fever, .holes.thump { animation: none; }
}
.super-tools .mute-hint { align-self: center; }
@media (hover: none) and (pointer: coarse) {
  .super-tools .mute-hint { display: none; }
}
/* no M key on a phone */
/* 2026-10-20 games UX sweep: how to play on this device on the title screen (arcade.js titleScreen how), the card a
   round waits behind when its tab was hidden (arcade.js autoPause), and the touch buttons for a touch screen that
   says it can hover (a touch laptop): they show once it has been tapped (html.touch-input, arcade.js device) */
.arcade-how { color: #ffe9b8; font-size: clamp(.7rem, min(3.4cqw, 5cqh), 1.02rem); font-weight: 700; max-width: 32em; line-height: 1.3; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
@container (max-height: 160px) {
  .arcade-how { display: none; }
}
.arcade-paused { position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; gap: 6px; text-align: center; padding: 16px; background: rgba(43,36,22,.72); color: #fff4d4; cursor: pointer; -webkit-user-select: none; user-select: none; }
.arcade-paused p { margin: 0; font-weight: 700; }
.arcade-paused .arcade-paused-h { font-family: Fredoka, Nunito, system-ui, sans-serif; font-weight: 600; font-size: 1.8rem; color: #ffd27a; }
html.touch-input .super-pad { display: flex; }
html.touch-input .touch-pad { display: grid; }
/* Garlic Dash 3D without WebGL: the note that takes the game's place (dash.js) */
.dash-nogl { gap: 6px; padding: 12px 16px; max-width: none; background: #2b2416; }
.dash-nogl h2 { font-size: clamp(1.05rem, 4.6vw, 1.6rem); }
.dash-nogl p { font-size: clamp(.8rem, 3.4vw, 1rem); max-width: 36em; margin: 0 auto; }
.dash-nogl a { color: #ffd27a; font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  /* Whack-a-clove: each mound's key, faint, on a computer (whack.js: 1 to 9, laid out like the mounds) */
  .hole[data-key]::after { content: attr(data-key); position: absolute; left: 9%; bottom: 6%; z-index: 3; font: 800 .72rem/1 Nunito, system-ui, sans-serif; color: rgba(255,244,212,.62); pointer-events: none; }
}
html.touch-input .hole[data-key]::after { content: none; }
/* the Play hub: how each game is played on the device in hand (play.js) */
.play-how { font-weight: 700; color: var(--ink); opacity: .78; }
/* Whack-a-clove, cheaper to draw, same look: the hit's star is an SVG picture instead of a gradient cut out with
   clip-path (a clip on an animated layer is drawn through a mask every frame), the gold sparks glow with a
   spread-only shadow, and the frame's red and gold glows (hurry, fever, a rotten hit) fade an overlay in and out
   instead of animating the frame's own inset shadow, which repainted the whole board every frame */
.hole .pow { clip-path: none; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><radialGradient id='g' cx='50' cy='50' r='70.7' gradientUnits='userSpaceOnUse'><stop offset='0.18' stop-color='%23fff'/><stop offset='0.19' stop-color='%23ffe28a'/><stop offset='0.34' stop-color='%23ffe28a'/><stop offset='0.36' stop-color='%23ffe28a' stop-opacity='0'/></radialGradient><polygon points='50,0 61,34 98,35 68,57 79,92 50,71 21,92 32,57 2,35 39,34' fill='url(%23g)'/></svg>") center / 100% 100% no-repeat; }
.hole .pow.rotten { background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><radialGradient id='g' cx='50' cy='50' r='70.7' gradientUnits='userSpaceOnUse'><stop offset='0.2' stop-color='%23c9a3d9'/><stop offset='0.21' stop-color='%236b4a6a'/><stop offset='0.36' stop-color='%236b4a6a'/><stop offset='0.38' stop-color='%236b4a6a' stop-opacity='0'/></radialGradient><polygon points='50,0 61,34 98,35 68,57 79,92 50,71 21,92 32,57 2,35 39,34' fill='url(%23g)'/></svg>") center / 100% 100% no-repeat; }
.hole .spark { box-shadow: 0 0 0 2px rgba(242,182,50,.5); }
@media (orientation: portrait) and (max-width: 600px) and (hover: none) {
  /* the wide games (Garlic Run, Dash, Super Garlic, Hash Sniper) on a phone held upright: a tip under the game */
  .arcade-wide .super-tools .arcade-turn-tip { display: block; }
}
/* that tip is a real element (arcade.js puts it in), so translated pages can translate it; hidden everywhere else */
.arcade-turn-tip { display: none; width: 100%; margin: 0 0 2px; text-align: center; color: var(--muted, #6b5f4a); font-size: .85rem; }
/* the small pause button in a game frame's corner (arcade.js autoPause), shown while a round is running */
.arcade-pause-btn { position: absolute; z-index: 7; top: 6px; right: 6px; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(43,36,22,.5); box-shadow: 0 0 0 1.5px rgba(255,244,212,.4); color: #fff4d4; cursor: pointer; opacity: .75; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.arcade-pause-btn[hidden] { display: none; }
.arcade-pause-btn:hover, .arcade-pause-btn:focus-visible { opacity: 1; background: rgba(43,36,22,.7); }
.arcade-pause-btn:focus-visible { outline: 2px solid #ffd27a; outline-offset: 2px; }
.arcade-pause-btn svg { width: 16px; height: 16px; fill: currentColor; }
.arcade-pause-btn.at-tl { right: auto; left: 6px; }
.arcade-pause-btn.at-br { top: auto; bottom: 6px; }
.arcade-pause-btn.at-bl { top: auto; bottom: 6px; right: auto; left: 6px; }
.arcade-pause-btn.at-tc { right: auto; left: 50%; transform: translateX(-50%); }