:root{
  --page-bg:#ffffff;
  --text:#111;

  --pulseRGBA: rgba(77,163,255,0.28);
  --nextBtnColor: #ff7a18;

  --text-max: 1000px;
  --analysis-max: 700px;

  --chordTone:  #4da3ff;
}

*{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:16px;
}

.hero{text-align:center;margin:0px 0 12px}

.app-titleWrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:14px 0 6px;
}
.app-titleImg{
  height:auto;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  padding-bottom: 10px;
  max-width: 100%;
}
.app-titleImgWide{ width:min(600px, 100%); }
.app-titleImgWrapped{ width:min(220px, 55vw); }

.titleModeWide .app-titleImgWide{ display:block; }
.titleModeWide .app-titleImgWrapped{ display:none; }
.titleModeWrapped .app-titleImgWide{ display:none; }
.titleModeWrapped .app-titleImgWrapped{ display:block; }

.app-subtitle{margin:14px auto 14px;max-width:1020px;font-size:16px;font-weight:400;opacity:.75;line-height:1.3;}

.controlsPanel{
  background:#fff;
  border:1px solid rgba(0,0,0,.0);
  border-radius:16px;
  padding:0px;
}
.controlsPanelActions{margin-top:8px}

.settingsBox {
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 12px;
  padding: 0px 16px;
  background: #f9f9f9;
}
.settingsTitle {
  font-size: 15px;
  font-weight: 800;
  opacity: 0.9;
  text-align: center;
  margin-bottom: 0px;
}
.checkboxGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  justify-content: center;
}
.checkboxGrid label {
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.checkboxGrid input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.hidden{display:none !important;}

button{
  height:38px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.2);
  background:#fff;
  cursor:pointer;
  font-weight:800;
  white-space:nowrap;
  transition: box-shadow 0.2s, opacity 0.2s;
}
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);
}

#beginBtn.isRestart { background:#fff; color: var(--text); }

@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; }

@keyframes answerPulse{
  0%   { box-shadow:0 0 0 0 rgba(0,0,0,0); }
  55%  { box-shadow:0 0 0 12px var(--btnPulseRGBA); }
  100% { box-shadow:0 0 0 0 rgba(0,0,0,0); }
}

button.answerPulse{ 
  animation: answerPulse 1.1s ease-in-out infinite; 
}

@supports (color: rgb(from white r g b / 0.5)) {
  :root{ --nextPulseRGBA: rgb(from var(--nextBtnColor) r g b / 0.28); }
}
@supports not (color: rgb(from white r g b / 0.5)) {
  :root{ --nextPulseRGBA: rgba(255,122,24,0.28); }
}

#nextBtn.nextStyled{
  background: var(--nextBtnColor);
  color:#fff;
  border-color: rgba(0,0,0,.2);
}

@keyframes nextPulse{
  0%   { box-shadow:0 0 0 0 rgba(0,0,0,0); }
  55%  { box-shadow:0 0 0 12px var(--nextPulseRGBA); }
  100% { box-shadow:0 0 0 0 rgba(0,0,0,0); }
}
#nextBtn.nextPulse{
  animation: nextPulse 1.25s ease-in-out infinite;
}

