.g-storm{--g-storm: #6aa8d4;--g-storm-deep: #3f7ba8;width:min(640px,100%);display:flex;flex-direction:column;gap:.6rem}.g-storm__picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.7rem;width:min(640px,100%)}.g-storm__cat{appearance:none;display:flex;flex-direction:column;gap:.3rem;padding:1rem 1.1rem;border-radius:1rem;border:1.5px solid color-mix(in srgb,#6aa8d4 32%,transparent);background:color-mix(in srgb,var(--g-cream) 92%,white);cursor:pointer;text-align:left;box-shadow:0 8px 18px var(--g-shadow);transition:transform .15s ease,border-color .15s;animation:g-rise .35s ease both}.g-storm__cat:hover{transform:translateY(-3px);border-color:var(--g-coral)}.g-storm__cat-label{font-family:var(--g-font-display);font-weight:700;font-size:1.05rem;color:#3f7ba8}.g-storm__cat-lead{font-size:.9rem;line-height:1.4;color:var(--g-muted)}.g-storm__hud{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;font-family:var(--g-font-display);font-weight:600}.g-storm__clock,.g-storm__score,.g-storm__combo{padding:.22rem .75rem;border-radius:999px;font-size:.95rem;background:color-mix(in srgb,#6aa8d4 16%,white);color:#3f7ba8;font-variant-numeric:tabular-nums}.g-storm__clock.is-low{background:color-mix(in srgb,var(--g-coral) 20%,white);color:var(--g-coral-deep);animation:g-storm-pulse .8s ease-in-out infinite alternate}.g-storm__combo{background:color-mix(in srgb,var(--g-sage) 20%,white);color:var(--g-sage-deep)}.g-storm__combo.is-double{background:color-mix(in srgb,#e0b35a 30%,white);color:#8a6a1f}.g-storm__combo[hidden]{display:none}.g-storm__field{position:relative;width:100%;height:min(58vh,420px);min-height:260px;border-radius:1.1rem;overflow:hidden;background:radial-gradient(ellipse 60% 40% at 20% 0%,#e8f2fa 0%,transparent 60%),linear-gradient(180deg,#f3f8fc,#e6eef4);border:1.5px solid color-mix(in srgb,#6aa8d4 30%,transparent);box-shadow:inset 0 8px 20px #3f7ba814;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.g-storm__field:focus-visible{outline:3px solid var(--g-coral);outline-offset:2px}.g-storm__basket{position:absolute;bottom:.4rem;left:50%;width:20%;height:2.6rem;transform:translate(-50%);border-radius:.3rem .3rem .9rem .9rem;background:linear-gradient(180deg,#f0a882 0 22%,#e07a5f 22%);box-shadow:0 6px 14px #1f2a2440;transition:left .06s linear}.g-storm__basket:before{content:"";position:absolute;left:50%;top:-.75rem;width:55%;height:.9rem;transform:translate(-50%);border:3px solid #c45c42;border-bottom:none;border-radius:.7rem .7rem 0 0}.g-storm__drop{position:absolute;top:0;left:50%;max-width:42%;padding:.3rem .6rem;border-radius:.55rem;font-family:var(--g-font-display);font-weight:600;font-size:.8rem;line-height:1.2;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:transform;pointer-events:none;box-shadow:0 4px 10px #1f2a242e}.g-storm__drop--gift{background:#fff6ef;border:1.5px solid var(--g-coral);color:var(--g-coral-deep)}.g-storm__drop--bad{background:#eef0ee;border:1.5px dashed #98a29b;color:#6b756e}.g-storm__drop--double,.g-storm__drop--time{background:linear-gradient(180deg,#fdf3d8,#f6e3ad);border:1.5px solid #d4b45a;color:#8a6a1f}.g-storm__drop.is-caught{animation:g-storm-pop .2s ease-out forwards;filter:brightness(1.15)}.g-storm__flash{margin:0;min-height:1.3rem;text-align:center;font-family:var(--g-font-display);font-weight:600;font-size:.95rem;color:var(--g-muted)}.g-storm__flash.is-good{color:var(--g-sage-deep)}.g-storm__flash.is-bad{color:var(--g-coral-deep)}.g-storm__flash.is-bonus{color:#8a6a1f}.g-storm__result{text-align:center;animation:g-rise .35s ease both}.g-storm__total{margin:0;font-family:var(--g-font-display);font-weight:700;font-size:2.4rem;color:#3f7ba8;font-variant-numeric:tabular-nums}.g-storm__stats,.g-storm__best,.g-storm__note{margin:.35rem 0 0;color:var(--g-muted);font-size:.95rem;line-height:1.5}.g-storm__best{font-family:var(--g-font-display);font-weight:600;color:var(--g-sage-deep)}@keyframes g-storm-pulse{0%{transform:scale(1)}to{transform:scale(1.06)}}@keyframes g-storm-pop{0%{opacity:1}to{opacity:0}}@media(max-width:520px){.g-storm__field{height:min(52vh,360px)}.g-storm__drop{font-size:.72rem;max-width:48%}}