@import url("/src/theme.css");
*{box-sizing:border-box}body{height:100dvh;display:flex;flex-direction:column;margin:0;background:#111c1b;color:#dee2e9;font:14px system-ui}header{min-height:52px;gap:12px;padding:6px 18px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #1c355b}h1{font-size:16px;margin:0}small{color:#9ca9bc;letter-spacing:2px;font-size:10px}a{color:#b3bbc5}main{display:grid;grid-template-columns:245px 1fr;gap:18px;padding:18px;flex:1;min-height:0}aside{overflow:auto;display:flex;flex-direction:column;gap:13px;padding-right:10px}label{display:block;color:#a6b1c2;font-size:12px}select{display:block;width:100%;margin-top:5px}select,button{background:#152845;color:#dee2e6;border:1px solid #284c83;border-radius:5px;padding:8px;font:inherit}button{cursor:pointer}button:hover{background:#213f6c}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #b3bbc5}input[type=range]{display:block;width:100%}.check{display:flex;align-items:center;gap:6px}section{min-width:0;display:flex;flex-direction:column;min-height:0}.toolbar{display:flex;gap:5px;align-items:center;margin-left:auto}.toolbar output{min-width:58px;text-align:right;color:#b3bbc5;font-variant-numeric:tabular-nums}.stage{flex:1;min-height:350px;border:1px solid #234271;border-radius:8px;overflow:hidden}canvas{width:100%;height:100%;display:block}.hint{color:#9dacaa;font-size:12px;line-height:1.5;margin:5px 0}#status{font-size:12px;min-height:18px;color:#abb5c0;margin:8px 0}output{color:#b3bbc5}@media(max-width:900px){main{grid-template-columns:190px 1fr;padding:10px;gap:10px}button{font-size:11px;padding:7px}}
.compass-field{border:0;padding:0;margin:0;color:#a6b1c2;font-size:12px}.compass-field legend{margin-bottom:7px}.compass{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;max-width:180px;margin:0 auto}.compass button{padding:3px;display:flex;align-items:center;justify-content:center;gap:5px;min-height:33px}.compass b{font-size:19px;font-weight:400}.compass small{font-size:9px;letter-spacing:0;color:inherit}.compass button[aria-pressed=true]{color:#0e1b2e;background:#adb7c2;border-color:#cbd1d7}.compass-center{display:grid;place-items:center;color:#94a2b6}.compass-center b{font-size:26px}.compass-field output{display:block;text-align:center;margin-top:5px}
select[hidden]{display:none}section{overflow:auto}.stage{flex-shrink:0}#view{font-size:12px}

label[hidden]{display:none}

.segmented{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px;padding:3px;border:1px solid #284c83;border-radius:7px;background:#101e32}
.segmented button{flex:1 1 auto;min-height:36px;padding:7px 9px;border-color:transparent;border-radius:4px;font-size:12px;line-height:1.3}
.segmented button[aria-pressed=true]{background:#adb7c2;color:#0e1b2e;border-color:#cbd1d7}
.segmented button:disabled{opacity:.4;cursor:not-allowed}
.segmented button:focus-visible{outline:2px solid #e4e8db;outline-offset:1px}

.toolbar button,.back-link{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:20px;line-height:1;flex-shrink:0}.toolbar button[hidden]{display:none}.back-link{text-decoration:none;border-radius:5px}.back-link:hover{background:#213f6c}.back-link:focus-visible{outline:2px solid #b3bbc5}@media(max-width:600px){header{gap:6px;padding:6px 10px;flex-wrap:wrap}header>div:first-child{flex:1}header small{display:none}h1{font-size:14px}.toolbar{gap:3px}.toolbar output{min-width:48px;font-size:11px}}

.subject-control{display:flex;align-items:center;gap:8px;flex-shrink:0}.subject-control select{width:auto;max-width:220px;height:34px;margin:0;padding:4px 8px;font-size:12px}header{flex-wrap:wrap}@media(max-width:600px){.subject-control{gap:5px}.subject-control select{max-width:190px}.toolbar{flex-wrap:wrap}.toolbar output{overflow-wrap:anywhere;min-width:0}}

.subject-control{min-width:0;flex-shrink:1;flex-wrap:wrap}.subject-control .segmented{margin-top:0;gap:2px;padding:2px}.subject-control .segmented button{min-height:28px;padding:4px 8px;font-size:12px}.subject-control select[hidden]{display:none}
main.sprite-gallery{grid-template-columns:minmax(0,1fr)}main.sprite-gallery aside{display:none}
#battlefield-links{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;padding:4px 0 12px}#battlefield-links[hidden]{display:none}#battlefield-links a{padding:5px 0}