:root {
  --pink-50: #fff5fa;
  --pink-100: #ffe4f0;
  --pink-200: #ffc8df;
  --pink-300: #ffa7cd;
  --pink-400: #ff75ad;
  --pink-500: #ee4c92;
  --pink-600: #c83278;
  --plum: #6f355b;
  --cream: #fffafb;
  --shadow: #d86b9b;
  --pixel: ui-monospace, "Cascadia Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body { width: 100%; min-height: 100%; margin: 0; }

body {
  overflow-x: hidden;
  color: var(--plum);
  font-family: var(--pixel);
  background:
    linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(160deg, #ffc0dc, #ffd9e9 55%, #f4a8d1);
  image-rendering: pixelated;
}

button { font: inherit; }
button:focus-visible { outline: 4px solid white; outline-offset: 4px; }

.screen {
  display: none;
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  padding: 24px;
}

.screen.active { display: grid; animation: screen-in .55s steps(8) both; }

@keyframes screen-in { from { opacity: 0; } to { opacity: 1; } }

.pixel-panel {
  border: 4px solid var(--plum);
  background: rgba(255, 250, 252, .95);
  box-shadow: 0 0 0 4px #fff, 9px 9px 0 rgba(123, 47, 87, .22);
}

#start-screen { overflow-x: hidden; overflow-y: auto; }

.start-card {
  position: relative;
  z-index: 2;
  width: min(570px, calc(100vw - 38px));
  padding: 184px 42px 30px;
  text-align: center;
  background: linear-gradient(#fffafd, #ffe9f3);
}

.mini-scene {
  position: absolute;
  inset: 0 0 auto;
  height: 160px;
  overflow: hidden;
  border-bottom: 4px solid var(--plum);
  background:
    radial-gradient(circle at 76% 28%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 18% 30%, #fff 0 3px, transparent 4px),
    linear-gradient(#f7add1 0 67%, #e889bd 67% 72%, #f19ec6 72%);
}

.mini-scene::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 21px;
  background: repeating-linear-gradient(90deg, #da70aa 0 8px, #eb8cba 8px 16px);
  clip-path: polygon(0 30%, 5% 0, 10% 35%, 16% 8%, 23% 40%, 30% 12%, 38% 42%, 46% 5%, 55% 38%, 64% 0, 72% 35%, 81% 8%, 89% 40%, 96% 3%, 100% 25%, 100% 100%, 0 100%);
}

.cloud { position: absolute; width: 54px; height: 18px; background: #fff3fa; box-shadow: 8px -8px #fff3fa, 24px -5px #fff3fa; }
.cloud-a { left: 12%; top: 38px; }
.cloud-b { right: 17%; top: 54px; transform: scale(.7); }

.hero-preview {
  position: absolute; left: 50%; bottom: 20px; width: 36px; height: 48px;
  transform: translateX(-50%);
  background: #fff5ee;
  border: 4px solid var(--plum);
  box-shadow: inset 0 -14px #ee70a9, -9px 9px 0 -5px var(--plum), 9px 9px 0 -5px var(--plum);
  animation: hero-bob 1.3s steps(2) infinite;
}
.hero-preview::before { content:""; position:absolute; width:9px; height:9px; background:var(--plum); left:5px; top:12px; box-shadow:17px 0 var(--plum); }
.hero-preview::after { content:"🎀"; position:absolute; font-size:22px; right:-20px; top:-17px; }
.preview-heart { position:absolute; left:61%; top:75px; color:#ef397f; font-size:24px; animation: bob 1s steps(2) infinite; }

.eyebrow { color: var(--pink-600); font-size: 12px; font-weight: 800; letter-spacing: 2px; }
h1 { margin: 13px 0 10px; color: var(--plum); font-size: clamp(28px, 6vw, 46px); line-height: 1.15; text-shadow: 3px 3px 0 #ffc1dc; }
h1 span { color: var(--pink-500); }
.subtitle { margin: 14px 0 22px; font-weight: 700; }
.tiny-note { margin: 18px 0 0; color: #a46283; font-size: 11px; }

.pixel-button {
  position: relative;
  border: 4px solid var(--plum);
  padding: 14px 25px;
  color: #fff;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  background: var(--pink-500);
  box-shadow: inset 0 4px rgba(255,255,255,.32), 0 5px 0 var(--pink-600);
  transition: transform .12s, filter .12s;
}
.pixel-button:hover { transform: translateY(-3px) scale(1.035); filter: brightness(1.07) drop-shadow(0 0 10px #ff92c2); }
.pixel-button:active { transform: translateY(4px); box-shadow: inset 0 3px rgba(255,255,255,.25), 0 1px 0 var(--pink-600); }
.primary { min-width: 180px; font-size: 18px; }
.sound-button { display:block; margin:20px auto 0; border:0; color:#9e527b; font-size:12px; font-weight:bold; cursor:pointer; background:transparent; }
.shop-summary{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:15px}.shop-summary span,.shop-summary button{border:3px solid var(--plum);padding:7px 11px;color:var(--plum);font-size:11px;font-weight:900;background:#fff;box-shadow:3px 3px rgba(100,50,80,.2)}.shop-summary span{color:#dd3e7d}.shop-summary button{cursor:pointer;background:#ffd1e4}.skin-shop{margin-top:14px;padding:10px;border:3px solid var(--plum);background:#fff6fa}.shop-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;color:var(--pink-600);font-size:11px}.shop-head small{font-size:8px;color:#8d6078}.skin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:260px;overflow:auto;padding:3px}.skin-card{position:relative;border:3px solid #8a4d6d;padding:4px 3px 6px;cursor:pointer;background:#ffe9f3}.skin-card canvas{display:block;width:100%;height:68px;object-fit:contain;image-rendering:pixelated}.skin-card strong,.skin-card small{display:block;font-size:8px}.skin-card small{margin-top:2px;color:#d3427f}.skin-card.owned{background:#edfff0}.skin-card.selected{outline:4px solid #ee4c92;outline-offset:-4px}.skin-card:disabled{filter:grayscale(.5);opacity:.75}.skin-shop[hidden]{display:none}

.pet-panel { margin-top:14px; padding:10px; border:3px solid var(--plum); background:#f4f0ff; }
.pet-panel[hidden] { display:none; }
.pet-config { display:flex; align-items:center; gap:12px; }
#pet-preview { flex:0 0 110px; width:110px; height:96px; border:3px solid #76507d; background:radial-gradient(circle,#fff 0 25%,#ddd5ff 70%); image-rendering:pixelated; }
.pet-options { display:grid; flex:1; gap:6px; }
.pet-options > span { color:#8b5a82; font-size:8px; font-weight:900; text-align:left; }
#pet-enabled,.pet-mode-buttons button { border:3px solid var(--plum); padding:7px 5px; color:var(--plum); cursor:pointer; font-size:8px; font-weight:900; background:#fff; box-shadow:2px 2px #c69ab8; }
#pet-enabled.off { color:#816e78; background:#ddd7da; }
.pet-mode-buttons { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.pet-mode-buttons button.active { color:#fff; background:var(--pink-500); box-shadow:2px 2px var(--pink-600); }
.pet-color-buttons { display:flex; gap:7px; }
.pet-color-buttons button { width:25px; height:25px; border:3px solid #fff; border-radius:50%; cursor:pointer; box-shadow:0 0 0 2px var(--plum); }
.pet-color-buttons button.active { outline:3px solid var(--pink-500); outline-offset:2px; }
.pet-color-buttons [data-pet-color="blue"] { background:#8fb9ff; }
.pet-color-buttons [data-pet-color="pink"] { background:#ff8ed0; }
.pet-color-buttons [data-pet-color="green"] { background:#82d787; }
.pet-color-buttons [data-pet-color="gold"] { background:#ffd35e; }
.pet-color-buttons [data-pet-color="purple"] { background:#b68cff; }

.skin-unlock-panel {
  position: fixed;
  z-index: 30;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  display: grid;
  width: 205px;
  gap: 7px;
  padding: 13px;
  text-align: center;
  background: linear-gradient(145deg, #fff8fc, #ffd3e6);
}
.skin-unlock-panel::before { content:"★"; position:absolute; left:-13px; top:-15px; color:#fff; font-size:25px; text-shadow:2px 2px var(--pink-500); }
.unlock-kicker { color:var(--pink-600); font-size:9px; font-weight:900; letter-spacing:1px; }
.skin-unlock-panel strong { color:var(--plum); font-size:15px; }
.unlock-progress { color:#a2547d; font-size:9px; font-weight:800; }
.unlock-progress b { color:var(--pink-600); }
#unlock-all-skins { border:3px solid var(--plum); padding:9px 6px; color:#fff; cursor:pointer; font-size:9px; font-weight:900; background:var(--pink-500); box-shadow:0 4px var(--pink-600); }
#unlock-all-skins:hover:not(:disabled) { filter:brightness(1.08); transform:translateY(-2px); }
#unlock-all-skins:active:not(:disabled) { transform:translateY(3px); box-shadow:0 1px var(--pink-600); }
#unlock-all-skins:disabled { color:#477653; cursor:default; background:#c9f2d3; box-shadow:0 4px #78b587; }

.float-heart { position:absolute; bottom:-40px; color:rgba(255,255,255,.8); text-shadow:2px 2px #e982b3; animation: float-up linear infinite; }
@keyframes float-up { to { transform: translateY(-115vh) rotate(35deg); opacity: 0; } }
@keyframes bob { 50% { transform: translateY(-7px); } }
@keyframes hero-bob { 50% { transform: translate(-50%, -3px); } }

.map-screen { align-content:start; overflow-x:hidden; padding:20px 16px 40px; background:linear-gradient(#bceeff,#e9f9ff); }
.map-header { z-index:2; text-align:center; }
.map-header h2 { margin:4px 0; color:#754465; font-size:clamp(25px,5vw,38px); text-shadow:3px 3px #fff; }
.map-header p:last-child { margin:7px 0 13px; font-size:12px; font-weight:700; }
.level-map { position:relative; width:min(390px,92vw); aspect-ratio:420/650; filter:drop-shadow(9px 12px 0 rgba(93,72,67,.2)); }
.island-map { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.island-shadow { fill:#d88b23; transform:translateY(10px); }
.island { fill:#ffd84f; stroke:#f4b52c; stroke-width:7; }
.map-path-outline,.map-path,.path-dashes { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.map-path-outline { stroke:#1879ac; stroke-width:36; }
.map-path { stroke:#31bfea; stroke-width:27; }
.path-dashes { stroke:#fff; stroke-width:4; stroke-dasharray:14 18; animation:map-dash 1.5s linear infinite; }
@keyframes map-dash { to { stroke-dashoffset:-32; } }
.map-palm { position:absolute; z-index:2; font-size:clamp(24px,8vw,42px); filter:drop-shadow(3px 4px #bf8d24); }
.palm-a{left:22%;top:19%;transform:rotate(-8deg)}.palm-b{right:17%;top:62%;transform:rotate(8deg)}.palm-c{left:22%;top:73%}
.level-node { position:absolute; z-index:4; width:56px; height:56px; border:4px solid #fff; border-radius:50%; color:#fff; cursor:pointer; text-align:center; text-decoration:none; background:#ec5794; box-shadow:0 0 0 4px #8f4a6e,4px 5px 0 rgba(96,51,76,.3); animation:node-pulse 1.4s steps(2) infinite; }
.level-node span { display:block; font-size:20px; font-weight:900; line-height:43px; }
.level-node small { position:absolute; left:50%; top:59px; transform:translateX(-50%); width:104px; padding:4px; border:2px solid #7c526a; color:#754465; font-size:9px; font-weight:900; background:#fff9ed; box-shadow:3px 3px rgba(100,65,83,.2); }
.level-node:hover:not(:disabled) { transform:scale(1.1); filter:brightness(1.1); }
.level-node.locked { color:#836f77; cursor:not-allowed; background:#c8c1b8; box-shadow:0 0 0 4px #8b817b; animation:none; }
.level-node.locked span::after { content:"🔒"; position:absolute; inset:9px 0 auto; font-size:21px; line-height:1; }
.level-node.locked span { color:transparent; }
.level-node.completed { color:#fff; background:#67b87a; box-shadow:0 0 0 4px #397b56,4px 5px rgba(50,90,58,.3); animation:none; }
.level-node.completed span::after { content:"✓"; position:absolute; inset:13px 0 auto; font-size:23px; line-height:1; }
.level-node.completed span { color:transparent; }
@keyframes node-pulse { 50% { transform:translateY(-4px); } }
.level-1{left:17%;top:82%}.level-2{left:50%;top:75%}.level-3{left:68%;top:64%}.level-4{left:64%;top:51%}.level-5{left:39%;top:47%}.level-6{left:17%;top:39%}.level-7{left:32%;top:29%}.level-8{left:65%;top:25%}.level-9{left:62%;top:13%}.level-10{left:31%;top:5%}
.map-slot-1{left:17%;top:82%}.map-slot-2{left:56%;top:68%}.map-slot-3{left:64%;top:48%}.map-slot-4{left:20%;top:34%}.map-slot-5{left:35%;top:10%}
.map-legend { position:absolute; z-index:3; left:50%; bottom:2.5%; transform:translateX(-50%); width:max-content; padding:7px 10px; border:3px solid #8e586d; color:#754465; font-size:9px; font-weight:900; background:#fff9e8; }
.legend-open,.legend-done { display:inline-grid; place-items:center; width:14px; height:14px; margin:0 3px 0 7px; border-radius:50%; color:white; background:#ec5794; }
.legend-done { background:#67b87a; }

#game-screen { align-content: center; background: rgba(255,230,242,.35); }
.game-shell { width: min(1040px, 100%); }
.game-hud { display:flex; align-items:center; gap:10px; margin:0 auto 10px; }
.hud-pill, .hud-icon {
  border: 3px solid var(--plum); padding: 8px 12px; color:var(--plum); font-size:13px; font-weight:800;
  background:#fff8fc; box-shadow:4px 4px 0 rgba(111,53,91,.2);
}
.heart-icon { color:#ec397e; font-size:18px; }
.hud-icon { margin-left:auto; cursor:pointer; }
.canvas-wrap { position:relative; overflow:hidden; width:100%; aspect-ratio:16/9; border:5px solid var(--plum); box-shadow:0 0 0 5px white, 10px 10px 0 rgba(111,53,91,.18); background:#e98cba; }
canvas { display:block; width:100%; height:100%; image-rendering:pixelated; }
.area-title { position:absolute; left:50%; top:28px; transform:translateX(-50%); padding:10px 17px; border:3px solid var(--plum); opacity:0; color:#77365d; font-weight:900; font-size:clamp(11px,2vw,16px); white-space:nowrap; background:#fff8fc; box-shadow:4px 4px rgba(111,53,91,.25); pointer-events:none; }
.area-title.show { animation:title-pop 2.8s steps(8) both; }
@keyframes title-pop { 0%,100%{opacity:0;transform:translate(-50%,-12px)} 12%,78%{opacity:1;transform:translate(-50%,0)} }
.toast { position:absolute; left:50%; top:20%; transform:translate(-50%,-10px); opacity:0; padding:10px 16px; border:3px solid white; color:white; font-weight:900; font-size:clamp(11px,2vw,15px); text-align:center; text-shadow:2px 2px #aa3f73; background:#ea5c9a; box-shadow:4px 4px #9c3768; pointer-events:none; }
.toast.show { animation:toast 2.1s steps(7) both; }
@keyframes toast { 0%,100%{opacity:0;transform:translate(-50%,-10px)} 12%,82%{opacity:1;transform:translate(-50%,0)} }
.dialogue { display:none; position:absolute; z-index:4; left:6%; right:6%; bottom:5%; min-height:90px; padding:17px 45px 14px 88px; font-size:clamp(10px,1.8vw,15px); line-height:1.5; }
.dialogue.open { display:block; animation:dialogue-in .2s steps(3); }
@keyframes dialogue-in { from{transform:scaleY(.2);opacity:0} }
.dialogue-avatar { position:absolute; left:18px; top:14px; width:53px; height:53px; border:3px solid var(--plum); background:#ffd1e4; box-shadow:inset 0 -17px #ee79ad; }
.dialogue-avatar::before { content:""; position:absolute; left:10px; top:17px; width:7px; height:7px; background:var(--plum); box-shadow:22px 0 var(--plum); }
.dialogue-avatar::after { content:"♥"; position:absolute; right:-8px; top:-16px; color:#ec397e; font-size:20px; }
.dialogue p { margin:0; font-weight:800; }
.continue-mark { position:absolute; right:16px; bottom:10px; color:var(--pink-500); animation:bob .8s steps(2) infinite; }
.transition { position:absolute; z-index:8; inset:0; opacity:0; pointer-events:none; background:#fff0f7; }
.transition.flash { animation:flash 1.4s ease-in-out; }
@keyframes flash { 0%{opacity:0} 40%,60%{opacity:1} 100%{opacity:0} }
.mission { margin:15px 0 0; text-align:center; color:#814268; font-size:12px; font-weight:bold; }
.mission span { color:white; }

.touch-controls { display:none; position:relative; width:270px; height:128px; margin:16px auto 0; user-select:none; touch-action:none; }
.dpad, .action-button, .talk-button { position:absolute; border:3px solid var(--plum); color:var(--plum); font-weight:bold; background:#fff4fa; box-shadow:3px 3px #cc70a0; touch-action:none; }
.dpad { width:50px; height:46px; }
.dpad.left{left:7px;top:45px}.dpad.right{left:61px;top:45px}
.action-button { right:7px; top:10px; width:68px; height:68px; border-radius:50%; color:white; font-size:24px; background:var(--pink-500); }
.talk-button { right:80px; top:55px; width:52px; height:52px; border-radius:50%; color:var(--plum); font-size:17px; background:#fff4fa; }
.action-button small, .talk-button small { display:block; font-size:7px; }

.reveal-screen, .success-screen { overflow:hidden; text-align:center; background:radial-gradient(circle at 50% 30%, #fffafd 0 17%, transparent 40%), linear-gradient(160deg,#ffb6d7,#ffe1ed); }
.reveal-card, .success-card { z-index:2; width:min(680px, calc(100vw - 36px)); padding:35px clamp(20px,6vw,55px); }
.ribbon-label { display:inline-block; margin:0 0 18px; padding:7px 12px; color:white; font-size:12px; font-weight:900; background:var(--pink-500); }
.envelope { position:relative; width:90px; height:62px; margin:0 auto 18px; border:4px solid var(--plum); background:#ffd4e7; box-shadow:5px 5px #dc78a8; }
.envelope::before { content:""; position:absolute; inset:0; background:linear-gradient(35deg,transparent 49%,var(--plum) 50% 53%,transparent 54%),linear-gradient(-35deg,transparent 49%,var(--plum) 50% 53%,transparent 54%); }
.envelope span { position:absolute; z-index:2; left:33px; top:23px; width:20px; height:20px; color:white; background:var(--pink-500); }
.question-intro { font-size:13px; }
.reveal-card h2, .success-card h2 { margin:10px 0 18px; color:var(--pink-600); font-size:clamp(27px,6vw,48px); line-height:1.15; text-shadow:3px 3px #ffc6df; }
.reveal-copy { font-family:system-ui,sans-serif; line-height:1.6; color:#7d4968; }
.the-question { margin:20px 0; font-weight:900; }
.answer-buttons { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.answer { min-width:180px; }
.celebration-layer { position:absolute; z-index:3; inset:0; overflow:hidden; pointer-events:none; }
.burst-piece { position:absolute; top:-40px; animation:fall linear forwards; }
@keyframes fall { to { transform:translate(var(--drift),110vh) rotate(var(--spin)); } }
.success-card { position:relative; padding-top:70px; }
.success-card p:not(.eyebrow) { font-family:system-ui,sans-serif; font-size:18px; line-height:1.55; }
.big-heart { position:absolute; left:50%; top:-55px; transform:translateX(-50%) rotate(-4deg); width:110px; height:100px; color:white; font-size:68px; line-height:96px; text-shadow:4px 4px #b93473; border:4px solid var(--plum); background:var(--pink-500); box-shadow:0 0 0 5px white,7px 7px #b86190; animation:heart-beat .8s steps(2) infinite; }
@keyframes heart-beat { 50%{transform:translateX(-50%) scale(1.08) rotate(4deg)} }
.date-plan { margin:26px auto 0; padding:17px; border:3px dashed var(--pink-500); text-align:left; background:#fff4f9; }
.date-plan h3 { margin:0 0 13px; text-align:center; }
.date-plan div { display:grid; grid-template-columns:82px 1fr; gap:10px; padding:10px 0; border-top:2px dotted #f2b2d0; font-family:system-ui,sans-serif; }
.date-plan span { color:var(--pink-600); font-weight:800; }

@media (pointer: coarse), (max-width: 760px) {
  #game-screen { align-content:start; padding:14px 10px; }
  .touch-controls { display:block; }
  .quest-pill { display:none; }
  .game-hud { margin-top:4px; }
  .hud-pill { font-size:11px; }
  .mission { font-size:10px; }
}

@media (max-width: 520px) {
  .start-card { padding:174px 20px 25px; }
  .skin-grid { grid-template-columns:repeat(2,1fr); max-height:310px; }
  .shop-summary { flex-wrap:wrap; }
  .pet-config { gap:8px; }
  #pet-preview { flex-basis:88px; width:88px; height:82px; }
  .pet-mode-buttons button { padding:6px 2px; font-size:7px; }
  .pet-color-buttons { gap:5px; }
  .pet-color-buttons button { width:21px; height:21px; }
  .skin-unlock-panel { top:max(8px, env(safe-area-inset-top)); right:max(8px, env(safe-area-inset-right)); width:150px; gap:4px; padding:8px; }
  .skin-unlock-panel strong { font-size:11px; }
  .unlock-progress, .unlock-kicker, #unlock-all-skins { font-size:7px; }
  #unlock-all-skins { padding:7px 4px; }
  .screen { padding:18px; }
  .dialogue { left:3%; right:3%; bottom:3%; min-height:78px; padding:12px 30px 10px 68px; }
  .dialogue-avatar { left:11px; top:10px; width:44px; height:44px; }
  .dialogue-avatar::before { left:7px; top:14px; box-shadow:18px 0 var(--plum); }
  .reveal-card, .success-card { padding-left:18px; padding-right:18px; }
  .reveal-copy { font-size:14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}