/* ManaBound – seitenspezifische Styles */

/* ---------- Abenteuer-Ritual ---------- */
.adventure { text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; border-color: var(--border-strong); }
.adventure__title { font-family: var(--font-display); font-size: clamp(1.4rem, 5vw, 1.9rem); }
.adventure__form { width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }

/* ---------- Hero ---------- */
.hero { display: flex; flex-direction: column; gap: 16px; padding: 22px 16px; overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 380px; height: 380px; right: -120px; top: -160px; background: radial-gradient(circle, rgba(63,208,127,.18), transparent 65%); pointer-events: none; }
.hero__weights { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; text-align: center; }
.hero__side { display: flex; flex-direction: column; gap: 2px; }
.hero__side--goal .hero__small { color: var(--gold); }
.hero__small { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.hero__main { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.hero__big { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 14vw, 5.4rem); letter-spacing: -.01em; text-shadow: 0 0 40px rgba(63, 208, 127, .35); }
.hero__unit { color: var(--muted); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-top: 2px; }
.hero__meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: .88rem; color: var(--muted); gap: 8px; flex-wrap: wrap; }
.hero__meta strong { color: var(--text); font-size: 1rem; }
.hero__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; text-align: center; }
.hero__facts dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.hero__facts dd { margin: 2px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.hero__edit { text-align: center; font-size: .85rem; }

.progress-card__level { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.progress-card .small { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }

.loot-card__line { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin-bottom: 4px; }
.loot-card .small { margin: 12px 0 8px; }
.mini-goal { margin-bottom: 12px; }
.mini-goal__head { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: 4px; }
.cta-card { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

.quest-list--cols { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 900px) { .quest-list--cols { grid-template-columns: 1fr 1fr; } }

/* ---------- Colors ---------- */
.color-list { display: flex; flex-direction: column; gap: 14px; }
.color-row__link { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none !important; padding: 6px; border-radius: 12px; }
.color-row__link:hover { background: color-mix(in srgb, var(--c) 8%, transparent); }
.color-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.color-row__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.color-row__name { font-family: var(--font-display); font-weight: 800; letter-spacing: .14em; color: var(--c); }
.color-row__name small { font-family: var(--font-body); letter-spacing: .02em; font-weight: 500; color: var(--muted); margin-left: 6px; text-transform: none; }
.color-row__level { font-weight: 800; letter-spacing: .08em; }
.color-row__sub { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); gap: 8px; }
.color-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .color-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .color-grid { grid-template-columns: repeat(3, 1fr); } }
.color-card { display: flex; flex-direction: column; gap: 10px; border-color: color-mix(in srgb, var(--c) 35%, var(--border)); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, transparent), transparent 60%), var(--surface); }
.color-card__head { display: flex; align-items: center; gap: 14px; }
.color-card__head h2 { font-family: var(--font-display); letter-spacing: .16em; color: var(--c); }
.color-card__aspect { color: var(--muted); }
.color-card__level { margin-left: auto; text-align: right; display: flex; flex-direction: column; }
.color-card .btn { align-self: flex-start; }
.color-card__level .stat__value { white-space: nowrap; }

/* ---------- Loot ---------- */
.vault { border-color: var(--border-strong); }
.vault__top { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
.vault__icon { font-size: 3.2rem; filter: drop-shadow(0 0 16px rgba(255, 207, 138, .6)); }
.vault__top .stat-row { flex: 1; margin: 0; }
.loot-grid { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 16px; }
@media (min-width: 700px) { .loot-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }
.loot { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,.03); }
.loot__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.loot__weight { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; }
.loot__state { font-size: .8rem; color: var(--muted); text-align: right; }
.loot__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.loot__item { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; }
.loot__icon { font-size: 1.8rem; line-height: 1; filter: grayscale(1) opacity(.45); }
.loot__img { width: 2rem; height: 2rem; object-fit: cover; border-radius: 6px; }
.loot__label { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.loot__count { font-weight: 700; }
.loot__item.is-redeemed .loot__count { text-decoration: line-through; opacity: .7; }
.loot.is-earned { border-color: color-mix(in srgb, var(--good) 55%, transparent); background: color-mix(in srgb, var(--good) 8%, transparent); }
.loot.is-earned .loot__icon { filter: drop-shadow(0 0 10px #ffcf8a); }
.loot.is-next { border-color: var(--gold); animation: glow-pulse 2.6s infinite; --c: var(--gold); }
.loot.is-next .loot__icon { filter: none; }
.loot__actions { grid-column: 2; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.loot__add { align-self: flex-start; }
.shop-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
.shop-item { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,.03); }
.shop-item__icon { font-size: 2rem; }
.shop-item h3 { font-family: var(--font-display); }
.shop-item__foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; gap: 8px; }

/* ---------- Achievements ---------- */
.achievement-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .achievement-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .achievement-grid { grid-template-columns: repeat(3, 1fr); } }
.achievement { display: flex; flex-direction: column; gap: 6px; }
.achievement h2 { font-family: var(--font-display); letter-spacing: .12em; font-size: 1.05rem; }
.achievement__icon { font-size: 2.4rem; }
.achievement__foot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; align-items: center; }
.achievement.is-locked { opacity: .55; filter: saturate(.4); }
.achievement.is-unlocked { border-color: color-mix(in srgb, var(--c, var(--gold)) 50%, var(--border)); }
.achievement.is-unlocked .achievement__icon { filter: drop-shadow(0 0 12px var(--c, var(--gold))); }

