* {
  box-sizing: border-box;
}

#outer {
  min-height: auto;
  min-height: 100dvh;
}

.wrapper {
  position: relative;
  /* 7 columns. */
  grid-template-columns: auto 1fr 1fr 2fr 1fr 1fr auto;
  /* 8 rows. */
  grid-template-rows: minmax(min-content, max-content) 0 /* msg, uses top padding of next */ minmax(min-content, max-content) minmax(min-content, max-content) minmax(min-content, max-content) auto auto minmax(1rem, auto);
}

#heading {
  grid-column: 1 / span 7;
}

#messageWrapper {
  grid-column: 1 / span 7;
  grid-row: 2 / span 1;

  padding-top: 0;
  padding-bottom: 0;
}

#message {
  font-size: 1.2rem;
}

#calibrateWrapper {
  padding: 0;
  grid-column: 1 / span 7;
  grid-row: 3 / span 7;

  z-index: 4;
}

#calibrateTop {
  margin: 0.5rem;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

li {
  margin: 1rem;
}

#calibrateImg {
  width: 100%;
  max-width: min(18rem, 100%);
}

#calibrateImg > img {
  width: 100%;
}

.cause {
  font-size: 1.2rem;
}

#calibrateText {
  position: relative;
}

.infoDropButton {
  font-size: 1.2rem;
}

#infoDropFewB, #infoDropManyB {
  position: absolute;
  top: 0;
  right: 0;
}

#infoDropFew, #infoDropMany {
  margin-left: 0;
  max-width: 20rem;
}

.calInfoH {
  font-weight: bold;
}

#infoFew > div, #infoMany > div {
  margin-bottom: 0.5rem;
}

#calibrateButtons {
  width: 100%;

  margin-top: 1rem;

  display: grid;
  grid-gap: 0;
  grid-template-columns: minmax(min-content, 10%) 1fr 1fr minmax(min-content, 10%);
  grid-template-rows: 1fr;
}

#calibrateRightButtons {
  display: flex;
  justify-content: flex-end;
}

#calibrateCancelButton,
#calibrateStartButton,
#calibrateDoneButton {
  height: 4.5rem;
  width: 6rem;

  margin: 0.5rem;
}

#rhythmWrapper {
  grid-column: 1 / span 7;
  grid-row: 3 / span 1;

  padding-top: 3rem; /* space for #countDownNum to be raised into */

  display: grid;
  grid-gap: 0;
  grid-template-columns: auto auto auto;
  grid-template-rows: 1fr;

  overflow-x: scroll;
  /* space for scrollbar on chrome when overflow, FIX also needs to be big for ff else always scrolls y on callandclap */
  padding-bottom: 4rem;
}

#bar.retracted,
.space.retracted,
#barSpacePost.retracted {
  display: none;
}

div.bar {
  position: relative; /* for guideBar */

  grid-column: 2 / span 1;
  grid-row: 1 / span 1;

  padding: 0;
  margin-bottom: 0.5rem;

  display: flex;
  justify-content: center;
}

.guideHBeat, .guideBlank {
  flex: 1;
  width: calc(var(--width-rhythm-img) / 2);
  max-width: calc(var(--width-rhythm-img) / 2);
}

.blankOrTapit {
  flex: 2;
  /* flex: 1 1 0; */
  max-width: var(--width-rhythm-img);
  height: var(--height-rhythm-img);
}

.blankOrTapit.sysLine, .blankOrTapit.sysStaff {
  height: max-content;
}

.blank {
  width: var(--width-rhythm-img);
}

.tapit,
.blank {
  background-color: var(--color-primary-fill);
}

.blankOrTapit.halfBeat {
  flex: 1;

  width: calc(var(--width-rhythm-img) / 2);
  max-width: calc(var(--width-rhythm-img) / 2);
}

.blankOrTapit.blankAfterOneBeatRhythm {
  flex: 0;
  width: 0;
}

/*
.halfBeat > span > div > img.rhythmImgTapit {
  padding-top: 40%;
  padding-bottom: 40%;
}
*/

.blank.firstBlank, .blank.lastBlank {
  background-color: inherit;
}

.guideHBeat:nth-child(1),
.guideHBeat:nth-child(2),
.guideHBeat:nth-last-child(2),
.guideHBeat:nth-last-child(1) {
  box-shadow: none;
}

