html.mg{--mg-w:100vw;--mg-h:100vh;--mg-vw:1vw;--mg-vh:1vh}
html.mg-turn{--mg-w:100vh;--mg-h:100vw;--mg-vw:1vh;--mg-vh:1vw}
 
@supports (width:100dvw){
  html.mg{--mg-w:100dvw;--mg-h:100dvh}
  html.mg-turn{--mg-w:100dvh;--mg-h:100dvw}
}

 
html.mg{height:100%;overflow:hidden;background:#000}
html.mg body{
   
  position:fixed;inset:0;
  width:100%;height:100%;margin:0;
  overflow:hidden;overscroll-behavior:none;
  background:#000;
}

 
html.mg,html.mg body,html.mg *{
  -webkit-user-select:none;-moz-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent}
html.mg ::selection{background:transparent}
html.mg button:focus{outline:none}

 
html.mg .topbars,
html.mg footer.site,
html.mg #mr-books,
html.mg #pa-books,
html.mg #mr-side,
html.mg #pa-side,
html.mg .mr-bar,
html.mg .pa-bar,
html.mg .intro-dots,
html.mg .fuss,
html.mg #mr-bg,
html.mg #pa-bg,
html.mg .intro-arrow,
html.mg #mr-menu,
html.mg #mr-fullhint,
html.mg #mr-mess,
html.mg #pa-mess,
html.mg #mr-progress,
html.mg #pa-status,
 
html.mg #mr-touch,
 
html.mg #mr-rotate{display:none !important}

 
html.mg .wrap{
  position:fixed;inset:0;z-index:200;
  max-width:none;margin:0;padding:0;display:block}

 
html.mg-turn .wrap{
  inset:auto;top:0;left:0;
  width:var(--mg-w);height:var(--mg-h);
  transform-origin:0 0;
  transform:rotate(90deg) translateY(-100%)}

html.mg #mr-frame,
html.mg #pa-frame{
  position:absolute;inset:0;
  display:block;margin:0;padding:0;gap:0;
  max-width:none;background:#000;
  height:var(--mg-h)}

html.mg #mr-play,
html.mg #pa-play{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  margin:0;padding:0;min-width:0;min-height:0}

html.mg #mr-stage:not([hidden]){
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center}

 
 
html.mg #pa-canvas{touch-action:none}

html.mg #mr-screen,
html.mg #pa-screen{
  width:min(var(--mg-w), calc(var(--mg-h) * 16 / 9));
  height:min(var(--mg-h), calc(var(--mg-w) * 9 / 16));
  max-width:none;max-height:none;
  aspect-ratio:auto;margin:0;border:0}

 
 
html.mg #mr-hud{font-size:clamp(11px,calc(2.1 * var(--mg-vw)),17px);padding:5px 8px;gap:7px}
html.mg #mr-hud span:has(#mr-h-score),
html.mg #mr-hud span:has(#mr-h-rival){display:none}
html.mg #pa-hud{font-size:clamp(11px,calc(2.1 * var(--mg-vw)),17px);padding:5px 8px;gap:7px}

 
html.mg #mr-lcol,
html.mg #mr-rcol{bottom:17%}
html.mg #mr-map,
html.mg #mr-tires{width:14%}
html.mg #mr-six{width:20%}
html.mg #mr-alt{width:8%}
html.mg #mr-warn{bottom:24%}
html.mg #mr-phases{font-size:clamp(9px,calc(1.5 * var(--mg-vw)),13px)}
html.mg #mr-count{font-size:clamp(48px,calc(13 * var(--mg-vw)),120px)}

 
html.mg #pa-quote{padding-left:15%;padding-right:15%;
  font-size:clamp(11px,calc(1.7 * var(--mg-vw)),16px)}
html.mg #pa-items{bottom:calc(2.4em + 10px);left:15%}
html.mg #pa-warn{bottom:auto;top:32%}

 
html.mg #mr-panel,
html.mg #pa-sheet{padding:8px}
html.mg .mr-sheet h2{font-size:clamp(17px,calc(3.4 * var(--mg-vw)),24px);margin-bottom:6px}
html.mg .mr-flavor{font-size:12px;line-height:1.55;margin-bottom:9px}
html.mg .mr-sheet .keys{font-size:11px}

 
html.mg #pa-intro{padding:8px;overflow:auto;background:rgba(6,7,9,.9)}
html.mg #pa-intro .sheet{grid-template-columns:minmax(0,1fr);gap:6px;max-width:none}
html.mg #pa-intro .icol{display:none}
html.mg #pa-intro .flavor{font-size:11.5px;line-height:1.5}
html.mg #pa-intro .wie{font-size:11px;line-height:1.45}
html.mg #pa-intro h2{font-size:clamp(17px,calc(3.4 * var(--mg-vw)),24px)}
html.mg #pa-intro .hcol{border-top:1px solid var(--line);padding-top:5px}
html.mg #pa-intro .keys{font-size:11px}

 
#mg-pad{
  position:absolute;inset:0;z-index:40;
  pointer-events:none;
  font-family:"Inconsolata",ui-monospace,monospace;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent}
#mg-pad[hidden]{display:none}

 
#mg-stick{position:absolute;inset:0;z-index:0;
  pointer-events:auto;touch-action:none}
