@import "https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@500;700;900&display=swap";
.arrow-game{--red:#ff3b30;--orange:#ff9500;--yellow:#fc0;--green:#34c759;--mint:#00c7be;--teal:#30b0c7;--blue:#007aff;--indigo:#5856d6;--purple:#af52de;--pink:#ff2d55;--gray:#8e8e93;--gray3:#c7c7cc;--gray4:#d1d1d6;--gray5:#e5e5ea;--gray6:#f2f2f7;--label:#000;--secondary:#3c3c4399;--fill:#78788029;color:var(--label);background:var(--gray6);font-synthesis:none;text-rendering:optimizeLegibility;min-width:320px;min-height:100svh;font-family:Noto Sans SC,-apple-system,BlinkMacSystemFont,system-ui,sans-serif}.arrow-game *{box-sizing:border-box}.arrow-game button{font:inherit}.arrow-game .game-shell{background:var(--gray6);grid-template-rows:auto auto minmax(0,1fr) auto;width:min(100%,820px);min-height:100svh;margin:0 auto;display:grid;position:relative;overflow:hidden}.arrow-game .topbar{z-index:5;grid-template-columns:54px 1fr 54px;align-items:center;padding:18px 22px 8px;display:grid}.arrow-game .brand{text-align:center}.arrow-game .brand-kicker{color:var(--secondary);letter-spacing:2.8px;margin-bottom:-2px;font-size:9px;font-weight:700;display:block}.arrow-game .brand h1{color:var(--label);letter-spacing:2px;margin:0;font-size:clamp(28px,5.4vw,42px);font-weight:900}.arrow-game .icon-button{width:46px;height:46px;color:var(--blue);box-shadow:0 0 0 1px var(--gray5);cursor:pointer;background:#fff;border:0;border-radius:12px;padding:0;font-size:25px;font-weight:700}.arrow-game .icon-button:active{transform:scale(.95)}.arrow-game .scorebar{z-index:4;grid-template-columns:78px minmax(140px,300px) 78px;justify-content:center;align-items:center;gap:clamp(10px,4vw,36px);padding:2px 24px 12px;display:grid}.arrow-game .scorebar>div:not(.clock-wrap){color:var(--secondary);letter-spacing:.6px;align-items:baseline;gap:7px;font-size:11px;font-weight:700;display:flex}.arrow-game .scorebar>div:last-child{justify-content:flex-end}.arrow-game .scorebar strong{color:var(--label);font-size:20px}.arrow-game .clock-wrap{padding-top:16px;position:relative}.arrow-game .clock-label{color:var(--secondary);letter-spacing:.4px;white-space:nowrap;font-size:10px;position:absolute;top:-6px;left:50%;transform:translate(-50%)}.arrow-game .clock-track{background:var(--fill);border-radius:20px;height:9px;padding:2px;overflow:hidden}.arrow-game .clock-track i{border-radius:inherit;background:var(--green);height:100%;display:block}.arrow-game .clock-wrap b{color:var(--label);text-align:center;font-variant-numeric:tabular-nums;margin-top:4px;font-size:15px;display:block}.arrow-game .clock-hot{color:var(--red)}.arrow-game .stage{width:min(100% - 20px,calc((100svh - 240px)*var(--cols)/var(--rows) + 44px));grid-template-columns:12px minmax(0,1fr) 12px;justify-self:center;align-items:stretch;gap:10px;display:grid}.arrow-game .rail{background:var(--fill);border-radius:99px;position:relative;overflow:hidden}.arrow-game .rail i{background:var(--orange);transition:height .16s;position:absolute;bottom:0;left:0;right:0}.arrow-game .board-frame{aspect-ratio:var(--cols)/var(--rows);border:1px solid var(--gray4);background:#fff;border-radius:18px;position:relative;overflow:hidden;box-shadow:0 8px 28px #0000000f}.arrow-game .board-grid,.arrow-game .board{grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr));display:grid;position:absolute;inset:10px;overflow:hidden}.arrow-game .board{container-type:inline-size}.arrow-game .board-grid{background-image:linear-gradient(to right,var(--gray5)1px,transparent 1px),linear-gradient(to bottom,var(--gray5)1px,transparent 1px);background-size:calc(100%/var(--cols))calc(100%/var(--rows))}.arrow-game .arrow{--cell:calc(100cqi/var(--cols));z-index:2;width:100%;min-width:0;min-height:0;padding:calc(var(--cell)*.08);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;outline:none;overflow:hidden}.arrow-game .arrow-body{grid-template-rows:repeat(var(--span-rows,1),minmax(0,1fr));grid-template-columns:repeat(var(--span-cols,1),minmax(0,1fr));border-radius:12px;width:100%;height:100%;display:grid;overflow:hidden}.arrow-game .arrow-body:after{width:calc(var(--cell)*.58);height:calc(var(--cell)*.58);content:"";clip-path:polygon(0 34%,56% 34%,56% 10%,100% 50%,56% 90%,56% 66%,0 66%);background:#fff;place-self:center}.arrow-game .arrow--RIGHT .arrow-body:after{grid-column:var(--span-cols,1);grid-row:1/-1}.arrow-game .arrow--LEFT .arrow-body:after{clip-path:polygon(100% 34%,44% 34%,44% 10%,0 50%,44% 90%,44% 66%,100% 66%);grid-area:1/1/-1}.arrow-game .arrow--DOWN .arrow-body:after{grid-row:var(--span-rows,1);clip-path:polygon(34% 0,66% 0,66% 56%,90% 56%,50% 100%,10% 56%,34% 56%);grid-column:1/-1}.arrow-game .arrow--UP .arrow-body:after{clip-path:polygon(34% 100%,66% 100%,66% 44%,90% 44%,50% 0,10% 44%,34% 44%);grid-area:1/1/auto/-1}.arrow-game .tone-ink .arrow-body{background:var(--red)}.arrow-game .tone-red .arrow-body{background:var(--pink)}.arrow-game .tone-teal .arrow-body{background:var(--teal)}.arrow-game .tone-amber .arrow-body{background:var(--orange)}.arrow-game .tone-violet .arrow-body{background:var(--purple)}.arrow-game .arrow--giant .arrow-body{box-shadow:inset 0 0 0 3px #ffffff59}.arrow-game .arrow--LEFT{--exit-x:-75vmax;--exit-y:0px;--back-x:8px;--back-y:0px}.arrow-game .arrow--RIGHT{--exit-x:75vmax;--exit-y:0px;--back-x:-8px;--back-y:0px}.arrow-game .arrow--UP{--exit-x:0px;--exit-y:-75vmax;--back-x:0px;--back-y:8px}.arrow-game .arrow--DOWN{--exit-x:0px;--exit-y:75vmax;--back-x:0px;--back-y:-8px}.arrow-game .arrow--blocked .arrow-body{animation:.32s ease-out both arrow-blocked}.arrow-game .arrow--exiting{z-index:12;pointer-events:none;animation:.42s both arrow-exit}.arrow-game .complete-card{z-index:30;text-align:center;background:#fff;border:0;border-radius:16px;width:min(84%,340px);padding:32px 22px 24px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 12px 40px #00000029}.arrow-game .complete-card .burst{color:var(--yellow);font-size:34px;display:block}.arrow-game .complete-card p{color:var(--secondary);letter-spacing:2px;margin:8px 0 0;font-size:13px}.arrow-game .complete-card h2{color:var(--label);margin:0 0 6px;font-size:34px}.arrow-game .complete-card>span:not(.burst){color:var(--secondary);font-size:13px}.arrow-game .complete-card button{color:#fff;background:var(--blue);cursor:pointer;border:0;border-radius:12px;width:78%;margin:20px auto 0;padding:12px 16px;font-weight:700;display:block}.arrow-game .complete-card button:active{opacity:.86;transform:translateY(1px)}.arrow-game .complete-card.fail h2{color:var(--label)}.arrow-game .tip{min-height:84px;color:var(--label);justify-content:center;align-items:center;gap:12px;padding:12px 20px 18px;display:flex}.arrow-game .tip-mark{color:#fff;background:var(--red);border-radius:10px;place-items:center;width:40px;height:40px;font-size:20px;display:grid}.arrow-game .tip p{margin:0;font-size:14px;font-weight:700}.arrow-game .tip small{color:var(--secondary);margin-top:2px;font-size:11px;font-weight:500;display:block}@keyframes arrow-blocked{0%,to{transform:translate(0,0)}25%{transform:translate3d(var(--back-x),var(--back-y),0)}55%{transform:translate3d(calc(var(--back-x)*-.6),calc(var(--back-y)*-.6),0)}}@keyframes arrow-exit{0%{opacity:1;transform:translate(0,0)scale(1)}20%{transform:translate3d(var(--back-x),var(--back-y),0)scale(1.08)}to{opacity:0;transform:translate3d(var(--exit-x),var(--exit-y),0)}}@media (max-width:560px){.arrow-game .topbar{grid-template-columns:44px 1fr 44px;padding:12px 14px 6px}.arrow-game .icon-button{width:40px;height:40px}.arrow-game .scorebar{grid-template-columns:60px minmax(120px,220px) 60px;gap:8px;padding:0 14px 10px}.arrow-game .stage{width:min(100% - 12px,calc((100svh - 220px)*var(--cols)/var(--rows) + 32px));gap:7px}.arrow-game .tip{min-height:72px}}@media (prefers-reduced-motion:reduce){.arrow-game *,.arrow-game :before,.arrow-game :after{animation-duration:1ms!important;animation-iteration-count:1!important}}