:root{font-family:Hiragino Kaku Gothic ProN,Yu Gothic,Meiryo,sans-serif;color:#f6f2ff;background:#080c20;font-synthesis:none;font-weight:500;-webkit-text-size-adjust:100%;--cyan:#63f5ff;--pink:#ff62c6;--gold:#ffe77b;--muted:#acb6db;--line:#56628c}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 6% 0%,#b4219830,transparent 48%),radial-gradient(ellipse at 95% 85%,#1671a838,transparent 48%),#080c20}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(#829bff07 1px,transparent 1px),linear-gradient(90deg,#829bff07 1px,transparent 1px);background-size:36px 36px;-webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}button{font:inherit;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{cursor:default}button:not(:disabled){cursor:pointer}.game-shell{position:relative;width:min(100%,500px);margin:auto;padding:max(14px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}.brand{position:relative;text-align:center;font-size:32px;line-height:1.2;font-weight:900;letter-spacing:.09em;margin:0 0 14px;text-shadow:0 0 15px #fc6ddd55}.brand>span{color:var(--cyan);text-shadow:0 0 12px #41eafc99,0 0 30px #41eafc44}.brand:after{content:"";display:block;width:92px;height:2px;margin:8px auto 0;background:linear-gradient(90deg,transparent,var(--pink),var(--cyan),transparent);box-shadow:0 0 9px #e878ff99}.music-toggle{position:absolute;right:0;top:0;width:44px;height:44px;border:1px solid #6175a759;border-radius:12px;background:#111a35;display:grid;place-items:center;color:#bac6ec}.music-toggle svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.game-layout{display:flex;flex-direction:column;align-items:stretch;gap:12px}.instruction{font-size:clamp(16px,4.5vw,20px);text-align:center;font-weight:750;letter-spacing:.04em;margin:0;color:#e6eafa}.hud{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:10px}.hud>div{min-width:0;position:relative;border-radius:16px;padding:12px 14px;background:linear-gradient(135deg,#19203f,#10172f);border:1px solid #756071;box-shadow:inset 0 1px #fff1,0 7px 20px #0003}.hud .score-panel{display:flex;align-items:center;gap:10px;border-color:#b18b5266;box-shadow:inset 0 2px #ffe47b36,0 0 18px #ecaa2610}.score-main{flex:1;min-width:0}.hud-label{display:block;font-size:12px;letter-spacing:.14em;color:var(--muted);font-weight:750;margin-bottom:5px}.score-number{width:100%;min-width:0;--score-max:54px}.hud .score-value{display:block;width:max-content;max-width:none;white-space:nowrap;overflow-wrap:normal;word-break:normal;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:min(var(--score-max),calc(var(--score-max)*5.2/var(--score-chars)));line-height:1.1;font-weight:850;letter-spacing:-.075em;font-variant-numeric:tabular-nums;color:var(--gold);text-shadow:0 0 14px #ffd97540;transform-origin:left center}.score-pop{animation:scorePop .32s ease-out}.ta-total{flex:0 0 auto;border-left:1px solid #b688a954;padding-left:10px;max-width:34%}.ta-total>span{display:block;font-size:10px;white-space:nowrap;color:#d9aed3;margin-bottom:3px}.ta-total b{display:block;white-space:nowrap;font-size:23px;line-height:1.2;font-weight:850;font-variant-numeric:tabular-nums;color:#ff9fe0;letter-spacing:-.045em}.ta-total.compact b{font-size:17px}.hud small{font-size:12px;margin-left:3px;letter-spacing:0;font-weight:700;color:inherit}.hud .time-panel{background:linear-gradient(135deg,#143245,#111c36);border-color:#47cce777;box-shadow:inset 0 2px #57e5f12c,0 0 16px #18b6e212}.time-panel strong{display:block;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:clamp(31px,9vw,48px);line-height:1.15;font-weight:850;letter-spacing:-.08em;color:var(--cyan);font-variant-numeric:tabular-nums;text-shadow:0 0 12px #40e7f04d}.time-panel.urgent{border-color:#ff5f89;background:linear-gradient(135deg,#481833,#211631);animation:dangerGlow 1s ease-in-out infinite}.time-panel.urgent strong{color:#ff849b;text-shadow:0 0 14px #ff547177}.board-frame{position:relative;width:min(100%,432px,calc((100svh - 306px)*.666667));margin:0 auto;aspect-ratio:2/3;border:3px solid #74e8f0;border-radius:18px;background:#111a36;outline:1px solid #1d6f98;box-shadow:0 0 0 4px #17253f,0 0 24px #30dbe830,0 15px 50px #0007;overflow:hidden;isolation:isolate}.board{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(12,minmax(0,1fr));width:100%;height:100%;padding:7px;gap:3px;background:linear-gradient(145deg,#12182e,#1d2449)}.slot{position:relative;min-width:0;min-height:0;border-radius:6px;background:#ffffff04}.tile{position:absolute;inset:0;border:1px solid #54659a;border-radius:6px;background:linear-gradient(145deg,#303d69,#222d53);color:#f4f6ff;font-size:clamp(19px,5.5vw,28px);font-weight:800;line-height:1;padding:0;opacity:1;box-shadow:inset 0 1px #a4bbff35,0 2px #101630;text-shadow:0 1px 3px #0007}.board-illuminated .tile:before,.board-illuminated .slot:after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0}.board-illuminated .tile:before{border:1px solid hsl(var(--shimmer-hue) 100% 78%);background:radial-gradient(ellipse at 50% 0%,hsl(var(--shimmer-hue) 100% 72% / .3),transparent 75%);box-shadow:inset 0 0 10px hsl(var(--shimmer-hue) 100% 70% / .3),0 0 9px hsl(var(--shimmer-hue) 100% 70% / .55);animation:tileShimmer var(--shimmer-duration) var(--shimmer-delay) ease-in-out infinite}.board-illuminated .slot:after{border:1px solid #95faff;background:linear-gradient(180deg,#78f7ff25,transparent);box-shadow:inset 0 0 12px #73efff50,0 0 9px #55eaff66;animation:tileWave 14s var(--wave-delay) ease-in-out infinite}.board-light-active:after{content:"";position:absolute;left:0;top:-30%;width:45%;height:160%;z-index:3;pointer-events:none;background:linear-gradient(90deg,transparent,#73f6ff18,#c6fdff40,#ff91db20,transparent);transform:translate(-350%) rotate(-24deg);opacity:0;animation:lightBand 4.4s linear infinite}.tile:not(:disabled):active{transform:scale(.93)}.tile.refilling{animation:refill .18s ease-out both;z-index:2}.board-frame.is-shuffling{border-color:var(--pink);box-shadow:0 0 0 4px #291b47,0 0 32px #ff52cb66,0 0 60px #4ddfff25}.board-shuffling:before{content:"";position:absolute;inset:18% -8%;border-radius:50%;background:conic-gradient(from 0deg,transparent 8%,#ff66d188 16%,transparent 24%,#46eaff66 48%,transparent 58%,#ffe57766 78%,transparent 88%);filter:blur(10px);animation:vortex 2s linear both;pointer-events:none}.board-shuffling .slot{background:transparent}.tile.spinning{animation:tileOrbit var(--shuffle-duration,2s) ease-in-out both;z-index:2;border-color:#86d6fb;box-shadow:inset 0 0 12px #89e9ff30,0 0 9px #55caff88,-5px 2px #55caff33,-10px 4px #ff61c522}.board-game-over .tile:not(.ta){opacity:.22;box-shadow:none;text-shadow:none}.board-game-over .tile.ta{z-index:3;color:#fff8bf;background:linear-gradient(145deg,#695224,#352d35);border:2px solid #ffe586;box-shadow:inset 0 0 10px #ffe79050,0 0 12px #ffd65c99;text-shadow:0 0 9px #ffe7a3;animation:remainingTaGlow 1.4s ease-in-out infinite}.game-over-heading{color:var(--gold);text-shadow:0 0 14px #ffda5a55}.game-over-actions{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:4px}@keyframes remainingTaGlow{0%,to{box-shadow:inset 0 0 10px #ffe79050,0 0 10px #ffd65c80}50%{box-shadow:inset 0 0 15px #ffe79088,0 0 18px #ffd65ccc}}.overlay{position:absolute;inset:0;z-index:6;background:linear-gradient(180deg,#0b112dd9,#211233e8);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:19px;padding:18px}.overlay:before{content:"";position:absolute;width:200px;height:200px;border:1px solid #86cfff22;border-radius:50%;box-shadow:0 0 0 23px #7b88ff08,0 0 0 46px #fc7cd707;pointer-events:none}.overlay h2{position:relative;font-size:clamp(21px,6vw,29px);letter-spacing:.03em;margin:0;color:#ffbadf;text-shadow:0 0 20px #ff57b870}.start-button{position:relative;border:1px solid #a2f8ff;border-radius:14px;background:linear-gradient(110deg,#28e0e9,#9f8cff);color:#10213f;box-shadow:0 5px #514f9e,0 0 26px #45e6e949;font-weight:850;font-size:18px;padding:17px 24px;min-width:185px;min-height:58px}.start-button span{margin-left:25px}.start-button:active{transform:translateY(2px);box-shadow:0 3px #514f9e}.start-button:disabled{opacity:.6}.rules{margin:4px auto 0;padding-left:25px;font-size:13px;line-height:1.8;color:#b1bbdf;font-weight:600}.rules li{padding-left:3px}.rules li::marker{color:#ff8bcd;font-weight:800}.effects{position:absolute;inset:0;z-index:8;overflow:hidden;pointer-events:none}.burst-group{position:absolute;inset:0}.explosion{position:absolute;width:0;height:0}.vanishing-tile,.blast-core,.blast-ring,.blast-shard{position:absolute;display:block;left:0;top:0;pointer-events:none}.blast-core{width:48px;height:48px;border-radius:50%;background:radial-gradient(circle,#fff 0 18%,#beffff 32%,#fc8fff88 55%,transparent 72%);box-shadow:0 0 26px #92f6ff99;animation:blastCore .4s .1s ease-out both}.blast-ring{width:26px;height:26px;border:3px solid #91fdff;border-radius:50%;box-shadow:0 0 10px #4eeaff,0 0 18px #4eeaff88;animation:blastRing .6s .1s ease-out both}.blast-ring.ring-echo{border-color:#ff93da;animation-delay:.08s;box-shadow:0 0 10px #ff60c7}.blast-shard{width:7px;height:13px;border-radius:2px;background:hsl(var(--hue) 100% 74%);box-shadow:0 0 8px currentColor;color:hsl(var(--hue) 100% 74%);animation:blastShard .7s .1s cubic-bezier(.12,.65,.2,1) both}.blast-shard.shard-1{width:6px;height:6px;border-radius:50%;background:#fff2aa;color:#ffe575}.blast-shard.shard-2{width:10px;height:5px;background:#ff8bd9;color:#ff72c7}.point-popup{position:absolute;display:block;white-space:nowrap;padding:4px 10px;border:1px solid #ffed9b99;border-radius:10px;background:#131b40d9;color:#fff19a;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:clamp(23px,7vw,32px);font-weight:900;letter-spacing:-.05em;text-shadow:0 0 12px #ffd95b;box-shadow:0 0 20px #d97fff55;animation:pointFly .9s ease-out both}.shake{animation:shake .18s linear}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.secondary-button{position:relative;border:1px solid #7eabcc;background:#202e50;border-radius:10px;padding:10px 12px;min-height:44px;font-weight:700}.secondary-button:disabled{opacity:.55}.ranking-link{position:relative;border:0;background:transparent;text-decoration:underline;text-underline-offset:4px;font-size:14px;min-height:40px;color:#c2d7ff}.ranking-form{position:relative;width:min(100%,245px);display:flex;flex-direction:column;gap:8px}.ranking-form input{font:inherit;font-size:16px;background:#101a34;color:inherit;border:1px solid #8b96bc;border-radius:10px;padding:10px 12px;width:100%;min-height:44px}.ranking-status{font-size:12px;line-height:1.5;margin:0;text-align:center}.ranking-dialog{width:min(calc(100% - 28px),440px);max-height:80svh;border:1px solid #718bb9;border-radius:20px;padding:18px;color:inherit;background:#111a36;box-shadow:0 20px 80px #0008}.ranking-dialog::backdrop{background:#080c20cc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.ranking-dialog header{display:flex;align-items:center;justify-content:space-between;gap:10px}.ranking-dialog h2{font-size:23px;margin:0}.ranking-dialog header button{width:44px;height:44px;font-size:30px;border:0;background:transparent}.ranking-list{list-style:none;padding:0;margin:12px 0 0}.ranking-list li{display:flex;align-items:center;gap:12px;min-height:58px;border-top:1px solid #414f75}.rank-number{width:30px;font-size:20px;font-weight:800;text-align:center}.ranking-list li:nth-child(-n+3) .rank-number{color:var(--gold)}.rank-name{flex:1;overflow-wrap:anywhere;font-size:14px}.ranking-list strong{font-size:24px;white-space:nowrap;color:var(--gold)}.ranking-list small{font-size:11px;margin-left:3px}.vanishing-tile{display:grid;place-items:center;width:var(--cell-w);height:var(--cell-h);border:1px solid #a0faff;border-radius:6px;background:linear-gradient(145deg,#303d69,#222d53);color:#f4f6ff;font-size:var(--tile-font);font-weight:800;line-height:1;box-shadow:0 0 14px #70faff80;animation:tileCollapse .12s ease-in both}.burst-shockwave{position:absolute;width:44px;height:44px;border:3px solid #fff1a8;border-radius:50%;box-shadow:0 0 16px #ffc95b,inset 0 0 10px #ff70d7;animation:burstShockwave .65s .1s ease-out both}.score-spark{position:absolute;width:9px;height:9px;border-radius:50%;background:#fff7c0;box-shadow:0 0 6px #fff,0 0 14px #ffd652,0 0 26px #ffaf3299;animation:scoreFlight .52s var(--flight-delay) cubic-bezier(.35,0,.25,1) both}.score-spark:after{content:"";position:absolute;inset:-5px;border:1px solid #ffe79166;border-radius:50%}.score-impact{position:absolute;width:32px;height:32px;border:2px solid #fff3a1;border-radius:50%;box-shadow:0 0 20px #ffc548,0 0 32px #ffbe4877;animation:scoreImpact .38s .66s ease-out both}@keyframes tileCollapse{0%{transform:translate(-50%,-50%) scale(1);opacity:1}65%{transform:translate(-50%,-50%) scale(.7);opacity:1}to{transform:translate(-50%,-50%) scale(.15);opacity:0}}@keyframes burstShockwave{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}12%{opacity:.85}to{transform:translate(-50%,-50%) scale(calc(5 * var(--blast-power)));opacity:0}}@keyframes scoreFlight{0%{transform:translate(-50%,-50%) scale(.35);opacity:0}12%{opacity:1}50%{transform:translate(calc(-50% + var(--flight-x)*.4 + var(--flight-curve)),calc(-50% + var(--flight-y)*.4 - 30px)) scale(1);opacity:1}90%{opacity:1}to{transform:translate(calc(-50% + var(--flight-x)),calc(-50% + var(--flight-y))) scale(.15);opacity:0}}@keyframes scoreImpact{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}20%{opacity:.85}to{transform:translate(-50%,-50%) scale(2.8);opacity:0}}@keyframes tileShimmer{0%,3%,12%,to{opacity:0}6%,8%{opacity:.85}}@keyframes tileWave{0%,5%,to{opacity:0}1.5%,3%{opacity:.8}}@keyframes lightBand{0%{transform:translate(-250%) rotate(-24deg);opacity:0}5%{opacity:.85}30%{transform:translate(300%) rotate(-24deg);opacity:.85}35%,to{transform:translate(300%) rotate(-24deg);opacity:0}}@keyframes scorePop{0%{transform:scale(1);filter:brightness(1)}35%{transform:scale(1.04);filter:brightness(1.45)}to{transform:scale(1);filter:brightness(1)}}@keyframes dangerGlow{50%{box-shadow:inset 0 2px #ff789933,0 0 18px #ff47793b}}@keyframes refill{0%{transform:translateY(var(--refill-start,-110%));opacity:.4}to{transform:translateY(0);opacity:1}}@keyframes blastCore{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}35%{transform:translate(-50%,-50%) scale(1.4);opacity:1}to{transform:translate(-50%,-50%) scale(calc(1.9 * var(--blast-power)));opacity:0}}@keyframes blastRing{0%{transform:translate(-50%,-50%) scale(.3);opacity:1}to{transform:translate(-50%,-50%) scale(calc(4.2 * var(--blast-power)));opacity:0}}@keyframes blastShard{0%{transform:translate(-50%,-50%) scale(.3);opacity:1}65%{opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--spin)) scale(.25);opacity:0}}@keyframes pointFly{0%{transform:translate(-50%,-30%) scale(.6);opacity:0}15%{transform:translate(-50%,-55%) scale(1.08);opacity:1}65%{opacity:1}to{transform:translate(-50%,-155%) scale(.92);opacity:0}}@keyframes vortex{0%{transform:rotate(0) scale(.8);opacity:0}20%{opacity:.75}80%{opacity:.8}to{transform:rotate(720deg) scale(.5);opacity:0}}@keyframes shake{25%{transform:translate(-3px)}75%{transform:translate(3px)}}@keyframes tileOrbit{0%{transform:translate(0);opacity:1}22%{transform:translate(var(--center-x),var(--center-y)) rotate(var(--orbit-angle)) translate(var(--orbit-radius)) scale(.72);opacity:.95}65%{transform:translate(var(--center-x),var(--center-y)) rotate(calc(var(--orbit-angle) + 600deg)) translate(var(--orbit-radius)) scale(.7);opacity:.9}90%{transform:translate(var(--center-x),var(--center-y)) rotate(calc(var(--orbit-angle) + 900deg)) translate(40%) scale(.3);opacity:.4}to{transform:translate(var(--center-x),var(--center-y)) rotate(calc(var(--orbit-angle) + 1080deg)) scale(.1);opacity:0}}@media(min-width:700px)and (min-height:850px){.game-shell{padding-top:22px}.brand{font-size:36px;margin-bottom:16px}.game-layout{gap:14px}.score-number{--score-max:60px}.board-frame{width:min(100%,432px,calc((100svh - 350px)*.666667))}.rules{font-size:14px}}@media(max-width:360px){.game-shell{padding-right:12px;padding-left:12px}.hud{gap:8px}.hud>div{padding:10px}.hud .score-panel{gap:7px}.ta-total{padding-left:7px}.ta-total b{font-size:20px}.ta-total>span{font-size:9px}.time-panel strong{font-size:31px}.board{gap:2px;padding:5px}.tile{font-size:20px}}@media(max-height:720px)and (orientation:portrait){.game-shell{padding-top:8px}.brand{font-size:26px;margin-bottom:9px}.brand:after{margin-top:5px}.game-layout{gap:8px}.hud>div{padding-top:8px;padding-bottom:8px}.score-number{--score-max:46px}.time-panel strong{font-size:36px}.board-frame{width:min(100%,calc((100svh - 254px)*.666667))}.rules{font-size:12px;line-height:1.7}.tile{font-size:21px}.board{gap:2px;padding:5px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.explosion,.burst-shockwave,.score-spark,.score-impact,.board-light-active:after,.board-illuminated .tile:before,.board-illuminated .slot:after{display:none}.point-popup{transform:translate(-50%,-50%)}}