/* HUD im Stil der Welt: dunkles Waldgrün, Messingrand, cremefarbene
   Pixel-Schrift. Gilt für Handy und Desktop; Touch-Aufteilung in mobile.css. */

:root {
  --panel: rgba(24, 33, 27, 0.9);
  --panel-solid: #18211b;
  --ink: #221a12;
  --brass: #d9b86e;
  --brass-dark: #8c6a35;
  --cream: #f6eace;
  --muted: #b7c2a8;
  --hp: #e0493f;
  --hp-dark: #8f2621;
  --xp: #9bd46a;
  --gold: #f2c75c;
  /* Unterkante der Statusbox + Abstand; main.js misst sie nach (die Box wächst mit ihren Zeilen) */
  --hud-bottom: calc(92px + env(safe-area-inset-top));
  /* Minikarte: Größe steuert auch, wo der Chat darunter anfängt */
  --minimap: 104px;
  --font-pixel: 'Pixelify Sans', ui-rounded, system-ui, sans-serif;
}

/* Vor dem Spielstart (Anmelden, Laden) kein HUD — sonst hängen halbe
   Kästen über dem Ladebalken. GameScene nimmt die Klasse beim Spawn weg. */
body.pre-game #stats-container,
body.pre-game #chat-container,
body.pre-game #connection-status,
body.pre-game #player-count,
body.pre-game #quest-tracker,
body.pre-game #mobile-controls,
body.pre-game #menu-btn,
body.pre-game #logout-btn,
body.pre-game #instructions {
  display: none !important;
}

/* Im Kampf zeigt die Kampfszene alles Nötige; HUD-Knöpfe würden die
   Kampfknöpfe verdecken und deren Tipps schlucken. */
body.in-combat #mobile-controls,
body.in-combat #menu-btn,
body.in-combat #stats-container,
body.in-combat #chat-container,
body.in-combat #quest-tracker,
body.in-combat #quest-journal,
body.in-combat #look-picker,
body.in-combat #instructions {
  display: none !important;
}

/* Spielerzahl und Logout wohnen im Menü */
#player-count,
#logout-btn {
  display: none !important;
}

/* ── Gemeinsamer Kasten ───────────────────────────── */
#stats-container,
#menu-btn,
.hud-btn,
.menu-sheet,
#quest-tracker,
#connection-status,
#instructions {
  background: var(--panel);
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--brass-dark), 0 3px 0 rgba(0, 0, 0, 0.35);
  color: var(--cream);
  font-family: var(--font-pixel);
}

/* ── Spielerkarte oben links ──────────────────────── */
#stats-container {
  top: calc(8px + env(safe-area-inset-top));
  left: 8px;
  min-width: 0;
  width: 200px;
  padding: 8px 10px 9px;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name lvl" "hp hp" "xp xp" "food day";
  column-gap: 6px;
  row-gap: 5px;
  align-items: center;
}

#player-name {
  grid-area: name;
  color: var(--cream);
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#player-level {
  grid-area: lvl;
  justify-self: end;
  color: var(--ink);
  background: var(--gold);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  margin: 0;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}

#health-bar-container,
#exp-bar-container {
  margin: 0;
  background: #0d130f;
  border: 2px solid var(--ink);
  border-radius: 4px;
}

#health-bar-container {
  grid-area: hp;
  height: 16px;
}

#health-bar {
  background: linear-gradient(180deg, #f06a5f 0 45%, var(--hp) 45% 100%);
  border-radius: 1px;
}

#exp-bar-container {
  grid-area: xp;
  height: 7px;
}

#exp-bar {
  background: var(--xp);
  border-radius: 0;
}

#health-text {
  font-family: var(--font-pixel);
  font-size: 11px;
  color: var(--cream);
  text-shadow: 0 1px 0 var(--ink);
}

#exp-text {
  display: none;
}

/* ── Menüknopf oben rechts ────────────────────────── */
#menu-btn {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  right: 8px;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  z-index: 1600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.burger,
.burger::before,
.burger::after {
  display: block;
  width: 22px;
  height: 4px;
  background: var(--cream);
  box-shadow: 0 2px 0 var(--ink);
  position: relative;
}

.burger::before,
.burger::after {
  content: '';
  position: absolute;
  left: 0;
}

