/* Playback belongs to the shared left-hand control column. */
.training-app .settings-card{display:flex;flex-direction:column}
.sidebar-play{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;flex:none;min-height:160px;margin:16px 0 0;padding:24px 0;border-top:1px solid #dedbd3;background:linear-gradient(#fffefa,#faf7ef);overflow:hidden}
.settings-card>.sidebar-play{margin-top:auto}
.sidebar-play .play-button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:96px;height:96px;min-height:96px;flex:none;border-radius:50%;background:#122620;color:white;padding:12px 6px;box-shadow:0 18px 28px #12262033}
.sidebar-play .play-button svg{width:24px;height:24px;flex:none;margin-bottom:6px;fill:currentColor}
.sidebar-play .play-button>span{font-size:13px;line-height:18px}
.sidebar-play .play-button small{font-size:11px;line-height:15px;margin-top:4px;color:#b8cbc4}
.sidebar-play .sound-rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.sidebar-play .sound-rings i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #236b621f;border-radius:50%;width:104px;height:104px}
.sidebar-play .sound-rings i:nth-child(2){width:132px;height:132px}
.sidebar-play .sound-rings i:nth-child(3){width:156px;height:156px}
.training-layout:has(.listening-stage.playing) .sidebar-play .play-button{box-shadow:0 0 0 8px #236b621a,0 18px 28px #12262033}
.practice-card .listening-stage.answer-revealed{min-height:160px;justify-content:center;gap:16px}
.listening-stage.answer-revealed #answer-score{max-width:620px}
.listening-stage.answer-revealed #answer-score svg{max-height:210px}
@media(min-width:700px) and (max-height:740px){.sidebar-play{min-height:130px;padding:12px 0}.sidebar-play .play-button{width:82px;height:82px;min-height:82px}.sidebar-play .sound-rings i:nth-child(3){width:126px;height:126px}.sidebar-play .sound-rings i:nth-child(2){width:112px;height:112px}}
.score-clef-setting{margin:10px 0;padding-top:10px;border-top:1px solid #dedbd3}
.score-clef-setting label{display:block;font-size:12px;font-weight:700;color:#63706c;margin-bottom:5px}
.score-clef-setting select{display:block;width:100%;border:1px solid #d8d4ca;border-radius:11px;background:#fff;color:#63706c;padding:7px 10px;font:700 14px Arial,"PingFang SC",sans-serif;min-height:44px}
/* Keep the heard notes close together rather than stretching across the stage. */
.listening-stage.answer-revealed #answer-score{width:320px;max-width:100%}
.listening-stage.answer-revealed #answer-score svg{width:100%;max-height:170px}
.listening-stage.answer-revealed #answer-score{width:360px;max-width:100%;margin:0 auto;align-self:center}
.listening-stage.answer-revealed #answer-score svg{max-height:200px;margin:0 auto}
.training-app .settings-card>.setting-group{flex:none;margin:0 0 10px;padding:0 0 8px}
.training-app .settings-card>fieldset{flex:none;margin:8px 0 12px;gap:5px}
.training-app .settings-card .level-option{margin:0}
.training-app .settings-card .level-option>span{min-height:54px;padding:7px 8px}
.training-app .settings-card .level-option small{font-size:10px;line-height:1.35}
@media(min-width:700px) and (max-height:740px){.sidebar-play{min-height:104px;padding:8px 0}.training-app .settings-card{padding:10px}.training-app .settings-card>.setting-group{margin-bottom:6px;padding-bottom:4px}.training-app .settings-card>fieldset{margin:6px 0 8px}}
.difficulty-heading{margin-bottom:10px;display:flex;align-items:center;gap:8px}
.difficulty-heading>span{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:#122620;color:white;font:italic 700 12px Georgia,serif}
.difficulty-heading p{font-size:12px;font-weight:700;margin:0}
@media(min-width:700px){
 .training-app .settings-card .choice-row button{padding:6px;min-height:48px;font-size:13px}
 .training-app .settings-card .choice-row button small{font-size:10px;line-height:1.2;margin-top:2px}
 .training-app .settings-card>.setting-group{margin-bottom:6px;padding-bottom:4px}
 .sidebar-play{min-height:104px;padding:8px 0}
 .sidebar-play .play-button{width:82px;height:82px;min-height:82px}
}
/* ABC's responsive container used percentage padding and an absolute left-aligned SVG. */
.listening-stage.answer-revealed #answer-score{display:block!important;position:relative!important;width:360px!important;max-width:100%;height:auto!important;min-height:0;padding:0!important;overflow:visible!important;margin:0 auto!important;flex:0 0 auto}
.listening-stage.answer-revealed #answer-score svg{display:block!important;position:static!important;width:100%!important;height:auto!important;max-height:220px;margin:0 auto!important}

.listening-stage.answer-revealed #answer-score{width:420px!important}
.listening-stage.answer-revealed #answer-score svg{transform:none!important;transform-origin:center!important}
@media(min-width:700px) and (min-height:650px){
 .sidebar-play{min-height:180px;padding:20px 0}
 .sidebar-play .play-button{width:116px;height:116px;min-height:116px}
 .sidebar-play .play-button>span{font-size:15px;line-height:21px}
 .sidebar-play .play-button small{font-size:12px}
 .sidebar-play .sound-rings i{width:130px;height:130px}
 .sidebar-play .sound-rings i:nth-child(2){width:154px;height:154px}
 .sidebar-play .sound-rings i:nth-child(3){width:178px;height:178px}
}