:root{
  --blue:#bfe3f7;
  --pink:#fbc8dd;
  --violet:#d9c9f5;
  --yellow:#fdeeb8;
  --ink:#4a4160;
  --card:#ffffffcc;
  --radius:26px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  color:var(--ink);
  background:linear-gradient(135deg,var(--blue) 0%,var(--pink) 34%,var(--violet) 68%,var(--yellow) 100%);
  background-attachment:fixed;
  min-height:100vh;
  line-height:1.6;
  overflow-x:hidden;
}
.bg-decor{position:fixed;inset:0;z-index:0;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:float 12s ease-in-out infinite}
.b1{width:280px;height:280px;background:var(--pink);top:-60px;left:-60px}
.b2{width:320px;height:320px;background:var(--blue);top:30%;right:-90px;animation-delay:-3s}
.b3{width:260px;height:260px;background:var(--yellow);bottom:8%;left:-70px;animation-delay:-6s}
.b4{width:300px;height:300px;background:var(--violet);bottom:-80px;right:15%;animation-delay:-9s}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-40px) scale(1.08)}}

.hero{position:relative;z-index:1;text-align:center;padding:56px 20px 28px}
.avatar{
  width:110px;height:110px;margin:0 auto 16px;border-radius:50%;
  background:conic-gradient(from 210deg,var(--pink),var(--violet),var(--blue),var(--yellow),var(--pink));
  display:flex;align-items:center;justify-content:center;
  font-size:52px;font-weight:800;color:#fff;
  box-shadow:0 10px 30px #7a6fae55;border:5px solid #ffffffaa;
  animation:bob 4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
h1{font-size:clamp(1.9rem,5vw,3rem);letter-spacing:.5px}
.name{background:linear-gradient(90deg,#e56aa8,#8f7bd8,#5aa9d6);-webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{margin-top:8px;font-size:1.1rem;opacity:.85}
.nav{margin-top:22px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.nav a{
  text-decoration:none;color:var(--ink);background:#ffffffcc;
  padding:9px 18px;border-radius:999px;font-weight:600;font-size:.95rem;
  border:2px solid #fff;box-shadow:0 4px 14px #00000012;transition:.2s;
}
.nav a:hover{transform:translateY(-3px);background:#fff}

main{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:10px 20px 40px;display:flex;flex-direction:column;gap:26px}
.card{
  background:var(--card);backdrop-filter:blur(10px);
  border:2px solid #ffffffcc;border-radius:var(--radius);
  padding:30px 30px 34px;box-shadow:0 14px 40px #3f3a5a1a;
}
.card h2{font-size:1.6rem;margin-bottom:14px}
.card h3{margin-bottom:6px}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.chip{padding:7px 16px;border-radius:999px;font-weight:700;font-size:.92rem;color:#4a4160;border:2px solid #fff}
.chip.pink{background:var(--pink)}.chip.blue{background:var(--blue)}
.chip.violet{background:var(--violet)}.chip.yellow{background:var(--yellow)}

/* ---- Обо мне: текст + иллюстрация ---- */
.about-row{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.about-text{flex:1 1 320px}
.hero-illu{flex:0 1 260px;width:100%;max-width:300px;filter:drop-shadow(0 8px 18px #0002);animation:bob 5s ease-in-out infinite}

/* ---- Любимые предметы ---- */
.section-sub{opacity:.8;margin-bottom:16px}
.subjects{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.subject{
  background:#ffffff99;border:2px solid #fff;border-radius:20px;
  padding:22px;text-align:center;transition:.25s;
}
.subject:hover{transform:translateY(-6px);box-shadow:0 14px 28px #0002}
.subject svg{margin-bottom:8px;filter:drop-shadow(0 6px 12px #0002)}
.s-history{background:linear-gradient(160deg,#ffffffcc,var(--pink))}
.s-lit{background:linear-gradient(160deg,#ffffffcc,var(--violet))}
.s-volley{background:linear-gradient(160deg,#ffffffcc,var(--blue))}
.s-music{background:linear-gradient(160deg,#ffffffcc,var(--yellow))}

/* ---- Обложки-иллюстрации ---- */
.book-illu{width:150px;height:200px;flex-shrink:0;filter:drop-shadow(0 12px 22px #0003);transition:.25s}
.book-illu:hover{transform:rotate(-3deg) scale(1.03)}
.film-illu{width:160px;height:110px;margin:0 auto 12px;display:block;filter:drop-shadow(0 8px 16px #0002)}

.feature{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.feature-cover{
  width:130px;height:185px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:64px;font-weight:800;color:#fff;
  box-shadow:0 12px 26px #0003;border:3px solid #fff;
}
.cover-book{background:linear-gradient(160deg,#f7b8d0,#c3a7ea 55%,#9fd0f0)}
.quote{margin-top:10px;font-style:italic;background:var(--yellow);display:inline-block;padding:8px 14px;border-radius:14px}

.films{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.film{background:#ffffff99;border:2px solid #fff;border-radius:20px;padding:18px;text-align:center;transition:.25s}
.film:hover{transform:translateY(-6px);box-shadow:0 14px 28px #0002}
.film-cover{
  width:90px;height:130px;margin:0 auto 12px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:44px;font-weight:800;color:#fff;border:3px solid #fff;
  box-shadow:0 8px 18px #0003;
}
.f-hobbit{background:linear-gradient(160deg,#8ec9a0,#5aa9d6)}
.f-lotr{background:linear-gradient(160deg,#c9a86a,#8f7bd8)}

/* ---- Game ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
.stat{background:#fff;border:2px solid #fff;border-radius:16px;padding:10px;text-align:center;box-shadow:0 5px 14px #00000010}
.stat span{display:block;font-size:.8rem;opacity:.7;text-transform:uppercase;letter-spacing:1px}
.stat b{font-size:1.5rem}
.stat#best{}
.game-area{text-align:center}
.word-display{
  font-size:clamp(1.5rem,4vw,2.3rem);font-weight:700;letter-spacing:2px;
  background:var(--violet);border-radius:18px;padding:18px;margin-bottom:16px;
  min-height:70px;display:flex;align-items:center;justify-content:center;
  word-break:break-word;transition:.2s;
}
.word-display.done{background:var(--yellow)}
.word-display .ok{color:#2f9e5f}
.word-display .rest{color:#4a4160}
.word-display.shake{background:var(--pink);animation:shake .3s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.game-error{margin-top:12px;background:var(--yellow);border:2px dashed #e0a94a;border-radius:14px;padding:10px 14px;font-weight:600}
#typingInput{
  width:min(420px,90%);padding:14px 18px;font-size:1.25rem;text-align:center;
  border-radius:16px;border:3px solid var(--violet);outline:none;background:#fff;
}
#typingInput:focus{border-color:#e56aa8;box-shadow:0 0 0 4px #e56aa833}
#typingInput:disabled{background:#f2f2f7;color:#999}
.progress{width:min(420px,90%);height:10px;background:#ffffffcc;border-radius:999px;margin:16px auto 0;overflow:hidden;border:1px solid #fff}
.progress-bar{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--pink),var(--violet),var(--blue));transition:width .15s}
.controls{margin-top:16px;display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}
.btn{
  background:linear-gradient(90deg,#e56aa8,#8f7bd8);color:#fff;border:none;
  padding:13px 34px;font-size:1.1rem;font-weight:700;border-radius:999px;
  cursor:pointer;box-shadow:0 8px 20px #8f7bd866;transition:.2s;
}
.btn:hover{transform:translateY(-3px);filter:brightness(1.05)}
.btn:active{transform:translateY(0)}
.hint{opacity:.75;font-size:.95rem}
.wordlist{margin-top:22px;background:#fff9;border-radius:18px;padding:16px 18px;border:2px dashed var(--violet)}
.wordlist .label{font-weight:700;font-size:.9rem;opacity:.8}
#wordChips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#wordChips span{background:var(--blue);padding:5px 12px;border-radius:999px;font-size:.88rem;border:1.5px solid #fff}

.footer{position:relative;z-index:1;text-align:center;padding:18px;font-weight:600;opacity:.85}

@media (max-width:560px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .card{padding:22px 18px 26px}
  .feature{justify-content:center;text-align:center}
  .hero-illu{max-width:220px;margin:0 auto}
}