:root {
  --bg-dark: #0a0a0b;
  --bg-card: #121214;
  --border: #2a1a1a;
  --blood: #8b0000;
  --blood-bright: #c41e3a;
  --blood-glow: rgba(196, 30, 58, 0.4);
  --metal: #3d3d3d;
  --metal-light: #5c5c5c;
  --text: #e8e6e3;
  --text-dim: #8a8885;
  --noise-pattern: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

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

/* All dropdowns: dark gray background, white text */
select,
select option {
  background: #2a2a2a;
  color: #fff;
}
select {
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
}
select:focus {
  outline: 1px solid var(--metal-light);
  outline-offset: 1px;
}

html {
  overscroll-behavior: none;
}

body {
  font-family: 'VT323', monospace;
  background: var(--bg-dark);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2rem;
  position: relative;
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: none; /* crisp/pixelated text; no standard property, webkit only */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Pixelated brick wall background (mask cutout updated by JS for combat box region) */
.brick-wall {
  position: fixed;
  inset: 0;
  background-image: url("brick-wall.svg");
  background-repeat: repeat;
  background-size: 170px 45px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  z-index: 0;
  opacity: var(--brick-opacity, 1);
  transition: opacity 0.5s ease;
  }

/* Subtle noise overlay */
.noise {
  position: fixed;
  inset: 0;
  background-image: var(--noise-pattern);
  pointer-events: none;
  z-index: 1;
}

.container {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
  max-width: 560px;
}

.view-game .container {
  max-width: 640px;
}

.view-upgrades .container {
  max-width: 650px;
}

.logo {
  font-family: 'Press Start 2P', cursive;
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  letter-spacing: 0.1em;
  color: var(--blood-bright);
  text-shadow: 0 0 20px var(--blood-glow);
  margin-bottom: 0.25rem;
  line-height: 1.8;
}

.tagline {
  font-size: 1.1rem;
  color: var(--text-dim);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.menu-bar {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 10;
}

.menu-item {
  font-family: 'VT323', monospace;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  padding: 0.5rem 1rem;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  position: relative;
  z-index: 1;
  pointer-events: auto;
  text-decoration: none;
  display: inline-block;
}

.menu-item:hover {
  color: var(--text);
}

.menu-item.active {
  color: var(--blood-bright);
  border-bottom-color: var(--blood-bright);
}

#main-content {
  position: relative;
  z-index: 0;
}

.view-stack {
  position: relative;
  min-height: 280px;
}

.view-stack > .view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: none;
  min-height: 200px;
}

.view-stack > .view.view-active {
  display: block !important;
  position: relative;
  z-index: 1;
}

.view-account .auth-panel {
  padding: 1rem 0;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.view-account .auth-form {
  flex-direction: column;
}

.view-account .auth-form input {
  width: 180px;
}

.view-settings .about-content {
  padding: 1rem 0;
  text-align: center;
}

.view-settings .about-lead {
  font-size: 1.35rem;
  color: var(--blood-bright);
  margin-bottom: 0.75rem;
}

.view-settings .about-content p {
  color: var(--text-dim);
  font-size: 1.15rem;
  line-height: 1.5;
}

/* Settings view */
.view-settings {
  padding: 1rem 0;
}

.settings-subnav {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.settings-subtab {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  padding: 0.5rem 1rem;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.settings-subtab:hover {
  color: var(--text);
}

.settings-subtab.active {
  color: var(--blood-bright);
  border-bottom-color: var(--blood-bright);
}

#productivity-subtab-habits.active {
  color: #0dd;
  border-bottom-color: #0dd;
}

#upgrades-subtab-shop.active {
  color: #e8b030;
  border-bottom-color: #d4a020;
}

.settings-subtab.habits-needs-attention {
  animation: habits-glow-pulse 1s ease-in-out infinite alternate;
}

.settings-subtab.habits-needs-attention:not(.active) {
  color: #066;
}

.settings-subtab.habits-needs-attention:hover:not(.active) {
  color: #088;
}

@keyframes habits-glow-pulse {
  from {
    text-shadow: 0 0 6px rgba(0, 221, 221, 0.5), 0 0 14px rgba(0, 221, 221, 0.4), 0 0 22px rgba(0, 187, 187, 0.3);
  }
  to {
    text-shadow: 0 0 14px rgba(0, 221, 221, 0.9), 0 0 28px rgba(0, 221, 221, 0.6), 0 0 42px rgba(0, 187, 187, 0.4);
  }
}

.settings-panels {
  min-height: 160px;
}

.settings-panel {
  display: none;
}

.settings-panel.settings-panel-active {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
}

.settings-timezone-label {
  display: block;
  color: var(--text);
  margin-bottom: 0.25rem;
}

#settings-timezone {
  min-width: 220px;
}

/* Productivity and Upgrades views */
.view-productivity,
.view-upgrades {
  padding: 1rem 0;
}

.productivity-panels,
.upgrades-panels,
.game-panels {
  min-height: 160px;
}

.productivity-panel,
.upgrades-panel,
.game-panel {
  display: none;
}

.productivity-panel.productivity-panel-active,
.upgrades-panel.upgrades-panel-active,
.game-panel.game-panel-active {
  display: block;
}

.habits-panel-content,
.shop-panel-content,
.game-panel-content {
  padding: 1rem 0;
}

.map-location-btn {
  font-family: 'VT323', monospace;
  font-size: 1.25rem;
  padding: 0.6rem 1rem;
  background: var(--bg-card);
  border: 2px solid var(--border);
  color: var(--text-dim);
  cursor: default;
  margin-bottom: 0.5rem;
}

.map-location-btn-active,
.map-location-btn.map-location-btn-active {
  color: var(--blood-bright);
  border-color: var(--blood-bright);
  background: rgba(255, 80, 80, 0.12);
  cursor: default;
}

.characters-in-session-msg {
  color: var(--blood-bright);
  font-family: 'VT323', monospace;
  font-size: 0.95rem;
  text-align: center;
  margin: 0.5rem 0;
  padding: 0.5rem;
  background: rgba(196, 30, 58, 0.1);
  border: 1px solid rgba(196, 30, 58, 0.3);
}

.characters-customization {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 0;
}

.characters-preview-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 4px;
}

