:root{--bg: #1a1410;--bg-2: #241b12;--ink: #fdf6e3;--muted: #c9b79c;--gold: #f5a623;--line: rgba(245, 166, 35, .18);--amber: #e8821e;--gold-tile: #f7c948;--orange: #f25c33;--pollen: #ffe066;--sage: #9bbf6a}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%}body{background:radial-gradient(120% 80% at 50% -10%,#2a2014 0%,var(--bg) 60%) fixed;color:var(--ink);font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif;overscroll-behavior:none;-webkit-user-select:none;user-select:none}#root{min-height:100%}.app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 14px env(safe-area-inset-bottom);gap:12px}.hud{display:flex;align-items:center;justify-content:space-between;padding-top:14px}.brand{display:flex;align-items:center;gap:8px}.brand__bee{font-size:28px;animation:buzz 2.4s ease-in-out infinite}.brand__title{margin:0;font-size:26px;letter-spacing:.5px;background:linear-gradient(180deg,#ffe9a8,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 1px 0 rgba(0,0,0,.25)}.scores{display:flex;gap:8px}.scorebox{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:6px 10px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px}.scorebox__label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.scorebox__value{font-size:20px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}.stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center}.board{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));touch-action:manipulation}.hex{cursor:pointer;transition:transform .12s ease}.hex__cell{stroke:#00000047;stroke-width:1.2;transition:filter .12s ease}.hex__shine{fill:#ffffff38;pointer-events:none}.hex--amber .hex__cell{fill:var(--amber)}.hex--gold .hex__cell{fill:var(--gold-tile)}.hex--orange .hex__cell{fill:var(--orange)}.hex--pollen .hex__cell{fill:var(--pollen)}.hex--sage .hex__cell{fill:var(--sage)}.hex--selected{transform:scale(1.06)}.hex--selected .hex__cell{stroke:#fff;stroke-width:2.4;filter:brightness(1.12)}.hex--popping{animation:pop .18s ease-in forwards;transform-box:fill-box}.floatscore{position:absolute;top:30%;left:50%;transform:translate(-50%);font-size:34px;font-weight:800;color:var(--pollen);text-shadow:0 2px 8px rgba(0,0,0,.6);pointer-events:none;animation:rise .7s ease-out forwards}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#0c0906b8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade .2s ease}.overlay__card{text-align:center;padding:26px 30px;background:var(--bg-2);border:1px solid var(--line);border-radius:18px;box-shadow:0 16px 40px #00000080}.overlay__card h2{margin:0 0 6px;font-size:24px}.overlay__score{margin:0;font-size:40px;font-weight:800;color:var(--gold)}.overlay__bonus,.overlay__best{margin:6px 0 0;color:var(--pollen);font-weight:700}.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px}.hint{margin:0;font-size:12px;color:var(--muted);line-height:1.4}.hint strong{color:var(--gold)}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:12px;padding:12px 20px;font-size:15px;font-weight:700;color:#2a1c08;background:linear-gradient(180deg,#ffd25e,var(--gold));box-shadow:0 4px #b9791a;cursor:pointer;transition:transform 80ms ease,box-shadow 80ms ease}.btn:active{transform:translateY(3px);box-shadow:0 1px #b9791a}.btn--ghost{background:transparent;color:var(--gold);border:1px solid var(--line);box-shadow:none;white-space:nowrap}.btn--ghost:active{transform:translateY(1px);box-shadow:none}@keyframes pop{0%{transform:scale(1);opacity:1}40%{transform:scale(1.25)}to{transform:scale(0);opacity:0}}@keyframes rise{0%{transform:translate(-50%);opacity:0}20%{opacity:1}to{transform:translate(-50%,-60px);opacity:0}}@keyframes buzz{0%,to{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(6deg) translateY(-2px)}}@keyframes fade{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
