/* Shared look for FlyOmok JS game templates (dark, mobile-first, Pretendard). */
@font-face{font-family:"Pretendard Variable";src:url("/static/fonts/PretendardVariable.woff2") format("woff2-variations");font-weight:45 920;font-display:swap}
:root{--bg:#14171C;--panel:#1E232B;--panel2:#252B34;--line:#2F3640;--text:#E7ECF2;--dim:#A3ADBA;--accent:#2EE6C5;--amber:#FFB547;--red:#FF6B6B;--violet:#A78BFA}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:15px/1.55 "Pretendard Variable",Pretendard,-apple-system,"Segoe UI","Malgun Gothic",sans-serif;word-break:keep-all}
a{color:var(--accent);text-decoration:none}
.g-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(20,23,28,.92);backdrop-filter:blur(8px);z-index:5}
.g-top .home{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--text)}
.g-top h1{font-size:16px;margin:0;font-weight:800}
.g-top .sp{flex:1}
.g-wrap{max-width:720px;margin:0 auto;padding:12px 14px 28px}
.g-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.g-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font:inherit;font-weight:700;cursor:pointer;touch-action:manipulation}
.g-btn.primary{background:var(--accent);color:#06221D;border-color:transparent}
.g-btn:active{transform:translateY(1px)}
.g-stage{position:relative;width:100%;border-radius:14px;overflow:hidden;background:#0B0D11;border:1px solid var(--line);touch-action:none;user-select:none;-webkit-user-select:none}
.g-stage canvas{display:block;width:100%;height:100%}
.g-hud{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0;font-size:14px;color:var(--dim)}
.g-hud b{color:var(--text)}
.g-note{font-size:13px;color:var(--dim);margin-top:10px}
.fly-badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font-size:11.5px;font-weight:750;white-space:nowrap}
.fly-badge.b-brain{color:var(--accent);background:rgba(46,230,197,.12);border:1px solid rgba(46,230,197,.4)}
.fly-badge.b-table{color:var(--accent);border:1px dashed rgba(46,230,197,.6)}
.fly-badge.b-engine{color:var(--dim);border:1px solid var(--line);background:var(--panel2)}
.fly-badge.b-staged{color:var(--amber);border:1px dashed rgba(255,181,71,.6)}
.g-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(11,13,17,.72);text-align:center;padding:20px}
.g-overlay h2{margin:0;font-size:22px}

