:root{--bg:#14102a;--panel:#1f1842;--panel2:#2a2156;--line:#3a3070;--ink:#f6f2ff;--mute:#a7a0cc;--buy:#56e0a0;--sell:#ff5e8c;--gold:#ffd166;--violet:#9b6dff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Hiragino Sans","Noto Sans JP",system-ui,sans-serif;overscroll-behavior:none}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.app{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding:max(12px,env(safe-area-inset-top)) 12px 90px;gap:10px;position:relative}
.app.shake{animation:shake .35s}.app.shake-big{animation:shakeBig .5s}
@keyframes shake{0%,100%{transform:translate(0,0)}20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-2px)}}
@keyframes shakeBig{0%,100%{transform:translate(0,0)}15%{transform:translate(-12px,6px) rotate(-.6deg)}30%{transform:translate(11px,-8px) rotate(.6deg)}45%{transform:translate(-9px,5px)}60%{transform:translate(7px,-4px)}80%{transform:translate(-4px,2px)}}
.hd{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.bk{font-size:12px;color:var(--mute);text-decoration:none;display:block;margin-bottom:2px}
.nmBtn{border:1px solid var(--line);border-radius:999px;padding:2px 9px;font-size:11px;color:var(--ink);background:var(--panel2);margin-left:4px}
.hd .ttl{font-size:13px;color:var(--mute);letter-spacing:.08em}.hd .ttl b{display:block;font-size:16px;color:var(--ink);letter-spacing:.02em}
.ring{position:relative;width:78px;height:78px}.ring svg{width:78px;height:78px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6}.ring .bg{stroke:var(--line)}
.ring .fg{stroke:var(--violet);stroke-linecap:round;stroke-dasharray:213;stroke-dashoffset:0;transition:stroke-dashoffset .2s linear,stroke .3s}
.ring.hot .fg{stroke:var(--gold)}.ring .t{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800}.ring.hot .t{color:var(--gold)}
.streak{text-align:right;font-size:12px;color:var(--mute)}.streak b{display:block;font-size:20px;color:var(--gold);font-weight:900;letter-spacing:.04em;min-height:24px}
.setup{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px}
.setup h2{margin:0 0 8px;font-size:14px;color:var(--mute);font-weight:500;display:flex;justify-content:space-between}
.setup h2 .date{color:var(--gold)}
.field{display:flex;align-items:center;gap:8px;margin-bottom:10px}.field label{font-size:13px;color:var(--mute);width:80px}
.field input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-size:17px;font-weight:700;text-align:right}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chips button{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);font-size:13px;color:var(--mute)}
.chips button[aria-pressed="true"]{background:var(--violet);border-color:var(--violet);color:#fff}
.pipinfo{font-size:13px;color:var(--mute);margin-top:8px}.pipinfo b{color:var(--gold);font-size:16px}
.ctl{display:flex;gap:6px;margin-top:10px}.ctl button{padding:9px 0;flex:1;border:1px solid var(--line);border-radius:10px;font-size:13px;color:var(--mute);background:var(--panel2)}
.ctl button[aria-pressed="true"]{color:#fff;background:var(--violet);border-color:var(--violet)}
.memberNote{font-size:12px;color:var(--mute);margin-top:10px;line-height:1.6}.memberNote a{color:var(--gold)}
.go{display:block;width:100%;margin-top:12px;padding:16px;border-radius:14px;background:linear-gradient(135deg,var(--violet),#B36CFF);color:#fff;font-size:20px;font-weight:900;letter-spacing:.06em;box-shadow:0 8px 24px rgba(124,108,255,.35)}
.go:active{transform:scale(.98)}.go[disabled]{opacity:.5}
.chart{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;touch-action:none;transition:box-shadow .3s}
.chart.win{box-shadow:inset 0 0 0 2px rgba(53,224,161,.5),0 0 40px rgba(53,224,161,.15)}
.chart.lose{box-shadow:inset 0 0 0 2px rgba(255,92,138,.5),0 0 40px rgba(255,92,138,.15)}
canvas.cv{display:block;width:100%;height:290px}canvas.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.px{position:absolute;right:8px;padding:3px 8px;border-radius:6px;font-size:14px;font-weight:800;transform:translateY(-50%);pointer-events:none}
.px.now{background:var(--ink);color:var(--bg)}.px.pos{background:var(--gold);color:#241a00}
.hint{position:absolute;left:10px;bottom:8px;font-size:11px;color:var(--mute)}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,12,26,.7)}
.overlay .cd{font-size:110px;font-weight:900;color:var(--gold);line-height:1;text-shadow:0 0 40px rgba(255,200,87,.5)}.overlay.hide{display:none}
.flash{position:fixed;inset:0;pointer-events:none;opacity:0;z-index:30}
.flash.win{background:var(--buy);animation:flash .45s}.flash.lose{background:var(--sell);animation:flash .45s}
@keyframes flash{0%{opacity:.35}100%{opacity:0}}
.bigtxt{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%) scale(.6);font-size:56px;font-weight:900;font-style:italic;letter-spacing:.06em;pointer-events:none;opacity:0;z-index:31;text-shadow:0 6px 30px rgba(0,0,0,.6);white-space:nowrap}
.bigtxt.on{animation:pop .9s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}60%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-70%) scale(1)}}
.float{position:fixed;font-weight:900;pointer-events:none;z-index:32;animation:floatUp 1.1s ease-out forwards;font-family:ui-monospace,Menlo,monospace}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,0) scale(.7)}15%{opacity:1;transform:translate(-50%,-10px) scale(1.1)}100%{opacity:0;transform:translate(-50%,-110px) scale(1)}}
.acts{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:8px}
.acts button{border-radius:16px;padding:16px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;user-select:none;border:2px solid transparent;transition:transform .08s}
.acts button:active{transform:scale(.95)}
.acts .sell{background:linear-gradient(180deg,#3A1F33,#2A1526);border-color:#5b2a48;color:var(--sell)}
.acts .buy{background:linear-gradient(180deg,#153A33,#0F2A26);border-color:#2a6b58;color:var(--buy)}
.acts .close{background:var(--panel);border-color:var(--line);color:var(--mute)}
.acts .close.live{border-color:var(--gold);color:var(--gold);animation:pulse 1.2s infinite}
.acts .close.live.plus{background:linear-gradient(180deg,#2b2a15,#1f1d10)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,200,87,.35)}50%{box-shadow:0 0 0 8px rgba(255,200,87,0)}}
.acts .big{font-size:28px;font-weight:900;font-style:italic;letter-spacing:.04em}.acts .p{font-size:16px;font-weight:800}.acts .s{font-size:11px;opacity:.85}
.acts button[disabled]{opacity:.35}
.acct{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:grid;grid-template-columns:1.3fr 1fr .7fr;gap:6px}
.acct .k{font-size:11px;color:var(--mute)}.acct .v{font-size:20px;font-weight:800;margin-top:2px}.acct .v.up{color:var(--buy)}.acct .v.dn{color:var(--sell)}
.result{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;display:none}.result.on{display:block}
.result h2{margin:0 0 4px;font-size:13px;color:var(--mute);font-weight:500}
.result .pl{font-size:46px;font-weight:900;letter-spacing:-.01em;margin:0 0 6px}
.rankLine{font-size:14px;color:var(--gold);font-weight:700;margin-bottom:10px;min-height:18px}
.result .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;font-size:13px;color:var(--mute)}.result .grid b{display:block;font-size:18px;color:var(--ink)}
.result .truth{margin-top:14px;padding:12px;border-left:3px solid var(--gold);background:var(--panel2);font-size:13px;line-height:1.7;border-radius:0 10px 10px 0}
.result .next{margin-top:14px;text-align:center;font-size:13px;color:var(--mute)}.result .next b{display:block;font-size:22px;color:var(--ink);margin-top:4px}
.share{display:block;width:100%;margin-top:12px;padding:13px;border-radius:12px;border:1px solid var(--line);font-weight:700;background:var(--panel2)}
.lock{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px 18px;text-align:center;display:none}.lock.on{display:block}
.lock .big{font-size:22px;font-weight:800;margin:6px 0}.lock .cd{font-size:38px;font-weight:900;color:var(--gold)}.lock p{color:var(--mute);font-size:13px;line-height:1.7}
.lastRes{font-size:14px;color:var(--ink);margin-top:8px}
.rank{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px}
.rank .tabs{display:flex;gap:6px;margin-bottom:10px}.rank .tabs button{flex:1;padding:8px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--mute);font-size:13px}
.rank .tabs button[aria-pressed="true"]{background:var(--violet);border-color:var(--violet);color:#fff}
.rankList .row{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.rankList .row:first-child{border-top:0}.rankList .n{font-weight:900;color:var(--mute)}.rankList .row.top .n{color:var(--gold)}
.rankList .v{font-weight:800}.rankList .v.up{color:var(--buy)}.rankList .v.dn{color:var(--sell)}.rankList small{display:block;color:var(--mute);font-size:11px}
.rankEmpty{color:var(--mute);font-size:13px;text-align:center;padding:14px 0}
.rankNote{font-size:11px;color:var(--mute);margin-top:8px}
.foot{font-size:11px;color:#4d4770;text-align:center;line-height:1.6}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}