:root{--color-rank-1: #ffd700;--color-rank-2: #c0c0c0;--color-rank-3: #cd7f32;--color-error: #e74c3c;--color-error-bg: rgba(231, 76, 60, .1);--color-text-secondary: #95a5a6;--color-primary: #5267a1;--color-primary-hover: #6b7fb5}body{margin:0;background:#1a1a2e;color:#e4e6eb;font-family:Inter,sans-serif;overflow:hidden;touch-action:manipulation;height:100vh;display:flex;flex-direction:column}#hud{position:absolute;top:10px;left:10px;z-index:5;font-size:1.2rem;font-weight:700;text-shadow:0 0 5px rgba(0,0,0,.7)}#menu{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:20;background:#1a1a2ef2;padding:20px;box-sizing:border-box}#menu h1{font-size:2.5rem;color:gold;margin-bottom:5px}#menu p{margin-bottom:25px;font-size:1rem}.diff-btn{padding:15px;margin:8px 0;font-size:1.1rem;cursor:pointer;border:2px solid #5267a1;border-radius:8px;width:80%;max-width:300px;color:#fff;transition:background .2s,transform .1s;box-shadow:0 4px #5267a1}.diff-btn:active{transform:translateY(2px);box-shadow:0 2px #5267a1}.easy{background:#2ecc71;box-shadow:0 4px #27ae60;border-color:#27ae60}.easy:active{box-shadow:0 2px #27ae60}.normal{background:#f1c40f;color:#333;box-shadow:0 4px #f39c12;border-color:#f39c12}.normal:active{box-shadow:0 2px #f39c12}.hard{background:#e74c3c;box-shadow:0 4px #c0392b;border-color:#c0392b}.hard:active{box-shadow:0 2px #c0392b}#last-score{margin-top:30px;padding:10px 20px;background:#ffffff1a;border-radius:5px;min-height:40px}#last-score:empty{display:none}#last-score h2{font-size:1.5rem;color:#3498db}.show-ranking-btn,.back-to-menu-btn{cursor:pointer;border:2px solid var(--color-primary);border-radius:8px;color:#fff;background:var(--color-primary);transition:background .2s,transform .1s;box-shadow:0 4px #3e5672}.show-ranking-btn:hover,.back-to-menu-btn:hover{background:var(--color-primary-hover)}.show-ranking-btn:active,.back-to-menu-btn:active{transform:translateY(2px);box-shadow:0 2px #3e5672}.show-ranking-btn{padding:15px;margin:20px 0 0;font-size:1.1rem;width:80%;max-width:300px}#ranking-screen{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:20;background:#1a1a2ef2;padding:20px;box-sizing:border-box}#ranking-screen.hidden{display:none}#ranking-screen h1{font-size:2rem;color:gold;margin-bottom:20px}.back-to-menu-btn{padding:12px 30px;margin-top:20px;font-size:1rem}#canvas-container{flex-grow:1;position:relative;z-index:1}canvas{width:100%;height:100%;display:block;background:#000}#controls{position:relative;z-index:1;height:40vh;min-height:200px;max-height:300px;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;padding:10px;background:#2c3e50;box-sizing:border-box}.ctrl-btn{background:#34495e;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:36px;color:#ecf0f1;-webkit-user-select:none;box-shadow:0 5px #2c3e50;transition:transform .05s}.ctrl-btn:active{background:#3e5672;transform:translateY(3px);box-shadow:0 2px #2c3e50}.btn-up{grid-column:2;grid-row:1}.btn-left{grid-column:1;grid-row:2}.btn-down{grid-column:2;grid-row:2}.btn-right{grid-column:3;grid-row:2}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;align-items:center;justify-content:center;z-index:100}.modal.hidden{display:none}.modal-content{background:#1a1a2e;border:2px solid #5267a1;border-radius:12px;padding:30px;max-width:400px;width:90%;box-shadow:0 8px 16px #00000080;text-align:center}.modal-content h2{color:gold;margin-bottom:15px;font-size:1.8rem}.modal-content p{font-size:1.2rem;margin-bottom:20px;color:#e4e6eb}.rank-message{font-size:1.3rem;font-weight:700;color:gold;margin-bottom:15px}.not-ranked{font-size:1.1rem;color:#95a5a6;margin-bottom:15px}.rank-message.hidden,.not-ranked.hidden,#registration-form.hidden,#submit-score-btn.hidden{display:none}.name-input-container{display:flex;flex-direction:column;align-items:stretch;margin-bottom:20px;text-align:left}.name-input-container label{font-size:1rem;margin-bottom:8px;color:#e4e6eb}.name-input-container input{padding:12px;font-size:1rem;border:2px solid #5267a1;border-radius:6px;background:#0f0f1e;color:#e4e6eb;outline:none;transition:border-color .2s}.name-input-container input:focus{border-color:#3498db}.error-text{color:#e74c3c;font-size:.9rem;margin-top:5px;min-height:1.2em}.modal-buttons{display:flex;gap:12px;justify-content:center}.modal-content .btn{padding:12px 24px;font-size:1rem;border:none;border-radius:8px;cursor:pointer;transition:background .2s,transform .1s;font-weight:700;box-shadow:0 4px #0000004d}.modal-content .btn:active{transform:translateY(2px);box-shadow:0 2px #0000004d}.submit-btn{background:#3498db;color:#fff}.submit-btn:hover{background:#2980b9}.skip-btn{background:#95a5a6;color:#fff}.skip-btn:hover{background:#7f8c8d}#ranking-section{margin-top:30px;width:100%;max-width:600px}#ranking-section h3{font-size:1.3rem;color:#3498db;margin-bottom:15px}.ranking-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:15px}.ranking-tab{padding:8px 16px;font-size:.9rem;border:2px solid #5267a1;border-radius:6px;background:transparent;color:#e4e6eb;cursor:pointer;transition:background .2s,border-color .2s}.ranking-tab:hover{background:#5267a14d}.ranking-tab.active{background:#5267a1;border-color:#6b7fb5}#ranking-loading,#ranking-empty{text-align:center;padding:20px;color:#95a5a6}#ranking-loading.hidden,#ranking-empty.hidden,#ranking-error.hidden{display:none}.ranking__error{text-align:center;padding:20px;color:var(--color-error);background:var(--color-error-bg);border-radius:6px;margin:10px 0}#ranking-list{background:#0000004d;border-radius:8px;overflow:hidden}.ranking-item{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.1);cursor:pointer;transition:background .2s}.ranking-item:hover{background:#ffffff1a}.ranking-item:last-child{border-bottom:none}.ranking-rank{width:32px;font-weight:700;color:var(--color-rank-1)}.ranking-rank.rank-2{color:var(--color-rank-2)}.ranking-rank.rank-3{color:var(--color-rank-3)}.ranking-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ranking-time{margin-left:12px;color:#3498db;font-weight:700}.ranking-date{margin-left:12px;color:var(--color-text-secondary);font-size:.85em;white-space:nowrap}#ranking-detail-modal .modal-content{max-width:350px}.detail-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1)}.detail-item:last-of-type{border-bottom:none}.detail-label{color:var(--color-text-secondary);font-size:.9rem}.detail-value{color:#e4e6eb;font-weight:700;text-align:right;word-break:break-word;max-width:60%}.detail-value.rank-1{color:var(--color-rank-1)}.detail-value.rank-2{color:var(--color-rank-2)}.detail-value.rank-3{color:var(--color-rank-3)}.detail-close-btn{margin-top:20px;padding:12px 24px;font-size:1rem;border:none;border-radius:8px;cursor:pointer;background:var(--color-primary);color:#fff;font-weight:700;box-shadow:0 4px #0000004d;transition:background .2s,transform .1s;width:100%}.detail-close-btn:hover{background:var(--color-primary-hover)}.detail-close-btn:active{transform:translateY(2px);box-shadow:0 2px #0000004d}