*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  overflow: hidden;
}

.viewport {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Figma frame: 1920 x 1080. Scaled via JS transform to fit the viewport. */
.stage-wrapper {
  position: relative;
  width: calc(1920px * var(--scale, 1));
  height: calc(1080px * var(--scale, 1));
}

.stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
  transform: scale(var(--scale, 1));
}

/* ------- Screen container ------- */
.screen {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 240ms ease;
}

.screen.active {
  visibility: visible;
  opacity: 1;
}

/* ------- Intro video screen ------- */
.screen-video {
  background: #000;
}

.screen-video .video-frame {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000;
}

.screen-video #ytPlayer,
.screen-video #ytPlayer iframe,
.screen-video #ytPlayerEnd,
.screen-video #ytPlayerEnd iframe {
  width: 1920px;
  height: 1080px;
  border: 0;
  display: block;
}

.screen-thanks {
  background: #fff;
}

.screen-thanks .thanks-frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  padding: 60px 40px 40px;
  background: #fff;
}

.screen-thanks .thanks-text {
  margin: 0;
  color: #000;
  font-family: inherit;
  font-weight: 700;
  font-size: 80px;
  letter-spacing: 0.04em;
  text-align: center;
}

.screen-thanks .thanks-form {
  flex: 1 1 auto;
  width: min(900px, 100%);
  border: 0;
  background: #fff;
}

.skip-button {
  position: absolute;
  top: 40px;
  right: 40px;
  width: 180px;
  height: 64px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  padding: 0;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
  cursor: pointer;
  z-index: 10;
  transition: background 120ms ease, transform 120ms ease,
    border-color 120ms ease;
}

.skip-button:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: #fff;
}

.skip-button:active {
  transform: translateY(2px);
}

.skip-button:focus-visible {
  outline: 4px solid #3b82f6;
  outline-offset: 4px;
}

/* ------- Desktop layer ------- */
.desktop {
  position: absolute;
  inset: 0;
  clip-path: inset(0);
}

.desktop.blurred {
  filter: blur(15px);
}

.desktop-bg {
  position: absolute;
  left: 0;
  top: -100px;
  width: 1920px;
  height: 1280px;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

.dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

/* ------- Taskbar ------- */
.taskbar {
  position: absolute;
  height: 127px;
  border-radius: 23px;
  background: rgba(130, 130, 130, 0.5);
  box-shadow: 15px 17px 7px 0 rgba(0, 0, 0, 0.1);
}

/* Title-screen taskbar (node 60:367): 319,921 / 1282x127, 6 icons */
.taskbar-title {
  left: 319px;
  top: 921px;
  width: 1282px;
}

/* Main-screen taskbar (node 2:96): 383,921 / 1154x127, icons centered */
.taskbar-main {
  left: 383px;
  top: 921px;
  width: 1154px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 68px;
  padding: 8px 0;
}

.taskbar-icon {
  position: absolute;
  border-radius: 35px;
  background: #fff;
  overflow: hidden;
  padding: 0;
  border: 0;
  cursor: default;
}

.taskbar-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.taskbar-icon.dark {
  background: #424242;
}

/* Title-screen icon positions (node 60:367 children) */
.taskbar-title .icon-chat    { left: 153.54px; top: 8px;      width: 111px;    height: 111px; }
.taskbar-title .icon-puzzle1 { left: 332.54px; top: 11.885px; width: 103.23px; height: 103.23px; }
.taskbar-title .icon-puzzle2 { left: 503.77px; top: 11.885px; width: 103.23px; height: 103.23px; }
.taskbar-title .icon-puzzle3 { left: 675px;    top: 11.885px; width: 103.23px; height: 103.23px; }
.taskbar-title .icon-puzzle4 { left: 846.23px; top: 8px;      width: 111px;    height: 111px; }
.taskbar-title .icon-puzzle5 { left: 1025.23px;top: 11.885px; width: 103.23px; height: 103.23px; }

/* Main-screen icons — laid out by .taskbar-main's flex (gap: 68px) so
   only visible icons participate. Chat is always shown; puzzles 1-5
   start as display:none and become visible once `.revealed` is added. */
.taskbar-main .taskbar-icon {
  position: static;
  flex: 0 0 auto;
  width: 110px;
  height: 110px;
}

.taskbar-main .icon-puzzle1-main,
.taskbar-main .icon-puzzle2-main,
.taskbar-main .icon-puzzle3-main,
.taskbar-main .icon-puzzle4-main,
.taskbar-main .icon-puzzle5-main {
  display: none;
}

.taskbar-main .icon-puzzle1-main.revealed,
.taskbar-main .icon-puzzle2-main.revealed,
.taskbar-main .icon-puzzle3-main.revealed,
.taskbar-main .icon-puzzle4-main.revealed,
.taskbar-main .icon-puzzle5-main.revealed {
  display: block;
}

.taskbar-main button.taskbar-icon {
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease;
}

.taskbar-main button.taskbar-icon:hover {
  filter: brightness(1.06);
}

.taskbar-main button.taskbar-icon:active {
  transform: translateY(2px);
}

.taskbar-main button.taskbar-icon:focus-visible {
  outline: 4px solid #3b82f6;
  outline-offset: 4px;
}

/* ------- Title foreground ------- */
.title-banner {
  position: absolute;
  left: 127px;
  top: 342px;
  width: 1666px;
  height: 198px;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.75);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.title {
  margin: 0;
  font-weight: 700;
  font-size: 96px;
  line-height: 1;
  color: #000;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0;
}

.start-button {
  position: absolute;
  left: 663px;
  top: 796px;
  width: 593px;
  height: 125px;
  border: 0;
  padding: 0;
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.75);
  color: #000;
  font-family: inherit;
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}

