:root{
  --bg: #14101f;
  --panel: #1f1a33;
  --panel-border: #4a3f73;
  --ink: #ece8f7;
  --ink-dim: #a79fc9;
  --gold: #e8c468;
  --gold-dim: #8a7440;
  --hp: #d9534f;
  --exp: #4fc2b3;
  --danger-bg: #3a1c22;
  --danger-ink: #e08a94;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--bg);
  background-image: radial-gradient(circle at 20% 0%, rgba(232,196,104,0.06), transparent 40%);
  color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic",system-ui,sans-serif;
  line-height:1.7;
}

.wrap{max-width:720px;margin:0 auto;padding:32px 20px 80px;}

.game-header h1{
  font-size:22px;font-weight:800;margin:0 0 24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.dev-badge{
  font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--gold);background:rgba(232,196,104,0.12);
  border:1px solid var(--gold-dim);border-radius:999px;padding:3px 10px;
}

.panel{
  background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;
  padding:24px;box-shadow:0 6px 24px rgba(0,0,0,0.35);
}
.hidden{display:none;}

.lead{color:var(--ink-dim);font-size:14.5px;margin:0 0 18px;}
.login-form{display:flex;gap:10px;flex-wrap:wrap;}
.login-form input{
  flex:1;min-width:180px;background:var(--bg);border:1px solid var(--panel-border);border-radius:8px;
  color:var(--ink);padding:11px 14px;font-size:15px;
}
.login-form input:focus{outline:2px solid var(--gold);outline-offset:1px;}
.login-form button, .action-btn{
  background:var(--gold);color:#241a05;border:none;border-radius:8px;padding:11px 18px;
  font-size:15px;font-weight:800;cursor:pointer;
}
.login-form button:hover, .action-btn:hover{filter:brightness(1.08);}
.login-form button:active, .action-btn:active{transform:translateY(1px);}
.error-text{color:var(--danger-ink);font-size:13px;margin:12px 0 0;min-height:1em;}

.status-card{margin-bottom:22px;}
.status-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;}
.player-name{font-size:19px;font-weight:800;}
.player-level{font-size:14px;color:var(--gold);font-weight:700;}

.bar-row{display:grid;grid-template-columns:38px 1fr 84px;align-items:center;gap:10px;margin-bottom:8px;}
.bar-label{font-size:11px;color:var(--ink-dim);font-weight:700;}
.bar{height:12px;background:var(--bg);border:1px solid var(--panel-border);border-radius:999px;overflow:hidden;}
.bar-fill{height:100%;width:0%;transition:width .4s ease;}
.bar-fill.exp{background:var(--exp);}
.bar-fill.hp{background:var(--hp);}
.bar-num{font-size:12px;color:var(--ink-dim);text-align:right;font-variant-numeric:tabular-nums;}

.gold-row{font-size:15px;font-weight:700;color:var(--gold);margin-bottom:6px;}
.power-row{font-size:12px;color:var(--ink-dim);}

.actions{display:flex;gap:12px;margin-bottom:26px;flex-wrap:wrap;}
.action-btn{flex:1;min-width:180px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px;}
.action-btn span{font-size:11px;font-weight:600;opacity:.75;}
.action-btn:disabled{opacity:.5;cursor:not-allowed;}
.action-btn.gacha{background:#b98be0;color:#241a3a;}
.action-btn.pvp{background:#e0745a;color:#2a1208;}
.action-btn.coop{background:var(--exp);color:#0a2622;}

.back-btn{
  background:transparent;border:1px solid var(--panel-border);color:var(--ink-dim);
  border-radius:8px;padding:8px 14px;font-size:13px;cursor:pointer;margin-bottom:16px;
}
.back-btn:hover{color:var(--ink);border-color:var(--ink-dim);}
.back-btn.hidden{display:none;}

.mp-tiers{margin:18px 0;}
.mp-tiers.hidden{display:none;}
.tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px;}
@media (max-width:560px){.tier-grid{grid-template-columns:repeat(2,1fr);}}
.tier-btn{
  background:var(--bg);border:1px solid var(--panel-border);border-radius:10px;color:var(--ink);
  padding:12px 8px;font-size:14px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;gap:4px;align-items:center;
}
.tier-btn span{font-size:11px;color:var(--ink-dim);font-weight:600;}
.tier-btn.active{border-color:var(--gold);background:rgba(232,196,104,0.12);color:var(--gold);}
.tier-btn.active span{color:var(--gold);}

.mp-room-row{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 18px;}
.mp-room-row input{
  flex:1;min-width:180px;background:var(--bg);border:1px solid var(--panel-border);border-radius:8px;
  color:var(--ink);padding:11px 14px;font-size:15px;text-transform:uppercase;
}
.mp-room-row button{
  background:transparent;border:1px solid var(--gold-dim);color:var(--gold);border-radius:8px;
  padding:11px 16px;font-size:13px;font-weight:700;cursor:pointer;
}

#mp-boss-row{margin-bottom:18px;}
#mp-boss-row.hidden{display:none;}

.mp-members{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
.mp-member{
  display:grid;grid-template-columns:90px 1fr 70px;align-items:center;gap:10px;
  background:var(--bg);border:1px solid var(--panel-border);border-radius:8px;padding:9px 12px;
}
.mp-member.down{opacity:.45;}
.mp-member .mp-member-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mp-member .bar{height:10px;}
.mp-member .mp-member-hp{font-size:11.5px;color:var(--ink-dim);text-align:right;font-variant-numeric:tabular-nums;}

#mp-attack{width:100%;margin-bottom:18px;}
#mp-attack:disabled{opacity:.5;cursor:not-allowed;}

.columns{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;}
@media (max-width:560px){.columns{grid-template-columns:1fr;}}

.columns h2{font-size:13px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px;}

.log-list, .inventory-list{list-style:none;margin:0;padding:0;max-height:260px;overflow-y:auto;}
.log-list li{font-size:13px;padding:8px 10px;border-bottom:1px solid var(--panel-border);}
.log-list li:first-child{color:var(--ink);}
.log-list .win{color:var(--exp);}
.log-list .lose{color:var(--danger-ink);}
.log-list .gacha{color:#d6b8f5;}

.inventory-list li{
  font-size:12.5px;padding:8px 10px;border-bottom:1px solid var(--panel-border);display:flex;justify-content:space-between;gap:6px;
}
.inventory-list li .rarity{color:var(--gold);white-space:nowrap;}
.inventory-list .empty{color:var(--ink-dim);}

.coming-soon{margin-top:26px;font-size:12.5px;color:var(--ink-dim);text-align:center;}