/* Neighborhood Smash. Builds on myths.css (shared arcade frame, dialogs, buttons) and site.css tokens. */
.sm canvas{aspect-ratio:256/224}
.sm-row{position:absolute;left:0;right:0;bottom:0;height:calc(54 / 224 * 100%);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:start;gap:2px;padding:1.4% 3px 0;pointer-events:none}
.sm-row[hidden]{display:none}
.sm-lab{pointer-events:auto;justify-self:center;max-width:94%;display:grid;gap:3px;justify-items:center;padding:3px 6px 4px;border:2px solid #fbfaf9;outline:2px solid #1f5a2b;border-radius:3px;background:#2f7a3b;color:#fff;font:700 clamp(9px,1.3vw,12px)/1.15 var(--display,Montserrat),sans-serif;text-align:center;cursor:pointer}
.sm-lab:hover,.sm-lab.on{outline-color:#ffe14d;outline-width:3px}
.sm-lab:focus-visible{outline:3px solid var(--red)}
.sm-lab.flat{background:#6b6966;outline-color:#4a4846;text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}
.sm-pips{display:flex;gap:3px}
.sm-pips i{width:6px;height:6px;background:#1f5a2b}
.sm-pips i.x{background:#ffe14d}
.sm-top{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sm-top li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
.sm-n{font:12px/1 "Press Start 2P",monospace;color:#fff;background:var(--ink);border-radius:4px;padding:6px 6px 5px}
.sm-top a{color:var(--ink)}
.sm-top b{font-size:clamp(16px,2vw,19px)}
.sm-pct{font:9px/1 "Press Start 2P",monospace;color:var(--red);white-space:nowrap}
.sm-bar{display:block;height:6px;background:#eee7e3;margin:6px 0 4px}
.sm-bar i{display:block;height:100%;background:var(--red)}
.sm-why{display:block;font-size:14px;line-height:1.45;color:#3b3735}
.sm-tease{border-left:3px solid var(--red);padding-left:10px}
.sm-tease a,.sm-done a{color:var(--red);font-weight:700}
.sm-form select{width:100%;padding:10px 12px;border:1px solid var(--line,#ddd);border-radius:6px;font:inherit;background:#fff}
.sm-form .gfields{grid-template-columns:1fr 1fr}
.sm-form .gfields label:nth-child(5){grid-column:1/-1}
@media (max-width:560px){.sm-form .gfields{grid-template-columns:1fr}}
.sm-after{margin:0;display:flex;gap:10px;align-items:center;font-size:13px}
@media (max-width:600px){.sm-lab{font-size:8px;gap:2px;padding:2px 3px 3px;border-width:1px;outline-width:1px;max-width:98%}.sm-pips i{width:4px;height:4px}}

/* quick version + written guide */
.sm-quick{margin-top:clamp(20px,3vw,32px);border:2px solid var(--ink);border-radius:10px;background:#fff;padding:14px 18px}
.sm-quick summary{cursor:pointer;font-weight:700}
.sm-quick form{display:grid;gap:18px;margin-top:14px}
.sm-quick fieldset{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 18px}
.sm-quick legend{font:11px/1.6 "Press Start 2P",monospace;color:var(--red);margin-bottom:8px}
.sm-quick label{display:grid;gap:4px;font-size:14px;font-weight:600}
.sm-quick select{padding:8px 10px;border:1px solid #ccc;border-radius:6px;font:inherit;font-weight:400}
.smg h3{margin:clamp(28px,3vw,40px) 0 10px;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(26px,2.6vw,34px);line-height:1.1}
.smg p,.smg li{font-size:clamp(15px,1.2vw,17px);line-height:1.7;color:#3b3735;max-width:68ch}
.smg ul{padding-left:20px;display:grid;gap:8px}
.smg a{color:var(--red);font-weight:700}

/* results page */
.smr{padding-block:clamp(40px,6vw,80px)}
.smr-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:820px}
.smr-list>li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:14px 0;border-top:1px solid #e6dfda}
.smr-list .sm-n{justify-self:start;align-self:start}
.smr-list h3{margin:0;font-size:clamp(19px,2vw,24px)}
.smr-list h3 a{color:var(--ink)}
.smr-picks{margin:8px 0 0;padding-left:18px;display:grid;gap:4px;font-size:14px;line-height:1.5;color:#3b3735}
.smr-picks a{color:var(--red);font-weight:700}
.smr-top>li{background:#fff;border:2px solid var(--ink);border-radius:10px;padding:16px;box-shadow:6px 6px 0 var(--red)}
.smr-top{margin-bottom:clamp(30px,4vw,48px)}
/* results sit under the finale scene instead of covering it */
.sm .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;padding:clamp(16px,3vw,28px) clamp(16px,4vw,40px)}
.sm .mg-dialog.speech::after{display:none}
.sm-scale{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.sm-scale>span{font-size:13px;font-weight:600;border:2px solid var(--ink);border-radius:6px;padding:3px 8px;background:#fff}.sm-scale b{font:10px/1 "Press Start 2P",monospace;color:var(--red);margin-right:4px}
/* rules and round boxes sit in the middle of the game screen */
.sm .mg-dialog.small{top:50%;bottom:auto;translate:-50% -50%}
@media (max-width:600px){
  .sm .mg-dialog.small{position:absolute;top:50%;left:50%;translate:-50% -50%;width:90%;max-height:94%;overflow:auto;border:3px solid var(--ink);border-radius:8px;box-shadow:4px 4px 0 #000;padding:12px 14px;gap:7px}
  .sm .mg-dialog.small .mg-truth,.sm .mg-dialog.small .mg-how{font-size:13px;line-height:1.4}
  .sm .mg-dialog.small .mg-how{gap:3px}
  .sm .mg-dialog.small .mg-btn{padding:10px 12px;line-height:1.5}
}
.sm .mg-dialog:focus{outline:none}