/* 跳跳童学 · 儿童闯关游戏样式
 * 面向平板触屏：大按钮、大字号、无 hover 依赖、自适应横竖屏。
 * 所有类名以 .tt- 前缀，避免与网页版样式冲突。
 */

.tt-scope{padding:0}
.tt-game,.tt-result{max-width:1100px;margin:0 auto;-webkit-tap-highlight-color:transparent}

/* 全局触屏优化：禁用双击缩放与长按选中 */
.tt-scope button,.tt-scope select,.tt-opt,.tt-lv{
  touch-action:manipulation;-webkit-user-select:none;user-select:none
}

/* ============================ 英雄卡 / 关卡地图 ============================ */
.tt-hero{
  display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:linear-gradient(135deg,#7C3AED,#9333EA 60%,#A855F7);color:#fff;
  border-radius:22px;padding:22px 24px;box-shadow:0 14px 34px -18px rgba(124,58,237,.7)
}
.tt-hero-left{display:flex;gap:16px;align-items:center;min-width:260px;flex:1}
.tt-avatar{
  width:72px;height:72px;flex:none;border-radius:20px;display:grid;place-items:center;font-size:40px;
  background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.35)
}
.tt-hero-name{font-size:22px;font-weight:800;display:flex;align-items:center;gap:10px}
.tt-hero-lv{font-size:13px;font-weight:700;background:rgba(255,255,255,.22);padding:3px 10px;border-radius:99px}
.tt-expbar{height:12px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden;margin:10px 0 6px;max-width:420px}
.tt-expbar>i{display:block;height:100%;background:#FDE047;border-radius:99px;transition:width .4s}
.tt-expbar.big{background:#F3F4F6;max-width:520px;margin:16px auto 6px}
.tt-expbar.big>i{background:linear-gradient(90deg,#7C3AED,#A855F7)}
.tt-exp-text{font-size:12.5px;opacity:.92}
.tt-hero-right{display:flex;gap:10px;flex-wrap:wrap}
.tt-chip{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);padding:8px 14px;border-radius:99px;font-size:14px;font-weight:700}

.tt-tip{
  margin:16px 0 6px;background:var(--primary-xl,#F5F3FF);border:1px dashed #C4B5FD;
  color:var(--primary-d,#6D28D9);border-radius:14px;padding:12px 16px;font-size:14px;font-weight:600
}

.tt-world{margin-top:22px}
.tt-world-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.tt-world-emoji{font-size:24px}
.tt-world-head strong{font-size:18px;color:var(--wc,#7C3AED)}
.tt-world-sub{font-size:12.5px;color:var(--muted,#6B7280);font-weight:600}
.tt-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}

.tt-lv{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:#fff;border:3px solid var(--line,#E5E7EB);border-radius:20px;
  padding:18px 10px;min-height:132px;cursor:pointer;transition:transform .12s,border-color .12s;
  box-shadow:0 6px 18px -14px rgba(16,24,40,.5)
}
.tt-lv:active{transform:scale(.97)}
.tt-lv .tt-lv-no{font-size:30px;font-weight:900;color:var(--wc,#7C3AED);line-height:1}
.tt-lv.locked{opacity:.5;background:#F9FAFB;cursor:not-allowed}
.tt-lv.locked .tt-lv-no{font-size:26px}
.tt-lv.done{border-color:#BBF7D0;background:#F6FEF9}
.tt-lv-stars{font-size:15px;letter-spacing:2px}
.tt-lv-meta{font-size:11.5px;color:var(--muted,#6B7280);font-weight:600}

.tt-free{margin-top:26px;background:#fff;border:2px solid var(--line,#E5E7EB);border-radius:20px;padding:20px}
.tt-free-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.tt-free-head strong{font-size:17px}
.tt-free-head span{font-size:12.5px;color:var(--muted,#6B7280)}
.tt-free-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.tt-free-row label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink-2,#374151)}
.tt-free-row select{
  font:inherit;font-size:16px;padding:12px 14px;border-radius:14px;border:2px solid var(--line,#E5E7EB);
  background:#fff;color:var(--ink,#111827);min-height:52px
}
.tt-reset{margin-top:14px;text-align:right}
.tt-link{color:var(--muted-2,#9CA3AF);font-size:12.5px;text-decoration:underline;padding:8px}

.tt-big-btn{
  font:inherit;font-size:18px;font-weight:800;color:#fff;background:var(--primary,#7C3AED);
  border:none;border-radius:16px;padding:16px 30px;min-height:58px;cursor:pointer;
  box-shadow:0 10px 22px -14px rgba(124,58,237,.9);transition:transform .12s
}
.tt-big-btn:active{transform:scale(.97)}
.tt-big-btn.primary{background:linear-gradient(135deg,#7C3AED,#9333EA)}
.tt-big-btn.ghost{background:#fff;color:var(--ink-2,#374151);border:2px solid var(--line,#E5E7EB);box-shadow:none}

/* ============================ 对局界面 ============================ */
.tt-game{position:relative}
.tt-game.hurt{animation:tt-shake .45s}
@keyframes tt-shake{
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)}
  40%{transform:translateX(8px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(4px)}
}

.tt-hud{display:flex;align-items:center;gap:12px;padding:6px 2px 12px}
.tt-icon-btn{
  width:52px;height:52px;flex:none;border-radius:16px;border:2px solid var(--line,#E5E7EB);
  background:#fff;font-size:20px;display:grid;place-items:center;cursor:pointer;color:var(--ink-2,#374151)
}
.tt-icon-btn.round{border-radius:99px;width:56px;height:56px}
.tt-icon-btn:active{transform:scale(.94)}
.tt-hud-lives{display:flex;gap:2px;font-size:26px;line-height:1}
.tt-heart{filter:none;transition:opacity .2s}
.tt-heart.off{opacity:.22;filter:grayscale(1)}
.tt-hud-mid{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.tt-hud-level{font-size:15px;font-weight:800}
.tt-hud-exp{font-size:12px;color:var(--muted,#6B7280);font-weight:600}
.tt-combo{
  font-size:18px;font-weight:900;color:#D1D5DB;padding:6px 12px;border-radius:99px;
  background:#F9FAFB;border:2px solid var(--line,#E5E7EB);min-width:76px;text-align:center
}
.tt-combo.on{color:#fff;background:linear-gradient(135deg,#F59E0B,#EF4444);border-color:transparent;animation:tt-pop .3s}
@keyframes tt-pop{0%{transform:scale(.8)}60%{transform:scale(1.14)}100%{transform:scale(1)}}

.tt-monster-row{display:flex;align-items:center;gap:22px;background:#fff;border:2px solid var(--line,#E5E7EB);
  border-radius:22px;padding:16px 20px;margin-bottom:16px}
.tt-monster{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:200px}
.tt-monster-face{font-size:64px;line-height:1;transition:transform .18s}
.tt-monster.attack .tt-monster-face{animation:tt-mon-atk .5s}
.tt-monster.dead .tt-monster-face{animation:tt-mon-dead .6s forwards}
.tt-monster.spawn .tt-monster-face{animation:tt-mon-spawn .5s}
@keyframes tt-mon-atk{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.28) rotate(-8deg)}60%{transform:rotate(6deg)}100%{transform:scale(1)}}
@keyframes tt-mon-dead{0%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(1.3) rotate(14deg);opacity:.6}100%{transform:scale(.2) rotate(30deg);opacity:0}}
@keyframes tt-mon-spawn{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}
.tt-hp{width:200px;height:16px;border-radius:99px;background:#F3F4F6;overflow:hidden;border:1px solid var(--line,#E5E7EB)}
.tt-hp>i{display:block;height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,#10B981,#34D399);transition:width .35s}
.tt-hp-text{font-size:11.5px;color:var(--muted,#6B7280);font-weight:700;font-variant-numeric:tabular-nums}
.tt-dmg{
  position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  font-size:30px;font-weight:900;color:#EF4444;text-shadow:0 2px 0 #fff;
  animation:tt-dmg .9s forwards;pointer-events:none
}
@keyframes tt-dmg{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}25%{opacity:1;transform:translate(-50%,-10px) scale(1.2)}100%{opacity:0;transform:translate(-50%,-46px) scale(1)}}

.tt-prog{margin-left:auto;text-align:right}
.tt-prog span{font-size:13px;font-weight:700;color:var(--muted,#6B7280)}
.tt-dots{display:flex;gap:6px;margin-top:8px;justify-content:flex-end;flex-wrap:wrap}
.tt-dot{width:14px;height:14px;border-radius:99px;background:#E5E7EB;display:block}
.tt-dot.ok{background:#10B981}
.tt-dot.bad{background:#EF4444}
.tt-dot.now{outline:3px solid #C4B5FD;outline-offset:2px}

.tt-timer{height:14px;border-radius:99px;background:#F3F4F6;overflow:hidden;margin-bottom:14px;border:1px solid var(--line,#E5E7EB)}
.tt-timer>i{display:block;height:100%;background:linear-gradient(90deg,#F59E0B,#EF4444);transition:width .1s linear}

/* ---- 题目区 ---- */
.tt-stage{margin-bottom:18px}
.tt-qcard{
  background:#fff;border:2px solid var(--line,#E5E7EB);border-radius:24px;
  padding:22px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  box-shadow:0 10px 30px -22px rgba(16,24,40,.6)
}
.tt-qcard.bare{padding:26px 22px}
.tt-qword{font-size:clamp(40px,7vw,74px);font-weight:900;letter-spacing:1px;color:var(--primary-d,#6D28D9);line-height:1.05}
.tt-qipa{font-size:clamp(16px,2.4vw,22px);color:var(--muted,#6B7280)}
.tt-qcn{font-size:clamp(20px,3vw,28px);font-weight:800;color:var(--ink,#111827)}
.tt-qcn-answer{
  margin-top:14px;text-align:center;font-size:clamp(20px,3vw,30px);font-weight:900;color:#047857;
  background:#ECFDF5;border:2px solid #A7F3D0;border-radius:16px;padding:10px 22px;display:inline-block
}
.tt-qrow{display:flex;align-items:center;gap:12px}
.tt-qhint{font-size:clamp(15px,2.2vw,20px);color:var(--muted-2,#9CA3AF)}

/* ---- 配图元素 ---- */
.tt-art{display:grid;place-items:center;width:100%;height:100%}
.tt-emoji{font-size:clamp(46px,7vw,76px);line-height:1.1}
.tt-art-big .tt-emoji{font-size:clamp(90px,16vw,170px)}
.tt-color{
  display:block;width:clamp(80px,14vw,150px);height:clamp(80px,14vw,150px);border-radius:24px;
  border:4px solid rgba(17,24,39,.12);box-shadow:inset 0 -8px 20px rgba(0,0,0,.06)
}
.tt-num{font-size:clamp(80px,15vw,150px);font-weight:900;color:var(--primary,#7C3AED);line-height:1}
.tt-shape{width:clamp(80px,14vw,150px);height:clamp(80px,14vw,150px)}

/* ---- 选项 ---- */
.tt-options{display:grid;gap:14px}
.tt-options.four{grid-template-columns:repeat(2,1fr)}
.tt-options.pic{grid-template-columns:repeat(2,1fr)}
.tt-opt{
  background:#fff;border:3px solid var(--line,#E5E7EB);border-radius:22px;cursor:pointer;
  min-height:118px;padding:12px;display:grid;place-items:center;transition:transform .12s,border-color .12s,background .12s;
  box-shadow:0 8px 22px -18px rgba(16,24,40,.6)
}
.tt-opt:active{transform:scale(.97)}
.tt-opt-word{font-size:clamp(26px,4.4vw,44px);font-weight:900;color:var(--ink,#111827);letter-spacing:.5px;word-break:break-word}
.tt-opt.pic{min-height:168px}
.tt-opt.dim{opacity:.55}
.tt-opt.right{border-color:#10B981;background:#ECFDF5;opacity:1;animation:tt-good .4s}
.tt-opt.right .tt-opt-word{color:#047857}
.tt-opt.wrong{border-color:#EF4444;background:#FEF2F2;opacity:1;animation:tt-shake .45s}
.tt-opt.wrong .tt-opt-word{color:#B91C1C}
@keyframes tt-good{0%{transform:scale(1)}45%{transform:scale(1.06)}100%{transform:scale(1)}}

/* ============================ 结算界面 ============================ */
.tt-result{
  background:#fff;border:2px solid var(--line,#E5E7EB);border-radius:26px;padding:32px 24px;text-align:center;
  box-shadow:0 16px 40px -30px rgba(16,24,40,.8)
}
.tt-result.ok{border-color:#A7F3D0}
.tt-result-icon{font-size:76px;line-height:1}
.tt-result h2{margin-top:8px;font-size:clamp(24px,3.4vw,34px)}
.tt-stars{font-size:40px;letter-spacing:8px;margin:10px 0 18px}
.tt-result-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;max-width:640px;margin:0 auto
}
.tt-result-grid>div{
  background:var(--primary-xl,#F5F3FF);border-radius:18px;padding:14px 10px;font-size:13px;font-weight:700;color:var(--muted,#6B7280)
}
.tt-result-grid>div>span{display:block;font-size:30px;font-weight:900;color:var(--primary-d,#6D28D9);margin-bottom:4px}
.tt-up{
  display:inline-block;margin-top:18px;background:linear-gradient(135deg,#F59E0B,#EF4444);color:#fff;
  padding:10px 22px;border-radius:99px;font-weight:800;font-size:16px
}
.tt-allright{margin-top:18px;color:#047857;font-weight:800;font-size:16px}
.tt-wrongbox{margin-top:20px;background:#FFFBEB;border:2px dashed #FCD34D;border-radius:18px;padding:16px;text-align:left}
.tt-wronghead{font-size:14px;font-weight:800;color:#B45309;margin-bottom:10px}
.tt-wronglist{display:flex;flex-wrap:wrap;gap:10px}
.tt-wrongword{
  font:inherit;font-size:19px;font-weight:800;background:#fff;border:2px solid #FDE68A;border-radius:14px;
  padding:10px 16px;cursor:pointer;min-height:52px;display:flex;align-items:center;gap:10px
}
.tt-wrongword em{font-style:normal;font-size:13px;font-weight:600;color:var(--muted,#6B7280)}
.tt-wrongword:active{transform:scale(.96)}
.tt-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* ============================ 平板 / 横竖屏适配 ============================ */
/* 竖屏平板、手机：题目在上，选项在下（默认即是） */

/* 横屏平板 / 桌面：左右分栏，选项更大更宽松 */
@media (min-width:900px) and (orientation:landscape){
  .tt-game{display:grid;grid-template-columns:minmax(340px,1fr) minmax(420px,1.15fr);grid-template-areas:
    "hud hud" "mon prog" "stage opts" "timer opts";gap:0 26px;align-items:start}
  .tt-hud{grid-area:hud}
  .tt-monster-row{grid-area:mon}
  .tt-timer{grid-area:timer}
  .tt-stage{grid-area:stage;margin-bottom:0}
  .tt-options{grid-area:opts}
  .tt-options.four,.tt-options.pic{grid-template-columns:repeat(2,1fr)}
  .tt-opt.pic{min-height:180px}
}
/* 大横屏：单词选项排成 4 列更好点 */
@media (min-width:1200px){
  .tt-options.four{grid-template-columns:repeat(2,1fr)}
}
/* 竖屏手机：选项两列，按钮略矮但仍够大 */
@media (max-width:520px){
  .tt-opt{min-height:96px}
  .tt-opt.pic{min-height:132px}
  .tt-hero{padding:18px}
  .tt-hud-mid{display:none}
}
/* 矮屏（横屏手机）：压缩留白 */
@media (max-height:520px){
  .tt-monster-face{font-size:44px}
  .tt-monster-row{padding:10px 14px;margin-bottom:10px}
  .tt-qcard{padding:14px}
  .tt-opt.pic{min-height:120px}
}