:root {
    color-scheme: dark;
    --hws-background: #111820;
    --hws-surface: #18232d;
    --hws-screen: #080c10;
    --hws-text: #e0ece6;
    --hws-accent: #52e29c;
    --hws-border: #547064;
    --hws-font: ui-monospace, monospace;
    --hws-spacing: 1rem;
    --hws-radius: 0.25rem;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    padding: var(--hws-spacing);
    font-family: var(--hws-font);
    color: var(--hws-text);
    background: var(--hws-background);
}
.player {
    max-width: 60rem;
    margin: 2rem auto;
    padding: var(--hws-spacing);
    background: var(--hws-surface);
    border: 1px solid var(--hws-border);
    border-radius: var(--hws-radius);
}
body.embedded { padding: 0; }
.embedded .player { margin: 0; max-width: none; border: 0; height: 100dvh; display: flex; flex-direction: column; gap: .5rem; padding: .5rem; overflow: hidden; }
.embedded .player > section { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.embedded canvas { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.embedded.host-controls nav[aria-label="Player controls"] { display: none; }
.embedded.host-controls #status { display: none; }
.embedded.host-controls .player { padding: 0; gap: 0; }
.embedded.fixed-zoom .player > section { overflow: auto; display: block; }
.embedded.fixed-zoom canvas { max-width: none; max-height: none; margin: auto; }
.embedded #status { flex-shrink: 0; margin: 0; padding: .35rem .5rem; font-size: .75rem; max-height: 5rem; overflow: auto; }
.embedded .player > header, .embedded .notice, .embedded .player > .configuration { display: none; }
.embedded nav[aria-label="Player controls"] { flex-shrink: 0; margin: 0; }
.embedded nav[aria-label="Player controls"] > label { margin-left: auto; }
h1, h2 { color: var(--hws-accent); }
h2 { font-size: 1rem; }
.notice { line-height: 1.6; }
#status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    line-height: 1.5;
    background: var(--hws-screen);
    border-left: 3px solid var(--hws-accent);
    border-radius: var(--hws-radius);
}
.status-state { color: var(--hws-accent); font-weight: bold; }
.status-rom { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: normal; }
.status-mapper { padding: 0.15rem 0.5rem; border: 1px solid var(--hws-border); border-radius: var(--hws-radius); }
.status-warning { flex-basis: 100%; font-size: 0.85rem; }
#setup-file { overflow-wrap: anywhere; color: var(--hws-accent); }
#setup-address { padding: 0.65rem; color: var(--hws-text); background: var(--hws-screen); border: 1px solid var(--hws-border); font: inherit; }
canvas {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    image-rendering: pixelated;
    background: var(--hws-screen);
    object-fit: contain;
}
nav, .configuration { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
label { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
input[type="file"] { max-width: 100%; }
button, select {
    padding: 0.7rem;
    font: inherit;
    color: var(--hws-text);
    background: var(--hws-screen);
    border: 1px solid var(--hws-border);
    border-radius: var(--hws-radius);
    cursor: pointer;
}
button:focus-visible, select:focus-visible, canvas:focus-visible, button:hover:not(:disabled) { outline: 2px solid var(--hws-accent); }
button:disabled { opacity: 0.5; cursor: default; }
.danger-icon-button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: .55rem; color: #ff5c70; border-color: #ff5c70; }
.danger-icon-button:hover:not(:disabled) { color: #fff; background: #b4233c; border-color: #ff5c70; }
.danger-icon-button svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.danger-button { color: #ff5c70; border-color: #ff5c70; }
.danger-button:hover:not(:disabled) { color: #fff; background: #b4233c; border-color: #ff5c70; }
a { color: var(--hws-accent); }
body.amber { --hws-accent: #ffca70; --hws-border: #937341; }
dialog {
    width: min(58rem, 95vw);
    max-height: 90vh;
    overflow: auto;
    padding: var(--hws-spacing);
    color: var(--hws-text);
    background: var(--hws-surface);
    border: 1px solid var(--hws-border);
    border-radius: var(--hws-radius);
}
dialog::backdrop { background: #000b; }
.library-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--hws-spacing); }
.library-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hws-spacing); margin: var(--hws-spacing) 0; }
#rom-tree { display: block; max-height: 45vh; overflow: auto; background: var(--hws-screen); padding: 0.5rem; }
#rom-tree ul { list-style: none; padding-left: 1rem; margin: 0.25rem 0; }
#rom-tree > ul { padding-left: 0; }
#rom-tree button { width: 100%; text-align: left; overflow-wrap: anywhere; margin: 0.15rem 0; }
#rom-tree button[aria-pressed="true"] { outline: 2px solid var(--hws-accent); }
#rom-tree summary { cursor: pointer; padding: 0.5rem; color: var(--hws-accent); }
#rom-info { overflow-wrap: anywhere; }
#rom-info dt { font-weight: bold; color: var(--hws-accent); margin-top: 0.6rem; }
#rom-info dd { margin: 0.2rem 0; }
.library-import { flex-direction: column; align-items: flex-start; }
.mapper-menu { display: flex; flex-wrap: wrap; gap: 0.5rem; border: 1px solid var(--hws-border); margin: var(--hws-spacing) 0; }
.mapper-menu label { padding: 0.5rem; background: var(--hws-screen); cursor: pointer; border: 1px solid var(--hws-border); border-radius: var(--hws-radius); }
.mapper-menu label:has(input:checked) { border-color: var(--hws-accent); color: var(--hws-accent); }
@media (max-width: 40rem) {
    body:not(.embedded) {
        padding: 0.5rem;
    }
    .player {
        margin: 0.5rem auto;
        padding: 0.75rem;
    }
    dialog {
        padding: 0.75rem;
        max-height: 95vh;
    }
    .library-layout {
        grid-template-columns: 1fr;
    }
}