@import url('/fonts/fonts.css');

/* LOCKED IN – „Spielbrett-Pop“: Papier, Tinte, sieben Vollfarben. Keine Verläufe, kein Glow. */
:root {
  --paper: #F5F4ED;
  --paper-2: #e7e5da;
  --ink: #100F06;
  --ink-2: #1f1d12;
  --ink-3: #2a281c;
  --ink-4: #3a382a;
  --gold: #FFDA57;
  --malibu: #7DCAF6;
  --lav: #A293FF;
  --teal: #00917A;
  --teal-deep: #006b5b;
  --focus: var(--gold);
  --pink: #FFBBF4;
  --coral: #F47575;

  --A: var(--coral);
  --A-deep: #c24d4d;
  --A-soft: #ffc2c2;
  --B: var(--malibu);
  --B-deep: #3f93c4;
  --B-soft: #c6e8fc;
  --ok: var(--teal);
  --bad: var(--coral);

  /* Vordergrund je nach Untergrund (dunkel = Standard) */
  --fg: var(--paper);
  --fg-dim: #a9a697;
  --ink-dim: var(--fg-dim);

  --font-display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --font-poster: 'Anton', Impact, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono: 'DM Mono', ui-monospace, Menlo, monospace;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ink);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
:where(button, a, input, textarea, select, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
input::placeholder, textarea::placeholder { color: var(--fg-dim); opacity: 1; }
.connection-notice { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 10000; max-width: calc(100vw - 24px); padding: 12px 20px; border-radius: 12px; background: var(--coral); color: var(--ink); font: 700 16px/1.3 var(--font-body); text-align: center; }
.connection-notice[hidden] { display: none; }
.is-disconnected :where(#app, #view) { pointer-events: none; }
.hidden { display: none !important; }

.team-A { --team: var(--A); --team-soft: var(--A-soft); --team-deep: var(--A-deep); }
.team-B { --team: var(--B); --team-soft: var(--B-soft); --team-deep: var(--B-deep); }

/* Feines Korn als einzige Textur */
.grain { position: relative; }
.grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: .13; mix-blend-mode: multiply; background-image: var(--grain); }

/* Wortmarke: LOCKED IN + Schloss */
.wordmark { font: 800 1em/.84 var(--font-display); font-stretch: 88%; letter-spacing: -.02em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .18em; white-space: nowrap; }
.wordmark svg { height: .82em; width: auto; transform: rotate(8deg); flex: none; }
.wordmark.stack { flex-direction: column; align-items: flex-start; gap: 0; }
.wordmark.stack .l2 { margin-left: .6em; display: inline-flex; align-items: center; gap: .14em; }

.pill {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .3em .9em; border-radius: 999px; font-weight: 600;
  background: var(--ink-3); color: var(--paper);
}

/* Gekippter Sticker für Feedback („Richtig!“, „+100“) */
.sticker { display: inline-block; padding: .28em .8em; border-radius: 999px; font: 700 1em var(--font-body); transform: rotate(-7deg); box-shadow: 0 .14em 0 rgba(0, 0, 0, .2); white-space: nowrap; }
.sticker.r { transform: rotate(6deg); }
.slap { animation: slap .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes slap { from { opacity: 0; transform: scale(2.2) rotate(-18deg); } }

/* Hintergrund der Show: Tinte + grobe Scribble-Linie + Korn */
.stage-bg { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; background: var(--ink); }
.stage-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-bg::after { content: ''; position: absolute; inset: 0; opacity: .09; mix-blend-mode: screen; background-image: var(--grain); }

.conn-dot { position: fixed; bottom: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--bad); z-index: 9999; transition: .3s; }
.conn-dot.on { background: var(--teal); opacity: .35; }

/* Stinger: Farbblock-Kacheln klappen übers Bild */
.stinger { position: fixed; inset: 0; z-index: 900; pointer-events: none; overflow: hidden; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, 1fr); }
.stinger .tile { transform: scaleY(0); transform-origin: 50% 0; }
.stinger.run .tile { animation: tile 1.5s cubic-bezier(.7, 0, .25, 1) both; }
@keyframes tile {
  0% { transform: scaleY(0); transform-origin: 50% 0; }
  38% { transform: scaleY(1); transform-origin: 50% 0; }
  62% { transform: scaleY(1); transform-origin: 50% 100%; }
  100% { transform: scaleY(0); transform-origin: 50% 100%; }
}
.stinger .logo { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.stinger .logo span { font: 800 9vmin/.9 var(--font-display); font-stretch: 88%; letter-spacing: -.02em; text-transform: uppercase; color: var(--ink); background: var(--paper); padding: .15em .5em .2em; border-radius: 999px; transform: rotate(-4deg); max-width: 90vw; text-align: center; }
.stinger.run .logo { animation: stinger-logo 1.5s ease both; }
@keyframes stinger-logo { 0%, 26% { opacity: 0; transform: scale(.6); } 38%, 62% { opacity: 1; transform: scale(1); } 74%, 100% { opacity: 0; transform: scale(1.15); } }

.confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 950; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}