:root { color-scheme: dark; }
html, body {
    margin: 0; height: 100%; background: #000; color: #e8eaf6; overflow: hidden;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
#screen {
    position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
}
#frame {
    position: relative;
    width: min(100vw, 160vh); height: min(62.5vw, 100vh);   /* 16:10, square Amiga pixels */
    --u: calc(min(100vw, 160vh) / 320);                     /* one Amiga pixel */
}
#game {
    width: 100%; height: 100%; display: block;
    image-rendering: pixelated; touch-action: none; cursor: none; background: #000;
}
/* galaxy map help (mapui.js) */
#mapui { position: absolute; inset: 0; pointer-events: none; }
#mapui[hidden] { display: none; }
#map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#map-panel {
    position: absolute; left: calc(2 * var(--u)); top: calc(2 * var(--u));
    min-width: calc(92 * var(--u)); max-width: calc(132 * var(--u)); max-height: calc(158 * var(--u));
    display: flex; flex-direction: column; pointer-events: auto; cursor: default;
    background: rgba(8, 10, 40, 0.82); border-radius: calc(1.5 * var(--u)); overflow: hidden;
    font-size: calc(5.4 * var(--u)); line-height: 1.3; color: #ebebeb;
}
#map-search {
    font: inherit; color: #fff; margin: calc(1 * var(--u)); padding: calc(0.6 * var(--u)) calc(2 * var(--u));
    background: #141938; border: 1px solid #5a64a0; border-radius: calc(1 * var(--u)); outline: none;
}
#map-search:focus { border-color: #50dcff; background: #28326e; }
#map-head { font-weight: bold; padding: calc(0.8 * var(--u)) calc(2 * var(--u)); background: rgba(30, 40, 90, 0.9); cursor: pointer; }
#map-head:hover { background: rgba(60, 70, 130, 0.95); }
#map-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; touch-action: pan-y; }
#map-list li {
    display: grid; grid-template-columns: 1fr auto auto; gap: calc(3 * var(--u));
    padding: calc(0.4 * var(--u)) calc(2 * var(--u)); cursor: pointer; white-space: nowrap;
}
#map-list li .n { overflow: hidden; text-overflow: ellipsis; }
#map-list li .d, #map-list li .f { text-align: right; }
#map-list li:hover, #map-list li.chosen { background: rgba(60, 70, 130, 0.92); }
#map-list li.short { color: #ffaa3c; }
#map-list li.picked { background: rgba(20, 90, 30, 0.92); color: #6ef06e; }
#map-notes { color: #a0aabe; padding: 0 calc(2 * var(--u)) calc(1 * var(--u)); font-size: 0.92em; }
#map-notes .short { color: #ffaa3c; }
#map-tip {
    position: absolute; pointer-events: none; max-width: calc(150 * var(--u));
    background: rgba(8, 10, 40, 0.88); border: 1px solid #5a64a0; border-radius: calc(1.5 * var(--u));
    padding: calc(1 * var(--u)) calc(2 * var(--u)); font-size: calc(5 * var(--u)); line-height: 1.3; color: #ebebeb;
}
#map-tip .name { font-weight: bold; }
#map-tip .short { color: #ffaa3c; }
#map-tip .route { color: #50dcff; }
#map-tip .ok { color: #6ef06e; }
#map-tip .dim { color: #a0aabe; }
#map-tip .trade { color: #ffd75a; }
.overlay {
    position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; background: rgba(4, 6, 24, 0.92); text-align: center; padding: 16px;
}
.overlay[hidden] { display: none; }
h1 { margin: 0; font-size: clamp(28px, 6vw, 56px); letter-spacing: 0.04em; }
.sub { margin: 4px 0 24px; color: #9aa3d6; }
.hint { color: #9aa3d6; max-width: 34em; font-size: 14px; line-height: 1.4; }
button, .filebutton {
    font: inherit; font-size: 18px; color: #fff; background: #2f3fbf; border: 0; border-radius: 10px;
    padding: 12px 28px; margin: 6px; cursor: pointer;
}
button:hover, .filebutton:hover { background: #4152d6; }
a.link { color: #8fa2ff; }
a.button {
    display: block; text-align: center; text-decoration: none; font-size: 18px; color: #fff;
    background: #2f3fbf; border-radius: 10px; padding: 12px 28px; margin: 6px;
}
#play { font-size: 24px; padding: 16px 56px; }
.filebutton input { display: none; }
#corner {
    position: fixed; top: max(6px, env(safe-area-inset-top)); right: max(6px, env(safe-area-inset-right));
    z-index: 5; display: flex; gap: 4px;
}
#corner[hidden] { display: none; }
#corner button { padding: 6px 12px; margin: 0; font-size: 20px; background: rgba(40, 50, 110, 0.5); }
#pad {
    position: fixed; right: max(6px, env(safe-area-inset-right)); top: 54px; z-index: 4;
    display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 12px;
    background: rgba(8, 10, 40, 0.55); touch-action: none;
}
#pad[hidden] { display: none; }
#pad .row { display: flex; gap: 4px; justify-content: flex-end; }
#pad button {
    margin: 0; padding: 0; width: 46px; height: 42px; font-size: 16px; border-radius: 8px;
    background: rgba(47, 63, 191, 0.75); touch-action: none;
}
#pad button.wide { width: 74px; }
#pad button.down { background: rgba(110, 240, 110, 0.85); color: #000; }
/* trade helper (tradeui.js) */
#trade {
    position: fixed; z-index: 5; right: max(6px, env(safe-area-inset-right)); top: 54px;
    width: min(32em, calc(100vw - 12px)); max-height: calc(100vh - 64px); overflow: auto; box-sizing: border-box;
    background: rgba(8, 10, 40, 0.93); border: 1px solid #5a64a0; border-radius: 12px; padding: 8px 12px 10px;
    font-size: 14px; line-height: 1.35; color: #ebebeb; text-align: left; touch-action: pan-y;
    -webkit-user-select: text; user-select: text;
}
#trade[hidden] { display: none; }
#trade .head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#trade .head button { padding: 4px 12px; margin: 0; font-size: 16px; background: rgba(40, 50, 110, 0.8); }
#trade .where { font-size: 16px; font-weight: bold; color: #6ef06e; margin-top: 4px; }
#trade h3 { font-size: 14px; margin: 10px 0 2px; color: #50dcff; }
#trade p { margin: 4px 0; }
#trade table { border-collapse: collapse; width: 100%; margin: 2px 0; }
#trade th { font-weight: normal; font-size: 12px; color: #a0aabe; text-align: right; padding: 0 4px; white-space: nowrap; }
#trade td { padding: 2px 4px; text-align: right; white-space: nowrap; border-top: 1px solid #262c55; }
#trade .n, #trade .to { text-align: left; }
#trade td.to { max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
#trade td.p { color: #ffd75a; }
#trade .short { color: #ffaa3c; }
#trade .dim { color: #a0aabe; }
#trade .note { color: #a0aabe; font-size: 12.5px; margin-top: 10px; }
#typing { position: fixed; left: -1000px; top: 0; width: 10px; height: 10px; opacity: 0; }
#menu .panel {
    background: #151931; border-radius: 14px; padding: 18px 22px; max-width: 30em; width: 100%;
    max-height: 90vh; overflow: auto; display: flex; flex-direction: column; align-items: stretch;
}
#menu h2, #menu h3 { margin: 6px 0; }
#saves { list-style: none; padding: 0; margin: 6px 0; text-align: left; }
#saves li { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #262c55; }
#saves li button { font-size: 14px; padding: 6px 12px; margin: 2px; }
#saves .none { color: #9aa3d6; }