@property --c1 { syntax: '<color>'; inherits: true; initial-value: #3fb5a3; }
@property --c2 { syntax: '<color>'; inherits: true; initial-value: #1f7a76; }

:root {
  --c1: #3fb5a3; --c2: #1f7a76; --n: 3;
  --ink: #10131c; --px: 'Press Start 2P', ui-monospace, monospace;
  transition: --c1 .5s, --c2 .5s;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }

body {
  min-height: 100dvh; display: grid; place-items: center;
  padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  background:
    radial-gradient(520px 380px at 50% 42%, color-mix(in srgb, var(--c1) 30%, transparent), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    linear-gradient(#0d0b1a, #1b1236);
  color: #e9ebf7;
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { width: min(100%, 400px); text-align: center; }

.brand { margin: 0; font: 400 20px/1.3 var(--px); color: #fff; text-shadow: 3px 3px 0 var(--c2); }
.sub { margin: 10px 0 22px; font-size: 14px; color: #a9aec8; }

/* корпус консоли: цвет меняется с уровнем */
.card {
  padding: 16px; border-radius: 40px;
  background: linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -6px 0 rgba(0,0,0,.22), 0 24px 50px -12px rgba(0,0,0,.6);
}

/* экран */
.screen {
  padding: 22px 16px 16px; border-radius: 20px;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px), var(--ink);
  border: 4px solid #07080d;
  box-shadow: inset 0 0 40px rgba(0,0,0,.6), 0 3px 0 rgba(255,255,255,.25);
}
.face {
  width: 120px; height: 120px; margin: 0 auto 14px;
  display: grid; place-items: center; font-size: 84px; line-height: 1;
  filter: drop-shadow(0 0 20px var(--c1));
  animation: bob 1.2s steps(2) infinite;
}
.face img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.face.pop { animation: bob 1.2s steps(2) infinite, pop .4s steps(5); }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes pop { 0% { transform: scale(.4) rotate(-14deg); } 60% { transform: scale(1.2) rotate(6deg); } 100% { transform: none; } }

h2 { margin: 0 0 10px; min-height: 3.4em; font: 400 13px/1.7 var(--px); color: color-mix(in srgb, var(--c1) 45%, #fff); }
#text, #doneText { margin: 0; min-height: 4.4em; font-size: 14px; color: #c9cde4; }
#doneText { min-height: 0; font-size: 15px; }

/* шкала из 6 блоков: тап или протяжка пальцем */
.slider { position: relative; margin-top: 16px; padding: 10px; border-radius: 16px; background: var(--ink); box-shadow: inset 0 3px 8px rgba(0,0,0,.6); }
.slider:focus-within { outline: 3px solid #fff; outline-offset: 3px; }
.slider input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ticks { display: flex; gap: 6px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ticks button {
  --on: clamp(0, calc(var(--n) - var(--i) + 1), 1);
  flex: 1; height: 44px; padding: 0; border: 0; border-radius: 6px; cursor: pointer;
  background: color-mix(in srgb, color-mix(in srgb, var(--c1) 40%, #fff) calc(var(--on) * 100%), #272b3d);
  color: color-mix(in srgb, var(--ink) calc(var(--on) * 100%), #8a90ad);
  font: 400 11px var(--px);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.25);
  transition: background-color .15s, transform .1s;
}
.ticks button.on { transform: translateY(-4px); box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), 0 0 14px var(--c1); }
.ticks button:nth-child(1) { --i: 1; } .ticks button:nth-child(2) { --i: 2; } .ticks button:nth-child(3) { --i: 3; }
.ticks button:nth-child(4) { --i: 4; } .ticks button:nth-child(5) { --i: 5; } .ticks button:nth-child(6) { --i: 6; }

/* кнопка */
.btn {
  display: block; width: 100%; margin-top: 16px; padding: 17px 8px 15px;
  border: 0; border-radius: 16px; background: #ffe66d; color: var(--ink);
  font: 400 12px/1.3 var(--px); cursor: pointer;
  box-shadow: 0 6px 0 #b79a1a, 0 12px 20px rgba(0,0,0,.35);
  transition: transform .08s, box-shadow .08s;
}
.btn:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 #b79a1a; }
.btn:disabled { opacity: .7; cursor: default; }
.btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 3px rgba(255,255,255,.7); }
.btn.ghost:active { transform: scale(.98); box-shadow: inset 0 0 0 3px #fff; }

.err { margin: 14px 0 0; padding: 10px; border-radius: 12px; background: var(--ink); color: #ffb3c4; font-size: 14px; }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.fly { position: fixed; left: 50%; top: 55%; font-size: 30px; pointer-events: none; animation: fly 1.5s ease-out forwards; }
@keyframes fly {
  from { opacity: 1; transform: translate(-50%, -50%) scale(.5); }
  to   { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(1.2); }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* приветственное окно */
.intro {
  width: min(92vw, 380px); padding: 26px 20px 20px; border: 4px solid #07080d; border-radius: 28px;
  text-align: center; color: #e9ebf7;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px), var(--ink);
  box-shadow: 0 0 0 4px var(--c2), 0 30px 60px rgba(0,0,0,.6);
}
.intro:focus { outline: none; }
.intro[open] { animation: introIn .3s steps(5); }
.intro::backdrop { background: rgba(8,6,16,.7); backdrop-filter: blur(4px); }
@keyframes introIn { from { opacity: 0; transform: translateY(20px) scale(.92); } }
.intro .em { font-size: 64px; line-height: 1; filter: drop-shadow(0 0 18px var(--c1)); }
.intro h2 { min-height: 0; margin: 14px 0 10px; font-size: 14px; }
.intro p { margin: 0 0 14px; font-size: 14px; color: #c9cde4; }
.intro ol { margin: 0; padding: 0; list-style: none; text-align: left; counter-reset: s; }
.intro li { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 14px; }
.intro li::before { counter-increment: s; content: counter(s); flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: color-mix(in srgb, var(--c1) 40%, #fff); color: var(--ink); font: 400 11px var(--px); }

main { position: relative; z-index: 1; }

/* приветствие: мелкий шрифт */
.intro { max-height: 92dvh; overflow: auto; }
.intro .fine { margin: 14px 0 0; padding-top: 12px; border-top: 2px dashed #3a4060; font-size: 12px; line-height: 1.5; color: #9aa0bf; text-align: left; }
.intro .fine b { color: #c9cde4; }

/* фон: звёзды и неоновый пол */
body::before { content: ""; position: fixed; left: 0; top: 0; width: 2px; height: 2px; z-index: 0; pointer-events: none; box-shadow: 42vw 20vh rgba(255,255,255,0.85), 84vw 7vh rgba(255,255,255,0.3), 69vw 13vh rgba(255,255,255,0.6), 75vw 8vh rgba(255,255,255,0.45), 5vw 12vh rgba(255,255,255,0.85), 54vw 9vh rgba(255,255,255,0.45), 12vw 55vh rgba(255,255,255,0.3), 73vw 16vh rgba(255,255,255,0.45), 81vw 8vh rgba(255,255,255,0.85), 7vw 29vh rgba(255,255,255,0.3), 72vw 18vh rgba(255,255,255,0.6), 54vw 19vh rgba(255,255,255,0.3), 74vw 40vh rgba(255,255,255,0.45), 14vw 25vh rgba(255,255,255,0.6), 13vw 9vh rgba(255,255,255,0.3), 80vw 27vh rgba(255,255,255,0.85), 88vw 55vh rgba(255,255,255,0.6), 60vw 59vh rgba(255,255,255,0.6), 39vw 32vh rgba(255,255,255,0.45), 90vw 32vh rgba(255,255,255,0.3), 74vw 39vh rgba(255,255,255,0.85), 44vw 58vh rgba(255,255,255,0.6), 78vw 10vh rgba(255,255,255,0.3), 66vw 54vh rgba(255,255,255,0.45), 97vw 44vh rgba(255,255,255,0.45), 63vw 54vh rgba(255,255,255,0.3), 86vw 10vh rgba(255,255,255,0.6), 44vw 45vh rgba(255,255,255,0.85), 75vw 59vh rgba(255,255,255,0.3), 12vw 35vh rgba(255,255,255,0.85), 90vw 9vh rgba(255,255,255,0.3), 94vw 40vh rgba(255,255,255,0.85), 37vw 50vh rgba(255,255,255,0.6), 3vw 60vh rgba(255,255,255,0.6), 22vw 15vh rgba(255,255,255,0.85), 8vw 28vh rgba(255,255,255,0.6), 17vw 32vh rgba(255,255,255,0.85), 51vw 64vh rgba(255,255,255,0.3), 22vw 58vh rgba(255,255,255,0.85), 71vw 36vh rgba(255,255,255,0.45), 56vw 36vh rgba(255,255,255,0.85), 46vw 49vh rgba(255,255,255,0.45), 20vw 11vh rgba(255,255,255,0.45), 20vw 30vh rgba(255,255,255,0.45), 2vw 63vh rgba(255,255,255,0.45), 34vw 37vh rgba(255,255,255,0.3), 19vw 54vh rgba(255,255,255,0.6), 79vw 41vh rgba(255,255,255,0.45), 89vw 66vh rgba(255,255,255,0.3), 59vw 51vh rgba(255,255,255,0.85), 52vw 51vh rgba(255,255,255,0.3), 62vw 52vh rgba(255,255,255,0.3), 25vw 9vh rgba(255,255,255,0.45), 57vw 21vh rgba(255,255,255,0.3), 44vw 7vh rgba(255,255,255,0.3), 1vw 20vh rgba(255,255,255,0.3), 47vw 4vh rgba(255,255,255,0.3), 27vw 49vh rgba(255,255,255,0.45), 82vw 33vh rgba(255,255,255,0.6), 78vw 47vh rgba(255,255,255,0.85); }
.floor {
  position: fixed; left: -50%; right: -50%; bottom: 0; height: 46vh; z-index: 0; pointer-events: none;
  background:
    linear-gradient(var(--c1) 1px, transparent 1px) 0 0 / 100% 36px,
    linear-gradient(90deg, var(--c1) 1px, transparent 1px) 0 0 / 56px 100%;
  opacity: .4; transform: perspective(260px) rotateX(62deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 25%, transparent);
          mask-image: linear-gradient(to top, #000 25%, transparent);
  animation: floor 1.2s linear infinite;
}
@keyframes floor { to { background-position: 0 36px, 0 0; } }