* { box-sizing: border-box }
  body { margin: 0; min-height: 100svh; display: grid; place-items: center; background: #101820; color: #e8f0ec; font: 16px system-ui, sans-serif }
  main { width: min(90vw, 420px); text-align: center }
  header { display: flex; align-items: center; justify-content: space-between }
  h1 { font-size: 28px }
  canvas { width: 100%; display: block; background: #18262d; border: 1px solid #35474d; border-radius: 12px }
  p { color: #a9b9b7; line-height: 1.6 }
  button { border: 0; border-radius: 8px; padding: 12px 20px; background: #9ced88; color: #18262d; font: bold 16px system-ui; cursor: pointer; touch-action: manipulation }
  nav { margin: 16px auto; display: grid; grid-template-columns: repeat(3, 54px); gap: 6px; justify-content: center }
  nav button { padding: 12px }
  nav button[data-dir="ArrowUp"] { grid-column: 2 }
  nav button[data-dir="ArrowLeft"] { grid-column: 1 }
  #ranking { margin: 16px 0; padding: 16px; border: 1px solid #35474d; border-radius: 12px; background: #18262d }
  #ranking h2 { margin: 0 0 12px; font-size: 20px }
  #ranking ol { margin: 0; padding-left: 32px; text-align: left }
  #ranking li { padding: 6px }
  #ranking li:first-child { color: #ffcd49 }
  #ranking-note { margin: 12px 0 0; font-size: 13px }
  #name-form { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px }
  #name-form label { width: 100%; text-align: left }
  #player-name { min-width: 0; flex: 1; width: 140px; padding: 10px; border: 1px solid #71817f; border-radius: 8px; background: #101820; color: #e8f0ec; font: inherit }
  #ranking li { overflow-wrap: anywhere }