/* FM1 Quest — screen lab chrome. The LCD itself is lcd.css (device pixels, zoomed by --z). */
:root{--z:2;--bg:#141416;--panel:#1d1b20;--line:#34313a;--txt:#c9c6bf;--dim:#7d7a84;--gold:#e8c46a;--rec:#e0503c;--blue:#5a8ad0}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font:13px/1.45 system-ui,-apple-system,sans-serif}
button,select,input{font:inherit;color:inherit}
button{background:#2b2830;border:1px solid #46424e;border-radius:4px;padding:3px 9px;cursor:pointer}
button:hover{border-color:var(--gold)}
button.on{background:var(--gold);color:#1e1418;border-color:var(--gold)}
button.rec.on{background:var(--rec);border-color:var(--rec);color:#fff}
select{background:#2b2830;border:1px solid #46424e;border-radius:4px;padding:2px 4px}
input[type=range]{accent-color:var(--gold);width:90px;vertical-align:middle}
h1{font-size:15px;margin:0;color:var(--gold);letter-spacing:.06em}
h2{font-size:14px;margin:34px 0 4px;color:var(--gold);letter-spacing:.04em;border-bottom:1px solid var(--line);padding-bottom:6px}
.sub{color:var(--dim);margin:0 0 14px;max-width:900px}

/* ---- control bar ---- */
#bar-ctl{position:sticky;top:0;z-index:20;background:#17151ae8;backdrop-filter:blur(6px);border-bottom:1px solid var(--line);padding:8px 16px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
#bar-ctl .g{display:flex;align-items:center;gap:6px;white-space:nowrap}
#bar-ctl label{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
#bar-ctl output{display:inline-block;min-width:30px;color:var(--txt)}
.sep{width:1px;height:20px;background:var(--line)}
main{padding:6px 16px 80px}

/* ---- tiles ---- */
.tiles{display:flex;flex-wrap:wrap;gap:22px 18px;align-items:flex-start;margin-top:14px}
.tile{width:calc(240px*var(--z));display:flex;flex-direction:column;gap:6px}
.tile .cap{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.tile .cap b{color:var(--txt);font-weight:600}
.tile .cap span{color:var(--dim);font-size:11px}
.tile .note{color:var(--dim);font-size:11.5px;line-height:1.4;min-height:32px}
.tile .mini{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:11px;color:var(--dim)}
.tile .mini button{padding:1px 7px;font-size:11px}
.lcdbox{width:calc(240px*var(--z));height:calc(240px*var(--z));overflow:hidden;background:#000;outline:1px solid #000;box-shadow:0 0 0 1px var(--line)}
.lcdbox .lcd{zoom:var(--z);transform-origin:0 0}
.lcd.mono{filter:grayscale(1) contrast(1.1)}
.lcd.scan::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0,rgba(0,0,0,.18) 1px,transparent 1px,transparent 3px)}
.lcd.blink .tbot .panel{animation:bl 1s steps(2) infinite}@keyframes bl{50%{opacity:.55}}
.lcd .pad,.lcd .slot,.lcd .trow,.lcd .mrow,.lcd .gc,.lcd .dcell{cursor:pointer}
img.shot{display:block;width:calc(240px*var(--z));height:calc(240px*var(--z));image-rendering:pixelated;background:#000;box-shadow:0 0 0 1px var(--line)}
.pill{display:inline-block;font-size:10px;padding:0 6px;border-radius:8px;border:1px solid var(--line);color:var(--dim);margin-left:4px;vertical-align:1px}
.pill.ok{color:#7ab04e;border-color:#3c5a2a}.pill.hook{color:#e08a3a;border-color:#6a4020}

/* ---- suggestions ---- */
.tier{margin-top:26px}
.tier h3{margin:0;font-size:13px;display:flex;gap:10px;align-items:center}
.tier h3 i{font-style:normal;font-size:10px;padding:1px 8px;border-radius:9px;color:#1e1418}
.t1 h3 i{background:#7ab04e}.t2 h3 i{background:#f0c860}.t3 h3 i{background:#e08a3a}
.tier>p{margin:2px 0 0;color:var(--dim);max-width:900px}
.ph{width:calc(240px*var(--z));height:calc(240px*var(--z));border:2px dashed #4a4655;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#6a6672;text-align:center;padding:12px;background:repeating-linear-gradient(45deg,transparent 0 10px,#ffffff05 10px 20px)}
.ph b{font-size:13px;color:#a8a4b2}.ph em{font-style:normal;font-size:11px}
.ph .n{font-size:26px;color:#4a4655;font-weight:700}
.t1 .ph{border-color:#3c5a2a}.t2 .ph{border-color:#6a5a28}.t3 .ph{border-color:#6a4020}
.tile ul{margin:0;padding-left:16px;font-size:12px;line-height:1.5}
.tile ul li{margin:1px 0}
.tile ul li b{color:var(--txt)}
.tile .tag{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.07em}

table.data{border-collapse:collapse;width:100%;max-width:1100px;margin-top:10px;font-size:12px}
table.data th,table.data td{border-bottom:1px solid var(--line);padding:5px 8px;text-align:left;vertical-align:top}
table.data th{color:var(--gold);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
table.data td:first-child{color:var(--txt);white-space:nowrap}
.legend2{color:var(--dim);font-size:11.5px;margin:6px 0}
@media (max-width:700px){main{padding:6px 10px 60px}#bar-ctl{padding:6px 10px}}

.tile .help{font-size:11.5px;line-height:1.4;color:#a9a5b3;background:#1a181e;border-left:2px solid var(--gold);padding:4px 8px;border-radius:0 3px 3px 0}
.tile .help b{color:var(--gold);font-weight:600}

/* ---- how to reach (hardware keycaps, pixel font) ---- */
.how{display:flex;flex-direction:column;gap:5px;padding:6px 8px 7px;background:#1e1418;border:1px solid #5a3a28;box-shadow:inset 0 0 0 1px #000;font-family:'Pixelify Sans',monospace}
.how .t{font-size:10px;letter-spacing:.14em;color:#a89080}
.how .t u{text-decoration:none;color:#1e1418;background:#e08a3a;padding:0 5px;margin-left:5px;letter-spacing:.06em}
.how .row{display:flex;flex-wrap:wrap;gap:4px 5px;align-items:center}
.how .pl{color:#a89080;font-size:13px}
.how .res{color:#c8b090;font-size:12px;margin-left:3px}
.kc{display:inline-flex;align-items:stretch;background:#3a2620;border:1px solid #c8963c;box-shadow:0 2px 0 #1e1418,inset 0 0 0 1px #6a4030;line-height:1}
.kc i{font-style:normal;font-size:9px;letter-spacing:.06em;padding:4px 4px 3px;color:#1e1418;background:#a89080;display:flex;align-items:center}
.kc b{font-weight:400;font-size:13px;padding:3px 6px 2px;color:#f2e2c4;display:flex;align-items:center}
.k-tap i{background:#5a8ad0}.k-hold i{background:#e08a3a}.k-turn i{background:#7ab04e}.k-key i{background:#8a6a9a}.k-press i{background:#f0c860}.k-rec i{background:#e0503c}.k-auto i{background:#a89080}
.how.prop{border-style:dashed}
/* ---- generated screens ---- */
.tile.gfx .lcdbox canvas{display:block;width:calc(240px*var(--z));height:calc(240px*var(--z));image-rendering:pixelated}
.ctl{display:flex;flex-direction:column;gap:2px}
.ctl label{display:grid;grid-template-columns:62px 1fr 56px;align-items:center;gap:6px;font-size:11px;color:#a9a5b3}
.ctl label input{width:100%}
.ctl output{color:var(--txt);text-align:right;font-size:11px}
.help ul{margin:0;padding-left:14px;list-style:square}
.help ul li{margin:1px 0}
.spi{font-size:11px;color:#a9a5b3;border-left:2px solid #5a8ad0;padding:2px 8px;background:#1a181e}
.spi.bad{border-color:#e0503c;color:#e9a99f}
.spi b{color:var(--txt)}
.tile.gfx>ul{margin-top:2px}
.sec-sub{margin:14px 0 2px;font-size:13px;color:var(--gold)}
.note-box{max-width:900px;background:#1a181e;border:1px solid var(--line);padding:10px 14px;margin:10px 0;color:#bdb9c6}
.note-box h4{margin:8px 0 3px;color:var(--gold);font-size:13px}
.note-box ul{margin:2px 0 6px;padding-left:18px}

.ph.pend{border-color:#6a4020;color:#a8806a}.ph.pend .n{font-size:34px}
.tile .note i{color:#7d7a84}
.note-box a{color:#8ab4ff}
.heroes-note{color:var(--dim)}
.tile .ctl button.on{background:var(--gold);color:#1e1418;border-color:var(--gold)}
#budget{position:fixed;right:14px;top:128px;z-index:30;width:430px;max-height:68vh;overflow:auto;background:#17151af4;border:1px solid var(--line);box-shadow:0 8px 30px #000a;padding:10px 14px;font-size:12px}
#budget h4{margin:10px 0 4px;color:var(--gold);font-size:12px;letter-spacing:.06em}
#budget table{border-collapse:collapse;width:100%}#budget td,#budget th{padding:2px 6px;border-bottom:1px solid var(--line);text-align:left;font-weight:400}
#budget th{color:var(--dim);font-size:10px;text-transform:uppercase}
#budget .bar{height:8px;background:#2b2830;margin:3px 0}#budget .bar i{display:block;height:100%;background:#7ab04e}#budget .bar.bad i{background:#e0503c}
#budget .est{color:var(--dim);font-size:11px}
#budget input[type=number]{width:110px;background:#2b2830;border:1px solid #46424e;color:var(--txt);padding:2px 4px}

.fontgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;margin:10px 0}
.fbtn{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:8px 10px;background:#1d1b20;border:1px solid var(--line)}
.fbtn small{color:var(--dim);font-size:10.5px}
.fbtn span{color:#f0c860;line-height:1.1}
.fbtn.on{border-color:var(--gold);background:#2b2430}

#tabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 4px;padding:8px 0;border-bottom:1px solid var(--line);position:sticky;top:var(--barh,150px);z-index:15;background:#141416f2}
#tabs button{padding:5px 12px;font-size:12px;background:#1d1b20;border-color:var(--line)}
#tabs button.on{background:var(--gold);color:#1e1418;border-color:var(--gold)}

@media (min-width:1440px){.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:22px 14px;justify-items:center}.tiles>.tile{justify-self:center}}
@media (min-width:1640px){.tiles{grid-template-columns:repeat(6,1fr)}}

#bar-ctl label.rd{text-transform:none;letter-spacing:0;font-size:12px;color:var(--txt);display:inline-flex;gap:3px;align-items:center;cursor:pointer}
#bar-ctl [hidden]{display:none!important}