@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Lilita+One&display=swap');
/* ─── DISSENY «PAPER» (04/11/2026) ───
   Triat per Jordi entre 4 propostes (branca proposta-disseny): base A · Paper (la de l'Instagram),
   amb els raigs que giren de la il·lustració de la carta a la portada, la franja que corre de la proposta B
   i, en mode fosc, l'estil «Nit de timba». Carrega després de fosc-auto.css i fosc.css; el comportament
   (aparicions, capçalera, xifres, franja, llum) és a js/disseny.js. */
/* ─── COMÚ ───
   1) Més amplada: els laterals buits s'aprofiten (1100 → 1280 px).
   2) Animacions: aparicions en fer scroll, capçalera que s'encongeix, fitxes que s'aixequen.
   Tot respecta «reduir el moviment». */
html { --amplada: 1280px; --pr-ease: cubic-bezier(.2,.8,.2,1); }

/* 1 · Amplada */
html .header-inner, html .hero-inner, html .main-wrap,
html .footer-inner, html .footer-bottom, html #index-page,
html .review-hero-inner, html .review-body, html .tops-contenidor,
html .barra-tornar, html .portada-a-inner, html .joc-mes,
html [style*="max-width:1100px"], html .pagina-ressenya-peu,
html .cap-in, html .hero-in, html[data-pg="vici"] main {
  max-width: var(--amplada) !important;
}
html .main-wrap { grid-template-columns: minmax(0, 1fr) 340px; gap: 2.5rem; }
html .articles-grid { gap: 1.4rem; }
@media (max-width: 900px) {
  html .main-wrap { grid-template-columns: 1fr; }
}

/* 2 · Capçalera que s'encongeix */
html header { transition: box-shadow .3s var(--pr-ease), background-color .3s; }
html .header-inner, html .cap-in { transition: height .3s var(--pr-ease), padding .3s var(--pr-ease); }
html .logo-img, html .cap-logo img { transition: height .3s var(--pr-ease), transform .3s var(--pr-ease); }
html.pr-baixat .header-inner { height: 58px; }
html.pr-baixat .logo-img { height: 40px; }

/* Menú: subratllat que creix */
html header nav a:not(.nav-btn) { position: relative; }
html header nav a:not(.nav-btn)::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--pr-ease);
}
html header nav a:not(.nav-btn):hover::after, html header nav a.active::after { transform: scaleX(1); }

/* 3 · Aparicions */
html.pr-anim .pr-rev { opacity: 0; transform: translateY(22px); }
html.pr-anim .pr-rev.pr-in { opacity: 1; transform: none; transition: opacity .6s var(--pr-ease), transform .6s var(--pr-ease), box-shadow .25s, border-color .25s, background-color .25s; }

/* 4 · Fitxes que s'aixequen i imatges que respiren */
html .card, html .top-targeta, html .targeta-3d,
html .targeta-mecenatge { transition: transform .35s var(--pr-ease), box-shadow .35s var(--pr-ease), border-color .25s; }
html .card:hover, html .top-targeta:hover, html .targeta-3d:hover,
html .targeta-mecenatge:hover { transform: translateY(-6px); }
html .card .card-img img, html .card img.imatge-cobrir, html .top-targeta img,
html .targeta-3d img { transition: transform .6s var(--pr-ease); }
html .card:hover .card-img img, html .card:hover img.imatge-cobrir,
html .top-targeta:hover img, html .targeta-3d:hover img { transform: scale(1.05); }
html .recent-item { transition: transform .25s var(--pr-ease), background-color .2s; }
html .recent-item:hover { transform: translateX(4px); }

/* Botons amb pes */
html .nav-btn, html .section-link { transition: transform .2s var(--pr-ease), box-shadow .2s, background-color .2s, color .2s; }
html .nav-btn:hover { transform: translateY(-2px); }

/* Entrada de cada «pàgina» (Inici, Ressenyes, Notícies…) */
@keyframes pr-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html #main-site, html #ressenyes-site, html #noticies-site,
html #tops-site, html #micromecenatge-site, html #\33 d-site,
html .review-page { animation: pr-entra .5s var(--pr-ease) both; }


/* 5 · Tipografia de títols (abans, Bangers a tot arreu) */
html :is(.bgg-score, .block-title, .category-header, .chip-score, .game-title, .hero h1, .imp-millors-titol, .joc-mes-nom, .logo-title, .mecenatge-titol, .noticia-subtitol-modal, .noticia-titol, .num-big, .portada-a-titol, .portada-xifres b, .resum-kpi b, .score-big, .seccio-3d-titol, .section-title, .side-title, .targeta-3d-titol, .targeta-mecenatge-imatge.sense-imatge::after, .targeta-mecenatge-titol, .top-fila-lletra, .top-num, .top-posicio-blau-cel, .top-posicio-blava-fosca, .top-posicio-cian, .top-posicio-gris, .top-posicio-lila, .top-posicio-ocre, .top-posicio-taronja, .top-posicio-taronja-fosca, .top-posicio-verda, .top-posicio-vermella, .top-score, .top-targeta-titol, .top-titol, .tops-titol, .v-score, .widget-title, h1, h2) {
  font-family: var(--pr-titol), Impact, sans-serif !important;
  letter-spacing: var(--pr-titol-ls, .5px) !important;
  font-weight: var(--pr-titol-pes, 400) !important;
}
html:root { --display: var(--pr-titol); }