.burger::before { top: -8px; }
.burger::after { top: 8px; }

/* Verbindung: nur zeigen, wenn sie weg ist */
#connection-status {
  top: calc(8px + env(safe-area-inset-top));
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--gold);
}

#connection-status.is-connected {
  display: none;
}

/* ── Knöpfe ───────────────────────────────────────── */
.hud-btn {
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform 0.06s, filter 0.15s, opacity 0.15s;
}

.hud-btn:active,
.hud-btn.is-pressed {
  transform: translateY(2px) scale(0.96);
  box-shadow: inset 0 0 0 2px var(--brass), 0 1px 0 rgba(0, 0, 0, 0.35);
}

.hud-btn-lg {
  width: 88px;
  height: 88px;
  --u: 48px;
}

.hud-btn-sm {
  width: 62px;
  height: 62px;
  --u: 40px;
}

.hud-btn-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cream);
  text-shadow: 0 1px 0 var(--ink);
  line-height: 1;
}

/* Aktionsknopf ohne Ziel in Reichweite: gedämpft, aber tippbar */
.hud-btn-lg.is-idle {
  opacity: 0.55;
}

.hud-btn-lg.is-ready {
  box-shadow: inset 0 0 0 2px var(--brass), 0 0 0 3px rgba(242, 199, 92, 0.35), 0 3px 0 rgba(0, 0, 0, 0.35);
}

/* ── Pixel-Icons (assets/ui/icons.png, 20-px-Zellen) ── */
.ui-icon {
  --u: inherit;
  display: block;
  width: var(--u, 32px);
  height: var(--u, 32px);
  background-image: url('/assets/ui/icons.png');
  background-repeat: no-repeat;
  background-size: calc(var(--u, 32px) * 18) var(--u, 32px);
  background-position: calc(var(--ix, 0) * var(--u, 32px) * -1) 0;
  image-rendering: pixelated;
  flex: none;
}

.ui-icon[data-icon="sword"] { --ix: 0; }
.ui-icon[data-icon="axe"] { --ix: 1; }
.ui-icon[data-icon="pick"] { --ix: 2; }
.ui-icon[data-icon="bag"] { --ix: 3; }
.ui-icon[data-icon="chest"] { --ix: 4; }
.ui-icon[data-icon="scroll"] { --ix: 5; }
.ui-icon[data-icon="letter"] { --ix: 6; }
.ui-icon[data-icon="book"] { --ix: 7; }
.ui-icon[data-icon="potion"] { --ix: 8; }
.ui-icon[data-icon="key"] { --ix: 10; }
.ui-icon[data-icon="gate"] { --ix: 11; }
.ui-icon[data-icon="coin"] { --ix: 12; }
.ui-icon[data-icon="heart"] { --ix: 9; }
.ui-icon[data-icon="gem"] { --ix: 13; }
.ui-icon[data-icon="shield"] { --ix: 14; }

/* ── Menüblatt ────────────────────────────────────── */
#game-menu,
#feedback-dialog {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(8, 12, 9, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

#game-menu[hidden],
#feedback-dialog[hidden] {
  display: none;
}

.menu-sheet {
  width: min(420px, calc(100% - 16px));
  border-radius: 12px;
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: menu-in 0.16s ease-out;
}

body.touch-device #game-menu,
body.touch-device #feedback-dialog {
  align-items: flex-end;
}

body.touch-device .menu-sheet {
  width: 100%;
  border-radius: 16px 16px 0 0;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}

@keyframes menu-in {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 2px 0 var(--ink);
}

.menu-online {
  font-size: 13px;
  color: var(--muted);
  flex: 1;
}