/* shooter */
.hub-hero h1{font-size:24px;margin:8px 0 4px;font-weight:850;letter-spacing:-.02em}
.hub-hero p{margin:0 0 10px;color:var(--dim);font-size:14px}
.hub-legend{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:14px}
.hub-legend small{flex-basis:100%;color:var(--dim);font-size:12px}
.hub-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:640px){.hub-grid{grid-template-columns:1fr 1fr}}
.hub-card{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;background:var(--panel);border:1px solid var(--line);color:var(--text);transition:transform .15s,border-color .15s}
.hub-card:hover,.hub-card:focus-visible{transform:translateY(-2px);border-color:rgba(46,230,197,.45)}
.hub-ic{width:88px;height:51px;border-radius:10px;flex:none}
.hub-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.hub-body b{font-size:15.5px;font-weight:800}
.hub-d{font-size:12.5px;color:var(--dim);line-height:1.4}
.hub-go{color:var(--accent);font-weight:800;font-size:18px}
.sh-main{max-width:520px;margin:0 auto;padding:8px 10px 20px}
.sh-stage{aspect-ratio:9/14;max-height:calc(100vh - 170px);margin:0 auto}
.sh-hud{position:absolute;left:8px;right:8px;top:8px;display:flex;justify-content:space-between;gap:6px;align-items:flex-start;pointer-events:none;font-size:13px;font-weight:700}
.sh-hud .sh-chip{background:rgba(11,13,17,.7);border:1px solid rgba(255,255,255,.1);border-radius:9px;padding:3px 8px;color:var(--text)}
.sh-badge{position:absolute;left:8px;bottom:8px;pointer-events:none;display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.sh-badge .fly-badge{background:rgba(11,13,17,.82)}
.sh-ctrl{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.sh-ctrl .g-btn{flex:1;min-width:0;padding:0 10px}
.g-btn.on{border-color:var(--amber);color:var(--amber)}
.sh-fire{position:absolute;right:10px;bottom:10px;width:68px;height:68px;border-radius:50%;border:2px solid rgba(255,224,102,.7);background:rgba(255,224,102,.16);color:#FFE066;font:inherit;font-weight:800;font-size:13px;touch-action:none}
.sh-fire[hidden]{display:none}
.g-overlay[hidden]{display:none}
.g-overlay p{margin:0;color:var(--dim);font-size:14px;max-width:300px}

/* race */
.rc-best{font-size:12.5px;color:var(--amber);font-weight:750}
.rc-wrap{padding-top:8px}
.rc-stage{height:min(calc(100svh - 92px),720px);min-height:380px}
.rc-hud{position:absolute;left:8px;top:8px;display:flex;gap:6px;pointer-events:none}
.rc-hud span{background:rgba(11,13,17,.66);border-radius:8px;padding:3px 8px;font-size:12.5px;color:var(--dim)}
.rc-hud b{color:var(--text);font-size:15px}
.rc-badge{position:absolute;right:8px;top:8px;pointer-events:none}
.rc-badge .fly-badge{background:rgba(11,13,17,.75)}
.rc-prog{position:absolute;right:6px;top:44px;bottom:96px;width:6px;border-radius:3px;background:rgba(255,255,255,.12);pointer-events:none}
.rc-prog i{position:absolute;left:-3px;width:12px;height:12px;border-radius:50%;margin-bottom:-6px}
.rc-dash{position:absolute;right:14px;bottom:16px;width:76px;height:76px;border-radius:50%;border:2px solid rgba(46,230,197,.8);background:rgba(46,230,197,.18);color:var(--accent);font:inherit;font-weight:850;font-size:15px;touch-action:none}
.rc-dash.cool{border-color:var(--line);color:var(--dim);background:rgba(11,13,17,.6)}
.rc-dash[hidden]{display:none}
.rc-msg{position:absolute;left:50%;top:24%;transform:translate(-50%,-50%);font-size:22px;font-weight:850;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7);opacity:0;pointer-events:none;white-space:nowrap}
.rc-msg.on{animation:rcMsg 1.1s ease-out}
@keyframes rcMsg{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}15%{opacity:1;transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0}}
.rc-pick{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;color:var(--dim);font-size:13px}
.rc-pick .g-btn{min-height:40px;padding:0 12px}
.rc-pick .g-btn.on{border-color:var(--accent);color:var(--accent)}
.rc-go{min-width:160px;font-size:18px;min-height:52px}
.rc-keys{font-size:12px!important}
.rc-podium{display:flex;align-items:flex-end;gap:8px;justify-content:center}
.rc-pod{display:flex;flex-direction:column;align-items:center;gap:3px;width:84px;font-size:13px}
.rc-pod .blk{width:100%;border-radius:8px 8px 0 0;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:flex-start;justify-content:center;font-weight:900;font-size:20px;padding-top:4px}
.rc-pod.p1 .blk{height:74px;background:rgba(255,212,92,.25);border-color:rgba(255,212,92,.6);color:#FFD45C}
.rc-pod.p2 .blk{height:52px}.rc-pod.p3 .blk{height:36px}
.rc-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:13px;text-align:left}
.rc-list li{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rc-list .t{color:var(--amber);font-weight:750}
.rc-wrap .dot,.rc-podium .dot{display:inline-block;width:12px;height:12px;border-radius:50%}
.rc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin:10px 0}
.rc-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.rc-card-h{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.rc-bar{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:6px;font-size:12px;color:var(--dim);margin:3px 0}
.rc-bar i{height:7px;border-radius:4px;background:var(--panel2);overflow:hidden}
.rc-bar em{display:block;height:100%;background:var(--amber);border-radius:4px}
.rc-how h3{margin:0 0 6px;font-size:15px}.rc-how ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--dim)}.rc-how li{margin:4px 0}.rc-how b{color:var(--text)}
/* /race */

