.tile{display:flex;align-items:center;justify-content:center;border-radius:6px;font-family:Nunito,Arial Rounded MT Bold,Arial,sans-serif;font-weight:900;line-height:1;-webkit-user-select:none;user-select:none;animation:tile-appear .12s ease-out both;transition:background-color .08s ease,box-shadow .08s ease;aspect-ratio:1;width:100%;height:100%}@keyframes tile-appear{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.board-wrapper{width:100%;max-width:min(460px,95vw);margin:0 auto}.board{--size: 4;--gap: clamp(6px, 1.6vw, 10px);--padding: clamp(8px, 2vw, 14px);position:relative;background:#bbada0;border-radius:10px;padding:var(--padding);display:grid;grid-template-columns:repeat(var(--size),1fr);grid-template-rows:repeat(var(--size),1fr);gap:var(--gap);aspect-ratio:1;touch-action:none;-webkit-tap-highlight-color:transparent}.board-cell{background:#eee4da59;border-radius:4px;aspect-ratio:1}.board-tiles{position:absolute;inset:var(--padding);display:grid;grid-template-columns:repeat(var(--size),1fr);grid-template-rows:repeat(var(--size),1fr);gap:var(--gap);pointer-events:none}@media (max-width: 380px){.board{--gap: 5px;--padding: 7px}}.score-box{background:#bbada0;border-radius:6px;padding:8px 14px;text-align:center;min-width:80px;transition:transform .15s ease}.score-box.bump{transform:scale(1.08)}.score-label{display:block;font-size:.65rem;font-weight:700;letter-spacing:.1em;color:#eee4da;text-transform:uppercase}.score-value{display:block;font-size:clamp(1rem,4vw,1.4rem);font-weight:900;color:#f9f6f2;line-height:1.2}@media (max-width: 360px){.score-box{min-width:68px;padding:6px 10px}}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:10px;display:flex;align-items:center;justify-content:center;animation:fade-in .3s ease both;z-index:10}.overlay--won{background:#edc22ee0}.overlay--over{background:#776e65d1}.overlay-content{text-align:center;padding:24px}.overlay-emoji{display:block;font-size:3rem;margin-bottom:8px;animation:bounce-in .4s cubic-bezier(.36,.07,.19,.97) both}.overlay-title{font-size:clamp(1.6rem,7vw,2.4rem);font-weight:900;color:#f9f6f2;margin:0 0 4px;text-shadow:0 2px 8px rgba(0,0,0,.2)}.overlay-sub{font-size:clamp(.85rem,3.5vw,1rem);color:#f9f6f2e6;margin:0 0 20px}.overlay-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.btn{padding:12px 24px;border-radius:6px;border:none;font-size:clamp(.85rem,3.5vw,1rem);font-weight:800;cursor:pointer;transition:transform .1s ease,opacity .1s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.btn:active{transform:scale(.95);opacity:.85}.btn--primary{background:#f9f6f2;color:#776e65}.btn--secondary{background:#f9f6f24d;color:#f9f6f2;border:2px solid rgba(249,246,242,.6)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes bounce-in{0%{transform:scale(.3)}50%{transform:scale(1.15)}70%{transform:scale(.9)}to{transform:scale(1)}}.lobby{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:100%;overflow:hidden;padding:24px 20px;background:var(--bg)}.lobby-deco{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.deco-tile{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:8px;font-family:Nunito,Arial Rounded MT Bold,Arial,sans-serif;font-weight:900;opacity:.18;animation:float 6s ease-in-out infinite;-webkit-user-select:none;user-select:none}.deco-tile:nth-child(odd){animation-duration:7s}.deco-tile:nth-child(3n){animation-duration:5s;animation-delay:-2s}.deco-tile:nth-child(4n){animation-delay:-3.5s}@keyframes float{0%,to{transform:translateY(0) rotate(var(--rot, 0deg))}50%{transform:translateY(-10px) rotate(var(--rot, 0deg))}}.lobby-card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:28px;width:100%;max-width:340px}.lobby-logo-wrap{text-align:center}.lobby-logo{font-size:clamp(5rem,22vw,8rem);font-weight:900;color:var(--text-dark);line-height:.9;letter-spacing:-.04em;text-shadow:0 4px 0 rgba(237,194,46,.5),0 8px 24px rgba(237,194,46,.2);animation:logo-drop .5s cubic-bezier(.34,1.56,.64,1) both}.lobby-tagline{font-size:clamp(.8rem,3vw,1rem);font-weight:700;color:var(--text);letter-spacing:.04em;text-transform:uppercase;margin-top:6px;opacity:0;animation:fade-up .4s ease .3s both}.lobby-best{background:#bbada0;border-radius:10px;padding:10px 28px;text-align:center;animation:fade-up .4s ease .4s both}.lobby-best-label{display:block;font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#eee4da}.lobby-best-value{display:block;font-size:clamp(1.4rem,6vw,2rem);font-weight:900;color:#f9f6f2;line-height:1.1}.lobby-actions{display:flex;flex-direction:column;gap:12px;width:100%;animation:fade-up .4s ease .5s both}.lobby-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;border:none;border-radius:14px;font-family:inherit;font-weight:800;font-size:clamp(1rem,4.5vw,1.2rem);cursor:pointer;padding:16px 24px;letter-spacing:.01em;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}.lobby-btn:active{transform:scale(.96)}.lobby-btn--play:active{box-shadow:0 2px #c49a10,0 4px 12px #edc22e4d;transform:translateY(2px) scale(.97)}.lobby-btn--how{background:#8f7a66;color:#f9f6f2;box-shadow:0 4px #6b5b4e,0 6px 16px #00000026}.lobby-btn--how:hover{filter:brightness(1.08);box-shadow:0 6px #6b5b4e,0 10px 20px #0000002e;transform:translateY(-1px)}.lobby-btn--how:active{box-shadow:0 2px #6b5b4e,0 4px 10px #0000001f;transform:translateY(2px) scale(.97)}.lobby-btn:focus-visible{outline:3px solid var(--brand);outline-offset:3px}@keyframes logo-drop{0%{transform:translateY(-40px) scale(.8);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes fade-up{0%{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}@media (prefers-reduced-motion: reduce){.lobby-logo,.lobby-tagline,.lobby-best,.lobby-actions,.deco-tile{animation:none!important;opacity:1!important}}.htp-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;z-index:100;display:flex;align-items:flex-end;justify-content:center;animation:backdrop-in .2s ease both;cursor:pointer}.htp-sheet{background:var(--surface, #F9F6F2);width:100%;max-width:500px;max-height:90dvh;border-radius:20px 20px 0 0;display:flex;flex-direction:column;overflow:hidden;cursor:default;animation:sheet-up .3s cubic-bezier(.34,1.56,.64,1) both;padding-bottom:env(safe-area-inset-bottom,0px)}.htp-handle{width:40px;height:4px;background:#bbada0;border-radius:2px;margin:10px auto 0;flex-shrink:0}.htp-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 10px;flex-shrink:0}.htp-title{font-size:clamp(1.2rem,5vw,1.5rem);font-weight:900;color:var(--text-dark, #1C1917)}.htp-close{width:36px;height:36px;border-radius:50%;border:none;background:#eee4da;color:#776e65;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;flex-shrink:0}.htp-close:hover{background:#bbada0;color:#f9f6f2}.htp-close:focus-visible{outline:3px solid var(--brand, #FBBF24);outline-offset:2px}.htp-body{overflow-y:auto;padding:4px 20px 0;flex:1;display:flex;flex-direction:column;gap:20px;-webkit-overflow-scrolling:touch}.htp-steps{list-style:none;display:flex;flex-direction:column;gap:14px}.htp-step{display:flex;align-items:flex-start;gap:14px}.htp-step-icon{font-size:1.6rem;line-height:1;flex-shrink:0;width:36px;text-align:center}.htp-step-title{display:block;font-size:clamp(.88rem,3.5vw,1rem);font-weight:800;color:var(--text-dark, #1C1917);margin-bottom:2px}.htp-step-desc{font-size:clamp(.78rem,3vw,.88rem);color:#9e9187;line-height:1.5}.htp-examples{background:#eee4da;border-radius:12px;padding:14px 16px}.htp-examples-label{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#9e9187;margin-bottom:10px}.htp-examples-list{display:flex;flex-direction:column;gap:8px}.htp-example-row{display:flex;align-items:center;gap:8px}.mini-tile{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:6px;font-size:.88rem;font-weight:900;flex-shrink:0}.htp-plus,.htp-eq{font-size:1.1rem;font-weight:700;color:#9e9187;flex-shrink:0}.htp-controls{display:flex;flex-direction:column;gap:8px;padding-bottom:4px}.htp-ctrl-row{display:flex;align-items:center;gap:10px}.htp-ctrl-keys{display:flex;align-items:center;gap:4px;flex-shrink:0}.htp-ctrl-sep{font-size:.72rem;color:#9e9187;padding:0 2px}kbd{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 6px;background:#fff;border:1.5px solid #BBADA0;border-bottom-width:3px;border-radius:5px;font-family:inherit;font-size:.72rem;font-weight:700;color:#776e65}.htp-ctrl-label{font-size:clamp(.75rem,2.8vw,.85rem);color:#9e9187}.htp-footer{padding:14px 20px 20px;flex-shrink:0}.htp-got-it{font-size:clamp(.9rem,3.5vw,1rem)!important;padding:14px 24px!important}@keyframes backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes sheet-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.htp-backdrop,.htp-sheet{animation:none!important}}@media (min-width: 520px){.htp-backdrop{align-items:center;padding:20px}.htp-sheet{border-radius:20px;max-height:85vh}.htp-handle{display:none}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--brand: #FBBF24;--bg: #FAF8F5;--surface: #F9F6F2;--text: #776E65;--text-dark: #1C1917;--board-bg: #BBADA0;--radius: 8px;--safe-bottom: env(safe-area-inset-bottom, 0px)}html,body{height:100%;overflow:hidden}body{font-family:Nunito,Arial Rounded MT Bold,Helvetica Neue,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overscroll-behavior:none}#root{height:100%;display:flex;flex-direction:column}.app{flex:1;display:flex;align-items:center;justify-content:center;min-height:100%;padding:clamp(12px,3vw,24px) clamp(12px,4vw,20px);padding-bottom:calc(clamp(12px,3vw,24px) + var(--safe-bottom))}.container{width:100%;max-width:460px;display:flex;flex-direction:column;gap:clamp(10px,2.5vw,16px)}.header{display:flex;align-items:center;justify-content:space-between;gap:12px}.header-left{flex-shrink:0}.logo{font-size:clamp(2.4rem,12vw,4rem);font-weight:900;color:var(--text-dark);line-height:1;letter-spacing:-.02em}.tagline{font-size:clamp(.7rem,2.5vw,.85rem);font-weight:600;color:var(--text);margin-top:2px}.header-right{display:flex;gap:8px;flex-shrink:0}.controls{display:flex;gap:8px;justify-content:flex-end}.ctrl-btn{display:inline-flex;align-items:center;gap:5px;background:#8f7a66;color:#f9f6f2;border:none;border-radius:var(--radius);padding:8px 14px;font-size:clamp(.75rem,3vw,.85rem);font-weight:700;cursor:pointer;transition:background .15s,transform .1s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.ctrl-btn:hover:not(:disabled){background:#9f8a76}.ctrl-btn:active:not(:disabled){transform:scale(.95)}.ctrl-btn--disabled{opacity:.45;cursor:not-allowed}.board-container{position:relative;border-radius:10px;touch-action:none}.hint{text-align:center;font-size:clamp(.7rem,2.5vw,.8rem);color:#9e9187}.hint-mobile{display:none}.hint-desktop{display:inline}@media (max-width: 400px){.logo{font-size:clamp(2rem,14vw,3rem)}}@media (hover: none) and (pointer: coarse){.hint-mobile{display:inline}.hint-desktop{display:none}}@media (prefers-reduced-motion: reduce){.tile{animation:none!important;transition:none!important}.overlay,.overlay-emoji{animation:none!important}.score-box{transition:none!important}}.ctrl-btn:focus-visible{outline:3px solid var(--brand);outline-offset:2px}.header-left{display:flex;align-items:center;gap:8px}.back-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:none;background:#eee4da;color:#776e65;cursor:pointer;flex-shrink:0;transition:background .15s,transform .1s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.back-btn:hover{background:#bbada0;color:#f9f6f2}.back-btn:active{transform:scale(.93)}.back-btn:focus-visible{outline:3px solid var(--brand);outline-offset:2px}.lobby-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;border-radius:14px;font-family:inherit;font-weight:800;font-size:clamp(1rem,4.5vw,1.2rem);cursor:pointer;padding:16px 24px;letter-spacing:.01em;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}.lobby-btn--play{background:#edc22e;color:#1c1917;box-shadow:0 4px #c49a10,0 6px 20px #edc22e59}.lobby-btn--play:hover{filter:brightness(1.06);box-shadow:0 6px #c49a10,0 10px 28px #edc22e66;transform:translateY(-1px)}.lobby-btn--play:active{box-shadow:0 2px #c49a10;transform:translateY(2px) scale(.97)}