:root {
      --bg: #020617;
      --panel: #0b1220;
      --line: #1f2937;
      --accent: #38bdf8;
      --accent-soft: #0ea5e9;
      --text: #e5e7eb;
      --muted: #9ca3af;
      --danger: #b91c1c;
      --good: #16a34a;
      --neutral: #1c1fc6;
      --highlight: rgba(56, 189, 148, 0.25);
      --highlight-border: rgba(56, 189, 148, 0.7);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      padding: 0 16px 24px;
      background: radial-gradient(circle at 0 0, #1e293b 0, #020617 55%);
      color: var(--text);
      font: 14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 10;
      padding: 12px 18px;
      border-bottom: 1px solid #111827;
      background: rgba(15, 23, 42, 0.96);
      backdrop-filter: blur(10px);
    }

    header h1 { margin: 0 0 4px; font-size: 18px; }
    header p { margin: 0; color: var(--muted); font-size: 13px; }

    main {
      width: min(100%, 1600px);
      margin: 0 auto;
      padding: 16px 0;
      display: block;
    }

    .hidden { display: none !important; }

    .card {
      width: 100%;
      min-width: 0;
    }

    h2 { margin: 0 0 10px; font-size: 16px; }

    .settings-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .teams-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 12px;
    }

    .actions-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
      margin-top: 10px;
    }

    label {
      display: block;
      margin-bottom: 4px;
      font-size: 11px;
      color: var(--muted);
    }

    select, input, button {
      width: 100%;
      padding: 7px 9px;
      border-radius: 9px;
      border: 1px solid #1f2937;
      background: #020617;
      color: var(--text);
      font-size: 13px;
    }

    button {
      cursor: pointer;
      background: #1d4ed8;
      border-color: #2563eb;
      transition: opacity 0.15s ease, transform 0.05s ease;
    }

    button.secondary { background: #111827; border-color: #374151; }
    button.good { background: #15803d; border-color: #16a34a; }
    button.danger { background: #991b1b; border-color: #dc2626; }

    button:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      transform: none;
    }

    button:not(:disabled):active {
      transform: translateY(1px);
    }

    .check {
      display: flex; /*inline-flex;*/
      align-items: center;
      gap: 6px;
      min-height: 32px;
    }

    .check input { width: auto; }

    .notice {
      margin-top: 10px;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid #1e293b;
      background: #020617;
      color: #cbd5f5;
      font-size: 12px;
    }

    .notice.success { border-color: #166534; background: #052e16; color: #bbf7d0; }
    .notice.error { border-color: #7f1d1d; background: #3f1212; color: #fecaca; }

    .team {
      padding: 10px;
      border-radius: 10px;
      border: 1px solid #1f2937;
      background: #020617;
    }

    .team h3 {
      margin: 0 0 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid #1f2937;
      font-size: 11px;
      color: var(--muted);
      white-space: nowrap;
    }

    .slot {
      display: grid;
      grid-template-columns:
        minmax(100px, 0.8fr)
        minmax(170px, 1.5fr)
        minmax(170px, 1.5fr)
        max-content
        max-content;

      grid-template-areas:
        "role character gear auto admin"
        "specials specials specials specials specials";

      gap: 10px 12px;
      align-items: end;
      min-width: 0;
      padding: 12px 0;
      border-top: 1px solid #111827;
    }

    .slot:first-of-type {
      border-top: none;
    }

    .slot-role {
      grid-area: role;
      min-width: 0;
    }

    .slot-character {
      grid-area: character;
      min-width: 0;
    }

    .slot-character input {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--panel);
      color: var(--text);
      font-size: 13px;
      cursor: text;
      transition: border-color 0.2s;
    }

    .slot-character input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--highlight);
    }

    .slot-character input::placeholder {
      color: var(--muted);
      opacity: 0.7;
    }

    .slot-gear {
      grid-area: gear;
      min-width: 0;
    }

    .slot-specials {
      grid-area: specials;
      min-width: 0;
      margin-top: 2px;
    }

    .slot-auto {
      grid-area: auto;
    }

    .slot-admin {
      grid-area: admin;
    }

    .slot-auto,
    .slot-admin {
      align-self: end;
      display: flex;
      align-items: center;
      gap: 6px;
      min-height: 34px;
      margin: 0;
      padding: 7px 9px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      color: var(--text);
      font-size: 12px;
      white-space: nowrap;
      cursor: pointer;
    }

    .slot-auto:hover,
    .slot-admin:hover {
      border-color: var(--accent-soft);
    }

    .slot-auto input,
    .slot-admin input {
      flex: 0 0 auto;
      width: 16px;
      height: 16px;
      margin: 0;
      cursor: pointer;
    }

    .slot > div > label,
    .slot-gear > label,
    .special-label {
      display: block;
      margin-bottom: 4px;
      color: var(--muted);
      font-size: 11px;
      letter-spacing: 0.35px;
      text-transform: uppercase;
    }

    .slot-auto,
    .slot-admin {
      text-transform: none;
      letter-spacing: normal;
    }

    .slot select {
      width: 100%;
      min-width: 0;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--panel);
      color: var(--text);
      font-size: 13px;
    }

    .slot select:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--highlight);
    }

    .slot-gear > div {
      min-width: 0;
    }

    .gear-selects {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 5px;
      min-width: 0;
    }

    .gear-selects.has-bat {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .special-selection {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px 12px;
      min-width: 0;
      margin: 0;
      padding: 9px;
      border: 1px solid rgba(148, 163, 184, 0.28);
      border-radius: 8px;
      background: rgba(15, 23, 42, 0.45);
    }

    .special-selection.hidden {
      display: none !important;
    }

    .special-label {
      display: grid;
      grid-template-rows: auto minmax(0, auto);
      gap: 4px;
      min-width: 0;
      margin: 0;
      color: #cbd5e1;
      font-size: 12px;
    }

    .special-label.hidden {
      display: none !important;
    }

    .special-label select {
      width: 100%;
      min-width: 0;
    }

    .field-card {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .field-wrapper {
      position: relative;
      border-radius: 12px;
      border: 1px solid #1f2937;
      overflow: hidden;
      aspect-ratio: 5 / 3;
      width: min(65vw, 1200px);
      margin-left: auto;
      margin-right: auto;
      background-image: url("../img/stadions/hogwarts-a-day.jpg"); /* Wird später durch das Bild des aktiven Stadions geändert werden*/
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .field-overlay,
    .field-canvas,
    .field-light-layer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .field-canvas {
      z-index: 10;
      font-size: 10px;
    }

    .field-overlay {
      position: absolute;
      inset: 0;
      z-index: 100;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: hidden;
      opacity: 0.6;
      transition: opacity 180ms ease;
    }

    .field-overlay.hidden {
      display: none;
    }

    #fieldWeatherTint {
      pointer-events: none;
    }

    .field-light-layer {
      position: absolute;
      inset: 0;
      z-index: 105;
      pointer-events: none;
    }

    .field-light-source {
      position: absolute;
      transform: translate(-50%, -50%);
      border: 2px solid rgba(250, 204, 21, 0.8);
      border-radius: 50%;
      background: rgba(250, 204, 21, 0.08);
      box-shadow:
        0 0 14px rgba(250, 204, 21, 0.75),
        inset 0 0 12px rgba(250, 204, 21, 0.25);
      pointer-events: none;
    }

    .ring {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 999px;
      transform: translate(-50%, -50%);
      z-index: 3;
      pointer-events: none;

      border: 2px solid #facc15;
      background: rgba(0, 0, 0, 0.1);
      box-shadow: 0 0 6px rgba(250, 204, 21, 0.8);

      transition:
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease,
        opacity 160ms ease;
    }

    .ring.ring-damaged {
      border-color: #f97316;
      background: rgba(249, 115, 22, 0.25);
      box-shadow: 0 0 8px rgba(249, 115, 22, 0.75);
    }

    .ring.ring-critical {
      border-color: #dc2626;
      background: rgba(220, 38, 38, 0.25);
      box-shadow: 0 0 8px rgba(220, 38, 38, 0.7);
    }

    .ring.ring-inactive {
      border-color: #64748b;
      background: rgba(71, 85, 105, 0.28);
      box-shadow: none;
      opacity: 0.72;
    }

    .ring.ring-inactive::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 17px;
      height: 2px;
      background: #ef4444;
      transform: translate(-50%, -50%) rotate(-45deg);
      box-shadow: 0 0 3px rgba(239, 68, 68, 0.8);
    }

    .ball {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 999px;
      border: 1px solid #111827;
      transform: translate(-50%, -50%);
      display: grid;
      place-items: center;
      font-size: 8px;
      z-index: 4;
    }

    .ball.quaffle { background: #f97316; }
    .ball.bludger { background: #020617; color: #e5e7eb; }
    .ball.snitch { background: #facc15; color: #111827; }

    .player {
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 999px;
      transform: translate(-50%, -50%);
      border: 1px solid #e5e7eb;
      display: grid;
      place-items: center;
      font-size: 8px;
      font-weight: 600;
      z-index: 5;
    }

    .player.A { background: #f97316; color: #111827; } /*Fallback*/
    .player.B { background: #6C9DBC; color: #0b1120; }
    .player.D { background: #3E2928; color: #ffffff; }
    .player.G { background: #ae0001; color: #ffffff; }
    .player.H { background: #f0c75e; color: #111827; }
    .player.M { background: #5b2299; color: #ffffff; }
    .player.R { background: #1d2d75; color: #ffffff; }
    .player.S { background: #1a7f3c; color: #111827; }

    .player.highlighted {
      box-shadow: 0 0 8px rgba(56, 189, 248, 0.9);
    }

    .player.current-turn {
      border: 3px solid #ef4444;
      box-shadow:
        0 0 0 2px rgba(127, 29, 29, 0.8),
        0 0 12px rgba(239, 68, 68, 0.95);
      z-index: 8;
    }

    .player.reaction-turn {
      outline: 3px solid #ffd54a;
      box-shadow:
        0 0 0 3px rgba(255, 213, 74, 0.32),
        0 0 16px rgba(255, 213, 74, 0.88);
      animation: reactionPulse 0.8s ease-in-out infinite alternate;
    }

    @keyframes reactionPulse {
      from {transform: translate(-50%, -50%) scale(1);}
      to {transform: translate(-50%, -50%) scale(1.12);}
    }

    .active-player-hp {
      margin: 6px 0 10px;
      color: #f7d9d9;
      font-weight: 700;
    }

    .active-player-hp.low-hp {
      color: #ff6b6b;
    }

    .active-player-mp {
      margin: 6px 0 10px;
      color: #a4e2eb;
      font-weight: 700;
    }

    .active-player-hp.low-mp {
      color: #4650e4;
    }

    .cell-highlight {
      position: absolute;
      border: 2px solid var(--highlight-border);
      background: var(--highlight);
      pointer-events: none;
      z-index: 2;
    }

    .cell-path {
      position: absolute;
      border: 1px dashed rgba(148, 163, 184, 0.8);
      background: rgba(15, 23, 42, 0.4);
      pointer-events: none;
      z-index: 2;
    }

    .log {
      height: 220px;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid #1f2937;
      background: #020617;
      font-size: 11px;
      overflow: auto;
      line-height: 1.4;
    }

    .log-entry { margin: 0 0 3px; }

    .engine-info {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
      min-width: 0;
      font-size: 11px;
    }

    .tag {
      min-width: 0;
      overflow: hidden;
      padding: 4px 7px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .viewer-hint {
      margin-bottom: 8px;
      font-size: 12px;
      color: var(--muted);
    }

    .controls-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
      gap: 10px;
      align-items: start;
    }

    .controls-grid > * {
      min-width: 0;
    }

    .admin-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 6px;
    }

    .admin-controls button {
      width: auto;
      flex: 1 1 180px;
    }

    .player-controls,
    .special-controls {
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #020617;
      color: var(--muted);
      font-size: 12px;
      min-width: 0;
      overflow: visible;
    }

    .player-controls h3,
    .special-controls h3 {
      margin: 0 0 6px;
      font-size: 13px;
    }

    .player-controls {
      display: block;
      color: var(--muted);
      margin-bottom: 6px;
    }

    .player-controls {
      margin-bottom: 4px;
    }

    .special-controls.hidden {
      display: none;
    }

    .special-controls-hint {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .special-controls-grid {
      display: grid;
      grid-template-columns:
        repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .special-controls .special-label {
      display: grid;
      gap: 5px;
    }

    .special-controls select {
      width: 100%;
      min-width: 0;
    }

    .btn-success {
      justify-self: start;
      border-color: #15803d;
      background: #15803d;
      color: #f0fdf4;
    }

    .btn-success:hover {
      border-color: #16a34a;
      background: #16a34a;
    }

    .access-wrapper {
      min-height: 120px;
      display: grid;
      place-items: center;
      padding: 16px;
    }

    .access-box {
      max-width: 520px;
      text-align: center;
      padding: 20px 18px;
      border-radius: 12px;
      border: 1px solid #1f2937;
      background: #020617;
    }

    .debugging-range {
      border-color: rgba(227, 206, 14, 0.45);
      background: rgba(139, 92, 246, 0.14);
    }

    .throw-range {
      border-color: rgba(139, 92, 246, 0.7);
      background: rgba(139, 92, 246, 0.14);
    }

    .throw-path {
      border-color: rgba(249, 115, 22, 0.95);
      background: rgba(249, 115, 22, 0.18);
    }

    .pass-target {
      border-color: #22c55e;
      background: rgba(34, 197, 94, 0.25);
    }

    .hoop-target {
      border-color: #facc15;
      background: rgba(250, 204, 21, 0.3);
    }

    .bludger-range {
      border-color: rgba(239, 68, 68, 0.55);
      background: rgba(239, 68, 68, 0.12);
    }

    .bludger-target {
      border-color: rgba(239, 68, 68, 1);
      background: rgba(239, 68, 68, 0.35);
      box-shadow: 0 0 9px rgba(239, 68, 68, 0.75);
    }

    .bludger-path {
      border-color: rgba(239, 68, 68, 0.95);
      background: rgba(127, 29, 29, 0.28);
    }

    .reaction-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: grid;
      place-items: center;
      padding: 20px;
      background: rgba(0, 0, 0, 0.62);
    }

    .reaction-modal.hidden {
      display: none;
    }

    .reaction-card {
      width: min(420px, 100%);
      padding: 24px;
      border: 2px solid #f2c94c;
      border-radius: 14px;
      background: #152334;
      color: #f7f7f7;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    }

    .reaction-card h3 {
      margin: 0 0 12px;
      color: #f2c94c;
    }

    .reaction-card p {
      margin: 8px 0;
    }

    #reactionCountdown {
      font-weight: 700;
      color: #ffd166;
    }

    .reaction-card button {
      margin: 12px 8px 0 0;
    }

    #btnReactionSpecial {
      background: #7c3aed;
      border-color: #7c3aed;
      color: #fff;
    }

    #btnReactionSpecial:hover {
      background: #6d28d9;
      border-color: #6d28d9;
    }

    #btnReactionSpecial.hidden {
      display: none;
    }

    #reactionMessage {
      white-space: pre-line;
    }

    .action-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 3px 0;
    }

    .fairPlay-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 3px 0;
    }

    .tooltip {
      position: relative;
      display: inline-grid;
      width: 18px;
      height: 18px;
      place-items: center;
      flex: 0 0 auto;
      border: 1px solid rgba(251, 191, 36, 0.85);
      border-radius: 50%;
      background: rgba(15, 23, 42, 0.78);
      color: #fbbf24;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      cursor: help;
      user-select: none;
      outline: none;
    }

    .tooltip:focus-visible {
      outline: 2px solid #fbbf24;
      outline-offset: 2px;
    }

    .tooltip-text {
      position: absolute;
      z-index: 500;
      right: calc(100% + 10px);
      top: 50%;
      width: min(310px, 72vw);
      padding: 10px 12px;
      border: 1px solid rgba(251, 191, 36, 0.75);
      border-radius: 8px;
      background: rgba(15, 23, 42, 0.98);
      color: #e5e7eb;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.48);
      font-size: 12px;
      font-weight: 400;
      line-height: 1.4;
      text-align: left;
      white-space: normal;

      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(-50%) translateX(4px);
      transition:
        opacity 140ms ease,
        transform 140ms ease,
        visibility 140ms ease;
    }

    .tooltip-text::before {
      position: absolute;
      top: 50%;
      left: 100%;
      width: 9px;
      height: 9px;
      border-top: 1px solid rgba(251, 191, 36, 0.75);
      border-right: 1px solid rgba(251, 191, 36, 0.75);
      background: rgba(15, 23, 42, 0.98);
      content: "";
      transform: translate(-5px, -50%) rotate(45deg);
    }

    .tooltip:hover .tooltip-text,
    .tooltip:focus .tooltip-text,
    .tooltip:focus-within .tooltip-text {
      opacity: 1;
      visibility: visible;
      transform: translateY(-50%) translateX(0);
    }

    .tooltip.is-open .tooltip-text {
      opacity: 1;
      visibility: visible;
      transform: translateY(-50%) translateX(0);
    }

    .debug-panel {
      display: grid;
      gap: 10px;
      margin-top: 10px;
      padding: 10px;
      border: 1px solid rgba(245, 158, 11, 0.55);
      border-radius: 10px;
      background: rgba(15, 23, 42, 0.72);
    }

    .debug-panel.hidden {
      display: none;
    }

    .debug-grid {
      display: grid;
      grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
      gap: 10px;
      align-items: start;
    }

    .debug-section {
      display: grid;
      gap: 8px;
      min-width: 0;
      padding: 9px;
      border: 1px solid rgba(148, 163, 184, 0.25);
      border-radius: 8px;
      background: rgba(2, 6, 23, 0.24);
    }

    .debug-section h4,
    .debug-section h5 {
      margin: 0;
    }

    .debug-section label {
      display: grid;
      gap: 4px;
      font-size: 12px;
    }

    .debug-section select,
    .debug-section input[type="number"] {
      width: 100%;
      min-width: 0;
    }

    .debug-inline-fields {
      display: grid;
      grid-template-columns:
        repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .debug-check-grid {
      display: grid;
      grid-template-columns:
        repeat(2, minmax(0, 1fr));
      gap: 6px 10px;
    }

    .debug-check {
      display: flex !important;
      grid-template-columns: none !important;
      align-items: center;
      gap: 6px;
    }

    .debug-check input {
      width: auto;
    }

    .debug-check.hidden {
      display: none !important;
    }

    .debug-hoop-section {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .debug-hoop-control {
      display: grid;
      grid-template-columns:
        minmax(78px, max-content)
        minmax(0, 1fr)
        40px;
      align-items: center;
      gap: 8px;
    }

    .debug-hoop-control label {
      display: contents;
    }

    .debug-hoop-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 11px;
    }

    .debug-hoop-integrity {
      width: 100%;
      min-width: 0;
    }

    .debug-hoop-control output {
      text-align: right;
      font-variant-numeric: tabular-nums;
      color: var(--muted);
      font-size: 11px;
    }

    .debug-selected-object {
      outline: 3px solid #f50bf1;
      outline-offset: 3px;
      filter: drop-shadow(
        0 0 8px rgba(245, 158, 11, 0.9)
      );
    }

    /* Die Kopien sollen möglichst exakt gleich aussehen!
    .debug-decoy {
      opacity: 0.58;
      pointer-events: none;
      filter: saturate(0.7);
    }

    .debug-decoy-player {
      outline: 2px dashed rgba(167, 139, 250, 0.95);
      outline-offset: 2px;
      box-shadow:
        0 0 8px rgba(167, 139, 250, 0.85);
    }
    
    .debug-decoy-ball {
      outline: 1px dashed rgba(196, 181, 253, 0.95);
      outline-offset: 2px;
      box-shadow:
        0 0 7px rgba(167, 139, 250, 0.82);
    }
    */

    /* Normale Laptop- und Desktopbreite */
    @media (max-width: 1250px) {
      .slot {
        grid-template-columns:
          minmax(90px, 0.75fr)
          minmax(145px, 1.35fr)
          minmax(145px, 1.35fr)
          max-content
          max-content;

        gap: 8px;
      }

      .slot-auto,
      .slot-admin {
        padding-left: 7px;
        padding-right: 7px;
      }
    }

    @media (max-width: 1200px) {
      .settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .actions-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .field-wrapper {
        width: min(75vw, 900px);
      }
    }

    @media (max-width: 900px) {
      .teams-grid {
        grid-template-columns: 1fr;
      }

      .actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .field-wrapper {
        width: min(85vw, 700px);
      }

      .tooltip-text {
        left: auto;
        right: 0;
        width: min(310px, calc(100vw - 32px));
        transform: translateY(-50%) translateX(4px);
      }

      .tooltip:hover .tooltip-text,
      .tooltip:focus .tooltip-text,
      .tooltip:focus-within .tooltip-text,
      .tooltip.is-open .tooltip-text {
        transform: translateY(-50%) translateX(0);
      }

      .tooltip-text::before {
        right: 10px;
        left: auto;
        transform: translate(0, -50%) rotate(225deg);
      }
    }

    /* Tablets im Querformat beziehungsweise schmale Fenster */
    @media (max-width: 720px) {
      .engine-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .tag {
        text-align: center;
      }

      .slot {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

        grid-template-areas:
          "role character"
          "gear gear"
          "auto admin"
          "specials specials";
      }

      .slot-auto,
      .slot-admin {
        width: 100%;
        justify-content: center;
      }

      .special-selection {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      
      .debug-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 620px) {
      .admin-controls {
        flex-direction: column;
      }

      .admin-controls button {
        width: 100%;
        flex-basis: auto;
      }

      .field-wrapper {
        width: 95vw;
      }

      .tooltip-text {
        right: auto;
        left: calc(100% + 10px);
        width: min(310px, calc(100vw - 32px));
        transform: translateY(-50%) translateX(-4px);
      }

      .tooltip-text::before {
        left: auto;
        right: 100%;
        transform: translate(5px, -50%) rotate(45deg);
      }

      .tooltip:hover .tooltip-text,
      .tooltip:focus .tooltip-text,
      .tooltip:focus-within .tooltip-text,
      .tooltip.is-open .tooltip-text {
        transform: translateY(-50%) translateX(0);
      }
    }

    @media (max-width: 480px) {
      .debug-inline-fields,
      .debug-check-grid {
        grid-template-columns: 1fr;
      }
    }