/* =========================
   /style.css
   ========================= */
   :root{
    --page-bg:#ffffff;
    --text:#111;
  
    --text-max: 1000px;
    --analysis-max: 820px;
  
    --pulseRGBA: rgba(77,163,255,0.28);
  
    /* Pads */
    --kickColor: #0ea5e9;   /* cyan-ish */
    --snareColor:#f97316;   /* orange */
    --padShadow: rgba(0,0,0,0.18);
  
    /* Beat (defaults; per-dot colors are set via data-color) */
    --beatOn: #22c55e;
    --beatOff: rgba(34,197,94,0.18);
  
    /* 2-bar colors */
    --beatPurpleOn: #a855f7;
    --beatPurpleOff: rgba(168,85,247,0.18);
    --beatOrangeOn: #f97316;
    --beatOrangeOff: rgba(249,115,22,0.18);
  
    /* Score colors */
    --score1: #ef4444;
    --score2: #f97316;
    --score3: #f59e0b;
    --score4: #84cc16;
    --score5: #22c55e;
  }
  
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:var(--page-bg);
    color:var(--text);
  }
  
  .app{
    max-width:1260px;
    margin:8px auto;
    padding:12px 14px;
  }
  
  .hero{text-align:center;margin:0 0 10px}
  .app-title{margin:10px 0 2px;font-size:46px;font-weight:500;letter-spacing:.5px}
  .app-subtitle-large{margin:0 0 4px;max-width:1020px;font-size:28px;font-weight:400;opacity:.75;line-height:1.2;}
  .app-subtitle{margin:10px auto 0;max-width:1020px;font-size:15px;font-weight:400;opacity:.78;line-height:1.35;}
  
  .controlsPanel{
    background:#fff;
    border:1px solid rgba(0,0,0,.0);
    border-radius:16px;
    padding:0;
  }
  .controlsPanelActions{margin-top:6px}
  
  .hidden{display:none}
  
  select{
    height:38px;
    width:100%;
    padding:0 10px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.2);
    background:#fff;
    cursor:pointer;
    font-weight:800;
  }
  
  button{
    height:38px;
    padding:0 14px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.2);
    background:#fff;
    cursor:pointer;
    font-weight:900;
    white-space:nowrap;
    max-width: max-content;
  }
  button:active{transform:translateY(1px)}
  button:disabled{opacity:.45;cursor:not-allowed;transform:none}
  
  .primary{
    background:rgb(71, 101, 166);
    color:#fff;
    border-color:rgba(0,0,0,.2);
  }
  
  /* Begin pulse */
  @keyframes beginPulse{
    0%   { box-shadow:0 0 0 0 rgba(0,0,0,0); }
    55%  { box-shadow:0 0 0 12px var(--pulseRGBA); }
    100% { box-shadow:0 0 0 0 rgba(0,0,0,0); }
  }
  .pulse{ animation:beginPulse 1.25s ease-in-out infinite; }
  
  .actionsRow{
    padding:2px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .actionsCentered{justify-content:center}
  .wrapTight{gap:8px}
  
  .inlineControl{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .inlineControlRow{min-width:160px}
  .inlineLabel{
    font-size:12px;
    font-weight:900;
    opacity:.75;
    letter-spacing:.2px;
  }
  .compactSelect{max-width:240px}
  
  /* Difficulty popup trigger (looks like a select) */
  .selectLikeBtn{
    width:100%;
    text-align:left;
    padding:0 34px 0 10px;
    font-weight:800;
    position:relative;
  }
  .selectLikeBtn::after{
    content:"▾";
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    opacity:.75;
    pointer-events:none;
  }
  
  /* Compact modal (used for Difficulty chooser) */
  .modalCardCompact{
    width: max-content;
    max-width: min(360px, calc(100vw - 32px));
    padding:10px 12px 10px;
    max-height: calc(100vh - 40px);
    overflow: auto;
  }
  
  /* Difficulty modal options (compact + centered) */
  .diffGrid{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    margin-top:6px;
  }
  .diffOption{
    width: 220px;
    max-width: calc(100vw - 80px);
    justify-content:center;
  }
  
  .bpmRow{
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:center;
  }
  #bpmRange{ width:150px; }
  #bpmNum{
    width:76px;
    height:38px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.2);
    padding:0 10px;
    font-weight:900;
  }
  
  /* Status / Beat */
  .statusPanel{
    max-width: var(--text-max);
    margin: 8px auto 0;
    background:#fff;
    border:1px solid rgba(0,0,0,.0);
    border-radius:16px;
    padding: 0;
  }
  
  /* Center everything in the status panel */
  .statusRow{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding: 12px 10px 8px;
  }
  
  .beatLights{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:center;
    width:100%;
  }
  
  /* Bigger + centered beat dots */
  .beatDot{
    width:18px;
    height:18px;
    border-radius:999px;
    background: var(--beatOff);
    border:1px solid rgba(0,0,0,.15);
  }
  
  /* Per-dot base color */
  .beatDot[data-color="green"]{
    background: var(--beatOff);
  }
  .beatDot[data-color="purple"]{
    background: var(--beatPurpleOff);
  }
  .beatDot[data-color="orange"]{
    background: var(--beatOrangeOff);
  }
  
  /* "On" uses the dot's color */
  .beatDot.on{
    background: var(--beatOn);
    box-shadow: 0 0 0 8px rgba(34,197,94,0.20);
  }
  .beatDot.on[data-color="purple"]{
    background: var(--beatPurpleOn);
    box-shadow: 0 0 0 8px rgba(168,85,247,0.20);
  }
  .beatDot.on[data-color="orange"]{
    background: var(--beatOrangeOn);
    box-shadow: 0 0 0 8px rgba(249,115,22,0.20);
  }
  
  .statusText{
    width:100%;
    text-align:center;
  }
  .phaseTitle{
    font-weight:900;
    font-size:16px;
  }
  .phaseSub{
    margin-top:2px;
    font-size:13px;
    opacity:.78;
    line-height:1.2;
  }
  
  .scoreInline{
    display:flex;
    gap:8px;
    justify-content:center;
    padding: 0 10px 12px;
    flex-wrap:wrap;
  }
  .scorePill{
    display:flex;
    gap:8px;
    align-items:baseline;
    border:1px solid rgba(0,0,0,.16);
    border-radius:999px;
    padding:6px 10px;
    background:#fff;
    font-variant-numeric: tabular-nums;
  }
  .scoreLabel{ font-size:12px; opacity:.7; font-weight:900; }
  .scoreValue{ font-size:14px; font-weight:900; }
  
  /* Pads */
  .padsPanel{
    max-width: var(--text-max);
    margin: 10px auto 0;
  }
  .padsRow{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }
  .padBtn{
    width: min(220px, calc(50vw - 22px));
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius:16px;
    border:1px solid rgba(0,0,0,.18);
    box-shadow: 0 12px 26px var(--padShadow);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px;
    user-select:none;
    touch-action: manipulation;
  }
  .padBtn:disabled{
    opacity:.55;
    box-shadow:none;
  }
  .padIcon{
    width: 64px;
    height: 64px;
    object-fit:contain;
    filter: drop-shadow(0 8px 10px rgba(0,0,0,.15));
  }
  .padText{
    font-size:18px;
    font-weight:900;
    letter-spacing:.2px;
  }
  .padKey{
    font-size:14px;
    opacity:.9;
    font-weight:900;
  }
  
  .kickPad{
    background: var(--kickColor);
    color:#fff;
  }
  .snarePad{
    background: var(--snareColor);
    color:#fff;
  }
  
  /* Press flash */
  @keyframes padFlash{
    0% { transform: translateY(0); filter: brightness(1); }
    35% { transform: translateY(-1px); filter: brightness(1.15); }
    100% { transform: translateY(0); filter: brightness(1); }
  }
  .padBtn.flash{
    animation: padFlash 180ms ease-out;
  }
  
  /* Feedback */
  .analysis{
    max-width: 500px;
    margin: 10px auto 0;
    background:#fff;
    border:1px solid rgba(0,0,0,.0);
    border-radius:16px;
    padding:0;
  }
  .analysisGrid{display:grid;gap:10px;margin:0 auto}
  .analysisCard{
    border:1px solid rgba(0,0,0,.18);
    border-radius:14px;
    padding:12px;
    background:#f9f9f9;
    text-align:center;
    transition: background-color 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
  }
  .fixedFeedbackCard{ min-height: 160px; }
  .analysisLabel{
    font-size:12px;
    opacity:.75;
    margin-bottom:8px;
    font-weight:900;
    letter-spacing:.2px;
  }
  .analysisBody{font-size:14px;line-height:1.45;word-break:break-word}
  
  .dim{ opacity: .7; }
  
  /* Large score display */
  .scoreBigWrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    margin: 4px 0 10px;
  }
  .scoreBigLine{
    font-size:48px;
    font-weight:900;
    letter-spacing:.4px;
    line-height:1;
  }
  .scoreBigWord{
    font-size:26px;
    font-weight:900;
    line-height:1.1;
  }
  .scoreBelow{
    margin-top: 6px;
  }
  
  /* "Light up" feedback card based on score */
  .analysisCard[data-score="1"]{
    background: color-mix(in srgb, var(--score1) 18%, #fff);
    border-color: color-mix(in srgb, var(--score1) 55%, rgba(0,0,0,.18));
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--score1) 25%, transparent);
  }
  .analysisCard[data-score="2"]{
    background: color-mix(in srgb, var(--score2) 18%, #fff);
    border-color: color-mix(in srgb, var(--score2) 55%, rgba(0,0,0,.18));
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--score2) 25%, transparent);
  }
  .analysisCard[data-score="3"]{
    background: color-mix(in srgb, var(--score3) 18%, #fff);
    border-color: color-mix(in srgb, var(--score3) 55%, rgba(0,0,0,.18));
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--score3) 25%, transparent);
  }
  .analysisCard[data-score="4"]{
    background: color-mix(in srgb, var(--score4) 18%, #fff);
    border-color: color-mix(in srgb, var(--score4) 55%, rgba(0,0,0,.18));
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--score4) 25%, transparent);
  }
  .analysisCard[data-score="5"]{
    background: color-mix(in srgb, var(--score5) 18%, #fff);
    border-color: color-mix(in srgb, var(--score5) 55%, rgba(0,0,0,.18));
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--score5) 25%, transparent);
  }
  
  /* Old progress bar hidden (no left-to-right fill) */
  .scoreBarWrap{ display:none; }
  .scoreBar{ display:none; }
  
  /* Modal */
  .modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:grid;
    place-items:center;
    padding: 10px;
    z-index:1000;
  }
  .modal.hidden{display:none}
  .modalCard{
    text-align:center;
    width:min(720px, calc(100vw - 32px));
    background:white;
    border-radius:18px;
    border:1px solid rgba(0,0,0,.1);
    padding:16px 16px 14px;
      max-height: calc(100vh - 40px);
    overflow: auto;
    box-shadow:0 12px 30px rgba(0,0,0,.25);
  }
  .modalTitle{font-size:18px;font-weight:900;margin-bottom:10px}
  .modalBody{font-size:14px;line-height:1.45;opacity:.95;white-space:pre-wrap}
  .modalActions{margin-top:10px;display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
  .modalHeader h2{ margin:0; }
  .modalFooter{ margin-top: 8px; display:flex; justify-content:center; }
  
  /* Settings modal sections (Rhythm Length, Difficulty and Tempo) */
  .settingsSection{
    margin-top: 6px;
  }
  .settingsLabel{
    font-size:12px;
    font-weight:900;
    opacity:.75;
    letter-spacing:.2px;
    margin-bottom:4px;
    text-align:center;
  }
  #rhythmSettingsBtn{
    max-width: 340px;
  }
  #timeSigSel{ margin-bottom: 10px; }


  /* Settings modal layout (centered + tighter vertical spacing) */
  #rhythmSettingsModal .modalBody{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
    white-space:normal; /* prevents flex whitespace/newlines inflating height */
  }
  .settingsSection{ margin-top: 6px; }

  /* Segmented button groups */
  .segmented{
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
  }
  .segBtn{
    height:38px;
    padding:0 14px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.2);
    background:#fff;
    cursor:pointer;
    font-weight:900;
    min-width: 86px;
    text-align:center;
  }
  .segBtn.selected,
  .diffOption.selected{
    background: var(--score5);
    color:#fff;
    border-color: rgba(0,0,0,.12);
  }
  
  /* Toggle row */
  .toggleRow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    user-select:none;
  }
  .toggleRow input{
    width:18px;
    height:18px;
  }
  .toggleText{
    font-weight:900;
    font-size:12px;
    opacity:.78;
    letter-spacing:.2px;
  }
  
  /* Responsive */
  @media (max-width:980px){
    .compactSelect{max-width:100%}
    .inlineControlRow{min-width:unset;width:100%}
    #bpmRange{ width: 100%; }
    .bpmRow{ width: 100%; }
  }
  @media (max-width:520px){
    .app-title{ font-size: 40px; }
    .app-subtitle-large{ font-size: 24px; }
    .padIcon{ width: 56px; height: 56px; }
    .scoreBigLine{ font-size: 42px; }
    .scoreBigWord{ font-size: 22px; }
  }
  @media (max-width:420px){
    button{ padding: 0 12px; }
  }
  /* Short screens: keep modals usable */
@media (max-height: 720px){
  .modal{ padding: 6px; }
  .modalCard{ max-height: calc(100vh - 20px); }
  .modalCardCompact{ max-height: calc(100vh - 20px); }
}