@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --needle{syntax:"<angle>";inherits:true;initial-value:-135deg}
:root{
  color-scheme:dark;
  --asphalt:#151515;--asphalt2:#0f0f10;--panel:#202124;--panel2:#2a2b2f;
  --yellow:#ffd51c;--blue:#22a6df;--red:#d93426;--green:#1aa869;
  --text:#f7f7f7;--muted:#a7abb0;
  --unknown:#3a3a3c;--named:#d7a81c;--source:#1583bd;--codegen:#13a6b2;--binary:#0ca770;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  padding:18px 12px 40px;color:var(--text);font-family:Arial,Helvetica,sans-serif;
  background:radial-gradient(circle at 25% 0%,rgba(255,255,255,.08),transparent 24%),linear-gradient(135deg,#161616 0%,#0c0d0e 58%,#181818 100%);
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.075;
  background-image:repeating-linear-gradient(0deg,transparent 0 3px,#fff 4px 5px),repeating-linear-gradient(90deg,transparent 0 31px,#000 32px 33px);
  mix-blend-mode:overlay;
}
button,a{font:inherit}.shell{width:min(1240px,100%);margin:0 auto;position:relative}
.hero{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:12px 6px 16px}
.title-block{display:flex;align-items:center;gap:14px;min-width:0}
.game-logo{width:68px;height:68px;object-fit:contain;flex:0 0 auto;image-rendering:pixelated;filter:drop-shadow(3px 4px 0 #000) drop-shadow(0 0 7px rgba(255,213,28,.18))}

.eyebrow{margin:0 0 3px;color:var(--yellow);font:900 11px/1.2 "Arial Black",Impact,sans-serif;letter-spacing:.08em;text-shadow:2px 2px 0 #000}
h1{margin:0;font:900 clamp(30px,5vw,54px)/.93 "Arial Black",Impact,sans-serif;text-transform:uppercase;letter-spacing:-.03em;color:#fff;text-shadow:3px 3px 0 #111}
.subtitle{margin:7px 0 0;color:#c8c8c8;font-weight:700;font-size:12px}
.repo-link{color:#111;text-decoration:none;font:900 11px/1 "Arial Black",Impact,sans-serif;background:var(--yellow);border:3px solid #fff;border-radius:999px;padding:10px 15px;box-shadow:inset 0 0 0 2px #111,0 3px 0 #000}
.repo-link:hover{transform:translateY(-1px);filter:brightness(1.08)}
.dash{
  display:grid;grid-template-columns:1.3fr 1.3fr repeat(3,minmax(0,1fr));gap:8px;padding:9px;border:3px solid #d9d9d9;border-radius:22px;
  background:linear-gradient(#555b5f,#1d2022 18%,#0f1112 78%,#35393c);box-shadow:inset 0 0 0 3px #090909,0 4px 0 #050505
}
.gauge-card,.stat{min-width:0;border-radius:12px;background:linear-gradient(#1b1e20,#0b0c0d);border:1px solid #5c6469;box-shadow:inset 0 1px 7px #000}
.gauge-card{display:grid;grid-template-columns:76px max-content;gap:10px;align-items:center;justify-content:center;padding:7px 10px;text-align:center}
.gauge{
  --angle:0deg;--needle:-135deg;position:relative;width:70px;height:70px;border-radius:50%;
  background:conic-gradient(from 225deg,var(--yellow) 0deg,var(--yellow) var(--angle),#282a2c var(--angle),#282a2c 270deg,transparent 270deg);
  filter:drop-shadow(0 2px 1px #000);transition:--angle 1.15s cubic-bezier(.18,.82,.2,1),--needle 1.15s cubic-bezier(.18,.82,.2,1)
}
.gauge:before{content:"";position:absolute;inset:7px;border-radius:50%;background:radial-gradient(circle at 45% 38%,#24272a,#070808 72%);border:2px solid #757b7f;box-shadow:inset 0 0 10px #000}
.gauge:after{content:"";position:absolute;left:34px;top:10px;width:3px;height:26px;background:var(--red);transform-origin:50% 25px;transform:rotate(var(--needle));border-radius:3px;box-shadow:1px 1px 0 #000}
.gauge-readout{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;z-index:2;font:900 11px/1 "Arial Black",Impact,sans-serif;color:#fff;text-shadow:1px 1px #000}
.gauge-copy{text-align:center}.gauge-copy strong{display:block;color:var(--yellow);font:900 20px/1 "Arial Black",Impact,sans-serif;text-shadow:2px 2px 0 #000}
.gauge-copy span{display:block;margin-top:5px;color:#fff;font-size:9px;font-weight:900;letter-spacing:.08em}.gauge-copy small{display:block;margin-top:3px;color:#838a8e;font-size:8px;font-weight:700}
.stat{padding:11px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.stat strong{display:block;color:var(--yellow);font:900 20px/1 "Arial Black",Impact,sans-serif;text-shadow:2px 2px 0 #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stat span{display:block;margin-top:5px;color:#fff;font-size:9px;font-weight:900;letter-spacing:.08em}.stat small{display:block;margin-top:3px;color:#7e8589;font-size:8px;font-weight:700}
.control-strip{display:flex;align-items:center;gap:12px;padding:16px 4px 10px;min-height:58px}
.mode-switch{display:flex;padding:3px;border-radius:999px;background:linear-gradient(#ddd,#696e72 46%,#222 52%,#a7aaac);box-shadow:0 2px 0 #000}
button{border:0;cursor:pointer;color:#cfcfcf;background:#1a1b1d;min-height:35px;padding:0 14px;font-size:10px;font-weight:900}
.mode-switch button:first-child{border-radius:999px 4px 4px 999px}.mode-switch button:last-child{border-radius:4px 999px 999px 4px}
button.active{background:linear-gradient(#2fb8f2,#0874ae);color:#fff;text-shadow:1px 1px 0 #003b59}
button:hover,button:focus-visible{filter:brightness(1.18);outline:2px solid var(--yellow);outline-offset:1px}
.crumb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#b8bdc0;font-size:10px;font-weight:900}.back{margin-left:auto;border-radius:999px;background:#8f1712;border:2px solid #e0e0e0;color:#fff}
.race-panel{border:4px solid #e7e7e7;border-radius:24px;padding:5px;background:linear-gradient(135deg,#9ca1a4,#33383b 16%,#101214 48%,#555b5f 85%,#c9cbcc);box-shadow:inset 0 0 0 3px #111,0 6px 0 #050505}
.race-panel-top{display:flex;justify-content:space-between;gap:14px;align-items:center;min-height:36px;padding:0 13px 2px;color:var(--yellow);font:900 11px/1 "Arial Black",Impact,sans-serif;text-shadow:2px 2px 0 #000}
#hover-readout{color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:10px;letter-spacing:.04em;text-shadow:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-stage{position:relative;height:min(63vw,680px);min-height:440px;overflow:hidden;border:3px solid #070707;border-radius:16px;background:linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),#0a0a0b;background-size:16px 16px;box-shadow:inset 0 0 20px #000}
#treemap{display:block;width:100%;height:100%;touch-action:manipulation;cursor:crosshair}
.tooltip{position:absolute;z-index:4;pointer-events:none;width:min(360px,calc(100% - 24px));padding:7px;border:2px solid rgba(239,239,239,.8);border-radius:18px;background:linear-gradient(rgba(136,141,144,.45),rgba(37,41,44,.45) 13%,rgba(16,18,20,.45) 88%,rgba(100,105,108,.45));box-shadow:inset 0 0 0 1px rgba(9,9,9,.65),0 8px 18px #0008;transform-origin:10px 10px;animation:pop .11s ease-out}
.tooltip-inner{padding:11px 12px;border-radius:11px;background:rgba(13,15,16,.72);border:1px solid rgba(85,93,97,.7)}.tooltip-title{color:var(--yellow);font:900 15px/1.05 "Arial Black",Impact,sans-serif;text-shadow:2px 2px 0 #000;overflow-wrap:anywhere}.tooltip-row{display:flex;justify-content:space-between;gap:12px;margin-top:6px;color:#cfd2d3;font-size:10px;font-weight:700}.tooltip-row b{color:#fff;text-align:right}.tooltip-meter{margin-top:9px;height:9px;border-radius:99px;background:#050505;border:1px solid #5f6467;overflow:hidden}.tooltip-meter i{display:block;height:100%;background:linear-gradient(90deg,#1a92d0,#39c7f7);box-shadow:0 0 9px #24b7ef}.tooltip-hint{margin-top:9px;padding-top:7px;border-top:1px solid #4f5558;color:var(--yellow);font:900 9px/1 "Arial Black",Impact,sans-serif;letter-spacing:.08em;text-align:center}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}
}
.radar-wrap{padding:10px 12px 9px;border-bottom:1px solid #34393c}.radar-label{display:flex;justify-content:space-between;gap:10px;margin-bottom:5px;color:#80878a;font-size:8px;font-weight:900;letter-spacing:.08em}.radar-label span:first-child{color:var(--yellow)}#memory-radar{display:block;width:100%;height:30px;border:2px solid #090909;border-radius:6px;background:#080909;box-shadow:inset 0 0 7px #000;cursor:crosshair;touch-action:manipulation}
.legend{display:flex;flex-wrap:wrap;gap:9px 14px;padding:12px 5px 9px;font-size:9px;font-weight:900;color:#b4b8ba}.legend span{display:inline-flex;gap:6px;align-items:center}.swatch{width:13px;height:13px;border:2px solid #e5e5e5;border-radius:50%;box-shadow:inset 0 0 0 2px #111}.swatch.unknown{background:var(--unknown)}.swatch.named{background:var(--named)}.swatch.source{background:var(--source)}.swatch.codegen_exact{background:var(--codegen)}.swatch.binary_exact{background:var(--binary)}.legend-selected i{display:inline-block;width:13px;height:13px;border:3px solid var(--red);box-shadow:0 0 0 1px #fff}
.inspector{display:grid;grid-template-columns:64px 1fr;gap:13px;align-items:center;min-height:92px;padding:10px 14px;border:3px solid #e7e7e7;border-radius:18px;background:linear-gradient(#4f5458,#151719 18%,#0b0c0d 82%,#33373a);box-shadow:inset 0 0 0 3px #111,0 4px 0 #050505}.inspector-number{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--red);border:4px solid #fff;box-shadow:inset 0 0 0 3px #111;color:#fff;font:900 18px/1 "Arial Black",Impact,sans-serif;text-shadow:2px 2px 0 #000}.inspector h2{margin:0;color:var(--yellow);font:900 18px/1 "Arial Black",Impact,sans-serif;text-shadow:2px 2px 0 #000}.inspector p{margin:5px 0 0;color:#b9bec0;font-size:11px}.detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:10px}.detail-grid div{padding:8px 9px;border-radius:8px;background:#0c0d0e;border:1px solid #4b5154}.detail-grid span{display:block;color:#81898c;font-size:8px;font-weight:900;letter-spacing:.06em}.detail-grid strong{display:block;margin-top:3px;color:#fff;font-size:11px;overflow-wrap:anywhere}
footer{padding:15px 4px 0;color:#696f72;font-size:8px;font-weight:900;letter-spacing:.08em}
@media(max-width:900px){.dash{grid-template-columns:1fr 1fr 1fr}.gauge-card{grid-column:span 1}.detail-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){body{padding:10px 7px 26px}.hero{padding-top:7px}.game-logo{width:52px;height:52px}.dash{grid-template-columns:1fr 1fr;border-radius:16px}.gauge-card{grid-template-columns:62px max-content;justify-content:center}.gauge{width:58px;height:58px}.gauge:after{left:28px;top:9px;height:21px;transform-origin:50% 20px}.gauge-readout{padding-bottom:9px;font-size:9px}.gauge-copy strong,.stat strong{font-size:17px}.stat:last-child{grid-column:1/-1}.control-strip{flex-wrap:wrap}.mode-switch{width:100%}.mode-switch button{flex:1;padding:0 7px}.crumb{order:3;width:100%}.map-stage{height:550px;min-height:400px}.race-panel{border-radius:18px}.race-panel-top{font-size:9px}#hover-readout{display:none}.detail-grid{grid-template-columns:1fr 1fr}.radar-label span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.tooltip{animation:none}}


/* Single-viewport adaptive layout */
html,body{height:100%;overflow:hidden}
body{height:100dvh;padding:8px 10px}
.shell{
  height:calc(100dvh - 16px);
  display:grid;
  grid-template-rows:auto auto auto minmax(0,1fr) auto auto;
  min-height:0;
}
.hero{padding:4px 6px 7px;align-items:center}
.game-logo{width:clamp(46px,6vh,60px);height:clamp(46px,6vh,60px)}
h1{font-size:clamp(28px,4.8vh,46px)}
.subtitle{margin-top:4px}
.dash{padding:6px;gap:6px}
.gauge-card{padding:5px 8px;grid-template-columns:66px max-content;gap:8px}
.gauge{width:62px;height:62px}
.gauge:after{left:30px;top:9px;height:23px;transform-origin:50% 22px}
.gauge-readout{padding-bottom:10px;font-size:10px}
.control-strip{padding:8px 4px 6px;min-height:44px}
.race-panel{min-height:0;display:flex;flex-direction:column}
.radar-wrap{padding:6px 10px 6px}
#memory-radar{height:26px}
.race-panel-top{min-height:28px;padding-bottom:1px}
.map-stage{height:auto;min-height:0;flex:1}
.legend{flex-wrap:nowrap;overflow-x:auto;padding:6px 5px 5px;scrollbar-width:none}
.legend::-webkit-scrollbar{display:none}
.inspector{min-height:70px;max-height:108px;padding:7px 11px;overflow:auto}
.inspector-number{width:48px;height:48px;font-size:16px}
.inspector h2{font-size:16px}
.detail-grid{margin-top:7px}
footer{display:none}

@media(max-height:820px) and (min-width:761px){
  .eyebrow{font-size:9px}
  .subtitle{font-size:10px}
  .gauge{width:54px;height:54px}
  .gauge-card{grid-template-columns:58px max-content;padding:4px 7px}
  .gauge:after{left:26px;top:8px;height:20px;transform-origin:50% 19px}
  .gauge-readout{padding-bottom:8px;font-size:9px}
  .gauge-copy strong,.stat strong{font-size:17px}
  .gauge-copy span,.stat span{font-size:8px}
  .gauge-copy small,.stat small{font-size:7px}
  .control-strip{padding-top:5px;padding-bottom:4px}
  .inspector{min-height:60px;max-height:88px}
  .detail-grid{display:none}
}

@media(max-width:760px){
  body{padding:5px 5px 7px}
  .shell{height:calc(100dvh - 12px);grid-template-rows:auto auto auto minmax(0,1fr) auto auto}
  .hero{padding:2px 4px 4px}
  .game-logo{width:40px;height:40px}
  h1{font-size:24px}
  .eyebrow{font-size:7px}
  .subtitle{display:none}
  .dash{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:4px;border-radius:12px}
  .gauge-card,.stat{min-height:44px;padding:5px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
  .gauge{display:none}
  .gauge-copy strong,.stat strong{font-size:10px}
  .gauge-copy span,.stat span{font-size:6px;letter-spacing:0}
  .gauge-copy small,.stat small{display:none}
  .stat:last-child{grid-column:auto}
  .control-strip{padding:5px 2px 4px;gap:4px;min-height:0}
  .mode-switch{width:100%;padding:2px}
  .mode-switch button{min-height:27px;padding:0 4px;font-size:7px}
  .crumb{display:none}
  .back{min-height:27px;font-size:7px;margin-left:auto}
  .race-panel{border-width:3px;border-radius:14px;padding:4px}
  .radar-wrap{padding:4px 6px 4px}
  #memory-radar{height:22px}
  .race-panel-top{min-height:22px;padding:0 7px;font-size:8px}
  .map-stage{height:auto;min-height:0}
  .legend{padding:4px 3px 3px;gap:8px;font-size:6.5px}
  .swatch,.legend-selected i{width:10px;height:10px}
  .inspector{grid-template-columns:38px 1fr;gap:7px;min-height:52px;max-height:72px;padding:5px 7px;border-radius:12px}
  .inspector-number{width:34px;height:34px;border-width:3px;font-size:11px}
  .inspector h2{font-size:11px}
  .inspector p{font-size:8px;margin-top:2px}
  .detail-grid{display:none}
}