/* letpush.css — LetPush 推箱子：只有「板面」（迷宮＋方向鍵）。
   木框／教練／🌼／回家的路／折線圖／統計全部在 garden-kit.css（class gk-），這裡不要重寫。 */
.gk.pu { max-width: 520px; }

.pu-ref-goal { display: flex; align-items: center; justify-content: center; gap: 1px; font-size: 17px; }
.pu .gk-road-home { align-items: center; justify-content: center; }
.pu-home-star { font-size: 18px; line-height: 1; }
.pu-lvl button { padding: 0 12px; }
.pu-lvl button[disabled] { opacity: .35; cursor: default; }
.pu-lvl-label { display: inline-flex; align-items: center; padding: 0 12px; font-weight: 800; font-size: 14.5px; color: #334155; border-left: 1px solid var(--gd-bd); border-right: 1px solid var(--gd-bd); min-width: 74px; justify-content: center; }

.pu-lvl-label { appearance: none; background: none; border-top: 0; border-bottom: 0; cursor: pointer; font-family: inherit; }
.pu-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; width: 100%; max-height: 196px; overflow-y: auto; padding: 8px; box-sizing: border-box; background: #fff8ea; border: 2px solid #e5c58c; border-radius: 14px; }
.pu-pick { appearance: none; position: relative; height: 40px; border-radius: 10px; border: 2px solid #e5c58c; background: #fff; font: 800 15px/1 inherit; color: #475569; cursor: pointer; }
.pu-pick.is-done { background: #fef9c3; border-color: #eab308; }
.pu-pick.is-done::after { content: '⭐'; position: absolute; right: -5px; top: -7px; font-size: 12px; }
.pu-pick.is-cur { border-color: var(--gk-good); box-shadow: 0 0 0 2px var(--gk-good); }

.pu-board { position: relative; }
/* 迷宮：格子用 --x/--y 定位，寬高比跟著關卡走 */
.pu-grid {
  position: relative; width: 100%; max-width: calc(var(--w) * 64px); margin: 0 auto; aspect-ratio: var(--w) / var(--h);
  border-radius: 14px; overflow: hidden; background: #f7e6c8; box-shadow: inset 0 3px 10px rgba(90, 55, 10, .28);
  touch-action: none; outline: none; user-select: none; -webkit-user-select: none;
}
.pu-grid:focus-visible { box-shadow: inset 0 3px 10px rgba(90,55,10,.28), 0 0 0 3px #86efac; }
.pu-cell { position: absolute; width: calc(100% / var(--w)); height: calc(100% / var(--h)); left: calc(var(--x) * 100% / var(--w)); top: calc(var(--y) * 100% / var(--h)); box-sizing: border-box; }
.pu-floor { background: var(--fc, #fff6e2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), inset 0 -2px 0 rgba(120,80,20,.06); }
.pu-wall { padding: 1.5px; }
.pu-wall::before { content: ''; display: block; width: 100%; height: 100%; border-radius: 24%; background: linear-gradient(160deg, rgba(255,255,255,.35), transparent 45%), var(--wc); box-shadow: inset 0 -6px 0 rgba(0,0,0,.2), inset 0 3px 0 rgba(255,255,255,.45), 0 2px 3px rgba(60,30,0,.25); }
/* 星星地磚：底下有一圈光暈；箱子推上來後星星跳到箱子上面 */
.pu-goal { display: grid; place-items: center; font-size: clamp(14px, 5vw, 26px); pointer-events: none; }
.pu-goal::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(253,224,71,.85), rgba(253,224,71,0) 70%); animation: pu-pulse 1.8s ease-in-out infinite; }
.pu-goal span { position: relative; opacity: .7; transition: opacity .2s, transform .2s; filter: drop-shadow(0 1px 1px rgba(160,100,0,.4)); }
.pu-goal.is-lit { z-index: 3; }
.pu-goal.is-lit span { opacity: 1; transform: scale(.78); }
@keyframes pu-pulse { 50% { transform: scale(1.18); opacity: .6; } }
/* padding 的 % 是看「迷宮」的寬度，不是格子的，所以箱子用 inset 縮進去 */
.pu-box, .pu-bear { transition: left .11s linear, top .11s linear; z-index: 2; }
/* 禮物盒：四色 SVG（蝴蝶結＋緞帶＋圓點），用背景圖不用 <img> */
.pu-box-body { position: absolute; inset: 3%; background: center / contain no-repeat; filter: drop-shadow(0 3px 2px rgba(60,30,0,.3)); transition: transform .15s; }
.pu-box--0 .pu-box-body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23a8322a' stroke-width='3.5' stroke-linejoin='round'%3E%3Crect x='15' y='42' width='70' height='50' rx='8' fill='%23f47c72'/%3E%3Crect x='43' y='42' width='14' height='50' fill='%23fde047' stroke='%23b98a08'/%3E%3Crect x='9' y='30' width='82' height='19' rx='7' fill='%23f47c72'/%3E%3Crect x='42' y='30' width='16' height='19' fill='%23fde047' stroke='%23b98a08'/%3E%3Cg fill='%23fde047' stroke='%23b98a08'%3E%3Cpath d='M50 27 C38 4 14 8 22 24 C26 32 40 31 50 27Z'/%3E%3Cpath d='M50 27 C62 4 86 8 78 24 C74 32 60 31 50 27Z'/%3E%3Ccircle cx='50' cy='26' r='7'/%3E%3C/g%3E%3C/g%3E%3Crect x='15' y='49' width='70' height='5' fill='%23000' opacity='.12'/%3E%3Cg fill='%23fff' opacity='.7'%3E%3Ccircle cx='24' cy='58' r='2.2'/%3E%3Ccircle cx='34' cy='58' r='2.2'/%3E%3Ccircle cx='66' cy='58' r='2.2'/%3E%3Ccircle cx='76' cy='58' r='2.2'/%3E%3Ccircle cx='24' cy='70' r='2.2'/%3E%3Ccircle cx='34' cy='70' r='2.2'/%3E%3Ccircle cx='66' cy='70' r='2.2'/%3E%3Ccircle cx='76' cy='70' r='2.2'/%3E%3Ccircle cx='24' cy='82' r='2.2'/%3E%3Ccircle cx='34' cy='82' r='2.2'/%3E%3Ccircle cx='66' cy='82' r='2.2'/%3E%3Ccircle cx='76' cy='82' r='2.2'/%3E%3C/g%3E%3Crect x='14' y='33' width='24' height='4' rx='2' fill='%23fff' opacity='.5'/%3E%3C/svg%3E"); }
.pu-box--1 .pu-box-body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23b58410' stroke-width='3.5' stroke-linejoin='round'%3E%3Crect x='15' y='42' width='70' height='50' rx='8' fill='%23fbd35a'/%3E%3Crect x='43' y='42' width='14' height='50' fill='%23f26d7d' stroke='%23a52a3c'/%3E%3Crect x='9' y='30' width='82' height='19' rx='7' fill='%23fbd35a'/%3E%3Crect x='42' y='30' width='16' height='19' fill='%23f26d7d' stroke='%23a52a3c'/%3E%3Cg fill='%23f26d7d' stroke='%23a52a3c'%3E%3Cpath d='M50 27 C38 4 14 8 22 24 C26 32 40 31 50 27Z'/%3E%3Cpath d='M50 27 C62 4 86 8 78 24 C74 32 60 31 50 27Z'/%3E%3Ccircle cx='50' cy='26' r='7'/%3E%3C/g%3E%3C/g%3E%3Crect x='15' y='49' width='70' height='5' fill='%23000' opacity='.12'/%3E%3Cg fill='%23fff' opacity='.7'%3E%3Ccircle cx='24' cy='58' r='2.2'/%3E%3Ccircle cx='34' cy='58' r='2.2'/%3E%3Ccircle cx='66' cy='58' r='2.2'/%3E%3Ccircle cx='76' cy='58' r='2.2'/%3E%3Ccircle cx='24' cy='70' r='2.2'/%3E%3Ccircle cx='34' cy='70' r='2.2'/%3E%3Ccircle cx='66' cy='70' r='2.2'/%3E%3Ccircle cx='76' cy='70' r='2.2'/%3E%3Ccircle cx='24' cy='82' r='2.2'/%3E%3Ccircle cx='34' cy='82' r='2.2'/%3E%3Ccircle cx='66' cy='82' r='2.2'/%3E%3Ccircle cx='76' cy='82' r='2.2'/%3E%3C/g%3E%3Crect x='14' y='33' width='24' height='4' rx='2' fill='%23fff' opacity='.5'/%3E%3C/svg%3E"); }
.pu-box--2 .pu-box-body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%232459b0' stroke-width='3.5' stroke-linejoin='round'%3E%3Crect x='15' y='42' width='70' height='50' rx='8' fill='%236db0f5'/%3E%3Crect x='43' y='42' width='14' height='50' fill='%23fde047' stroke='%23b98a08'/%3E%3Crect x='9' y='30' width='82' height='19' rx='7' fill='%236db0f5'/%3E%3Crect x='42' y='30' width='16' height='19' fill='%23fde047' stroke='%23b98a08'/%3E%3Cg fill='%23fde047' stroke='%23b98a08'%3E%3Cpath d='M50 27 C38 4 14 8 22 24 C26 32 40 31 50 27Z'/%3E%3Cpath d='M50 27 C62 4 86 8 78 24 C74 32 60 31 50 27Z'/%3E%3Ccircle cx='50' cy='26' r='7'/%3E%3C/g%3E%3C/g%3E%3Crect x='15' y='49' width='70' height='5' fill='%23000' opacity='.12'/%3E%3Cg fill='%23fff' opacity='.7'%3E%3Ccircle cx='24' cy='58' r='2.2'/%3E%3Ccircle cx='34' cy='58' r='2.2'/%3E%3Ccircle cx='66' cy='58' r='2.2'/%3E%3Ccircle cx='76' cy='58' r='2.2'/%3E%3Ccircle cx='24' cy='70' r='2.2'/%3E%3Ccircle cx='34' cy='70' r='2.2'/%3E%3Ccircle cx='66' cy='70' r='2.2'/%3E%3Ccircle cx='76' cy='70' r='2.2'/%3E%3Ccircle cx='24' cy='82' r='2.2'/%3E%3Ccircle cx='34' cy='82' r='2.2'/%3E%3Ccircle cx='66' cy='82' r='2.2'/%3E%3Ccircle cx='76' cy='82' r='2.2'/%3E%3C/g%3E%3Crect x='14' y='33' width='24' height='4' rx='2' fill='%23fff' opacity='.5'/%3E%3C/svg%3E"); }
.pu-box--3 .pu-box-body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%232c8439' stroke-width='3.5' stroke-linejoin='round'%3E%3Crect x='15' y='42' width='70' height='50' rx='8' fill='%2374d082'/%3E%3Crect x='43' y='42' width='14' height='50' fill='%23f26d7d' stroke='%23a52a3c'/%3E%3Crect x='9' y='30' width='82' height='19' rx='7' fill='%2374d082'/%3E%3Crect x='42' y='30' width='16' height='19' fill='%23f26d7d' stroke='%23a52a3c'/%3E%3Cg fill='%23f26d7d' stroke='%23a52a3c'%3E%3Cpath d='M50 27 C38 4 14 8 22 24 C26 32 40 31 50 27Z'/%3E%3Cpath d='M50 27 C62 4 86 8 78 24 C74 32 60 31 50 27Z'/%3E%3Ccircle cx='50' cy='26' r='7'/%3E%3C/g%3E%3C/g%3E%3Crect x='15' y='49' width='70' height='5' fill='%23000' opacity='.12'/%3E%3Cg fill='%23fff' opacity='.7'%3E%3Ccircle cx='24' cy='58' r='2.2'/%3E%3Ccircle cx='34' cy='58' r='2.2'/%3E%3Ccircle cx='66' cy='58' r='2.2'/%3E%3Ccircle cx='76' cy='58' r='2.2'/%3E%3Ccircle cx='24' cy='70' r='2.2'/%3E%3Ccircle cx='34' cy='70' r='2.2'/%3E%3Ccircle cx='66' cy='70' r='2.2'/%3E%3Ccircle cx='76' cy='70' r='2.2'/%3E%3Ccircle cx='24' cy='82' r='2.2'/%3E%3Ccircle cx='34' cy='82' r='2.2'/%3E%3Ccircle cx='66' cy='82' r='2.2'/%3E%3Ccircle cx='76' cy='82' r='2.2'/%3E%3C/g%3E%3Crect x='14' y='33' width='24' height='4' rx='2' fill='%23fff' opacity='.5'/%3E%3C/svg%3E"); }
.pu-box.is-home .pu-box-body { filter: drop-shadow(0 0 5px #fde047) drop-shadow(0 0 9px rgba(253,224,71,.9)); animation: pu-pop .3s; }
@keyframes pu-pop { 50% { transform: scale(1.14); } }
/* 小熊：戴藍帽子的 SVG（用背景圖，不用 <img>，站上的 lightbox 才不會抓到） */
.pu-bear { z-index: 4; filter: drop-shadow(0 3px 2px rgba(60,30,0,.3)); }
.pu-bear-face { position: absolute; inset: 2%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='22' cy='34' r='14' fill='%23a85f1f'/%3E%3Ccircle cx='22' cy='34' r='7.5' fill='%23f0b78a'/%3E%3Ccircle cx='78' cy='34' r='14' fill='%23a85f1f'/%3E%3Ccircle cx='78' cy='34' r='7.5' fill='%23f0b78a'/%3E%3Cellipse cx='50' cy='60' rx='38' ry='34' fill='%23c9772b'/%3E%3Cellipse cx='50' cy='66' rx='38' ry='28' fill='%23d18537'/%3E%3Cpath d='M19 42 Q50 -6 81 42 Q50 34 19 42Z' fill='%233b82f6'/%3E%3Cpath d='M15 43 Q50 31 90 45 Q56 50 15 47Z' fill='%231d4ed8'/%3E%3Cpath d='M50 12l3 6.2 6.8.9-5 4.7 1.3 6.7-6.1-3.3-6.1 3.3 1.3-6.7-5-4.7 6.8-.9z' fill='%23fde047'/%3E%3Ccircle cx='36' cy='58' r='5' fill='%232b1a0e'/%3E%3Ccircle cx='64' cy='58' r='5' fill='%232b1a0e'/%3E%3Ccircle cx='37.6' cy='56.2' r='1.7' fill='%23fff'/%3E%3Ccircle cx='65.6' cy='56.2' r='1.7' fill='%23fff'/%3E%3Ccircle cx='25' cy='70' r='6' fill='%23f78fa0' opacity='.65'/%3E%3Ccircle cx='75' cy='70' r='6' fill='%23f78fa0' opacity='.65'/%3E%3Cellipse cx='50' cy='73' rx='16' ry='12' fill='%23f6dcb4'/%3E%3Cellipse cx='50' cy='67.5' rx='5.5' ry='4' fill='%232b1a0e'/%3E%3Cpath d='M43 75 Q50 84 57 75' fill='%23e2566a' stroke='%232b1a0e' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; animation: pu-bob 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
.pu-bear[data-f="3"] .pu-bear-face { scale: -1 1; }
.pu-bear.is-push .pu-bear-face { animation: pu-push .22s; }
@keyframes pu-bob { 50% { transform: translateY(-4%) scale(1.03, .97); } }
@keyframes pu-push { 40% { transform: scale(1.12, .9); } }
.pu-grid--won .pu-bear-face { animation: pu-dance .5s 3; }
@keyframes pu-dance { 50% { transform: translateY(-14%) rotate(8deg); } }

/* 方向鍵：大顆、十字排列；新手模式時箭頭外框上色＋圖示 */
.pu-pad { display: grid; grid-template-columns: repeat(3, 62px); grid-template-rows: repeat(2, 56px); gap: 6px; justify-content: center; margin: 12px auto 0; }
.pu-pad-btn {
  appearance: none; position: relative; cursor: pointer; font-size: 28px; line-height: 1; border-radius: 16px;
  background: #fff8ea; border: 3px solid #e5c58c; box-shadow: 0 3px 0 #d9b77f; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; transition: transform .06s, box-shadow .06s; padding: 0;
}
.pu-pad-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #d9b77f; }
.pu-pad-0 { grid-column: 2; grid-row: 1; } .pu-pad-3 { grid-column: 1; grid-row: 2; } .pu-pad-2 { grid-column: 2; grid-row: 2; } .pu-pad-1 { grid-column: 3; grid-row: 2; }
.pu-pad-badge { position: absolute; right: -7px; top: -7px; width: 22px; height: 22px; border-radius: 50%; display: none; place-items: center; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.pu-pad-badge svg { width: 13px; height: 13px; display: block; }
.pu-pad--hints .is-good { border-color: var(--gk-good); background: #ecf8ef; box-shadow: 0 3px 0 var(--gk-good); }
.pu-pad--hints .is-bad  { border-color: var(--gk-bad); box-shadow: 0 3px 0 var(--gk-bad); }
.pu-pad--hints .is-no   { border-color: var(--gk-no); border-style: dashed; opacity: .6; }
.pu-pad--hints .is-good .pu-pad-badge { display: grid; background: var(--gk-good); }
.pu-pad--hints .is-bad  .pu-pad-badge { display: grid; background: var(--gk-bad); }
.pu-pad--hints .is-no   .pu-pad-badge { display: grid; background: var(--gk-no); }
.pu-pad-btn.gk-glow { animation: gk-glow 1s ease-in-out infinite; }
.pu-pad-btn .gk-hand { top: auto; bottom: -14px; }
.pu .gk-win { position: absolute; top: auto; }
@media (prefers-reduced-motion: reduce) { .pu-box, .pu-bear { transition: none; } .pu-bear-face, .pu-goal::before, .pu-grid--won .pu-bear-face { animation: none; } }