:root{--bg-gradient: linear-gradient(135deg, #FAF7F2 0%, #F3ECE1 100%);--box-bg: rgba(255, 252, 245, .92);--primary-coral: #E76F51;--primary-hover: #D85C3D;--primary-shadow: rgba(231, 111, 81, .35);--accent-gold: #F4A261;--accent-teal: #2A9D8F;--wood-brown: #936639;--text-dark: #3F3731;--text-muted: #847568;--card-bg: rgba(255, 255, 255, .94);--card-border: rgba(212, 163, 115, .25);--card-shadow: 0 10px 30px rgba(80, 50, 20, .08), 0 2px 8px rgba(80, 50, 20, .04);--radius-lg: 24px;--radius-md: 16px;--radius-sm: 10px}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none}body{font-family:Zen Maru Gothic,Outfit,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-gradient);color:var(--text-dark);min-height:100vh;display:flex;justify-content:center;align-items:center;overflow-x:hidden}.app-layout{display:flex;justify-content:center;align-items:flex-start;gap:32px;padding:16px;max-width:960px;width:100%}.game-wrapper{display:flex;justify-content:center;align-items:center;flex-shrink:0}.game-container{position:relative;width:480px;height:800px;background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:0 16px 48px #5a3c1e1f,0 4px 12px #5a3c1e0f;border:4px solid #EADBCE;overflow:hidden;display:flex;flex-direction:column}@media(max-height:860px){.game-container,.sidebar-card{transform:scale(calc((100vh - 40px)/800));transform-origin:top center;margin-bottom:calc(800px*(1 - ((100vh - 40px)/800))*-1)}}.game-header{position:absolute;top:0;left:0;right:0;height:120px;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(180deg,#fffffff2,#fffcf5cc);backdrop-filter:blur(10px);border-bottom:2px solid rgba(220,195,170,.3);z-index:20}.header-left{display:flex;flex-direction:column;gap:4px}.game-title{font-size:20px;font-weight:900;color:var(--primary-coral);letter-spacing:.5px;display:flex;align-items:center;gap:4px}.title-sub{font-size:16px;animation:pawWiggle 2s infinite ease-in-out}@keyframes pawWiggle{0%,to{transform:rotate(0)}50%{transform:rotate(15deg) scale(1.1)}}.score-card,.best-card{display:flex;align-items:baseline;gap:8px}.score-label,.best-label{font-size:12px;font-weight:700;color:var(--text-muted)}.score-num{font-family:Outfit,sans-serif;font-size:26px;font-weight:800;color:var(--primary-coral);line-height:1}.best-num{font-family:Outfit,sans-serif;font-size:14px;font-weight:700;color:var(--text-muted);line-height:1}.header-right{display:flex;align-items:center;gap:12px}.next-cat-box{display:flex;flex-direction:column;align-items:center;background:#fff;padding:6px 10px;border-radius:var(--radius-md);border:2px solid #EEDBC8;box-shadow:0 4px 10px #6446280d}.next-label{font-family:Outfit,sans-serif;font-size:10px;font-weight:800;color:var(--primary-coral);letter-spacing:1px}.next-cat-circle{width:46px;height:46px;border-radius:50%;background:#fffbf5;display:flex;align-items:center;justify-content:center;margin:3px 0;box-shadow:inset 0 2px 4px #0000000a}.next-cat-circle img{width:40px;height:40px;object-fit:contain;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}.next-cat-name{font-size:11px;font-weight:700;color:var(--text-dark);max-width:60px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.control-buttons{display:flex;flex-direction:column;gap:6px}.btn-icon{width:38px;height:38px;border-radius:50%;border:2px solid #E6D2BF;background:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 6px #0000000a;transition:transform .15s,background-color .15s}.btn-icon:hover{transform:scale(1.08);background:#fff8f2}.btn-icon:active{transform:scale(.95)}.canvas-viewport{position:absolute;top:0;left:0;width:480px;height:800px;touch-action:none}#game-canvas{width:100%;height:100%;display:block;cursor:grab}#game-canvas:active{cursor:grabbing}.modal-overlay{position:absolute;inset:0;background:#2d1e14a6;backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:50;padding:20px;opacity:0;transition:opacity .25s ease}.modal-overlay.active{display:flex;opacity:1}.modal-card{background:#fffdf9;border-radius:var(--radius-lg);padding:32px 28px;text-align:center;box-shadow:0 20px 60px #00000040;border:3px solid #EEDDCB;max-width:400px;width:100%}.ready-illustration{margin-bottom:12px}.floating-cat{width:110px;height:110px;animation:floatCat 3s infinite ease-in-out}@keyframes floatCat{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(3deg)}}.modal-title{font-size:26px;font-weight:900;color:var(--primary-coral);margin-bottom:8px}.modal-tagline{font-size:14px;font-weight:500;color:var(--text-muted);line-height:1.6;margin-bottom:20px}.howto-card{background:#f8f3eb;border-radius:var(--radius-md);padding:14px 16px;text-align:left;margin-bottom:24px;display:flex;flex-direction:column;gap:10px}.howto-step{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:var(--text-dark)}.step-num{width:22px;height:22px;border-radius:50%;background:var(--primary-coral);color:#fff;font-family:Outfit,sans-serif;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}.modal-desc{font-size:15px;color:var(--text-muted);margin-bottom:24px}.modal-actions{display:flex;flex-direction:column;gap:12px}.btn-primary{width:100%;padding:15px 24px;border-radius:999px;border:none;background:var(--primary-coral);color:#fff;font-size:18px;font-weight:900;cursor:pointer;box-shadow:0 8px 24px var(--primary-shadow);transition:transform .15s,background-color .15s,box-shadow .15s}.btn-primary:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 10px 28px var(--primary-shadow)}.btn-primary:active{transform:translateY(1px)}.pulse-btn{animation:pulseScale 2s infinite ease-in-out}@keyframes pulseScale{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}.btn-secondary{width:100%;padding:12px 20px;border-radius:999px;border:2px solid #E0CEBD;background:transparent;color:var(--text-muted);font-size:14px;font-weight:700;cursor:pointer;transition:background-color .15s,color .15s}.btn-secondary:hover{background:#f3ece1;color:var(--text-dark)}.result-badge{display:inline-block;font-family:Outfit,sans-serif;font-size:12px;font-weight:800;letter-spacing:1.5px;background:#f37053;color:#fff;padding:4px 12px;border-radius:999px;margin-bottom:8px}.result-title{font-size:24px;font-weight:900;color:var(--text-dark);margin-bottom:16px}.result-cat-container{background:#f7efe5;border-radius:var(--radius-md);padding:16px;margin-bottom:20px;display:flex;flex-direction:column;align-items:center}.result-cat-label{font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:8px}.result-cat-circle{width:90px;height:90px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:8px;box-shadow:0 6px 16px #50321414}.result-cat-circle img{width:80px;height:80px;object-fit:contain}.result-cat-name{font-size:16px;font-weight:900;color:var(--text-dark)}.result-scores{background:#fff;border-radius:var(--radius-md);border:1px solid #EEDBCE;padding:14px 18px;margin-bottom:22px;display:flex;flex-direction:column;gap:10px}.result-score-row{display:flex;justify-content:space-between;align-items:baseline}.r-label{font-size:14px;font-weight:700;color:var(--text-muted)}.r-val{font-family:Outfit,sans-serif;font-size:20px;font-weight:800;color:var(--text-dark)}.score-highlight{font-size:28px;color:var(--primary-coral)}.r-val-box{display:flex;align-items:center;gap:6px}.badge-new{font-family:Outfit,sans-serif;font-size:10px;font-weight:800;background:#e76f51;color:#fff;padding:2px 6px;border-radius:4px;animation:pulseScale 1.5s infinite ease-in-out}.sidebar-guide{width:320px;flex-shrink:0}@media(max-width:860px){.sidebar-guide{display:none}}.sidebar-card{height:800px;background:var(--card-bg);border-radius:var(--radius-lg);padding:18px 16px;border:4px solid #EADBCE;box-shadow:var(--card-shadow);display:flex;flex-direction:column;box-sizing:border-box}.sidebar-title{font-size:17px;font-weight:900;color:var(--text-dark);margin-bottom:2px;line-height:1.2}.sidebar-sub{font-size:11px;color:var(--text-muted);line-height:1.35;margin-bottom:8px}.evolution-list{display:flex;flex-direction:column;gap:5px;flex:1;min-height:0;overflow-y:hidden}.evolution-list::-webkit-scrollbar{width:4px}.evolution-list::-webkit-scrollbar-thumb{background:#e0cdbd;border-radius:4px}.evolution-item{display:flex;align-items:center;gap:10px;padding:4px 10px;background:#fff;border-radius:var(--radius-md);border:1px solid #EEDBC8;flex:1;min-height:0;max-height:56px;transition:transform .15s,border-color .15s;box-sizing:border-box}.evolution-item:hover{transform:translate(3px);border-color:var(--accent-gold)}.evo-level{font-family:Outfit,sans-serif;width:20px;height:20px;border-radius:50%;background:#f3ece1;color:var(--wood-brown);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}.evo-img{width:36px;height:36px;object-fit:contain;flex-shrink:0}.evo-info{display:flex;flex-direction:column;flex-grow:1;min-width:0}.evo-name{font-size:12px;font-weight:800;color:var(--text-dark);line-height:1.2}.evo-score{font-family:Outfit,sans-serif;font-size:11px;font-weight:700;color:var(--primary-coral);line-height:1.2}.settings-card{max-width:380px}.settings-group{display:flex;flex-direction:column;gap:16px;margin:16px 0 24px;text-align:left}.setting-item{background:#fdf9f5;border:1px solid #EEDBC8;border-radius:var(--radius-md);padding:14px 16px}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.setting-label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.setting-label{font-size:14px;font-weight:800;color:var(--text-dark)}.setting-val-text{font-family:Outfit,sans-serif;font-size:13px;font-weight:700;color:var(--primary-coral)}.setting-desc{font-size:11px;color:var(--text-muted);margin-top:2px}.setting-slider{width:100%;height:6px;border-radius:999px;background:#eadbce;outline:none;-webkit-appearance:none;cursor:pointer}.setting-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--primary-coral);box-shadow:0 2px 6px var(--primary-shadow);cursor:pointer;transition:transform .1s}.setting-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.toggle-switch{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;inset:0;background-color:#d6c7b7;border-radius:999px;transition:background-color .2s}.toggle-slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;bottom:3px;background-color:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 2px 4px #00000026}.toggle-switch input:checked+.toggle-slider{background-color:var(--accent-teal)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(20px)}.ranking-register-box{background:#fdf9f5;border:1.5px dashed #E0CEBD;border-radius:var(--radius-md);padding:12px;margin-bottom:16px}.ranking-prep-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.ranking-box-label{font-size:12px;font-weight:800;color:var(--text-dark)}.badge-prep-pill{font-size:10px;font-weight:800;background:#fef3c7;color:#b45309;border:1px solid #FCD34D;padding:1px 7px;border-radius:999px}.ranking-prep-note{font-size:11px;color:var(--text-muted);line-height:1.4;margin:0 0 8px;text-align:left}.ranking-input-row{display:flex;gap:8px}.player-name-input{flex-grow:1;padding:10px 14px;border-radius:999px;border:1.5px solid #E0CEBD;background:#fff;font-family:inherit;font-size:13px;color:var(--text-dark);outline:none;transition:border-color .15s,box-shadow .15s}.player-name-input:focus{border-color:var(--primary-coral);box-shadow:0 0 0 3px #e76f5126}.btn-ranking-submit{width:auto;padding:10px 18px;background:var(--accent-gold);border:none;color:#fff;font-weight:800;white-space:nowrap;box-shadow:0 4px 12px #f4a26159}.btn-ranking-submit:hover:not(:disabled){background:#e79149;color:#fff}.btn-ranking-submit:disabled{opacity:.6;cursor:not-allowed}.ranking-status{font-size:11px;color:var(--text-muted);margin-top:6px;text-align:center;min-height:16px}.result-sub-actions{display:flex;gap:8px;width:100%;margin-top:8px}.btn-share{background:#1da1f2;color:#fff;border-color:#1da1f2}.btn-share:hover{background:#0d8ddb;color:#fff}.leaderboard-card{max-width:440px;padding:20px 16px}.leaderboard-header{margin-bottom:12px}.leaderboard-title-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:4px}.badge-prep{display:inline-block;padding:3px 9px;background:#fef3c7;color:#b45309;border:1px solid #FCD34D;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.5px;line-height:1.2}.prep-notice-banner{display:flex;align-items:flex-start;gap:10px;background:#fffbeb;border:1px solid #FDE68A;border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:12px;text-align:left}.prep-notice-icon{font-size:18px;line-height:1.2;flex-shrink:0}.prep-notice-body{flex-grow:1}.prep-notice-body strong{display:block;font-size:12px;font-weight:800;color:#92400e;margin-bottom:3px}.prep-notice-body p{font-size:11px;color:#78350f;line-height:1.45;margin:0}.leaderboard-subtitle{font-size:12px;font-weight:700;color:var(--text-muted)}.my-rank-banner{background:#fdf3e7;border:1px solid #F4A261;border-radius:var(--radius-sm);padding:8px 12px;font-size:13px;color:var(--text-dark);margin-bottom:12px;display:flex;justify-content:center;align-items:center;gap:6px}.my-rank-banner strong{color:var(--primary-coral);font-size:15px}.leaderboard-list-wrap{max-height:340px;overflow-y:auto;border:1px solid #EEDBC8;border-radius:var(--radius-sm);background:#fff;margin-bottom:16px;scrollbar-width:thin}.leaderboard-table{width:100%;border-collapse:collapse;font-size:12px;text-align:left}.leaderboard-table th{position:sticky;top:0;background:#f8f1e7;color:var(--text-muted);font-weight:800;padding:8px 10px;border-bottom:1px solid #E0CEBD;z-index:2}.leaderboard-table td{padding:8px 10px;border-bottom:1px solid #F4ECE1;vertical-align:middle}.leaderboard-table tr:hover{background:#fdf9f5}.leaderboard-table tr.is-me{background:#fff1eb;font-weight:800}.leaderboard-table tr.is-me td{border-bottom:1px solid #F8D5C8}.th-rank,.td-rank{width:40px;text-align:center;font-family:Outfit,sans-serif;font-weight:800}.rank-medal-1{color:#e5a100;font-size:14px}.rank-medal-2{color:#8f9fa9;font-size:14px}.rank-medal-3{color:#c47a46;font-size:14px}.td-cat{display:flex;align-items:center;gap:4px}.td-cat-img{width:22px;height:22px;object-fit:contain}.th-score,.td-score{text-align:right;font-family:Outfit,sans-serif;font-weight:800;color:var(--primary-coral)}@media(max-width:600px){html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden}.app-layout{width:100%;height:100%;padding:0;margin:0;gap:0;display:flex;justify-content:center;align-items:center}.game-wrapper{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.game-container{width:100%;height:100%;max-width:480px;max-height:800px;border:none;border-radius:0;box-shadow:none}}