:root {
  --ink: #3b1f0e; --cream: #fff8ec; --accent: #ff7a59; --accent2: #ffb627;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --font: "Arial Rounded MT Bold", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Apple SD Gothic Neo", "Noto Sans", system-ui, sans-serif;
  --font-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Apple SD Gothic Neo", "Noto Sans", system-ui, sans-serif;
  --fs-title: 22px; --fs-heading: 20px; --fs-body: 15px; --fs-small: 13px; --fs-micro: 11px;
  --btn-h: 48px; --btn-h-lg: 54px; --btn-h-sm: 36px; --radius-btn: 999px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2b1745; }
body { font-family: var(--font); color: var(--ink); user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; overscroll-behavior: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.hidden { display: none !important; }

#bg { position: fixed; inset: -20px; background: #ffb38a center/cover no-repeat; transition: background-image .5s;
  filter: saturate(1.05); }
#bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,0) 30%, rgba(40,10,40,.35) 100%); }

#app { position: fixed; inset: 0; display: flex; justify-content: center; }
.screen { position: relative; width: 100%; max-width: 520px; height: 100%; display: flex; flex-direction: column;
  align-items: center; padding: calc(12px + var(--safe-t)) 14px calc(12px + var(--safe-b)); }
#scr-game { padding-left: 6px; padding-right: 6px; }

/* ---------- home ---------- */
#scr-home { justify-content: center; gap: 14px; }
.home-mascot { width: min(52vw, 250px); max-height: 34vh; object-fit: contain;
  animation: bob 4s ease-in-out infinite; }
.logo { margin: 8px 0 0; font-size: clamp(28px, 7.8vw, 44px); color: #fff; letter-spacing: 0; text-align: center; white-space: nowrap; max-width: 100%;
  -webkit-text-stroke: 0; paint-order: normal; text-shadow: 0 0 10px rgba(255,220,150,.65), 0 0 24px rgba(255,180,80,.25); }
