.cf-wrap{flex-direction:column;align-items:center;max-width:440px;margin:0 auto;padding:10px 16px 0;display:flex}.cf-hud{background:var(--paper);border:var(--line);border-radius:var(--radius-sm);width:100%;box-shadow:var(--shadow-sm);justify-content:space-around;align-items:center;margin-bottom:12px;padding:10px 14px;display:flex}.cf-hud-item{flex-direction:column;align-items:center;min-width:60px;display:flex}.cf-label{color:var(--ink-soft);margin-bottom:2px;font-size:.78rem;font-weight:700}.cf-val{font-family:var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums;font-size:1.7rem;font-weight:700;line-height:1.1}.cf-time-item .cf-val{color:var(--coral)}.cf-time-item .cf-val.hurry{color:#ff3838;animation:.6s infinite alternate cfHurry}@keyframes cfHurry{0%{transform:scale(1)}to{transform:scale(1.15)}}.cf-level-item .cf-val{color:#2e86de}.cf-miss-item .cf-val{color:#ff6b6b}.cf-board-container{aspect-ratio:1;touch-action:manipulation;-webkit-user-select:none;user-select:none;width:100%;max-width:400px;position:relative}.cf-board{gap:var(--cf-gap,6px);background:var(--paper);border:var(--line);border-radius:var(--radius);width:100%;height:100%;box-shadow:var(--shadow);box-sizing:border-box;padding:8px;display:grid}.cf-tile{border-radius:var(--cf-radius,10px);cursor:pointer;touch-action:manipulation;box-sizing:border-box;border:none;outline:none;width:100%;height:100%;padding:0;transition:transform 50ms ease-out;position:relative}.cf-tile:active{transform:scale(.92)}.cf-tile.pop{animation:.15s ease-out cfPop}@keyframes cfPop{0%{transform:scale(.85)}to{transform:scale(1)}}.cf-tile.shake{animation:.3s ease-in-out cfShake}@keyframes cfShake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.cf-tile.highlight{z-index:5;animation:.6s infinite alternate cfPulse;box-shadow:0 0 0 4px #ff3838,0 0 16px #ff3838cc}@keyframes cfPulse{0%{transform:scale(.95)}to{transform:scale(1.08)}}.cf-penalty{font-family:var(--font-display);color:#fff;border:2px solid var(--ink);pointer-events:none;z-index:10;white-space:nowrap;background:#ff3838;border-radius:999px;padding:2px 8px;font-size:1.1rem;font-weight:800;animation:.7s forwards cfFloatUp;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 4px #0000004d}@keyframes cfFloatUp{0%{opacity:1;transform:translate(-50%,-30%)}to{opacity:0;transform:translate(-50%,-120%)}}.cf-overlay{border-radius:calc(var(--radius) - 4px);cursor:pointer;text-align:center;z-index:20;background:#fffffff0;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:20px;display:flex;position:absolute;inset:0}.cf-overlay-emoji{font-size:4rem;line-height:1;animation:1.2s ease-in-out infinite cfBounce}@keyframes cfBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.cf-overlay-title{font-family:var(--font-display);color:var(--ink);font-size:1.8rem;font-weight:800}.cf-overlay-sub{color:var(--ink-soft);max-width:260px;font-size:.95rem;font-weight:600;line-height:1.4}