:root{
  --bg:#100e0a;
  --panel:#211c14;
  --panel2:#2c251a;
  --line:#5c4b32;
  --line2:#382f22;
  --text:#e7dcc7;
  --muted:#9d907b;
  --gold:#d4a64b;
  --gold2:#f0c86a;
  --danger:#8e3c32;
  --green:#5d9b68;
  --shadow:rgba(0,0,0,.65);
}

*{box-sizing:border-box}

html,body{margin:0;min-height:100%;background:#0b0907}

body{
  color:var(--text);
  font-family:Georgia,"Times New Roman",serif;
  background:
    radial-gradient(circle at 50% 15%,#3a3022 0,#19150f 38%,#0b0907 78%);
  min-height:100vh;
}

body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;
  background-image:
    
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:4px 4px;
  opacity:.25;
}

.crt{position:fixed;inset:0;pointer-events:none;z-index:50;box-shadow:inset 0 0 100px #000b}

.game-shell{width:min(1540px,96vw);margin:auto;padding:20px 0 30px}

.topbar,.panel,.player-strip{
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 30%),
    linear-gradient(#292219,#1b1711);
  border:2px solid var(--line);
  box-shadow:0 12px 28px var(--shadow),inset 0 0 0 1px #0b0907;
}

.topbar{
  min-height:72px;padding:12px 16px;
  display:flex;justify-content:space-between;align-items:center;
}

.brand{font-size:25px;font-weight:bold;letter-spacing:7px;color:var(--gold2);text-shadow:2px 2px #000}
.subtitle{font-size:10px;letter-spacing:3px;color:var(--muted);margin-top:2px}

.account-area{display:flex;align-items:center;gap:8px}

.status{font-size:10px;letter-spacing:1px;padding:7px 9px;border:1px solid var(--line2)}
.status.online{color:#83bd89;border-color:#426747}
.status.offline{color:#a48d72}

.btn{
  appearance:none;
  background:linear-gradient(#383025,#272119);
  color:var(--text);
  border:1px solid #766246;
  border-bottom-color:#2b2115;
  padding:9px 14px;
  font:700 12px Georgia,"Times New Roman",serif;
  letter-spacing:1px;
  cursor:pointer;
  box-shadow:inset 0 1px #ffffff12,0 2px 0 #000;
}
.btn:hover{filter:brightness(1.16)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:wait}
.btn.primary{background:linear-gradient(#80632d,#59431d);border-color:#bd9343;color:#ffe5a4}
.btn.danger{background:linear-gradient(#6e302a,#49211d);border-color:#9e554c}
.btn.small{padding:7px 11px}
.wide{width:100%}

.layout{
  display:grid;
  grid-template-columns:300px minmax(420px,1fr) 300px;
  gap:15px;
  margin-top:15px;
  align-items:start;
}

.panel{overflow:hidden}
.panel-title{
  min-height:40px;padding:11px 12px;
  border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
  color:var(--gold);font-weight:bold;font-size:12px;letter-spacing:1.5px;
  background:linear-gradient(#30281d,#211b13);
}

.inventory-grid{
  padding:10px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
}

.inv-slot{
  aspect-ratio:1;
  min-width:0;
  background:#13100c;
  border:1px solid #514431;
  display:grid;place-items:center;
  position:relative;
  cursor:pointer;
}
.inv-slot:hover{border-color:var(--gold);box-shadow:inset 0 0 12px #d5a74a18}
.slot-number{font-size:9px;color:#4d4436}

.item-icon{
  width:100%;height:100%;
  display:grid;place-items:center;
  position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 40%,#ffffff0c,transparent 60%),#17130e;
}
.item-icon:after{
  content:"";
  position:absolute;inset:0;
  box-shadow:inset 0 0 0 2px var(--rarity),inset 0 0 12px color-mix(in srgb,var(--rarity),transparent 65%);
  pointer-events:none;
}
.item-icon img{width:78%;height:78%;object-fit:contain;position:relative;z-index:1}
.item-fallback{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:26px;font-weight:bold;color:var(--rarity);opacity:.42;
}
.item-power{
  position:absolute;right:2px;bottom:2px;z-index:3;
  font:700 9px Arial,sans-serif;
  color:#f6e7bd;background:#000c;padding:2px 4px;
}
.item-name{
  position:absolute;left:4px;right:4px;bottom:3px;z-index:3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font:9px Arial,sans-serif;color:#fff;background:#0009;padding:2px;
}

.player-strip{
  padding:11px 14px;
  display:flex;justify-content:space-between;align-items:center;
}
.player-name{font-size:15px;font-weight:bold;letter-spacing:2px}
.player-strip small{color:var(--muted);font-size:10px;letter-spacing:1px}

/* PNG Chest Container & Sprite Formatting */
.chest-zone{
    min-height:475px;
    margin-top:15px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    position:relative;
    overflow:hidden;

    background-color:#15110d;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    transition:background-image .35s ease;
}
.chest-zone::before{
    content:"";
    position:absolute;
    inset:0;

    background:rgba(0,0,0,.42);

    pointer-events:none;
    z-index:0;
}
.chest-zone > *{
    position:relative;
    z-index:1;
}
.scene-label{font-size:10px;letter-spacing:3px;color:#8c795b;margin-bottom:10px}

.chest {
  width: 200px;
  height: 200px;
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 18px 14px #000);
}

.chest-glow {
  position: absolute;
  width: 180px;
  height: 140px;
  background: #d6a43e22;
  border-radius: 50%;
  filter: blur(20px);
}

.chest-sprite {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 2;
  transition: transform 0.1s ease;
}

.chest:hover .chest-sprite { transform: scale(1.03); }
.chest:active .chest-sprite { transform: scale(0.97); }

.loot-result{margin-top:27px;font-size:20px;text-align:center;text-shadow:2px 2px #000;letter-spacing:1px}
.loot-stats{min-height:20px;margin-top:7px;color:var(--muted);font:11px Arial,sans-serif;text-align:center}
.hint{margin-top:18px;color:#625744;font-size:9px;letter-spacing:2px}

.equipment{margin-top:15px;margin-bottom:0}
.equipment-grid{
  padding:10px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:7px;
}
.equip-slot{
  min-height:110px;
  background:#14110d;border:1px solid #4c4030;
  padding:5px;display:flex;flex-direction:column;gap:5px;
  align-items:center;color:var(--muted);cursor:pointer;
}
.equip-slot:hover{border-color:var(--gold)}
.equip-slot .item-icon{width:70px;height:70px}
.equip-name{font-size:9px;letter-spacing:1px}
.empty-equip{flex:1;display:grid;place-items:center;color:#504636;font-size:9px}

.leader-head,.leader-row{
  display:grid;grid-template-columns:1fr auto;
  padding:10px 12px;border-bottom:1px solid #393025;
}
.leader-head{color:#847762;font-size:9px;letter-spacing:1px}
.leader-row{font-size:12px}
.leader-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leader-row i{display:inline-block;width:27px;color:#756650;font-style:normal}
.leader-row b{color:var(--gold2)}
.leader-row:first-child i,.leader-row:first-child b{color:#e6bf65}
.empty-board,.leader-foot{text-align:center;padding:18px;color:#625746;font-size:9px;letter-spacing:1px}
.leader-foot{border-top:1px solid var(--line2);padding:9px}

.modal{
  position:fixed;inset:0;z-index:100;
  background:#000c;display:grid;place-items:center;padding:20px;
  backdrop-filter:blur(3px);
}
.modal.hidden{display:none}
.modal-card{
  position:relative;width:min(420px,96vw);
  background:linear-gradient(#2a231a,#19140f);
  border:2px solid var(--line);
  padding:26px;
  box-shadow:0 25px 90px #000;
}
.close{
  position:absolute;right:9px;top:5px;
  border:0;background:none;color:#b6a890;
  font:32px Georgia;cursor:pointer;
}
.modal-title{text-align:center;color:var(--gold);font-size:10px;letter-spacing:5px}
.modal-card h2{text-align:center;margin:8px 0;color:#e7d6b5;font-size:21px;letter-spacing:2px}
.modal-subtitle{text-align:center;color:var(--muted);font-size:11px;margin-bottom:20px}
.modal-card label{display:block;color:#887961;font-size:9px;letter-spacing:1px;margin-bottom:10px}
.modal-card input{
  display:block;width:100%;margin-top:5px;
  background:#0f0c09;color:var(--text);
  border:1px solid #5c4d39;padding:12px;
  outline:none;font:14px Georgia;
}
.modal-card input:focus{border-color:var(--gold)}
.message{min-height:18px;color:#d9ad58;font-size:11px;text-align:center}
.item-card{text-align:center}
.big-item{width:135px;height:135px;margin:0 auto 15px;border:3px solid var(--rarity)}
.big-item .item-icon{border:0}
.rarity{font-size:12px;letter-spacing:2px;font-weight:bold}
.power-display{margin:12px 0;color:var(--gold2);font-weight:bold;letter-spacing:1px}
.stat-list{display:grid;gap:5px;margin:16px 0}
.stat-list div{
  display:flex;justify-content:space-between;
  padding:8px 10px;background:#100d09;border:1px solid #382e22;
  font-size:11px;
}
.stat-list span{color:#d8b15d}
.modal-actions{display:flex;justify-content:center;gap:8px}

.toast{
  position:fixed;left:50%;top:18px;z-index:200;
  transform:translate(-50%,-120px);
  background:#211b13;border:1px solid var(--line);
  padding:11px 18px;color:var(--text);font-size:11px;
  box-shadow:0 10px 30px #000;
  transition:transform .25s ease;
}
.toast.show{transform:translate(-50%,0)}
.toast.success{border-color:#537d58}
.toast.error{border-color:#8f4941;color:#e9b1aa}

@media(max-width:1100px){
  .layout{grid-template-columns:1fr}
  .inventory-panel{order:2}.center-stage{order:1}.leaderboard-panel{order:3}
}
@media(max-width:600px){
  .game-shell{width:98vw;padding-top:8px}
  .topbar{align-items:flex-start;gap:12px;flex-direction:column}
  .account-area{width:100%;flex-wrap:wrap}
  .layout{gap:10px}
  .equipment-grid{grid-template-columns:repeat(2,1fr)}
  .inventory-grid{grid-template-columns:repeat(5,1fr)}
  .brand{font-size:20px}
  .chest-zone{min-height:420px}
}

.auto-sell-box{
  width:min(560px,92%);
  margin-top:28px;
  padding:12px;
  border:1px solid var(--line);
  background:#100d09cc;
  box-shadow:inset 0 0 15px #0008;
}
.auto-sell-title{
  color:var(--gold);
  font-size:10px;
  font-weight:bold;
  letter-spacing:2px;
}
.auto-sell-help{
  color:#766957;
  font:9px Arial,sans-serif;
  margin:5px 0 10px;
}
.rarity-filters{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
}
.filter-option{
  display:flex;
  align-items:center;
  gap:5px;
  padding:6px 8px;
  border:1px solid #4b3e2c;
  background:#1a150f;
  color:#b9aa91;
  font:9px Arial,sans-serif;
  cursor:pointer;
}
.filter-option:hover{border-color:var(--gold)}
.filter-option input{
  accent-color:var(--gold);
  margin:0;
}
.filter-option.rarity-common{color:#aaa59b}
.filter-option.rarity-uncommon{color:#76b27f}
.filter-option.rarity-rare{color:#7898d6}
.filter-option.rarity-epic{color:#b57ad7}
.filter-option.rarity-legendary{color:#e0b65c}
.filter-option.rarity-ultimate{color:#8e3c32}

#gold,#playerLevel{
  color:var(--gold2);
  text-shadow:0 0 8px #d4a64b55;
}
#playerExp{
  color:var(--text);
}