/* 색과 글꼴은 「공룡에게 물어보기」와 같은 톤을 쓴다 */
:root {
  --sky: #CDEBF5;
  --sky-hi: #EAF7FB;
  --grass: #8BCB6E;
  --grass-deep: #5FA04C;
  --sea: #58B9E0;
  --ink: #1F3B2D;
  --ink-soft: #466453;
  --surface: #FFFBEA;
  --surface-edge: #E3D8AE;
  --accent: #F2643D;
  --accent-deep: #B9401F;
  --orb: #FFC93C;
  --liner: #FBF7E6; /* 스티커 판의 반들반들한 이형지 */
  --display: "Jua", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  position: fixed; inset: 0; margin: 0; overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
body {
  background: linear-gradient(var(--sky-hi), var(--sky) 45%);
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; padding: 0; background: none; touch-action: manipulation; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.screen { position: absolute; inset: 0; }

.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 48px; min-width: 48px; padding: 0 16px; border-radius: 24px;
  background: var(--surface); box-shadow: 0 4px 0 var(--surface-edge);
  font-size: 1.05rem; white-space: nowrap;
}
.chip svg { width: 24px; height: 24px; flex: none; }
.chip:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--surface-edge); }
.chip.round { padding: 0; width: 48px; }
.chip.primary { background: var(--accent); color: #fff; box-shadow: 0 4px 0 var(--accent-deep); }
.chip.primary:active { box-shadow: 0 1px 0 var(--accent-deep); }

/* ───────── 처음 화면 ───────── */
#home {
  display: flex; flex-direction: column;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-top: max(12px, env(safe-area-inset-top));
}
#home::before {
  content: ""; position: absolute; top: 18px; left: max(4%, calc(50% - 340px));
  width: 64px; height: 64px; border-radius: 50%; background: var(--orb);
}
.home-bar { display: flex; justify-content: flex-end; gap: 8px; padding: 0 16px; position: relative; }
select.chip { -webkit-appearance: none; appearance: none; border: 0; font: inherit; color: inherit; text-align: center; text-align-last: center; cursor: pointer; }
.home-title { position: relative; text-align: center; padding: 0 16px; }
.home-title h1 { margin: 0; font-weight: 400; font-size: clamp(2rem, 7vw, 3.2rem); line-height: 1.15; }
.home-title p { margin: 6px 0 0; color: var(--ink-soft); font-size: clamp(1rem, 3vw, 1.25rem); word-break: keep-all; }
.parade {
  display: flex; justify-content: center; align-items: flex-end; gap: 2%;
  height: clamp(84px, 17vh, 160px); margin: 10px 16px -16px; position: relative; z-index: 1; pointer-events: none;
}
.parade svg { height: 100%; width: auto; max-width: 31%; }
.parade svg:nth-child(2) { height: 80%; align-self: flex-start; }
.parade svg:nth-child(3) { transform: scaleX(-1); }
.land {
  flex: 1 0 auto; position: relative;
  padding: 36px max(16px, calc((100% - 980px) / 2)) max(28px, env(safe-area-inset-bottom));
  background: var(--grass);
  border-radius: 50% 50% 0 0 / 36px 36px 0 0;
}
/* 팩 고르기 */
.packs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 24px; }
.pack {
  display: flex; flex-direction: column; align-items: center; gap: 2px; width: 104px; padding: 8px 4px;
  border-radius: 20px; background: rgba(255, 251, 234, .5); box-shadow: 0 4px 0 rgba(31, 59, 45, .14); font-size: 1rem;
}
.pack svg { width: 78px; height: 58px; pointer-events: none; }
.pack.on { background: var(--surface); box-shadow: 0 4px 0 var(--surface-edge), inset 0 0 0 3px var(--accent); }
.pack:active { transform: translateY(3px); }
.land h2 { margin: 0 0 10px; font-weight: 400; font-size: 1.4rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.land h2 span { font-size: .95rem; color: var(--ink-soft); }
.land h2:not(:first-child) { margin-top: 28px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 8px 10px;
  border-radius: 22px; background: var(--surface); box-shadow: 0 5px 0 var(--surface-edge);
  font-size: 1.15rem; text-align: center;
}
.card:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--surface-edge); }
.card .preview { display: block; position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; pointer-events: none; --u: .2px; }
.card .preview .bg { position: absolute; inset: 0; }
.card .label { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.card .stars { font-size: .9rem; color: var(--accent-deep); background: #FFE9A8; border-radius: 999px; padding: 2px 10px; }
.card .stars.all { background: var(--orb); color: var(--ink); }

/* ───────── 놀이 화면 ───────── */
#game { touch-action: none; }
.stage {
  position: absolute;
  inset: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 8px;
}
.stage.side { flex-direction: row; }
.board-wrap { flex: 1; min-width: 0; min-height: 0; display: grid; place-items: center; position: relative; z-index: 2; pointer-events: none; }
.board { position: relative; --u: .5px; flex: none; }
.board .bg { position: absolute; inset: 0; border-radius: calc(var(--u) * 44); overflow: hidden; box-shadow: 0 5px 0 rgba(31, 59, 45, .18); pointer-events: auto; }
/* 스티커북의 코팅된 종이처럼 빛이 비스듬히 지나간다 */
.board .bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .13) 42%, rgba(255, 255, 255, 0) 54%, rgba(255, 255, 255, .08) 70%, rgba(255, 255, 255, 0) 80%);
}
.bg svg { display: block; width: 100%; height: 100%; }
.layer { position: absolute; inset: 0; pointer-events: none; }

