html,body{background-color:#0f1425;background-image:radial-gradient(circle at 0 0,#25314d 0%,#151b2ee6 45%,#0f1425 100%);background-attachment:fixed;height:100%;min-height:100%;margin:0;padding:0}#root{min-height:100%}.app{--page-padding:24px;--layout-gap:18px;--layout-columns:max-content minmax(320px, 1fr);--controls-justify:flex-start;--new-puzzle-width:auto;--board-cell-size:42px;--board-grid-size:calc(var(--board-cell-size) * 9);--board-frame-padding:12px;--tray-height:auto;--tray-min-height:220px;--tray-width:auto;--tray-list-flex:1 1 auto;--tray-list-min-height:0px;--board-number-size:1.05rem;padding:var(--page-padding);color:#f8f9fa;font-family:ui-sans-serif,system-ui,sans-serif}.app-shell{width:100%;margin:0 auto}.app-header{margin-bottom:20px}.app-title{letter-spacing:.14em;text-transform:uppercase;color:#fcd34d;margin-top:0;margin-bottom:8px}.app-intro{opacity:.84;max-width:66ch;margin-top:0;line-height:1.6}.app-controls{align-items:center;gap:12px;justify-content:var(--controls-justify);flex-wrap:wrap;margin-bottom:14px;display:flex}.app-control-label{align-items:center;gap:8px;font-weight:600;display:flex}.app-select{color:#f8f9fa;cursor:pointer;background:#0f1425a6;border:1px solid #ffffff47;border-radius:999px;padding:10px 14px;font-weight:700}.app-button{color:#0f1425;cursor:pointer;background:#f8f9fa;border:none;border-radius:999px;padding:12px 18px;font-weight:700}.app-button-new{width:var(--new-puzzle-width)}.game-layout{gap:var(--layout-gap);grid-template-columns:var(--layout-columns);align-items:start;display:grid}.board-scroll-wrap{width:100%;padding-bottom:2px;overflow-x:auto}.board-grid{grid-template-columns:repeat(9, var(--board-cell-size));grid-template-rows:repeat(9, var(--board-cell-size));padding:var(--board-frame-padding);-webkit-user-select:none;user-select:none;background:#ffffff0f;border-radius:22px;gap:0;width:fit-content;display:grid;position:relative;box-shadow:0 20px 60px #00000059}.board-cell{width:var(--board-cell-size);height:var(--board-cell-size);color:#0b1020;box-shadow:none;box-sizing:border-box;background:#ffffff0a;border:1px solid #ffffff14;border-radius:0;justify-content:center;align-items:center;font-weight:700;transition:background .12s,transform .12s,box-shadow .12s;display:flex;position:relative}.board-cell-bg-empty{background:#ffffff0a}.board-cell-bg-filled{background:0 0}.board-cell-bg-preview-valid{background:#7fffb08c}.board-cell-bg-preview-invalid{background:#ff63848c}.board-cell-empty{border-radius:10px}.board-cell-filled{border-radius:0}.board-cell-filled.has-same-piece-above{border-top-color:#0000}.board-cell-filled.has-same-piece-right{border-right-color:#0000}.board-cell-filled.has-same-piece-below{border-bottom-color:#0000}.board-cell-filled.has-same-piece-left{border-left-color:#0000}.board-cell-filled:not(.has-same-piece-above):not(.has-same-piece-left){border-top-left-radius:10px}.board-cell-filled:not(.has-same-piece-above):not(.has-same-piece-right){border-top-right-radius:10px}.board-cell-filled:not(.has-same-piece-below):not(.has-same-piece-right){border-bottom-right-radius:10px}.board-cell-filled:not(.has-same-piece-below):not(.has-same-piece-left){border-bottom-left-radius:10px}.board-cell-hovered{box-shadow:none;z-index:auto}.board-cell-hovered .board-piece{filter:brightness(1.15)}.board-cell-fixed{box-shadow:inset 0 0 0 1px #ffffff38}.board-piece{border-radius:inherit;width:100%;height:100%;box-shadow:none;opacity:1;cursor:grab;color:#f8fafc;text-shadow:0 1px 2px #00000073;font-size:var(--board-number-size);box-sizing:border-box;background:#64748b;justify-content:center;align-items:center;font-weight:900;display:flex}.board-piece-movable{cursor:grab;opacity:1}.board-piece-fixed{cursor:default;opacity:.95}.board-piece-bg-default{background:#64748b}.board-piece-bg-i{background:#ef476f}.board-piece-bg-o{background:#ffd166}.board-piece-bg-t{background:#06d6a0}.board-piece-bg-s{background:#118ab2}.board-piece-bg-z{background:#8d99ae}.board-piece-bg-j{background:#f78c6b}.board-piece-bg-l{background:#8338ec}.board-piece-duplicate{color:#ef4444}.board-overlay{inset:var(--board-frame-padding);pointer-events:none;box-sizing:border-box;border:2px solid #ffffff3d;position:absolute}.board-divider{pointer-events:none;background:#ffffff3d;position:absolute}.board-divider-v{top:var(--board-frame-padding);width:2px;height:var(--board-grid-size);transform:translate(-1px)}.board-divider-v-1{left:calc(var(--board-frame-padding) + (3 * var(--board-cell-size)))}.board-divider-v-2{left:calc(var(--board-frame-padding) + (6 * var(--board-cell-size)))}.board-divider-h{left:var(--board-frame-padding);width:var(--board-grid-size);height:2px;transform:translateY(-1px)}.board-divider-h-1{top:calc(var(--board-frame-padding) + (3 * var(--board-cell-size)))}.board-divider-h-2{top:calc(var(--board-frame-padding) + (6 * var(--board-cell-size)))}.tray-panel{height:var(--tray-height);min-height:var(--tray-min-height);width:var(--tray-width);box-sizing:border-box;background:linear-gradient(#c89d67 0%,#b6844f 100%);border:1px solid #59381b73;border-radius:26px;flex-direction:column;padding:18px;display:flex;box-shadow:inset 0 1px #ffffff14,0 20px 60px #00000047}.tray-list{flex:var(--tray-list-flex);min-height:var(--tray-list-min-height);-webkit-user-select:none;user-select:none;background:linear-gradient(#f0d8b59e,#e0bd91a8);border:none;border-radius:20px;flex-wrap:wrap;align-content:flex-start;gap:10px;padding:12px;display:flex}.tray-piece-button{width:calc(var(--board-cell-size) + 8px);min-height:calc(var(--board-cell-size) + 8px);box-shadow:none;text-align:left;cursor:pointer;background:0 0;border:none;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:4px;display:flex;transform:none}.tray-piece-grid{grid-template-columns:repeat(1, var(--board-cell-size));grid-template-rows:repeat(1, var(--board-cell-size));justify-content:end;gap:0;display:grid}.tray-piece-cell{width:var(--board-cell-size);height:var(--board-cell-size);color:#fff;font-size:var(--board-number-size);text-shadow:0 1px 2px #00000073;background:#64748b;border-radius:0;grid-area:1/1;justify-content:center;align-items:center;font-weight:900;display:flex}.tray-piece-cell-filled:not(.tray-has-above):not(.tray-has-left){border-top-left-radius:8px}.tray-piece-cell-filled:not(.tray-has-above):not(.tray-has-right){border-top-right-radius:8px}.tray-piece-cell-filled:not(.tray-has-below):not(.tray-has-right){border-bottom-right-radius:8px}.tray-piece-cell-filled:not(.tray-has-below):not(.tray-has-left){border-bottom-left-radius:8px}.tray-cell-r1{grid-row:1}.tray-cell-r2{grid-row:2}.tray-cell-r3{grid-row:3}.tray-cell-r4{grid-row:4}.tray-cell-c1{grid-column:1}.tray-cell-c2{grid-column:2}.tray-cell-c3{grid-column:3}.tray-cell-c4{grid-column:4}.tray-piece-size-r1-c1{width:calc((1 * var(--board-cell-size)) + 8px);min-height:calc((1 * var(--board-cell-size)) + 8px)}.tray-piece-size-r1-c2{width:calc((2 * var(--board-cell-size)) + 8px);min-height:calc((1 * var(--board-cell-size)) + 8px)}.tray-piece-size-r1-c3{width:calc((3 * var(--board-cell-size)) + 8px);min-height:calc((1 * var(--board-cell-size)) + 8px)}.tray-piece-size-r1-c4{width:calc((4 * var(--board-cell-size)) + 8px);min-height:calc((1 * var(--board-cell-size)) + 8px)}.tray-piece-size-r2-c1{width:calc((1 * var(--board-cell-size)) + 8px);min-height:calc((2 * var(--board-cell-size)) + 8px)}.tray-piece-size-r2-c2{width:calc((2 * var(--board-cell-size)) + 8px);min-height:calc((2 * var(--board-cell-size)) + 8px)}.tray-piece-size-r2-c3{width:calc((3 * var(--board-cell-size)) + 8px);min-height:calc((2 * var(--board-cell-size)) + 8px)}.tray-piece-size-r2-c4{width:calc((4 * var(--board-cell-size)) + 8px);min-height:calc((2 * var(--board-cell-size)) + 8px)}.tray-piece-size-r3-c1{width:calc((1 * var(--board-cell-size)) + 8px);min-height:calc((3 * var(--board-cell-size)) + 8px)}.tray-piece-size-r3-c2{width:calc((2 * var(--board-cell-size)) + 8px);min-height:calc((3 * var(--board-cell-size)) + 8px)}.tray-piece-size-r3-c3{width:calc((3 * var(--board-cell-size)) + 8px);min-height:calc((3 * var(--board-cell-size)) + 8px)}.tray-piece-size-r3-c4{width:calc((4 * var(--board-cell-size)) + 8px);min-height:calc((3 * var(--board-cell-size)) + 8px)}.tray-piece-size-r4-c1{width:calc((1 * var(--board-cell-size)) + 8px);min-height:calc((4 * var(--board-cell-size)) + 8px)}.tray-piece-size-r4-c2{width:calc((2 * var(--board-cell-size)) + 8px);min-height:calc((4 * var(--board-cell-size)) + 8px)}.tray-piece-size-r4-c3{width:calc((3 * var(--board-cell-size)) + 8px);min-height:calc((4 * var(--board-cell-size)) + 8px)}.tray-piece-size-r4-c4{width:calc((4 * var(--board-cell-size)) + 8px);min-height:calc((4 * var(--board-cell-size)) + 8px)}.tray-piece-grid-r1-c1{grid-template-columns:repeat(1, var(--board-cell-size));grid-template-rows:repeat(1, var(--board-cell-size))}.tray-piece-grid-r1-c2{grid-template-columns:repeat(2, var(--board-cell-size));grid-template-rows:repeat(1, var(--board-cell-size))}.tray-piece-grid-r1-c3{grid-template-columns:repeat(3, var(--board-cell-size));grid-template-rows:repeat(1, var(--board-cell-size))}.tray-piece-grid-r1-c4{grid-template-columns:repeat(4, var(--board-cell-size));grid-template-rows:repeat(1, var(--board-cell-size))}.tray-piece-grid-r2-c1{grid-template-columns:repeat(1, var(--board-cell-size));grid-template-rows:repeat(2, var(--board-cell-size))}.tray-piece-grid-r2-c2{grid-template-columns:repeat(2, var(--board-cell-size));grid-template-rows:repeat(2, var(--board-cell-size))}.tray-piece-grid-r2-c3{grid-template-columns:repeat(3, var(--board-cell-size));grid-template-rows:repeat(2, var(--board-cell-size))}.tray-piece-grid-r2-c4{grid-template-columns:repeat(4, var(--board-cell-size));grid-template-rows:repeat(2, var(--board-cell-size))}.tray-piece-grid-r3-c1{grid-template-columns:repeat(1, var(--board-cell-size));grid-template-rows:repeat(3, var(--board-cell-size))}.tray-piece-grid-r3-c2{grid-template-columns:repeat(2, var(--board-cell-size));grid-template-rows:repeat(3, var(--board-cell-size))}.tray-piece-grid-r3-c3{grid-template-columns:repeat(3, var(--board-cell-size));grid-template-rows:repeat(3, var(--board-cell-size))}.tray-piece-grid-r3-c4{grid-template-columns:repeat(4, var(--board-cell-size));grid-template-rows:repeat(3, var(--board-cell-size))}.tray-piece-grid-r4-c1{grid-template-columns:repeat(1, var(--board-cell-size));grid-template-rows:repeat(4, var(--board-cell-size))}.tray-piece-grid-r4-c2{grid-template-columns:repeat(2, var(--board-cell-size));grid-template-rows:repeat(4, var(--board-cell-size))}.tray-piece-grid-r4-c3{grid-template-columns:repeat(3, var(--board-cell-size));grid-template-rows:repeat(4, var(--board-cell-size))}.tray-piece-grid-r4-c4{grid-template-columns:repeat(4, var(--board-cell-size));grid-template-rows:repeat(4, var(--board-cell-size))}.tray-piece-cell.board-piece-bg-default{background:#64748b}.tray-piece-cell.board-piece-bg-i{background:#ef476f}.tray-piece-cell.board-piece-bg-o{background:#ffd166}.tray-piece-cell.board-piece-bg-t{background:#06d6a0}.tray-piece-cell.board-piece-bg-s{background:#118ab2}.tray-piece-cell.board-piece-bg-z{background:#8d99ae}.tray-piece-cell.board-piece-bg-j{background:#f78c6b}.tray-piece-cell.board-piece-bg-l{background:#8338ec}.solved-overlay{z-index:20;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#080c18c2;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.solved-fireworks{pointer-events:none;position:absolute;inset:0;overflow:hidden}.solved-spark{--spark-left:50%;--spark-top:50%;--spark-size:8px;--spark-color:#ffd166;--spark-duration:1.8s;--spark-delay:0s;--dx:120px;--dy:0px;left:var(--spark-left);top:var(--spark-top);width:var(--spark-size);height:var(--spark-size);background:var(--spark-color);box-shadow:0 0 14px var(--spark-color);animation-name:firework-burst;animation-duration:var(--spark-duration);animation-delay:var(--spark-delay);border-radius:999px;animation-timing-function:ease-out;animation-iteration-count:infinite;position:absolute}.solved-spark-left-0{--spark-left:10%}.solved-spark-left-1{--spark-left:17%}.solved-spark-left-2{--spark-left:24%}.solved-spark-left-3{--spark-left:31%}.solved-spark-left-4{--spark-left:38%}.solved-spark-left-5{--spark-left:45%}.solved-spark-left-6{--spark-left:52%}.solved-spark-left-7{--spark-left:59%}.solved-spark-left-8{--spark-left:66%}.solved-spark-left-9{--spark-left:73%}.solved-spark-left-10{--spark-left:80%}.solved-spark-left-11{--spark-left:87%}.solved-spark-top-0{--spark-top:12%}.solved-spark-top-1{--spark-top:19%}.solved-spark-top-2{--spark-top:26%}.solved-spark-top-3{--spark-top:33%}.solved-spark-top-4{--spark-top:40%}.solved-spark-top-5{--spark-top:47%}.solved-spark-top-6{--spark-top:54%}.solved-spark-top-7{--spark-top:61%}.solved-spark-top-8{--spark-top:68%}.solved-spark-top-9{--spark-top:75%}.solved-spark-size-0{--spark-size:6px}.solved-spark-size-1{--spark-size:8px}.solved-spark-size-2{--spark-size:10px}.solved-spark-size-3{--spark-size:12px}.solved-spark-color-0{--spark-color:#ffd166}.solved-spark-color-1{--spark-color:#ff6b6b}.solved-spark-color-2{--spark-color:#7bdff2}.solved-spark-color-3{--spark-color:#cdb4db}.solved-spark-color-4{--spark-color:#9bf6b0}.solved-spark-color-5{--spark-color:#f9c74f}.solved-spark-delay-0{--spark-delay:0s}.solved-spark-delay-1{--spark-delay:80ms}.solved-spark-delay-2{--spark-delay:.16s}.solved-spark-delay-3{--spark-delay:.24s}.solved-spark-delay-4{--spark-delay:.32s}.solved-spark-delay-5{--spark-delay:.4s}.solved-spark-delay-6{--spark-delay:.48s}.solved-spark-delay-7{--spark-delay:.56s}.solved-spark-delay-8{--spark-delay:.64s}.solved-spark-delay-9{--spark-delay:.72s}.solved-spark-delay-10{--spark-delay:.8s}.solved-spark-delay-11{--spark-delay:.88s}.solved-spark-duration-0{--spark-duration:1.6s}.solved-spark-duration-1{--spark-duration:1.82s}.solved-spark-duration-2{--spark-duration:2.04s}.solved-spark-duration-3{--spark-duration:2.26s}.solved-spark-duration-4{--spark-duration:2.48s}.solved-spark-drift-0{--dx:120px;--dy:0px}.solved-spark-drift-1{--dx:85px;--dy:85px}.solved-spark-drift-2{--dx:0px;--dy:120px}.solved-spark-drift-3{--dx:-85px;--dy:85px}.solved-spark-drift-4{--dx:-120px;--dy:0px}.solved-spark-drift-5{--dx:-85px;--dy:-85px}.solved-spark-drift-6{--dx:0px;--dy:-120px}.solved-spark-drift-7{--dx:85px;--dy:-85px}.solved-dialog{z-index:1;text-align:center;background:#101626d9;border:1px solid #fff3;border-radius:24px;padding:26px 30px;animation:.32s ease-out solved-pop;position:relative;box-shadow:0 24px 80px #00000073}.solved-title{color:#fef08a;text-shadow:0 6px 24px #fef08a61;margin:0 0 12px;font-size:clamp(2.2rem,8vw,5rem);line-height:1}@keyframes firework-burst{0%{opacity:0;transform:translate(0)scale(.2)}18%{opacity:1}to{opacity:0;transform:translate(var(--dx), var(--dy)) scale(1)}}@keyframes solved-pop{0%{opacity:0;transform:translateY(14px)scale(.92)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=900px) and (orientation:portrait){.app{--page-padding:10px;--layout-gap:14px;--layout-columns:1fr;--controls-justify:center;--tray-height:auto;--tray-min-height:220px;--tray-width:100%;--tray-list-flex:0 0 auto;--tray-list-min-height:170px;--board-cell-size:34px;--board-frame-padding:10px}.board-grid{margin:0 auto}}@media (width<=430px){.app{--new-puzzle-width:100%;--board-cell-size:32px;--board-number-size:.92rem}}