/* Tägliche Belohnungen: Fenster mit Login-Serie und Tagesaufgaben, Eintrag auf der Mehr-Seite.
   Das Fenster sieht in beiden Designs gleich aus (dunkelblau mit Gold), damit es sich wie ein Ereignis anfühlt. */

.tb {
  position: fixed;
  inset: 0;
  z-index: 62;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(4, 8, 16, .72);
  backdrop-filter: blur(6px);
  animation: viewin .3s var(--ease-out);
}

.tb-box {
  position: relative;
  display: grid;
  gap: 10px;
  width: min(100%, 420px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 16px 16px;
  border: 2px solid #c9a54e;
  border-radius: 22px;
  background: radial-gradient(ellipse at 50% 0, #2d3f63, #121a2b 60%, #0b111d);
  color: #eef3f8;
  box-shadow: 0 0 0 4px rgba(201, 165, 78, .18), 0 30px 80px rgba(0, 0, 0, .6);
  animation: tb-rein .5s var(--spring);
}

@keyframes tb-rein {
  from { opacity: 0; transform: translateY(40px) scale(.9); }
}

.tb-zu {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.tb-kicker {
  margin: 0;
  padding: 0 38px;
  color: #e6c77a;
  font: 800 11px/1 "Source Sans 3", sans-serif;
  letter-spacing: .18em;
  text-align: center;
  text-transform: uppercase;
}

.tb-titel {
  margin: 0;
  background: linear-gradient(180deg, #fff, #ffd98a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font: 800 34px/1 "Barlow Condensed", sans-serif;
  letter-spacing: .02em;
  text-align: center;
  text-transform: uppercase;
}

.tb-serie {
  margin: 0;
  color: #c9d4e0;
  font-size: 14px;
  text-align: center;
}

/* ---------- Die 7 Tage der Serie: Tag 7 ist doppelt so breit und golden ---------- */
.tb-tage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.tb-tag {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-height: 84px;
  padding: 8px 4px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  text-align: center;
}

.tb-tag:last-child {
  grid-column: span 2;
  border-color: #c9a54e;
  background: linear-gradient(135deg, rgba(255, 211, 77, .2), rgba(255, 255, 255, .04));
}

.tb-tag-nr {
  color: #a9b6c4;
  font: 700 11px/1 "Source Sans 3", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tb-tag img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: contain;
}

.tb-tag.ist-pack img {
  width: auto;
  height: 44px;
  border-radius: 3px;
}

.tb-tag b {
  font: 800 16px/1 "Barlow Condensed", sans-serif;
}

.tb-tag.geholt {
  opacity: .5;
}

.tb-tag.geholt::after {
  content: "✓";
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2fb66e;
  color: #fff;
  font: 800 13px/1 sans-serif;
}

.tb-tag.heute {
  border-color: #ffd34d;
  background: linear-gradient(180deg, rgba(255, 211, 77, .3), rgba(255, 211, 77, .08));
  box-shadow: 0 0 0 2px rgba(255, 211, 77, .4), 0 0 22px rgba(255, 211, 77, .45);
  animation: tb-heute 1.6s ease-in-out infinite;
}

.tb-tag.heute .tb-tag-nr {
  color: #ffd34d;
}

@keyframes tb-heute {
  50% { scale: 1.05; }
}

/* eben abgeholt: kurz hell aufblitzen */
.tb-tag.eben {
  opacity: 1;
  animation: tb-eben .7s var(--spring);
}

@keyframes tb-eben {
  0% { scale: 1.25; filter: brightness(1.8); }
}

.tb-holen {
  height: 56px !important;
  font-size: 22px !important;
}

.tb-holen:not(:disabled) {
  animation: tb-knopf 1.8s ease-in-out infinite;
}

.tb-holen:disabled {
  font-size: 17px !important;
}

@keyframes tb-knopf {
  50% { filter: brightness(1.18); }
}

/* ---------- Tagesaufgaben ---------- */
.tb-h {
  margin: 8px 0 0;
  color: #fff;
  font: 800 20px/1 "Barlow Condensed", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tb-aufgaben {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tb-aufgaben li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
}

.tb-aufgaben li.fertig {
  border-color: #ffd34d;
  background: rgba(255, 211, 77, .1);
}

.tb-aufgaben li.geholt {
  opacity: .55;
}

.tb-aufgabe {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.tb-aufgabe b {
  font: 700 15px/1.2 "Source Sans 3", sans-serif;
}

.tb-balken {
  display: block;
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}

.tb-balken i {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #ffb800, #ffd34d);
  transition: width .6s var(--ease-out);
}

.tb-lohn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ffd34d;
  font: 800 16px/1 "Barlow Condensed", sans-serif;
}

.tb-lohn img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.tb-stand,
.tb-erledigt {
  min-width: 64px;
  color: #a9b6c4;
  font: 700 14px/1 "Barlow Condensed", sans-serif;
  text-align: right;
}

.tb-erledigt {
  color: #5fdc95;
}

.tb-abholen {
  min-width: 64px;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd34d, #f5a300);
  color: #3a2700;
  font: 800 15px/1 "Barlow Condensed", sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 3px 0 #a86c00, 0 0 16px rgba(255, 211, 77, .5);
  cursor: pointer;
  animation: tb-hops 1.4s ease-in-out infinite;
}

.tb-abholen:active {
  translate: 0 2px;
}

@keyframes tb-hops {
  50% { scale: 1.08; }
}

.tb-bonus {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px dashed rgba(255, 211, 77, .5);
  border-radius: 12px;
  color: #e6c77a;
  font: 700 14px/1.2 "Source Sans 3", sans-serif;
}

.tb-bonus img {
  width: auto;
  height: 38px;
  border-radius: 3px;
  filter: grayscale(.6);
}

.tb-bonus span {
  flex: 1;
}

.tb-bonus.bereit {
  border-style: solid;
  border-color: #ffd34d;
  background: rgba(255, 211, 77, .12);
  box-shadow: 0 0 22px rgba(255, 211, 77, .3);
}

.tb-bonus.bereit img,
.tb-bonus.geholt img {
  filter: none;
}

.tb-bonus.geholt {
  opacity: .6;
}

.tb-neu {
  margin: 2px 0 0;
  color: #8796a8;
  font-size: 12px;
  text-align: center;
}

/* Lange Hinweise («Aufgabe geschafft: …») dürfen umbrechen statt über den Rand zu ragen */
.hinweis {
  width: max-content;
  max-width: min(440px, calc(100vw - 32px));
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}

/* ---------- Eintrag auf der Mehr-Seite ---------- */
.tb-eintrag {
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid #c9a54e !important;
  background: linear-gradient(135deg, rgba(255, 211, 77, .18), var(--surface)) !important;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tb-eintrag-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffd34d, #f5a300);
  color: #3a2700;
  box-shadow: 0 3px 0 #a86c00;
}

.tb-eintrag-txt {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.tb-eintrag-txt b {
  font: 800 18px/1.1 "Barlow Condensed", sans-serif;
}

.tb-eintrag-txt small {
  color: var(--fg-2);
  font-size: 13px;
}

.tb-eintrag-pfeil {
  flex: none;
  color: var(--fg-2);
}

.tb-eintrag.bereit .tb-eintrag-icon {
  animation: rb-gift 2.4s ease-in-out infinite;
}

.tb-eintrag.bereit small {
  color: var(--accent-ink);
  font-weight: 700;
}

/* App für Android: gleicher Aufbau wie der Eintrag oben, aber in RailBase-Rot */
.app-laden {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), var(--surface)) !important;
  text-decoration: none;
}

.app-laden .tb-eintrag-icon {
  background: linear-gradient(180deg, #ff4251, #c3101e);
  color: #fff;
  box-shadow: 0 3px 0 #7d0a14;
}

/* in der installierten App braucht es den Knopf nicht */
@media (display-mode: standalone) {
  .app-laden {
    display: none !important;
  }
}