:root{--bg:#2B2560;--indigo:#3B2F8F;--violet:#6C5CE7;--cream:#FFF4D6;--yellow:#FFC93C;--coral:#FF7A6B;--mint:#5ED6B0;--ink:#211b50;--white:#fff;--panel:#f8f5ff}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;height:100dvh;overflow:hidden;background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);touch-action:manipulation}button{font:inherit;min-height:44px;border:0;border-radius:16px;padding:.7rem 1rem;font-weight:800;color:var(--ink);background:#eee9ff;box-shadow:0 4px 0 #c9c1ef;cursor:pointer;-webkit-tap-highlight-color:transparent}button:active{transform:translateY(2px);box-shadow:0 2px 0 #c9c1ef}button:focus-visible{outline:4px solid var(--yellow);outline-offset:3px}.primary{background:var(--yellow);box-shadow:0 5px 0 #d79d00}.screen{position:absolute;inset:0;display:none;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));overflow:hidden}.screen.active{display:flex}.card{background:var(--panel);border-radius:28px;box-shadow:0 14px 40px #15113966}.startCard{width:min(760px,100%);max-height:100%;margin:auto;padding:clamp(14px,3vw,28px);display:flex;flex-direction:column;gap:12px;overflow:auto}.brand{display:flex;align-items:center;gap:12px}.brand h1{margin:0;font-size:clamp(1.65rem,5vw,2.7rem);color:var(--indigo)}.brand p{margin:.15rem 0 0;font-size:clamp(.78rem,2.8vw,1rem)}.miniOwl{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,var(--indigo),var(--violet));font-size:34px}fieldset{border:0;padding:0;margin:0}legend{font-weight:900;margin-bottom:6px}.selectors{display:grid;gap:12px}.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.selected{background:var(--mint)!important;box-shadow:0 4px 0 #32aa87!important}.subjectGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.subjectGrid button{font-size:.86rem;padding:.55rem}.how{display:grid;gap:3px;background:#ece8ff;padding:10px 12px;border-radius:16px;font-size:.82rem}.actions{display:flex;gap:8px}.actions .primary{flex:1}.iconBtn{width:48px;padding:0}.privacy{text-align:center;margin:0;font-size:.7rem;opacity:.7}.hud{position:absolute;z-index:3;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));height:54px;display:grid;grid-template-columns:repeat(3,1fr) 44px 44px;gap:5px;color:white}.hud>div{background:#17133faa;border:1px solid #ffffff2e;border-radius:14px;display:grid;place-items:center;line-height:1}.hud b{font-size:1.2rem}.hud small{font-size:.62rem;opacity:.8}.hud button{min-height:44px;background:#ffffff1c;color:#fff;box-shadow:none;padding:0}.game{touch-action:none}#game.active{display:block;padding:0;background:linear-gradient(#1f1a55,#33286d)}#trackWrap{position:absolute;top:68px;left:0;right:0;height:clamp(176px,34dvh,300px);touch-action:none;outline:none}#track{width:100%;height:100%;display:block}.combo{position:absolute;left:12px;right:12px;bottom:8px;color:white;font-size:.75rem;font-weight:900;text-shadow:0 2px 2px #000}.combo>div{height:8px;background:#ffffff30;border-radius:9px;overflow:hidden;margin-top:3px}.combo i{display:block;height:100%;width:0;background:var(--yellow);transition:width .2s}#qa{position:absolute;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));top:calc(68px + clamp(176px,34dvh,300px));display:flex;flex-direction:column;gap:8px;padding-top:8px}.question{min-height:54px;display:grid;place-items:center;text-align:center;color:white;font-size:clamp(1rem,4vw,1.4rem);font-weight:900;padding:4px 10px}.answers{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(58px,120px));gap:8px;flex:0 1 248px;max-height:248px;min-height:0;align-content:center;margin:auto 0}.answers button{position:relative;background:var(--cream);font-size:clamp(.9rem,3.5vw,1.2rem);padding:8px;overflow:hidden}.answers button::before{content:attr(data-key);position:absolute;top:6px;left:8px;font-size:.65rem;opacity:.45}.answers button.correct{background:var(--mint)}.answers button.wrong{background:var(--coral)}.feedback{height:24px;color:white;text-align:center;font-size:.78rem;font-weight:800}.finishFeedback{min-height:20px;margin-top:6px;color:#5b3d00;font-size:.78rem;font-weight:800}.overlay{display:none;position:absolute;z-index:20;inset:0;background:#161238dd;padding:20px}.overlay.active{display:grid;place-items:center}.pauseCard{text-align:center;padding:24px;width:min(360px,100%)}.pauseCard button{width:100%;margin-top:10px}.owlFace{font-size:3rem;color:var(--indigo)}.finishCard{position:relative;width:min(720px,100%);max-height:100%;margin:auto;padding:18px;overflow:auto;text-align:center}.finishCard h1{margin:0;color:var(--indigo)}#confetti{position:absolute;inset:0;width:100%;height:170px;pointer-events:none}.podiumArt{height:105px}.summary{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin:8px 0}.stat{background:#eee9ff;border-radius:14px;padding:8px}.stat b{display:block;font-size:1.25rem;color:var(--indigo)}#best{font-weight:800;color:#6a4b00;margin:6px}details{text-align:left;background:#f0edff;border-radius:14px;padding:10px;margin:8px 0}summary{font-weight:900;cursor:pointer}.miss{padding:8px 2px;border-bottom:1px solid #d8d2ef;font-size:.82rem}.miss:last-child{border:0}.finishActions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.finishActions .primary{grid-column:1/-1}@media (min-width:700px){.subjectGrid{grid-template-columns:repeat(4,1fr)}#trackWrap{height:clamp(220px,35dvh,360px)}#qa{top:calc(68px + clamp(220px,35dvh,360px));left:8%;right:8%}.answers{grid-template-columns:repeat(4,1fr);grid-template-rows:minmax(72px,120px);flex:0 1 120px;max-height:120px;align-self:center;width:100%;max-width:1100px}.question{min-height:45px}.summary{grid-template-columns:repeat(4,1fr)}}@media (orientation:landscape) and (max-height:560px){.startCard{display:grid;grid-template-columns:1fr 1fr;align-content:center}.brand,.how,.actions,.privacy{grid-column:1/-1}.selectors{grid-template-columns:1fr 2fr}.subjectGrid{grid-template-columns:repeat(4,1fr)}#trackWrap{top:60px;bottom:8px;left:0;right:48%;height:auto;min-height:176px}#qa{top:60px;bottom:8px;left:52%;right:8px;padding:0}.question{min-height:42px}.hud{right:48%;height:46px}.answers{grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(44px,90px));flex:1;max-height:188px}.feedback{height:18px}.finishCard{padding:10px}.podiumArt{height:65px}.summary{grid-template-columns:repeat(4,1fr)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media (orientation:landscape) and (max-height:520px){
  #start{padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(48px,env(safe-area-inset-left));}
  .startCard{
    width:min(760px,calc(100% - 8px));
    max-height:calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)));
    margin:auto;
    padding:8px 12px;
    gap:6px;
    overflow:hidden;
    grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);
    align-content:center;
  }
  .brand{gap:8px;min-height:44px;}
  .miniOwl{width:44px;height:44px;font-size:24px;flex:0 0 44px;}
  .brand h1{font-size:1.35rem;line-height:1.05;}
  .brand p{font-size:.68rem;line-height:1.15;margin:.1rem 0 0;}
  .selectors{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);gap:8px;align-items:start;}
  legend{font-size:.74rem;margin-bottom:3px;}
  .seg,.subjectGrid{gap:4px;}
  .subjectGrid{grid-template-columns:repeat(4,minmax(72px,1fr));}
  .seg button,.subjectGrid button{min-height:44px;height:44px;padding:4px 6px;font-size:.72rem;border-radius:12px;white-space:nowrap;}
  .subjectGrid button:last-child{white-space:normal;line-height:1.05;}
  .how{display:flex;align-items:center;gap:6px;min-height:28px;padding:4px 8px;font-size:.68rem;line-height:1;white-space:nowrap;overflow:hidden;}
  .how b{flex:0 0 auto;}
  .how span:first-of-type{overflow:hidden;text-overflow:ellipsis;}
  .how span:last-child{display:none;}
  .actions{gap:6px;}
  .actions button{min-height:44px;height:44px;padding:.45rem .8rem;}
  .privacy{font-size:.62rem;line-height:1;}
}