:root{color-scheme:dark;font-family:ui-rounded,'SF Pro Rounded','Avenir Next','Segoe UI',sans-serif;color:#f5f6fd;background:#111629;font-synthesis:none;font-size:16px;--muted:#a0a9c1;--mint:#7be0c7;--pink:#fa87aa;--yellow:#ffd16e;--surface:#1a223a;--gap:5px;--board-pad:12px}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 8% 35%,#18344566,transparent 42%),radial-gradient(ellipse at 96% 78%,#39244866,transparent 45%),#111629;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}button:disabled{cursor:default}svg{width:22px;height:22px;flex-shrink:0}button,dialog{-webkit-touch-callout:none}button{user-select:none}.app{width:min(100% - 40px,490px);margin:0 auto;padding:32px 0 22px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:27px}.brand{display:flex;align-items:center;gap:12px;font-size:2rem;font-weight:850;letter-spacing:-1.5px;line-height:1}.brand-dot{color:var(--mint)}.brand-mark{display:grid;grid-template-columns:repeat(2,12px);grid-template-rows:repeat(2,12px);gap:3px;transform:rotate(-8deg);margin-left:2px}.brand-mark i{border-radius:3px;background:var(--mint);box-shadow:inset 0 1px 0 #ffffff60}.brand-mark i:nth-child(2){background:var(--yellow)}.brand-mark i:nth-child(3){background:var(--pink)}.icon-button{width:42px;height:42px;border:1px solid #ffffff12;border-radius:50%;background:#ffffff05;display:grid;place-items:center;color:#b8c2da;transition:background .15s,color .15s}.icon-button:hover{background:#ffffff0d;color:white}.scoreboard{display:flex;align-items:center;justify-content:space-between;padding:0 9px 18px}.score-primary{display:flex;flex-direction:column;gap:1px}.eyebrow{font-size:.75rem;letter-spacing:1.5px;font-weight:750;color:var(--muted);display:flex;align-items:center;gap:6px}.score-number{font-size:3.15rem;line-height:1.18;font-weight:800;letter-spacing:-1.5px;font-variant-numeric:tabular-nums}.best-score{display:flex;flex-direction:column;align-items:flex-end;gap:1px}.best-score .eyebrow{color:var(--yellow)}.best-score svg{width:16px;height:16px}.best-number{font-size:1.7rem;line-height:1.3;font-weight:750;font-variant-numeric:tabular-nums}.device-label{font-size:.75rem;color:#838fae}.board-wrap{position:relative}.board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--gap);padding:var(--board-pad);border-radius:20px;background:linear-gradient(155deg,#26334f,#1d2944);border:1px solid #46527177;box-shadow:0 12px 0 -7px #080e21,0 26px 65px -32px #030714,0 1px 0 #ffffff0d inset;touch-action:manipulation;isolation:isolate}.board-row{display:contents}.cell{position:relative;min-width:0;aspect-ratio:1;border:0;padding:0;background:#131e35;box-shadow:0 1px 1px #0003 inset,0 1px 0 #ffffff04;border-radius:7px;touch-action:manipulation;transition:background-color .13s,box-shadow .13s;outline-offset:-2px!important}.cell:focus-visible{z-index:2}.cell.filled,.piece-tile,.ghost-tile{background:var(--tile);box-shadow:inset 0 2px 0 #ffffff50,inset 0 -4px 0 #0000001c,0 2px 3px #0000000d;border-radius:6px}.cell.filled:after,.piece-tile:after,.ghost-tile:after{content:'';position:absolute;inset:5px;border-radius:3px;border:1px solid #ffffff13;pointer-events:none}.cell.preview{background:color-mix(in srgb,var(--tile) 42%,#131e35);box-shadow:inset 0 0 0 2px var(--tile)}.cell.preview.invalid{background:#874755;box-shadow:inset 0 0 0 2px #ff8396}.cell.line-preview:not(.preview){filter:brightness(1.22);box-shadow:inset 0 0 0 2px #ffffff77,inset 0 -4px 0 #0000001c}.cell.just-placed{animation:land .22s ease-out}.cell.clearing{animation:clear .28s ease-in forwards;z-index:1}.board.flash{animation:board-flash .32s ease}.tray-heading{display:flex;justify-content:space-between;gap:12px;margin:26px 5px 13px;color:#97a4c2;font-size:.75rem;font-weight:700;letter-spacing:1.2px}.tray-heading span:last-child{font-weight:500;letter-spacing:0;color:#9ba7c3}.tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-height:118px}.piece-slot{position:relative;display:grid;place-items:center;min-width:0;height:118px;border:1px solid #303951;border-radius:15px;background:#1b2237aa;transition:background .18s,border .18s,transform .18s;touch-action:none;padding:10px;overflow:hidden}.piece-slot:hover:not(:disabled){background:#232e48;border-color:#61708e}.piece-slot.selected{border-color:var(--piece-color);background:color-mix(in srgb,var(--piece-color) 9%,#1b2237);box-shadow:0 0 0 1px var(--piece-color)}.piece-slot.empty{border-color:#ffffff06;background:#19203550}.piece-slot.empty::after{content:'✓';font-size:1.5rem;color:#4a576f}.piece-slot.no-fit{opacity:.48}.piece-slot.selected.no-fit{opacity:.85}.piece-slot.dragging .piece-shape{opacity:.18}.piece-shape{display:grid;gap:3px;pointer-events:none;transition:transform .16s}.piece-slot.selected .piece-shape{transform:translateY(-2px)}.piece-tile,.ghost-tile{position:relative;width:100%;height:100%}.piece-tile:after{inset:3px;border-radius:2px}.piece-key{position:absolute;bottom:6px;left:10px;color:#71809e;font-size:.75rem;font-weight:600}.instruction{min-height:42px;margin:18px 0 10px;padding:0 8px;text-align:center;color:#b2bdd4;font-size:.875rem;line-height:1.5}.instruction.error{color:#ffadc0}.bottom-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 4px 0;border-top:1px solid #ffffff0b}.calm-note{display:flex;align-items:center;gap:7px;color:#929fb9;font-size:.875rem;line-height:1.4}.mini-grid{font-size:22px;line-height:1;color:#7fa591}.text-button{display:flex;align-items:center;gap:6px;border:0;background:transparent;color:#c8d2e7;padding:8px 0 8px 8px;font-size:.875rem;white-space:nowrap}.text-button:hover{color:var(--mint)}.text-button svg{width:16px;height:16px}.page-footer{text-align:center;font-size:.75rem;color:#6e7d9d;padding-top:28px;letter-spacing:.4px}.celebration{position:absolute;top:43%;left:0;right:0;z-index:10;display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none;opacity:0;transform:translateY(8px) scale(.92)}.celebration.show{animation:celebrate 1.15s ease forwards}.celebration strong{font-size:clamp(1.65rem,6vw,2.8rem);font-weight:850;letter-spacing:-1px;color:#fff;text-shadow:0 3px 0 #102035,0 0 18px #102035,0 0 30px #102035}.celebration span{background:#14253ded;padding:7px 14px;border:1px solid #89e7d588;border-radius:30px;font-size:1rem;color:var(--mint);font-weight:750;box-shadow:0 6px 30px #0004}.drag-ghost{position:fixed;display:grid;gap:var(--gap);z-index:50;pointer-events:none;opacity:.94;filter:drop-shadow(0 10px 9px #0006);transform:scale(1.015);transition:opacity .08s}.drag-ghost.invalid{opacity:.6}.drag-ghost .ghost-tile{min-width:0}.noscript{padding:20px;color:var(--yellow)}dialog{position:fixed;max-width:440px;width:calc(100% - 32px);max-height:calc(100svh - 40px);overflow:auto;background:#1b243b;color:#f5f6fd;border:1px solid #435071;border-radius:24px;padding:36px 30px 27px;box-shadow:0 30px 100px #0007}dialog::backdrop{background:#080c1dbc;backdrop-filter:blur(7px)}.dialog-close{position:absolute;right:14px;top:14px;width:32px;height:32px;font-size:1.4rem;line-height:1}.dialog-eyebrow{font-size:.75rem;color:var(--mint);font-weight:750;letter-spacing:1.8px;display:block;margin-bottom:14px}dialog h1,dialog h2{font-size:1.8rem;line-height:1.22;font-weight:800;letter-spacing:-.6px;margin:0 0 22px}.rules{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:20px}.rules li{display:flex;gap:13px;align-items:flex-start}.rule-number{width:26px;height:26px;flex-shrink:0;background:#7be0c719;border-radius:8px;color:var(--mint);display:grid;place-items:center;font-size:.875rem;font-weight:750}.rules strong{font-size:1rem;line-height:1.5}.rules p,.keyboard-note,.dialog-copy{font-size:.875rem;line-height:1.6;color:#b1bdd3;margin:3px 0 0}.scoring-note{margin:22px 0 15px;padding:12px;background:#11192e80;border-radius:10px;color:var(--yellow);font-size:.875rem;line-height:1.5}.keyboard-note{font-size:.75rem;margin-bottom:22px}.primary-button,.secondary-button{width:100%;border:0;border-radius:12px;padding:15px 12px;font-size:1rem;font-weight:750}.primary-button{color:#11342e;background:var(--mint);box-shadow:0 3px 0 #469e90;transition:filter .15s}.primary-button:hover{filter:brightness(1.09)}.primary-button:active{transform:translateY(2px);box-shadow:0 1px 0 #469e90}.secondary-button{margin-top:10px;background:transparent;color:#b8c5de;font-size:.875rem;font-weight:550}.secondary-button:hover{background:#ffffff08}#restart-dialog .dialog-copy{margin:-7px 0 24px}#gameover-dialog{text-align:center}.end-mark{display:grid;grid-template-columns:repeat(2,19px);grid-template-rows:repeat(2,19px);gap:4px;width:max-content;margin:0 auto 22px;transform:rotate(-9deg)}.end-mark i{background:var(--mint);border-radius:5px;box-shadow:inset 0 2px 0 #fff5}.end-mark i:nth-child(2){background:var(--pink);transform:translate(3px,-3px) rotate(8deg)}.end-mark i:nth-child(3){background:var(--yellow)}.end-mark i:nth-child(4){background:#8b9afa}#gameover-dialog h2{margin-bottom:8px}.end-score{display:flex;flex-direction:column;align-items:center;background:#11192e80;border-radius:15px;padding:20px;margin:24px 0 12px}.end-score>span{font-size:.75rem;letter-spacing:1.5px;color:var(--muted);font-weight:700}.end-score>strong{font-size:3.25rem;letter-spacing:-1px;line-height:1.3}.end-detail{color:var(--yellow);font-size:.875rem;margin:0 0 24px}.shake{animation:shake .25s ease}.score-bump{animation:score-bump .22s ease}
@keyframes land{0%{transform:scale(.76)}65%{transform:scale(1.07)}100%{transform:scale(1)}}@keyframes clear{0%{filter:brightness(1)}40%{filter:brightness(1.8);transform:scale(1.08)}100%{opacity:0;transform:scale(.45)}}@keyframes board-flash{50%{border-color:#aaf0df;box-shadow:0 0 22px #7be0c733}}@keyframes celebrate{0%{opacity:0;transform:translateY(8px) scale(.92)}15%,68%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-16px) scale(1)}}@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}@keyframes score-bump{50%{transform:scale(1.08);color:var(--mint)}}
@media(min-width:800px){.app{padding-top:36px}.board-wrap:before,.board-wrap:after{content:'';position:absolute;z-index:-1;width:180px;height:180px;border-radius:44px;border:1px solid #687ab912;transform:rotate(18deg);left:-220px;top:50px}.board-wrap:after{width:100px;height:100px;left:auto;right:-174px;top:auto;bottom:40px;transform:rotate(-16deg);border-color:#7be0c712}}
@media(max-width:520px){:root{--gap:4px;--board-pad:10px}.app{width:min(100% - 30px,440px);padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(18px,env(safe-area-inset-bottom))}.topbar{margin-bottom:20px}.brand{font-size:1.8rem}.scoreboard{padding-bottom:15px}.score-number{font-size:2.65rem}.best-number{font-size:1.5rem}.board{border-radius:17px}.cell,.cell.filled{border-radius:5px}.cell.filled:after{inset:4px;border-radius:2px}.tray-heading{margin-top:23px;margin-bottom:11px;font-size:.75rem;letter-spacing:.7px}.tray{gap:9px;min-height:98px}.piece-slot{height:98px;border-radius:12px;padding:7px}.piece-key{display:none}.instruction{font-size:.875rem;margin-top:15px;margin-bottom:7px}.bottom-bar{padding-top:11px}.calm-note{font-size:.75rem;gap:4px}.text-button{font-size:.875rem;gap:5px}.page-footer{padding-top:20px}.piece-tile{border-radius:4px}dialog{padding:34px 24px 24px}}
@media(max-width:360px){.app{width:calc(100% - 22px)}.bottom-bar{align-items:flex-start}.calm-note{max-width:175px}.tray{gap:7px}.piece-slot{height:91px}.score-number{font-size:2.3rem}.topbar{margin-bottom:15px}.instruction{font-size:.8rem}}
@media(min-width:600px) and (max-height:860px){.app{width:440px;padding-top:20px}.topbar{margin-bottom:15px}.scoreboard{padding-bottom:12px}.score-number{font-size:2.55rem}.tray-heading{margin-top:20px}.piece-slot{height:104px}.tray{min-height:104px}.page-footer{padding-top:18px}.instruction{margin-top:14px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.celebration.show{opacity:1;transform:none}}

/* The studio loading screen shares the game's palette and block shapes. */
.app{transition:opacity .34s ease}
body.is-loading{overflow:hidden}
.is-loading .app{opacity:0}
.loading-screen{position:fixed;inset:0;z-index:100;overflow:hidden;background:radial-gradient(ellipse at 12% 35%,#18344566,transparent 48%),radial-gradient(ellipse at 92% 78%,#39244866,transparent 48%),#111629;opacity:1;transition:opacity .34s ease}
.loading-screen[hidden],.loading-dots[hidden],.loading-retry[hidden]{display:none}
.loading-screen.is-leaving{opacity:0}
.loading-center{position:absolute;left:50%;top:50%;width:calc(100% - 40px);max-width:650px;transform:translate(-50%,-50%);text-align:center}
.loading-title{margin:0;font-size:clamp(1.35rem,5.6vw,2.75rem);line-height:1.3;font-weight:800;letter-spacing:-.035em;overflow-wrap:anywhere}
.loading-title>span{color:var(--mint)}
.loading-mark{position:absolute;bottom:calc(100% + 35px);left:50%;display:grid;grid-template-columns:repeat(2,25px);grid-template-rows:repeat(2,25px);gap:6px;transform:translateX(-50%) rotate(-8deg)}
.loading-mark i{background:var(--mint);border-radius:7px;box-shadow:inset 0 2px 0 #ffffff50,inset 0 -3px 0 #0000001c,0 6px 20px #0002}
.loading-mark i:nth-child(2){background:var(--yellow)}
.loading-mark i:nth-child(3){background:var(--pink)}
.loading-status{position:absolute;top:calc(100% + 27px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:13px;width:min(100%,320px);font-size:.75rem;line-height:1.6;color:var(--muted);letter-spacing:.6px}
.loading-dots{display:flex;gap:7px;align-items:center;height:13px}
.loading-dots i{width:7px;height:7px;border-radius:2px;background:var(--mint);animation:loading-pulse 1.05s ease-in-out infinite}
.loading-dots i:nth-child(2){background:var(--yellow);animation-delay:.15s}
.loading-dots i:nth-child(3){background:var(--pink);animation-delay:.3s}
.loading-credit{position:absolute;left:20px;right:20px;bottom:max(28px,env(safe-area-inset-bottom));margin:0;text-align:center;font-size:.75rem;line-height:1.6;font-weight:400;letter-spacing:.055em;color:var(--muted)}
.loading-retry{position:absolute;top:calc(100% + 95px);left:50%;transform:translateX(-50%);justify-content:center;min-height:44px;color:var(--mint);padding:10px 18px;border:1px solid #7be0c750;border-radius:10px}
.loading-notice{font-size:.875rem;color:var(--muted);margin:22px 0 0}
@keyframes loading-pulse{0%,75%,100%{opacity:.35;transform:translateY(0)}35%{opacity:1;transform:translateY(-4px)}}
@media(max-height:400px){.loading-mark{bottom:calc(100% + 20px);grid-template-columns:repeat(2,18px);grid-template-rows:repeat(2,18px);gap:4px}.loading-credit{bottom:14px}.loading-status{top:calc(100% + 18px);gap:6px}}
@media(prefers-reduced-motion:reduce){.loading-dots i{animation:none;opacity:1}.loading-screen,.app{transition:none}}

.studio-credit{display:block;margin-top:7px;color:#7786a3;font-size:.68rem;letter-spacing:.15px}
.loading-mark{display:block;width:68px;height:68px}
.loading-mark img{display:block;width:100%;height:100%}
.brand-mark{display:block;width:28px;height:28px;transform:none}
.legal-credit{display:flex;flex-direction:column;gap:4px;margin:19px 0 20px;padding-top:14px;border-top:1px solid #ffffff0b;color:#7f8eaa;font-size:.72rem;line-height:1.5;letter-spacing:.15px}
.legal-credit strong{color:#a9b6ce;font-size:.78rem;font-weight:700}
@media(max-height:400px){.loading-mark{width:52px;height:52px}}
.loading-mark{transform:translateX(-50%)}

/* Reserve gestures that begin on a piece for the game, including iOS Safari. */
.tray,.piece-slot,.piece-slot *{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.drag-ghost{left:0;top:0;will-change:transform;contain:layout style;transition:none}
.is-dragging .cell,.is-dragging .piece-shape{transition:none}
.cell.clearing{animation-duration:.16s}
#sync-retry{font-size:.75rem;min-height:36px;padding:4px;color:var(--mint);white-space:normal}