:root{
  --bg:#100015;
  --bg2:#1b0526;
  --panel:#1b0724cc;
  --panel-2:#11051a;
  --stroke:#7f2cff44;
  --stroke-strong:#e448ff88;
  --text:#f8eefc;
  --muted:#cbb5d4;
  --pink:#ff38cf;
  --yellow:#ffd542;
  --orange:#ff861f;
  --green:#21f386;
  --red:#ff4040;
  --shadow:0 12px 40px rgba(0,0,0,.35);
  --radius:24px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,Segoe UI,Arial,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(255,56,207,.18), transparent 32%),
    radial-gradient(circle at top right, rgba(255,134,31,.12), transparent 32%),
    linear-gradient(180deg, #0a0011 0%, var(--bg) 55%, #09000f 100%);
  color:var(--text);
  min-height:100vh;
}
.page-glow{
  position:fixed;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,255,114,.08) 1px, transparent 1px) 0 0/48px 100%,
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0/100% 48px;
  mask-image:linear-gradient(180deg,transparent,black 12%,black 88%,transparent);
  opacity:.18;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input{font:inherit}
button{cursor:pointer}
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:12px 24px;
  background:rgba(8,0,14,.88);backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(228,72,255,.18);
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img{width:54px;height:54px;border-radius:16px;box-shadow:0 0 0 1px rgba(255,255,255,.09), 0 0 26px rgba(0,255,114,.15)}
.brand span{display:flex;flex-direction:column;gap:3px}
.brand strong{font-size:1.25rem;line-height:1;color:var(--pink);font-weight:900}
.brand small{font-size:.78rem;color:#ffd325;text-transform:uppercase;font-weight:800;letter-spacing:.02em}
.status{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.status i{width:8px;height:8px;border-radius:999px;background:var(--green);box-shadow:0 0 12px var(--green)}
.shell{width:min(1380px, calc(100% - 32px)); margin:24px auto 48px; display:grid; gap:20px}
.panel{
  background:linear-gradient(180deg, rgba(36,9,47,.95), rgba(18,5,25,.96));
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
  padding:20px;
  overflow:hidden;
}
.hero{display:grid;grid-template-columns:1.35fr minmax(280px, .9fr);align-items:center;gap:16px;padding:26px}
.hero h1{margin:.15em 0;font-size:clamp(2.7rem, 6vw, 5.2rem);line-height:.88;font-weight:1000;letter-spacing:-.04em}
.hero h1 span{display:block;color:var(--yellow)}
.hero p{color:var(--muted);max-width:62ch;font-size:1.05rem;line-height:1.7}
.hero-visual{display:flex;justify-content:center;align-items:center;min-height:260px}
.hero-visual img{width:min(100%, 460px);max-height:360px;object-fit:contain;filter:drop-shadow(0 18px 35px rgba(0,0,0,.45))}
.eyebrow{display:inline-block;font-size:.74rem;color:#ffd859;text-transform:uppercase;letter-spacing:.12em;font-weight:900}
.hero-badges,.share-actions,.award-lines{display:flex;flex-wrap:wrap;gap:10px}
.hero-badges span,.btn,.stat,.badge,.rank-card,.field input,.target-card,.legend-item,.derived-list div,.award-lines div,.share-box,.phrase-box,.badge-panel,.mascot-box,.preset-grid button{border-radius:18px}
.hero-badges span{padding:8px 12px;border:1px solid rgba(255,214,69,.3);background:rgba(255,255,255,.04);font-weight:800;text-transform:uppercase;font-size:.78rem}
.grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.section-title{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.section-title span:first-child{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(180deg,#ff4edf,#8e2bff);font-weight:900;flex:0 0 auto}
.section-title h2{margin:0 0 4px;font-size:1.7rem;line-height:1.1}
.section-title p{margin:0;color:var(--muted);line-height:1.55}
.targets{display:grid;gap:12px}
.target-card{
  display:grid;grid-template-columns:minmax(140px, 1fr) minmax(160px, 1.5fr) 86px;
  gap:14px;align-items:center;
  padding:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035)
}
.target-name{display:flex;align-items:center;gap:12px;font-weight:900;font-size:1.05rem}
.target-name i{font-style:normal;font-size:1.2rem}
.target-range{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px}
.target-range input[type=range]{width:100%}
.target-value input{width:100%;text-align:center;font-weight:900}
.fields-grid{display:grid;gap:14px}
.fields-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.field{display:grid;gap:8px}
.field span{color:#fff;font-weight:800;line-height:1.35}
.field input{
  width:100%;border:1px solid rgba(255,255,255,.12);background:#0d0614;color:#fff;
  padding:12px 14px;min-height:48px;outline:none
}
input[type=number]{appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{opacity:1}
input[type=range]{padding:0;accent-color:var(--pink);min-height:auto;background:none;border:none}
.compact-grid .field input{min-height:46px}
.preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
.preset-grid button,.btn{
  border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  color:#fff;padding:13px 16px;font-weight:900
}
.preset-grid button.active{background:linear-gradient(180deg,#ffca29,#ff8416);color:#18081f;border-color:transparent}
.mascot-box{display:grid;grid-template-columns:140px 1fr;gap:16px;align-items:center;padding:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}
.mascot-box img{width:100%;max-height:260px;object-fit:contain;filter:drop-shadow(0 12px 24px rgba(0,0,0,.3))}
.mascot-box strong{display:block;font-size:1.2rem;margin:6px 0}
.mascot-box p{margin:0;color:var(--muted);line-height:1.55}
.action-panel{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px}
.action-panel p{margin:0;color:var(--muted);line-height:1.55;flex:1 1 320px}
.btn{min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.btn.primary{background:linear-gradient(180deg,#47ff73,#13d4a0);color:#08110b;border:none;box-shadow:0 14px 28px rgba(14, 206, 116, .18)}
.btn.ghost{background:rgba(255,255,255,.04)}
.btn.tiny{min-height:40px;padding:10px 14px}
.stats-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:18px}
.stat{padding:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,#100b1a,#07111f);text-align:center}
.stat b{display:block;font-size:clamp(1.6rem,4vw,2.8rem);font-weight:1000;color:#fff;letter-spacing:-.04em}
.stat span{display:block;color:#bdb0c6;text-transform:uppercase;font-size:.78rem;font-weight:800}
.stat.hot{background:linear-gradient(180deg,#52081e,#2c0c18);border-color:rgba(255,64,64,.38)}
.rage-meter{display:grid;gap:12px}
.rage-head{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:900}
.rage-head span{color:var(--muted)}
.rage-head strong{font-size:1.8rem;color:#ffdf57}
.meter{height:18px;border-radius:999px;background:#0d0614;border:1px solid rgba(255,255,255,.1);overflow:hidden}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#22e284,#ffd32f,#ff3c3c);border-radius:999px;transition:width .35s ease}
.rank-card{padding:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}
.rank-card span{display:block;color:var(--muted);text-transform:uppercase;font-size:.75rem;font-weight:800}
.rank-card strong{display:block;font-size:1.35rem;margin:6px 0 4px}
.rank-card p{margin:0;color:#efe4f6;line-height:1.55}
.chart-wrap{height:370px;border-radius:22px;background:#0c0712;border:1px solid rgba(255,255,255,.08);padding:14px}
.chart-wrap canvas{width:100%;height:100%}
.legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.legend-item{display:flex;justify-content:space-between;gap:8px;padding:12px 14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);align-items:center}
.legend-item span{display:flex;align-items:center;gap:10px;font-weight:800}
.legend-item i{display:inline-block;width:14px;height:14px;border-radius:999px}
.legend-item b{font-size:1rem}
.legend-item small{color:var(--muted)}
.derived-list{display:grid;gap:10px}
.derived-list div{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:14px 16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}
.derived-list span{color:#fff;line-height:1.4}
.derived-list b{font-size:1rem;color:#ffd95e;text-align:right}
.award-card{display:grid;grid-template-columns:1.2fr minmax(180px,.8fr);gap:10px;align-items:center}
.gold{color:#ffdd67}
.award-card h2{margin:.2em 0;font-size:2.25rem;line-height:.95}
.award-card p{margin:0 0 16px;color:var(--muted);line-height:1.55}
.award-lines div{padding:12px 14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);display:grid;gap:4px;min-width:160px}
.award-lines span{color:var(--muted);font-size:.78rem;text-transform:uppercase;font-weight:800}
.award-lines b{font-size:1.1rem}
.award-visual{display:flex;justify-content:center}
.award-visual img{width:min(100%,280px);max-height:360px;object-fit:contain;filter:drop-shadow(0 16px 30px rgba(0,0,0,.42))}
.side-fun{display:grid;gap:16px}
.phrase-box,.share-box{padding:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035)}
.phrase-box{display:grid;grid-template-columns:1.1fr 180px;gap:14px;align-items:center}
.phrase-box img{width:100%;max-height:220px;object-fit:contain}
.phrase-box blockquote{margin:.5rem 0 1rem;font-size:1.25rem;line-height:1.45;font-weight:800;color:#fff}
.share-box p{margin:.45rem 0 1rem;color:#efe4f6;line-height:1.6}
.badge-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.badge{padding:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);display:grid;gap:6px;align-content:flex-start}
.badge .ico{font-size:1.8rem}
.badge strong{font-size:1.05rem}
.badge span{color:var(--muted);line-height:1.45}
.badge.unlocked{border-color:rgba(38,243,134,.48);box-shadow:0 0 0 1px rgba(38,243,134,.2) inset}
.footer{width:min(1380px, calc(100% - 32px));margin:0 auto 34px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#d2bfd8}
.footer a{font-weight:800;color:#fff}

@media (max-width: 1200px){
  .stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .badge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 980px){
  .hero,.grid.two,.award-card,.phrase-box{grid-template-columns:1fr}
  .mascot-box{grid-template-columns:1fr}
  .mascot-box img{max-height:220px;justify-self:center;width:min(100%,220px)}
  .award-visual img{max-height:300px}
  .phrase-box img{max-height:180px;justify-self:center;width:min(100%,180px)}
}
@media (max-width: 760px){
  .topbar{padding:10px 14px}
  .brand strong{font-size:1.08rem}
  .brand small{font-size:.67rem}
  .status{font-size:.68rem}
  .shell{width:min(100% - 20px, 1380px);margin:14px auto 34px;gap:14px}
  .panel{padding:16px;border-radius:20px}
  .hero{padding:18px}
  .hero p{font-size:.98rem}
  .fields-2,.preset-grid,.stats-grid,.legend,.badge-grid{grid-template-columns:1fr}
  .target-card{grid-template-columns:1fr;gap:12px}
  .target-range{grid-template-columns:1fr}
  .legend-item,.derived-list div{align-items:flex-start;flex-direction:column}
  .section-title h2{font-size:1.45rem}
}