:root{--bg:#0d1f16;--panel:#13291d;--line:#234433;--text:#eef5f0;--muted:#8fb09c;--hit:#2fae5f;--near:#d9a92a;--miss:#2a3a31;--accent:#3ccf74;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font:15px/1.45 Inter,system-ui,sans-serif}button{font:inherit;color:inherit;cursor:pointer;background:var(--panel);border:1px solid var(--line);border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:10px 16px;font-weight:600;display:inline-flex}button:hover{border-color:var(--muted)}button.primary{background:var(--hit);border-color:var(--hit);color:#fff}button.wide{width:100%;margin-top:8px}button.icon{color:var(--muted);background:0 0;border:none;padding:8px}button.icon:hover{color:var(--text)}svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:20px;height:20px}.muted{color:var(--muted)}.center{text-align:center}.mono{font-variant-numeric:tabular-nums}.app{flex-direction:column;max-width:560px;min-height:100vh;margin:0 auto;padding:8px 16px 32px;display:flex}header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;margin-bottom:16px;padding:6px 0 14px;display:flex}.brand{text-align:center}h1{letter-spacing:.02em;text-transform:uppercase;margin:0;font:600 24px/1.1 Oswald,sans-serif}h1 span{color:var(--accent)}.brand p{color:var(--muted);margin:2px 0 0;font-size:12px}.guess{position:relative}.guess input{width:100%;font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:12px;outline:none;padding:14px 16px;font-size:16px}.guess input:focus{border-color:var(--accent)}.suggest{z-index:5;border:1px solid var(--line);background:#0f2419;border-radius:12px;margin:0;padding:4px;list-style:none;position:absolute;top:calc(100% + 4px);left:0;right:0;box-shadow:0 12px 30px #00000073}.suggest li{cursor:pointer;border-radius:8px;align-items:center;gap:10px;padding:9px 10px;display:flex}.suggest li.on{background:var(--line)}.s-name{white-space:nowrap;font-weight:600}.s-full{text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:13px;overflow:hidden}.club{letter-spacing:.04em;border-radius:6px;justify-content:center;align-items:center;min-width:40px;padding:3px 5px;font:600 12px/1 Oswald,sans-serif;display:inline-flex;box-shadow:inset 0 0 0 1px #ffffff2e}.club.small{min-width:34px;font-size:11px}.board{flex-direction:column;gap:10px;margin-top:10px;display:flex}.row{grid-template-columns:repeat(6,1fr);gap:5px;display:grid}.row.head{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:center;font-size:11px}.name{margin:0 0 4px 2px;font-size:14px;font-weight:600}.name.win{color:var(--accent)}.cell{background:var(--miss);text-align:center;border-radius:9px;flex-direction:column;justify-content:center;align-items:center;gap:1px;height:54px;font-size:15px;font-weight:700;animation:.45s both flip;display:flex;position:relative;overflow:hidden}.cell.hit{background:var(--hit)}.cell.near{background:var(--near);color:#1d1600}.cell .val{max-width:100%;padding:0 3px}.cell .nation{-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:11px;font-weight:600;line-height:1.15;display:-webkit-box;overflow:hidden}.cell .arrow{stroke-width:2.6px;opacity:.9;width:15px;height:15px}.cell.mini{vertical-align:middle;border-radius:6px;width:26px;height:26px;margin-right:8px;animation:none;display:inline-flex}@keyframes flip{0%{opacity:0;transform:rotateX(90deg)}to{opacity:1;transform:none}}.result{background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:6px;padding:16px}.verdict{text-transform:uppercase;text-align:center;margin:0 0 12px;font:600 22px/1.1 Oswald,sans-serif}.answer{align-items:center;gap:12px;display:flex}.answer .club{min-width:52px;padding:10px 6px;font-size:15px}.answer-name{font-size:17px;font-weight:700}.answer .muted{font-size:13px}.result-actions{gap:10px;margin:16px 0 10px;display:flex}.result-actions button{flex:1}.promo{border:1px dashed var(--line);color:var(--text);border-radius:12px;margin-top:14px;padding:12px 14px;text-decoration:none;display:block}.promo:hover{border-color:var(--accent)}.promo b{color:var(--accent);display:block}.promo span{color:var(--muted);font-size:13px}.backdrop{z-index:20;-webkit-backdrop-filter:blur(6px);background:#030a069e;justify-content:center;align-items:center;padding:16px;animation:.18s both fade;display:flex;position:fixed;inset:0}.modal{background:linear-gradient(180deg, #17321f 0%, var(--panel) 120px);border:1px solid #2c5640;border-radius:20px;width:100%;max-width:420px;max-height:90vh;padding:20px 20px 18px;animation:.22s cubic-bezier(.2,.9,.3,1.2) both pop;overflow:auto;box-shadow:0 24px 60px #0000008c,inset 0 1px #ffffff0d}.modal-head{justify-content:space-between;align-items:flex-start;margin-bottom:6px;display:flex}.modal h2{text-transform:uppercase;letter-spacing:.03em;margin:2px 0 0;font:600 22px/1 Oswald,sans-serif}.modal-sub{color:var(--muted);margin:4px 0 0;font-size:12px}.modal-head .icon{border-radius:50%;margin:-6px -8px 0 0}.modal-head .icon:hover{background:#ffffff0f}.modal h3{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:20px 0 10px;font-size:11px;font-weight:700}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{opacity:0;transform:translateY(10px)scale(.97)}}.legend{flex-direction:column;gap:8px;margin:12px 0;font-size:14px;display:flex}.legend>div{align-items:center;display:flex}.stat-grid{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px;display:grid}.stat{text-align:center;background:#ffffff09;border:1px solid #ffffff0f;border-radius:14px;padding:12px 4px 10px}.stat b{letter-spacing:.01em;font:600 30px/1 Oswald,sans-serif;display:block}.stat b small{color:var(--muted);margin-left:1px;font-size:16px}.stat span{text-transform:uppercase;letter-spacing:.05em;color:var(--muted);align-items:center;gap:4px;margin-top:6px;font-size:11px;font-weight:600;display:inline-flex}.stat span svg{stroke-width:2.2px;width:13px;height:13px}.stat.hot b{color:#ffb347;text-shadow:0 0 18px #ff962859}.stat.hot span svg{color:#ff9a3c;fill:#ff9a3c40}.dist{flex-direction:column;gap:6px;display:flex}.dist-row{align-items:center;gap:10px;display:flex}.dist-n{width:22px;height:22px;color:var(--muted);background:#ffffff0a;border-radius:7px;flex:none;place-items:center;font:700 12px/1 Inter,sans-serif;display:grid}.dist-track{background:#ffffff09;border-radius:8px;flex:1;height:26px;position:relative;overflow:hidden}.dist-fill{background:#355a45;border-radius:8px;justify-content:flex-end;align-items:center;width:0;height:100%;transition:width .6s cubic-bezier(.2,.8,.2,1);display:flex;overflow:hidden}.dist-fill b{padding-right:9px}.dist-fill b,.dist-zero{font:700 13px/1 Inter,sans-serif}.dist-zero{color:#ffffff47;position:absolute;top:50%;left:10px;transform:translateY(-50%)}.dist-row.on .dist-n{background:var(--hit);color:#fff}.dist-row.on .dist-fill{background:linear-gradient(90deg, #26914e, var(--accent));box-shadow:0 0 16px #3ccf7459}.dist-row.fail .dist-fill{background:#4a3131}.dist-row.fail.on .dist-n{background:#b8474a}.dist-row.fail.on .dist-fill{box-shadow:none;background:linear-gradient(90deg,#8e3437,#c25255)}.stats-foot{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;margin-top:20px;padding-top:16px;display:flex}.stats-foot span{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:11px;font-weight:700;display:block}.stats-foot b{letter-spacing:.04em;font:600 26px/1.1 Oswald,sans-serif}.stats-foot button{padding:12px 22px}@media (prefers-reduced-motion:reduce){.backdrop,.modal{animation:none}.dist-fill{transition:none}}footer{text-align:center;margin-top:auto;padding-top:32px;font-size:12px}@media (width<=380px){.cell{height:48px;font-size:13px}.club{min-width:34px;font-size:11px}}.share-preview{border:1px solid var(--line);aspect-ratio:4/5;background:#0b1c13;border-radius:14px;margin:14px 0 12px;overflow:hidden}.share-preview img{width:100%;height:100%;display:block}.share-loading{background:#0b1c13 linear-gradient(100deg,#0000 30%,#ffffff0d 50%,#0000 70%) 0 0/200% 100%;width:100%;height:100%;animation:1.2s linear infinite shimmer}@keyframes shimmer{to{background-position:-200% 0}}.share-actions{flex-wrap:wrap;gap:8px;display:flex}.share-actions button{flex:1 1 0;min-width:110px;padding:10px}button:disabled{opacity:.5;cursor:default}
