/* Riêng game LCD Nokia (nạp sau /room.css): màn LCD xanh lá, bàn phím 2-4-6-8. */
/* Màn tràn: LCD rộng hết cỡ ở trên, khoảng trống giữa để vuốt, phím mũi tên gọn ở đáy (tầm ngón cái).
   Cỡ LCD tính theo chỗ trống thật của .stage (container query), giữ tỉ lệ 84:48. */
.phone { height: 100%; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center; gap: 10px; touch-action: none; }
.screen {
  width: min(100cqw, 840px, calc((100cqh - 230px) * 1.75 + 12px)); padding: 6px; background: #10181f; border-radius: 12px;
  box-shadow: inset 0 2px 6px #000a, 0 10px 30px #0006;
}
.screen canvas { display: block; width: 100%; aspect-ratio: 84 / 48; image-rendering: pixelated; border-radius: 6px; box-shadow: inset 0 0 12px #0003; }
.hint .keys { display: none; }
.pad { width: min(230px, 64cqw); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pad button {
  aspect-ratio: 1.3; border-radius: 30%; padding: 0; display: grid; place-items: center; align-content: center; gap: 0; line-height: 1;
  background: linear-gradient(#e8eef3, #b9c6d1); color: #1c2a36; border: 0; box-shadow: 0 3px 0 #0006; touch-action: none;
}
.pad button b { font-size: 17px; }
.pad button small { font-size: 10px; opacity: .7; }
.pad button small .ic { width: 1.4em; height: 1.4em; }
.pad button.on { transform: translateY(2px); box-shadow: 0 1px 0 #0006; background: linear-gradient(#cfd9e2, #a3b3c0); }
.pad button[data-k="ok"] { background: linear-gradient(#b8f07a, #7cc242); }
.pad button.blank { visibility: hidden; }
/* Máy tính (chuột + bàn phím): ẩn phím trên màn, LCD to hơn, chỉ ghi phím tắt. */
@media (hover: hover) and (pointer: fine) {
  .pad, .hint .touch { display: none; }
  .hint .keys { display: inline; }
  .phone { grid-template-rows: auto auto; align-content: center; }
  .screen { width: min(100cqw, 840px, calc((100cqh - 40px) * 1.75 + 12px)); }
}
/* Điện thoại xoay ngang: LCD bên trái cao hết cỡ, phím bên phải. */
@media (orientation: landscape) and (max-height: 560px) and (pointer: coarse) {
  .phone { grid-template-columns: 1fr auto; grid-template-rows: 1fr; }
  .screen { width: min(calc(100cqw - 200px), calc((100cqh - 4px) * 1.75 + 12px)); }
  .pad { width: 180px; }
}