/*
 * 单主题设计:刻意只做"霓虹街机屏"一种观感,所以不写深色媒体查询,
 * 而是把背景和每一处颜色都显式定死在 token 上。
 */
:root {
  --bg: #05060a;
  --bg-glow: #101733;
  --fg: #c8d6f2;
  --fg-dim: #6f7c99;
  --accent: #5fe3ff;
  --line: #1b2140;
  --glow: rgba(47, 111, 224, 0.22);
  --key-bg: #0c1020;
  --key-bg-active: #16203c;
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* 用 hidden 属性切换显示,不要靠改 style */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  background: var(--bg);
  background-image: radial-gradient(circle at 50% 42%, var(--bg-glow) 0%, var(--bg) 68%);
  color: var(--fg-dim);
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;

  /* 手机上一切手势都交给游戏:不滚页、不缩放、不下拉刷新 */
  touch-action: none;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: 100%;

  /* 侧边栏距,同时避开手机侧边和底部的系统栏 */
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

canvas#screen {
  display: block;
  /* 关掉插值,放大后保持硬边像素 */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
  border-radius: 3px;
  box-shadow:
    0 0 0 2px var(--line),
    0 0 0 3px #0a0d18,
    0 0 60px var(--glow);
  touch-action: none;
}

/* ---- 画面下方的说明 / 操作区 ---- */

#hint {
  max-width: 100%;
  text-align: center;
  color: #55617a;
}

#keys { line-height: 1.7; letter-spacing: 0.02em; }
#keys b { color: var(--fg); font-weight: 600; }

/* 触屏设备上才出现的操作条 */
#touch {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

#touch button {
  min-width: 72px;
  min-height: 46px;      /* 拇指点得准的最小尺寸 */
  padding: 0 14px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 9px;
  background: var(--key-bg);
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  touch-action: none;    /* 连点不触发缩放 */
}

#touch button:active { background: var(--key-bg-active); }
#touch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#touch button:disabled { opacity: 0.35; }

/* 脚本启用触屏模式之前,先别让它露出来 */
body:not(.touch-mode) #touch { display: none; }

@media (max-height: 620px) {
  body { gap: 8px; font-size: 12px; }
  #keys { font-size: 11px; }
}

/* 横屏或矮屏:竖向空间紧张,操作条压缩,把空间让给画面 */
@media (max-height: 520px) {
  #touch button { min-height: 38px; min-width: 64px; font-size: 12px; }
}