/* 농장 간판 UI — 지피티 시안(art/raw/mock/gpt-a.png)을 그대로 옮긴 것.
 * 부품 그림은 같은 대화에서 받은 부품 시트를 scripts/slice-kit.py 로 잘랐다(art/ui-*.webp), 배경은 art/bg-farm.jpg.
 * 맨 마지막에 읽혀서 앞의 theme·effects·arcade·nyan 을 덮는다. */
:root { --wood: #8a4b1c; --wood-d: #5c3418; --cream: #fff0cf; --ink: #5a3310; --teal: #0e4f63; }
html, body { background: #7ec850 !important; }
.game-layout { background: url('art/bg-farm.jpg') center top / cover no-repeat !important; }
#app { background: none !important; box-shadow: none !important; border: 0 !important;
  padding: calc(6px + var(--sat)) calc(6px + var(--sar)) calc(6px + var(--sab)) calc(6px + var(--sal)) !important; }

/* ── 윗부분 ── */
#top { flex: none; display: grid; grid-template-columns: 25% 1fr 24%; gap: 4px; align-items: start; padding: 2px 0 4px; }
.logo-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 3px 0 #00000026); }
#top .mid { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 2px; }
#goalsign { position: relative; aspect-ratio: 471 / 243; background: url('art/ui-goal.webp') center / 100% 100% no-repeat; }
#goalsign .tab { position: absolute; left: 0; right: 0; top: 5%; height: 19%; display: flex; align-items: center; justify-content: center; gap: 4px;
  font-family: 'Jua', sans-serif; font-size: 13px; letter-spacing: .5px; color: #fff3c7; text-shadow: 0 1px 0 #3c1e08, 0 0 3px #3c1e08; }
#goalsign .tab b { font-weight: 400; font-size: 15px; }
#goalsign .tab small { font-size: 10px; opacity: .85; }
#goals { position: absolute !important; left: 9%; right: 9%; top: 33%; bottom: 12%; display: flex !important; align-items: center; justify-content: space-evenly; gap: 2px !important; }
.goal { display: flex !important; flex-direction: column !important; align-items: center; gap: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; min-width: 0; }
.goal .ico { width: 34px !important; height: 30px !important; background-color: transparent !important; border-radius: 0 !important; }
.goal b { font-family: 'Jua', sans-serif; font-weight: 400; font-size: 17px !important; line-height: 1; color: var(--ink) !important; }
.goal.done { background: none !important; }
.goal.done .ico { opacity: .45; }
.goal.done b::after { content: '✓' !important; color: #2f9e44; font-size: 18px; }
.chain-legend .ico { width: 24px; height: 24px; }
.chain-legend i { color: var(--wood); }
.chain-legend b { color: var(--ink); margin-left: 4px; font-size: 12px; }
#starbar { position: relative; height: 24px; margin: 0 2%; background: url('art/ui-bar.webp') center / 100% 100% no-repeat; }
#starbar .fill { position: absolute; left: 5%; top: 27%; bottom: 27%; width: 0; max-width: 90%; border-radius: 8px; background: linear-gradient(#8fe35a, #3fb526); box-shadow: inset 0 2px 0 #c9f7a8; transition: width .35s ease-out; }
#starbar .s { position: absolute; top: 50%; width: 24px; height: 24px; margin: -13px 0 0 -12px; background: url('art/ui-star-off.webp') center / contain no-repeat; }
#starbar .s.on { background-image: url('art/ui-star-on.webp'); animation: starpop .4s ease-out; }
#starbar .s1 { left: 36%; } #starbar .s2 { left: 65%; } #starbar .s3 { left: 93%; }
@keyframes starpop { 40% { transform: scale(1.5) rotate(-12deg); } }
#starbar .sc { position: absolute; left: 9%; top: 0; line-height: 24px; font-size: 10px; color: #fff; text-shadow: 0 1px 1px #1d5c12; white-space: nowrap; }
#starbar .sc b { font-weight: 400; }
#timebar { height: 12px !important; margin: 0 4% !important; border-radius: 7px !important; background: var(--wood-d) !important; border: 2px solid var(--wood) !important; box-shadow: none !important; }
#timebar span { line-height: 8px !important; font-size: 9px !important; color: #fff !important; text-shadow: 0 1px 0 #000 !important; right: 5px !important; }
#top .right { display: flex; flex-direction: column; align-items: center; gap: 3px; }
#movesign { position: relative; width: 100%; aspect-ratio: 300 / 274; background: url('art/ui-moves.webp') center / 100% 100% no-repeat; outline: none !important; }
#movesign .lbl { position: absolute; left: 40%; right: 8%; top: 31%; text-align: center; font-size: 10px !important; color: var(--ink) !important; white-space: nowrap; }
#movesign b { position: absolute; left: 10%; right: 10%; top: 44%; text-align: center; font-family: 'Jua', sans-serif; font-weight: 400; font-size: 34px !important; line-height: 1 !important; color: var(--ink) !important; text-shadow: 0 2px 0 #fff8 !important; }
#movesign.low-moves b { color: #d4232e !important; animation: lowmove .6s ease-in-out infinite; }
@keyframes lowmove { 50% { transform: scale(1.12); } }
.top-btns { display: flex; gap: 5px; }
#help, #mute { width: 30px !important; height: 30px !important; border-radius: 50% !important; padding: 0; font-size: 16px !important; font-family: 'Jua', sans-serif; line-height: 1;
  background: var(--cream) !important; border: 2.5px solid var(--wood) !important; color: var(--ink) !important; box-shadow: 0 2px 0 var(--wood-d) !important; }
#mute.off { background: #cfc3b0 !important; color: #8d7a66 !important; text-decoration: line-through; }

/* ── 판: 청록 쟁반 ── */
#board { background: none !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; }
#board::before { content: ''; position: absolute; inset: -5px; z-index: 0; background: url('art/ui-tray.webp') center / 100% 100% no-repeat; filter: drop-shadow(0 5px 0 #0a3a4a66); pointer-events: none; }
.tile { background: #ffffff10 !important; border: 2px solid transparent !important; background-clip: padding-box !important; border-radius: 12px !important; filter: none !important; z-index: 1; }
.tile:nth-child(2n) { background: #ffffff08 !important; }
.kit { z-index: 2; }
.kit .pic { filter: drop-shadow(0 2px 0 #06283355) !important; }
.boss #board::before { filter: hue-rotate(150deg) saturate(1.3) drop-shadow(0 5px 0 #4a0a0a66); }
.night #board::before { filter: hue-rotate(55deg) brightness(.75) drop-shadow(0 5px 0 #14083a88); }
.night .tile, .night .tile:nth-child(2n) { background: #ffffff0d !important; }
.night .game-layout { background: linear-gradient(#0b1f4dd0, #24124dd0), url('art/bg-farm.jpg') center top / cover no-repeat !important; }
.aiming #board { box-shadow: none !important; }
.aiming #board::before { filter: drop-shadow(0 0 0 #fff253) drop-shadow(0 0 6px #fff253); }
.fx-layer { border-radius: 0 !important; overflow: visible !important; }

/* ── 아래: 한 줄 팁 + 나무 띠 ── */
.tip-wrap { flex: none; margin: 4px 0 2px !important; padding: 0 6px !important; min-height: 0 !important; background: none !important; border: 0 !important; justify-content: center; }
#tip { font-size: 12.5px !important; color: #fff !important; text-shadow: 0 1px 0 #24551a, 0 0 4px #1d4a14, 0 0 2px #1d4a14; text-align: center !important; }
.aiming #tip { color: #fff253 !important; }
#bottom { flex: none; position: relative; padding: 7px 10px 8px; background: url('art/ui-wood.webp') center / 100% 100% no-repeat; filter: drop-shadow(0 3px 0 #0000002e); }
#items { display: flex !important; align-items: center; justify-content: flex-end; gap: 8px !important; padding: 0 !important; }
.slot { position: relative; flex: none; width: 48px; height: 47px; padding: 0 !important; margin: 0; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important;
  background: url('art/ui-boost.webp') center / 100% 100% no-repeat !important; display: flex; align-items: center; justify-content: center; }
.slot .ico { width: 30px !important; height: 30px !important; }
.slot b { position: absolute; right: -6px; bottom: -5px; width: 22px; height: 22px; min-width: 0 !important; line-height: 22px; font-family: 'Jua', sans-serif; font-weight: 400; font-size: 13px; color: #fff;
  background: url('art/ui-badge.webp') center / contain no-repeat; text-shadow: 0 1px 0 #7a0d18; }
.slot:not(.have):not(.shop) .ico { filter: grayscale(.9) opacity(.6); }
.slot:not(.have):not(.shop) b { filter: grayscale(1); }
.slot.aim { transform: translateY(-4px) scale(1.06); filter: drop-shadow(0 0 5px #fff253); box-shadow: none !important; }
.slot.shop { order: -1; margin-right: auto !important; width: 148px; height: 44px; background: url('art/ui-coin.webp') center / 100% 100% no-repeat !important; }
.slot.shop .ico, .slot.shop .coin { display: none !important; }
.slot.shop b { position: static; width: auto; height: auto; background: none; font-size: 18px; line-height: 44px; color: #fff3c7; text-shadow: 0 2px 0 #2b1405; padding-right: 8px; }

/* ── 겹치는 화면(시작·결과·상점·도감·설명): 농장 위에 크림색 나무 패널 ── */
.screen { top: 0 !important; inset: 0 !important; background: linear-gradient(#ffffff26, #2b6b1e55), url('art/bg-farm.jpg') center top / cover no-repeat !important; padding: calc(10px + var(--sat)) 14px calc(10px + var(--sab)) !important; z-index: 30; }
#tutorial { z-index: 35; }
.card { padding: 10px 6px !important; gap: 0; }
.start-card::before, .result-card::before { display: none !important; }
.title-logo { width: min(62%, 250px); height: auto; display: block; margin: 0 auto 4px; filter: drop-shadow(0 5px 0 #00000030); animation: logobob 2.6s ease-in-out infinite; }
@keyframes logobob { 50% { transform: translateY(-5px) rotate(-1.5deg); } }
.logo .cats { display: none !important; }
.logo p, .card > p { color: #fff !important; text-shadow: 0 2px 0 #2b6b1e, 0 0 6px #1d4a14 !important; font-size: 16px !important; margin: 4px 0 12px !important; }
.card h2, .logo h2, .result-card h2, .dex-card h2, .tut-card h2, .shop-head h2 { color: #fff3a0 !important; -webkit-text-stroke: 0 !important; text-shadow: 0 3px 0 var(--wood-d), 2px 0 0 var(--wood-d), -2px 0 0 var(--wood-d), 0 -2px 0 var(--wood-d) !important; }
.big { border: solid transparent !important; border-width: 14px 22px 18px !important; border-image: url('art/ui-btn.webp') 60 90 70 90 fill / 14px 22px 18px stretch !important; background: none !important; box-shadow: none !important; border-radius: 0 !important;
  color: #6b3208 !important; text-shadow: 0 1px 0 #fff3a0 !important; font-size: 23px !important; padding: 6px 10px !important; max-width: 340px !important; min-height: 62px; }
.big:active { transform: translateY(3px) !important; box-shadow: none !important; }
.big:disabled { filter: grayscale(.6); opacity: .8; }
.big.alt { filter: hue-rotate(150deg) saturate(.9); margin-top: 8px; }
.ghost { background: var(--cream) !important; border: 3px solid var(--wood) !important; color: var(--ink) !important; box-shadow: 0 3px 0 var(--wood-d) !important; border-radius: 14px !important; text-decoration: none !important; }
.home-row, #shop-list li, #dex-list li, ol.tut li { background: var(--cream) !important; border: 3px solid var(--wood) !important; box-shadow: 0 3px 0 var(--wood-d), inset 0 2px 0 #fffaf0 !important; color: var(--ink) !important; }
.home-row b, #shop-list .name, #dex-list b, ol.tut b { color: var(--ink) !important; }
.home-row span, .home-row div span, #shop-list .how, #dex-list small, ol.tut div { color: #7a5330 !important; }
.home-row em, #shop-list .have { color: #c2410c !important; }
.home-row .dots i { background: #e6d3ac; color: #a08258; }
.home-btns .ghost small { color: #7a5330 !important; }
.stamps i { background: #e6d3ac; border-color: #b99a6b; }
.shop-note { color: #fff !important; text-shadow: 0 2px 0 #2b6b1e, 0 0 5px #1d4a14; }
.coin-pill { background: var(--wood-d) !important; border: 2px solid #ffd36b !important; color: #fff3c7 !important; box-shadow: none !important; }
.start-card .foot, #sound-note { color: #fff !important; text-shadow: 0 1px 0 #24551a, 0 0 4px #1d4a14; }
#r-gift, #r-coins { color: #fff !important; text-shadow: 0 2px 0 #2b6b1e, 0 0 5px #1d4a14 !important; }
#r-stars span { background-image: url('art/ui-star-on.webp') !important; filter: drop-shadow(0 3px 0 #00000030) !important; }
#r-stars .dim { background-image: url('art/ui-star-off.webp') !important; filter: none !important; opacity: .85 !important; }
.result-paw { display: none; }
/* 시간 경고·환급 연출 */
#moves.pulse { animation: movepulse .5s ease-out; }
#toast { background: var(--cream) !important; color: var(--ink) !important; border: 3px solid var(--wood) !important; font-family: 'Jua', sans-serif; }
.combo-banner b { color: #fff045 !important; -webkit-text-stroke-color: var(--wood-d) !important; }
.goal-toast { background: var(--cream) !important; color: var(--ink) !important; border: 3px solid var(--wood) !important; }
@media (max-width: 345px) { #movesign b { font-size: 28px !important; } .goal .ico { width: 28px !important; height: 25px !important; } .slot.shop { width: 120px; } }
@media (min-width: 731px) { #app { max-width: 480px !important; } }
/* 다듬기: 탭 글자·점수 겹침 */
#goalsign .tab { font-size: 11px; gap: 3px; }
#goalsign .tab b { font-size: 13px; }
#goalsign .tab small { font-size: 9px; }
#starbar .sc { left: 8%; font-size: 9px; }
#starbar .s1 { left: 40%; }
#dex, #shop { z-index: 36 !important; }
.pill { background: #f87824 !important; border-color: #ffca65 !important; color: #fff2b0 !important; }

/* ══ 어른 고양이: 뿅 나타나 또렷하게 0.8초 서 있다가(흰 테두리·살짝 통통) 움찔하고 달려 나간다 ══ */
.runner { animation: dash-clear 1.8s both !important; opacity: 1; z-index: 14;
  width: calc(var(--cell) * 3.1) !important; height: calc(var(--cell) * 2.3) !important;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 5px 3px #00000055) !important; }
@keyframes dash-clear {
  0%   { transform: translate(-50%,-50%) scale(.2); opacity: 0; animation-timing-function: cubic-bezier(.2,1.6,.4,1); }
  10%  { transform: translate(-50%,-52%) scale(1.18); opacity: 1; }
  16%  { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  30%  { transform: translate(-50%,-53%) scale(1.03); opacity: 1; }
  44%  { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  58%  { transform: translate(-50%,-50%) scale(1); opacity: 1; animation-timing-function: ease-in; }
  67%  { transform: translate(-60%,-49%) scale(1.08, .92); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .55); }
  96%  { opacity: 1; }
  100% { transform: translate(520px,-70%) scale(.95); opacity: 0; }
}
.slow .runner { animation-duration: 7s !important; }

/* ══ 4개·5개 짝, 4·5콤보 연출 ══ */
.bigfx-flash { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; pointer-events: none; z-index: 11;
  background: radial-gradient(circle, #fff 0, #fff7b0 35%, #ffd23f00 70%); animation: bf-flash .55s ease-out forwards; }
.bigfx-flash.t2 { background: radial-gradient(circle, #fff 0, #ffe9f3 30%, #ff5f9e00 70%); }
@keyframes bf-flash { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(26); opacity: 0; } }
.bigfx-rays { position: absolute; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; pointer-events: none; z-index: 11;
  background: repeating-conic-gradient(#fff6a8cc 0 9deg, #ffffff00 9deg 22deg); -webkit-mask: radial-gradient(circle, #000 12%, #0000 68%); mask: radial-gradient(circle, #000 12%, #0000 68%);
  animation: bf-rays 1.25s ease-out forwards; }
.bigfx-rays.t2 { width: 460px; height: 460px; margin: -230px 0 0 -230px; background: repeating-conic-gradient(#ffd23fdd 0 7deg, #ff5f9e99 7deg 11deg, #ffffff00 11deg 20deg); }
@keyframes bf-rays { 0% { transform: scale(.2) rotate(0); opacity: 0; } 18% { opacity: 1; } 100% { transform: scale(1.25) rotate(140deg); opacity: 0; } }
.bigfx-ring { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 6px solid #fff; pointer-events: none; z-index: 12; animation: bf-ring .8s ease-out forwards; }
.bigfx-ring.t2 { border-color: #ffe137; border-width: 8px; }
.bigfx-ring.late { border-color: #ff7fb2; }
@keyframes bf-ring { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(9); opacity: 0; } }
.bigfx-star { position: absolute; width: var(--sz, 20px); height: var(--sz, 20px); margin: calc(var(--sz, 20px) / -2) 0 0 calc(var(--sz, 20px) / -2); pointer-events: none; z-index: 13;
  background: center / contain no-repeat; animation: bf-star 1s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes bf-star { 0% { transform: translate(0,0) scale(.3) rotate(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(300deg); opacity: 0; } }
.bigfx-label { position: absolute; left: 50%; top: 34%; z-index: 18; pointer-events: none; white-space: nowrap; font-family: 'Jua', sans-serif; font-size: 44px; color: #fff045;
  -webkit-text-stroke: 7px #7a3a0c; paint-order: stroke fill; text-shadow: 0 5px 0 #4a2206; animation: bf-label 1.35s cubic-bezier(.2,1.5,.4,1) forwards; }
.bigfx-label.t2 { font-size: 56px; color: #ff7fb2; -webkit-text-stroke-color: #fff; text-shadow: 0 5px 0 #b3256a, 0 0 18px #fff; }
@keyframes bf-label { 0% { transform: translate(-50%,-50%) scale(.2) rotate(-12deg); opacity: 0; } 18% { transform: translate(-50%,-50%) scale(1.25) rotate(4deg); opacity: 1; } 30% { transform: translate(-50%,-50%) scale(1) rotate(-2deg); } 78% { transform: translate(-50%,-50%) scale(1.04) rotate(0); opacity: 1; } 100% { transform: translate(-50%,-130%) scale(.9); opacity: 0; } }
#stage.shake1 { animation: bf-shake1 .4s ease-out; }
#stage.shake2 { animation: bf-shake2 .5s ease-out; }
@keyframes bf-shake1 { 20% { transform: translate(-4px, 3px); } 40% { transform: translate(4px, -3px); } 60% { transform: translate(-3px, -2px); } 80% { transform: translate(2px, 2px); } }
@keyframes bf-shake2 { 12% { transform: translate(-8px, 5px) rotate(-.6deg); } 30% { transform: translate(8px, -6px) rotate(.6deg); } 48% { transform: translate(-6px, -4px); } 66% { transform: translate(5px, 4px); } 84% { transform: translate(-2px, 1px); } }
.bigfx-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 40; }
.bigfx-rain i { position: absolute; top: -16px; width: 9px; height: 14px; border-radius: 2px; animation: bf-rain 1.6s ease-in forwards; }
@keyframes bf-rain { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(105vh) rotate(680deg); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .bigfx-rays, .bigfx-rain, #stage.shake1, #stage.shake2 { animation: none; display: none; } }
/* 상점: 냥코인 단추 옆 「무료」(리워드) 단추 */
.shop-btns { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
#shop-list button.free { background: linear-gradient(#9be8ff, #37b8e8) !important; border-color: #d6f6ff !important; color: #06425a !important; box-shadow: 0 3px 0 #0e6f95 !important; justify-content: center; }
#shop-list button .tv, .ghost .tv, .big .tv { flex: none; }
/* 토스 웹뷰: 블러 금지 */
.screen { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* ══ 판 위 고양이들의 작은 몸짓(심심하지 않게) — transform 만 쓴다 ══ */
.kit[class*="idle-"] { z-index: 3; }
.kit.idle-tilt .pic { animation: id-tilt 1.2s ease-in-out; }
.kit.idle-hop .pic { animation: id-hop .9s cubic-bezier(.3,.6,.4,1); }
.kit.idle-squish .pic { animation: id-squish 1s ease-in-out; transform-origin: 50% 90%; }
.kit.idle-spin .pic { animation: id-spin 1s cubic-bezier(.4,0,.2,1); }
.kit.idle-peek .pic { animation: id-peek 1.2s ease-in-out; }
.kit.idle-nod .pic { animation: id-nod 1s ease-in-out; transform-origin: 50% 85%; }
@keyframes id-tilt { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-13deg); } 60% { transform: rotate(11deg); } 82% { transform: rotate(-4deg); } }
@keyframes id-hop { 0%,100% { transform: translateY(0) scale(1); } 18% { transform: translateY(2%) scale(1.08,.9); } 45% { transform: translateY(-22%) scale(.95,1.07); } 70% { transform: translateY(0) scale(1.07,.92); } 85% { transform: translateY(-6%) scale(1); } }
@keyframes id-squish { 0%,100% { transform: scale(1); } 30% { transform: scale(1.16,.82); } 55% { transform: scale(.92,1.1); } 78% { transform: scale(1.05,.96); } }
@keyframes id-spin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.08); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes id-peek { 0%,100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-9%) rotate(-6deg); } 50% { transform: translateX(0) rotate(0); } 75% { transform: translateX(9%) rotate(6deg); } }
@keyframes id-nod { 0%,100% { transform: rotate(0) scaleY(1); } 22% { transform: rotate(0) scaleY(.88); } 44% { transform: scaleY(1.03); } 66% { transform: scaleY(.9); } 88% { transform: scaleY(1.02); } }
.emote { position: absolute; left: 62%; top: -8%; z-index: 4; pointer-events: none; font-family: 'Jua', sans-serif; font-size: calc(var(--cell) * .42); line-height: 1; color: #ff4f8b;
  text-shadow: 0 0 0 #fff, 1.5px 0 0 #fff, -1.5px 0 0 #fff, 0 1.5px 0 #fff, 0 -1.5px 0 #fff, 0 2px 2px #0005; animation: id-emote 1.25s ease-out forwards; }
@keyframes id-emote { 0% { transform: translateY(40%) scale(.3) rotate(-15deg); opacity: 0; } 22% { transform: translateY(0) scale(1.15) rotate(8deg); opacity: 1; } 40% { transform: translateY(-4%) scale(1) rotate(0); opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-55%) scale(.9); opacity: 0; } }
/* 한참 못 없애면: 부르르 떨며 살짝 화낸다 */
.kit.idle-angry .pic { animation: id-angry 1.1s ease-in-out; }
@keyframes id-angry { 0%,100% { transform: translateX(0) scale(1); } 10% { transform: translateX(-6%) rotate(-5deg) scale(1.06); } 20% { transform: translateX(6%) rotate(5deg) scale(1.06); } 30% { transform: translateX(-6%) rotate(-5deg) scale(1.08); } 40% { transform: translateX(6%) rotate(5deg) scale(1.08); } 50% { transform: translateX(-4%) rotate(-3deg) scale(1.1,.94); } 62% { transform: translateX(4%) rotate(3deg) scale(1.1,.94); } 80% { transform: translateX(0) scale(1.03); } }
.emote.mad { color: #e11d2e; font-size: calc(var(--cell) * .4); left: 55%; }

/* ══ 힌트: 바꿀 쪽으로 쓱 움직였다 돌아오고, 노란 테가 반짝인다(몸짓에 묻히지 않게 크게) ══ */
.kit.hint { z-index: 5; }
.kit.hint .pic { animation: hint-move 1.1s ease-in-out infinite !important; }
@keyframes hint-move { 0%, 55%, 100% { transform: translate(0, 0) scale(1); } 22% { transform: translate(var(--hx, 0), var(--hy, 0)) scale(1.12); } 38% { transform: translate(calc(var(--hx, 0) * .6), calc(var(--hy, 0) * .6)) scale(1.08); } }
.kit.hint::after { content: ''; position: absolute; inset: 1px; border: 3.5px solid #fff253; border-radius: 14px; pointer-events: none; animation: hint-ring 1.1s ease-in-out infinite; }
@keyframes hint-ring { 0%, 100% { opacity: .25; transform: scale(.94); } 30% { opacity: 1; transform: scale(1.06); } }

/* ══ 목표를 늘 보이게(10/2 플레이테스트): 간판에 「목표」 글자·큰 숫자, 판 위 목표 고양이는 노란 바탕, 판을 열 때 한 번 크게 ══ */
#goalsign .tab-goal { font-style: normal; color: #fff253; }
.night #goalsign .tab-goal { display: none; }
.goal .ico { width: 38px !important; height: 33px !important; }
.goal b { font-size: 20px !important; text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff; }
.kit.target:not(.zap) .tint { display: block !important; position: absolute; inset: 1px; border-radius: 13px; background: #fff25340; box-shadow: inset 0 0 0 2.5px #fff253d9; }
.goal-intro { position: absolute; left: 50%; top: 38%; z-index: 19; pointer-events: none; padding: 8px 18px 10px; text-align: center; white-space: nowrap;
  background: var(--cream); border: 4px solid var(--wood); border-radius: 18px; box-shadow: 0 5px 0 var(--wood-d), 0 0 0 3px #fff25388; font-family: 'Jua', sans-serif; color: var(--ink);
  animation: goal-intro 2.2s cubic-bezier(.2,1.4,.4,1) forwards; }
.goal-intro small { display: block; font-size: 15px; color: #c2410c; margin-bottom: 4px; }
.goal-intro div { display: flex; gap: 14px; justify-content: center; }
.goal-intro span { display: flex; align-items: center; gap: 3px; }
.goal-intro i { width: 46px; height: 46px; background: center / contain no-repeat; }
.goal-intro b { font-weight: 400; font-size: 28px; }
@keyframes goal-intro { 0% { transform: translate(-50%,-50%) scale(.3); opacity: 0; } 12% { transform: translate(-50%,-50%) scale(1.08); opacity: 1; } 20%, 78% { transform: translate(-50%,-50%) scale(1); opacity: 1; } 100% { transform: translate(-50%,-190%) scale(.5); opacity: 0; } }
/* 새 칸이 판 위(간판 쪽)로 삐져나와 보이지 않게 — 쟁반 테두리만큼만 남기고 자른다 */
#board { clip-path: inset(-10px); }
#r-gift { line-height: 1.5; }

/* 결과 화면 첫 1.2초: 단추 잠금(잘못 누름 막기) */
#result.locked button { pointer-events: none; opacity: .45; filter: grayscale(.4); }
#result button { transition: opacity .25s, filter .25s; }

/* ══ 2차 개편(10/3): 생선 방향·단단한 상자·얼음·이동 경고 ══ */
.kit.item.dir-v .pic { rotate: 90deg; }
.kit.box.hard .tint { background: #b98a5c !important; box-shadow: inset 0 0 0 3px #5c3418, inset 0 -6px 0 #8a5a2b !important; }
.kit.box.hard .pic { filter: brightness(.82) saturate(.85) drop-shadow(0 2px 0 #06283355) !important; }
.kit.box.hard::after { content: ''; position: absolute; inset: 14% 10%; border-top: 3px solid #5c3418aa; border-bottom: 3px solid #5c3418aa; pointer-events: none; }
.kit.box.cracked .pic { filter: brightness(.95) drop-shadow(0 2px 0 #06283355) !important; }
.kit.box.cracked::after { inset: 18%; border: 0; background: linear-gradient(115deg, transparent 44%, #3b1e08 45%, #3b1e08 49%, transparent 50%), linear-gradient(60deg, transparent 56%, #3b1e08 57%, #3b1e08 60%, transparent 61%); }
/* 얼음: 제미나이로 그린 얼음 틀(art/ice-1 얇은 · ice-2 두꺼운, 가운데는 뚫려 고양이 얼굴이 보인다). 10/5 「사각형 두르지 말고 그려서」 */
.ice { position: absolute; width: var(--cell); height: var(--cell); z-index: 3; pointer-events: none;
  background: url('art/ice-1.webp') center / 104% 104% no-repeat; filter: drop-shadow(0 2px 0 #0b4a6b55); }
.ice.l2 { background-image: url('art/ice-2.webp'); }
.ice.crack { animation: ice-crack .35s ease-out; }
@keyframes ice-crack { 30% { scale: 1.12; } 60% { scale: .96; } }
.ice.melt { animation: ice-melt .38s ease-out forwards; }
@keyframes ice-melt { to { scale: 1.3; opacity: 0; } }
.ice-ico { background: url('art/ice-1.webp') center / contain no-repeat !important; }
.goal-intro i.ice-ico { border-radius: 10px; }
/* 이동이 모자랄 때: 빨강 대신 주황, 3 이하만 통통, 1 이면 쟁반이 살짝 흔들 */
#movesign.low-moves b { color: #e8590c !important; animation: none !important; }
#movesign.low3 b { animation: lowmove .9s ease-in-out infinite !important; }
#stage.last1 #board::before { animation: tray-wiggle 1.8s ease-in-out infinite; }
@keyframes tray-wiggle { 0%, 70%, 100% { transform: translate(0, 0); } 76% { transform: translate(-2px, 0) rotate(-.3deg); } 82% { transform: translate(2px, 0) rotate(.3deg); } 88% { transform: translate(-1px, 0); } }

/* ══ 가로로 낮은 창(포털 데스크톱 576×324 ~ 1031×580): 간판·팁·아이템은 왼쪽 기둥, 판은 오른쪽에 높이 맞춰 ══ */
@media (orientation: landscape) and (max-height: 640px) {
  .game-layout { height: 100svh !important; min-height: 0 !important; padding: 0 !important; display: flex !important; justify-content: center !important; }
  #app { display: grid !important; grid-template-columns: minmax(190px, 36%) 1fr; grid-template-rows: auto 1fr auto auto; column-gap: 8px; row-gap: 2px;
    width: min(100%, calc(100svh * 1.9)) !important; max-width: none !important; height: 100svh !important; min-height: 0 !important; margin: 0 !important;
    padding: 4px 6px !important; overflow: hidden; }
  #top { grid-column: 1; grid-row: 1; grid-template-columns: 24% 1fr 30%; gap: 3px; padding: 0; }
  .tip-wrap { grid-column: 1; grid-row: 3; margin: 0 !important; }
  #bottom { grid-column: 1; grid-row: 4; padding: 5px 8px 6px; }
  #stage { grid-column: 2; grid-row: 1 / 5; height: 100% !important; min-height: 0 !important; aspect-ratio: auto !important; }
  .combo-status { display: none !important; }
  #items { flex-wrap: wrap; justify-content: center; gap: 6px 8px !important; }
  .slot.shop { margin: 0 !important; width: 128px; height: 38px; flex-basis: 100%; max-width: 150px; }
  .slot.shop b { line-height: 38px; font-size: 16px; }
  .slot { width: 40px; height: 39px; }
  .slot .ico { width: 25px !important; height: 25px !important; }
  #goalsign .tab { font-size: 9px; } #goalsign .tab b { font-size: 11px; } #goalsign .tab small { font-size: 8px; }
  .goal .ico { width: 24px !important; height: 21px !important; } .goal b { font-size: 13px !important; }
  #starbar { height: 18px; } #starbar .s { width: 18px; height: 18px; margin: -10px 0 0 -9px; } #starbar .sc { line-height: 18px; font-size: 8px; }
  #movesign b { font-size: 22px !important; } #movesign .lbl { font-size: 7px !important; }
  #help, #mute { width: 24px !important; height: 24px !important; font-size: 13px !important; }
  #tip { font-size: 11px !important; }
  .bigfx-label { font-size: 34px; } .bigfx-label.t2 { font-size: 42px; }
  /* 겹치는 화면: 넘치면 안에서 굴리고, 맨 아래 단추는 늘 보이게 */
  .screen { padding: 6px 10px !important; overflow-y: auto !important; align-items: flex-start !important; }
  .card { min-height: 0 !important; margin: auto; justify-content: flex-start !important; padding: 4px !important; }
  .big { min-height: 46px; font-size: 18px !important; border-width: 10px 18px 13px !important; border-image-width: 10px 18px 13px !important; padding: 2px 8px !important; }
  .tut-card > .big, .dex-card > .big, .shop-card > .big { position: sticky; bottom: 0; z-index: 3; flex: none; }
  /* 시작 화면: 로고 왼쪽, 단추·출석 오른쪽 */
  .start-card { display: grid !important; grid-template-columns: 38% 1fr; column-gap: 12px; align-items: center; max-width: 760px !important; }
  .start-card .logo { grid-column: 1; grid-row: 1 / span 6; }
  .start-card > *:not(.logo) { grid-column: 2; }
  .title-logo { width: min(100%, 52vh); }
  .logo p { font-size: 12px !important; margin: 2px 0 0 !important; }
  #home { margin-top: 6px; gap: 5px; max-width: none; } .home-row { padding: 4px 10px; font-size: 11px; } .home-row b { font-size: 13px; }
  .home-row.today .ico { width: 30px; height: 30px; } .home-btns .ghost { padding: 5px 6px !important; font-size: 13px !important; }
  .start-card .foot, #sound-note { margin-top: 4px !important; font-size: 10px !important; }
  /* 결과 화면 */
  #r-stars span { width: 46px !important; height: 46px !important; } .result-card h2 { font-size: 24px !important; margin: 0 0 4px !important; }
  .card > p, #r-gift { font-size: 13px !important; margin: 2px 0 6px !important; } .ghost { padding: 6px 14px !important; margin-top: 6px !important; font-size: 13px !important; }
  /* 상점·도감·놀이 방법: 옆으로 펼친다 */
  .shop-card, .dex-card, .tut-card { max-width: 860px !important; }
  #shop-list { display: grid !important; grid-template-columns: repeat(3, 1fr); max-width: none !important; gap: 6px !important; }
  #shop-list li { grid-template-columns: 34px 1fr; padding: 5px 6px; } #shop-list .ico { width: 32px; height: 32px; } #shop-list .shop-btns { grid-column: 1 / 3; flex-direction: row; }
  #shop-list .name { font-size: 14px; } #shop-list .how { font-size: 10px; } #shop-list button { font-size: 13px; padding: 4px 8px; flex: 1; justify-content: center; }
  .shop-head { max-width: none; } .shop-head h2, .dex-card h2, .tut-card h2 { font-size: 22px !important; margin: 0 !important; } .shop-note { font-size: 11px !important; margin: 2px 0 4px !important; }
  #dex-list { grid-template-columns: repeat(5, 1fr); max-width: none; gap: 5px; margin-bottom: 6px; }
  #dex-list li { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 4px; } #dex-list .ico { grid-row: auto; width: 54px; height: 36px; } #dex-list b { font-size: 12px; }
  ol.tut { display: grid !important; grid-template-columns: 1fr 1fr; max-width: none !important; gap: 5px !important; }
  ol.tut li { grid-template-columns: 76px 1fr; padding: 4px 6px; } ol.tut b { font-size: 13px; } ol.tut div { font-size: 10.5px; line-height: 1.3; }
  .tut-pic { width: 76px; height: 34px; } .tut-pic .k { width: 23px; height: 23px; } .tut-pic.sq { grid-template-columns: 23px 23px; grid-auto-rows: 23px; width: 48px; margin: 0 14px; } .tut-pic img { width: 28px; height: 28px; }
  .tut-card .pill { display: none; }
  .ad-slot { display: none !important; }
}
@media (orientation: landscape) and (max-height: 640px) {
  .tut-card, .dex-card, .shop-card { overflow: visible !important; }
  ol.tut { grid-template-columns: 1fr 1fr 1fr; }
  ol.tut li { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .tut-card > .big { margin-top: 6px; }
}
@media (orientation: landscape) and (max-height: 350px) { .tut-pic { display: none !important; } ol.tut li { padding: 6px 8px; } .tut-card h2 { font-size: 18px !important; } }
@media (orientation: landscape) and (max-height: 640px) {
  .goal .ico { width: 26px !important; height: 23px !important; } .goal b { font-size: 15px !important; }
  .goal-intro small { font-size: 12px; } .goal-intro i { width: 34px; height: 34px; } .goal-intro b { font-size: 21px; }
}
@media (max-width: 345px) { .goal .ico { width: 30px !important; height: 26px !important; } .goal b { font-size: 17px !important; } }