/* Helmet sticker mini-game: isolated scene and action-card styling. */
.helmet-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 190px;
  margin: 2px 0 16px;
  overflow: hidden;
  border: 1px solid #526353;
  border-radius: 13px;
  background:
    radial-gradient(ellipse at 50% 78%, #8e9a7224, transparent 42%),
    linear-gradient(145deg, #29342c, #171e19 72%);
  isolation: isolate;
}
.helmet-visual::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(135deg, transparent 0 18px, #fff 19px, transparent 20px 38px);
  content: "";
  opacity: .025;
}
.helmet-shell {
  position: relative;
  width: min(74%, 340px);
  height: 118px;
  margin-top: 17px;
  border: 2px solid #f0c54f;
  border-radius: 150px 150px 28px 28px / 112px 112px 24px 24px;
  background: linear-gradient(165deg, #fff083 2%, #f5ca43 32%, #e7a923 73%, #b8791e 100%);
  box-shadow: inset 0 8px 12px #fff8a577, inset 0 -11px 15px #88571966, 0 20px 18px -13px #000c;
  transform: perspective(360px) rotateX(-5deg);
}
.helmet-shell::before {
  position: absolute;
  right: 14%;
  bottom: 17px;
  left: 14%;
  height: 20px;
  border: 2px solid #bd7d20;
  border-top: 2px solid #ffe478;
  border-radius: 50%;
  background: linear-gradient(#e7ad31, #c78320);
  box-shadow: 0 5px 0 #8d5d1d66;
  content: "";
}
.helmet-shell::after {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 13px;
  height: 68px;
  border-right: 2px solid #d19027;
  border-left: 2px solid #ffe77b;
  border-radius: 50%;
  content: "";
  opacity: .8;
  transform: translateX(-50%);
}
.helmet-sticker {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid #fff5d7;
  border-radius: 50%;
  background: #f7f0dd;
  box-shadow: 0 3px 5px #51381799, inset 0 0 0 2px #d5ccb4;
  font: 32.2px/1 system-ui, sans-serif;
  font-style: normal;
}
.helmet-fish { top: 38px; left: 27%; color: #3988a0; transform: rotate(-12deg); }
.helmet-star { top: 49px; right: 24%; color: #db8733; transform: rotate(10deg); }

.peel-list { display: grid; gap: 9px; }
.peel-card {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(90px, 1.1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #465546;
  border-radius: 10px;
  background: linear-gradient(110deg, #263129, #1b241e);
  box-shadow: inset 3px 0 #d6ad40, 0 3px 10px #0002;
  font-size: 16.8px;
  transition: border-color .16s, background .16s, opacity .18s, transform .16s;
}
.peel-card:focus-within { border-color: #d4ec8c; background: #2b382c; }
.peel-card > span { display: grid; gap: 3px; min-width: 0; color: #f1f0e9; font-weight: 700; line-height: 1.35; }
.peel-card .peel-instruction { color: #aebbad; font-size: 14px; font-weight: 500; line-height: 1.3; }
.peel-card > b { color: #c5f477; font: 14px 'Space Mono', monospace; text-align: right; }
.peel-card input { width: 100%; min-width: 70px; accent-color: #c5f477; cursor: grab; }
.peel-card.peeled { border-color: #577149; background: #20291f; opacity: .62; }
.peel-card.peeled > span { text-decoration: line-through; text-decoration-color: #a7ca76; }
.peel-card .peel-track, .peel-card .peel-stack { min-width: 0; }
.peel-edge button, .peel-hold button { min-height: 38px; padding: 8px 11px; white-space: normal; }
.peel-card .peel-hook { grid-column: 1; grid-row: 2; }
.peel-card .peel-drag-track { grid-column: 2; grid-row: 1 / span 2; min-height: 34px; touch-action: none; }
.peel-card .peel-drag-track.peel-ready { border-color: #c5f477; box-shadow: inset 0 0 0 1px #c5f47755; }
.peel-card.peel-edge > b { grid-column: 3; grid-row: 1 / span 2; }
.peel-card.peel-hold > .peel-bar { grid-column: 2; }
.peel-card.peel-hold > b { grid-column: 2; grid-row: 2; }
.peel-card.peel-hold > button { grid-column: 3; grid-row: 1; }
.peel-card .peel-flick-track { min-height: 34px; touch-action: none; }
.peel-card .peel-sequence > .peel-stack { grid-column: 2; }
.peel-card .peel-bar { min-width: 50px; }
.peel-flick .peel-runner { touch-action: none; }
.peel-card .peel-step { touch-action: manipulation; }

@media (max-width: 560px) {
  .helmet-visual { min-height: 156px; margin-bottom: 12px; }
  .helmet-shell { width: 78%; height: 98px; }
  .helmet-shell::before { bottom: 13px; height: 17px; }
  .helmet-shell::after { top: 14px; height: 58px; }
  .helmet-sticker { width: 35px; height: 35px; font-size: 26.6px; }
  .helmet-fish { top: 31px; }
  .helmet-star { top: 39px; }
  .peel-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 9px;
    padding: 10px;
  }
  .peel-card > span { grid-column: 1; }
  .peel-card > b { grid-column: 2; grid-row: 1; }
  .peel-card > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .peel-card > :nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
  .peel-card.peel-slide > input { grid-column: 1 / -1; grid-row: 2; }
  .peel-card.peel-edge > .peel-hook { grid-column: 1; grid-row: 2; }
  .peel-card.peel-edge > .peel-drag-track { grid-column: 1 / -1; grid-row: 3; }
  .peel-card.peel-edge > b { grid-column: 2; grid-row: 2; }
  .peel-card.peel-hold > .peel-bar { grid-column: 1 / -1; grid-row: 2; }
  .peel-card.peel-hold > b { grid-column: 2; grid-row: 3; }
  .peel-card.peel-hold > button { grid-column: 1; grid-row: 3; }
  .peel-card.peel-flick > .peel-track,
  .peel-card.peel-sequence > .peel-stack { grid-column: 1 / -1; grid-row: 2; }
  .peel-card.peel-flick > b,
  .peel-card.peel-sequence > b { grid-column: 1 / -1; grid-row: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .peel-card { transition: none; }
}