.characters-preview {
  width: 256px;
  height: 256px;
  -webkit-image-rendering: pixelated;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
  object-fit: none;
}

.characters-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 300px;
}

.characters-control-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.characters-label {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.characters-color-input {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-card);
  border: 2px solid var(--border);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.characters-color-input:focus {
  outline: none;
  border-color: var(--blood-bright);
  background: rgba(255, 80, 80, 0.05);
}

.characters-gender-select {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-card);
  border: 2px solid var(--border);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.characters-gender-select:focus {
  outline: none;
  border-color: var(--blood-bright);
  background: rgba(255, 80, 80, 0.05);
}

.characters-error {
  color: var(--blood-bright);
  font-family: 'VT323', monospace;
  font-size: 0.95rem;
  text-align: center;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(196, 30, 58, 0.1);
  border: 1px solid rgba(196, 30, 58, 0.3);
}

.characters-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.shop-stock-heading {
  font-family: 'VT323', monospace;
  font-size: 1.25rem;
  font-weight: normal;
  color: var(--text-dim);
  text-align: center;
  margin: 1rem 0 0.5rem 0;
}

.shop-session-warning {
  color: var(--blood-bright);
  font-family: 'VT323', monospace;
  font-size: 0.95rem;
  text-align: center;
  margin: 0.5rem 0;
  padding: 0.5rem;
  background: rgba(196, 30, 58, 0.1);
  border: 1px solid rgba(196, 30, 58, 0.3);
}

.shop-items {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.potion-card {
  width: 180px;
  cursor: pointer;
  transition: box-shadow 0.2s ease, filter 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  user-select: none;
  border-width: 2px;
  border-style: solid;
}

.potion-card .stat-label,
.potion-card .potion-cost {
  color: inherit;
}

.potion-card .potion-label-line1,
.potion-card .potion-label-line2 {
  display: block;
  color: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}

.potion-card .potion-label-line2 {
  margin-top: 0.1rem;
}

.potion-card.potion-regeneration { border-color: #f0f; color: #f0f; }
.potion-card.potion-luck { border-color: #fc0; color: #fc0; }
.potion-card.potion-fortitude { border-color: #22c55e; color: #22c55e; }

.potion-card:hover:not(.cant-buy) {
  filter: brightness(1.1);
}

.potion-card:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.potion-card.cant-buy {
  opacity: 0.5;
  filter: grayscale(0.6);
  cursor: not-allowed;
}

.potion-card.potion-flash {
  filter: brightness(1.5);
  box-shadow: 0 0 16px currentColor;
}

.potion-cost {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: inherit;
  opacity: 0.9;
  margin-top: 0.25rem;
}

.shop-item-error {
  color: var(--blood);
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

/* Inventory screen: grid of slots + character preview. Single slot size for grid and equipment. */
.inventory-screen {
  --inventory-slot-size: 40px;
}

.inventory-screen .inventory-layout {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-height: 280px;
}

.inventory-screen .inventory-character-section {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.inventory-screen .inventory-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, var(--inventory-slot-size));
  grid-auto-rows: var(--inventory-slot-size);
  gap: 6px;
  align-content: start;
}

.inventory-slot {
  width: var(--inventory-slot-size);
  height: var(--inventory-slot-size);
  box-sizing: border-box;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 0;
}

.inventory-slot.inventory-slot-equipped {
  border-color: #f00;
  box-shadow: 0 0 8px #f00;
}

.inventory-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.5rem;
  margin-top: 0.75rem;
  min-height: 2rem;
}

.inventory-page-btn {
  min-width: 2rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
}

.inventory-pagination .inventory-page-ellipsis {
  padding: 0 0.25rem;
  color: var(--text-dim);
}

.inventory-screen .inventory-character-preview {
  flex-shrink: 0;
  width: 240px;
  height: 240px;
  position: relative;
  display: block;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 0;
}

.inventory-screen .inventory-character {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
  -webkit-image-rendering: pixelated;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: contain;
}

.inventory-equipment-overlay {
  position: absolute;
  width: 240px;
  height: 240px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.inventory-equipment-overlay .inventory-equipment-slot {
  position: absolute;
  width: var(--inventory-slot-size);
  height: var(--inventory-slot-size);
  box-sizing: border-box;
  background: var(--bg-dark);
  border: 2px solid var(--border);
  border-radius: 0;
  pointer-events: auto;
}

.inventory-equipment-overlay .inventory-equipment-head {
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
}

.inventory-equipment-overlay .inventory-equipment-chest {
  top: 115px;
  left: 100px;
}

.inventory-equipment-overlay .inventory-equipment-left-arm {
  top: 50%;
  left: 30px;
  transform: translateY(calc(-50% + 10px));
}

.inventory-equipment-overlay .inventory-equipment-right-arm {
  top: 50%;
  left: auto;
  right: 30px;
  transform: translateY(calc(-50% + 10px));
}

.inventory-buffs {
  width: 240px;
}

.inventory-buffs-label {
  font-family: 'VT323', monospace;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.inventory-buffs-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.inventory-buff-item {
  font-family: 'VT323', monospace;
  font-size: 0.9rem;
}

.inventory-buff-item.potion-regeneration {
  color: #f0f;
}

.inventory-buff-item.potion-luck {
  color: #fc0;
}

.inventory-buff-item.potion-fortitude {
  color: #22c55e;
}

.habits-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1rem 0;
}

.habits-group-heading {
  font-family: 'VT323', monospace;
  font-size: 1rem;
  font-weight: normal;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  margin: 0;
  margin-top: 1rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
}

.habits-group-heading:first-child {
  margin-top: 0;
}

.habit-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.habit-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.habit-action {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 2px solid;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.habit-action-soul {
  border-color: #22c55e;
}

.habit-action-soul:hover {
  background: rgba(34, 197, 94, 0.15);
}

.habit-action-gold {
  border-color: #c41e3a;
}

.habit-action-gold:hover {
  background: rgba(196, 30, 58, 0.15);
}

.habit-actions-taken .habit-action {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

.habit-actions-taken .habit-action-soul,
.habit-actions-taken .habit-action-gold {
  border-color: var(--text-dim);
}

.habit-action-done.habit-action-soul {
  border-color: #22c55e;
}

.habit-action-done.habit-action-gold {
  border-color: #c41e3a;
}

.habit-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.habit-action-check,
.habit-action-x {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.habit-item .habit-btn {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  padding: 0.5rem 0.75rem;
  border: 1px solid;
  border-radius: 0;
  cursor: pointer;
  flex: 1;
  text-align: left;
  min-width: 0;
  background: #000;
  transition: filter 0.15s, box-shadow 0.15s;
}

.habit-item .habit-btn:hover {
  filter: brightness(1.2);
  box-shadow: 0 0 12px currentColor;
}

.habit-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.habit-delete-btn:hover {
  opacity: 0.85;
}

.habit-trash-icon {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Modal overlay — darkens the site */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-overlay.modal-open {
  display: flex;
}

body.modal-open {
  overflow: hidden;
}

.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  padding: 1.5rem;
  max-width: 360px;
  width: 100%;
}

.modal-title {
  font-family: 'VT323', monospace;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  margin: 0 0 1rem 0;
  color: var(--text);
}

.forge-habit-form label {
  display: block;
  font-size: 0.9rem;
  color: var(--text-dim);
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
}

.forge-habit-form label:first-of-type {
  margin-top: 0;
}

.forge-habit-form input[type="text"] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  box-sizing: border-box;
}
.forge-habit-form select {
  width: 100%;
  box-sizing: border-box;
}

.forge-habit-form input:focus,
.forge-habit-form select:focus {
  outline: 1px solid var(--metal-light);
  outline-offset: 1px;
}

.modal-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  justify-content: flex-end;
}

/* Habit detail modal */
.habit-detail-modal {
  max-width: 420px;
}

.habit-detail-created {
  font-size: 0.95rem;
  color: var(--text-dim);
  margin: 0 0 0.75rem 0;
}

.habit-detail-color-label {
  display: block;
  font-size: 0.9rem;
  color: var(--text-dim);
  margin-bottom: 0.25rem;
}

.habit-detail-color {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  background: #2a2a2a;
  border: 1px solid var(--border);
  color: var(--text);
  box-sizing: border-box;
  margin-bottom: 1rem;
}

.habit-detail-color:focus {
  outline: 1px solid var(--metal-light);
  outline-offset: 1px;
}

.habit-detail-history-heading {
  font-family: 'VT323', monospace;
  font-size: 1rem;
  font-weight: normal;
  color: var(--text-dim);
  margin: 0 0 0.5rem 0;
}

.habit-detail-history {
  min-height: 120px;
  margin-bottom: 1rem;
}

/* Item detail modal */
.item-detail-modal {
  max-width: 400px;
}

.item-detail-sprite-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  background: var(--bg-card);
  border: 2px solid var(--border);
  margin: 1rem 0;
}

.item-detail-sprite {
  width: 128px;
  height: 128px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: contain;
}

.item-detail-actions {
  margin: 1rem 0;
}

.item-detail-action-btn {
  width: 100%;
  margin-bottom: 0.5rem;
}

.item-detail-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.habit-history-grid {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(7, 1fr);
  margin-top: 0.5rem;
}

.habit-history-cell {
  aspect-ratio: 1;
  max-width: 28px;
  max-height: 28px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: 0;
  font-size: 0.6rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
}

.habit-history-cell.completed-soul {
  background: rgba(34, 139, 34, 0.5);
  border-color: #228b22;
}

.habit-history-cell.completed-gold {
  background: rgba(178, 34, 34, 0.5);
  border-color: #b22222;
}

.habit-history-cell.completed-penalty {
  background: var(--bg-dark);
  border-color: #b22222;
}

.habit-history-weekday {
  font-size: 0.65rem;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 2px;
}

.panel-placeholder {
  color: var(--text-dim);
  font-size: 1rem;
  text-align: center;
  margin: 0;
}

/* Focus panel: vertical slider 2×–10× */
.focus-slider-label {
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

.focus-slider-wrap {
  width: 2rem;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.focus-slider {
  width: 200px;
  transform: rotate(-90deg);
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.focus-slider::-webkit-slider-runnable-track {
  height: 8px;
  background: linear-gradient(to right, #0a0a0b, var(--blood-bright));
  border: 1px solid var(--metal-light);
}

.focus-slider::-moz-range-track {
  height: 8px;
  background: linear-gradient(to right, #0a0a0b, var(--blood-bright));
  border: 1px solid var(--metal-light);
}

.focus-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 28px;
  background: #b0b0b0;
  border: none;
  cursor: pointer;
  margin-top: -11px;
}

.focus-slider::-moz-range-thumb {
  width: 10px;
  height: 28px;
  background: #b0b0b0;
  border: none;
  cursor: pointer;
  margin-top: -11px;
}

.focus-slider-value {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.9rem;
  color: var(--blood-bright);
  min-width: 3ch;
}

.auth-panel {
  margin-bottom: 1.5rem;
}

.auth-form,
.auth-logged-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.auth-form input {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  width: 120px;
}

.auth-form input::placeholder {
  color: var(--text-dim);
}

.auth-buttons {
  display: flex;
  gap: 0.5rem;
}

.auth-logged-in .auth-user {
  font-size: 1.1rem;
  color: var(--text-dim);
  margin-right: 0.5rem;
}

.auth-logged-in .auth-user strong {
  color: var(--blood-bright);
}

.auth-logged-in a.btn {
  text-decoration: none;
  color: inherit;
}

.auth-error {
  width: 100%;
  text-align: center;
  font-size: 1rem;
  color: var(--blood-bright);
  margin-top: 0.25rem;
  min-height: 1.2em;
}

.btn-sm {
  padding: 0.5rem 0.9rem;
  font-size: 1.1rem;
}

.stats-row {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.stats-row-xp {
  margin-bottom: 0.5rem;
}

.stats-row-bottom {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  align-items: center;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.75rem 1rem;
  min-width: 100px;
  border-radius: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.stat-card.xp-card {
  border-color: var(--blood);
  color: var(--blood-bright);
}

.stat-card.session-gold-card,
.stat-card.available-gold-card {
  border-color: #d4a020;
  color: #e8b030;
}

.stat-card.soul-gems-card {
  border-color: #0dd;
  color: #0dd;
}

.skills-guest-msg,
.skills-in-session-msg {
  color: var(--text-dim);
  font-size: 1.1rem;
  margin: 1rem 0;
}

.inventory-in-session-msg,
.map-in-session-msg {
  color: var(--text-dim);
  font-size: 1.1rem;
  margin: 1rem 0;
}

.skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
}

.skill-card .stat-label,
.skill-card .stat-value {
  color: inherit;
}

.skill-card.skill-power { border-color: #e00; color: #e00; }
.skill-card.skill-speed { border-color: #7dd; color: #7dd; }
.skill-card.skill-precision { border-color: #fc0; color: #fc0; }
.skill-card.skill-accuracy { border-color: #0f8; color: #0f8; }
.skill-card.skill-sharpness { border-color: #800; color: #a00; }
.skill-card.skill-might { border-color: #f80; color: #f80; }
.skill-card.skill-reach { border-color: #0077b6; color: #0080c0; }
.skill-card.skill-intensity { border-color: #a0a; color: #c0c; }
.skill-card.skill-weight { border-color: #1aa89e; color: #1aa89e; }
.skill-card.skill-momentum { border-color: #0b0; color: #0b0; }
.skill-card.skill-lethality { border-color: var(--blood-bright); color: var(--blood-bright); }
.skill-card.skill-balance { border-color: #bbb; color: #ccc; }

.skill-card {
  cursor: pointer;
  transition: box-shadow 0.2s ease, filter 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  user-select: none;
}
.skill-card:hover {
  filter: brightness(1.1);
}
.skill-card.skill-flash {
  filter: brightness(1.5);
  box-shadow: 0 0 16px currentColor;
}
.skill-card:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.skill-cost {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin-top: 0.25rem;
  user-select: none;
}

.skill-card.cant-afford .skill-cost {
  color: var(--blood);
  opacity: 0.9;
}

.skills-reset-wrap {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.skills-reset-error {
  font-size: 0.7rem;
  color: var(--blood);
  min-height: 1.2em;
}

.stat-label {
  display: block;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.25rem;
}

.stat-value {
  font-family: 'Press Start 2P', cursive;
  font-size: 1rem;
  letter-spacing: 0.05em;
  line-height: 1.6;
  user-select: none;
}

#break-available {
  transition: color 0.5s ease, text-shadow 0.5s ease;
  text-shadow: 0 0 calc(20px * var(--break-redness, 0)) rgba(196, 30, 58, calc(0.5 * var(--break-redness, 0)));
}

#break-available.break-low {
  display: inline-block;
  animation: break-low-vibrate var(--break-shake-duration, 0.15s) ease-in-out infinite;
}

@keyframes break-low-vibrate {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(calc(var(--break-shake-px, 2) * -1px)); }
  75% { transform: translateX(calc(var(--break-shake-px, 2) * 1px)); }
}

.mode-indicator {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.mode-badge {
  display: inline-block;
  font-size: 1rem;
  letter-spacing: 0.2em;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--metal);
  color: var(--text-dim);
  border-radius: 2px;
}

.mode-badge.break {
  border-color: var(--blood);
  color: var(--blood-bright);
  box-shadow: 0 0 12px var(--blood-glow);
}

.timer-display {
  margin: 1rem 0 0.4rem;
}

.combat-box-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.5rem 0;
}

.combat-box {
  width: min(380px, 85vw);
  height: min(380px, 85vw);
  background: var(--bg-dark), var(--noise-pattern);
  background-attachment: scroll, fixed;
  background-repeat: repeat, repeat;
  border: 2px solid rgba(139, 0, 0, var(--brick-opacity, 1));
  transition: border-color 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.combat-box * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.combat-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100px;
  display: block;
}

.combat-box-figures {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  transition: opacity 0.35s ease;
  pointer-events: none;
  opacity: 0;
}

.combat-box.show-character .combat-box-figures {
  pointer-events: auto;
}

.combat-box-character,
.combat-figure-enemy {
  position: absolute;
  display: block;
  width: 64px;
  height: 64px;
  -webkit-image-rendering: pixelated;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  object-fit: none;
  box-sizing: border-box;
}

.combat-box-enemies {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.combat-figure-enemy-wrap {
  position: absolute;
  box-sizing: border-box;
  transition: opacity 0.4s ease;
}

/* Parabolic arc: y peaks at 50% horizontal, symmetric (sample points for smooth curve) */
@keyframes enemy-leap-arc-out {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-15px, -16.5px); }
  50%  { transform: translate(-30px, -22px); }
  75%  { transform: translate(-45px, -16.5px); }
  100% { transform: translate(-60px, 0); }
}

@keyframes enemy-leap-arc-back {
  0%   { transform: translate(-60px, 0); }
  25%  { transform: translate(-45px, -16.5px); }
  50%  { transform: translate(-30px, -22px); }
  75%  { transform: translate(-15px, -16.5px); }
  100% { transform: translate(0, 0); }
}

.combat-figure-enemy-wrap.enemy-leap {
  animation: enemy-leap-arc-out 0.28s linear forwards;
}

.combat-figure-enemy-wrap.enemy-leap-return {
  animation: enemy-leap-arc-back 0.28s linear forwards;
}

.combat-figure-enemy-wrap.enemy-fade-out {
  opacity: 0;
}

.combat-figure-enemy-wrap.enemy-fade-out.player-death-fade {
  transition: opacity 2s ease-out;
}

.combat-figure-enemy-wrap.enemy-death-in-progress .enemy-hp-bar {
  display: none;
}

.combat-figure-enemy-wrap .enemy-hp-bar {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 8px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--blood);
  overflow: hidden;
  box-sizing: border-box;
}

.combat-figure-enemy-wrap .enemy-hp-bar-fill {
  height: 100%;
  background: var(--blood-bright);
  transition: width 0.15s ease;
}

.combat-figure-enemy-wrap .combat-figure-enemy {
  position: absolute;
}

.combat-figure-enemy-wrap .combat-figure-enemy.enemy-damage-flash {
  animation: enemy-damage-flash 0.1s ease-out;
}

@keyframes enemy-damage-flash {
  0% { filter: brightness(1); }
  40% { filter: brightness(3); }
  100% { filter: brightness(1); }
}

.combat-figure-enemy-wrap .combat-figure-enemy.enemy-clash-flash {
  animation: enemy-clash-flash 0.2s ease-out;
}

@keyframes enemy-clash-flash {
  0% { filter: brightness(1); }
  50% { filter: brightness(2) saturate(1.5) hue-rotate(20deg); }
  100% { filter: brightness(1); }
}

.enemy-death-particles {
  position: absolute;
  left: 0;
  top: 8px;
  width: 64px;
  height: 64px;
  pointer-events: none;
}

.enemy-death-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: -3px;
  border-radius: 50%;
  animation: enemy-death-particle-burst 0.45s ease-out forwards;
}

@keyframes enemy-death-particle-burst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), var(--ty)) scale(0);
    opacity: 0;
  }
}

.combat-figure-character-group {
  position: absolute;
  box-sizing: border-box;
  overflow: visible;
  transition: transform 0.2s ease, opacity 2s ease-out;
}

.combat-figure-character-group.player-fade-out {
  opacity: 0;
}

.combat-figure-character-group.combat-step-forward {
  transform: translateX(48px);
}

.combat-figure-character-group .combat-box-character {
  position: absolute;
  left: 0;
  top: 0;
}

.combat-box-character.player-damage-flash {
  animation: player-damage-flash 0.15s ease-out;
}

@keyframes player-damage-flash {
  0%   { filter: none; }
  25%  { filter: sepia(1) hue-rotate(320deg) saturate(6) brightness(1.1); }
  100% { filter: none; }
}

.combat-box-character.player-clash-flash {
  animation: player-clash-flash 0.2s ease-out;
}

@keyframes player-clash-flash {
  0%   { filter: none; }
  50%  { filter: brightness(1.5) saturate(1.5) hue-rotate(20deg); }
  100% { filter: none; }
}

.combat-figure-character-group .combat-box-sword {
  position: absolute;
}

.combat-box-sword {
  position: absolute;
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transform: rotate(0deg);
  transform-origin: 32px 32px;
  visibility: hidden;
}

.combat-box-sword.move-sword-swing {
  visibility: visible;
  animation: keyframes-sword-swing 0.7s forwards;
}

@keyframes keyframes-sword-swing {
  0% {
    opacity: 1;
    transform: rotate(0deg);
  }
  25% {
    opacity: 1;
    transform: rotate(90deg);
  }
  85% {
    opacity: 1;
    transform: rotate(90deg);
  }
  95% {
    opacity: 0;
    transform: rotate(90deg);
  }
  100% {
    opacity: 0;
    transform: rotate(90deg);
  }
}

.combat-box-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'VT323', monospace;
  font-size: 1.25rem;
  color: var(--text);
  text-align: center;
  line-height: 1.4;
  max-width: min(24em, 85vw);
  overflow-wrap: break-word;
  word-wrap: break-word;
  transition: opacity 0.35s ease;
  pointer-events: none;
  opacity: 0;
}

.combat-box.show-text .combat-box-text {
  pointer-events: auto;
  opacity: 1;
}

.combat-box-text.back-to-work {
  color: var(--blood-bright);
  font-size: 1.5rem;
  text-shadow: 0 0 20px var(--blood-glow), 0 0 40px var(--blood-glow);
}

.combat-box-text.vanquished-message {
  color: var(--blood-bright);
  font-size: 1.5rem;
  text-shadow: 0 0 20px var(--blood-glow), 0 0 40px var(--blood-glow);
}

.damage-popup {
  position: absolute;
  left: 50%;
  top: 35%;
  transform: translate(-50%, 0);
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  pointer-events: none;
  animation: damage-popup-float 0.7s ease-out forwards;
}

.damage-popup.damage-popup-crit {
  color: #fc0;
}

@keyframes damage-popup-float {
  0% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -42px);
  }
}

.parry-popup {
  position: absolute;
  left: 50%;
  top: 35%;
  transform: translate(-50%, 0);
  font-family: 'VT323', monospace;
  font-size: 1rem;
  font-weight: bold;
  color: #f80;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  pointer-events: none;
  animation: damage-popup-float 0.7s ease-out forwards;
}

.miss-popup {
  position: absolute;
  left: 50%;
  top: 35%;
  transform: translate(-50%, 0);
  font-family: 'VT323', monospace;
  font-size: 1rem;
  font-weight: bold;
  color: #9ca3af;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  pointer-events: none;
  animation: damage-popup-float 0.7s ease-out forwards;
}

.player-hp-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid #15803d;
  border-radius: 0;
  overflow: hidden;
  box-sizing: border-box;
  display: none;
  align-items: center;
  justify-content: center;
}

.combat-box.show-character.in-session .player-hp-bar {
  display: flex;
}

.player-hp-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: #22c55e;
  transition: width 0.2s ease;
  z-index: 0;
}

.player-hp-bar-label {
  position: relative;
  z-index: 1;
  font-family: 'VT323', monospace;
  font-size: 1.25rem;
  color: var(--text);
  pointer-events: none;
}

.timer-value {
  font-family: 'Press Start 2P', cursive;
  font-size: clamp(1.75rem, 10vw, 2.5rem);
  letter-spacing: 0.05em;
  color: var(--text);
  text-shadow: 0 0 30px rgba(255,255,255,0.05);
  user-select: none;
  line-height: 1.6;
}

.timer-value.break-active {
  color: var(--blood-bright);
  text-shadow: 0 0 24px var(--blood-glow);
}

.session-error {
  color: #e00;
  font-size: 0.95rem;
  margin: 0 0 0.5rem 0;
  text-align: center;
  min-height: 1.25em;
}

.session-error[hidden] {
  display: none !important;
}

.controls {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: nowrap;
}

.btn {
  font-family: 'VT323', monospace;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.85rem 1.5rem;
  border: none;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s, background 0.2s;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--blood);
  color: var(--text);
  border: 1px solid var(--blood-bright);
  box-shadow: 0 0 20px var(--blood-glow);
}

.btn-primary:hover {
  background: var(--blood-bright);
  box-shadow: 0 0 28px var(--blood-glow);
}

.btn-primary.break-mode {
  background: var(--bg-card);
  color: var(--blood-bright);
  border-color: var(--blood);
}

.btn-primary.break-mode:hover {
  background: rgba(139, 0, 0, 0.2);
}

.btn-secondary {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--metal);
}

.btn-secondary:hover {
  color: var(--text);
  border-color: var(--metal-light);
}

.btn-secondary.turbo-on {
  border-color: var(--blood-bright);
  color: var(--blood-bright);
  box-shadow: 0 0 12px var(--blood-glow);
}

.btn-secondary.warp-on {
  border-color: var(--blood-bright);
  color: #ff4466;
  text-shadow: 0 0 12px var(--blood-glow), 0 0 24px var(--blood-glow);
  box-shadow: 0 0 16px var(--blood-glow), 0 0 32px var(--blood-glow), 0 0 48px rgba(196, 30, 58, 0.6), 0 0 64px rgba(196, 30, 58, 0.4);
  animation: warp-glow 0.8s ease-in-out infinite alternate;
}

@keyframes warp-glow {
  from {
    box-shadow: 0 0 16px var(--blood-glow), 0 0 32px var(--blood-glow), 0 0 48px rgba(196, 30, 58, 0.6), 0 0 64px rgba(196, 30, 58, 0.4);
  }
  to {
    box-shadow: 0 0 24px var(--blood-glow), 0 0 48px var(--blood-glow), 0 0 72px rgba(196, 30, 58, 0.7), 0 0 96px rgba(196, 30, 58, 0.5);
  }
}

.btn-forge-habit {
  border-color: #0dd;
  color: #0dd;
  text-shadow: 0 0 6px rgba(0, 221, 221, 0.5);
  box-shadow: 0 0 8px rgba(0, 221, 221, 0.35), 0 0 16px rgba(0, 221, 221, 0.2);
  animation: forge-habit-pulse 2s ease-in-out infinite alternate;
}

.btn-forge-habit:hover {
  color: #2ee;
  border-color: #2ee;
  text-shadow: 0 0 8px rgba(0, 221, 221, 0.6);
}

@keyframes forge-habit-pulse {
  from {
    box-shadow: 0 0 8px rgba(0, 221, 221, 0.35), 0 0 16px rgba(0, 221, 221, 0.2);
  }
  to {
    box-shadow: 0 0 12px rgba(0, 221, 221, 0.5), 0 0 24px rgba(0, 221, 221, 0.3);
  }
}