/* Morpheus in the Punderworld — Terminal Aesthetic */

:root {
  --green: #00ff88;
  --green-dim: #00cc66;
  --green-dark: #004422;
  --amber: #ffb300;
  --amber-dim: #cc8800;
  --red: #ff4444;
  --red-dim: #cc2222;
  --bg: #0a0a0a;
  --bg-panel: #0f0f0f;
  --text: #c8ffd4;
  --text-dim: #6a9a74;
  --text-faint: #4a9a5a;
  --border: #1a3a22;
  --cursor-blink: 0.8s;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  background: var(--bg);
  /* overscroll-behavior: none prevents rubber-band on iOS 16+ without locking
     the root scroll container. overflow: hidden was removed because Chrome
     Android treats html { overflow: hidden } as "fixed layout" and permanently
     disables the toolbar show/hide state machine — users get stuck with no
     browser toolbar. All game content lives in position:fixed containers so
     there is no actual document scroll content; removing overflow:hidden has
     no visible effect but restores Chrome Android's toolbar gesture detection. */
  overscroll-behavior: none;
}

body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Courier New', Courier, monospace;
  font-size: 15px;
  line-height: 1.6;
  /* Default: allow title screen to scroll on small viewports.
     showScreen() sets overflow:hidden when switching to game screen. */
  overflow: auto;
  overscroll-behavior: none; /* prevent iOS rubber-band bounce on body */
}

/* Scanline overlay */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  pointer-events: none;
  z-index: 1000;
}

/* --- Game screen layout — three-zone flex column ---
   Zone 1: #header + #status-bar  — flex-shrink:0, pinned at top
   Zone 2: #output                — flex:1, overflow-y:auto, scrolls
   Zone 3: #loading + #input-area — flex-shrink:0, pinned at bottom

   position:fixed is critical on iOS Safari: the browser auto-scrolls
   the page to bring the focused input into view, which moves the
   layout viewport up and pushes the stats bar off screen. Fixed
   positioning pins the container to the visual viewport corners so
   page-level scroll can't affect it.
   left:50% + translateX(-50%) centers the max-width container. */
#screen-game {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 900px;
  height: 100vh;   /* fallback */
  height: 100dvh;  /* iOS 15.4+: shrinks when software keyboard appears */
  flex-direction: column;
  padding: 10px 16px 0;
  gap: 8px;
  overflow: hidden;
  touch-action: pan-y; /* prevent horizontal swipe from triggering iOS back-navigation */
}

/* --- Header --- */
#header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-shrink: 0;
}

#title {
  color: var(--green);
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#subtitle {
  display: none;
}

#run-info {
  text-align: right;
  font-size: 12px;
  color: #8ab894;
}

/* --- Status Bar --- */
#status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 3px 0 5px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.status-sep {
  color: var(--text-dim);
  flex-shrink: 0;
}

.status-value {
  color: var(--green);
  white-space: nowrap;
  flex-shrink: 0;
}

#status-god {
  text-transform: uppercase;
}

/* Dignity Meter */
#dignity-container {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

#dignity-bar {
  flex: 1;
  height: 8px;
  background: var(--bg-panel);
  border: 1px solid var(--green-dim);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 6px rgba(0, 255, 136, 0.15);
}

#dignity-fill {
  height: 100%;
  background: var(--green);
  transition: width 0.6s ease, background-color 0.3s ease;
  position: relative;
}

#dignity-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 4px,
    rgba(0,0,0,0.15) 4px,
    rgba(0,0,0,0.15) 5px
  );
}

#dignity-fill.high { background: var(--green); }
#dignity-fill.mid { background: var(--amber); }
#dignity-fill.low { background: var(--red); }
#dignity-fill.shaking {
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

#dignity-value {
  font-size: 12px;
  font-weight: 500;
  color: var(--green);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.3s ease;
}

#dignity-value.mid { color: var(--amber); }
#dignity-value.low { color: var(--red); }

/* Attempts */
#attempts-section {
  flex-shrink: 0;
}

#attempts-pips {
  display: flex;
  gap: 3px;
  align-items: center;
}

.attempt-pip {
  width: 8px;
  height: 8px;
  border: 1px solid var(--green-dim);
  background: var(--green-dark);
  flex-shrink: 0;
}

