/* 몽상아뜰리에 덧입힘 — 지피티 「정원 아케이드」(theme.css → effects.css → arcade.css) 위에 마지막으로 얹는다.
 * 여기 있는 것: 폰 규칙(안전영역·확대/선택 금지), 판 크기 변수(6·7·8), 아이템·상자 칸, 주머니, 조준 표시,
 * 남은 시간 띠, 느린 재생(검수), 없는 그림 대비. 색은 아케이드 팔레트(청록 바탕·금색 포인트)에 맞춘다. */
:root { --cols: 6; --rows: 6;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); }
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; overscroll-behavior: none; }
img { -webkit-user-drag: none; pointer-events: none; }
button { -webkit-user-select: none; user-select: none; }

/* 안전영역: 주황 헤더가 상태바 밑으로 파고들지 않게, 아래는 홈 인디케이터만큼 */
.app-header { padding-top: calc(15px + var(--sat)) !important; }
#app { padding-left: calc(18px + var(--sal)); padding-right: calc(18px + var(--sar)); padding-bottom: calc(12px + var(--sab)); }
.screen { top: calc(72px + var(--sat)) !important; }
@media (max-width: 730px) {
  .app-header { padding-top: calc(12px + var(--sat)) !important; }
  #app { padding-left: calc(12px + var(--sal)); padding-right: calc(12px + var(--sar)); padding-bottom: calc(10px + var(--sab)); }
  .screen { top: calc(73px + var(--sat)) !important; }
}
@media (max-height: 700px) { .screen { top: calc(68px + var(--sat)) !important; } }

/* 판 크기는 판마다 다르다 */
#board { width: calc(var(--cell) * var(--cols) + 12px); height: calc(var(--cell) * var(--rows) + 12px); }
.tile { left: 6px; top: 6px; }
.kit.drop { transition: transform .32s cubic-bezier(.3,.9,.4,1.15); }
.kit .pic.fallback { border-radius: 50%; background: var(--tint); inset: 9px; }

