#play { display: flex; gap: 16px; justify-content: center; align-items: flex-start; color: #f0f0ee;
  font: 12px/1.4 "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#play .view { position: relative; }
#play canvas { display: block; width: 100%; image-rendering: pixelated; cursor: pointer; }
#play .msg { position: absolute; inset: 0; box-sizing: border-box; padding: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
  background: #0a0a0add; }
#play .msg:empty { display: none; }
#play .msg b { font-size: 16px; font-weight: normal; }
#play .msg:has(.end) { justify-content: flex-start; background: none; }
#play .end { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: calc(34 * var(--px, 5px)); }
#play .msg span { color: #8a8a8a; font-size: 11px; }
#play .msg button { height: 48px; padding: 0 10px; font: inherit; color: inherit; background: #1c1c1e;
  border: 2px solid #3a3a3e; border-radius: 0; cursor: pointer; }
#play .msg .hot { background: #ff6a13; border-color: #ff6a13; color: #0a0a0a; }
#play .prog { width: 70%; height: 10px; padding: 2px; border: 2px solid #3a3a3e; }
#play .prog i { display: block; height: 100%; background: #ff6a13; }
#play .prog.wait i { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
#play .st { margin-top: 8px; min-height: 1.4em; color: #6a6a6a; font-size: 11px; }
#play .st:empty { display: none; }
#play .st.hot { color: #ff6a13; }

/* every control is a .key: the movement keys, the action keys, the clip buttons, one game pixel of border */
#play .keys, #play .acts, #play .btns { display: grid; position: relative; transition: opacity .2s; }
#play .side { display: flex; flex-direction: column; }
#play.off .keys, #play.off .side { opacity: .15; pointer-events: none; }
#play .key { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  margin: 0; padding: 0; background: #1c1c1e; border: var(--px, 2px) solid #3a3a3e; border-radius: 0; cursor: pointer; }
#play .key:active { background: #3a3a3e; }
#play .key.on { background: #ff6a13; border-color: #ff6a13; }
#play .key.on img.px { filter: brightness(0); }   /* dark labels on orange, as under the frame */
#play img { width: calc(7 * var(--px, 5px)); height: calc(7 * var(--px, 5px)); image-rendering: pixelated; }
#play img.px { width: auto; }
#play img.k { position: absolute; right: 3px; bottom: 3px; }
@media (hover: hover) { #play button.key:hover { border-color: #ff6a13; } }
@media (hover: none) { #play img.k { display: none; } }

/* the first-visit tutorial: a tag pointing at the movement keys, then at the action keys; each flashes three times */
#play .tip { display: none; position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(100% + 9px); box-sizing: border-box;
  padding: 6px 10px; background: #ff6a13; color: #0a0a0a; text-align: center; pointer-events: none; }
#play .tip::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: #ff6a13; }
#play[data-tut="0"] .keys .tip, #play[data-tut="1"] .acts .tip { display: block; }
#play[data-tut="0"] .keys .key, #play[data-tut="1"] .acts .key { animation: hl 1s steps(2) 3; }   /* then only the tag */
@keyframes hl { 0% { border-color: #ff6a13; } 50%, 100% { border-color: #3a3a3e; } }

@media (max-width: 700px) {
  #play { flex-direction: column; align-items: center; gap: var(--px, 4px); }
  #play .acts .tip { bottom: auto; top: calc(100% + 9px); }   /* under the action keys, clear of the keys above */
  #play .acts .tip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #ff6a13; }
}