@keyframes flIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}@keyframes flPop{0%{transform:scale(1)}40%{transform:scale(1.25)}to{transform:scale(1)}}@keyframes flHit{0%{box-shadow:var(--g-shadow),inset 0 0 0 0 #ecc97c00}30%{box-shadow:var(--g-shadow),inset 0 0 0 3px #ecc97cd9}to{box-shadow:var(--g-shadow),inset 0 0 0 0 #ecc97c00}}@keyframes flMiss{0%,to{transform:none}25%{transform:translate(-5px)}50%{transform:translate(5px)}75%{transform:translate(-3px)}}@keyframes flDrop{0%{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%)}}@keyframes flRise{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}@keyframes flDrain{to{transform:scaleX(0)}}.flags-page{--fl-help:#e7a35a}.flags-page .fl-board{border:1px solid var(--g-line);box-shadow:var(--g-shadow);background:#0b2438;flex-direction:column;gap:12px;height:min(68dvh,640px);min-height:460px;padding:16px 18px 18px;display:flex;position:relative;overflow:hidden}.flags-page .fl-head{justify-content:space-between;align-items:center;gap:16px;display:flex}.flags-page .fl-head .wr-progress{flex:1;max-width:240px}.flags-page .fl-stage{flex:1;min-height:0;position:relative}.flags-page .fl-flag{object-fit:contain;filter:drop-shadow(0 0 1px #f5f0e399)drop-shadow(0 16px 28px #0000008c);-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;max-width:520px;height:100%;max-height:320px;margin:auto;animation:.22s ease-out flIn;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.flags-page .fl-flag{animation:none}}.flags-page .fl-flag.revealing{opacity:.55}.flags-page .fl-head-right{align-items:center;gap:8px;margin-left:auto;display:flex}.flags-page .fl-streak{color:var(--g-muted);border:1px solid var(--g-line);font-variant-numeric:tabular-nums;white-space:nowrap;background:#06131d73;align-items:center;gap:6px;padding:8px 12px;font-family:Fraunces,serif;font-size:16px;font-weight:600;transition:color .2s,border-color .2s;display:inline-flex}.flags-page .fl-streak .g-seal{width:26px;height:26px;margin:-5px 0 -5px -6px}.flags-page .g-seal.unlit .accf{opacity:.45}.flags-page .fl-streak.hot{color:var(--g-accent-hover);border-color:#d6ad558c}.flags-page :is(.fl-streak,.fl-strip-streak).pop{animation:.35s ease-out flPop}.flags-page .fl-strip-streak{display:none}.flags-page .fl-board.fl-hit{animation:.5s ease-out flHit}.flags-page .fl-board.fl-miss{animation:.4s ease-out flMiss}@media (prefers-reduced-motion:reduce){.flags-page .fl-board.fl-hit,.flags-page .fl-board.fl-miss,.flags-page :is(.fl-streak,.fl-strip-streak).pop{animation:none}}.flags-page .fl-milestone{z-index:2;color:var(--g-accent-hover);white-space:nowrap;pointer-events:none;background:#0a1c2af2;border:1px solid #d6ad5599;padding:7px 14px;font-size:14px;font-weight:700;animation:.2s ease-out flDrop;position:absolute;top:6px;left:50%;transform:translate(-50%)}.flags-page .fl-reveal{z-index:2;text-align:center;border:1px solid var(--g-line-strong);min-width:240px;max-width:calc(100% - 16px);box-shadow:var(--g-shadow-pop);pointer-events:none;background:#0a1c2af5;padding:11px 22px 0;animation:.2s ease-out flRise;position:absolute;bottom:6px;left:50%;transform:translate(-50%)}.flags-page .fl-reveal small{letter-spacing:.14em;text-transform:uppercase;color:var(--g-faint);margin-bottom:2px;font-size:11px;font-weight:700;display:block}.flags-page .fl-reveal b{color:var(--fl-help);font-family:Fraunces,serif;font-size:26px;font-weight:600;line-height:1.15;display:block}.flags-page .fl-reveal span{color:var(--g-muted);margin-top:4px;font-size:12.5px;display:block}.flags-page .fl-reveal i{background:var(--fl-help);transform-origin:0;height:3px;margin:10px -22px 0;animation:linear forwards flDrain;display:block}.flags-page .wr-feedback.help,.flags-page .wr-toast.help{color:var(--fl-help)}.flags-page .wr-input{width:100%;max-width:560px;margin:0 auto}.flags-page .wr-feedback{text-align:center;min-height:24px;padding:0 4px}.flags-page .fl-actions{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.flags-page .fl-score{color:var(--g-muted);font-variant-numeric:tabular-nums;font-size:15px;margin:-8px 0 18px!important}.flags-page .fl-result-actions{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.flags-page .fl-stats{flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 14px;display:flex}.flags-page .fl-stats div{border:1px solid var(--g-line);background:#06131d6b;min-width:96px;padding:8px 12px}.flags-page .fl-stats b{font-variant-numeric:tabular-nums;font-family:Fraunces,serif;font-size:21px;font-weight:600;display:block}.flags-page .fl-stats span{color:var(--g-muted);font-size:11.5px}.flags-page .fl-stats .help b{color:var(--fl-help)}.flags-page .fl-stats .streak b{color:var(--g-accent-hover)}.flags-page .fl-record{margin:0 0 14px;font-size:14px;display:block}.flags-page .fl-list{flex:1;overflow:auto}.flags-page .fl-list h2{font:inherit;color:var(--g-ink);border-bottom:1px solid #80acce1a;justify-content:space-between;gap:8px;margin:0;padding:10px 16px;font-size:14px;font-weight:600;display:flex}.flags-page .fl-list h2 em{color:var(--g-muted);font-variant-numeric:tabular-nums;font-style:normal;font-weight:400}.flags-page .fl-list h2.full,.flags-page .fl-list h2.full em{color:var(--g-accent-hover)}.flags-page .fl-list ul{border-bottom:1px solid #80acce1a;margin:0;padding:6px 0 8px;list-style:none}.flags-page .fl-list li{align-items:center;gap:10px;padding:5px 16px;font-size:13.5px;line-height:1.3;display:flex}.flags-page .fl-list li img{object-fit:contain;flex:none;width:24px;height:16px}.flags-page .fl-list li.ok{color:var(--g-accent-hover)}.flags-page .fl-list li.help{color:var(--fl-help)}.flags-page .fl-list li.miss{color:#e5a59f}@media (width<=900px){.flags-page .fl-board{gap:10px;height:auto;min-height:0;padding:12px 12px 14px}.flags-page .fl-stage{flex:none;height:clamp(130px,26dvh,240px)}.flags-page .fl-list{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;max-height:min(60dvh,520px)}.flags-page .fl-list ul{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));display:grid}}@media (width<=600px){.flags-page .fl-actions .wr-btn{flex:1;min-height:42px}.flags-page .fl-actions .wr-btn.confirming{padding:4px 6px;font-size:12px;line-height:1.2}.flags-page .fl-result-actions .wr-btn{flex:28%;min-height:44px;padding:8px 6px}.flags-page .fl-score{margin-top:-4px!important}.flags-page .fl-list li{padding:7px 14px}}@media (width<=720px){.flags-page[data-phase=idle] :is(.fl-head,.fl-stage,.wr-input,.wr-feedback,.fl-actions){display:none}.flags-page[data-phase=idle] .fl-board{height:max(420px,100dvh - 96px)}.flags-page:is([data-phase=playing],[data-phase=ended]) .fl-board{height:auto;min-height:0;box-shadow:none;border:0;flex:1 1 0;order:1;gap:0;padding:0}.flags-page:is([data-phase=playing],[data-phase=ended]) :is(.fl-head,.fl-actions){display:none}.flags-page:is([data-phase=playing],[data-phase=ended]) .fl-stage{flex:1 1 0;height:auto;min-height:0;margin:58px 18px 14px}.flags-page:is([data-phase=playing],[data-phase=ended]) .wr-input{max-width:none;margin:0}.flags-page:is([data-phase=playing],[data-phase=ended]) .wr-input .wr-btn{min-height:46px;padding:0 16px}.flags-page:is([data-phase=playing],[data-phase=ended]) .wr-toast{bottom:0}.flags-page .fl-strip-streak{color:var(--g-muted);text-shadow:0 1px 4px #000000bf;font-variant-numeric:tabular-nums;flex:none;align-items:center;gap:4px;font:600 19px/1 Fraunces,serif;display:inline-flex}.flags-page .fl-strip-streak.hot{color:var(--g-accent-hover)}.flags-page .fl-strip-streak .g-seal{width:24px;height:24px}.flags-page .fl-reveal b{font-size:22px}.flags-page[data-phase=ended] .fl-result-actions .wr-btn.primary{flex-basis:100%}}
