:root{color-scheme:dark;font-family:ui-rounded,Avenir Next,Trebuchet MS,Noto Sans TC,system-ui,sans-serif;font-synthesis:none;background:#0d1330;--sky: #5269bb;--sky-light: #6379c6;--sky-deep: #4358a5;--navy: #172654;--navy-mid: #22336d;--navy-soft: #30427d;--deep: #0d1330;--deep-2: #141d47;--neon: #4d78ff;--neon-soft: #3f6bff;--cream: #fffdf4;--yellow: #ffd22f;--yellow-deep: #d89409;--focus: #fff2a5}*{box-sizing:border-box}html,body,#root{width:100%;height:100%}html{background:var(--deep)}body{min-width:320px;min-height:100dvh;margin:0;overflow:hidden;background:var(--deep);color:var(--cream)}button{font:inherit}button:not(:disabled){cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible{outline:3px solid var(--focus);outline-offset:4px}.block-app{width:100%;height:100dvh;min-height:100dvh;overflow:hidden;background:radial-gradient(circle at 50% -8%,rgb(77 120 255 / 42%),transparent 52%),radial-gradient(circle at 50% 108%,rgb(45 74 190 / 38%),transparent 55%),linear-gradient(180deg,var(--deep-2),var(--deep) 68%)}.stage-shell{position:relative;isolation:isolate;width:100%;height:100dvh;min-height:100dvh;overflow:hidden}.stage-shell:before,.stage-shell:after{position:absolute;z-index:-1;pointer-events:none;content:""}.stage-shell:before{top:0;right:0;bottom:0;left:0;opacity:.34;background:radial-gradient(circle at 7% 34%,rgb(255 224 61 / 85%) 0 2px,transparent 3px),radial-gradient(circle at 12% 51%,rgb(255 224 61 / 72%) 0 1px,transparent 3px),radial-gradient(circle at 89% 39%,rgb(255 224 61 / 72%) 0 2px,transparent 3px),radial-gradient(circle at 94% 57%,rgb(255 224 61 / 64%) 0 1px,transparent 3px),radial-gradient(circle at 23% 82%,rgb(255 255 255 / 48%) 0 1px,transparent 3px),radial-gradient(circle at 78% 75%,rgb(255 255 255 / 42%) 0 2px,transparent 3px)}.stage-shell:after{top:12%;right:3%;bottom:5%;left:3%;border:1px solid rgb(255 255 255 / 5%);border-radius:44% 56% 48% 52%;transform:rotate(-8deg)}.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}.home-stage{display:grid;place-items:center;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))}.home-stage:before{opacity:.48;background:radial-gradient(circle at 18% 18%,rgb(255 255 255 / 22%) 0 2px,transparent 3px),radial-gradient(circle at 82% 23%,rgb(255 226 58 / 84%) 0 2px,transparent 3px),radial-gradient(circle at 14% 74%,rgb(255 226 58 / 65%) 0 1px,transparent 3px),radial-gradient(circle at 88% 79%,rgb(255 255 255 / 36%) 0 2px,transparent 3px)}.home-sparkles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.home-sparkles:before,.home-sparkles:after{position:absolute;width:clamp(2.5rem,8vw,5rem);height:clamp(2.5rem,8vw,5rem);content:"";opacity:.42;background:linear-gradient(45deg,transparent 42%,rgb(255 231 73 / 78%) 43% 57%,transparent 58%),linear-gradient(-45deg,transparent 42%,rgb(255 231 73 / 78%) 43% 57%,transparent 58%)}.home-sparkles:before{top:19%;left:12%}.home-sparkles:after{right:11%;bottom:22%;transform:scale(.6)}.home-content{display:flex;width:min(88vw,30rem);flex-direction:column;align-items:center;text-align:center;transform:translateY(-2vh)}.home-logo{position:relative;width:clamp(7.4rem,28vw,13rem);height:clamp(7rem,26vw,12rem);margin-bottom:clamp(.75rem,2.4vh,1.6rem)}.home-logo__crown{position:absolute;top:0;left:50%;width:72%;height:69%;color:var(--yellow);filter:drop-shadow(0 .35rem 0 #8d5e18) drop-shadow(0 .55rem .35rem rgb(24 37 91 / 42%));transform:translate(-50%)}.home-logo__blocks{position:absolute;bottom:0;left:50%;display:grid;width:70%;height:31%;grid-template-columns:repeat(4,1fr);gap:3px;transform:translate(-50%)}.logo-block{position:relative;display:block;border-radius:3px;box-shadow:inset 0 3px #ffffff6b,inset -4px -5px #4712454d,0 4px #1d225b59}.logo-block:after{position:absolute;right:0;bottom:0;width:21%;height:82%;content:"";background:#47124547;clip-path:polygon(100% 0,100% 100%,0 82%,0 16%)}.logo-block--flame{background:linear-gradient(145deg,#ff8462 0,#ff8462 12%,#f04c32 56%,#b72731)}.logo-block--leaf{background:linear-gradient(145deg,#6eff70 0,#6eff70 12%,#20d03f 56%,#008c43)}.logo-block--violet{background:linear-gradient(145deg,#e28cff 0,#e28cff 12%,#9950e7 56%,#5423a2)}.logo-block--sun{background:linear-gradient(145deg,#fff17e 0,#fff17e 12%,#ffcb13 56%,#dc8500)}.home-kicker,.best-score__label,.score-block__label,.game-over-card__eyebrow,.final-score span{margin:0;color:#e8f1ffc7;font-size:clamp(.58rem,1.9vw,.82rem);font-weight:800;letter-spacing:.22em}.home-kicker{margin-bottom:.45rem;color:#fff49ee0}.home-title{margin:0;color:var(--cream);font-size:clamp(2.55rem,11.5vw,6.5rem);font-weight:950;letter-spacing:-.075em;line-height:.9;text-shadow:0 .1em 0 #293b82,0 .17em 0 rgb(24 35 87 / 42%)}.home-title span{color:var(--yellow)}.home-copy{margin:clamp(.8rem,2.5vh,1.4rem) 0 clamp(1.2rem,4vh,2.1rem);color:#f6faffd6;font-size:clamp(.9rem,3.8vw,1.35rem);font-weight:700;letter-spacing:.12em}.start-button,.game-action{border:0;color:var(--navy);font-weight:950;transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}.start-button{display:inline-flex;width:min(70vw,17.5rem);min-height:clamp(3.5rem,9vh,5.4rem);align-items:center;justify-content:center;gap:1.1rem;border-radius:999px;background:linear-gradient(180deg,#fff06d 0%,var(--yellow) 58%,#f3b914 100%);box-shadow:inset 0 3px #ffffff9e,0 .34rem #b87812,0 .68rem 1.2rem #18255b59;font-size:clamp(1.35rem,5vw,2.2rem);letter-spacing:.16em;text-indent:.16em}.start-button__arrow{display:inline-block;font-size:1.15em;line-height:1;transition:transform .14s ease}.start-button:hover,.game-action:hover{filter:brightness(1.05);transform:translateY(-2px)}.start-button:hover .start-button__arrow{transform:translate(4px)}.start-button:active,.game-action:active{box-shadow:inset 0 3px #ffffff70,0 .15rem #b87812,0 .35rem .7rem #18255b4d;transform:translateY(3px)}.home-best{margin:clamp(1.1rem,3.2vh,2rem) 0 0;color:#e5f0ffb3;font-size:clamp(.66rem,2.5vw,.88rem);font-weight:800;letter-spacing:.19em}.home-best strong{margin-left:.35rem;color:var(--cream);font-size:1.15em}.home-footer{position:absolute;bottom:max(1rem,env(safe-area-inset-bottom));left:50%;margin:0;color:#e6eeff85;font-size:clamp(.5rem,1.8vw,.7rem);font-weight:800;letter-spacing:.2em;transform:translate(-50%);white-space:nowrap}.game-stage{display:flex;flex-direction:column;align-items:center;padding:max(.55rem,env(safe-area-inset-top)) max(.5rem,env(safe-area-inset-right)) max(.5rem,env(safe-area-inset-bottom)) max(.5rem,env(safe-area-inset-left))}.game-topbar{z-index:1;display:flex;width:min(92vw,59rem);min-height:clamp(3rem,6.5dvh,6rem);align-items:flex-start;justify-content:space-between;margin-top:clamp(.15rem,1.2dvh,1.4rem)}.best-score{display:inline-flex;align-items:center;gap:clamp(.4rem,1.2vw,1rem);min-width:6.5rem;color:var(--yellow);filter:drop-shadow(0 .22rem 0 rgb(41 49 116 / 52%))}.best-score__crown{width:clamp(2.8rem,7.6vw,5.8rem);height:clamp(2.8rem,7.6vw,5.8rem);fill:currentColor;stroke:#ffe86a}.best-score__copy{display:flex;flex-direction:column;align-items:flex-start;line-height:.95}.best-score__label{display:none}.best-score__copy strong{color:#ffde34;font-size:clamp(1.4rem,5.4vw,4.6rem);font-weight:950;letter-spacing:-.07em;text-shadow:0 .07em 0 #a46b13}.settings-button{display:grid;width:clamp(2.8rem,7.4vw,5.4rem);height:clamp(2.8rem,7.4vw,5.4rem);place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:#bfeaff;filter:drop-shadow(0 .23rem 0 rgb(38 58 128 / 54%));transition:background .14s ease,transform .14s ease}.settings-button svg{width:76%;height:76%;filter:drop-shadow(0 2px 0 #5d8fb5)}.settings-button:hover{background:#ccefff26;transform:rotate(10deg)}.score-block{z-index:1;display:flex;min-height:clamp(4.6rem,11dvh,12rem);flex:0 0 auto;flex-direction:column;align-items:center;justify-content:center;margin-top:clamp(.1rem,1.2dvh,1.6rem)}.score-block__label{display:none}.score-value{display:block;color:#fffefc;font-size:clamp(4.4rem,15vw,10rem);font-weight:950;letter-spacing:-.1em;line-height:.83;text-shadow:0 .055em 0 #23377f,0 .09em 0 #26306c,0 .14em 0 rgb(30 43 103 / 36%)}.board-area{z-index:1;width:min(87vw,49dvh);aspect-ratio:1;flex:0 0 auto;margin-top:clamp(.45rem,1.8dvh,2.1rem)}.board-frame{width:100%;height:100%;padding:clamp(.2rem,.55vw,.45rem);border:clamp(.16rem,.5vw,.34rem) solid #3f63d6;border-radius:clamp(.35rem,.8vw,.7rem);background:#0f1740;box-shadow:0 0 0 1px #789aff73,0 0 20px 2px #3f6bff6b,0 .3rem .55rem #060a2299,inset 0 0 14px #2542a08c}.board-grid{display:grid;width:100%;height:100%;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));gap:clamp(1px,.28vw,3px);background:#3350bf;touch-action:none}.board-cell{position:relative;min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:linear-gradient(145deg,#17245c,#111d4c 72%);box-shadow:inset 1px 1px #5a78d229,inset -1px -1px #060c2857;touch-action:none;contain:layout paint}.board-cell:hover{background:linear-gradient(145deg,#24347a,#1a2a63 72%)}.board-cell[aria-selected=true]{z-index:2}.block-tile{position:absolute;z-index:1;top:1px;right:1px;bottom:1px;left:1px;display:block;overflow:hidden;border:1px solid rgb(53 20 77 / 36%);border-radius:3px 3px 1px 1px;background:linear-gradient(145deg,var(--tile-top) 0%,var(--tile-mid) 52%,var(--tile-deep) 100%);box-shadow:inset 0 3px #ffffff6b,inset 3px 0 #ffffff2e,inset -4px -5px #370b4357,0 2px 0 var(--tile-shadow),0 3px 4px #101a4a57}.block-tile:before{position:absolute;top:0;left:0;width:100%;height:24%;content:"";background:linear-gradient(180deg,#ffffff7f,#ffffff0d);clip-path:polygon(0 0,100% 0,88% 100%,12% 100%)}.block-tile:after{position:absolute;right:0;bottom:0;width:20%;height:86%;content:"";background:linear-gradient(180deg,#420b4c17,#31094675);clip-path:polygon(100% 0,100% 100%,0 83%,0 17%)}.block-tile--flame{--tile-top: #ff9777;--tile-mid: #f25536;--tile-deep: #c72d2e;--tile-shadow: #8f2130}.block-tile--leaf{--tile-top: #78ff87;--tile-mid: #24d846;--tile-deep: #049548;--tile-shadow: #006d3e}.block-tile--violet{--tile-top: #eba0ff;--tile-mid: #a455e8;--tile-deep: #6026a7;--tile-shadow: #451780}.block-tile--sky{--tile-top: #8beeff;--tile-mid: #29c9e8;--tile-deep: #087ebf;--tile-shadow: #075a9c}.block-tile--sun{--tile-top: #fff48a;--tile-mid: #ffd21b;--tile-deep: #efa300;--tile-shadow: #bd6e00}.block-tile--tangerine{--tile-top: #ffc56d;--tile-mid: #ff8c22;--tile-deep: #d4511d;--tile-shadow: #9f351b}.block-tile--preview{z-index:3;background:var(--tile-top);border-color:var(--tile-mid);box-shadow:none;opacity:.3}.block-tile--preview:before,.block-tile--preview:after{display:none}.piece-dock{z-index:1;display:grid;width:min(92vw,59rem);min-height:clamp(3.7rem,10dvh,9rem);grid-template-columns:repeat(3,1fr);align-items:center;justify-items:center;flex:0 0 auto;margin-top:clamp(.4rem,4.6dvh,5.5rem)}.piece-slot{display:grid;width:100%;min-height:clamp(3.3rem,9dvh,7rem);place-items:center}.tray-piece{display:grid;min-width:0;min-height:clamp(3.3rem,9dvh,7rem);place-items:center;padding:clamp(.2rem,.9vw,.65rem);border:2px solid transparent;border-radius:.55rem;background:transparent;touch-action:none;user-select:none;-webkit-user-select:none;transition:border-color .14s ease,background .14s ease,opacity .14s ease}.tray-piece:hover,.tray-piece--selected{border-color:#fff0879e;background:#ffffff12}.tray-piece--selected{box-shadow:0 0 0 3px #ffde3930}.tray-piece--dragging{opacity:.28}.piece-preview-grid{display:grid;grid-template-columns:repeat(var(--piece-columns),var(--tray-unit));grid-template-rows:repeat(var(--piece-rows),var(--tray-unit));gap:clamp(1px,.35vw,4px)}:root{--tray-unit: clamp(1.25rem, min(6.4vw, 6.4dvh), 4.35rem)}.tray-cell{position:relative;width:var(--tray-unit);height:var(--tray-unit)}.tray-cell--empty{visibility:hidden}.tray-cell .block-tile{top:0;right:0;bottom:0;left:0}.drag-ghost{position:fixed;top:0;left:0;z-index:40;pointer-events:none;will-change:transform}.drag-ghost__grid{display:grid}.ghost-cell{position:relative;width:var(--ghost-cell);height:var(--ghost-cell)}.ghost-cell .block-tile{top:0;right:0;bottom:0;left:0}.slogan{z-index:1;flex:0 0 auto;max-width:96vw;margin:clamp(.25rem,4dvh,4.5rem) 0 0;color:var(--yellow);font-size:clamp(2.5rem,13vw,9rem);font-style:italic;font-weight:950;letter-spacing:-.075em;line-height:.8;text-align:center;transform:skew(-5deg);text-shadow:0 .07em 0 #a56b14,0 .13em 0 #293777,0 .18em 0 rgb(22 36 91 / 35%);white-space:nowrap}.game-over-layer{position:absolute;z-index:10;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:1rem;background:#1c2c69a8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.game-over-card{width:min(88vw,24rem);padding:clamp(1.4rem,5vw,2.2rem);border:2px solid rgb(255 241 140 / 54%);border-radius:1.2rem;background:linear-gradient(160deg,#3a509df7,#23336ff7);box-shadow:0 .45rem #182859,0 1.2rem 2.6rem #0e1b4b6b,inset 0 1px #ffffff2e;text-align:center}.game-over-card__eyebrow{color:#ffed79eb;font-size:.62rem}.game-over-card h2{margin:.55rem 0 0;color:var(--cream);font-size:clamp(2rem,9vw,3.4rem);font-weight:950;letter-spacing:-.07em;line-height:.95;text-shadow:0 .08em 0 #263570}.game-over-card p{margin:.85rem 0 1.15rem;color:#ecf5ffd1;font-size:.9rem;font-weight:700;line-height:1.55}.final-score{display:flex;flex-direction:column;align-items:center;padding:.75rem 0;border-top:1px solid rgb(255 255 255 / 14%);border-bottom:1px solid rgb(255 255 255 / 14%)}.final-score strong{color:var(--yellow);font-size:2.3rem;font-weight:950;letter-spacing:-.08em;line-height:1;text-shadow:0 .08em 0 #a56b14}.game-over-actions{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1.2rem}.game-over-actions--single{grid-template-columns:1fr}.game-action{display:inline-flex;min-height:3rem;align-items:center;justify-content:center;gap:.35rem;border-radius:.75rem;font-size:.9rem}.game-action--primary{background:linear-gradient(180deg,#fff16b,#ffd027);box-shadow:inset 0 2px #ffffff94,0 3px #a96d12}.game-action--secondary{border:1px solid rgb(220 239 255 / 40%);color:var(--cream);background:#ffffff1a;box-shadow:inset 0 1px #ffffff29,0 3px #1422558c}@media(min-width:900px)and (min-aspect-ratio:.9 / 1){.stage-shell{width:min(100%,34rem);margin-inline:auto}.block-app{display:grid;place-items:center}}@media(max-height:700px){.game-topbar{min-height:2.7rem;margin-top:0}.score-block{min-height:4.2rem;margin-top:0}.board-area{margin-top:.35rem}.piece-dock{margin-top:1.25rem}.slogan{margin-top:1.1rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}