/* klinz.cloud – Akatsuki-Design: schwarzer Mantel, rote Wolken, Blutrot. Gemeinsam für status. und home. */
@font-face { font-family: "Bebas"; src: url(fonts/bebas.woff2) format("woff2"); font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #08080a; --bg2: #121216; --card: #111114; --card2: #18181d;
  --text: #f1ecec; --muted: #9b9296; --line: rgba(255, 255, 255, 0.08);
  --orange: #e0243a; --orange2: #ff5a6a; --chakra: #9b8cff; --red: #ff3b4e; --green: #3ddc84; --gold: #f2c14e;
  --accent: var(--orange); --ok: var(--green); --bad: var(--red); --warn: var(--gold);
  --bar: #2a2a33; --bar-blocked: var(--orange);
  --s1: var(--orange); --s2: var(--chakra); --s3: var(--gold); --s4: #f1ecec; --s5: #ff8c42;
  --glow: rgba(224, 36, 58, 0.22); --kanji: rgba(224, 36, 58, 0.06);
  --cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248 140'%3E%3Cdefs%3E%3CradialGradient id='f' cx='45%25' cy='30%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23e8323f'/%3E%3Cstop offset='.65' stop-color='%23c1121f'/%3E%3Cstop offset='1' stop-color='%237d0a14'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='%23050506'%3E%3Ccircle cx='62' cy='84' r='38'/%3E%3Ccircle cx='96' cy='58' r='44'/%3E%3Ccircle cx='142' cy='52' r='48'/%3E%3Ccircle cx='184' cy='74' r='40'/%3E%3Ccircle cx='122' cy='90' r='40'/%3E%3Ccircle cx='86' cy='96' r='32'/%3E%3Ccircle cx='162' cy='98' r='32'/%3E%3Ccircle cx='40' cy='98' r='26'/%3E%3Ccircle cx='208' cy='98' r='26'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='62' cy='84' r='35.5'/%3E%3Ccircle cx='96' cy='58' r='41.5'/%3E%3Ccircle cx='142' cy='52' r='45.5'/%3E%3Ccircle cx='184' cy='74' r='37.5'/%3E%3Ccircle cx='122' cy='90' r='37.5'/%3E%3Ccircle cx='86' cy='96' r='29.5'/%3E%3Ccircle cx='162' cy='98' r='29.5'/%3E%3Ccircle cx='40' cy='98' r='23.5'/%3E%3Ccircle cx='208' cy='98' r='23.5'/%3E%3C/g%3E%3Cg fill='url%28%23f%29'%3E%3Ccircle cx='62' cy='84' r='30'/%3E%3Ccircle cx='96' cy='58' r='36'/%3E%3Ccircle cx='142' cy='52' r='40'/%3E%3Ccircle cx='184' cy='74' r='32'/%3E%3Ccircle cx='122' cy='90' r='32'/%3E%3Ccircle cx='86' cy='96' r='24'/%3E%3Ccircle cx='162' cy='98' r='24'/%3E%3Ccircle cx='40' cy='98' r='18'/%3E%3Ccircle cx='208' cy='98' r='18'/%3E%3C/g%3E%3Cpath d='M70 92a11 11 0 1 1 15-9 6 6 0 0 1-8 4 M118 70a14 14 0 1 1 18-12 7 7 0 0 1-10 5 M168 88a10 10 0 1 1 13-8 5 5 0 0 1-7 3 M44 104a7 7 0 1 1 9-6' fill='none' stroke='%23fff' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { background: var(--bg); }
html::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; transform: translateZ(0);
  background:
    radial-gradient(900px 520px at 88% -8%, var(--glow), transparent 65%),
    radial-gradient(700px 500px at -10% 110%, color-mix(in srgb, var(--chakra) 10%, transparent), transparent 70%),
    var(--paper), var(--bg);
}
body {
  margin: 0; min-height: 100vh; color: var(--text); overflow-x: hidden; background: transparent;
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* große, kaum sichtbare Wolke im Hintergrund */
body::before {
  content: ""; position: fixed; right: -12vw; bottom: -8vh; z-index: 0; pointer-events: none;
  width: min(120vh, 110vw); aspect-ratio: 248 / 140; background: var(--cloud) center / contain no-repeat;
  opacity: 0.05; transform: rotate(-8deg);
}
/* rote Wolken wie auf dem Mantel */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.16;
  background: var(--cloud) 6% 22% / 170px auto no-repeat, var(--cloud) 92% 58% / 230px auto no-repeat,
              var(--cloud) 18% 88% / 140px auto no-repeat, var(--cloud) 70% 6% / 120px auto no-repeat;
}
.hero { position: relative; }
.hero::after { content: ""; position: absolute; right: 70px; top: -18px; width: 150px; height: 84px; background: var(--cloud) center / contain no-repeat; will-change: transform;
  filter: drop-shadow(0 6px 18px rgba(224, 36, 58, 0.45)); animation: drift 7s ease-in-out infinite; }
