:root { color-scheme: dark; font-family: ui-monospace, Consolas, monospace; background: #0a0c12; color: #c5b998; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { display: grid; min-height: 100vh; place-items: center; padding: 14px; }
button { color: #c5b998; background: #11151e; border: 1px solid #4f463a; padding: 8px 11px; font: 10px ui-monospace, Consolas, monospace; letter-spacing: 1px; cursor: pointer; }
button:hover, button:focus-visible { color: #eee0b9; border-color: #bc9757; background: #1b2029; outline: 1px solid #bc9757; outline-offset: 2px; }
#player { display: flex; flex-direction: column; align-items: center; max-width: 100%; }
header { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 0 1px 11px; }
header h1 { font-size: 11px; letter-spacing: 2px; margin: 0; font-weight: 500; }
#scale { color: #63717a; font-size: 10px; white-space: nowrap; }
#screen { position: relative; border: 1px solid #474235; outline: 5px solid #11141b; box-sizing: content-box; }
canvas { display: block; width: 768px; height: 672px; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; outline: none; background: #080b10; }
canvas:focus-visible { outline: 1px solid #9e8357; outline-offset: 2px; }
#loading { position: absolute; inset: 0; display: grid; place-items: center; background: #080b10; text-align: center; padding: 25px; font-size: 12px; }
#loading[hidden] { display: none; }
footer { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; }
.hints { font-size: 10px; color: #76838b; line-height: 1.8; }
.hints strong { font-weight: normal; color: #c5b998; }
.actions { display: flex; gap: 7px; }
#status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#touch { display: none; }
#player:fullscreen { background: #080a10; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
#player:fullscreen header, #player:fullscreen footer { display: none; }
#player:fullscreen #screen { border: none; outline: none; }
@media (pointer: coarse) {
  #touch { width: 100%; display: flex; justify-content: space-between; margin-top: 15px; gap: 12px; touch-action: none; }
  .dpad { display: grid; grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(3, 32px); gap: 3px; }
  .dpad button { padding: 4px; }
  .dpad [data-control="up"] { grid-column: 2; }
  .dpad [data-control="left"] { grid-column: 1; grid-row: 2; }
  .dpad [data-control="down"] { grid-column: 2; grid-row: 3; }
  .dpad [data-control="right"] { grid-column: 3; grid-row: 2; }
  .pad-actions { display: grid; grid-template-columns: repeat(2, 62px); grid-template-rows: repeat(2, 40px); gap: 7px; }
  .pad-actions button { font-size: 10px; padding: 7px; }
  footer { align-items: center; justify-content: center; }
  .hints { display: none; }
  header h1 { font-size: 9px; letter-spacing: 1px; }
  #scale { font-size: 8px; }
}
@media (max-width: 700px) { footer { flex-direction: column; gap: 8px; } .hints { text-align: center; } }