:root {
  --ink: #17233d;
  --paper: #eef2f7;
  --steel: #5f7fb0;
  --pink: #ff6fae;
  --lilac: #b9a4ff;
  --lemon: #ffe970;
  --mint: #8ff0d0;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

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

html, body {
  height: 100%;
  overflow: hidden;           /* single screen, no scrollbar */
  background: var(--ink);
  font-family: "Zen Maru Gothic", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.stage {
  position: relative;
  display: flex;
  height: 100dvh;
  width: 100vw;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  transition: opacity .35s ease;
}
.stage.leaving { opacity: 0; }

/* ---------- panels ---------- */
.panel {
  position: relative;
  flex: 1 1 0;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  transition: flex-grow .6s var(--ease);
}
.stage.has-pick .panel { flex-grow: .78; }
.stage.has-pick .panel.active { flex-grow: 1.4; }

.backdrop { position: absolute; inset: 0; transition: filter .5s ease; }
.char, .card { transition: transform .6s var(--ease), filter .5s ease, opacity .4s ease; }

.char {
  position: absolute;
  bottom: 0;
  height: min(80%, 82vw * 1.6);
  max-width: 78%;
  width: auto;
  object-fit: contain;
  object-position: bottom;
  pointer-events: none;
  transform-origin: 50% 100%;
  animation: bob 4.5s ease-in-out infinite;
}
@keyframes bob { 50% { translate: 0 -1.2%; } }

.stage.has-pick .panel:not(.active) .char { filter: grayscale(.7) brightness(.65); }
.stage.has-pick .panel:not(.active) .backdrop { filter: saturate(.4) brightness(.7); }
.stage.has-pick .panel.active .char { transform: scale(1.04) var(--flip, scaleX(1)); filter: drop-shadow(0 0 22px var(--glow)); }

/* ---------- info card ---------- */
.card {
  position: absolute;
  bottom: clamp(14px, 4dvh, 40px);
  width: min(300px, 44%);
  padding: 12px;
  color: var(--card-fg);
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  z-index: 2;
}
.shot {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 10px;
  border-radius: calc(var(--card-radius) - 4px);
  background: #0003;
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.card h2 { font-size: clamp(1.05rem, 2.4dvh + .4rem, 1.5rem); line-height: 1.15; }
.card p { margin-top: 4px; font-size: clamp(.74rem, 1.6dvh + .1rem, .9rem); line-height: 1.4; }

/* the card starts collapsed; picking expands the details + button */
.card p, .enter { display: none; }
.panel.active .card p { display: block; }
.enter {
  margin-top: 10px;
  padding: .55em 1em;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: .9rem;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border-radius: var(--btn-radius);
  box-shadow: var(--btn-shadow);
  transition: transform .15s ease;
}
.panel.active .enter { display: block; animation: pop .45s var(--ease); }
.enter:hover, .enter:focus-visible { transform: translateY(-2px); outline: none; }
.enter:active { transform: translateY(1px); }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }

.panel:focus-visible::after {
  content: ""; position: absolute; inset: 8px; border: 3px dashed #fff; border-radius: 12px; pointer-events: none; z-index: 5;
}

/* ---------- left: professional ---------- */
.pro {
  --glow: #9fc0ff88;
  --card-fg: var(--ink);
  --card-bg: #f7f9fcee;
  --card-border: 1px solid #fff;
  --card-radius: 6px;
  --card-shadow: 0 14px 40px #0a1226aa;
  --btn-fg: #fff; --btn-bg: var(--ink); --btn-radius: 4px; --btn-shadow: none;
}
.pro .backdrop {
  background:
    linear-gradient(90deg, #ffffff10 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(0deg, #ffffff10 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(ellipse at 70% 80%, #35558f 0%, transparent 60%),
    linear-gradient(160deg, #0f1a33, #223a68);
}
.pro .card { left: clamp(14px, 4vw, 48px); }
.pro .card h2 { font-family: "Fraunces", Georgia, serif; font-weight: 700; }
.pro .char { right: 3%; }
.pro .backdrop::after {                                /* quiet corner brackets */
  content: ""; position: absolute; inset: 22px;
  background:
    linear-gradient(#ffffff55, #ffffff55) 0 0 / 28px 2px no-repeat,
    linear-gradient(#ffffff55, #ffffff55) 0 0 / 2px 28px no-repeat,
    linear-gradient(#ffffff55, #ffffff55) 100% 100% / 28px 2px no-repeat,
    linear-gradient(#ffffff55, #ffffff55) 100% 100% / 2px 28px no-repeat;
}

/* ---------- right: playful ---------- */
.fun {
  --glow: #ff9fd0cc;
  --card-fg: #3a1d5c;
  --card-bg: #fff8fd;
  --card-border: 3px solid #3a1d5c;
  --card-radius: 18px;
  --card-shadow: 6px 6px 0 #3a1d5c;
  --btn-fg: #3a1d5c; --btn-bg: var(--lemon); --btn-radius: 999px; --btn-shadow: 0 3px 0 #3a1d5c;
  --flip: scaleX(-1);
}
.fun .backdrop {
  background:
    radial-gradient(circle at 20% 25%, #fff6 0 3px, transparent 4px) 0 0 / 56px 56px,
    radial-gradient(circle at 70% 70%, #fff4 0 2px, transparent 3px) 0 0 / 38px 38px,
    conic-gradient(from 45deg at 50% 50%, #ffffff14 0 25%, transparent 0 50%, #ffffff14 0 75%, transparent 0) 0 0 / 64px 64px,
    linear-gradient(200deg, var(--pink), var(--lilac) 70%, #8fb4ff);
  animation: drift 24s linear infinite;
}
@keyframes drift { to { background-position: 56px 56px, -38px 38px, 64px 0, 0 0; } }
.fun .card { right: clamp(14px, 4vw, 48px); }
.fun .card h2 { font-family: "DotGothic16", "Zen Maru Gothic", sans-serif; font-weight: 400; letter-spacing: .02em; }
.fun .char { left: 3%; transform: scaleX(-1); animation-delay: -1.8s; }
.fun .backdrop::after {
  content: "✦ ✧ ★ ✦"; position: absolute; top: 20%; left: 8%; right: 8%;
  font-size: clamp(1rem, 3vw, 2rem); color: #fff; letter-spacing: .6em; text-align: center;
  animation: twinkle 2.4s ease-in-out infinite; text-shadow: 0 0 10px #fff;
}
@keyframes twinkle { 50% { opacity: .35; } }

/* ---------- heading + seam ---------- */
.heading {
  position: absolute; top: clamp(12px, 3.5dvh, 36px); left: 50%; translate: -50% 0;
  z-index: 4; text-align: center; pointer-events: none; width: max-content; max-width: 92vw;
  color: #fff; text-shadow: 0 2px 14px #000a;
}
.heading h1 { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: clamp(1.2rem, 3.2dvh + .6rem, 2.1rem); }
.heading p { margin-top: 4px; font-size: clamp(.78rem, 1.7dvh + .1rem, .95rem); opacity: .9; }

.seam {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 0; z-index: 3; pointer-events: none;
  transition: left .6s var(--ease);
  border-left: 2px solid #ffffffcc; box-shadow: 0 0 18px #fff8;
}
.seam span {
  position: absolute; top: 50%; left: 0; translate: -50% -50%;
  width: 3.4rem; height: 3.4rem; display: grid; place-items: center;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: #fff; color: var(--ink);
  font-weight: 700; font-size: .85rem;
}


.stage[data-pick="pro"] .seam { left: 64%; }
.stage[data-pick="fun"] .seam { left: 36%; }

/* ---------- small / portrait screens: stack ---------- */
@media (max-aspect-ratio: 4/5), (max-width: 640px) {
  .stage { flex-direction: column; }
  .stage.has-pick .panel { flex-grow: .8; }
  .stage.has-pick .panel.active { flex-grow: 1.5; }
  .heading { top: 8px; }
  .panel .char { height: min(88%, 68vw * 1.6); max-width: 52%; }
  .pro .char { right: 2%; }
  .fun .char { left: 2%; }
  .pro .card { left: 10px; }
  .fun .card { right: 10px; }
  .card { width: min(250px, 56%); bottom: 10px; padding: 8px; }
  .shot { display: none; }
  .panel.active .shot { display: block; margin-bottom: 6px; }
  .seam { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 0; border-left: 0; border-top: 2px solid #ffffffcc; }
  .seam span { left: 50%; width: 2.8rem; height: 2.8rem; font-size: .75rem; }
  .stage[data-pick="pro"] .seam { left: 0; top: 64%; }
  .stage[data-pick="fun"] .seam { left: 0; top: 36%; }
  .seam { transition: top .6s var(--ease); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; }
}