.attempt-pip.used {
  background: transparent;
  border-color: var(--text-faint);
}

/* --- Main Output --- */
#output {
  flex: 1;
  min-height: 0; /* flex children can overflow without this */
  overflow-y: auto;
  padding-right: 4px;
  /* -webkit-overflow-scrolling: touch intentionally removed: this legacy property
     creates a momentum scroll compositor layer that absorbs the first user gesture
     after a programmatic scrollTop change — causing the "first drag ignored" bug.
     iOS 13+ handles momentum scroll natively; the property is no longer needed. */
  overscroll-behavior: contain; /* don't propagate scroll to body */
  touch-action: pan-y;          /* route vertical pan directly to this container */
}

#output::-webkit-scrollbar {
  width: 4px;
}

#output::-webkit-scrollbar-track {
  background: var(--bg);
}

#output::-webkit-scrollbar-thumb {
  background: var(--border);
}

.output-block {
  margin-bottom: 16px;
}

/* Text styles */
.text-narration {
  color: var(--text);
  white-space: pre-wrap;
  transition: color 0.3s ease;
}

.text-god {
  color: var(--amber);
  padding-left: 16px;
  border-left: 1px solid rgba(204, 136, 0, 0.5);
  margin: 6px 0 8px 0;
  white-space: pre-wrap;
}

.text-god-name {
  color: var(--amber-dim);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 2px;
  opacity: 0.6;
}

.text-system {
  color: #8ab894;
  font-size: 15px;
  font-style: italic;
}

.text-defeat-announcement {
  font-family: 'Bebas Neue', Impact, 'Arial Black', sans-serif;
  font-size: clamp(36px, 9vw, 56px);
  font-weight: 400;
  color: var(--green);
  text-align: center;
  letter-spacing: 5px;
  line-height: 1.1;
  margin: 12px 0 8px;
}

.text-damage {
  color: var(--green);
  font-size: 12px;
  margin: 4px 0;
}

.text-damage.big {
  color: var(--green);
  font-size: 15px;
  font-weight: bold;
  text-shadow: 0 0 10px var(--green);
}

.text-damage.miss {
  color: #8ab894;
}

.text-player {
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  background: var(--green-dark);
  border-left: 3px solid var(--green);
  padding: 10px 16px;
  margin-top: 24px;
  white-space: pre-wrap;
}

.text-player::before {
  content: '> ';
  color: var(--green);
}

.text-title {
  color: var(--green);
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 3px;
  text-align: center;
  text-shadow: 0 0 20px var(--green);
  margin: 8px 0;
}

.text-hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}

.text-error {
  color: var(--red);
}

.text-transition {
  color: #8ab894;
  font-style: italic;
  text-align: center;
  padding: 8px 0;
}

.text-pun-analysis {
  color: var(--text-dim);
  font-size: 12px;
  margin-top: 2px;
}

.pivot-hint {
  color: var(--green);
  font-weight: 500;
}

/* ── M_BALANCE Scoring Panel ───────────────────────────────────────────────── */
.score-panel {
  border: 2px solid var(--green);
  background: #0d0d0d;
  padding: 14px 16px;
  margin-top: 6px;
}

.score-panel-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.score-panel-damage {
  font-family: 'Bebas Neue', Impact, 'Arial Black', sans-serif;
  font-size: 40px;
  letter-spacing: 2px;
  line-height: 1;
}

.score-panel-damage-labels {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.score-panel-rarity {
  font-family: 'Bebas Neue', Impact, 'Arial Black', sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0px 3px;
}

.score-panel-damage-label {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: #7aaa7a;
  text-transform: uppercase;
}

.score-panel-miss {
  font-family: 'Bebas Neue', Impact, 'Arial Black', sans-serif;
  font-size: 28px;
  color: #7aaa7a;
  margin-bottom: 8px;
}

.score-panel-divider {
  border: none;
  border-top: 1px solid #2a3a2a;
  margin: 8px 0;
}

.score-panel-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 2px 0;
}

.score-panel-num {
  font-size: 16px;
  font-weight: 700;
  min-width: 40px;
  line-height: 1;
  flex-shrink: 0;
}

.score-panel-lbl {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.75;
  flex: 1;
}

