*{box-sizing:border-box}html,body{color:#eef2ff;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#0b0f1f;height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}canvas#game{touch-action:none;width:100vw;height:100dvh;display:block;position:fixed;inset:0}.hidden{display:none!important}.top-buttons{top:max(10px, env(safe-area-inset-top));right:max(10px, env(safe-area-inset-right));z-index:20;gap:8px;display:flex;position:fixed}.icon-btn{color:#fff;cursor:pointer;background:#0a0c188c;border:1px solid #fff3;border-radius:12px;width:44px;height:44px;font-size:20px}.icon-btn:hover{background:#28325ab3}.screen{z-index:10;flex-direction:column;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0;overflow-y:auto}#screen-start{padding-top:max(18px, env(safe-area-inset-top));justify-content:flex-start}#screen-pause,#screen-over{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#05060f73}.kite-space{flex:0 0 clamp(90px,22vh,220px)}.title{letter-spacing:1px;text-align:center;text-shadow:0 4px #00000059,0 0 24px #ffdc6459;margin:8px 0 0;font-size:clamp(34px,8vw,68px);font-weight:900;line-height:1.05}.title span{color:#ffe680;animation:2.4s ease-in-out infinite wave;display:inline-block}.title span.storm{color:#9fd8ff}.title span.flash{animation:2.4s ease-in-out infinite wave,5s linear infinite flicker}@keyframes wave{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-8px)rotate(-3deg)}}@keyframes flicker{0%,89%,93%,to{filter:none}90%,92%{filter:brightness(2.2)drop-shadow(0 0 10px #fff)}}.panel{text-align:center;background:#0c1022c7;border:1px solid #ffffff1f;border-radius:18px;width:min(460px,100%);padding:18px 18px 14px;box-shadow:0 12px 40px #00000073}.panel.small{width:min(360px,100%)}.panel h2{text-transform:uppercase;letter-spacing:2px;color:#9fb0d6;margin:16px 0 8px;font-size:15px}.panel h2.big{letter-spacing:0;text-transform:none;color:#fff;margin-top:4px;font-size:28px}.btn-primary,.btn-secondary{cursor:pointer;border:none;border-radius:14px;width:100%;margin:8px 0;padding:14px;font-family:inherit;font-size:20px;font-weight:800;display:block}.btn-primary{color:#2a1a00;background:linear-gradient(#ffe680,#ffb84a);animation:1.8s ease-in-out infinite pulse;box-shadow:0 4px #b9742a,0 0 22px #ffc85059}.btn-primary:active{transform:translateY(3px);box-shadow:0 1px #b9742a}.btn-secondary{color:#e6ecff;background:#ffffff1a;padding:10px;font-size:16px}@keyframes pulse{50%{box-shadow:0 4px #b9742a,0 0 36px #ffc85099}}.skins{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.skin{color:#dfe6ff;cursor:pointer;background:#ffffff0f;border:2px solid #0000;border-radius:12px;padding:6px 2px 4px;font:600 11px/1.2 system-ui,sans-serif;position:relative}.skin canvas{width:48px;height:60px;margin:0 auto 4px;display:block}.skin.selected{background:#ffd84a1f;border-color:#ffd84a}.skin.locked{cursor:not-allowed;opacity:.55}.skin.locked canvas{filter:grayscale()brightness(.6)}.skin .lock{font-size:18px;position:absolute;top:18px;left:0;right:0}.ranking{text-align:left;margin:0;padding:0;font-size:14px;list-style:none}.ranking li{background:#ffffff0d;border-radius:8px;justify-content:space-between;gap:8px;margin-bottom:4px;padding:6px 10px;display:flex}.ranking li .pos{color:#ffd84a;width:1.6em;font-weight:800}.ranking li .pts{flex:1;font-weight:800}.ranking li .meta{color:#9fb0d6;font-size:12px}.ranking li.empty{color:#9fb0d6;justify-content:center}.ranking li.fresh{background:#ffd84a2e}.hint{color:#9fb0d6;margin:14px 0 0;font-size:12px;line-height:1.6}.stats{grid-template-columns:1fr 1fr;gap:8px;margin:12px 0;display:grid}.stats div{background:#ffffff0f;border-radius:10px;padding:8px}.stats dt{color:#9fb0d6;font-size:12px}.stats dd{margin:2px 0 0;font-size:24px;font-weight:800}.badge{color:#ffd84a;margin:4px 0;font-size:18px;font-weight:800;animation:1s ease-in-out infinite pulse-text}.unlock{color:#8fe9ff;font-weight:700}@keyframes pulse-text{50%{transform:scale(1.08)}}@media (height<=560px) and (orientation:landscape){.kite-space{flex-basis:40px}.title{font-size:34px}}@media (width<=600px){.title{margin-top:48px}}
