/**
 * @fileoverview ShilpLoka UI Stylesheet - Terracotta, Sandstone & Vedic Gold Theme
 */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

body, html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #120e0c;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #f7ede2;
}

#canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#canvas-container canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

#crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #deb887;
  font-size: 22px;
  pointer-events: none;
  z-index: 10;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(212, 175, 55, 0.6);
}

/* Top Toolbar */
.top-toolbar {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 20;
  display: flex;
  gap: 12px;
}

.toolbar-btn {
  background: rgba(28, 22, 19, 0.9);
  border: 1px solid #d4af37;
  color: #f7ede2;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  transition: all 0.2s ease;
}

.toolbar-btn:hover {
  background: #3e2d22;
  border-color: #f39c12;
  transform: translateY(-2px);
}

.ancient-hud {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  background: rgba(28, 22, 19, 0.85);
  border: 2px solid #b85d3f;
  border-left: 5px solid #d4af37;
  border-radius: 6px;
  padding: 12px 18px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  min-width: 300px;
}

.hud-header {
  display: flex;
  flex-direction: column;
}

.hud-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #d4af37;
  text-transform: uppercase;
}

.hud-sub {
  font-size: 11px;
  color: #deb887;
  margin-top: 2px;
}

.hud-divider {
  height: 1px;
  background: linear-gradient(to right, #b85d3f, transparent);
  margin: 8px 0;
}

.hud-stat {
  font-size: 12px;
  line-height: 1.6;
  color: #f7ede2;
  font-family: 'Courier New', Courier, monospace;
}

.hud-stat.highlight {
  color: #2ecc71;
  font-weight: bold;
}

.controls-pill {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: rgba(28, 22, 19, 0.9);
  border: 1px solid #b85d3f;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
  padding: 8px 22px;
  border-radius: 30px;
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 12px;
  color: #deb887;
}

kbd {
  background: #3a2e28;
  color: #f7ede2;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 11px;
  border: 1px solid #d4af37;
}

/* In-Game MDN-Style Desi Learning Center Modal */
.learning-modal-root {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 8, 7, 0.8);
  backdrop-filter: blur(5px);
}

.learning-modal-root.hidden {
  display: none;
}

.learning-card {
  width: 92%;
  max-width: 1000px;
  height: 85vh;
  background: #1a1410;
  border: 2px solid #d4af37;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.learning-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #251d18;
  border-bottom: 2px solid #b85d3f;
}

.header-title-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chakra-icon {
  font-size: 28px;
  color: #d4af37;
}

.learning-header h2 {
  font-size: 18px;
  color: #d4af37;
}

.sub-lead {
  font-size: 12px;
  color: #deb887;
}

.learn-close-btn {
  background: transparent;
  border: none;
  font-size: 32px;
  color: #deb887;
  cursor: pointer;
  line-height: 1;
}

.learn-close-btn:hover {
  color: #e74c3c;
}

.learning-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Sidebar Navigation */
.learning-sidebar {
  width: 280px;
  background: #140f0c;
  border-right: 1px solid #3a2e28;
  overflow-y: auto;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-topic-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: all 0.15s ease;
}

.nav-topic-btn:hover {
  background: #251d18;
  border-color: #5a4438;
}

.nav-topic-btn.active {
  background: #3e2d22;
  border-color: #d4af37;
  border-left: 4px solid #d4af37;
}

.nav-topic-title {
  font-size: 13px;
  font-weight: 600;
  color: #f7ede2;
}

.nav-topic-sub {
  font-size: 11px;
  color: #deb887;
  margin-top: 2px;
}

/* Article Content Pane */
.learning-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  color: #f7ede2;
  line-height: 1.6;
}

.article-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.topic-tag {
  background: #3a2e28;
  border: 1px solid #d4af37;
  color: #d4af37;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  font-weight: bold;
}

.article-title {
  font-size: 22px;
  color: #d4af37;
}

.article-subtitle {
  font-size: 13px;
  color: #deb887;
  margin-top: 4px;
}