.start-button:hover {
  background: rgba(255, 255, 255, 0.9);
}

.start-button:active {
  transform: translateY(2px);
}

.start-button:focus-visible {
  outline: 4px solid #3b82f6;
  outline-offset: 4px;
}

/* ------- Chat overlay (Figma node 2:95) ------- */
.chat-overlay {
  position: absolute;
  left: 220px;
  top: 20px;
  width: 1480px;
  height: 875px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.chat-overlay.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.chat-window {
  position: relative;
  width: 1480px;
  height: 875px;
  filter: drop-shadow(15px 17px 9.1px rgba(0, 0, 0, 0.25));
}

.chat-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.chat-title {
  position: absolute;
  left: 37px;
  top: 72px;
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

/* Close button — hidden by default, appears on chat-window hover. */
.chat-close {
  position: absolute;
  left: 1440px;
  top: 15px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease, transform 120ms ease;
  z-index: 2;
}

.chat-close img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.chat-window:hover .chat-close {
  opacity: 1;
}

.chat-close:hover {
  transform: scale(1.15);
  opacity: 1;
}

.chat-close:focus-visible {
  opacity: 1;
  outline: 3px solid #3b82f6;
  outline-offset: 3px;
  border-radius: 50%;
}

/* ------- Video overlay (Figma node 182:117) ------- */
.video-overlay {
  position: absolute;
  left: 400px;
  top: 80px;
  width: 1480px;
  height: 875px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
  z-index: 5;
}

.video-overlay.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.video-window {
  position: relative;
  width: 1480px;
  height: 875px;
  filter: drop-shadow(15px 17px 4.55px rgba(0, 0, 0, 0.25));
}

.video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.video-close {
  position: absolute;
  left: 1441px;
  top: 14px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  transition: transform 120ms ease;
}

.video-close img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.video-close:hover {
  transform: scale(1.15);
}

.video-close:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 3px;
  border-radius: 50%;
}

/* main_screen (Figma node 182:120) — holds the YouTube iframe. */
.video-main {
  position: absolute;
  left: 11px;
  top: 47px;
  width: 1457px;
  height: 816px;
  background: #000;
  overflow: hidden;
}

.video-main #ytPlayerSlide,
.video-main #ytPlayerSlide iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Scene (click area to advance messages) — Figma node 2:53 / 15:235.
   Multiple scenes share the same position; only `.active` is visible. */
.scene {
  position: absolute;
  left: 13px;
  top: 154px;
  width: 1453px;
  height: 706px;
  overflow: hidden;
  cursor: pointer;
  visibility: hidden;
  pointer-events: none;
}

.scene.active {
  visibility: visible;
  pointer-events: auto;
}

.chat-list-viewport {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

.chat-list-viewport::-webkit-scrollbar {
  width: 8px;
}

.chat-list-viewport::-webkit-scrollbar-track {
  background: transparent;
}

.chat-list-viewport::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

.chat-list-viewport::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* 25px breathing room at the start/end of the scroll range — the
   scene's own padding previously cropped messages mid-scroll. */
.chat-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
  align-items: flex-start;
  padding: 25px;
}

/* Hidden until revealed — hidden items take no layout space. */
.chat-item {
  display: none;
  flex-shrink: 0;
  pointer-events: none;
}

.chat-item.msg.visible {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  animation: msg-in 260ms ease both;
}

.chat-item.indent.visible {
  display: block;
  padding-left: 105px;
  animation: msg-in 260ms ease both;
}

@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Avatars */
.avatar {
  width: 55px;
  height: 55px;
  border-radius: 10px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.avatar-friend1 {
  background-image: url("assets/images/friend1-icon.png");
}

.avatar-friend2 {
  background-image: url("assets/images/friend2-icon.png");
}

/* Friend 2 alt — used by the Protagonist message in Scene 2. The Figma
   variant has a white backplate behind the icon. */
.avatar-friend2-alt {
  background-color: #fff;
  background-image: url("assets/images/friend2-icon-alt.png");
  background-size: 99.38% 88.52%;
  background-position: 0.77% 3.09%;
  background-repeat: no-repeat;
}

.msg-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.sender {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: #fff;
}

.bubble {
  background: #e8e8e8;
  border-radius: 20px;
  padding: 19px 20px;
  box-shadow: 7px 7px 15.4px 0 rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
}

.bubble-fixed-340 { width: 340px; }
.bubble-fixed-600 { width: 600px; max-width: 600px; }
.bubble-fixed-319 { width: 319px; }

.bubble-text {
  margin: 0;
  font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  color: #4d4d4d;
}

.bubble-fixed-340 .bubble-text,
.bubble-text {
  /* default: allow wrap; fixed-width bubbles will wrap automatically */
}

.bubble-link {
  font-weight: 600;
  color: #1b17ff;
  text-decoration: underline;
  word-break: break-all;
}

/* Re-enable pointer events for the clickable link bubble (chat-item disables
   them so clicks fall through to the scene to advance messages). */
.bubble-clickable {
  pointer-events: auto;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease;
}

.bubble-clickable:hover {
  filter: brightness(0.96);
}

.bubble-clickable:active {
  transform: translateY(1px);
}

.bubble-clickable:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 3px;
}

/* Inline link target inside a multi-element bubble (e.g. screenshot + link).
   Re-enables pointer events for just the link text. */
.bubble-link-clickable {
  pointer-events: auto;
  cursor: pointer;
  transition: filter 120ms ease;
}

.bubble-link-clickable:hover {
  filter: brightness(0.85);
}

.bubble-link-clickable:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}

