#ui{padding:calc(10px + env(safe-area-inset-top)) 16px calc(12px + env(safe-area-inset-bottom));pointer-events:none;flex-direction:column;justify-content:space-between;font-family:system-ui,sans-serif;display:flex;position:fixed;inset:0}#ui .bottom{flex-direction:column;align-items:center;gap:8px;display:flex}#ui .hud{flex-wrap:wrap;align-items:center;gap:6px;display:flex}#ui .hud>*{pointer-events:auto}#ui .home{color:#2f3a30;background:#f3ead2;border-radius:50%;place-items:center;width:34px;height:34px;font-size:20px;font-weight:700;text-decoration:none;display:grid;box-shadow:0 2px #c9b98f}#ui .pill{color:#f2c46b;background:#0005;border-radius:999px;padding:6px 10px;font-size:14px;font-weight:700}#ui .pill.twig{color:#b6e39a}#ui .pill.res{color:#e2c39b}#ui .hud button{min-height:34px;padding:0 12px;font-size:14px}#ui .hud button.eggs.has{background:#f2a33a;box-shadow:0 2px #b8741f}#ui .hud button.debug{color:#e2e8f0;box-shadow:none;background:#4a5568;margin-left:auto}#ui .swatch.egg{background:#d8cfbd;border-radius:50%;width:16px;height:20px}#ui .empty{color:#f3ead2;opacity:.8;grid-column:1/-1;margin:4px 0}#ui .bar{pointer-events:auto;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;max-width:560px;display:flex}#ui button{color:#2f3a30;min-height:44px;font:inherit;cursor:pointer;background:#f3ead2;border:0;border-radius:12px;padding:0 16px;font-weight:600;box-shadow:0 2px #c9b98f}#ui button.primary{color:#2b1d0a;background:#f2a33a;box-shadow:0 2px #b8741f}#ui button:disabled{opacity:.45;cursor:default}#ui .label{text-align:center;color:#f3ead2;text-shadow:0 1px 2px #0006;width:100%;font-weight:600}#ui .sheet{background:#24392d;border-radius:16px;width:min(560px,100vw - 32px);max-height:55dvh;padding:12px;overflow-y:auto;box-shadow:0 4px 16px #0006}#ui .sheet-head{color:#f3ead2;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:700;display:flex}#ui .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;display:grid}#ui .grid button{text-align:left;align-items:center;gap:8px;padding:8px 10px;display:flex}#ui .grid small{opacity:.6;margin-left:auto}#ui .swatch{border-radius:4px;flex:none;width:18px;height:18px}#ui .toast{color:#fff;opacity:0;background:#000a;border-radius:10px;padding:8px 14px;transition:opacity .2s}#ui .toast.show{opacity:1}#ui .grid h4,#ui .grid .row,#ui .tabs{color:#f3ead2;grid-column:1/-1;margin:4px 0 0}#ui .grid h4 small{opacity:.6;font-weight:400}#ui .grid .row{align-items:center;gap:10px;display:flex}#ui .grid .row button{min-height:34px}#ui .grid .note{opacity:.7;font-size:14px}#ui .tabs{gap:6px;display:flex}#ui .tabs button{color:#f3ead2;min-height:36px;box-shadow:none;background:#3a5444}#ui .tabs button.on{color:#2f3a30;background:#f3ead2}#ui .dot{vertical-align:middle;background:#e5484d;border-radius:50%;width:9px;height:9px;margin-left:4px;display:inline-block}#ui .swatch.egg.t2{background:#cfe0c3}#ui .swatch.egg.t3{background:#c9dbe8}#ui .swatch.egg.t4{background:#ead1b0}#ui .swatch.egg.t5{background:#e2c4dc}#ui .swatch.egg.t6{background:#f0e1a0}#ui button{transition:transform .14s cubic-bezier(.3,1.6,.5,1)}#ui button:active:not(:disabled){transform:scale(.9)}@media (hover:hover){#ui button:hover:not(:disabled){transform:translateY(-2px)scale(1.04)}}#ui .bar.pop{animation:.36s cubic-bezier(.3,1.5,.5,1) both ui-pop}#ui .bump{animation:.45s cubic-bezier(.3,1.8,.5,1) ui-bump}#ui .toast{transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1);transform:translateY(10px)scale(.85)}#ui .toast.show{transform:none}#ui .dot{animation:1.2s ease-in-out infinite ui-throb}@keyframes ui-pop{0%{opacity:0;transform:translateY(18px)scale(.92)}to{opacity:1;transform:none}}@keyframes ui-bump{35%{transform:scale(1.25)}}@keyframes ui-throb{50%{transform:scale(1.35)}}@media (prefers-reduced-motion:reduce){#ui *,#ui .bar.pop{transition:none!important;animation:none!important}}#tutorial{z-index:5;pointer-events:none;font-family:system-ui,sans-serif;position:fixed;inset:0}#tutorial .tut-card{color:#2f3a30;pointer-events:auto;background:#fff8e7;border-radius:18px;width:min(360px,100vw - 32px);padding:14px 16px 12px;transition:top .35s cubic-bezier(.3,1.4,.5,1);position:absolute;left:50%;transform:translate(-50%);box-shadow:0 4px #c9b98f,0 10px 24px #0005}#tutorial .tut-card.pop{animation:.4s cubic-bezier(.3,1.6,.5,1) both tut-pop}#tutorial .tut-head{justify-content:space-between;align-items:baseline;gap:8px;font-size:18px;display:flex}#tutorial .tut-head small{opacity:.5;font-size:13px}#tutorial p{margin:6px 0 10px;line-height:1.4}#tutorial .tut-buttons{justify-content:flex-end;align-items:center;gap:8px;display:flex}#tutorial button{min-height:40px;font:inherit;cursor:pointer;border:0;border-radius:12px;padding:0 16px;font-weight:600}#tutorial .tut-next{color:#2b1d0a;background:#f2a33a;box-shadow:0 2px #b8741f}#tutorial .tut-skip{color:#7a6a50;background:0 0;margin-right:auto;padding:0 4px;font-weight:500;text-decoration:underline}#tutorial .tut-ring{border:4px solid #ffe066;border-radius:50%;animation:1.1s ease-in-out infinite tut-pulse;position:absolute;box-shadow:0 0 12px #ffe066}#tutorial .tut-arrow{filter:drop-shadow(0 2px #b8741f)drop-shadow(0 2px 4px #0006);border:16px solid #0000;border-top:24px solid #ffe066;border-bottom:0;width:0;height:0;animation:.7s ease-in-out infinite alternate tut-bounce;position:absolute;transform:translate(-50%,-100%)}#tutorial .tut-arrow.up{border-top:0;border-bottom:24px solid #ffe066;animation-name:tut-bounce-up;transform:translate(-50%)}#ui .tut-glow{outline-offset:2px;outline:3px solid #ffe066}@keyframes tut-pop{0%{opacity:0;transform:translate(-50%)translateY(14px)scale(.9)}to{opacity:1;transform:translate(-50%)}}@keyframes tut-pulse{50%{opacity:.6;transform:scale(1.12)}}@keyframes tut-bounce{to{transform:translate(-50%,calc(-100% - 10px))}}@keyframes tut-bounce-up{to{transform:translate(-50%,10px)}}@media (prefers-reduced-motion:reduce){#tutorial *{transition:none!important;animation:none!important}}
