/* Lletres del joc, servides des d'aquí mateix (sense connectar-se a Google).
   Són fonts variables: un sol fitxer per a tots els gruixos. Llicència: fonts/LICENSE.md */
@font-face {
  font-family: 'Fredoka';
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/fredoka-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lletres d'Europa central, per exemple les del polonès (ą, ł, ś...) */
@font-face {
  font-family: 'Fredoka';
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/fredoka-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* La Fredoka no té lletres ciríl·liques: per al rus es fa servir la Nunito, que s'hi assembla. */
@font-face {
  font-family: 'Nunito';
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/nunito-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --bg: #12152b;
  --panel: #1d2142;
  --panel-2: #2a2f5a;
  --text: #f4f5ff;
  --muted: #9aa0c7;
  --accent: #ffd43b;
  --danger: #fa5252;
  --good: #51cf66;

  /* Un color per a cada dit: el mateix a les lletres que cauen, al teclat i a les mans. */
  --lp: #ff6b6b;
  --lr: #ff9f43;
  --lm: #ffd43b;
  --li: #51cf66;
  --ri: #339af0;
  --rm: #9775fa;
  --rr: #f783ac;
  --rp: #20c9a6;
  --thumb: #adb5bd;

  --key: clamp(26px, 4.4vw, 50px);

  font-family: 'Fredoka', 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
}

.f-lp { --c: var(--lp); }
.f-lr { --c: var(--lr); }
.f-lm { --c: var(--lm); }
.f-li { --c: var(--li); }
.f-ri { --c: var(--ri); }
.f-rm { --c: var(--rm); }
.f-rr { --c: var(--rr); }
.f-rp { --c: var(--rp); }
.f-lt, .f-rt { --c: var(--thumb); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

.hidden { display: none !important; }

/* --- Estructura --- */

#app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
}

#hud {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 3vw, 2rem);
  padding: .4rem 1rem;
  background: var(--panel);
}

.hud-player {
  margin-right: auto;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--accent);
}

.hud-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hud-label {
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.hud-value {
  font-size: 1.4rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mult {
  margin-left: .3em;
  padding: 0 .4em;
  border-radius: 999px;
  background: var(--accent);
  color: #222;
  font-size: .8rem;
  vertical-align: middle;
}

.heart { color: var(--danger); }
.heart.lost { opacity: .2; filter: grayscale(1); }

.icon-btn {
  border: 0;
  background: none;
  font-size: 1.4rem;
  cursor: pointer;
}

/* --- Camp de joc --- */

#field {
  position: relative;
  overflow: hidden;
  background: linear-gradient(#141838, #262b66 70%, #353a85);
}

/* Pluja de fons. La capa és més gran que el camp i llisca sencera: la targeta gràfica la mou
   sense haver de tornar-la a dibuixar a cada imatge. */
#field::before {
  content: '';
  position: absolute;
  inset: -200px -40px 0 0;
  background-image: repeating-linear-gradient(100deg, transparent 0 46px, rgba(255, 255, 255, .05) 46px 47px);
  background-size: 200px 200px;
  animation: rain 1.2s linear infinite;
  pointer-events: none;
  will-change: translate;
}

@keyframes rain { to { translate: -40px 200px; } }

#field.hurt { animation: hurt .4s; }
#field.shake { animation: shake .2s; }

@keyframes hurt {
  0%, 100% { box-shadow: inset 0 0 0 0 transparent; }
  30% { box-shadow: inset 0 -40px 60px -10px var(--danger); }
}

@keyframes shake {
  25% { translate: -4px 0; }
  75% { translate: 4px 0; }
}

#items {
  position: absolute;
  inset: 0;
}

#ground {
  height: 12px;
  background: linear-gradient(#69db7c, #2b8a3e);
}

.drop {
  position: absolute;
  left: 0;
  top: 0;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .55) 0 10%, transparent 11%),
    var(--c);
  box-shadow: 0 0 18px color-mix(in srgb, var(--c) 60%, transparent), inset 0 -6px 0 rgba(0, 0, 0, .15);
  color: #1b1e33;
  font-size: 2.2rem;
  font-weight: 700;
  text-transform: uppercase;
  will-change: translate;
}

.pop { animation: pop .3s forwards; }
.splash { animation: splash .4s forwards; transform-origin: bottom; }

@keyframes pop { to { scale: 1.8; opacity: 0; } }
@keyframes splash { to { scale: 1.8 .2; opacity: 0; } }

.popup {
  position: absolute;
  translate: -50% -50%;
  color: var(--accent);
  font-size: 1.5rem;
  font-weight: 700;
  pointer-events: none;
  animation: rise .8s ease-out forwards;
}