/* Stamp and slide sizes (from Figma) */
.stamp-1 { width: 170px; height: 142px; }
.stamp-2 { width: 145px; height: 142px; }
.stamp-3 { width: 189px; height: 142px; }
.slide-2 {
  width: 344px;
  height: 194px;
  cursor: pointer;
  pointer-events: auto;
}
.slide-2:hover { filter: brightness(1.05); }
.slide-2:focus-visible { outline: 3px solid #3b82f6; outline-offset: 2px; }

/* Scene 2/3 picture sizes (from Figma chat2/chat3 masters). */
.chat-picture { display: block; flex-shrink: 0; }
.pic-6  { width: 202px; height: 138.875px; }
.pic-7  { width: 135px; height: 137px; }
.pic-8  { width: 156px; height: 137px; }
.pic-9  { width: 148px; height: 137px; }
.pic-10 { width: 136px; height: 137px; }
.pic-11 { width: 140px; height: 139px; }
.pic-12 { width: 216px; height: 165px; }

/* Scene 4 image sizes */
.chat4-stamp  { width: 143px; height: 139px; }
.chat4-que    { width: 129px; height: 129px; }
.chat4-ai1    { width: 179px; height: 156px; }
.chat4-ai2    { width: 174px; height: 174px; }
.chat4-prot-1 { width: 170px; height: 137px; }
.chat4-prot-2 { width: 193px; height: 182px; object-fit: cover; }
.chat3-prot-1 { width: 185px; height: 162px; }

/* Cropped image boxes — image is positioned absolutely inside the box,
   with negative offsets and over-sized dimensions to clip a portion. */
.image-crop {
  position: relative;
  overflow: hidden;
  display: block;
  flex-shrink: 0;
}

.image-crop > img {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
}

.crop-text-a { width: 224px; height: 119px; }
.crop-text-a > img { width: 120%; height: 226.42%; left: -10%; top: -83.74%; }

.crop-text-b { width: 140px; height: 126px; }
.crop-text-b > img { width: 100%; height: 111.11%; left: 0.17%; top: -10.95%; }

.crop-text-c { width: 120px; height: 134px; }
.crop-text-c > img { width: 161.9%; height: 144.68%; left: -29.76%; top: -18.75%; }

/* Scene 5 image sizes */
.chat5-img-194 { width: 194px; height: 194px; }

.crop-shot-a { width: 191px; height: 165px; }
.crop-shot-a > img { width: 109.95%; height: 100.34%; left: -9.95%; top: -0.17%; }

.crop-shot-b { width: 141px; height: 164px; }
.crop-shot-b > img { width: 136.17%; height: 100.09%; left: -14.89%; top: -0.05%; }

.crop-shot-c { width: 193px; height: 182px; }
.crop-shot-c > img { width: 100%; height: 106.78%; left: 0; top: -0.08%; }

/* Audio message bubble (play button + progress + duration) */
.bubble-audio {
  gap: 10px;
}

.audio-el {
  display: none;
}

.audio-play {
  width: 21px;
  height: 26px;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #676767;
  pointer-events: auto;
}

.audio-play:focus-visible {
  outline: 2px solid #676767;
  outline-offset: 2px;
  border-radius: 4px;
}

.audio-play-icon {
  display: block;
  width: 21px;
  height: 26px;
  position: relative;
}

/* Play triangle (default) */
.audio-play-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Pause icon (when playing) — two vertical bars */
.bubble-audio.is-playing .audio-play-icon::before {
  clip-path: none;
  background-color: transparent;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 35% 100%, 35% 100%;
  background-position: left center, right center;
  background-repeat: no-repeat;
}

.audio-track {
  position: relative;
  width: 380px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
  touch-action: none;
  pointer-events: auto;
}

.audio-track:focus-visible {
  outline: 2px solid #676767;
  outline-offset: 4px;
  border-radius: 2px;
}

.audio-track-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: #b8b8b8;
  border-radius: 2px;
}

.audio-track-progress {
  position: absolute;
  left: 0;
  width: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: #676767;
  border-radius: 2px;
}

.audio-track-head {
  position: absolute;
  left: 0;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  transform: translateY(-50%);
  background: #676767;
  border-radius: 50%;
}

