.detectives-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(7px, 1.2vh, 13px);
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding: max(78px, calc(env(safe-area-inset-top) + 68px)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  color: #493766;
  background: radial-gradient(circle at 12% 14%, rgba(255,255,255,.86), transparent 29%), radial-gradient(circle at 90% 87%, rgba(255,255,255,.7), transparent 31%), linear-gradient(140deg, #fff2b5, #ffe0ec 53%, #c9f2ed);
  font-family: 'Baloo 2', Inter, system-ui, sans-serif;
}
.detectives-heading {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2px, .45vh, 5px);
  max-width: min(980px, 100%);
  text-align: center;
}
.detectives-kicker {
  margin: 0;
  color: #785690;
  font-size: clamp(10px, 1.45vh, 14px);
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 1;
}
.detectives-heading h1 {
  margin: 0;
  color: #563681;
  font-size: clamp(27px, 4.8vh, 48px);
  font-weight: 800;
  line-height: .98;
  text-shadow: 0 2px 0 #fff, 0 5px 13px rgba(54,38,89,.14);
  cursor: pointer;
}
.detectives-instruction {
  margin: 1px 0 0;
  padding: 3px 13px;
  border: 2px solid rgba(255,255,255,.94);
  border-radius: 999px;
  color: #57436f;
  background: rgba(255,255,255,.84);
  font-size: clamp(13px, 2vh, 20px);
  font-weight: 800;
  line-height: 1.12;
  cursor: pointer;
}
.detectives-memory-status {
  flex: 0 0 auto;
  width: min(1080px, 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.detectives-countdown {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(7px, 1.2vw, 13px);
  box-sizing: border-box;
  padding: 5px clamp(10px, 1.8vw, 18px) 5px 7px;
  border: 3px solid #fff;
  border-radius: 999px;
  color: #553978;
  background: rgba(255,255,255,.9);
  box-shadow: 0 4px 0 rgba(100,75,142,.13), 0 8px 15px rgba(50,40,90,.1);
}
.detectives-count-number {
  flex: 0 0 auto;
  width: clamp(40px, 6vh, 54px);
  height: clamp(40px, 6vh, 54px);
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #ffbd4a, #ef7a55);
  box-shadow: 0 3px 0 #be6245;
  font-size: clamp(23px, 4vh, 36px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(82,45,44,.2);
}
.detectives-count-copy {
  max-width: 36vw;
  color: #684b83;
  font-size: clamp(11px, 1.65vh, 16px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .055em;
}
.detectives-score {
  margin: 0;
  padding: 6px 15px;
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 999px;
  color: #604780;
  background: rgba(255,255,255,.78);
  font-size: clamp(14px, 2vh, 19px);
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}
.detectives-board-wrap {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  width: min(1080px, 100%);
}
.detectives-board {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  border: clamp(4px, .75vw, 9px) solid rgba(255,255,255,.98);
  border-radius: clamp(22px, 3vw, 36px);
  background: radial-gradient(ellipse at 50% 15%, rgba(255,255,255,.96), rgba(251,247,255,.94) 62%, rgba(236,248,252,.96));
  box-shadow: 0 9px 0 rgba(100,75,142,.12), 0 16px 28px rgba(50,40,90,.15), inset 0 0 0 2px rgba(174,148,207,.12);
  transition: filter .2s, transform .25s;
}
.detectives-object-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 16px);
  box-sizing: border-box;
  padding: clamp(15px, 2vw, 25px);
  transition: filter .2s;
}
.detectives-object-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr; }
.detectives-object-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.detectives-object-grid[data-count="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 1fr; }
.detectives-object-grid[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.detectives-object-grid[data-count="7"] { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.detective-memory-card {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, .5vh, 7px);
  box-sizing: border-box;
  padding: clamp(5px, 1.1vw, 13px);
  border: clamp(3px, .55vw, 6px) solid #fff;
  border-radius: clamp(18px, 2.4vw, 29px);
  color: #493766;
  background: radial-gradient(circle at 25% 18%, rgba(255,255,255,.64), transparent 36%), linear-gradient(145deg, color-mix(in srgb, var(--object-color), white 27%), color-mix(in srgb, var(--object-color), white 7%));
  box-shadow: 0 6px 0 color-mix(in srgb, var(--object-color), #493766 28%), 0 10px 18px rgba(55,44,88,.13), inset 0 1px 0 rgba(255,255,255,.7);
  animation: detective-card-arrive .36s cubic-bezier(.2,.8,.25,1) both;
  animation-delay: calc(var(--card-index, 0) * 45ms);
}
.detective-memory-card:nth-child(1) { --card-index: 0; }
.detective-memory-card:nth-child(2) { --card-index: 1; }
.detective-memory-card:nth-child(3) { --card-index: 2; }
.detective-memory-card:nth-child(4) { --card-index: 3; }
.detective-memory-card:nth-child(5) { --card-index: 4; }
.detective-memory-card:nth-child(6) { --card-index: 5; }
.detective-memory-card:nth-child(7) { --card-index: 6; }
@keyframes detective-card-arrive { from { opacity: 0; transform: translateY(12px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
.detective-object-icon {
  display: block;
  max-width: 100%;
  font-size: clamp(54px, 9.5vh, 102px);
  line-height: 1;
  filter: drop-shadow(0 5px 3px rgba(48,38,72,.17));
}
.detective-object-name {
  max-width: 100%;
  color: #4c3867;
  font-size: clamp(15px, 2vw, 23px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
  overflow-wrap: anywhere;
}
.detectives-object-grid[data-count="3"] .detective-object-icon { font-size: clamp(70px, 11vh, 118px); }
.detectives-object-grid[data-count="3"] .detective-memory-card { border-radius: 32px; }
.detectives-object-grid[data-count="5"] .detective-object-icon { font-size: clamp(43px, 7.5vh, 78px); }
.detectives-object-grid[data-count="5"] .detective-object-name { font-size: clamp(13px, 1.6vw, 19px); }
.detectives-object-grid[data-count="7"] .detective-object-icon { font-size: clamp(44px, 7.2vh, 76px); }
.detectives-object-grid[data-count="7"] .detective-object-name { font-size: clamp(13px, 1.55vw, 18px); }
.detective-missing-mark { display: none; font-size: clamp(42px, 8vh, 78px); line-height: 1; }
.detective-memory-card.is-missing {
  border: 4px dashed #a48bc9;
  background: repeating-linear-gradient(135deg, rgba(229,217,247,.52) 0 12px, rgba(248,243,255,.84) 12px 24px);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.76), 0 5px 0 rgba(115,85,151,.16);
  animation: detective-missing-reveal .48s cubic-bezier(.18,.8,.24,1) both;
}
.detective-memory-card.is-missing .detective-object-icon,
.detective-memory-card.is-missing .detective-object-name { display: none; }
.detective-memory-card.is-missing .detective-missing-mark { display: block; }
@keyframes detective-missing-reveal { 0% { opacity: .55; transform: scale(.72) rotate(-5deg); } 68% { opacity: 1; transform: scale(1.08) rotate(2deg); } 100% { transform: scale(1) rotate(0); } }
.detectives-eyelids {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s, visibility .16s;
}
.detectives-screen.is-blinking .detectives-eyelids { visibility: visible; opacity: 1; }
.detectives-lid {
  position: absolute;
  left: -2%;
  width: 104%;
  height: 54%;
  background: linear-gradient(145deg, #7e64bf, #59418d 68%, #47356f);
  box-shadow: 0 0 30px rgba(48,31,80,.2);
  transition: transform .36s cubic-bezier(.4,0,.2,1);
}
.detectives-lid-top { top: -2%; border-radius: 0 0 48% 48% / 0 0 18% 18%; transform: translateY(-104%); }
.detectives-lid-bottom { bottom: -2%; border-radius: 48% 48% 0 0 / 18% 18% 0 0; transform: translateY(104%); }
.detectives-screen.is-blinking .detectives-lid { transform: translateY(0); }
.detectives-blink-message {
  position: absolute;
  z-index: 1;
  top: 23%;
  padding: 5px 15px;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 999px;
  color: #fff;
  background: rgba(68,49,108,.55);
  font-size: clamp(14px, 2.4vh, 22px);
  font-weight: 900;
  letter-spacing: .08em;
  text-shadow: 0 2px 3px rgba(35,25,60,.24);
  opacity: 0;
  transition: opacity .2s .15s;
}
.detectives-screen.is-blinking .detectives-blink-message { opacity: 1; }
.detectives-blink-count {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(72px, 15vh, 140px);
  aspect-ratio: 1;
  border: 5px solid #fff;
  border-radius: 50%;
  color: #644391;
  background: #fff4bb;
  box-shadow: 0 8px 0 rgba(51,35,81,.16), 0 12px 28px rgba(35,25,60,.2);
  font-size: clamp(42px, 9vh, 82px);
  font-weight: 900;
  line-height: 1;
  transform: scale(.7);
  transition: transform .25s cubic-bezier(.2,.8,.25,1);
}
.detectives-screen.is-blinking .detectives-blink-count { transform: scale(1); }
.detectives-screen.is-blinking .detectives-board { filter: brightness(.8); }
.detective-memory-card.is-returned { animation: detective-object-return .42s cubic-bezier(.2,.8,.25,1); }
@keyframes detective-object-return { 40% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(255,209,31,.55), 0 8px 0 color-mix(in srgb, var(--object-color), #493766 28%); } }
.detective-return-flight {
  position: fixed;
  z-index: 100001;
  display: grid;
  place-items: center;
  transform-origin: center;
  pointer-events: none;
  filter: drop-shadow(0 5px 4px rgba(48,38,72,.2));
  will-change: transform, opacity;
}
.detectives-answer-area {
  flex: 0 0 auto;
  width: min(1080px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, .8vh, 9px);
}
.detectives-answer-area[hidden] { display: none !important; }
.detectives-feedback {
  flex: 0 0 auto;
  min-height: 1.15em;
  max-width: 96%;
  margin: 0;
  color: #563681;
  font-size: clamp(16px, 2.5vh, 24px);
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}
.detectives-feedback.is-try-again { color: #a44860; animation: detective-feedback-nudge .26s ease-in-out; }
.detectives-feedback.is-success { color: #177a62; animation: detective-feedback-cheer .45s ease-out; }
.detectives-feedback .karaoke-token,
.detectives-instruction .karaoke-token,
.detectives-heading h1 .karaoke-token,
.detectives-count-copy .karaoke-token { display: inline-block; padding: 0 .035em; border-radius: .24em; transition: color .12s, background .12s, box-shadow .12s, transform .12s; }
.detectives-feedback .karaoke-token.is-karaoke-active,
.detectives-instruction .karaoke-token.is-karaoke-active,
.detectives-heading h1 .karaoke-token.is-karaoke-active,
.detectives-count-copy .karaoke-token.is-karaoke-active { color: #523800; background: #ffe58c; box-shadow: 0 2px 0 #e5bd4f; transform: translateY(-1px); }
.detectives-count-copy { cursor: pointer; }
@keyframes detective-feedback-nudge { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes detective-feedback-cheer { 45% { transform: scale(1.07); } }
.detectives-choices {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--choice-count, 4), minmax(0, 1fr));
  gap: clamp(7px, 1.3vw, 14px);
}
.detective-answer-card {
  position: relative;
  min-width: 0;
  min-height: clamp(76px, 11vh, 116px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  box-sizing: border-box;
  padding: clamp(5px, .9vw, 10px);
  border: 4px solid #fff;
  border-radius: clamp(17px, 2.3vw, 27px);
  color: #493766;
  background: linear-gradient(145deg, color-mix(in srgb, var(--answer-color), white 18%), color-mix(in srgb, var(--answer-color), white 3%));
  box-shadow: 0 6px 0 color-mix(in srgb, var(--answer-color), #493766 30%), 0 10px 16px rgba(51,39,77,.15);
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .14s, filter .14s, box-shadow .14s;
}
.detective-answer-card:hover:not(:disabled) { transform: translateY(-3px); filter: saturate(1.1); box-shadow: 0 9px 0 color-mix(in srgb, var(--answer-color), #493766 30%), 0 14px 20px rgba(51,39,77,.18); }
.detective-answer-card:active:not(:disabled) { transform: translateY(3px); }
.detective-answer-card:focus-visible { outline: 4px solid #3a3a7a; outline-offset: 3px; }
.detective-answer-icon { font-size: clamp(42px, 7.3vh, 76px); line-height: 1; filter: drop-shadow(0 3px 2px rgba(48,38,72,.14)); }
.detective-answer-name { max-width: 100%; font-size: clamp(13px, 1.8vw, 20px); font-weight: 900; line-height: 1; text-align: center; overflow-wrap: anywhere; }
.detective-answer-card.is-wrong { animation: detective-answer-shake .34s ease-in-out; }
.detective-answer-card.is-correct { outline: 5px solid #fff3a3; outline-offset: 2px; animation: detective-answer-correct .55s cubic-bezier(.2,.8,.25,1); }
.detective-answer-card:disabled:not(.is-correct) { opacity: .62; cursor: default; }
@keyframes detective-answer-shake { 25% { transform: translateX(-6px) rotate(-2deg); } 75% { transform: translateX(6px) rotate(2deg); } }
@keyframes detective-answer-correct { 45% { transform: scale(1.09); filter: brightness(1.12); } }
.detectives-footer {
  flex: 0 0 auto;
  width: min(1080px, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.detectives-round-label { margin: 0; color: #705d87; font-size: clamp(11px, 1.5vh, 14px); font-weight: 900; letter-spacing: .12em; }
.detectives-screen.is-memorizing .detectives-answer-area { display: none; }
.detectives-screen.is-correct .detectives-board { animation: detective-board-win .6s ease-out; }
@keyframes detective-board-win { 35% { box-shadow: 0 0 0 8px rgba(255,209,31,.55), 0 13px 30px rgba(50,40,90,.2); } }
@media (max-width: 620px) {
  .detectives-screen { gap: 6px; padding-left: max(7px, env(safe-area-inset-left)); padding-right: max(7px, env(safe-area-inset-right)); }
  .detectives-heading h1 { font-size: clamp(25px, 7vw, 38px); }
  .detectives-kicker { font-size: 9px; }
  .detectives-instruction { padding: 3px 9px; font-size: clamp(12px, 3.5vw, 16px); }
  .detectives-memory-status, .detectives-board-wrap, .detectives-answer-area, .detectives-footer { width: 100%; }
  .detectives-countdown { gap: 6px; padding: 4px 9px 4px 5px; }
  .detectives-count-number { width: 37px; height: 37px; border-width: 2px; font-size: 23px; }
  .detectives-count-copy { max-width: 42vw; font-size: clamp(9px, 2.7vw, 13px); }
  .detectives-score { padding: 5px 10px; font-size: clamp(12px, 3.3vw, 16px); }
  .detectives-board { border-width: 4px; border-radius: 20px; }
  .detectives-object-grid { gap: 6px; padding: 8px; }
  .detectives-object-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detectives-object-grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detectives-object-grid[data-count="5"], .detectives-object-grid[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .detectives-object-grid[data-count="7"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .detective-memory-card { padding: 3px; border-width: 3px; border-radius: 15px; gap: 2px; }
  .detective-object-icon { font-size: clamp(39px, 9.5vw, 66px); }
  .detective-object-name { font-size: clamp(11px, 3.3vw, 16px); }
  .detectives-object-grid[data-count="3"] .detective-object-icon { font-size: clamp(52px, 15vw, 88px); }
  .detectives-object-grid[data-count="3"] .detective-object-name { font-size: clamp(13px, 3.7vw, 18px); }
  .detectives-object-grid[data-count="5"] .detective-object-icon,
  .detectives-object-grid[data-count="7"] .detective-object-icon { font-size: clamp(33px, 8vw, 50px); }
  .detectives-object-grid[data-count="5"] .detective-object-name,
  .detectives-object-grid[data-count="7"] .detective-object-name { font-size: clamp(10px, 2.8vw, 14px); }
  .detectives-choices { gap: 5px; }
  .detective-answer-card { min-height: clamp(65px, 9vh, 88px); padding: 4px 2px; border-width: 3px; border-radius: 15px; }
  .detective-answer-icon { font-size: clamp(36px, 9vw, 54px); }
  .detective-answer-name { font-size: clamp(11px, 3vw, 15px); }
  .detectives-feedback { font-size: clamp(14px, 4vw, 19px); }
}
@media (max-height: 590px) {
  .detectives-screen { gap: 4px; padding-top: max(62px, calc(env(safe-area-inset-top) + 54px)); padding-bottom: 5px; }
  .detectives-heading { gap: 1px; }
  .detectives-heading h1 { font-size: clamp(22px, 5.5vh, 34px); }
  .detectives-kicker { font-size: 9px; }
  .detectives-instruction { padding-block: 2px; font-size: clamp(11px, 2.6vh, 15px); }
  .detectives-count-number { width: 34px; height: 34px; font-size: 21px; }
  .detectives-object-grid { gap: 5px; padding: 7px; }
  .detective-memory-card { gap: 1px; padding: 3px; }
  .detective-object-icon { font-size: clamp(36px, 8vh, 58px); }
  .detectives-object-grid[data-count="3"] .detective-object-icon { font-size: clamp(48px, 10vh, 76px); }
  .detectives-answer-icon { font-size: clamp(34px, 7vh, 50px); }
  .detectives-feedback { font-size: clamp(13px, 2.6vh, 18px); }
}
@media (max-width: 620px) and (max-height: 590px) {
  .detectives-screen { gap: 3px; }
  .detectives-object-grid[data-count="5"] .detective-object-icon,
  .detectives-object-grid[data-count="7"] .detective-object-icon { font-size: clamp(29px, 7vh, 43px); }
  .detectives-object-grid[data-count="5"] .detective-object-name,
  .detectives-object-grid[data-count="7"] .detective-object-name { font-size: 10px; }
  .detective-answer-card { min-height: 57px; }
}
@media (prefers-reduced-motion: reduce) {
  .detective-memory-card, .detective-memory-card.is-missing, .detectives-lid,
  .detectives-blink-count, .detective-answer-card { animation: none !important; transition: none !important; }
  .detective-memory-card.is-returned { animation: none !important; }
  .detective-answer-card.is-correct, .detective-answer-card.is-wrong,
  .detectives-feedback.is-success, .detectives-feedback.is-try-again,
  .detectives-screen.is-correct .detectives-board { animation: none !important; }
}