/* 아이템·상자 칸 — 바탕이 보여야 해서 tint 를 살린다 */
.kit.item .tint, .kit.box .tint { display: block; position: absolute; inset: 3px; border-radius: 11px; }
.kit.item .tint { background: #fff0bf; box-shadow: 0 0 0 2.5px #ffb72f inset; }
.kit.item .pic { inset: 5px !important; animation: shine 1.6s ease-in-out infinite; }
.kit.box .tint { background: #e9d3b5; box-shadow: 0 0 0 2.5px #ac5215 inset; }
.kit.box .pic { inset: 4px !important; }
.kit .pic.emoji { display: flex; align-items: center; justify-content: center; font-size: calc(var(--cell) * .55); line-height: 1; }
.kit.zap .tint { display: block; position: absolute; inset: 3px; border-radius: 11px; background: #fff8c8; box-shadow: 0 0 0 3px #ffb72f inset; }
.kit.zap .pic { animation: zap .2s ease-in-out 2; }
@keyframes shine { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08) rotate(-4deg)} }
@keyframes zap { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }

/* 아이템 주머니 */
#items { flex: none; display: flex; justify-content: center; gap: 9px; padding: 10px 2px 0; }
.slot { display: flex; align-items: center; gap: 5px; padding: 5px 11px 5px 7px; border-radius: 16px; font-size: 19px;
  background: #0f6a86; border: 2px solid #4fb7d3; box-shadow: 0 4px 0 #064b60; color: #a9dcea; opacity: .75; transition: transform .15s, opacity .2s; }
.slot.have { opacity: 1; background: linear-gradient(#ffe062, #ffb322); border-color: #ffe98d; box-shadow: 0 4px 0 #b3611a, inset 0 2px 0 #fff4ad; color: #6e300b; }
.slot.aim { transform: translateY(-3px); box-shadow: 0 0 0 3px #fff253, 0 4px 0 #b3611a; }
.slot.bump { animation: bump .4s ease-out; }
.slot .ico { width: 32px; height: 32px; background-size: contain; background-repeat: no-repeat; background-position: center; filter: drop-shadow(0 2px 0 #00000033); }
.slot .ico.emoji { font-size: 24px; line-height: 32px; text-align: center; }
.slot b { font-weight: 400; min-width: 14px; text-align: center; }
@keyframes bump { 0%{transform:scale(1)} 40%{transform:scale(1.25)} 100%{transform:scale(1)} }
.aiming #board { box-shadow: 0 0 0 5px #fff253, 0 0 0 8px #ac5215, 0 9px 0 8px #104b4f, inset 0 2px #79dbe4; }
.aiming #tip { color: #fff253; }

/* 남은 시간 띠 */
#timebar { position: relative; height: 24px; margin: 0 2px 8px; border-radius: 12px; background: #05658a; border: 2px solid #68dff0; box-shadow: inset 0 3px #034b6a; overflow: hidden; }
#timebar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(90deg, #6ee7c8, #12b99a); border-radius: 10px; transition: width .25s linear, background .3s; }
#timebar span { position: absolute; right: 9px; top: 0; line-height: 20px; font-size: 14px; color: #fff1a5; text-shadow: 0 1px 0 #03485e; }
#timebar.warn .fill { background: linear-gradient(90deg, #ffd23f, #ff9a1f); }
#timebar.low .fill { background: linear-gradient(90deg, #ff7a5c, #e0245e); }
#timebar.low { animation: blink .5s steps(2, end) infinite; border-color: #ff9a8a; }
@keyframes blink { 50% { box-shadow: inset 0 3px #034b6a, 0 0 0 3px #ff6b8b88; } }
.low-time .moves-stat img { animation: heartbeat .5s ease-in-out infinite; }
@keyframes heartbeat { 50% { transform: scale(1.15); } }

/* 어른 고양이 달려 나가기 — 검수용 느린 재생 */
.runner.fallback { border-radius: 40% 40% 45% 45%; background: var(--tint); opacity: .95; }
.slow .runner { animation-duration: 6s; }
.slow .float { animation-duration: 5s; }

/* 효과 모듈이 없을 때 쓰는 내 효과(effects.js 가 있으면 안 쓰인다) */
.ripple { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 3px solid #ffe137; opacity: .9; pointer-events: none; animation: ripple .65s ease-out forwards; }
@keyframes ripple { to { transform: scale(6); opacity: 0; } }
.spark { position: absolute; margin: -8px 0 0 -6px; font-size: 16px; line-height: 1; pointer-events: none; animation: spark .75s ease-out forwards; }
@keyframes spark { 0% { transform: translate(0,0) scale(.4); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.2) rotate(180deg); opacity: 0; } }
#toast { position: absolute; left: 50%; top: 8px; transform: translate(-50%, -40px); z-index: 17; pointer-events: none; opacity: 0;
  padding: 7px 13px; border-radius: 20px; background: #0bc2a0; color: #073f38; border: 2px solid #85ffdf; font-size: 14px; white-space: nowrap; transition: transform .35s, opacity .3s; }
#toast.show { transform: translate(-50%, 0); opacity: 1; }
.combo { position: absolute; left: 50%; top: 16%; transform: translateX(-50%); z-index: 16; pointer-events: none; text-align: center; color: #fff045; animation: comboIn 1s forwards; }
.combo b { display: block; font-size: 36px; font-weight: 400; -webkit-text-stroke: 5px #b34c11; paint-order: stroke fill; }
.combo span { display: block; font-size: 30px; color: #fff4b8; }
@keyframes comboIn { 0% { transform: translate(-50%, 10px) scale(.4); opacity: 0; } 25% { transform: translate(-50%, 0) scale(1.1); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-50%, -20px) scale(.95); opacity: 0; } }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 40; }
.confetti i { position: absolute; top: -20px; display: block; border-radius: 2px; animation: fall 2.4s ease-in forwards; }
@keyframes fall { to { transform: translate(var(--rx), 110vh) rotate(720deg); opacity: .8; } }

/* ── 200판: 세계마다 바닥 색이 돌고, 보스판은 판 테두리가 붉다 ── */
.tile { filter: hue-rotate(var(--world-hue, 0deg)); }
.boss #board { box-shadow: 0 0 0 5px #ff5a3c, 0 0 0 8px #7a1d0c, 0 9px 0 8px #104b4f, inset 0 2px #79dbe4; }
.boss .wordmark-dot { color: #ff5a3c; }
#level::after { content: attr(data-max); font-size: 13px; color: #17486c; margin-left: 2px; letter-spacing: 0; }
@media (max-width: 365px) { #level::after { display: none; } }