:root {
  color-scheme: dark;
  font-family: ui-rounded, "Hiragino Maru Gothic ProN", "Hiragino Sans", system-ui, sans-serif;
  --ink: #262431;
  --cream: #fff8ef;
  --rose: #d8a9b6;
  --lavender: #aaa1c9;
  --sage: #aebca8;
  --hud-text-shadow: 0 1px 3px rgba(34, 27, 48, .42);
  --hud-glow-shadow: 0 0 8px rgba(184, 170, 218, .12);
  --hud-overlay-top: rgba(55, 42, 72, .82);
  --hud-overlay-mid: rgba(66, 49, 79, .61);
  --hud-overlay-fade: rgba(82, 59, 88, .24);
  --number-color: #fff9ef;
  --unit-color: #ffcab8;
}

* { box-sizing: border-box; }
html, body { position: fixed; inset: 0; width: 100%; height: 100%; margin: 0; overflow: hidden; background: #211f2b; }
body { overscroll-behavior: none; touch-action: none; }
button { font: inherit; }
button,
a[href] { cursor: pointer; }
button:active,
a[href]:active { cursor: grabbing; }
button:disabled { cursor: not-allowed; }

#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 20%, #e7c5c3, #5e526a 68%, #24222d);
  -webkit-user-select: none;
  user-select: none;
}

#game { position: absolute; inset: 0; display: block; width: 100%; height: 100%; image-rendering: pixelated; }

.robot-foreground {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(-185px, -38.5vw, -145px);
  width: min(180%, 800px);
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  filter: contrast(.9) saturate(.82) drop-shadow(0 -4px 7px rgba(34, 29, 39, .22));
}
.robot-foreground[hidden] { display: none; }

.suction-fx {
  position: absolute;
  left: 50%;
  bottom: 104px;
  width: 230px;
  height: 190px;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
}
.suction-fx.active { opacity: .38; }
.suction-fx i {
  --turn: 0deg;
  position: absolute;
  left: calc(50% - 2px);
  bottom: 0;
  width: 4px;
  height: 112px;
  border-radius: 4px;
  background: linear-gradient(to top, rgba(255,253,225,.02), rgba(255,238,216,.38) 42%, rgba(255,255,247,0));
  filter: none;
  transform-origin: 50% 100%;
  transform: rotate(var(--turn)) translateY(-12px) scaleY(.8);
  animation: inhale-ray .28s steps(3, end) infinite;
}
.suction-fx i:nth-child(1) { --turn: -62deg; height: 82px; }
.suction-fx i:nth-child(2) { --turn: -49deg; height: 105px; animation-delay: -.08s; }
.suction-fx i:nth-child(3) { --turn: -36deg; height: 128px; }
.suction-fx i:nth-child(4) { --turn: -23deg; height: 145px; animation-delay: -.15s; }
.suction-fx i:nth-child(5) { --turn: -11deg; height: 155px; }
.suction-fx i:nth-child(6) { --turn: 0deg; height: 164px; animation-delay: -.1s; }
.suction-fx i:nth-child(7) { --turn: 11deg; height: 155px; }
.suction-fx i:nth-child(8) { --turn: 23deg; height: 145px; animation-delay: -.18s; }
.suction-fx i:nth-child(9) { --turn: 36deg; height: 128px; }
.suction-fx i:nth-child(10) { --turn: 49deg; height: 105px; animation-delay: -.06s; }
.suction-fx i:nth-child(11) { --turn: 62deg; height: 82px; }
@keyframes inhale-ray {
  0% { opacity: .15; transform: rotate(var(--turn)) translateY(-28px) scaleY(.58); }
  55% { opacity: .62; }
  100% { opacity: 0; transform: rotate(var(--turn)) translateY(2px) scaleY(1); }
}

.hud {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: 20px;
  right: 20px;
  min-height: 82px;
  display: grid;
  grid-template-rows: auto auto;
  gap: 10px;
  padding: 0;
  pointer-events: none;
  color: var(--cream);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-shadow: var(--hud-text-shadow), var(--hud-glow-shadow);
  isolation: isolate;
  z-index: 4;
}
.hud::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * max(14px, env(safe-area-inset-top)));
  left: -20px;
  right: -20px;
  bottom: -46px;
  pointer-events: none;
  background: linear-gradient(180deg, var(--hud-overlay-top) 0%, var(--hud-overlay-mid) 56%, var(--hud-overlay-fade) 79%, rgba(83, 64, 97, 0) 100%);
}

