/* ============================================================
   左右拍拍 · 軟萌新粗野主義(Soft Neubrutalism)
   規則很少,照著用就會統一:
   - 所有「物件」= 奶油底 + 3px 墨線 + 不模糊的硬陰影
   - 圓角刻意不對稱(--r),看起來像手畫的
   - 左手一律藍(--L),右手一律珊瑚橘(--R),整個遊戲不混用
   ============================================================ */
:root{
  --ink:#2b2420;
  --paper:#fff7ea;
  --card:#fffdf8;
  --muted:#7a6b5f;

  --butter:#ffd966;
  --mint:#a9e5c4;
  --sky:#a9d6ff;
  --lilac:#cdbdff;
  --pink:#ffc9da;

  --L:#7fc1ff;  --L-soft:#dcefff;  --L-ink:#2d6fae;
  --R:#ff9e85;  --R-soft:#ffe3d9;  --R-ink:#c4522f;

  --line:3px;
  --sh:4px 4px 0 var(--ink);
  --sh-sm:2px 2px 0 var(--ink);
  --r:22px 26px 20px 28px / 26px 20px 28px 22px;
  --r-sm:12px 15px 11px 16px / 15px 11px 16px 12px;

  --font:"Chiron GoRound TC","Huninn","PingFang TC","Microsoft JhengHei",sans-serif;
  --font-display:"Huninn","Chiron GoRound TC","PingFang TC","Microsoft JhengHei",sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
/* 行動裝置:連點兩下不要放大(iOS Safari 不理會 user-scalable=no,要靠 touch-action);
   長按也不要跳出選字 / 放大鏡 */
html{touch-action:manipulation}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input{-webkit-user-select:text;user-select:text}
body{
  margin:0;color:var(--ink);font-family:var(--font);font-weight:600;
  background-color:var(--paper);
  background-image:radial-gradient(rgba(43,36,32,.11) 1.3px, transparent 1.5px);
  background-size:22px 22px;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
button{font:inherit;color:inherit}
[hidden]{display:none!important}

#app{max-width:520px;margin:0 auto;min-height:100%;padding:
  max(14px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom))}

.screen{display:flex;flex-direction:column;gap:14px;min-height:calc(100dvh - 32px)}

/* ---------- 共用元件 ---------- */
.card{
  background:var(--card);border:var(--line) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:52px;padding:10px 22px;cursor:pointer;
  font-family:var(--font-display);font-size:19px;letter-spacing:1px;
  background:var(--card);border:var(--line) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);
  transition:transform .08s, box-shadow .08s;
  user-select:none;-webkit-user-select:none;
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn:focus-visible,.icon-btn:focus-visible,.lv:focus-visible{outline:3px dashed var(--ink);outline-offset:4px}
.btn-big{min-height:68px;font-size:26px}
.btn-small{min-height:42px;font-size:15px;padding:6px 14px}
.btn-butter{background:var(--butter)}
.btn-mint{background:var(--mint)}
.btn-sky{background:var(--sky)}
.btn-ghost{background:transparent;box-shadow:none;border-style:dashed}
.btn-ghost:hover{box-shadow:none;transform:none;background:rgba(255,255,255,.5)}
.btn-ghost:active{transform:translate(1px,1px);box-shadow:none}

.icon-btn{
  width:46px;height:46px;flex:none;display:grid;place-items:center;cursor:pointer;padding:0;
  background:var(--card);border:var(--line) solid var(--ink);border-radius:var(--r-sm);box-shadow:var(--sh-sm);
}
.icon-btn:active{transform:translate(2px,2px);box-shadow:none}
.icon-btn svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

.bar{height:16px;background:var(--card);border:var(--line) solid var(--ink);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--butter);border-right:var(--line) solid var(--ink);
  transition:width .9s cubic-bezier(.3,1.3,.5,1)}
.bar i[style*="width: 0"]{border-right:none}