.menu-x {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 2px solid var(--ink);
  background: #2a352c;
  color: var(--cream);
  font-size: 24px;
  line-height: 1;
  font-family: var(--font-pixel);
  cursor: pointer;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.menu-tile,
.menu-logout,
.menu-feedback,
.menu-pill {
  font-family: var(--font-pixel);
  color: var(--cream);
  background: #2a352c;
  border: 2px solid var(--ink);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(217, 184, 110, 0.25);
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.menu-tile {
  --u: 48px;
  height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
}

.menu-tile:active,
.menu-logout:active,
.menu-feedback:active,
.menu-pill:active {
  transform: translateY(2px);
  box-shadow: inset 0 0 0 1px rgba(217, 184, 110, 0.4);
}

.menu-tile.is-on {
  background: #3b4a33;
  box-shadow: inset 0 0 0 2px var(--brass);
}

.menu-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px;
}

.menu-label {
  flex: 1;
  font-size: 15px;
  color: var(--cream);
  font-family: var(--font-pixel);
}

.menu-pill {
  width: 48px;
  height: 40px;
  font-size: 22px;
  line-height: 1;
}

.menu-zoom {
  min-width: 40px;
  text-align: center;
  font-family: var(--font-pixel);
  color: var(--gold);
  font-size: 15px;
}

.menu-hint {
  font-family: var(--font-pixel);
  font-size: 12px;
  color: var(--muted);
  margin-top: -6px;
  padding: 0 2px;
}

body:not(.touch-device) .menu-hint {
  display: none;
}

.menu-logout {
  --u: 28px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  background: #4a2622;
}

/* ── Quest-Tracker im selben Stil ─────────────────── */
#quest-tracker {
  border-radius: 8px;
}

#quest-tracker-title {
  color: var(--gold);
  font-family: var(--font-pixel);
  border-bottom-color: var(--brass-dark);
}

/* ── Chat im selben Stil (Desktop) ────────────────── */
#chat-container {
  font-family: var(--font-pixel);
}

/* Pixel-Schrift hat keine Kursive — der Browser schrägt sie sonst künstlich an */
.chat-system {
  font-style: normal;
}

#chat-send {
  font-family: var(--font-pixel);
  background: var(--brass-dark);
  border: 2px solid var(--ink);
  color: var(--cream);
}

#instructions {
  border-radius: 8px;
}

.menu-toggle {
  width: 64px;
  font-size: 15px;
}

/* Verbindung weg: über allem, bis nach dem Wiederverbinden neu geladen wird */
#reconnect-note {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 9, 0.72);
  color: var(--gold);
  font-family: var(--font-pixel);
  font-size: 20px;
  text-shadow: 0 2px 0 var(--ink);
}

/* ── Gebietsbanner beim Betreten eines Gebiets ────── */
#region-banner {
  position: fixed;
  top: 22%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1500;
  text-align: center;
  pointer-events: none;
  font-family: var(--font-pixel);
  opacity: 0;
}

#region-banner.is-on {
  animation: region-in 3.2s ease-out forwards;
}

#region-banner .rb-name {
  font-size: 30px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 3px 0 var(--ink), 0 0 12px rgba(0, 0, 0, 0.6);
  letter-spacing: 1px;
}

#region-banner .rb-sub {
  font-size: 15px;
  font-weight: 600;
  text-shadow: 0 2px 0 var(--ink);
  margin-top: 2px;
}

/* Beim Verlassen des Dorfs: draußen jagen Gegner */
#region-banner .rb-warn {
  font-size: 13px;
  font-weight: 700;
  color: #ff5a4f;
  text-shadow: 0 2px 0 var(--ink);
  margin-top: 3px;
}

#region-banner .rb-warn:empty {
  display: none;
}

body.in-combat #region-banner {
  display: none;
}

@keyframes region-in {
  0% { opacity: 0; transform: translate(-50%, 8px); }
  12% { opacity: 1; transform: translate(-50%, 0); }
  78% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Pfeile am Rand: Heim und Questziel ────────────── */
.nav-arrow {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1200;
  pointer-events: none;
  width: 0;
  height: 0;
}

.nav-arrow[hidden] {
  display: none;
}

body.pre-game .nav-arrow,
body.in-combat .nav-arrow {
  display: none;
}

/* Spitze: Kreis mit Dreieck, dreht sich zum Ziel */
.nav-tip {
  position: absolute;
  left: -17px;
  top: -17px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--brass-dark), 0 2px 0 rgba(0, 0, 0, 0.35);
}



#nav-home .nav-tip {
  box-shadow: inset 0 0 0 2px #5f8f3e, 0 2px 0 rgba(0, 0, 0, 0.35);
}


.nav-label {
  position: absolute;
  left: 22px;
  top: -9px;
  white-space: nowrap;
  font-family: var(--font-pixel);
  font-size: 12px;
  font-weight: 600;
  color: var(--cream);
  text-shadow: 0 1px 0 var(--ink), 0 0 4px rgba(0, 0, 0, 0.8);
}