.score-panel-note {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.65;
  margin-left: 8px;
  letter-spacing: 0.5px;
  text-transform: none;
}

.score-panel-footer .score-panel-num,
.score-panel-footer .score-panel-lbl {
  color: #7aaa7a;
  opacity: 1;
}

.score-panel-cap-inline {
  font-size: 9px;
  opacity: 0.6;
  margin-left: 4px;
  letter-spacing: 0.5px;
}

/* Tap-to-advance button for chunked text reveal */
.btn-more {
  background: transparent;
  border: 1px solid var(--green);
  color: var(--green);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 2px;
  padding: 0 16px;
  cursor: pointer;
  height: 44px;
  min-height: 44px;
  line-height: 44px;
  display: block;
  width: 100%;
  text-align: left;
  transition: background 0.15s;
  touch-action: manipulation;
}

.btn-more:hover {
  background: rgba(0, 255, 136, 0.08);
}

@media (hover: none) {
  .btn-more:active {
    background: rgba(0, 255, 136, 0.12);
  }
}

/* Two-button row: [ MORE ▾ ] + [ SKIP ⟫ ] */
.more-btn-row {
  display: flex;
  gap: 8px;
}

.more-btn-row .btn-more {
  width: auto;
  flex: 2;
}

.btn-skip {
  flex: 1;
  border-color: var(--text-dim);
  color: var(--text-dim);
  touch-action: manipulation;
}

.btn-skip:hover {
  background: rgba(106, 154, 116, 0.08);
}

@media (hover: none) {
  .btn-skip:active {
    background: rgba(106, 154, 116, 0.12);
  }
}

/* Chunk reveal: fade-in, dim-on-advance, pulse button */
@keyframes chunkFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.chunk-new {
  animation: chunkFadeIn 0.3s ease-in forwards;
}

/* Previously-seen chunks shift to --text-dim; transition on .text-narration handles the ease */
.chunk-read .text-narration {
  color: var(--text-dim);
}

/* Active chunk stays at full brightness (overrides any inherited dim) */
.chunk-current .text-narration {
  color: var(--text);
}

@keyframes morePulse {
  0%, 100% { box-shadow: 0 0 4px rgba(0, 255, 136, 0.3); }
  50%       { box-shadow: 0 0 10px rgba(0, 255, 136, 0.7); }
}

.more-pulse {
  animation: morePulse 2s ease-in-out infinite;
}

/* God portrait */
.god-portrait {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0 auto 12px;
  border: none;
  opacity: 0;
  transition: opacity 0.4s ease-in;
  mix-blend-mode: screen;
}

.god-portrait.loaded {
  opacity: 1;
}

/* Domain scan block */
.domain-scan {
  border: 1px solid var(--green-dark);
  background: #050f08;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 12px;
}

.scan-header {
  color: var(--green-dim);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.scan-row {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
  align-items: baseline;
}

.scan-label {
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  min-width: 80px;
}

.scan-value {
  color: #8ab894;
}

.scan-territory {
  color: var(--green-dim);
  line-height: 1.8;
}

.scan-territory .term {
  display: inline-block;
  margin-right: 12px;
  color: var(--green);
}

.scan-territory .term-note {
  color: #8ab894;
}

.scan-bio {
  color: #8ab894;
  font-size: 15px;
  line-height: 1.7;
  margin-top: 4px;
}

/* Encounter marker */
.encounter-header {
  color: var(--green-dim);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 12px;
}

/* --- Input Area --- */
#input-area {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
}

#input-prompt {
  display: flex;
  align-items: flex-start; /* textarea grows downward — keep prefix at top */
  gap: 8px;
}

#input-prefix {
  color: var(--green);
  white-space: nowrap;
  font-size: 12px;
}

#pun-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: 16px; /* 16px minimum — below this iOS Safari auto-zooms on focus */
  line-height: 1.5;
  caret-color: var(--green);
  padding: 0;
  resize: none;
  overflow-y: auto;
  max-height: 144px; /* ~6 lines at 16px × 1.5; scrolls internally beyond this */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y; /* Samsung Internet: pass vertical pan to parent, don't eat it */
}

