:root {
  color-scheme: light;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --ink: #24211e;
  --muted: #817b73;
  --paper: #f7f6f2;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; background: var(--paper); }
body { min-height: 100svh; color: var(--ink); }
button, a { -webkit-tap-highlight-color: transparent; }

.site-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  height: 70px;
  padding: 0 clamp(20px, 4vw, 56px);
  border-bottom: 1px solid rgb(36 33 30 / 8%);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand img { display: block; width: 32px; height: 32px; object-fit: contain; }
.brand span { font-size: 16px; font-weight: 750; letter-spacing: -.045em; }
.home { min-height: calc(100svh - 70px); }
.hero {
  display: flex;
  min-height: calc(100svh - 70px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 16px 24px;
}
.stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(1360px, 100%);
  height: min(760px, calc(100svh - 138px));
  min-height: 400px;
  margin: 0 auto;
  visibility: hidden;
}
.stage.is-loaded { visibility: visible; }

/* All six original PNGs share one canvas and keep the same size throughout. */
.fry-button, .box-sprite {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--art-size, 300px);
  height: var(--art-size, 300px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transform-origin: 0 0;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.fry-button--1 { z-index: 1; }
.fry-button--2 { z-index: 2; }
.fry-button--3 { z-index: 3; }
.fry-button--4 { z-index: 4; }
.fry-button--5 { z-index: 5; }
.box-sprite { z-index: 10; filter: drop-shadow(0 3px 3px rgb(48 38 27 / 13%)); }
.fry-button { outline: none; touch-action: manipulation; text-decoration: none; }
.fry-art, .fry-hit { position: absolute; inset: 0; display: block; }
.fry-art { pointer-events: none; filter: drop-shadow(0 2px 2px rgb(48 38 27 / 12%)); transition: filter 160ms ease; }
.fry-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* Only the invisible hit area is clipped; the artwork uses its own PNG alpha. */
.fry-hit { pointer-events: none; }
.stage.is-ready .fry-button[aria-disabled="false"] .fry-hit { pointer-events: auto; cursor: pointer; }
.stage.is-ready .fry-button, .stage.is-ready .box-sprite { will-change: auto; }
.stage.is-ready .fry-button[aria-disabled="false"]:hover .fry-art {
  filter: drop-shadow(0 4px 3px rgb(48 38 27 / 25%)) brightness(1.04);
}
.fry-button:focus-visible .fry-art {
  filter: drop-shadow(1px 0 0 #8b4b26) drop-shadow(-1px 0 0 #8b4b26)
    drop-shadow(0 1px 0 #8b4b26) drop-shadow(0 -1px 0 #8b4b26);
}
.fry-label {
  position: absolute;
  left: var(--label-x);
  top: var(--label-y);
  display: block;
  max-width: var(--label-width);
  padding: 0 2px;
  overflow: hidden;
  color: #623b1c;
  font-size: clamp(11px, calc(var(--art-size) * .047), 15px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.025em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--label-angle));
  opacity: 0;
  transition: opacity 180ms ease;
}
.stage.is-ready .fry-label { opacity: 1; }
.instruction {
  min-height: 20px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.02em;
  text-align: center;
  opacity: 0;
  transition: opacity 300ms ease;
}
.stage.is-ready + .instruction { opacity: 1; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 739px) {
  .site-header { height: 64px; padding-inline: 18px; }
  .brand { gap: 9px; }
  .brand img { width: 30px; height: 30px; }
  .brand span { font-size: 15px; }
  .home, .hero { min-height: calc(100svh - 64px); }
  .hero { padding: 0 8px 18px; }
  .stage { height: min(760px, calc(100svh - 114px)); min-height: 420px; }
  .instruction { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .fry-art, .fry-label, .instruction { transition: none; }
}