@keyframes drift { 50% { transform: translateY(-6px) rotate(-2deg); } }
@media (max-width: 560px) { .hero::after { width: 96px; height: 54px; right: 56px; top: -10px; } }
.card::after { content: ""; position: absolute; right: -14px; bottom: -10px; width: 92px; height: 52px; background: var(--cloud) center / contain no-repeat; opacity: 0.13; pointer-events: none; }
main { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; padding: 36px 16px 56px; }

/* Kopf */
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.hero h1 {
  margin: 0; font: 400 clamp(2.6rem, 8vw, 4.2rem)/0.9 "Bebas", Impact, sans-serif; letter-spacing: 0.02em;
  background: linear-gradient(100deg, var(--text) 30%, var(--orange) 75%, var(--orange2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero h1 + .brush { display: block; height: 10px; width: min(320px, 70%); margin-top: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8C40 3 90 2 150 4s110 3 146-1c2 1 2 3 0 4-40 4-96 4-150 3S30 9 4 11c-3 0-4-2-2-3z' fill='%23e0243a'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.hero .sub { color: var(--muted); font-size: 0.92rem; margin-top: 10px; }
.stamp {
  font: 400 1.35rem/1 "Bebas", Impact, sans-serif; letter-spacing: 0.18em; color: var(--red); border: 2px solid var(--red); border-radius: 6px;
  padding: 9px 8px 7px 12px; transform: rotate(4deg); opacity: 0.9;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--red) 20%, transparent);
}

/* Karten als Schriftrollen */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) { .grid, .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid, .grid.two { grid-template-columns: 1fr; } }
.card {
  position: relative; min-width: 0; padding: 20px 20px 18px; border: 1px solid var(--line); border-radius: 4px 18px 4px 18px;
  background: linear-gradient(180deg, var(--card2), var(--card)); overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s;
}
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--orange2) 45%, transparent 90%); }
.card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--orange) 35%, transparent);
  box-shadow: 0 10px 30px -12px var(--glow), 0 0 0 1px color-mix(in srgb, var(--orange) 15%, transparent); }
.wide { grid-column: 1 / -1; }
.card h2 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font: 400 1.35rem/1 "Bebas", Impact, sans-serif; letter-spacing: 0.06em;
}

/* Shuriken als Status-Anzeige */
.dot { flex: none; width: 18px; height: 18px; background: var(--muted);
  -webkit-mask: var(--shuriken) center / contain no-repeat; mask: var(--shuriken) center / contain no-repeat;
  --shuriken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l2.6 8.2L24 12l-9.4 3.8L12 24l-2.6-8.2L0 12l9.4-3.8z M12 9.6a2.4 2.4 0 100 4.8 2.4 2.4 0 000-4.8z' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.dot.ok { background: var(--green); animation: spin 2.4s linear infinite; will-change: transform; }
.dot.bad { background: var(--red); }
.dot.warn { background: var(--gold); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dot.ok, .hero::after { animation: none; } .card { transition: none; } }

.big { font: 400 2.5rem/1 "Bebas", Impact, sans-serif; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.big.hot { color: var(--orange); text-shadow: 0 0 22px var(--glow); }
.muted { color: var(--muted); font-size: 0.9rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 16px; }
.label { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }

.row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 0.92rem; }
.row:last-child { border-bottom: 0; }
.row b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

code { font: 0.95rem ui-monospace, monospace; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; }
button, .btn {
  font: 400 1rem/1 "Bebas", Impact, sans-serif; letter-spacing: 0.08em; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, var(--orange2), var(--orange)); border: 0; border-radius: 3px 10px 3px 10px; padding: 8px 14px;
  box-shadow: 0 4px 14px -6px var(--orange);
}
button:hover { filter: brightness(1.08); }
.addr { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; }

