/* 냥냥 타워 모듈 스타일. 좌표는 tower.js가 넣는다 (가로 % · 세로 %) */
.tower { position: relative; width: min(100%, calc((100dvh - 330px) * .75)); aspect-ratio: 3 / 4; margin: 0 auto; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); container-type: inline-size; touch-action: none; isolation: isolate; /* 안쪽 z-index가 모달 위로 새지 않게 */
  background: radial-gradient(circle at 20% 18%, rgba(255, 255, 255, .9) 0 6%, transparent 6.5%), radial-gradient(circle at 27% 16%, rgba(255, 255, 255, .9) 0 5%, transparent 5.5%),
    radial-gradient(circle at 78% 30%, rgba(255, 255, 255, .8) 0 5%, transparent 5.5%), radial-gradient(circle at 84% 29%, rgba(255, 255, 255, .8) 0 4%, transparent 4.5%),
    linear-gradient(#cfe9fb, #fdf1e6 80%); }
.tw-s { position: absolute; inset: 0; }
.tw-ground { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(#e9c79c, #ddb383); border-top: 3px solid #d2a676; }
/* 기둥은 밧줄을 감은 모양 */
.tw-post { position: absolute; left: 50%; width: 7%; transform: translateX(-50%); z-index: 10; border-radius: 4px; background: repeating-linear-gradient(-18deg, #d9b07a 0 5px, #c4955c 5px 7px); box-shadow: inset -3px 0 0 rgba(0, 0, 0, .08); }
.tw-cap { position: absolute; left: 50%; width: 16%; height: 3.4%; transform: translate(-50%, 0); z-index: 12; border-radius: 99px; background: #ffd1dc; border: 3px solid #e89ab0; }
.tw-plat { position: absolute; width: 23%; height: 2.6%; z-index: 12; border-radius: 99px; background: #fff3d9; border: 3px solid #d9b07a; box-shadow: 0 3px 0 rgba(150, 100, 60, .2); }
.tw-arm { position: absolute; width: 33%; height: 1.1%; z-index: 9; border-radius: 99px; background: #b98a55; }
.tw-toy { position: absolute; z-index: 15; pointer-events: auto; cursor: pointer; }
.tw-toy svg { display: block; width: 100%; height: auto; overflow: visible; }
.tw-toy.on-ground { transform: translate(-50%, -50%); transform-origin: 50% 100%; }
.tw-hang { position: absolute; width: 0; transform: translateX(-50%); transform-origin: 50% 0; z-index: 14; }
.tw-hang .tw-rope { position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: #9c7650; }
.tw-hang .tw-toy { left: 50%; top: 100%; transform: translateX(-50%); transform-origin: 50% 0; }
.tw-toy.boing { animation: tw-boing .35s ease-out; }
.tw-toy.on-ground.boing { animation: tw-boing-g .35s ease-out; }
@keyframes tw-boing { 30% { transform: translateX(-50%) scale(1.15, .78); } 65% { transform: translateX(-50%) scale(.94, 1.08); } }
@keyframes tw-boing-g { 30% { transform: translate(-50%, -50%) scale(1.15, .72); } 65% { transform: translate(-50%, -50%) scale(.94, 1.1); } }
.tw-spin { transform-origin: 50px 50px; }
.tw-lv { position: absolute; z-index: 16; transform: translate(-50%, 0); min-width: 18px; padding: 0 5px; border-radius: 99px; background: #fff; color: #c2527a; font: 400 12px/18px var(--display); text-align: center; box-shadow: 0 1px 4px rgba(75, 44, 63, .2); pointer-events: none; font-style: normal; }
.tw-lv::before { content: "Lv"; font-size: 9px; margin-right: 1px; }
.tw-slot { position: absolute; z-index: 15; transform: translate(-50%, -50%); width: 12%; aspect-ratio: 1; border-radius: 50%; border: 3px dashed rgba(90, 61, 74, .35); background: rgba(255, 255, 255, .55); color: rgba(90, 61, 74, .55); font: 400 22px var(--display); line-height: 1; animation: tw-pulse 2s ease-in-out infinite; }
@keyframes tw-pulse { 50% { background: rgba(255, 235, 200, .8); } }

/* 고양이: room.css의 .rc-* 자세 그림 규칙을 같이 쓴다 */
.tw-cat { position: absolute; left: 0; top: 0; width: 15cqw; aspect-ratio: 1; cursor: grab; will-change: transform; }

/* 저금통 */
#tw-bank { position: absolute; left: 3%; top: 2.5%; z-index: 70; }
.tw-bank { display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 99px; background: rgba(255, 255, 255, .92); box-shadow: var(--shadow); border: 3px solid transparent; }
.tw-bank.full { border-color: var(--yellow); animation: tw-wiggle 1.4s ease-in-out infinite; }
.tw-bank.got { animation: tw-got .4s ease-out; }
@keyframes tw-wiggle { 0%, 70%, 100% { transform: none; } 80% { transform: rotate(-4deg); } 90% { transform: rotate(4deg); } }
@keyframes tw-got { 40% { transform: scale(1.12); } }
.tw-jar { position: relative; width: 22px; height: 26px; border-radius: 6px 6px 9px 9px; border: 3px solid #e3a24a; overflow: hidden; background: #fff8e6; }
.tw-jar i { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(#ffd75a, #ffb72e); transition: height .3s; }
.tw-banknum { display: flex; align-items: center; gap: 2px; font: 400 16px var(--display); }
.tw-banknum small { font-size: 12px; color: var(--ink-soft); }
.tw-banknum svg, .tw-banknum img { width: 16px; height: 16px; }

.tw-pop { position: absolute; z-index: 80; transform: translate(-50%, 0); font: 400 15px var(--display); pointer-events: none; white-space: nowrap; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; animation: tw-float 1.1s ease-out forwards; }
.tw-pop.coin { color: #e39a1c; font-size: 17px; }
.tw-pop.full { color: #a07a5a; font-size: 13px; }
.tw-pop.heart { color: #e0668c; font-size: 20px; }
.tw-pop.say { color: #5a3d4a; font-size: 13px; background: #fff; border-radius: 10px; padding: 2px 8px; text-shadow: none; box-shadow: 0 2px 6px rgba(75, 44, 63, .18); }
@keyframes tw-float { from { opacity: 0; transform: translate(-50%, 4px) scale(.7); } 15% { opacity: 1; transform: translate(-50%, -2px) scale(1.05); } 70% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -22px); } }
.tw-toast { position: absolute; left: 50%; bottom: 14%; z-index: 90; transform: translateX(-50%); background: rgba(90, 61, 74, .88); color: #fff; padding: 8px 14px; border-radius: 99px; font-size: 14px; white-space: nowrap; animation: room-pop .2s ease-out; pointer-events: none; }
.tw-toast svg, .tw-toast img { width: 15px; height: 15px; vertical-align: -2px; }

.tw-help { margin-top: 12px; }
.tw-help > svg.ic { width: 34px; height: 34px; color: #e58aa6; }

/* 놀잇감 고르기 */
.tw-list { display: grid; gap: 8px; margin: 10px 0 14px; text-align: left; }
.tw-row { width: 100%; }
.tw-prev { display: flex; align-items: center; justify-content: center; width: 52px; height: 44px; flex: none; }
.tw-prev svg { max-width: 100%; max-height: 100%; }
.tw-big { display: flex; justify-content: center; margin-bottom: 4px; }
.tw-big .tw-prev { width: 110px; height: 90px; }
.tw-lvtag { font: 400 14px var(--display); color: #c2527a; background: #ffe3ec; border-radius: 99px; padding: 1px 8px; vertical-align: 3px; }
.room-tower { margin-top: 10px; width: 100%; }
@media (prefers-reduced-motion: reduce) { .tw-slot, .tw-bank.full, .tw-toy.boing { animation: none !important; } }