* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; overscroll-behavior: none; user-select: none; -webkit-user-select: none; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
body { position: fixed; inset: 0; font: 13px/1.5 ui-monospace, "SF Mono", Menlo, monospace; color: #fff; -webkit-font-smoothing: antialiased; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; }
button { all: unset; cursor: pointer; }
button:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
#sound { position: fixed; top: 46px; left: 24px; }
#map { position: fixed; padding: 12px; transform: translate(-100%, -100%); }
#map.off { opacity: .4; }
#card { position: fixed; top: 20px; right: 24px; width: 230px; white-space: pre-line; pointer-events: none; background: #000; }
#below { display: contents; }
#source { position: fixed; bottom: 20px; right: 24px; text-align: right; color: rgba(255, 255, 255, .55); font-size: 11px; }
#source a { color: inherit; }
#source a:hover { color: #fff; }

#note { position: fixed; left: 24px; bottom: 20px; width: 296px; max-height: calc(100% - 96px); overflow-y: auto; font-size: 12px; line-height: 1.75; }
#note p { margin: 0; white-space: nowrap; }
#note b { font-weight: normal; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 4px; }
@media (hover: hover) { #note b:hover { background: rgba(255, 255, 255, .18); } }

#note [data-part] { cursor: pointer; width: fit-content; }
#note .off, #note [data-part="notes"].off + .rules { opacity: .4; }
#note .rules { padding-left: 16px; }
#note .label { margin-top: 12px; }
#keys { --k: 24px; position: relative; width: calc(var(--k) * 7 + 1px); height: 46px; margin: 4px 0 0; }
#keys button { position: absolute; top: 0; left: calc(var(--k) * var(--at)); box-sizing: border-box; border: 1px solid rgb(120, 120, 120); }
#keys .white { width: calc(var(--k) + 1px); height: 100%; }
#keys .black { left: calc(var(--k) * (var(--at) - .29)); width: calc(var(--k) * .625); height: 60%; background: #000; z-index: 1; }

/* a finger needs more room than a cursor */
@media (pointer: coarse) {
  #note { font-size: 13px; line-height: 32px; }
  #note [data-part] { width: auto; }
  #note b { padding: 7px 5px; margin: -7px -5px; }
  #keys { height: 72px; }
}

/* short wide screens: the credit folds up to stay clear of the radar */
@media (max-height: 500px) { #source { width: 130px; } }

/* tall screens: radar on top, everything else in a panel under it that scrolls by itself */
@media (max-aspect-ratio: 6/5) {
  #sound { top: 2px; left: auto; right: 4px; padding: 12px; }
  #below { display: flex; flex-direction: column; position: fixed; top: var(--below); left: 0; right: 0; bottom: 0; padding: 0 16px calc(12px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
  #note { position: static; width: auto; max-height: none; overflow: visible; flex: none; }
  #keys { --k: min((100vw - 34px) / 7, 48px); }
  #source { position: static; width: auto; margin-top: auto; padding-top: 20px; text-align: left; flex: none; }
  #card { top: var(--below); left: 0; right: 0; bottom: 0; width: auto; padding: 0 16px; z-index: 2; pointer-events: auto; cursor: pointer; }
}