/* ==========================================================================
   Base Styles
   ========================================================================== */
body {
  background-color: #121212;
  color: #eaeaea;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}
a { color: #ddb76e; text-decoration: none; }
a:hover { color: #ffe8b3; text-decoration: underline; }

/* ==========================================================================
   Layout Containers
   ========================================================================== */
.container,
.page-wrapper {
  border-radius: 10px;
  margin: 30px auto;
  max-width: 1000px;         /* site width */
  padding: 20px;
}
.container { background: none; }
.page-wrapper {
  background-color: #1a1a1a;
  box-shadow: 0 0 20px rgba(255,215,100,.05);
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4 { color: #ffe8b3; margin-top: 0; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

/* ==========================================================================
   Buttons & Forms
   ========================================================================== */
.btn, form button {
  background-color: #5a4129;
  border: none;
  border-radius: 6px;
  box-sizing: border-box;
  color: #ffe8b3;
  cursor: pointer;
  display: block;
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
  padding: 12px 24px;
  text-align: center;
  transition: background-color .2s ease;
  width: 100%;
}
.btn:hover, form button:hover { background-color: #ffc657; color: #111; }
form { margin-top: 20px; text-align: center; }

/* ==========================================================================
   Story banner (on dashboard)
   ========================================================================== */
.story-banner{
  margin:8px 0 14px;
  padding:12px 14px;
  background:#111;
  border:1px solid rgba(209,177,90,.25);
  border-radius:12px;
  line-height:1.45;
  box-shadow: inset 0 0 12px rgba(255,215,100,.05);
}
.story-banner .rank{ color:#d1b15a; font-weight:700; }
.story-banner a.story-link{ color:#d1b15a; font-weight:700; text-decoration:underline; }
.story-banner a.story-link:hover{ filter:brightness(1.1); }

/* ==========================================================================
   Combat Layout (missions)
   ========================================================================== */
.battle-arena { margin: 0 auto; max-width: 1000px; }
.battle-row { display:flex; gap:1rem; align-items:center; justify-content:center; margin-bottom:1.2em; }
.combatant-card.wide-card {
  background:none; display:flex; flex:1 1 350px; flex-direction:column;
  align-items:center; justify-content:center; gap:0; min-width:0; text-align:center;
}
.combatant-enemy-name, .combatant-player-name { color:#ddb76e; }
.combatant-inner {
  background:#222224; border-radius:14px; box-shadow:0 0 18px #000;
  display:flex; gap:24px; align-items:center; justify-content:center; padding:22px 18px;
}
.combatant-name { color:#ffe8b3; font-size:1.33em; font-weight:700; letter-spacing:1px; margin-bottom:.28em; }
.combatant-portrait-large { border-radius:8px; height:225px; object-fit:cover; }
.dashboard-stats { list-style:none; margin:0; padding:0; font-size:1.08em; }
.dashboard-stats-container.mini {
  background:#232323; border-radius:10px; min-height:200px; min-width:180px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1px;
}
.dashboard-stats li { display:flex; align-items:center; gap:.2em; margin:8px 0 6px; }
.stat-icon { font-size:1.13em; }
.vs-divider { display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0 .5rem; min-width:60px; }
.vs-divider span { color:#ddb76e; font-size:3em; font-weight:900; line-height:1; padding:0 22px; text-shadow:0 0 8px #000, 0 0 2px #fff3; }

/* ==========================================================================
   Enemy Intro / Flavor Text
   ========================================================================== */
.battle-scene-flavor { color:#ddb76e; font-size:1.12em; margin:0 auto 2em; max-width:750px; text-align:center; }
.enemy-intro-story { color:#ddb76e; font-size:1.58em; font-style:italic; font-weight:bold; margin-bottom:1.5em; text-align:center; }

/* ==========================================================================
   Battle Log
   ========================================================================== */
.battle-log {
  background:#1b1b1b; color:#e0d8c4; border-radius:10px; box-shadow:0 0 10px rgba(255,215,100,.1);
  max-width:750px; margin:20px auto 0; padding:20px;
}
.battle-log h2 { color:#f0c94d; margin-bottom:1rem; text-align:center; }
.battle-log-box {
  background:#222; border-left:3px solid #b88d46; display:flex; align-items:center;
  font-family:'Courier New', monospace; font-size:1.05rem; line-height:1.35;
  margin-bottom:4px; padding:10px 10px 6px 10px; min-height:20px;
}
.battle-log-box.damage-dealt { color:#7ff973; }
.battle-log-box.damage-miss  { color:#ccc; }
.battle-log-box.damage-taken { color:#ff5c5c; }
.battle-log-box.level-up {
  background:#10401d; border:2px solid #7fff59; border-radius:7px; box-shadow:0 0 4px #4bff9f33;
  color:#ffd700; font-size:1.25rem; margin-bottom:6px; padding:11px 10px 7px;
}
.log-icon { font-size:1.2em; margin-right:.5em; }
.skill-link { color:#ffd700; text-decoration: underline dotted; }
.skill-link:hover { color:#d5ff6e; text-decoration: underline solid; }

.battle-log-box.battle-lose { background:#3d0a0a; border-color:#ff5959; color:#ffb3b3; }
.battle-log-box.battle-win  { background:#0a3d0a; border-color:#7fff59; color:#d4ff9f; }
.battle-log-box.finish { border-left-width:4px; font-size:1.2rem; font-weight:bold; padding-left:12px; }
.battle-log .battle-log-box:last-child { border-left-width:4px; }
.battle-log .battle-log-box:last-child:not(.battle-win):not(.battle-lose) {
  background:#262626; color:#ffeec0; box-shadow:0 0 8px #ffeb8533;
}
.battle-log .battle-log-box.finish.battle-win {
  background:#0a3d0a; border-left:4px solid #7fff59; color:#d4ff9f; box-shadow:0 0 12px #7fff5933; font-weight:800;
}
.battle-log .battle-log-box.finish.battle-lose {
  background:#3d0a0a; border-left:4px solid #ff5959; color:#ffb3b3; box-shadow:0 0 12px #ff595933; font-weight:800;
}
.battle-log-box.damage-miss.enemy-miss { color:#66ccff; }
.battle-log-box.damage-miss.you-miss   { color:#ffcc00; }

/* Loot badges */
.loot-icons { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.loot-icons .loot-chip { display:inline-flex; align-items:center; gap:4px; background:#222; border-radius:6px; padding:2px 6px; font-weight:600; }
.loot-icons .loot-chip img { width:18px; height:18px; vertical-align:middle; }
.loot-icons .loot-chip .emoji { font-size:1rem; line-height:1; }
.battle-summary-box {
  background:rgba(255,255,255,.02); border-radius:10px; box-shadow:0 2px 8px #15151511;
  display:flex; flex-direction:column; gap:8px; max-width:430px; margin:0 auto 18px; padding:18px 24px 8px;
}
.battle-summary-row {
  display:flex; align-items:center; justify-content:space-between;
  font-size:1.14em; border-bottom:1px solid #262626; margin-bottom:6px; padding-bottom:5px;
}
.battle-summary-row:last-child{ border-bottom:none; }
.battle-summary-label { display:flex; align-items:center; gap:.5em; color:#ffe8b3; font-weight:bold; }
.battle-summary-value { color:#f6f6f6; font-weight:bold; }
.bs-icon { font-size:1.17em; }
.battle-summary-value .loot-line { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.loot-badge{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:8px; background:#171717;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.25);
}
.loot-badge .icon{ font-size:18px; line-height:1; }
.loot-badge .qty{
  position:absolute; right:-6px; bottom:-6px; font-size:10px; color:#ffe8b3; background:rgba(0,0,0,.7);
  padding:1px 4px; border-radius:6px; font-weight:700;
}
.loot-plus{ margin:0 2px; color:#8e8e8e; font-weight:700; }

/* ==========================================================================
   Dashboard
   ========================================================================== */
.dashboard .header-title { margin:6px 0 14px; font-size:2rem; }

/* --- Grid variables used for sizing --- */
:root {
  --inv-slot: 31px;      /* slot size */
  --inv-gap: 8px;        /* gap between slots */
  --inv-cols: 6;         /* number of columns in the inv grid */
  --card-pad: 28px;      /* inv card horizontal padding (14px × 2) */
  --portrait-col: 235px; /* fixed portrait column width */
  --card-h: 350px;       /* unified box height */
  --portrait-h: var(--card-h);
  --row-max: 940px;      /* overall 4-column strip width */
  --actions-col: 220px;  /* right track (gives room for 180px card) */

  /* exact width of the inventory card = grid + gaps + padding */
  --inv-card-width: calc(
    (var(--inv-slot) * var(--inv-cols)) +
    (var(--inv-gap) * (var(--inv-cols) - 1)) +
    var(--card-pad)
  );

  /* visual nudges */
  --nudge-inventory: 65px;
  --nudge-actions: 130px;
  --columns-nudge: 10px;
}

/* Four snug columns: stats | portrait | inventory | adventures */
.dashboard .top-row{
  display:grid;
  grid-template-columns:
    200px
    var(--portrait-col)
    var(--inv-card-width)
    var(--actions-col);
  column-gap: 10px;
  align-items:start;
  justify-items:stretch;
  width: 100%;
  max-width: var(--row-max);
  margin: 0 auto;
  transform: translateX(calc(-1 * var(--columns-nudge))); /* global left nudge */
  will-change: transform;
}

/* Cards – shared look */
.dashboard .dash-card{
  background:#161616;
  padding:14px;
  border-radius:12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.35);
  box-sizing: border-box;
}

/* --- Stats card: restore classic formatting --- */
.dashboard .stats-card{
  height: var(--card-h);
  display:flex;
  flex-direction:column;
}
.dashboard .stats-card ul{ list-style:none; padding:0; margin:0; }
.dashboard .stats-card li{
  margin: 5px 0 2px;   /* was 8px 0 6px */
  line-height: 1.15;   /* add this to snug the text a touch */
}
.dashboard .stats-card .row{ margin-bottom:.7rem; }     /* keep existing row spacing */
.dashboard .stats-card strong{ margin-right:.5rem; }
.dashboard .stats-card .btn{ margin-top:auto; }          /* pin button to bottom */

/* Bars */
.dashboard .bar-container{ background:#2b2b2b; border-radius:6px; height:10px; width:100%; margin-top:6px; overflow:hidden; }
.dashboard .bar{ height:100%; border-radius:6px; }
.dashboard .xp-bar{ background:#ddb76e; }
.dashboard .hp-bar{ background:#3fcf8e; }

/* --- Portrait --- */
.dashboard .portrait-wrap{
  position: relative;
  width: var(--portrait-col);
  height: var(--portrait-h);
  overflow: hidden;
  border-radius: 12px;
}
.dashboard .portrait-wrap img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 10px 24px rgba(0,0,0,.5);
  display: block;
  -webkit-user-drag: none;
}
.dashboard .portrait-wrap.drop-target{ outline:2px dashed #ddb76e; outline-offset:6px; }

/* --- Inventory --- */
.dashboard .inv-title{ margin:0 0 6px; }
.dashboard .inv-tip{ font-size:.85rem; color:#bdbdbd; margin-top:.6rem; }

.dashboard .inv-card{
  height: var(--card-h);
  justify-self: start;
  width: var(--inv-card-width);
  transform: translateX(calc(-1 * var(--nudge-inventory)));
  will-change: transform;
}

.dashboard .inv-grid{
  --slot: var(--inv-slot);
  display:grid;
  grid-template-columns: repeat(var(--inv-cols), var(--slot));
  gap: var(--inv-gap);
  margin-top:.25rem;
  justify-content:start;
}
.dashboard .inv-slot{
  width:var(--slot); height:var(--slot);
  background:#1a1a1a; border-radius:8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 4px 10px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
  position:relative; user-select:none;
}
.dashboard .inv-slot.empty{ opacity:.35; }
.dashboard .inv-slot .qty{
  position:absolute; right:3px; bottom:2px; font-size:.62rem; color:#ffe8b3;
  background:rgba(0,0,0,.55); padding:1px 3px; border-radius:5px;
}
.dashboard .inv-icon-img{ width:24px; height:24px; object-fit:contain; filter:drop-shadow(0 0 2px #000); -webkit-user-drag:none; }
.dashboard .inv-icon-emoji{ font-size:18px; line-height:1; -webkit-user-drag:none; }
.dashboard .inv-slot[draggable="true"]{ cursor:grab; }
.dashboard .inv-slot.dragging{ opacity:.6; }
.dashboard .inv-slot[data-tip]:hover::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:#222; color:#fff; font-size:.75rem; padding:4px 6px; border-radius:6px; white-space:nowrap; box-shadow:0 2px 10px rgba(0,0,0,.35); z-index:5;
}
.dashboard .inv-slot[data-tip]:hover::before{
  content:""; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:#222;
}

/* --- Adventures (right column) --- */
.actions-card .actions-title{ margin:0 0 8px; color:#ffe8b3; }
.actions-card .adventure-btns{ display:flex; flex-direction:column; gap:10px; }

.actions-card .adventure-btns a{
  display:flex; align-items:center; gap:10px;
  background:#2a231b; color:#ffe8b3;
  padding:10px 12px; border-radius:10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 3px 10px rgba(0,0,0,.25);
  font-weight:800;
}
.actions-card .adventure-btns a:hover{ background:#ffc657; color:#111; text-decoration:none; }
.actions-card .adventure-btns a .icon{ font-size:1.15rem; }

/* Fixed size + nudge */
.dashboard .actions-card{
  height: var(--card-h);
  width: 180px;
  transform: translateX(calc(-1 * var(--nudge-actions)));
  will-change: transform;
}

/* --- Locked adventure buttons: visible, non-clickable overlay --- */
/* Show if your app marks them hidden */
.actions-card .adventure-btns a.locked.hidden,
.actions-card .adventure-btns a.locked.is-hidden { display:flex !important; }

.actions-card .adventure-btns a.locked{
  position:relative;
  opacity: .9;
  pointer-events: none;             /* prevents clicks */
}
.actions-card .adventure-btns a.locked::after{
  content: "🔒  Locked";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.45));
  border-radius: inherit;
  font-weight:900; color:#ffe8b3; text-shadow:0 1px 2px rgba(0,0,0,.5);
}

/* ==========================================================================
   Explore Grid (menu page)
   ========================================================================== */
.card-grid{ display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; margin-top:20px; }
@media (max-width:1000px){
  .card-grid{ flex-direction:column; gap:18px; }
  .card{ max-width:100%; min-width:0; }
}
.card{
  background:#181818; border:2px solid #232323; border-radius:18px;
  box-shadow:0 2px 10px #13131315;
  display:flex; flex-direction:column; flex:1 1 300px;
  max-width:250px; min-width:250px; padding:32px 24px 26px;
}
.card h3{ display:flex; align-items:center; gap:8px; font-size:1.25em; font-weight:700; color:#ffe8b3; margin-bottom:10px; }
.card p{ color:#e0e0e0; font-size:1.03em; margin:0 0 8px; min-height:36px; }
.card .btn{ font-size:1.12em; margin-bottom:12px; max-width:220px; }
.explore-card-btn-wrap{ display:flex; flex-direction:column; align-items:center; width:100%; }
.progress-bar{ background:#333; border-radius:5px; height:8px; margin-bottom:4px; overflow:hidden; width:100%; }
.progress-fill{ background:#ddb76e; border-radius:5px; height:100%; transition:width .3s; }
.level-progress-text{ color:#ffe8b3; font-size:.99em; margin:2px 0 0; text-align:center; }

/* ==========================================================================
   Misc
   ========================================================================== */
#cooldown-message{
  background:#111; border:2px solid #b22222; box-shadow: inset 0 0 5px rgba(255,255,255,.1);
  color:#f0c94d; font-family:'Courier New', monospace; font-size:1.05rem; font-style:italic; font-weight:bold;
  margin-top:20px; padding:10px 12px; text-align:center;
}

/* ==========================================================================
   Responsive for dashboard
   ========================================================================== */
@media (max-width:1020px){
  .dashboard .top-row{
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
    transform: none; /* cancel global nudge */
  }
  .dashboard .inv-card,
  .dashboard .actions-card{ transform: none; }
}
@media (max-width:720px){
  .dashboard .top-row{ grid-template-columns: 1fr; }
  .dashboard .inv-grid{ grid-template-columns: repeat(8, var(--inv-slot)); }
}