/* Noeba · Pell pixel art per a tecno.noeba.cat (2026-09-13).
   Fulla dedicada i reversible: per tornar al disseny anterior, treure el
   <link rel="stylesheet" href="/pixel-skin.css"> de web/index.html i de
   functions/lib/pagina.js, o fer revert del commit. */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* ---- Pixel NOMÉS a l'embolcall; lectura en lletra normal (directriu David
   2026-09-13: "el texto que se ha de leer sí o sí, en letra normal") ----
   La font pixel queda per a la marca del hero i el wordmark de la topbar.
   Tots els títols de lectura (h1-h3: fitxes de SA, temes, panell docent,
   pàgina d'entrada) tornen a la Fredoka del disseny base. */
.hero-brand-title, .topbar-wordmark strong {
  font-family: 'Press Start 2P', 'Fredoka', 'Nunito', sans-serif;
  line-height: 1.55;
}
.hero-brand-title { font-size: clamp(1.1rem, 4vw, 1.8rem); }
.topbar-wordmark strong { font-size: 0.8rem; }

/* ---- Cantonades escalonades (8px): targetes i caixes ---- */
.sa-journey-card, .teacher-command-card, .teacher-focus-card, .modal-card,
.entrada, .legal, .mostra-cta-box, .sa-box, .xifra, .bloc,
.desplegable-assignacio, .error:not(.section), .avis, .home-logo-frame, .quiz-pregunta,
.teacher-workspace {
  clip-path: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0,
    calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px,
    calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px),
    calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px),
    calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%,
    8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px),
    4px calc(100% - 8px), 0 calc(100% - 8px));
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(6px 6px 0 #2d3748);
}
.error:not(.section), .avis { filter: drop-shadow(3px 3px 0 #2d3748); }
html[data-theme="dark"] .sa-journey-card, html[data-theme="dark"] .teacher-command-card,
html[data-theme="dark"] .teacher-focus-card, html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .entrada, html[data-theme="dark"] .sa-box {
  filter: drop-shadow(6px 6px 0 rgba(0,0,0,.55));
}

/* ---- Cantonades escalonades (4px): botons, pastilles i controls ---- */
.btn, .clay-btn, .text-btn, .pill, .clay-badge, .clay-icon-square,
.nav-topic-btn, .nav-resource-link, .icon-btn, .lang-btn,
.field input, .field select, .field textarea, .focus-mode-select,
.tema, .crumb-pill, .comptador-desplegable, .quiz-opcio-btn, .boto,
.camp input, .eines li, .topbar-mark, .topbar-brand, .icon-btn.theme-btn,
.teacher-session-badge {
  clip-path: polygon(0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
    calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px,
    calc(100% - 2px) 4px, 100% 4px, 100% calc(100% - 4px),
    calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px),
    calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
    4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px),
    2px calc(100% - 4px), 0 calc(100% - 4px));
  border-radius: 0;
  box-shadow: none;
}
.btn, .clay-btn, .pill, .boto { filter: drop-shadow(4px 4px 0 #2d3748); }
html[data-theme="dark"] .btn, html[data-theme="dark"] .clay-btn,
html[data-theme="dark"] .pill, html[data-theme="dark"] .boto {
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,.55));
}
.camp input, .field input, .field select, .field textarea { filter: none; }

/* ---- Efecte de pressió pixel ---- */
.btn:active, .clay-btn:active, .boto:active, .tema:active, .quiz-opcio-btn:active {
  transform: translate(2px, 2px);
  filter: drop-shadow(2px 2px 0 #2d3748);
}


/* ---- Garantia de superfície opaca (arrel del text duplicat de 2026-09-13) ----
   L'ombra dura de la pell es fa amb filter: drop-shadow, que duplica TOTS els
   píxels no opaques de l'element: vora, text i icones. Si el fons no és opac,
   el text surt duplicat i il·legible (és el que es veia a les fitxes de les SA
   amb els botons fantasma «📚 Tecnologia i societat» i «Obrir sessió →»).
   Per això la pell opaca els elements que el disseny original tenia translúcids:
   mateixa ombra, mateixes cantonades, text net. Treure la pell ho reverteix tot. */

/* Botons fantasma: transparents al disseny original; la pell els dóna el fons
   de targeta per poder projectar l'ombra sense duplicar-ne el text. */
.btn.ghost { background: var(--clay-bg, #ffffff) !important; }
.btn.ghost:hover { background: var(--teal-soft, #e2f1ee) !important; }

/* Targeta de comandament destacada: degradat amb alfa sobre la targeta mare;
   es componen els mateixos colors sobre el fons però ja opacs. */
.teacher-command-card.primary {
  background: linear-gradient(145deg,
    color-mix(in srgb, #0a84ff 42%, var(--clay-bg, #ffffff)),
    color-mix(in srgb, #0a5cbe 22%, var(--clay-bg, #ffffff))) !important;
}

/* Targetes del Mode Focus: el fons original és var(--bg) (indefinida, o sigui
   transparent) o un verd al 6% quan el focus és actiu; tots dos es tornen opacs. */
.teacher-focus-card { background: var(--clay-bg, #ffffff) !important; }
.teacher-focus-card.is-focus-active {
  background: color-mix(in srgb, #027a48 6%, var(--clay-bg, #ffffff)) !important;
}

/* Desplegables d'assignació de l'administració: porten tintes en línia al 4-5%
   d'alfa; la pell els deixa el fons de targeta opac. */
.desplegable-assignacio { background: var(--clay-bg, #ffffff) !important; }

@media (prefers-reduced-motion: reduce) {
  .btn:active, .clay-btn:active, .boto:active, .tema:active, .quiz-opcio-btn:active { transform: none; }
}