.actionsRow{padding: 2px;display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.actionsCentered{justify-content:center}

.refSectionWrap {
  margin-top: 14px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.refLabel {
  font-size: 13px;
  font-weight: 800;
  opacity: 0.8;
  margin-bottom: 6px;
  text-align: center;
}
.refBtn{
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.2);
  background: #fff;
  font-weight: 800;
}

.analysis{
  align-items: center;
  max-width: var(--analysis-max);
  margin: 10px auto 0;
  background:#fff;
  border:1px solid rgba(0,0,0,.0);
  border-radius:16px;
  padding:0px;
}

.analysisGrid{display:grid;gap:10px;margin:0 auto}

.feedbackGridPitch{
  grid-template-columns: 1.25fr 0.75fr;
  align-items:stretch;
}

.analysisCard{
  align-items: center;
  border:1px solid rgba(0,0,0,.2);
  border-radius:14px;
  padding:12px;
  background:#f9f9f9;
  white-space: normal;
}

.fixedFeedbackCard{
  min-height: 240px;
}

.analysisLabel{
  align-items: center;
  font-size:16px;
  opacity:.85;
  margin-bottom:8px;
  font-weight:900;
  letter-spacing:.2px;
  text-align:center;
}

.analysisBody{font-size:14px;line-height:1.45;word-break:break-word}
.scoreBody{font-variant-numeric:tabular-nums}

.feedbackStack{
  align-items: center;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.scoreCardNarrow{
  padding: 14px 10px;
  margin: 0 auto;
  width: 100%;
  max-width: 440px;
}

.scoreGrid{ display:grid; gap:8px 10px; }
.scoreGridVertical{
  grid-template-columns: 1fr;
  gap:8px;
  max-width: 420px;
  margin: 0 auto;
}

.scoreItem{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  padding:8px 10px;
  border:1px solid rgba(0,0,0,.2);
  border-radius:12px;
  background:#fff;
}
.scoreK{
  font-size:12px;
  opacity:.75;
  font-weight:800;
  letter-spacing:.2px;
}
.scoreV{
  font-weight:900;
  font-variant-numeric:tabular-nums;
}

.scoreMeta{ text-align:center; font-size:12px; font-weight:900; opacity:.75; margin: 2px 0 10px; }
.scoreActions{ display: flex; flex-direction:column; align-items:center; gap:10px; }

#playerNameInput, #modalPlayerNameInput { height:38px; padding:0 10px; border-radius:12px; border:1px solid rgba(0,0,0,.2); background:#fff; font-weight:800; width:min(240px, 70vw); }
#playerNameInput::placeholder, #modalPlayerNameInput::placeholder { opacity:.6; font-weight:800; }

#feedbackOut{ text-align: center; }

.miniLegend{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:800;
  opacity:.75;
  user-select:none;
}
.miniLegendInCard{ margin: 0; }

.legendDot{
  width:10px;height:10px;border-radius:999px;display:inline-block;margin:0 6px 0 0;
  border:1px solid rgba(0,0,0,.2);
}
.legendTone{background:var(--chordTone)}

.mount{
  overflow:hidden;
}
.mount svg{display:block;margin:0 auto;width:100%;height:auto;}

.miniMountInCard{
  height: 128px;
  min-height: 128px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.compareSection {
  margin-top: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.compareLabel {
  font-size: 13px;
  font-weight: 800;
  opacity: 0.8;
  margin-bottom: 6px;
}

.hero,
.controlsPanel,
.endnotes{
  max-width: var(--text-max);
  margin-left: auto;
  margin-right: auto;
}

.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top: 100px;
  padding-left:10px;
  padding-right: 10px;
  z-index:50;
}
.modal.hidden{display:none}

.modalCard{
  width:min(720px,100%);
  background:white;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.1);
  padding:20px;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  max-height: calc(100dvh - 36px);
  overflow:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.modalTitle{font-size:22px;font-weight:900;margin:0 0 8px;text-align:center}
.modalBody{
  font-size:15px;
  line-height:1.45;
  opacity:.95;
  white-space:pre-wrap;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}
.modalBody > *{ width:100%; }
.modalBody p{ margin:0 0 10px; }
.modalActions{margin-top:14px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.modalActionsCentered { justify-content: center; }

@media (max-width:820px){
  .feedbackGridPitch{ grid-template-columns: 1fr; }
  .fixedFeedbackCard{ min-height: auto; height: auto; }
}

@media (max-width:420px){
  button{padding:0 12px;}
}

.answerBtn{
  flex: 1 1 auto;
  min-width: 100px;
  max-width: 180px;
}