/* ============================================================
   小恐龙跑酷 — 重写版样式
   页面是 Hexo 里 skip_render 的独立静态页，主题样式可能漏进来，
   所以关键属性都带 !important。
   ============================================================ */

:root{
  --bg:#f4f5f7;
  --card:#ffffff;
  --ink:#2f3136;
  --ink-dim:#7c828c;
  --line:#e3e6ea;
  --accent:#3d7d4f;
  --shadow:0 10px 30px rgba(20,24,30,.10), 0 2px 6px rgba(20,24,30,.06);
  --radius:14px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#14161a; --card:#1c1f25; --ink:#e7e9ee; --ink-dim:#8d939d;
    --line:#2a2f37; --accent:#7fc08f;
    --shadow:0 10px 30px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
  }
}

html,body{
  margin:0 !important; padding:0 !important;
  min-height:100%;
  background:var(--bg) !important;
  color:var(--ink) !important;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',system-ui,sans-serif !important;
  -webkit-text-size-adjust:100%;
}

*,*::before,*::after{ box-sizing:border-box; }

.stage{
  width:100%;
  max-width:1080px;
  margin:0 auto;
  padding:clamp(12px,2.5vw,28px);
  display:flex;
  flex-direction:column;
  gap:clamp(10px,1.6vw,16px);
}

/* ---------- 顶栏 ---------- */
.bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.bar__title{
  margin:0; font-size:clamp(17px,2.4vw,22px); font-weight:700; letter-spacing:.02em;
}
.bar__title::before{ content:'🦖'; margin-right:.45em; }
.bar__acts{ display:flex; gap:8px; }

.icon-btn{
  appearance:none; border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:10px; padding:7px 12px; font-size:14px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
  font-family:inherit;
}
.icon-btn:hover{ border-color:var(--accent); transform:translateY(-1px); }
.icon-btn:active{ transform:translateY(0) scale(.97); }
.icon-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.icon-btn[aria-pressed="true"]{ border-color:var(--accent); color:var(--accent); }
.icon-btn__label{ font-size:13px; }
@media (max-width:520px){ .icon-btn__label{ display:none; } }

/* ---------- 画面 ---------- */
.screen{
  position:relative;
  width:100%;
  min-height:136px;               /* 保证开始/结算面板放得下，竖屏手机上不被压扁 */
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius);
  overflow:hidden;
  background:#f7f7f7;
  box-shadow:var(--shadow);
  border:1px solid var(--line);
  transition:background .5s ease;
  touch-action:none;              /* 触摸只用来玩，不滚页面 */
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}

#cv{
  display:block;
  width:100%;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  background:#f7f7f7;
  transition:filter .5s ease;
}

/* 夜间：整块画布反相，和原作一致（HUD 也在画布里，一起反相） */
.screen[data-night="1"]{ background:#08090b; }
.screen[data-night="1"] #cv{ filter:invert(1); background:#08090b; }

/* ---------- 覆盖面板 ---------- */
.panel{
  position:absolute; inset:0;
  display:none;
  flex-direction:column;
  align-items:center; justify-content:center;
  gap:4px; padding:10px 16px; text-align:center;
  background:rgba(247,247,247,.9);
  backdrop-filter:blur(2px);
  color:#3a3d42;
  overflow:auto;
}
.screen[data-night="1"] .panel{ background:rgba(10,11,13,.86); color:#e8e8e8; }

.screen[data-state="ready"]  .panel--ready,
.screen[data-state="paused"] .panel--paused,
.screen[data-state="over"]   .panel--over{ display:flex; }

.panel__big{
  margin:0; font-weight:800; letter-spacing:.06em;
  font-size:clamp(16px,3.4vw,26px);
}
.panel__hint{
  margin:0; font-size:clamp(11px,1.7vw,13.5px); color:#787d85; line-height:1.7;
}
.screen[data-night="1"] .panel__hint{ color:#9aa0a8; }
.panel__newbest{
  margin:2px 0 0; font-weight:700; color:var(--accent);
  font-size:clamp(12px,2vw,15px); letter-spacing:.08em;
  animation:pulse 1s ease-in-out infinite alternate;
}
@keyframes pulse{ from{opacity:.55} to{opacity:1} }

.panel kbd{
  display:inline-block; padding:1px 6px; margin:0 1px;
  border:1px solid #c9ced6; border-bottom-width:2px; border-radius:5px;
  background:#fff; font-family:ui-monospace,Consolas,monospace; font-size:.92em;
}
.screen[data-night="1"] kbd{ background:#20242a; border-color:#3a4048; }

.stats{ display:flex; gap:clamp(14px,4vw,38px); margin:6px 0 2px; }
.stats div{ text-align:center; }
.stats dt{ font-size:11px; letter-spacing:.14em; color:#8b9099; }
.stats dd{
  margin:2px 0 0; font-family:ui-monospace,Consolas,monospace;
  font-weight:700; font-size:clamp(15px,2.6vw,21px);
}

/* 屏reader 播报 */
.live{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- 触屏按键 ---------- */
.pad{ display:none; gap:10px; }
.pad__key{
  flex:1; appearance:none; cursor:pointer; font-family:inherit; font-weight:700;
  font-size:15px; padding:15px 10px; border-radius:12px;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  touch-action:none; user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .08s ease, background .08s ease;
}
.pad__key--jump{ border-color:var(--accent); color:var(--accent); }
.pad__key.is-down{ transform:scale(.96); background:var(--line); }
/* 触屏按键的显隐：媒体查询负责真机（无闪烁），
   html.is-touch 由脚本按 navigator.maxTouchPoints 再兜一层，便于验证 */
@media (hover:none) and (pointer:coarse){ .pad{ display:flex; } }
html.is-touch .pad{ display:flex; }
/* 竖屏手机上游戏区只有一条，把两个键放大、贴紧画面，方便拇指 */
@media (hover:none) and (pointer:coarse){
  .pad__key{ padding:18px 10px; font-size:16px; }
}

/* ---------- 页脚 ---------- */
.foot{ font-size:12px; line-height:1.65; color:var(--ink-dim); }
.foot p{ margin:0 0 4px; }
.foot b{ color:var(--ink); }
.foot__best{ font-family:ui-monospace,Consolas,monospace; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}