/* 장면 좌표(1600×1000)를 화면으로 옮긴다. --u 는 장면 1칸의 크기(px). */
.slot, .sticker, .sticker-shade, .fx-item {
  position: absolute; left: 0; top: 0;
  transform: translate(calc(var(--x) * var(--u) - 50%), calc(var(--y) * var(--u) - 50%));
}
.slot, .sticker, .sticker-shade { width: calc(var(--w) * var(--u)); aspect-ratio: var(--ar); }
.slot svg, .sticker svg, .sticker-shade svg { display: block; width: 100%; height: 100%; overflow: visible; }
.slot-flip, .sticker-flip { width: 100%; height: 100%; transition: transform .2s; }
.flip > .slot-flip, .flip > .sticker-inner > .sticker-flip { transform: scaleX(-1); }

/* 붙일 자리 */
.slot { color: var(--ink); opacity: .24; transition: opacity .25s; }
.slot.filled { opacity: 0; }
.slot.hint { opacity: .4; }
.slot.hint svg { animation: hint .8s ease-in-out infinite; }
/* 밤·우주처럼 어두운 장면에서는 밝은 그림자 */
.dark .slot { color: #EAF2FF; opacity: .34; }
.dark .slot.filled { opacity: 0; }
.dark .slot.hint { opacity: .55; }

/* 스티커 */
.sticker { pointer-events: none; will-change: transform; }
.sticker.leaving { transition: transform .24s ease-in, opacity .24s ease-in; opacity: 0; }
.sticker.leaving .sticker-inner { transform: scale(.25) rotate(-30deg); transition: transform .24s ease-in; }
.sticker-inner { width: 100%; height: 100%; transform-origin: 50% 92%; }
.sticker .front { pointer-events: visiblePainted; cursor: grab; }
.sticker.lifted .front { cursor: grabbing; }
.sticker-shade { pointer-events: none; color: var(--ink); opacity: 0; filter: blur(calc(var(--u) * 12)); will-change: transform, opacity; }

.sticker-inner.stick { animation: stick .3s ease-out; }
.sticker-inner.celebrate { animation: celebrate 1.15s ease-in-out; }
.sticker-inner.shout { animation: shout .7s ease-in-out; }
.sticker-inner.dance { animation: dance .6s ease-in-out 3; }

/* 스티커 그림 */
.stk .die-c { color: #fff; }
.stk .mouth-open { display: none; }
.stk.roaring .mouth-open { display: inline; }
.stk.roaring .mouth-closed { display: none; }
.board .sticker .eye { transform-box: fill-box; transform-origin: center; animation: blink 4.2s infinite; animation-delay: var(--blink, 0s); }

/* 스티커 판: 광택 나는 이형지 위에 스티커가 붙어 있다 */
.tray {
  flex: none; position: relative; z-index: 1;
  display: flex; align-items: stretch; gap: 4px; padding: 6px;
  border-radius: 20px; box-shadow: 0 5px 0 var(--surface-edge), inset 0 0 0 2px rgba(255, 255, 255, .7);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, .85) 27%, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, .6) 66%, rgba(255, 255, 255, 0) 74%),
    var(--liner);
  transition: box-shadow .15s;
}
.tray-grid { flex: 1; min-width: 0; min-height: 0; display: grid; }
.tray-grid.turn { animation: turn .25s ease-out; }
/* 스티커가 많으면 장을 넘긴다 */
.pager { display: none; flex: none; width: 48px; place-items: center; border-radius: 16px; background: var(--surface); box-shadow: 0 3px 0 var(--surface-edge); }
.tray.paged .pager { display: grid; }
.pager svg { width: 28px; height: 28px; }
.pager:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--surface-edge); }
/* 옆쪽 판과 좁은 화면에서는 넘김 버튼 둘을 칸들 아래에 나란히 놓는다 (칸이 들어갈 자리를 덜 잡아먹는다) */
.tray.stack { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; }
.tray.stack .tray-grid { grid-column: 1 / 3; grid-row: 1; }
.tray.stack .pager { width: auto; height: 48px; grid-row: 2; }
.tray.dropzone { box-shadow: 0 5px 0 var(--surface-edge), inset 0 0 0 4px var(--orb); }
.cell { position: relative; min-width: 0; min-height: 0; touch-action: none; cursor: grab; }
.cell-hole, .cell-art { position: absolute; inset: 3px; }
.cell svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cell-hole { opacity: 0; transition: opacity .15s; }
.cell.out .cell-hole { opacity: 1; }
.cell.out .cell-art { visibility: hidden; }
.stk-hole .hole-edge { color: rgba(31, 59, 45, .2); }
.stk-hole .hole-fill { color: #FFFEF8; }
.cell-art { transform-origin: 50% 90%; }
.cell-art.refill { animation: refill .3s cubic-bezier(.3, 1.6, .5, 1); }
.cell-art.shout { animation: shout .7s ease-in-out; }

/* 버튼·알림 */
.game-bar { position: absolute; z-index: 6; top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); display: flex; gap: 8px; }
.game-bar .chip { opacity: .94; }
.done {
  position: absolute; z-index: 7; left: 50%; top: max(14px, env(safe-area-inset-top)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 20px 16px;
  background: var(--surface); border-radius: 26px; box-shadow: 0 6px 0 var(--surface-edge);
  animation: drop-in .5s cubic-bezier(.3, 1.5, .5, 1);
}
.done strong { font-weight: 400; font-size: clamp(1.4rem, 4.5vw, 2rem); }
.done div { display: flex; gap: 10px; }

/* 효과 */
.fx-item { pointer-events: none; z-index: 1; }
.name-tag {
  padding: calc(var(--u) * 14) calc(var(--u) * 40); border-radius: 999px;
  background: var(--surface); box-shadow: 0 calc(var(--u) * 8) 0 var(--surface-edge);
  font-size: calc(var(--u) * 76); white-space: nowrap;
  animation: name-pop 2s ease-in-out both;
}
.cry {
  font-size: calc(var(--u) * 66); white-space: nowrap; color: var(--c, var(--accent));
  -webkit-text-stroke: calc(var(--u) * 14) #fff; paint-order: stroke fill;
  animation: cry-float 1.4s ease-out both;
}
.ring {
  width: calc(var(--u) * 90); height: calc(var(--u) * 90); border-radius: 50%;
  border: calc(var(--u) * 9) solid #fff; opacity: 0;
  animation: ring 1s ease-out both; animation-delay: var(--d, 0s);
}
.bit { display: block; }
.bit svg { display: block; width: 100%; height: 100%; }

@keyframes hint { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.08); } }
/* 꾹 눌려 붙는다 */
@keyframes stick { 0% { transform: scale(1.05); } 40% { transform: scale(.95, .97); } 70% { transform: scale(1.015); } 100% { transform: none; } }
@keyframes turn { 0% { opacity: .2; transform: scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes refill { 0% { transform: scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes celebrate {
  0% { transform: none; }
  12% { transform: scale(1.16, .84); }
  30% { transform: translateY(-30%) scale(.92, 1.12) rotate(-7deg); }
  46% { transform: scale(1.1, .9) rotate(5deg); }
  60% { transform: translateY(-13%) rotate(-5deg); }
  76% { transform: scale(1.04, .96) rotate(3deg); }
  100% { transform: none; }
}
@keyframes shout {
  0%, 100% { transform: none; }
  15% { transform: scale(1.12) rotate(-5deg); }
  35% { transform: scale(1.12) rotate(5deg); }
  55% { transform: scale(1.1) rotate(-4deg); }
  75% { transform: scale(1.06) rotate(3deg); }
}
@keyframes dance {
  0%, 100% { transform: none; }
  25% { transform: translateY(-16%) rotate(-7deg); }
  50% { transform: scale(1.06, .94); }
  75% { transform: translateY(-10%) rotate(7deg); }
}
@keyframes name-pop {
  0% { transform: scale(.3); opacity: 0; }
  10% { transform: scale(1.12); opacity: 1; }
  16%, 84% { transform: scale(1); opacity: 1; }
  100% { transform: scale(.8); opacity: 0; }
}
@keyframes cry-float {
  0% { transform: scale(.2); opacity: 0; }
  18% { transform: scale(1.2); opacity: 1; }
  30% { transform: scale(1); }
  75% { opacity: 1; }
  100% { transform: translateY(-60%); opacity: 0; }
}
@keyframes ring { 0% { transform: scale(.3); opacity: .95; } 100% { transform: scale(3); opacity: 0; } }
@keyframes drop-in { 0% { transform: translate(-50%, -140%); } 100% { transform: translate(-50%, 0); } }

@media (prefers-reduced-motion: reduce) {
  .board .sticker .eye, .slot.hint svg { animation: none; }
}