.top{display:flex;align-items:center;gap:12px;min-height:50px}
.top h2{flex:1;margin:0;text-align:center;font-family:var(--font-display);font-size:24px;font-weight:400}
.top .spacer{width:46px;flex:none}

/* ---------- 首頁 ---------- */
.logo{flex:1}
.logo h1{margin:0;font-family:var(--font-display);font-weight:400;font-size:36px;line-height:1;letter-spacing:2px;
  text-shadow:3px 3px 0 var(--butter)}
.logo-en{display:inline-block;margin-top:6px;font-size:12px;letter-spacing:3px;color:var(--muted)}

.room{position:relative;height:300px;overflow:hidden;background:
  radial-gradient(circle at 18% 22%, rgba(255,255,255,.75) 0 26px, transparent 27px),
  var(--lilac)}
.room-floor{position:absolute;left:0;right:0;bottom:0;height:70px;background:var(--mint);border-top:var(--line) solid var(--ink)}
.room-pet{position:absolute;left:50%;bottom:30px;width:230px;height:230px;margin-left:-115px;z-index:2;cursor:pointer}
.room-pet svg{width:100%;height:100%;display:block}
.bubble{position:absolute;top:16px;right:14px;z-index:3;max-width:62%;
  background:var(--card);border:var(--line) solid var(--ink);border-radius:var(--r-sm);box-shadow:var(--sh-sm);
  padding:8px 12px;font-size:15px;line-height:1.4}
.bubble::after{content:"";position:absolute;left:22px;bottom:-11px;width:16px;height:16px;background:var(--card);
  border-right:var(--line) solid var(--ink);border-bottom:var(--line) solid var(--ink);transform:rotate(45deg) skew(8deg,8deg)}
.bubble.pop{animation:pop .35s cubic-bezier(.2,1.6,.5,1)}

.pet-info{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.pet-row{display:flex;align-items:flex-end;justify-content:space-between}
.pet-name{font-family:var(--font-display);font-size:24px}
.pet-stage{display:inline-block;margin-top:4px;font-size:13px;padding:2px 10px;border:2px solid var(--ink);border-radius:999px;background:var(--pink)}
.xp-num{font-size:14px;color:var(--muted)}
.pet-hint{font-size:14px;color:var(--muted);line-height:1.5}

/* ---------- 選關 ---------- */
.level-list{display:flex;flex-direction:column;gap:12px;padding-bottom:250px}
.lv{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;text-align:left;width:100%;
  background:var(--card);border:var(--line) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);
  transition:transform .08s, box-shadow .08s, background .15s}
.lv:active{transform:translate(2px,2px);box-shadow:var(--sh-sm)}
.lv.sel{background:var(--butter);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.lv.locked{opacity:.5;cursor:not-allowed;box-shadow:var(--sh-sm);border-style:dashed}
.lv-no svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round}
.lv-no{flex:none;width:42px;height:42px;display:grid;place-items:center;font-family:var(--font-display);font-size:20px;
  border:var(--line) solid var(--ink);border-radius:50%;background:var(--mint)}
