/* Simulator de cufere */
.sim-page h1 { margin: 6px 0 8px; font: 800 34px/1.1 Cinzel, serif; color: #f2e6c9; }
.sim-page .lead { max-width: 820px; }
.sim-lbl { display: block; margin-bottom: 7px; font: 700 11.5px/1 Inter, sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: #8d95a8; }

.sim-top { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; margin: 20px 0 16px; align-items: start; }
.sim-pick, .sim-ctrl { padding: 15px 16px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.09); }

.sim-search { position: relative; }
.sim-search input { width: 100%; padding: 12px 14px; border-radius: 12px; font: inherit; font-size: 15px;
  color: #e8ecf6; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.14); }
.sim-search input:focus { outline: none; border-color: rgba(245,197,66,.55); box-shadow: 0 0 0 4px rgba(245,197,66,.1); }
.sim-drop { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); max-height: 320px; overflow-y: auto;
  border-radius: 12px; background: #121520; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 20px 44px rgba(0,0,0,.6); }
.sim-drop[hidden] { display: none; }
.sim-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.05); text-align: left; }
.sim-opt:hover, .sim-opt.on { background: rgba(245,197,66,.12); }
.sim-opt img { width: 28px; height: 28px; flex: none; object-fit: contain; image-rendering: pixelated; }
.sim-opt b { flex: 1 1 auto; font: 600 13px/1.3 Inter, sans-serif; color: #e8ecf6; }
.sim-opt i { font-style: normal; font: 500 11.5px/1 Inter, sans-serif; color: #8d95a8; white-space: nowrap; }

.sim-chest { display: flex; align-items: center; gap: 13px; margin-top: 13px; padding: 11px 12px; border-radius: 13px;
  background: rgba(245,197,66,.07); border: 1px solid rgba(245,197,66,.26); }
.sim-ic { flex: none; width: 68px; height: 68px; display: grid; place-items: center; border-radius: 15px;
  background: rgba(0,0,0,.3); border: 1px solid rgba(245,197,66,.3); position: relative; overflow: visible; }
.sim-ic img { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; }
.sim-meta { min-width: 0; flex: 1 1 auto; }
.sim-meta b { display: block; font: 800 16px/1.25 Inter, sans-serif; color: #f2e6c9; }
.sim-meta span { display: block; margin-top: 3px; font: 500 12px/1.3 Inter, sans-serif; color: #8d95a8; }
.sim-link { flex: none; font: 600 12px/1 Inter, sans-serif; color: #f5c542; text-decoration: none; white-space: nowrap; }
.sim-link:hover { text-decoration: underline; }

.sim-row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.sim-row2 { display: flex; gap: 8px; margin-top: 9px; }
.sim-ctrl input[type=number] { width: 104px; padding: 12px 12px; border-radius: 12px; font: 700 16px/1 Inter, sans-serif;
  color: #f2e6c9; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.14); }
.sim-ctrl input[type=number]:focus { outline: none; border-color: rgba(245,197,66,.55); }
.sim-presets { display: flex; gap: 6px; }
.sim-pr { cursor: pointer; min-width: 44px; padding: 10px 11px; border-radius: 11px; font: 700 13px/1 Inter, sans-serif;
  color: #c3cad9; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.sim-pr:hover { color: #f5c542; border-color: rgba(245,197,66,.45); }

.sim-go { position: relative; overflow: hidden; width: 100%; margin-top: 11px; cursor: pointer;
  padding: 15px 20px; border-radius: 14px; border: 1px solid rgba(245,197,66,.6);
  font: 800 16px/1 Inter, sans-serif; color: #15110a;
  background: linear-gradient(180deg, #f6d987, #d2a842); box-shadow: 0 10px 26px rgba(245,197,66,.22); }
.sim-go:hover { filter: brightness(1.07); }
.sim-go:active { transform: translateY(1px); }
.sim-go[disabled] { opacity: .55; cursor: default; }
.sim-go2 { width: auto; margin-top: 0; padding: 12px 18px; font-size: 14px; }
.sim-sm { padding: 9px 13px; font-size: 12.5px; }
.sim-sm[disabled] { opacity: .45; cursor: default; }

.sim-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.sim-stats .bon.rar { border-color: rgba(192,139,255,.4); background: linear-gradient(180deg, rgba(192,139,255,.1), rgba(255,255,255,.02)); }
.sim-stats .bon.rar .bon-v { color: #c08bff; font-size: 13px; }

.sim-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sim-acts { display: flex; gap: 7px; }

/* inventarul, landscape, ca in joc */
.inv { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 4px;
  padding: 10px; border-radius: 14px; min-height: 252px;
  background: linear-gradient(180deg, #0c0d13, #0a0b10);
  border: 1px solid rgba(245,197,66,.18); box-shadow: inset 0 0 50px rgba(0,0,0,.7); }
.slot { position: relative; aspect-ratio: 1; border-radius: 7px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border: 1px solid rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.slot.full { cursor: help; border-color: rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); }
.slot.full:hover { border-color: rgba(245,197,66,.6); background: rgba(245,197,66,.09); }
.slot img { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; image-rendering: pixelated; }
.slot .qt { position: absolute; right: 3px; bottom: 2px; padding: 0 3px; border-radius: 4px;
  font: 800 10.5px/1.5 Inter, sans-serif; color: #fff; background: rgba(0,0,0,.72); text-shadow: 0 1px 2px #000; }
.slot.r-bun { border-color: rgba(123,211,137,.45); }
.slot.r-med { border-color: rgba(240,180,41,.45); }
.slot.r-slab { border-color: rgba(255,128,149,.45); }
.slot.r-rar { border-color: rgba(192,139,255,.6); box-shadow: inset 0 0 14px rgba(192,139,255,.22); }

/* efectul de deschidere */
@keyframes pop { 0% { transform: scale(.4); opacity: 0 } 60% { transform: scale(1.14); opacity: 1 } 100% { transform: scale(1) } }
.slot.nou { animation: pop .34s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes zgudui { 0%,100% { transform: translate(0,0) rotate(0) } 15% { transform: translate(-3px,1px) rotate(-4deg) }
  35% { transform: translate(3px,-1px) rotate(4deg) } 55% { transform: translate(-2px,2px) rotate(-3deg) }
  75% { transform: translate(2px,-2px) rotate(2deg) } }
.sim-ic.deschide img { animation: zgudui .5s ease-in-out; }
.sim-ic .fulger { position: absolute; inset: -30px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,235,170,.85), rgba(245,197,66,.3) 38%, transparent 70%); }
@keyframes bum { 0% { transform: scale(.2); opacity: 0 } 25% { opacity: 1 } 100% { transform: scale(1.5); opacity: 0 } }
.sim-ic .fulger { animation: bum .6s ease-out forwards; }

.sim-gol { margin-top: 12px; font: 500 13px/1.5 Inter, sans-serif; color: #8d95a8; }
.sim-gol[hidden] { display: none; }

/* tooltip peste sloturi */
.inv-tip { position: absolute; z-index: 90; max-width: 260px; padding: 10px 13px; border-radius: 10px;
  background: #0a0a0a; border: 1px solid #4a4335; box-shadow: 0 16px 40px rgba(0,0,0,.7);
  font: 500 12.5px/1.45 Inter, sans-serif; pointer-events: none; }
.inv-tip[hidden] { display: none; }
.inv-tip b { display: block; margin-bottom: 4px; font-weight: 800; font-size: 13px; color: #ffc800; }
.inv-tip .v { color: #8ab98e; }
.inv-tip .g { color: #a7b0c2; }

/* taburi */
.sim-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.sim-tab { cursor: pointer; padding: 9px 14px; border-radius: 999px; font: 700 12.5px/1 Inter, sans-serif;
  color: #c3cad9; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.sim-tab:hover { color: #f2e6c9; border-color: rgba(245,197,66,.4); }
.sim-tab.on { background: rgba(245,197,66,.14); border-color: rgba(245,197,66,.6); color: #f5c542; }
.sim-pane[hidden] { display: none; }

.sim-tbl td.e { color: #a7b0c2; font-variant-numeric: tabular-nums; }
.sim-tbl td.got { font-weight: 800; color: #f2e6c9; font-variant-numeric: tabular-nums; }
.sim-tbl td.luck { font-weight: 800; font-variant-numeric: tabular-nums; }
.sim-tbl td.luck.sus { color: #7bd389; }
.sim-tbl td.luck.jos { color: #ff8095; }

.sim-page select { padding: 12px 13px; border-radius: 12px; font: inherit; font-size: 14px; max-width: 100%;
  color: #e8ecf6; background: #121520; border: 1px solid rgba(255,255,255,.14); }
.sim-pana-out { margin-top: 16px; padding: 15px 16px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(245,197,66,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(245,197,66,.28); }
.sim-pana-out[hidden] { display: none; }
.sim-pana-big { font: 800 30px/1.1 Cinzel, serif; color: #f5c542; }
.sim-pana-out p { margin: 8px 0 0; font: 500 13.5px/1.55 Inter, sans-serif; color: #c3cad9; }
.sim-bars { display: grid; gap: 5px; margin-top: 13px; }
.sim-bar { display: grid; grid-template-columns: 96px 1fr 54px; align-items: center; gap: 9px;
  font: 600 12px/1 Inter, sans-serif; color: #a7b0c2; }
.sim-bar i { font-style: normal; height: 9px; border-radius: 5px; background: linear-gradient(90deg, #d2a842, #f6d987); }

@media (max-width: 860px) {
  .sim-top { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sim-page h1 { font-size: 26px; }
  .inv { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); min-height: 200px; }
  .sim-bar { grid-template-columns: 74px 1fr 46px; }
}

/* bara de bani de sub inventar, ca in joc */
.inv-bani { display: flex; align-items: center; justify-content: flex-end; gap: 9px;
  margin-top: -1px; padding: 9px 14px; border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #0a0b10, #08090d);
  border: 1px solid rgba(245,197,66,.18); border-top: 0; }
.inv-bani[hidden] { display: none; }
.inv-bani img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.inv-bani span { font: 800 17px/1 Inter, sans-serif; color: #f5c542; font-variant-numeric: tabular-nums; }
.inv:has(+ .inv-bani:not([hidden])) { border-radius: 14px 14px 0 0; }
.sim-sub { margin-top: 15px; font: 700 11.5px/1 Inter, sans-serif; letter-spacing: .12em;
  text-transform: uppercase; color: #8d95a8; }