.hud strong,
.hud small,
.hud .hud-label {
  text-shadow: var(--hud-text-shadow), var(--hud-glow-shadow);
}
.hud strong { color: var(--number-color); }
.hud small { color: var(--unit-color); opacity: 1; }

.hud-total {
  justify-content: center;
  align-items: baseline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.hud-score-group {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.hud-hair-breakdown {
  display: none !important;
}
.hud-hair-row {
  display: grid;
  grid-template-columns: max-content max-content max-content;
  align-items: center;
  column-gap: 7px;
  justify-content: start;
  font-weight: 850;
  line-height: 1;
}
.hud-hair-row + .hud-hair-row {
  padding-top: 0;
  border-top: 1px solid rgba(255, 245, 235, .25);
}
.hud-hair-row > span { font-size: 10px; letter-spacing: .01em; opacity: .9; }
.hud-hair-row strong { font-size: 17px; letter-spacing: -.03em; }
.hud-hair-row small { font-size: 8px; opacity: .84; }
.hud-hair-kotaro strong { color: #ffd6ca; }
.hud-hair-yuragi strong { color: #f2dfc8; }

.hud-item {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-weight: 900;
  white-space: nowrap;
}
.hud-icon { width: 20px; height: 20px; flex: 0 0 20px; align-self: center; }
.paw-icon { fill: #efaaa7; filter: drop-shadow(0 2px 0 rgba(72, 43, 50, .48)); }
.clock-icon { fill: none; stroke: #fff7ed; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .88; }
.hud-label { margin-left: 1px; font-size: 14px; letter-spacing: .04em; opacity: .94; }
.hud-item strong { font-size: clamp(34px, 10vw, 44px); line-height: 1; letter-spacing: -.045em; }
.hud-item small { font-size: 11px; letter-spacing: .02em; opacity: .82; }
.hud-divider { display: none; }
.hud-time {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  text-align: right;
  filter: none;
}
.hud-time-copy { display: flex; align-items: baseline; justify-content: flex-end; gap: 3px; }
.hud-time strong { font-size: 21px; letter-spacing: -.02em; }
.hud-time small { font-size: 11px; opacity: .94; }
.hud-time-bar { width: 100%; height: 7px; overflow: hidden; border: 1px solid rgba(255,255,255,.64); border-radius: 99px; background: rgba(28,23,27,.32); }
.hud-time-bar i { display: block; width: var(--time-progress, 100%); height: 100%; border-radius: inherit; background: rgba(255,255,255,.88); transition: width .22s linear; }
.hud-time-bar i.is-resetting { transition: none; }
.hud-total strong { font-size: clamp(30px, 8.5vw, 36px); }
.hud-total small { font-size: 13px; opacity: .94; }
.time-penalty {
  position: absolute;
  right: 0;
  top: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #fff7ed;
  background: #df7776;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .02em;
  opacity: 0;
  transform: translateY(-8px) scale(.82);
  pointer-events: none;
  box-shadow: 0 3px 0 rgba(79, 44, 52, .4), 0 8px 18px rgba(100, 51, 59, .28);
}
.hud-time.penalty-hit strong { color: var(--number-color); }
.hud-time.penalty-hit .time-penalty { animation: time-penalty-pop 1.05s ease-out both; }
@keyframes time-penalty-pop {
  0% { opacity: 0; transform: translateY(-11px) scale(.7); }
  16% { opacity: 1; transform: translateY(0) scale(1.14); }
  65% { opacity: 1; transform: translateY(7px) scale(1); }
  100% { opacity: 0; transform: translateY(14px) scale(.92); }
}
.baby-status {
  position: absolute;
  left: 50%;
  top: calc(100% + 7px);
  z-index: 3;
  min-width: 218px;
  min-height: 34px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid rgba(255,225,218,.62);
  border-radius: 999px;
  color: #fff5ec;
  background: rgba(102,70,77,.88);
  box-shadow: 0 7px 20px rgba(45,28,34,.25), inset 0 1px 0 rgba(255,255,255,.14);
  transform: translateX(-50%);
  backdrop-filter: blur(7px);
  animation: baby-status-in .28s ease-out both;
}
.baby-status[hidden] { display: none; }
.baby-status > span { font-size: 15px; }
.baby-status strong { font-size: 11px; letter-spacing: .02em; white-space: nowrap; }
.baby-status small { font-size: 10px; font-weight: 800; color: #ffcfc3; white-space: nowrap; }
@keyframes baby-status-in {
  from { opacity: 0; transform: translate(-50%, -5px) scale(.96); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.message {
  position: absolute;
  left: 50%;
  top: 19%;
  transform: translate(-50%, -6px);
  color: var(--cream);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .05em;
  opacity: 0;
  transition: opacity .15s, transform .15s;
  text-shadow: 0 2px 8px #292431;
  pointer-events: none;
  z-index: 5;
}
.message.show { opacity: 1; transform: translate(-50%, 0); }
.message.impact-message {
  top: 46%;
  z-index: 8;
  width: max-content;
  max-width: calc(100% - 34px);
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #fff8ef;
  background: none;
  backdrop-filter: none;
  font-size: 22px;
  line-height: 1.45;
  text-align: center;
  box-shadow: none;
  text-shadow: 0 2px 5px rgba(42, 25, 34, .52);
}
.message.baby-message {
  background: none;
}
.swat-impact {
  display: none;
}
.cat-hit {
  position: absolute;
  inset: 0;
  z-index: 7;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 72%, rgba(95, 45, 54, .08), rgba(35, 21, 30, .62));
}
.cat-hit.kotaro,
.cat-hit.yuragi { animation: cat-impact-flash .82s cubic-bezier(.16,.8,.25,1) both; }
.cat-hit.baby {
  background: radial-gradient(circle at 50% 62%, rgba(255, 185, 184, .18), rgba(92, 55, 72, .48));
  animation: baby-impact-flash .72s ease-out both;
}
@keyframes cat-impact-flash {
  0% { opacity: 0; transform: scale(1.08); }
  16%,55% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.98); }
}
@keyframes baby-impact-flash {
  0% { opacity: 0; }
  18%, 48% { opacity: .88; }
  100% { opacity: 0; }
}
.impact-shake #game,
.impact-shake .robot-foreground,
.impact-shake .hud { animation: hard-impact-shake .66s linear both; }
@keyframes hard-impact-shake {
  0%,100% { transform: translate(0,0) rotate(0); }
  10% { transform: translate(-11px,8px) rotate(-.7deg); }
  22% { transform: translate(13px,-9px) rotate(.8deg); }
  34% { transform: translate(-10px,-5px) rotate(-.45deg); }
  48% { transform: translate(9px,7px) rotate(.45deg); }
  64% { transform: translate(-6px,3px) rotate(-.25deg); }
  80% { transform: translate(4px,-3px) rotate(.15deg); }
}
.hazard-fail {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff3e7;
  text-align: center;
  background: rgba(65, 45, 52, .56);
  backdrop-filter: blur(2px) saturate(.55);
  animation: hazard-gloom .45s ease-out both;
}
.hazard-fail[hidden] { display: none; }
.hazard-fail strong { margin-top: 8px; font-size: 38px; font-weight: 900; text-shadow: 0 4px 0 rgba(55,32,39,.5); }
.hazard-fail p { margin: 12px 0 0; font-size: 16px; font-weight: 750; }
@keyframes hazard-gloom { from { opacity: 0; } to { opacity: 1; } }
.message.pickup {
  top: 64%;
  min-width: 112px;
  padding: 8px 17px 9px;
  border: 1.5px solid rgba(255, 226, 214, .58);
  border-radius: 999px;
  color: var(--number-color);
  background:
    radial-gradient(circle at 50% 22%, rgba(214, 151, 151, .14), transparent 55%),
    linear-gradient(180deg, rgba(97, 65, 68, .47), rgba(67, 45, 50, .66));
  backdrop-filter: blur(4px) saturate(.78);
  box-shadow: none;
  font-size: 23px;
  letter-spacing: -.01em;
  line-height: 1;
  text-align: center;
  text-shadow: var(--hud-text-shadow), var(--hud-glow-shadow);
}
.message.pickup .pickup-number { color: var(--number-color); }
.message.pickup .pickup-unit { color: var(--unit-color); }

.controls { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.joystick {
  position: absolute;
  inset: 0;
  touch-action: none;
  pointer-events: auto;
  cursor: grab;
}
.joystick:active { cursor: grabbing; }
.stick {
  position: absolute;
  left: var(--thumb-origin-x, 50%);
  top: var(--thumb-origin-y, 72%);
  width: 58px;
  height: 58px;
  border: 1.5px solid rgba(255, 244, 237, .48);
  border-radius: 50%;
  background: rgba(57, 43, 55, .2);
  box-shadow: inset 0 0 0 1px rgba(74, 56, 69, .18);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.88);
  transition: opacity .12s ease, transform .12s ease;
}
.stick::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 236, 226, .78);
  box-shadow: 0 2px 7px rgba(48, 35, 45, .22);
  transform: translate(calc(-50% + var(--thumb-x, 0px)), calc(-50% + var(--thumb-y, 0px)));
}
.joystick.is-active .stick { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.joystick.is-one-hand .stick { border-color: rgba(255, 210, 207, .62); }
.panel {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(32px, env(safe-area-inset-top)) 28px max(32px, env(safe-area-inset-bottom));
  color: var(--cream);
  text-align: center;
  background: linear-gradient(180deg, rgba(48,43,60,.36), rgba(35,31,44,.68));
  backdrop-filter: blur(5px);
}
.panel[hidden] { display: none; }
.eyeline { margin: 0 0 18px; font-size: 11px; font-weight: 800; letter-spacing: .24em; opacity: .72; }
.panel > p:not(.eyeline) { margin: 22px 0 0; font-size: 13px; line-height: 1.9; opacity: .8; }
.intro-panel {
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 22px max(24px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 35%, rgba(119, 79, 76, .08), rgba(50, 36, 43, .31) 68%),
    linear-gradient(180deg, rgba(71, 50, 55, .36), rgba(64, 43, 47, .58));
  backdrop-filter: blur(9px) saturate(.76);
}
.intro-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 230, 217, .055), transparent 36%, rgba(54, 35, 42, .14));
}
.intro-logo {
  position: relative;
  width: min(342px, 94vw);
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 14px rgba(43, 27, 31, .22));
}
.intro-guide {
  position: relative;
  width: min(330px, 88vw);
  margin-top: 23px;
}
.guide-paw-rule {
  position: absolute;
  left: 0;
  width: 100%;
  height: 25px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffc2b2;
  pointer-events: none;
  z-index: 1;
}
.guide-paw-rule::before,
.guide-paw-rule::after {
  content: "";
  flex: 1;
  border-top: 1px solid rgba(255, 243, 235, .29);
}
.guide-paw-rule svg { width: 25px; height: 25px; fill: currentColor; flex: 0 0 auto; }
.guide-paw-rule-top { top: 0; transform: translateY(-50%); }
.guide-paw-rule-bottom { bottom: 0; transform: translateY(50%); }
.intro-guide-row {
  min-height: 82px;
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  text-align: left;
}
.intro-guide-row + .intro-guide-row { border-top: 1px solid rgba(255, 243, 235, .13); }
.intro-guide-row p {
  margin: 0;
  padding-left: 10px;
  color: rgba(255, 248, 239, .88);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .015em;
  line-height: 1.55;
  text-shadow: 0 2px 9px rgba(42, 26, 34, .34);
}
.guide-copy-sp { display: inline; }
.guide-copy-pc { display: none; }
.intro-guide-icon {
  width: 64px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(48, 30, 36, .25));
}
.intro-guide-icon-scratch {
  filter: drop-shadow(0 2px 4px rgba(48, 30, 36, .25));
}
.sound-notice {
  position: relative;
  margin: 17px 0 -14px;
  color: rgba(255, 238, 226, .76);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .045em;
  text-shadow: 0 2px 8px rgba(43, 27, 33, .36);
}
.sound-notice span { margin-right: 5px; color: #f3b7b0; }
.intro-panel .primary {
  position: relative;
  width: min(282px, 78vw);
  min-height: 62px;
  margin-top: 28px;
  font-size: 17px;
  letter-spacing: .04em;
}
.primary {
  width: min(282px, 78vw);
  min-width: 0;
  min-height: 62px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  color: #3d3749;
  background: var(--cream);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: .04em;
  box-shadow: 0 12px 34px rgba(23,20,31,.28), inset 0 -3px 0 rgba(158,140,170,.18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.primary:hover,
.primary:focus-visible {
  transform: translateY(-3px) scale(1.015);
  filter: brightness(1.04);
  box-shadow: 0 16px 38px rgba(23,20,31,.32), 0 0 0 4px rgba(255,235,224,.16), inset 0 -3px 0 rgba(158,140,170,.18);
  outline: none;
}
.primary:active { transform: translateY(2px); }

.result-panel {
  justify-content: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 32%, rgba(214, 151, 151, .14), transparent 48%),
    linear-gradient(180deg, rgba(97, 65, 68, .47), rgba(67, 45, 50, .66));
  backdrop-filter: blur(8px) saturate(.78);
}
.result-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 234, 221, .04), transparent 45%, rgba(49, 31, 39, .08));
}
.result-content {
  position: relative;
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block: auto;
}
.result-kicker-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 7px;
}
.result-panel.is-oops .result-kicker-row { display: none; }
.result-kicker {
  margin: 0;
  color: #ffe2d6;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .08em;
  text-shadow: 0 2px 8px rgba(63, 39, 46, .36);
}
.result-score {
  margin: 0;
  color: var(--number-color);
  font-size: clamp(88px, 28vw, 124px);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.075em;
  text-shadow: 0 4px 0 rgba(87, 58, 61, .68), 0 12px 22px rgba(56, 35, 43, .2);
}
.result-score small { margin-left: 7px; font-size: .25em; letter-spacing: 0; color: var(--unit-color); }
.result-label {
  margin: 13px 0 16px !important;
  color: #fff3e8;
  font-size: clamp(11px, 3.5vw, 14px) !important;
  font-weight: 800;
  line-height: 1.4 !important;
  opacity: .95 !important;
  text-shadow: 0 2px 0 rgba(83, 53, 60, .6);
}
.result-label strong {
  color: #fff9ef;
  font-size: 1.15em;
  font-weight: 900;
  white-space: nowrap;
}
.result-comparison-tail { white-space: nowrap; }
.result-divider {
  width: calc(100% - 44px);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
}
.result-divider::before,
.result-divider::after { content: ""; height: 1px; flex: 1; background: rgba(255, 236, 224, .25); }
.result-divider::before,
.result-divider::after { background: rgba(255, 236, 224, .42); }
.result-divider-paw {
  width: 28px;
  height: 28px;
  display: block;
  flex: 0 0 28px;
  fill: #ffc7b5;
  filter: drop-shadow(0 2px 0 rgba(91, 56, 62, .42));
}
.cat-results {
  width: calc(100% - 44px);
  margin: 0;
  display: grid;
  gap: 22px;
}
.cat-result-row {
  height: 84px;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0;
}
.cat-result-row + .cat-result-row {
  position: relative;
  border-top: 0;
}
.cat-result-row + .cat-result-row::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -11px;
  height: 1px;
  background: rgba(255, 236, 224, .32);
}
.result-divider-bottom { margin: 0 0 10px; }
.cat-face {
  width: 74px;
  height: 72px;
  display: block;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(68, 43, 48, .65));
}
.cat-face-kotaro {
  background-image: url("./public/assets/ui/result/kotaro-face-v2.png");
  background-size: 80px 80px;
  background-position: center;
}
.cat-face-yuragi {
  background-image: url("./public/assets/ui/result/yuragi-face.png");
  background-size: 86px 86px;
  background-position: center;
}
.cat-result-row dt {
  text-align: left;
  color: rgba(255, 248, 239, .92);
  font-size: 15px;
  font-weight: 800;
  text-shadow: 0 2px 5px rgba(58, 38, 44, .28);
}
.cat-result-row dd {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin: 0;
  color: var(--number-color);
  font-size: 36px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(103, 63, 67, .52);
}
.cat-result-row dd small { color: var(--unit-color); font-size: 16px; }
.result-restart {
  margin-top: 22px;
  font-size: 17px;
}
.result-tools-label {
  margin: 30px 0 12px !important;
  color: rgba(255, 232, 218, .78);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2 !important;
  opacity: 1 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.result-tools { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.result-tool {
  appearance: none;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 1.5px solid rgba(255, 225, 210, .58);
  border-radius: 999px;
  color: #ffe9dc;
  background: linear-gradient(180deg, rgba(245, 205, 195, .12), rgba(126, 79, 87, .12));
  box-shadow: inset 0 1px 0 rgba(255, 250, 241, .13), 0 4px 10px rgba(47, 29, 36, .09);
  font-size: 12px;
  font-family: inherit;
  font-weight: 800;
  letter-spacing: .01em;
  text-decoration: none;
}
.result-tool svg { width: 21px; height: 21px; fill: currentColor; flex: 0 0 auto; }
.result-tool:active { transform: translateY(2px); background: rgba(255, 221, 211, .18); }
.result-tool:hover,
.result-tool:focus-visible {
  transform: translateY(-2px);
  color: #fff8ed;
  border-color: rgba(255,239,226,.88);
  background: rgba(255,221,211,.19);
  box-shadow: 0 8px 18px rgba(47,29,36,.17), inset 0 1px 0 rgba(255,250,241,.2);
  outline: none;
}

@media (min-width: 700px) {
  #app { left: 50%; width: min(520px, 100vw); transform: translateX(-50%); box-shadow: 0 0 80px #111; }
  #game { inset: 0; }
}

@media (hover: hover) and (pointer: fine) {
  .guide-copy-sp { display: none; }
  .guide-copy-pc { display: inline; }
}

/* Some mobile browsers report a fine pointer while a stylus or trackpad is
   available. The compact layout must still show only the touch instruction. */
@media (max-width: 699px) {
  .guide-copy-sp { display: inline; }
  .guide-copy-pc { display: none; }
}

@media (max-width: 350px) {
  .hud { left: 16px; right: 16px; min-height: 76px; gap: 9px; }
  .hud::before { left: -16px; right: -16px; }
  .hud-total strong { font-size: 30px; }
  .hud-total small { font-size: 12px; }
  .hud-time { gap: 8px; }
  .hud-time strong { font-size: 20px; }
  .hud-time small { font-size: 10px; }
  .hud-time-bar { height: 7px; }
  .intro-panel { padding-block: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-bottom)); }
  .intro-guide { margin-top: 15px; }
  .intro-guide-row { min-height: 72px; grid-template-columns: 64px 1fr; }
  .intro-guide-icon { width: 58px; height: 49px; }
  .intro-guide-row p { padding-left: 10px; font-size: 12px; }
  .intro-panel .primary { margin-top: 20px; }
  .result-panel { padding-inline: 13px; }
  .result-score { font-size: 76px; }
  .cat-result-row { min-height: 65px; grid-template-columns: 64px 1fr auto; }
  .cat-face { transform: scale(.9); transform-origin: left center; }
  .cat-result-row dd { font-size: 27px; }
  .result-tool { padding-inline: 7px; font-size: 11px; }
}

@media (max-height: 760px) {
  .intro-panel { padding-block: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-bottom)); }
  .intro-guide { margin-top: 15px; }
  .intro-guide-row { min-height: 72px; }
  .intro-panel .primary { margin-top: 20px; }
  .result-kicker { margin-bottom: 4px; }
  .result-score { font-size: 72px; }
  .result-label { margin-block: 5px 8px !important; font-size: clamp(11px, 3.5vw, 14px) !important; }
  .result-divider { margin: 7px 0 0; }
  .result-divider-bottom { margin: 0 0 7px; }
  .cat-results { gap: 16px; }
  .cat-result-row { min-height: 60px; }
  .cat-result-row + .cat-result-row::before { top: -8px; }
  .result-tools-label { margin: 20px 0 10px !important; }
  .result-tool { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .message { transition: none; }
  .suction-fx i { animation: none; opacity: .68; }
  .impact-shake #game, .impact-shake .robot-foreground, .impact-shake .hud, .impact-shake .message { animation: none; }
}