.lv.locked .lv-no{background:#e8e0d4}
.lv-main{flex:1;min-width:0}
.lv-name{display:block;font-family:var(--font-display);font-size:19px}
.lv-desc{display:block;font-size:13px;color:var(--muted);margin-top:2px;font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:3px;margin-top:7px}
.chip{width:18px;height:20px;display:grid;place-items:center;font-size:11px;border:2px solid var(--ink);border-radius:6px;font-weight:800}
.chip.L{background:var(--L)} .chip.R{background:var(--R)} .chip.rest{background:transparent;border-style:dotted;opacity:.55}
.chip.gap{margin-left:5px}
.chip.bar{margin-left:12px}
.chip.more{width:auto;padding:0 6px;background:var(--lilac);font-size:11px}
.ch-h{display:grid;grid-template-columns:1fr auto;align-items:end;gap:2px 10px;margin:14px 2px 0}
.ch-h:first-child{margin-top:0}
.ch-h b{font-family:var(--font-display);font-weight:400;font-size:20px}
.ch-h span{grid-column:1;font-size:13px;color:var(--muted);font-weight:400}
.ch-h em{grid-row:1 / span 2;grid-column:2;font-style:normal;font-size:13px;padding:3px 10px;
  background:var(--butter);border:2px solid var(--ink);border-radius:999px}
.lv-stars{flex:none;display:flex;gap:1px}
.lv-stars svg{width:20px;height:20px}

.go-panel{position:fixed;left:50%;bottom:max(16px, env(safe-area-inset-bottom));transform:translateX(-50%);
  width:min(488px, calc(100% - 32px));padding:14px;display:flex;flex-direction:column;gap:10px;z-index:10;
  background:var(--card)}
.go-name{font-family:var(--font-display);font-size:20px;text-align:center}
.seg{display:flex;border:var(--line) solid var(--ink);border-radius:var(--r-sm);overflow:hidden}
.seg button{flex:1;padding:9px 4px;border:0;background:var(--card);cursor:pointer;font-size:15px;line-height:1.2}
.seg button+button{border-left:var(--line) solid var(--ink)}
.seg button small{display:block;font-size:11px;color:var(--muted);font-weight:400}
.seg button.on{background:var(--sky)}
.seg button.on small{color:var(--ink)}
.stepper{display:flex;align-items:center;justify-content:center;gap:18px}
.stepper .icon-btn{font-family:var(--font-display);font-size:28px;line-height:1;background:var(--butter)}
.stepper .icon-btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}
.bpm{display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1}
.bpm input{width:104px;padding:4px 6px 6px;text-align:center;color:var(--ink);
  font-family:var(--font-display);font-size:32px;line-height:1.1;
  background:var(--card);border:var(--line) dashed var(--ink);border-radius:var(--r-sm);
  -moz-appearance:textfield;appearance:textfield}
.bpm input::-webkit-outer-spin-button,.bpm input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bpm input:focus{outline:none;border-style:solid;background:#fff;box-shadow:var(--sh-sm)}
.bpm span{font-size:12px;color:var(--muted)}

/* ---------- 遊玩 ---------- */
#scr-play{gap:10px;height:calc(100dvh - 32px);min-height:0}
.play-title{flex:1;text-align:center;line-height:1.2}
.play-title b{display:block;font-family:var(--font-display);font-size:20px;font-weight:400}
.play-title span{font-size:13px;color:var(--muted)}
.combo{width:62px;flex:none;text-align:center;line-height:1}
.combo b{display:block;font-family:var(--font-display);font-size:28px;font-weight:400}
.combo span{font-size:11px;color:var(--muted)}
.combo.bump b{animation:pop .22s ease-out}

.buddy-strip{display:flex;align-items:center;gap:12px}
.buddy{width:92px;height:92px;flex:none}
.buddy svg{width:100%;height:100%;display:block}
.prog{flex:1;height:14px;background:var(--card);border:var(--line) solid var(--ink);border-radius:999px;overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--mint)}

.stage{position:relative;flex:1;min-height:220px;touch-action:none}
#lanes{position:absolute;inset:0;width:100%;height:100%;display:block}
.fbs{position:absolute;inset:0;pointer-events:none}
.fb{position:absolute;bottom:30%;display:flex;justify-content:center;pointer-events:none;opacity:0}
.fb > span{padding:4px 14px 6px;text-align:center;font-family:var(--font-display);font-size:24px;line-height:1.15;
  background:var(--card);border:var(--line) solid var(--ink);border-radius:var(--r-sm);box-shadow:var(--sh-sm)}
