/* Base styling and layout */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
    }

    body {
      background-color: #0b0713;
      color: #e0d5e8;
      font-family: 'VT323', monospace;
      font-size: 24px;
      overflow: hidden;
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* Game Container - standard 4:3 or 16:10 retro feel */
    #game-container {
      position: relative;
      width: 100vw;
      height: 100vh;
      max-width: 1200px;
      max-height: 800px;
      background-color: #000;
      border: 4px solid #3c1e59;
      border-radius: 8px;
      box-shadow: 0 0 30px rgba(91, 33, 182, 0.4);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* Make canvas fill container space above HUD */
    #game-canvas {
      width: 100%;
      height: calc(100% - 100px); /* 100px reserved for HUD */
      display: block;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
      background-color: #050209;
    }

    /* CRT Screen Effect Overlay */
    #crt-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: calc(100% - 100px);
      pointer-events: none;
      background: linear-gradient(
        rgba(18, 16, 16, 0) 50%, 
        rgba(0, 0, 0, 0.25) 50%
      );
      background-size: 100% 4px;
      z-index: 10;
    }

    #crt-overlay::after {
      content: " ";
      display: block;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
      background: radial-gradient(circle, rgba(18, 16, 16, 0) 60%, rgba(0, 0, 0, 0.4) 100%);
      pointer-events: none;
    }

    /* Screen Flash for damage and casting */
    #screen-flash {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: calc(100% - 100px);
      pointer-events: none;
      z-index: 9;
      opacity: 0;
      transition: opacity 0.05s ease-out;
    }
    #screen-flash.damage {
      background-color: rgba(220, 38, 38, 0.4);
      opacity: 1;
    }
    #screen-flash.heal {
      background-color: rgba(16, 185, 129, 0.25);
      opacity: 1;
    }
    #screen-flash.cast-fire {
      background-color: rgba(249, 115, 22, 0.15);
      opacity: 1;
    }
    #screen-flash.cast-ice {
      background-color: rgba(6, 182, 212, 0.15);
      opacity: 1;
    }
    #screen-flash.cast-lightning {
      background-color: rgba(168, 85, 247, 0.15);
      opacity: 1;
    }

    /* Screen Shake Animation */
    .shake {
      animation: shakeAnimation 0.15s ease-in-out infinite;
    }

    @keyframes shakeAnimation {
      0% { transform: translate(1px, 1px) rotate(0deg); }
      10% { transform: translate(-1px, -2px) rotate(-1deg); }
      20% { transform: translate(-3px, 0px) rotate(1deg); }
      30% { transform: translate(0px, 2px) rotate(0deg); }
      40% { transform: translate(1px, -1px) rotate(1deg); }
      50% { transform: translate(-1px, 2px) rotate(-1deg); }
      60% { transform: translate(-3px, 1px) rotate(0deg); }
      70% { transform: translate(2px, 1px) rotate(-1deg); }
      80% { transform: translate(-1px, -1px) rotate(1deg); }
      90% { transform: translate(2px, 2px) rotate(0deg); }
      100% { transform: translate(1px, -2px) rotate(-1deg); }
    }

    /* Game HUD - Bottom Bar */
    #hud {
      height: 100px;
      background: linear-gradient(to bottom, #1a1027, #0e0717);
      border-top: 4px solid #3c1e59;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 15px;
      position: relative;
      z-index: 15;
      box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.5);
      font-family: 'Press Start 2P', monospace;
      font-size: 10px;
    }

    .hud-box {
      background: rgba(14, 7, 23, 0.8);
      border: 2px solid #5b21b6;
      border-radius: 4px;
      padding: 6px 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-width: 140px;
      height: 80px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8);
    }

    .hud-label {
      color: #a78bfa;
      margin-bottom: 6px;
      text-shadow: 0 0 5px rgba(167, 139, 250, 0.4);
    }

    .hud-value {
      color: #fff;
      font-size: 14px;
      font-family: 'VT323', monospace;
      letter-spacing: 1px;
    }

    /* Health/Mana Bars */
    .bar-outer {
      width: 120px;
      height: 14px;
      background-color: #1e1b29;
      border: 2px solid #3c1e59;
      border-radius: 2px;
      overflow: hidden;
      margin-bottom: 4px;
    }

    .bar-inner {
      height: 100%;
      width: 0%;
      transition: width 0.1s ease-out;
    }

    .health-fill {
      background: linear-gradient(to right, #991b1b, #dc2626, #f87171);
      box-shadow: 0 0 6px rgba(220, 38, 38, 0.6);
    }

    .mana-fill {
      background: linear-gradient(to right, #1e3a8a, #2563eb, #60a5fa);
      box-shadow: 0 0 6px rgba(37, 99, 235, 0.6);
    }

    .stamina-fill {
      background: linear-gradient(to right, #b45309, #d97706, #fbbf24);
      box-shadow: 0 0 6px rgba(217, 119, 6, 0.6);
    }

    .energy-fill {
      background: linear-gradient(to right, #065f46, #10b981, #34d399);
      box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
    }

    /* Wizard Face in HUD */
    #hud-face-container {
      width: 80px;
      height: 80px;
      background: radial-gradient(circle, #2e1065, #0f052d);
      border: 4px double #8b5cf6;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2px;
      box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
      transition: transform 0.1s ease;
    }

    #hud-face {
      font-size: 28px;
      line-height: 1.0;
    }

    /* Spell Selector HUD slot */
    .spells-box {
      min-width: 260px;
    }

    .spells-list {
      display: flex;
      gap: 8px;
    }

    .spell-slot {
      position: relative;
      width: 64px;
      height: 48px;
      background: #110822;
      border: 2px solid #4c2885;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .spell-slot:hover {
      border-color: #8b5cf6;
      background: #1d0f36;
    }

    .spell-slot.active {
      border-color: #f59e0b;
      background: #2e1a47;
      box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
    }

    .key-indicator {
      position: absolute;
      top: 2px;
      left: 3px;
      font-size: 7px;
      color: #6d28d9;
    }

    .spell-slot.active .key-indicator {
      color: #f59e0b;
    }

    .spell-icon {
      font-size: 16px;
      margin-bottom: 2px;
    }

    .spell-slot-name {
      font-size: 6px;
      color: #a78bfa;
    }

    .spell-slot.active .spell-slot-name {
      color: #fff;
    }

    /* Inventory Slots */
    .inventory-box {
      min-width: 120px;
    }
    .inventory-items {
      display: flex;
      gap: 6px;
    }
    .inventory-slot {
      position: relative;
      width: 42px;
      height: 42px;
      background: #110822;
      border: 2px solid #4c2885;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8);
    }
    .inventory-slot:hover {
      border-color: #8b5cf6;
      background: #1d0f36;
    }
    .inventory-icon {
      font-size: 22px;
      text-shadow: 0 0 8px #fbbf24;
    }
    .inventory-count {
      position: absolute;
      bottom: 1px;
      right: 2px;
      font-size: 8px;
      font-family: 'Press Start 2P', monospace;
      color: #fbbf24;
      text-shadow: 0 0 2px rgba(251, 191, 36, 0.6);
    }
    .inventory-slot.empty {
      opacity: 0.35;
      border-color: #2e1065;
    }

    /* Screens overlays */
    .screen {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: calc(100% - 100px);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 50;
      background-color: rgba(5, 2, 9, 0.95);
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .screen.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      display: none !important;
    }

    /* Menu Contents */
    .menu-content {
      text-align: center;
      max-width: 500px;
      padding: 40px;
      background: radial-gradient(circle, #1a0b2e 0%, #080312 100%);
      border: 4px double #5b21b6;
      border-radius: 12px;
      box-shadow: 0 0 40px rgba(91, 33, 182, 0.6);
    }

    .game-title {
      font-family: 'Cinzel Decorative', serif;
      font-size: 54px;
      color: #f59e0b;
      text-shadow: 0 0 15px rgba(245, 158, 11, 0.8), 2px 2px 0 #78350f;
      margin-bottom: 5px;
      letter-spacing: 2px;
    }

    .game-subtitle {
      font-family: 'Press Start 2P', monospace;
      font-size: 12px;
      color: #a78bfa;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 40px;
      text-shadow: 0 0 5px rgba(167, 139, 250, 0.5);
    }

    .menu-buttons {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .menu-btn {
      font-family: 'Press Start 2P', monospace;
      font-size: 11px;
      color: #fff;
      background-color: #1e1b4b;
      border: 3px solid #6d28d9;
      border-radius: 4px;
      padding: 14px 24px;
      cursor: pointer;
      outline: none;
      transition: all 0.2s ease;
      box-shadow: 0 4px 0 #4c1d95;
    }

    .menu-btn:hover {
      background-color: #312e81;
      border-color: #a78bfa;
      transform: translateY(-2px);
      box-shadow: 0 6px 0 #4c1d95, 0 0 10px rgba(167, 139, 250, 0.4);
    }

    .menu-btn:active {
      transform: translateY(2px);
      box-shadow: 0 2px 0 #4c1d95;
    }

    /* Modal for instructions */
    #instructions-modal .modal-content {
      background: #0d061c;
      border: 4px solid #7c3aed;
      border-radius: 8px;
      width: 90%;
      max-width: 680px;
      padding: 25px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 0 30px rgba(124, 58, 237, 0.4);
    }

    #instructions-modal h2 {
      font-family: 'Cinzel Decorative', serif;
      color: #fbbf24;
      margin-bottom: 20px;
      font-size: 28px;
    }

    .modal-body {
      display: flex;
      gap: 20px;
      width: 100%;
      margin-bottom: 20px;
      text-align: left;
    }

    .instructions-section {
      flex: 1;
      background: rgba(0,0,0,0.4);
      border: 2px solid #2e1065;
      border-radius: 6px;
      padding: 15px;
    }

    .instructions-section h3 {
      font-family: 'Press Start 2P', monospace;
      font-size: 10px;
      color: #a78bfa;
      margin-bottom: 12px;
      border-bottom: 2px solid #4c1d95;
      padding-bottom: 6px;
    }

    .instructions-section p {
      font-size: 18px;
      margin-bottom: 10px;
      line-height: 1.4;
    }

    .spell-desc {
      margin-bottom: 12px;
    }

    .spell-name {
      font-family: 'Press Start 2P', monospace;
      font-size: 8px;
      display: inline-block;
      margin-bottom: 4px;
    }

    .spell-name.fire { color: #f97316; }
    .spell-name.ice { color: #06b6d4; }
    .spell-name.lightning { color: #c084fc; }

    .spell-desc p {
      font-size: 16px;
      color: #cbd5e1;
    }

    /* Notification text */
    #game-overlay {
      position: absolute;
      top: 20px;
      left: 0;
      width: 100%;
      text-align: center;
      pointer-events: none;
      z-index: 20;
    }

    #notification-text {
      display: inline-block;
      background-color: rgba(0, 0, 0, 0.75);
      border: 2px solid #7c3aed;
      border-radius: 4px;
      padding: 8px 16px;
      color: #f3e8ff;
      font-size: 26px;
      font-family: 'VT323', monospace;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    #notification-text.show {
      opacity: 1;
    }

    /* Defeat / Victory Screens */
    .game-over-title {
      font-family: 'Cinzel Decorative', serif;
      font-size: 64px;
      color: #ef4444;
      text-shadow: 0 0 15px rgba(239, 68, 68, 0.8);
      margin-bottom: 15px;
    }
    .game-over-desc {
      font-size: 24px;
      margin-bottom: 30px;
      color: #fca5a5;
    }
    #game-over-screen .menu-btn {
      background-color: #450a0a;
      border-color: #dc2626;
      box-shadow: 0 4px 0 #7f1d1d;
    }
    #game-over-screen .menu-btn:hover {
      background-color: #7f1d1d;
      border-color: #f87171;
    }

    .victory-title {
      font-family: 'Cinzel Decorative', serif;
      font-size: 64px;
      color: #10b981;
      text-shadow: 0 0 15px rgba(16, 185, 129, 0.8);
      margin-bottom: 15px;
    }
    .victory-desc {
      font-size: 24px;
      margin-bottom: 30px;
      color: #a7f3d0;
    }
    #victory-screen .menu-btn {
      background-color: #064e3b;
      border-color: #10b981;
      box-shadow: 0 4px 0 #065f46;
    }
    #victory-screen .menu-btn:hover {
      background-color: #065f46;
      border-color: #34d399;
    }

    /* Settings modal styles */
    .settings-modal-content {
      background: #0d061c;
      border: 4px solid #8b5cf6;
      border-radius: 8px;
      width: 90%;
      max-width: 600px;
      padding: 25px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 0 35px rgba(139, 92, 246, 0.4);
    }

    .settings-modal-content h2 {
      font-family: 'Cinzel Decorative', serif;
      color: #fbbf24;
      margin-bottom: 20px;
      font-size: 28px;
    }

    .settings-body {
      display: flex;
      gap: 20px;
      width: 100%;
      margin-bottom: 20px;
      text-align: left;
    }

    .settings-section {
      flex: 1;
      background: rgba(0, 0, 0, 0.45);
      border: 2px solid #3c1e59;
      border-radius: 6px;
      padding: 15px;
      display: flex;
      flex-direction: column;
    }

    .settings-section h3 {
      font-family: 'Press Start 2P', monospace;
      font-size: 10px;
      color: #a78bfa;
      margin-bottom: 15px;
      border-bottom: 2px solid #5b21b6;
      padding-bottom: 6px;
    }

    .settings-row {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 15px;
      font-size: 18px;
    }

    .settings-row label {
      color: #c084fc;
    }

    .settings-row input[type="range"] {
      width: 100%;
      accent-color: #a855f7;
      cursor: pointer;
    }

    #sens-val {
      font-family: 'Press Start 2P', monospace;
      font-size: 8px;
      color: #fbbf24;
      align-self: flex-end;
    }

    .checkbox-row {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      gap: 10px;
    }

    .checkbox-row label {
      font-size: 15px;
      line-height: 1.2;
    }

    .checkbox-row input[type="checkbox"] {
      width: 18px;
      height: 18px;
      accent-color: #a855f7;
      cursor: pointer;
    }

    .rebind-hint {
      font-size: 13px;
      color: #94a3b8;
      margin-bottom: 12px;
      line-height: 1.3;
    }

    .bind-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      font-size: 18px;
    }

    .bind-btn {
      font-family: 'Press Start 2P', monospace;
      font-size: 8px;
      color: #fff;
      background-color: #1e1b4b;
      border: 2px solid #6d28d9;
      border-radius: 4px;
      padding: 6px 12px;
      min-width: 60px;
      cursor: pointer;
      transition: all 0.15s ease;
      text-transform: uppercase;
      text-align: center;
    }

    .bind-btn:hover {
      background-color: #2e1a47;
      border-color: #a78bfa;
    }

    .bind-btn.waiting {
      background-color: #78350f;
      border-color: #fbbf24;
      box-shadow: 0 0 10px #f59e0b;
      animation: pulse-border 0.6s infinite alternate;
    }

    @keyframes pulse-border {
      0% { border-color: #d97706; }
      100% { border-color: #f59e0b; }
    }

    /* Class Selection Styles */
    .class-select-content {
      max-width: 850px;
      width: 95%;
      padding: 25px;
    }
    
    .class-title {
      font-family: 'Cinzel Decorative', serif;
      font-size: 32px;
      color: #fbbf24;
      margin-bottom: 20px;
      text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
    }
    
    #class-cards-container {
      display: flex;
      gap: 15px;
      justify-content: center;
      flex-wrap: wrap;
      width: 100%;
      margin-bottom: 15px;
    }
    
    .class-card {
      flex: 1;
      min-width: 170px;
      max-width: 220px;
      background: rgba(14, 7, 23, 0.9);
      border: 2px solid #5b21b6;
      border-radius: 6px;
      padding: 15px;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    
    .class-card:hover {
      border-color: #f59e0b;
      transform: translateY(-4px);
      box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
      background: #23123a;
    }
    
    .class-card h3 {
      font-family: 'Press Start 2P', monospace;
      font-size: 10px;
      color: #fff;
      margin-bottom: 10px;
    }
    
    .class-card:hover h3 {
      color: #f59e0b;
    }
    
    .class-desc {
      font-size: 15px;
      color: #cbd5e1;
      line-height: 1.3;
      margin-bottom: 12px;
      flex-grow: 1;
      height: 70px;
      overflow-y: auto;
    }
    
    .class-stat-row {
      display: flex;
      justify-content: space-between;
      width: 100%;
      font-size: 15px;
      margin-bottom: 4px;
      border-bottom: 1px solid rgba(139, 92, 246, 0.2);
    }
    
    .class-stat-name {
      color: #a78bfa;
    }
    
    .class-stat-value {
      color: #fff;
      font-weight: bold;
    }

    .skill-node-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(14, 7, 23, 0.7);
      border: 2px solid #3c1e59;
      border-radius: 6px;
      padding: 8px 12px;
      gap: 12px;
      margin-bottom: 6px;
      transition: all 0.2s ease;
    }
    .skill-node-row:hover {
      border-color: #5b21b6;
      background: rgba(29, 15, 54, 0.8);
    }
    .skill-node-info {
      display: flex;
      flex-direction: column;
      text-align: left;
      flex-grow: 1;
    }
    .skill-node-name {
      font-family: 'Press Start 2P', monospace;
      font-size: 8px;
      color: #fff;
      margin-bottom: 2px;
    }
    .skill-node-desc {
      font-size: 15px;
      color: #94a3b8;
      line-height: 1.2;
    }
    .skill-node-status {
      font-family: 'Press Start 2P', monospace;
      font-size: 7px;
      color: #cbd5e1;
      min-width: 60px;
      text-align: right;
    }
    .skill-node-btn {
      font-family: 'Press Start 2P', monospace;
      font-size: 7px;
      color: #fff;
      background-color: #1e1b4b;
      border: 2px solid #6d28d9;
      border-radius: 4px;
      padding: 6px 10px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .skill-node-btn:hover {
      background-color: #312e81;
      border-color: #a78bfa;
    }
    .skill-node-btn:disabled {
      background-color: #110c1f;
      border-color: #3c1e59;
      color: #4b5563;
      cursor: not-allowed;
    }
    .skill-node-btn.maxed {
      background-color: #064e3b;
      border-color: #10b981;
      color: #34d399;
      cursor: default;
    }

    /* Inventory & Stats Screen UI Styles */
    .stats-container {
      display: flex;
      flex-direction: column;
      gap: 6px;
      text-align: left;
      font-size: 14px;
      line-height: 1.3;
    }
    .stats-section-title {
      font-family: 'Press Start 2P', monospace;
      font-size: 9px;
      color: #fbbf24;
      margin-top: 10px;
      margin-bottom: 5px;
      border-bottom: 1px solid #3c1e59;
      padding-bottom: 4px;
    }
    .stat-row {
      display: flex;
      justify-content: space-between;
      color: #cbd5e1;
    }
    .stat-val {
      font-family: 'Press Start 2P', monospace;
      font-size: 8px;
      color: #a78bfa;
    }
    .equip-slot {
      background: rgba(14, 7, 23, 0.7);
      border: 2px solid #3c1e59;
      border-radius: 6px;
      padding: 10px;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: all 0.2s ease;
    }
    .equip-slot:hover {
      border-color: #5b21b6;
    }
    .equip-slot-empty {
      color: #64748b;
      font-family: 'Press Start 2P', monospace;
      font-size: 8px;
    }
    .equip-slot-info {
      text-align: left;
      flex-grow: 1;
    }
    .equip-slot-title {
      font-family: 'Press Start 2P', monospace;
      font-size: 9px;
      color: #fff;
    }
    .equip-slot-stats {
      font-size: 13px;
      color: #94a3b8;
      margin-top: 2px;
    }
    .backpack-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      overflow-y: auto;
      max-height: 300px;
      padding-right: 4px;
    }
    .backpack-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(14, 7, 23, 0.7);
      border: 2px solid #3c1e59;
      border-radius: 6px;
      padding: 8px 12px;
      gap: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .backpack-item:hover {
      border-color: #a78bfa;
      background: rgba(29, 15, 54, 0.8);
    }
    .backpack-item-info {
      text-align: left;
      flex-grow: 1;
    }
    .backpack-item-name {
      font-family: 'Press Start 2P', monospace;
      font-size: 8px;
      color: #fff;
    }
    .backpack-item-stats {
      font-size: 13px;
      color: #94a3b8;
    }
    .backpack-item-action {
      font-family: 'Press Start 2P', monospace;
      font-size: 7px;
      color: #34d399;
    }
    .set-bonus-item {
      margin-bottom: 4px;
      color: #64748b;
    }
    .set-bonus-item.active {
      color: #10b981;
    }
    /* World Map Styles */
    .map-node:hover .map-node-icon {
      transform: scale(1.25);
    }
    .map-node.selected .map-node-icon {
      filter: drop-shadow(0 0 8px #fbbf24) drop-shadow(0 2px 4px rgba(0,0,0,0.8));
    }
    .map-quest-marker {
      animation: pulseMarker 1.2s infinite alternate;
      display: inline-block;
    }
    @keyframes pulseMarker {
      0% { opacity: 0.4; transform: scale(0.9); }
      100% { opacity: 1; transform: scale(1.3); }
    }

    /* Shop Screen Styles */
    #shop-screen {
      z-index: 103;
    }
    .shop-container {
      display: flex;
      flex-direction: column;
      gap: 15px;
      background: #2f2113;
      border: 4px solid #5c3f1f;
      box-shadow: 0 0 25px rgba(0,0,0,0.8);
      border-radius: 8px;
      max-width: 750px;
      width: 90%;
      height: 480px;
      font-family: 'Cinzel', serif;
      color: #fff;
      padding: 15px;
    }
    .shop-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2px solid #5c3f1f;
      padding-bottom: 10px;
    }
    .shop-title-container {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .shop-npc-emoji {
      font-size: 32px;
    }
    .shop-title {
      margin: 0;
      color: #fbbf24;
      font-family: 'Cinzel Decorative', serif;
      font-size: 20px;
    }
    .shop-player-gold {
      font-family: 'Press Start 2P', monospace;
      font-size: 9px;
      color: #fbbf24;
      background: rgba(0, 0, 0, 0.4);
      padding: 6px 12px;
      border: 1px solid #5c3f1f;
      border-radius: 4px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .shop-body {
      display: flex;
      gap: 15px;
      flex: 1;
      height: calc(100% - 130px);
    }
    .shop-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: rgba(0, 0, 0, 0.3);
      border: 2px solid #5c3f1f;
      border-radius: 4px;
      padding: 10px;
      overflow: hidden;
    }
    .shop-panel-title {
      font-family: 'Press Start 2P', monospace;
      font-size: 8px;
      color: #fbbf24;
      margin-bottom: 10px;
      text-align: center;
      border-bottom: 1px solid #5c3f1f;
      padding-bottom: 5px;
    }
    .shop-item-list {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding-right: 4px;
    }
    .shop-item-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(62, 39, 35, 0.5);
      border: 1px solid #5c3f1f;
      border-radius: 4px;
      padding: 8px 10px;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
    }
    .shop-item-card:hover {
      background: rgba(92, 63, 31, 0.7);
      border-color: #fbbf24;
    }
    .shop-item-card.selected {
      background: rgba(92, 63, 31, 0.9);
      border-color: #fbbf24;
      box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
    }
    .shop-item-info {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .shop-item-emoji {
      font-size: 20px;
    }
    .shop-item-name {
      font-size: 14px;
      font-weight: bold;
    }
    .shop-item-stock {
      font-size: 11px;
      color: #facc15;
      margin-top: 2px;
    }
    .shop-item-price {
      font-family: 'Press Start 2P', monospace;
      font-size: 8px;
      color: #fbbf24;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .shop-item-detail-panel {
      width: 220px;
      display: flex;
      flex-direction: column;
      background: rgba(0, 0, 0, 0.4);
      border: 2px solid #5c3f1f;
      border-radius: 4px;
      padding: 10px;
      gap: 10px;
      font-family: 'Cinzel', serif;
    }
    .shop-detail-header {
      border-bottom: 1px solid #5c3f1f;
      padding-bottom: 5px;
      text-align: center;
    }
    .shop-detail-name {
      font-size: 16px;
      font-weight: bold;
      color: #fbbf24;
    }
    .shop-detail-type {
      font-size: 11px;
      color: #94a3b8;
      text-transform: uppercase;
      margin-top: 2px;
    }
    .shop-detail-body {
      flex: 1;
      font-size: 12px;
      line-height: 1.4;
      overflow-y: auto;
    }
    .shop-detail-stats {
      margin-top: 5px;
      color: #a78bfa;
      font-weight: bold;
    }
    .shop-detail-action {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    /* Save / Load Screen */
    .save-slot-card {
      display: flex;
      align-items: center;
      gap: 12px;
      background: linear-gradient(135deg, rgba(15,10,30,0.85), rgba(22,14,42,0.85));
      border: 2px solid #3c1e59;
      border-radius: 6px;
      padding: 10px 14px;
      margin-bottom: 8px;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .save-slot-card:hover { border-color: #7c3aed; box-shadow: 0 0 12px rgba(124,58,237,0.3); }
    .save-slot-card.slot-filled { border-color: #5b21b6; }
    .save-slot-card.slot-auto { border-left: 4px solid #f59e0b; }
    .save-slot-icon {
      font-size: 26px;
      width: 38px;
      text-align: center;
      flex-shrink: 0;
    }
    .save-slot-info { flex: 1; min-width: 0; }
    .save-slot-title {
      font-family: 'Press Start 2P', monospace;
      font-size: 8px;
      color: #a78bfa;
      margin-bottom: 3px;
    }
    .save-slot-name {
      font-family: 'Cinzel Decorative', serif;
      font-size: 14px;
      color: #e2d9f3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .save-slot-meta {
      font-family: 'VT323', monospace;
      font-size: 15px;
      color: #6d28d9;
      margin-top: 2px;
    }
    .save-slot-empty {
      font-family: 'Press Start 2P', monospace;
      font-size: 9px;
      color: #3c1e59;
      font-style: italic;
    }
    .save-slot-btns { display: flex; gap: 5px; flex-shrink: 0; }
    .save-slot-btn {
      font-family: 'Press Start 2P', monospace;
      font-size: 8px;
      padding: 5px 9px;
      border-radius: 4px;
      border: 2px solid;
      cursor: pointer;
      transition: all 0.15s;
    }
    .save-slot-btn.btn-save { background:#1e3a5f; border-color:#3b82f6; color:#93c5fd; }
    .save-slot-btn.btn-save:hover { background:#2563eb; color:#fff; }
    .save-slot-btn.btn-load { background:#14532d; border-color:#22c55e; color:#86efac; }
    .save-slot-btn.btn-load:hover { background:#16a34a; color:#fff; }
    .save-slot-btn.btn-del { background:#450a0a; border-color:#ef4444; color:#fca5a5; }
    .save-slot-btn.btn-del:hover { background:#dc2626; color:#fff; }
    .save-slot-btn:disabled { opacity:0.35; cursor:default; pointer-events:none; }

    /* Auto-save pulse badge */
    #autosave-indicator {
      position: absolute;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(15,10,30,0.92);
      border: 2px solid #7c3aed;
      border-radius: 20px;
      padding: 4px 14px;
      font-family: 'Press Start 2P', monospace;
      font-size: 7px;
      color: #c4b5fd;
      z-index: 200;
      display: none;
      animation: autosave-fade 2.2s ease-out forwards;
    }
    @keyframes autosave-fade {
      0%   { opacity:0; transform: translateX(-50%) translateY(-6px); }
      15%  { opacity:1; transform: translateX(-50%) translateY(0); }
      75%  { opacity:1; }
      100% { opacity:0; }
    }