body {
  font-family: 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  overflow: hidden;
  transition: background 0.2s, color 0.2s;
}

/* ── Portrait ── */
#app {
  width: 400px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transform-origin: center center;
}

#panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

h1 {
  font-size: 2rem;
  letter-spacing: 0.15em;
  color: var(--text-given);
  text-align: center;
  width: 368px;
}

/* ── Landscape ── */
#app.landscape {
  display: grid;
  grid-template-columns: 332px auto;
  grid-template-rows: auto 1fr;
  grid-template-areas: "h h" "g p";
  width: 570px;
  padding: 12px;
  gap: 6px 14px;
}
#app.landscape h1     { grid-area: h; width: auto; }
#app.landscape #grid  { grid-area: g; width: 332px; height: 332px; }
#app.landscape #panel { grid-area: p; justify-content: center; }
#app.landscape #numpad {
  grid-auto-flow: column;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 1fr);
  width: 192px;
  height: 280px;
}