svg { display: block; width: 100%; height: auto; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 0.82rem; color: var(--muted); }
.legend span::before, .legend i { content: ""; display: inline-block; width: 12px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; background: var(--bar); }
.legend span.b::before { background: var(--bar-blocked); }
.legend span:has(i)::before { display: none; }

ol { list-style: none; margin: 0; padding: 0; counter-reset: r; }
ol li { counter-increment: r; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 3px 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 0.92rem; }
ol li::before { content: counter(r); font: 400 1.05rem/1.4 "Bebas", sans-serif; color: var(--orange); }
ol li:last-child { border-bottom: 0; }
ol .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ol .n { font-variant-numeric: tabular-nums; color: var(--muted); }
ol .track { grid-column: 2 / -1; height: 4px; background: var(--bg2); border-radius: 2px; overflow: hidden; }
ol .fill { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--orange2)); }

.strip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; height: 38px; }
.strip span { border-radius: 2px 6px 2px 6px; background: var(--green); opacity: 0.9; }
.strip span.mid { background: var(--gold); } .strip span.low { background: var(--red); } .strip span.none { background: var(--bg2); opacity: 1; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
td, th { text-align: left; padding: 6px 4px; border-bottom: 1px dashed var(--line); font-variant-numeric: tabular-nums; }
th { color: var(--muted); font-weight: 500; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }

.rank { display: inline-grid; place-items: center; width: 54px; height: 54px; float: right; margin: -4px 0 0 12px;
  font: 400 2rem/1 "Bebas", sans-serif; color: var(--orange); border: 2px solid var(--orange); border-radius: 50%;
  box-shadow: 0 0 18px -4px var(--orange), inset 0 0 12px -6px var(--orange); }

.links { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.links a { display: block; padding: 14px 16px; color: var(--text); text-decoration: none; border: 1px solid var(--line);
  border-radius: 3px 12px 3px 12px; background: var(--bg2); transition: border-color 0.2s, transform 0.2s; }
.links a:hover { border-color: var(--orange); transform: translateY(-2px); }
.links a b { font: 400 1.2rem/1.1 "Bebas", sans-serif; letter-spacing: 0.05em; display: block; }
.links small { color: var(--muted); font-size: 0.8rem; }

.stale { color: var(--gold); }
footer { position: relative; z-index: 1; margin-top: 28px; color: var(--muted); font-size: 0.85rem; text-align: center; }

/* Zurück-Knopf: Siegel mit roter Wolke, unten links schwebend */
.home-btn {
  position: fixed; left: 18px; bottom: 18px; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: 7px 18px 7px 7px; border-radius: 999px; color: var(--text); text-decoration: none;
  background: rgba(14, 14, 17, 0.94);
  border: 1px solid color-mix(in srgb, var(--orange) 55%, transparent);
  box-shadow: 0 10px 28px -10px var(--glow), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s;
}
.home-btn .ic {
  flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--orange);
  background: var(--cloud) center / 78% auto no-repeat, radial-gradient(circle at 35% 30%, #23232a, #0a0a0c 70%);
  box-shadow: 0 0 16px -4px var(--orange); transition: transform 0.35s cubic-bezier(.3, 1.6, .5, 1);
}
.home-btn .t { display: flex; flex-direction: column; line-height: 1.05; }
.home-btn .t b { font: 400 1.35rem/1 "Bebas", sans-serif; color: var(--orange); letter-spacing: 0.14em; }
.home-btn .t small { font: 400 0.95rem/1.1 "Bebas", sans-serif; letter-spacing: 0.1em; color: var(--muted); }
.home-btn:hover, .home-btn:focus-visible { transform: translateY(-3px); border-color: var(--orange); box-shadow: 0 14px 34px -10px rgba(224, 36, 58, 0.55); outline: none; }
.home-btn:hover .ic, .home-btn:focus-visible .ic { transform: rotate(-12deg) scale(1.08); }
.home-btn:hover .t small { color: var(--text); }
.has-home-btn main { padding-bottom: 110px; }
@media (max-width: 560px) { .home-btn { left: 12px; bottom: 12px; padding-right: 14px; } .home-btn .ic { width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) { .home-btn, .home-btn .ic { transition: none; } }

/* Rinnegan: öffnet sich beim Laden, folgt dem Mauszeiger, Shinra-Tensei-Schockwelle */
.hero-right { display: flex; align-items: center; gap: 18px; }
.eye { position: relative; flex: none; width: 84px; height: 84px; border-radius: 50%;
  filter: drop-shadow(0 0 18px rgba(155, 140, 255, 0.5)); animation: eye-open 1.3s cubic-bezier(.2, .9, .3, 1.2) both; }
.eye svg { width: 100%; height: 100%; overflow: visible; }
.eye .iris { transform: translate(var(--ex, 0px), var(--ey, 0px)); transition: transform 0.18s ease-out; }
.eye::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
  border: 2px solid rgba(190, 172, 255, 0.7); animation: shinra 5s ease-out 1.6s infinite; }
@keyframes eye-open { 0% { transform: scaleY(0.04); opacity: 0; } 55% { transform: scaleY(1.06); opacity: 1; } 100% { transform: none; } }
@keyframes shinra { 0% { transform: scale(1); opacity: 0.85; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
/* Wolke im Kopf rückt neben den Titel, damit sie Auge und Stempel nicht verdeckt */
.hero::after { right: auto; left: min(400px, 60vw); top: -24px; }
@media (max-width: 560px) { .eye { width: 62px; height: 62px; } .hero::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .eye, .eye::after { animation: none; } .eye::after { display: none; } }

/* ===== Effekte (ninja.js) ===== */
.fx-bg, .fx-top { position: fixed; inset: 0; pointer-events: none; transform: translateZ(0); }
.fx-bg { z-index: 0; }
.fx-top { z-index: 40; }
.fx-flash { position: fixed; inset: 0; z-index: 39; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 0%, rgba(230,225,255,.55), rgba(180,170,255,.12) 60%, transparent); }
.fx-flash.on { animation: flash 0.7s ease-out; }
@keyframes flash { 0% { opacity: 0; } 8% { opacity: 1; } 16% { opacity: 0.2; } 26% { opacity: 0.85; } 100% { opacity: 0; } }
body.storm { --glow: rgba(160, 140, 255, 0.25); }
body.storm::before { color: rgba(160, 140, 255, 0.07); }

/* Karten erscheinen wie mit dem Pinsel gezogen */
.card { animation: ink-in 0.9s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 90ms + 0.15s); }
@keyframes ink-in { from { clip-path: inset(0 100% 0 0 round 4px 18px); opacity: 0.2; transform: translateY(10px); } to { clip-path: inset(0 0 0 0 round 4px 18px); opacity: 1; transform: none; } }

/* Auge: klickbar, blinzelt beim Wechsel, Sharingan dreht sich */
.eye { cursor: pointer; filter: drop-shadow(0 0 18px var(--eyeglow, rgba(155,140,255,.55))); transition: filter 0.4s; }
.eye:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.eye.blink { animation: blink 0.4s ease-in-out; }
@keyframes blink { 50% { transform: scaleY(0.05); } }
.eye .spin, .intro-eye .spin { transform-origin: 0 0; animation: spin 2.2s linear infinite; }
.stamp { cursor: pointer; transition: transform 0.2s; }
.stamp:hover { transform: rotate(0deg) scale(1.06); }
.stamp:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* Krähen */
.crow { position: fixed; left: 0; top: 0; z-index: 30; will-change: transform; cursor: crosshair; color: #050507; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.crow svg { display: block; width: 100%; height: auto; fill: currentColor; overflow: visible; }
.crow .wing { transform-origin: 40px 22px; animation: flap 0.42s ease-in-out infinite alternate; animation-delay: inherit; }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-0.55); } }

