html,body{color:#191f28;letter-spacing:-.02em;-webkit-tap-highlight-color:transparent;background:#f2f4f6;min-height:100%;margin:0;font-family:-apple-system,BlinkMacSystemFont,Apple SD Gothic Neo,system-ui,sans-serif}[hidden]{display:none!important}body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}section{max-width:480px;margin:0 auto;padding:20px 16px}h1{margin:4px 4px 6px;font-size:26px;font-weight:700}h1.brand{align-items:center;gap:10px;display:flex}h1.brand img{width:36px;height:36px}h1.brand span{text-box:trim-both cap alphabetic}section>p{color:#6b7684;margin:2px 4px;font-size:15px}button{font:inherit;letter-spacing:inherit;cursor:pointer;border:0;border-radius:14px;padding:14px}.list{background:#fff;border-radius:20px;margin:16px 0 14px;padding:6px 0;list-style:none}.list-title{color:#6b7684;align-items:center;gap:8px;margin:10px 20px 6px;font-size:13px;font-weight:700;display:flex}.list-sub{color:#8b95a1;margin:12px 20px 2px;font-size:12px;font-weight:600}.list-brand{border-radius:6px;width:22px;height:22px}.row{box-sizing:border-box;width:100%;color:inherit;text-align:left;background:0 0;border-radius:0;align-items:center;gap:14px;padding:12px 20px;display:flex}button.row:active{background:#f2f4f6}.row>img,.row>canvas{border-radius:14px;flex:none;width:48px;height:48px}.row>span{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.row b{color:#191f28;font-size:17px;font-weight:700}.row small{color:#6b7684;font-size:14px}button.row:after{content:"";border:2px solid #b0b8c1;border-width:2px 2px 0 0;width:8px;height:8px;margin-right:4px;transform:rotate(45deg)}.fa{fill:currentColor;vertical-align:-.125em;flex:none;width:1em;height:1em}.row>.grade{letter-spacing:-.04em;border-radius:16px;flex-direction:column;flex:none;justify-content:center;align-items:center;gap:1px;width:56px;height:56px;font-size:15px;font-weight:700;display:flex}.badge{border-radius:8px;align-self:flex-start;padding:2px 8px;font-size:12px;font-style:normal;font-weight:700}.row>.grade small{color:inherit;opacity:.75;letter-spacing:0;font-size:11px;font-weight:600}.row>.grade i{letter-spacing:0;opacity:.75;font-size:11px;font-style:normal;font-weight:800}#cards .grade,#history-list .grade{background:linear-gradient(160deg, var(--bg) 55%, #fff);width:66px;height:88px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--c) 22%, transparent), 0 4px 12px color-mix(in srgb, var(--c) 16%, transparent);border-radius:16px;gap:4px;font-size:16px;font-weight:800;position:relative}#cards .grade i,#history-list .grade i{background:var(--c);color:#fff;opacity:1;border-radius:99px;padding:1px 7px;font-size:10px}#history-list .grade{width:58px;height:62px;font-size:15px}#cards .grade small{border-top:1px solid color-mix(in srgb, var(--c) 25%, transparent);opacity:.85;margin-top:2px;padding-top:5px;font-size:11px;font-weight:700}.lv0{--bg:#e8f7ef;--c:#03b26c;background:var(--bg);color:var(--c)}.lv1{--bg:#fff6d6;--c:#d69500;background:var(--bg);color:var(--c)}.lv2{--bg:#fff3e0;--c:#f57800;background:var(--bg);color:var(--c)}.lv3{--bg:#fdedf5;--c:#e0418a;background:var(--bg);color:var(--c)}.lv4{--bg:#f3e9ff;--c:#8b3dff;background:var(--bg);color:var(--c)}.seg{background:#e5e8eb;border-radius:14px;gap:4px;margin-top:14px;padding:4px;display:flex}.seg button{color:#6b7684;background:0 0;border-radius:10px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:1px;padding:9px 0;font-size:15px;font-weight:600;display:flex}.seg button small{opacity:.6;font-size:10px;font-weight:700}.seg button.is-on{color:#191f28;background:#fff;box-shadow:0 1px 3px #00000014}.stats{text-align:center;background:#fff;border-radius:20px;grid-template-columns:repeat(4,1fr);margin-top:14px;padding:18px 8px;display:grid}.stats div{flex-direction:column;gap:4px;display:flex}.stats div+div{border-left:1px solid #f2f4f6}.stats small{color:#8b95a1;font-size:12px;font-weight:600}.stats b{color:#191f28;font-variant-numeric:tabular-nums;font-size:20px;font-weight:800}.stats div:nth-child(2) b{color:#3182f6}.stats div:nth-child(3) b{color:#f04452}.seg.sub{background:0 0;gap:8px;margin-top:10px;padding:0}.seg.sub button{background:#fff;border-radius:99px;flex:none;padding:7px 14px}.seg.sub button.is-on{color:#fff;box-shadow:none;background:#191f28}.row>.rank-no,.row>.time{flex:none}.rank-no{color:#6b7684;font-variant-numeric:tabular-nums;justify-content:center;align-items:center;width:32px;height:32px;font-size:17px;font-weight:700;display:flex}.rank-no .fa{vertical-align:0;font-size:24px}.m1{color:#f5b400}.m2{color:#a8b1bb}.m3{color:#c87a3e}.row>.badge{flex:none;align-self:center}.row>.result{flex-direction:column;flex:none;align-items:center;gap:3px;width:36px;font-size:12px;font-style:normal;font-weight:700;display:flex}.result .fa{font-size:22px}.result.win{color:#3182f6}.result.lose{color:#f04452}#rank-list .row b{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.row .time{color:#3182f6;font-variant-numeric:tabular-nums;font-size:17px;font-weight:700}.row.me{background:#e8f3ff}.gap{text-align:center;color:#b0b8c1;letter-spacing:2px;padding:2px 0 6px;font-size:18px}.empty{text-align:center;color:#8b95a1;padding:36px 20px;font-size:15px}.empty .fa{color:#b0b8c1;margin:0 auto 12px;font-size:36px;display:block}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}#hud{justify-content:space-between;align-items:center;gap:8px;padding:0 0 12px;font-size:16px;font-weight:700;display:flex}.clock-box{color:#3182f6;align-items:center;gap:5px;display:flex}#clock{font-variant-numeric:tabular-nums}#stage{position:relative}#stage.is-paused #board{filter:blur(10px)}.icon-btn{color:#4e5968;background:#fff;border-radius:12px;justify-content:center;align-items:center;width:36px;height:36px;padding:0;font-size:16px;display:flex}.icon-btn:active{background:#e5e8eb}#play:not([hidden]){height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));box-sizing:border-box;flex-direction:column;padding-bottom:32px;display:flex}#stage{flex:1;min-height:0}#board{touch-action:none;border-radius:20px;width:100%;height:100%;display:block}.sheet{text-align:center;background:#fffffff7;border-radius:20px;flex-direction:column;gap:8px;padding:20px 16px 16px;display:flex;position:absolute;inset:auto 12px 12px;box-shadow:0 6px 24px #0000001f}.sheet h2{margin:0;font-size:22px}.sheet h2 .fa{margin:0 auto 10px;font-size:40px;display:block}.gold{color:#f5b400}.grey{color:#b0b8c1}.sheet button .fa{margin-right:6px}.pair{gap:8px;display:flex}.pair button{flex:1}.sheet p{color:#6b7684;margin:0 0 8px}.primary{color:#fff;background:#3182f6;font-size:17px;font-weight:700}.quit{width:100%;margin-top:16px;display:block}.quit .fa{margin-right:6px}.secondary{color:#1b64da;background:#e8f3ff;font-size:17px;font-weight:600}.ad{border-radius:16px;list-style:none;overflow:hidden}[data-platform=android] #play:not([hidden]){padding-bottom:0}[data-platform=android] #ad-play{border-radius:0;height:60px}#ad-play{flex:none;height:clamp(56px,11vh,96px);margin-top:12px}#ad-off{top:calc(16px + env(safe-area-inset-top));z-index:1000;color:#4e5968;letter-spacing:.3px;pointer-events:none;background:#e5e8ebf0;border-radius:8px;padding:4px 10px;font-size:11px;font-weight:800;position:fixed;right:16px}body:has(#tabbar[hidden]) #ad-off{display:none}.name-card{text-align:left;background:#fff;border-radius:16px;align-items:center;gap:8px;width:100%;margin-top:14px;padding:14px 16px;display:flex}.name-card>span{flex-direction:column;flex:1;gap:2px;display:flex}.name-card small{color:#8b95a1;font-size:12px;font-weight:600}.name-card b{color:#191f28;font-size:17px}.name-card em{color:#3182f6;font-size:14px;font-style:normal;font-weight:600}.name-card .fa{color:#b0b8c1;font-size:13px}.modal{z-index:1200;background:#0006;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.modal-card{box-sizing:border-box;width:100%;max-width:480px;padding:24px 20px calc(20px + env(safe-area-inset-bottom));background:#fff;border-radius:24px 24px 0 0;flex-direction:column;gap:8px;display:flex}.modal-card h2{margin:0;font-size:20px}.modal-card p{color:#6b7684;margin:0;font-size:14px}.modal-card input{font:inherit;background:#f2f4f6;border:0;border-radius:14px;outline:none;margin-top:8px;padding:14px 16px;font-size:17px}.modal-card input:focus{box-shadow:inset 0 0 0 2px #3182f6}.modal-card .name-error{color:#f04452;min-height:18px;font-size:13px}.more{padding:6px 12px 8px;list-style:none}.more button{color:#4e5968;background:#f2f4f6;border-radius:14px;justify-content:center;align-items:center;gap:6px;width:100%;padding:13px 0;font-size:15px;font-weight:600;display:flex}.more button:active{background:#e5e8eb}.more small{color:#8b95a1;font-size:13px;font-weight:500}#rank-list .ad,#history-list .ad{min-height:60px;margin:8px 12px}.ad.is-sample{color:#8b95a1;background:#f9fafb;border:1px dashed #d1d6db;justify-content:center;align-items:center;font-size:12px;display:flex}body:has(#tabbar:not([hidden])){padding-bottom:calc(110px + env(safe-area-inset-bottom))}#tabbar{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:1000;-webkit-backdrop-filter:blur(12px);background:#fffffff0;border-radius:18px;max-width:496px;height:60px;margin:0 auto;display:flex;position:fixed;box-shadow:0 6px 24px #0000001f}.tab{color:#b0b8c1;background:0 0;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;padding:0;font-size:11px;font-weight:700;transition:color .12s;display:flex}.tab svg{fill:currentColor;width:21px;height:21px}.tab.is-on{color:#3182f6}.row b .badge{vertical-align:2px;margin-left:4px}#toast{left:50%;bottom:calc(96px + env(safe-area-inset-bottom));z-index:1100;color:#fff;text-align:center;white-space:nowrap;opacity:0;pointer-events:none;background:#191f28eb;border-radius:14px;max-width:calc(100% - 32px);padding:12px 18px;font-size:15px;font-weight:600;transition:opacity .2s,transform .2s;position:fixed;transform:translate(-50%,12px)}#toast.is-on{opacity:1;transform:translate(-50%)}:root[lang=en] .row>.grade{font-size:14px}