#mg-pad.mg-quiet #mg-stick{display:none}
#mg-stick i{position:absolute;display:block;border-radius:50%;
  opacity:0;transition:opacity .12s linear;pointer-events:none;
  transform:translate(-50%,-50%)}
#mg-stick.on i{opacity:1}
#mg-stick .mg-ring{width:104px;height:104px;
  border:1.5px solid rgba(237,231,216,.30);
  background:rgba(12,14,17,.16);backdrop-filter:blur(1px)}
#mg-stick .mg-knob{width:42px;height:42px;
  background:rgba(197,50,43,.55);border:1.5px solid rgba(255,252,252,.82)}

#mg-pad .mg-cluster{
  position:absolute;bottom:max(8px,calc(2.2 * var(--mg-vh)));
  z-index:1;
  display:flex;align-items:flex-end;gap:9px}
#mg-pad .mg-left{left:max(8px,calc(1.6 * var(--mg-vw)))}
#mg-pad .mg-right{right:max(8px,calc(1.6 * var(--mg-vw)));flex-direction:row-reverse}

 
#mg-pad .mg-row{display:flex;align-items:flex-end;gap:9px;
  padding:14px 16px;margin:-14px -16px;
  pointer-events:auto;touch-action:none}
#mg-pad .mg-right .mg-row{flex-direction:row-reverse}

 
#mg-pad.mg-quiet .mg-cluster,
#mg-pad.mg-quiet .mg-sys{display:none}

 
#mg-pad button{
  pointer-events:auto;touch-action:none;
  -webkit-appearance:none;appearance:none;
  font:inherit;color:#EDE7D8;
  background:rgba(12,14,17,.44);
  border:1.5px solid rgba(237,231,216,.42);
  border-radius:50%;
  width:var(--mg-k);height:var(--mg-k);
  display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--mg-k) * .40);line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.9);
  backdrop-filter:blur(2px);
  position:relative;overflow:hidden;
  transition:background .08s linear,border-color .08s linear;
  --mg-k:clamp(48px,calc(13.5 * var(--mg-vh)),76px)}
#mg-pad button svg{width:46%;height:46%;display:block}

 
#mg-pad button.mg-on{
  background:rgba(197,50,43,.62);
  border-color:rgba(255,252,252,.9)}

 
 
@keyframes mgHit{
  from{background-color:rgba(197,50,43,.9)}
  to{background-color:rgba(197,50,43,0)}
}
#mg-pad button.mg-hit{animation:mgHit .22s ease-out}

 
#mg-pad .mg-use{--mg-k:clamp(58px,calc(17 * var(--mg-vh)),92px);
  font-size:calc(var(--mg-k) * .21);letter-spacing:.12em}

 
#mg-pad .mg-tog{--mg-k:clamp(38px,calc(10 * var(--mg-vh)),54px);
  font-size:calc(var(--mg-k) * .21);letter-spacing:.1em;border-radius:var(--mg-k)}
#mg-pad .mg-stack{display:flex;flex-direction:column;gap:7px;align-items:center}

 
#mg-pad .mg-sys{
  position:absolute;right:max(6px,calc(1.2 * var(--mg-vw)));
  top:clamp(30px,calc(6.5 * var(--mg-vh)),52px);
  z-index:1;
  display:flex;flex-direction:column;align-items:flex-end;gap:6px}
#mg-pad .mg-menu{
  position:absolute;left:max(6px,calc(1.2 * var(--mg-vw)));
  top:clamp(30px,calc(6.5 * var(--mg-vh)),52px);
  z-index:1;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px}
 
#mg-pad .mg-menu .mg-line{display:flex;flex-direction:column;gap:6px}
#mg-pad .mg-sys button,
#mg-pad .mg-menu button{
  --mg-k:clamp(30px,calc(7.4 * var(--mg-vh)),42px);
  font-size:calc(var(--mg-k) * .40);
  background:rgba(12,14,17,.34);
  border-color:rgba(237,231,216,.28)}

 
#mg-pad button[aria-pressed="true"]{
  border-color:rgba(217,164,65,.95);
  background:rgba(217,164,65,.32);
  color:#FFFCFC}
#mg-pad button[aria-pressed="false"]{
  border-color:rgba(237,231,216,.22);
  color:rgba(237,231,216,.46)}
#mg-pad button[aria-pressed="false"]::after{
  content:"";position:absolute;left:16%;right:16%;top:calc(50% - 1px);
  height:2px;border-radius:2px;background:rgba(237,231,216,.6);
  transform:rotate(-45deg)}
 
#mg-pad .mg-shut-btn{border-color:rgba(197,50,43,.75)}

@media(prefers-reduced-motion:reduce){
  #mg-pad button{transition:none}
  #mg-pad button.mg-hit{animation:none}
  #mg-stick i{transition:none}
}

 
html.mg #pa-book{padding:12px 14px 0}
html.mg .mg-shut{
  position:sticky;bottom:0;margin:12px -14px 0;padding:13px 14px;
  background:#0A0B0D;border-top:1px solid var(--line);
  text-align:center;color:#EDE7D8;cursor:pointer;
  touch-action:none;-webkit-user-select:none;user-select:none}
html.mg .mg-shut.mg-on{background:rgba(197,50,43,.5)}