@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;
  }
}