.audio-time {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: #676767;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 3.5ch;
  text-align: right;
}

/* Scene 3 picture-only message — picture indented 50px from the body. */
.msg-picture-wrap { padding-left: 50px; }

/* Scene 3 stacked bubble (screenshot + link inside one bubble). */
.bubble-stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.bubble-screenshot {
  width: 560px;
  height: 186px;
  display: block;
  flex-shrink: 0;
  object-fit: cover;
}

/* Protagonist message — right-aligned with the avatar on the right side
   instead of the left, picture inline with a 50px trailing spacer. */
.msg-protagonist {
  width: 100%;
  justify-content: flex-end;
}

.msg-body-protagonist {
  align-items: flex-end;
}

.sender-right {
  text-align: right;
  align-self: stretch;
}

.protagonist-content {
  display: flex;
  align-items: center;
}

.picture-spacer {
  width: 50px;
  height: 100px;
  flex-shrink: 0;
}

/* ------- Puzzle 1 overlay (Figma node 2:99) ------- */
.puzzle1-overlay {
  position: absolute;
  left: 186px;
  top: 46px;
  width: 1480px;
  height: 874px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.puzzle1-overlay.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.puzzle1-window {
  position: relative;
  width: 1480px;
  height: 874px;
  filter: drop-shadow(15px 17px 4.55px rgba(0, 0, 0, 0.25));
}

.puzzle1-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}

.puzzle1-close {
  position: absolute;
  left: 1440px;
  top: 15px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease, transform 120ms ease;
  z-index: 3;
}

.puzzle1-close img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.puzzle1-window:hover .puzzle1-close {
  opacity: 1;
}

.puzzle1-close:hover {
  transform: scale(1.15);
  opacity: 1;
}

.puzzle1-close:focus-visible {
  opacity: 1;
  outline: 3px solid #3b82f6;
  outline-offset: 3px;
  border-radius: 50%;
}

/* Header (Figma node 111:171) */
.puzzle1-header {
  position: absolute;
  left: 13px;
  top: 48px;
  width: 1454px;
  height: 105px;
  padding: 0 25px;
  display: flex;
  align-items: center;
  gap: 25px;
}

.puzzle1-title {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.puzzle1-spacer { flex: 1 0 0; min-width: 0; }

.hint-icon {
  width: 68px;
  height: 68px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

button.hint-icon {
  cursor: pointer;
  transition: transform 120ms ease;
}

button.hint-icon:hover {
  transform: scale(1.05);
}

button.hint-icon:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}

.hint-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Hint popover (Figma node 111:171 > hint1/hint2). Shown when the
   matching hint icon is clicked; hidden when the cursor leaves the
   icon. */
.hint-popover {
  position: absolute;
  top: 89px;
  width: 677px;
  padding: 25px;
  background: rgba(90, 71, 66, 0.95);
  border-radius: 15px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  pointer-events: none;
  z-index: 10;
}

.hint-popover.show {
  display: flex;
}

.hint-popover-1 {
  /* Align right edge near hint1_icon (Figma left: 658 in 1454-wide header). */
  left: 658px;
}

.hint-popover-2 {
  /* Align right edge near hint2_icon (Figma left: 752 in 1454-wide header). */
  left: 752px;
}

/* Puzzle 2 hint1 sits further left because the header has 3 icons
   (hint1 + hint2 + question) instead of 2. Figma left: 565. */
.hint-popover-1-p2 {
  left: 565px;
}

.hint-popover-2-p2 {
  /* Puzzle 2 hint2 (Figma left: 658). */
  left: 658px;
}

.hint-popover-q-p2 {
  /* Puzzle 2 Puzzle_description (Figma left: 752). */
  left: 752px;
}

/* Puzzle 4 popovers (Figma node 111:236) — grey background, 10px gap,
   slightly shifted right (header has 3 icons + 1457px width). */
.hint-popover-1-p4,
.hint-popover-2-p4,
.hint-popover-q-p4 {
  background: rgba(78, 78, 78, 0.95);
  gap: 10px;
}

.hint-popover-1-p4 { left: 569px; }
.hint-popover-2-p4 { left: 662px; }
.hint-popover-q-p4 { left: 755px; }

/* Puzzle 4 description includes a separator and an ordered rules list. */
.hint-separator {
  width: 529px;
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
  border: 0;
  margin: 0;
  flex-shrink: 0;
}

/* Puzzle 5 uses a darker grey background and tighter gap (Figma node 182:379). */
.hint-popover-1-p5 {
  left: 658px;
  background: rgba(78, 78, 78, 0.95);
  gap: 10px;
}

.hint-popover-2-p5 {
  left: 752px;
  background: rgba(78, 78, 78, 0.95);
  gap: 10px;
}

.hint-tag {
  width: 171px;
  height: 37px;
  background: #404040;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 23px 0;
  font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.hint-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: normal;
  color: #fff;
  white-space: pre-wrap;
}

.hint-body p {
  margin: 0;
  width: 100%;
}

/* Body row (Figma node 8:103) */
.puzzle1-body {
  position: absolute;
  left: 13px;
  top: 154px;
  width: 1453px;
  height: 706px;
  padding: 25px;
  display: flex;
  align-items: stretch;
  gap: 20px;
}

/* Left: description (8:102) */
.puzzle1-description {
  flex-shrink: 0;
  width: 586px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 15px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}

.puzzle1-description::-webkit-scrollbar { width: 8px; }
.puzzle1-description::-webkit-scrollbar-track { background: transparent; }
.puzzle1-description::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 4px;
}

