@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0a0a1a; color: #eee; font-family: 'Press Start 2P', 'Courier New', monospace; overflow: hidden; touch-action: none; }
canvas { display: block; margin: 0 auto; image-rendering: pixelated; }

/* ── TOP UI BAR ── */
#ui {
  position: fixed; top: 0; left: 0; right: 0; height: 72px;
  background: linear-gradient(180deg, #0d0d24 0%, #0a0a1a 100%);
  border-bottom: 2px solid #1a1a3a;
  display: flex; flex-direction: column; justify-content: center;
  padding: 4px 12px; font-size: 9px; z-index: 10;
  box-shadow: 0 2px 12px rgba(0,0,0,0.6);
  gap: 6px;
}
.ui-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.ui-stat { display: flex; align-items: center; gap: 5px; }
.ui-label { color: #555; font-size: 7px; letter-spacing: 1px; }
.hp-bar-mini, .xp-bar-mini { width: 72px; height: 6px; background: #111; border-radius: 3px; overflow: hidden; border: 1px solid #222; }
.hp-bar-mini-fill { height: 100%; background: linear-gradient(90deg, #c0392b, #e74c3c); transition: width 0.3s; }
.xp-bar-mini-fill { height: 100%; background: linear-gradient(90deg, #2980b9, #3498db); transition: width 0.3s; }
.mp-bar-mini { width: 72px; height: 6px; background: #111; border-radius: 3px; overflow: hidden; border: 1px solid #222; }
.mp-bar-mini-fill { height: 100%; background: linear-gradient(90deg, #6c3483, #9b59b6); transition: width 0.3s; }
.val-mp { color: #9b59b6; }
.val-hp { color: #e74c3c; }
.val-lvl { color: #f1c40f; }
.val-gold { color: #f39c12; }
.val-xp { color: #3498db; }

/* ── MESSAGE LOG ── */
#msg-log {
  position: fixed; bottom: 0; left: 0; right: 0; min-height: 44px;
  background: linear-gradient(0deg, #050510 0%, rgba(5,5,16,0.95) 100%);
  border-top: 2px solid #1a1a3a;
  padding: 10px 14px; font-size: 9px; color: #c8b88a; z-index: 10;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  letter-spacing: 0.5px;
}
#msg-text { transition: opacity 0.3s; }

/* ── TOAST NOTIFICATIONS ── */
#toast-container {
  position: fixed; top: 54px; left: 50%; transform: translateX(-50%);
  z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
}
.toast {
  background: linear-gradient(135deg, #1a1a3a, #0d0d22);
  border: 1px solid #3a3a6a;
  border-radius: 4px; padding: 8px 16px; font-size: 8px;
  color: #f1c40f; white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,0.8);
  animation: toastIn 0.38s cubic-bezier(0.34,1.56,0.64,1), toastOut 0.4s ease 1.6s forwards;
}
.toast.green { color: #2ecc71; border-color: #27ae60; box-shadow: 0 4px 20px rgba(0,0,0,0.8), 0 0 10px rgba(46,204,113,0.18); }
.toast.red { color: #e74c3c; border-color: #c0392b; box-shadow: 0 4px 20px rgba(0,0,0,0.8), 0 0 10px rgba(231,76,60,0.18); }
.toast.blue { color: #3498db; border-color: #2980b9; box-shadow: 0 4px 20px rgba(0,0,0,0.8), 0 0 10px rgba(52,152,219,0.18); }
.toast.gold { color: #f39c12; border-color: #d68910; box-shadow: 0 4px 20px rgba(0,0,0,0.8), 0 0 10px rgba(243,156,18,0.35); }
@keyframes toastIn { from { opacity:0; transform:translateY(-26px) scale(0.86); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes toastOut { from { opacity:1; transform:translateY(0) scale(1); } to { opacity:0; transform:translateY(-14px) scale(0.92); } }

/* ── OVERLAY PANELS ── */
#combat-screen, #inventory-screen, #shop-screen, #trainer-screen, #sparring-screen, #oc-skills-screen, #library-screen, #gambling-screen, #quest-log-screen, #ending-screen, #trial-screen, #forge-screen, #companions-screen, #reputation-screen {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(4,4,14,0.97);
  z-index: 20; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(4px);
}

/* ── COMBAT ── */
#combat-screen { background: radial-gradient(ellipse at 50% 30%, #0d0820 0%, #04040e 70%); }
#combat-arena {
  position: relative;
  width: 100%; max-width: 420px;
  background: linear-gradient(180deg, #0a0518 0%, #06030f 100%);
  border: 2px solid #2a1a4a;
  border-radius: 8px; padding: 24px 20px;
  box-shadow: 0 0 40px rgba(80,0,160,0.3), inset 0 0 60px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; align-items: center;
}
#combat-log.combat-ended { max-height: 120px; }
#enemy-name-display {
  font-size: 12px; color: #e8d5a0; letter-spacing: 2px; margin-bottom: 4px;
  text-shadow: 0 0 12px rgba(255,200,100,0.5);
}
#enemy-dmg-type-icon {
  font-size: 8px; letter-spacing: 1px; margin-bottom: 10px; opacity: 0.9;
}
#enemy-canvas-wrap {
  position: relative; margin-bottom: 0;
  filter: drop-shadow(0 8px 24px rgba(200,50,50,0.4));
}
#enemy-canvas { image-rendering: pixelated; }
.combat-hp-section { width: 100%; margin-bottom: 10px; }
.combat-hp-label { font-size: 7px; color: #888; margin-bottom: 4px; letter-spacing: 1px; }
.combat-hp-track {
  width: 100%; height: 14px;
  background: #0a0a0a; border-radius: 3px; overflow: hidden;
  border: 1px solid #1a1a2a;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
}
.enemy-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #7f0000, #c0392b, #e74c3c);
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 0 8px rgba(231,76,60,0.6);
}
.player-hp-fill-combat {
  height: 100%;
  background: linear-gradient(90deg, #1a6b1a, #27ae60, #2ecc71);
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 0 8px rgba(46,204,113,0.6);
}
.player-mp-fill-combat {
  height: 100%;
  background: linear-gradient(90deg, #1a1a7a, #4444cc, #7b68ee);
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 0 8px rgba(123,104,238,0.6);
}
.combat-hp-nums { font-size: 8px; color: #aaa; margin-top: 3px; text-align: right; }
.skill-mp-cost { font-size: 9px; color: #9090ff; margin-left: 3px; }
.btn-skill-no-mana { opacity: 0.5; }
#combat-actions {
  display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; justify-content: center;
}
.btn {
  background: linear-gradient(180deg, #1e2a4a 0%, #141d35 100%);
  color: #d0d8f0; border: 1px solid #2a3a6a;
  padding: 10px 18px; font-family: inherit; font-size: 8px;
  border-radius: 4px; cursor: pointer; min-width: 80px;
  letter-spacing: 1px;
  box-shadow: 0 3px 0 #0a0f20, 0 0 10px rgba(40,60,120,0.3);
  transition: transform 0.1s, box-shadow 0.1s, background 0.15s;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.btn:hover { border-color: #4a6aaa; background: linear-gradient(180deg, #253360 0%, #1a2545 100%); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #0a0f20; }
.btn-attack { border-color: #7a3030; color: #f0b0a0; }
.btn-attack:hover { border-color: #c04040; background: linear-gradient(180deg, #3a1515 0%, #2a0f0f 100%); }
.btn-item { border-color: #2a5a2a; color: #a0f0a0; }
.btn-item:hover { border-color: #40a040; background: linear-gradient(180deg, #153a15 0%, #0f2a0f 100%); }
.btn-danger { border-color: #5a2a1a; color: #f0b090; }
.btn-danger:hover { border-color: #b04020; background: linear-gradient(180deg, #3a1a0a 0%, #2a1005 100%); }
#combat-msg {
  margin-top: 14px; font-size: 8px; color: #f1c40f;
  min-height: 20px; text-align: center; letter-spacing: 0.5px;
  text-shadow: 0 0 8px rgba(241,196,15,0.5);
  animation: combatMsgPulse 0.3s ease;
}
@keyframes combatMsgPulse { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
#combat-log {
  margin-top: 8px; width: 100%; max-height: 100px; overflow-y: auto;
  border: 1px solid #1a0d30; border-radius: 3px;
  background: rgba(4,2,12,0.7); padding: 4px 6px;
  display: flex; flex-direction: column; gap: 2px;
  scroll-behavior: smooth; box-sizing: border-box;
}
#combat-log:empty { display: none; }
.clog-entry { font-size: 12px; letter-spacing: 0.3px; line-height: 1.4; }
.clog-player { color: #5fd87a; }
.clog-enemy  { color: #f57070; }
.clog-system { color: #999; }
.clog-num  { font-weight: bold; }
.clog-dmg  { color: #ff4444; font-weight: bold; }
.clog-heal { color: #5fd87a; font-weight: bold; }
.clog-fire      { color: #ff6633; }
.clog-ice       { color: #a8d8ea; }
.clog-lightning { color: #ffe066; }
.clog-poison    { color: #7ac94b; }
.clog-holy      { color: #f5e6c8; }
.clog-dark      { color: #b07fd4; }
.shake { animation: shakeAnim 0.3s ease; }
@keyframes shakeAnim { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
.flash-red { animation: flashRed 0.3s ease; }
@keyframes flashRed { 0%,100%{filter:none} 50%{filter:brightness(2) saturate(3) hue-rotate(-20deg)} }
.encounter-flash { animation: encounterFlash 0.4s ease; }
@keyframes encounterFlash { 0%,100%{filter:none} 30%{filter:brightness(3) saturate(0) invert(0.15)} 65%{filter:brightness(1.6) saturate(2) hue-rotate(30deg)} }

/* ── COMBAT JRPG SCENE ── */
#combat-scene {
  width:100%; display:flex; align-items:flex-end; justify-content:space-between;
  gap:8px; background:linear-gradient(180deg,#08041a 0%,#04020e 100%);
  border-radius:6px; padding:14px 10px 10px; margin-bottom:14px; position:relative; overflow:hidden;
  border:1px solid #180b32; min-height:108px;
}
#combat-scene::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 110%,rgba(90,20,160,0.45) 0%,transparent 68%);
  pointer-events:none;
}
#combat-scene::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:22px;
  background:linear-gradient(0deg,rgba(20,8,40,0.7) 0%,transparent 100%);
  pointer-events:none;
}
#combat-player-side, #combat-enemy-side {
  display:flex; flex-direction:column; align-items:center; gap:4px; position:relative; z-index:1;
}
.combat-sprite-label { font-size:6px; color:#444; letter-spacing:1px; }
#player-combat-canvas { image-rendering:pixelated; filter:drop-shadow(0 6px 16px rgba(100,160,255,0.3)); }
#combat-vs-text { align-self:center; font-size:7px; color:#2a1548; letter-spacing:3px; position:relative; z-index:1; }
.combat-lunge { animation:combatLunge 0.4s cubic-bezier(0.4,0,0.2,1); }
@keyframes combatLunge { 0%{transform:translateX(0)} 42%{transform:translateX(22px)} 100%{transform:translateX(0)} }
.combat-enemy-death { animation:combatEnemyDeath 0.62s ease forwards; }
@keyframes combatEnemyDeath { 0%{opacity:1;transform:scale(1)} 22%{opacity:0.9;transform:scale(1.1) rotate(-5deg)} 55%{opacity:0.35;transform:scale(0.65) translateY(14px) rotate(10deg)} 100%{opacity:0;transform:scale(0.4) translateY(28px) rotate(18deg)} }

/* ── INVENTORY ── */
#inventory-screen {
  background: radial-gradient(ellipse at 50% 10%, #0a1020 0%, #04040e 70%);
  justify-content: flex-start; padding-top: 20px;
}
.panel-wrap { width: 100%; max-width: 500px; position: relative; }
.inv-unified-wrap { max-width: 500px; width: 100%; overflow-y: auto; max-height: 92vh; }
.inv-unified-wrap::-webkit-scrollbar { width: 4px; }
.inv-unified-wrap::-webkit-scrollbar-track { background: #050510; }
.inv-unified-wrap::-webkit-scrollbar-thumb { background: #2a2a4a; border-radius: 2px; }

/* ── INVENTORY TABS ── */
#inv-tab-bar {
  display: flex; gap: 0; margin-bottom: 14px;
  border: 1px solid #1e2a4a; border-radius: 4px; overflow: hidden;
}
.inv-tab {
  flex: 1; background: linear-gradient(180deg, #080816 0%, #050510 100%);
  border: none; color: #444; font-family: inherit; font-size: 8px;
  letter-spacing: 1.5px; padding: 8px 4px; cursor: pointer;
  transition: background 0.15s, color 0.15s; border-right: 1px solid #1e2a4a;
}
.inv-tab:last-child { border-right: none; }
.inv-tab:hover { background: linear-gradient(180deg, #101630 0%, #0c1224 100%); color: #888; }
.inv-tab.inv-tab-active {
  background: linear-gradient(180deg, #1a2a50 0%, #101a38 100%);
  color: #f1c40f; border-bottom: 2px solid #f1c40f;
}
.inv-tab-panel { width: 100%; }

/* ── EQUIPPED TAB LIST ── */
#inv-equip-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 12px; max-height: 30vh; overflow-y: auto;
}
#inv-equip-list::-webkit-scrollbar { width: 4px; }
#inv-equip-list::-webkit-scrollbar-track { background: #050510; }
#inv-equip-list::-webkit-scrollbar-thumb { background: #2a2a4a; border-radius: 2px; }
.equip-list-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: linear-gradient(180deg, #0e1428 0%, #0a0f1e 100%);
  border: 1px solid #1e2a4a; border-radius: 4px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s; position: relative;
}
.equip-list-item:hover { border-color: #5a7ecc; background: linear-gradient(180deg, #101630 0%, #0c1224 100%); }
.equip-list-item.is-equipped { border-color: #27ae60; background: linear-gradient(180deg, #081a10 0%, #050e0a 100%); }
.equip-list-item.is-equipped:hover { border-color: #e74c3c; background: linear-gradient(180deg, #1a0808 0%, #0e0505 100%); }
.equip-list-icon { font-size: 16px; min-width: 20px; text-align: center; }
.equip-list-info { flex: 1; min-width: 0; }
.equip-list-name { font-size: 7px; color: #d0c8a0; letter-spacing: 0.3px; }
.equip-list-stat { font-size: 6px; color: #666; margin-top: 1px; }
.equip-list-slot { font-size: 5.5px; color: #444; letter-spacing: 0.5px; margin-top: 1px; }
.equip-list-badge {
  font-size: 5.5px; letter-spacing: 0.5px; padding: 2px 5px;
  border-radius: 2px; white-space: nowrap;
}
.equip-list-badge.equipped { background: #0a2016; color: #27ae60; border: 1px solid #27ae60; }
.equip-list-badge.unequip-btn {
  background: #1a0808; color: #e74c3c; border: 1px solid #e74c3c; cursor: pointer;
}
.equip-list-badge.equip-btn {
  background: #0a1620; color: #5a9ad8; border: 1px solid #5a9ad8; cursor: pointer;
}

/* ── ITEMS TAB GRID ── */
#inv-grid-items {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px; width: 100%; max-height: 60vh; overflow-y: auto; padding: 4px;
}
#inv-grid-items::-webkit-scrollbar { width: 4px; }
#inv-grid-items::-webkit-scrollbar-track { background: #050510; }
#inv-grid-items::-webkit-scrollbar-thumb { background: #2a2a4a; border-radius: 2px; }
.panel-header {
  text-align: center; margin-bottom: 18px;
}
.panel-title {
  font-size: 14px; color: #f1c40f; letter-spacing: 3px;
  text-shadow: 0 0 20px rgba(241,196,15,0.4);
}
.panel-subtitle { color: #666; font-size: 8px; margin-top: 8px; letter-spacing: 1px; }
.inv-stats-bar {
  display: flex; gap: 16px; justify-content: center;
  background: #080816; border: 1px solid #1a1a3a; border-radius: 4px;
  padding: 10px 16px; margin-bottom: 14px; font-size: 8px; flex-wrap: wrap;
}
.stat-chip { color: #aaa; }
.stat-chip span { color: #f1c40f; }
#inv-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px; width: 100%; max-height: 55vh; overflow-y: auto; padding: 4px;
}
#inv-grid::-webkit-scrollbar { width: 4px; }
#inv-grid::-webkit-scrollbar-track { background: #050510; }
#inv-grid::-webkit-scrollbar-thumb { background: #2a2a4a; border-radius: 2px; }
.inv-item {
  background: linear-gradient(180deg, #0e1428 0%, #0a0f1e 100%);
  border: 1px solid #1e2a4a; border-radius: 4px; padding: 10px 8px;
  font-size: 8px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s, box-shadow 0.15s;
  position: relative; overflow: hidden;
}
.inv-item::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}
.inv-item.equipped {
  border-color: #27ae60; background: linear-gradient(180deg, #0a2016 0%, #061410 100%);
  box-shadow: 0 0 12px rgba(39,174,96,0.2);
}
.inv-item:hover { border-color: #5a7ecc; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 14px rgba(90,126,204,0.2); background: linear-gradient(180deg, #101630 0%, #0c1224 100%); }
.item-icon-wrap { font-size: 18px; margin-bottom: 5px; line-height: 1; }
.item-name { font-size: 7px; color: #d0c8a0; margin-bottom: 3px; line-height: 1.4; }
.item-stats { color: #666; font-size: 7px; }
.item-stats.weapon { color: #e07060; }
.item-stats.armor { color: #60a0e0; }
.item-stats.consumable { color: #60e060; }
.equipped-badge {
  position: absolute; top: 4px; right: 4px; font-size: 6px;
  color: #27ae60; letter-spacing: 0;
}
.item-sell-price { color: #f39c12; font-size: 6px; margin-top: 2px; }
.item-rarity { font-size: 6px; margin-bottom: 2px; letter-spacing: 0.5px; }

/* ── RARITY FILTER BAR ── */
#inv-rarity-filter {
  display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px;
}
.inv-filter-btn {
  background: linear-gradient(180deg, #0e1428 0%, #0a0f1e 100%);
  border: 1px solid #1e2a4a; border-radius: 3px;
  font-family: inherit; font-size: 6px; letter-spacing: 0.5px;
  padding: 4px 7px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.inv-filter-btn:hover { background: linear-gradient(180deg, #101630 0%, #0c1224 100%); }

.lock-btn {
  display: block; width: 100%; margin-top: 4px;
  background: linear-gradient(180deg, #0e1428 0%, #0a0f1e 100%);
  border: 1px solid #2a3a5a; border-radius: 3px; color: #8899bb;
  font-size: 9px; padding: 2px 0; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.lock-btn:hover { background: linear-gradient(180deg, #131a30 0%, #0e1428 100%); border-color: #4a6a9a; }
.item-locked-label {
  display: block; width: 100%; margin-top: 6px; text-align: center;
  font-size: 7px; font-weight: bold; color: #556; letter-spacing: 0.04em;
}
.sell-all-btn {
  display: block; width: 100%; margin-top: 10px;
  background: linear-gradient(180deg, #2a1a06 0%, #1a0f04 100%);
  border: 1px solid #8b5e1a; border-radius: 3px; color: #f39c12;
  font-size: 9px; font-weight: bold; letter-spacing: 0.04em;
  padding: 7px 0; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.sell-all-btn:hover { background: linear-gradient(180deg, #3a2a0a 0%, #2a1a06 100%); border-color: #f39c12; }
.sell-all-btn-disabled { opacity: 0.35; cursor: default; }
#inv-sell-all-wrap { padding: 0 2px 8px; }
.sell-btn {
  display: block; width: 100%; margin-top: 6px;
  background: linear-gradient(180deg, #2a1a06 0%, #1a0f04 100%);
  border: 1px solid #8b5e1a; border-radius: 3px; color: #f39c12;
  font-size: 6px; font-family: inherit; letter-spacing: 0.5px;
  padding: 3px 0; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.sell-btn:hover { background: linear-gradient(180deg, #3a2a0a 0%, #2a1a06 100%); border-color: #f39c12; }

/* ── SHOP ── */
#shop-screen {
  background: radial-gradient(ellipse at 50% 10%, #1a0e00 0%, #04040e 70%);
}
.shop-gold-bar {
  background: #0a0800; border: 1px solid #3a2a00; border-radius: 4px;
  padding: 8px 20px; font-size: 9px; color: #f39c12; margin-bottom: 16px;
  text-shadow: 0 0 8px rgba(243,156,18,0.4);
}
#shop-items {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%; max-width: 400px; max-height: 50vh; overflow-y: auto;
}
#shop-items::-webkit-scrollbar { width: 4px; }
#shop-items::-webkit-scrollbar-track { background: #050510; }
#shop-items::-webkit-scrollbar-thumb { background: #3a2a00; border-radius: 2px; }
.shop-item {
  background: linear-gradient(180deg, #12100a 0%, #0c0a06 100%);
  border: 1px solid #2a2000; border-radius: 4px; padding: 10px 14px;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.1s, box-shadow 0.15s;
  font-size: 8px;
}
.shop-item:hover { border-color: #f39c12; background: linear-gradient(180deg, #201800 0%, #160f00 100%); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 12px rgba(243,156,18,0.14); }
.shop-item-info { display: flex; flex-direction: column; gap: 4px; }
.shop-item-name { color: #e8d080; }
.shop-item-stat { font-size: 7px; color: #666; }
.shop-rarity-label { font-size: 6px; opacity: 0.8; }
.shop-rarity-badge { font-size: 9px; }
.shop-item-price { color: #f39c12; font-size: 9px; white-space: nowrap; margin-left: 12px; }
.shop-item-price.cant-afford { color: #5a4010; }
.shop-item-restricted { opacity: 0.55; }
.shop-item-restricted:hover { border-color: #555; }
.shop-class-restriction { color: #884400; font-size: 7px; margin-left: 4px; font-style: italic; }
.shop-usable-by { color: #6a7a8a; font-size: 8px; margin-top: 2px; letter-spacing: 1px; }

/* ── QUEST LOG ── */
#quest-log-list { width: 100%; max-width: 440px; max-height: 62vh; overflow-y: auto; }
.quest-group-title { color: #f1c40f; font-size: 8px; letter-spacing: 2px; margin: 14px 0 6px; opacity: 0.8; }
.quest-group-title:first-child { margin-top: 0; }
.quest-entry { background: #080816; border: 1px solid #1a1a3a; border-radius: 4px; padding: 10px 12px; margin-bottom: 8px; }
.quest-entry.quest-done { opacity: 0.55; }
.quest-entry-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.quest-name { color: #d8d8f0; font-size: 9px; letter-spacing: 0.5px; }
.quest-desc { color: #888; font-size: 7px; margin: 5px 0 7px; line-height: 1.5; }
.quest-source { color: #5a6a8a; font-style: italic; }
.quest-obj { color: #9aa4b8; font-size: 7px; margin: 2px 0; }
.quest-obj-done { color: #2ecc71; }
.quest-obj-count { color: #f1c40f; margin-left: 4px; }
.quest-reward { color: #c9a227; font-size: 7px; margin-top: 6px; }
.quest-btn { font-size: 7px; padding: 5px 10px; width: auto; flex-shrink: 0; }
.quest-btn-ready { border-color: #2ecc71; color: #2ecc71; }
.quest-status-tag { font-size: 6px; letter-spacing: 1px; color: #5a6a8a; flex-shrink: 0; }
.quest-done-tag { color: #2ecc71; }
.quest-empty { color: #666; font-size: 8px; text-align: center; padding: 30px 10px; line-height: 1.6; }
.quest-story-badge { font-size: 6px; letter-spacing: 1px; color: #f1c40f; border: 1px solid #5a4a10; border-radius: 3px; padding: 1px 4px; margin-right: 2px; }
.quest-entry.quest-story { border-color: #5a4a10; }

/* ── ENDING / VICTORY ── */
#ending-screen { background: radial-gradient(ellipse at 50% 30%, #1a0e2e 0%, #04040e 75%); }
.ending-title { font-size: 28px; color: #f1c40f; letter-spacing: 6px; text-shadow: 0 0 30px rgba(241,196,15,0.6); margin-bottom: 18px; }
.ending-body { color: #c8c8e0; font-size: 9px; line-height: 1.9; }
.ending-sub { color: #888; font-size: 8px; }

/* ── FORGE / CRAFTING ── */
#forge-list { width: 100%; max-width: 440px; max-height: 62vh; overflow-y: auto; }
.forge-recipe { background: #080816; border: 1px solid #1a1a3a; border-radius: 4px; padding: 10px 12px; margin-bottom: 8px; }
.forge-recipe-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.forge-recipe-name { font-size: 9px; letter-spacing: 0.5px; }
.forge-recipe-stat { color: #9aa4b8; font-size: 7px; margin: 4px 0 6px; }
.forge-recipe-mats { display: flex; flex-wrap: wrap; gap: 6px; }
.forge-mat { font-size: 7px; padding: 2px 5px; border-radius: 3px; border: 1px solid #222; }
.forge-mat-ok { color: #2ecc71; border-color: #1e5a36; }
.forge-mat-missing { color: #c0392b; border-color: #5a1e1e; }
.forge-btn { font-size: 7px; padding: 5px 12px; width: auto; flex-shrink: 0; }

/* ── CLOSE BUTTON ── */
.close-btn {
  position: absolute; top: 16px; right: 16px;
  background: none; border: 1px solid #2a2a4a; color: #444;
  padding: 6px 10px; border-radius: 3px; cursor: pointer;
  font-family: inherit; font-size: 8px;
  transition: border-color 0.15s, color 0.15s;
}
.close-btn:hover { border-color: #e74c3c; color: #e74c3c; }

/* ── PANEL CLOSE BUTTON (X in upper-right of every panel) ── */
.panel-close-btn {
  position: absolute; top: 5px; right: 5px;
  background: rgba(30,0,0,0.7); border: 1px solid #5a2020; color: #c04040;
  padding: 4px 8px; border-radius: 3px; cursor: pointer;
  font-family: inherit; font-size: 9px; line-height: 1;
  z-index: 10;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  touch-action: manipulation;
}
.panel-close-btn:hover { background: rgba(80,0,0,0.9); border-color: #e74c3c; color: #ff6b6b; }

/* ── MOBILE CONTROLS ── */
#mobile-controls {
  position: fixed; bottom: 54px; left: 0; right: 0;
  display: none; justify-content: space-between; align-items: flex-end;
  z-index: 15; padding: 0 20px 16px;
  pointer-events: none;
}
#joystick-base {
  width: 110px; height: 110px; border-radius: 50%;
  background: rgba(8,8,22,0.72);
  border: 2px solid rgba(70,70,148,0.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.7), inset 0 0 30px rgba(0,0,0,0.4);
  position: fixed; pointer-events: none;
  touch-action: none; display: none;
}
#joystick-stick {
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(90,110,240,0.7), rgba(30,30,90,0.9));
  border: 2px solid rgba(90,110,220,0.65);
  box-shadow: 0 2px 10px rgba(0,0,0,0.8), 0 0 14px rgba(70,90,220,0.3);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.08s ease;
  pointer-events: none;
}
#joystick-base.active #joystick-stick { transition: none; }
.action-btns {
  display: flex; flex-direction: column; gap: 6px;
  justify-content: flex-end; align-items: flex-end;
  pointer-events: all;
}
.action-btns button {
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(8,8,22,0.88); border: 1px solid rgba(70,70,148,0.72);
  color: #5868a8; font-size: 8px; cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.78), inset 0 1px 0 rgba(255,255,255,0.08);
  font-family: inherit; letter-spacing: 0;
  transition: background 0.1s, transform 0.1s, box-shadow 0.1s;
  touch-action: manipulation;
}
.action-btns button:active { background: rgba(16,16,52,0.96); transform: scale(0.88); color: #8aaaff; box-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 14px rgba(70,90,220,0.28); }
@media (max-width: 768px) { #mobile-controls { display: flex; } }

/* ── DEATH SCREEN ── */
#death-screen {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 50% 40%, #200000 0%, #050000 100%);
  z-index: 30; display: none; flex-direction: column; align-items: center; justify-content: center;
}
#death-screen h2 {
  font-size: 24px; color: #c0392b; margin-bottom: 16px;
  text-shadow: 0 0 40px rgba(192,57,43,0.8);
  animation: deathPulse 2s ease-in-out infinite;
}
@keyframes deathPulse { 0%,100%{text-shadow:0 0 40px rgba(192,57,43,0.8)} 50%{text-shadow:0 0 80px rgba(231,76,60,1)} }
#death-screen p { color: #5a3030; font-size: 9px; margin-bottom: 10px; letter-spacing: 1px; }
#death-gold-line { color: #c0392b; }
#death-corpse-line { color: #7a5020; margin-bottom: 28px; }

/* ── BOSS DROP OVERLAY ── */
#boss-drop-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 200; display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  animation: bossDropFlash 0.5s ease;
}
@keyframes bossDropFlash {
  0%   { background: rgba(212,175,55,0); }
  15%  { background: rgba(212,175,55,0.55); }
  40%  { background: rgba(212,175,55,0.3); }
  100% { background: rgba(212,175,55,0); }
}
#boss-drop-inner {
  text-align: center;
  animation: bossDropIn 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes bossDropIn {
  from { opacity:0; transform:scale(0.5) translateY(-30px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
#boss-drop-label {
  font-size: 28px; color: #f39c12; letter-spacing: 4px;
  text-shadow: 0 0 30px rgba(243,156,18,0.9), 0 0 60px rgba(243,156,18,0.5);
  margin-bottom: 10px;
}
#boss-drop-item-name {
  font-size: 12px; color: #f1c40f; letter-spacing: 2px;
  text-shadow: 0 0 20px rgba(241,196,15,0.8);
  margin-bottom: 6px;
}
#boss-drop-item-rarity {
  font-size: 9px; color: #e0b030; letter-spacing: 1px;
}

/* ── SELL CONFIRM MODAL ── */
#sell-confirm-overlay, #sell-all-confirm-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(4,4,14,0.85);
  z-index: 50; display: none; align-items: center; justify-content: center;
}
#sell-confirm-overlay.active, #sell-all-confirm-overlay.active { display: flex; }
#sell-confirm-box {
  background: #0a0a1a;
  border: 1px solid #8b5e1a;
  border-radius: 6px;
  padding: 24px 28px;
  max-width: 320px;
  width: 90%;
  text-align: center;
  box-shadow: 0 0 40px rgba(139,94,26,0.25);
}
#sell-confirm-text {
  color: #ccc;
  font-size: 9px;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
  line-height: 1.6;
}
#sell-confirm-btns { display: flex; gap: 10px; justify-content: center; }
.sell-confirm-btn {
  flex: 1; padding: 7px 0;
  border-radius: 3px; border: 1px solid;
  font-family: inherit; font-size: 7px; letter-spacing: 1px;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.sell-confirm-yes {
  background: linear-gradient(180deg, #2a1a06 0%, #1a0f04 100%);
  border-color: #8b5e1a; color: #f39c12;
}
.sell-confirm-yes:hover { background: linear-gradient(180deg, #3a2a0a 0%, #2a1a06 100%); border-color: #f39c12; }
.sell-confirm-cancel {
  background: linear-gradient(180deg, #111 0%, #0a0a0a 100%);
  border-color: #333; color: #888;
}
.sell-confirm-cancel:hover { background: linear-gradient(180deg, #1a1a1a 0%, #111 100%); border-color: #555; color: #aaa; }

/* ── NEW GAME CONFIRM MODAL ── */
#new-game-confirm-overlay, #ngplus-confirm-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(4,4,14,0.85);
  z-index: 50; display: none; align-items: center; justify-content: center;
}
#new-game-confirm-box, #ngplus-confirm-box {
  background: #0a0a1a;
  border: 1px solid #8b5e1a;
  border-radius: 6px;
  padding: 24px 28px;
  min-width: 220px; max-width: 300px;
  text-align: center;
  box-shadow: 0 0 40px rgba(139,94,26,0.25);
}
#new-game-confirm-text, #ngplus-confirm-text {
  color: #ccc;
  font-size: 9px;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  line-height: 1.6;
}
#new-game-confirm-btns, #ngplus-confirm-btns { display: flex; gap: 10px; justify-content: center; }

/* ── STATS SCREEN ── */
#stats-screen {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 50% 10%, #040e1a 0%, #04040e 70%);
  z-index: 20; display: none; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 20px; overflow-y: auto;
  backdrop-filter: blur(4px);
}
.stats-panel-wrap { width: 100%; max-width: 500px; padding-bottom: 20px; }
.stats-section {
  background: linear-gradient(180deg, #080816 0%, #050510 100%);
  border: 1px solid #1a1a3a; border-radius: 4px;
  padding: 14px 16px; margin-bottom: 10px;
}
.stats-section-title {
  font-size: 7px; color: #3a5a9a; letter-spacing: 2px;
  margin-bottom: 10px; border-bottom: 1px solid #111128; padding-bottom: 6px;
}
.stats-grid { display: flex; flex-direction: column; gap: 6px; }
.stat-row {
  display: flex; align-items: center; gap: 8px; font-size: 8px;
}
.stat-label {
  width: 34px; font-size: 8px; font-weight: bold; text-align: center;
  border-radius: 3px; padding: 2px 4px;
}
.stat-str { color: #e07060; background: rgba(200,80,60,0.15); border: 1px solid rgba(200,80,60,0.25); }
.stat-dex { color: #60e0a0; background: rgba(60,200,120,0.15); border: 1px solid rgba(60,200,120,0.25); }
.stat-con { color: #60b0e0; background: rgba(60,140,200,0.15); border: 1px solid rgba(60,140,200,0.25); }
.stat-int { color: #a060e0; background: rgba(140,60,200,0.15); border: 1px solid rgba(140,60,200,0.25); }
.stat-wis { color: #e0c060; background: rgba(200,170,60,0.15); border: 1px solid rgba(200,170,60,0.25); }
.stat-cha { color: #e060b0; background: rgba(200,60,140,0.15); border: 1px solid rgba(200,60,140,0.25); }
.stat-num { color: #f1c40f; font-size: 10px; min-width: 24px; text-align: right; }
.stat-desc { color: #444; font-size: 6px; letter-spacing: 1px; flex: 1; }
.stat-clickable { cursor: pointer; border-radius: 3px; transition: background 0.15s; }
.stat-clickable:hover { background: rgba(255,255,255,0.04); }
.stat-row-caret { color: #333; font-size: 9px; margin-left: auto; transition: transform 0.2s, color 0.2s; flex-shrink: 0; }
.stat-clickable.expanded .stat-row-caret { transform: rotate(180deg); color: #5a7aaa; }
.stat-detail {
  max-height: 0; overflow: hidden;
  border-left: 2px solid #1a1a3a;
  margin: 0 0 2px 42px;
  padding: 0 10px;
  border-radius: 0 3px 3px 0;
  transition: max-height 0.25s ease, padding 0.25s ease;
}
.stat-detail.open { max-height: 80px; padding: 6px 10px; }
.stat-detail-text { color: #5a7a9a; font-size: 6px; line-height: 1.9; letter-spacing: 0.5px; }
.stat-detail-derived { color: #f1c40f; font-size: 7px; margin-top: 3px; letter-spacing: 0.5px; }
.stats-hint { color: #282840; font-size: 6px; letter-spacing: 1px; float: right; font-weight: normal; }
.stats-derived { display: flex; flex-direction: column; gap: 5px; }
.derived-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 8px; }
.derived-label { color: #666; letter-spacing: 1px; }
.derived-val { color: #d0d8f0; text-align: right; }
.derived-note { color: #333; font-size: 6px; }
.shop-discount { color: #5a4010; text-decoration: line-through; font-size: 7px; margin-right: 3px; }

/* ── TRAINER ── */
#trainer-screen {
  background: radial-gradient(ellipse at 50% 10%, #0a0e1a 0%, #04040e 70%);
  justify-content: flex-start;
  overflow-y: auto;
}
.trainer-points-bar {
  background: #08080e; border: 1px solid #2a2a5a; border-radius: 4px;
  padding: 8px 20px; font-size: 9px; color: #a0a0d0; margin-bottom: 16px;
  text-align: center; letter-spacing: 1px;
}
.trainer-points-bar span { color: #f1c40f; }
#trainer-stats { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 400px; }
.trainer-stat-row {
  background: linear-gradient(180deg, #0a0a1e 0%, #060612 100%);
  border: 1px solid #1a1a3a; border-radius: 4px; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px; font-size: 8px;
}
.trainer-stat-val { color: #f1c40f; font-size: 11px; min-width: 28px; text-align: right; }
.trainer-stat-desc { color: #444; font-size: 6px; flex: 1; letter-spacing: 0.5px; }
.trainer-btn {
  background: linear-gradient(180deg, #0e1e3a 0%, #081428 100%);
  border: 1px solid #2a4a8a; color: #70a0e0;
  padding: 5px 10px; font-family: inherit; font-size: 7px; border-radius: 3px;
  cursor: pointer; letter-spacing: 1px; transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.trainer-btn:hover { border-color: #5a8ad0; background: linear-gradient(180deg, #162a50 0%, #0e1e3c 100%); }
.trainer-btn-disabled { border-color: #1a1a2a; color: #2a2a4a; cursor: not-allowed; }
.skill-pts-available { color: #f1c40f; text-shadow: 0 0 8px rgba(241,196,15,0.6); }
.trainer-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.trainer-tab {
  flex: 1; padding: 7px 0; font-size: 7px; letter-spacing: 1px; cursor: pointer;
  background: #080810; border: 1px solid #1a1a3a; color: #444466; border-radius: 3px;
  font-family: inherit; transition: border-color 0.15s, color 0.15s;
}
.trainer-tab:hover { border-color: #3a3a6a; color: #8080b0; }
.trainer-tab-active { border-color: #3a5aa0; color: #90b8f0; background: #0a0e20; }

/* ── SKILL LEARN ROWS ── */
#trainer-skills { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 400px; }
.skill-learn-row {
  background: linear-gradient(180deg, #0a0a1e 0%, #060612 100%);
  border: 1px solid #1a1a3a; border-radius: 4px; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px; font-size: 8px;
}
.skill-learn-row.skill-learned { border-color: #1a3a1a; }
.skill-learn-row.skill-locked { opacity: 0.45; filter: grayscale(0.6); cursor: not-allowed; }
.skill-learn-row.skill-locked .trainer-btn { pointer-events: none; }
.skill-icon { font-size: 16px; min-width: 22px; text-align: center; }
.skill-learn-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.skill-learn-name { color: #c0c8f0; font-size: 8px; letter-spacing: 0.5px; }
.skill-learn-desc { color: #555577; font-size: 6px; }
.skill-learn-req { font-size: 6px; letter-spacing: 0.3px; }
.skill-learned-badge {
  font-size: 6px; color: #50c050; border: 1px solid #205020; border-radius: 3px;
  padding: 3px 6px; letter-spacing: 0.5px; white-space: nowrap;
}

/* ── COMBAT SKILLS ── */
.btn-skills { border-color: #4a3a6a; color: #c0a0f0; }
.btn-skills:hover { border-color: #8060b0; background: linear-gradient(180deg, #251540 0%, #180f30 100%); }
#combat-skills-menu {
  flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-top: 8px; padding: 8px 0 2px;
  border-top: 1px solid #1a1a3a;
}
.btn-skill { border-color: #4a3a6a; color: #c0a0f0; font-size: 7px; }
.btn-skill:hover { border-color: #8060b0; background: linear-gradient(180deg, #251540 0%, #180f30 100%); }
.btn-skill-combat-only { border-color: #2a2a3a; color: #555566; font-size: 7px; opacity: 0.5; }
.btn-skill-combat-only:hover { border-color: #3a3a4a; background: none; }
.btn-skill-cooldown { border-color: #2a2a3a !important; color: #555566 !important; opacity: 0.5; cursor: not-allowed; }
.btn-skill-cooldown:hover { border-color: #2a2a3a !important; background: none !important; }
.skill-cd { color: #ff6666; font-size: 6px; margin-left: 2px; }
.skill-rank-stars { font-size: 6px; color: #f39c12; letter-spacing: 1px; margin-top: 1px; line-height: 1; }
.combat-skills-empty { font-size: 7px; color: #444466; letter-spacing: 0.5px; padding: 4px 0; }
.combat-skills-passive-header { font-size: 6px; color: #556655; letter-spacing: 1px; padding: 4px 2px 2px; width: 100%; border-top: 1px solid #1a2a1a; margin-top: 2px; }
.combat-skills-passive-row { font-size: 6px; color: #446644; width: 100%; padding: 2px 4px; }
.combat-skills-passive-row .passive-name { color: #70a070; margin-right: 4px; }
.combat-skills-passive-row .passive-desc { color: #385038; }
.skill-passive-badge { font-size: 5px; color: #70a070; border: 1px solid #205020; border-radius: 3px; padding: 1px 4px; margin-left: 5px; letter-spacing: 0.5px; vertical-align: middle; }

/* ── HUD MENU BAR ── */
#hud-menu-bar {
  position: fixed; bottom: 54px; right: 16px;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 6px; z-index: 15;
}
#hud-menu-items {
  display: none; flex-direction: column; align-items: flex-end; gap: 6px;
}
#hud-menu-items.open { display: flex; }
#hud-menu-toggle {
  width: 72px; height: 44px;
  background: rgba(8,8,22,0.92); border: 1px solid rgba(70,70,148,0.72);
  color: #7080c0; font-size: 8px; font-family: inherit; letter-spacing: 1px;
  border-radius: 6px; cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.78), inset 0 1px 0 rgba(255,255,255,0.06);
  touch-action: manipulation;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
#hud-menu-toggle.active { border-color: #9090e0; color: #b0b8f0; background: rgba(14,14,40,0.96); }
#hud-menu-toggle:active { transform: scale(0.92); }
.hud-menu-btn {
  min-width: 72px; height: 40px; padding: 0 14px;
  background: rgba(8,8,22,0.92); border: 1px solid rgba(70,70,148,0.6);
  color: #7080c0; font-size: 8px; font-family: inherit; letter-spacing: 1px;
  border-radius: 5px; cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.78), inset 0 1px 0 rgba(255,255,255,0.06);
  touch-action: manipulation; white-space: nowrap;
  transition: background 0.1s, color 0.1s, border-color 0.1s, transform 0.1s;
}
.hud-menu-btn:hover { border-color: #9090d0; color: #a0b0e0; }
.hud-menu-btn:active { transform: scale(0.92); color: #c0d0ff; }
#hud-save-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#hud-save-sub { display: none; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
#hud-save-sub.open { display: flex; }
#hud-save-toggle.active { border-color: #9090e0; color: #b0b8f0; background: rgba(14,14,40,0.96); }
.hud-save-status { font-family: inherit; font-size: 7px; color: #506080; text-align: right; padding: 1px 4px; letter-spacing: 0.5px; width: 100%; }
.hud-save-btn { min-width: 90px; }

/* ── MOBILE DEBUG ── */
#mobile-debug-btn {
  display: none;
  position: fixed; bottom: 60px; right: 8px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,40,0,0.75); border: 1px solid #0a0;
  color: #0f0; font-size: 14px; cursor: pointer; z-index: 60;
  line-height: 1; padding: 0; font-family: inherit;
  box-shadow: 0 2px 8px rgba(0,0,0,0.7);
  touch-action: manipulation;
}
#mobile-debug-panel {
  display: none;
  position: fixed; bottom: 100px; right: 8px;
  background: rgba(0,10,0,0.92); border: 1px solid #0a0;
  border-radius: 6px; padding: 10px; z-index: 60;
  min-width: 180px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.9);
}
#mobile-debug-panel.open { display: block; }
#mobile-debug-info-text {
  font-size: 6px; color: #0f0; letter-spacing: 0.5px;
  margin-bottom: 8px; white-space: nowrap;
  border-bottom: 1px solid #050;
  padding-bottom: 6px; line-height: 1.8;
}
#mobile-debug-btns { display: flex; flex-direction: column; gap: 5px; }
.mobile-debug-cheat-btn {
  background: rgba(0,30,0,0.9); border: 1px solid #0a0;
  color: #0f0; font-family: inherit; font-size: 7px;
  letter-spacing: 0.5px; padding: 6px 10px; border-radius: 3px;
  cursor: pointer; text-align: left; touch-action: manipulation;
  transition: background 0.1s, border-color 0.1s;
}
.mobile-debug-cheat-btn:active { background: rgba(0,60,0,0.9); border-color: #0f0; }
@media (max-width: 768px), (pointer: coarse) {
  /* mobile-debug-btn removed; debug accessible via triple-tap top-left corner */
}

/* ── SPARRING ── */
#sparring-screen {
  background: radial-gradient(ellipse at 50% 10%, #120a00 0%, #04040e 70%);
  justify-content: flex-start;
  overflow-y: auto;
}
#sparring-opponents {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; max-width: 400px;
}
.sparring-opp {
  background: linear-gradient(180deg, #100c04 0%, #0a0802 100%);
  border: 1px solid #2a2000; border-radius: 4px; padding: 14px 16px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.sparring-opp:hover { border-color: #c08020; background: linear-gradient(180deg, #201400 0%, #160e00 100%); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 12px rgba(192,128,32,0.14); }
.sparring-opp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.sparring-opp-name { color: #e8d080; font-size: 9px; letter-spacing: 0.5px; }
.sparring-badge { font-size: 6px; border-radius: 3px; padding: 2px 6px; letter-spacing: 1px; border: 1px solid; }
.sparring-badge-beginner { color: #60c060; border-color: #204820; background: rgba(60,160,60,0.1); }
.sparring-badge-veteran  { color: #60a0e0; border-color: #1a3a6a; background: rgba(60,120,200,0.1); }
.sparring-badge-champion { color: #e06060; border-color: #6a1a1a; background: rgba(200,60,60,0.1); }
.sparring-opp-stats { font-size: 7px; color: #666; margin-bottom: 4px; letter-spacing: 0.5px; }
.sparring-opp-reward { font-size: 7px; color: #80a040; letter-spacing: 0.5px; }

/* ── LIBRARY ── */
.library-book {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #0c0a08 0%, #080604 100%);
  border: 1px solid #2a2010; border-radius: 4px;
  margin-bottom: 8px; padding: 10px 12px;
  cursor: pointer; transition: transform 0.1s, box-shadow 0.1s;
}
.library-book:hover { transform: translateX(3px); box-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.library-book-spine { width: 8px; min-width: 8px; height: 40px; border-radius: 2px; opacity: 0.85; }
.library-book-info { flex: 1; }
.library-book-title { font-size: 9px; letter-spacing: 1px; font-weight: bold; margin-bottom: 3px; }
.library-book-read { font-size: 7px; color: #60c060; letter-spacing: 0.5px; }
.library-book-panel-title {
  font-size: 11px; letter-spacing: 2px; font-weight: bold;
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid #1a1a2a;
}
.library-book-panel-text {
  font-size: 8px; color: #b0b8d0; line-height: 1.7;
  background: rgba(0,0,0,0.3); border: 1px solid #1a1a2a;
  border-radius: 3px; padding: 12px; white-space: pre-wrap;
}

/* ── EQUIPMENT SCREEN ── */
#equip-screen {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 50% 10%, #080818 0%, #04040e 70%);
  z-index: 20; display: none; flex-direction: column; align-items: center;
  justify-content: flex-start; padding: 20px; overflow-y: auto;
  backdrop-filter: blur(4px);
}
.equip-panel-wrap { width: 100%; max-width: 420px; padding-bottom: 20px; }
#equip-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  justify-items: center;
  padding: 8px 0;
}
.equip-empty { width: 80px; height: 64px; }
.equip-slot {
  width: 80px; min-height: 64px;
  border: 1px dashed #252545;
  border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; padding: 6px 4px;
  background: linear-gradient(180deg, #07070f 0%, #050510 100%);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  text-align: center;
}
.equip-slot:hover {
  border-color: #5a5aaa; border-style: solid;
  background: linear-gradient(180deg, #0e0e22 0%, #0a0a1a 100%);
  box-shadow: 0 0 10px rgba(90,90,170,0.2);
}
.equip-slot.occupied {
  border-color: #27ae60; border-style: solid;
  background: linear-gradient(180deg, #081a10 0%, #050e0a 100%);
  box-shadow: 0 0 10px rgba(39,174,96,0.15);
}
.equip-slot.occupied:hover {
  border-color: #e74c3c;
  background: linear-gradient(180deg, #1a0808 0%, #0e0505 100%);
  box-shadow: 0 0 10px rgba(231,76,60,0.2);
}
.equip-slot-icon { font-size: 18px; line-height: 1; }
.equip-slot-empty { opacity: 0.18; }
.equip-slot-label { font-size: 5px; color: #333; letter-spacing: 1px; margin-top: 3px; }
.equip-slot-name { font-size: 6px; color: #a0c080; letter-spacing: 0.3px; margin-top: 2px; line-height: 1.3; max-width: 72px; }
.equip-slot-stat { font-size: 6px; color: #e07060; margin-top: 1px; letter-spacing: 0.3px; }
.equip-slot-passive { font-size: 5.5px; color: #f39c12; margin-top: 1px; letter-spacing: 0.2px; line-height: 1.3; }
.equip-slot.occupied .equip-slot-label { color: #2a6a40; }
#equip-figure {
  display: flex; flex-direction: column; align-items: center;
  opacity: 0.12; pointer-events: none; padding: 4px 0;
}
.ef-head {
  width: 20px; height: 20px;
  border: 1px solid #6060aa; border-radius: 50%;
}
.ef-body {
  width: 28px; height: 36px;
  border: 1px solid #6060aa; border-radius: 3px 3px 2px 2px;
  margin-top: 3px;
}
.ef-legs { display: flex; gap: 4px; margin-top: 3px; }
.ef-leg { width: 11px; height: 18px; border: 1px solid #6060aa; border-radius: 2px; }
#equip-bonuses {
  background: linear-gradient(180deg, #080816 0%, #050510 100%);
  border: 1px solid #1a1a3a; border-radius: 4px;
  padding: 10px 16px; font-size: 8px; margin-top: 12px;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
}
.equip-bonus-chip { color: #555577; letter-spacing: 0.5px; }
.equip-bonus-chip span { color: #f1c40f; }
/* Set bonus panel */
#equip-set-bonuses {
  background: linear-gradient(180deg, #080816 0%, #050510 100%);
  border: 1px solid #1a1a3a; border-radius: 4px;
  padding: 10px 14px; font-size: 7px; margin-top: 8px;
}
.set-bonuses-title {
  font-size: 7px; color: #7090c8; letter-spacing: 1.5px; margin-bottom: 8px;
}
.set-bonus-group { margin-bottom: 8px; }
.set-bonus-group:last-child { margin-bottom: 0; }
.set-bonus-name {
  font-size: 7.5px; color: #c0a060; letter-spacing: 0.5px; margin-bottom: 3px;
}
.set-piece-count { color: #555577; font-size: 6.5px; }
.set-bonus-tier {
  padding: 2px 0; font-size: 6.5px; letter-spacing: 0.3px;
  display: flex; gap: 5px; align-items: baseline;
}
.set-bonus-active { color: #70d080; }
.set-bonus-inactive { color: #333355; }
.set-tier-badge {
  font-size: 6px; letter-spacing: 0.5px; font-weight: bold;
  color: #444466; flex-shrink: 0;
}
.set-bonus-active .set-tier-badge { color: #3a8a50; }
/* Set name shown on equipped slot */
.equip-slot-set {
  font-size: 5px; color: #c0a060; letter-spacing: 0.3px; margin-top: 1px;
  line-height: 1.2;
}
#equip-picker {
  background: linear-gradient(180deg, #08080e 0%, #050508 100%);
  border: 1px solid #2a2a5a; border-radius: 4px;
  padding: 12px; margin-top: 12px;
}
#equip-picker-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #1a1a3a;
}
#equip-picker-title { font-size: 8px; color: #7090c8; letter-spacing: 1px; }
.equip-picker-close {
  background: none; border: 1px solid #2a2a4a; color: #555;
  font-family: inherit; font-size: 8px; padding: 3px 7px;
  border-radius: 3px; cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.equip-picker-close:hover { border-color: #e74c3c; color: #e74c3c; }
#equip-picker-items {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 200px; overflow-y: auto;
}
#equip-picker-items::-webkit-scrollbar { width: 4px; }
#equip-picker-items::-webkit-scrollbar-track { background: #050510; }
#equip-picker-items::-webkit-scrollbar-thumb { background: #2a2a5a; border-radius: 2px; }
.equip-picker-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: linear-gradient(180deg, #0e1428 0%, #0a0f1e 100%);
  border: 1px solid #1e2a4a; border-radius: 4px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.equip-picker-item:hover { border-color: #5a7ecc; background: linear-gradient(180deg, #101630 0%, #0c1224 100%); }
.equip-picker-item-icon { font-size: 16px; min-width: 20px; text-align: center; }
.equip-picker-item-name { color: #d0c8a0; font-size: 8px; flex: 1; }
.equip-picker-item-stat { color: #666; font-size: 7px; white-space: nowrap; }

/* ── PARTICLE CANVAS ── */
#particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }

/* ── FLOOR INDICATOR ── */
#floor-indicator {
  position: fixed; top: 50px; left: 50%; transform: translateX(-50%);
  font-size: 8px; color: #3a3a6a; letter-spacing: 2px;
  z-index: 9; opacity: 0; transition: opacity 0.5s;
}
#floor-indicator.visible { opacity: 1; }

/* ── LOCATION INDICATOR ── */
#location-indicator {
  position: fixed; top: 50px; right: 12px;
  font-size: 7px; color: #9090c0; letter-spacing: 1px;
  background: rgba(8,8,22,0.80); border: 1px solid rgba(70,70,148,0.45);
  border-radius: 5px; padding: 4px 10px;
  backdrop-filter: blur(6px);
  z-index: 9; pointer-events: none;
  white-space: nowrap;
}

/* ── DEBUG MODE ── */
#debug-gear-btn {
  position: fixed;
  top: 10px;
  left: 10px;
  font-size: 28px;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  z-index: 99999;
  display: none;
  color: #00ff88;
  text-decoration: none;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
}
#debug-gear-btn.visible {
  display: block;
}
#debug-indicator {
  position: fixed; top: 50px; right: 8px;
  font-size: 6px; color: rgba(0,255,0,0.35); background: rgba(0,0,0,0.4);
  border: 1px solid rgba(0,255,0,0.2); padding: 2px 5px; z-index: 50;
  letter-spacing: 1px; cursor: pointer;
}
#debug-info {
  position: fixed; top: 66px; right: 8px;
  font-size: 6px; color: #0f0; background: #1a1a1a;
  border: 1px solid #0a0; padding: 3px 6px; z-index: 50;
  letter-spacing: 1px; white-space: nowrap;
}

/* ── CLASS SELECT SCREEN ── */
#class-select-screen {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 50% 30%, #0d0a22 0%, #04040e 70%);
  z-index: 100; display: none; flex-direction: column;
  align-items: center; justify-content: center; padding: 16px;
  overflow-y: auto;
}
.class-select-wrap { max-width: 480px; width: 100%; }
#class-select-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  max-height: 72vh; overflow-y: auto;
}
#class-select-grid::-webkit-scrollbar { width: 4px; }
#class-select-grid::-webkit-scrollbar-track { background: #050510; }
#class-select-grid::-webkit-scrollbar-thumb { background: #2a2a5a; border-radius: 2px; }
.class-card {
  background: linear-gradient(135deg, #0e0e2e, #070718);
  border: 2px solid #1e2a5a; border-radius: 6px;
  padding: 12px 10px; cursor: pointer;
  transition: border-color 0.2s, transform 0.1s, box-shadow 0.2s;
  display: flex; flex-direction: column; gap: 5px;
}
.class-card:hover, .class-card:active {
  border-color: #5a6aaa; transform: scale(1.02);
  box-shadow: 0 0 20px rgba(90,106,170,0.3);
}
.class-card-icon { font-size: 22px; text-align: center; line-height: 1; }
.class-card-name {
  font-size: 8px; color: #e8d5a0; text-align: center;
  letter-spacing: 1px; margin-top: 2px;
}
.class-card-desc { font-size: 6px; color: #778; line-height: 1.5; }
.class-card-stats { display: flex; flex-wrap: wrap; gap: 3px; }
.class-stat-pos { font-size: 6px; color: #2ecc71; }
.class-stat-neg { font-size: 6px; color: #e74c3c; }
.class-card-skills { font-size: 6px; color: #7aabdf; line-height: 1.4; }
.class-card-equip  { font-size: 6px; color: #888; line-height: 1.4; }

/* Locked item in equip picker */
.equip-picker-locked {
  opacity: 0.45; cursor: default;
  border-color: #2a1a1a !important;
  background: linear-gradient(180deg, #120a0a 0%, #0e0606 100%) !important;
}

/* ── GAMBLING DEN ── */
.gambling-gold-bar {
  text-align: center; font-size: 9px; color: #f39c12; letter-spacing: 1px;
  padding: 6px 0 10px;
}
.gambling-menu-desc {
  text-align: center; font-size: 8px; color: #887766; font-style: italic;
  margin-bottom: 14px; letter-spacing: 0.5px;
}
.gambling-game-btn {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, #12100a 0%, #0c0a06 100%);
  border: 1px solid #3a2e1a; border-radius: 6px;
  padding: 12px 14px; margin-bottom: 8px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  color: #e8d5a0; font-family: inherit;
}
.gambling-game-btn:hover { border-color: #f39c12; background: linear-gradient(180deg, #1e1608 0%, #150f05 100%); }
.gambling-game-icon { font-size: 18px; min-width: 28px; text-align: center; color: #f39c12; font-family: monospace; }
.gambling-game-info { text-align: left; }
.gambling-game-name { font-size: 9px; color: #e8d5a0; letter-spacing: 1px; margin-bottom: 2px; }
.gambling-game-limits { font-size: 7px; color: #887766; }
.gambling-game-panel-title {
  font-size: 11px; color: #f39c12; letter-spacing: 2px; text-align: center;
  margin-bottom: 4px; padding-bottom: 8px; border-bottom: 1px solid #2a2010;
}
.gambling-game-panel-desc { font-size: 7px; color: #887766; text-align: center; margin-bottom: 12px; }
.gambling-bet-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; justify-content: center; }
.gambling-bet-label { font-size: 8px; color: #aaa; white-space: nowrap; }
.gambling-bet-input {
  width: 90px; background: #0a0808; border: 1px solid #3a2e1a; border-radius: 4px;
  color: #f39c12; font-size: 10px; font-family: inherit; padding: 4px 8px; text-align: center;
}
.gambling-animation {
  text-align: center; font-size: 18px; min-height: 28px; color: #e8d5a0;
  margin-bottom: 12px; letter-spacing: 2px; font-family: monospace;
}
.gambling-choice-btns { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; }
.gambling-choice-btn {
  flex: 1; min-width: 80px; padding: 10px 6px; font-size: 9px; letter-spacing: 1px;
  background: linear-gradient(180deg, #1a1408 0%, #120e05 100%);
  border: 1px solid #4a3a1a; border-radius: 6px; color: #e8d5a0;
  cursor: pointer; font-family: inherit; transition: border-color 0.15s, background 0.15s;
}
.gambling-choice-btn:hover:not(:disabled) { border-color: #f39c12; background: linear-gradient(180deg, #2a2010 0%, #1e1608 100%); }
.gambling-choice-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.gambling-card-btn {
  flex: 1; min-width: 70px; padding: 16px 6px; font-size: 14px;
  background: linear-gradient(180deg, #0e1a2a 0%, #08101a 100%);
  border: 2px solid #2a4a6a; border-radius: 8px; color: #a0c0e0;
  cursor: pointer; font-family: monospace; letter-spacing: 1px;
  transition: border-color 0.15s, background 0.15s;
}
.gambling-card-btn:hover:not(:disabled) { border-color: #f39c12; background: linear-gradient(180deg, #162030 0%, #101820 100%); }
.gambling-card-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.gambling-result {
  text-align: center; font-size: 9px; letter-spacing: 1px; min-height: 18px;
  padding: 6px 0; border-radius: 4px;
}
.gambling-win { color: #2ecc71; }
.gambling-lose { color: #e74c3c; }
.equip-picker-locked:hover { border-color: #2a1a1a !important; background: linear-gradient(180deg, #120a0a 0%, #0e0606 100%) !important; }

/* ── Drunk effects ────────────────────────────────────────────────────────── */
#drunk-tint {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(ellipse at center, rgba(139,0,0,0.0) 40%, rgba(139,0,0,0.6) 100%);
  opacity: 0; transition: opacity 0.6s;
}
.drunk-wobble { animation: drunkWobble 0.35s ease; }
@keyframes drunkWobble {
  0%   { transform: translateX(0) rotate(0deg); }
  20%  { transform: translateX(-5px) rotate(-1.5deg); }
  45%  { transform: translateX(6px)  rotate(1deg); }
  65%  { transform: translateX(-4px) rotate(-0.8deg); }
  80%  { transform: translateX(3px)  rotate(0.5deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

/* ── ITEM TOOLTIP ── */
.tooltip {
  position: fixed;
  background: #1a1a1a;
  border: 1px solid #555;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 10px;
  z-index: 10000;
  max-width: 200px;
  pointer-events: none;
  display: none;
  line-height: 1.5;
  box-shadow: 0 4px 20px rgba(0,0,0,0.8);
}
.tooltip .rarity { font-weight: bold; }
.tooltip .tt-type { color: #888; font-size: 8px; margin-top: 2px; }
.tooltip .stats { color: #4caf50; margin-top: 2px; }
.tooltip .desc { color: #aaa; font-style: italic; margin-top: 4px; font-size: 9px; line-height: 1.4; }
.tooltip .tt-value { color: #f39c12; margin-top: 4px; padding-top: 4px; border-top: 1px solid #2a2a2a; font-size: 9px; }