:root{color-scheme:dark;--accent:#e5bd72;--bg:#10171c;--panel:#19232b;--muted:#82949d}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#eaf1ef;font:14px Manrope,system-ui,sans-serif;overflow:hidden;touch-action:none}button,a{ -webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:#233039;border:1px solid #42515b;border-radius:10px;min-width:44px;min-height:44px;cursor:pointer;transition:background .16s,transform .16s,border-color .16s}button:hover{background:#344650;transform:translateY(-1px)}button:active{transform:scale(.95)}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,#1b252b)}button:disabled{opacity:.35;cursor:default}header{height:72px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px;border-bottom:1px solid #ffffff0d;background:#111a20}h1,h2{font-family:'Barlow Condensed',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;margin:0}h1{font-size:23px}header small{font-size:10px;color:var(--muted);letter-spacing:.19em;text-transform:uppercase}header .center{position:absolute;left:50%;transform:translateX(-50%);color:var(--accent);font-variant-numeric:tabular-nums}header nav{display:flex;gap:8px}main{position:absolute;inset:72px 0 104px}canvas{width:100%;height:100%;display:block;touch-action:none}footer{position:absolute;bottom:0;left:0;right:0;min-height:104px;display:flex;align-items:center;justify-content:center;gap:12px;background:#152028ed;border-top:1px solid #ffffff12;padding:12px 20px calc(12px + env(safe-area-inset-bottom));flex-wrap:wrap}.tools{display:flex;gap:6px;align-items:center}.tools button{font-size:22px}.caption{color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.pill{padding:8px 12px;background:#0b1217;border-radius:8px;border:1px solid #ffffff10}.status{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:12px;color:#b7c6c9;background:#111a20e8;padding:8px 16px;border-radius:20px;max-width:95%;text-align:center;pointer-events:none}.primary{background:var(--accent);color:#172026;border:0;font-weight:700;padding:0 22px}.overlay{position:fixed;inset:0;background:#081015c9;backdrop-filter:blur(8px);z-index:5;display:grid;place-items:center;padding:24px;touch-action:auto}.overlay[hidden]{display:none}.dialog{max-width:490px;width:100%;border:1px solid #6d7e8355;background:#19242af5;border-radius:20px;padding:30px;box-shadow:0 30px 100px #0008;position:relative}.dialog h2{color:var(--accent);font-size:32px;margin-bottom:16px}.dialog p{line-height:1.8;color:#bbcbce}.dialog .close{position:absolute;right:12px;top:12px;min-width:32px;min-height:32px}.dialog .buttons{display:flex;gap:8px;margin-top:24px}.dialog a{color:var(--accent)}.swatch{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:middle}.order{display:flex;align-items:center;gap:5px;padding:5px 8px;background:#0e171e;border-radius:12px}.order button{min-height:30px;min-width:28px;font-size:14px}.order .portrait{min-width:44px;min-height:44px;font-size:24px}.order .portrait svg{width:28px;height:28px;display:block}.order .portrait.foe{border-color:#7d4548}.order .portrait.done{box-shadow:inset 0 0 0 2px #79d7b0}.order{flex-direction:column;gap:2px}.tiny{font-size:11px;color:var(--muted)}@media(max-width:650px){header{padding:10px 12px;height:64px}h1{font-size:17px;letter-spacing:.03em}header small{display:none}header .center{position:static;transform:none;font-size:12px}main{top:64px;bottom:148px}footer{min-height:148px;padding:10px;gap:7px}.tools{gap:4px}button{min-width:40px;min-height:40px}.order{gap:2px;padding:4px}.order button{min-width:24px}.caption{font-size:9px}.status{font-size:10px;padding:6px 10px}.dialog{padding:24px}}
@media(max-height:500px) and (min-width:651px){header{height:48px;padding:4px 16px}header small{display:none}h1{font-size:18px}main{top:48px;bottom:68px}footer{min-height:68px;padding:6px 12px;gap:10px}.status{bottom:3px;padding:4px 10px;font-size:10px}}