/* Jutsu-Name groß in der Mitte */
.jutsu-banner { position: fixed; left: 50%; top: 38%; z-index: 45; transform: translate(-50%, -50%); pointer-events: none; text-align: center; opacity: 0; width: max-content; max-width: 92vw; }
.jutsu-banner b { display: block; font: 400 clamp(3rem, 11vw, 7.5rem)/0.95 "Bebas", Impact, sans-serif; color: #fff; letter-spacing: 0.06em;
  text-shadow: 0 0 2px #000, 0 0 24px var(--orange), 0 0 60px rgba(224,36,58,.6); }
.jutsu-banner span { display: block; margin-top: 8px; font: 500 clamp(0.95rem, 2.6vw, 1.25rem)/1.2 system-ui, sans-serif; letter-spacing: 0.25em; text-transform: uppercase; color: var(--orange2); }
.jutsu-banner.on { animation: banner 2.2s cubic-bezier(.2, .8, .2, 1); }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); filter: blur(8px); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -54%) scale(0.98); } }
body.shake main { animation: shake 0.5s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); } 30%, 50%, 70% { transform: translate(-6px, 2px); } 40%, 60% { transform: translate(6px, -1px); } }

/* Jutsu-Menü (Tipp aufs Siegel) */
.jutsu-menu { position: fixed; right: 16px; top: 120px; z-index: 50; width: 220px; padding: 12px; border-radius: 4px 16px 4px 16px;
  background: rgba(12, 12, 15, 0.94); border: 1px solid color-mix(in srgb, var(--orange) 55%, transparent); box-shadow: 0 18px 40px -16px rgba(224,36,58,.6);
  animation: ink-in 0.35s ease-out; }
