:root{color:#223047;background:#f6fbff;font-family:Inter,Apple SD Gothic Neo,Noto Sans KR,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--blue: #1596d2;--blue-dark: #0f6f9d;--mint: #35c5bd;--coral: #f46f9d;--amber: #ffca4b;--ink: #223047;--muted: #68758c;--surface: rgba(255, 255, 255, .92);--line: rgba(34, 48, 71, .12);--shadow: 0 18px 48px rgba(30, 76, 110, .16);--radius: 8px}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;min-width:320px;background:linear-gradient(180deg,#f6fbfff5,#ecf9fff5),url(/paw-pattern.svg)}button{border:0;color:inherit;cursor:pointer;font:inherit;letter-spacing:0}button:disabled{cursor:not-allowed}.app-shell{display:flex;justify-content:center;min-height:100svh;padding:18px}.screen{width:min(100%,760px);min-height:calc(100svh - 36px)}.home-screen{display:flex;flex-direction:column;gap:16px}.home-hero{display:grid;min-height:214px;align-items:end;padding:28px;border:1px solid rgba(21,150,210,.18);border-radius:var(--radius);background:linear-gradient(135deg,#1596d229,#35c5bd14 48%,#f46f9d1a),var(--surface);box-shadow:var(--shadow)}.hero-animal{width:96px;height:96px;margin-bottom:10px;border:3px solid rgba(255,255,255,.72);border-radius:50%;object-fit:cover;object-position:50% 38%;filter:drop-shadow(0 12px 18px rgba(34,48,71,.18))}h1,h2,p{margin:0}h1{font-size:34px;line-height:1.15;font-weight:850}h2{font-size:20px;line-height:1.3}p{color:var(--muted);font-size:15px;line-height:1.6}.home-hero p{max-width:440px;margin-top:8px}.quick-actions,.home-levels,.records-list,.empty-state{display:grid;gap:10px}.action-tile,.record-row,.setting-row{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;width:100%;min-height:78px;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:0 8px 24px #1e4c6e14;text-align:left}.action-tile svg,.record-icon svg,.setting-row svg{width:24px;height:24px}.action-tile>svg:first-child,.record-icon{display:grid;width:44px;height:44px;place-items:center;border-radius:var(--radius);background:#1596d21f;color:var(--blue)}.action-tile span,.record-row span:not(.record-icon),.setting-row span{display:grid;gap:4px;min-width:0}.action-tile strong,.record-row strong,.setting-row strong{overflow:hidden;font-size:16px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.action-tile small,.record-row small,.setting-row small,.mini-level small,.level-card small{color:var(--muted);font-size:13px;line-height:1.35}.action-primary{border-color:#1596d25c;background:#eaf8ff}.section-heading,.screen-header,.game-header,.settings-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-heading{margin-bottom:10px}.text-button{padding:8px 10px;border-radius:var(--radius);background:#1596d21a;color:var(--blue-dark);font-size:14px;font-weight:800}.level-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.mini-level{display:grid;min-height:68px;place-items:center;border:1px solid var(--line);border-radius:var(--radius);background:#fff}.mini-level strong{font-size:22px}.mini-level.is-locked,.level-card.is-locked{opacity:.48}.reset-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:fit-content;padding:10px 12px;border-radius:var(--radius);background:#f46f9d1f;color:#a83359;font-size:14px;font-weight:800}.reset-button svg{width:18px;height:18px}.screen-header{margin-bottom:18px;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.screen-header>div{flex:1}.screen-header h1,.game-title h1{font-size:25px}.screen-header p,.game-title p{margin-top:3px;font-size:14px}.icon-button{display:inline-grid;width:44px;height:44px;flex:0 0 auto;place-items:center;border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 6px 16px #2230471a}.icon-button svg{width:22px;height:22px}.level-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.level-card{display:grid;min-height:138px;align-content:center;justify-items:center;gap:7px;padding:14px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:0 8px 24px #1e4c6e14}.level-number{display:grid;min-width:42px;height:42px;place-items:center;border-radius:50%;background:#ffca4b47;color:#8f6421;font-size:20px;font-weight:900}.level-number svg{width:18px;height:18px}.best-record{display:inline-flex;align-items:center;gap:4px;color:var(--blue-dark);font-size:12px;font-weight:800}.best-record svg{width:14px;height:14px}.game-screen{display:grid;align-content:start;gap:14px}.game-header{padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:0 8px 24px #1e4c6e14}.game-title{flex:1;text-align:center}.score-title{display:inline-grid;grid-template-columns:repeat(2,minmax(72px,1fr));align-items:end;gap:18px;color:#955564}.score-title span{display:grid;gap:1px;justify-items:center}.score-title small{color:#955564;font-size:14px;font-weight:800;line-height:1.1}.score-title strong{font-size:26px;font-weight:950;line-height:1}.status-bar{display:flex;align-items:center;justify-content:center;gap:12px}.progress-pill,.accuracy-row{display:inline-flex;align-items:center;min-height:42px;gap:7px;padding:8px 14px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 6px 18px #1e4c6e14}.progress-pill img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 38%}.progress-pill strong{color:#14a64f;font-size:20px}.accuracy-row svg{width:24px;height:24px}.accuracy-row .is-full{color:#ffb71b}.accuracy-row .is-empty{color:#d5dce8}.rule-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.rule-chip{display:grid;min-height:52px;align-items:center;padding:9px 8px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:#85515c;font-size:14px;font-weight:850;line-height:1.25;text-align:center}.rule-chip.is-focus{border-color:#955564;box-shadow:inset 0 0 0 1px #955564}.rule-chip.is-done{background:#f8fffa}.board{display:grid;width:min(100%,540px);aspect-ratio:1;justify-self:center;grid-template-columns:repeat(var(--board-size),minmax(0,1fr));grid-template-rows:repeat(var(--board-size),minmax(0,1fr));gap:6px;padding:8px;border:8px solid #fff;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}.cell{position:relative;display:grid;min-width:0;min-height:0;aspect-ratio:1;place-items:center;overflow:hidden;border-radius:7px;box-shadow:inset 0 -10px 20px #22304714}.cell:focus-visible,.tool-button:focus-visible,.action-tile:focus-visible,.level-card:focus-visible,.mini-level:focus-visible,.primary-button:focus-visible,.secondary-button:focus-visible,.text-button:focus-visible,.reset-button:focus-visible,.setting-row:focus-visible,.icon-button:focus-visible{outline:3px solid rgba(21,150,210,.42);outline-offset:3px}.cell.has-mark svg{width:60%;height:60%;color:#ffffffe6;filter:drop-shadow(0 3px 5px rgba(34,48,71,.22))}.hint-badge{position:absolute;top:16%;right:16%;bottom:16%;left:16%;display:grid;place-items:center;border:3px solid rgba(255,255,255,.72);border-radius:50%;background:#ffffff47;color:#fffffff5;filter:drop-shadow(0 6px 10px rgba(34,48,71,.24));pointer-events:none}.hint-badge svg{width:72%;height:72%}.animal-token{inline-size:88%;block-size:88%;max-width:88%;max-height:88%;border-radius:50%;object-fit:cover;object-position:50% 38%;filter:drop-shadow(0 8px 10px rgba(34,48,71,.2));pointer-events:none}.cell.has-cat:after{position:absolute;z-index:2;top:3px;right:3px;bottom:3px;left:3px;border:3px solid rgba(255,246,121,.72);border-radius:7px;content:"";pointer-events:none}.cell.is-mistake{animation:shake .28s ease-in-out}.cell.is-conflict:before{position:absolute;z-index:3;top:2px;right:2px;bottom:2px;left:2px;border:4px solid rgba(239,63,82,.92);border-radius:7px;box-shadow:0 0 0 3px #ffffff9e;content:"";pointer-events:none}.cell.is-conflict{animation:shake .32s ease-in-out}.cell.is-fresh-hint{animation:hintPulse .9s ease-out}.tool-panel{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.tool-button{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:52px;gap:8px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);font-size:15px;font-weight:850;box-shadow:0 6px 18px #1e4c6e12}.tool-button svg{width:21px;height:21px}.tool-animal-icon{width:25px;height:25px;border-radius:50%;object-fit:cover;object-position:50% 38%}.tool-button.is-active{border-color:#1596d270;background:#eaf8ff;color:var(--blue-dark)}.tool-badge{display:inline-grid;min-width:21px;height:21px;place-items:center;padding:0 6px;border-radius:999px;background:#ef3f52;color:#fff;font-size:12px;font-weight:950;line-height:1}.ad-play-badge{display:inline-grid;width:24px;height:20px;place-items:center;border-radius:999px;background:#16c463;color:#fff;box-shadow:0 4px 10px #16c4634d}.ad-play-badge svg{width:14px;height:14px;margin-left:1px}.hint-button{color:#8f6421}.hint-button:not(:disabled){border-color:#ffca4b94;background:#fff7db}.hint-button.requires-ad:not(:disabled){border-color:#f46f9d75;background:#fff0f5;color:#9c365a}.hint-button:disabled{color:#a6b0c0;background:#f5f7fa}.play-hint{justify-self:center;max-width:520px;text-align:center}.play-warning{justify-self:center;width:min(100%,540px);padding:10px 12px;border:1px solid rgba(239,63,82,.28);border-radius:var(--radius);background:#fff0f3;color:#a52d41;font-size:14px;font-weight:850;line-height:1.35;text-align:center}.modal-backdrop{position:fixed;z-index:20;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:20px;background:#161f3061;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.result-modal,.settings-modal,.empty-state{width:min(100%,420px);padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 28px 70px #161f303d}.result-modal{position:relative;display:grid;justify-items:center;gap:12px;overflow:hidden;text-align:center}.perfect-modal{overflow:visible;border:0;background:transparent;box-shadow:none;color:#fff}.perfect-modal>svg{color:#ff9c1a;filter:drop-shadow(0 4px 0 rgba(124,56,4,.65))}.perfect-modal h2{color:#fff;font-size:42px;font-weight:950;letter-spacing:0;text-shadow:0 4px 0 #a85005,0 0 16px rgba(255,176,55,.72)}.perfect-modal p{max-width:340px;color:#ffe16b;font-size:24px;font-weight:900;line-height:1.35;text-shadow:0 3px 8px rgba(0,0,0,.42)}.result-animal{width:min(48vw,180px);aspect-ratio:818 / 933;border-radius:24px;object-fit:cover;object-position:center;filter:drop-shadow(0 20px 28px rgba(0,0,0,.28))}.perfect-modal .result-animal{width:min(58vw,240px);border:6px solid rgba(255,238,95,.56);border-radius:28px}.success-splash{position:fixed;z-index:40;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;overflow:hidden;padding:24px;background:radial-gradient(circle at 50% 42%,#ffdb5057,#0f1c2dd1 52%),#0f1c2dd1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.success-splash-card{position:relative;z-index:1;display:grid;justify-items:center;gap:8px;text-align:center;animation:successPop 3s ease both}.success-hedgehog{width:min(78vw,440px);max-height:64svh;aspect-ratio:818 / 933;border:8px solid rgba(255,255,255,.2);border-radius:28px;object-fit:cover;object-position:center;filter:drop-shadow(0 28px 38px rgba(0,0,0,.34))}.success-splash h2{color:#fff;font-size:clamp(44px,9vw,86px);font-weight:950;line-height:1;text-shadow:0 5px 0 #a85005,0 0 24px rgba(255,176,55,.74)}.success-splash p{max-width:520px;color:#ffe98a;font-size:clamp(18px,3.4vw,28px);font-weight:900;line-height:1.35;text-shadow:0 4px 12px rgba(0,0,0,.42)}.success-splash-confetti{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.success-splash-confetti span{position:absolute;width:14px;height:28px;border-radius:3px;background:#ff6aa8;animation:confettiFall 3s ease-in-out both}.success-splash-confetti span:nth-child(1){left:12%;top:11%;transform:rotate(-24deg)}.success-splash-confetti span:nth-child(2){left:23%;top:72%;background:#45c5bd;animation-delay:.12s}.success-splash-confetti span:nth-child(3){left:51%;top:8%;background:#ffca4b;animation-delay:.04s}.success-splash-confetti span:nth-child(4){right:16%;top:20%;background:#76c7ef;animation-delay:.18s}.success-splash-confetti span:nth-child(5){right:10%;top:68%;background:#f46f9d;animation-delay:.08s}.success-splash-confetti span:nth-child(6){left:39%;top:84%;background:#9d7ce8;animation-delay:.16s}.result-meta{color:var(--muted);font-size:13px;font-weight:800}.perfect-modal .result-meta{color:#ffffffd1}.perfect-modal .primary-button{min-height:58px;border-radius:999px;background:#ff9d18;font-size:23px;box-shadow:0 12px 28px #0000003d}.perfect-modal .secondary-button{border-color:#ffffff3d;background:#ffffff21;color:#fff}.confetti{position:absolute;inset:-42px -24px auto;height:170px;pointer-events:none}.confetti span{position:absolute;width:10px;height:18px;border-radius:2px;background:#ff6aa8;transform:rotate(18deg)}.confetti span:nth-child(1){left:6%;top:28px}.confetti span:nth-child(2){left:25%;top:68px;background:#35c5bd;transform:rotate(-18deg)}.confetti span:nth-child(3){right:12%;top:34px;background:#77c4ee;transform:rotate(24deg)}.confetti span:nth-child(4){right:31%;top:86px;background:#ffca4b;transform:rotate(-26deg)}.confetti span:nth-child(5){left:50%;top:22px;background:#f46f9d;transform:rotate(39deg)}.result-modal>svg,.empty-state>svg{width:48px;height:48px;color:var(--blue)}.modal-actions{display:flex;width:100%;gap:8px;margin-top:6px}.primary-button,.secondary-button{display:inline-flex;flex:1;align-items:center;justify-content:center;min-height:48px;border-radius:var(--radius);font-size:15px;font-weight:850}.primary-button{background:var(--blue);color:#fff}.primary-button:disabled{background:#d5dce8;color:#718097}.secondary-button{border:1px solid var(--line);background:#fff}.ad-backdrop{background:#0f1c2d94}.ad-modal{display:grid;width:min(100%,440px);gap:14px;justify-items:center;padding:24px;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);background:#fff;box-shadow:0 34px 90px #0f1c2d57;text-align:center}.ad-modal>svg{width:42px;height:42px;color:#9c365a}.ad-creative{display:grid;width:100%;min-height:120px;align-content:center;justify-items:center;gap:7px;padding:18px;border-radius:var(--radius);background:linear-gradient(135deg,#ffca4b57,#f46f9d33),url(/paw-pattern.svg)}.ad-creative strong{font-size:22px;font-weight:900}.ad-creative span{color:var(--muted);font-size:14px}.ad-progress{width:100%;height:10px;overflow:hidden;border-radius:999px;background:#edf2f7}.ad-progress span{display:block;height:100%;border-radius:inherit;background:var(--coral);transition:inline-size .25s ease}.settings-modal{display:grid;gap:10px}.settings-header{margin-bottom:4px}.setting-row{grid-template-columns:38px 1fr auto;min-height:70px;box-shadow:none}.setting-row b{color:var(--blue-dark)}.records-list{gap:8px}.record-row{min-height:72px}.record-row b{color:var(--blue-dark);font-size:18px}.empty-state{justify-items:center;margin:48px auto 0;text-align:center}.empty-state h2{margin-top:6px}@keyframes shake{0%,to{transform:translate(0)}30%{transform:translate(-5px)}65%{transform:translate(5px)}}@keyframes hintPulse{0%{transform:scale(1);box-shadow:0 0 #ffca4b9e}55%{transform:scale(1.04);box-shadow:0 0 0 9px #ffca4b33}to{transform:scale(1);box-shadow:0 0 #ffca4b00}}@keyframes successPop{0%{opacity:0;transform:translateY(28px) scale(.82)}14%{opacity:1;transform:translateY(0) scale(1.05)}24%,78%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-10px) scale(.96)}}@keyframes confettiFall{0%{opacity:0;transform:translateY(-30px) rotate(0)}16%{opacity:1}to{opacity:.72;transform:translateY(62px) rotate(180deg)}}@media (max-width: 620px){.app-shell{padding:10px}.screen{min-height:calc(100svh - 20px)}.home-hero{min-height:190px;padding:22px}h1{font-size:28px}.level-strip{grid-template-columns:repeat(3,1fr)}.level-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rule-chip{min-height:42px;padding:8px 6px;font-size:12px}.board{gap:5px;padding:6px;border-width:6px}.tool-button{min-height:50px;font-size:14px}.action-tile{grid-template-columns:40px 1fr auto}}@media (max-width: 400px){.app-shell{padding:8px}.game-header{padding:10px 8px}.screen-header h1,.game-title h1{font-size:21px}.screen-header p,.game-title p,.play-hint{font-size:13px}.icon-button{width:40px;height:40px}.status-bar{gap:8px}.progress-pill,.accuracy-row{min-height:38px;padding:7px 10px}.accuracy-row svg{width:21px;height:21px}.board{gap:4px}.rule-chips{gap:5px}.rule-chip{padding:7px 4px;font-size:11px}.tool-panel{grid-template-columns:repeat(2,1fr)}}.reduce-effects *,.reduce-effects *:before,.reduce-effects *:after{animation-duration:.001ms!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