.fb.show{animation:fb .6s ease-out forwards}
.fb small{display:block;font-family:var(--font);font-size:13px;margin-top:2px}
.fb.perfect > span{background:var(--butter)}
.fb.good > span{background:var(--mint)}
.fb.ok > span{background:var(--card)}
.fb.miss > span{background:#ece5dc;color:var(--muted);box-shadow:none;border-style:dashed}
.fb.wrong > span{background:#ff7a66;color:#fff}
.count{position:absolute;left:50%;top:38%;width:120px;height:120px;margin:-60px 0 0 -60px;display:grid;place-items:center;
  pointer-events:none;font-family:var(--font-display);font-size:72px;line-height:1;padding-bottom:6px;
  background:var(--butter);border:var(--line) solid var(--ink);border-radius:50%;box-shadow:5px 5px 0 var(--ink)}
.count:empty{display:none}
.count.tick{animation:countPop .45s cubic-bezier(.2,1.6,.5,1)}

.pads{position:relative;height:112px;flex:none;touch-action:none;user-select:none;-webkit-user-select:none}
.pad{position:absolute;top:0;bottom:4px;display:flex;background:var(--cs);flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;
  border:var(--line) solid var(--ink);border-radius:var(--r);box-shadow:var(--sh);transition:transform .05s, box-shadow .05s}
.pad b{font-family:var(--font-display);font-size:28px;font-weight:400}
.pad span{font-size:13px;opacity:.75}
.pad.down{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink);background:var(--c)}

/* ---------- 結算 ---------- */
.result{padding:18px 16px;text-align:center}
.stars{display:flex;justify-content:center;gap:6px;height:64px}
.stars svg{width:60px;height:60px}
.stars .s-on{animation:starIn .5s cubic-bezier(.2,1.6,.5,1) backwards}
.res-acc{margin-top:6px}
.res-acc b{font-family:var(--font-display);font-size:56px;font-weight:400;line-height:1}
.res-acc span{font-size:16px;margin-left:4px}
.res-sub{font-size:14px;color:var(--muted);margin-top:4px;text-wrap:balance}
.hands{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;text-align:left}
.hand{padding:10px 12px;border:var(--line) solid var(--ink);border-radius:var(--r-sm)}
.hand-L{background:var(--L-soft)} .hand-R{background:var(--R-soft)}
.hand-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.hand-h b{font-family:var(--font-display);font-size:18px;font-weight:400}
.bar-L i{background:var(--L)} .bar-R i{background:var(--R)}
.hand-tip{font-size:13px;margin-top:7px;line-height:1.45;font-weight:400;min-height:2.9em}

.feed{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--pink)}
.feed-pet{width:96px;height:96px;flex:none}
.feed-pet svg{width:100%;height:100%;display:block}
.feed-txt{flex:1;display:flex;flex-direction:column;gap:6px}
.feed-xp{font-family:var(--font-display);font-size:24px}
.feed-msg{font-size:14px;line-height:1.45}
.res-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.res-btns .btn-butter{grid-column:1 / -1}

/* ---------- 圖鑑 ---------- */
.dex-lede{margin:0;text-align:center;color:var(--muted);font-size:14px;font-weight:400}
.dex{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (min-width:440px){ .dex{grid-template-columns:1fr 1fr 1fr} }
.dex-cell{padding:10px 8px 12px;text-align:center}
.dex-cell svg{width:100%;height:auto;aspect-ratio:1;display:block}
.dex-cell b{display:block;font-family:var(--font-display);font-size:18px;font-weight:400}
.dex-cell span{font-size:12px;color:var(--muted);font-weight:400}
.dex-cell.unknown{background:transparent;border-style:dashed;box-shadow:none}
.dex-cell.unknown svg{opacity:.18;filter:grayscale(1) brightness(0)}

/* ---------- 設定 ---------- */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:16px;
  background:rgba(43,36,32,.35)}