.jutsu-menu[hidden] { display: none; }
.jm-title { font: 400 1.2rem/1 "Bebas", sans-serif; letter-spacing: 0.12em; color: var(--muted); margin: 2px 4px 10px; }
.jutsu-menu button { display: flex; align-items: baseline; gap: 10px; width: 100%; margin: 0 0 6px; padding: 9px 12px; text-align: left;
  background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 3px 10px 3px 10px; box-shadow: none; }
.jutsu-menu button:hover { border-color: var(--orange); filter: none; background: color-mix(in srgb, var(--orange) 14%, var(--bg2)); }
.jutsu-menu button { flex-direction: column; gap: 2px; font: 400 0.8rem/1.2 system-ui, sans-serif; color: var(--muted); letter-spacing: 0; }
.jutsu-menu button b { font: 400 1.25rem/1 "Bebas", sans-serif; color: var(--orange); letter-spacing: 0.08em; }
.jutsu-menu small { display: block; margin: 6px 4px 0; color: var(--muted); font-size: 0.75rem; }

/* Intro */
.intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #050506; transition: opacity 0.7s ease, filter 0.7s ease; }
.intro.out { opacity: 0; filter: blur(6px); pointer-events: none; }
.intro-eye { position: absolute; width: min(42vw, 260px); aspect-ratio: 1; opacity: 0.9; filter: drop-shadow(0 0 40px rgba(230,30,50,.7)); animation: eye-open 0.9s cubic-bezier(.2,.9,.3,1.2) both; }
.intro-eye svg { width: 100%; height: 100%; }
.intro-k { position: relative; font: 400 min(20vw, 150px)/1 "Bebas", Impact, sans-serif; letter-spacing: 0.08em; color: #fff; mix-blend-mode: difference; animation: intro-k 1.1s ease-out both; }
@keyframes intro-k { from { opacity: 0; transform: scale(1.8); filter: blur(10px); } 60% { opacity: 1; filter: none; } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) { .card, .crow .wing, .eye .spin, .jutsu-banner.on, body.shake main { animation: none !important; } }

/* ===== Datenkarten (widgets.js) ===== */
#weather { display: block; margin-top: 4px; color: var(--muted); font-size: 0.88rem; }
body.fog::after { filter: blur(2px); opacity: 0.22; }
body.fog main::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: linear-gradient(0deg, rgba(200,200,215,.08), transparent 60%); }

