:root{--bg:#0b0b0f;--panel:#16161d;--line:#2a2a35;--ink:#f3f3f6;--muted:#9a9aa8;--accent:#ffcc33}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;-webkit-text-size-adjust:100%;overscroll-behavior:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{opacity:.4;cursor:default}
.hidden{display:none!important}
#fa-home-space{display:none}
#app{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:space-between;background:#000;overflow:hidden}
.top{position:relative;width:100%;max-width:640px;margin:0 auto;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:68px;padding:calc(10px + env(safe-area-inset-top,0px)) calc(10px + env(safe-area-inset-right,0px)) 14px 100px;background:linear-gradient(rgba(0,0,0,.6),transparent)}
.top h1{margin:0;text-shadow:0 1px 4px #000;font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tools{display:flex;gap:6px}
.icon{width:44px;height:44px;border-radius:12px;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center}.icon svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#stage{position:absolute;inset:0;overflow:hidden;background:#000}
#media{position:absolute;inset:0}
#media video,#media img,#ph,.ph-arrow{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#points img,#points .ph-arrow{transition:opacity .25s ease-out,transform .35s ease-out}
#media .off{opacity:0;transform:scale(1.04)}
#media .snap{transition:none!important}
#ph,.ph-arrow{display:flex;align-items:center;justify-content:center}
#ph span{width:min(30vw,140px);height:min(30vw,140px);border-radius:50%;border:6px solid var(--accent)}
#ph.shake span{animation:shake .25s infinite alternate ease-in-out}
@keyframes shake{from{transform:rotate(-14deg) translateY(4px)}to{transform:rotate(14deg) translateY(-8px)}}
.ph-arrow{font-size:min(40vw,180px);color:var(--accent)}
#tags{position:absolute;left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);top:calc(72px + env(safe-area-inset-top,0px));bottom:calc(150px + env(safe-area-inset-bottom,0px));pointer-events:none}
.tag{position:absolute;max-width:32%;padding:4px 6px;color:#fff;font-weight:900;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 4px #000,0 2px 8px #000;transition:transform .35s cubic-bezier(.2,1.6,.4,1),opacity .3s,filter .3s;transform:translate(var(--tx),var(--ty))}
.tag.win{transform:translate(var(--tx),var(--ty)) scale(1.5);color:var(--accent);text-shadow:0 0 6px #000,0 0 18px var(--accent);z-index:2}
.tag.dim{opacity:.35;filter:grayscale(.6)}
.tag.done{opacity:.45;text-decoration:line-through}
.tag .rk{display:inline-block;margin-right:4px;text-decoration:none}
.d-N{top:0;left:50%;--tx:-50%;--ty:0}.d-S{bottom:0;left:50%;--tx:-50%;--ty:0}
.d-E{right:8px;top:50%;--tx:0;--ty:-50%}.d-W{left:8px;top:50%;--tx:0;--ty:-50%}
.d-NE{top:8px;right:8px;--tx:0;--ty:0}.d-NW{top:8px;left:8px;--tx:0;--ty:0}
.d-SE{bottom:8px;right:8px;--tx:0;--ty:0}.d-SW{bottom:8px;left:8px;--tx:0;--ty:0}
.d-NE.win,.d-SE.win,.d-E.win{transform-origin:right center}.d-NW.win,.d-SW.win,.d-W.win{transform-origin:left center}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#banner{position:absolute;z-index:4;left:50%;top:calc(100% - 250px - env(safe-area-inset-bottom,0px));transform:translate(-50%,-50%);max-width:90%;padding:12px 20px;border-radius:16px;background:rgba(0,0,0,.72);font-size:26px;font-weight:900;text-align:center;animation:pop .45s cubic-bezier(.2,1.6,.4,1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.3);opacity:0}}
#toast{position:fixed;z-index:70;left:50%;top:calc(80px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:max-content;max-width:90%;padding:10px 16px;border-radius:12px;background:rgba(0,0,0,.8);color:#fff;font-weight:700;font-size:14px;text-align:center}
.bottom{position:relative;width:100%;max-width:640px;margin:0 auto;z-index:5;padding:28px calc(12px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px));text-align:center;background:linear-gradient(transparent,rgba(0,0,0,.75) 40%)}
#status{margin:2px 0;text-shadow:0 1px 4px #000;font-size:17px;font-weight:700;min-height:1.4em}
#recent{margin:0 0 8px;font-size:13px;color:#ccc;min-height:1.3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.go{width:100%;min-height:56px;border-radius:16px;background:var(--accent);color:#1a1300;font-size:20px;font-weight:900}
.go.small{min-height:48px;font-size:17px;margin-top:12px}
.sheet{position:fixed;inset:0;z-index:50;background:var(--bg)}
.sheet .sheet-bg{display:none}
.sheet-card{position:absolute;inset:0;max-width:640px;margin:0 auto;overflow:auto;padding:calc(64px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px))}
.share-pill{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:16px;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line);font-weight:700;font-size:14px}.share-pill svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.setup-cover{display:block;width:100%;height:auto;border-radius:14px;margin-bottom:12px}
.sheet.first .x-close{display:none}
#drawBtn{margin-top:16px;position:sticky;bottom:0;box-shadow:0 -8px 16px var(--bg)}
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.sheet-head{display:flex;justify-content:space-between;align-items:center}
.sheet-head h2{margin:0;font-size:18px}
.row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.stepper{display:flex;align-items:center;gap:12px}
.stepper button{width:44px;height:44px;border-radius:12px;background:var(--line);font-size:22px}
.stepper b{min-width:1.5em;text-align:center;font-size:20px}
.seg{display:flex;background:var(--bg);border-radius:12px;padding:3px}
.seg button{padding:9px 12px;border-radius:9px;font-weight:700;font-size:14px}
.seg button.on{background:var(--accent);color:#1a1300}
.names{display:grid;gap:8px;padding-top:10px}
.names label{display:flex;align-items:center;gap:10px}
.names .ar{width:34px;height:34px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--line);color:#fff;font-weight:900}
.names input{flex:1;min-width:0;height:42px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:0 12px;font-size:16px}
body #fa-home{z-index:60}