/* Plats bruts: vermell ataronjat de la capçalera, lletres de paper retallades, cintes de colors del DVD */
/* Fonts de Google Fonts servides des de la web (llicència OFL, veure fonts/README.md) */
@font-face { font-family: "Rubik Dirt"; font-display: swap; src: url(../fonts/rubik-dirt-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; }
@font-face { font-family: "Rubik Dirt"; font-display: swap; src: url(../fonts/rubik-dirt-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Special Elite"; font-display: swap; src: url(../fonts/special-elite-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; }
@font-face { font-family: "Special Elite"; font-display: swap; src: url(../fonts/special-elite-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #f1e4d3; --glow: #f7c9a4; --fg: #1d1410; --muted: #6e5446; --line: #dcc3ad; --card: #fffaf3; --hi: #fbd9c2;
  --paper: #fbf8f2; --ink: #16110e; --accent: #c8321a; --on-accent: #fff; --grain: 0.45;
  --display: "Rubik Dirt", Impact, sans-serif; --mono: "Special Elite", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1f0a05; --glow: #b23d19; --fg: #f6ece2; --muted: #cda999; --line: #4d2318; --card: #2a110a; --hi: #56200f; --accent: #ff5b2e; --on-accent: #16110e; --grain: 0.35; }
}
body { background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--glow), transparent 70%), var(--bg); background-attachment: fixed; }
/* gra: soroll en gris opac (feColorMatrix) barrejat amb overlay; queda sota el contingut perquè no taqui els fotogrames */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: var(--grain); mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* lletres retallades com el logo de la sèrie */
.cut { display: inline-flex; gap: 3px; font-family: var(--display); text-decoration: none; }
.cut span:not(.rows, .row) { display: inline-block; background: var(--paper); color: var(--ink); padding: 0.02em 0.16em 0; line-height: 1.1;
  box-shadow: 1px 2px 0 #0005; transform: rotate(var(--r, 0deg)) translateY(var(--y, 0)); }
.cut span:nth-child(3n+1) { --r: -4deg; --y: 1px; } .cut span:nth-child(3n+2) { --r: 3deg; --y: -2px; } .cut span:nth-child(4n) { --r: -1.5deg; --y: 2px; }
.cut .rows, .cut .row { --r: 0deg; --y: 0; }
.cut span.x { background: var(--accent); color: var(--on-accent); }
.hero .cut { font-size: clamp(44px, 11vw, 104px); }
.hero .row { gap: 0.08em; }
.hero .rows { display: inline-block; }
.hero .row { display: flex; justify-content: center; margin-bottom: 0.12em; }
.hero .try a { box-shadow: 1px 2px 0 #0004; }
.hero .try a:nth-child(odd) { transform: rotate(-1.5deg); } .hero .try a:nth-child(even) { transform: rotate(1.5deg); }

/* controls com tires de paper */
#q, #ep, header button.ghost { background: var(--paper); color: var(--ink); border-color: transparent; box-shadow: 1px 2px 0 #0004; border-radius: 3px; }
#q::placeholder { color: #7d6a5f; }
header button.ghost:hover { background: var(--accent); color: var(--on-accent); border-color: transparent; }

/* personatges com cinta adhesiva */
.who button { border-radius: 0; box-shadow: 1px 2px 0 #0004; transform: rotate(var(--r, 0deg)); }
.who button:nth-child(odd) { --r: -1.5deg; } .who button:nth-child(even) { --r: 1deg; }
.who button:hover { transform: rotate(var(--r)) translateY(-1px); }

.card { box-shadow: 0 2px 0 #0003; }
.card:hover { transform: rotate(-0.6deg) translateY(-2px); }
.shot { box-shadow: 0 3px 0 #0004; }