@import"https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800;900&display=swap";*{box-sizing:border-box}:root{--yellow: #edc22e;--yellow-dark: #c49a10;--bg: #faf8f5;--ink: #1c1917;--muted: #776e65;--board: #bbada0}html,body,#root{min-width:320px;min-height:100%;margin:0}body{font-family:Nunito,Arial Rounded MT Bold,Arial,sans-serif;color:var(--muted);background:radial-gradient(circle at 12% 12%,#fff5bc 0 11%,transparent 28%),var(--bg)}button{font:inherit}body{overflow-x:hidden}.app-shell{width:100%;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:10px 5px calc(10px + env(safe-area-inset-bottom))}.game-card,.lobby-card{width:100%;border:1px solid rgba(255,255,255,.9);background:#ffffffd6;box-shadow:0 18px 48px #776e6529}.game-card{max-width:none;padding:13px 9px;border-radius:20px;display:flex;flex-direction:column}.game-shell .game-card{min-height:calc(100svh - 20px - env(safe-area-inset-bottom));margin-top:auto;margin-bottom:auto}.lobby-shell{overflow:hidden}.lobby-card{position:relative;max-width:390px;min-height:min(650px,calc(100svh - 28px));display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 22px 24px;overflow:hidden;border-radius:28px}.lobby-card:before{content:"";position:absolute;width:270px;height:270px;top:-90px;right:-80px;border-radius:50%;background:#fff4bd;opacity:.7}.eyebrow{margin:0 0 3px;color:#bc9413;font-size:.63rem;font-weight:900;letter-spacing:.18em}h1{margin:0;color:var(--ink);font-size:clamp(2.7rem,15vw,5rem);line-height:.9;letter-spacing:-.07em;text-shadow:0 4px 0 rgba(237,194,46,.42)}.tagline{margin:8px 0 0;font-size:.86rem;font-weight:800}.game-header{flex:0 0 auto;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:7px}.game-title h1{font-size:clamp(2rem,11vw,3.5rem)}.back-btn{width:34px;height:34px;border:0;border-radius:9px;background:#eee4da;color:#776e65;font-size:1.8rem;line-height:1;cursor:pointer}.back-btn:active{background:#ddd0c4}.header-badge{display:flex;align-items:center;gap:5px;padding:7px 8px;border-radius:10px;background:#f7e9a7;color:#a98211;font-size:1.3rem;font-weight:900}.header-badge span{font-size:.5rem;line-height:1.05;letter-spacing:.12em}.header-badge strong{font-size:.9rem;letter-spacing:0}.score-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:16px 0 9px}.score-box,.timer-box{padding:7px 4px;border-radius:9px;text-align:center;background:var(--board);color:#eee4da}.timer-box{background:#8f7a66}.timer-box--urgent{background:#c8553d;animation:timer-pulse 1s ease-in-out infinite}.score-box span,.timer-box span{display:block;font-size:.5rem;font-weight:900;letter-spacing:.08em}.score-box strong,.timer-box strong{display:block;color:#fff;font-size:clamp(.86rem,4vw,1.3rem);line-height:1.2}.board-wrap{width:100%;padding:8px;border-radius:13px;background:var(--board);box-shadow:inset 0 2px #ffffff2e,0 8px 16px #776e6526}.board{position:relative;display:grid;gap:clamp(5px,1.65vw,8px);width:100%}.tile{aspect-ratio:1;min-width:0;display:grid;place-items:center;padding:0;border:0;border-radius:0;overflow:hidden;background:#f5e6bc;box-shadow:0 3px #d2bb77,0 4px 8px #41301421;cursor:pointer;transition:filter .12s,background-color .12s;-webkit-tap-highlight-color:transparent}.tile img{width:88%;height:88%;object-fit:cover;object-position:center;border-radius:0;filter:drop-shadow(0 2px 1px rgba(0,0,0,.18));pointer-events:none;-webkit-user-select:none;user-select:none}.tile:hover{filter:brightness(1.05)}.tile:active{transform:none;box-shadow:0 3px #d2bb77,0 4px 8px #41301421}.tile--empty{visibility:hidden;pointer-events:none}.tile--selected{outline:3px solid var(--yellow);outline-offset:-3px;background:#fff4b8}.tile--hint{animation:pulse 1s ease-in-out infinite;outline:2px dashed #df9b20;outline-offset:-3px}.connection-layer{position:absolute;z-index:3;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:visible;pointer-events:none}.connection-path{fill:none;stroke:#f6bf16;stroke-width:.12;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 .06px .08px rgba(95,65,0,.5));stroke-dasharray:1.1 .34;animation:connect-draw .26s ease-out both}.board-note{min-height:1.35em;margin:8px 0 0;text-align:center;color:#776e65;font-size:.68rem;font-weight:800}.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:11px}.action-btn,.lobby-btn{border:0;border-radius:11px;cursor:pointer;font-weight:900;touch-action:manipulation}.action-btn{min-width:0;min-height:41px;padding:8px 2px;color:#fffaf1;font-size:clamp(.64rem,2.8vw,.9rem);box-shadow:0 4px #0000002e;transition:filter .12s,box-shadow .12s}.action-btn:hover{filter:brightness(1.07)}.action-btn:active{transform:none;box-shadow:0 4px #0000002e}.action-btn--primary{background:var(--yellow);color:var(--ink);box-shadow:0 4px 0 var(--yellow-dark)}.action-btn--secondary{background:#8f7a66}.action-btn--dark{background:#665548}.result{display:grid;grid-template-columns:auto 1fr;gap:8px 10px;align-items:center;margin-top:13px;padding:11px;border-radius:12px;background:#fff4bd;color:#896b15}.result-icon{font-size:1.7rem}.result strong{color:#5c4810;font-size:.95rem}.result p{margin:2px 0 0;font-size:.68rem;font-weight:700}.result button{grid-column:1 / -1;width:100%;border:0;border-radius:8px;padding:9px;background:var(--yellow);color:var(--ink);font-size:.75rem;font-weight:900;cursor:pointer}.result--over{background:#f6dfd5;color:#9b4d39}.result--over strong{color:#713b2c}footer{display:flex;justify-content:center;gap:6px;margin-top:14px;font-size:.63rem;font-weight:700;color:#9e9187}.dot{color:var(--yellow)}.lobby-spark{position:absolute;z-index:1;color:#edc22e;font-size:1.5rem}.spark-one{top:21%;left:12%}.spark-two{top:29%;right:12%;font-size:.9rem}.lobby-logo{position:relative;z-index:2;text-align:center}.lobby-logo h1{font-size:clamp(2.1rem,10vw,3.2rem);letter-spacing:-.08em}.lobby-animal{width:154px;height:154px;margin:-12px auto -9px;padding:0;border-radius:18px;overflow:hidden;background:#f7e9a7;box-shadow:0 12px 22px #776e6538}.lobby-animal img{width:100%;height:100%;border:0;border-radius:0;object-fit:cover;object-position:center}.lobby-level{position:relative;z-index:2;display:grid;grid-template-columns:auto auto;column-gap:7px;align-items:center;margin:24px 0;padding:10px 20px;border-radius:11px;background:var(--board);color:#eee4da;text-align:left}.lobby-level span{grid-column:1 / -1;font-size:.52rem;font-weight:900;letter-spacing:.13em}.lobby-level strong{color:#fff;font-size:1.8rem;line-height:1}.lobby-level small{color:#f4dcbf;font-size:.7rem;font-weight:800}.lobby-actions{position:relative;z-index:2;display:grid;gap:10px;width:100%}.lobby-btn{width:100%;min-height:50px;padding:13px 18px;font-size:1rem;transition:filter .12s,box-shadow .12s}.lobby-btn:hover{filter:brightness(1.06)}.lobby-btn:active{box-shadow:0 4px #0000002e;transform:none}.lobby-btn--play{background:var(--yellow);color:var(--ink);box-shadow:0 4px 0 var(--yellow-dark)}.lobby-btn--how{background:#8f7a66;color:#fff;box-shadow:0 4px #6b5b4e}.lobby-best{position:relative;z-index:2;margin:18px 0 0;font-size:.72rem;font-weight:700}.lobby-best strong{color:#a98211}.modal-backdrop{position:fixed;z-index:10;top:0;right:0;bottom:0;left:0;display:grid;place-items:end center;padding:12px;background:#1c191775}.how-card{position:relative;width:min(100%,390px);padding:28px 20px 20px;border-radius:22px;background:#fffdf9;box-shadow:0 -8px 30px #00000029}.how-card h2{margin:3px 0 18px;color:var(--ink);font-size:1.8rem}.modal-close{position:absolute;top:12px;right:14px;border:0;background:transparent;color:#776e65;font-size:1.8rem;cursor:pointer}.how-step{display:flex;align-items:flex-start;gap:10px;margin:12px 0}.how-step b{display:grid;flex:0 0 27px;place-items:center;width:27px;height:27px;border-radius:50%;background:#f7e9a7;color:#987513}.how-step p{margin:3px 0 0;font-size:.83rem;font-weight:700}@keyframes pulse{0%,to{box-shadow:0 0 #edc22e80}50%{box-shadow:0 0 0 5px #edc22e2e}}@keyframes timer-pulse{50%{filter:brightness(1.16)}}@keyframes connect-draw{0%{stroke-dashoffset:2;opacity:.25}to{stroke-dashoffset:0;opacity:1}}@media (max-width: 390px){.app-shell{padding-left:3px;padding-right:3px}.game-card{padding:12px 7px}.game-shell .game-card{min-height:calc(100svh - 16px - env(safe-area-inset-bottom))}.game-title h1{font-size:1.9rem}.header-badge{padding:6px 7px}.board-wrap{padding:7px}.board{gap:5px}.tile{border-radius:0}.tile img{width:86%;height:86%}.board-note{font-size:.64rem}.actions{gap:5px}}@media (max-height: 620px){.app-shell{align-items:flex-start}}@media (min-width: 600px){.app-shell{align-items:center;padding:24px 16px}.game-card{max-width:780px;min-height:auto;padding:26px 28px}.game-shell .game-card{min-height:auto}.board-wrap{padding:13px}.score-row{gap:9px;margin:24px 0 14px}.actions{gap:9px;margin-top:14px}.board-note{font-size:.76rem}.game-title h1{font-size:3.5rem}.board{gap:clamp(6px,1.35vw,11px)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}