.birthday-game {
  height: 260svh;
  padding: 0;
  position: relative;
  scroll-margin-top: calc(-1 * var(--nav));
  --party-ink: #382923;
  --party-yellow: #f5cc59;
  --party-mint: #b8d7c6;
  --rack-height: min(44svh, 380px);
}
.birthday-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 590px;
  padding: calc(var(--nav) + 16px) var(--pad) 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--paper);
  overflow: clip;
  isolation: isolate;
}
.birthday-game-top,
.birthday-game-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.birthday-game-top { flex: none; }
.birthday-game-top h2 { font: 400 clamp(30px, 3.7vw, 58px)/1 var(--display); text-transform: uppercase; color: var(--red); margin-top: 10px; }
.birthday-reset { color: var(--red); white-space: nowrap; padding: 10px 0; }
.birthday-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--gap); align-items: center; }
.birthday-person-home { position: relative; height: 100%; min-width: 0; display: grid; place-items: center; }
.birthday-orbit { position: absolute; width: min(85%,470px); aspect-ratio: 1; border: 1px dashed #e3352947; border-radius: 50%; top: 50%; left: 50%; translate: -50% -43%; transition: background .3s, border-color .3s; }
.birthday-person-home.is-drop-hot .birthday-orbit { border: 2px dashed var(--red); background: #f5cc5930; }
.birthday-person {
  width: min(100%, clamp(130px,26vw,330px), calc((100svh - 280px)/1.68));
  display: block; position: relative; padding: 0; margin: 0; color: inherit;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: width .55s var(--ease), opacity .2s;
  -webkit-touch-callout: none;
}
.birthday-person:disabled { cursor: default; touch-action: pan-y; }
.birthday-person-space { display: block; width: 100%; aspect-ratio: 2.3/1; }
.birthday-head { position: relative; display: block; width: 100%; aspect-ratio: 1001/1221; z-index: 2; }
.birthday-head-photo { position: absolute; width: 119.7802%; height: 107.4529%; max-width: none; left: -10.3896%; top: -3.4398%; pointer-events: none; }
.birthday-worn { display: block; position: absolute; pointer-events: none; animation: birthday-sticker-pop .55s cubic-bezier(.34,1.7,.64,1) both; }
.birthday-worn svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 2px 1px #38292312); }
.worn-hat { width: 55%; left: 50%; top: 7%; transform: translate(-50%,-80%) rotate(-8deg); z-index: 3; }
.worn-glasses { width: 74%; left: 51%; top: 63%; transform: translate(-50%,-50%) rotate(-2deg); z-index: 4; }
.worn-blower { width: 75%; left: 50%; top: 87%; transform: translate(-6%,-48%) rotate(8deg); transform-origin: 0 50%; z-index: 5; }
.birthday-candle-pole { display: none; position: relative; width: 14%; aspect-ratio: 1/2.4; margin: -5% auto 0; border: 2px solid var(--party-ink,#382923); border-radius: 4px 4px 7px 7px; background: repeating-linear-gradient(-35deg,#fff5dc 0 9px,#e33529 10px 17px,#fff5dc 18px 27px); z-index: 1; }
.birthday-person.is-candle .birthday-candle-pole { display: block; }
.birthday-game[data-phase="ready"] .birthday-person-home > .birthday-person { width: min(75%,250px,calc((100svh - 280px)/2)); }
.birthday-game[data-phase="ready"] .birthday-person-home > .birthday-person::after { content: '把我拖到蛋糕上 →'; position: absolute; left: 50%; bottom: -34px; translate: -50% 0; white-space: nowrap; font: 12px/1.4 var(--mono); color: var(--red); }
.birthday-flame { display: block; width: 12%; aspect-ratio: .68; position: absolute; left: 50%; top: -9%; transform: translateX(-50%) rotate(8deg); border-radius: 65% 35% 60% 40%; background: radial-gradient(ellipse at 50% 80%,#fff5dc 0 15%,#f5cc59 35% 60%,#ef7138 70%); box-shadow: 0 0 22px #f5cc5980; z-index: 6; opacity: 0; }
.birthday-game[data-phase="celebrate"] .birthday-flame { opacity: 1; animation: birthday-flame 1.2s ease-in-out infinite alternate; }
.birthday-right { min-width: 0; display: grid; place-items: center; }
.birthday-prop-panel { width: min(100%,500px); text-align: center; }
.birthday-prop-viewport { height: var(--rack-height); overflow: clip; }
.birthday-prop-strip { display: flex; flex-direction: column; gap: 24px; will-change: transform; transition: transform .2s ease-out; }
.birthday-prop-card { height: var(--rack-height); flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.birthday-item-number { color: var(--red); }
.birthday-prop { display: block; position: relative; width: min(80%,255px); height: clamp(130px,23svh,220px); padding: 8px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: scale .25s, opacity .25s; -webkit-touch-callout: none; }
.birthday-prop svg { width: 100%; height: 100%; display: block; pointer-events: none; overflow: visible; filter: drop-shadow(0 5px 0 #3829230d); }
.birthday-prop:hover { scale: 1.05; }
.birthday-prop:disabled { cursor: default; opacity: .32; scale: .95; }
.birthday-prop-card h3 { font: 400 clamp(23px,3.4vw,50px)/1 var(--display); text-transform: uppercase; }
.birthday-prop-card > p { font: 12px/1.4 var(--mono); color: #827267; }
.birthday-equipped { display: none; position: absolute; right: 0; top: 10px; width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: var(--paper); font: 20px/30px var(--sans); }
.birthday-prop-card.is-equipped .birthday-equipped { display: block; }
.birthday-prop-nav { display: flex; align-items: center; justify-content: center; gap: 25px; margin-top: 12px; }
.birthday-prop-nav > button { width: 44px; height: 36px; font-size: 24px; color: var(--red); }
.birthday-prop-nav > button:disabled { opacity: .25; cursor: default; }
.birthday-prop-dots { display: flex; gap: 8px; }
.birthday-prop-dots button { width: 30px; height: 32px; display: grid; place-items: center; }
.birthday-prop-dots span { width: 6px; height: 6px; border-radius: 50%; background: #e3352940; transition: scale .2s; }
.birthday-prop-dots [aria-current="true"] span { background: var(--red); scale: 1.5; }
.birthday-scroll-hint { color: #827267; margin: 12px auto 0; font-size: 11px; }
.birthday-cake-panel { width: 100%; text-align: center; animation: birthday-cake-in .55s var(--ease) both; }
.birthday-cake-scene { width: min(100%,440px); padding-top: clamp(75px,14svh,130px); margin-inline: auto; }
.birthday-cake-frame { width: 100%; aspect-ratio: 460/390; position: relative; }
.birthday-cake-frame > svg { width: 100%; height: 100%; display: block; }
.birthday-cake-slot { position: absolute; width: 31%; left: 50%; top: 41.5%; transform: translate(-50%,-100%); z-index: 3; }
.birthday-cake-slot .birthday-person { width: 100%; max-width: none; }
.birthday-cake-target { width: 27%; height: 30%; position: absolute; left: 50%; top: 41.5%; transform: translate(-50%,-100%); border: 2px dashed #e3352970; border-radius: 35% 35% 8px 8px; background: #f5cc591a; transition: border-color .2s, background .2s, box-shadow .2s; }
.birthday-cake-target > span { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; color: var(--red); font: 12px/1.2 var(--mono); }
.birthday-cake-target i { display: block; font: normal 30px/1.5 var(--mono); color: var(--red); }
.birthday-cake-frame.is-drop-hot .birthday-cake-target { border-color: var(--red); background: #f5cc5940; box-shadow: 0 0 35px #f5cc5950; }
.birthday-cake-hint { font-size: 13px; line-height: 1.5; margin: 10px auto 0; color: #827267; }
.birthday-greeting { position: relative; z-index: 2; width: 100%; max-width: 540px; animation: birthday-greeting-in .7s cubic-bezier(.34,1.4,.64,1) both; }
.birthday-tiny-star { font-size: 48px; line-height: 1; color: var(--party-yellow); }
.birthday-greeting h2 { font: 400 clamp(48px,7vw,112px)/.92 var(--display); color: var(--red); text-transform: uppercase; letter-spacing: -.02em; margin: 18px 0 24px; }
.birthday-greeting h2 span { display: inline-block; rotate: 10deg; }
.birthday-greeting > p { font: 14px/1.5 var(--mono); }
.birthday-end-actions { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 30px; color: var(--red); }
.birthday-game[data-phase="celebrate"] .birthday-orbit { display: none; }
.birthday-game-bottom { flex: none; min-height: 34px; position: relative; z-index: 2; }
.birthday-instruction { font-size: 13px; line-height: 1.6; max-width: none; }
.birthday-progress { color: var(--red); white-space: nowrap; }
.birthday-confetti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; }
.birthday-drag-ghost { position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none; transform-origin: 50% 50%; filter: drop-shadow(0 12px 14px #38292328); will-change: transform; }
.birthday-drag-ghost > * { pointer-events: none; }
.birthday-drag-ghost .birthday-prop { height: clamp(130px,23svh,220px); }
.birthday-drag-ghost .birthday-prop svg { width: 100%; height: 100%; }
.birthday-drag-ghost.is-returning { transition: transform .2s var(--ease), opacity .2s; opacity: .25; }
.is-drag-source { opacity: .2 !important; }
.birthday-game.is-dragging { cursor: grabbing; }
@keyframes birthday-sticker-pop { from { opacity: 0; scale: .55; rotate: -12deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes birthday-cake-in { from { opacity: 0; scale: .86; } to { opacity: 1; scale: 1; } }
@keyframes birthday-greeting-in { from { opacity: 0; scale: .6; translate: 0 25px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes birthday-flame { from { scale: .94 1; rotate: -5deg; } to { scale: 1.06 .95; rotate: 5deg; } }
@media (max-width: 809px) {
  .birthday-game { --rack-height: min(43svh,350px); }
  .birthday-stage { padding-top: calc(var(--nav) + 16px); padding-bottom: 20px; gap: 16px; }
  .birthday-game-top { align-items: end; gap: 10px; }
  .birthday-game-top .micro { font-size: 10px; }
  .birthday-game-top h2 { font-size: clamp(25px,5.7vw,38px); }
  .birthday-reset { font-size: 10px; }
  .birthday-layout { gap: 14px; }
  .birthday-person { width: min(100%,42vw); }
  .birthday-game[data-phase="ready"] .birthday-person-home > .birthday-person { width: 80%; }
  .birthday-prop { width: min(100%,200px); height: min(20svh,170px); padding: 5px; }
  .birthday-drag-ghost .birthday-prop { height: min(20svh,170px); }
  .birthday-prop-card { gap: 10px; }
  .birthday-prop-card h3 { font-size: clamp(22px,4.8vw,36px); }
  .birthday-prop-card > p { font-size: 10px; }
  .birthday-prop-nav { gap: 5px; }
  .birthday-prop-dots { gap: 0; }
  .birthday-prop-dots button { width: 22px; }
  .birthday-scroll-hint { max-width: 14em; font-size: 9px; }
  .birthday-cake-hint { font-size: 11px; }
  .birthday-game[data-phase="ready"] .birthday-person-home > .birthday-person::after { content: '拖到蛋糕上 →'; font-size: 10px; }
  .birthday-greeting h2 { font-size: clamp(28px,8vw,48px); margin-block: 12px 18px; }
  .birthday-greeting > p { font-size: 11px; }
  .birthday-tiny-star { font-size: 30px; }
  .birthday-end-actions { flex-direction: column; gap: 18px; margin-top: 24px; }
  .birthday-end-actions .micro { font-size: 10px; }
  .birthday-instruction { font-size: 11px; }
  .birthday-progress { font-size: 10px; }
}
@media (max-height: 600px) {
  .birthday-game { height: auto; min-height: 100svh; --rack-height: 300px; }
  .birthday-stage { position: relative; height: auto; min-height: 100svh; }
  .birthday-layout { min-height: 380px; }
  .birthday-person { width: min(100%,210px); }
  .birthday-game[data-phase="ready"] .birthday-person-home > .birthday-person { width: min(75%,180px); }
  .birthday-cake-scene { width: min(100%,310px); padding-top: 95px; }
}
@media (prefers-reduced-motion: reduce) {
  .birthday-prop-strip { transition: none; }
  .birthday-worn, .birthday-cake-panel, .birthday-greeting, .birthday-flame { animation: none !important; }
}