:root{
  --bg:#0d0f17;
  --bg-2:#141826;
  --card:#181d2c;
  --card-2:#1f2536;
  --line:#2b3346;
  --text:#e9ecf5;
  --dim:#98a2ba;
  --accent:#5b8cff;
  --accent-2:#7c5cff;
  --ok:#22c55e;
  --bad:#ef4444;
  --gold:#f5b400;
  --radius:16px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

html,body{
  margin:0;padding:0;height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  overscroll-behavior:none;
}

body{display:flex;flex-direction:column;}
#app{flex:1;display:flex;flex-direction:column;min-height:0;}

/* ---------- 屏幕切换 ---------- */
.screen{display:none;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.screen.active{display:flex;flex-direction:column;}
.screen-game{padding:0;overflow:hidden;}

/* ---------- 面板 ---------- */
.panel{
  margin:auto;
  width:100%;
  max-width:520px;
  padding:28px 22px 32px;
}
.panel-wide{max-width:680px;}

.title{
  font-size:34px;margin:0 0 6px;letter-spacing:.04em;
  background:linear-gradient(100deg,#5b8cff,#7c5cff 45%,#f5b400);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:800;
}
.subtitle{margin:0 0 26px;color:var(--dim);font-size:14px;}
.section-title{font-size:20px;margin:0;font-weight:700;}

/* ---------- 数据格 ---------- */
.stat-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;
}
.stat{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;display:flex;flex-direction:column;gap:3px;
}
.stat-label{font-size:12px;color:var(--dim);}
.stat-value{font-size:17px;font-weight:700;}

/* ---------- 装备条 ---------- */
.loadout-bar{
  display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;
}
.loadout-item{
  flex:1;min-width:96px;
  background:var(--card-2);border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;display:flex;flex-direction:column;gap:3px;
}
.lo-label{font-size:11px;color:var(--dim);}
.lo-value{font-size:15px;font-weight:700;}

/* ---------- 按钮 ---------- */
.btn-col{display:flex;flex-direction:column;gap:10px;margin-top:8px;}
.btn{
  appearance:none;border:1px solid var(--line);
  background:var(--card-2);color:var(--text);
  font-size:16px;font-weight:600;font-family:inherit;
  padding:14px 18px;border-radius:13px;cursor:pointer;
  transition:transform .08s ease,filter .15s ease,background .15s ease;
}
.btn:active{transform:scale(.985);}
.btn-primary{
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  border-color:transparent;color:#fff;box-shadow:0 6px 22px -8px rgba(91,140,255,.9);
}
.btn-ghost{background:transparent;color:var(--dim);font-size:14px;padding:11px 16px;}
.btn-sm{padding:9px 14px;font-size:13px;margin-top:14px;}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.5);}
.hint{margin:16px 0 0;font-size:13px;color:var(--dim);min-height:18px;text-align:center;}

/* ---------- 背单词 ---------- */
.quiz-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.quiz-tag{
  font-size:12px;padding:4px 10px;border-radius:999px;
  background:rgba(91,140,255,.15);color:#8fb0ff;font-weight:600;
}
.quiz-progress{font-size:13px;color:var(--dim);}
.quiz-meters{display:flex;gap:10px;margin-bottom:18px;}
.meter{
  flex:1;background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:9px 12px;display:flex;justify-content:space-between;align-items:center;
}
.meter-label{font-size:12px;color:var(--dim);}
.meter-value{font-size:14px;font-weight:700;}
.meter-value.ok{color:var(--ok);}
.meter-value.bad{color:var(--bad);}

.word-card{
  background:linear-gradient(160deg,var(--card),var(--card-2));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 20px;text-align:center;margin-bottom:18px;
}
.word-en{font-size:42px;font-weight:800;letter-spacing:.01em;line-height:1.15;word-break:break-word;}
.word-ipa{margin-top:8px;font-size:14px;color:var(--dim);font-family:ui-monospace,Menlo,Consolas,monospace;}

.options{display:grid;grid-template-columns:1fr;gap:10px;}
.opt{
  appearance:none;font-family:inherit;text-align:left;
  background:var(--card);border:1px solid var(--line);color:var(--text);
  padding:15px 18px;border-radius:13px;font-size:16px;cursor:pointer;
  transition:background .12s ease,border-color .12s ease,transform .08s ease;
}
.opt:active{transform:scale(.99);}
.opt.right{background:rgba(34,197,94,.16);border-color:var(--ok);}
.opt.wrong{background:rgba(239,68,68,.16);border-color:var(--bad);}
.opt[disabled]{cursor:default;}
.quiz-feedback{margin-top:14px;min-height:22px;font-size:14px;font-weight:600;text-align:center;}

