/* Tutorial-Modus (tutorial.js): Glühbirne, Markierung, Sprechblase, Warte-Pille. */

.tut-fab {
  position: fixed; left: .9rem; bottom: .9rem; z-index: 9000;
  width: 2.9rem; height: 2.9rem; margin: 0; padding: 0; border-radius: 50%;
  border: 1px solid var(--w-border, #dde2ea);
  background: var(--w-surface, #fff); color: var(--w-warning, #b45309);
  box-shadow: var(--w-shadow-md, 0 6px 18px rgba(16, 24, 40, .15));
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.tut-fab svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tut-fab:hover { transform: translateY(-1px); }
body.tut-active .tut-fab { background: var(--w-warning, #b45309); color: #fff; border-color: transparent; }
body.admin .tut-fab { left: auto; right: .9rem; }
body.judge .tut-fab { bottom: 5.4rem; }
@media (min-width: 900px) { body.judge .tut-fab { bottom: .9rem; } }

.tut-hl {
  position: fixed; z-index: 8990; pointer-events: none; display: none;
  border-radius: .7rem; border: 2px solid var(--w-warning, #b45309);
  box-shadow: 0 0 0 9999px rgba(10, 14, 22, .55), 0 0 0 4px rgba(245, 158, 11, .35);
  transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}
.tut-hl.is-on { display: block; }
.tut-hl.is-click { animation: tut-pulse 1.4s ease-in-out infinite; }
@keyframes tut-pulse {
  0%, 100% { box-shadow: 0 0 0 9999px rgba(10, 14, 22, .55), 0 0 0 4px rgba(245, 158, 11, .35); }
  50% { box-shadow: 0 0 0 9999px rgba(10, 14, 22, .55), 0 0 0 10px rgba(245, 158, 11, .15); }
}

.tut-tip {
  position: fixed; z-index: 9001; display: none; width: min(24rem, calc(100vw - 1rem));
  padding: .8rem .9rem .7rem; border-radius: .9rem;
  background: var(--w-surface, #fff); color: var(--w-text, #1b2230);
  border: 1px solid var(--w-border, #dde2ea); box-shadow: var(--w-shadow-md, 0 6px 18px rgba(16, 24, 40, .2));
  font-size: .92rem; line-height: 1.45;
}
.tut-tip.is-on { display: block; }
.tut-tip__head { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.tut-tip__title { font-weight: 800; }
.tut-tip__count { margin-left: auto; font-size: .78rem; color: var(--w-text-muted, #5b6474); font-variant-numeric: tabular-nums; }
.tut-tip__x { margin: 0; padding: 0 .4rem; width: auto; min-height: 0; border: 0; background: transparent; color: var(--w-text-muted, #5b6474); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.tut-tip__text { margin: 0 0 .6rem; }
.tut-tip__actions { display: flex; align-items: center; gap: .5rem; }
.tut-tip__hint { font-size: .8rem; font-weight: 700; color: var(--w-warning, #b45309); margin-right: auto; }
.tut-btn {
  margin: 0; padding: .4rem .9rem; width: auto; min-height: 2.2rem; border-radius: .6rem; border: 0;
  background: var(--w-primary-bg, #1d4ed8); color: #fff; font-weight: 700; font-size: .88rem; cursor: pointer;
}
.tut-btn:last-child { margin-left: auto; }
.tut-btn--quiet { background: transparent; color: var(--w-text-muted, #5b6474); border: 1px solid var(--w-border, #dde2ea); margin-left: 0; }

.tut-pill {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 9001;
  display: inline-flex; align-items: center; gap: .5rem; max-width: calc(100vw - 2rem);
  padding: .45rem .5rem .45rem .8rem; border-radius: 999px;
  background: var(--w-surface, #fff); color: var(--w-text, #1b2230);
  border: 1px solid var(--w-border, #dde2ea); box-shadow: var(--w-shadow-md, 0 6px 18px rgba(16, 24, 40, .2));
  font-size: .85rem; font-weight: 700;
}
.tut-pill[hidden] { display: none; }
.tut-pill__dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--w-warning, #b45309); animation: tut-blink 1s ease-in-out infinite; }
@keyframes tut-blink { 50% { opacity: .3; } }
.tut-pill__x { margin: 0; padding: 0 .5rem; width: auto; min-height: 0; border: 0; background: transparent; color: var(--w-text-muted, #5b6474); font-size: 1.1rem; cursor: pointer; }

.tut-toast {
  position: fixed; left: 50%; bottom: 4.2rem; transform: translateX(-50%) translateY(8px); z-index: 9002; opacity: 0;
  padding: .5rem .9rem; border-radius: .7rem; background: var(--w-text, #1b2230); color: #fff; font-size: .85rem;
  transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.tut-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

@media print { .tut-fab, .tut-hl, .tut-tip, .tut-pill, .tut-toast { display: none !important; } }