.sub { margin: 0 0 14px; color: #fff; font-size: 15px; font-weight: 700; text-shadow: 0 2px 6px rgba(0,0,0,.45); }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-2deg); } }

/* ---------- buttons ---------- */
.btn { display: flex; align-items: center; justify-content: center; min-width: 210px; min-height: var(--btn-h); margin: 7px auto; padding: 0 28px;
  border-radius: var(--radius-btn); font-size: 16px; font-weight: 800; line-height: 1.1;
  color: #fff; background: linear-gradient(#ffa24c, #ff6a3d); box-shadow: 0 4px 0 #c2410c, 0 9px 16px rgba(0,0,0,.22);
  text-shadow: 0 1px 0 rgba(0,0,0,.25); transition: transform .08s, box-shadow .08s; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #c2410c, 0 4px 8px rgba(0,0,0,.22); }
.btn.big { min-height: var(--btn-h-lg); padding: 0 32px; font-size: 18px; }
.btn.alt { color: #7c2d12; background: linear-gradient(#fff9ee, #ffe6c8); box-shadow: 0 4px 0 #c9a27b, 0 9px 16px rgba(0,0,0,.14); text-shadow: none; }
.btn.alt:active { box-shadow: 0 1px 0 #c9a27b; }
.btn.ghost { min-width: 0; min-height: var(--btn-h); padding: 0 18px; background: rgba(255,255,255,.22); box-shadow: none; font-size: 15px; }
.btn.ghost.dark { color: #7c4a2d; background: rgba(124,74,45,.1); text-shadow: none; }
.icon { width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.9); color: #c2410c; font-size: 20px; font-weight: 900;
  box-shadow: 0 3px 0 rgba(0,0,0,.18); flex: none; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- top bar ---------- */
.bar { width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.bar h2 { flex: 1; margin: 0; text-align: center; color: #fff; font-size: var(--fs-heading); text-shadow: 0 2px 0 #9a3412, 0 4px 10px rgba(0,0,0,.4); }
.bar .sp { width: 44px; }

/* ---------- worlds ---------- */
.world-grid { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; overflow-y: auto; padding-bottom: 10px; }
.world { position: relative; aspect-ratio: 3/4; border-radius: 18px; overflow: hidden; background: #ccc center 18%/cover;
  box-shadow: 0 4px 0 rgba(0,0,0,.2), 0 8px 16px rgba(0,0,0,.25); border: 3px solid #fff; text-align: left; }
.world::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0,0,0,.65)); }
.world .wn { position: absolute; left: 8px; right: 8px; bottom: 26px; z-index: 1; color: #fff; font-weight: 800; font-size: clamp(12px, 3.4vw, 15px); line-height: 1.15;
  overflow-wrap: anywhere; hyphens: auto; }
.world .wp { position: absolute; left: 8px; bottom: 8px; z-index: 1; color: #ffe08a; font-size: 12px; font-weight: 700; }
.world.locked { filter: grayscale(.9) brightness(.7); }
.world.locked::before { content: "🔒"; position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%,-60%); font-size: 30px; }
.world .num { position: absolute; top: 6px; left: 6px; z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: var(--wc, #ff7a59);
  color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* ---------- levels ---------- */
.level-path { width: 100%; flex: 1; overflow-y: auto; display: flex; flex-direction: column-reverse; align-items: center; padding: 18px 0; gap: 18px; }
.lvl { width: 78px; height: 78px; border-radius: 50%; background: linear-gradient(#fff, #ffe6c7); border: 4px solid #fff;
  box-shadow: 0 5px 0 #c2410c, 0 10px 18px rgba(0,0,0,.3); font-size: 28px; font-weight: 900; color: #c2410c; position: relative; flex-shrink: 0; }
.lvl:nth-child(odd) { transform: translateX(-60px); } .lvl:nth-child(even) { transform: translateX(60px); }
.lvl.locked { background: #c9c3bd; color: #8a817a; box-shadow: 0 5px 0 #7a726b; }
.lvl.cur { animation: pulse 1.2s ease-in-out infinite; background: linear-gradient(#ffe08a, #ffb627); }
.lvl.hard::after { content: "⚠️"; position: absolute; top: -6px; right: -6px; font-size: 16px; }
.lvl .st { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); white-space: nowrap; font-size: 15px; letter-spacing: -2px; }
@keyframes pulse { 50% { box-shadow: 0 5px 0 #c2410c, 0 0 0 10px rgba(255,214,10,.45); } }

/* ---------- game ---------- */
#scr-game { padding-left: 4px; padding-right: 4px; }
.game-stage { flex: 1; width: 100%; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; }
.hud { width: 100%; display: flex; align-items: center; gap: 8px; }
.pill { background: url('../assets/web/ui/paper.webp') center/cover, rgba(255,247,233,.96); border: 1.5px solid rgba(255,255,255,.62);
  border-radius: 16px; padding: 6px 12px; display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 4px 0 rgba(90,40,10,.18), inset 0 0 12px rgba(255,255,255,.38); min-width: 74px; }
.pill.wide { flex: 1; align-items: stretch; }
.pill small { font-size: 11px; color: #8a5a3a; font-weight: 800; letter-spacing: .03em; text-align: center; }
.pill b { font-size: 24px; line-height: 1.1; color: #7a2e12; text-align: center; }
#h-moves.low { color: #e11d48; animation: shake .5s; }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.meter { position: relative; height: 8px; border-radius: 4px; background: #f3dcc4; margin-top: 3px; overflow: hidden; }
.meter i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #ffd60a, #ff7a59); transition: width .3s; }
.meter em { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.9); }
.goals { display: flex; gap: 8px; margin: 10px 0 4px; flex-wrap: wrap; justify-content: center; min-height: 40px; }
.goal { display: flex; align-items: center; gap: 5px; padding: 3px 11px 3px 4px; border-radius: 14px;
  background: url('../assets/web/ui/paper.webp') center/cover, rgba(255,247,233,.95); border: 1px solid rgba(150,100,60,.16);
  box-shadow: 0 3px 0 rgba(90,40,10,.14), inset 0 0 8px rgba(255,255,255,.35); color: #6b3a22;
  box-shadow: 0 3px 0 rgba(0,0,0,.15); font-weight: 800; font-size: 17px; color: #7c2d12; }
.goal img, .goal .jelly-ic { width: 34px; height: 34px; }
.goal .jelly-ic { border-radius: 9px; background: rgba(236,72,153,.6); border: 2px solid #fff; }
.goal .ob-ic { width: 34px; height: 34px; border-radius: 9px; border: 2px solid #fff; position: relative; }
.goal .ob-ice { background: linear-gradient(135deg, #f0fbff, #8fd0ff); box-shadow: inset 0 0 0 3px rgba(255,255,255,.6); }
.goal .ob-box { background: #b07416 linear-gradient(45deg, transparent 45%, rgba(0,0,0,.3) 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, rgba(0,0,0,.3) 45% 55%, transparent 55%); background-color: #b07416; }
.goal .ob-chain { background: #dfe4ea; }
.goal .ob-chain::after { content: '🔒'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; }
.goal .ob-drop { background: radial-gradient(circle at 40% 35%, #fff, #c9d1dc 55%, #7d8794); border-radius: 50% 50% 18% 18%; }
.goal .ob-drop::after { content: '⭐'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; }
.goal.done { background: #d9edc8; color: #386b2a; border-color: rgba(70,120,50,.2); }
.goal.bump { animation: bump .25s; }
@keyframes bump { 50% { transform: scale(1.15); } }
#board-wrap { position: relative; flex: 0 0 auto; width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; min-height: 0;
  background: linear-gradient(rgba(45,76,66,.92), rgba(34,60,54,.96)), url('../assets/web/ui/paper.webp') center/cover, #2f4f45; border: 2px solid rgba(255,255,255,.45); border-radius: 24px;
  box-shadow: 0 18px 36px rgba(50,20,5,.35), inset 0 0 0 3px rgba(255,255,255,.28), inset 0 0 26px rgba(120,70,30,.12); }
#board-wrap::before, #board-wrap::after { display: none; }
#board-wrap::before { top: -8px; left: 26px; transform: rotate(-4deg); }
#board-wrap::after { bottom: -8px; right: 26px; transform: rotate(3deg); }
#board-wrap canvas { position: relative; z-index: 1; border-radius: 20px; }
#board { touch-action: none; -webkit-touch-callout: none; border-radius: 18px; background: rgba(60,25,10,.28); box-shadow: inset 0 0 0 3px rgba(255,255,255,.5), 0 10px 30px rgba(0,0,0,.25);
  }
.toast { position: absolute; top: 50%; left: calc(50% + 2px); transform: translate(-50%,-50%) scale(.6); opacity: 0; pointer-events: none;
  width: max-content; max-width: calc(100% - 28px); white-space: normal; text-align: center; line-height: 1.15; padding: 0 8px;
  font-family: var(--font-cjk); font-size: clamp(30px, 10vw, 48px); font-weight: 700; font-synthesis: none; color: #fff;
  -webkit-text-stroke: 1.5px #8a3a16; paint-order: stroke fill;
  text-shadow: 0 3px 0 rgba(90,40,12,.8), 0 8px 20px rgba(0,0,0,.4);
  transition: transform .25s cubic-bezier(.3,1.6,.5,1), opacity .25s; z-index: 60; }
.toast.on { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.toast.small { font-size: 22px; font-weight: 700; -webkit-text-stroke: 0; color: #fff;
  background: rgba(49,26,12,.74); border: 1px solid rgba(255,240,215,.18); border-radius: 999px;
  padding: 8px 17px; text-shadow: 0 2px 4px rgba(0,0,0,.55); box-shadow: 0 5px 16px rgba(0,0,0,.22); }
.toast.combo { font-family: var(--font-cjk); font-size: clamp(28px, 8vw, 42px); font-weight: 600; color: #ffe14d; -webkit-text-stroke: 0; paint-order: normal; text-shadow: 0 0 9px rgba(255,214,90,.6); }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(40,15,30,.55); animation: fade .2s; }
.card { width: 100%; max-width: 380px; background: url('../assets/web/ui/paper.webp') center/cover, var(--cream); border-radius: 26px; padding: 22px 20px 18px; text-align: center;
  border: 3px solid rgba(255,255,255,.65); box-shadow: 0 10px 0 rgba(160,105,60,.22), 0 24px 50px rgba(0,0,0,.4); animation: pop .3s cubic-bezier(.3,1.5,.5,1); }
.card h2 { margin: 0 0 10px; font-size: var(--fs-title); color: #7a2e12; }
.start-head, .result-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 10px; text-align: left; }
.start-head img, .result-head img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; flex: none; background: #f3dfc3; box-shadow: 0 2px 6px rgba(60,30,10,.18); }
.start-head h2, .result-head h2 { margin: 0; font-size: var(--fs-title); }
.result-head img { width: 66px; height: 66px; }
.mochi-line { margin: 2px 0 0; font-size: 13px; line-height: 1.3; color: #8a4b2a; font-weight: 700; }
.muted { color: #9a6a4a; font-size: var(--fs-small); margin: 6px 0 14px; }
.st-goals { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 6px; }
.st-goals .goal { box-shadow: none; background: #ffe9d2; }
.rule { margin: 4px 6px 10px; font-size: 14px; line-height: 1.45; color: #7c4a2d; text-align: center; }
.rule:empty { display: none; }
.stars { display: flex; justify-content: center; gap: 4px; height: 78px; margin-top: -4px; }
.stars img { width: 72px; height: 72px; filter: grayscale(1) brightness(.6) opacity(.5); transform: scale(.4); transition: all .35s cubic-bezier(.3,1.8,.5,1); }
.stars img:nth-child(2) { width: 90px; height: 90px; margin-top: -14px; }
.stars img.on { filter: none; transform: scale(1); }
.res-score { font-size: 18px; color: #9a6a4a; margin: 0 0 14px; } .res-score b { color: #c2410c; font-size: 26px; }
.lang-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.lang-list button { min-height: 38px; padding: 0 6px; border-radius: 12px; background: #ffe9d2; font-weight: 700; font-size: 14px; color: #7c2d12; }
.lang-list button.on { background: #ff7a59; color: #fff; }
.toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 14px; margin-bottom: 8px; border-radius: 14px;
  background: #ffe9d2; font-weight: 700; color: #7c2d12; font-size: 16px; }
.toggle i { width: 46px; height: 26px; border-radius: 13px; background: #d6c3b0; position: relative; transition: background .2s; }
.toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .2s; }
.toggle.on i { background: #22c55e; } .toggle.on i::after { left: 23px; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }

@media (min-height: 820px) { .hud .pill b { font-size: 28px; } }
.lang-list button.wide { grid-column: 1 / -1; }

/* boosters */
.boosters { display: flex; gap: 14px; justify-content: center; margin: 6px 0 calc(6px + env(safe-area-inset-bottom)); }
.boosters.hidden { display: none; }
.bst { position: relative; width: 58px; height: 58px; border-radius: 18px; border: 0; background: linear-gradient(#fff8ec, #ffd9a8);
  box-shadow: 0 4px 0 #d08a3c, 0 8px 14px rgba(0,0,0,.18); font-size: 28px; cursor: pointer; }
.bst i { font-style: normal; }
.boosters { margin-bottom: calc(22px + env(safe-area-inset-bottom)); }
.bst em { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 7px; white-space: nowrap; font-style: normal;
  font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); pointer-events: none; }
.bst-tip { bottom: calc(100px + env(safe-area-inset-bottom)) !important; }
.bst b { position: absolute; right: -6px; bottom: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: #ff4d5e;
  color: #fff; font-size: 13px; line-height: 22px; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.bst.empty { filter: grayscale(1); opacity: .5; }
.bst.on { transform: translateY(-4px); box-shadow: 0 0 0 4px #ffe14d, 0 8px 0 #d08a3c; }
.bst:active { transform: translateY(2px); }
.bst-tip { position: absolute; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 16px; border-radius: 999px; background: rgba(60,30,10,.88); color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap; z-index: 5; }
.bst-tip.hidden { display: none; }
.bst-tip .icon { width: 28px; height: 28px; font-size: 14px; }
#btn-plus5 small { opacity: .85; font-size: 14px; }
.reward { color: #e05a00; font-weight: 800; }

#btn-plus5.ad { background: linear-gradient(#ffd34d, #ff9f1a); }
.bst.ad { opacity: 1; filter: none; }
.bst.ad b { background: #ff9f1a; }

/* ---------- food intro ---------- */
.food-card { max-width: 320px; padding-top: 18px; }
.food-card img { width: 120px; height: 120px; object-fit: contain; margin: -70px auto 4px; display: block;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.3)); animation: pop .35s cubic-bezier(.3,1.6,.5,1); }
.food-card h2 { margin: 0 0 2px; font-size: 24px; }
.fd-world { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: #d97706; }
.fd-desc { margin: 0 4px 16px; font-size: 15px; line-height: 1.5; color: #7c4a2d; text-align: left; }
.goal img { cursor: help; }
#food-tip { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; display: flex; gap: 10px; align-items: flex-start;
  width: 250px; padding: 10px 12px; border-radius: 14px; background: rgba(255,250,240,.97); color: #7c4a2d;
  box-shadow: 0 8px 22px rgba(0,0,0,.28); border: 2px solid #ffd27a; opacity: 0; visibility: hidden; transition: opacity .12s; }
#food-tip.on { opacity: 1; visibility: visible; }
#food-tip img { width: 48px; height: 48px; object-fit: contain; flex: none; }
#food-tip b { display: block; font-size: 15px; color: #c2410c; margin-bottom: 2px; }
#food-tip p { margin: 0; font-size: 13px; line-height: 1.4; }


/* ---------- Mochi tutorial tip ---------- */
.mochi-tip { position: absolute; z-index: 8; top: calc(150px + var(--safe-t)); left: 50%; transform: translateX(-50%);
  width: min(88%, 370px); display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px;
  background: url('../assets/web/ui/paper.webp') center/cover, #fff6e6; border: 2px solid rgba(255,255,255,.7);
  border-radius: 18px; box-shadow: 0 10px 24px rgba(50,20,5,.3), inset 0 0 12px rgba(255,255,255,.4);
  color: #5e321d; pointer-events: none; animation: tipIn .35s ease-out; }
.mochi-tip::after { content: ""; position: absolute; bottom: -9px; left: 48px; width: 14px; height: 14px;
  background: #fff6e6; border-right: 2px solid rgba(255,255,255,.7); border-bottom: 2px solid rgba(255,255,255,.7);
  transform: rotate(45deg); }
.mochi-tip img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none;
  background: #f5e3c9; box-shadow: 0 2px 5px rgba(60,30,10,.18); }
.mochi-tip b { display: block; font-size: 12px; letter-spacing: .04em; color: #9a5a32; margin-bottom: 1px; }
.mochi-tip p { margin: 0; font-size: 13px; line-height: 1.35; font-weight: 700; }
@keyframes tipIn { from { opacity: 0; transform: translate(-50%, -8px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@media (max-height: 760px) { .mochi-tip { top: calc(126px + var(--safe-t)); } .mochi-tip p { font-size: 12px; } }

/* ---------- chapters ---------- */
.chapter-tabs { width: 100%; display: flex; gap: 7px; overflow-x: auto; padding: 0 2px 10px; scrollbar-width: none; flex: none; }
.chapter-tabs::-webkit-scrollbar { display: none; }
.chapter-tab { flex: 0 0 auto; min-width: 104px; max-width: 150px; padding: 7px 10px; border-radius: 14px; text-align: left;
  background: url('../assets/web/ui/paper.webp') center/cover, rgba(255,247,233,.94); border: 2px solid transparent;
  box-shadow: 0 3px 0 rgba(90,40,10,.16), inset 0 0 8px rgba(255,255,255,.4); color: #6b3a22; cursor: pointer; }
.chapter-tab b { display: block; font-size: 10px; letter-spacing: .04em; color: #9a5a32; }
.chapter-tab span { display: block; font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chapter-tab.on { border-color: #ff7a59; background: url('../assets/web/ui/paper.webp') center/cover, #fff; }
.chapter-tab.locked { opacity: .45; filter: grayscale(.5); }

.chapter-tab { color: #5e2110 !important; text-shadow: none; }
.chapter-tab span { white-space: normal; line-height: 1.15; }
.chapter-tab.locked { color: #6b3a22 !important; }
.chapter-note { margin-top: auto; width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 12px;
  border-radius: 16px; background: url('../assets/web/ui/paper.webp') center/cover, rgba(255,247,233,.9);
  border: 1px solid rgba(255,255,255,.55); box-shadow: 0 5px 16px rgba(40,20,5,.2); flex: none; }
.chapter-note img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #f3dfc3; }
.chapter-note p { margin: 0; font-size: 12px; line-height: 1.35; font-weight: 700; color: #6b3a22; }

/* ---------- paper level path ---------- */
.lv-sub { width: 100%; display: flex; align-items: center; gap: 9px; margin: 0 0 4px; padding: 7px 11px;
  border-radius: 16px; background: url('../assets/web/ui/paper.webp') center/cover, rgba(255,247,233,.94);
  border: 1px solid rgba(255,255,255,.6); box-shadow: 0 4px 12px rgba(40,20,5,.18); flex: none; }
.lv-sub img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #f3dfc3; flex: none; }
.lv-sub small { display: block; font-size: 10px; color: #9a5a32; font-weight: 800; letter-spacing: .03em; }
.lv-sub b { display: block; font-size: 14px; color: #6b3a22; }
.level-path { position: relative; }
.level-path::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 50%; width: 0;
  border-left: 3px dashed rgba(120,70,40,.26); z-index: 0; }
.level-path::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 34px;
  transform: translateX(-50%); background: rgba(255,247,233,.22); border-radius: 20px; z-index: -1; }
.lvl { z-index: 1; background: url('../assets/web/ui/paper.webp') center/cover, #fff4e2;
  border: 3px solid rgba(255,255,255,.82); color: #7a2e12; box-shadow: 0 5px 0 rgba(140,90,50,.24), 0 9px 16px rgba(0,0,0,.2);
  text-shadow: none; }
.lvl.left { transform: translateX(-58px); }
.lvl.right { transform: translateX(58px); }
.lvl.done { background: url('../assets/web/ui/paper.webp') center/cover, #e6f0d3; color: #3f6b2a; }
.lvl.cur { background: url('../assets/web/ui/paper.webp') center/cover, #ffe3c2; animation: pathPulse 1.4s ease-in-out infinite; }
.lvl.locked { background: url('../assets/web/ui/paper.webp') center/cover, #d8cfc2; color: #8a817a; box-shadow: 0 5px 0 #9b8d7d; }
.lvl .st { color: #d99a1e; text-shadow: 0 1px 0 #fff3cf; letter-spacing: -1px; }
.lvl.cur::before { content: ""; position: absolute; width: 34px; height: 34px; top: -17px; left: -15px;
  background: url('../assets/web/ui/mochi_face.webp') center/cover; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 3px 7px rgba(60,30,10,.28); z-index: 3; }
@keyframes pathPulse { 50% { box-shadow: 0 5px 0 rgba(140,90,50,.24), 0 0 0 8px rgba(255,122,89,.30); } }
.checkpoint { position: relative; z-index: 1; width: 64px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 3px;
  background: url('../assets/web/ui/paper.webp') center/cover, #ffe9c2; border: 2px dashed rgba(160,105,50,.35);
  color: #b27a20; font-size: 20px; box-shadow: 0 3px 0 rgba(140,90,50,.18); }
.checkpoint b { font-size: 11px; color: #8a5a32; }
.checkpoint.on { background: url('../assets/web/ui/paper.webp') center/cover, #ffe0a3; color: #c07a00; }


/* ---------- Mochi in-game reaction ---------- */
.mochi-react { position: absolute; z-index: 10; right: 12px; bottom: calc(18px + var(--safe-b)); display: flex; align-items: center; gap: 7px;
  max-width: 240px; padding: 7px 11px 7px 7px; border-radius: 16px; pointer-events: none;
  background: url('../assets/web/ui/paper.webp') center/cover, #fff6e6; border: 2px solid rgba(255,255,255,.7);
  box-shadow: 0 8px 20px rgba(40,20,5,.3); color: #6b3a22; }
.mochi-react img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; background: #f3dfc3; }
.mochi-react p { margin: 0; font-size: 12px; font-weight: 800; line-height: 1.3; }
.mochi-react.pop { animation: mochiPop .32s cubic-bezier(.3,1.6,.5,1); }
@keyframes mochiPop { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }

/* ---------- motion polish ---------- */
.screen:not(.hidden) { animation: screenIn .34s cubic-bezier(.2,.8,.2,1); }
#scr-game:not(.hidden) #board-wrap { animation: boardIn .46s cubic-bezier(.2,.9,.2,1); }
.lvl { animation: nodeIn .38s cubic-bezier(.2,.9,.2,1) both; }
.lvl.cur { animation: pathPulse 1.4s ease-in-out infinite; }
.chapter-tab { animation: tabIn .3s ease-out both; }
.toast.combo.on { animation: comboPop .46s cubic-bezier(.2,1.5,.4,1); }
.stars img.on { animation: starPop .58s cubic-bezier(.2,1.7,.4,1); }
body.at-home #bg { animation: bgDrift 28s ease-in-out infinite alternate; }
#confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
#confetti i { position: absolute; top: -16px; width: 8px; height: 14px; border-radius: 2px; background: var(--c, #ff7a59);
  animation-name: confettiFall; animation-timing-function: cubic-bezier(.15,.75,.35,1); animation-fill-mode: forwards; }
@keyframes screenIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes boardIn { from { opacity: 0; transform: translateY(18px) scale(.96) rotate(-.6deg); } to { opacity: 1; transform: none; } }
@keyframes nodeIn { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; } }
@keyframes tabIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes comboPop { 0% { transform: translate(-50%,-50%) scale(.5) rotate(-4deg); opacity: 0; }
  60% { transform: translate(-50%,-50%) scale(1.08) rotate(1deg); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1) rotate(0); opacity: 1; } }
@keyframes starPop { 0% { transform: scale(.2) rotate(-18deg); } 60% { transform: scale(1.18) rotate(5deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes bgDrift { from { transform: scale(1.02) translate3d(0,0,0); } to { transform: scale(1.07) translate3d(0,-1.4%,0); } }
@keyframes confettiFall { to { transform: translate3d(var(--x,0), 108vh, 0) rotate(760deg); opacity: .85; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

.overlay .card { position: relative; z-index: 2; }


/* ---------- first-time mechanic cards ---------- */
.st-chapter { margin: 3px 0 0; font-size: 11px; font-weight: 700; color: #9a5a32; letter-spacing: .03em; }
.mech-card { max-width: 360px; }
.mech-card > img { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; background: #f3dfc3; margin: 0 auto 4px; display: block; box-shadow: 0 3px 8px rgba(60,30,10,.18); }
.mech-tag { display: inline-block; margin: 2px 0 2px; padding: 3px 9px; border-radius: 999px; background: #ffe1c2; color: #b45309; font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.mech-card .rule { font-size: 14px; margin: 2px 4px 12px; }

/* ---------- full-body Mochi ---------- */
.start-head .mochi-body, .result-head .mochi-body { width: 96px; height: 96px; border-radius: 0; background: none;
  object-fit: contain; box-shadow: none; filter: drop-shadow(0 6px 8px rgba(90,45,15,.22));
  transform-origin: 50% 92%; animation: mochiIdle 3.6s ease-in-out infinite; }
.result-head .mochi-body { width: 112px; height: 112px; animation: mochiCheer 2.6s ease-in-out infinite; }
.mochi-react img { width: 56px; height: 56px; border-radius: 0; object-fit: contain; background: none; flex: none;
  filter: drop-shadow(0 4px 5px rgba(60,30,10,.2)); animation: mochiIdle 2.8s ease-in-out infinite; }
.mochi-react { padding: 5px 10px 5px 4px; }
@keyframes mochiIdle { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1.5deg); } }
@keyframes mochiCheer { 0%,100% { transform: translateY(0) scale(1); } 35% { transform: translateY(-7px) scale(1.03) rotate(-2deg); } 65% { transform: translateY(-2px) scale(1) rotate(2deg); } }

.qa-panel { margin: 8px 0 12px; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.55); border: 1px dashed rgba(160,105,50,.45); }
.qa-panel p { margin: 0 0 6px; font-size: 11px; font-weight: 800; color: #9a5a32; }
.qa-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.qa-btns button { padding: 7px 4px; border-radius: 9px; border: 0; background: #ffe9d2; color: #7c2d12; font-size: 11px; font-weight: 800; cursor: pointer; }
.qa-btns button:active { transform: scale(.97); }

.card { max-height: calc(100vh - 40px); overflow-y: auto; }

/* ---------- daily meta ---------- */
.home-daily { width: min(94vw, 380px); display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 8px 10px;
  border-radius: 18px; background: url('../assets/web/ui/paper.webp') center/cover, rgba(255,247,233,.94);
  border: 2px solid rgba(255,255,255,.6); box-shadow: 0 5px 14px rgba(40,20,5,.22); }
.home-daily img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; background: #f3dfc3; }
.daily-copy { flex: 1; min-width: 0; text-align: left; }
.daily-copy b { display: block; font-size: 14px; color: #6b3a22; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daily-copy small { display: block; margin-top: 1px; font-size: 11px; color: #9a5a32; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daily-claim { flex: none; min-width: 44px; height: 32px; padding: 0 8px; border-radius: 10px; border: 1px solid rgba(180,83,9,.18); background: #ffe1c2; color: #b45309; font-size: 12px; font-weight: 800; cursor: pointer; }
.daily-claim.ready { background: linear-gradient(#ffb24c, #ff7a3d); color: #fff; box-shadow: 0 3px 0 #c2410c; border-color: transparent; }
.daily-claim.claimed { opacity: .55; }
.daily-claim:disabled { cursor: default; }
.home-coins { flex: none; font-size: 11px; font-weight: 800; color: #8a5a32; padding-left: 2px; }
.home-dock { width: min(92vw, 320px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 2px; }
.home-tool { position: relative; height: 58px; border-radius: 14px; border: 2px solid rgba(255,255,255,.55);
  background: url('../assets/web/ui/paper.webp') center/cover, rgba(255,247,233,.9); color: #7c4a2d;
  box-shadow: 0 4px 0 rgba(90,40,10,.16); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 12px; font-weight: 800; cursor: pointer; }
.home-tool i { font-style: normal; font-size: 20px; line-height: 1; }
.home-tool span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-tool em { position: absolute; top: 4px; right: 5px; padding: 1px 4px; border-radius: 6px; background: #ffe1c2; font-style: normal; font-size: 9px; color: #b45309; font-weight: 900; }
.home-tool.ready::after { content: ""; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #e11d48; border: 1px solid #fff; }
.home-tool.challenge { background: url('../assets/web/ui/paper.webp') center/cover, rgba(255,247,233,.9); color: #7c4a2d; }
.home-tool.challenge i { color: #b45309; }
.home-tool.challenge.done { background: #e3efcf; color: #5a7a3a; box-shadow: 0 4px 0 rgba(90,120,50,.16); }
.home-tool.challenge.done em { display: none; }
@media (max-height: 720px) { .home-mascot { width: min(38vw, 175px); max-height: 21vh; } #scr-home { gap: 6px; } .logo { font-size: clamp(28px, 8.5vw, 40px); } .sub { margin-bottom: 6px; } .home-tool { height: 50px; } }

.home-shop { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #ffe1c2; color: #8a4b1f; font-size: 16px; cursor: pointer; }
.shop-card { max-width: 380px; }
.shop-balance { margin: -2px 0 10px; font-size: 13px; color: #9a5a32; font-weight: 800; }
.shop-balance b { color: #c2410c; font-size: 17px; }
.shop-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; margin-bottom: 10px; }
.shop-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.5); border: 1px solid rgba(160,105,50,.2); }
.shop-ic { width: 30px; text-align: center; font-size: 20px; }
.shop-copy { flex: 1; text-align: left; }
.shop-copy b { display: block; font-size: 13px; color: #6b3a22; }
.shop-copy small { font-size: 10px; color: #9a5a32; }
.shop-buy { flex: none; min-height: 32px; padding: 0 12px; border-radius: 10px; border: 0; background: linear-gradient(#ffb24c, #ff7a3d); color: #fff; font-size: 12px; font-weight: 800; box-shadow: 0 2px 0 #c2410c; cursor: pointer; }
.shop-buy:disabled { background: #d8cfc2; color: #8a817a; box-shadow: none; cursor: default; }

.home-shop.ready { position: relative; background: #ffd166; }
.home-shop.ready::after { content: ""; position: absolute; top: 2px; right: 2px; width: 7px; height: 7px; border-radius: 50%; background: #e11d48; border: 1px solid #fff; }
.streak-card { max-width: 390px; }
.streak-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 8px 0 12px; }
.streak-day { min-width: 0; padding: 6px 2px; border-radius: 9px; background: #f1e3cf; border: 2px solid transparent; text-align: center; }
.streak-day b { display: block; font-size: 10px; color: #8a5a32; }
.streak-day span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.1; }
.streak-day.claimed { background: #e3efcf; border-color: #a8c77f; opacity: .8; }
.streak-day.current { background: #ffe0ae; border-color: #ff9a4c; box-shadow: 0 0 0 3px rgba(255,154,76,.18); }
@media (max-width: 370px) { .streak-days { gap: 3px; } .streak-day { padding: 5px 1px; } .streak-day span { font-size: 10px; } }

/* ---------- first-swap paw guide ---------- */
.swap-guide { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.guide-paw { position: absolute; width: 64px; height: 64px; transform: translate(-50%,-50%); object-fit: contain;
  filter: drop-shadow(0 5px 6px rgba(70,30,10,.25)); animation: pawTap 1.25s ease-in-out infinite; }
.guide-ring { position: absolute; width: 70px; height: 70px; transform: translate(-50%,-50%); border: 4px dashed #ff7a59;
  border-radius: 50%; box-shadow: 0 0 0 7px rgba(255,122,89,.16); animation: guideRing 1.25s ease-in-out infinite; }
.guide-line { position: absolute; height: 0; border-top: 4px dashed #ff7a59; transform-origin: 0 50%; filter: drop-shadow(0 2px 1px rgba(120,50,20,.2)); }
.guide-line::after { content: ""; position: absolute; right: -3px; top: -9px; border-left: 12px solid #ff7a59; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.guide-label { position: absolute; transform: translate(-50%,-50%); white-space: nowrap; padding: 4px 9px; border-radius: 999px;
  background: rgba(255,247,233,.94); color: #9a3d1f; font-size: 11px; font-weight: 800; border: 1px solid rgba(255,122,89,.4);
  box-shadow: 0 3px 8px rgba(60,30,10,.15); }
@keyframes pawTap { 0%,100% { transform: translate(-50%,-50%) scale(1) rotate(-4deg); } 50% { transform: translate(-50%,-56%) scale(1.06) rotate(2deg); } }
@keyframes guideRing { 0%,100% { transform: translate(-50%,-50%) scale(.92); opacity: .55; } 50% { transform: translate(-50%,-50%) scale(1.05); opacity: 1; } }
.challenge-pill { width: min(88vw, 320px); margin-top: 2px; padding: 8px 12px; border-radius: 14px; border: 2px solid rgba(255,255,255,.5);
  background: linear-gradient(100deg, rgba(255,231,190,.96), rgba(255,196,132,.94)); color: #7a2e12; font-size: 12px; font-weight: 800;
  box-shadow: 0 4px 12px rgba(40,20,5,.2); cursor: pointer; }
.challenge-pill b { float: right; color: #b45309; font-size: 11px; }
.challenge-pill.done { background: #e3efcf; color: #5a7a3a; }

.checkpoint { cursor: pointer; font: inherit; }
.checkpoint.ready { background: url('../assets/web/ui/paper.webp') center/cover, #ffe0a3; border: 3px solid #ffb24c; color: #b45309; animation: chestGlow 1.6s ease-in-out infinite; }
.checkpoint.claimed { background: #e3efcf; border-color: #a8c77f; color: #5a7a3a; }
.checkpoint:disabled { cursor: default; }
@keyframes chestGlow { 50% { box-shadow: 0 0 0 7px rgba(255,178,76,.22), 0 3px 0 rgba(140,90,50,.18); } }

/* ---------- world intro ---------- */
.world-card { width: min(92vw, 390px); max-height: calc(100vh - 40px); overflow: hidden; border-radius: 26px; position: relative;
  background: #fff4e2; box-shadow: 0 20px 50px rgba(0,0,0,.4); border: 3px solid rgba(255,255,255,.65); }
.world-cover { height: 210px; background-position: center 14%; background-size: cover; background-repeat: no-repeat; }
.world-cover::after { content: ""; display: block; height: 100%; background: linear-gradient(180deg, rgba(40,15,30,.05), rgba(40,15,30,.35)); }
.world-copy { padding: 12px 18px 16px; margin-top: -44px; position: relative; background: url('../assets/web/ui/paper.webp') center/cover, #fff4e2;
  border-radius: 22px 22px 0 0; }
.world-chapter { margin: 0; font-size: 10px; font-weight: 800; color: #9a5a32; letter-spacing: .04em; }
.world-copy h2 { margin: 2px 0 6px; font-size: 25px; color: #6b2e14; }
.world-mochi { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.world-mochi img { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(60,30,10,.2)); animation: mochiIdle 3.4s ease-in-out infinite; }
.world-mochi p { margin: 0; font-size: 12px; line-height: 1.35; color: #7c4a2d; text-align: left; font-weight: 700; }

/* ---------- achievements ---------- */
.ach-card { max-width: 390px; }
.ach-list { display: flex; flex-direction: column; gap: 7px; max-height: 55vh; overflow-y: auto; margin-bottom: 10px; }
.ach-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 12px; background: rgba(255,255,255,.42); border: 1px solid rgba(160,105,50,.18); opacity: .72; }
.ach-row.unlocked { opacity: 1; background: rgba(255,240,205,.8); }
.ach-row.claimed { opacity: .62; }
.ach-ic { width: 25px; text-align: center; font-size: 17px; }
.ach-copy { flex: 1; text-align: left; }
.ach-copy b { display: block; font-size: 12px; color: #6b3a22; }
.ach-copy small { font-size: 10px; color: #9a5a32; }
.ach-buy { flex: none; padding: 6px 8px; border-radius: 8px; border: 0; background: #ffb24c; color: #fff; font-size: 10px; font-weight: 800; cursor: pointer; }
.ach-buy:disabled { background: #d8cfc2; color: #8a817a; cursor: default; }

.qa-card { max-width: 390px; }
.qa-body { max-height: 55vh; overflow-y: auto; margin-bottom: 10px; }
.qa-sec { margin: 8px 0 3px; font-size: 10px; font-weight: 800; color: #9a5a32; text-align: left; text-transform: uppercase; letter-spacing: .04em; }
.qa-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,.45); margin-bottom: 4px; font-size: 11px; color: #6b3a22; }
.qa-row b { color: #b45309; }

.weekly-entry { width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: 14px; border: 2px solid rgba(255,255,255,.45);
  background: linear-gradient(100deg, rgba(255,226,190,.95), rgba(255,180,130,.92)); color: #7a2e12; text-align: left; cursor: pointer; flex: none; }
.weekly-entry > span { font-size: 22px; }
.weekly-entry div { flex: 1; }
.weekly-entry b { display: block; font-size: 12px; }
.weekly-entry small { display: block; font-size: 10px; color: #9a5a32; font-weight: 700; }
.weekly-entry em { font-style: normal; font-size: 20px; color: #b45309; }
.weekly-card { max-width: 390px; }
.weekly-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.weekly-stage { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 12px; background: rgba(255,255,255,.45); border: 1px solid rgba(160,105,50,.18); }
.weekly-stage.done { background: #e3efcf; }
.weekly-stage .ws-ic { width: 26px; text-align: center; font-size: 18px; }
.weekly-stage .ws-copy { flex: 1; text-align: left; }
.weekly-stage b { display: block; font-size: 12px; color: #6b3a22; }
.weekly-stage small { font-size: 10px; color: #9a5a32; }
.weekly-stage button { flex: none; padding: 6px 9px; border-radius: 8px; border: 0; background: #ffb24c; color: #fff; font-size: 10px; font-weight: 800; cursor: pointer; }
.weekly-stage button:disabled { background: #d8cfc2; color: #8a817a; }

.save-card { max-width: 390px; }
.save-data { min-height: 150px; font-size: 10px; }
.save-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.save-actions .btn { min-width: 0; min-height: 40px; margin: 0; font-size: 13px; padding: 0 8px; }
.save-actions .btn:last-child { grid-column: 1 / -1; }
.save-data { width: 100%; padding: 8px; border: 1px solid #d9bfa3; border-radius: 8px; background: #fffdf7; color: #6b3a22; resize: vertical; }

.vol-row { display: flex; align-items: center; gap: 8px; padding: 4px 4px 8px; font-size: 12px; font-weight: 700; color: #7c2d12; }
.vol-row span { flex: 0 0 92px; text-align: left; }
.vol-row input[type=range] { flex: 1; accent-color: #ff7a59; }

.about-card { max-width: 390px; }
.about-ver { margin: -2px 0 8px; font-size: 11px; color: #9a5a32; font-weight: 700; }
.about-body { text-align: left; max-height: 54vh; overflow-y: auto; padding: 0 4px 8px; }
.about-body h3 { margin: 10px 0 3px; font-size: 12px; color: #b45309; }
.about-body p { margin: 0; font-size: 11px; line-height: 1.5; color: #7c4a2d; }

.res-best { margin: -4px 0 6px; font-size: 13px; font-weight: 900; color: #d97706; letter-spacing: .04em; }
#btn-hint { width: 44px; height: 44px; font-size: 20px; border-radius: 14px; }

@keyframes mochiBreathe { 50% { transform: translateY(-2px) scale(1.018); } }
.start-head img, .result-head img { animation: mochiBreathe 3.8s ease-in-out infinite; transform-origin: 50% 85%; }


/* ---------- v2 control scale ---------- */
.ach-buy, .weekly-stage button {
  min-height: 32px; padding: 0 12px; border-radius: 10px; font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.toggle { min-height: 48px; font-size: 15px; }
@media (max-height: 720px) { .home-tool { height: 52px; } }

#btn-settings-home { min-width: 210px; border: 1px solid rgba(255,255,255,.3); gap: 6px; }
.bst em { font-size: 12px; }

/* All modal actions share one width, including ghost/back/menu buttons. */
.card .btn { width: min(100%, 280px); }
.card .btn.ghost { width: min(100%, 280px); }
.save-actions .btn { width: auto; }

/* Tertiary actions on paper cards need real contrast, not a translucent wash. */
.card .btn.ghost.dark {
  width: min(100%, 280px);
  color: #6b3a22;
  background: #f6e4cd;
  box-shadow: 0 2px 0 rgba(124,74,45,.18), inset 0 0 0 1px rgba(124,74,45,.12);
  text-shadow: none;
}
.card .btn.ghost.dark:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(124,74,45,.18), inset 0 0 0 1px rgba(124,74,45,.12);
}

/* ---------- wide / Poki 16:9 ---------- */
@media (min-width: 900px) and (min-aspect-ratio: 6/5) {
  #scr-game {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    grid-template-rows: auto auto 1fr auto;
    gap: 10px 18px;
    padding: 14px 22px;
    align-items: stretch;
  }
  #scr-game .hud { grid-column: 2; grid-row: 1; width: 100%; }
  #scr-game #goals { grid-column: 2; grid-row: 2; align-self: start; justify-content: flex-start; }
  #scr-game .game-stage { grid-column: 1; grid-row: 1 / 5; height: 100%; justify-content: center; }
  #scr-game #board-wrap { width: min(100%, calc(100vh - 32px)); }
  #scr-game #boosters { grid-column: 2; grid-row: 3; align-self: end; justify-content: flex-start; margin: 0; }
  #scr-game #mochi-tip {
    position: static; grid-column: 2; grid-row: 4; transform: none;
    width: 100%; max-width: none; animation: none;
  }
  #scr-game #mochi-tip::after { display: none; }
}
body.poki #btn-plus5 { min-height: 48px; font-size: 16px; }
body.poki #btn-plus5.poki-reward::before { content: '🎬'; margin-right: 6px; }

/* wide right column content */
.game-side { display: none; }
@media (min-width: 900px) and (min-aspect-ratio: 6/5) {
  #scr-game #mochi-tip { display: none !important; }
  #scr-game .game-side {
    display: flex; flex-direction: column; gap: 12px; z-index: 1;
    grid-column: 2; grid-row: 3; align-self: start; min-height: 0;
    padding: 16px;
    border-radius: 20px; border: 2px solid rgba(255,255,255,.65);
    background: url('../assets/web/ui/paper.webp') center/cover, rgba(255,247,233,.94);
    box-shadow: 0 8px 22px rgba(50,20,5,.18);
  }
  #scr-game #boosters { grid-column: 2; grid-row: 4; z-index: 2; padding-bottom: 18px; }
  .side-mochi { display: flex; align-items: center; gap: 10px; text-align: left; }
  .side-mochi img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: none; background: #f3dfc3; }
  .side-mochi b { display: block; font-size: 18px; color: #7a2e12; }
  .side-mochi p { margin: 2px 0 0; font-size: 12px; line-height: 1.35; color: #7c4a2d; font-weight: 700; }
  .side-meta { margin-top: auto; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.5); text-align: left; }
  .side-meta small { display: block; font-size: 11px; color: #9a5a32; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
  .side-meta b { display: block; margin-top: 2px; font-size: 18px; color: #b45309; }
}

@media (min-width: 900px) and (min-aspect-ratio: 6/5) {
  #scr-game { padding: 8px 22px 0; gap: 8px 18px; }
  #scr-game #boosters { margin: 0; }
  #scr-game #boosters .bst { width: 52px; height: 52px; }
  #scr-game #boosters .bst em { margin-top: 4px; font-size: 10px; }
  .side-goals { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
  .side-goals .goal { transform: scale(.92); transform-origin: left center; margin-right: -4px; }
  .side-rule { margin: 2px 2px 0; font-size: 12px; line-height: 1.4; color: #7c4a2d; text-align: left; font-weight: 700; }
  .side-meta { margin-top: auto; }
}

@media (min-width: 900px) and (min-aspect-ratio: 6/5) {
  #scr-game { overflow: hidden; }
  #scr-game .game-side {
    background: none !important; border: 0 !important; box-shadow: none !important;
    padding: 0 !important; gap: 10px !important;
  }
  .game-side .side-mochi, .game-side .side-goals, .game-side .side-rule, .game-side .side-meta {
    background: url('../assets/web/ui/paper.webp') center/cover, rgba(255,247,233,.94);
    border: 2px solid rgba(255,255,255,.65); border-radius: 16px;
    box-shadow: 0 5px 14px rgba(40,20,5,.18);
  }
  .game-side .side-mochi { padding: 10px 12px; }
  .game-side .side-goals { padding: 8px 10px; }
  .game-side .side-rule { padding: 8px 10px; }
  .game-side .side-meta { padding: 10px 12px; }
}

/* Keep the Poki pill clear of the in-game hint button on mobile. */
body.poki #btn-hint { margin-right: 48px; }

body.poki #btn-plus5.poki-reward {
  color: #7c2d12;
  background: linear-gradient(#fff9ee, #ffe6c8);
  box-shadow: 0 4px 0 #c9a27b, 0 9px 16px rgba(0,0,0,.14);
  text-shadow: none;
}
body.poki #btn-plus5.poki-reward #plus5-n { display: none; }

/* worlds: one-level list, five groups of five */
#scr-worlds .world-summary { width: 100%; margin: 0 0 8px; padding: 0 2px; font-size: 12px; font-weight: 800; color: #fff8ec; text-shadow: 0 1px 3px rgba(0,0,0,.45); text-align: left; }
#scr-worlds .world-grid { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding-bottom: 10px; }
.world-group { display: flex; flex-direction: column; gap: 8px; flex: none; }
.world-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; grid-auto-rows: calc((min(100vw, 520px) - 48px) / 3 * 4 / 3); }
.world-section { padding: 8px 2px 0; font-size: 12px; font-weight: 900; letter-spacing: .03em; color: #fff8ec; text-shadow: 0 1px 3px rgba(0,0,0,.5); text-align: left; }
#scr-worlds .world { aspect-ratio: auto; height: 100%; }

/* continuous 500-level map */
#scr-levels .level-path { flex-direction: column; align-items: center; gap: 12px; padding: 8px 0 26px; }
.map-world { position: relative; flex: none; width: 100%; height: 96px; border-radius: 20px; overflow: hidden;
  border: 3px solid #fff; background: #c9bba9 center 30%/cover; box-shadow: 0 5px 0 rgba(0,0,0,.16), 0 10px 20px rgba(0,0,0,.2); }
.map-world::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30,14,5,.72), rgba(30,14,5,.08)); }
.map-world small, .map-world b { position: relative; z-index: 1; display: block; color: #fff; padding-left: 15px; text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.map-world small { padding-top: 22px; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.map-world b { margin-top: 3px; font-size: 19px; line-height: 1.15; }
.map-world.current { outline: 3px solid #ffd166; outline-offset: -3px; }
#scr-levels .weekly-entry { flex: none; margin-bottom: 8px; }

/* real coin icon + reward explanations */
.coin-ic { width: 1.15em; height: 1.15em; object-fit: contain; vertical-align: -0.18em; flex: none; }
.home-coins { display: inline-flex; align-items: center; gap: 3px; }
.home-coins b { font: inherit; }
.shop-hint, .streak-hint { margin: 2px 2px 10px; padding: 8px 10px; border-radius: 10px; background: rgba(124,74,45,.07); color: #7c4a2d; font-size: 11px; line-height: 1.45; font-weight: 700; text-align: left; }
.streak-hint { margin-top: 2px; }
.btn .coin-ic, .shop-buy .coin-ic { width: 1.05em; height: 1.05em; }

/* lives */
.home-lives { display: inline-flex; align-items: center; gap: 2px; flex: none; font-size: 11px; font-weight: 800; color: #b42318; }
.home-lives .heart-ic { color: #e11d48; font-size: 15px; line-height: 1; text-shadow: 0 1px 0 #fff; }
.home-lives b { font: inherit; }

/* pre-level boosters */
.st-boost-row { display: flex; gap: 6px; justify-content: center; width: 100%; margin: 2px 0 7px; }
.st-boost-row.hidden { display: none !important; }
.pre-boost { flex: 1 1 0; min-width: 0; padding: 7px 3px 6px; border-radius: 13px; border: 2px solid #e6cfb4;
  background: url('../assets/web/ui/paper.webp') center/cover, #fff4e2; color: #7c4d2e; cursor: pointer;
  box-shadow: 0 3px 0 rgba(120,70,30,.18); font: inherit; }
.pre-boost span { display: block; font-size: 20px; line-height: 1.1; }
.pre-boost small { display: block; font-size: 10px; line-height: 1.2; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pre-boost b { display: block; font-size: 10px; color: #b45309; }
.pre-boost.on { border-color: #ff9a4c; background: #ffe4bd; box-shadow: 0 3px 0 #c2410c, 0 0 0 3px rgba(255,154,76,.2); }
.pre-boost:disabled { opacity: .4; cursor: default; }
.st-boost-hint { margin: -2px 0 8px; font-size: 10px; font-weight: 700; color: #8a5a32; text-align: center; }

.heart-refill { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 2px;
  border-radius: 50%; background: #fff4e2; border: 1px solid #e7b58c; color: #c2410c; font-size: 13px; line-height: 1; font-weight: 900; cursor: pointer; }
.heart-refill:disabled { opacity: .4; cursor: default; }

/* out-of-lives */
.lives-card { text-align: center; max-width: 330px; }
.lives-card .mochi-body { width: 96px; height: 96px; margin: 0 auto 4px; display: block; }
.lives-big { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin: 8px 0 2px; color: #e11d48; }
.lives-big span { font-size: 34px; line-height: 1; }
.lives-big b { font-size: 34px; line-height: 1; }
.lives-big small { font-size: 14px; color: #9a5a32; }
#lives-next { font-size: 12px; margin: 0 0 10px; }

.map-wallet { display: flex; align-items: center; gap: 8px; flex: none; }
.map-coin, .map-heart { display: inline-flex; align-items: center; gap: 3px; height: 30px; padding: 0 7px; border-radius: 10px;
  background: rgba(255,247,233,.86); border: 1px solid rgba(165,105,60,.22); color: #7c4d2e; font-size: 12px; font-weight: 800; }
.map-coin .coin-ic { width: 16px; height: 16px; }
.map-heart { cursor: pointer; color: #b42318; font: inherit; }
.map-heart span { color: #e11d48; font-size: 15px; line-height: 1; }
.map-heart b { font: inherit; }

.st-hard { display: block; margin: 2px 0 4px; padding: 4px 10px; border-radius: 999px; background: #ffe1d6;
  border: 1px solid #ffb4a0; color: #b42318; font-size: 11px; font-weight: 800; text-align: center; }

.friend-code { width: 100%; height: 44px; margin: 6px 0 10px; padding: 0 12px; border-radius: 12px; border: 2px solid #e6cfb4;
  background: #fff8ec; color: #7c4d2e; font-size: 18px; font-weight: 800; letter-spacing: 2px; text-align: center; text-transform: uppercase; }
.friend-row { display: flex; gap: 8px; }
.friend-row .btn { flex: 1; }

.friend-best { min-height: 16px; margin: -2px 0 4px; font-size: 11px; font-weight: 700; color: #8a5a32; text-align: center; }

.friend-board { margin: 2px 0 8px; text-align: left; }
.friend-board .fb-title { font-size: 11px; font-weight: 800; color: #8a5a32; margin-bottom: 4px; text-align: center; }
.friend-board .fb-row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 8px; background: #fff8ec; margin-top: 3px; font-size: 11px; color: #7c4d2e; font-weight: 700; }
.friend-board .fb-row b { font-family: ui-monospace, monospace; letter-spacing: .5px; }
.friend-board .fb-empty { text-align: center; font-size: 11px; color: #9a5a32; padding: 4px; }

/* Poki: hide external/social links before JS re-applies visibility. */
html.poki #btn-privacy,
body.poki #btn-privacy,
html.poki #btn-support,
body.poki #btn-support,
html.poki #btn-invite,
body.poki #btn-invite,
html.poki #btn-friend,
body.poki #btn-friend { display: none !important; }