/* Raupen-Arena – Oberfläche
 * Optik: Abendgarten. Dunkles Blattschatten-Grün, Seidenweiß, Bernstein.
 * Signatur: angenagte Blattkanten (clip-path) an allen Bedienflächen.
 */

.ra-shell {
  --ra-ui: 1;
  --ra-ink: #0b120f;
  --ra-bark: #16221c;
  --ra-bark-2: #1f2f26;
  --ra-silk: #efe6cd;
  --ra-silk-dim: #a9b0a0;
  --ra-moss: #8fbf46;
  --ra-amber: #ffc35c;
  --ra-mint: #46d7b3;
  --ra-coral: #ff7a59;

  --ra-display: "Rockwell", "Roboto Slab", "Bookman Old Style", "Palatino Linotype", Georgia, serif;
  --ra-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ra-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ra-notch: polygon(0 8px, 7px 0, calc(100% - 14px) 0, 100% 9px, 100% calc(100% - 7px),
                      calc(100% - 8px) 100%, 12px 100%, 0 calc(100% - 11px));

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  min-height: 620px;
  margin: 0;
  background: radial-gradient(120% 90% at 50% 0%, #16232c 0%, var(--ra-ink) 68%);
  color: var(--ra-silk);
  font-family: var(--ra-sans);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

.ra-shell *, .ra-shell *::before, .ra-shell *::after { box-sizing: border-box; }

/* Die Arena ist fokussierbar, damit die Tastatur sofort greift.
   Sichtbarer Rahmen nur bei Tastaturnavigation. */
.ra-shell:focus { outline: none; }
.ra-shell:focus-visible { outline: 2px solid var(--ra-amber); outline-offset: -4px; }

.ra-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ra-canvas {
  display: block;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(143, 191, 70, .18), 0 32px 90px rgba(0, 0, 0, .6);
  cursor: crosshair;
  image-rendering: auto;
}

/* -------------------------------- HUD -------------------------------- */
.ra-canvas { position: relative; z-index: 1; }

.ra-hud {
  --ra-ui: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  padding: 14px 16px 16px;
}

.ra-bar {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
  gap: 14px;
  align-items: start;
}

/* Trupp-Tafeln */
.ra-roster {
  pointer-events: auto;
  font-size: calc(1em * var(--ra-ui));
  background: linear-gradient(180deg, rgba(22, 34, 28, .93), rgba(11, 18, 15, .88));
  border: 1px solid rgba(239, 230, 205, .1);
  clip-path: var(--ra-notch);
  padding: 9px 13px 11px;
  max-width: 300px;
  transition: opacity .25s ease, transform .25s ease;
  opacity: .62;
}
.ra-roster.is-turn { opacity: 1; transform: translateY(2px); }
.ra-roster--b { justify-self: end; }

.ra-roster__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  border-bottom: 1px solid rgba(239, 230, 205, .14);
  padding-bottom: 6px; margin-bottom: 7px;
}
.ra-roster__name {
  font-family: var(--ra-display);
  font-size: 17px; letter-spacing: .01em; color: var(--team, var(--ra-silk));
}
.ra-roster__hp { font-family: var(--ra-mono); font-size: 15px; color: var(--ra-silk-dim); }

.ra-roster__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ra-roster__list li {
  display: grid; grid-template-columns: 1fr 62px 30px; align-items: center; gap: 8px;
  font-family: var(--ra-mono); font-size: 12.5px; color: var(--ra-silk-dim);
}
.ra-roster__list li.is-active { color: var(--ra-silk); }
.ra-roster__list li.is-active .ra-roster__bug::before { content: "▸ "; color: var(--ra-amber); }
.ra-roster__list li.is-out { opacity: .34; text-decoration: line-through; }
.ra-roster__num { text-align: right; }
.ra-meter { display: block; height: 5px; background: rgba(239, 230, 205, .13); overflow: hidden; }
.ra-meter i { display: block; height: 100%; transition: width .3s ease; }

/* Anzeige Mitte: Runde, Uhr, Wind */
.ra-gauge {
  pointer-events: auto;
  display: grid; justify-items: center; gap: 3px;
  padding: 6px 18px 8px;
  background: linear-gradient(180deg, rgba(22, 34, 28, .95), rgba(11, 18, 15, .9));
  border: 1px solid rgba(239, 230, 205, .1);
  clip-path: var(--ra-notch);
  min-width: 178px;
}
.ra-round { display: flex; gap: 7px; align-items: baseline; font-family: var(--ra-mono); font-size: 11px; }
.ra-round__label { letter-spacing: .18em; text-transform: uppercase; color: var(--ra-silk-dim); }
.ra-round__no { color: var(--ra-moss); font-size: 13px; }

.ra-clock {
  font-family: var(--ra-display);
  font-size: calc(34px * var(--ra-ui)); line-height: 1; letter-spacing: -.02em;
  color: var(--ra-silk); font-variant-numeric: tabular-nums;
}
.ra-clock.is-hot { color: var(--ra-coral); }
.ra-clock.is-retreat { color: var(--ra-amber); }

.ra-wind { width: calc(130px * var(--ra-ui)); display: grid; justify-items: center; gap: 4px; }
.ra-wind__track {
  position: relative; width: 100%; height: 3px;
  background: linear-gradient(90deg, rgba(70,215,179,.35), rgba(239,230,205,.14), rgba(255,122,89,.35));
}
.ra-wind__needle {
  position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  background: var(--ra-amber);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition: left .5s cubic-bezier(.3, 1.4, .5, 1);
}
.ra-wind__label {
  font-family: var(--ra-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ra-silk-dim);
}

/* Meldungen */
.ra-status {
  margin: 10px auto 0; padding: 5px 14px;
  font-family: var(--ra-mono); font-size: 12px; letter-spacing: .08em;
  background: rgba(11, 18, 15, .82); border: 1px solid rgba(255, 195, 92, .3);
  color: var(--ra-amber); opacity: 0; transition: opacity .25s;
}
.ra-status.is-on { opacity: 1; }

.ra-ticker { margin-top: auto; display: grid; gap: 3px; justify-items: center; padding-bottom: 10px; }
.ra-ticker__line {
  margin: 0; padding: 4px 13px;
  font-family: var(--ra-mono); font-size: 12.5px;
  background: rgba(11, 18, 15, .74);
  border-left: 2px solid var(--ra-moss);
  color: var(--ra-silk); opacity: 1; transition: opacity .9s ease;
}
.ra-ticker__line.is-fading { opacity: 0; }
.ra-tone-turn0, .ra-tone-team0 { border-left-color: var(--ra-mint); }
.ra-tone-turn1, .ra-tone-team1 { border-left-color: var(--ra-coral); }
.ra-tone-warn { border-left-color: var(--ra-amber); }
.ra-tone-win { border-left-color: var(--ra-silk); }

/* Kontextzeile – zeigt auch die Ladung, seit der Balken entfallen ist */
.ra-prompt {
  margin: 0 auto 6px; padding: 4px 14px;
  font-family: var(--ra-mono); font-size: calc(12px * var(--ra-ui)); letter-spacing: .04em;
  color: var(--ra-silk-dim);
  background: rgba(11, 18, 15, .68);
  border-left: 2px solid var(--ra-amber);
  opacity: 0; transition: opacity .2s, color .2s, border-color .2s;
}
.ra-prompt.is-on { opacity: 1; }
.ra-prompt.is-charging { color: var(--ra-amber); border-left-color: var(--ra-coral); }

/* Waffenleiste: drei Gruppen, kompakte Kacheln */
.ra-rack {
  pointer-events: auto;
  display: flex; gap: calc(11px * var(--ra-ui)); justify-content: center;
  align-items: flex-end; flex-wrap: nowrap;      /* alles in einer Zeile */
  width: 100%;
}
.ra-group { display: grid; gap: 3px; justify-items: center; }
.ra-group__label {
  font-family: var(--ra-mono); font-size: calc(8.5px * var(--ra-ui)); letter-spacing: .2em;
  text-transform: uppercase; color: var(--ra-silk-dim); opacity: .7;
  white-space: nowrap;
}
.ra-group__row { display: flex; gap: calc(3px * var(--ra-ui)); flex-wrap: nowrap; justify-content: center; }

.ra-slot {
  position: relative;
  display: grid; justify-items: center; align-content: center; gap: 0;
  width: calc(40px * var(--ra-ui)); height: calc(38px * var(--ra-ui)); padding: 1px;
  flex: 0 0 auto;
  background: linear-gradient(180deg, rgba(31, 47, 38, .95), rgba(13, 21, 17, .93));
  border: 1px solid rgba(239, 230, 205, .12);
  clip-path: var(--ra-notch);
  color: var(--ra-silk-dim);
  font-family: var(--ra-mono);
  cursor: pointer;
  transition: transform .12s ease, border-color .18s, color .18s, background .18s;
}
.ra-slot:hover:not(:disabled) { transform: translateY(-3px); color: var(--ra-silk); }
.ra-slot:focus-visible { outline: 2px solid var(--ra-amber); outline-offset: 3px; }
.ra-slot.is-on {
  border-color: var(--ra-moss);
  color: var(--ra-silk);
  background: linear-gradient(180deg, rgba(52, 78, 40, .96), rgba(18, 28, 18, .96));
  box-shadow: 0 0 0 1px rgba(143, 191, 70, .35), 0 -3px 16px rgba(143, 191, 70, .22);
}
.ra-slot:disabled, .ra-slot.is-off { opacity: .3; cursor: not-allowed; }
.ra-slot kbd {
  position: absolute; top: 1px; left: 3px;
  font-family: var(--ra-mono); font-size: calc(7.5px * var(--ra-ui));
  color: var(--ra-amber); opacity: .75;
}
.ra-slot__glyph { font-size: calc(16px * var(--ra-ui)); line-height: 1; margin-top: 2px; }
.ra-slot__ammo {
  position: absolute; right: 3px; bottom: 1px;
  font-size: calc(8px * var(--ra-ui)); color: var(--ra-moss); letter-spacing: 0;
}

/* Vollbildschalter */
.ra-fs {
  position: absolute; top: 12px; right: 14px; z-index: 4;
  pointer-events: auto;
  padding: 5px 11px;
  font-family: var(--ra-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  background: rgba(11, 18, 15, .7); color: var(--ra-silk-dim);
  border: 1px solid rgba(239, 230, 205, .16); cursor: pointer;
}
.ra-fs:hover { color: var(--ra-silk); border-color: var(--ra-moss); }

/* ------------------------------ Einblendungen ------------------------ */
.ra-screen {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none; align-items: center; justify-content: center;
  background: radial-gradient(70% 70% at 50% 45%, rgba(11, 18, 15, .82), rgba(6, 10, 9, .96));
  backdrop-filter: blur(2px);
  z-index: 5;
}
.ra-screen.is-open { display: flex; }

.ra-card {
  width: min(880px, 94%);
  max-height: 90%;
  overflow-y: auto;
  padding: 30px 36px 26px;
  background: linear-gradient(170deg, rgba(28, 42, 34, .97), rgba(12, 19, 16, .97));
  border: 1px solid rgba(143, 191, 70, .26);
  clip-path: polygon(0 18px, 16px 0, calc(100% - 26px) 0, 100% 20px,
                     100% calc(100% - 16px), calc(100% - 18px) 100%, 24px 100%, 0 calc(100% - 22px));
  text-align: left;
}

.ra-eyebrow {
  margin: 0 0 10px;
  font-family: var(--ra-mono); font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ra-moss);
}
.ra-title {
  margin: 0 0 10px;
  font-family: var(--ra-display);
  font-size: 46px; line-height: .96; letter-spacing: -.02em; font-weight: 400;
  color: var(--ra-silk);
}
.ra-title span { color: var(--ra-moss); }
.ra-title--sm { font-size: 34px; }
.ra-lede { margin: 0 0 16px; max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--ra-silk-dim); }