.nav-arrow.label-left .nav-label {
  left: auto;
  right: 22px;
}

.nav-arrow.label-up .nav-label {
  top: -38px;
  left: -40px;
}

/* ── Minikarte (oben links unter der Statusbox) ───── */
#minimap {
  position: fixed;
  top: var(--hud-bottom);
  left: 8px;
  width: var(--minimap);
  height: var(--minimap);
  z-index: 1100;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--brass-dark), 0 3px 0 rgba(0, 0, 0, 0.35);
  background: #1b241d;
  cursor: pointer;
  opacity: 0.92;
}

#minimap canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  display: block;
}

body.pre-game #minimap,
body.in-combat #minimap,
body.in-combat #world-map {
  display: none;
}

/* ── Große Karte ──────────────────────────────────── */
#world-map {
  position: fixed;
  inset: 0;
  z-index: 2900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 9, 0.6);
  padding: 12px;
}

#world-map[hidden] {
  display: none;
}

.wm-sheet {
  display: flex;
  flex-direction: column;
  width: min(900px, 100%);
  height: min(760px, calc(100dvh - 24px));
  background: var(--panel-solid);
  border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--brass-dark), 0 6px 0 rgba(0, 0, 0, 0.4);
  border-radius: 14px;
  padding: 10px;
  font-family: var(--font-pixel);
  color: var(--cream);
}

.wm-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
}

.wm-title {
  flex: 1;
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 2px 0 var(--ink);
}

.wm-canvas {
  flex: 1;
  width: 100%;
  min-height: 0;
  border-radius: 8px;
  border: 2px solid var(--ink);
  touch-action: none;
  cursor: grab;
  image-rendering: pixelated;
}

.wm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

.wm-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border: 1px solid var(--ink);
  vertical-align: -1px;
}

/* ── Heimkehr-Schnellknopf an der Minikarte ───────── */
#recall-btn {
  position: fixed;
  top: calc(var(--hud-bottom) + var(--minimap) - 30px);
  left: calc(8px + var(--minimap) - 30px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  z-index: 1150;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#recall-btn[hidden] {
  display: none;
}

#recall-btn .ui-icon {
  --u: 22px;
}

.recall-count {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--brass-dark);
  border: 1px solid var(--ink);
  color: var(--cream);
  font-family: var(--font-pixel);
  font-size: 11px;
  line-height: 14px;
  text-align: center;
}

body.pre-game #recall-btn,
body.in-combat #recall-btn {
  display: none;
}

/* Seite nie per Pinch zoomen (Kamera-Zoom macht das Spiel selbst) */
html,
body {
  touch-action: pan-x pan-y;
}

/* Pfeile klein und farbcodiert: Farbe = Pin-Farbe der Quest (--nav) */

.nav-quest .nav-tip {
  box-shadow: inset 0 0 0 2px var(--nav, var(--brass-dark)), 0 2px 0 rgba(0, 0, 0, 0.35);
}

.nav-quest .nav-label {
  color: var(--nav, var(--gold));
}

#nav-home .nav-label {
  color: #9bd46a;
}

.nav-tip {
  transform-origin: 50% 50%;
}

.nav-arrow .nav-tip {
  width: 28px;
  height: 28px;
  left: -14px;
  top: -14px;
}


.nav-label {
  font-size: 11px;
  left: 18px;
  top: -8px;
}

.nav-arrow.label-left .nav-label {
  right: 18px;
}

.nav-arrow.label-up .nav-label {
  top: -30px;
  left: -14px;
}

/* Pfeilspitze: SVG-Dreieck (zeigt bei 0° nach rechts, dreht mit .nav-tip) */
.nav-tip svg {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 16px;
  height: 16px;
  fill: var(--nav, var(--cream));
  transform-origin: 50% 50%;
}

#nav-home .nav-tip svg {
  fill: #9bd46a;
}

/* Kreis deckend: sonst scheint Gelände durch und die Spitze wirkt wie ein Stern */
.nav-arrow .nav-tip {
  background: var(--panel-solid);
}

