:root {
  --ink: #4a2057;
  --deep: #6a2f86;
  --lilac: #b06cff;
  --pink: #ff2e63;
  --panel: #fff3fb;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  font-family: "DotGothic16", "MS Gothic", "MS PGothic", monospace;
  color: var(--ink);
  background:
    repeating-conic-gradient(rgba(255,255,255,.55) 0% 25%, transparent 0% 50%),
    linear-gradient(155deg, #ffc6e8 0%, #e6b8ff 45%, #b8e8ff 100%);
  background-size: 34px 34px, 100% 100%;
}

img { -webkit-user-drag: none; user-select: none; }

.stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.stars span {
  position: absolute;
  color: rgba(255,255,255,.9);
  text-shadow: 0 0 8px var(--pink), 0 0 14px var(--lilac);
  animation-name: floaty;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes floaty {
  0%   { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-115vh) rotate(360deg); }
}

.wrapper { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 26px 16px 40px; }

.logo { margin: 0; text-align: center; line-height: 0; }
.logo img { width: min(440px, 88vw); height: auto; display: inline-block; }

.tagline {
  margin: 8px 0 0; text-align: center;
  color: var(--deep); font-size: clamp(.82rem, 2.6vw, 1rem);
  letter-spacing: 1px;
}
.tagline b { color: var(--pink); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.window {
  margin-top: 20px;
  background: var(--panel);
  border: 4px solid var(--deep);
  box-shadow: 4px 4px 0 #d8a0e0, 8px 8px 0 rgba(90,40,110,.25);
}

.titlebar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px;
  background: linear-gradient(90deg, #ff4d9d, #9a4dff);
  color: #fff; letter-spacing: 2px; font-size: 1.05rem;
  text-shadow: 2px 2px 0 rgba(0,0,0,.3);
  border-bottom: 4px solid var(--deep);
}
.titlebar .btns { display: flex; gap: 6px; }
.titlebar .btn {
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--deep); font-size: .7rem;
  border: 2px solid; border-color: #fff #7a4a8a #7a4a8a #fff;
}

.window-body { display: flex; gap: 20px; align-items: flex-start; justify-content: center; padding: 16px; flex-wrap: wrap; }

.stage-holder {
  padding: 10px;
  background: linear-gradient(180deg, #f0e0ff, #ddc2ff);
  border: 3px solid; border-color: #fff #7a4a8a #7a4a8a #fff;
}
.stage {
  position: relative; width: min(360px, calc(100vw - 60px));
  aspect-ratio: 767 / 1116;
  background:
    radial-gradient(circle at 50% 18%, #fff7fc, transparent 55%),
    linear-gradient(180deg, #ffe4f4, #ffc4e6 60%, #ff9fd0);
  border: 3px solid #fff; outline: 3px solid var(--lilac);
  box-shadow: 0 10px 24px rgba(122,63,160,.3);
  overflow: hidden;
}
.layer { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; image-rendering: pixelated; }
.layer.base { display: block; }
.layer.corpo { z-index: 10; }
.layer.top.item-2 { z-index: 20; }
.layer.sapato { z-index: 30; }
.layer.saia { z-index: 40; }
.layer.top { z-index: 50; }
.layer.cabeca { z-index: 60; }
.layer.cabelo { z-index: 70; }
.layer.acessorio { z-index: 80; }

.hint { margin: 10px 0 0; text-align: center; color: var(--deep); font-size: .8rem; letter-spacing: 1px; }

.panels { flex: 1 1 460px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; }
.panel {
  background: var(--panel); border: 3px solid; border-color: #fff #9a5ab0 #9a5ab0 #fff;
  padding: 8px; margin: 0;
}
.panel legend {
  padding: 4px 12px; background: linear-gradient(90deg, #ff4d9d, #9a4dff);
  color: #fff; letter-spacing: 1px;
  border: 2px solid; border-color: #ffd0ea #5a2a70 #5a2a70 #ffd0ea;
}
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; padding-top: 10px; }
.thumb {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 92px; padding: 4px; cursor: pointer;
  background: #fff; border: 3px solid; border-color: #fff #b78cff #b78cff #fff;
  box-shadow: 3px 3px 0 rgba(90,40,110,.16);
  transition: transform .1s steps(2), box-shadow .1s steps(2);
}
.thumb:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 rgba(90,40,110,.25); }
.thumb input { position: absolute; opacity: 0; pointer-events: none; }
.thumb img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  background: repeating-conic-gradient(#f4e9f3 0% 25%, #fff 0% 50%);
  background-size: 12px 12px;
  image-rendering: pixelated;
}
.thumb:has(input:checked) {
  border-color: var(--pink); outline: 3px solid var(--lilac);
  box-shadow: inset 3px 3px 0 rgba(90,40,110,.2);
}
.thumb:has(input:checked)::after {
  content: "\2713"; position: absolute; top: -12px; right: -10px;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #5bff9c, #2ecc71); color: #fff;
  font-size: 15px; font-weight: 900;
  border: 3px solid #fff; box-shadow: 2px 2px 0 #1a7a45;
}
.thumb:has(input:focus-visible) { outline: 3px dashed #00a2ff; outline-offset: 2px; }
.thumb-none { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #c96; }
.thumb-none b { font-size: 1.7rem; line-height: 1; }
.thumb-none small { font-size: .6rem; letter-spacing: 1px; }

.ticker { margin: 22px 0 0; text-align: center; color: var(--deep); font-size: .8rem; letter-spacing: 2px; }
.ticker span { animation: blink 1.4s steps(2) infinite; }

@media (max-width: 740px) {
  .window-body { flex-direction: column; align-items: center; }
  .stage { width: min(340px, calc(100vw - 60px)); }
  .panels { width: 100%; }
}

.game:has(#sapato-1:checked) .layer.sapato.item-1 { display:block; }
.game:has(#sapato-2:checked) .layer.sapato.item-2 { display:block; }
.game:has(#sapato-3:checked) .layer.sapato.item-3 { display:block; }
.game:has(#sapato-4:checked) .layer.sapato.item-4 { display:block; }
.game:has(#sapato-5:checked) .layer.sapato.item-5 { display:block; }
.game:has(#sapato-6:checked) .layer.sapato.item-6 { display:block; }
.game:has(#sapato-7:checked) .layer.sapato.item-7 { display:block; }
.game:has(#saia-1:checked) .layer.saia.item-1 { display:block; }
.game:has(#saia-3:checked) .layer.saia.item-3 { display:block; }
.game:has(#saia-4:checked) .layer.saia.item-4 { display:block; }
.game:has(#saia-5:checked) .layer.saia.item-5 { display:block; }
.game:has(#saia-6:checked) .layer.saia.item-6 { display:block; }
.game:has(#saia-7:checked) .layer.saia.item-7 { display:block; }
.game:has(#top-1:checked) .layer.top.item-1 { display:block; }
.game:has(#top-2:checked) .layer.top.item-2 { display:block; }
.game:has(#top-3:checked) .layer.top.item-3 { display:block; }
.game:has(#top-4:checked) .layer.top.item-4 { display:block; }
.game:has(#top-5:checked) .layer.top.item-5 { display:block; }
.game:has(#top-6:checked) .layer.top.item-6 { display:block; }
.game:has(#top-7:checked) .layer.top.item-7 { display:block; }
.game:has(#cabelo-1:checked) .layer.cabelo.item-1 { display:block; }
.game:has(#cabelo-2:checked) .layer.cabelo.item-2 { display:block; }
.game:has(#cabelo-3:checked) .layer.cabelo.item-3 { display:block; }
.game:has(#cabelo-4:checked) .layer.cabelo.item-4 { display:block; }
.game:has(#cabelo-5:checked) .layer.cabelo.item-5 { display:block; }
.game:has(#cabelo-7:checked) .layer.cabelo.item-7 { display:block; }
.game:has(#cabelo-8:checked) .layer.cabelo.item-8 { display:block; }
.game:has(#acessorio-1:checked) .layer.acessorio.item-1 { display:block; }
.game:has(#acessorio-2:checked) .layer.acessorio.item-2 { display:block; }
.game:has(#acessorio-4:checked) .layer.acessorio.item-4 { display:block; }
.game:has(#acessorio-6:checked) .layer.acessorio.item-6 { display:block; }
.game:has(#acessorio-7:checked) .layer.acessorio.item-7 { display:block; }
.game:has(#cabelo-0:checked) .layer.cabeca { display:block; }