:root{
  --accent:#ff4655;
  --accent-soft:#ff7d89;
  --accent-glow:rgba(255,70,85,.34);
  --bg:#090d14;
  --panel:rgba(10,14,22,.68);
  --border:rgba(255,255,255,.10);
  --text:#f6f8fc;
  --muted:#a7b6c9;
  --ok:#8aeab0;
  --err:#ff9a9a;
  --shadow:0 28px 80px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,Arial,Helvetica,sans-serif;color:var(--text);background:var(--bg)}
body{min-height:100vh;position:relative;overflow-x:hidden}
.bg-orb{position:fixed;border-radius:999px;filter:blur(70px);pointer-events:none;z-index:0}
.orb-a{width:320px;height:320px;right:-80px;top:-40px;background:var(--accent-glow)}
.orb-b{width:260px;height:260px;left:-60px;bottom:-70px;background:rgba(255,255,255,.07)}

.eyebrow{display:inline-block;margin:0 0 10px;color:var(--accent-soft);font-size:12px;font-weight:900;letter-spacing:.22em;text-transform:uppercase}
.lead{color:var(--muted);font-size:1.02rem;line-height:1.65;margin:0}

.home-shell,.player-shell{position:relative;z-index:1;width:min(1200px,calc(100% - 32px));margin:0 auto;padding:32px 0}
.home-card{min-height:calc(100vh - 64px);display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center}
.home-copy h1{margin:0 0 18px;font-size:clamp(2.2rem,5vw,4.4rem);line-height:1.02;letter-spacing:-.03em}
.pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.pill{padding:10px 14px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.045);color:var(--text);font-size:.92rem;font-weight:700}
.search-card{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),var(--panel);border:1px solid var(--border);border-radius:28px;padding:28px;box-shadow:var(--shadow);backdrop-filter:blur(14px)}
.search-card h2{margin:0 0 20px;font-size:1.7rem}
.search-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.09em;font-weight:700}
.field input,.field select,.quick-search-form input,.quick-search-form select{height:52px;border-radius:16px;border:1px solid var(--border);background:rgba(10,14,22,.72);color:var(--text);padding:0 14px;outline:none}
.field input::placeholder,.quick-search-form input::placeholder{color:#8898ab}
.btn-primary,.quick-search-form button{height:54px;border:0;border-radius:16px;background:linear-gradient(180deg,var(--accent),#dc3a49);color:#fff;font-weight:900;cursor:pointer;box-shadow:0 14px 30px rgba(255,70,85,.24)}
.btn-primary{grid-column:1 / -1}

.top-nav{margin-bottom:14px}
.back-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--muted);font-weight:700}

.overlay-card{position:relative;width:min(1100px,100%);min-height:420px;border-radius:30px;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),linear-gradient(135deg, rgba(255,70,85,.10), rgba(255,255,255,.02) 35%, rgba(255,70,85,.04) 100%),var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);backdrop-filter:blur(16px);overflow:hidden}
.overlay-topline{position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg, transparent 0%, var(--accent) 18%, var(--accent-soft) 52%, transparent 100%)}
.overlay-glow{position:absolute;border-radius:999px;filter:blur(44px);pointer-events:none}
.glow-1{width:220px;height:220px;right:-50px;top:-100px;background:var(--accent-glow)}
.glow-2{width:180px;height:180px;left:-50px;bottom:-80px;background:rgba(255,255,255,.08)}
.overlay-inner{position:relative;z-index:1;padding:22px}
.overlay-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.overlay-header h1{margin:0;font-size:2rem;line-height:1.05}
.subline{margin:8px 0 0;color:var(--muted)}
.status-wrap{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10)}
.live-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(255,70,85,.6);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,70,85,.6)}70%{box-shadow:0 0 0 12px rgba(255,70,85,0)}100%{box-shadow:0 0 0 0 rgba(255,70,85,0)}}
.mini-status{font-size:.9rem;color:var(--muted);font-weight:700}
.mini-status.ok{color:var(--ok)}
.mini-status.err{color:var(--err)}

.quick-search{margin-top:18px;padding:16px;border-radius:22px;background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.08)}
.quick-search-form{display:grid;grid-template-columns:1fr 1fr .7fr .8fr auto;gap:12px;align-items:end}
.quick-search-form button{height:52px;padding:0 18px}