/* ---------- Goals ---------- */
.goal-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .goal-grid { grid-template-columns: 1fr 1fr; } }
.goal { display: flex; flex-direction: column; gap: 10px; border-color: color-mix(in srgb, var(--c) 30%, var(--border)); }
.goal.is-completed { opacity: .8; }
.goal__head { display: flex; align-items: center; gap: 12px; }
.goal__head h2 { font-family: var(--font-display); font-size: 1.15rem; }
.goal__percent { margin-left: auto; font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--c); }
.goal__values { font-weight: 700; }

/* ---------- Gewicht, Training, Charts ---------- */
.entry-weight { font-family: var(--font-display); font-size: 1.3rem; }
.kind-bars { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.kind-bar { display: grid; grid-template-columns: 1fr; gap: 4px; }
@media (min-width: 640px) { .kind-bar { grid-template-columns: 180px 1fr 140px; align-items: center; } }
.chart { width: 100%; height: auto; display: block; }
.chart-empty { padding: 32px 0; text-align: center; color: var(--muted); }
.chart__label { fill: var(--muted); font-size: 11px; }
.chart__label--dim { opacity: .55; }
.chart__label--val { fill: var(--text); font-weight: 700; }
.chart__line { stroke-width: 1.2; stroke-dasharray: 5 5; }
.chart__line--start { stroke: var(--muted); }
.chart__line--target { stroke: var(--gold); }
.chart__milestone { stroke: rgba(255,255,255,.1); stroke-width: 1; }
.chart__path { fill: none; stroke: var(--c-green); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: draw 1.2s ease-out both; filter: drop-shadow(0 0 6px rgba(63,208,127,.6)); }
.chart__dot { fill: var(--bg); stroke: var(--c-green); stroke-width: 2; }
.chart__dot--last { fill: var(--c-green); }
.chart__bar { fill: var(--c, var(--gold)); opacity: .85; }

/* ---------- Summary ---------- */
.summary { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; border-color: var(--border-strong); }
.summary__banner { font-family: var(--font-display); font-weight: 800; letter-spacing: .3em; font-size: 1.3rem; color: var(--gold); text-shadow: 0 0 24px var(--gold); }
.summary__banner--open { color: var(--muted); text-shadow: none; }
.summary__big { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.summary__big .stat__value { font-size: clamp(1.8rem, 7vw, 2.6rem); }
.summary__line { font-size: 1.1rem; }
.summary .hero__facts { width: 100%; }
.summary .chips-row { justify-content: center; }
.summary .feed { width: 100%; text-align: left; }
.week-weights { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.week-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.03); font-size: .8rem; }
.week-day strong { font-family: var(--font-display); font-size: .95rem; }
.week-day.is-today { border-color: var(--gold); }
.week-day.is-future { opacity: .4; }

/* ---------- Einstellungen ---------- */
.notif-list { display: flex; flex-direction: column; gap: 6px; }
.notif-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.notif-item input[type=time] { width: auto; min-width: 120px; }
.link-list { display: flex; flex-direction: column; gap: 10px; }
.link-list a { padding: 12px; border-radius: 12px; border: 1px solid var(--border); color: var(--text); background: rgba(255,255,255,.03); }
.card form + .form, .card .form + .form { margin-top: 18px; }

@media (max-width: 480px) {
  .hero__weights { grid-template-columns: 1fr 1.6fr 1fr; }
  .stat__value { font-size: 1.35rem; }
  .overlay__big { font-size: 2.8rem; }
}