/* 지원GO 커스텀 스타일 (Tailwind 유틸리티로 표현하기 어려운 키프레임·게임 UI 컴포넌트) */
:root { --ink: #1e3a8a; }
body { font-family: "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }

/* ---------- 화면 전환 ---------- */
.screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(1.04); pointer-events: none;
  transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s; }
.screen.active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }

/* ---------- 배경: 청량한 하늘 + 빛줄기 + 구름 + 숲 + 잔디 필드 ---------- */
.sky { background: linear-gradient(180deg, #2f86e8 0%, #5aaaf2 28%, #9fd4fb 48%, #e3f5ff 58%); }
.sun-glow { position: absolute; left: 50%; top: 4%; width: 90vmax; height: 90vmax; translate: -50% -40%;
  background: radial-gradient(circle, rgba(255,250,214,.95) 0%, rgba(255,243,176,.5) 18%, rgba(255,255,255,0) 55%); animation: glow 6s ease-in-out infinite; }
@keyframes glow { 50% { opacity: .78; scale: 1.06; } }
.rays { position: absolute; left: 50%; top: 4%; width: 220vmax; height: 220vmax; translate: -50% -50%; opacity: .5; mix-blend-mode: soft-light;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.95) 0deg 6deg, rgba(255,255,255,0) 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 55%); mask-image: radial-gradient(circle, #000 0%, transparent 55%);
  animation: spin 90s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }

.cloud { position: absolute; height: 60px; width: 190px; border-radius: 999px; background: linear-gradient(#fff 55%, #e6f3ff); opacity: .96;
  filter: drop-shadow(0 8px 10px rgba(80,140,210,.25)); animation: drift linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 92px; height: 92px; left: 26px; top: -48px; }
.cloud::after { width: 74px; height: 74px; right: 28px; top: -34px; }
.c1 { top: 10%; left: -25%; animation-duration: 80s; transform: scale(1.5); }
.c2 { top: 24%; left: -35%; animation-duration: 110s; animation-delay: -55s; transform: scale(.9); }
.c3 { top: 4%; left: -30%; animation-duration: 140s; animation-delay: -95s; transform: scale(2); }
.c4 { top: 32%; left: -30%; animation-duration: 100s; animation-delay: -20s; transform: scale(.7); }
@keyframes drift { to { translate: 150vw 0; } }

.forest { position: absolute; left: -5%; right: -5%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.f-back  { bottom: 44%; height: 12%; background: radial-gradient(circle at 10% 100%, #3d9a68 0 9%, transparent 9.5%), radial-gradient(circle at 28% 100%, #2f8a5c 0 11%, transparent 11.5%), radial-gradient(circle at 47% 100%, #3d9a68 0 8%, transparent 8.5%), radial-gradient(circle at 66% 100%, #2f8a5c 0 12%, transparent 12.5%), radial-gradient(circle at 86% 100%, #3d9a68 0 9%, transparent 9.5%), #35935f; filter: blur(1.5px); opacity: .85; }
.f-front { bottom: 42%; height: 8%; background: radial-gradient(circle at 18% 100%, #1f7a45 0 10%, transparent 10.5%), radial-gradient(circle at 40% 100%, #26864d 0 8%, transparent 8.5%), radial-gradient(circle at 60% 100%, #1f7a45 0 11%, transparent 11.5%), radial-gradient(circle at 80% 100%, #26864d 0 9%, transparent 9.5%), #228048; }

.field-wrap { position: absolute; left: 0; right: 0; bottom: 0; height: 44%; perspective: 520px; perspective-origin: 50% 0; overflow: hidden;
  background: linear-gradient(#2f9e44, #43b648); }
.field { position: absolute; left: -60%; right: -60%; top: 0; height: 240%; transform-origin: 50% 0; transform: rotateX(62deg);
  background: repeating-linear-gradient(90deg, #4cc152 0 90px, #3fae48 90px 180px); }
.field::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 60px, rgba(0,0,0,.05) 60px 120px); }
.dirt { position: absolute; border-radius: 50%; background: radial-gradient(#d99a6c, #c27d4e); box-shadow: inset 0 0 30px rgba(120,60,20,.35); }
.d1 { left: 38%; top: 22%; width: 24%; height: 12%; }
.d2 { left: 44%; top: 62%; width: 12%; height: 6%; }
.fline { position: absolute; height: 10px; background: rgba(255,255,255,.85); border-radius: 6px; }
.l1 { left: 8%; top: 40%; width: 34%; } .l2 { right: 6%; top: 52%; width: 30%; }
.field-haze { position: absolute; inset: 0 0 auto 0; height: 40%; background: linear-gradient(rgba(226,246,255,.85), rgba(226,246,255,0)); }

.tree { position: absolute; bottom: 22%; height: clamp(190px, 52vh, 480px); width: auto; filter: drop-shadow(0 12px 14px rgba(0,60,20,.3)); transform-origin: 50% 100%; animation: sway 7s ease-in-out infinite; }
.t-left { left: -4%; } .t-right { right: -6%; animation-delay: -3s; height: clamp(160px, 44vh, 400px); }
@keyframes sway { 50% { rotate: 1.2deg; } }

.sparkle { position: absolute; width: var(--s); height: var(--s); animation: twinkle 2.6s ease-in-out var(--d) infinite; opacity: 0;
  background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 6px #fff); }
@keyframes twinkle { 0%,100% { opacity: 0; scale: .3; rotate: 0deg; } 50% { opacity: 1; scale: 1.15; rotate: 45deg; } }
.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(10,40,90,.28) 100%); }

/* ---------- 타이틀 로고 (웅장한 등장 연출) ---------- */
.logo { display: flex; flex-direction: column; align-items: center; gap: .1em; font-size: clamp(5rem, 24vmin, 11rem); line-height: 1; margin: 0;
  filter: drop-shadow(0 10px 0 rgba(11,31,92,.35)) drop-shadow(0 22px 30px rgba(11,31,92,.35)); }
.logo-title { position: relative; isolation: isolate; font-weight: 900; letter-spacing: -.02em; line-height: 1; padding: 0 .08em;
  color: transparent;
  animation: titleSlam 1.1s cubic-bezier(.2, 1.5, .35, 1) .5s both; }
.logo-title::before, .logo-title::after { content: attr(data-text); position: absolute; inset: 0; padding: inherit; color: transparent; }
.logo-title .fill { position: relative; z-index: 1; background: linear-gradient(#fff27a 0%, #ffd21f 48%, #ffa400 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.logo-title::before { z-index: -2; -webkit-text-stroke: .4em #fff; }
.logo-title::after { z-index: -1; -webkit-text-stroke: .22em #1d4ed8; }
.logo-go { width: 2.05em; height: auto; margin-top: -.12em; animation: goRise 1s cubic-bezier(.2, 1.4, .4, 1) 1.1s both; }
.logo-go .go-ball { transform-box: fill-box; transform-origin: center; animation: ballSpin 6s linear 2.2s infinite; }
@keyframes titleSlam { 0% { opacity: 0; transform: scale(2.6) translateY(-30px); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes goRise { from { opacity: 0; transform: translateY(40px) scale(.5); } to { opacity: 1; transform: none; } }
@keyframes ballSpin { to { transform: rotate(360deg); } }
.title-flash { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(circle at 50% 42%, #fff 0%, rgba(255,255,255,.7) 40%, rgba(255,255,255,0) 75%); opacity: 0; animation: tflash 1.4s ease-out .75s both; }
@keyframes tflash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.tagline { margin-top: 1rem; padding: .35rem 1.2rem; border-radius: 999px; background: rgba(255,255,255,.88); font-size: .95rem; font-weight: 900; color: #1d4ed8; text-align: center;
  box-shadow: 0 4px 0 rgba(30,58,138,.25); animation: fadeUp .7s ease-out 1.8s both; }
.menu { margin-top: clamp(1rem, 4vh, 2rem); }
.menu > * { animation: fadeUp .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.menu > :nth-child(1) { animation-delay: 2.0s; } .menu > :nth-child(2) { animation-delay: 2.15s; } .menu > :nth-child(3) { animation-delay: 2.3s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } }
#screen-start:not(.active) .logo-title, #screen-start:not(.active) .logo-go, #screen-start:not(.active) .tagline, #screen-start:not(.active) .menu > *, #screen-start:not(.active) .title-flash { animation: none; }

/* ---------- 게임 버튼 ---------- */
.btn-game { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.25rem; padding: .7rem 1.25rem;
  border: 4px solid var(--ink); border-radius: 1.25rem; font-size: 1.15rem; font-weight: 900; color: #fff; cursor: pointer;
  text-shadow: 0 2px 0 rgba(0,0,0,.28); box-shadow: 0 6px 0 var(--ink), 0 10px 14px rgba(0,0,0,.2);
  transition: transform .08s, box-shadow .08s, filter .15s; }
.btn-game:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink), 0 14px 16px rgba(0,0,0,.2); }
.btn-game:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); filter: brightness(.95); }
.btn-game:focus-visible, .modal :focus-visible { outline: 4px solid #fde047; outline-offset: 3px; }
.btn-game:disabled { opacity: .6; cursor: not-allowed; }
.btn-red { background: linear-gradient(#fb7185, #e11d48); }
.btn-blue { background: linear-gradient(#60a5fa, #2563eb); }
.btn-gray { background: linear-gradient(#94a3b8, #64748b); }
.btn-game i, .btn-game svg { flex-shrink: 0; }

/* ---------- 대화창 / 상태창 ---------- */
.dialog { background: #fffdf5; border: 5px solid var(--ink); border-radius: 1.75rem; padding: 1rem 1.25rem 1.1rem;
  box-shadow: 0 0 0 4px #fff, 0 10px 0 4px rgba(30,58,138,.35); animation: popUp .4s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes popUp { from { opacity: 0; transform: translateY(30px) scale(.95); } }
.info-row { display: flex; flex-direction: column; gap: .3rem; border-radius: 1rem; background: #eff6ff; border: 2px solid #bfdbfe; padding: .5rem .75rem; list-style: none; }
.info-row dt { display: flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 900; color: #2563eb; }
.info-row dt svg { width: 1rem; height: 1rem; }
.info-row dd { font-weight: 800; color: #1e293b; margin: 0; }
.chip { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; background: #fef3c7; border: 2px solid #f59e0b; padding: .1rem .65rem; font-size: .85em; font-weight: 800; color: #92400e; }
.chip svg { width: 1em; height: 1em; }
.chip-skill { background: #dcfce7; border-color: #22c55e; color: #166534; }

/* ---------- 스테이지 오브젝트 ---------- */
.stage-obj { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); }
.monster-box { height: min(48dvh, 78vw, 400px); aspect-ratio: 200 / 250; z-index: 10; }
.ball-box { height: clamp(64px, 14dvh, 112px); aspect-ratio: 1; z-index: 15; }
.idle { animation: idle 2.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes idle { 0%,100% { transform: translateY(0) scale(1,1); } 50% { transform: translateY(-5%) scale(.98,1.03); } }
.steam { animation: steam 2s ease-in-out infinite; }
@keyframes steam { 50% { transform: translateY(-3px); opacity: .4; } }
.star-fx { position: absolute; left: 50%; top: 58%; width: 26px; height: 26px; margin: -13px; z-index: 25; }

/* ---------- 도감 카드 ---------- */
.dex-card { width: 100%; max-width: 44rem; margin: auto; overflow: hidden; background: #fffdf5; border: 5px solid var(--ink); border-radius: 1.75rem;
  box-shadow: 0 0 0 4px #fff, 0 12px 0 4px rgba(30,58,138,.35); }
.dex-head { display: flex; align-items: center; gap: .5rem; padding: .75rem 1.25rem; font-size: 1.2rem; font-weight: 900; color: #fff; background: linear-gradient(#3b82f6, #1d4ed8); text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.dex-photo { flex-shrink: 0; width: min(46vw, 11rem); aspect-ratio: 200 / 250; padding: .5rem; border-radius: 1.5rem; border: 4px solid var(--ink);
  background: radial-gradient(circle at 50% 40%, #fef9c3, #bae6fd); animation: popUp .6s .2s cubic-bezier(.2, 1.3, .4, 1) both; }

/* ---------- 팝업 ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(15,23,42,.55); backdrop-filter: blur(3px); animation: fadeIn .25s both; }
.modal[hidden] { display: none; }
.modal-box { width: 100%; max-width: 24rem; background: #fffdf5; border: 5px solid var(--ink); border-radius: 1.75rem; padding: 1.5rem; box-shadow: 0 0 0 4px #fff, 0 12px 0 4px rgba(30,58,138,.35); animation: popUp .35s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes fadeIn { from { opacity: 0; } }

/* ---------- 유틸 ---------- */
.shown-grid { display: grid !important; }
.shown-block { display: block !important; }
button { touch-action: manipulation; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cloud { animation: none; left: 10%; }
  .rays, .sun-glow, .tree { animation: none; }
}

/* ================= 시작 화면 (main3 이미지 + 캡슐 버튼) ================= */
/* 캡슐 버튼: 위쪽 광택 + 두꺼운 하단 그림자 + hover 확대 */
.btn-cap { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.6rem; padding: .7rem 1.6rem; overflow: hidden;
  border: 4px solid var(--edge); border-radius: 999px; font-size: 1.2rem; font-weight: 900; letter-spacing: .01em; color: #fff; cursor: pointer;
  text-shadow: 0 2px 0 rgba(0,0,0,.35); background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 52%, var(--c3) 100%);
  box-shadow: 0 7px 0 var(--edge), 0 12px 16px rgba(5,25,80,.35), inset 0 -4px 0 rgba(0,0,0,.08), inset 0 2px 0 rgba(255,255,255,.3);
  transition: transform .12s, box-shadow .12s, filter .15s; }
.btn-cap::before { content: ""; position: absolute; left: 6%; right: 6%; top: 3px; height: 46%; border-radius: 999px; background: linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,0)); pointer-events: none; }
.btn-cap > * { position: relative; }
.btn-cap:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.08); box-shadow: 0 9px 0 var(--edge), 0 16px 20px rgba(5,25,80,.35), inset 0 -4px 0 rgba(0,0,0,.08), inset 0 2px 0 rgba(255,255,255,.3); }
.btn-cap:active { transform: translateY(6px) scale(.99); box-shadow: 0 1px 0 var(--edge), 0 3px 6px rgba(5,25,80,.3), inset 0 -4px 0 rgba(0,0,0,.14); }
.btn-cap:focus-visible { outline: 4px solid #fde047; outline-offset: 4px; }
.cap-red  { --edge: #8f1026; --c1: #f0475d; --c2: #e12a43; --c3: #d4203a; }
.cap-blue { --edge: #123b99; --c1: #4f94f2; --c2: #3b80ea; --c3: #2f70dc; }
.cap-gray { --edge: #3a4a66; --c1: #9aa9bf; --c2: #8999b1; --c3: #7a8aa3; }
.menu > .btn-cap { animation: fadeUp .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.start-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(#49adf5 0, #49adf5 35%, #86cf3f 62%, #5fb52f 100%); }
.start-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; animation: imgIn 2.2s ease-out both; }
@keyframes imgIn { from { transform: scale(1.12); filter: brightness(1.5) saturate(.8); } to { transform: none; filter: none; } }
.start-ui { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0 1rem max(4vh, env(safe-area-inset-bottom)); pointer-events: none; }
.start-menu { display: flex; flex-direction: row; gap: 1rem; pointer-events: auto; }
.start-menu .btn-cap { min-height: 3.4rem; padding: .6rem 1.5rem; font-size: 1.1rem; }
.start-menu > :nth-child(1) { animation-delay: 1.2s; } .start-menu > :nth-child(2) { animation-delay: 1.35s; } .start-menu > :nth-child(3) { animation-delay: 1.5s; }
/* 세로로 긴 화면: 로고가 잘리지 않도록 이미지를 상단 영역에 두고 아래는 잔디색으로 이어 붙임 */
@media (max-aspect-ratio: 5/4) {
  .start-img { height: 60dvh; object-position: 50% 45%; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
  .start-menu { flex-direction: column; width: 100%; max-width: 20rem; gap: .9rem; padding-bottom: 1.5rem; }
  .start-menu .btn-cap { width: 100%; }
}
@media (max-width: 760px) and (min-aspect-ratio: 5/4) { .start-menu { gap: .5rem; } .start-menu .btn-cap { padding: .5rem .8rem; font-size: .95rem; } }
#screen-start:not(.active) .start-img { animation: none; }
@media (prefers-reduced-motion: reduce) { .start-img { animation: none; } }

/* ---------- 도트아트 시작 화면 ---------- */
.px-host { position: absolute; inset: 0; overflow: hidden; background: #6db3f0; }
.px-host canvas { position: absolute; left: 50%; top: 50%; image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; }
.px-logo-wrap { position: absolute; inset: 0; animation: pxDrop 1s steps(10) .3s both, pxBob 2s steps(3) 1.4s infinite alternate; }
.px-host canvas[data-l="cl"] { animation: pxCloud 90s linear infinite alternate; }
@keyframes pxDrop { from { transform: translateY(-70px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pxBob { to { transform: translateY(-6px); } }
@keyframes pxCloud { from { transform: translateX(-5%); } to { transform: translateX(5%); } }
#screen-start:not(.active) .px-logo-wrap, .screen:not(.active) canvas[data-l="cl"] { animation: none; }
@media (prefers-reduced-motion: reduce) { .px-logo-wrap, .px-host canvas[data-l="cl"] { animation: none; } }

/* ---------- 도트 캐릭터 · 볼 ---------- */
.px-img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; }
.monster-box { height: min(42dvh, 84vw, 360px) !important; aspect-ratio: 56 / 60 !important; }
.stage-obj { top: 62% !important; }
.idle { animation: pxIdle 1.1s steps(2) infinite !important; }
@keyframes pxIdle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3%); } }
.dex-photo { aspect-ratio: 56 / 60 !important; background: linear-gradient(#bfe3ff, #e9f7ff 60%, #b6e07a) !important; }
.dex-photo, .dialog, .dex-card { image-rendering: auto; }
/* 캐릭터는 상태창에 가리지 않도록 스테이지(대사창 위 영역) 높이에 맞춤 */
.stage-obj { top: 50% !important; }
.monster-box { height: min(88%, 360px) !important; }
.star-fx { top: 50% !important; }
/* 상태창이 스크롤될 때도 선택 버튼이 항상 보이도록 하단 고정 */
#choice-btns.shown-grid { position: sticky; bottom: -.1rem; z-index: 2; margin-top: .75rem; padding: .6rem 0 .1rem; background: linear-gradient(transparent, #fffdf5 28%); }
#choice-btns .btn-game { white-space: nowrap; padding-left: .5rem; padding-right: .5rem; font-size: clamp(1rem, 4.6vw, 1.25rem); }

/* ================= 2페이지: 픽셀 아트 카드 · HP 상태창 ================= */
:root { --clip: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px)); --ink: #1d1226; }
.px-box { position: relative; background: var(--ink); padding: 4px; clip-path: var(--clip); }
.px-in { position: relative; background: #fff6d8; clip-path: var(--clip); box-shadow: inset 0 0 0 3px #e8d9a6; }
#panel { filter: drop-shadow(6px 6px 0 rgba(10, 20, 50, .42)); }
.dialog.px-box { border: 0; border-radius: 0; box-shadow: none; padding: 4px; animation: pxPop .45s steps(5) both; }
.dialog-in { padding: 1rem 1.25rem 1.15rem; max-height: min(50dvh, 560px); overflow-y: auto; }
@keyframes pxPop { from { opacity: 0; transform: translateY(24px); } }
@media (min-width: 768px) { .dialog-in { max-height: min(86dvh, 680px); } }
.dlg-text { color: var(--ink); font-weight: 900; letter-spacing: -.01em; padding-bottom: .4rem; border-bottom: 4px dotted var(--ink); }
.dlg-text:not(:empty)::after { content: " ▼"; font-size: .6em; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.dialog .info-row { border-radius: 0; border: 3px solid var(--ink); background: #fff; box-shadow: inset -3px -3px 0 #e5d6a8; }
.dialog .info-row dt { color: #1d4ed8; }
.dialog .chip { border-radius: 0; border: 2px solid var(--ink); background: #ffe08a; color: #3a2410; box-shadow: inset -2px -2px 0 #e0a92a; }
.dialog .chip-skill { background: #b8f0a0; color: #12401f; box-shadow: inset -2px -2px 0 #6cc24a; }
.px-btn { border-radius: 0 !important; border: 4px solid var(--ink) !important; background-image: none !important; box-shadow: inset 0 -5px 0 rgba(0,0,0,.28), inset 0 4px 0 rgba(255,255,255,.38) !important;
  clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
  text-shadow: 0 2px 0 rgba(0,0,0,.4); transition: transform .08s steps(2), filter .1s; }
.px-btn.btn-red { background-color: #e8384f !important; } .px-btn.btn-blue { background-color: #3a6fe0 !important; } .px-btn.btn-gray { background-color: #7a869c !important; }
.px-btn:hover { transform: translateY(-3px) !important; filter: brightness(1.12); }
.px-btn:active { transform: translateY(2px) !important; box-shadow: inset 0 3px 0 rgba(0,0,0,.3) !important; }
#choice-btns.shown-grid { background: linear-gradient(transparent, #fff6d8 28%); }

/* HP 상태창 (왼쪽 상단) */
.hp-box { position: absolute; top: 12px; left: 12px; z-index: 25; width: min(260px, 62vw); filter: drop-shadow(4px 4px 0 rgba(10, 20, 50, .45)); opacity: 0; transform: translateX(-24px); transition: opacity .3s steps(4), transform .3s steps(4); pointer-events: none; }
.hp-box.shown { opacity: 1; transform: none; }
.hp-in { padding: .45rem .65rem .55rem; }
.hp-head { display: flex; justify-content: space-between; align-items: center; font-weight: 900; color: var(--ink); }
.hp-name { font-size: 1.15rem; } .hp-tag { font-size: .7rem; background: var(--ink); color: #fff; padding: 0 .4rem; }
.hp-row { display: flex; align-items: center; gap: .4rem; margin-top: .2rem; }
.hp-label { font-weight: 900; font-size: .8rem; color: #fff; background: #e8384f; padding: 0 .3rem; border: 2px solid var(--ink); }
.hp-bar { position: relative; flex: 1; height: 16px; background: #3a3248; border: 3px solid var(--ink); overflow: hidden; }
.hp-fill { height: 100%; width: 100%; transition-property: width; transition-timing-function: steps(14); box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.2); }
.hp-fill.ok { background: #3fd04f; } .hp-fill.warn { background: #f6c92d; } .hp-fill.low { background: #e8384f; }
.hp-bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,.38) 6px 8px); }
.hp-num { text-align: right; font-size: .8rem; font-weight: 900; color: var(--ink); margin-top: .1rem; }
.hp-cp { display: flex; align-items: center; gap: .3rem; margin-top: .25rem; font-weight: 900; font-size: .85rem; color: #8a3d0e; background: #ffe9b0; border: 2px solid var(--ink); padding: .05rem .45rem; }
.hp-cp b { margin-left: auto; font-size: 1rem; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .dlg-text::after, .dialog.px-box { animation: none; } .hp-fill { transition: none; } }
/* 모바일: HP 상자를 작게, 캐릭터는 상자 아래로 */
@media (max-width: 767px) {
  .hp-box { width: min(210px, 56vw); top: 8px; left: 8px; }
  .hp-in { padding: .3rem .5rem .4rem; }
  .hp-name { font-size: 1rem; }
  .hp-num { display: none; }
  .hp-cp { font-size: .75rem; margin-top: .15rem; }
  .monster-box { height: min(70%, 300px) !important; }
  .stage-obj { top: 62% !important; }
}

/* ================= 설명 카드: 레퍼런스(전투력 → 이름 → HP → 3칸 스탯 → 스트립) 레이아웃 ================= */
.info-card { display: none; text-align: center; }
.info-card.shown-grid { display: grid !important; gap: .15rem; }
.cp-line { display: flex; justify-content: center; align-items: baseline; gap: .35rem; color: var(--ink); line-height: 1; padding-top: .25rem; }
.cp-line small { font-size: 1rem; font-weight: 900; letter-spacing: .05em; }
.cp-line b { font-size: 2.6rem; font-weight: 900; letter-spacing: -.02em; text-shadow: 3px 3px 0 #ffd75e; }
.mon-name { margin-top: .45rem; font-size: 1.7rem; font-weight: 900; color: #2c4a52; line-height: 1.15; }
.hp-wide { width: min(86%, 26rem); margin: .35rem auto 0; }
.hp-wide .hp-bar { height: 16px; }
.hp-cap { margin: .2rem 0 0; font-size: .85rem; font-weight: 900; color: #4a5a60; }
.stat3 { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; margin-top: .9rem; }
.stat { padding: 0 .3rem; min-width: 0; }
.stat + .stat { border-left: 3px dotted #cdb98a; }
.stat-val { font-size: 1.2rem; font-weight: 900; color: #2c4a52; line-height: 1.5rem; min-height: 2.4rem; display: flex; align-items: center; justify-content: center; }
.stat-lab { margin-top: .15rem; font-size: .75rem; font-weight: 900; letter-spacing: .08em; color: #8a9a9e; }
.stat-badge { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin: 0 auto; background: #ff7aa8; color: #fff; border: 3px solid var(--ink); font-size: .62rem; font-weight: 900; box-shadow: inset -3px -3px 0 #d94f82, inset 3px 3px 0 #ffb0cc; clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px)); }
.fav { display: flex; justify-content: center; gap: .5rem; min-height: 2.6rem; }
.fav span { display: flex; flex-direction: column; align-items: center; gap: .1rem; font-size: .68rem; font-weight: 900; color: #2c4a52; }
.fav svg { width: 1.35rem; height: 1.35rem; color: #8a3d0e; }
.stat-hr { border: 0; border-top: 3px dotted #cdb98a; margin: .9rem 0 .5rem; }
.skill-title { font-size: .8rem; font-weight: 900; letter-spacing: .12em; color: #8a9a9e; margin-bottom: .35rem; }
.skill-list { display: grid; gap: .45rem; }
.skill { display: flex; align-items: stretch; text-align: left; background: #e6efcf; border: 3px solid var(--ink); box-shadow: inset -3px -3px 0 #cddcae; }
.skill-pill { flex: 0 0 5.4rem; display: grid; place-items: center; padding: .55rem .4rem; font-weight: 900; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.3); border-right: 3px solid var(--ink); box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.2); }
.skill-pill.s1 { background: #44c46d; } .skill-pill.s2 { background: #2db3a6; } .skill-pill.s3 { background: #4b8fe0; } .skill-pill.s4 { background: #9b6be0; }
.skill-txt { display: flex; align-items: center; padding: .4rem .7rem; font-size: .92rem; font-weight: 800; color: #2c4a52; }
@media (max-width: 767px) {
  .cp-line b { font-size: 2.1rem; } .mon-name { font-size: 1.4rem; } .stat-val { font-size: 1rem; }
  .skill-pill { flex-basis: 4.4rem; font-size: .85rem; } .skill-txt { font-size: .82rem; padding: .35rem .5rem; }
}
@media (min-width: 768px) {
  .dialog-in { padding: .75rem 1.25rem .9rem; }
  .dlg-text { font-size: 1.25rem !important; padding-bottom: .25rem; }
  .cp-line b { font-size: 2.3rem; } .mon-name { margin-top: .3rem; font-size: 1.5rem; }
  .stat3 { margin-top: .55rem; } .stat-val { min-height: 2.2rem; } .stat-hr { margin: .55rem 0 .35rem; }
  .skill-list { gap: .3rem; } .skill-pill { padding: .35rem .4rem; } .skill-txt { padding: .25rem .7rem; font-size: .88rem; }
  #choice-btns.shown-grid { margin-top: .5rem; padding-top: .4rem; } #choice-btns .btn-game { min-height: 2.9rem; padding-top: .35rem; padding-bottom: .35rem; }
}

/* ================= 알 부화 화면 (Oh? · 알 3개 · 몬스터) ================= */
[hidden] { display: none !important; }
.egg-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, #e9f8ef 0%, #d3eedd 55%, #bfe3cf 100%); overflow: hidden; }
.egg-bg::after { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(rgba(255,255,255,.16) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.egg-flash { position: absolute; inset: 0; z-index: 30; background: #fff; opacity: 0; pointer-events: none; }
.egg-ui { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom)); }
.egg-title { font-size: clamp(2.6rem, 9vw, 4.6rem); font-weight: 900; line-height: 1; color: #3d4a45; letter-spacing: .02em; text-shadow: 4px 4px 0 #ffffff, 6px 6px 0 rgba(61,74,69,.18); text-align: center; min-height: 1.1em; }
.egg-sub { font-weight: 900; color: #5b6e66; background: rgba(255,255,255,.7); padding: .25rem .9rem; border: 3px solid #1d1226; font-size: .95rem; }
.egg-arena { --eh: min(30dvh, 230px); position: relative; width: min(100%, 760px); height: min(46dvh, 380px); }
.egg-row { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: clamp(.6rem, 4vw, 2.6rem); }
.egg-btn { position: relative; padding: 0; border: 0; background: none; cursor: pointer; height: var(--eh); aspect-ratio: 32 / 40; z-index: 2; }
.egg-btn::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -10px; height: 14px; background: rgba(40,80,60,.25); border-radius: 50%; z-index: -1; }
.egg-btn img { animation: eggWobble 2.4s ease-in-out infinite; transform-origin: 50% 90%; transition: filter .15s; }
.egg-btn:nth-child(2) img { animation-delay: -.8s; } .egg-btn:nth-child(3) img { animation-delay: -1.6s; }
.egg-btn:hover:not(:disabled) img { filter: brightness(1.12) drop-shadow(0 0 8px #fff); animation-duration: .6s; }
.egg-btn:focus-visible { outline: 4px solid #1d1226; outline-offset: 6px; }
.egg-btn:disabled { cursor: default; }
@keyframes eggWobble { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-5deg); } 30% { transform: rotate(5deg); } 45% { transform: rotate(-3deg); } 60% { transform: rotate(0); } }
.egg-row.enter .egg-btn { animation: eggDrop .7s cubic-bezier(.3, 1.4, .5, 1) both; }
.egg-row.enter .egg-btn:nth-child(2) { animation-delay: .12s; } .egg-row.enter .egg-btn:nth-child(3) { animation-delay: .24s; }
@keyframes eggDrop { from { opacity: 0; transform: translateY(-60px); } }
.egg-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.egg-fx .star-fx { top: 50% !important; }
.egg-piece { position: absolute; }
.shard { position: absolute; width: 8px; height: 8px; border: 2px solid #2b2236; margin: -4px; }
.hatch-monster { position: absolute; left: 50%; top: 50%; height: min(40dvh, 320px); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 4; animation: pxIdle 1.1s steps(2) infinite; }
.egg-result { display: flex; flex-direction: column; align-items: center; gap: .7rem; width: 100%; max-width: 40rem; animation: pxPop .4s steps(5) both; }
.egg-tag { filter: drop-shadow(4px 4px 0 rgba(10,20,50,.35)); }
.egg-tag-in { display: flex; align-items: center; gap: .6rem; padding: .35rem 1.2rem; }
.egg-new { background: #e8384f; color: #fff; font-weight: 900; font-size: .75rem; padding: .05rem .4rem; border: 2px solid #1d1226; }
.egg-tag-in strong { font-size: 1.6rem; font-weight: 900; color: #1d1226; }
.egg-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; width: 100%; }
.egg-btns .btn-game { white-space: nowrap; min-height: 3rem; padding: .4rem .5rem; font-size: clamp(.85rem, 3.4vw, 1.05rem); gap: .35rem; }
@media (max-width: 520px) { .egg-btns { grid-template-columns: 1fr; } .egg-arena { --eh: min(22dvh, 150px); height: min(34dvh, 260px); } }
@media (prefers-reduced-motion: reduce) { .egg-btn img, .egg-row.enter .egg-btn, .hatch-monster { animation: none; } }
/* 부화 몬스터는 transform 없이 중앙 정렬 (팝 애니메이션이 transform을 사용하므로) */
.hatch-monster { left: 0 !important; right: 0; top: 0 !important; bottom: 0; margin: auto; transform: none; }
@media (max-width: 520px) { .egg-title { font-size: clamp(1.9rem, 8.4vw, 3rem); white-space: nowrap; } }

/* ================= 등장 말풍선 ================= */
.bubble { position: absolute; z-index: 22; max-width: min(78%, 300px); filter: drop-shadow(4px 4px 0 rgba(10, 20, 50, .38)); pointer-events: none; }
.bubble-in { padding: .55rem .95rem; font-weight: 900; font-size: clamp(1rem, 3.6vw, 1.3rem); color: var(--ink); white-space: nowrap; min-height: 1.4em; }
.bubble-tail { position: absolute; left: var(--tail, 28px); bottom: -22px; width: 28px; height: 24px; background: var(--ink); clip-path: polygon(0 0, 100% 0, 100% 25%, 75% 25%, 75% 50%, 50% 50%, 50% 75%, 25% 75%, 25% 100%, 0 100%); }
.bubble-tail::after { content: ""; position: absolute; left: 4px; top: -2px; width: 18px; height: 17px; background: #fff6d8; clip-path: polygon(0 0, 100% 0, 100% 25%, 75% 25%, 75% 50%, 50% 50%, 50% 75%, 25% 75%, 25% 100%, 0 100%); }

/* ================= 스킬 아이콘 화면 ================= */
.px-shadow { filter: drop-shadow(6px 6px 0 rgba(10, 20, 50, .42)); width: 100%; max-width: 44rem; margin: auto; }
.skills-card { width: 100%; }
.skills-head { display: flex; align-items: center; gap: .5rem; padding: .7rem 1.2rem; font-size: 1.2rem; font-weight: 900; color: #fff; background: #2f63cc; border-bottom: 4px solid var(--ink); text-shadow: 0 2px 0 rgba(0,0,0,.35); box-shadow: inset 0 3px 0 rgba(255,255,255,.3); }
.skill-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem 1.4rem; padding: 1.6rem 1rem 1.4rem; list-style: none; margin: 0; }
.skill-tile { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 6.6rem; animation: pxPop .45s steps(5) both; }
.skill-ico { display: grid; place-items: center; width: 4.8rem; height: 4.8rem; background: var(--bg); color: var(--fg); font-size: 2rem; font-weight: 900; letter-spacing: -.04em; border: 4px solid var(--ink);
  box-shadow: inset -5px -5px 0 rgba(0,0,0,.4), inset 5px 5px 0 rgba(255,255,255,.22);
  clip-path: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px));
  transition: transform .12s steps(2); }
.skill-ico svg { width: 2.3rem; height: 2.3rem; stroke-width: 2.6; }
.skill-tile:hover .skill-ico { transform: translateY(-5px); }
.skill-label { font-size: .85rem; font-weight: 900; color: var(--ink); text-align: center; line-height: 1.25; }
.skills-foot { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; padding: 1rem 1.2rem 1.2rem; border-top: 4px dotted #cdb98a; }
@media (max-width: 560px) { .skills-foot { grid-template-columns: 1fr; } .skill-tile { width: 5.4rem; } .skill-ico { width: 4rem; height: 4rem; font-size: 1.6rem; } .skill-grid { gap: 1rem; } }
@media (prefers-reduced-motion: reduce) { .skill-tile { animation: none; } }

/* 알 고르기 화면의 처음으로 버튼 */
.egg-home-choose { margin-top: .4rem; min-width: 10rem; min-height: 3rem; }