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

body {
  width: 100%; height: 100vh; overflow: hidden;
  background: #080705; font-family: 'Fira Code', monospace;
  display: flex; flex-direction: column; position: relative;
}

/* ── Backgrounds ───────────────────────────────── */
.bg-grad {
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 70% at 35% 25%, rgba(40,70,20,.25) 0%, transparent 60%),
    radial-gradient(ellipse 70% 90% at 65% 65%, rgba(60,30,10,.3)  0%, transparent 70%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #0d0b07 0%, transparent 100%);
}
.bg-grid {
  position:absolute;inset:0;pointer-events:none;opacity:.04;
  background-image:
    repeating-linear-gradient(0deg, transparent,transparent 38px,rgba(200,160,80,.6) 38px,rgba(200,160,80,.6) 39px),
    repeating-linear-gradient(90deg,transparent,transparent 38px,rgba(200,160,80,.6) 38px,rgba(200,160,80,.6) 39px);
}
.bg-vig {
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 85% 85% at 50% 50%,transparent 50%,rgba(0,0,0,.75) 100%);
}

/* ── Torches & Header ──────────────────────────── */
.torch { position:absolute;display:flex;flex-direction:column;align-items:center; }
.torch.tl { top:18px;left:28px; } .torch.tr { top:18px;right:28px; }
.t-flame {
  width:6px;height:14px;
  background:radial-gradient(ellipse at 50% 80%,#ffaa00,#ff6600 60%,transparent 100%);
  border-radius:50% 50% 20% 20%;animation:torchAnim .6s ease-in-out infinite alternate;
}
.t-stick { width:4px;height:20px;background:#5a3a1a; }
.t-base  { width:14px;height:4px;background:#3a2a10;border-radius:2px; }
.tglow-l { position:absolute;top:0;left:0;width:180px;height:180px;pointer-events:none;
           background:radial-gradient(ellipse at 28px 24px,rgba(255,155,0,.1),transparent 65%); }
.tglow-r { position:absolute;top:0;right:0;width:180px;height:180px;pointer-events:none;
           background:radial-gradient(ellipse at 152px 24px,rgba(255,155,0,.1),transparent 65%); }

.scene-title {
  position:absolute;top:18px;left:50%;transform:translateX(-50%);
  color:#4a3a18;font-size:16px;letter-spacing:2px;white-space:nowrap;z-index:2;
}

.username-bar {
  position: absolute; top: 18px; right: 80px; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  color: #7a6540; font-size: 14px; letter-spacing: 1px;
}
.username-bar input {
  background: rgba(6,5,3,.85); border: 1px solid #3a2e10;
  color: #d4be84; font-family: 'Fira Code', monospace;
  font-size: 14px; padding: 6px 8px; outline: none; transition: border-color 0.2s;
  width: 140px;
}
.username-bar input:focus { border-color: #c8a84b; }


/* Language toggle button, matched to buy button styling */
.lang-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 10;
  min-height: 42px;
  padding: 10px 16px;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  white-space: nowrap;
  line-height: 1;
  font-size: 14px;
}

.lang-btn:hover {
  transform: translateY(-1px);
}

/* ── Scene ─────────────────────────────────────── */
.scene {
  flex:1;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:55px 40px 10px;position:relative;z-index:1;
  width: 100%; max-width: 1200px; margin: 0 auto;
}

.char-col {
  display: flex; flex-direction: column; align-items: center; gap: 16px; position: relative;
}
.char-col::after {
  content: ''; position: absolute; bottom: 25px; width: 70px; height: 12px;
  background: rgba(0, 0, 0, 0.9); border-radius: 50%; filter: blur(5px);
  pointer-events: none; z-index: 1;
}
#skin_container { width: 200px; height: 300px; z-index: 2; pointer-events: none; cursor: default; }

.char-name {
  font-size:18px;letter-spacing:1px;text-align:center;
  background:linear-gradient(90deg,#7a6030,#c8a84b,#7a6030) 200% center/200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  animation:shimmer 3s linear infinite; z-index: 2;
}

/* ── Options panel ─────────────────────────────── */
.ores-col {
  display: flex; flex-direction: column; width: 300px;
}

.opts-col {
  display:flex;flex-direction:column;gap:8px;min-width:320px;max-width:380px; z-index: 2;
}
.opts-hdr {
  color:#4a3a18;font-size:16px;letter-spacing:1px;
  padding-bottom:8px;border-bottom:1px solid #2a2010;margin-bottom:4px;
}
.opt-btn {
  border:1px solid #231e10;padding:15px 20px;cursor:pointer;
  display:flex;align-items:center;gap:10px; min-height: 55px;
  background:rgba(6,5,3,.85);transition:all .15s ease;
  position:relative;overflow:hidden; animation:fadeUp .4s ease both;
}
.opt-btn.minor { padding:7px 12px; }
.opt-btn.selected { border-color:#5a4a20;background:rgba(200,168,75,.03); }
.opt-btn:hover    { border-color:#c8a84b;background:rgba(200,168,75,.07); }
.opt-bar {
  position:absolute;left:0;top:0;bottom:0;width:3px;
  background:#c8a84b;opacity:0;transition:opacity .15s;
}
.opt-btn:hover .opt-bar { opacity:1; }
.opt-arrow { color:#3a2a10;font-size:20px;line-height:1;flex-shrink:0;transition:color .15s; }
.opt-btn.minor .opt-arrow { font-size:16px; }
.opt-btn:hover .opt-arrow { color:#c8a84b; }
.opt-label { color:#7a6540;font-size:15px;line-height:1.8;letter-spacing:0;transition:all .15s; }
.opt-btn.minor .opt-label { color:#4a3a1a;font-size:14px; }
.opt-btn.selected .opt-label { color:#9a8450; }
.opt-btn:hover .opt-label { color:#e8d090;text-shadow:0 0 12px rgba(200,168,75,.55); }

/* Emphasize the new Buy button under the character */
.main-buy-btn {
  margin-top: 15px;
  justify-content: center;
  background-color: rgba(40, 200, 80, 0.15);
  border: 1px solid rgba(40, 200, 80, 0.4);
}
.main-buy-btn:hover { background-color: rgba(40, 200, 80, 0.35); }

/* ── Multi-select Grid for Trims ───────────────── */
.trim-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  max-height: 180px; overflow-y: auto; padding-right: 6px; margin-bottom: 8px;
}
.trim-grid::-webkit-scrollbar { width: 4px; }
.trim-grid::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
.trim-grid::-webkit-scrollbar-thumb { background: #5a4a20; }
.trim-name-btn {
  background: rgba(6,5,3,.85); border: 1px solid #231e10;
  color: #7a6540; padding: 12px 15px; font-size: 14px; text-align: center;
  cursor: pointer; transition: all 0.15s; min-height: 45px;
  display: flex; align-items: center; justify-content: center;
}
.trim-name-btn:hover { border-color: #c8a84b; color: #e8d090; background: rgba(200,168,75,.07); }
.trim-name-btn.selected {
  border-color: #c8a84b; background: rgba(200,168,75,.15); color: #c8a84b;
  text-shadow: 0 0 8px rgba(200,168,75,.5);
}

/* ── Dialog box ────────────────────────────────── */
.dialog {
  margin:0 20px 18px;padding:18px 24px 28px;
  border:3px solid #3a2e10;border-top:3px solid #6a5820;
  background:linear-gradient(180deg,#0d0b07,#080705);
  position:relative;z-index:2;min-height:160px;
  animation:dialogPulse 3s ease-in-out infinite;
}
.gem { position:absolute;width:10px;height:10px;background:#c8a84b;box-shadow:0 0 6px rgba(200,168,75,.6); }
.gem.tl{top:-4px;left:-4px;} .gem.tr{top:-4px;right:-4px;}
.gem.bl{bottom:-4px;left:-4px;} .gem.br{bottom:-4px;right:-4px;}
.dialog-shine {
  position:absolute;top:2px;left:10px;right:10px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,168,75,.3),transparent);
}
.dialog-speaker {
  color:#c8a84b;font-size:16px;letter-spacing:1px;
  display:flex;align-items:center;gap:8px;margin-bottom:10px;
}
.sp-line { flex:1;height:1px;background:linear-gradient(90deg,rgba(200,168,75,.4),transparent); }
.dialog-text {
  color:#d4be84;font-size:16px;line-height:1.6;letter-spacing:0;
  min-height:90px; max-height:140px; overflow-y:auto; padding-right:8px;
}
.dialog-text::-webkit-scrollbar { width: 4px; }
.dialog-text::-webkit-scrollbar-track { background: transparent; }
.dialog-text::-webkit-scrollbar-thumb { background: #5a4a20; }
.cursor {
  display:inline-block;width:2px;height:.9em;
  background:#c8a84b;margin-left:2px;vertical-align:middle;
  animation:blink .6s step-end infinite;
}
.dialog-cont {
  position:absolute;right:20px;bottom:14px;
  color:#5a4820;font-size:14px;letter-spacing:0;
  animation:blink 1.1s step-end infinite;display:none;
}
.dialog-cont.show { display:block; }

/* ── Live Cost Tracker Style ──────────────────── */
.cost-tracker-box {
  background: rgba(6, 5, 3, 0.95);
  border: 1px dashed #4a3a18;
  padding: 12px;
  margin-bottom: 12px;
  text-align: center;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.85);
  animation: fadeUp 0.4s ease both;
}
.tracker-title {
  color: #7a6540;
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.tracker-amount {
  color: #ffaa00;
  font-size: 20px;
  text-shadow: 0 0 8px rgba(255, 170, 0, 0.5);
  font-family: 'Fira Code', monospace;
}

/* Utility class */
.hidden { display: none !important; }

/* ── Animations ────────────────────────────────── */
@keyframes blink       { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes torchAnim   { 0%{opacity:.7;transform:scaleX(.9) scaleY(1)} 100%{opacity:1;transform:scaleX(1.1) scaleY(1.15)} }
@keyframes shimmer     { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes fadeUp      { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes dialogPulse { 0%,100%{box-shadow:0 0 10px rgba(200,168,75,.12)} 50%{box-shadow:0 0 28px rgba(200,168,75,.32)} }


/* =========================================
   RESPONSIVE DESIGN (SMALL MONITORS & MOBILE)
========================================= */

/* Tablets & Smaller Desktop Monitors */
@media (max-width: 1150px) {
  .scene {
    gap: 15px;
    padding: 60px 15px 10px;
  }

  .ores-col {
    width: 250px;
  }

  .opts-col {
    min-width: unset;
    max-width: 300px;
  }
}

/* Mobile Devices & Small Windows (under 850px) */
@media (max-width: 850px) {
  body {
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
  }

  .scene-title {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    text-align: center;
    margin-top: 25px;
    white-space: normal;
  }

  .username-bar {
    position: relative;
    top: auto;
    right: auto;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 10px;
  }

  .scene {
    flex-direction: column;
    padding: 15px;
    gap: 40px;
  }

  .ores-col, .opts-col {
    width: 100%;
    max-width: 100%;
  }

  .dialog {
    margin: 20px 10px;
  }

  .torch, .tglow-l, .tglow-r {
    display: none;
  }
}