/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-desk:    #5c3d1e;
  --color-paper:   #fdf6e3;
  --color-border:  #c8a96e;
  --color-approve: #27ae60;
  --color-reject:  #c0392b;
  --color-ui-bg:   #2c1a0e;
  --color-ui-text: #fdf6e3;
  --pad: 1rem;
}

html, body {
  height: 100%;
  font-family: 'Courier New', Courier, monospace;
  background: var(--color-desk);
  color: var(--color-ui-text);
  overflow: hidden;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  border-radius: 4px;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  transition: transform 0.1s, opacity 0.1s;
}
button:active { transform: scale(0.96); }

/* ── Screens ──────────────────────────────────────────────────── */
.screen { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; }
.screen.active { display: flex; }

/* ── Disconnect-Overlay ───────────────────────────────────────── */
#connection-overlay {
  position: fixed; top: 0; left: 0; right: 0;
  background: #922b21; color: #fff;
  text-align: center; padding: 0.45rem;
  font-size: 0.85rem; font-weight: bold;
  z-index: 9999;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  letter-spacing: 0.05em;
}
#connection-overlay.visible { transform: translateY(0); }

/* ── Startbildschirm ──────────────────────────────────────────── */
.start-content { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.title-wrap { position: relative; display: inline-block; margin-bottom: 2rem; }

.title-main {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.25em;
}

.title-year-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.55em;
  transform: skewX(-12deg);
  box-shadow: 2px 3px 8px rgba(0,0,0,0.45);
}

.title-year-badge span {
  display: block;
  transform: skewX(12deg);
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(2.5rem, 7.5vw, 5rem);
  font-weight: bold;
  font-style: italic;
  color: #fff;
  line-height: 1;
  letter-spacing: 0;
}

