abse/gameboy-advance

web/style.css

:root{color-scheme:dark;--bg:#080b0c;--panel:#111819;--line:#283332;--ink:#dce9e0;--muted:#80958a;--accent:#b9ef81}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:13px ui-monospace,SFMono-Regular,Consolas,monospace}main{width:min(960px,94vw);margin:5vh auto 40px}.screen-wrap{position:relative;aspect-ratio:3/2;width:100%;background:#030505;border:1px solid #202b27;overflow:hidden;border-radius:8px}canvas{width:100%;height:100%;display:block;image-rendering:pixelated;outline:none}canvas:focus-visible{outline:1px solid var(--accent);outline-offset:-1px}.game-menu{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8%;background:#0b1011;z-index:2}.game-menu[hidden]{display:none}.game-card{width:30%;max-width:210px;aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;border:1px solid #33403b;border-radius:12px;background:#131d19;color:var(--ink);font:700 clamp(11px,2vw,17px) ui-monospace,monospace;letter-spacing:2px;cursor:pointer}.game-card:hover,.game-card:focus-visible{background:#1f3024;border-color:var(--accent);outline:none;transform:translateY(-2px)}.doom-art{display:grid;place-content:center;width:60%;aspect-ratio:1;font:bold clamp(45px,9vw,90px) Georgia,serif;color:#d4a35b;text-shadow:3px 3px #63342a;background:linear-gradient(145deg,#3a3323,#181613);border-radius:10px}.star-art{display:grid;place-content:center;width:60%;aspect-ratio:1;font-size:clamp(50px,9vw,100px);color:#83d9bf;background:#17302a;border-radius:10px}.toolbar{display:flex;justify-content:center;gap:10px;padding:13px}button,.file-button,select{border:1px solid var(--line);border-radius:5px;background:var(--panel);color:var(--ink);font:inherit;padding:9px 13px;cursor:pointer}button:hover,.file-button:hover{border-color:var(--muted)}button:focus-visible,.file-button:focus-visible,select:focus-visible{outline:1px solid var(--accent);outline-offset:3px}button:disabled{opacity:.3;cursor:default}.toolbar button{width:45px;height:37px;padding:0;font-size:21px;background:transparent;border-color:transparent}.toolbar button:hover{background:var(--panel)}#paused{position:absolute;inset:0;background:#03050590;place-content:center;text-align:center;font-size:50px;pointer-events:none}#paused:not([hidden]){display:grid}details{border-top:1px solid #1d2924;margin-top:6px;padding:14px 3px;color:var(--muted)}summary{cursor:pointer;width:fit-content;font-size:12px;user-select:none}details[open]>summary{margin-bottom:18px}.touch-controls{display:flex;justify-content:center;gap:clamp(20px,9vw,100px);align-items:center;margin:18px 0 24px}.touch-controls button{touch-action:none;user-select:none;min-width:40px;height:40px;padding:6px}.dpad{display:grid;grid-template-columns:repeat(3,40px);gap:4px}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1;grid-row:2}.dpad button:nth-child(3){grid-column:2;grid-row:2}.dpad button:nth-child(4){grid-column:3;grid-row:2}.face-buttons{display:grid;grid-template-columns:repeat(2,40px);gap:6px}.face-buttons button{border-radius:50%}.touch-controls .accent{color:var(--accent);border-color:#6d9253}.system-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.system-buttons button{height:28px;font-size:10px}.touch-controls button.pressed{background:#527a38;color:white}.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 20px;font-size:11px}.keys span{display:flex;justify-content:space-between;gap:10px}kbd{font:inherit;color:var(--ink)}.advanced-grid{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.advanced-grid label{font-size:12px}.advanced-grid select{margin-left:8px}.file-button{display:inline-block}.metrics{display:flex;justify-content:space-between;font-size:10px;margin-top:20px;gap:10px}#status,#save-status{font-size:12px;line-height:1.5;color:#d9c9a7}pre{max-height:180px;overflow:auto;white-space:pre-wrap;font-size:10px}#save-name-form:not([hidden]){display:flex;justify-content:center;align-items:center;gap:10px;padding:10px}#save-name{margin-left:10px;border:1px solid var(--line);border-radius:5px;padding:9px;background:var(--panel);color:var(--ink);max-width:180px}.screen-wrap:fullscreen{border:0;border-radius:0;width:100vw;height:100vh;background:black;display:grid;place-content:center;aspect-ratio:auto}.screen-wrap:fullscreen canvas{width:min(100vw,150vh);height:min(66.666vw,100vh)}@media(max-width:600px){main{margin-top:3vh}.keys{grid-template-columns:repeat(2,1fr)}.touch-controls{gap:14px;justify-content:space-between}.game-card{gap:12px;border-radius:7px}.game-menu{gap:10%}.advanced-grid{gap:8px}.advanced-grid button,.file-button{font-size:11px}#save-name-form{font-size:11px}}