:root{--ink:#1a1a2e;--panel:#f6e7c8;--panel-dark:#e3cc9f;--accent:#ff9f1c;--ok:#4dff88;--bad:#ff4d4d;--crystal:#5ee7ff;--ether:#c58cff;font-family:Jua,system-ui,sans-serif}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);-webkit-user-select:none;user-select:none;background:#2a2438;margin:0;overflow:hidden}#game{position:fixed;inset:0}#game canvas{display:block}#hud{pointer-events:none;position:fixed;inset:0}#hud>*{pointer-events:auto}#resources{gap:8px;display:flex;position:absolute;top:10px;right:12px}.res{background:var(--panel);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);border-radius:12px;padding:4px 12px;font-size:18px}.res.crystal{color:#1b8fb0}.res.ether{color:#8a45d6}.res.supply.full{background:#ffb3b3}.res.time{color:#555}#toast{opacity:0;background:var(--bad);color:#fff;border:3px solid var(--ink);pointer-events:none;box-shadow:0 3px 0 var(--ink);border-radius:12px;padding:6px 16px;font-size:18px;transition:opacity .15s,transform .15s;position:absolute;top:64px;left:50%;transform:translate(-50%)scale(.9)}#toast.show{opacity:1;transform:translate(-50%)scale(1)}#toast.calm{background:#3b8bff}#bottom{background:var(--panel);border-top:4px solid var(--ink);grid-template-columns:188px 1fr 300px;gap:10px;height:188px;padding:10px;display:grid;position:absolute;bottom:0;left:0;right:0}#minimap{border:3px solid var(--ink);width:168px;height:168px;image-rendering:pixelated;cursor:pointer;background:#6fa85e;border-radius:6px}#selection{background:var(--panel-dark);border:3px solid var(--ink);border-radius:12px;padding:8px 14px;overflow:hidden}#selection h3{margin:0 0 4px;font-size:22px;font-weight:400}#selection p{margin:2px 0;font-size:16px}#selection .dim{color:#6b5a48}.queue,.counts{flex-wrap:wrap;gap:6px;margin-top:6px;display:flex}.queue span,.counts span{background:var(--panel);border:2px solid var(--ink);border-radius:8px;padding:2px 8px;font-size:14px}.queue span.cur{background:#7fd1ff}#card{grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:repeat(4,1fr);gap:6px;min-height:0;display:grid}.cmd{border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);cursor:pointer;color:var(--ink);background:#fff4dc;border-radius:10px;min-height:0;padding:12px 2px 2px;font-family:inherit;font-size:13px;line-height:1.05;position:relative;overflow:hidden}.cmd:hover:not(.empty):not(.disabled){background:#ffe6a8}.cmd:active:not(.empty){box-shadow:0 1px 0 var(--ink);transform:translateY(2px)}.cmd.active{background:var(--accent)}.cmd.disabled{opacity:.45}.cmd.empty{box-shadow:none;cursor:default;background:0 0;border-style:dashed;border-color:#c9b58c}.cmd .hk{color:#b0661a;font-size:12px;position:absolute;top:2px;left:5px}.cmd .cost{color:#1b8fb0;font-size:11px;display:block}#overlay{background:#1a1a2e8c;place-items:center;display:grid;position:fixed;inset:0}#overlay[hidden]{display:none}.panel{background:var(--panel);border:4px solid var(--ink);text-align:center;box-shadow:0 6px 0 var(--ink);border-radius:20px;max-width:min(92vw,560px);padding:28px 40px}.panel h1{-webkit-text-stroke:2px var(--ink);margin:0 0 8px;font-size:56px;font-weight:400}.panel h1.title{color:var(--accent)}.panel h1.win{color:var(--ok)}.panel h1.lose{color:var(--bad)}.panel button{background:var(--accent);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);cursor:pointer;border-radius:14px;margin-top:12px;padding:10px 32px;font-family:inherit;font-size:24px}.panel button:active{box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}.help{text-align:left;margin-top:16px;font-size:15px}.help summary{cursor:pointer;text-align:center}.help ul{padding-left:20px}.res.biomass{color:#3f9a1f}#menu-btn{background:var(--panel);border:3px solid var(--ink);width:40px;height:40px;box-shadow:0 3px 0 var(--ink);cursor:pointer;touch-action:manipulation;border-radius:12px;font-size:22px;line-height:1;position:absolute;top:8px;left:10px}#menu-btn:active{box-shadow:0 1px 0 var(--ink);transform:translateY(2px)}#settings{z-index:20;background:#1a1a2e8c;place-items:center;display:grid;position:fixed;inset:0}#settings[hidden]{display:none}.settings-panel h2{color:var(--accent);-webkit-text-stroke:1.5px var(--ink);margin:0 0 6px;font-size:34px;font-weight:400}.settings-panel .pick-label{width:110px}.settings-actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.settings-panel .settings-actions button{padding:8px 18px;font-size:19px}.settings-panel .settings-actions .restart,.settings-panel .settings-actions .leave{background:var(--panel-dark)}.settings-panel .settings-actions .surrender{background:var(--bad);color:#fff}.start-row{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.panel button#tutorial-start{background:#7fd1ff}#tutor{background:var(--panel);border:3px solid var(--ink);width:min(360px,46vw);box-shadow:0 4px 0 var(--ink);pointer-events:auto;z-index:5;border-radius:16px;padding:10px 14px 12px;font-size:15px;line-height:1.45;position:absolute;top:52px;right:12px}#tutor[hidden]{display:none}#tutor.pop{animation:.35s ease-out tut-pop}@keyframes tut-pop{0%{opacity:0;transform:scale(.85)}70%{opacity:1;transform:scale(1.04)}to{transform:scale(1)}}#tutor p{margin:6px 0 8px}#tutor b{color:#c2410c}.tut-head{align-items:center;gap:8px;font-size:19px;display:flex}.tut-head b{color:var(--ink);font-weight:400}.tut-step{background:var(--ink);color:var(--panel);border-radius:8px;padding:1px 8px;font-size:13px}.tut-actions{align-items:center;gap:8px;display:flex}.tut-goal{color:#7a6440;flex:1;font-size:13px}.tut-actions button{border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);cursor:pointer;background:var(--panel-dark);border-radius:10px;padding:4px 14px;font-family:inherit;font-size:15px}.tut-actions .tut-next{background:var(--accent);margin-right:auto}.tut-actions button:active{box-shadow:0 1px 0 var(--ink);transform:translateY(2px)}.cmd.hint,#quick button.hint{outline-offset:1px;outline:3px solid #fff27a;animation:.9s ease-in-out infinite tut-hint}@keyframes tut-hint{0%,to{box-shadow:0 0 #fff27ae6}50%{box-shadow:0 0 0 7px #fff27a00}}#relics{pointer-events:none;align-items:center;gap:8px;display:flex;position:absolute;top:10px;left:50%;transform:translate(-50%)}.relic-gem{border:3px solid var(--ink);width:18px;height:18px;box-shadow:0 2px 0 var(--ink);border-radius:3px;transform:rotate(45deg)}.gauge{background:var(--panel);border:3px solid var(--ink);border-radius:8px;width:110px;height:14px;overflow:hidden}.gauge i{height:100%;display:block}.relic-note{background:var(--panel);border:3px solid var(--ink);border-radius:10px;padding:2px 10px;font-size:15px}.relic-note.hot{background:var(--bad);color:#fff}.pick{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin:10px 0;display:flex}.pick-label{text-align:right;width:64px;font-size:17px}.choices{flex-wrap:wrap;gap:6px;display:flex}.panel .choices button{box-shadow:0 3px 0 var(--ink);background:#fff4dc;margin:0;padding:5px 12px;font-size:16px}.panel .choices button.on{background:var(--accent)}.race-blurb{color:#6b5a48;min-height:2.6em;margin:4px 0 8px;font-size:15px}#quick{flex-direction:column;gap:6px;display:flex;position:absolute;bottom:200px;left:10px}#quick button{background:var(--panel);border:3px solid var(--ink);min-width:52px;min-height:40px;box-shadow:0 3px 0 var(--ink);color:var(--ink);cursor:pointer;touch-action:manipulation;border-radius:12px;padding:4px 8px;font-family:inherit;font-size:15px;position:relative}#quick .qk{background:var(--ink);min-width:17px;height:17px;color:var(--panel);border:1px solid var(--panel);border-radius:6px;font-size:11px;line-height:15px;position:absolute;top:-7px;left:-7px}@media (hover:none){#quick .qk{display:none}}#quick button:active{box-shadow:0 1px 0 var(--ink);transform:translateY(2px)}.touch-only{display:none}@media (hover:none),(max-height:540px){.touch-only{display:block}}#quick button.on{background:var(--accent)}#quick button.cancel{background:var(--bad);color:#fff}#quick button[hidden],#rotate{display:none}#game canvas,#minimap,#card,#quick{touch-action:none}html,body{overscroll-behavior:none}@media (max-height:540px){#bottom{border-top-width:3px;grid-template-columns:112px minmax(0,1fr) minmax(250px,46%);gap:6px;height:142px;padding:6px}#minimap{width:110px;height:110px}#selection{padding:4px 8px}#selection h3{font-size:16px}#selection p{font-size:12px}.queue span,.counts span{padding:1px 5px;font-size:11px}#card{gap:4px}.cmd{border-width:2px;border-radius:8px;padding:10px 1px 1px;font-size:12px}.cmd .hk,.cmd .cost{font-size:9px}#resources{gap:4px;top:6px;right:6px}.res{border-width:2px;border-radius:8px;padding:2px 7px;font-size:13px}#relics{top:6px;left:52px;transform:none}.gauge{width:64px}.relic-note{font-size:11px}#quick{grid-template-columns:repeat(2,auto);gap:5px;display:grid;bottom:150px;left:6px}#quick button{min-width:50px;min-height:38px;font-size:13px}#card{flex-wrap:wrap;align-content:flex-start;gap:3px;display:flex;overflow-y:auto}.cmd.empty{display:none}.cmd{flex:0 0 calc(33.33% - 2px);min-height:37px;padding:10px 2px 2px;font-size:12.5px}#toast{font-size:14px;top:38px}#tutor{width:min(300px,42vw);max-height:calc(100vh - 180px);padding:6px 10px 8px;font-size:12.5px;line-height:1.35;top:36px;right:8px;overflow:auto}.tut-head{font-size:15px}#menu-btn{width:34px;height:34px;font-size:18px;top:6px}.settings-panel h2{font-size:24px}.settings-panel .pick{margin:5px 0}.settings-panel .settings-actions button{margin-top:6px;padding:5px 12px;font-size:15px}.panel{max-height:94vh;padding:14px 20px;overflow:auto}.panel h1{font-size:36px}}@media (orientation:portrait) and (max-width:700px){#rotate{background:var(--accent);border:3px solid var(--ink);white-space:nowrap;pointer-events:none;border-radius:12px;padding:4px 12px;font-size:14px;display:block;position:absolute;top:78px;left:50%;transform:translate(-50%)}#bottom{grid-template-rows:104px 1fr;grid-template-columns:110px minmax(0,1fr);height:252px}#minimap{width:104px;height:104px}#card{flex-wrap:wrap;grid-column:1/span 2;align-content:flex-start;gap:4px;display:flex;overflow-y:auto}.cmd.empty{display:none}.cmd{flex:0 0 calc(33.33% - 3px);min-height:40px;font-size:13px}#quick{grid-template-columns:repeat(2,auto);gap:5px;display:grid;bottom:260px}#relics{top:44px;left:52px;transform:none}.res{padding:2px 6px;font-size:12px}}#net{z-index:25;background:#1a1a2e8c;place-items:center;display:grid;position:fixed;inset:0}#net[hidden]{display:none}.net-panel h2{color:var(--accent);-webkit-text-stroke:1.5px var(--ink);margin:0 0 8px;font-size:32px;font-weight:400}.net-panel input{border:3px solid var(--ink);width:160px;color:var(--ink);-webkit-user-select:text;user-select:text;background:#fff4dc;border-radius:10px;padding:6px 10px;font-family:inherit;font-size:18px}.net-code{letter-spacing:10px;color:var(--ink);-webkit-text-stroke:2px var(--ink);margin:6px 0 2px;font-size:52px}.net-note{color:#6b5a48;margin:6px 0;font-size:14px}.net-error{color:var(--bad);margin:6px 0;font-size:15px}.net-status{margin:10px 0 4px;font-size:17px}.spin{animation:1s linear infinite net-spin;display:inline-block}@keyframes net-spin{0%{opacity:.2}50%{opacity:1}to{opacity:.2}}.panel button#online-start{background:#a0e86b}#netstat{background:var(--ink);color:var(--panel);pointer-events:none;border-radius:10px;padding:4px 14px;font-size:15px;position:absolute;top:96px;left:50%;transform:translate(-50%)}#netstat[hidden]{display:none}