/* Myth Busters page. Builds on site.css tokens: paper, ink, red, blush, mute, line. */
.mg-hero{padding-bottom:clamp(16px,3vw,32px)}
.mg-hero .wrap{grid-template-columns:1fr}
.mg-hero h1{font-size:clamp(46px,7.4vw,118px);max-width:14ch}
.mg-hero .lede{max-width:58ch}

.mg-sec{padding-block:clamp(12px,2vw,24px) clamp(48px,7vw,96px);scroll-margin-top:70px}
.mg-frame{max-width:860px;margin:0 auto;display:grid;gap:14px}
.mg{position:relative;background:#1d1630;border:4px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:12px 12px 0 var(--red);outline:none;touch-action:none}
.mg:focus-visible{outline:4px solid var(--red);outline-offset:4px}
.mg canvas{display:block;width:100%;aspect-ratio:256/224;image-rendering:pixelated;image-rendering:crisp-edges}
.mg-hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;gap:8px;padding:8px 10px;font:clamp(8px,1.4vw,12px)/1.4 "Press Start 2P",monospace;color:#fff;background:linear-gradient(#000a,#0000);pointer-events:none}
.mg-hud b{color:#ffe14d;font-weight:400}
.mg-dialog{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(92%,560px);max-height:92%;overflow:auto;background:#fbfaf9;color:var(--ink);border:4px solid var(--ink);border-radius:10px;box-shadow:6px 6px 0 #000;padding:clamp(14px,3vw,24px);display:grid;gap:12px;animation:mgpop .35s steps(4)}
.mg-dialog[hidden],.mg-hud[hidden],.mg-toast[hidden]{display:none}
.mg-toast{position:absolute;left:50%;top:53%;translate:-50% 0;width:min(84%,520px);background:#fbfaf9ee;color:var(--ink);border:3px solid var(--ink);border-radius:10px;box-shadow:4px 4px 0 var(--red);padding:10px 14px;display:grid;gap:4px;pointer-events:none;animation:mgpop .3s steps(3)}
.mg-toast p{margin:0}
.mg-toast .mg-myth{font-size:clamp(14px,1.9vw,18px)}
.mg-toast .mg-truth{font-size:clamp(13px,1.5vw,15px);line-height:1.45}
.mg-toast .mg-tap{justify-self:end;margin-top:4px;font:clamp(8px,1.2vw,10px)/1.4 "Press Start 2P",monospace;color:var(--red);animation:mgblink 1.1s steps(2) infinite}
@keyframes mgblink{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.mg-toast .mg-tap{animation:none}}
.mg-toast.idle{background:#0000;border-color:#0000;box-shadow:none;top:auto;bottom:22%;text-align:center;animation:none}
.mg-toast.idle .mg-k{color:#ffe14d;font-size:clamp(9px,1.4vw,12px)}
.mg-toast.idle .mg-truth{color:#fff;font:clamp(8px,1.2vw,10px)/1.6 "Press Start 2P",monospace}
.mg-char{display:grid;justify-items:center;gap:8px;padding:0;border:0;background:none;cursor:pointer}
.mg-char .mg-btn{justify-self:stretch;text-align:center;background:#fff;color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.mg-char.on .mg-btn{background:var(--red);color:#fff}
.mg-char img{box-sizing:content-box;width:84px;height:64px;image-rendering:pixelated;background:#2a2140;border:3px solid #3e3156;border-radius:8px;padding:6px 4px 0}
.mg-char.on img{border-color:var(--red)}
.mg-char:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:8px}
.mg-how{margin:0;padding-left:18px;display:grid;gap:8px;font-size:clamp(14px,1.7vw,16px);line-height:1.45}
.mg-ctl{font:clamp(9px,1.3vw,11px)/1.6 "Press Start 2P",monospace;color:var(--mute)}
.mg-dialog.small{top:auto;bottom:4%;translate:-50% 0}
.mg-dialog.speech{top:3%;left:3%;translate:none;width:min(58%,500px);gap:8px}
.mg-dialog.speech::after{content:"";position:absolute;right:-30px;top:62%;border:14px solid transparent;border-left-color:var(--ink)}
.mg-dialog.speech .gfields{grid-template-columns:1fr}
@keyframes mgpop{from{scale:.6;opacity:0}to{scale:1;opacity:1}}
.mg-dialog p{margin:0}
.mg-k{font:clamp(11px,1.8vw,15px)/1.5 "Press Start 2P",monospace;color:var(--red)}
.mg-myth{font-weight:800;font-size:clamp(17px,2.4vw,22px);line-height:1.25}
.mg-myth s{text-decoration-color:var(--red);text-decoration-thickness:3px}
.mg-truth{font-size:clamp(14px,1.7vw,16px);line-height:1.55}
.mg-btn{justify-self:start;font:clamp(10px,1.4vw,12px)/1 "Press Start 2P",monospace;background:var(--ink);color:#fff;border:3px solid var(--ink);border-radius:8px;padding:12px 14px;cursor:pointer;box-shadow:3px 3px 0 var(--red)}
.mg-btn:hover,.mg-btn:focus-visible{background:var(--red);border-color:var(--red);box-shadow:3px 3px 0 var(--ink);outline:none}
.mg-btn.on{background:var(--red);border-color:var(--red)}
.mg-btn.go{justify-self:stretch;text-align:center}
.mg-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mg-pick .mg-btn{justify-self:stretch;text-align:center;background:#fff;color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.mg-pick .mg-btn.on{background:var(--red);color:#fff;border-color:var(--ink)}
.mg-link{justify-self:start;background:none;border:0;padding:0;font:600 13px var(--display);color:var(--ink);text-decoration:underline;cursor:pointer}
.mg-form{max-width:none;gap:10px}
.mg-form .gfields{grid-template-columns:1fr 1fr}
@media (max-width:560px){.mg-form .gfields{grid-template-columns:1fr}}
.mg-form input{padding:10px 12px}
.mg-pad{display:none;gap:14px;padding:4px 0;user-select:none;-webkit-user-select:none}
@media (pointer:coarse){.mg-pad{display:flex}}
.mg-pad button{flex:1;height:64px;border:3px solid var(--ink);background:#fff;color:var(--ink);border-radius:8px;font-size:18px;touch-action:none;box-shadow:3px 3px 0 var(--ink)}
.mg-pad button.down{translate:2px 2px;box-shadow:1px 1px 0 var(--ink)}

/* written answers */
.myths{padding-block:clamp(60px,8vw,110px);background:#fff;scroll-margin-top:60px}
.myths h2{font-weight:800;font-size:clamp(34px,4.6vw,64px);letter-spacing:-.03em;line-height:1;margin:0 0 clamp(20px,3vw,32px);max-width:18ch}
.myths h2 em{color:var(--red);font-weight:400}
.sec-lede{max-width:62ch;font-size:clamp(16px,1.3vw,19px);color:#3b3735;margin:0 0 clamp(28px,4vw,48px)}
.side{font:clamp(13px,1.6vw,16px)/1.4 "Press Start 2P",monospace;color:var(--red);margin:clamp(32px,4vw,48px) 0 16px;padding-top:20px;border-top:2px solid var(--ink)}
.mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px) clamp(20px,3vw,44px)}
@media (max-width:760px){.mgrid{grid-template-columns:1fr}}
.myth{display:grid;gap:8px;align-content:start}
.myth .mn{margin:0;font:10px/1 "Press Start 2P",monospace;color:var(--mute)}
.myth h3{margin:0;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(24px,2.4vw,32px);line-height:1.1}
.myth p{margin:0;font-size:15px;line-height:1.65;color:#3b3735}
.myth .more{font-weight:700;font-size:14px;color:var(--red);text-decoration:none}
.myth .more:hover{text-decoration:underline}
.fine-print{margin:clamp(32px,4vw,48px) 0 0;font-size:12px;line-height:1.5;color:var(--mute);max-width:80ch}
@media (prefers-reduced-motion:reduce){.mg-dialog{animation:none}}
/* phones: dialogs sit under the game screen instead of covering it */
@media (max-width:600px){
  .mg-dialog,.mg-dialog.small,.mg-dialog.speech{position:static;translate:none;width:auto;max-height:none;border:0;border-top:4px solid var(--ink);border-radius:0;box-shadow:none;animation:none}
  .mg-dialog.speech::after{display:none}
  .mg-toast{top:34%;width:94%;padding:8px 10px;gap:2px;box-shadow:3px 3px 0 var(--red)}
  .mg-toast .mg-k{font-size:10px}
  .mg-toast .mg-myth{font-size:14px}
  .mg-toast .mg-truth{font-size:13px;line-height:1.35}
  .mg-toast.idle{bottom:20%;top:auto}
  .mg-toast.idle .mg-truth{font-size:7px}
}
@media (pointer:coarse){.badge{display:none}}

/* "8-bit game" badge beside the title on every game page */
.mg-badge{display:inline-flex;vertical-align:.35em;margin-left:.25em;align-items:center;gap:10px;font-style:normal;white-space:nowrap;padding:10px 14px 9px;background:var(--ink);color:#fff;font:clamp(10px,1.1vw,13px)/1 "Press Start 2P",monospace;text-transform:uppercase;letter-spacing:.02em;rotate:-3deg;clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));filter:drop-shadow(4px 4px 0 var(--red))}
.mg-badge i{width:12px;height:12px;background:var(--red);box-shadow:inset -3px -3px 0 #a81f12;flex:none}
.ph h1 .mg-badge{color:#fff;font-weight:400;letter-spacing:.02em;line-height:1}