.puzzle1-heading {
  background: #404040;
  width: 171px;
  height: 37px;
  display: grid;
  place-items: center;
  font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  flex-shrink: 0;
}

.puzzle1-text {
  margin: 0;
  font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: #fff;
  align-self: stretch;
}

.puzzle1-divider {
  width: 529px;
  height: 1px;
  background: #fff;
  margin: 6px 0;
  flex-shrink: 0;
}

/* Right: puzzle stage (8:182) */
.puzzle1-stage {
  flex-shrink: 0;
  width: 808px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  position: relative;
}

.graph-area {
  position: relative;
  width: 100%;
  height: 561px;
  flex-shrink: 0;
}

.graph-bg {
  position: absolute;
  left: 20px;
  top: 0;
  width: 768px;
  height: 561px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 15px;
  pointer-events: none;
}

.graph-row {
  position: relative;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.graph-arrow {
  flex-shrink: 0;
  width: 53px;
  height: 84px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease;
}

.graph-arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.graph-arrow-right img {
  transform: scaleX(-1);
}

.graph-arrow:hover { filter: brightness(1.1); }
.graph-arrow:active { transform: scale(0.95); }

.graph-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

.graph-viewport {
  width: 723px;
  height: 561px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.graph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 220ms ease;
}

.graph.active {
  visibility: visible;
  opacity: 1;
}

.graph-title {
  margin: 0;
  width: 100%;
  font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: #000;
  text-align: left;
}

.graph-image {
  position: relative;
  width: 100%;
  background: #fff;
  flex-shrink: 0;
  overflow: hidden;
}

.graph-image > img:not(.graph-marker) {
  width: 100%;
  height: 100%;
  display: block;
}

/* Per-graph aspect ratios from Figma */
.graph-1 .graph-image  { aspect-ratio: 3295 / 1828; }
.graph-image-2         { height: 452px; }
.graph-image-3         { aspect-ratio: 712 / 367; }
.graph-image-4         { aspect-ratio: 684 / 354; }
.graph-image-5         { aspect-ratio: 698 / 348; }

.graph-marker {
  position: absolute;
  pointer-events: none;
  display: none;
}

.graph-marker.revealed {
  display: block;
}

.marker-1-1 { left: 408px; top: 5.55px; width: 33px; height: 33px; }
.marker-1-2 { left: 396px; top: -2px; width: 50px; height: 48px; }
.marker-1-3 { left: 403px; top: -1.67px; width: 42px; height: 36px; }
.marker-1-4 { left: 440px; top: 8.59px; width: 27px; height: 27px; }
.marker-1-5 { left: 212px; top: 8px; width: 42px; height: 36px; transform: rotate(180deg); }

.graph-source {
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.source-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  color: #000;
}

.source-name { margin: 0; font-size: 14px; line-height: 1.2; }
.source-org  { margin: 0; font-size: 20px; line-height: 1.2; }

.source-logo { display: block; flex-shrink: 0; object-fit: contain; }
.logo-rizan   { width: 125px; height: 62px; }
.logo-tv2     { width: 164px; height: 50px; }
.logo-daiichi { width: 100px; height: 80px; }
.logo-force   { width: 109px; height: 73px; }
.logo-gobosei { width:  95px; height: 96px; }

/* Answer bar (8:185) */
.answer-bar {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 17px;
  padding: 10px;
  height: 100px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.answer-label {
  font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.answer-input {
  width: 525px;
  height: 58px;
  background: #fff;
  border: 1px solid #767676;
  border-radius: 0;
  padding: 0 12px;
  font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
  font-size: 24px;
  color: #000;
  flex-shrink: 0;
}

.answer-input:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.answer-input.shake {
  animation: answer-shake 360ms ease;
  border-color: #d33;
}

@keyframes answer-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

.answer-submit {
  width: 110px;
  height: 85px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 120ms ease, filter 120ms ease;
}

.answer-submit img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.answer-submit:hover { filter: brightness(1.06); }
.answer-submit:active { transform: scale(0.97); }

/* ------- Puzzle 2 overlay (Figma node 15:1054) ------- */
.puzzle2-overlay {
  position: absolute;
  left: 103px;
  top: 79px;
  width: 1480px;
  height: 875px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.puzzle2-overlay.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.puzzle2-window {
  position: relative;
  width: 1480px;
  height: 875px;
  filter: drop-shadow(15px 17px 4.55px rgba(0, 0, 0, 0.25));
}

.puzzle2-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}

.puzzle2-close {
  position: absolute;
  left: 1440px;
  top: 15px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease, transform 120ms ease;
  z-index: 3;
}

.puzzle2-close img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.puzzle2-window:hover .puzzle2-close {
  opacity: 1;
}

.puzzle2-close:hover {
  transform: scale(1.15);
  opacity: 1;
}

.puzzle2-close:focus-visible {
  opacity: 1;
  outline: 3px solid #3b82f6;
  outline-offset: 3px;
  border-radius: 50%;
}

/* Header (Figma node 111:154) */
.puzzle2-header {
  position: absolute;
  left: 13px;
  top: 48px;
  width: 1454px;
  height: 105px;
  padding: 0 25px;
  display: flex;
  align-items: center;
  gap: 25px;
}

.puzzle2-title {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.puzzle2-spacer { flex: 1 0 0; min-width: 0; }

/* Body (15:1059) */
.puzzle2-body {
  position: absolute;
  left: 13px;
  top: 154px;
  width: 1453px;
  height: 706px;
  padding-bottom: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Stage holds both fixed (blue) and answer (green) cards stacked. */
.puzzle2-stage {
  position: relative;
  flex: 1 0 0;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

/* Symbols layer (Figma node 113:823) — overlay sitting above the blue
   category cards so each symbol marks its category. SVG viewBox
   1453x581 matches the stage. pointer-events:none keeps drag working. */
.puzzle2-symbols {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  z-index: 3;
}

.puzzle2-stage .card-fixed {
  z-index: 1;
}

.puzzle2-stage .card-answer {
  z-index: 2;
}

/* Blue category cards (sor1-8) — fixed positions, bold border. */
.card-fixed {
  position: absolute;
  width: 328px;
  height: 107px;
  background: #dbe9fe;
  border: 3px solid #3a3a3a;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: #3d3d3d;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

/* Green answer cards (ans1-8) — scattered, draggable later. */
.card-answer {
  position: absolute;
  width: 318px;
  height: 97px;
  background: #daffdd;
  border: 2px solid #7b7b7b;
  box-shadow: 5px 5px 5.5px 0 rgba(0, 0, 0, 0.25);
  display: grid;
  place-items: center;
  text-align: center;
  font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: #4a4a4a;
  overflow: hidden;
  user-select: none;
  cursor: grab;
}

.card-answer:active {
  cursor: grabbing;
}

/* Answer bar (15:1104) — narrower than Puzzle 1's, with a symbol prompt. */
.puzzle2-answer-bar {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 17px;
  padding: 10px;
  height: 100px;
  width: 742px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.puzzle2-answer-label {
  font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.puzzle2-answer-input {
  width: 404px;
}

/* ------- Puzzle 3 overlay (Figma node 15:1110) ------- */
.puzzle3-overlay {
  position: absolute;
  left: 220px;
  top: 102px;
  width: 1480px;
  height: 875px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.puzzle3-overlay.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.puzzle3-window {
  position: relative;
  width: 1480px;
  height: 875px;
  filter: drop-shadow(15px 17px 4.55px rgba(0, 0, 0, 0.25));
}

.puzzle3-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}

.puzzle3-close {
  position: absolute;
  left: 1440px;
  top: 15px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease, transform 120ms ease;
  z-index: 3;
}

.puzzle3-close img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.puzzle3-window:hover .puzzle3-close {
  opacity: 1;
}

.puzzle3-close:hover {
  transform: scale(1.15);
  opacity: 1;
}

.puzzle3-close:focus-visible {
  opacity: 1;
  outline: 3px solid #3b82f6;
  outline-offset: 3px;
  border-radius: 50%;
}

/* Header (Figma node 111:217) */
.puzzle3-header {
  position: absolute;
  left: 14px;
  top: 48px;
  width: 1454px;
  height: 105px;
  padding: 0 25px;
  display: flex;
  align-items: center;
  gap: 25px;
}

.puzzle3-title {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.puzzle3-spacer { flex: 1 0 0; min-width: 0; }

/* Body (36:209) */
.puzzle3-body {
  position: absolute;
  left: 13px;
  top: 154px;
  width: 1453px;
  height: 706px;
}

.puzzle3-back {
  position: absolute;
  left: 0;
  top: 0;
  padding: 15px;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  transition: transform 120ms ease, filter 120ms ease;
}

.puzzle3-back img {
  display: block;
  width: 68px;
  height: 68px;
  border-radius: 10px;
  object-fit: cover;
  pointer-events: none;
}

.puzzle3-back:hover { filter: brightness(1.06); }
.puzzle3-back:active { transform: scale(0.96); }

.puzzle3-back:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 12px;
}

/* Sub-views inside Puzzle 3 body: home / q1 / q2 / q3.
   Only one is `.active` at a time. */
.puzzle3-view {
  position: absolute;
  inset: 0;
  display: none;
}

.puzzle3-view.active {
  display: flex;
}

/* Body_home (Figma node 35:119) — description column + answer column. */
.puzzle3-home {
  flex-direction: row;
  gap: 20px;
  align-items: center;
  padding: 25px;
}

.puzzle3-home-desc {
  width: 586px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 15px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.puzzle3-home-right {
  width: 768px;
  height: 539px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 15px;
  padding: 100px 13px 70px 13px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.puzzle3-home-parts {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: center;
}

.puzzle3-part-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.puzzle3-part-label {
  margin: 0;
  font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: #000;
  white-space: nowrap;
}

.puzzle3-part-input {
  width: 200px;
  height: 100px;
  background: #fff;
  border: 1px solid #5a5a5a;
  border-radius: 5px;
  padding: 0;
  font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
  font-size: 48px;
  text-align: center;
  color: #000;
}

.puzzle3-part-input:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.puzzle3-part-btn {
  width: 110px;
  height: 47px;
  border: 0;
  border-radius: 10px;
  background: #7f5683;
  color: #fff;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: filter 120ms ease, transform 120ms ease;
}

.puzzle3-part-btn:hover { filter: brightness(1.1); }
.puzzle3-part-btn:active { transform: scale(0.96); }

.puzzle3-part-btn:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}

.puzzle3-home-answer-bar {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 17px;
  padding: 10px;
  height: 100px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.puzzle3-answer-input {
  width: 525px;
}

/* Quiz views (Q1/Q2/Q3) — Figma nodes 86:1283/86:1302/86:1321 */
.puzzle3-quiz {
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 10px 25px;
}

.puzzle3-description {
  width: 1259px;
  height: 129px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  flex-shrink: 0;
}

.puzzle3-heading {
  background: #404040;
  width: 171px;
  height: 37px;
  display: grid;
  place-items: center;
  font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  flex-shrink: 0;
}

.puzzle3-text {
  margin: 0;
  font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: #fff;
  align-self: stretch;
}

.puzzle3-desc-line {
  margin: 0;
  font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: #fff;
  text-align: center;
}

.puzzle3-pictures {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.person-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Q1 cards */
.person-card-light  { width: 301px; height: 428px; }
.person-card-tomoya { width: 280px; height: 430px; }
.person-card-shirai { width: 294px; height: 428px; }
.person-card-elly   { width: 316px; height: 426px; }

/* Q2 cards */
.person-card-wakasa { width: 333px; height: 428px; }
.person-card-taiga  { width: 305px; height: 430px; }
.person-card-mike   { width: 355px; height: 428px; }
.person-card-otogi  { width: 278px; height: 426px; }

/* Q3 cards */
.person-card-akira   { width: 291px; height: 428px; }
.person-card-shion   { width: 331px; height: 430px; }
.person-card-turio   { width: 295px; height: 428px; }
.person-card-michiko { width: 302px; height: 426px; }

.person-img {
  width: 100%;
  height: 389px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.person-card-tomoya  .person-img { height: 391px; }
.person-card-elly    .person-img { height: 387px; }
.person-card-wakasa  .person-img { height: 391.663px; }
.person-card-taiga   .person-img { height: 389px; }
.person-card-mike    .person-img { height: 391px; }
.person-card-otogi   .person-img { height: 391px; }
.person-card-akira   .person-img { height: 389px; }
.person-card-shion   .person-img { height: 390px; }
.person-card-turio   .person-img { height: 389px; }
.person-card-michiko .person-img { height: 392px; }

/* Shirai's image is positioned slightly off-frame in Figma (left: -7%, w:114%). */
.person-img-shirai {
  height: 389px;
  width: 113.99%;
  object-fit: cover;
  margin-left: -7%;
  display: block;
}

.person-name {
  margin: 0;
  font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: #000;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Puzzle 5 markers within Q1 — positioned absolutely. */
.puzzle3-marker {
  position: absolute;
  pointer-events: none;
  display: none;
}

.puzzle3-marker.revealed {
  display: block;
}

.marker-3-1 { left: 251px; top: 603px; width: 38px; height: 38px; }
.marker-3-2 { left: 872px; top: 607px; width: 46px; height: 40px; transform: rotate(180deg); }
.marker-3-3 { left: 220px; top: 594px; width: 51px; height: 45px; }
.marker-3-4 { left: 1264px; top: 604px; width: 38px; height: 38px; }
.marker-3-5 { left: 557px; top: 592px; width: 56px; height: 53px; }

/* Hide back button when not in a quiz view */
.puzzle3-back[hidden] { display: none; }

/* ------- Puzzle 4 overlay (Figma node 15:1020) ------- */
.puzzle4-overlay {
  position: absolute;
  left: 150px;
  top: 89px;
  width: 1480px;
  height: 875px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.puzzle4-overlay.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.puzzle4-window {
  position: relative;
  width: 1480px;
  height: 875px;
  filter: drop-shadow(15px 17px 4.55px rgba(0, 0, 0, 0.25));
  background: #f3f3f3;
  border-radius: 2px;
  overflow: hidden;
}

.puzzle4-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}

.puzzle4-close {
  position: absolute;
  left: 1441px;
  top: 14px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease, transform 120ms ease;
  z-index: 5;
}

.puzzle4-close img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.puzzle4-window:hover .puzzle4-close { opacity: 1; }
.puzzle4-close:hover { transform: scale(1.15); opacity: 1; }
.puzzle4-close:focus-visible {
  opacity: 1;
  outline: 3px solid #3b82f6;
  outline-offset: 3px;
  border-radius: 50%;
}

/* main_screen (102:14) — fills below the chrome bar */
.puzzle4-main {
  position: absolute;
  left: 11px;
  top: 47px;
  width: 1457px;
  height: 816px;
}

/* Header (Figma node 111:236) — kept above the draggable notes so they
   slide behind it when dragged near the top. */
.puzzle4-header {
  position: absolute;
  left: 0;
  top: 0;
  width: 1457px;
  height: 105px;
  background: #7f7f7f;
  padding: 0 25px;
  display: flex;
  align-items: center;
  gap: 25px;
  z-index: 10;
}

.puzzle4-title {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.puzzle4-spacer { flex: 1 0 0; min-width: 0; }

/* Puzzle body (25:1175) — phone in background, flex content centered */
.puzzle4-body {
  position: absolute;
  left: 0;
  top: 105px;
  width: 1457px;
  height: 711px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 36px;
  align-items: center;
  justify-content: center;
}

.puzzle4-phone {
  position: absolute;
  left: 315px;
  top: -3px;
  width: 827px;
  height: 714px;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.puzzle4-description {
  position: relative;
  z-index: 1;
  width: 1301px;
  height: 102px;
  background: rgba(222, 222, 222, 0.9);
  border-radius: 15px;
  padding: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.puzzle4-desc-text {
  margin: 0;
  font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.2;
  color: #454545;
  text-align: center;
  width: 100%;
}

.puzzle4-answer-field {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.puzzle4-frame-card {
  width: 587px;
  height: 74px;
  background: #e6e6e6;
  border: 1px solid #000;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 25px;
  line-height: 1.2;
  color: #1a1a1a;
  text-align: center;
}

/* ans_frame (102:2) — drop zone indicator beside the cards */
.puzzle4-ans-frame {
  position: absolute;
  left: 588px;
  top: 142px; /* description (102) + gap (36) + ans_frame.y (141 within answer area) ≈ 246 */
  width: 38px;
  height: 432px;
  background: rgba(94, 113, 218, 0.2);
  border: 5px solid rgba(86, 65, 245, 0.2);
  z-index: 10;
  pointer-events: none;
}

.puzzle4-answer-bar {
  position: relative;
  z-index: 1;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 17px;
  padding: 10px;
  height: 100px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.puzzle4-answer-input {
  width: 450px;
}

/* Draggable answer notes (Figma node 114:928) */
.puzzle4-note {
  position: absolute;
  width: 587px;
  height: 75px;
  background: #fff;
  border: 1px solid #000;
  filter: drop-shadow(7px 9px 2.5px rgba(0, 0, 0, 0.25));
  padding: 0 10px;
  display: flex;
  align-items: center;
  font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 25px;
  line-height: 1.2;
  color: #1e00ff;
  white-space: nowrap;
  cursor: grab;
  user-select: none;
  touch-action: none;
  z-index: 5;
  transition: box-shadow 120ms ease;
}

.puzzle4-note:hover {
  box-shadow: 0 0 0 2px rgba(94, 113, 218, 0.4);
}

.puzzle4-note.dragging {
  cursor: grabbing;
  z-index: 8;
}

/* ------- Puzzle 5 overlay (Figma node 15:1166) ------- */
.puzzle5-overlay {
  position: absolute;
  left: 126px;
  top: 25px;
  width: 1480px;
  height: 875px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.puzzle5-overlay.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.puzzle5-window {
  position: relative;
  width: 1480px;
  height: 875px;
  filter: drop-shadow(15px 17px 4.55px rgba(0, 0, 0, 0.25));
  background: #f3f3f3;
  border-radius: 2px;
  overflow: hidden;
}

.puzzle5-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}

.puzzle5-close {
  position: absolute;
  left: 1441px;
  top: 14px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease, transform 120ms ease;
  z-index: 5;
}

.puzzle5-close img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.puzzle5-window:hover .puzzle5-close { opacity: 1; }
.puzzle5-close:hover { transform: scale(1.15); opacity: 1; }
.puzzle5-close:focus-visible {
  opacity: 1;
  outline: 3px solid #3b82f6;
  outline-offset: 3px;
  border-radius: 50%;
}

.puzzle5-main {
  position: absolute;
  left: 11px;
  top: 47px;
  width: 1457px;
  height: 816px;
}

.puzzle5-header {
  position: absolute;
  left: 0;
  top: 0;
  width: 1457px;
  height: 105px;
  background: #7f7f7f;
  padding: 0 25px;
  display: flex;
  align-items: center;
  gap: 25px;
  z-index: 2;
}

.puzzle5-title {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.puzzle5-spacer { flex: 1 0 0; min-width: 0; }

/* Puzzle screen (102:22) — body content area */
.puzzle5-screen {
  position: absolute;
  left: 0;
  top: 105px;
  width: 1457px;
  height: 711px;
  padding: 32px 145px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.puzzle5-description {
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 15px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.puzzle5-text {
  margin: 0;
  width: 100%;
  font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.4;
  color: #434343;
}

.puzzle5-shot {
  width: 738px;
  height: 180px;
  display: block;
  flex-shrink: 0;
  object-fit: cover;
}

.puzzle5-answer-bar {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 17px;
  padding: 10px;
  height: 100px;
  width: 742px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.puzzle5-answer-input {
  width: 525px;
}