.popup.bonus { font-size: 2rem; }

.popup.big {
  z-index: 2;
  color: var(--text);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  white-space: nowrap;
  text-shadow: 0 4px 20px rgba(0, 0, 0, .6);
  animation-duration: 1.8s;
}

@keyframes rise { to { translate: -50% -150%; opacity: 0; } }

/* Pluja de paraules */

.word {
  position: absolute;
  left: 0;
  top: 0;
  padding: .15em .6em;
  border-radius: 999px;
  background: #f4f5ff;
  box-shadow: 0 0 18px rgba(255, 255, 255, .25), inset 0 -5px 0 rgba(0, 0, 0, .12);
  color: #1b1e33;
  font-size: 2rem;
  font-weight: 700;
  white-space: nowrap;
  will-change: translate;
}

.word span { transition: opacity .15s; }
.word span.typed { opacity: .25; }
.word.active { outline: 4px solid var(--accent); }

/* Nau alienígena */

.alien {
  position: absolute;
  left: 0;
  top: 0;
  width: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: translate;
}

.alien svg {
  width: 160px;
  height: auto;
  filter: drop-shadow(0 0 14px rgba(105, 219, 124, .45));
}

.alien.hit svg { animation: hit-flash .15s; }

@keyframes hit-flash { 50% { filter: brightness(2.5) drop-shadow(0 0 20px #fff); } }

.lights circle {
  fill: var(--accent);
  animation: blink .8s steps(1) infinite alternate;
}

.lights circle:nth-child(even) { animation-delay: .4s; }

@keyframes blink { to { fill: #ff6b6b; } }

.hp {
  width: 130px;
  height: 10px;
  margin-bottom: 4px;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(0, 0, 0, .4);
}

.hp-fill {
  height: 100%;
  background: var(--good);
  transform-origin: left;
  transition: scale .2s;
}

.alien-letters {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.alien-letters span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, .15);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
}

.alien-letters span.next {
  width: 56px;
  height: 56px;
  background: var(--c);
  box-shadow: 0 0 16px var(--c);
  color: #1b1e33;
  font-size: 2.2rem;
}

.alien.leaving, .cannon.leaving { animation: fade-out .6s forwards; }
.alien.boom { animation: boom .6s forwards; }

@keyframes fade-out { to { opacity: 0; } }
@keyframes boom { to { scale: 1.8; opacity: 0; filter: brightness(3); } }

.cannon {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 70px;
  height: 56px;
  translate: -50% 0;
}

.turret {
  position: absolute;
  bottom: 0;
  left: 5px;
  width: 60px;
  height: 30px;
  border-radius: 30px 30px 0 0;
  background: linear-gradient(#74c0fc, #1c7ed6);
}

.barrel {
  position: absolute;
  bottom: 16px;
  left: 29px;
  width: 12px;
  height: 40px;
  border-radius: 6px;
  background: #ced4da;
  transform-origin: 50% 100%;
  transition: rotate .1s;
}

.laser {
  position: absolute;
  height: 6px;
  margin-top: -3px;
  border-radius: 3px;
  background: var(--c);
  box-shadow: 0 0 12px var(--c);
  transform-origin: 0 50%;
  pointer-events: none;
  animation: laser .25s forwards;
}

@keyframes laser { to { opacity: 0; } }

/* Star Wars */

#field.space { background: radial-gradient(ellipse at 50% 120%, #1b1f4a, #05060f 70%); }

/* Estrelles que passen en lloc de pluja */
#field.space::before {
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 90px 120px, #fff, transparent),
    radial-gradient(2px 2px at 150px 60px, #cfe3ff, transparent),
    radial-gradient(1px 1px at 60px 170px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 180px 190px, #ffe8cc, transparent);
  background-size: 200px 200px;
  opacity: .8;
  animation: stars 8s linear infinite;
}

@keyframes stars { to { translate: 0 200px; } }

.starship {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: translate;
}

.starship svg {
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 10px rgba(173, 181, 189, .35));
}

.starship .word {
  position: static;
  margin-top: 4px;
  font-size: 1.7rem;
}

.starship .word span.gap { margin-left: .45em; }

.ship-name {
  margin-top: 2px;
  color: var(--muted);
  font-size: .8rem;
  white-space: nowrap;
}

.starship.deathstar svg { filter: drop-shadow(0 0 24px rgba(255, 255, 255, .2)); }

.superlaser {
  fill: #69db7c;
  animation: superlaser 1.2s steps(3) infinite alternate;
}

@keyframes superlaser { to { fill: #d3f9d8; r: 7; } }

.engines circle {
  fill: #74c0fc;
  filter: drop-shadow(0 0 4px #74c0fc);
}

.xwing .engines circle {
  fill: #ff922b;
  filter: drop-shadow(0 0 5px #ff922b);
  animation: engine .3s steps(1) infinite alternate;
}

@keyframes engine { to { fill: #ffd43b; } }

.starship.boom, .starship.splash { animation: boom .6s forwards; }
.starship.leaving, .xwing.leaving { animation: fade-out .5s forwards; }

.xwing {
  position: absolute;
  left: -70px;
  bottom: 4px;
  width: 140px;
  will-change: translate;
}

.xwing svg { display: block; width: 100%; height: auto; }

.laser.red {
  height: 5px;
  background: #ff4d4d;
  box-shadow: 0 0 10px #ff4d4d, 0 0 3px #fff;
}

.spark {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--c);
  pointer-events: none;
  animation: spark .5s ease-out forwards;
}

@keyframes spark { to { translate: var(--dx) var(--dy); scale: .3; opacity: 0; } }

#banner {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
  opacity: 0;
}

#banner.show { animation: banner 2.4s ease forwards; }

@keyframes banner {
  0% { opacity: 0; scale: .8; }
  12% { opacity: 1; scale: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

#banner-title {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  text-shadow: 0 4px 20px rgba(0, 0, 0, .5);
}

#banner-sub {
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  color: var(--accent);
}

/* --- Teclat i mans --- */

#trainer {
  padding: .7rem 1rem .3rem;
  background: var(--panel);
}

.trainer-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(.5rem, 2vw, 1.5rem);
}

#keyboard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.kb-row { display: flex; gap: 4px; }
.row-0 { margin-left: calc(var(--key) * .3); }
.row-1 { margin-left: calc(var(--key) * .55); }

.key {
  position: relative;
  width: var(--key);
  height: var(--key);
  display: grid;
  place-items: center;
  border-radius: 8px;
  border-bottom: 3px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: var(--panel-2);
  color: #5d628f;
  font-size: calc(var(--key) * .42);
  font-weight: 600;
  text-transform: uppercase;
  transition: background .15s, color .15s, scale .15s;
}

.key.enabled {
  background: color-mix(in srgb, var(--c) 30%, var(--panel-2));
  color: var(--text);
}

.key.target {
  background: var(--c);
  color: #1b1e33;
  scale: 1.12;
  box-shadow: 0 0 16px var(--c);
  z-index: 1;
}

.key.new { outline: 3px dashed var(--accent); outline-offset: 2px; }
.key.ok { background: var(--good); color: #1b1e33; }
.key.wrong { background: var(--danger); color: #fff; animation: shake .2s; }

/* La ratlleta de la F i la J */
.key.bump::after {
  content: '';
  position: absolute;
  bottom: 16%;
  width: 30%;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: .7;
}

.hand {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: calc(var(--key) * 2.4);
}

.finger {
  width: calc(var(--key) * .42);
  border-radius: 999px 999px 6px 6px;
  background: color-mix(in srgb, var(--c) 25%, var(--panel-2));
  transition: background .15s, box-shadow .15s, scale .15s;
}

.finger.pinky { height: 58%; }
.finger.ring { height: 82%; }
.finger.middle { height: 95%; }
.finger.index { height: 84%; }
.finger.thumb { height: 42%; }
.hand.left .thumb { rotate: 28deg; transform-origin: bottom; }
.hand.right .thumb { rotate: -28deg; transform-origin: bottom; }

.finger.active {
  background: var(--c);
  box-shadow: 0 0 14px var(--c);
  scale: 1.1;
}

#finger-hint {
  min-height: 1.8em;
  padding: .3rem 0 .2rem;
  text-align: center;
  color: var(--muted);
  font-size: 1.05rem;
}

#finger-hint strong { color: var(--c); }

@media (max-width: 760px) {
  .hand { display: none; }
}

/* --- Efectes lleugers (vegeu quality.js) --- */

.lite .drop { box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .15); }
.lite .word { box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .12); }
.lite .alien svg,
.lite .starship svg,
.lite .starship.deathstar svg,
.lite .engines circle,
.lite .xwing .engines circle { filter: none; }
.lite .lights circle,
.lite .superlaser,
.lite .xwing .engines circle,
.lite .alien.hit svg { animation: none; }
.lite .alien.boom,
.lite .starship.boom,
.lite .starship.splash { animation: fade-out .4s forwards; }
.lite .laser,
.lite .key.target,
.lite .finger.active,
.lite .alien-letters span.next { box-shadow: none; }
.lite .popup.big { text-shadow: none; }
.lite .overlay { backdrop-filter: none; background: rgba(10, 12, 30, .9); }

/* --- Finestres (inici, pausa, fi) --- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  padding: 16px;
  overflow-y: auto;
  background: rgba(10, 12, 30, .75);
  backdrop-filter: blur(4px);
}

.panel {
  width: min(100%, 500px);
  margin: auto;
  padding: 1.6rem 2rem;
  border-radius: 24px;
  background: var(--panel);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  text-align: center;
}

h1 {
  margin: 0;
  font-size: clamp(2.5rem, 9vw, 3.5rem);
}

h1 span { color: var(--accent); }

h2 {
  margin: .2rem 0 1rem;
  font-size: 1.6rem;
}

.tagline {
  margin: .3rem 0 1.5rem;
  color: var(--muted);
  font-size: 1.15rem;
}

.tip {
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: .95rem;
}

#name-form {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

#name-input {
  padding: .6rem 1rem;
  border: 3px solid var(--panel-2);
  border-radius: 14px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 1.5rem;
  text-align: center;
  outline: none;
}

#name-input:focus { border-color: var(--accent); }

button {
  padding: .6rem 1.2rem;
  border: 0;
  border-radius: 14px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
}

button:hover { filter: brightness(1.15); }

/* Qui navega amb el tabulador ha de veure on és. */
button:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

button.primary {
  background: var(--accent);
  color: #222;
}

button.big { font-size: 1.5rem; }

.buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.5rem;
}

.buttons.menu {
  flex-direction: column;
  align-items: stretch;
  max-width: 320px;
  margin-inline: auto;
}

.buttons.menu button {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.buttons.menu kbd { margin-left: auto; }

.pause-help { display: block; margin-top: 1rem; }

/* --- Avís sense teclat i finestra «Sobre el joc» --- */

.notice {
  margin: 0 0 1rem;
  padding: .6rem .9rem;
  border-radius: 12px;
  background: rgba(255, 212, 59, .12);
  color: var(--accent);
}

button.link {
  margin-top: .8rem;
  padding: .2rem .4rem;
  background: none;
  color: var(--muted);
  font-size: .9rem;
  text-decoration: underline;
}

button.link:hover { color: var(--text); }

.panel.about { text-align: left; }
.panel.about h2 { text-align: center; }

.panel.about h3 {
  margin: 1.2rem 0 .3rem;
  color: var(--accent);
  font-size: 1.05rem;
}

.panel.about p {
  margin: .4rem 0;
  line-height: 1.45;
}

.panel.about a { color: var(--accent); }

#btn-erase {
  margin-top: .4rem;
  font-size: .9rem;
}

kbd {
  padding: 0 .35em;
  border-radius: 5px;
  background: rgba(0, 0, 0, .2);
  font: inherit;
  font-size: .8em;
}

/* Opcions de la pantalla d'inici */

.setting {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}

.setting-label {
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.setting-help {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}

#language-select {
  padding: .45rem .8rem;
  border: 2px solid var(--panel-2);
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.choice {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem;
}

.choice button {
  min-width: 5.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .4rem .6rem;
  border: 2px solid transparent;
  font-size: .95rem;
}

.choice-icon { font-size: 1.5rem; }

.choice button.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 20%, var(--panel-2));
}

.stepper {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.stepper button {
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  font-size: 1.5rem;
}

.stepper button:disabled { opacity: .3; cursor: default; }

#level-value {
  min-width: 2ch;
  font-size: 1.8rem;
  font-weight: 700;
}

#level-letters {
  max-width: 22rem;
  letter-spacing: .04em;
}

.record-line {
  margin: .4rem 0 0;
  color: var(--accent);
  font-weight: 600;
}

#record-msg { margin: -.8rem 0 1rem; }
#record-msg.new { font-size: 1.4rem; }

/* Rànquing */

#ranking h3 { margin: 1.5rem 0 0; }

#ranking table {
  width: 100%;
  margin-top: .5rem;
  border-collapse: collapse;
  font-size: 1.05rem;
}

#ranking th {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 400;
  text-transform: uppercase;
}

#ranking th, #ranking td { padding: .25rem .4rem; }
#ranking td:nth-child(2) { text-align: left; }
#ranking th:nth-child(2) { text-align: left; }
#ranking tr.me td { color: var(--accent); font-weight: 600; }

#stats {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .4rem 1.5rem;
  margin: 0;
  text-align: left;
  font-size: 1.15rem;
}

#stats dt { color: var(--muted); }
#stats dd { margin: 0; font-weight: 600; text-align: right; }

/* Camp invisible que rep les tecles */
#typer {
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}