/* mjp */
.mj-rec{font-size:12.5px;color:var(--amber);font-weight:750}
.mj-wrap{padding-top:8px}
.mj-stage{height:330px;background:radial-gradient(120% 80% at 50% 0%,#2A3A33 0%,#14191D 70%)}
.mj-stage canvas#mjFly{position:absolute;left:0;right:0;top:26px;height:150px;width:100%}
.mj-badge{position:absolute;right:8px;top:8px}
.mj-att{position:absolute;left:8px;top:8px;font-size:12.5px;font-weight:800;padding:3px 8px;border-radius:8px;background:rgba(11,13,17,.7);color:var(--dim)}
.mj-att.player{color:var(--accent);border:1px solid rgba(46,230,197,.5)}
.mj-att.fly{color:#FF8A8A;border:1px solid rgba(255,107,107,.5)}
.mj-chant{position:absolute;left:0;right:0;top:118px;text-align:center;font-size:44px;font-weight:900;color:#FFE066;text-shadow:0 3px 12px rgba(0,0,0,.7);pointer-events:none;opacity:0}
.mj-chant.on{animation:mjBeat .34s ease-out forwards}
@keyframes mjBeat{0%{opacity:0;transform:scale(1.5)}40%{opacity:1;transform:scale(1)}100%{opacity:1}}
.mj-vs{position:absolute;left:0;right:0;bottom:10px;display:flex;align-items:flex-end;justify-content:center;gap:14px}
.mj-side{display:flex;flex-direction:column;align-items:center;gap:2px}
.mj-side .lab{font-size:12px;font-weight:800;color:var(--dim)}
.mj-hand{width:96px;height:96px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.mj-hand svg{width:76px;height:76px}
.mj-hand.shake svg{animation:mjShake .34s ease-in-out infinite}
@keyframes mjShake{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.mj-mid{font-size:22px;font-weight:900;color:var(--amber);min-width:28px;text-align:center;padding-bottom:34px}
.mj-status{text-align:center;font-weight:750;margin:10px 0 8px;min-height:24px}
.mj-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mj-btns[hidden]{display:none}
.mj-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:112px;border-radius:16px;border:2px solid var(--line);background:var(--panel2);color:var(--text);font:inherit;cursor:pointer;touch-action:manipulation}
.mj-btn .ic svg{width:56px;height:56px;display:block}
.mj-btn b{font-size:20px;font-weight:900;line-height:1.2}
.mj-btn small{font-size:11.5px;color:var(--dim)}
.mj-btn:active{transform:scale(.97)}
.mj-btn:disabled{opacity:.5}
.mj-btn.picked{border-color:var(--accent);opacity:1;background:rgba(46,230,197,.12)}
.mj-cardpick{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:320px}
.mj-cardpick .g-btn{min-height:42px;padding:0 12px}
.mj-cardpick .g-btn.on{border-color:var(--amber);color:var(--amber)}
.mj-card,.mj-end,.mj-how{margin-top:10px}
.mj-card-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mj-cname{font-weight:850}
.mj-cdesc{margin:6px 0;font-size:13.5px;color:var(--dim)}
.mj-card h4,.mj-end h4{margin:10px 0 4px;font-size:13.5px}
.mj-end h3{margin:0;font-size:18px}.mj-end-sub{margin:2px 0 0;font-size:13px;color:var(--dim)}
.mj-end h5{margin:8px 0 2px;font-size:12.5px;color:var(--dim)}
.mj-bar,.mj-tend{display:grid;grid-template-columns:96px 1fr 44px;align-items:center;gap:8px;font-size:12.5px;margin:4px 0}
.mj-bar i,.mj-tend i{height:10px;border-radius:5px;background:var(--panel2);overflow:hidden}
.mj-bar em{display:block;height:100%;background:var(--accent);border-radius:5px;transition:width .3s}
.mj-bar em.q{background:repeating-linear-gradient(45deg,var(--line) 0 6px,var(--panel2) 6px 12px)}
.mj-bar b,.mj-tend b{text-align:right;font-size:12px}
.mj-bar.hl em,.mj-tend em{display:block;height:100%;background:var(--amber);border-radius:5px}
.mj-bar.hl span{color:var(--amber);font-weight:800}
.mj-tend.dim em{background:var(--dim)}
.mj-end-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.mj-end[hidden]{display:none}
.mj-how h3{margin:0 0 6px;font-size:15px}.mj-how ol{margin:0;padding-left:20px;font-size:13.5px;color:var(--dim)}.mj-how li{margin:3px 0}.mj-how b{color:var(--text)}
/* /mjp */

/* hide */
.hide-stage{aspect-ratio:3/4}
.hide-stage .g-overlay[hidden]{display:none}
.hide-stage .g-overlay p{margin:0;max-width:300px}
.hide-tl{position:absolute;left:8px;top:8px;pointer-events:none}
.hide-tl .fly-badge{background:rgba(20,23,28,.82)}
.hide-sm{font-size:13px;color:var(--dim)}
.hide-score{font-size:44px;font-weight:900;color:var(--accent);line-height:1}
.hide-score small{font-size:16px;margin-left:2px;color:var(--dim)}
.hide-new{color:var(--amber);font-weight:800}
.hide-ctl{display:flex;gap:8px;margin-top:10px}
.hide-ctl .g-btn{flex:1}
.hide-ctl .g-btn:disabled{opacity:.45;cursor:default}
.hide-h3{font-size:14px;margin:16px 0 8px}
.hide-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.hide-card{display:flex;flex-direction:column;gap:1px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:7px 9px;font-size:12px;color:var(--dim)}
.hide-card b{color:var(--text);font-size:13px}
.hide-card em{font-style:normal;font-weight:750;color:var(--amber)}
.hide-card.done em{color:var(--accent)}
/* /hide */

/* lighttag */
.lt-stage{aspect-ratio:360/520}
.lt-stage .g-overlay[hidden]{display:none}
.lt-stage .g-overlay p{margin:0;max-width:310px}
.lt-tl{position:absolute;left:8px;top:8px;pointer-events:none}
.lt-tl .fly-badge{background:rgba(20,23,28,.82)}
.lt-meterbox{position:absolute;right:8px;bottom:8px;display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:8px;background:rgba(20,23,28,.78);font-size:11px;color:var(--dim);pointer-events:none}
.lt-meterbox i{display:block;width:60px;height:6px;border-radius:3px;background:var(--panel2);overflow:hidden}
.lt-meterbox i b{display:block;height:100%;width:0;background:var(--accent);transition:background .2s}
.lt-meterbox i b.fast{background:var(--red)}
.lt-meterbox em{font-style:normal;font-weight:750;color:var(--text);min-width:62px}
.lt-sm{font-size:13px;color:var(--dim)}
.lt-score{font-size:46px;font-weight:900;color:var(--accent);line-height:1}
.lt-score small{font-size:16px;margin-left:2px;color:var(--dim)}
.lt-new{color:var(--amber);font-weight:800}
.lt-sci{font-size:14px;color:var(--amber);background:rgba(255,181,71,.1);border:1px solid rgba(255,181,71,.35);border-radius:10px;padding:8px 12px}
.lt-ctl{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.lt-keys{font-size:12px;color:var(--dim)}
.lt-h3{font-size:14px;margin:16px 0 8px}
.lt-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.lt-card{display:flex;flex-direction:column;gap:1px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:7px 9px;font-size:12px;color:var(--dim)}
.lt-card b{color:var(--text);font-size:13px}
.lt-card em{font-style:normal;font-weight:750;color:var(--amber)}
.lt-card.done em{color:var(--accent)}
/* /lighttag */