.ra-eyebrow--sub { margin-top: 4px; }
.ra-maps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 18px; }
.ra-map {
  display: grid; gap: 2px; padding: 8px 10px; text-align: left; align-content: start;
  background: rgba(239, 230, 205, .04);
  border: 1px solid rgba(239, 230, 205, .14);
  color: var(--ra-silk-dim); cursor: pointer;
  transition: background .16s, border-color .16s, color .16s;
}
.ra-map__name { font-family: var(--ra-display); font-size: 14px; line-height: 1.15; color: var(--ra-silk); }
.ra-map em {
  font-family: var(--ra-mono); font-size: 9.5px; font-style: normal;
  letter-spacing: 0; line-height: 1.3;
}
.ra-map:hover { border-color: rgba(143, 191, 70, .5); background: rgba(143, 191, 70, .08); }
.ra-map.is-on { border-color: var(--ra-moss); background: rgba(143, 191, 70, .16); color: var(--ra-silk); }
.ra-map:focus-visible { outline: 2px solid var(--ra-amber); outline-offset: 3px; }

/* Namenseditor */
.ra-names { margin-bottom: 16px; }
.ra-names__toggle {
  display: flex; align-items: baseline; gap: 12px; width: 100%;
  padding: 9px 14px; text-align: left; cursor: pointer;
  background: rgba(239, 230, 205, .04);
  border: 1px solid rgba(239, 230, 205, .14);
  color: var(--ra-silk);
  transition: background .16s, border-color .16s;
}
.ra-names__toggle span { font-family: var(--ra-display); font-size: 15px; }
.ra-names__toggle em {
  font-family: var(--ra-mono); font-size: 10.5px; font-style: normal;
  color: var(--ra-silk-dim); letter-spacing: .04em;
}
.ra-names__toggle::after {
  content: "+"; margin-left: auto;
  font-family: var(--ra-mono); font-size: 16px; color: var(--ra-moss);
}
.ra-names__toggle.is-open::after { content: "−"; }
.ra-names__toggle:hover { background: rgba(143, 191, 70, .1); border-color: rgba(143, 191, 70, .45); }
.ra-names__toggle:focus-visible { outline: 2px solid var(--ra-amber); outline-offset: 3px; }

