html, body { margin: 0; height: 100%; background: #0c0c0c; color: #cfcfcf; }
body { font: 14px/1.35 ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace; }
#term { box-sizing: border-box; height: 100%; overflow-y: auto; padding: 8px 10px 24px; cursor: text; }
#out div { white-space: pre-wrap; word-break: break-word; min-height: 1.35em; }
#out .err { color: #ff6b6b; }
#out .ok { color: #7ee787; }
#out .dim { color: #8a8a8a; }
#out .hd { color: #e6e6e6; font-weight: bold; }
#out .warn { color: #f0c674; font-weight: bold; }
#line { display: flex; align-items: baseline; }
#ps1 { white-space: pre; color: #7ee787; }
#ps1 b { color: #79b8ff; font-weight: normal; }
#inp { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #e6e6e6; font: inherit; padding: 0; caret-color: #e6e6e6; }
.hidden { display: none !important; }

/* Schermate a tutto schermo: aiuto (non travestito) e "capo in arrivo" (finta compilazione) */
#overlay { position: fixed; inset: 0; z-index: 10; overflow: auto; }
#overlay.help { background: #f4f1ea; color: #1c1c1c; padding: 18px 22px 60px; font: 14px/1.5 ui-monospace, Consolas, monospace; }
#overlay.help h1 { font-size: 18px; margin: 0 0 6px; }
#overlay.help h2 { font-size: 15px; margin: 18px 0 4px; border-bottom: 1px solid #bbb; }
#overlay.help pre { margin: 4px 0; white-space: pre-wrap; font: inherit; }
#overlay.help .bar { position: sticky; top: 0; background: #1c1c1c; color: #fff; padding: 6px 10px; margin: -18px -22px 12px; }
#overlay.boss { background: #0c0c0c; color: #cfcfcf; padding: 8px 10px; white-space: pre; overflow: hidden; }

/* Mappa ASCII */
#out .mo { color: #6fbf73; }
#out .mw { color: #d08b5b; }
#out .mn { color: #8a8a8a; }
#out .mo2 { color: #2f5f35; }
#out .mw2 { color: #5a3d2c; }
#out .mn2 { color: #343434; }
#out .mc { color: #ffffff; font-weight: bold; }
#out .mcw { color: #ff9f5a; font-weight: bold; }
#out .mc2 { color: #cfcfcf; }
#out .md { color: #ff6b6b; }
#out .mu { color: #79b8ff; font-weight: bold; }
#out .me { color: #ff6b6b; font-weight: bold; }
#out .ml { color: #9a9a9a; letter-spacing: 1px; }

/* Mappa interattiva */
#overlay.imapp { background: #0c0c0c; color: #cfcfcf; padding: 6px 10px; overflow: hidden; white-space: pre; }
#overlay.imapp .imstatus div { min-height: 1.35em; }
#overlay.imapp .ok { color: #7ee787; } #overlay.imapp .err { color: #ff6b6b; } #overlay.imapp .dim { color: #8a8a8a; } #overlay.imapp .hd { color: #e6e6e6; font-weight: bold; }
#overlay .mo { color: #6fbf73; } #overlay .mw { color: #d08b5b; } #overlay .mn { color: #8a8a8a; }
#overlay .mo2 { color: #2f5f35; } #overlay .mw2 { color: #5a3d2c; } #overlay .mn2 { color: #343434; }
#overlay .mc { color: #ffffff; font-weight: bold; } #overlay .mcw { color: #ff9f5a; font-weight: bold; } #overlay .mc2 { color: #cfcfcf; } #overlay .md { color: #ff6b6b; }
#overlay .mu { color: #79b8ff; font-weight: bold; } #overlay .me { color: #ff6b6b; font-weight: bold; } #overlay .ml { color: #9a9a9a; }
#overlay .msel { color: #ffd866; font-weight: bold; } #overlay .mq { color: #ff9f5a; font-weight: bold; }
#overlay .mcur { background: #e6e6e6; color: #0c0c0c; }
#out .msel { color: #ffd866; font-weight: bold; } #out .mq { color: #ff9f5a; font-weight: bold; }
#overlay.imapp .imkeys { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 4px; }
#overlay.imapp .imkeys button { background: #1b1b1b; color: #cfcfcf; border: 1px solid #3a3a3a; border-radius: 3px; font: inherit; font-size: 12px; padding: 2px 8px; cursor: pointer; }
#overlay.imapp .imkeys button:hover { border-color: #6fbf73; color: #fff; }
#overlay.imapp div > span { cursor: crosshair; }
#overlay .mcur2 { color: #ffd866; font-weight: bold; }

#out .qr { white-space: pre; line-height: 1; font-family: monospace; letter-spacing: 0; background: #fff; color: #000; display: inline-block; padding: 0; margin: 4px 0; }