/* scenes/carve.js -- one block carved into the game's building shapes */
.gscene-carve .gscene-stage { height: clamp(420px, 66vh, 620px); cursor: pointer;
  background: radial-gradient(ellipse 75% 65% at 50% 32%, #34507e, #1a2a4c 58%, #0c1428); }
.carve-ui { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; gap: 10px; padding: 18px 18px 16px;
  background: linear-gradient(180deg, transparent, rgba(8, 11, 22, 0.88) 42%); pointer-events: none; }
.carve-name { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.carve-name b { font: 900 clamp(1.3rem, 3.2vw, 1.8rem)/1.1 var(--display); color: var(--gold); text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); }
.carve-name small { font: 700 0.9rem var(--display); color: var(--muted); font-variant-numeric: tabular-nums; }
.carve-chips { display: flex; flex-wrap: wrap; gap: 7px; pointer-events: auto; }
.carve-chips button { padding: 6px 12px; border-radius: 99px; cursor: pointer; font: 800 0.82rem var(--display); color: var(--ink);
  background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); transition: background 0.2s, border-color 0.2s, transform 0.15s; }
.carve-chips button:hover { transform: translateY(-2px); }
.carve-chips button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.carve-chips button[aria-pressed="true"] { background: color-mix(in srgb, var(--gold) 24%, transparent); border-color: var(--gold); color: #fff; }
@media (max-width: 560px) {
  .carve-ui { padding: 12px 12px 12px; gap: 8px; }
  .carve-chips { gap: 5px; }
  .carve-chips button { padding: 5px 9px; font-size: 0.74rem; }
}
@media (prefers-reduced-motion: reduce) { .carve-chips button { transition: none; } .carve-chips button:hover { transform: none; } }