/* Handy quer: wenig Höhe — Minikarte kleiner, damit sie nicht auf dem Aktionsknopf liegt */
@media (orientation: landscape) and (max-height: 520px) {
  body.touch-device {
    --minimap: 76px;
  }

  body.touch-device #recall-btn {
    top: calc(var(--hud-bottom) + var(--minimap) - 26px);
    left: calc(8px + var(--minimap) - 24px);
    width: 34px;
    height: 34px;
  }
}

/* Beutel am Todesort (Survival) */
#nav-bag .nav-tip {
  box-shadow: inset 0 0 0 2px #ff5a4f, 0 2px 0 rgba(0, 0, 0, 0.35);
}

#nav-bag .nav-label {
  color: #ff5a4f;
}


/* Hunger (Survival): dünne Leiste unter der XP, rechts Tag/Nacht */
#food-bar-container {
  grid-area: food;
  position: relative;
  height: 6px;
  margin: 0;
  background: #0d130f;
  border: 2px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
}

#food-bar {
  height: 100%;
  width: 100%;
  background: #e0a24a;
  transition: width 0.4s ease;
}

#food-bar-container.is-low #food-bar {
  background: #ff5a4f;
  animation: food-low 1s ease-in-out infinite alternate;
}

@keyframes food-low {
  from { opacity: 1; }
  to { opacity: 0.45; }
}

#day-indicator {
  grid-area: day;
  justify-self: end;
  font-family: var(--font-pixel);
  font-size: 11px;
  line-height: 1;
  color: #f2c75c;
  text-shadow: 0 1px 0 var(--ink);
  white-space: nowrap;
}

#day-indicator.is-night {
  color: #9fb4ff;
}

/* Gast: Charakter mit Passwort sichern */
.menu-guest {
  font-family: var(--font-pixel);
  background: #2f3a24;
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(217, 184, 110, 0.35);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu-guest[hidden],
.menu-guest-form[hidden] {
  display: none;
}

.menu-guest-text {
  font-size: 13px;
  line-height: 1.35;
  color: var(--cream);
}

.menu-guest-form {
  display: flex;
  gap: 8px;
}

.menu-guest-form input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-pixel);
  font-size: 16px;
  color: var(--cream);
  background: #121912;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 8px 10px;
}

.menu-guest-save {
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 15px;
  color: var(--cream);
  background: #3f7a45;
  border: 2px solid var(--ink);
  border-radius: 9px;
  padding: 0 16px;
  cursor: pointer;
}

.menu-guest-msg:empty {
  display: none;
}

.menu-guest-msg {
  font-size: 13px;
}

.menu-guest-msg.error {
  color: #ff9a8a;
}

/* Feedback */
.menu-feedback {
  --u: 28px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
}

.feedback-sheet {
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
}

.feedback-kinds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.feedback-kind,
.feedback-shot,
.feedback-send {
  font-family: var(--font-pixel);
  color: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 9px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.feedback-kind {
  height: 40px;
  font-size: 15px;
  background: #2a352c;
  box-shadow: inset 0 0 0 1px rgba(217, 184, 110, 0.25);
}

.feedback-kind.is-on {
  color: var(--ink);
  background: var(--brass);
}

.feedback-text {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 110px;
  font-family: var(--font-pixel);
  font-size: 16px;
  line-height: 1.35;
  color: var(--cream);
  background: #121912;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 8px 10px;
}

.feedback-shots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.feedback-shot {
  position: relative;
  width: 96px;
  height: 72px;
  padding: 0;
  overflow: hidden;
  background: #121912;
}

.feedback-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.feedback-shot.is-off img {
  opacity: 0.3;
  filter: grayscale(1);
}

.feedback-shot-tag {
  position: absolute;
  right: 3px;
  bottom: 3px;
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(8, 12, 9, 0.8);
  color: var(--cream);
}

.feedback-add {
  font-size: 13px;
  color: var(--muted);
  border-style: dashed;
}

.feedback-note {
  font-family: var(--font-pixel);
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}

.feedback-msg:empty {
  display: none;
}

.feedback-msg {
  font-family: var(--font-pixel);
  font-size: 13px;
  color: var(--cream);
}

.feedback-msg.error {
  color: #ff9a8a;
}

.feedback-send {
  height: 46px;
  font-size: 17px;
  font-weight: 700;
  background: #3f7a45;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.12);
}

.feedback-send:disabled {
  opacity: 0.6;
}