:root{color-scheme:dark;--red:#ec090d;--paper:#f7f7f5;--cell:48px;--gap:5px;font-family:'DM Sans',Arial,sans-serif;color:var(--paper);background:#090909}*{box-sizing:border-box}body{margin:0;background:#090909}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:4px}button{border:0}a{color:inherit;text-decoration:none}.game-shell{width:min(100% - 32px,520px);margin:auto;padding:22px 0 max(18px,env(safe-area-inset-bottom));position:relative}.game-top{display:flex;align-items:center;justify-content:space-between}.game-top img{width:90px;height:66px;object-fit:contain}.tools{display:flex;gap:9px}.icon-button{width:42px;height:42px;border:1px solid #707070;border-radius:50%;background:#171717;font-size:23px;font-weight:700}.icon-button[aria-pressed=true]{color:#ffbd30;border-color:#ffbd30}h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(62px,15.8vw,104px);font-weight:900;line-height:.9;letter-spacing:-.025em;margin:20px 0 12px;white-space:nowrap}h1 span{color:var(--red)}.mode-line{display:flex;justify-content:space-between;gap:10px;font-size:9px;letter-spacing:1.4px;color:#b7b7b7;margin-bottom:16px}.mode-line span:first-child{color:#ff474a;font-weight:700}.scores{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}.scores>div{border:1px solid #606060;border-radius:10px;text-align:center;padding:10px;background:#111}.scores span{font-size:11px;letter-spacing:2px;color:#b7b7b7}.scores strong{display:block;font:800 40px/.95 'Barlow Condensed',Impact,sans-serif;margin-top:6px}.play-area{position:relative}.board{display:grid;grid-template-columns:repeat(8,1fr);gap:var(--gap);padding:10px;border:2px solid var(--red);border-radius:17px;box-shadow:0 0 20px #ec090d17;user-select:none;touch-action:none;background:#111}.cell{aspect-ratio:1;background:#23272a;border-radius:7px;border:1px solid #34393b;box-shadow:inset 0 2px 2px #ffffff0b;min-width:0;padding:0;transition:background .1s;position:relative}.color-1{background:#ff4449;border-color:#ff7679;box-shadow:inset 0 3px 2px #ff9999,inset 0 -4px 3px #b71022,0 0 8px #ff313122}.color-2{background:#ffb81c;border-color:#ffd166;box-shadow:inset 0 3px 2px #ffe699,inset 0 -4px 3px #cc7900,0 0 8px #ffb81c22}.color-3{background:#00c8bb;border-color:#5ee9dc;box-shadow:inset 0 3px 2px #7df8e7,inset 0 -4px 3px #008a83,0 0 8px #00c8bb22}.color-4{background:#9654ee;border-color:#be8bff;box-shadow:inset 0 3px 2px #d6acff,inset 0 -4px 3px #5a27a0,0 0 8px #9654ee22}.preview{opacity:.58;outline:2px solid #fff;outline-offset:-2px}.invalid{background:#532127;outline:2px solid #ff6265;outline-offset:-2px}.clearing{animation:clear .22s ease-in forwards}@keyframes clear{50%{filter:brightness(2);transform:scale(1.04)}100%{opacity:0;transform:scale(.7)}}.tray{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}.piece-slot{height:102px;border:1px solid #656565;border-radius:12px;background:#141414;display:flex;align-items:center;justify-content:center;padding:10px;touch-action:none;user-select:none}.piece-slot.selected{border:2px solid #fff;background:#252525;box-shadow:0 0 0 2px #ec090d}.piece-slot:disabled{cursor:default;opacity:.35;border-style:dashed}.piece-slot.blocked{opacity:.4}.mini-piece{display:grid;gap:3px;pointer-events:none}.mini-cell{width:21px;height:21px;border-radius:4px;border-width:1px;border-style:solid}.mini-cell.empty{visibility:hidden}.instruction{text-align:center;font-size:10px;letter-spacing:1.6px;color:#d5d1ca;margin:16px 0 7px;min-height:14px}.spotty-row{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 0 16px}.spotty-row img{width:110px;height:110px;object-fit:contain}.speech{border:2px solid var(--red);border-radius:17px 17px 17px 4px;padding:10px 18px;transform:rotate(-3deg);font:800 31px/.95 'Barlow Condensed',Impact,sans-serif}.speech span{color:var(--red)}.game-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}.game-bottom button{border:1px solid #777;border-radius:30px;padding:13px 17px;background:#171717;font-weight:700;font-size:12px;letter-spacing:1px}.game-bottom button span{margin-left:10px}.game-bottom a{font-size:10px;letter-spacing:1px;font-weight:700}.small-actions{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:18px}.small-actions button,.small-actions a{color:#bdbdbd;background:transparent;font-size:11px;padding:6px 0}.save-note{text-align:center;font-size:10px;color:#858585;margin:10px 0 0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.toast{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);background:#090909ed;border:1px solid #ffb81c;border-radius:10px;font:800 32px 'Barlow Condensed',sans-serif;padding:10px 20px;pointer-events:none;white-space:nowrap;opacity:0;z-index:4}.toast.show{animation:toast 1.2s ease both}@keyframes toast{0%{opacity:0;transform:translate(-50%,-30%)}15%,75%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-75%)}}dialog{width:min(100% - 40px,390px);padding:0;border:1px solid #666;border-radius:18px;color:#fff;background:#151515;box-shadow:0 20px 90px #000}dialog::backdrop{background:#000c;backdrop-filter:blur(5px)}.modal-inner{padding:28px}dialog h2{font:800 42px/.95 'Barlow Condensed',sans-serif;margin:0 0 16px;color:#fff}dialog p{font-size:14px;line-height:1.7;white-space:pre-line;color:#d2d2d2;margin:0 0 22px}#modal-actions{display:grid;gap:10px}#modal-actions button{background:var(--red);padding:13px;border-radius:8px;font-weight:700}#modal-actions button.secondary{background:#292929;border:1px solid #777}.ghost{position:fixed;z-index:8;pointer-events:none;display:none;opacity:.88}.ghost .mini-cell{width:var(--cell);height:var(--cell);border-radius:7px}.ghost .mini-piece{gap:var(--gap)}@media(min-width:900px){.game-shell{margin-top:12px}body{background:#090909}.game-shell:before{content:'';position:fixed;inset:0;pointer-events:none;border-left:10px solid #ec090d12;border-right:10px solid #ec090d12;z-index:-1}}@media(max-width:380px){.game-shell{width:calc(100% - 24px);padding-top:14px}.game-top img{width:76px;height:54px}.icon-button{width:36px;height:36px;font-size:20px}.mode-line{font-size:8px;letter-spacing:.6px}.board{gap:4px;padding:8px}.piece-slot{height:86px}.mini-cell{width:18px;height:18px}.speech{font-size:27px}.game-bottom button{font-size:10px;padding:12px}.game-bottom a{font-size:9px}.spotty-row img{width:90px;height:90px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.toast.show{opacity:1}}
:root body{background-image:url('/assets/spot-blocks-texture.png');background-size:cover;background-position:center top;background-attachment:fixed}
@media(max-height:850px) and (max-width:600px){.game-shell{padding-top:12px}.game-top img{height:50px}h1{margin-top:12px;font-size:clamp(58px,15vw,82px)}.scores{margin-bottom:12px}.scores>div{padding:8px}.scores strong{font-size:34px}.piece-slot{height:83px}.spotty-row{margin:8px 0}.spotty-row img{width:82px;height:82px}.speech{font-size:27px}.small-actions{margin-top:8px}.game-bottom button{padding:11px 13px}}
@media(min-width:700px) and (max-height:1050px){.game-shell{width:400px;padding-top:10px;margin-top:0}.game-top img{height:45px;width:70px}h1{font-size:80px;margin:12px 0 8px}.mode-line{margin-bottom:10px;font-size:8px}.scores>div{padding:7px}.scores strong{font-size:32px}.scores{margin-bottom:12px}.piece-slot{height:74px}.tray{margin-top:12px}.spotty-row{margin:5px 0 10px}.spotty-row img{width:76px;height:76px}.speech{font-size:25px}.instruction{margin-top:10px}.small-actions{margin-top:8px}.game-bottom button{padding:10px 13px;font-size:10px}}