@font-face{font-family:matrixtype;src:url(/matrixtype.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}:root{--header-h: 56px;--bg: #0f1115;--bg-elev-1: #151923;--bg-elev-2: #1b2130;--surface: #0f1115;--text: #e7eaf0;--text-dim: #9aa3b2;--primary: #7c8cfb;--primary-600: #6676f6;--accent: #22d3ee;--border: #263043;--shadow-md: 0 8px 24px rgba(0, 0, 0, .35);--radius: 12px;--key-h: 26px;--side-col-w: 60px;--board-frame-extra-w: 26px;--col-gap: 20px}@media (prefers-color-scheme: light){:root{--header-h: 56px;--bg: #f7f8fb;--bg-elev-1: #ffffff;--bg-elev-2: #f2f4f8;--surface: #ffffff;--text: #1a1f2c;--text-dim: #5b6472;--primary: #4f46e5;--primary-600: #4338ca;--accent: #0ea5e9;--border: #e5e7eb;--shadow-md: 0 8px 24px rgba(0, 0, 0, .08)}}*{box-sizing:border-box}html,body{min-height:100%}html,body{overflow-x:hidden;background:radial-gradient(1200px 600px at 10% 0%,rgba(124,140,251,.14),transparent 60%),radial-gradient(1000px 500px at 90% 0%,rgba(34,211,238,.1),transparent 60%),var(--bg)}body{margin:0;padding:0;color:var(--text);font:400 16px/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}:focus-visible{outline:2px solid color-mix(in oklab,var(--primary) 70%,white);outline-offset:2px;border-radius:6px}.site-header{position:static;inset:unset;height:auto;z-index:10;background:color-mix(in oklab,var(--bg-elev-1) 70%,transparent);border-bottom:1px solid var(--border)}.header-inner{width:min(calc((2 * var(--side-col-w)) + (2 * var(--col-gap)) + var(--board-frame-extra-w) + ((100vh - var(--header-h) - 100px) / 2)),calc(100vw - max(16px,env(safe-area-inset-left)) - max(16px,env(safe-area-inset-right))),1200px);margin:0 auto;padding:10px 2px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.logo{width:24px;height:24px;display:grid;place-items:center;border-radius:6px;background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:var(--shadow-md)}.brand-text .title{font-weight:700;letter-spacing:.2px;color:var(--primary)}.header-actions{display:flex;align-items:center;gap:8px}.chip{display:inline-flex;align-items:center;justify-content:center;gap:0;width:28px;height:28px;padding:0;border-radius:6px;background:var(--bg-elev-2);color:var(--text);border:1px solid var(--border);text-decoration:none;font-size:12px;cursor:pointer;transition:all .2s ease}.chip:hover{background:var(--primary);color:#fff;border-color:var(--primary)}.app.shell{max-width:1200px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(48px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:grid;grid-template-columns:60px auto 60px;gap:var(--col-gap);align-items:start;justify-content:center}.hold-column{display:flex;flex-direction:column;gap:16px;justify-content:flex-start;align-items:flex-end;width:60px;min-width:60px;padding-top:60px}.board-column{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:fit-content;gap:16px}.preview-column{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;position:relative;width:60px;min-width:60px;gap:16px;padding-top:60px}.preview-stats-row{display:flex;flex-direction:row;gap:16px;align-items:flex-start;width:60px}.stats-panel-container{flex:0 0 auto;width:150px;position:absolute;left:76px;top:60px}.panel{background:linear-gradient(180deg,color-mix(in oklab,var(--bg-elev-1) 92%,transparent),var(--bg-elev-2));border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-md)}.mobile-only{display:none}.board-frame{display:flex;justify-content:center;align-items:center;width:fit-content}game-board canvas{display:block;aspect-ratio:10 / 22;height:min(calc(100vh - var(--header-h) - 100px),calc((100vw - 200px)*2.2));width:auto;image-rendering:pixelated}#game-canvas{display:block;aspect-ratio:10 / 22;height:min(calc(100vh - var(--header-h) - 100px),calc((100vw - 200px)*2.2));width:auto;image-rendering:pixelated}.board-frame{padding:12px;position:relative;display:inline-block}.effects-overlay{position:absolute;inset:0;pointer-events:none}.fx-item{position:absolute}.fx-floating-text{will-change:transform,opacity;transform-origin:bottom right;animation:floatUpFade var(--fx-dur, 1.2s) ease-out forwards;text-shadow:0 2px 8px rgba(0,0,0,.4)}.hold-section{text-align:center;display:inline-block;margin:0 auto}.hold-title{margin:0 0 8px;font-size:12px;font-weight:500;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}.hold-container{display:inline-flex;justify-content:center;margin:0 auto}.hold-canvas{display:block;background:#000}.preview-title{margin:0 0 12px;font-size:12px;font-weight:500;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;text-align:center}.preview-container{display:inline-flex;flex-direction:column;align-items:center;gap:2px}.preview-slot{display:inline-flex;align-items:center;gap:8px;margin:0 auto}.preview-canvas{display:block;background:transparent}.preview-stats-row{display:flex;gap:1rem;align-items:flex-start;width:100%}piece-preview{flex:0 0 auto;max-width:120px}.stats-panel-container{flex:0 0 auto;width:150px}.stats-panel-container.panel{background:#0003;border:none;border-radius:0}.stat-section{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.stat-section:last-child{margin-bottom:0}.stat-section h4{margin:0;font-size:12px;font-weight:500;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}.stat-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;line-height:1.4}.stat-label{color:var(--text-dim);flex:1}.stat-value{color:var(--text);font-weight:500;font-family:JetBrains Mono,monospace;text-align:right}.stat-value.success{color:#10b981}.stat-value.error{color:#ef4444}.stat-value.excellent{color:#10b981}.stat-value.good{color:var(--accent)}.stat-value.average{color:#f59e0b}.stat-value.poor{color:#ef4444}.fault-breakdown{margin-left:8px;border-left:2px solid var(--border);padding-left:8px}@media (max-width: 652px){.stats-panel-container{display:none}}.touch-controls-overlay{position:fixed;inset:0;z-index:1000;pointer-events:none;display:none}.touch-controls-overlay.scoped{position:absolute;inset:0;z-index:20}.touch-controls-overlay.active{display:block}.touch-zones{position:absolute;inset:0;display:grid;grid-template-areas:"rotate-ccw rotate-cw" "move-left move-right" "soft-drop soft-drop" "hold hard-drop";grid-template-rows:1fr 2fr 1fr .8fr;grid-template-columns:1fr 1fr;gap:4px;padding:8px;pointer-events:none}.touch-zone{display:flex;align-items:center;justify-content:center;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:12px;transition:all .1s ease;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;pointer-events:auto}.touch-zone:active,.touch-zone.active{background:#7c8cfb33;border-color:var(--primary);transform:scale(.95)}.touch-zone.rotate-ccw{grid-area:rotate-ccw}.touch-zone.rotate-cw{grid-area:rotate-cw}.touch-zone.move-left{grid-area:move-left}.touch-zone.move-right{grid-area:move-right}.touch-zone.soft-drop{grid-area:soft-drop}.touch-zone.hold{grid-area:hold}.touch-zone.hard-drop{grid-area:hard-drop}.touch-label{font-size:24px;font-weight:700;color:var(--text);opacity:.7;pointer-events:none}.touch-zone.active .touch-label{opacity:1;color:var(--primary)}.touch-buttons{position:absolute;bottom:0;left:0;right:0;height:80px;display:flex;gap:8px;padding:12px;background:var(--bg-elev-1);border-top:1px solid var(--border);pointer-events:auto}.touch-button{flex:1;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:14px;font-weight:500;transition:all .1s ease;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.touch-button:active{background:var(--primary);color:#fff;transform:scale(.95)}.touch-button.hold-btn{background:var(--accent);color:#fff}.touch-button.hard-drop-btn{background:var(--primary);color:#fff}@media (hover: hover) and (pointer: fine){.touch-controls-overlay{display:none!important}}@media (hover: none) and (pointer: coarse){.touch-controls-overlay{display:block}}body.touch-active,body.touch-active .app.shell{padding-bottom:80px}.settings-overlay{position:fixed;inset:0;background:#000000b3;z-index:2000;display:flex;align-items:flex-start;justify-content:center;backdrop-filter:blur(4px);padding-top:10vh}.settings-modal{background:var(--bg-elev-1);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);width:min(90vw,600px);max-height:80vh;display:flex;flex-direction:column}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}.settings-header h2{margin:0;font-size:20px;font-weight:600;color:var(--text)}.close-button{background:none;border:none;font-size:24px;color:var(--text-dim);cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.close-button:hover{background:var(--bg-elev-2);color:var(--text)}.settings-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.settings-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--bg-elev-2)}.tab-button{flex:1;padding:12px 16px;background:none;border:none;color:var(--text-dim);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;border-bottom:2px solid transparent}.tab-button.active{color:var(--primary);border-bottom-color:var(--primary);background:var(--bg-elev-1)}.tab-button:hover:not(.active){color:var(--text);background:var(--bg-elev-1)}.settings-panels{flex:1;overflow-y:auto;padding:0}.settings-panel{display:none;padding:20px}.settings-panel.active{display:block}.setting-group{margin-bottom:20px}.setting-group label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;color:var(--text)}.setting-group input[type=range]{width:100%;height:6px;background:var(--bg-elev-2);border-radius:3px;outline:none;appearance:none;-webkit-appearance:none}.setting-group input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;background:var(--primary);border-radius:50%;cursor:pointer}.setting-group input[type=range]::-moz-range-thumb{width:18px;height:18px;background:var(--primary);border-radius:50%;border:none;cursor:pointer}.setting-group input[type=checkbox]{margin-right:8px;accent-color:var(--primary)}.setting-group select{width:100%;padding:8px 12px;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:14px}.value-display{float:right;font-size:12px;color:var(--text-dim);font-family:JetBrains Mono,monospace;background:var(--bg-elev-2);padding:2px 6px;border-radius:3px}.settings-footer{display:flex;justify-content:space-between;padding:16px 20px;border-top:1px solid var(--border);gap:12px}.button{padding:8px 16px;border-radius:6px;border:1px solid var(--border);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.button.primary{background:var(--primary);color:#fff;border-color:var(--primary)}.button.primary:hover{background:var(--primary-600);border-color:var(--primary-600)}.button.secondary{background:var(--bg-elev-2);color:var(--text)}.button.secondary:hover{background:var(--bg-elev-1)}.keybinds-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.keybind-row{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:linear-gradient(180deg,color-mix(in oklab,var(--bg-elev-1) 92%,transparent),var(--bg-elev-2))}.keybind-label{font-weight:200;color:var(--text)}.keybind-button{appearance:none;-webkit-appearance:none;border:1px solid var(--border);background:var(--bg);color:var(--primary);border-radius:999px;padding:6px 12px;font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;cursor:pointer;transition:all .15s ease}.keybind-button:hover{transform:translateY(-1px);border-color:var(--primary)}.keybind-button.listening{outline:2px solid color-mix(in oklab,var(--primary) 70%,white)}.keybind-hint{font-size:12px;color:var(--text-dim)}.keybind-cancel{appearance:none;-webkit-appearance:none;background:transparent;border:1px solid var(--border);color:var(--text-dim);padding:6px 10px;border-radius:8px;cursor:pointer}.keybind-cancel:hover{color:var(--text);background:var(--bg-elev-1)}keybinding-modal{display:none}keybinding-modal[visible]{display:block}@keyframes floatUpFade{0%{transform:translateY(0) scale(var(--fx-scale-from, 1));opacity:1}to{transform:translateY(calc(-1 * var(--fx-drift-y, 48px))) scale(var(--fx-scale-to, .9));opacity:0}}.finesse-feedback-overlay{position:fixed;top:0;left:50%;transform:translate(-50%) translateY(-100%);z-index:9999;background:#780000;color:#fff;padding:12px 20px;border-bottom:2px solid color-mix(in oklab,var(--primary) 65%,black);border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);box-shadow:0 4px 12px #0000004d;font-weight:600;font-size:16px;text-align:center;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);width:fit-content;max-width:95vw;white-space:nowrap;transition:transform .3s ease-out,opacity .3s ease-out,visibility .3s ease-out;opacity:0;visibility:hidden}.finesse-feedback-overlay.show{transform:translate(-50%) translateY(0);opacity:1;visibility:visible}.finesse-feedback-overlay.hide{opacity:0;visibility:visible;transition:transform .3s ease-out,opacity 1s ease-out}.finesse-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--bg-elev-2);border:1px solid var(--border);color:var(--text);font-size:16px;font-weight:600;transition:all .2s ease;user-select:none;-webkit-user-select:none}.finesse-icon:hover{background:var(--bg-elev-1);border-color:var(--primary);color:var(--primary);transform:scale(1.05)}.finesse-feedback-overlay .finesse-icon{background:#ffffff26;border:1px solid rgba(255,255,255,.3);color:#fff;width:36px;height:36px;font-size:18px}.finesse-feedback-overlay .finesse-icon:hover{background:#ffffff40;border-color:#ffffff80;color:#fff;transform:scale(1.05)}game-board{display:block}game-board canvas{display:block}piece-hold{display:block;background:transparent;border:none}piece-preview{display:block;background:transparent;border:none}stats-panel{display:block}finesse-overlay{position:fixed;top:0;left:0;right:0;pointer-events:none;z-index:9999}#finessimo-logo{position:fixed;top:0;left:50%;transform:translate(-50%);color:#333;height:90px;display:flex;align-items:flex-end;justify-content:center;white-space:nowrap;font-family:matrixtype,Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:57px;line-height:1;letter-spacing:-.13em;font-kerning:normal}tabbed-panel{display:block}.tabbed-panel{width:100%;height:100%;display:flex;flex-direction:column}.tab-header{display:flex;border-bottom:1px solid var(--border);margin-bottom:12px}.tab-button{flex:1;padding:8px 12px;background:transparent;border:none;color:var(--text-dim);font-size:13px;font-weight:500;cursor:pointer;transition:color .15s ease;border-bottom:2px solid transparent}.tab-button:hover{color:var(--text)}.tab-button.active{color:var(--primary);border-bottom-color:var(--primary)}.tab-content{flex:1;min-height:0}settings-view{display:block}.settings-view{display:flex;flex-direction:column;gap:16px;height:100%}.settings-section{display:flex;flex-direction:column;gap:8px}.settings-section-title{margin:0 0 4px;font-size:12px;font-weight:500;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);padding-bottom:4px}.settings-row{display:flex;align-items:center;gap:8px}.settings-row .settings-checkbox{flex:none;min-width:fit-content}.settings-row .settings-slider{flex:1;min-width:0}.settings-buttons{display:flex;flex-direction:column;gap:6px;margin-top:8px}settings-checkbox{display:block}.settings-checkbox{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 0;user-select:none}.settings-checkbox input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.checkbox-indicator{width:12px;height:12px;border:1px solid var(--border);border-radius:3px;display:flex;align-items:center;justify-content:center;transition:all .15s ease;background:transparent}.settings-checkbox.checked .checkbox-indicator{background:var(--primary);border-color:var(--primary)}.checkbox-label{font-size:11px;color:var(--text-dim);flex:1;line-height:1.4}settings-dropdown{display:block}.settings-dropdown{position:relative;width:100%}.dropdown-trigger{width:100%;padding:6px 8px;background:var(--bg-elev-1);border:none;border-radius:4px;color:var(--text);font-size:11px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:border-color .15s ease}.dropdown-trigger:hover{background:var(--bg-elev-2)}.dropdown-trigger:disabled{opacity:.5;cursor:not-allowed}.dropdown-arrow{font-size:10px;color:var(--text-dim);transition:transform .15s ease}.settings-dropdown.open .dropdown-arrow{transform:rotate(180deg)}.dropdown-menu{position:absolute;top:100%;left:0;right:0;background:var(--bg-elev-2);border:1px solid var(--border);border-radius:4px;box-shadow:var(--shadow-md);z-index:100;max-height:150px;overflow-y:auto}.dropdown-option{width:100%;padding:6px 8px;background:transparent;border:none;color:var(--text);font-size:11px;cursor:pointer;text-align:left;transition:background-color .15s ease}.dropdown-option:hover{background:var(--bg-elev-1)}.dropdown-option.selected{background:var(--primary);color:#fff}settings-slider{display:block}.settings-slider{display:flex;align-items:center;gap:8px;padding:2px 0 0;min-width:0}.slider-label{font-size:11px;color:var(--text-dim);min-width:60px;line-height:1.4}.slider-label:empty{display:none}.settings-slider.no-label{justify-content:flex-end}.settings-slider.no-label .slider-label{display:none}.slider-value-container{flex:1;display:flex;justify-content:flex-end;min-width:0;overflow:hidden}.slider-value{font-size:11px;color:var(--text);font-weight:500;cursor:pointer;padding:2px 4px;border-radius:3px;transition:background-color .15s ease;user-select:none;font-family:JetBrains Mono,Fira Code,monospace;white-space:nowrap}.slider-value:hover{background:var(--bg-elev-1)}.settings-slider.dragging .slider-value{background:var(--primary);color:#fff;cursor:grabbing}.slider-input{width:60px;padding:2px 4px;background:var(--bg-elev-1);border:1px solid var(--primary);border-radius:3px;color:var(--text);font-size:11px;font-family:JetBrains Mono,Fira Code,monospace;text-align:right}.slider-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px #7c8cfb33}settings-button{display:block}.settings-button{width:100%;padding:6px 12px;background:var(--bg-elev-1);border:1px solid var(--border);border-radius:4px;color:var(--text);font-size:11px;cursor:pointer;transition:all .15s ease}.settings-button:hover{background:var(--bg-elev-2);border-color:var(--primary)}.settings-button.primary{background:var(--primary);border-color:var(--primary);color:#fff}.settings-button.primary:hover{background:var(--primary-600);border-color:var(--primary-600)}.settings-button.danger{background:transparent;border-color:#ef4444;color:#ef4444}.settings-button.danger:hover{background:#ef4444;color:#fff}.settings-button:disabled{opacity:.5;cursor:not-allowed}.settings-button:disabled:hover{background:var(--bg-elev-1);border-color:var(--border);color:var(--text)}@media (max-width: 1100px){:root{--col-gap: 12px}.app.shell{grid-template-columns:60px auto 60px;gap:var(--col-gap);padding:12px}game-board canvas,#game-canvas{height:min(calc(100vh - var(--header-h) - 100px),calc((100vw - 176px)*2.2))}}@media (max-width: 760px){.keybinds-list{grid-template-columns:1fr}}@media (max-width: 768px){.preview-stats-row{flex-direction:column;gap:.5rem}.stats-panel-container{flex:none;width:100%}}@media (max-width: 680px){:root{--col-gap: 8px}.header-inner{padding:0;width:100%}.brand-text .title{font-size:18px}.panel{padding:12px;border-radius:10px}.controls-grid{gap:6px 8px}.app.shell{grid-template-columns:60px auto 60px;gap:8px;padding:8px}game-board canvas,#game-canvas{height:min(calc(100vh - var(--header-h) - 100px),calc((100vw - 160px)*2.2))}.touch-buttons{background:transparent;border-top:0;height:0;padding:0}.touch-zones{bottom:0}.touch-button{position:absolute;bottom:8px;width:48px;height:48px;border-radius:999px;padding:0;display:grid;place-items:center}.touch-button.hold-btn{left:8px}.touch-button.hard-drop-btn{right:8px}}@media (max-width: 680px){.preview-container{gap:2px}}@media (max-width: 680px){.settings-modal{width:95vw;max-height:90vh;margin:0;border-radius:8px}.settings-tabs{flex-wrap:wrap}.tab-button{min-width:33.333%;flex:none}.settings-panel{padding:16px}.settings-footer{flex-direction:column;gap:8px}.button{width:100%}}