body.shadow-page main { min-height: 100dvh; background: radial-gradient(circle at 12% 18%, #fff 0 3px, transparent 4px), linear-gradient(#bfeaf2 0 280px, #fff8e7 280px); }
.shadow-page .brand-mark i { animation: shadow-mark 2.8s ease-in-out infinite; }
.shadow-page .brand-mark i:nth-child(2) { animation-delay: -.5s; }
.shadow-page .brand-mark i:nth-child(3) { animation-delay: -1s; }
.shadow-page .brand-mark i:nth-child(4) { animation-delay: -1.5s; }
.shadow-game { width: min(1050px, calc(100% - 40px)); margin: 30px auto 48px; position: relative; z-index: 1; }
.shadow-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; animation: shadow-rise .55s ease-out both; }
.shadow-heading > div:first-child > span { color: #2e7d87; font-size: 10px; letter-spacing: .16em; font-weight: 900; }
.shadow-heading h1 { margin: 7px 0 8px; font-size: clamp(38px, 5vw, 62px); line-height: 1; letter-spacing: -.05em; }
.shadow-heading p { margin: 0; color: #526575; font-size: 13px; }
.shadow-score { flex: 0 0 auto; min-width: 116px; padding: 12px 15px; border: 3px solid var(--ink); border-radius: 18px; background: #e8dcff; box-shadow: 5px 5px 0 var(--ink); text-align: center; }
.shadow-score b { display: block; font-size: 32px; line-height: 1; color: #725ac6; }
.shadow-score small { font-size: 10px; font-weight: 900; }
.shadow-card { overflow: hidden; border: 3px solid var(--ink); border-radius: 26px; background: #fff; box-shadow: 10px 10px 0 var(--ink); animation: shadow-card-in .65s .1s cubic-bezier(.2,.8,.2,1) both; }
.shadow-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 24px; background: #fff; }
.shadow-slot { position: relative; aspect-ratio: 1; min-width: 0; border: 3px dashed #9383ba; border-radius: 22px; background: #f2edff; display: grid; place-items: center; cursor: pointer; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.shadow-slot .animal-shape { font-family: "Apple Color Emoji","Segoe UI Emoji",sans-serif; font-size: clamp(58px, 8vw, 104px); line-height: 1; filter: grayscale(1) brightness(0); opacity: .72; user-select: none; }
.shadow-slot::after { content: "?"; position: absolute; right: 10px; bottom: 8px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #8f79b8; font-weight: 900; }
.shadow-slot.is-hovered { transform: scale(1.035); border-color: var(--pink); background: #fff0f4; }
.shadow-slot.is-wrong { animation: shadow-shake .34s; }
.shadow-slot.is-matched { border-style: solid; border-color: var(--green); background: #e6f8eb; animation: shadow-pop .35s ease-out; }
.shadow-slot.is-matched .animal-shape { filter: none; opacity: 1; }
.shadow-slot.is-matched::after { content: "✓"; background: var(--green); color: #fff; }
.shadow-tray-wrap { padding: 18px 24px 24px; border-top: 3px solid var(--ink); background: #fff2bd; }
.tray-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; font-size: 12px; font-weight: 900; }
.tray-caption button { min-height: 38px; padding: 7px 15px; border: 2px solid var(--ink); border-radius: 12px; background: var(--blue); box-shadow: 3px 3px 0 var(--ink); font-size: 11px; font-weight: 900; cursor: pointer; }
.shadow-tray { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.animal-card { min-width: 0; aspect-ratio: 1.35; padding: 8px; border: 3px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 4px 4px 0 var(--ink); display: grid; place-items: center; cursor: grab; touch-action: none; transition: transform .16s ease, box-shadow .16s ease, opacity .2s ease; }
.animal-card span { font-family: "Apple Color Emoji","Segoe UI Emoji",sans-serif; font-size: clamp(48px, 7vw, 84px); line-height: 1; pointer-events: none; user-select: none; }
.animal-card:hover { transform: translateY(-3px) rotate(-1deg); }
.animal-card.is-selected { outline: 7px solid var(--yellow); transform: scale(.94); }
.animal-card.is-dragging { opacity: .2; }
.animal-card.is-wrong { animation: shadow-shake .34s; }
.animal-card.is-gone { opacity: 0; transform: scale(.5); pointer-events: none; }
.floating-animal { position: fixed; z-index: 1000; width: 96px; height: 96px; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 24px; background: #fff; box-shadow: 7px 7px 0 #25304755; font-family: "Apple Color Emoji","Segoe UI Emoji",sans-serif; font-size: 68px; line-height: 1; pointer-events: none; transform: translate(-50%,-50%) rotate(4deg); }
.shadow-toast { position: fixed; z-index: 2000; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 28px); padding: 13px 22px; border: 3px solid var(--ink); border-radius: 16px; background: var(--pink); color: #fff; box-shadow: 5px 5px 0 var(--ink); font-weight: 900; text-align: center; animation: shadow-toast-in .35s cubic-bezier(.2,.8,.2,1); }
.shadow-page footer { padding-bottom: env(safe-area-inset-bottom); }

@keyframes shadow-rise { from { opacity: 0; } to { opacity: 1; } }
@keyframes shadow-card-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes shadow-pop { 0% { transform: scale(.85); } 70% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes shadow-shake { 25% { transform: translateX(-7px) rotate(-2deg); } 50% { transform: translateX(7px) rotate(2deg); } 75% { transform: translateX(-4px); } }
@keyframes shadow-toast-in { from { opacity: 0; transform: translate(-50%,-18px) scale(.9); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes shadow-mark { 0%, 72%, 100% { transform: translateY(0); } 84% { transform: translateY(-3px); } }

@media (max-width: 700px) {
  .shadow-page .topbar { width: calc(100% - 22px); min-height: calc(56px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .shadow-page .brand { font-size: 0; gap: 0; }
  .shadow-page .brand-mark { width: 28px; height: 28px; }
  .shadow-page .mode-switch a { min-height: 38px; padding: 5px 6px; font-size: 8px; }
  .shadow-game { width: calc(100% - 22px); margin: 18px auto 30px; }
  .shadow-heading { align-items: center; margin-bottom: 14px; gap: 10px; }
  .shadow-heading h1 { font-size: 34px; }
  .shadow-heading p { max-width: 245px; font-size: 10px; line-height: 1.45; }
  .shadow-score { min-width: 82px; padding: 9px 8px; border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); }
  .shadow-score b { font-size: 25px; }
  .shadow-score small { font-size: 8px; }
  .shadow-card { border-radius: 20px; box-shadow: 7px 7px 0 var(--ink); }
  .shadow-board { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 9px; }
  .shadow-slot { border-width: 2px; border-radius: 13px; }
  .shadow-slot .animal-shape { font-size: clamp(42px, 14vw, 58px); }
  .shadow-slot::after { right: 7px; bottom: 6px; width: 24px; height: 24px; }
  .shadow-tray-wrap { padding: 12px 12px 15px; }
  .tray-caption { margin-bottom: 9px; }
  .shadow-tray { gap: 7px; }
  .animal-card { aspect-ratio: 1; padding: 3px; border-width: 2px; border-radius: 13px; box-shadow: 3px 3px 0 var(--ink); }
  .animal-card span { font-size: clamp(38px, 14vw, 60px); }
  .shadow-page footer { width: calc(100% - 22px); min-height: 62px; }
}

@media (max-height: 700px) and (max-width: 700px) {
  .shadow-game { margin-top: 10px; }
  .shadow-heading > div:first-child > span { display: none; }
  .shadow-heading h1 { margin-top: 0; font-size: 30px; }
  .shadow-heading p { font-size: 9px; }
  .shadow-board { gap: 6px; padding: 9px; }
  .shadow-slot .animal-shape { font-size: clamp(50px, 18vw, 72px); }
  .shadow-tray-wrap { padding: 8px 10px 11px; }
  .tray-caption { margin-bottom: 6px; }
  .tray-caption button { min-height: 40px; }
  .shadow-page footer { min-height: 48px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .shadow-page .brand-mark i, .shadow-heading, .shadow-card, .shadow-slot, .animal-card, .shadow-toast { animation: none !important; transition: none !important; }
}