/* Storybook-plate look from the RPG player's face: cream paper, brown-black ink, one red. Big enough to read across a
   table: every label is at least a tenth of its button's height. */
@font-face { font-family: "EB Garamond"; src: url(fonts/EBGaramond-var.woff2) format("woff2"); font-weight: 400 800; font-display: block; }
:root { --paper: #f6eed6; --paper-hi: #fbf5e1; --ink: #21170e; --ink-soft: #4a3a28; --red: #a63a24; --gap: 8px; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); font-family: "EB Garamond", Georgia, serif; }
body { overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; touch-action: manipulation; cursor: pointer; }

main { height: 100dvh; display: grid; gap: var(--gap); padding: calc(var(--gap) + env(safe-area-inset-top)) var(--gap) calc(var(--gap) + env(safe-area-inset-bottom));
       grid-template-rows: 1fr auto; }
#moods, #sounds { display: grid; gap: var(--gap); min-height: 0; }
#moods { grid-template-rows: repeat(5, 1fr); }
#sounds { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); }
body[data-view="music"] #sounds, body[data-view="sounds"] #moods { display: none; }

.mood, .snd, #flip { position: relative; border: 3px solid var(--ink); border-radius: 6px; background: var(--paper-hi);
  box-shadow: inset 0 0 0 4px var(--paper-hi), inset 0 0 0 5px var(--ink-soft); display: flex; align-items: center; min-height: 0; }
.mood { gap: 0.5em; padding: 0 0.6em; font-size: clamp(30px, 8.5vh, 84px); }
.mood b { font-weight: 600; width: 1.1em; text-align: center; font-variant-numeric: lining-nums; }
.mood span { font-weight: 500; letter-spacing: 0.01em; }
.snd { flex-direction: column; justify-content: center; font-size: clamp(30px, 8vh, 80px); font-weight: 500; }
.snd em { font-style: normal; font-size: 0.5em; color: var(--ink-soft); margin-top: 0.1em; }
#flip { justify-content: center; height: clamp(64px, 11vh, 110px); font-size: clamp(26px, 5.5vh, 52px); font-weight: 500; background: var(--paper); }
#flip em { font-style: normal; color: var(--red); margin-left: 0.4em; }
body[data-view="music"] .to-music, body[data-view="sounds"] .to-sounds { display: none; }

/* the playing mood, a sound going off, and a mood waiting for the next beat */
.mood.on { background: var(--red); color: var(--paper-hi); border-color: var(--red); box-shadow: inset 0 0 0 4px var(--red), inset 0 0 0 5px var(--paper-hi); }
.mood.next { background: #ecd3c7; }
.snd.hit { background: var(--ink); color: var(--paper-hi); }
.snd.hit em { color: var(--paper-hi); }
.mood:active, .snd:active, #flip:active { transform: scale(0.985); }

kbd { position: absolute; top: 0.35em; right: 0.5em; font: 600 clamp(14px, 2vh, 20px) "EB Garamond", serif; color: var(--ink-soft); opacity: 0.8; }
.on kbd { color: var(--paper-hi); }
@media (hover: none) { kbd { display: none; } }

#load { position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 2; }
#load i { display: block; height: 100%; width: 0; background: var(--red); transition: width 0.2s; }
#load.done { display: none; }
#credits { position: fixed; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 2px); font-size: 12px; color: var(--ink-soft); opacity: 0.6; display: none; }
body[data-view="sounds"] #credits { display: block; }

/* a laptop or a phone on its side: music and sounds side by side, no flipping */
@media (min-aspect-ratio: 5/4) {
  main { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  body[data-view] #moods, body[data-view] #sounds { display: grid; }
  #flip { display: none; }
  .mood { font-size: clamp(28px, 9vh, 96px); }
  .snd { font-size: clamp(26px, 8vh, 80px); }
  #credits { display: block; }
}

.credits { overflow: auto; }
.credits main { display: block; height: auto; max-width: 720px; margin: 0 auto; padding: 24px 18px 48px; font-size: 17px; line-height: 1.45; }
.credits h1 { font-weight: 500; font-size: 40px; margin: 0 0 8px; }
.credits h2 { font-weight: 500; font-size: 26px; margin: 24px 0 6px; }
.credits li { margin: 0 0 6px; } .credits li span { color: var(--ink-soft); }
.credits a { color: var(--red); }