#tapit1 {
  position: relative;
}

#countDownNum {
  position: absolute;
  top: -1.5rem;
  right: 1rem;
  font-size: 3rem;
  font-weight: normal;
  color: var(--color-secondary-text);
  background-color: var(--color-primary-light);
  z-index: 2; /* so that above signature when sys staff,line */
}

#countDownNum.listen {
  font-size: 2rem;
  font-weight: normal;
  color: var(--color-primary-text);
}

.blank.lighter {
  background-color: var(--color-primary-light);
}

.blank.lighter.sysLine,
.blank.lighter.sysStaff {
  background-color: var(--color-primary-fill);
}

img.rhythmImgTapit {
  user-select: none;
  height: 80%;
  opacity: var(--rhythm-img-opacity);
}

.halfBeat.sysLine > span > div > img.rhythmImgTapit,
.halfBeat.sysStaff > span > div > img.rhythmImgTapit {
  padding-top: 40%;
  padding-bottom: 40%;
}

.halfBeat.sysLine.hbi > span > div > img.rhythmImg,
.halfBeat.sysStaff.hbi > span > div > img.rhythmImg,
.halfBeat.sysLine.hbi > span > div > img.rhythmImgTapit,
.halfBeat.sysStaff.hbi > span > div > img.rhythmImgTapit {
  padding-top: 20%;
  padding-bottom: 20%;
  transform: translateX(25%);
}

.halfBlank > .clean > .bgLine,
.halfBlank > .clean > .bgStaff {
  /* Hack because the 1x8n in 1x4nd1x8n is twice the size and shifted left, so the bar lines would overlap and be darker */
  visibility: hidden;
}

.smallRhythmImgTapitW {
  position: relative;
  user-select: none;
  opacity: 0.85;
  pointer-events: none;

  min-height: 1.6rem;
  max-height: 1.6rem;
  width: 1.6rem;

  display: flex;
  justify-content: center;
}

.smallRhythmImgTapitW.words {
  width: auto;
}

.smallRhythmImgTapitW.blankAfterOneBeatRhythm {
  width: 0;
}

.smallRhythmImgTapitW.halfBeat {
  width: 0.8rem;
}

img.smallRhythmImgTapit {
  position: absolute;
  min-height: 1.6rem;
  max-height: 1.6rem;
  width: 1.6rem;
}

img.aboveRhythmImgTapit {
  user-select: none;
  opacity: 0.85;
  pointer-events: none;
  width: 100%;
  padding: 20%;
}

.space {
  text-align: right;
}

#rollWrapper {
  grid-column: 2 / span 4;
  grid-row: 4 / span 1;
}

.roll.retracted {
  display: none;
}

.roll {
  border-left-style: solid;
  border-left-color: var(--color-emphasis-border);
  border-left-width: 0.12rem;

  background: linear-gradient(90deg, var(--color-primary-fill) 98%, var(--color-emphasis-border) 2%);
  background-size: var(--width-rhythm-img);

  margin-top: 0.5rem;
  height: 1rem;
  width: 100%;

  padding: 0;

  display: flex;
}

.sound {
  height: 0.5rem;
  opacity: 0.75;
  background: var(--color-primary-text);
  box-shadow: inset -0.12rem 0 var(--color-primary-fill);
}

.dot {
  display: inline-block;
  height: 1rem;
  width: 1rem;
  background-color: var(--color-emphasis-fill);
  border-radius: 50%;
}

.questionRoll > div > .dot, #questionRoll > div > .dot {
  opacity: 0.7;
  background-color: var(--color-primary-text);
}

.rest {
  flex-grow: 1;
}

.s2n {
  min-width: 200%;
  max-width: 200%;
}

.s4n {
  min-width: 100%;
  max-width: 100%;
}

.s8n {
  min-width: 50%;
  max-width: 50%;
}

.s16n {
  min-width: 25%;
  max-width: 25%;
}

#tapWrapper {
  grid-column: 2 / span 4;
  grid-row: 5 / span 1;
}

#tapButton.retracted {
  display: none;
}

#tapButton {
  margin-top: 1rem;
  border-radius: 50%;
  border-style: dotted;
  width: 9rem;
  height: 9rem;
  z-index: 998;

  user-select: none;
}

