
:root{font-family:system-ui,sans-serif;color:#29244b;background:#fff9ee;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 5% 35%,#ffe8c4,transparent 45%),radial-gradient(ellipse at 95% 80%,#f8dfed,transparent 45%);min-height:100vh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #5649df;outline-offset:4px}main{max-width:1160px;margin:auto;padding:30px 42px;display:grid;grid-template-columns:minmax(240px,1fr) minmax(440px,540px);column-gap:40px}header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.brand{font:900 26px system-ui,sans-serif;letter-spacing:-1px;text-decoration:none;color:inherit}.brand span{display:inline-grid;place-items:center;background:#ff7157;color:white;width:40px;height:40px;border-radius:12px;margin-left:4px;transform:rotate(-7deg)}.icon{border:1px solid #ded6ce;background:transparent;border-radius:30px;padding:9px 15px;font-size:12px}.intro{padding-top:58px}.eyebrow{font-size:10px;letter-spacing:2.3px;font-weight:800;color:#8b788b}h1{font:800 51px/1.08 system-ui,sans-serif;letter-spacing:-2px;margin:22px 0}h1 em{font-style:normal;color:#ed6c52}.intro p{line-height:1.8;color:#827784;font-size:16px}.game{grid-column:2;grid-row:2/4;background:#fffdf8;border:1px solid #fff;border-radius:28px;padding:24px;box-shadow:0 22px 60px #7b4c6120,0 3px 0 #e9dfd7}.stats{display:flex;justify-content:space-between;text-align:center;margin-bottom:19px}.stats>div{min-width:82px}.stats small{display:block;font-size:9px;font-weight:800;letter-spacing:1.7px;color:#968797}.stats strong{display:block;font:700 29px system-ui,sans-serif;margin-top:4px}.moves strong{color:#f07854}.goal{display:flex;justify-content:space-between;font-size:10px;font-weight:700;color:#9b8792}.meter{height:6px;background:#f0e9e4;border-radius:9px;margin:8px 0 20px;overflow:hidden}#progress{height:100%;width:0;background:linear-gradient(90deg,#ffa34f,#ff6c79);transition:width .4s}.board-wrap{position:relative;aspect-ratio:1;background:#eee6e4;border-radius:17px;padding:7px;overflow:hidden;touch-action:none;user-select:none}#board{position:absolute;inset:7px}.tile{position:absolute;width:calc(12.5% - 6px);height:calc(12.5% - 6px);margin:3px;border:0;border-radius:13px;color:#fff;font:700 30px system-ui,sans-serif;text-shadow:0 2px 0 #00000013;box-shadow:inset 0 2px 0 #ffffff65,inset 0 -5px 0 #00000017,0 3px 3px #573e4b18;transition:top .42s cubic-bezier(.32,.02,.26,1.16),left .32s,transform .16s,filter .16s;z-index:2;touch-action:none}.tile:after{content:'';position:absolute;left:12%;top:9%;width:32%;height:7%;border-radius:10px;background:#ffffff32}.tile.selected{transform:scale(.88);filter:brightness(1.12);outline:3px solid white;z-index:4}.tile.hint{animation:hint .8s infinite alternate}.tile.pop{animation:crunch-pop .3s var(--pop-delay,0ms) both;z-index:5}.tile.spawn{animation:arrive .48s both}#lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}#particles{position:absolute;inset:0;pointer-events:none;z-index:8}.spark{position:absolute;width:var(--size,9px);height:var(--size,9px);border-radius:3px;box-shadow:0 0 6px #fff9;animation:burst .7s cubic-bezier(.1,.6,.4,1) forwards}.status{height:61px;display:flex;align-items:center;justify-content:space-between;gap:10px}#message{font-weight:700;font-size:13px;color:#8a748b}#sum{font:700 27px system-ui,sans-serif;color:#ec7757;white-space:nowrap}#sum small{font-size:13px;color:#baa7ad}.actions{display:flex;justify-content:space-between;border-top:1px solid #eee5e3;padding-top:15px}.actions button{border:0;background:none;font-size:11px;font-weight:700;color:#968394;padding:5px}aside{grid-column:1;align-self:start;margin-top:25px}.pill{font-size:9px;font-weight:800;letter-spacing:1.4px;background:#efe8df;border-radius:20px;padding:8px 12px}aside p{font-size:12px;line-height:2.2;color:#8d7f87;margin:20px 0}aside b{color:#675c70}.foot{font-size:11px;color:#ac98a2}#overlay{position:absolute;inset:0;z-index:20;background:#fff9eeef;backdrop-filter:blur(7px);display:grid;place-items:center;text-align:center;padding:20px}#overlay[hidden]{display:none}h2{font:800 34px system-ui,sans-serif;margin:18px 0 10px}.primary{border:0;background:#f37556;color:white;border-radius:16px;padding:15px 22px;font-weight:800;box-shadow:0 4px 0 #d15a46}#end-score{color:#8c798a;line-height:1.7}.shake{animation:shake .22s}.celebrate{animation:pulse .5s}@keyframes burst{to{transform:translate(var(--dx),var(--dy)) rotate(240deg);opacity:0}}@keyframes arrive{from{transform:translateY(-65px) scale(.8);opacity:0}to{transform:none;opacity:1}}@keyframes hint{to{filter:brightness(1.25);transform:scale(.9);outline:3px solid white}}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@keyframes pulse{50%{transform:scale(1.025)}}@media(max-width:850px){main{max-width:510px;padding:18px 18px 25px;display:block}header{margin-bottom:18px}.intro{padding:0}.intro .eyebrow{display:none}h1{font-size:30px;letter-spacing:-1px;margin:0 0 8px}h1 br{display:none}h1 em{display:block}.intro p{font-size:12px;line-height:1.6;margin:0 0 18px}.intro p br{display:none}.game{padding:18px;border-radius:23px}aside{margin-top:24px}aside p{margin-bottom:8px}.tile{font-size:27px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* The board gets the space; the effects follow the actual clear and gravity. */
main{padding-top:18px;padding-bottom:18px}header{margin-bottom:14px}.game{padding:18px}.stats{margin-bottom:10px}.meter{margin-bottom:9px}.intro{padding-top:48px}h1{font-size:46px}.status{height:48px}.actions{padding-top:10px}.tile{font-weight:800;box-shadow:inset 0 3px 1px #ffffff80,inset 0 -6px 0 #00000020,0 4px 4px #573e4b30;background-image:linear-gradient(155deg,#ffffff22,transparent 55%,#0000000a)!important}.board-wrap{background:#e7d8df;box-shadow:inset 0 3px 9px #795c7520}.tile.charged{transform:scale(1.1);filter:brightness(1.3);outline:3px solid #fff5b7;z-index:5}.tile.selected{box-shadow:0 0 14px #fff9,inset 0 -4px 0 #0002}
#chain{height:25px;text-align:center;font-size:10px;font-weight:900;letter-spacing:2px;color:#b59cab;transition:color .15s}#chain.lit{color:#ed6a4c}.combo-callout{position:absolute;left:0;right:0;top:38%;text-align:center;z-index:12;font:900 clamp(24px,3vw,38px) system-ui,sans-serif;color:#fff9dc;-webkit-text-stroke:1px #c85443;text-shadow:0 3px 0 #c85443,0 7px 20px #72205166;animation:callout 1.1s both;pointer-events:none}.shock-ring{position:absolute;width:20px;height:20px;border:4px solid;border-radius:50%;animation:ring .5s ease-out forwards}.row-beam{position:absolute;left:0;right:0;height:14px;background:#fffbe4;box-shadow:0 0 15px 8px #ffce51,0 0 30px 14px #ff7d5a;animation:sweep .65s both;transform-origin:left center}.impact{animation:impact .27s}.actions #sweep-demo{color:#e5794b}
@keyframes crunch-pop{0%{transform:scale(1.08);opacity:1;filter:brightness(1.4)}35%{transform:scale(1.23,.83);opacity:1}65%{transform:scale(.7,1.15);opacity:.9}100%{transform:scale(.1);opacity:0}}
@keyframes ring{from{transform:translate(-50%,-50%) scale(.4);opacity:.9}to{transform:translate(-50%,-50%) scale(4);opacity:0}}
@keyframes callout{0%{transform:scale(.45) rotate(-6deg);opacity:0}18%{transform:scale(1.1) rotate(-3deg);opacity:1}30%,65%{transform:scale(1) rotate(-3deg);opacity:1}100%{transform:translateY(-35px) scale(1.05);opacity:0}}
@keyframes sweep{0%{transform:scaleX(0);opacity:1}45%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes impact{25%{transform:translateY(3px) scale(1.003)}60%{transform:translateY(-2px)}100%{transform:none}}
@keyframes arrive{0%{transform:translateY(-120px) scale(.88);opacity:0}65%{transform:translateY(3px) scale(1.04,.94);opacity:1}85%{transform:translateY(-3px) scale(.97,1.03)}100%{transform:none;opacity:1}}
@media(min-width:851px) and (max-height:850px){main{max-width:1080px;grid-template-columns:minmax(240px,1fr) minmax(440px,480px)}h1{font-size:42px}}
@media(max-width:850px){main{max-width:600px;padding:12px}.intro{padding-top:0}h1{font-size:27px}.intro p{margin-bottom:12px}.game{padding:12px}.tile{font-size:clamp(19px,5vw,29px);border-radius:11px}.actions button{font-size:10px}aside{margin-top:20px}.combo-callout{font-size:28px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.impact{animation:none}.combo-callout{animation:none;opacity:1}.spark,.shock-ring,.row-beam{display:none}}

.mode-bar{display:flex;align-items:center;gap:4px;background:#f3ede8;padding:4px;border-radius:13px}.mode-bar button{background:transparent;border:0;border-radius:10px;padding:7px 17px;font-size:12px;font-weight:800;color:#948394}.mode-bar button[aria-pressed=true]{background:white;color:#e47a50;box-shadow:0 2px 5px #80605018}.mode-bar>span{margin-left:auto;font-size:10px;letter-spacing:1px;font-weight:800;color:#9a7f95;padding-right:9px}.mode-bar strong{font:800 27px system-ui,sans-serif;color:#ed7654;vertical-align:middle;letter-spacing:0;margin-left:6px}#mode-note{font-size:10px;text-align:center;color:#9c8595;margin:7px 0 11px}.wild .mode-bar{background:#eee5ff}.wild .mode-bar strong,.wild .mode-bar button[aria-pressed=true]{color:#9460d8}.wild #sum{color:#9460d8}@media(min-width:851px) and (max-height:850px){main{grid-template-columns:minmax(240px,1fr) 440px}.game{padding:14px}.stats strong{font-size:25px}.stats{margin-bottom:7px}.status{height:42px}}

.mode-bar button{padding:7px 10px}.mode-bar button:disabled{opacity:.5;cursor:wait}.wordfall .mode-bar{background:#dcefe5}.wordfall .mode-bar strong,.wordfall .mode-bar button[aria-pressed=true]{color:#378d71}.wordfall #sum{color:#378d71;font-size:20px;overflow-wrap:anywhere;white-space:normal;max-width:60%}.wordfall .status{height:auto;min-height:46px}.wordfall #message{font-size:11px}.tile.striped{background-image:repeating-linear-gradient(0deg,transparent 0 9px,#fff9 9px 13px)!important;outline:2px solid #fff4b0;outline-offset:-3px;text-shadow:0 2px 2px #47316c,1px 0 #47316c,-1px 0 #47316c}.tile.striped:before{content:'↔';position:absolute;bottom:0;right:4px;font-size:13px;color:white;text-shadow:0 1px 2px #333}#word-controls{display:flex;gap:8px;margin-bottom:9px}#word-controls[hidden]{display:none}#word-controls button{border:0;border-radius:9px;padding:8px 12px;font-weight:800;font-size:11px}#submit-word{flex:1;background:#409b7c;color:white;box-shadow:0 3px 0 #2c725a}#submit-word:disabled{background:#deded5;box-shadow:none;color:#9b9b90;cursor:default}#clear-word{background:#f0e9e4;color:#958394}@media(min-width:851px) and (max-height:850px){body.wordfall main{grid-template-columns:minmax(240px,1fr) 410px}.wordfall .mode-bar button{padding:7px 8px}.wordfall .mode-bar strong{font-size:21px}.wordfall .tile{font-size:26px}}

.column-beam{position:absolute;top:0;bottom:0;width:14px;margin-left:-7px;background:#fffbe4;box-shadow:0 0 15px 8px #a7e9ff,0 0 30px 14px #a17aff;animation:column-sweep .65s both;transform-origin:center bottom}.tile.striped[data-power=column]{background-image:repeating-linear-gradient(90deg,transparent 0 9px,#fff9 9px 13px)!important}.tile.striped[data-power=cross]{background-image:repeating-linear-gradient(0deg,transparent 0 11px,#fff7 11px 14px),repeating-linear-gradient(90deg,transparent 0 11px,#fff7 11px 14px)!important}.tile.striped[data-power=column]:before{content:'↕'}.tile.striped[data-power=cross]:before{content:'✦'}#continue{display:block;margin:15px auto}#continue[hidden]{display:none}#continue:not([hidden])+#again{background:transparent;color:#a58b98;box-shadow:none;font-size:12px;padding:8px}.wordfall #submit-word{font-size:10px}@keyframes column-sweep{0%{transform:scaleY(0);opacity:1}45%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}@media(prefers-reduced-motion:reduce){.column-beam{display:none}}