.chakra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 620px) { .chakra { grid-template-columns: 1fr; } }
.chakra-panel { background: var(--bg2); border: 1px solid var(--line); border-radius: 4px 14px 4px 14px; padding: 14px 16px; }
.chakra-panel h3 { margin: 0 0 10px; font: 400 1.3rem/1 "Bebas", sans-serif; letter-spacing: 0.08em; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.chakra-panel h3 small { font: 0.78rem system-ui, sans-serif; letter-spacing: 0; color: var(--muted); }
.chakra-row { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 10px; margin: 8px 0; font-size: 0.86rem; }
.chakra-row b { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 92px; text-align: right; }
.chakra-bar { height: 10px; border-radius: 6px; background: rgba(255,255,255,.05); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.chakra-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #2a7fff, var(--chakra)); box-shadow: 0 0 12px var(--chakra);
  position: relative; transition: width 1s cubic-bezier(.2,.8,.2,1); }
.chakra-bar i { overflow: hidden; }
.chakra-bar i::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 60px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  animation: chakra-flow 2.2s linear infinite; will-change: transform; }
@keyframes chakra-flow { from { transform: translateX(-60px); } to { transform: translateX(600px); } }
.chakra-bar.warn i { background: linear-gradient(90deg, #d98a00, var(--gold)); box-shadow: 0 0 12px var(--gold); }
.chakra-bar.crit i { background: linear-gradient(90deg, #a1001a, var(--red)); box-shadow: 0 0 14px var(--red); }
.chakra-foot { margin-top: 8px; font-size: 0.8rem; }

.bb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; margin-bottom: 14px; }
.bb-map { position: relative; aspect-ratio: 360 / 150; border-radius: 10px; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #16121a, #0a090c); border: 1px solid var(--line); }
.bb-map img, .bb-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bb-map .hit { fill: var(--orange); opacity: 0.8; }
.bb-map .hit.pulse { animation: hit 3.2s ease-in-out infinite; }
@keyframes hit { 50% { opacity: 0.3; } }
.bb-map .strike { fill: none; stroke: var(--orange2); stroke-width: 0.45; stroke-dasharray: 6 300; stroke-linecap: round; opacity: 0.9; animation: strike 8s linear infinite; }
@keyframes strike { from { stroke-dashoffset: 6; } 40% { stroke-dashoffset: -300; } to { stroke-dashoffset: -300; } }
.bb-map .base { fill: var(--chakra); }
.bb-map .base-ring { fill: none; stroke: var(--chakra); stroke-width: 0.5; animation: ring 2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ring { from { transform: scale(1); opacity: 1; } to { transform: scale(4); opacity: 0; } }
.bb-hours { display: flex; align-items: flex-end; gap: 3px; height: 46px; margin: 12px 0 4px; }
.bb-hours i { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(0deg, var(--orange), var(--orange2)); opacity: 0.75; }
.bb-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 14px; }
@media (max-width: 760px) { .bb-cols { grid-template-columns: 1fr; } }
.bb-cols h3 { margin: 0 0 8px; font: 400 1.1rem/1 "Bebas", sans-serif; letter-spacing: 0.1em; color: var(--muted); }
.wanted { display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 3px 10px 3px 10px;
  background: linear-gradient(90deg, rgba(224,36,58,.08), transparent); }
.wanted .wr { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--orange); border-radius: 50%; font: 400 1.1rem/1 "Bebas", sans-serif; color: var(--orange); }
.wanted b { display: block; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wanted small { color: var(--muted); font-size: 0.78rem; }
.wanted > div { min-width: 0; }

.hb-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.hb-head .big small { font-size: 1.1rem; color: var(--muted); }
.ekg { margin-top: 4px; }
.ekg-line { fill: none; stroke: var(--orange2); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 4000; animation: ekg-draw 3s ease-out both; }
.ekg-glow { fill: none; stroke: var(--orange); stroke-width: 7; opacity: 0.18; filter: blur(3px); }
@keyframes ekg-draw { from { stroke-dashoffset: 4000; } to { stroke-dashoffset: 0; } }
.ekg-dot { fill: #fff; filter: drop-shadow(0 0 6px var(--orange)); animation: pulse 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { 50% { transform: scale(1.6); } }

.missions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.mission { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 4px 14px 4px 14px; background: var(--bg2); opacity: 0.72; }
.mission svg { flex: none; width: 40px; height: 40px; color: var(--muted); padding: 6px; border-radius: 50%; border: 1px solid var(--line); }
.mission b { display: block; font: 400 1.15rem/1.05 "Bebas", sans-serif; letter-spacing: 0.06em; }
.mission small { display: block; color: var(--muted); font-size: 0.78rem; margin-bottom: 6px; }
.mission > div { flex: 1; min-width: 0; }
.mbar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.mbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--orange2)); }
.mission.done { opacity: 1; border-color: color-mix(in srgb, var(--orange) 55%, transparent); box-shadow: 0 0 22px -10px var(--orange); }
.mission.done svg { color: var(--orange); border-color: var(--orange); box-shadow: 0 0 12px -2px var(--orange); }
@media (prefers-reduced-motion: reduce) { .chakra-bar i::after, .bb-map .hit, .bb-map .strike, .bb-map .base-ring, .ekg-line, .ekg-dot, .mission.done svg { animation: none; } }

/* Jutsu-Zustände */
body.rumble main { animation: rumble 0.09s linear infinite; }
@keyframes rumble { 0% { transform: translate(0, 0); } 25% { transform: translate(-2px, 1px); } 50% { transform: translate(1px, -2px); } 75% { transform: translate(2px, 1px); } }
.card.burning { border-color: rgba(200, 20, 60, 0.6); animation: burn 0.14s steps(2) infinite alternate;
  box-shadow: inset 0 -60px 50px -30px rgba(0, 0, 0, 0.95), inset 0 -8px 18px -6px rgba(200, 20, 70, 0.55), 0 0 30px -8px rgba(190, 20, 70, 0.7); }
@keyframes burn { from { filter: brightness(0.92) saturate(1.1); } to { filter: brightness(0.8) saturate(1.3) contrast(1.05); } }
main.kai { animation: kai 0.75s steps(1) both; }
@keyframes kai { 0% { filter: invert(1) hue-rotate(180deg); } 12% { filter: none; transform: scale(1.01); } 22% { filter: invert(0.85) saturate(3) hue-rotate(90deg); } 34% { filter: none; } 46% { filter: saturate(0) contrast(1.6); transform: translateX(-4px); } 58% { filter: none; transform: none; } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { body.rumble main, .card.burning, main.kai { animation: none; } }

/* Fleisch-Deals */
.deal-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.deal-tabs button { background: var(--bg2); color: var(--muted); border: 1px solid var(--line); box-shadow: none; }
.deal-tabs button[aria-selected="true"] { color: #fff; background: linear-gradient(135deg, var(--orange2), var(--orange)); border-color: transparent; }
.deal-tabs .muted { margin-left: auto; font-size: 0.8rem; }
.deals { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.deal { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; color: var(--text); text-decoration: none;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 3px 12px 3px 12px; transition: border-color 0.2s, transform 0.2s; }
.deal:hover { border-color: var(--orange); transform: translateY(-2px); }
.deal .dd { display: grid; place-items: center; height: 40px; border-radius: 6px; font: 400 1.25rem/1 "Bebas", sans-serif; letter-spacing: 0.03em;
  color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.deal.hot .dd { color: #fff; background: linear-gradient(135deg, var(--orange2), var(--orange)); border-color: transparent; box-shadow: 0 0 16px -4px var(--orange); }
.deal .dn { min-width: 0; }
.deal .dn b { display: block; font-size: 0.9rem; font-weight: 600; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.deal .dn small { color: var(--muted); font-size: 0.78rem; }
.deal .dp { text-align: right; white-space: nowrap; }
.deal .dp b { display: block; font: 400 1.35rem/1 "Bebas", sans-serif; letter-spacing: 0.03em; color: var(--orange2); }
.deal .dp s { color: var(--muted); font-size: 0.78rem; }
.codes { display: grid; gap: 8px; margin-bottom: 12px; }
.code-chip { display: flex; gap: 12px; align-items: center; padding: 8px 12px; border: 1px dashed var(--orange); border-radius: 8px; background: rgba(224,36,58,.06); }
.code-chip code { flex: none; font: 400 1.3rem/1 "Bebas", sans-serif; letter-spacing: 0.1em; color: var(--orange2); background: none; border: 0; padding: 0; }
.code-chip span { min-width: 0; font-size: 0.8rem; } .code-chip b { display: block; } .code-chip small { color: var(--muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal .dd small { display: block; font: 0.6rem system-ui, sans-serif; letter-spacing: 0; opacity: 0.8; }
.deal .dd { line-height: 0.9; text-align: center; }