/* Wrong Note Hunt (js/theory/wrongnote.js): #wrongnote-screen / #wn-root.
   The Hand Reader's bar and the Chord Bridge's cards (gauntlet.css,
   handreader.css) around Frau Adler's lesson book: the quest box's parchment,
   EB Garamond, the engraving in sepia with the red pencil over it, and a
   parchment keyboard under the page that lights as the pupil plays. */
#wn-root { width: min(1100px, 97vw); display: flex; flex-direction: column; gap: 8px; }
.wn-stagewrap { position: relative; }
.wn-book {
  background: #efdfbe; color: #332414;
  border: 4px solid transparent; border-image: url(ui/quest-parchment-worn.webp) 46 fill stretch;
  padding: 22px 28px 20px; font-family: "EB Garamond", Palatino, Georgia, serif;
}
.wn-head { display: flex; gap: 14px; align-items: center; }
.wn-face { width: 60px; height: 60px; border-radius: 50%; flex: none;
  background: url(town/_proto/portraits/teacher.jpg) center 18% / cover #d9c49a; border: 2px solid #6b2f1c; }
.wn-who { color: #6b2f1c; font-weight: 700; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; }
.wn-say { font-size: 18px; line-height: 1.35; min-height: 2.7em; }
.wn-line { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 8px 0 0;
  padding-top: 7px; border-top: 1px solid rgba(107, 47, 28, .25); font-style: italic; color: #6b5a40; font-size: 15px; }
.wn-page { position: relative; margin: 6px 0 4px; }
.wn-sheet { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; min-height: 170px; cursor: crosshair; touch-action: manipulation; }
.wn-wrap { position: relative; margin: 0 auto; }
.wn-wrap > svg:first-child { display: block; filter: sepia(.85) saturate(1.4) brightness(.72); }
.wn-wrap g.note { transition: fill .12s, color .12s; }
.wn-wrap g.note.wn-glow { fill: #e39a00; color: #e39a00; filter: drop-shadow(0 0 4px rgba(255, 176, 0, .95)); }
.wn-ov { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.wn-pencil { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.wn-pencil.draw { animation: wn-draw .45s ease-out forwards; }
@keyframes wn-draw { to { stroke-dashoffset: 0; } }
.wn-margin { font: italic 600 22px "EB Garamond", Georgia, serif; fill: #b3261e; }
.wn-margin.fade { animation: wn-fade .5s .3s both; }
@keyframes wn-fade { from { opacity: 0; } to { opacity: 1; } }
.wn-stamp { position: absolute; right: 12px; top: -4px; z-index: 2; transform: rotate(-9deg); border: 3px double #b3261e; color: #b3261e;
  padding: 1px 10px; font: 700 20px "EB Garamond", serif; letter-spacing: .06em; border-radius: 6px; opacity: 0; pointer-events: none; }
.wn-stamp.on { animation: wn-stamp .35s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes wn-stamp { from { opacity: 0; transform: rotate(-9deg) scale(2); } to { opacity: .92; transform: rotate(-9deg) scale(1); } }
#wn-keys { display: block; width: 100%; margin-top: 8px; border-radius: 4px; box-shadow: 0 1px 0 rgba(107, 47, 28, .35); }
.wn-noengrave { padding: 40px 10px; text-align: center; font-style: italic; color: #6b5a40; }
.wn-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 10px; }
.wn-ink { background: none; border: 0; border-bottom: 1.5px solid #6b2f1c; color: #332414; cursor: pointer;
  font: 600 17px "EB Garamond", Georgia, serif; padding: 4px 2px; }
.wn-ink:hover { color: #6b2f1c; }
.wn-ink.on { color: #b3261e; border-color: #b3261e; }
.wn-ink.wn-big { font-size: 21px; color: #6b2f1c; font-weight: 700; }
.wn-turn { margin-left: auto; color: #6b2f1c; font-weight: 700; }
.wn-res { font: italic 600 18px "EB Garamond", Georgia, serif; color: #6b2f1c; }
.wn-lit { color: #9aa3b8; font-style: normal; }
.wn-rpay { text-align: center; color: #e7b54a; font-weight: 700; margin-top: 8px; min-height: 1.2em; }
#wn-root.wn-loading .wn-page { opacity: .45; transition: opacity .2s; }
#wn-root.wn-loading .wn-sheet { cursor: progress; }
@media (max-width: 700px) {
  .wn-book { padding: 16px 16px 14px; }
  .wn-face { width: 46px; height: 46px; }
  .wn-say { font-size: 16px; }
  .wn-line { font-size: 13px; }
  .wn-ink { font-size: 16px; }
  .wn-turn { margin-left: 0; }
}

/* the mini-games hub's vignette (theory/ui.js .tdm-prev[data-g="wrongnote"]):
   a strip of parchment staff with a red pencil ring, and the keys under it */
.tdm-prev[data-g="wrongnote"] .wnv-p { left: 50%; top: 4px; width: 230px; height: 70px; margin-left: -115px; border-radius: 4px;
  background: #efdfbe repeating-linear-gradient(#efdfbe 0 13px, #5a4632 13px 14px) 0 10px / 100% 70px no-repeat; }
.tdm-prev[data-g="wrongnote"] .wnv-n { width: 13px; height: 10px; border-radius: 50%; background: #3a2a1b; transform: rotate(-20deg); }
.tdm-prev[data-g="wrongnote"] .wnv-n.n1 { left: calc(50% - 80px); top: 42px; } .tdm-prev[data-g="wrongnote"] .wnv-n.n2 { left: calc(50% - 44px); top: 35px; }
.tdm-prev[data-g="wrongnote"] .wnv-n.n3 { left: calc(50% - 8px); top: 28px; } .tdm-prev[data-g="wrongnote"] .wnv-n.n4 { left: calc(50% + 28px); top: 35px; }
.tdm-prev[data-g="wrongnote"] .wnv-n.n5 { left: calc(50% + 64px); top: 49px; }
.tdm-prev[data-g="wrongnote"] .wnv-n.glow { background: #e39a00; box-shadow: 0 0 6px #ffb000; }
.tdm-prev[data-g="wrongnote"] .wnv-ring { left: calc(50% + 19px); top: 23px; width: 32px; height: 26px; border: 2.5px solid #b3261e; border-radius: 50%; transform: rotate(-8deg); }
.tdm-prev[data-g="wrongnote"] .wnv-k { top: 80px; width: 17px; height: 36px; background: #f6ecd4; border: 1px solid #6b5a40; }
.tdm-prev[data-g="wrongnote"] .wnv-k.lit { background: #d9442f; }
.tdm-prev[data-g="wrongnote"] .wnv-k.ok { background: #3f9f62; }
.tdm-prev[data-g="wrongnote"] .wnv-k.k1 { left: calc(50% - 68px); } .tdm-prev[data-g="wrongnote"] .wnv-k.k2 { left: calc(50% - 51px); }
.tdm-prev[data-g="wrongnote"] .wnv-k.k3 { left: calc(50% - 34px); } .tdm-prev[data-g="wrongnote"] .wnv-k.k4 { left: calc(50% - 17px); }
.tdm-prev[data-g="wrongnote"] .wnv-k.k5 { left: 50%; } .tdm-prev[data-g="wrongnote"] .wnv-k.k6 { left: calc(50% + 17px); }
.tdm-prev[data-g="wrongnote"] .wnv-k.k7 { left: calc(50% + 34px); } .tdm-prev[data-g="wrongnote"] .wnv-k.k8 { left: calc(50% + 51px); }
.tdm-prev[data-g="wrongnote"] .wnv-m { left: calc(50% + 56px); top: 6px; font: italic 700 13px "EB Garamond", Georgia, serif; color: #b3261e; transform: rotate(-6deg); }