:root{--panel-bg: rgba(32, 22, 12, .78);--panel-text: #f5e9d9;--accent: #ffd54a;--grass: #4e9c3f;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;overflow:hidden}body{background:#2b1d10;color:var(--panel-text)}.screen{height:100%;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(#5fa8e0 0%,#cfe8f7 55%,var(--grass) 55.5%,#8a5a33 62%,#42301d)}.screen-card{max-width:560px;background:var(--panel-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:16px;padding:28px 32px;box-shadow:0 12px 40px #00000073}.screen-card h1{margin:0 0 12px;font-size:2rem}.screen-card p{line-height:1.5;margin:0 0 16px}.controls-list,.stats-list{margin:0 0 20px;padding-left:20px;line-height:1.7}.stats-list{list-style:none;padding-left:0}button{font:inherit;border:none;border-radius:8px;padding:6px 12px;cursor:pointer;background:#ffffff24;color:var(--panel-text)}button:hover{background:#ffffff3d}button.active{background:var(--accent);color:#3a2a10}button.primary{background:var(--grass);color:#fff;font-size:1.05rem;padding:12px 24px}button.primary:hover{background:#5cb14b}.game{position:relative;height:100%}.game-canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none}.hud{position:absolute;inset:0;pointer-events:none;font-size:14px}.hud-panel{position:absolute;pointer-events:auto;display:flex;align-items:center;gap:12px;background:var(--panel-bg);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:10px;padding:8px 14px}.hud-colony{top:12px;left:12px}.hud-queen{top:12px;right:12px;flex-direction:column;align-items:flex-start;gap:6px}.hud-selection{bottom:12px;left:12px}.hud-hatch{bottom:12px;right:12px}.hud-dim{opacity:.75;font-size:13px}.fullness-track{width:150px;height:8px;border-radius:4px;background:#ffffff2e;overflow:hidden}.fullness-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#e07f9e,#f06fb0);transition:width .3s ease}.raid-banner{position:absolute;top:12px;left:50%;transform:translate(-50%);background:#aa2218e6;color:#fff;padding:8px 18px;border-radius:10px;font-weight:600;animation:raid-pulse 1s ease-in-out infinite}@keyframes raid-pulse{0%,to{opacity:1}50%{opacity:.65}}.toasts{position:absolute;bottom:60px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}.toast{background:var(--panel-bg);padding:7px 16px;border-radius:999px;white-space:nowrap;animation:toast-in .25s ease-out}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.skin-picker{display:flex;align-items:center;gap:10px;margin-bottom:18px}:root[data-skin=paint]{--panel-bg: #c0c0c0;--panel-text: #000000;--accent: #000080;font-family:Comic Sans MS,Comic Sans,Chalkboard SE,cursive}:root[data-skin=paint] body{background:teal}:root[data-skin=paint] .screen{background:teal}:root[data-skin=paint] .screen-card{border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border:2px solid;border-color:#ffffff #404040 #404040 #ffffff;padding-top:16px;position:relative}:root[data-skin=paint] .screen-card:before{content:"31ants.exe - untitled";display:block;background:navy;color:#fff;font-size:13px;padding:3px 8px;margin:-16px -32px 16px}:root[data-skin=paint] .hud-panel,:root[data-skin=paint] .toast,:root[data-skin=paint] .raid-banner{border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none;border:2px solid;border-color:#ffffff #404040 #404040 #ffffff}:root[data-skin=paint] .raid-banner{background:red;animation:none}:root[data-skin=paint] button{border-radius:0;background:silver;color:#000;border:2px solid;border-color:#ffffff #404040 #404040 #ffffff}:root[data-skin=paint] button:hover{background:#d4d4d4}:root[data-skin=paint] button:active{border-color:#404040 #ffffff #ffffff #404040}:root[data-skin=paint] button.active{background:navy;color:#fff}:root[data-skin=paint] button.primary{background:silver;color:#000;font-weight:700}:root[data-skin=paint] .fullness-track{border-radius:0;background:#fff;border:1px solid #404040}:root[data-skin=paint] .fullness-fill{border-radius:0;background:navy;transition:none}@media(max-width:640px){.hud{font-size:12.5px}.hud-panel{gap:8px;padding:6px 10px}.fullness-track{width:110px}.toasts{bottom:70px}}