.article-divider {
  height: 1px;
  background: linear-gradient(to right, #b85d3f, transparent);
  margin: 16px 0;
}

.article-body h3 {
  color: #f39c12;
  font-size: 16px;
  margin-top: 16px;
  margin-bottom: 8px;
}

.article-body p {
  margin-bottom: 12px;
  font-size: 14px;
}

.article-body strong {
  color: #d4af37;
}

.article-body li {
  margin-left: 20px;
  margin-bottom: 6px;
  font-size: 13px;
}

.inline-code {
  background: #2a201a;
  color: #2ecc71;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
  border: 1px solid #5a4438;
}

.code-header {
  font-size: 12px;
  font-weight: bold;
  color: #deb887;
  margin-top: 18px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.code-block {
  background: #0f0b09;
  border: 1px solid #b85d3f;
  border-radius: 6px;
  padding: 14px 18px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  overflow-x: auto;
  line-height: 1.5;
}

/* Heritage Monument Preservation Banner */
.monument-banner {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(184, 93, 63, 0.95);
  color: #fff;
  border: 2px solid #d4af37;
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
  z-index: 250;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.monument-banner.hidden {
  opacity: 0;
  transform: translate(-50%, -20px);
  pointer-events: none;
}

/* ==========================================================================
   Ancient Hotbar (1-9 Slots)
   ========================================================================== */
.ancient-hotbar {
  position: absolute;
  bottom: 74px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  background: rgba(22, 17, 14, 0.95);
  border: 2px solid #b85d3f;
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.85);
  z-index: 25;
}

.hotbar-slot {
  position: relative;
  width: 52px;
  height: 52px;
  background: #18120e;
  border: 2px solid #4a382d;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

.hotbar-slot:hover {
  border-color: #deb887;
  transform: translateY(-2px);
  background: #251d18;
}

.hotbar-slot.active {
  border-color: #d4af37;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.8), inset 0 0 10px rgba(212, 175, 55, 0.35);
  background: #2c2017;
  transform: translateY(-4px);
}

.slot-number {
  position: absolute;
  top: 3px;
  left: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #deb887;
  pointer-events: none;
}

.slot-icon {
  font-size: 24px;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.slot-count {
  position: absolute;
  bottom: 3px;
  right: 5px;
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9), 0 0 2px #000;
  pointer-events: none;
}

/* ==========================================================================
   Barter NPC Trading Modal (Dhanapati)
   ========================================================================== */
.barter-modal-root {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 8, 7, 0.82);
  backdrop-filter: blur(6px);
}

.barter-modal-root.hidden {
  display: none;
}

.barter-modal-backdrop {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.barter-card {
  width: 90%;
  max-width: 980px;
  height: 82vh;
  background: #19130f;
  border: 2px solid #d4af37;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.barter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #251d18;
  border-bottom: 2px solid #b85d3f;
}

.barter-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.barter-title h2 {
  font-size: 18px;
  color: #d4af37;
}

.barter-sub {
  font-size: 12px;
  color: #deb887;
}

.barter-body {
  display: grid;
  grid-template-columns: 240px 1fr 240px;
  gap: 16px;
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.barter-column {
  background: #130e0b;
  border: 1px solid #3d2f26;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.col-title {
  font-size: 13px;
  font-weight: 700;
  color: #d4af37;
  border-bottom: 1px solid #3d2f26;
  padding-bottom: 6px;
}

.stock-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.stock-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1f1814;
  border: 1px solid #3a2e26;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
}

.stock-name {
  color: #deb887;
  text-transform: capitalize;
}

.stock-val {
  color: #2ecc71;
  font-weight: bold;
}

.barter-exchange-box {
  background: #15100d;
  border: 1px solid #b85d3f;
  border-radius: 8px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.trade-field {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.trade-field label {
  font-size: 12px;
  font-weight: 600;
  color: #deb887;
}

.retro-select {
  background: #251d18;
  border: 1px solid #d4af37;
  color: #f7ede2;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  width: 82%;
  cursor: pointer;
  outline: none;
}

.retro-select:focus {
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
}

.qty-control {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.qty-btn {
  background: #3e2d22;
  border: 1px solid #d4af37;
  color: #f7ede2;
  width: 34px;
  height: 34px;
  font-size: 18px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.qty-btn:hover {
  background: #5a4232;
  transform: scale(1.05);
}

.qty-num {
  font-size: 16px;
  font-weight: 800;
  min-width: 32px;
  text-align: center;
  color: #d4af37;
}

.trade-arrow {
  font-size: 13px;
  color: #deb887;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.exchange-summary {
  background: #201915;
  border: 1px dashed #d4af37;
  border-radius: 8px;
  padding: 14px 20px;
  width: 82%;
  text-align: left;
}

.calc-row {
  font-size: 13px;
  margin-bottom: 4px;
}

.calc-sub {
  font-size: 11px;
  color: #deb887;
  margin-top: 6px;
  border-top: 1px solid #3a2e26;
  padding-top: 4px;
}

.barter-action-btn {
  background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
  color: #120e0c;
  border: none;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 800;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.4);
  transition: all 0.2s ease;
}

.barter-action-btn:hover {
  background: linear-gradient(135deg, #f1c40f 0%, #d4af37 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.6);
}

.barter-toast-msg {
  font-size: 12px;
  font-weight: 600;
  min-height: 18px;
}

/* ==========================================================================
   Vedic Crafting Altar Modal (Nirmana Peetha)
   ========================================================================== */
.crafting-modal-root {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 8, 7, 0.82);
  backdrop-filter: blur(6px);
}

.crafting-modal-root.hidden {
  display: none;
}

.crafting-modal-backdrop {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crafting-card {
  width: 90%;
  max-width: 980px;
  height: 82vh;
  background: #19130f;
  border: 2px solid #d4af37;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.crafting-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #251d18;
  border-bottom: 2px solid #b85d3f;
}

.crafting-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.crafting-title h2 {
  font-size: 18px;
  color: #d4af37;
}

.crafting-sub {
  font-size: 12px;
  color: #deb887;
}

.crafting-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.recipes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 18px;
}

.recipe-card {
  background: #140f0c;
  border: 2px solid #3d2f26;
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  transition: all 0.2s ease;
}

.recipe-card.craftable {
  border-color: #27ae60;
  box-shadow: 0 4px 16px rgba(39, 174, 96, 0.2);
}

.recipe-card.locked {
  opacity: 0.7;
  border-color: #3d2f26;
}

.recipe-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.recipe-result-icon {
  font-size: 32px;
  background: #251d18;
  border: 1px solid #5a4438;
  border-radius: 8px;
  padding: 6px 10px;
}

.recipe-card-header h4 {
  font-size: 15px;
  color: #d4af37;
}

.recipe-yield {
  font-size: 12px;
  color: #2ecc71;
  font-weight: 600;
}

.recipe-desc {
  font-size: 12px;
  color: #deb887;
  line-height: 1.5;
}

.recipe-ingredients-box {
  background: #1b1511;
  border: 1px solid #3a2e26;
  border-radius: 6px;
  padding: 10px 14px;
}

.ing-title {
  font-size: 11px;
  font-weight: 700;
  color: #d4af37;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.ing-item {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 4px;
}

.craft-btn {
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.craft-btn.btn-active {
  background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.4);
}

.craft-btn.btn-active:hover {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(46, 204, 113, 0.6);
}

.craft-btn.btn-disabled {
  background: #2b221d;
  color: #7f8c8d;
  cursor: not-allowed;
  border: 1px solid #3d2f26;
}

/* ==========================================================================
   Mobile Virtual Controls & Joystick Styling
   ========================================================================== */
.mobile-controls-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
}

.joystick-zone {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 65%;
  pointer-events: auto;
  touch-action: none;
}

.joystick-base {
  position: absolute;
  width: 110px;
  height: 110px;
  margin-left: -55px;
  margin-top: -55px;
  border-radius: 50%;
  background: rgba(28, 22, 19, 0.55);
  border: 2px solid rgba(212, 175, 55, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.joystick-base.active {
  display: flex;
}

.joystick-thumb {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, #d4af37 0%, #b85d3f 100%);
  border: 2px solid #deb887;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.85);
  pointer-events: none;
}

.camera-touch-zone {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 65%;
  pointer-events: auto;
  touch-action: none;
}

.mobile-action-buttons {
  position: absolute;
  bottom: 85px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: auto;
  z-index: 55;
}

.action-btn-row {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.mobile-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(26, 20, 16, 0.8);
  border: 2px solid #d4af37;
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.1s ease;
}

.mobile-btn:active,
.mobile-btn.pressed {
  transform: scale(0.92);
  background: rgba(212, 175, 55, 0.6);
  border-color: #f39c12;
}

.mobile-quick-toolbar {
  position: absolute;
  top: 60px;
  right: 16px;
  display: flex;
  pointer-events: auto;
  z-index: 55;
  /* Six buttons since Inventory/Save/Load were added: wrap into rows on the
     right half of the screen instead of running under the HUD (which takes
     up to 48vw on the left) or off the edge. 50vw - 24px leaves a gap. */
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: calc(50vw - 24px);
}

/* Portrait phones: one column down the right edge. WHY: the HUD keeps a
   220 px min-width, so the space to its right is only ~110-150 px; a column
   is as wide as the widest button, where rows would reach across the HUD. */
@media (orientation: portrait) {
  .mobile-quick-toolbar {
    flex-direction: column;
    align-items: flex-end;
    max-width: none;
  }
}

.mobile-mini-btn {
  background: rgba(26, 20, 16, 0.85);
  border: 1px solid #d4af37;
  color: #f7ede2;
  font-size: 11px;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  cursor: pointer;
}

/* Mobile Screen Responsive Adaptations */
@media (max-width: 920px), (pointer: coarse) {
  #controls-hint {
    display: none !important;
  }
  .top-toolbar {
    display: none !important;
  }
  .ancient-hud {
    font-size: 10px;
    padding: 8px 12px;
    min-width: 220px;
    max-width: 48vw;
    line-height: 1.4;
  }
  .hud-stat {
    font-size: 10px;
    line-height: 1.4;
  }
  .ancient-hotbar {
    bottom: 10px;
    transform: translateX(-50%) scale(0.82);
    transform-origin: bottom center;
  }
}



/* ==========================================================================
   Save system UI  (added with core/shilp_save.js)
   WHY: the player needs to know their world is being kept - and to be told
   when it is NOT (storage full or blocked). Styled with the same gold border
   and terracotta palette as the monument banner so it reads as part of the
   game, not a browser notification.
   ========================================================================== */

/* "New World" is destructive, so it is visually quieter than the other
   toolbar actions: it should be findable, not tempting. */
.toolbar-btn-quiet {
  border-color: rgba(212, 175, 55, 0.45);
  color: rgba(247, 237, 226, 0.78);
}

/* Bottom-left, away from the hotbar and the monument banner, so a save never
   covers anything the player is looking at. */
.save-toast {
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: rgba(28, 22, 19, 0.92);
  color: #f7ede2;
  border: 1px solid #d4af37;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  z-index: 240;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  /* The unreadable-save warning is two sentences: wrap it instead of letting
     it run off a phone screen. */
  max-width: min(460px, calc(100vw - 36px));
  line-height: 1.4;
}

/* Warning variant: storage near its limit, or the save failed outright. */
.save-toast.warn {
  background: rgba(184, 93, 63, 0.95);
}

.save-toast.hidden {
  opacity: 0;
  transform: translateY(8px);
}

@media (prefers-reduced-motion: reduce) {
  .save-toast { transition: none; }
}

/* On narrow or touch screens the hotbar drops to the bottom edge (about
   10-70 px up), so the toast sits just above it; a wrapped two-line warning
   would otherwise cover the hotbar slots. Placed AFTER the base rule so it
   wins at equal specificity. */
@media (max-width: 920px), (pointer: coarse) {
  .save-toast { bottom: 84px; }
}

/* ==========================================================================
   Inventory panel - Potli (E). Same frame, colours and slot look as the
   crafting altar and the hotbar, so it reads as part of the same game.
   ========================================================================== */
.inventory-modal-root {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 8, 7, 0.82);
  backdrop-filter: blur(6px);
}

.inventory-modal-root.hidden {
  display: none;
}

.inventory-card {
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow: auto;
  background: #19130f;
  border: 2px solid #d4af37;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.9);
}

.inventory-body {
  padding: 16px 24px 20px;
}

.inventory-label {
  color: #deb887;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 10px 0 8px;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(9, 52px);
  gap: 8px;
}

/* A <button> reset on top of .hotbar-slot, so the slots are keyboard- and
   screen-reader-reachable but look exactly like the hotbar. */
.inventory-slot {
  padding: 0;
  font: inherit;
  color: inherit;
}

.inventory-slot.picked {
  border-color: #2ecc71;
  box-shadow: 0 0 12px rgba(46, 204, 113, 0.75);
  transform: translateY(-3px);
}

.inventory-held {
  min-height: 18px;
  margin-top: 12px;
  font-size: 12px;
  color: #2ecc71;
}

/* Phones, portrait (narrow) or landscape (short): 9 x 30 px + gaps + padding
   is 330 px, inside the 336 px a 360 px-wide screen leaves for the card, and
   all four rows fit a 360 px-tall screen. The 1-9 badges are dropped at this
   size (they covered the icon); the row is labelled "Hotbar (1-9)". */
@media (max-width: 620px), (max-height: 480px) {
  .inventory-grid {
    grid-template-columns: repeat(9, 30px);
    gap: 4px;
  }
  .inventory-grid .hotbar-slot {
    width: 30px;
    height: 30px;
  }
  .inventory-grid .slot-number {
    display: none;
  }
  .inventory-grid .slot-count {
    font-size: 9px;
    bottom: 1px;
    right: 2px;
  }
  .inventory-grid .slot-icon {
    font-size: 16px;
  }
  .inventory-body {
    padding: 10px 12px 14px;
  }
}