.cur { font:800 2rem ui-monospace, Menlo, monospace; letter-spacing:.12em; min-height:1.4em; } .cur .c { color:#fbbf24; }
.hive { position:relative; width:min(300px, 80vw); aspect-ratio:1; --u:min(88px, 23vw); }
.hex { position:absolute; left:50%; top:50%; width:var(--u); height:calc(var(--u) * 1.1547); padding:0; clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); border:0; background:#334155; font:800 1.6rem system-ui; transform:translate(-50%, -50%) translate(calc(var(--y) * var(--u) * 1.02), calc(var(--x) * var(--u) * 1.18)); }
.hex.center { background:#fbbf24; color:#2a1b02; } .hex:hover { filter:brightness(1.2); }
.found { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:640px; } .found span { background:#17223a; border:1px solid var(--line); border-radius:8px; padding:2px 10px; } .found .pan { background:#78350f; border-color:#fbbf24; }

.hex { background:linear-gradient(145deg,#fff4cf,#e8c87e); color:#403522; filter:drop-shadow(0 4px 3px rgba(80,57,18,.2)); }
.hex.center { background:linear-gradient(145deg,#ffe78a,#e6a924); color:#382607; }
.hex:hover { filter:brightness(1.08) drop-shadow(0 4px 3px rgba(80,57,18,.2)); }