/* Just a Butcher — "how it works" block (eyes, board demo, AX / AXE, shop bar). Used by /games/just-a-butcher/. */
  .sec { padding-top: clamp(56px, 9vw, 104px); display: flex; flex-direction: column; gap: 24px; }
  .sec__head { display: flex; flex-direction: column; gap: 10px; }
  .sec__head p { margin: 0; color: var(--haze); max-width: 620px; }
  /* ---------- Just a Butcher: how it works ---------- */
  .coin--bronze  { --c1: #C9783A; --c2: #8A4A1E; --iris: #6B4423; --glow: rgba(201,120,58,.45); }
  .coin--silver  { --c1: #E3E7EE; --c2: #9AA3B2; --iris: #4A6C8C; --glow: rgba(227,231,238,.4); }
  .coin--gold    { --c1: #FFD24A; --c2: #C98E12; --iris: #3E7A3A; --glow: rgba(255,210,74,.5); }
  .coin--diamond { --c1: #C8F6FF; --c2: #5CC8E8; --iris: #2B6CFF; --glow: rgba(120,220,255,.6); }
  .coins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .coin { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 14px 18px; text-align: center;
          border: 2px dashed var(--line-2); border-radius: 18px; background: rgba(22,12,18,.6); transition: transform .25s cubic-bezier(.3,1.4,.5,1), border-color .25s; }
  .coin:hover { transform: translateY(-5px); border-color: var(--c1); }
  .coin__art { width: 120px; height: 120px; flex-shrink: 0; }
  .eyebox { position: relative; }
  .eyebox canvas { position: absolute; left: -30%; top: -30%; width: 160%; height: 160%; opacity: 0; transition: opacity .3s; pointer-events: none; }
  .eyebox img { position: absolute; left: 22%; top: 16%; width: 56%; height: auto; filter: drop-shadow(0 0 16px var(--glow)) drop-shadow(3px 5px 0 rgba(0,0,0,.5)); animation: coin-bob 3.6s ease-in-out infinite; }
  .eyebox.is-ready canvas { opacity: 1; } .eyebox.is-ready img { display: none; }
  .coin:nth-child(2) .eyebox img { animation-delay: -.9s; } .coin:nth-child(3) .eyebox img { animation-delay: -1.8s; } .coin:nth-child(4) .eyebox img { animation-delay: -2.7s; }
  .coin { cursor: pointer; }
  .coin__tier { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c1); }
  .coin b { display: block; margin: 4px 0 4px; font: 400 18px/1.1 var(--display); text-transform: uppercase; }
  .coin div > span:last-child { font-size: 13px; color: var(--haze); }

  /* Board demo: tag levels up with each connection, then AXE pops the eye */
  .board { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center;
           padding: clamp(20px, 3vw, 30px); border: 2px dashed var(--line-2); border-radius: 22px; background: rgba(22,12,18,.6); }
  .board__stage { display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .board__cell { position: relative; width: 200px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 18px; border: 3px solid var(--ink);
                 background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px), #120A0F; box-shadow: inset 0 0 30px rgba(0,0,0,.8), 5px 5px 0 var(--lilac-deep); }
  .bs-tag { width: 112px; height: auto; transform-origin: 50% 8%; animation: b-swing 4s ease-in-out infinite; filter: drop-shadow(4px 6px 0 rgba(0,0,0,.5)); }
  .bs-tag.is-pop { animation: bs-pop .45s cubic-bezier(.3,1.6,.5,1), b-swing 4s ease-in-out infinite .45s; }
  .bs-slash { position: absolute; width: 150px; opacity: 0; pointer-events: none; filter: drop-shadow(0 0 8px #fff); }
  .bs-slash.is-on { animation: bs-slash .45s ease-out; }
  .bs-burst { position: absolute; width: 160px; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
  .bs-burst.is-on { animation: bs-burst .7s ease-out; }
  .bs-coin { position: absolute; inset: 0; opacity: 0; transition: opacity .15s; pointer-events: none; }
  .bs-coin.is-on { opacity: 1; }
  .bs-coin:not(.is-ready).is-on img { animation: bs-pop .45s cubic-bezier(.3,1.6,.5,1); }
  .board__count { padding: 6px 12px; border-radius: 10px; background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); font: 400 13px/1 var(--display); text-transform: uppercase; box-shadow: 3px 3px 0 var(--ink); }
  .board__copy h3 { margin: 0 0 14px; font: 400 clamp(20px, 2.4vw, 26px)/1 var(--display); text-transform: uppercase; }
  .board__steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; counter-reset: bs; }
  .board__steps li { position: relative; padding: 8px 10px 8px 52px; border-radius: 12px; font-size: 13px; color: var(--haze); border: 2px solid transparent; transition: background .3s, border-color .3s, opacity .3s; opacity: .55; }
  .board__steps li.is-on { opacity: 1; background: rgba(255,122,26,.08); border-color: var(--line-2); }
  .board__steps li::before { counter-increment: bs; content: counter(bs); position: absolute; left: 8px; top: 8px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
                             background: var(--lilac); color: var(--ink); border: 3px solid var(--ink); font: 400 15px/1 var(--display); }
  .board__steps li:last-child::before { content: "✕"; background: var(--red); color: var(--cream); }
  .board__steps b { display: block; margin-bottom: 2px; font: 400 15px/1.2 var(--display); color: var(--cream); text-transform: uppercase; }

  /* Levels */
  .levels { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 3vw, 30px); border: 2px solid var(--line-2); border-radius: 22px;
            background: radial-gradient(ellipse 80% 120% at 50% 0%, rgba(196,20,31,.12), transparent 70%), var(--night); }
  .levels__head h3 { margin: 0 0 6px; font: 400 clamp(22px, 2.6vw, 30px)/1 var(--display); text-transform: uppercase; }
  .levels__head p { margin: 0; color: var(--haze); max-width: 640px; font-size: 14px; }
  .ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; }
  .lvl { min-width: 0; display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 16px; background: var(--ink); border: 3px solid var(--ink); box-shadow: 5px 5px 0 #8A4A1E; }
  .lvl--2 { box-shadow: 5px 5px 0 #FF7A1A; } .lvl--3 { box-shadow: 5px 5px 0 #C98E12; }
  .lvl__tag { width: 46px; height: auto; flex-shrink: 0; transform: rotate(-6deg); filter: drop-shadow(3px 4px 0 rgba(0,0,0,.5)); }
  .lvl__body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .lvl__n { padding: 4px 8px; border-radius: 8px; background: #D9B48A; color: var(--ink); font: 400 11px/1.1 var(--display); text-transform: uppercase; }
  .lvl--2 .lvl__n { background: #FF7A1A; } .lvl--3 .lvl__n { background: #C4141F; color: var(--cream); }
  .lvl b { font: 400 16px/1.15 var(--display); text-transform: uppercase; }
  .lvl__coins { display: flex; flex-wrap: wrap; gap: 5px; }
  .lvl__coins img { width: 30px; height: 34px; object-fit: contain; filter: drop-shadow(0 0 6px var(--glow)); }
  .lvl__coins img.is-off { filter: grayscale(1) brightness(.35); opacity: .5; }
  .lvl__sub { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--haze); }
  .link { display: grid; place-items: center; }
  .link span { display: inline-block; padding: 7px 9px; border-radius: 10px; background: var(--yellow); color: var(--ink); border: 3px solid var(--ink);
               font: 400 10px/1.1 var(--display); text-transform: uppercase; text-align: center; transform: rotate(-4deg); box-shadow: 3px 3px 0 var(--ink); animation: link-pulse 2.4s ease-in-out infinite; }
  .link span::after { content: "→"; display: block; margin-top: 3px; font-size: 14px; }

  /* Special symbols */
  .symbols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .sym { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px; border-radius: 20px; background: var(--night); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--lilac-deep); }
  .sym__art { position: relative; aspect-ratio: 1; border-radius: 16px; background: radial-gradient(circle, rgba(196,20,31,.35), transparent 70%), var(--ink); border: 2px dashed var(--line-2); overflow: hidden; }
  .sym__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .4s; }
  .sym.is-ready .sym__canvas { opacity: 1; }
  .sym__fallback { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; }
  .sym.is-ready .sym__fallback { display: none; }
  .sym__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .sym h3 { margin: 0; font: 400 clamp(30px, 3.6vw, 44px)/1 var(--display); text-transform: uppercase; color: var(--cream); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--blood, #8F0A12); }
  .sym p { margin: 0; color: var(--haze); font-size: 14px; }

  .shopbar { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; padding: 20px clamp(20px, 3vw, 28px); }
  .shop__soon { margin: 4px 0 0; font: 400 clamp(28px, 3.4vw, 40px)/1 var(--display); color: var(--red); text-shadow: 0 0 30px rgba(196,20,31,.5); }
  .shop__soon small { display: block; margin-top: 6px; font: 700 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--haze); text-shadow: none; }
  .shop__specs { display: flex; gap: 24px; margin: 0; }
  .shop__specs dt { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--haze); }
  .shop__specs dd { margin: 0; font: 400 18px/1.2 var(--display); }

  @keyframes coin-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
  @keyframes coin-sparkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(45deg); } }
  @keyframes link-pulse { 0%, 100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(-4deg) scale(1.08); } }
  @keyframes b-swing { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
  @keyframes bs-pop { from { transform: scale(.3) rotate(-20deg); opacity: 0; } to { transform: scale(1) rotate(-4deg); opacity: 1; } }
  @keyframes bs-slash { 0% { opacity: 0; transform: translate(-60%, -60%); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(60%, 60%); } }
  @keyframes bs-burst { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.7); } }

  @media (max-width: 1100px) {
    .ladder { grid-template-columns: 1fr; }
    .link span { transform: none; animation: none; }
    .link span::after { content: " ↓"; display: inline; margin: 0; }
    .symbols { grid-template-columns: 1fr; }
  }
  @media (max-width: 900px) {
    .coins { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 700px) {
    .board { grid-template-columns: 1fr; }
  }
  @media (max-width: 560px) {
    .coins { grid-template-columns: 1fr; }
    .coin { flex-direction: row; text-align: left; }
    .coin__art { width: 80px; height: 80px; }
    .sym { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 14px; }
    .shopbar .btn { width: 100%; }
  }