body { background: var(--bg); font-family: system-ui, sans-serif; display: flex; justify-content: center; padding: 2rem 1rem; min-height: 100vh; overflow-x: hidden; }
#app { max-width: 520px; width: 100%; }

#info-btn,
#palette-btn,
#profile-btn,
#theme-btn,
#in-game-retry-btn,
#in-game-home-btn { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 0; width: 38px; height: 38px; font-size: 18px; cursor: pointer; color: var(--text); line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.12s; }
#info-btn:hover,
#palette-btn:hover,
#profile-btn:hover,
#in-game-retry-btn:hover,
#in-game-home-btn:hover,
#theme-btn:hover { background: var(--hover-bg); }

#profile-btn .fi { width: 22px; height: 22px; border-radius: 2px; }

#header { display: flex; align-items: stretch; gap: 12px; margin-bottom: 16px; }
#info-box { flex: 1; border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; display: grid; grid-template-columns: 1fr auto; align-content: center; background: var(--surface); }
#level-label { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; grid-column: 1; grid-row: 1; }
#timer { font-size: 40px; font-weight: 500; color: var(--text); line-height: 1; grid-column: 1; grid-row: 2; }
#header-actions { display: none; grid-column: 2; grid-row: 1 / 3; flex-direction: row; gap: 6px; align-items: flex-start; justify-content: flex-end; padding-left: 8px; padding-top: 0px; }
body:not(.prestart) #header-actions { display: flex; }
#lives-display { font-size: 16px; color: var(--text-muted); margin-top: 4px; line-height: 1; letter-spacing: 2px; grid-column: 1; grid-row: 3; }
#lives-display[hidden] { display: none; }
#score-display { font-size: 16px; color: var(--text-muted); margin-top: 4px; line-height: 1; grid-column: 2; grid-row: 3; align-self: end; text-align: right; }
#score-display[hidden] { display: none; }
#ref-box { border: 1px solid var(--border); border-radius: 12px; padding: 8px; background: var(--surface); }
#ref-grid { display: grid; grid-template-columns: repeat(3, 36px); grid-template-rows: repeat(3, 36px); gap: 2px; }
.ref-cell { width: 36px; height: 36px; border: 0.5px solid var(--ref-border); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; color: var(--text); background: var(--ref-cell-bg); }

#play-area { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--surface); }
#play-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 6px; aspect-ratio: 1 / 1; }
.play-cell { border: 1px solid var(--border-strong); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 500; cursor: pointer; background: var(--surface); color: var(--text); transition: background 0.12s; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.play-cell:hover { background: var(--hover-bg); }
.play-cell.empty { color: transparent; }
.play-cell.disabled { cursor: not-allowed; opacity: 0.45; }
.play-cell.disabled:hover { background: var(--surface); }
.play-cell.match { box-shadow: inset 0 0 0 2px var(--match-border); }
.play-cell.wrong { box-shadow: inset 0 0 0 2px var(--wrong-border); }

.ref-cell.val-1, .play-cell.val-1 { background: var(--n1-bg); color: var(--n1-fg); border-color: color-mix(in srgb, var(--n1-bg), #000 18%); }
.ref-cell.val-2, .play-cell.val-2 { background: var(--n2-bg); color: var(--n2-fg); border-color: color-mix(in srgb, var(--n2-bg), #000 18%); }
.ref-cell.val-3, .play-cell.val-3 { background: var(--n3-bg); color: var(--n3-fg); border-color: color-mix(in srgb, var(--n3-bg), #000 18%); }
.ref-cell.val-4, .play-cell.val-4 { background: var(--n4-bg); color: var(--n4-fg); border-color: color-mix(in srgb, var(--n4-bg), #000 18%); }
.ref-cell.val-5, .play-cell.val-5 { background: var(--n5-bg); color: var(--n5-fg); border-color: color-mix(in srgb, var(--n5-bg), #000 18%); }
.ref-cell.val-6, .play-cell.val-6 { background: var(--n6-bg); color: var(--n6-fg); border-color: color-mix(in srgb, var(--n6-bg), #000 18%); }
.ref-cell.val-7, .play-cell.val-7 { background: var(--n7-bg); color: var(--n7-fg); border-color: color-mix(in srgb, var(--n7-bg), #000 18%); }
.ref-cell.val-8, .play-cell.val-8 { background: var(--n8-bg); color: var(--n8-fg); border-color: color-mix(in srgb, var(--n8-bg), #000 18%); }
.ref-cell.val-9, .play-cell.val-9 { background: var(--n9-bg); color: var(--n9-fg); border-color: color-mix(in srgb, var(--n9-bg), #000 18%); }

body.prestart #ref-box { visibility: hidden; }
body.prestart #play-grid { pointer-events: none; }

@media (max-width: 420px) {
  body { padding: 1rem 0.75rem; }
  #header { gap: 8px; }
  #info-box { padding: 10px 12px; }
  #timer { font-size: 32px; }
  #ref-grid { grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(3, 30px); }
  .ref-cell { width: 30px; height: 30px; font-size: 13px; }
}