@media (prefers-reduced-motion: reduce) {
  html *, html *::before, html *::after { animation: none !important; transition: none !important; }
  html.pr-anim .pr-rev { opacity: 1 !important; transform: none !important; }
}

/* La franja «Tornar» de la ressenya ocupa tota l'amplada (com abans, amb la nova amplada) */
html #ressenyes-site:has(.review-page[style*="block"]) > .barra-tornar {
  max-width: none !important; padding-left: max(1.5rem, calc((100% - var(--amplada)) / 2 + 1.5rem)); padding-right: max(1.5rem, calc((100% - var(--amplada)) / 2 + 1.5rem));
}
html .pagina-ressenya-barra { padding-left: max(1.5rem, calc((100% - var(--amplada)) / 2 + 1.5rem)) !important; }
html .review-hero-inner { padding-left: 1.5rem; padding-right: 1.5rem; }

/* Els !important dins d'una capa (@layer base d'estils.css) guanyen els de fora: per canviar el color
   del botó «Subscriu-te» cal fer-ho dins la mateixa capa, amb més especificitat. */
@layer base {
  html header nav a.nav-btn { color: #fff !important; }
  html[data-tema="fosc"] header nav a.nav-btn { color: #1a1300 !important; }
  html[data-tema="fosc"] header nav a.nav-btn:hover { background: linear-gradient(135deg, #ffd54f, #fff0b3) !important; }
}

/* ─── PAPER (mode clar) ───
   La web s'assembla a l'Instagram: fons de paper crema amb gra, blau elèctric (el dels títols dels posts),
   títols rodons i gruixuts, subtítols escrits a mà i fitxes com polaroids lleugerament tortes. */
html:root {
  --blue: #1a36c4; --blue-dark: #102791; --blue-mid: #2c49d6; --blue-light: #e3e6f8;
  --white: #fffbf4; --off-white: #f2eadf; --gray: #7c7465; --gray-light: #e2d6c3;
  --text: #1c1d2b; --text-muted: #57546a; --accent: #75dadf; --accent-dark: #2a9aa3;
  --shadow: 0 6px 24px rgba(60,40,10,.10); --shadow-card: 0 2px 0 rgba(60,40,10,.06), 0 10px 24px -12px rgba(60,40,10,.25);
  --radius: 6px; --radius-sm: 4px;
  --pr-titol: 'Lilita One'; --pr-titol-ls: .5px; --pr-ma: 'Caveat', cursive;
  --paper: #f2eadf;
  /* El Vici */
  --bg: #f2eadf; --card: #fffbf4; --line: #e2d6c3; --line-soft: #ece2d2; --muted: #6c6658; --bar: #1a36c4; --bar-hover: #102791; --bar-track: #e9dfcf; --gold: #75dadf; --gold-ink: #0b4f55;
}
/* Paper amb gra */
html body, html #app-wrapper {
  background-color: var(--paper);
  background-image: url(../img/gra.svg);
}

/* Capçalera: paper, línia de tinta i franja blava */
html .topbar { background: var(--blue); letter-spacing: .12em; }
html header, html .cap-timba, html .cap { background: rgba(242,234,223,.92) !important; backdrop-filter: blur(8px); border-bottom: 2px solid var(--blue) !important; box-shadow: none; }
html.pr-baixat header { box-shadow: 0 8px 20px -14px rgba(60,40,10,.5); }
html header nav a { color: var(--text); font-weight: 800; }
html header nav a.active { background: transparent; color: var(--blue); }
html .nav-btn, html .cap-subscriu { background: var(--blue) !important; color: #fff !important; border-radius: 999px !important; box-shadow: 3px 3px 0 #0b1a66; }

/* Portada */
html .portada-a { background: transparent; border-bottom: 0; position: relative; }
html .portada-a-titol { color: var(--blue); font-size: clamp(2.8rem, 5.4vw, 4.6rem); line-height: .98; text-transform: uppercase; }
html .portada-a-titol::after {
  content: "el vici t’espera"; display: block; font: 700 clamp(1.6rem, 2.6vw, 2.3rem)/1.1 var(--pr-ma); color: var(--text);
  text-transform: none; letter-spacing: 0; margin-top: .35rem; transform: rotate(-2deg); transform-origin: left;
}
html .portada-a-desc { font-size: 1.08rem; }
html .portada-cerca input { background: var(--white); border: 2px solid var(--blue); border-radius: 999px; box-shadow: 4px 4px 0 var(--blue); }
html .portada-filtres select { background: var(--white); border-color: var(--gray-light); border-radius: 999px; }
/* El ventall: polaroids */
html .portada-ventall img, html .portada-ventall a { border-radius: 4px !important; }
html .portada-ventall a { background: #fff; padding: 8px 8px 26px; box-shadow: 0 14px 30px -12px rgba(40,25,5,.45); }
html .portada-ventall::before {
  content: "LA TIMBA"; position: absolute; z-index: 9; right: 4%; top: -8px; transform: rotate(8deg);
  font: 400 15px/1 var(--pr-titol); color: var(--blue); border: 2.5px solid var(--blue); padding: 6px 8px 4px; border-radius: 4px; background: rgba(255,251,244,.85);
}
html .portada-xifres { background: transparent; border-top: 2px dashed var(--gray-light); border-bottom: 2px dashed var(--gray-light); }
html .portada-xifres a { border-color: var(--gray-light); }
html .portada-xifres b { color: var(--blue); font-size: 3rem; }
html .portada-xifres span { font: 700 1.25rem/1 var(--pr-ma); color: var(--text-muted); }

/* Títols de secció: majúscules + subratllat a mà */
html .section-title, html .tops-titol { color: var(--blue); text-transform: uppercase; }
html .section-header { border-bottom: 0 !important; position: relative; padding-bottom: 12px; }
html .section-header::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 180px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 12'%3E%3Cpath d='M2 8 C 40 2, 80 11, 120 5 S 170 6, 178 4' fill='none' stroke='%2375dadf' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
}
html .section-link { font: 700 1.25rem/1 var(--pr-ma); color: var(--blue); }

/* Fitxes polaroid */
html .card {
  background: #fff; border: 0; border-radius: 3px; padding: 10px 10px 4px; box-shadow: var(--shadow-card);
}
html .card .card-img, html .card .fitxa-b-portada { border-radius: 2px; overflow: hidden; }
html .articles-grid > .card:nth-child(3n+1) { transform: rotate(-.8deg); }
html .articles-grid > .card:nth-child(3n+2) { transform: rotate(.7deg); }
html .articles-grid > .card:nth-child(3n) { transform: rotate(-.3deg); }
html .articles-grid > .card:hover { transform: rotate(0) translateY(-6px) scale(1.01); box-shadow: 0 22px 40px -18px rgba(40,25,5,.5); }
html .card-title { font-family: var(--pr-titol); font-weight: 400; letter-spacing: .3px; }
html .card-cat, html .card .fitxa-b-cat { font-family: var(--pr-ma) !important; font-size: 1.15rem !important; letter-spacing: 0 !important; text-transform: none !important; }

/* Lateral: notes enganxades */
html .widget { background: #fff; border-radius: 3px; box-shadow: var(--shadow-card); position: relative; border: 0; }
html .widget::before {
  content: ""; position: absolute; top: -10px; left: 50%; width: 92px; height: 22px; transform: translateX(-50%) rotate(-3deg);
  background: rgba(117,218,223,.55); border-left: 2px dashed rgba(255,255,255,.6); border-right: 2px dashed rgba(255,255,255,.6);
}
html .widget:nth-child(even)::before { transform: translateX(-50%) rotate(4deg); background: rgba(26,54,196,.18); }
html .widget-title { color: var(--blue); text-transform: uppercase; border-bottom: 2px dashed var(--gray-light) !important; }
html .recent-item:hover { background: var(--blue-light); }

/* Etiquetes i notes */
html .score-chip, html .lateral-nota { background: var(--blue) !important; color: #fff !important; }
html .card-tag { border-radius: 3px; transform: rotate(-3deg); font-family: var(--pr-titol); letter-spacing: .5px; }

/* Ressenya: capçalera blava amb gra, portada polaroid */
html .review-hero { background-color: var(--blue); }
html .game-cover { background: #fff; padding: 10px 10px 34px; border-radius: 3px !important; transform: rotate(-2.5deg); box-shadow: 0 24px 40px -16px rgba(0,0,0,.55); }
html .game-cover img { border-radius: 2px !important; }
html .game-title { text-transform: uppercase; }
html .review-block, html .side-block { background: #fff; border-radius: 3px; box-shadow: var(--shadow-card); }
html .block-title, html .side-title { color: var(--blue); text-transform: uppercase; }
html .ressenya-veredicte, html .verdict-frase { font-family: var(--pr-ma); font-size: 1.5rem; }

/* Els millors, 3D, micromecenatge */
html .top-targeta, html .targeta-3d, html .targeta-mecenatge { background: #fff; border-radius: 3px; border: 0; box-shadow: var(--shadow-card); }
html .targeta-3d:nth-child(odd) { transform: rotate(-.6deg); }
html .targeta-3d:nth-child(even) { transform: rotate(.6deg); }
html .joc-mes { background: var(--blue); }

/* Barres laterals de seccions */
html .barra-seccions a[aria-current], html .barra-seccions a.actiu { background: var(--blue) !important; color: #fff !important; }

/* Peu */
html footer { background: var(--blue-dark); position: relative; }
html footer::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
  background: radial-gradient(circle at 7px 14px, var(--blue-dark) 7px, transparent 7.5px) repeat-x; background-size: 14px 14px; }

/* El Vici */
html[data-pg="vici"] .hero { background-color: var(--blue); }
html[data-pg="vici"] .hero h1 { text-transform: uppercase; }
html .score-big { background: #fff !important; color: var(--blue) !important; border: 3px solid #fff; box-shadow: 4px 4px 0 #0b1a66; transform: rotate(-3deg); }
@media (max-width: 760px) {
  html .portada-ventall a { padding: 5px 5px 16px; }
  html .portada-ventall { margin-bottom: 2.6rem; }
  html .portada-ventall::before { top: -18px; font-size: 12px; }
}

/* Franja que corre */
.pr-marq { background: var(--tinta, #0e1a4f); color: #efe8da; overflow: hidden; white-space: nowrap; font: 800 13px/1 'Outfit', sans-serif; letter-spacing: .14em; }
.pr-marq-in { display: inline-flex; align-items: center; gap: 22px; padding: 9px 0; animation: pr-marq 38s linear infinite; }
.pr-marq i { width: 14px; height: 18px; background: #75dadf; -webkit-mask: url(../img/logo-icona.svg) center/contain no-repeat; mask: url(../img/logo-icona.svg) center/contain no-repeat; }
@keyframes pr-marq { to { transform: translateX(-33.333%); } }
html .portada-a::before {
  content: ""; position: absolute; left: 72%; top: 48%; width: 1600px; height: 1600px; margin: -800px 0 0 -800px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(117,218,223,.55) 0deg 7deg, transparent 7deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%);
  animation: pr-raigs 80s linear infinite; pointer-events: none;
}
@keyframes pr-raigs { to { transform: rotate(360deg); } }
/* ─── MODE FOSC · «NIT DE TIMBA» ───
   Fosca i moderna (parteix del mode fosc de la web): blau nit, llums cian i groc que es mouen al fons,
   vidre esmerilat, títols amb degradat i una llum que segueix el ratolí per sobre de les fitxes. */
html[data-tema="fosc"] {
  --nit: #080d1f; --nit-2: #0e1530; --vidre: rgba(255,255,255,.055); --vora: rgba(255,255,255,.10);
  --blue: #3d6bff; --blue-dark: #2a50d8; --blue-mid: #5a82ff; --blue-light: rgba(61,107,255,.16);
  --white: rgba(255,255,255,.055); --off-white: #080d1f; --gray: #8e9abb; --gray-light: rgba(255,255,255,.10);
  --text: #e9edf8; --text-muted: #a6b0cc; --accent: #f0c030; --accent-dark: #f0c030;
  --radius: 18px; --radius-sm: 12px;
  --shadow-card: 0 20px 40px -24px rgba(0,0,0,.8); --shadow: 0 24px 50px -24px rgba(0,0,0,.8);
  --fosc-blau-text: #8fb0ff;
  --bg: #080d1f; --card: rgba(255,255,255,.055); --line: rgba(255,255,255,.10); --line-soft: rgba(255,255,255,.06); --muted: #a6b0cc;
  --bar: #3d6bff; --bar-hover: #75dadf; --bar-track: rgba(255,255,255,.08); --gold: #f0c030;
}
html[data-tema="fosc"] body { background: var(--nit); }
html[data-tema="fosc"] #app-wrapper, html[data-tema="fosc"][data-pg] body {
  background:
    radial-gradient(600px circle at var(--mx, 70%) var(--my, 20%), rgba(61,107,255,.10), transparent 60%),
    radial-gradient(900px 600px at 10% -10%, rgba(117,218,223,.16), transparent 60%),
    radial-gradient(800px 600px at 110% 30%, rgba(61,107,255,.20), transparent 60%),
    radial-gradient(700px 500px at 40% 120%, rgba(240,192,48,.08), transparent 60%), var(--nit);
  background-attachment: fixed;
}

/* Capçalera de vidre */
html[data-tema="fosc"] .topbar, html[data-tema="fosc"] .cap-franja { background: linear-gradient(90deg, #3d6bff, #75dadf); color: #071026; font-weight: 800; }
html[data-tema="fosc"] header, html[data-tema="fosc"] .cap-timba, html[data-tema="fosc"] .cap { background: rgba(8,13,31,.6) !important; backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--vora) !important; box-shadow: none; }
html[data-tema="fosc"] header nav a { color: #cfd6ea; }
html[data-tema="fosc"] header nav a.active, html[data-tema="fosc"] header nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
html[data-tema="fosc"] header nav a.nav-btn, html[data-tema="fosc"] .cap-subscriu { background: linear-gradient(135deg, #f0c030, #ffdd6b) !important; color: #1a1300 !important; border-radius: 999px !important; box-shadow: 0 0 24px rgba(240,192,48,.35); }

/* Portada */
html[data-tema="fosc"] .portada-a { background: transparent; border-bottom: 0; }
html[data-tema="fosc"] .portada-a-titol {
  font-size: clamp(3rem, 6vw, 5.2rem); line-height: .95; text-transform: uppercase;
  background: linear-gradient(100deg, #fff 30%, #75dadf 60%, #3d6bff 90%); -webkit-background-clip: text; background-clip: text; color: transparent !important;
  background-size: 200% 100%; animation: pr-brill 8s ease-in-out infinite alternate;
}
@keyframes pr-brill { to { background-position: 100% 0; } }
html[data-tema="fosc"] .portada-a-desc { color: var(--text-muted); font-size: 1.1rem; }
html[data-tema="fosc"] .portada-cerca input { background: rgba(255,255,255,.06); border: 1px solid var(--vora); color: #fff; border-radius: 16px; backdrop-filter: blur(10px); }
html[data-tema="fosc"] .portada-cerca input:focus { border-color: #75dadf; box-shadow: 0 0 0 4px rgba(117,218,223,.18); }
html[data-tema="fosc"] .portada-ventall a { border-radius: 16px !important; box-shadow: 0 30px 50px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.12) !important; }
html[data-tema="fosc"] .portada-xifres { background: transparent; border-top: 1px solid var(--vora); border-bottom: 1px solid var(--vora); }
html[data-tema="fosc"] .portada-xifres a { border-color: var(--vora); }
html[data-tema="fosc"] .portada-xifres b { font-size: 3.2rem; background: linear-gradient(180deg, #fff, #75dadf); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
html[data-tema="fosc"] .portada-xifres span { color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }

/* Títols */
html[data-tema="fosc"] .section-title, html[data-tema="fosc"] .tops-titol, html[data-tema="fosc"] .game-title {
  text-transform: uppercase; background: linear-gradient(90deg, #fff, #9fdde1); -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
html[data-tema="fosc"] .section-header { border-bottom: 1px solid var(--vora) !important; }
html[data-tema="fosc"] .section-link { color: #75dadf; }
html[data-tema="fosc"] .widget-title, html[data-tema="fosc"] .block-title, html[data-tema="fosc"] .side-title { color: #fff !important; text-transform: uppercase; }

/* Fitxes de vidre amb llum */
html[data-tema="fosc"] .card, html[data-tema="fosc"] .widget, html[data-tema="fosc"] .top-targeta, html[data-tema="fosc"] .targeta-3d,
html[data-tema="fosc"] .targeta-mecenatge, html[data-tema="fosc"] .review-block, html[data-tema="fosc"] .side-block {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) !important; border: 1px solid var(--vora) !important;
  border-radius: var(--radius); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: relative;
}
html[data-tema="fosc"] .card::before, html[data-tema="fosc"] .widget::before, html[data-tema="fosc"] .top-targeta::before, html[data-tema="fosc"] .targeta-3d::before,
html[data-tema="fosc"] .targeta-mecenatge::before, html[data-tema="fosc"] .review-block::before, html[data-tema="fosc"] .side-block::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--lx, 50%) var(--ly, 0), rgba(117,218,223,.9), rgba(61,107,255,.5) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 2;
}
html[data-tema="fosc"] .card:hover::before, html[data-tema="fosc"] .widget:hover::before, html[data-tema="fosc"] .top-targeta:hover::before, html[data-tema="fosc"] .targeta-3d:hover::before,
html[data-tema="fosc"] .targeta-mecenatge:hover::before, html[data-tema="fosc"] .review-block:hover::before, html[data-tema="fosc"] .side-block:hover::before { opacity: 1; }
html[data-tema="fosc"] .card:hover, html[data-tema="fosc"] .top-targeta:hover, html[data-tema="fosc"] .targeta-3d:hover, html[data-tema="fosc"] .targeta-mecenatge:hover { box-shadow: 0 30px 60px -28px rgba(61,107,255,.6); }
html[data-tema="fosc"] .card-title { color: #fff; }
html[data-tema="fosc"] .card .fitxa-b-portada::after { background: linear-gradient(transparent 30%, rgba(8,13,31,.92)) !important; }
html[data-tema="fosc"] .score-chip, html[data-tema="fosc"] .lateral-nota { background: rgba(61,107,255,.25) !important; color: #cfe0ff !important; border: 1px solid rgba(61,107,255,.5); }
html[data-tema="fosc"] .recent-item:hover { background: rgba(255,255,255,.05); }

/* Ressenya */
html[data-tema="fosc"] .review-hero { background: radial-gradient(800px 400px at 20% 0%, rgba(61,107,255,.35), transparent 70%), radial-gradient(600px 400px at 90% 100%, rgba(117,218,223,.18), transparent 70%), #0b1230 !important; border-bottom: 1px solid var(--vora); }
html[data-tema="fosc"] .game-cover { border-radius: 18px !important; box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.15), 0 0 60px rgba(61,107,255,.35) !important; }
html[data-tema="fosc"] .score-big { background: linear-gradient(135deg, #f0c030, #ffdd6b) !important; color: #1a1300 !important; box-shadow: 0 0 30px rgba(240,192,48,.4); }
html[data-tema="fosc"] .joc-mes { background: linear-gradient(135deg, #12204f, #0b1230) !important; border: 1px solid var(--vora); }
html[data-tema="fosc"] .barra-seccions a[aria-current], html[data-tema="fosc"] .barra-seccions a.actiu { background: rgba(61,107,255,.25) !important; color: #fff !important; }

/* Peu */
html[data-tema="fosc"] footer { background: rgba(0,0,0,.35) !important; border-top: 1px solid var(--vora); }

/* El Vici */
html[data-tema="fosc"][data-pg="vici"] .hero { background: transparent !important; }
html[data-tema="fosc"][data-pg="vici"] .hero h1 { background: linear-gradient(90deg, #fff, #75dadf); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-tema="fosc"] #ressenyes-site:has(.review-page[style*="block"]) > .barra-tornar, html[data-tema="fosc"] .pagina-ressenya-barra { background: #0b1230 !important; }

/* ─── Afegits a la proposta A ─── */
/* Franja que corre (substitueix la franja fixa de dalt) */
.pr-marq { background: var(--blue); color: #f2eadf; font: 400 14px/1 'Lilita One', sans-serif; letter-spacing: .12em; }
.pr-marq i { background: #75dadf; }
html[data-tema="fosc"] .pr-marq { background: linear-gradient(90deg, #12204f, #0b1230 50%, #12204f); color: #cfe0ff; border-bottom: 1px solid rgba(255,255,255,.1); }
@media (prefers-reduced-motion: reduce) { .pr-marq-in { animation: none !important; } }

/* Portada: raigs de la carta que giren darrere del ventall */
html .portada-a { overflow: hidden; }
html .portada-a::before { background: repeating-conic-gradient(from 0deg, rgba(117,218,223,.42) 0deg 7deg, transparent 7deg 22deg); }
html .portada-a-inner, html .portada-xifres { position: relative; z-index: 1; }
html[data-tema="fosc"] .portada-a::before { background: repeating-conic-gradient(from 0deg, rgba(117,218,223,.12) 0deg 7deg, transparent 7deg 22deg); }
@media (max-width: 760px) { html .portada-a::before { left: 50%; top: 78%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; } }

/* Títol en dues línies: «Ressenyes sense pèls» / «a la llengua» */
html .portada-a-inner { grid-template-columns: 1.25fr 1fr; }
html .portada-a-titol { font-size: clamp(1.9rem, 4.3vw, 4rem); }
html .portada-a-titol .linia { display: block; white-space: nowrap; }
@media (max-width: 900px) { html .portada-a-inner { grid-template-columns: 1fr; } }
html .portada-a-inner { grid-template-columns: 1.15fr 1fr; }
html .portada-a-titol { font-size: clamp(1.9rem, 4.1vw, 3.75rem); }
html .portada-xifres { background: var(--paper); }
html[data-tema="fosc"] .portada-xifres { background: rgba(8,13,31,.75); backdrop-filter: blur(6px); }
html[data-tema="fosc"] .portada-xifres span { font: 700 1.25rem/1 var(--pr-ma); text-transform: none; letter-spacing: 0; color: #a6b0cc; }
html[data-tema="fosc"] .portada-a-titol::after { -webkit-text-fill-color: #cfe0ff; color: #cfe0ff; }
html[data-tema="fosc"] .portada-ventall a, html[data-tema="fosc"] .card { --polaroid: #e9e3d6; }
html[data-tema="fosc"] .portada-ventall a { background: #e9e3d6; }
html[data-tema="fosc"] .portada-ventall::before { background: rgba(8,13,31,.8); color: #8fb0ff; border-color: #8fb0ff; }
html[data-tema="fosc"] .widget::before { background: rgba(117,218,223,.35); }
@media (max-width: 900px) { html .portada-a-inner { grid-template-columns: 1fr; } }
html[data-tema="fosc"] .portada-a-titol { font-size: clamp(1.9rem, 4.1vw, 3.75rem); }
html[data-tema="fosc"] .portada-a-titol::after { background: none; -webkit-background-clip: border-box; background-clip: border-box; }
/* El degradat va a cada línia (si va al títol sencer, també pinta «el vici t'espera» i es veu doble) */
html[data-tema="fosc"] .portada-a-titol { background: none !important; animation: none; color: #fff !important; }
html[data-tema="fosc"] .portada-a-titol .linia {
  background: linear-gradient(100deg, #fff 30%, #75dadf 60%, #3d6bff 90%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: pr-brill 8s ease-in-out infinite alternate;
}
html .portada-a-titol::after { font-size: clamp(1.8rem, 2.9vw, 2.6rem) !important; font-family: var(--pr-ma) !important; letter-spacing: 0 !important; font-weight: 700 !important; }

/* ─── Retocs després de publicar (04/11/2026, 19:34) ─── */
/* 1 · Textos borrosos: les fitxes inclinades (rotate) fan que el navegador difumini el text.
   Les polaroids queden rectes; només s'inclina la imatge del ventall de la portada. */
html .articles-grid > .card:nth-child(3n+1), html .articles-grid > .card:nth-child(3n+2), html .articles-grid > .card:nth-child(3n),
html .targeta-3d:nth-child(odd), html .targeta-3d:nth-child(even) { transform: none; }
html .articles-grid > .card:hover { transform: translateY(-6px); }
html .card-title { font-family: 'Nunito', sans-serif !important; font-weight: 900 !important; letter-spacing: 0 !important; }
html .card, html .widget, html .review-block, html .side-block { -webkit-font-smoothing: antialiased; }
html.pr-anim .pr-rev.pr-in { transform: none; will-change: auto; }

/* 2 · Miniatures del lateral (Properes novetats, entregues, últimes ressenyes): marc i mida fixa */
html .entrega-img, html .recent-thumb {
  width: 56px !important; height: 56px !important; flex: none; border-radius: 8px; overflow: hidden; position: relative;
  background: #fff; border: 3px solid #fff; box-shadow: 0 4px 10px -4px rgba(40,25,5,.45);
}
html .entrega-img img, html .recent-thumb img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 5px; }
html .entrega-item { display: flex; align-items: center; gap: 14px; padding: 8px; border-radius: 10px; }
html .entrega-item:hover { background: var(--blue-light); }
html[data-tema="fosc"] .entrega-img, html[data-tema="fosc"] .recent-thumb { background: #e9e3d6; border-color: #e9e3d6; }

/* 3 · Bloc «La Timba al teu correu»: títol blanc i sense cinta */
html .newsletter-widget .widget-title { color: #fff !important; border-bottom-color: rgba(255,255,255,.35) !important; font-size: 1.5rem; }
html .newsletter-widget::before { display: none; }
html .newsletter-widget { border-radius: 6px; box-shadow: var(--shadow-card); }

/* 4 · Ressenyes: menys espai al voltant del cercador */
html .ressenyes-cerca { margin-bottom: .4rem !important; }
html #ressenyes-cerca-resultat:empty { display: none; }
html .ressenyes-contingut > .section-header:first-of-type, html .ressenyes-contingut .titol-daus:first-of-type { margin-top: .5rem !important; }

/* 5 · Títols de les barres laterals més visibles */
html .barra-titol, html .barra-ressenyes-titol {
  font: 400 1.15rem/1.1 'Lilita One', sans-serif !important; letter-spacing: .06em !important; color: var(--blue) !important;
  text-transform: uppercase; padding-bottom: 8px !important; margin-bottom: 8px !important; border-bottom: 2px dashed var(--gray-light);
}
html[data-tema="fosc"] .barra-titol, html[data-tema="fosc"] .barra-ressenyes-titol { color: #8fb0ff !important; }

/* 6 · Micromecenatge: la imatge es veu sencera (abans es retallava) */
html .targeta-mecenatge-imatge { background: #fff; display: flex; align-items: center; justify-content: center; }
html .targeta-mecenatge-imatge img, html .targeta-mecenatge-img { object-fit: contain !important; width: 100% !important; height: 100% !important; max-height: 320px; }
html[data-tema="fosc"] .targeta-mecenatge-imatge { background: #0b1230; }

/* 7 · Llum que segueix el ratolí també en clar (com a «Nit de timba», en blau suau) */
html:not([data-tema="fosc"]) body {
  background-image: radial-gradient(520px circle at var(--mx, -999px) var(--my, -999px), rgba(26,54,196,.07), transparent 60%), url(../img/gra.svg);
  background-attachment: fixed, scroll;
}
html :is(.card, .widget, .top-targeta, .targeta-3d, .targeta-mecenatge, .review-block, .side-block) { position: relative; }
html:not([data-tema="fosc"]) :is(.card, .widget, .top-targeta, .targeta-3d, .targeta-mecenatge, .review-block, .side-block)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 3;
  background: radial-gradient(240px circle at var(--lx, 50%) var(--ly, 0), rgba(26,54,196,.10), transparent 65%);
  box-shadow: inset 0 0 0 2px rgba(26,54,196,.0);
}
html:not([data-tema="fosc"]) :is(.card, .widget, .top-targeta, .targeta-3d, .targeta-mecenatge, .review-block, .side-block):hover::after {
  opacity: 1; box-shadow: inset 0 0 0 2px rgba(26,54,196,.35);
}

/* ─── Repàs UI (04/11/2026, 20:00) ─── */
/* Properes novetats / entregues: caixes i bàners es veuen sencers (contain) sobre blanc */
html .entrega-img { padding: 3px; box-sizing: border-box; }
html .entrega-img img { position: static !important; object-fit: contain !important; border-radius: 3px; background: #fff; }
html .entrega-img { width: 64px !important; height: 64px !important; }
/* Inici › Els millors: portada quadrada amb marc (les portades d'Instagram són 1:1) */
html #inici-millors .top-portades { width: 96px !important; height: 96px !important; flex: none; padding: 4px; background: #fff; border-radius: 6px; box-shadow: 0 6px 14px -8px rgba(40,25,5,.55); box-sizing: border-box; }
html #inici-millors .top-portades img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; border: 0 !important; border-radius: 3px !important; margin: 0 !important; box-shadow: none !important; }
html[data-tema="fosc"] #inici-millors .top-portades { background: #e9e3d6; }

/* ─── Repàs UI/UX complet (04/11/2026, 20:15) ─── */
/* Veredicte de la ressenya: el títol era blau sobre blau (no es veia) */
html .veredicte .block-title { color: #fff !important; border-bottom-color: rgba(255,255,255,.25) !important; }
html .veredicte .score-big, html .veredicte [class*="score"] { background: #fff !important; color: var(--blue) !important; }
/* Fotos de la ressenya: fons de paper (abans blau clar) */
html .review-photo-block { background: #e9dfcf; border-radius: 6px; overflow: hidden; }
html[data-tema="fosc"] .review-photo-block { background: #0b1230; }
/* Contrast: WhatsApp, Kickstarter i dates de les llistes */
html .etiqueta-kickstarter { background: #e2f6ec !important; color: #04693e !important; }
html .top-targeta-data { background: rgba(0,0,0,.55) !important; color: #fff !important; }
html .imp-millors-sub { color: var(--text-muted); }
/* Botó 🌙/☀️ sempre a la dreta (al Vici en tauleta quedava al mig de la capçalera) */
html header .boto-tema { margin-left: auto; }
html header .header-inner nav + .boto-tema, html header .cap-in .cap-nav + .boto-tema { margin-left: 0; }
/* «Veure totes les 50 →» no es parteix en tres línies al mòbil */
html .section-link { white-space: nowrap; }
html .section-header { gap: 12px; flex-wrap: wrap; }
/* Inici: les graelles de ressenyes i notícies a 2 columnes (amb l'amplada nova en quedava una de buida) */
@media (min-width: 761px) {
  html #inici-ressenyes, html #inici-noticies { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* Mode fosc: textos del bloc de newsletter i de la pàgina de gràcies amb més contrast */
html[data-tema="fosc"] .newsletter-widget { background: #1c4382; }
html[data-tema="fosc"] .newsletter-desc, html[data-tema="fosc"] .newsletter-desc b, html[data-tema="fosc"] .newsletter-legal, html[data-tema="fosc"] .newsletter-legal a { color: #fff !important; }
html[data-tema="fosc"] .boto-subscriu { color: #0b1230 !important; }
html[data-tema="fosc"][data-pg="gracies"] p { color: #e6e9f1 !important; }
html[data-tema="fosc"] .card .fitxa-b-cat { color: #fff !important; }

/* Repàs UI/UX: contrast de les etiquetes de categoria i de gràcies en fosc */
html[data-tema="fosc"] .fitxa-b-daurada .fitxa-b-cat { background: #94640f; }
html[data-tema="fosc"] .fitxa-b-gris .fitxa-b-cat { background: #545c6d; }
html[data-tema="fosc"] .targeta { background: #2b4fd8; }

/* Inici › Els millors: ventall amb les portades dels 3 primers jocs (21:00) */
html #inici-millors .top-portades.top-ventall { position: relative; width: 168px !important; height: 116px !important; padding: 0; background: none; box-shadow: none; border-radius: 0; }
html #inici-millors .top-ventall img { position: absolute !important; top: 6px; width: 78px !important; height: 104px !important; object-fit: cover !important; background: #fff; border: 3px solid #fff !important; border-radius: 6px !important; box-shadow: 0 8px 16px -8px rgba(40,25,5,.6) !important; transition: transform .25s ease; }
html #inici-millors .top-ventall img:nth-child(1) { left: 45px; z-index: 3; top: 2px; }
html #inici-millors .top-ventall img:nth-child(2) { left: 0; z-index: 2; transform: rotate(-8deg); }
html #inici-millors .top-ventall img:nth-child(3) { left: 90px; z-index: 1; transform: rotate(8deg); }
html #inici-millors .top-item:hover .top-ventall img:nth-child(2) { transform: rotate(-12deg) translateX(-6px); }
html #inici-millors .top-item:hover .top-ventall img:nth-child(3) { transform: rotate(12deg) translateX(6px); }
html[data-tema="fosc"] #inici-millors .top-ventall img { border-color: #e9e3d6 !important; background: #e9e3d6; }
@media (max-width: 560px) {
  html #inici-millors .top-portades.top-ventall { width: 128px !important; height: 92px !important; }
  html #inici-millors .top-ventall img { width: 60px !important; height: 80px !important; }
  html #inici-millors .top-ventall img:nth-child(1) { left: 34px; }
  html #inici-millors .top-ventall img:nth-child(3) { left: 68px; }
}
/* Properes novetats: miniatures més grans */
html .entrega-img { width: 76px !important; height: 76px !important; }
/* Ventall: vores més netes en girar les portades */
html #inici-millors .top-ventall img { outline: 1px solid transparent; backface-visibility: hidden; image-rendering: auto; }
/* Calendari de novetats: portades més grans (40 px) */
html .cal-joc img { width: 40px !important; height: 40px !important; flex: none; border: 2px solid #fff; box-shadow: 0 2px 6px -2px rgba(40,25,5,.4); }