/* ---------- 结算 ---------- */
.result-title{font-size:26px;margin:0 0 10px;font-weight:800;}
.result-desc{color:var(--dim);font-size:15px;line-height:1.7;margin:0 0 22px;white-space:pre-line;}

/* ---------- 商店 ---------- */
.shop-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px;}
.coin-badge{
  font-size:13px;color:var(--dim);background:var(--card-2);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;white-space:nowrap;
}
.coin-badge b{color:var(--gold);font-size:15px;}

.tabs{display:flex;gap:8px;margin-bottom:14px;}
.tab{
  flex:1;appearance:none;font-family:inherit;font-size:14px;font-weight:600;
  background:var(--card);border:1px solid var(--line);color:var(--dim);
  padding:10px 8px;border-radius:11px;cursor:pointer;
}
.tab.active{background:rgba(91,140,255,.16);border-color:rgba(91,140,255,.5);color:#9fbcff;}

.shop-list{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;min-height:120px;}
.item{
  background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:14px 16px;display:flex;gap:14px;align-items:center;
}
.item.equipped{border-color:rgba(91,140,255,.6);background:rgba(91,140,255,.08);}
.item-main{flex:1;min-width:0;}
.item-name{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.item-desc{font-size:12.5px;color:var(--dim);margin-top:4px;line-height:1.55;}
.item-meta{font-size:12px;color:var(--dim);margin-top:5px;display:flex;gap:12px;flex-wrap:wrap;}
.chip{
  font-size:11px;padding:2px 8px;border-radius:999px;font-weight:700;
  background:rgba(34,197,94,.15);color:#4ade80;
}
.chip.gold{background:rgba(245,180,0,.15);color:#fbbf24;}
.item-btn{
  appearance:none;font-family:inherit;font-size:13.5px;font-weight:700;
  padding:10px 16px;border-radius:11px;cursor:pointer;white-space:nowrap;
  border:1px solid var(--line);background:var(--card-2);color:var(--text);
}
.item-btn.buy{background:linear-gradient(100deg,var(--accent),var(--accent-2));border-color:transparent;color:#fff;}
.item-btn:disabled{opacity:.4;cursor:not-allowed;}

/* ---------- 游戏 ---------- */
.game-shell{
  position:relative;flex:1;min-height:0;
  display:flex;flex-direction:column;
  background:#0a0c13;
}
.canvas-host{
  position:relative;flex:1;min-height:0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.canvas-host canvas{
  display:block;
  width:100% !important;height:100% !important;
  object-fit:contain;
  image-rendering:auto;
}

.hud{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));
  background:rgba(10,12,19,.92);border-bottom:1px solid var(--line);
  font-size:13px;z-index:5;
}
.hud-left,.hud-right{display:flex;align-items:center;gap:14px;}
.hud-hp{display:flex;gap:5px;}
.heart{
  width:15px;height:15px;border-radius:4px;
  background:linear-gradient(160deg,#ff5d5d,#c62828);
  box-shadow:0 0 8px -2px rgba(255,93,93,.9);
}
.heart.empty{background:#2b3346;box-shadow:none;}
.hud-weapon{
  font-weight:700;color:#9fbcff;
  background:rgba(91,140,255,.12);border-radius:8px;padding:4px 10px;
}
.hud-coin b{color:var(--gold);}
.hud-level{color:var(--dim);}
/* 关卡内右上角操作条 */
.game-topbar{
  position:absolute;top:calc(56px + env(safe-area-inset-top));right:10px;z-index:7;
  display:flex;gap:8px;
}
.btn-abort,.btn-fullscreen,.btn-music{
  background:rgba(24,29,44,.72);backdrop-filter:blur(6px);
  font-size:12.5px;padding:8px 12px;border-color:rgba(255,255,255,.1);
}

/* ---------- BOSS 血条 ---------- */
.boss-bar{
  position:absolute;left:50%;transform:translateX(-50%) translateY(-8px);
  top:calc(52px + env(safe-area-inset-top));
  width:min(64%,460px);z-index:6;
  padding:7px 12px 8px;border-radius:12px;
  background:rgba(18,12,26,.78);backdrop-filter:blur(6px);
  border:1px solid rgba(186,82,220,.45);
  box-shadow:0 8px 26px -12px rgba(186,82,220,.9);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
.boss-bar.show{opacity:1;transform:translateX(-50%) translateY(0);}
.boss-bar.rage{border-color:rgba(255,90,90,.6);box-shadow:0 8px 26px -12px rgba(255,90,90,.95);}
.boss-bar.cleared{border-color:rgba(34,197,94,.6);box-shadow:0 8px 26px -12px rgba(34,197,94,.9);}
.boss-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:5px;}
.boss-name{font-size:13px;font-weight:800;letter-spacing:.06em;color:#d9b3ff;}
.boss-bar.rage .boss-name{color:#ffb3b3;}
.boss-bar.cleared .boss-name{color:#7ee0a0;}
.boss-hp{font-size:11.5px;color:var(--dim);font-family:ui-monospace,Menlo,Consolas,monospace;}
.boss-track{
  height:9px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.08);
}
.boss-fill{
  height:100%;width:100%;border-radius:999px;
  background:linear-gradient(90deg,#8b3fd6,#d05cff);
  transition:width .18s ease;
}
.boss-bar.rage .boss-fill{background:linear-gradient(90deg,#d63f3f,#ff8a5c);}
.boss-bar.cleared .boss-fill{background:linear-gradient(90deg,#1f9d55,#4ade80);}
.boss-hint{
  font-size:11.5px;color:#ffb3b3;text-align:center;margin-top:5px;
  height:0;overflow:hidden;opacity:0;transition:opacity .2s ease;
}
.boss-hint.show{height:auto;opacity:1;}

/* ---------- 虚拟按键（半透明浮层，覆盖在画布上） ---------- */
.touch-controls{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:12px;padding:0 16px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
  background:transparent;border-top:none;
  pointer-events:none;
  touch-action:none;user-select:none;
}
.touch-controls .pad,
.touch-controls .actions{pointer-events:auto;}
/* 左手只管移动（▼ 蹲下），跳跃挪到右下角大圆键，
   单手不再同时兼顾「往前走」和「跳」 */
.pad{display:flex;gap:8px;}
.actions{display:flex;align-items:flex-end;gap:10px;}
.tbtn{
  appearance:none;font-family:inherit;color:var(--text);
  /* 半透明，尽量不挡画面；靠亮边框 + 文字阴影保证轮廓和字还看得清 */
  background:rgba(24,30,46,.30);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(3px);
  border-radius:14px;cursor:pointer;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  text-shadow:0 1px 4px rgba(0,0,0,.85);
  touch-action:none;user-select:none;
}
.tbtn-dir{width:54px;height:54px;font-size:18px;}
.tbtn-attack{
  width:88px;height:88px;font-size:17px;border-radius:50%;
  background:linear-gradient(150deg,rgba(255,107,107,.55),rgba(211,47,47,.55));
  border-color:rgba(255,255,255,.24);color:#fff;
  box-shadow:0 6px 20px -8px rgba(255,80,80,.7);
}
.tbtn-switch{
  width:56px;height:56px;font-size:14px;border-radius:50%;
  background:rgba(91,140,255,.22);border-color:rgba(255,255,255,.2);
}
/* 跳跃：右下角最大的圆键，绿色系与红色攻击键区分开；
   底色压到 .30 且去掉模糊，让画面透出来，靠亮边框 + 字阴影保住轮廓 */
.tbtn-jump{
  width:100px;height:100px;font-size:22px;border-radius:50%;
  background:linear-gradient(150deg,rgba(86,224,168,.30),rgba(18,140,110,.30));
  border:1.5px solid rgba(255,255,255,.34);color:#fff;
  backdrop-filter:none;
  box-shadow:0 6px 22px -10px rgba(60,220,160,.45);
  text-shadow:0 1px 5px rgba(0,0,0,.95);
}
.tbtn.pressed{filter:brightness(1.45);transform:scale(.96);}

/* ---------- 说明页 ---------- */
.help-body{margin:6px 0 20px;}
.help-body h3{font-size:15px;margin:20px 0 8px;color:#9fbcff;}
.help-body p{margin:0 0 8px;font-size:14px;color:#cdd5e6;line-height:1.75;}
.help-body ul{margin:0;padding-left:20px;}
.help-body li{font-size:14px;color:#cdd5e6;line-height:1.75;margin:7px 0;}
.help-body b{color:#fff;}

/* ---------- 存档管理 ---------- */
.save-note{font-size:13.5px;color:var(--dim);line-height:1.75;margin:10px 0 4px;}
.save-sub{font-size:15px;margin:22px 0 6px;color:#9fbcff;}
.save-tip{font-size:12.5px;color:var(--dim);line-height:1.65;margin:0 0 10px;}
.save-code{
  display:block;width:100%;resize:vertical;min-height:78px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.6;
  color:var(--text);background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;margin-bottom:10px;
  word-break:break-all;
}
.save-code:focus{outline:none;border-color:rgba(91,140,255,.6);}
.save-code::placeholder{color:#5b657f;}
.save-msg{margin:18px 0 0;font-size:13.5px;font-weight:600;line-height:1.65;min-height:20px;text-align:center;}
.save-msg.ok{color:var(--ok);}
.save-msg.bad{color:var(--bad);}

/* ---------- 竖屏提示浮层 ----------
   显示与否完全由 JS 控制（startGame 里判断横竖屏），
   不用媒体查询，避免「浮层自己冒出来」和 JS 判断打架 */
.rotate-hint{
  position:absolute;inset:0;z-index:20;
  display:none;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(8,10,17,.88);
  backdrop-filter:blur(5px);
}
.rotate-hint.show{display:flex;}
.rotate-card{
  width:100%;max-width:330px;text-align:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 20px 22px;
}
.rotate-icon{color:var(--accent);display:block;margin:0 auto 14px;}
.rotate-title{font-size:19px;font-weight:800;margin:0 0 8px;}
.rotate-sub{font-size:13.5px;color:var(--dim);line-height:1.65;margin:0 0 16px;}

/* 各系统的开启步骤 */
.rotate-steps{display:flex;flex-direction:column;gap:9px;margin:0 0 16px;text-align:left;}
.rotate-step{
  display:flex;gap:9px;align-items:flex-start;
  background:var(--card-2);border:1px solid var(--line);border-radius:10px;
  padding:9px 11px;
}
.rotate-os{
  flex:none;font-size:11px;font-weight:800;letter-spacing:.04em;
  color:#9fbcff;background:rgba(91,140,255,.14);
  border-radius:6px;padding:3px 7px;margin-top:1px;
}
.rotate-how{font-size:12.5px;color:var(--dim);line-height:1.6;}

.rotate-wait{
  font-size:12.5px;font-weight:700;color:var(--accent);
  margin:0 0 14px;letter-spacing:.02em;
}

/* 锁竖屏浏览器（微信等）的兜底入口 */
.rotate-fallback{
  margin:0 0 12px;padding-top:14px;
  border-top:1px solid var(--line);
}
.rotate-fb-tip{font-size:12px;color:var(--dim);line-height:1.6;margin:0 0 10px;}

/* ---------- 锁竖屏兜底：把游戏壳整体转 90° ----------
   微信内置浏览器会把页面锁在竖屏，横过手机页面也不转。
   这时把整个游戏壳旋转 90° 铺满竖屏，用户把手机横过来看，
   观感和真横屏一致。游戏引擎不读窗口尺寸，纯 CSS 即可实现。 */
body.force-landscape{overflow:hidden;}
body.force-landscape .game-shell{
  position:fixed;
  top:50%;left:50%;
  width:100vh;width:100dvh;      /* 旋转前交换宽高 */
  height:100vw;height:100dvw;
  max-height:none;
  transform:translate(-50%,-50%) rotate(90deg);
  z-index:50;
}

/* ---------- 桌面端适配 ---------- */
@media (min-width:820px){
  .touch-controls{display:none;}
  .canvas-host{padding:0;}
  .game-shell{max-height:100%;}
}
@media (max-height:560px) and (orientation:landscape){
  .tbtn-dir{width:46px;height:46px;font-size:16px;}
  .tbtn-attack{width:74px;height:74px;font-size:15px;}
  .tbtn-switch{width:52px;height:52px;font-size:13px;}
  .tbtn-jump{width:84px;height:84px;font-size:19px;}
  .hud{font-size:12px;padding:6px 10px;}
  .game-topbar{top:44px;gap:6px;}
  .btn-abort,.btn-fullscreen,.btn-music{padding:6px 10px;font-size:11.5px;}
  .boss-bar{top:42px;padding:5px 10px 6px;}
  .boss-name{font-size:12px;}
}