@charset "utf-8";
:root{
  --app-h:100dvh;
  --ink:#2c4652;
  --muted:#75868d;
  --paper:#fff8ee;
  --line:rgba(44,70,82,.18);
  --shadow:0 10px 26px rgba(84,70,52,.14);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(circle at 18% 7%,rgba(255,205,184,.42),transparent 24%),
    radial-gradient(circle at 84% 5%,rgba(184,224,246,.42),transparent 26%),
    linear-gradient(180deg,#f7ecdd,#fff8ee 54%,#f2e3cf);
  user-select:none;-webkit-user-select:none;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.26;
  background:repeating-linear-gradient(0deg,transparent 0 18px,rgba(75,55,35,.025) 18px 19px);
}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}

.game-shell{
  position:relative;z-index:1;width:min(100%,540px);height:var(--app-h);max-height:var(--app-h);
  margin:0 auto;padding:calc(7px + var(--safe-top)) 10px calc(7px + var(--safe-bottom));
  display:grid;grid-template-rows:58px 92px 40px minmax(0,1fr) 42px 32px;gap:7px;overflow:hidden;
}
.game-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:0}
.brand{min-width:0}.eyebrow{display:block;font-size:10px;font-weight:900;letter-spacing:.08em;color:#9b7c57}.brand h1{font-size:32px;line-height:1;margin:2px 0 0;letter-spacing:.04em;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.icon-tab{flex:0 0 auto;height:38px;padding:0 16px;border-radius:999px;background:linear-gradient(180deg,#fffdf8,#f3e5d0);border:2px solid rgba(44,70,82,.16);box-shadow:var(--shadow);font-weight:950;color:#60747d}

.target-strip,.stat-strip,.board-card,.message,.book-sheet,.paper-dialog form{
  position:relative;background:linear-gradient(180deg,rgba(255,253,248,.96),rgba(251,242,229,.92));
  border:2px solid var(--line);border-radius:26px 30px 24px 29px;box-shadow:var(--shadow);overflow:hidden;
}
.target-strip:after,.board-card:after,.book-sheet:after,.paper-dialog form:after{
  content:"";position:absolute;inset:7px;border:1.25px solid rgba(44,70,82,.13);border-radius:22px 27px 22px 28px;pointer-events:none;transform:rotate(-.28deg);
}
.target-strip:before,.board-card:before{
  content:"";position:absolute;left:28px;top:-5px;width:58px;height:14px;border-radius:5px;background:linear-gradient(180deg,rgba(255,226,172,.78),rgba(244,202,122,.46));transform:rotate(-6deg);z-index:4;
}

.target-strip{padding:9px 10px 8px;display:grid;grid-template-rows:18px minmax(0,1fr);gap:5px}
.strip-title{display:flex;align-items:center;justify-content:space-between;padding:0 4px;font-size:13px;font-weight:950}.strip-title span{font-size:13px}
.bottle-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;min-height:0}
.jar{position:relative;min-width:0;min-height:0;padding:4px;border-radius:18px;border:1.5px dashed rgba(44,70,82,.20);background:rgba(255,255,255,.62);display:grid;grid-template-rows:minmax(0,1fr) 13px;place-items:center;overflow:hidden;transition:transform .12s,outline .12s,background .12s}
.jar.complete{background:linear-gradient(180deg,#fff6cb,#f6dfb3)}
.bottle-svg{width:48px;height:54px;display:block}
.jar-count{font-size:10px;font-weight:950;color:#725d42;line-height:1}.jar-color-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--jar-color);margin-right:3px;border:1px solid rgba(44,70,82,.18)}

.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px}
.stat-strip div{min-width:0;text-align:center;border:1.2px dashed rgba(44,70,82,.15);border-radius:15px;background:rgba(255,255,255,.58);padding:3px}.stat-strip small{display:block;font-size:10px;font-weight:900;color:var(--muted)}.stat-strip strong{display:block;font-size:17px;line-height:1.08}

.board-card{min-height:0;padding:7px;display:grid;place-items:center}
.board{width:100%;height:100%;max-width:100%;max-height:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:5px;touch-action:none;overflow:visible}
.cell{position:relative;min-width:0;min-height:0;border-radius:18px 16px 19px 17px;background:radial-gradient(circle at 42% 32%,rgba(255,255,255,.86),transparent 44%),linear-gradient(180deg,rgba(255,255,255,.92),rgba(241,232,218,.86));border:1.35px solid rgba(44,70,82,.13);display:grid;place-items:center;overflow:visible;transition:transform .12s,outline .12s,background .12s}
.cell.press .drop{transform:scale(1.12,.80) translateY(6px)!important}
.cell.source{outline:3px solid #4188b7;outline-offset:-2px;background:#fff4cd}.cell.source .drop{opacity:.30;transform:scale(.78)}
.cell.good,.jar.good{outline:4px solid #23c982;outline-offset:-2px;background:#eafff1!important;box-shadow:0 0 0 3px rgba(255,255,255,.86),0 0 14px rgba(35,201,130,.62)}
.cell.bad,.jar.bad{outline:4px solid #ff5268;outline-offset:-2px;background:#fff0f1!important;box-shadow:0 0 0 3px rgba(255,255,255,.86),0 0 14px rgba(255,82,104,.62)}
.cell.hint,.jar.hint{outline:4px solid #ffc43f;outline-offset:-2px;box-shadow:0 0 0 3px rgba(255,255,255,.86),0 0 15px rgba(255,196,63,.68)}

.drop{width:var(--drop-size);height:var(--drop-size);border-radius:50% 50% 47% 47% / 54% 54% 46% 46%;position:relative;background:radial-gradient(circle at 35% 24%,rgba(255,255,255,.78),transparent 17%),radial-gradient(circle at 58% 20%,rgba(255,255,255,.35),transparent 17%),linear-gradient(180deg,color-mix(in srgb,var(--drop-color) 68%,#fff),color-mix(in srgb,var(--drop-color) 88%,#4d7188));border:2px solid rgba(44,70,82,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -8px 13px rgba(44,89,112,.14),0 5px 10px rgba(48,82,96,.16);transform-origin:50% 82%;animation:idle 2.8s ease-in-out infinite}
.drop:before{content:"";position:absolute;left:25%;top:16%;width:25%;height:25%;border-radius:50%;background:rgba(255,255,255,.64)}
.drop.pop{animation:pop .34s cubic-bezier(.16,1.24,.18,1) 1,idle 2.8s ease-in-out .35s infinite}
.drop.full{box-shadow:0 0 0 3px rgba(247,205,94,.55),0 0 12px rgba(247,205,94,.52),inset 0 -8px 13px rgba(44,89,112,.14);animation:fullPulse 1.4s ease-in-out infinite}
.drop.full:after{content:"入";position:absolute;right:-6px;top:-7px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#ffe08a;border:1px solid rgba(70,50,20,.25);font-size:10px;font-weight:950;color:#7a5519}
.eye{position:absolute;top:45%;width:9%;height:9%;border-radius:50%;background:#29444f}.eye.l{left:35%}.eye.r{right:35%}.mouth{position:absolute;left:40%;top:61%;width:20%;height:10%;border-bottom:2.5px solid #29444f;border-radius:0 0 999px 999px}.blush{position:absolute;top:61%;width:13%;height:7%;border-radius:50%;background:rgba(255,120,160,.24)}.blush.l{left:23%}.blush.r{right:23%}.face-wink .eye.r{height:3px;border-radius:999px;top:48%}.face-sleepy .eye{height:3px;border-radius:999px;top:49%}.face-wow .mouth,.face-curious .mouth{left:44%;top:61%;width:12%;height:12%;border:2.3px solid #29444f;border-radius:50%}.face-smug .mouth{transform:rotate(-9deg)}
@keyframes pop{0%{transform:scale(.62)}62%{transform:scale(1.13,.9)}100%{transform:scale(1)}}@keyframes idle{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.018,.986)}}@keyframes fullPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

.action-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.tool-btn{border-radius:16px 15px 18px 16px;border:1.7px solid rgba(44,70,82,.16);background:linear-gradient(180deg,#fffdf8,#f4e7d4);box-shadow:0 5px 10px rgba(90,76,56,.10);font-weight:950;font-size:13px}.tool-btn.green{background:linear-gradient(180deg,#f1fbef,#d7efd4);color:#3d7254}.tool-btn.blue{background:linear-gradient(180deg,#eff8ff,#dcecff);color:#496f92}.tool-btn.red{background:linear-gradient(180deg,#fff2ef,#f4d6cf);color:#91584e}.tool-btn:disabled{opacity:.45}
.message{margin:0;padding:6px 10px;max-height:32px;overflow:hidden;font-size:11px;line-height:1.45;color:#657981}

.drag-ghost{position:fixed;z-index:9999;pointer-events:none;width:68px;height:68px;transform:translate(-50%,-50%);filter:drop-shadow(0 12px 14px rgba(48,70,80,.22))}
.drag-ghost.squash{transform:translate(-50%,-50%) scale(1.24,.74)}.drag-ghost .drop{width:100%!important;height:100%!important;animation:dragJelly .32s ease-in-out infinite alternate!important}@keyframes dragJelly{from{transform:scale(1.08,.94) rotate(-2deg)}to{transform:scale(.95,1.10) rotate(2deg)}}

.book-panel{position:fixed;z-index:80;inset:0;display:none}.book-panel.open{display:block}.book-backdrop{position:absolute;inset:0;background:rgba(45,52,56,.26);backdrop-filter:blur(3px)}.book-sheet{position:absolute;right:0;top:0;bottom:0;width:min(92vw,390px);padding:calc(12px + var(--safe-top)) 12px calc(12px + var(--safe-bottom));display:grid;grid-template-rows:44px 34px minmax(0,1fr);gap:8px;background:linear-gradient(180deg,#fffdf8,#f5e8d6);border-left:2px solid var(--line);box-shadow:-12px 0 28px rgba(84,70,52,.16)}
.book-head{display:flex;align-items:center;justify-content:space-between}.book-head b{font-size:22px}.book-head button{width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);font-size:22px}.book-stats{font-size:13px;color:var(--muted)}.book-list{min-height:0;overflow-y:auto;display:grid;gap:8px;-webkit-overflow-scrolling:touch}.book-card{display:grid;grid-template-columns:70px 1fr;gap:10px;align-items:center;padding:8px;border-radius:18px;background:rgba(255,255,255,.62);border:1px dashed rgba(44,70,82,.17)}.book-card.locked{opacity:.6;filter:grayscale(1)}.book-card svg{width:66px;height:76px}.book-card b{font-size:14px}.book-card span{display:block;margin-top:3px;color:var(--muted);font-size:12px}

.paper-dialog{border:0;padding:0;background:transparent}.paper-dialog::backdrop{background:rgba(45,52,56,.28);backdrop-filter:blur(3px)}.paper-dialog form{width:min(92vw,340px);padding:18px;display:grid;gap:10px}.paper-dialog b{font-size:20px}.paper-dialog p{margin:0;color:var(--muted);line-height:1.55}.paper-dialog button{min-height:40px;border-radius:16px;font-weight:950}.primary{background:#ffd985}.secondary{background:#fff;border:1px solid var(--line)}

@media(max-height:760px){.game-shell{grid-template-rows:50px 78px 36px minmax(0,1fr) 36px 28px;gap:5px}.brand h1{font-size:27px}.bottle-svg{width:42px;height:46px}.tool-btn{font-size:12px}.message{font-size:10px;padding:5px 8px}.target-strip{padding:7px 8px}}
@media(max-height:680px){.game-shell{grid-template-rows:44px 64px 32px minmax(0,1fr) 32px 24px}.eyebrow{display:none}.brand h1{font-size:24px}.strip-title{display:none}.target-strip{grid-template-rows:minmax(0,1fr)}.bottle-svg{width:34px;height:38px}.jar-count{display:none}.stat-strip{padding:4px}.tool-btn{font-size:12px}}
@media(max-width:390px){.game-shell{padding-left:8px;padding-right:8px}.board{gap:4px}.bottle-row{gap:5px}}


/* ============================================================
   v0.5.5 基准稳定修正
   - 不做每日指定瓶型/颜色/容量玩法升级
   - 先稳定 0.3.7 内核 + 0.5 新界面
   ============================================================ */

.game-shell{
  grid-template-rows:58px 106px minmax(0,1fr) 42px 32px!important;
  gap:7px!important;
}

.stat-strip{
  display:none!important;
}

.target-strip{
  padding:10px 11px 9px!important;
  grid-template-rows:20px minmax(0,1fr)!important;
  gap:6px!important;
}

.bottle-row{
  gap:9px!important;
}

.jar{
  border-radius:20px 18px 21px 19px!important;
  padding:5px 4px!important;
  grid-template-rows:minmax(0,1fr) 14px!important;
}

.bottle-svg{
  width:54px!important;
  height:62px!important;
  max-width:100%!important;
}

.jar-count{
  font-size:10px!important;
  line-height:1!important;
}

.board-card{
  overflow:hidden!important;
  padding:8px!important;
}

.board{
  margin:0 auto!important;
  max-width:100%!important;
  max-height:100%!important;
  overflow:visible!important;
}

.cell{
  overflow:visible!important;
}

/* Safari 里拖动 ghost 不显示、出现透明竖条的关键修正 */
.drop{
  display:block!important;
  line-height:0!important;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform,opacity,filter;
}

.cell .drop{
  pointer-events:none!important;
}

.drag-ghost{
  position:fixed!important;
  z-index:2147483647!important;
  pointer-events:none!important;
  width:76px!important;
  height:76px!important;
  display:grid!important;
  place-items:center!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  transform:translate(-50%,-50%) scale(1)!important;
}

.drag-ghost.squash{
  transform:translate(-50%,-50%) scale(1.24,.74)!important;
}

.drag-ghost .drop{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  opacity:1!important;
  visibility:visible!important;
  animation:dragJellyVisible .30s ease-in-out infinite alternate!important;
}

@keyframes dragJellyVisible{
  from{transform:scale(1.10,.92) rotate(-2deg)}
  to{transform:scale(.94,1.12) rotate(2deg)}
}

.cell.press .drop{
  transform:scale(1.16,.78) translateY(7px)!important;
}

.cell.source .drop{
  opacity:.26!important;
  transform:scale(.72)!important;
}

.cell.good,.jar.good{
  outline:4px solid #18c981!important;
  outline-offset:-2px!important;
  box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 16px rgba(24,201,129,.72)!important;
}

.cell.bad,.jar.bad{
  outline:4px solid #ff3f62!important;
  outline-offset:-2px!important;
  box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 16px rgba(255,63,98,.72)!important;
}

.message{
  font-size:11px!important;
  padding:6px 10px!important;
}

@media(max-height:760px){
  .game-shell{
    grid-template-rows:50px 92px minmax(0,1fr) 36px 28px!important;
    gap:5px!important;
  }
  .bottle-svg{
    width:48px!important;
    height:54px!important;
  }
  .target-strip{
    padding:8px 9px 7px!important;
  }
}

@media(max-height:680px){
  .game-shell{
    grid-template-rows:44px 76px minmax(0,1fr) 32px 24px!important;
  }
  .bottle-svg{
    width:38px!important;
    height:44px!important;
  }
  .jar-count{
    display:none!important;
  }
  .target-strip{
    grid-template-rows:minmax(0,1fr)!important;
  }
  .strip-title{
    display:none!important;
  }
}


/* ============================================================
   v0.5.6 操作空间修正
   1) 拖动水滴不再放大到固定 76px，按水滴等级缩小显示
   2) 拖动水滴向手指右上偏移，避免遮住落点格子
   3) 回收棋盘卡片内空白，把空间分给目标瓶区、按钮区和消息区
   ============================================================ */

.game-shell{
  grid-template-rows:58px 122px minmax(0,1fr) 54px 42px!important;
  gap:8px!important;
}

.target-strip{
  padding:12px 12px 10px!important;
  grid-template-rows:22px minmax(0,1fr)!important;
}

.bottle-row{
  gap:11px!important;
}

.jar{
  padding:6px 5px!important;
  border-radius:22px 19px 22px 20px!important;
  grid-template-rows:minmax(0,1fr) 16px!important;
}

.bottle-svg{
  width:62px!important;
  height:72px!important;
}

.jar-count{
  font-size:11px!important;
}

/* 棋盘卡片减少内部留白，避免上下空出大片空间 */
.board-card{
  padding:5px!important;
  align-items:center!important;
  justify-items:center!important;
}

.board{
  width:min(100%, calc(100vw - 30px))!important;
  height:min(100%, calc(100vw - 30px))!important;
}

/* 底部工具栏更舒展，降低拥挤感 */
.action-strip{
  gap:9px!important;
}

.tool-btn{
  min-height:52px!important;
  border-radius:19px 17px 20px 18px!important;
  font-size:15px!important;
  letter-spacing:.02em;
}

/* 消息栏增加高度，减少被压扁感 */
.message{
  min-height:38px!important;
  max-height:42px!important;
  padding:9px 12px!important;
  font-size:12px!important;
}

/* 拖动水滴缩小并偏移，不挡落点 */
.drag-ghost{
  width:var(--ghost-size,46px)!important;
  height:var(--ghost-size,46px)!important;
  transform:translate(-50%,-50%) scale(1)!important;
}

.drag-ghost.squash{
  transform:translate(-50%,-50%) scale(1.16,.82)!important;
}

.drag-ghost .drop{
  width:100%!important;
  height:100%!important;
}

/* 按压时仍保留压实，但不要遮挡太大 */
.cell.press .drop{
  transform:scale(1.10,.82) translateY(5px)!important;
}

@media(max-height:760px){
  .game-shell{
    grid-template-rows:50px 106px minmax(0,1fr) 46px 36px!important;
    gap:6px!important;
  }
  .bottle-svg{
    width:54px!important;
    height:62px!important;
  }
  .tool-btn{
    min-height:44px!important;
    font-size:14px!important;
  }
  .message{
    min-height:32px!important;
    max-height:36px!important;
    padding:7px 10px!important;
  }
}

@media(max-height:680px){
  .game-shell{
    grid-template-rows:44px 84px minmax(0,1fr) 38px 30px!important;
    gap:5px!important;
  }
  .bottle-svg{
    width:42px!important;
    height:48px!important;
  }
  .tool-btn{
    min-height:36px!important;
    font-size:13px!important;
  }
  .message{
    min-height:28px!important;
    max-height:30px!important;
    padding:5px 8px!important;
    font-size:11px!important;
  }
}


/* ============================================================
   v0.5.7 交互响应与绘瓶显示修正
   - 拖拽命中点改为可见水滴中心，消除“看起来拖到了但延迟响应”
   - 绘瓶区域增高，瓶子完整显示
   - 瓶内液体由 SVG clipPath 裁剪到瓶身，不再四四方方
   ============================================================ */

.game-shell{
  grid-template-rows:58px 142px minmax(0,1fr) 52px 40px!important;
  gap:7px!important;
}

.target-strip{
  padding:13px 12px 11px!important;
  grid-template-rows:24px minmax(0,1fr)!important;
}

.bottle-row{
  gap:10px!important;
}

.jar{
  grid-template-rows:minmax(0,1fr) 17px!important;
  padding:7px 5px!important;
  overflow:visible!important;
}

.bottle-svg{
  width:68px!important;
  height:82px!important;
  max-width:100%!important;
  overflow:visible!important;
}

.jar-count{
  font-size:11px!important;
}

/* 棋盘卡片继续压缩内边距，让空间让给绘瓶区 */
.board-card{
  padding:4px!important;
}

/* 高亮立即切换，不要视觉过渡造成延迟感 */
.cell,
.jar{
  transition:transform .06s linear, outline-color .06s linear, background .06s linear!important;
}

.cell.good,.jar.good,
.cell.bad,.jar.bad,
.cell.hint,.jar.hint{
  transition:none!important;
}

/* 拖动水滴仍小而可见，命中点按右上偏移的水滴中心计算 */
.drag-ghost{
  width:var(--ghost-size,46px)!important;
  height:var(--ghost-size,46px)!important;
}

@media(max-height:760px){
  .game-shell{
    grid-template-rows:50px 120px minmax(0,1fr) 44px 34px!important;
    gap:6px!important;
  }
  .bottle-svg{
    width:58px!important;
    height:70px!important;
  }
  .target-strip{
    padding:10px 10px 8px!important;
  }
}

@media(max-height:680px){
  .game-shell{
    grid-template-rows:44px 96px minmax(0,1fr) 38px 30px!important;
  }
  .bottle-svg{
    width:46px!important;
    height:56px!important;
  }
  .target-strip{
    padding:8px 8px 6px!important;
  }
}


/* ============================================================
   v0.5.8 绘瓶区域修正
   - 绘瓶区域再增高
   - 瓶子完整显示并放大
   - 0/3 进度文字移到瓶图下方独立区域，不再挡住瓶身
   ============================================================ */

.game-shell{
  grid-template-rows:58px 166px minmax(0,1fr) 50px 38px!important;
  gap:7px!important;
}

.target-strip{
  padding:14px 13px 12px!important;
  grid-template-rows:24px minmax(0,1fr)!important;
}

.bottle-row{
  gap:12px!important;
  align-items:stretch!important;
}

.jar{
  display:grid!important;
  grid-template-rows:minmax(0,1fr) 20px!important;
  align-items:center!important;
  justify-items:center!important;
  padding:8px 5px 6px!important;
  overflow:hidden!important;
  border-radius:22px 19px 22px 20px!important;
}

.bottle-svg{
  width:76px!important;
  height:96px!important;
  max-width:100%!important;
  max-height:100%!important;
  align-self:center!important;
  justify-self:center!important;
  overflow:visible!important;
}

.jar-count{
  position:static!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:34px!important;
  height:18px!important;
  padding:0 6px!important;
  margin-top:2px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.78)!important;
  border:1px dashed rgba(44,70,82,.20)!important;
  box-shadow:0 2px 5px rgba(75,60,40,.08)!important;
  font-size:11px!important;
  line-height:18px!important;
  font-weight:950!important;
  color:#2d4652!important;
  z-index:3!important;
}

.jar-color-dot{
  width:8px!important;
  height:8px!important;
  flex:0 0 auto!important;
  margin-right:4px!important;
}

/* 绘瓶区域增大后，收一点棋盘卡片内边距，尽量维持一屏 */
.board-card{
  padding:3px!important;
}

.message{
  min-height:36px!important;
  max-height:40px!important;
}

/* 中等高度屏幕适配 */
@media(max-height:760px){
  .game-shell{
    grid-template-rows:50px 142px minmax(0,1fr) 44px 34px!important;
    gap:6px!important;
  }
  .target-strip{
    padding:11px 11px 9px!important;
  }
  .bottle-svg{
    width:64px!important;
    height:80px!important;
  }
  .jar{
    grid-template-rows:minmax(0,1fr) 18px!important;
    padding:7px 5px 5px!important;
  }
  .jar-count{
    height:16px!important;
    line-height:16px!important;
    font-size:10px!important;
  }
}

/* 极小高度屏幕：保留进度，但进一步缩小，不隐藏到瓶身上 */
@media(max-height:680px){
  .game-shell{
    grid-template-rows:44px 116px minmax(0,1fr) 38px 30px!important;
  }
  .target-strip{
    padding:9px 9px 7px!important;
  }
  .bottle-svg{
    width:50px!important;
    height:64px!important;
  }
  .jar{
    grid-template-rows:minmax(0,1fr) 16px!important;
    padding:6px 4px 4px!important;
  }
  .jar-count{
    display:inline-flex!important;
    height:14px!important;
    min-width:28px!important;
    line-height:14px!important;
    font-size:9px!important;
    padding:0 4px!important;
  }
}


/* v0.5.9: 拖拽松手提交修正
   移动时高亮的格子/瓶子会记录为 hoverCell / hoverJar；
   松手时优先按该记录提交，避免“变绿但放不进去”。 */


/* ============================================================
   v0.5.10 拖动视觉与表情修正
   - 拖动水滴不再明显偏右上，改为轻微右上偏移
   - 手指可以稍微进入水滴边缘，减少“我拖到哪里”的歧义
   - 被拖动水滴统一惊讶表情
   - 增加更多普通表情样式
   ============================================================ */

/* 拖动 ghost 相对手指更靠近：由 JS 控制中心点 x+10 / y-24 */
.drag-ghost{
  opacity:.96!important;
}

.drag-ghost .drop{
  border-width:2px!important;
}

/* 被拖动的水滴：惊讶状态更明显 */
.drag-ghost .face-wow .eye,
.drag-ghost .face-curious .eye{
  width:12%!important;
  height:12%!important;
  top:43%!important;
}

.drag-ghost .face-wow .mouth{
  left:43%!important;
  top:60%!important;
  width:14%!important;
  height:14%!important;
  border:2.6px solid #29444f!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.18)!important;
}

/* 普通水滴增加表情丰富度 */
.face-happy .mouth{
  left:36%!important;
  top:58%!important;
  width:28%!important;
  height:17%!important;
  border-bottom:3px solid #29444f!important;
  border-radius:0 0 999px 999px!important;
}

.face-sad .mouth{
  left:40%!important;
  top:67%!important;
  width:20%!important;
  height:10%!important;
  border-bottom:0!important;
  border-top:2.6px solid #29444f!important;
  border-radius:999px 999px 0 0!important;
}

.face-lookLeft .eye.l{
  left:31%!important;
}
.face-lookLeft .eye.r{
  right:39%!important;
}
.face-lookRight .eye.l{
  left:39%!important;
}
.face-lookRight .eye.r{
  right:31%!important;
}

.face-star .eye.l,
.face-star .eye.r{
  background:transparent!important;
  width:13%!important;
  height:13%!important;
  top:43%!important;
}
.face-star .eye.l::after,
.face-star .eye.r::after{
  content:"✦";
  position:absolute;
  inset:-45%;
  font-size:13px;
  line-height:1;
  color:#29444f;
  transform:scale(.85);
}

/* shy / smug 也稍微区分 */
.face-shy .blush{
  opacity:.62!important;
  transform:scale(1.18)!important;
}

.face-smug .mouth{
  left:39%!important;
  width:24%!important;
  transform:rotate(-10deg)!important;
}

/* 拖动时源格水滴压低但不变得太透明，方便判断来源 */
.cell.source .drop{
  opacity:.34!important;
  transform:scale(.78)!important;
}


/* ============================================================
   v0.5.11 稳定展示打磨
   - 单瓶完成动画
   - 全部完成结算弹窗
   - 图鉴收藏册基础完善
   - 不改核心玩法内核
   ============================================================ */

.jar.complete{
  background:linear-gradient(180deg,rgba(255,248,211,.96),rgba(246,225,181,.94))!important;
}

.jar.new-complete{
  animation:jarCompletePop 1.15s cubic-bezier(.18,1.18,.18,1) both;
  outline:4px solid #ffc43f!important;
  outline-offset:-2px!important;
  box-shadow:0 0 0 3px rgba(255,255,255,.90),0 0 20px rgba(255,196,63,.74)!important;
}

.jar.new-complete .bottle-svg{
  animation:bottleShine .95s ease-in-out both;
}

@keyframes jarCompletePop{
  0%{transform:scale(.96)}
  45%{transform:scale(1.045)}
  100%{transform:scale(1)}
}
@keyframes bottleShine{
  0%,100%{filter:none}
  45%{filter:drop-shadow(0 0 10px rgba(255,210,85,.86))}
}

.book-stats{
  display:flex;
  align-items:center;
  min-height:30px;
  padding:0 10px;
  border-radius:16px;
  background:rgba(255,248,225,.74);
  border:1px dashed rgba(110,82,35,.18);
  font-size:12px!important;
  font-weight:850;
  color:#7a643d!important;
}

.book-card{
  min-height:92px;
  background:linear-gradient(180deg,rgba(255,255,255,.70),rgba(249,241,230,.70))!important;
  border:1.4px dashed rgba(44,70,82,.18)!important;
}

.book-card:not(.locked){
  box-shadow:0 6px 12px rgba(95,80,60,.09);
}

.book-swatches{
  display:flex!important;
  gap:5px;
  flex-wrap:wrap;
  margin-top:6px!important;
}

.book-dot{
  width:15px;
  height:15px;
  border-radius:50%;
  background:var(--c);
  border:1px solid rgba(44,70,82,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62);
}

.book-dot.empty{
  background:#d8d1c6;
  opacity:.75;
}

.result-dialog form{
  text-align:left;
}

.result-dialog b{
  font-size:22px;
}

.result-dialog p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}

.result-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.result-actions button{
  min-height:42px;
  border-radius:16px;
  font-weight:950;
}

.message{
  transition:background .18s ease;
}


/* ============================================================
   v0.5.12 棋盘框线与合成规则说明修正
   - 去掉棋盘内侧贴近格子的装饰框线，避免和边缘格子重叠
   - 合成规则在 JS 中改为：只有同等级水滴才能合成
   ============================================================ */

/* 只去掉棋盘区域的内侧手绘框线，保留外层卡片 */
.board-card::after{
  display:none!important;
}

/* 棋盘内格子离外框略留呼吸感 */
.board-card{
  padding:6px!important;
}

/* 边缘格子视觉再收一点，避免贴边 */
.board{
  gap:5px!important;
}

/* 提示/合法落点保持高对比 */
.cell.hint,
.cell.good,
.cell.bad{
  outline-offset:-2px!important;
}

.hidden-stat{display:none!important}
.bottle-row{gap:7px!important}
.asset-jar{min-width:0!important;padding:4px 2px 5px!important;display:grid!important;grid-template-rows:minmax(70px,1fr) auto auto!important}
.jar-art-wrap{display:flex;align-items:center;justify-content:center;min-height:76px;overflow:visible}
.jar-art{width:82px;height:82px;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(60,45,35,.18));pointer-events:none}
.jar-label{display:block;max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:700;color:#4d5960}
.asset-jar .jar-count{position:static!important;margin-top:2px!important}
.asset-jar .jar-color-dot{background:var(--dot)!important}
.asset-book-card{grid-template-columns:82px 1fr!important}
.asset-book-card>img{width:76px;height:76px;object-fit:contain}
.asset-book-card .rarity{font-size:10px;color:#9a6d43}


/* =========================================================
   v0.7.2 UI layout fix
   - Give target bottles more vertical room
   - Separate image/name/progress
   - Compress board spacing without changing 6x6 mechanics
   ========================================================= */

:root{
  --v072-page-gap: 10px;
  --v072-target-h: 220px;
  --v072-jar-img: 74px;
  --v072-cell-gap: 7px;
}

/* Overall vertical rhythm */
main,
.game-shell,
.app-shell{
  gap: var(--v072-page-gap) !important;
}

/* Header slightly tighter */
.app-header,
.topbar,
.hero{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Target section gets more room */
.target-panel,
.jar-panel,
.bottle-panel,
.today-panel{
  min-height: var(--v072-target-h) !important;
  padding: 12px 12px 10px !important;
  overflow: visible !important;
}

.bottle-row,
.jar-row,
#jarRow{
  min-height: 158px !important;
  height: auto !important;
  align-items: stretch !important;
  gap: 8px !important;
  overflow: visible !important;
}

.asset-jar{
  min-height: 150px !important;
  height: auto !important;
  padding: 7px 4px 8px !important;
  display: grid !important;
  grid-template-rows: 82px 30px 24px !important;
  align-content: start !important;
  justify-items: center !important;
  overflow: hidden !important;
}

.jar-art-wrap{
  width: 100% !important;
  height: 82px !important;
  min-height: 82px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.jar-art{
  width: var(--v072-jar-img) !important;
  height: var(--v072-jar-img) !important;
  max-width: 100% !important;
  object-fit: contain !important;
  transform: none !important;
}

.jar-label{
  width: 100% !important;
  max-width: 100% !important;
  min-height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 2px !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  white-space: normal !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

.asset-jar .jar-count{
  width: 100% !important;
  height: 22px !important;
  margin: 0 !important;
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  line-height: 22px !important;
  font-weight: 800 !important;
  z-index: 2 !important;
}

.asset-jar .jar-color-dot{
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  border-radius: 50% !important;
}

/* Compress board panel so target area can breathe */
.board-panel,
.board-wrap,
.game-board-panel{
  padding: 10px !important;
  margin-top: 0 !important;
}

.board,
#board{
  gap: var(--v072-cell-gap) !important;
  padding: 3px !important;
}

.cell{
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 18px !important;
}

/* Reduce empty visual padding inside cells */
.cell::before,
.cell::after{
  inset: 2px !important;
}

/* Slightly tighten action area */
.tool-row,
.actions,
.control-row{
  gap: 8px !important;
  margin-top: 0 !important;
}

.tool-btn{
  min-height: 56px !important;
}

/* Message strip tighter */
.message,
.message-bar,
.hint-bar{
  min-height: 42px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* iPhone 13 Pro Max portrait tuning */
@media (max-width: 480px){
  :root{
    --v072-target-h: 214px;
    --v072-jar-img: 70px;
    --v072-cell-gap: 6px;
  }

  .target-panel,
  .jar-panel,
  .bottle-panel,
  .today-panel{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .bottle-row,
  .jar-row,
  #jarRow{
    gap: 6px !important;
  }

  .asset-jar{
    min-height: 146px !important;
    grid-template-rows: 78px 30px 22px !important;
  }

  .jar-art-wrap{
    height: 78px !important;
    min-height: 78px !important;
  }

  .jar-label{
    font-size: 9.5px !important;
  }

  .asset-jar .jar-count{
    font-size: 10.5px !important;
  }

  .board-panel,
  .board-wrap,
  .game-board-panel{
    padding: 8px !important;
  }

  .cell{
    border-radius: 16px !important;
  }
}

/* Extra-short viewport fallback */
@media (max-height: 760px){
  :root{
    --v072-target-h: 198px;
    --v072-jar-img: 64px;
    --v072-cell-gap: 5px;
  }

  .asset-jar{
    min-height: 134px !important;
    grid-template-rows: 70px 28px 20px !important;
  }

  .jar-art-wrap{
    height: 70px !important;
    min-height: 70px !important;
  }

  .tool-btn{
    min-height: 50px !important;
  }
}


/* =========================================================
   v0.7.3 target-area and vertical-layout correction
   ========================================================= */

:root{
  --v073-header-h: 58px;
  --v073-target-h: 184px;
  --v073-action-h: 58px;
  --v073-message-h: 44px;
  --v073-target-gap: 6px;
  --v073-card-radius: 16px;
}

/* Rebuild page rows: header / targets / board / tools / message */
.game-shell{
  grid-template-rows:
    var(--v073-header-h)
    var(--v073-target-h)
    minmax(0,1fr)
    var(--v073-action-h)
    var(--v073-message-h) !important;
  gap: 8px !important;
}

/* Target outer frame: contain every card */
.target-strip{
  height: var(--v073-target-h) !important;
  min-height: var(--v073-target-h) !important;
  max-height: var(--v073-target-h) !important;
  padding: 10px 10px 9px !important;
  display: grid !important;
  grid-template-rows: 24px minmax(0,1fr) !important;
  gap: 5px !important;
  overflow: hidden !important;
}

.target-strip:after{
  inset: 6px !important;
}

.strip-title{
  height: 24px !important;
  padding: 0 6px !important;
  font-size: 13px !important;
  line-height: 24px !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Four target cards stay inside the large frame */
.bottle-row,
#jarRow{
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  align-items: stretch !important;
  gap: var(--v073-target-gap) !important;
  overflow: hidden !important;
  padding: 0 2px 1px !important;
  position: relative !important;
  z-index: 3 !important;
}

.asset-jar{
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  padding: 5px 3px 5px !important;
  border-radius: var(--v073-card-radius) !important;
  display: grid !important;
  grid-template-rows: minmax(0,1fr) 24px 22px !important;
  row-gap: 1px !important;
  align-content: stretch !important;
  justify-items: center !important;
  overflow: hidden !important;
}

/* Bottle occupies available area; name follows closely */
.jar-art-wrap{
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding-top: 1px !important;
  padding-bottom: 0 !important;
}

.jar-art{
  width: 72px !important;
  height: 72px !important;
  max-width: 92% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: none !important;
  filter: drop-shadow(0 2px 2px rgba(60,45,35,.16)) !important;
}

.jar-label{
  width: 100% !important;
  max-width: 100% !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 1px 2px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9.5px !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow: hidden !important;
}

/* Restore clear color cue: dot + color name + progress */
.asset-jar .jar-count{
  width: 100% !important;
  height: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  font-size: 9.5px !important;
  line-height: 22px !important;
  color: #654f3b !important;
  white-space: nowrap !important;
}

.asset-jar .jar-count strong{
  font-size: 10px !important;
  font-weight: 950 !important;
}

.jar-color-name{
  font-size: 9px !important;
  font-weight: 800 !important;
  color: #6d6257 !important;
}

.asset-jar .jar-color-dot{
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  margin: 0 !important;
  border: 1px solid rgba(44,70,82,.16) !important;
  background: var(--dot) !important;
}

/* Board uses the remaining height but avoids excessive empty frame */
.board-card{
  min-height: 0 !important;
  padding: 6px !important;
  overflow: hidden !important;
}

.board-card:after{
  inset: 6px !important;
}

.board,
#board{
  width: 100% !important;
  height: auto !important;
  max-height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  gap: 5px !important;
  padding: 2px !important;
  align-self: center !important;
}

.cell{
  border-radius: 15px 14px 16px 15px !important;
}

/* Keep controls compact but touch-safe */
.action-strip{
  min-height: var(--v073-action-h) !important;
  gap: 8px !important;
}

.tool-btn{
  min-height: 54px !important;
  height: 54px !important;
}

.message{
  min-height: var(--v073-message-h) !important;
  height: var(--v073-message-h) !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
}

/* iPhone portrait */
@media (max-width:480px){
  :root{
    --v073-header-h: 56px;
    --v073-target-h: 178px;
    --v073-action-h: 56px;
    --v073-message-h: 42px;
    --v073-target-gap: 5px;
  }

  .game-shell{
    padding-left: 9px !important;
    padding-right: 9px !important;
    gap: 7px !important;
  }

  .target-strip{
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  .asset-jar{
    padding-left: 2px !important;
    padding-right: 2px !important;
    grid-template-rows: minmax(0,1fr) 23px 21px !important;
  }

  .jar-art{
    width: 68px !important;
    height: 68px !important;
  }

  .jar-label{
    height: 23px !important;
    min-height: 23px !important;
    font-size: 9px !important;
  }

  .asset-jar .jar-count{
    height: 21px !important;
    min-height: 21px !important;
    font-size: 9px !important;
    gap: 2px !important;
  }

  .jar-color-name{
    font-size: 8.5px !important;
  }

  .asset-jar .jar-count strong{
    font-size: 9.5px !important;
  }

  .board,
  #board{
    gap: 4px !important;
  }
}

/* Shorter screens: reduce target art slightly, never overflow */
@media (max-height:760px){
  :root{
    --v073-header-h: 48px;
    --v073-target-h: 158px;
    --v073-action-h: 50px;
    --v073-message-h: 36px;
  }

  .asset-jar{
    grid-template-rows: minmax(0,1fr) 21px 19px !important;
  }

  .jar-art{
    width: 58px !important;
    height: 58px !important;
  }

  .jar-label{
    height: 21px !important;
    min-height: 21px !important;
    font-size: 8.5px !important;
  }

  .asset-jar .jar-count{
    height: 19px !important;
    min-height: 19px !important;
    line-height: 19px !important;
  }

  .tool-btn{
    min-height: 48px !important;
    height: 48px !important;
  }
}


/* v0.7.4 interaction coordinate safety */
#board,.board,.cell,.board-card{
  transform:none!important;
}
#board,.board{
  touch-action:none!important;
  contain:layout paint;
}
.drag-ghost{
  pointer-events:none!important;
  will-change:left,top,transform;
}