/*
 * style.css — 算王网页版（冻结版）全部样式：布局 + 演出动画（FLIP/演绎/庆祝）。
 * 领域归属：UI 外壳样式，不承载游戏逻辑；类名/id 与 index.html、各 JS 模块的 DOM 契约一一对应。
 * 关键约定：
 *   - 画布四层（彩图/遮罩/线稿/标签）共用同一坐标系，.canvas-layer 绝对定位铺满 #canvas-wrap；
 *   - 演出元素（.fly-chip/.fly-num/.derive-row 等）用 fixed/absolute 脱离文档流，不影响布局；
 *   - 动画时长/缓动为演出参数，与 js/anim.js、js/render-layers.js 内联样式互补（时序字典落户处）。
 * 消费方：index.html（唯一引用方）；宽度 ≥900px 时切换为桌面多栏布局。
 */

/* 全局重置：去内外边距、统一盒模型、关闭移动端点击高亮 */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* 满屏布局：html/body 撑满视口并禁止页面滚动（游戏交互全在页内完成） */
html,body { height:100%; overflow:hidden; }
body {
  /* 字体栈：优先系统字体，中文回落到苹方/雅黑 */
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  /* 整页柔和渐变背景（淡蓝→淡紫→淡粉） */
  background: linear-gradient(160deg, #e8f4fd 0%, #f0e6ff 50%, #ffeef5 100%);
  /* 全页禁选文本、触摸操作保持原生手势（避免双击缩放/长按菜单干扰连点） */
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
/* #app：整页游戏容器，纵向 flex，移动端居中限宽 520px */
#app { height:100%; display:flex; flex-direction:column; max-width:520px; margin:0 auto; padding:8px; gap:8px; }
/* 顶栏：白色圆角卡片，横向排列 logo/状态/按钮 */
#topbar {
  display:flex; align-items:center; gap:8px; background:#fff; border-radius:14px;
  padding:8px 14px; box-shadow:0 2px 10px rgba(100,100,200,.12); flex-shrink:0;
}
/* 顶栏状态区：关卡/得分/步数，等宽展开占满剩余空间 */
#topbar .info { display:flex; gap:10px; flex:1; font-size:13px; color:#555; font-weight:600; }
/* 状态数值统一用品牌紫强调 */
#topbar .info span b { color:#6c5ce7; }
/* 游戏 logo：紫→粉渐变文字（background-clip:text 裁出字形） */
#game-logo {
  font-size:20px; font-weight:900; letter-spacing:2px; flex-shrink:0;
  background:linear-gradient(135deg,#6c5ce7,#e84393); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; text-shadow:none;
}
/* 顶栏图标按钮（静音/重开）：大点击热区，按压变色反馈 */
.tbtn {
  min-width:48px; min-height:48px; border:none; border-radius:12px; font-size:18px;
  background:#f1f0ff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition: background .2s;
}
.tbtn:active { background:#ddd8ff; }
/* 线稿画布：白色圆角卡片，flex:1 占满剩余纵向空间，溢出裁剪 */
#canvas-wrap {
  flex:1; min-height:0; background:#fff; border-radius:18px; position:relative;
  box-shadow:0 2px 14px rgba(100,100,200,.10); overflow:hidden;
}
#canvas-wrap svg { width:100%; height:100%; display:block; }
/* 四层叠放：彩图(img) / under 色块 / 白遮罩 / 线稿 / 标签 共用同一坐标系 */
#canvas-wrap .canvas-layer { position:absolute; inset:0; width:100%; height:100%; }
/* 彩图等比 contain（与 SVG preserveAspectRatio="xMidYMid meet" 对齐，层间不位移） */
#canvas-wrap img.canvas-layer { object-fit:contain; }
/* 目标区域标签：默认深灰数字，居中锚定；.done 态翻白（揭开后可见于彩图之上） */
#canvas-wrap .rlabel { font-size:14px; font-weight:700; fill:#333; pointer-events:none; text-anchor:middle; dominant-baseline:central; }
#canvas-wrap .rlabel.done { fill:#fff; }
/* 空间演绎浮动层（紧贴计算区下方，绝对定位不影响布局） */
#derive-layer {
  position:absolute; top:100%; left:0; right:0; z-index:50;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding-top:10px; pointer-events:none;
}
/* 推导步骤行：白底圆角胶囊，内含 数字-运算符-数字-等式-结果 五段 */
.derive-row {
  display:flex; align-items:center; gap:6px; height:56px; padding:4px 16px;
  background:rgba(255,255,255,.94); border-radius:14px;
  box-shadow:0 3px 14px rgba(108,92,231,.22);
}
/* 步骤行里的数字芯片：紫字紫框 */
.derive-row .chip {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:800; color:#6c5ce7;
  background:#f0edff; border:2.5px solid #6c5ce7;
  transition:opacity .4s, transform .4s;
}
/* 芯片退场（被下一步消费）：缩小淡出 */
.derive-row .chip.fade-out { opacity:0; transform:scale(.6); }
/* 运算符符号：初始隐藏，.show 后缩放弹出 */
.derive-row .op {
  font-size:19px; font-weight:700; color:#e84393;
  opacity:0; transform:scale(.5); transition:opacity .3s, transform .3s;
}
.derive-row .op.show { opacity:1; transform:scale(1); }
/* 等号：淡入显示 */
.derive-row .eq { font-size:19px; font-weight:700; color:#888; opacity:0; transition:opacity .3s; }
.derive-row .eq.show { opacity:1; }
/* 步骤结果块：紫粉渐变，弹跳（回弹缓动）入场 */
.derive-row .result {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#6c5ce7,#e84393); border:none;
  opacity:0; transform:scale(.3);
  transition:opacity .35s cubic-bezier(.3,1.5,.6,1), transform .35s cubic-bezier(.3,1.5,.6,1);
}
.derive-row .result.show { opacity:1; transform:scale(1); }
/* 中间结果（非最终命中值）：橙色渐变区分 */
.derive-row .result.intermediate { background:linear-gradient(135deg,#f39c12,#e67e22); }
/* 由中间结果派生出的芯片：橙色填充（表示非原始槽位数字） */
.derive-row .chip.from-intermediate {
  color:#fff; background:linear-gradient(135deg,#f39c12,#e67e22); border:none;
}
/* 演绎飞行方块：fixed 定位从来源点飞向目标点的克隆元素（不参与布局） */
.fly-chip {
  position:fixed; z-index:150; width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:800; color:#6c5ce7;
  background:#f0edff; border:2.5px solid #6c5ce7;
  box-shadow:0 6px 20px rgba(108,92,231,.35); pointer-events:none;
}
/* 最终答案飞行：紫粉渐变（与结果块一致） */
.fly-chip.final-fly {
  color:#fff; background:linear-gradient(135deg,#6c5ce7,#e84393); border:none;
}
/* 中间结果飞行：橙色渐变 */
.fly-chip.intermediate-fly {
  color:#fff; background:linear-gradient(135deg,#f39c12,#e67e22); border:none;
}
/* 计算区容器（演绎层定位参考） */
#calc-wrap { position:relative; flex-shrink:0; }
/* 计算区：Calc 槽位行，横向居中 */
#calc-area {
  display:flex; gap:10px; justify-content:center; flex-shrink:0;
}
/* 单个计算槽位：虚线边框空位；.filled 实线填充，.empty 置灰 */
.calc-slot {
  width:64px; height:64px; border-radius:16px; border:2.5px dashed #c8c2f0; background:#fafaff;
  display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800; color:#6c5ce7;
  transition: border-color .2s;
}
.calc-slot.filled { border-style:solid; border-color:#6c5ce7; background:#f0edff; }
.calc-slot.empty { border-color:#e8e5f5; background:#f8f7fc; color:transparent; }
/* 失败抖动：整行槽位横向抖动提醒 */
.calc-slot.shake { animation:shake .45s ease; }
/* 弹入/抖动关键帧（槽位数字入场与失败反馈共用） */
@keyframes popIn { 0%{transform:scale(.4);opacity:0} 70%{transform:scale(1.15)} 100%{transform:scale(1)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
/* 候选区：Candidates 网格（列数=cols，行由 JS 生成），纵向排列行容器 */
#candidate-area { flex-shrink:0; display:flex; flex-direction:column; gap:8px; align-items:center; }
.cand-row { display:flex; gap:10px; }
/* 候选数字按钮：64px 方块；row1 可点击（白底），supply 补给排置灰禁点 */
.cand-btn {
  width:64px; height:64px; border-radius:16px; border:none; font-size:24px; font-weight:800;
  cursor:pointer; transition: transform .15s, box-shadow .15s, opacity .3s;
}
.cand-btn.row1 { background:#fff; color:#333; box-shadow:0 3px 10px rgba(100,100,200,.15); }
/* 可点按钮按压反馈：缩小 */
.cand-btn.row1:active { transform:scale(.9); }
/* 已选取数字（挖洞后）：淡出并禁止再点 */
.cand-btn.row1.used { opacity:0; pointer-events:none; transform:scale(.5); }
/* 补给排（Supply rows）：置灰、默认光标，不可点击 */
.cand-btn.supply { background:#eee; color:#aaa; cursor:default; box-shadow:none; }
/* 候选区 → 计算区 飞行动画：fixed 克隆数字块（选取演出） */
.fly-num {
  position:fixed; z-index:150; width:64px; height:64px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:800; color:#6c5ce7; background:#f0edff; border:2.5px solid #6c5ce7;
  box-shadow:0 6px 20px rgba(108,92,231,.35); pointer-events:none;
}
/* 运算符栏（已废弃：D1 决策运算固定全开，样式保留以防回滚） */
#op-bar {
  display:flex; gap:10px; justify-content:center; flex-shrink:0; padding-bottom:env(safe-area-inset-bottom);
}
.op-btn {
  min-width:56px; min-height:52px; border-radius:14px; border:2.5px solid #6c5ce7; font-size:22px;
  font-weight:700; cursor:pointer; background:#6c5ce7; color:#fff; transition:all .2s;
}
.op-btn.off { background:#fff; color:#bbb; border-color:#ddd; }
/* 弹窗：全屏半透明遮罩，默认隐藏，.show 显示并居中内容 */
#modal-mask {
  position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:200;
}
#modal-mask.show { display:flex; }
/* 弹窗卡片：白底圆角，弹入动画入场 */
#modal-box {
  background:#fff; border-radius:22px; padding:34px 30px; text-align:center; width:min(88vw,340px);
  box-shadow:0 10px 40px rgba(0,0,0,.25); animation:popIn .35s ease;
}
#modal-box h2 { font-size:24px; margin-bottom:12px; color:#333; }
#modal-box p { font-size:15px; color:#666; margin-bottom:22px; line-height:1.7; }
/* 弹窗主按钮：紫渐变；.secondary 为浅紫底强调文字 */
#modal-box button {
  min-height:50px; padding:0 34px; border:none; border-radius:14px; font-size:17px; font-weight:700;
  background:linear-gradient(135deg,#6c5ce7,#a29bfe); color:#fff; cursor:pointer; margin:0 6px;
}
#modal-box button.secondary { background:#f1f0ff; color:#6c5ce7; }
/* 过关彩带：fixed 小色块，下坠旋转淡出 */
.confetti {
  position:fixed; width:10px; height:10px; border-radius:2px; z-index:300; pointer-events:none;
  animation:confettiFall 2.2s ease-in forwards;
}
@keyframes confettiFall { 0%{transform:translateY(-10vh) rotate(0deg);opacity:1} 100%{transform:translateY(105vh) rotate(720deg);opacity:0} }
/* 解锁进度条：得分/关卡目标得分的横向填充条 */
#progress-bar {
  flex-shrink:0; padding:0 4px;
}
#progress-bar .bar-wrap {
  position:relative; height:22px; background:#eee; border-radius:11px; overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.1);
}
/* 填充条：紫→粉渐变，宽度由 JS 按百分比设置，宽度变化平滑过渡 */
#progress-bar .bar-fill {
  height:100%; border-radius:11px; width:0%;
  background:linear-gradient(90deg,#6c5ce7,#a29bfe,#e84393);
  transition:width .5s cubic-bezier(.3,.7,.4,1);
}
/* 满格闪光（通关瞬间高亮一次） */
#progress-bar .bar-fill.full { animation:barFullFlash .6s ease; }
@keyframes barFullFlash { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.6)} }
/* 进度条中央文字：当前分/目标分 */
#progress-bar .bar-label {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#555;
}
/* 加分飘字：命中后在被填色区域附近上浮淡出；.doubled 为连消翻倍样式 */
.score-popup {
  position:fixed; z-index:160; pointer-events:none;
  font-size:22px; font-weight:900; color:#6c5ce7;
  text-shadow:0 2px 6px rgba(108,92,231,.3);
  animation:scoreFloat 1s ease-out forwards;
}
.score-popup.doubled { color:#e84393; font-size:26px; }
@keyframes scoreFloat { 0%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-40px) scale(1.2)} }
/* 连击标识：×N 连击！大字，弹跳缩放后上移淡出 */
#combo-badge {
  position:fixed; top:18%; left:50%; transform:translateX(-50%); z-index:170;
  font-size:36px; font-weight:900; color:#e84393; pointer-events:none;
  text-shadow:0 3px 12px rgba(232,67,147,.4);
  opacity:0; display:none;
}
#combo-badge.show {
  display:block; animation:comboPop .9s cubic-bezier(.3,1.5,.6,1) forwards;
}
@keyframes comboPop { 0%{opacity:0;transform:translateX(-50%) scale(.3)} 20%{opacity:1;transform:translateX(-50%) scale(1.3)} 40%{transform:translateX(-50%) scale(1)} 80%{opacity:1;transform:translateX(-50%) scale(1)} 100%{opacity:0;transform:translateX(-50%) scale(.8) translateY(-20px)} }
/* 连击粒子：从标识中心向四周飞散（方向/距离由 JS 注入 --dx/--dy 自定义属性） */
.combo-particle {
  position:fixed; z-index:169; pointer-events:none; border-radius:50%;
  animation:comboParticle .7s ease-out forwards;
}
@keyframes comboParticle { 0%{opacity:1;transform:translate(0,0) scale(1)} 100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)} }
/* 通关覆盖层：全屏半透明+轻模糊，.show 显示；内容为星级进度条与结算按钮 */
#level-complete-overlay {
  position:fixed; inset:0; z-index:250; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); backdrop-filter:blur(3px);
}
#level-complete-overlay.show { display:flex; }
#level-complete-box {
  background:#fff; border-radius:24px; padding:32px 28px; text-align:center;
  width:min(90vw,360px); box-shadow:0 12px 50px rgba(0,0,0,.3); animation:popIn .4s ease;
}
#level-complete-box h2 { font-size:26px; margin-bottom:8px; color:#333; }
/* 星级进度条：橙粉渐变填充；星星刻度绝对定位在 0%/20%/100% 处 */
.star-bar-wrap { position:relative; height:28px; background:#eee; border-radius:14px; margin:16px 0; overflow:visible; }
.star-bar-fill {
  height:100%; border-radius:14px; width:0%;
  background:linear-gradient(90deg,#feca57,#ff9f43,#e84393);
  transition:width 1s cubic-bezier(.3,.7,.4,1);
}
/* 星标：默认灰化半透明，.lit 点亮并放大，.fly-in 旋转飞入入场 */
.star-mark {
  position:absolute; top:50%; transform:translate(-50%,-50%); font-size:24px;
  filter:grayscale(1) opacity(.4); transition:filter .3s, transform .3s;
}
.star-mark.lit { filter:none; transform:translate(-50%,-50%) scale(1.3); }
.star-mark.fly-in { animation:starFlyIn .5s cubic-bezier(.3,1.5,.6,1); }
@keyframes starFlyIn { 0%{transform:translate(-50%,-50%) scale(0) rotate(-180deg)} 100%{transform:translate(-50%,-50%) scale(1.3) rotate(0deg)} }
/* 通关信息：总分/关卡目标/用时/步数 */
.complete-info { font-size:15px; color:#666; margin:12px 0 20px; line-height:1.8; }
.complete-info b { color:#6c5ce7; }
.complete-stars { font-size:36px; margin:8px 0; letter-spacing:6px; }
#level-complete-box button {
  min-height:50px; padding:0 30px; border:none; border-radius:14px; font-size:17px; font-weight:700;
  background:linear-gradient(135deg,#6c5ce7,#a29bfe); color:#fff; cursor:pointer; margin:0 6px;
}
#level-complete-box button.secondary { background:#f1f0ff; color:#6c5ce7; }
/* 桌面端多栏：宽屏（≥900px）下画布与操作区左右分栏 */
@media (min-width:900px) {
  #app { max-width:1100px; flex-direction:row; flex-wrap:wrap; padding:16px; gap:14px; align-items:stretch; }
  #topbar { width:100%; }
  #canvas-wrap { flex:1.2; min-height:520px; order:1; }
  .mid-col { flex:1; order:2; display:flex; flex-direction:column; gap:12px; justify-content:center; }
  #calc-area { order:0; }
  #candidate-area { order:1; }
  .right-col { width:220px; order:3; display:flex; flex-direction:column; gap:12px; justify-content:center; }
  #op-bar { flex-direction:column; padding-bottom:0; }
  .help-panel { background:#fff; border-radius:16px; padding:16px; font-size:13px; color:#666; line-height:1.8; box-shadow:0 2px 10px rgba(100,100,200,.10); }
  .help-panel h3 { font-size:14px; color:#333; margin-bottom:6px; }
}
/* 窄屏（≤899px）：隐藏玩法说明面板，中/右列降级为 contents 融入文档流 */
@media (max-width:899px) {
  .right-col .help-panel { display:none; }
  .mid-col { display:contents; }
  .right-col { display:contents; }
}