#submit-btn {
  background: var(--green);
  color: var(--bg);
  font-weight: bold;
  border: none;
  padding: 10px 24px;
  font-family: "Courier New", monospace;
  font-size: 13px;
  letter-spacing: 2px;
  cursor: pointer;
  width: 100%;
  display: block;
  margin-top: 6px;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#submit-btn:disabled {
  background: var(--green-dark);
  color: #4a9a5a;
  cursor: not-allowed;
}

#input-hint {
  display: none;
}

/* --- Oracle Bar --- */
#oracle-bar {
  display: flex;
  justify-content: center;
  padding: 0;
}

#btn-ask-oracle {
  background: transparent;
  color: var(--green);
  font-weight: normal;
  border: 1px solid var(--green);
  padding: 10px 24px;
  font-family: "Courier New", monospace;
  font-size: 13px;
  letter-spacing: 2px;
  cursor: pointer;
  width: 100%;
  display: block;
  min-height: 44px;
  transition: background 0.15s;
}
@media (hover: hover) {
  #btn-ask-oracle:hover { background: rgba(0, 255, 136, 0.08); }
}

/* Overlay backdrop */
#oracle-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* Panel */
#oracle-panel {
  background: #050f08;
  border: 1px solid #1a4a2a;
  color: var(--text);
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  line-height: 1.7;
  max-width: 520px;
  width: 100%;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#oracle-content {
  padding: 24px 24px 16px;
  overflow-y: auto;
  flex: 1;
}

.summon-heading {
  color: var(--green);
  letter-spacing: 3px;
  font-size: 13px;
  margin-bottom: 16px;
}

#oracle-content p {
  margin-bottom: 14px;
  color: #c8ffd4;
}

.summon-example {
  border-left: 2px solid #1a4a2a;
  padding-left: 14px;
  color: #8adfaa !important;
}

.summon-type {
  color: var(--green);
  font-weight: bold;
}

.summon-sub {
  display: block;
  padding-left: 12px;
  color: #8ab894;
}

.summon-bonus-badge {
  background-color: #00ff88;
  color: #0a0a0a;
  font-family: 'Bebas Neue', Impact, 'Arial Black', sans-serif;
  font-size: 12px;
  padding: 0px 4px;
  letter-spacing: 1px;
  display: inline-block;
  margin-right: 6px;
}

.summon-bonus-desc {
  color: #7aaa7a;
  font-size: 13px;
}

#btn-oracle-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  border-top: 1px solid #1a4a2a;
  color: #4a9a64;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 2px;
  cursor: pointer;
  padding: 14px 24px;
  min-height: 44px;
  text-align: left;
  transition: color 0.15s;
}
#btn-oracle-dismiss:hover { color: var(--green); }

/* --- Logo home link --- */
#logo-home-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: block;
}

/* --- Abandon Run Overlay --- */
#abandon-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#abandon-panel {
  background: #050f08;
  border: 1px solid #1a4a2a;
  color: var(--text);
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  line-height: 1.7;
  max-width: 420px;
  width: 100%;
  overflow: hidden;
}

#abandon-content {
  padding: 32px 24px 20px;
  text-align: center;
}

.abandon-heading {
  color: var(--green);
  letter-spacing: 3px;
  font-size: 14px;
  margin-bottom: 12px;
}

#abandon-content p {
  color: #8ab894;
  margin: 0;
}

#abandon-actions {
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#btn-abandon-stay {
  background: var(--green);
  color: var(--bg);
  font-weight: bold;
  border: none;
  padding: 14px 24px;
  font-family: "Courier New", monospace;
  font-size: 13px;
  letter-spacing: 2px;
  cursor: pointer;
  width: 100%;
  min-height: 44px;
  transition: background 0.15s;
}
#btn-abandon-stay:hover { background: var(--green-dim); }

#btn-abandon-confirm {
  background: none;
  border: 1px solid #1a4a2a;
  color: #8ab894;
  padding: 14px 24px;
  font-family: "Courier New", monospace;
  font-size: 13px;
  letter-spacing: 2px;
  cursor: pointer;
  width: 100%;
  min-height: 44px;
  transition: color 0.15s, border-color 0.15s;
}
#btn-abandon-confirm:hover { color: var(--red); border-color: var(--red); }

@media (min-width: 480px) {
  #abandon-actions { flex-direction: row; }
}

/* --- Screens --- */
#screen-title,
#screen-game-over,
#screen-victory {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 20px;
}