.start-content .tagline {
  position: absolute;
  bottom: -1.2em;
  left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  font-family: 'Brush Script MT', 'Apple Chancery', cursive;
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  font-style: normal;
  font-weight: normal;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #c0392b;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}
.start-content .title {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: bold;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 0.92;
  background: linear-gradient(
    170deg,
    #b0b0b0  0%,
    #f5f5f5 25%,
    #ffffff  38%,
    #d0d0d0  50%,
    #a8a8a8  62%,
    #e8e8e8  78%,
    #c8c8c8 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.start-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.start-buttons button { background: var(--color-border); color: var(--color-ui-bg); font-size: 1.1rem; padding: 0.8rem 2rem; font-weight: bold; letter-spacing: 0.05em; }
.start-buttons button.secondary { background: transparent; border: 2px solid var(--color-border); color: var(--color-border); }

/* ── Spielbildschirm ──────────────────────────────────────────── */
#screen-game { justify-content: flex-start; background: var(--color-desk); }

/* ── Anweisungstafel ──────────────────────────────────────────── */
.game-header {
  width: 100%;
  background: var(--color-ui-bg);
  padding: 0.75rem 1.25rem;
  border-bottom: 3px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.status-bar { display: flex; gap: 2rem; font-size: 0.95rem; white-space: nowrap; }

/* ── Spielhauptbereich ────────────────────────────────────────── */
.game-main {
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
  justify-content: center;
}

/* ── Antragskarte ─────────────────────────────────────────────── */
.application-area { width: 100%; }
.application-card {
  background: var(--color-paper);
  color: #2c1a0e;
  border: 2px solid var(--color-border);
  border-radius: 4px;
  padding: 1.5rem;
  width: 100%;
  min-height: 200px;
  position: relative;
  box-shadow: 3px 3px 12px rgba(0,0,0,0.4);
  font-family: 'Courier New', Courier, monospace;
  user-select: none;
}
.application-header {
  display: flex; justify-content: space-between;
  margin-bottom: 1rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}
.app-type { font-weight: bold; font-size: 1rem; }
.app-date { font-size: 0.8rem; color: #666; }
.application-body { font-size: 0.95rem; line-height: 1.8; }
.app-id { font-size: 0.95rem; color: #888; margin-top: 0.5rem; }

/* Stempel-Abdruck — innerhalb des Blatts, zufällig positioniert */
.stamp-mark {
  position: absolute;
  bottom: var(--stamp-bottom, 1.2rem);
  left: var(--stamp-left, 50%);
  transform: translateX(-50%) rotate(var(--stamp-rot, -15deg));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: bold; letter-spacing: 0.15em;
  pointer-events: none; border-radius: 2px;
  white-space: nowrap;
}
.stamp-mark.hidden { display: none; }
.stamp-mark.approve { color: var(--color-approve); border: 4px solid var(--color-approve); padding: 0.25rem 0.7rem; }
.stamp-mark.reject  { color: var(--color-reject);  border: 4px solid var(--color-reject);  padding: 0.25rem 0.7rem; }

/* ── Entscheidungsbuttons ─────────────────────────────────────── */
.decision-buttons {
  width: 100%;
  display: flex;
  gap: 1rem;
}
.decision-btn {
  flex: 1;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  border-radius: 6px;
  border: 3px solid transparent;
  transition: transform 0.1s, box-shadow 0.1s, filter 0.1s;
}
.decision-btn:hover  { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
.decision-btn:active { transform: scale(0.96); box-shadow: none; }
.decision-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.decision-btn.approve {
  background: var(--color-approve);
  color: #fff;
  border-color: #1e8449;
}
.decision-btn.reject {
  background: var(--color-reject);
  color: #fff;
  border-color: #922b21;
}

/* ── Dienstanweisungs-Overlay ─────────────────────────────────── */
.rule-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.rule-overlay.hidden { display: none; }
.rule-overlay-box {
  background: var(--color-paper);
  color: #2c1a0e;
  border: 3px solid var(--color-border);
  border-radius: 4px;
  padding: 2rem 2.5rem;
  max-width: 480px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  animation: overlay-appear 0.25s ease-out;
}
.rule-overlay-title {
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #2c1a0e;
}
.rule-overlay-hr {
  border: none;
  border-top: 2px solid var(--color-border);
}
.rule-overlay-text {
  font-size: 1.15rem;
  line-height: 1.6;
  font-weight: bold;
}
.rule-overlay-hint {
  font-size: 0.85rem;
  font-style: italic;
  color: #666;
  margin-top: -0.5rem;
}
.rule-overlay-hint.hidden { display: none; }
.rule-overlay-btn {
  background: var(--color-border);
  color: var(--color-ui-bg);
  font-weight: bold;
  padding: 0.7rem 1.5rem;
  align-self: center;
  letter-spacing: 0.05em;
}
.rule-overlay-btn:hover { filter: brightness(1.1); }

/* ── Game-Over ────────────────────────────────────────────────── */
#screen-gameover { background: rgba(0,0,0,0.92); }
.gameover-content { text-align: center; display: flex; flex-direction: column; gap: 1rem; align-items: center; max-width: 480px; padding: 2rem; }
.gameover-stamp { font-size: 2rem; font-weight: bold; color: var(--color-reject); border: 5px solid var(--color-reject); padding: 0.3rem 1rem; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.violated-rule {
  background: rgba(192,57,43,0.15);
  border: 1px solid var(--color-reject);
  border-radius: 4px;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 380px;
  text-align: left;
}
.violated-rule.hidden { display: none; }
.violated-rule-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-reject);
  margin-bottom: 0.25rem;
}
#highscore-form { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; align-items: center; }
.name-error { color: var(--color-reject); font-size: 0.8rem; width: 100%; text-align: center; }
.name-error.hidden { display: none; }
#player-name { font-family: inherit; font-size: 1rem; padding: 0.5rem 0.8rem; border-radius: 4px; border: 2px solid var(--color-border); background: #1a1a1a; color: #fff; width: 200px; }
#btn-submit-score { background: var(--color-border); color: var(--color-ui-bg); font-weight: bold; }
#btn-restart { background: transparent; border: 2px solid var(--color-border); color: var(--color-border); margin-top: 0.5rem; }

/* ── Highscore-Listen ─────────────────────────────────────────── */
.highscore-list { width: 100%; max-width: 400px; text-align: left; }
.highscore-list ol { padding-left: 1.5rem; }
.highscore-list li { display: flex; justify-content: space-between; padding: 0.3rem 0; border-bottom: 1px solid rgba(200,169,110,0.3); font-size: 0.9rem; }
.highscore-list .hs-name  { flex: 1; }
.highscore-list .hs-score { font-weight: bold; color: var(--color-border); }

#screen-highscores { background: rgba(0,0,0,0.95); }
.highscore-content { display: flex; flex-direction: column; gap: 1rem; align-items: center; max-width: 480px; padding: 2rem; }
#btn-back-from-highscores { background: transparent; border: 2px solid var(--color-border); color: var(--color-border); }

/* ── Animationen ──────────────────────────────────────────────── */

@keyframes overlay-appear {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* Neue Anweisung – Zähler kurz aufleuchten */
@keyframes rule-alert {
  0%   { color: #f0c040; }
  70%  { color: #f0c040; }
  100% { color: inherit; }
}
#rule-count.rule-alert {
  animation: rule-alert 1.0s ease-out forwards;
}

/* ── Karte: Einflug-Varianten ─────────────────────────────────── */
@keyframes card-in-right {
  from { transform: translateX(90px) rotate(3deg);              opacity: 0; }
  to   { transform: translateX(0)    rotate(0);                 opacity: 1; }
}
@keyframes card-in-top {
  from { transform: translateY(-70px) rotate(-4deg);            opacity: 0; }
  to   { transform: translateY(0)     rotate(0);                opacity: 1; }
}
@keyframes card-in-corner {
  from { transform: translate(60px, -40px) rotate(6deg) scale(0.92); opacity: 0; }
  to   { transform: translate(0,    0)     rotate(0)    scale(1);    opacity: 1; }
}
.application-card.card-in-right  { animation: card-in-right  0.35s ease-out; }
.application-card.card-in-top    { animation: card-in-top    0.38s ease-out; }
.application-card.card-in-corner { animation: card-in-corner 0.40s cubic-bezier(.22,.68,0,1.2); }

/* ── Karte: Ausflug-Varianten ─────────────────────────────────── */
@keyframes card-out-left {
  from { transform: translateX(0)     rotate(0);    opacity: 1; }
  to   { transform: translateX(-90px) rotate(-3deg); opacity: 0; }
}
@keyframes card-out-bottom {
  from { transform: translateY(0)    rotate(0);    opacity: 1; }
  to   { transform: translateY(70px) rotate(4deg); opacity: 0; }
}
@keyframes card-out-top-right {
  from { transform: translate(0, 0)      rotate(0);    opacity: 1; }
  to   { transform: translate(70px,-50px) rotate(7deg); opacity: 0; }
}
.application-card.card-out-left      { animation: card-out-left      0.28s ease-in  forwards; pointer-events: none; }
.application-card.card-out-bottom    { animation: card-out-bottom    0.30s ease-in  forwards; pointer-events: none; }
.application-card.card-out-top-right { animation: card-out-top-right 0.28s ease-in  forwards; pointer-events: none; }

/* ── Stempel: schlägt innerhalb des Blatts auf ────────────────── */
@keyframes stamp-slam {
  0%   { transform: translateX(-50%) rotate(var(--stamp-rot,-15deg)) scale(1.5) translateY(-38px); opacity: 0; }
  20%  { transform: translateX(-50%) rotate(var(--stamp-rot,-15deg)) scale(0.94) translateY(2px);  opacity: 1; }
  32%  { transform: translateX(-50%) rotate(var(--stamp-rot,-15deg)) scale(1.02) translateY(0);    opacity: 1; }
  82%  { transform: translateX(-50%) rotate(var(--stamp-rot,-15deg)) scale(1)    translateY(0);    opacity: 1; }
  100% { transform: translateX(-50%) rotate(var(--stamp-rot,-15deg)) scale(1)    translateY(0);    opacity: 0; }
}
.stamp-mark.slamming { display: flex !important; animation: stamp-slam 0.9s ease-out forwards; }

/* Entscheidungs-Flash */
@keyframes flash-correct {
  0%, 100% { background: var(--color-paper); }
  40%      { background: rgba(39,174,96,0.25); }
}
@keyframes flash-wrong {
  0%, 100% { background: var(--color-paper); }
  40%      { background: rgba(192,57,43,0.3); }
}
.application-card.flash-correct { animation: flash-correct 0.4s ease; }
.application-card.flash-wrong   { animation: flash-wrong   0.4s ease; }

/* Game-Over-Stempel-Slam */
@keyframes gameover-slam {
  0%   { transform: rotate(-8deg) scale(3.5) translateY(-40px); opacity: 0; }
  40%  { transform: rotate(-8deg) scale(0.92);                   opacity: 1; }
  55%  { transform: rotate(-8deg) scale(1.06);                   opacity: 1; }
  100% { transform: rotate(-8deg) scale(1);                      opacity: 1; }
}
.gameover-stamp { animation: gameover-slam 0.6s 0.15s ease-out both; }

/* ── Mobile (< 600px) ────────────────────────────────────────── */
@media (max-width: 599px) {
  .game-main { padding: 0.75rem; gap: 0.75rem; }
  .rules-list li { font-size: 0.85rem; }
  .decision-btn { font-size: 0.95rem; padding: 0.85rem 0.5rem; }
  .rule-overlay-box { padding: 1.5rem; }
  .rule-overlay-text { font-size: 1rem; }
}