#tapButton.tapButtonRolling {
  border-radius: 10% 40% 10% 40%;
}

#tapButton.down {
  border-color: var(--color-primary-fill);
  background-color: var(--color-emphasis-fill);
  opacity: 0.7;
}

#tapButtonImg {
  opacity: 0.8;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.5rem;
}

.resultPart.retracted {
  display: none;
}

.accuracy {
  font-size: 0.8rem;
  margin-top: 0.2rem;
  margin-bottom: 1rem;
}

.scoreWords {
  margin: 0.5rem;
}

.scoreWordsAbove {
  width: var(--width-rhythm-img);
  min-width: var(--width-rhythm-img);
  min-height: var(--height-rhythm-img);
}

.scoreWordsAbove.halfBeat {
  position: relative;
  width: calc(var(--width-rhythm-img) / 2);
  min-width: calc(var(--width-rhythm-img) / 2);
}

.scoreWordsAbove.halfBeat > img.aboveRhythmImgTapit {
  position: absolute;
  width: 200%;
  padding: 40%;
  transform: translate(-25%, -10%);
}

.scoreWordsAbove.blankAfterOneBeatRhythm {
  width: 0;
  min-width: 0;
}

.scoreWordsAbove.aboveStart {
  border-left: 0.12rem solid var(--color-emphasis-border);
}

.scoreWordsAbove.aboveEnd {
  border-right: 0.12rem solid var(--color-emphasis-border);
}

#score, #claps {
  font-size: 0.8rem;
}

#score {
  margin-top: 1rem;
}

#scoreWrapper {
  grid-column: 2 / span 5;
  grid-row: 6 / span 1;
}

#buttonWrapperW {
  grid-column: 1 / span 7;
  grid-row: 7 / span 1;

  padding: 0;

  display: flex;
  justify-content: center;
}

#buttonWrapper {
  width: 100%;
  max-width: 40rem;

  display: grid;
  grid-template-columns: auto auto;
}

#leftButtonWrapper {
  padding: 0.5rem;
  display: flex;
  flex-wrap: wrap;
}

#setupButton {
  margin-bottom: 0.5rem;
  margin-right: 0.5rem;
}

#rightButtonWrapper {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem;
}

#mainButtonWrapper {
  padding-left: 0;
  padding-right: 0;
  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: auto;
  grid-template-rows: auto;
}

#playButton,
#doneButton,
#nextButton {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}

#doneButton.down {
  background-color: var(--color-emphasis-border);
}

#debugWrapper {
  grid-column: 1 / span 7;
  grid-row: 8 / span 1;
}

#sourceVolume {
  display: grid;
  grid-gap: 0.5rem;
  /* 6 columns */
  grid-template-columns: auto auto auto auto auto auto;
}

.frameCount {
  grid-column: 1 / span 6;
}

.debugHead {
  font-weight: bold;
}

.debugTwoRest {
  grid-column: 2 / span 5;
}

.debugBeatOn {
  display: inline-block;
  background-color: var(--color-emphasis-fill);
  width: 6rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.debugBeatOff {
  display: inline-block;
  background-color: var(--color-primary-light);
  width: 6rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.debugUser {
  display: inline-block;
  background-color: var(--color-primary-light);
  width: 16rem;
}

.debugUserOn {
  display: inline-block;
  background-color: var(--color-emphasis-fill);
}

/* Override common.css because tapit block are fixed and small. */
.words.numbers {
  margin-left: 5%;
  font-size: 1rem;
  justify-content: flex-start;
}

.phraseEnd {
  border-right: 0.24rem double var(--color-primary-text);
}

.hbi > .clean > .bgLine,
.hbi > .clean > .bgStaff {
  width: 200%;
  transform: translateX(-50%);
}

.bgLine.phraseEnd,
.bgStaff.phraseEnd {
  border-right: none;
}

/* this means when ele is second last child and a .halfBeat */
/* nth-last-child(2) is the last rhythm, because there's a blank at the end. */
.halfBeat:nth-last-child(3) > span > .phraseEnd {
  /* the second half of the beat is visible and has the end marker */
  border-right: none;
}

#currentAdj {
  margin-top: 1rem;
}

#currentAdj, #currentDet {
  font-size: 0.8rem;
  opacity: 0.7;
}