#screen-game-over,
#screen-victory {
  height: 100%;
}
/* #screen-title intentionally omits height:100% — its inline min-height:100vh
   lets the container grow past the viewport when portrait + body text exceed it,
   preventing justify-content:center from pushing the title lockup above scroll=0. */

.screen-active {
  display: flex !important;
}

.big-text {
  color: var(--green);
  font-size: 22px;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 0 30px var(--green);
  line-height: 1.4;
}

.title-lockup {
  width: auto;
  max-width: 100%;
  max-height: 160px;
  height: auto;
  display: block;
  margin: 0 auto;
  image-rendering: -webkit-optimize-contrast;
}

.screen-body {
  color: #8ab894;
  max-width: 600px;
  line-height: 1.8;
}

.btn {
  background: transparent;
  border: 1px solid var(--green);
  color: var(--green);
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 30px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn:hover {
  background: var(--green);
  color: var(--bg);
}

.title-cursor {
  display: inline-block;
  margin-left: 4px;
  animation: cursor-blink 1s step-end infinite;
  font-weight: normal;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.btn-secondary {
  border-color: var(--text-dim);
  color: #8ab894;
}

.btn-secondary:hover {
  background: var(--text-dim);
  color: var(--bg);
}

/* Loading indicator */
#loading {
  display: none;
  color: #8ab894;
  font-size: 12px;
  margin-top: 6px;
  padding-left: 20px;
}

#loading.visible {
  display: block;
}

.loading-dots::after {
  content: '...';
  animation: dots 1.2s steps(4, end) infinite;
}

@keyframes dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60% { content: '...'; }
  80%, 100% { content: ''; }
}

/* Evaluating indicator — swaps in for #input-prompt during API call */
#eval-god-name {
  white-space: nowrap;
}

#eval-indicator {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  color: var(--green);
  font-size: 16px;
  letter-spacing: 1px;
  text-align: center;
  line-height: 1.5;
}

#eval-indicator.visible {
  display: flex;
  animation: evalPulse 1.4s ease-in-out infinite;
}

@keyframes evalPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* Flicker effect for damage */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.flicker {
  animation: flicker 0.15s ease 3;
}

/* God-tier special effect */
@keyframes godtier {
  0% { text-shadow: 0 0 10px var(--green); }
  50% { text-shadow: 0 0 40px var(--green), 0 0 80px var(--amber); }
  100% { text-shadow: 0 0 10px var(--green); }
}

.godtier {
  animation: godtier 1s ease 2;
}

/* Hit quality pulse animations */
@keyframes punchHit {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes punchHitBig {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.10); }
  65%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.punch-puncredible {
  display: inline-block;
  animation: punchHit 400ms ease-out 1;
}

.punch-punbelievable {
  display: inline-block;
  animation: punchHit 500ms ease-out 1;
  filter: brightness(1.2);
}

.punch-punimaginable {
  display: inline-block;
  animation: punchHitBig 600ms ease-out 1;
}

/* Doctrine knockout block — same treatment as player puns, used only for
   the home screen and opening narration doctrine lines */
.text-doctrine {
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  background: var(--green-dark);
  border-left: 3px solid var(--green);
  padding: 10px 16px;
  margin: 16px 0;
  white-space: pre-wrap;
  font-style: italic;
}

/* Morpheus Notes footer reminder */
.scan-footer {
  color: var(--text-dim);
  font-size: 12px;
  font-style: italic;
  border-top: 1px solid var(--border);
  margin-top: 10px;
  padding-top: 8px;
}

/* Hide elements */
.hidden {
  display: none !important;
}

@media (min-width: 769px) {
  .morpheus-wrap { display: none; }
  .title-lockup { max-height: none; }
}

/* Mobile: extra top padding so MORPHEUS title isn't clipped on small viewports */
@media (max-width: 768px) {
  #screen-title {
    justify-content: flex-start !important;
  }
  #screen-title > div {
    padding-top: 24px !important;
  }
  .title-logo-wrap {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 479px) {
  .title-logo-wrap {
    margin-bottom: 0 !important;
  }
  .morpheus-wrap {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
  }
  .morpheus-wrap + div {
    padding-top: 0 !important;
  }
  .morpheus-wrap .god-portrait {
    max-width: 230px;
  }
}