:root{--panel:#172033;--ink:#f8fafc;--muted:#aab6ca;--line:#fff;--gap:clamp(2px,.7vw,8px);--bell-h:clamp(82px,17dvh,130px)}
[hidden]{display:none!important}
#easyDialog{width:min(720px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;background:#172033;color:#f8fafc;border:1px solid #ffffff50;border-radius:18px;padding:18px;touch-action:manipulation}
#easyDialog::backdrop{background:#020617d9}
.easy-settings{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center}
#easyDialog input,#easyDialog select{width:100%;min-width:0;min-height:42px;background:#0b1020;color:white;border:1px solid #ffffff60;border-radius:8px;padding:8px;font-size:16px}
#easyDialog button{min-height:44px;background:#334155;color:white;border:1px solid #ffffff50;border-radius:10px;padding:8px 12px;margin:4px 0;font-weight:700}
#easyDialog button:disabled{opacity:.5}
#easyDialog p{font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.easy-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.easy-notes{display:flex;flex-wrap:wrap;gap:4px;min-height:32px}
.easy-notes span{background:#334155;padding:4px 7px;border-radius:5px}
@media(max-width:440px){.easy-comparison{grid-template-columns:1fr}}
@media(max-width:600px){.easy-settings{grid-template-columns:1fr}}
#importDialog{width:min(660px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;background:#172033;color:#f8fafc;border:1px solid #ffffff50;border-radius:18px;padding:18px;touch-action:manipulation}
#importDialog::backdrop{background:#020617d9}
#midiFields{display:grid;gap:10px}
#importDialog input,#importDialog select{width:100%;min-width:0;min-height:42px;background:#0b1020;color:white;border:1px solid #ffffff60;border-radius:8px;padding:8px;font-size:16px}
#importDialog button{min-height:44px;background:#334155;color:white;border:1px solid #ffffff50;border-radius:10px;padding:8px 12px;margin:4px 0;font-weight:700}
#importDialog button:disabled{opacity:.5}
.import-actions{display:flex;flex-wrap:wrap;gap:8px}
#libraryTools summary{cursor:pointer;padding:10px 0;font-weight:800}
#libraryTools p,#midiReport{line-height:1.5;font-size:14px;overflow-wrap:anywhere}
    *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
    html,body{width:100%;max-width:100%;height:100%;height:100dvh;margin:0;overflow:hidden;background:#0b1020;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;touch-action:manipulation}
    button,select{font:inherit}
    #app{width:100%;max-width:100%;height:100%;height:100dvh;min-height:0;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);position:relative}
    .top{z-index:10;min-width:0;display:flex;gap:8px;align-items:center;padding:max(7px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 7px max(8px,env(safe-area-inset-left));background:linear-gradient(180deg,#172033,#111827);box-shadow:0 2px 12px #0008}
    .top>*{min-width:0}
    .brand{font-weight:900;white-space:nowrap;font-size:clamp(15px,2vw,22px)}
    .top select,.top button{min-height:42px;border:0;border-radius:12px;color:white;background:#2b3851;padding:0 12px;font-weight:750}
    .top select{min-width:0;max-width:280px;flex:1}
    .top button:active{transform:scale(.97)}
    #play{background:#22c55e;min-width:96px;color:#07170c}
    #play.running{background:#f59e0b;color:#211300}
    #speed{min-width:67px}
    #sound.on{background:#2563eb}
    #game{position:relative;width:100%;min-width:0;min-height:0;overflow:hidden;touch-action:none;background:radial-gradient(circle at 50% -20%,#243452 0,#111827 48%,#070b14 100%)}
    #lanes{position:absolute;inset:0;width:100%;min-width:0;overflow:hidden;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--gap);padding:0 max(3px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(3px,env(safe-area-inset-left))}
    .lane{min-width:0;position:relative;overflow:hidden;border-left:1px solid #ffffff16;border-right:1px solid #0004;background:linear-gradient(180deg,#ffffff08,#ffffff02)}
    .note{position:absolute;z-index:2;left:8%;width:84%;min-height:16px;border-radius:12px 12px 7px 7px;background:var(--c);border:3px solid color-mix(in srgb,var(--c),white 34%);box-shadow:0 0 18px color-mix(in srgb,var(--c),transparent 35%),inset 0 -5px 0 #0002;display:grid;place-items:center;color:#101522;font-weight:1000;font-size:clamp(14px,3.5vh,28px);will-change:transform}
    #strike{position:absolute;z-index:3;left:0;right:0;bottom:var(--bell-h);height:5px;background:#fff;border-radius:5px;box-shadow:0 0 16px #fff,0 0 28px #67e8f9;pointer-events:none}
    #strike:before{content:"NACIŚNIJ";position:absolute;right:8px;bottom:7px;font-size:10px;letter-spacing:1px;font-weight:900;color:#dbeafe;text-shadow:0 2px 3px #000}
    .bells{position:absolute;z-index:4;left:0;right:0;bottom:0;width:100%;min-width:0;height:var(--bell-h);overflow:hidden;touch-action:none;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--gap);padding:6px max(3px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(3px,env(safe-area-inset-left));background:#0a0f1bd9;backdrop-filter:blur(5px)}
    .bell{min-width:0;padding:2px;border:0;border-radius:14px 14px 22px 22px;touch-action:none;user-select:none;-webkit-user-select:none;background:var(--c);color:#111827;box-shadow:inset 0 -9px 0 #0002,inset 0 5px 0 #fff5,0 4px 8px #0008;font-weight:1000;font-size:clamp(15px,3.8vw,31px);line-height:1;position:relative;overflow:hidden}
    .bell small{display:block;font-size:.48em;margin-top:5px;opacity:.7}
    .bell:active,.bell.hit,.bell.keyboard-active{transform:translateY(4px) scale(.97);filter:brightness(1.35);box-shadow:0 0 24px var(--c),inset 0 -3px 0 #0002}
    #message{position:absolute;z-index:7;inset:0;display:grid;place-items:center;pointer-events:none;text-align:center;padding:20px}
    #message .card{min-width:0;max-width:min(620px,100%);padding:18px 26px;border-radius:22px;background:#09101bd9;box-shadow:0 12px 45px #000a;border:1px solid #ffffff20;font-weight:900;font-size:clamp(21px,5vw,44px);text-shadow:0 3px 3px #000}
    #message small{display:block;margin-top:9px;color:#cbd5e1;font-size:.45em;font-weight:650}
    #countdown{position:absolute;z-index:8;inset:0;display:none;place-items:center;font-size:min(32vw,190px);font-weight:1000;text-shadow:0 8px 18px #000;pointer-events:none}
    .hide{display:none!important}
    #more{position:relative}
    #tools{position:absolute;display:none;right:max(6px,env(safe-area-inset-right));top:58px;z-index:20;background:#172033;border:1px solid #ffffff22;border-radius:16px;padding:8px;box-shadow:0 15px 40px #000b;width:min(350px,calc(100vw - 12px));max-height:calc(100dvh - 70px - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
    #tools.open{display:grid;gap:7px}
    #tools button{width:100%;text-align:left}
    #practiceTools summary{padding:12px 6px;cursor:pointer;font-weight:850;color:#fde68a}
    .practice-settings{display:grid;gap:12px;padding:3px}
    .practice-settings fieldset{min-width:0;margin:0;padding:10px;border:1px solid #ffffff30;border-radius:12px;display:grid;gap:8px}
    .instrument-picker{min-width:0;margin:8px 0 4px;padding:8px;border:1px solid #ffffff30;border-radius:12px;display:grid;gap:6px}
    .instrument-picker legend{font-size:14px;font-weight:850;padding:0 4px;color:#fde68a}
    .instrument-picker label{font-size:12px;color:#cbd5e1}
    .instrument-picker select{width:100%;max-width:none}
    .practice-settings legend{font-size:15px;font-weight:850;padding:0 4px}
    .practice-settings label,.practice-settings output,.practice-settings p{font-size:13px}
    .practice-settings select{width:100%;max-width:none}
    .practice-settings input[type=range]{width:100%;min-width:0;margin:0;min-height:32px;accent-color:#38bdf8;touch-action:pan-y}
    .practice-settings .check-row{display:flex;gap:9px;align-items:center;min-height:36px;font-weight:750;cursor:pointer}
    .check-row input{width:20px;height:20px;flex:0 0 20px;accent-color:#22c55e}
    .loop-buttons{display:flex;gap:6px}
    #tools .loop-buttons button{min-width:0;font-size:12px;padding:6px;text-align:center;white-space:normal}
    .practice-settings p{margin:0;line-height:1.4}
    .practice-description{color:#cbd5e1}
    #practiceFeedback{color:#fde68a}
    #practiceFeedback:empty{display:none}
    #practiceHint{position:absolute;z-index:6;top:10px;left:50%;transform:translateX(-50%);max-width:calc(100% - 20px);padding:8px 14px;border-radius:12px;background:#09101be8;color:#fde68a;font-size:clamp(13px,2.5vw,20px);font-weight:850;text-align:center;pointer-events:none}
    .note.waiting{outline:3px solid white;outline-offset:-3px;filter:brightness(1.15)}
    .bell.expected{outline:3px solid white;outline-offset:-5px}
    #tools button:disabled,#tools input:disabled{opacity:.5}
    .modal{position:fixed;z-index:50;inset:0;display:none;place-items:center;padding:12px;background:#020617d9;backdrop-filter:blur(7px);touch-action:manipulation}
    .modal.open{display:grid}
    .modal-card{width:min(620px,100%);max-height:calc(100dvh - 24px);overflow:auto;padding:18px;border-radius:22px;background:#172033;border:1px solid #ffffff25;box-shadow:0 20px 60px #000c}
    .modal-card h2{margin:0 0 4px;font-size:clamp(20px,5vw,29px)}
    .modal-card p{margin:0 0 14px;color:#cbd5e1;font-size:14px}
    .color-rows{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
    .color-row{display:grid;grid-template-columns:1fr;gap:6px;text-align:center;font-weight:900;background:#0b1020;padding:8px;border-radius:13px}
    .color-row input{display:block;width:100%;height:46px;padding:2px;border:2px solid #ffffff70;border-radius:10px;background:transparent;cursor:pointer}
    .modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:15px}
    .modal-actions button{min-height:42px;border:0;border-radius:11px;padding:0 14px;background:#334155;color:white;font-weight:850}
    #colorClose{background:#22c55e;color:#07170c}
    @media(max-width:700px){.brand{display:none}.top{gap:5px}.top button,.top select{padding:0 9px;min-height:40px}.optional{display:none}#play{min-width:82px}}
    @media(orientation:portrait){:root{--bell-h:clamp(78px,14dvh,118px)}#message .rotate:after{content:"\A Najwygodniej obrócić telefon poziomo ↻";white-space:pre-wrap;color:#fde68a}}
    @media(orientation:landscape) and (max-height:600px){
      :root{--bell-h:clamp(62px,18dvh,78px)}
      .top{gap:4px;padding:max(2px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) 2px max(6px,env(safe-area-inset-left))}
      .top select,.top button{height:34px;min-height:34px;padding:0 7px;border-radius:9px;font-size:13px}
      .top select{max-width:none}#play{min-width:70px}#speed{min-width:54px}#tools{top:41px;max-height:calc(100dvh - 47px - env(safe-area-inset-bottom))}
      .note{border-width:2px;border-radius:8px 8px 5px 5px;font-size:clamp(12px,3.4vh,20px)}
      .bells{padding-top:4px}.bell{border-radius:10px 10px 15px 15px;font-size:clamp(12px,3.2vw,23px)}.bell small{margin-top:2px}
      #strike:before{font-size:8px;bottom:5px}
      .modal-card{padding:12px}.modal-card p{margin-bottom:8px}.color-row{padding:5px}.color-row input{height:34px}.modal-actions{margin-top:9px}
    }