:root {
    --bg: #f6c70c;
    --ink: #ffffff;
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--bg);
    color: var(--ink);
    font-family: "Press Start 2P", system-ui, sans-serif;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
  }

  body {
    position: relative;
    width: 100vw;
    height: 100vh;
  }

  /* ── Header (top-left) ─────────────────────────── */
  .header {
    position: fixed;
    top: clamp(20px, 3vw, 44px);
    left: clamp(20px, 3vw, 44px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.4vw, 22px);
  }

  .brand {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1vw, 16px);
    text-decoration: none;
  }

  .brand-icon {
    height: clamp(40px, 4.2vw, 64px);
    width: auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: block;
  }

  .brand-controls {
    font-size: clamp(8px, 0.85vw, 11px);
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.92);
    text-shadow: 2px 2px 0 rgba(0,0,0,0.16);
    pointer-events: none;
  }
  .brand-controls .kbd {
    display: inline-block;
    border: 2px solid rgba(255,255,255,0.92);
    padding: 2px 5px;
    margin: 0 1px;
    border-radius: 3px;
    font-size: clamp(7px, 0.75vw, 10px);
  }

  /* Site brand (icon + logo as a set) — bottom-left */
  .site-brand {
    position: fixed;
    left: clamp(20px, 3vw, 44px);
    bottom: clamp(20px, 3vw, 40px);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.1vw, 18px);
    text-decoration: none;
    filter: drop-shadow(0 4px 0 rgba(0,0,0,0.12));
  }
  .site-brand-logo {
    height: clamp(50px, 5.6vw, 90px);
    width: auto;
    display: block;
  }

  .nav {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1vw, 18px);
    font-size: clamp(12px, 1.2vw, 19px);
    letter-spacing: 0.06em;
    padding-left: 0;
  }

  .nav a {
    color: var(--ink);
    text-decoration: none;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.18);
    transition: transform 0.15s ease, color 0.15s ease;
    padding: 4px 2px;
    display: inline-block;
  }

  .nav a:hover {
    transform: translate(-1px, -1px);
    color: #fff8d4;
  }

  .nav .sep { opacity: 0.85; }

  /* ── Stage (the playable area) ─────────────────── */
  .stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  /* The character lives near vertical-center, slightly lower; JS translates it. */
  .character {
    position: absolute;
    left: 50%;
    top: 56%;
    width: clamp(280px, 32vw, 520px);
    aspect-ratio: 1 / 1.06;
    /* JS sets --x, --y, --sx, --sy each frame */
    --x: 0px;
    --y: 0px;
    --sx: 1;
    --sy: 1;
    transform:
      translate(-50%, -50%)
      translate(var(--x), var(--y))
      scale(var(--sx), var(--sy));
    filter: drop-shadow(0 16px 20px rgba(120, 80, 0, 0.18));
    transform-origin: 50% 88%;
    will-change: transform;
    pointer-events: auto;
    cursor: pointer;
  }

  .frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
    /* nudge so all 6 frames feel anchored at the same head pivot */
    transform-origin: 50% 50%;
  }
  .frame.active { opacity: 1; }

  /* Shadow on the "ground" — JS moves it horizontally with the character */
  .shadow {
    position: absolute;
    left: 50%;
    bottom: 22vh;
    width: clamp(160px, 18vw, 280px);
    height: clamp(14px, 1.6vw, 26px);
    --sx: 0px;
    --scale: 1;
    transform: translateX(-50%) translateX(var(--sx)) scale(var(--scale));
    background: radial-gradient(ellipse at center,
      rgba(120, 80, 0, 0.34) 0%,
      rgba(120, 80, 0, 0.20) 40%,
      rgba(120, 80, 0, 0)    72%);
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
  }

  /* ── SNS (bottom-right) ────────────────────────── */
  .sns {
    position: fixed;
    bottom: clamp(20px, 3vw, 40px);
    right: clamp(20px, 3vw, 44px);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.6vw, 26px);
  }

  .sns a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.2s ease, color 0.2s ease;
  }

  .sns a:hover { transform: translateY(-3px); }

  .sns svg {
    height: clamp(26px, 2.4vw, 38px);
    width: auto;
    fill: var(--ink);
    display: block;
    filter: drop-shadow(0 2px 0 rgba(0,0,0,0.12));
  }

  /* ── Score (top-right) ─────────────────────────── */
  .score {
    position: fixed;
    top: clamp(20px, 3vw, 44px);
    right: clamp(20px, 3vw, 44px);
    z-index: 10;
    font-size: clamp(13px, 1.3vw, 20px);
    letter-spacing: 0.08em;
    color: var(--ink);
    text-shadow: 3px 3px 0 rgba(0,0,0,0.20);
    display: flex;
    align-items: baseline;
    gap: 0.8em;
  }
  .score .v {
    display: inline-block;
    min-width: 4ch;
    text-align: right;
    transition: transform 0.18s ease-out;
  }
  .score .v.bump { animation: scoreBump 0.32s ease-out; }
  @keyframes scoreBump {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.28); color: #fff8d4; }
    100% { transform: scale(1); }
  }

  /* ── Items (oden) ──────────────────────────────── */
  .items {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
  }
  .oden {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: clamp(40px, 4vw, 60px);
    line-height: 1;
    user-select: none;
    filter: drop-shadow(0 6px 6px rgba(0,0,0,0.18));
  }
  .oden .inner {
    display: inline-block;
    animation: odenBob 1.6s ease-in-out infinite;
    transform-origin: 50% 80%;
  }
  @keyframes odenBob {
    0%, 100% { transform: translateY(-4px) rotate(-4deg); }
    50%      { transform: translateY( 6px) rotate( 4deg); }
  }
  .oden.pop .inner {
    animation: odenPop 0.45s ease-out forwards;
  }
  @keyframes odenPop {
    0%   { transform: translateY(0)   scale(1)   rotate(0);    opacity: 1; }
    60%  { transform: translateY(-30px) scale(1.5) rotate(12deg); opacity: 1; }
    100% { transform: translateY(-60px) scale(1.7) rotate(20deg); opacity: 0; }
  }

  .points-pop {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: clamp(14px, 1.4vw, 22px);
    color: #fff;
    text-shadow: 3px 3px 0 rgba(0,0,0,0.25);
    pointer-events: none;
    animation: pointsFloat 0.9s ease-out forwards;
    letter-spacing: 0.04em;
  }
  @keyframes pointsFloat {
    0%   { opacity: 0; transform: translate(-50%,-50%) translateY(0)    scale(0.6); }
    25%  { opacity: 1; transform: translate(-50%,-50%) translateY(-10px) scale(1.1); }
    100% { opacity: 0; transform: translate(-50%,-50%) translateY(-72px) scale(1.0); }
  }

  /* ── Heart burst (click effect) ─────────────── */
  .heart-burst {
    position: fixed;
    left: 0; top: 0;
    pointer-events: none;
    user-select: none;
    z-index: 100;
    --tx: 0px;  --ty: 0px;
    --rot: 0deg; --scale: 1;
    animation: heartBurst 0.95s cubic-bezier(.18,.7,.3,1) forwards;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
    will-change: transform, opacity;
  }
  @keyframes heartBurst {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) translate(0, 0)
                 scale(0.3) rotate(0);
    }
    18% {
      opacity: 1;
      transform: translate(-50%, -50%)
                 translate(calc(var(--tx) * 0.55), calc(var(--ty) * 0.55))
                 scale(var(--scale))
                 rotate(calc(var(--rot) * 0.5));
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -50%)
                 translate(var(--tx), calc(var(--ty) + 70px))
                 scale(calc(var(--scale) * 0.85))
                 rotate(var(--rot));
    }
  }

  /* legacy bottom-left hint — hidden, controls live next to icon now */
  .hint { display: none !important; }

  @media (max-width: 520px) {
    .nav { font-size: 10px; gap: 8px; }
    .character { width: 60vw; }
    .hint { display: none; }
  }