.ra-names__body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  padding: 14px; margin-top: 6px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(239, 230, 205, .1);
}
.ra-names__col { display: grid; gap: 6px; align-content: start; }
.ra-names__bugs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ra-names__boss {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center;
  padding-top: 10px; margin-top: 4px;
  border-top: 1px solid rgba(239, 230, 205, .12);
}
.ra-names__bosslabel {
  font-family: var(--ra-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: #a8e06a;
}

.ra-names__hint {
  grid-column: 1 / -1; margin: 0;
  font-family: var(--ra-mono); font-size: 10.5px; line-height: 1.4;
  color: var(--ra-silk-dim);
}
.ra-input--team {
  width: 100%; margin: 0; padding: 7px 10px;
  font-family: var(--ra-display); font-size: 15px; letter-spacing: 0; text-transform: none;
  color: var(--team, var(--ra-silk));
  border-color: color-mix(in srgb, var(--team, #efe6cd) 45%, transparent);
}
.ra-input--bug {
  width: 100%; margin: 0; padding: 5px 8px;
  font-family: var(--ra-mono); font-size: 11.5px; letter-spacing: .02em; text-transform: none;
}
.ra-input--bug::placeholder, .ra-input--team::placeholder { color: rgba(239, 230, 205, .32); }

.ra-actions { display: grid; gap: 8px; margin-bottom: 22px; }
.ra-btn {
  display: flex; align-items: baseline; gap: 12px;
  width: 100%; padding: 12px 16px; text-align: left;
  background: rgba(239, 230, 205, .05);
  border: 1px solid rgba(239, 230, 205, .16);
  color: var(--ra-silk); cursor: pointer;
  transition: background .16s, border-color .16s, transform .12s;
}
.ra-btn span { font-family: var(--ra-display); font-size: 18px; }
.ra-btn em { font-family: var(--ra-mono); font-size: 11px; font-style: normal; color: var(--ra-silk-dim); letter-spacing: .06em; }
.ra-btn:hover { background: rgba(143, 191, 70, .12); border-color: var(--ra-moss); transform: translateX(3px); }
.ra-btn:focus-visible { outline: 2px solid var(--ra-amber); outline-offset: 3px; }
.ra-btn--primary { background: rgba(143, 191, 70, .16); border-color: rgba(143, 191, 70, .5); }
.ra-btn--ghost span { font-size: 15px; }

.ra-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 18px; margin: 0; }
.ra-keys > div { display: flex; gap: 10px; align-items: baseline; }
.ra-keys dt {
  font-family: var(--ra-mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--ra-amber); min-width: 78px;
}
.ra-keys dd { margin: 0; font-size: 12.5px; color: var(--ra-silk-dim); }

.ra-code {
  margin: 4px 0 18px;
  font-family: var(--ra-mono); font-size: 46px; letter-spacing: .3em;
  color: var(--ra-amber);
}
.ra-input {
  width: 220px; padding: 11px 14px; margin-bottom: 10px;
  font-family: var(--ra-mono); font-size: 22px; letter-spacing: .22em; text-transform: uppercase;
  background: rgba(0, 0, 0, .35); color: var(--ra-silk);
  border: 1px solid rgba(239, 230, 205, .22);
}
.ra-input:focus { outline: none; border-color: var(--ra-moss); }
.ra-hint { min-height: 18px; margin: 0 0 14px; font-family: var(--ra-mono); font-size: 12px; color: var(--ra-amber); }

/* Endboss: die Mitte gehört dem Frosch, die Anzeige rückt zusammen */
.ra-shell.ra-boss .ra-gauge { min-width: 156px; }
.ra-shell.ra-boss .ra-roster { opacity: .78; }
.ra-shell.ra-boss .ra-roster.is-turn { opacity: 1; }

/* Kompakter ab etwa 1500 px Breite */
.ra-shell.ra-compact .ra-hud { padding: 9px 10px 10px; }
.ra-shell.ra-compact .ra-roster { max-width: 250px; padding: 6px 10px 8px; }
.ra-shell.ra-compact .ra-roster__list li { grid-template-columns: 1fr 46px 26px; font-size: 11.5px; }
.ra-shell.ra-compact .ra-gauge { min-width: 150px; padding: 6px 16px 8px; }
.ra-shell.ra-compact .ra-ticker__line { font-size: 11.5px; padding: 3px 10px; }
.ra-shell.ra-compact .ra-group__label { font-size: 7.5px; }
.ra-shell.ra-compact .ra-rack { gap: 7px; }
.ra-shell.ra-compact .ra-rack__split { margin: 3px 3px; }

/* Hinweis für sehr schmale Fenster */
.ra-shell.ra-narrow .ra-viewport::after {
  content: "Die Arena ist für Fenster ab 1500 px Breite ausgelegt. Schmaler wird nur verkleinert.";
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  padding: 5px 12px; z-index: 6;
  font-family: var(--ra-mono); font-size: 11px; letter-spacing: .05em;
  background: rgba(11, 18, 15, .86); color: var(--ra-amber);
  border: 1px solid rgba(255, 195, 92, .3);
}

@media (prefers-reduced-motion: reduce) {
  .ra-shell * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}