/* «Ударь ИИ» (/punch). Владелец — P. Токены — из app.css, с запасными значениями из контракта. */

.punch-page {
  --p-ink: var(--c-ink, #0A0A0A);
  --p-red: var(--c-accent, #FF2D20);
  --p-pop: var(--c-pop, #FFE14D);
  --p-white: var(--c-surface, #FFFFFF);
  --p-muted: var(--c-muted, #55595F);
  --p-bw: var(--bw, 3px);
  --p-shadow: var(--shadow, 6px 6px 0 var(--c-ink, #0A0A0A));
  --p-display: var(--font-display, "Sofia Sans Extra Condensed", "Arial Narrow", Impact, sans-serif);
  --p-body: var(--font-body, "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  overflow-x: clip;
}
.punch-page.page { padding-block: clamp(0.75rem, 2vw, 2rem) clamp(2rem, 4vw, 4rem); }

.punch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(0.75rem, 2.5vw, 1.5rem);
}

.punch__title {
  margin: 0;
  font-family: var(--p-display);
  font-weight: 900;
  font-size: clamp(3rem, 11vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-align: center;
  color: var(--p-ink);
}

/* ---------- арена: счётчики + ринг ---------- */

.punch__arena {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "you world" "ring ring";
  gap: 0.75rem 1rem;
  align-items: end;
}
.punch__score--you { grid-area: you; }
.punch__score--world { grid-area: world; text-align: right; }
.punch__ring { grid-area: ring; }

@media (min-width: 60rem) {
  .punch__arena {
    grid-template-columns: minmax(0, 1fr) minmax(0, 36rem) minmax(0, 1fr);
    grid-template-areas: "you ring world";
    gap: 2rem;
    align-items: center;
  }
  .punch__score--you { text-align: right; }
  .punch__score--world { text-align: left; }
}

.punch__score { margin: 0; min-width: 0; }
.punch__score-label,
.punch__score-value { margin: 0; font-family: var(--p-display); text-transform: uppercase; line-height: 0.9; }
.punch__score-label {
  display: inline-block;
  padding: 0.15em 0.4em 0.05em;
  background: var(--p-ink);
  color: var(--p-white);
  font-weight: 800;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  letter-spacing: 0.04em;
}
.punch__score--world .punch__score-label { background: var(--p-pop); color: var(--p-ink); box-shadow: inset 0 0 0 var(--p-bw) var(--p-ink); }
.punch__score-value {
  margin-top: 0.2rem;
  font-weight: 900;
  font-size: clamp(2.5rem, 10vw, 6.5rem);
  font-variant-numeric: tabular-nums;
  color: var(--p-ink);
  overflow-wrap: anywhere;
}
.punch__score--you .punch__score-value { color: var(--p-red); -webkit-text-stroke: 0; }
@media (min-width: 60rem) {
  .punch__score-value { font-size: clamp(3.5rem, 6vw, 6.5rem); }
}

/* ---------- ринг и сцена ---------- */

.punch__ring {
  position: relative;
  border: var(--p-bw) solid var(--p-ink);
  box-shadow: var(--p-shadow);
  background-color: var(--p-white);
  background-image: radial-gradient(circle, var(--p-pop) 2px, transparent 2.6px);
  background-size: 14px 14px;
  background-position: 0 0;
}

.punch__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(0.5rem, 2vw, 1rem) clamp(0.5rem, 2vw, 1rem) 0;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 40 40'%3E%3Cpath d='M9 21C8 10 16 4 25 5c8 1 12 8 11 16-1 8-7 12-14 12h-8c-3 0-5-3-5-7z' fill='%23FF2D20' stroke='%230A0A0A' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M10 22c-5-1-7-7-3-9 3-2 6 1 6 5' fill='%23FF2D20' stroke='%230A0A0A' stroke-width='2.6' stroke-linejoin='round'/%3E%3Crect x='12' y='31' width='15' height='7' rx='2' fill='%23fff' stroke='%230A0A0A' stroke-width='2.6'/%3E%3Cpath d='M17 11q6-3 12-1' stroke='%23fff' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") 22 14, pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.punch__stage:focus { outline: none; }
.punch__stage:focus-visible { outline: var(--p-bw) solid var(--p-red); outline-offset: -8px; }

/* пузырь и полоса лежат поверх верхней части SVG (там только антенна) */
.punch__top {
  position: absolute;
  z-index: 1;
  top: clamp(0.5rem, 2vw, 1rem);
  left: clamp(0.5rem, 2vw, 1rem);
  right: clamp(0.5rem, 2vw, 1rem);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  pointer-events: none;
}

/* пузырь с репликой */
.punch__bubble {
  position: relative;
  max-width: min(16rem, 46%);
  margin: 0;
  padding: 0.45rem 0.75rem 0.4rem;
  border: var(--p-bw) solid var(--p-ink);
  background: var(--p-white);
  box-shadow: 4px 4px 0 var(--p-ink);
  font-family: var(--p-display);
  font-weight: 800;
  font-size: clamp(1rem, 3.4vw, 1.4rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--p-ink);
}
.punch__bubble::after {
  content: "";
  position: absolute;
  right: 16%;
  bottom: -17px;
  width: 18px;
  height: 18px;
  background: var(--p-white);
  border-right: var(--p-bw) solid var(--p-ink);
  border-bottom: var(--p-bw) solid var(--p-ink);
  transform: skewX(35deg) rotate(45deg);
  transform-origin: center;
}

/* полоса «здоровья» ИИ */
.punch__hp { display: flex; align-items: center; gap: 0.35rem; flex: 0 1 8rem; min-width: 4.5rem; max-width: 34%; margin-top: 0.35rem; }
.punch__hp-label {
  font-family: var(--p-display);
  font-weight: 900;
  font-size: 1.1rem;
  line-height: 1;
  text-transform: uppercase;
  color: var(--p-ink);
}
.punch__hp-track {
  position: relative;
  flex: 1 1 auto;
  height: 0.9rem;
  border: var(--p-bw) solid var(--p-ink);
  background: var(--p-white);
  overflow: hidden;
}
.punch__hp-fill {
  position: absolute;
  inset: 0;
  background: var(--p-red);
  transform-origin: left center;
  transform: scaleX(var(--hp, 1));
}

/* SVG-лицо */
.ai {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  max-height: max(18rem, min(calc(100svh - 21rem), 34rem));
  overflow: visible;
  pointer-events: none;
}
@media (max-width: 40rem) {
  .ai { max-height: max(15rem, calc(100svh - 20rem)); }
}

.ai-line { stroke: var(--p-ink); stroke-width: 6; stroke-linejoin: round; }
.ai-thin { stroke-width: 4; }
.ai-ink { fill: var(--p-ink); }
.ai-white { fill: var(--p-white); }
.ai-red { fill: var(--p-red); }
.ai-pop { fill: var(--p-pop); }
.ai-none { fill: none; }
.ai-screen { fill: var(--p-pop); }
.ai-stroke { fill: none; stroke: var(--p-ink); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.ai-stroke.ai-thin { stroke-width: 5; }
.ai-mouth-line { stroke-width: 8; }
.ai-spring { fill: none; stroke: var(--p-ink); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.ai-gloss { fill: none; stroke: var(--p-white); stroke-width: 9; stroke-linecap: round; }
.ai-blush { fill: var(--p-red); opacity: 0.45; }
.ai-brow { fill: none; stroke: var(--p-ink); stroke-width: 10; stroke-linecap: round; }
.ai-lid { fill: var(--p-pop); stroke: var(--p-ink); stroke-width: 6; stroke-linejoin: round; }
.ai-x { fill: none; stroke: var(--p-ink); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.ai-spiral { fill: none; stroke: var(--p-ink); stroke-width: 4.5; stroke-linecap: round; }
.ai-crack { fill: none; stroke: var(--p-ink); stroke-width: 4.5; stroke-linejoin: miter; stroke-linecap: round; }
.ai-crack-hl { fill: none; stroke: var(--p-white); stroke-width: 3; stroke-linejoin: miter; }
.ai-led { fill: var(--p-red); }

.ai-head,
.ai-slump {
  transform-box: view-box;
  transform-origin: 200px 372px;
}
.ai[data-stage="3"] .ai-slump { transform: rotate(-3deg); }
.ai[data-stage="4"] .ai-slump { transform: rotate(4deg); }
.ai[data-stage="5"] .ai-slump { transform: rotate(-11deg) translateY(4px); }
.ai[data-stage="5"] .ai-screen { fill: #FFF3B8; }

.ai-spiral { transform-box: fill-box; transform-origin: center; animation: ai-spin 0.9s linear infinite; }
.ai-sparks { animation: ai-flicker 0.42s steps(2, jump-none) infinite; }
.ai-puff { fill: #ECECEC; stroke: var(--p-ink); stroke-width: 4; transform-box: fill-box; transform-origin: center bottom; animation: ai-rise 1.8s linear infinite; }
.ai-puff--2 { animation-delay: -0.6s; }
.ai-puff--3 { animation-delay: -1.2s; }
.ai-stars { transform-box: view-box; transform-origin: 200px 84px; animation: ai-orbit 1.6s linear infinite; }
.ai-sweat { transform-box: fill-box; transform-origin: center top; animation: ai-drip 1.4s steps(4, jump-none) infinite; }
.ai-glitch { animation: ai-glitch 0.8s steps(1, end) infinite; }

@keyframes ai-spin { to { transform: rotate(360deg); } }
@keyframes ai-flicker { 0% { opacity: 1; } 100% { opacity: 0.2; } }
@keyframes ai-rise {
  0% { transform: translate(0, 10px) scale(0.7); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(6px, -18px) scale(1.1); opacity: 0; }
}
@keyframes ai-orbit { to { transform: rotate(360deg); } }
@keyframes ai-drip { 0%, 60% { transform: translateY(0); } 100% { transform: translateY(8px); } }
@keyframes ai-glitch { 0% { transform: translateX(0); } 30% { transform: translateX(-8px); } 60% { transform: translateX(6px); } 85% { transform: translateX(0); } }

/* следы ударов */
.ai-mark-bump { fill: var(--p-red); stroke: var(--p-ink); stroke-width: 4; }
.ai-mark-glint { fill: var(--p-white); }
.ai-mark-dent { fill: none; stroke: var(--p-ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.ai-mark-plaster { fill: var(--p-white); stroke: var(--p-ink); stroke-width: 4; }
.ai-mark-pad { fill: var(--p-pop); stroke: var(--p-ink); stroke-width: 3; }
.ai-mark-dot { fill: var(--p-ink); }

/* вспышка удара */
.ai-flash__pop { transform-box: fill-box; transform-origin: center; }
.ai-flash__burst { fill: var(--p-red); stroke: var(--p-ink); stroke-width: 5; stroke-linejoin: miter; }
.ai-flash__core { fill: var(--p-pop); stroke: var(--p-ink); stroke-width: 3; stroke-linejoin: miter; }
.ai-flash__word {
  font-family: var(--p-display);
  font-weight: 900;
  font-size: 40px;
  text-transform: uppercase;
  fill: var(--p-ink);
  letter-spacing: 0.5px;
}

/* нокаут */
.punch__ko {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0 clamp(0.75rem, 3vw, 1.5rem) clamp(0.75rem, 3vw, 1.25rem);
  pointer-events: none;
}
.punch__ko[hidden] { display: none; }
.punch__ko-text {
  margin: 0;
  font-family: var(--p-display);
  font-weight: 900;
  font-size: clamp(4.5rem, 21vw, 8.5rem);
  line-height: 0.8;
  color: var(--p-red);
  -webkit-text-stroke: 4px var(--p-ink);
  paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--p-ink);
  transform: rotate(-8deg);
  transform-origin: left bottom;
  pointer-events: none;
}
.punch__again {
  pointer-events: auto;
  min-height: 2.75rem;
  min-width: 8rem;
  font-size: 1.25rem;
  background: var(--p-pop);
  color: var(--p-ink);
  border: var(--p-bw) solid var(--p-ink);
  box-shadow: 4px 4px 0 var(--p-ink);
}
.punch__again:hover { background: var(--p-pop); color: var(--p-ink); }
.punch__again:active { transform: translate(4px, 4px); box-shadow: none; }

/* ---------- кнопки под сценой ---------- */

.punch__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1rem;
}
.punch__actions .btn { min-height: 2.75rem; }
.punch__cta { font-size: 1.15rem; }
.punch__sound { display: inline-flex; align-items: center; gap: 0.4rem; }
.punch__sound-icon { width: 1.25rem; height: 1.25rem; flex: none; }
.punch__sound-body { fill: currentColor; }
.punch__sound-on,
.punch__sound-off { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.punch__sound[aria-pressed="false"] .punch__sound-on { display: none; }
.punch__sound[aria-pressed="true"] .punch__sound-off { display: none; }
.punch__sound[aria-pressed="true"] { background: var(--p-pop); color: var(--p-ink); }

.punch__status { margin: 0; min-height: 1.25em; text-align: center; font-size: 0.9375rem; color: var(--p-muted); overflow-wrap: anywhere; }
.punch__noscript { margin: 0; text-align: center; }

/* ---------- без анимации ---------- */

@media (prefers-reduced-motion: reduce) {
  .ai-spiral, .ai-sparks, .ai-puff, .ai-stars, .ai-sweat, .ai-glitch { animation: none; }
  .ai-puff { opacity: 1; }
}

@media (forced-colors: active) {
  .punch__ring { border-color: CanvasText; }
}

/* скрытые детали не анимируются впустую */
.ai [display="none"],
.ai [display="none"] * { animation: none; }