:root{--bg: #f8fbff;--bg-soft: #f2f7fd;--surface: #ffffff;--surface-soft: #f7fafe;--surface-muted: #eef5fc;--text: #0b1623;--text-muted: #536579;--text-soft: #7c8da1;--accent: #2563eb;--accent-hover: #1d4ed8;--accent-soft: #dbeafe;--accent-2: #0f6b8f;--accent-2-soft: #e0f2fe;--navy: #071827;--blue-dark: #102a43;--border: #d8e4f2;--border-strong: #bfd0e4;--shadow: 0 18px 50px rgba(15, 42, 67, .1);--shadow-soft: 0 10px 30px rgba(15, 42, 67, .07);--danger: #b42318;--success: #157f5b;--tile-0: #f8eedc;--tile-1: #f0dcbd;--tile-2: #e8c89c;--tile-3: #dfae78;--tile-4: #d0925e;--tile-5: #b9744e;--tile-6: #95b892;--tile-7: #70a28d;--tile-8: #4e887f;--tile-9: #316c6d;--tile-10: #1f474a;--tile-light-text: #fff8ea;color:var(--text);background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;line-height:1.5;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;letter-spacing:0}body{min-width:320px;min-height:100vh;margin:0;background:radial-gradient(circle at top left,rgba(219,234,254,.74),transparent 34rem),radial-gradient(circle at 82% 12%,rgba(224,242,254,.64),transparent 28rem),linear-gradient(180deg,#ffffffeb,#f8fbff00 24rem),var(--bg)}button{border:0;font:inherit}button:focus-visible,.themeCard:focus-visible{outline:3px solid rgba(37,99,235,.28);outline-offset:4px}h1,h2,p{margin-top:0}.appShell{width:min(1180px,100%);min-height:100vh;margin:0 auto;padding:36px 22px 52px}.homeShell{display:flex;flex-direction:column;gap:30px}.homeHero{max-width:780px;padding-top:10px}.homeHero h1,.gameHeader h1{margin-bottom:12px;color:var(--navy);font-size:clamp(2rem,4vw,3.45rem);line-height:1.02}.homeHero p:last-child,.gameHeader p:last-child{max-width:690px;margin-bottom:0;color:var(--text-muted);font-size:1.08rem}.eyebrow{margin-bottom:8px;color:var(--accent);font-size:.76rem;font-weight:850;text-transform:uppercase}.themeGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:18px}.themeCard{display:flex;min-height:210px;padding:24px;border:1px solid var(--border);border-radius:22px;background:linear-gradient(180deg,#fffffffa,#f7fafef5),var(--surface);box-shadow:var(--shadow-soft);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;opacity:0;transform:translateY(10px);animation:cardEnter .42s cubic-bezier(.2,0,0,1) forwards;animation-delay:calc(var(--card-index, 0) * 45ms);transition:border-color .18s cubic-bezier(.2,0,0,1),box-shadow .18s cubic-bezier(.2,0,0,1),transform .18s cubic-bezier(.2,0,0,1)}.themeCard:hover{border-color:#2563eb6b;box-shadow:var(--shadow);transform:translateY(-4px)}.themeCard h2{width:100%;margin-bottom:26px;color:var(--navy);font-size:clamp(1.02rem,1.6vw,1.24rem);line-height:1.22;overflow-wrap:anywhere;text-align:center}.themeCard__footer{display:flex;width:100%;align-items:center;justify-content:center}.gameShell{display:flex;flex-direction:column;gap:24px}.gameHeader{display:flex;gap:18px;align-items:flex-start;justify-content:space-between}.gameHeader h1{max-width:760px;font-size:clamp(1.8rem,3vw,2.7rem)}.gameLayout{display:grid;grid-template-columns:minmax(320px,640px) minmax(278px,340px);gap:26px;align-items:start}.boardColumn{display:flex;min-width:0;flex-direction:column;gap:12px}.gameBoard{--board-padding: 12px;--board-gap: 10px;position:relative;display:block;width:min(100%,640px);aspect-ratio:1;padding:var(--board-padding);border:1px solid var(--border-strong);border-radius:24px;background:#e8f0f8;box-shadow:inset 0 1px #ffffff8f,0 24px 44px #0f2a431a;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.gameBoard--shake{animation:boardShake .13s ease-out}.boardCells,.tileLayer{position:absolute;inset:var(--board-padding)}.boardCells{display:grid;gap:var(--board-gap);grid-template-columns:repeat(4,minmax(0,1fr))}.boardCell{display:flex;min-width:0;aspect-ratio:1;border-radius:18px;background:#ffffff94;box-shadow:inset 0 1px 3px #0f2a430e;overflow:hidden}.tileLayer{z-index:2;pointer-events:none}.tilePositionWrapper{position:absolute;top:0;left:0;transition:transform .11s cubic-bezier(.2,0,0,1);will-change:transform}.gameTile{--tile-bg: var(--tile-0);--tile-text: var(--text);--tile-power-bg: rgba(255, 255, 255, .68);position:relative;display:grid;width:100%;min-width:0;height:100%;padding:12px;border:1px solid rgba(15,42,67,.08);border-radius:18px;place-items:center;background:linear-gradient(145deg,#ffffff38,#fff0),var(--tile-bg);box-shadow:inset 0 -3px #0f2a4312,0 8px 16px #0f2a431a;color:var(--tile-text);overflow:hidden}.gameTile--level-0{--tile-bg: var(--tile-0)}.gameTile--level-1{--tile-bg: var(--tile-1)}.gameTile--level-2{--tile-bg: var(--tile-2)}.gameTile--level-3{--tile-bg: var(--tile-3)}.gameTile--level-4{--tile-bg: var(--tile-4)}.gameTile--level-5{--tile-bg: var(--tile-5)}.gameTile--level-6{--tile-bg: var(--tile-6)}.gameTile--level-7{--tile-bg: var(--tile-7)}.gameTile--level-8{--tile-bg: var(--tile-8)}.gameTile--level-9{--tile-bg: var(--tile-9)}.gameTile--level-10{--tile-bg: var(--tile-10)}.gameTile--dark{--tile-text: var(--tile-light-text);--tile-power-bg: rgba(255, 248, 234, .16)}.gameTile--spawn{animation:tileSpawn .17s cubic-bezier(.2,0,0,1)}.gameTile--merge{animation:tileMerge .18s cubic-bezier(.2,0,0,1)}.gameTile--final{box-shadow:0 0 0 1px #fff8ea5c,0 0 28px #2563eb57,inset 0 -3px #0f2a4314}.tilePower{position:absolute;top:9px;left:9px;display:inline-flex;min-width:1.82rem;height:1.42rem;padding:0 .28rem;border-radius:999px;align-items:center;justify-content:center;background:var(--tile-power-bg);color:inherit;font-size:.74rem;font-weight:900;line-height:1}.tileLabel{display:-webkit-box;width:100%;max-width:100%;overflow:hidden;color:inherit;font-weight:900;line-height:1.08;overflow-wrap:anywhere;text-align:center;-webkit-box-orient:vertical;-webkit-line-clamp:3}.tileLabelShort{font-size:clamp(1rem,2.2vw,1.34rem)}.tileLabelMedium{font-size:clamp(.82rem,1.7vw,1.04rem)}.tileLabelLong{font-size:clamp(.66rem,1.35vw,.86rem);-webkit-line-clamp:4}.sidePanel{display:flex;min-width:0;flex-direction:column;gap:14px}.scoreGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.scoreCard,.progressPanel{border:1px solid var(--border);border-radius:20px;background:#ffffffeb;box-shadow:var(--shadow-soft)}.scoreCard{min-height:96px;padding:17px}.scoreCard span,.progressPanel span{display:block;margin-bottom:8px;color:var(--text-muted);font-size:.82rem;font-weight:800}.scoreValue{position:relative;display:inline-flex;align-items:flex-start}.scoreCard strong{color:var(--navy);font-size:2rem;line-height:1}.scoreBump{position:absolute;top:-.45rem;left:calc(100% + .4rem);color:var(--success);font-size:.92rem;font-style:normal;font-weight:900;animation:scoreBump .42s cubic-bezier(.2,0,0,1) forwards;pointer-events:none;white-space:nowrap}.progressPanel{padding:20px}.progressPanel strong{display:block;margin-bottom:8px;color:var(--blue-dark);font-size:1.16rem;line-height:1.22}.progressPanel p{margin-bottom:0;color:var(--text-muted)}.actionStack,.modalActions{display:flex;gap:10px}.actionStack{flex-direction:column}.primaryButton,.secondaryButton,.ghostButton,.textButton,.menuItem,.iconButton{min-height:44px;border-radius:14px;cursor:pointer;font-weight:850;transition:background .17s cubic-bezier(.2,0,0,1),border-color .17s cubic-bezier(.2,0,0,1),color .17s cubic-bezier(.2,0,0,1),transform .17s cubic-bezier(.2,0,0,1),box-shadow .17s cubic-bezier(.2,0,0,1)}.primaryButton{padding:0 18px;background:var(--accent);color:#fff;box-shadow:0 9px 20px #2563eb2e}.primaryButton:hover{background:var(--accent-hover);transform:translateY(-1px)}.secondaryButton,.ghostButton{padding:0 18px;border:1px solid var(--border-strong);background:#ffffffe0;color:var(--blue-dark)}.secondaryButton:hover,.ghostButton:hover,.menuItem:hover{border-color:#2563eb61;background:var(--accent-soft)}.textButton{padding:0 14px;background:transparent;color:var(--accent)}.textButton:hover{background:var(--accent-soft)}.menuButton{flex:0 0 auto}.modalBackdrop,.drawerLayer{position:fixed;z-index:50;top:0;right:0;bottom:0;left:0}.modalBackdrop{display:grid;padding:20px;place-items:center;background:#0718276b;animation:overlayFade .19s cubic-bezier(.2,0,0,1)}.modal{width:min(640px,100%);max-height:min(760px,calc(100vh - 40px));padding:24px;border:1px solid var(--border);border-radius:24px;background:var(--surface);box-shadow:0 24px 70px #07182733;overflow:auto;animation:modalEnter .21s cubic-bezier(.2,0,0,1)}.modal--compact{width:min(440px,100%)}.modal--celebration{box-shadow:0 0 0 1px #2563eb24,0 28px 80px #0718273d,0 0 54px #2563eb2e}.modalHeader,.drawerHeader{display:flex;gap:16px;align-items:flex-start;justify-content:space-between}.modalHeader h2,.drawerHeader h2{margin-bottom:16px;color:var(--navy);font-size:1.45rem;line-height:1.15}.drawerHeader .eyebrow{margin-bottom:6px}.iconButton{display:inline-flex;width:42px;min-height:42px;padding:0;align-items:center;justify-content:center;background:var(--surface-muted);color:var(--blue-dark);font-size:1.35rem}.iconButton:hover{background:var(--accent-soft)}.modalLead{margin-bottom:20px;color:var(--text-muted)}.progressSummary{display:grid;margin-bottom:16px;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.progressSummary div{min-height:82px;padding:16px;border:1px solid var(--border);border-radius:18px;background:var(--surface-soft)}.progressSummary span{display:block;margin-bottom:6px;color:var(--text-muted);font-size:.82rem;font-weight:800}.progressSummary strong{color:var(--navy);font-size:1.36rem}.progressList{display:grid;max-height:430px;margin:0;padding:0;gap:9px;list-style:none;overflow:auto}.progressList__item{display:grid;min-height:48px;padding:11px 13px;border:1px solid var(--border);border-radius:16px;align-items:center;background:var(--surface-soft);color:var(--text);font-weight:850;gap:12px;grid-template-columns:36px minmax(0,1fr)}.progressList__item.current{border-color:#2563eb75;background:var(--accent-soft)}.progressList__item.locked{background:var(--surface-muted);color:var(--text-soft);font-weight:750}.progressList__index{display:inline-flex;width:30px;height:30px;border-radius:10px;align-items:center;justify-content:center;background:var(--surface);color:var(--text-muted);font-size:.86rem;font-weight:900}.drawerLayer{z-index:45;pointer-events:none}.drawerLayer--open{pointer-events:auto}.drawerOverlay{position:absolute;padding:0;background:#07182700;cursor:pointer;top:0;right:0;bottom:0;left:0;opacity:0;transition:background .28s cubic-bezier(.2,0,0,1),opacity .28s cubic-bezier(.2,0,0,1)}.drawerLayer--open .drawerOverlay{background:#07182757;opacity:1}.menuDrawer{position:absolute;top:0;right:0;width:min(420px,92vw);height:100%;padding:26px;border-left:1px solid var(--border);background:var(--surface);box-shadow:-18px 0 52px #07182729;transform:translate(100%);transition:transform .29s cubic-bezier(.2,0,0,1)}.drawerLayer--open .menuDrawer{transform:translate(0)}.menuList{display:grid;gap:10px}.menuItem{width:100%;min-height:52px;padding:0 16px;border:1px solid var(--border);background:var(--surface-soft);color:var(--text);text-align:left}.modalActions{justify-content:flex-end}.modalActions--stacked{flex-direction:column}@keyframes cardEnter{to{opacity:1;transform:translateY(0)}}@keyframes tileSpawn{0%{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}@keyframes tileMerge{0%{transform:scale(1)}52%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes boardShake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}@keyframes scoreBump{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-12px)}}@keyframes overlayFade{0%{opacity:0}to{opacity:1}}@keyframes modalEnter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:900px){.appShell{padding:28px 16px 40px}.gameLayout{grid-template-columns:1fr}.gameBoard,.sidePanel{width:min(100%,640px)}}@media(max-width:620px){.appShell{padding:22px 14px 34px}.homeHero h1,.gameHeader h1{font-size:1.78rem}.homeHero p:last-child,.gameHeader p:last-child{font-size:1rem}.gameHeader{align-items:stretch;flex-direction:column}.themeGrid{grid-template-columns:1fr}.themeCard{min-height:178px;padding:20px;border-radius:20px}.themeCard__footer{align-items:center}.gameBoard{--board-padding: 8px;--board-gap: 8px;border-radius:20px}.boardCell,.gameTile{border-radius:14px}.gameTile{padding:8px}.tilePower{top:6px;left:6px;min-width:1.4rem;height:1.14rem;font-size:.58rem}.tileLabelShort{font-size:clamp(.76rem,4vw,1rem)}.tileLabelMedium{font-size:clamp(.62rem,3vw,.82rem)}.tileLabelLong{font-size:clamp(.5rem,2.45vw,.68rem)}.scoreGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.scoreCard,.progressPanel{border-radius:18px}.scoreCard{min-height:86px;padding:15px}.scoreCard strong{font-size:1.62rem}.modalBackdrop{padding:12px}.modal{max-height:calc(100vh - 24px);padding:18px;border-radius:20px}.progressSummary{grid-template-columns:1fr}.menuDrawer{padding:22px}}@media(max-width:390px){.tileLabelLong{font-size:.48rem}.tileLabelMedium{font-size:.58rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:1ms!important}}