.sheet{width:100%;max-width:488px;padding:18px;display:flex;flex-direction:column;gap:14px;animation:sheetUp .25s ease-out}
.sheet h3{margin:0;font-family:var(--font-display);font-size:24px;font-weight:400}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px}
.cal{display:flex;flex-direction:column;gap:10px;padding:12px;border:var(--line) dashed var(--ink);border-radius:var(--r-sm)}
.cal-msg{margin:0;font-size:13px;color:var(--muted);line-height:1.5;font-weight:400}
.sheet-btns{display:flex;justify-content:space-between;align-items:center;gap:12px}
input[type=range]{accent-color:var(--ink);width:100%;max-width:230px}
.cal input[type=range]{max-width:none}

/* ---------- 寵物動作 ---------- */
.pet-idle{animation:idle 2.6s ease-in-out infinite;transform-origin:50% 92%}
.boing{animation:boing .32s ease-out}
.oops{animation:oops .4s ease-in-out}
.wiggle{animation:wiggle .5s ease-in-out}
.hop{animation:hop .5s cubic-bezier(.3,1.6,.5,1)}
.evolve{animation:evolve .9s cubic-bezier(.2,1.6,.5,1)}

@keyframes idle{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-4px) scale(1.02,.98)}}
@keyframes boing{0%{transform:scale(1,1)}35%{transform:scale(1.08,.9)}70%{transform:scale(.96,1.05)}100%{transform:scale(1,1)}}
@keyframes oops{0%,100%{transform:rotate(0)}30%{transform:rotate(-6deg)}70%{transform:rotate(5deg)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}75%{transform:rotate(-4deg)}}
@keyframes hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-26px) scale(.95,1.06)}}
@keyframes evolve{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes fb{0%{opacity:0;transform:translateY(10px) scale(.7)}25%{opacity:1;transform:translateY(0) scale(1.1)}
  70%{opacity:1;transform:translateY(-6px) scale(1)}100%{opacity:0;transform:translateY(-16px)}}
@keyframes countPop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes starIn{0%{transform:scale(0) rotate(-40deg)}100%{transform:scale(1) rotate(0)}}
@keyframes sheetUp{0%{transform:translateY(40px);opacity:0}100%{transform:none;opacity:1}}

@media (min-height:820px){ .room{height:340px} }
@media (prefers-reduced-motion:reduce){ *{animation-duration:.001s!important;transition-duration:.001s!important} }
.pw{transform-origin:50% 90%}

/* 眨眼、說話(眼睛 / 嘴巴在 pets.js 裡包成 .eyes / .mouth) */
.eyes{transform-box:fill-box;transform-origin:center;animation:blink 5s infinite}
.mouth{transform-box:fill-box;transform-origin:50% 20%}
.talking .mouth{animation:talk .16s ease-in-out infinite alternate}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes talk{to{transform:scaleY(1.6) scaleX(.9)}}

/* ---------- 親子模式 ---------- */
body.wide #app{max-width:1180px}
.btn small{display:block;font-family:var(--font);font-size:12px;font-weight:600;letter-spacing:0;opacity:.75}
#btnDuo{flex-direction:column;gap:0;line-height:1.25}
.duo-tip{padding:12px 14px;background:var(--sky);display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.5}
.duo-tip b{font-family:var(--font-display);font-weight:400;font-size:18px}
.duo-tip span{font-weight:400}
.who{display:inline-block;font-size:12px;padding:1px 8px;border:2px solid var(--ink);border-radius:999px;margin-right:4px}
.who-adult{background:var(--L-soft)} .who-child{background:var(--R-soft)}
.who-sep{display:inline-block;width:10px}
.drum{display:inline-block;font-style:normal;font-size:11px;padding:1px 6px;margin-right:3px;border:2px solid var(--ink);border-radius:6px}
.chips .who,.chips .drum{margin-top:2px}
.owners{position:relative;height:30px;flex:none}
.owners .who{position:absolute;top:0;margin:0;text-align:center;font-family:var(--font-display);font-size:16px;padding:2px 0}
body.wide .pad b{font-size:22px}
@media (max-width:700px){ body.wide .pad b{font-size:16px} body.wide .pad span{font-size:11px} }