/* public/assets/dits.css — I7-B-dits (brief §12.3). Estils de la targeta #dits-card,
 * de l'overlay propi i dels onze jocs motrius. Autocontingut: no depèn de cap
 * variable d'altres carrils. Accessibilitat: focus visible a tot element actiu. */

/* ---------- targeta ---------- */
.dits-card { margin-top: 12px; }
.dits-card .dits-text { margin: 6px 0 10px; color: #555; }
.dits-boto-escalfa { font-size: 1.05rem; }
.dits-subtitol { margin: 14px 0 6px; font-size: 1rem; color: #444; }
.dits-llista-jocs { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dits-joc { display: flex; align-items: center; gap: 6px; }
.dits-assolit { font-size: .8rem; color: #2e7d32; background: #e8f5e9; border-radius: 10px; padding: 2px 8px; }
.dits-boto-corba { margin-top: 4px; }
.dits-missatge { margin-top: 10px; padding: 8px 10px; background: #f3f7ff; border-radius: 8px; color: #333; }

/* ---------- overlay ---------- */
.dits-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(20, 24, 34, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.dits-caixa {
  background: #fff; color: #222; border-radius: 14px;
  max-width: 760px; width: 100%; max-height: 92vh; overflow-y: auto;
  padding: 16px 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}
.dits-cap { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.dits-titol { margin: 0; font-size: 1.15rem; flex: 1; }
.dits-compte { font-variant-numeric: tabular-nums; color: #555; white-space: nowrap; }
.dits-instruccio { margin: 4px 0 10px; color: #555; }

/* ---------- escenari comú ---------- */
.dits-escenari { position: relative; }
.dits-stage {
  position: relative; height: 340px; overflow: hidden;
  background: #fbfcfe; border: 1px solid #dde3ee; border-radius: 10px;
  touch-action: none;
}

/* ---------- M1/M5 traca ---------- */
.dits-traca-zona { position: absolute; inset: 0; cursor: crosshair; }
.dits-papallona, .dits-punt-gat {
  position: absolute; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; line-height: 1; user-select: none;
}
.dits-papallona[data-tocat], .dits-punt-gat[data-tocat] {
  filter: drop-shadow(0 0 6px #7cb342); transform: scale(1.15);
}
.dits-es-mou { animation: dits-vola 2.6s ease-in-out infinite alternate; }
@keyframes dits-vola {
  from { margin-left: -14px; margin-top: -8px; }
  to { margin-left: 14px; margin-top: 8px; }
}
.dits-cami-ruta { position: absolute; inset: 0; pointer-events: none; }
.dits-cami-recta .dits-cami-ruta {
  top: 50%; height: var(--amplada-cami, 40px); transform: translateY(-50%);
  background: #e3edff; border-radius: 999px;
}
.dits-cami-corba .dits-cami-ruta {
  top: 28%; height: var(--amplada-cami, 40px);
  background: #e3edff; border-radius: 999px 999px 0 0 / 180px 180px 0 0;
}
.dits-cami-laberint .dits-cami-ruta {
  inset: 8%;
  background:
    linear-gradient(#e3edff, #e3edff) top left / 60% var(--amplada-cami, 40px) no-repeat,
    linear-gradient(#e3edff, #e3edff) center right / 60% var(--amplada-cami, 40px) no-repeat,
    linear-gradient(#e3edff, #e3edff) bottom left / 60% var(--amplada-cami, 40px) no-repeat;
}

/* ---------- M2 clic ---------- */
.dits-stage-clic { cursor: pointer; }
.dits-diana {
  position: absolute; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; user-select: none; cursor: pointer;
}
.dits-diana.motriu-tocat { opacity: .35; }
.dits-diana:focus-visible { outline: 3px solid #1565c0; border-radius: 8px; }

/* ---------- M3 Obre l'ou ---------- */
.dits-stage-ous { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; padding: 16px; }
.dits-ou { font-size: 2.8rem; line-height: 1; cursor: pointer; user-select: none; }
.dits-ou-trontolla { animation: dits-trontolla .35s ease-in-out infinite; }
@keyframes dits-trontolla {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-9deg); }
  75% { transform: rotate(9deg); }
}
.dits-ou-obert { pointer-events: none; transform: scale(1.2); }

/* ---------- M4 El peix a la peixera ---------- */
.dits-stage-arrossec { display: flex; align-items: center; justify-content: space-around; gap: 20px; padding: 16px; }
.dits-peix-zona { display: flex; align-items: center; justify-content: center; min-width: 120px; min-height: 120px; }
.dits-peca { font-size: 2.6rem; line-height: 1; cursor: grab; user-select: none; }
.dits-peca.motriu-agafada { cursor: grabbing; transform: scale(1.15); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); }
.dits-casella {
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; border: 3px dashed #90a4ae; border-radius: 14px; background: #f4f8fb;
}
.dits-casella[data-ocupada] { border-style: solid; border-color: #43a047; background: #e8f5e9; }

/* ---------- M6 Troba el gat amagat ---------- */
.dits-stage-amagat { height: 380px; }
.dits-tira { position: absolute; top: 0; left: 0; width: 100%; will-change: transform; }
.dits-mata { position: absolute; font-size: 2.2rem; line-height: 1; user-select: none; }
.dits-gat-amagat { position: absolute; font-size: 1.7rem; line-height: 1; user-select: none; }
.dits-gat-trobat { filter: drop-shadow(0 0 8px #ffb300); transform: scale(1.3); }
.dits-menu {
  position: fixed; z-index: 4000; display: flex; flex-direction: column; gap: 2px;
  min-width: 160px; padding: 4px; background: #fff;
  border: 1px solid #ccd3de; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.dits-menu-entrada { text-align: left; width: 100%; }

/* ---------- variants d'escenari ---------- */
.dits-stage-traca, .dits-stage-pinta { cursor: crosshair; }
.dits-stage-pluja { height: 380px; background: linear-gradient(#eef6ff, #fbfcfe); }
.dits-stage-teclat {
  height: auto; min-height: 340px; padding: 12px 14px; touch-action: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.dits-stage-casa, .dits-stage-dicta, .dits-stage-frases, .dits-stage-accents { justify-content: flex-start; }

/* ---------- botons de la targeta i de l'overlay ---------- */
.dits-boto-joc { font-size: .95rem; }
.dits-boto-tanca { flex-shrink: 0; margin-left: auto; }

/* ---------- visor de text (T1-T5) ---------- */
.dits-visor {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.35rem; line-height: 1.6; word-break: break-word;
}
.dits-visor-fet { color: #2e7d32; }
.dits-visor-ara { background: #ffe082; border-radius: 4px; padding: 0 3px; font-weight: 700; }
.dits-visor-resta { color: #8a93a3; }

/* ---------- teclat en pantalla ---------- */
.dits-teclat { margin-top: auto; display: flex; flex-direction: column; gap: 5px; }
.dits-teclat-fila { display: flex; justify-content: center; gap: 5px; }
.dits-tecla {
  min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0, 0, 0, .14); border-radius: 7px;
  font-size: .95rem; user-select: none; box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}
/* colors per dit: parells simètrics; els polzes (dit-0) sol */
.dit-0 { background: #ede7f6; color: #4527a0; }
.dit-1, .dit-8 { background: #fce4ec; color: #ad1457; }
.dit-2, .dit-7 { background: #fff3e0; color: #e65100; }
.dit-3, .dit-6 { background: #f1f8e9; color: #558b2f; }
.dit-4, .dit-5 { background: #e3f2fd; color: #1565c0; }
.dits-tecla-ara { outline: 3px solid #222; transform: scale(1.12); font-weight: 700; }

/* ---------- T2 Pluja de lletres ---------- */
.dits-gota {
  position: absolute; font-size: 1.9rem; font-weight: 700; color: #1565c0;
  user-select: none; will-change: top;
}
.dits-gota-esfuma { animation: dits-esfuma .7s ease-out forwards; }
.dits-gota-agafada { animation: dits-agafa .7s ease-out forwards; }
@keyframes dits-esfuma { to { opacity: 0; transform: translateY(12px); } }
@keyframes dits-agafa { to { opacity: 0; transform: scale(1.7); color: #2e7d32; } }

/* ---------- la corba «Com ho porto» ---------- */
.dits-corba-fila {
  display: grid; grid-template-columns: minmax(110px, 1.1fr) 3fr auto;
  gap: 10px; align-items: center; margin-bottom: 8px;
}
.dits-corba-nom { font-size: .95rem; color: #333; }
.dits-corba-barra { height: 14px; background: #e8ecf4; border-radius: 999px; overflow: hidden; }
.dits-corba-ple { height: 100%; background: linear-gradient(90deg, #64b5f6, #1e88e5); border-radius: 999px; }
.dits-corba-veloc { min-width: 3.5em; text-align: right; font-variant-numeric: tabular-nums; color: #555; font-size: .9rem; }
.dits-corba-llegenda { margin: 10px 0 0; color: #666; font-size: .85rem; }
.dits-corba-buida { margin: 10px 0 0; color: #666; font-style: italic; }

/* ---------- suport de teclat de motriu.js ---------- */
.motriu-focus { outline: 3px solid #1565c0; outline-offset: 2px; border-radius: 8px; }
[data-peca]:focus-visible,
[data-casella]:focus-visible,
[data-objectiu]:focus-visible,
[data-punt]:focus-visible { outline: 3px solid #1565c0; outline-offset: 2px; }