*{box-sizing:border-box}.page{max-width:600px;margin:0 auto;padding:20px}.header{justify-content:center;align-items:flex-start;margin-bottom:20px;display:flex}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.mistakes-section{text-align:center}.mistakes-section label{color:var(--ink);margin-bottom:8px;font-size:18px;display:block}.mistakes-box{background:var(--bad-soft);color:var(--bad);font-family:var(--font-digits);border-radius:8px;min-width:60px;padding:8px 20px;font-size:28px;font-weight:700;display:inline-block}.skip-section{background:var(--sheet);box-shadow:var(--shadow);border-radius:10px;margin-bottom:20px;padding:15px}.skip-section label{color:var(--dim);margin-right:10px;font-size:14px}.skip-select{background:var(--sunken);color:var(--ink);font-size:14px;font:inherit;border:0;border-radius:8px;margin-right:10px;padding:8px 12px;font-size:14px}.btn-skip{padding:8px 16px;font-size:14px}.skip-info{color:var(--dim);margin-top:8px;font-size:12px}.pi-prefix{font-size:22px;font-weight:700;font-family:var(--font-digits);color:var(--dim);margin-bottom:6px}.grid-container{background:var(--sheet);box-shadow:var(--shadow);border-radius:10px;max-height:400px;margin-bottom:20px;padding:20px;overflow-y:auto}.grid{flex-direction:column;gap:4px;display:flex}.grid-row{grid-template-columns:repeat(10,1fr);gap:4px;display:grid}.grid-row.with-label{grid-template-columns:35px repeat(10,1fr)}.cell{aspect-ratio:1;font-family:var(--font-digits);background:var(--sunken);color:var(--ink);border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;font-size:18px;font-weight:500;display:flex}.cell.filled{background:var(--sunken)}.cell.current{background:var(--hi);color:var(--hi-ink);box-shadow:inset 0 0 0 2px var(--pen)}.cell.correct{background:var(--ok-soft);color:var(--ok)}.cell.prefix{background:var(--dim);color:var(--sheet)}.row-label{font-family:var(--font-digits);color:var(--dim);text-align:right;justify-content:flex-end;align-items:center;padding-right:8px;font-size:12px;font-weight:500;display:flex}.options-section{justify-content:center;margin-bottom:15px;display:flex}.checkbox-label{cursor:pointer;color:var(--ink);align-items:center;gap:5px;font-size:14px;display:inline-flex}.checkbox-label input{cursor:pointer;width:16px;height:16px}.buttons{justify-content:center;gap:10px;margin-top:20px;display:flex}button{font-family:inherit}.buttons .btn,.game-over .btn{padding:10px 24px;font-size:16px}.game-over{text-align:center;margin-bottom:20px}.game-over h2{margin-bottom:10px}.game-over.success h2{color:var(--ok)}.game-over.failure h2{color:var(--bad)}.name-input{background:var(--sunken);color:var(--ink);font-size:16px;font:inherit;border:0;border-radius:8px;width:180px;margin-right:10px;padding:8px 12px;font-size:16px}.hidden{display:none}.leaderboard{margin-top:30px}.leaderboard h3{text-align:center;margin-bottom:15px}.leaderboard table{border-collapse:collapse;width:100%;font-size:14px}.leaderboard th,.leaderboard td{text-align:left;border-bottom:1px solid var(--rule);padding:10px}.leaderboard td{font-family:var(--font-digits)}.leaderboard th{color:var(--dim);font-weight:600}.hint{text-align:center;color:var(--dim);margin-top:10px;font-size:14px}.hint.error{color:var(--bad)}.keypad-dock{display:none}@media (hover:none) and (pointer:coarse){html body{padding-bottom:calc(290px + env(safe-area-inset-bottom))}.keypad-dock{max-width:600px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--sheet);box-shadow:0 -1px 0 var(--rule);z-index:10;margin:0 auto;transition:transform .2s,visibility .2s;display:block;position:fixed;bottom:0;left:0;right:0}.keypad-dock.keypad-away{visibility:hidden;transform:translateY(110%)}.keypad-dock .hint{margin:0 0 8px}.keypad{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}body.game-ended .keypad-dock{display:none}.keypad button{font-size:24px;font-family:var(--font-digits);background:var(--sunken);color:var(--ink);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;border:0;border-radius:8px;padding:14px 0;font-weight:600}.keypad button:active{background:var(--pen-soft)}.keypad .keypad-zero{grid-column:2}}.cell[class*=heat-]{color:var(--on-heat)}.cell.heat-4,.cell.heat-5{color:var(--on-heat-strong)}.cell.heat-0{background:#22c55e;border-color:#16a34a}.cell.heat-1{background:#84cc16;border-color:#65a30d}.cell.heat-2{background:#eab308;border-color:#ca8a04}.cell.heat-3{background:#f97316;border-color:#ea580c}.cell.heat-4{background:#dc2626;border-color:#b91c1c}.cell.heat-5{background:#b91c1c;border-color:#991b1b}.heatmap-legend{background:var(--sheet);box-shadow:var(--shadow);border-radius:10px;flex-direction:column;align-items:center;gap:10px;margin-top:15px;padding:15px;display:flex}.heatmap-legend-title{color:var(--ink);font-size:14px;font-weight:600}.heatmap-filters{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.legend-item{cursor:pointer;border-radius:4px;align-items:center;gap:4px;padding:4px 8px;font-size:12px;transition:background .2s;display:flex}.legend-item:hover{background:var(--sunken)}.legend-item input[type=checkbox]{cursor:pointer;width:14px;height:14px}.legend-color{border:1px solid var(--dim);border-radius:3px;width:16px;height:16px}.cell.heat-hidden{background:var(--rule);color:var(--dim)}body.keypad-on .tab-bar{display:none}