.playercard-grid{margin-top:18px;display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
.rank-panel-left{width:100%;display:flex;align-items:center;gap:18px;padding:24px;min-height:220px;border-radius:24px;background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08)}
.rank-badge-shell{padding:2px;border-radius:26px;background:linear-gradient(135deg, rgba(255,70,85,.8), rgba(255,255,255,.2));box-shadow:0 0 30px rgba(255,70,85,.18)}
.rank-badge{width:140px;height:140px;border-radius:24px;background:rgba(9,13,21,.92);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.rank-icon{width:108px;height:108px;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(0,0,0,.35))}
.small-label{display:block;color:var(--muted);font-size:.8rem;margin-bottom:10px;text-transform:uppercase;letter-spacing:.11em}
.rank-name{font-size:clamp(2rem,4vw,3.1rem);line-height:1;font-weight:900;letter-spacing:-.03em}
.rank-rr{margin-top:14px;display:inline-flex;padding:10px 14px;border-radius:999px;background:rgba(255,70,85,.12);border:1px solid rgba(255,70,85,.24);color:var(--accent-soft);font-weight:900}
.stats-column{display:grid;gap:12px}
.chip{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px;min-height:72px;border-radius:20px;background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.08)}
.chip-accent{border-color:rgba(255,70,85,.22);box-shadow:inset 0 0 0 1px rgba(255,70,85,.08)}
.chip span{color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.09em}
.chip strong{font-size:1.05rem;text-align:right}
.error-box{margin-top:16px;padding:14px 16px;border-radius:16px;color:var(--err);background:rgba(255,95,95,.08);border:1px solid rgba(255,95,95,.15)}
.hidden{display:none}

@media (max-width: 980px){
  .home-card{grid-template-columns:1fr}
  .search-form{grid-template-columns:1fr}
  .quick-search-form{grid-template-columns:1fr 1fr}
  .quick-search-form button{grid-column:1 / -1}
  .playercard-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .home-shell,.player-shell{width:min(100% - 20px, 1200px)}
  .overlay-header{flex-direction:column}
  .quick-search-form{grid-template-columns:1fr}
  .rank-panel-left{flex-direction:column;align-items:flex-start}
  .chip{flex-direction:column;align-items:flex-start}
  .chip strong{text-align:left}
}


/* Clean playercard variant */
.clean-player-shell{
  width:min(1000px, calc(100% - 32px));
}

.clean-overlay-card{
  min-height: 320px;
}

.clean-playercard-grid{
  margin-top: 22px;
}

.clean-rank-panel-left{
  min-height: 200px;
}

@media (max-width: 640px){
  .clean-player-shell{
    width:min(100% - 20px, 1000px);
  }
}


/* Ultra minimal OBS card */
html, body.ultra-body{
  background: transparent !important;
}
.ultra-body{
  overflow: hidden;
  min-height: auto;
}
.ultra-shell{
  position: relative;
  z-index: 1;
  width: 760px;
  padding: 0;
  margin: 0;
}
.ultra-card{
  position: relative;
  width: 660px;
  min-height: 180px;
  border-radius: 26px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    linear-gradient(135deg, rgba(255,70,85,.10), rgba(255,255,255,.02) 35%, rgba(255,70,85,.04) 100%),
    rgba(10,14,22,.78);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 60px rgba(0,0,0,.42);
  backdrop-filter: blur(16px);
  padding: 18px 18px 16px;
}
.ultra-topline{
  position:absolute;
  left:0; top:0;
  width:100%; height:4px;
  background:linear-gradient(90deg, transparent 0%, var(--accent) 18%, var(--accent-soft) 52%, transparent 100%);
}
.ultra-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.ultra-label{
  color:var(--accent-soft);
  font-size:11px;
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.ultra-player h1{
  margin:0;
  font-size:1.2rem;
  line-height:1.1;
  font-weight:900;
}
.ultra-status{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}
.ultra-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:14px;
  align-items:stretch;
}
.ultra-rankbox{
  display:flex;
  align-items:center;
  gap:16px;
  min-height:96px;
  padding:16px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
}
.ultra-iconwrap{
  width:92px;
  height:92px;
  display:grid;
  place-items:center;
  border-radius:20px;
  padding:2px;
  /* background:linear-gradient(135deg, rgba(255,70,85,.8), rgba(255,255,255,.2)); */
  box-shadow:0 0 24px rgba(255,70,85,.16);
}
.ultra-rankicon{
  width:72px;
  height:72px;
  object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));
}
.ultra-ranktext{
  min-width:0;
}
.ultra-rankname{
  font-size:2rem;
  line-height:1;
  font-weight:900;
  letter-spacing:-.03em;
}
.ultra-rankmmr{
  margin-top:10px;
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,70,85,.12);
  border:1px solid rgba(255,70,85,.24);
  color:var(--accent-soft);
  font-weight:900;
  font-size:.96rem;
}
.ultra-stats{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.ultra-stat{
  min-height:42px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:16px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.08);
}
.ultra-stat span{
  color:var(--muted);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.ultra-stat strong{
  font-size:1rem;
}
@media (max-width: 780px){
  .ultra-shell,.ultra-card{width:100%}
  .ultra-grid{grid-template-columns:1fr}
}
