/* 블록 탑 화면 — 진행 화면은 3D 무대가 화면을 꽉 채운다(위 띠 아래). */
.tower-art { width: 120px; height: 120px; display: block; margin: 0 auto 6px; }
.tower-art.spin { animation: wob 1s ease-in-out infinite; }
.tower-art.fallen { transform: rotate(-14deg); }
@keyframes wob { 50% { transform: rotate(4deg); } }
h1 .sub { display: block; font-size: 1.15rem; color: var(--pink); }
.howto { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; font-size: 1rem; }

body[data-screen="play"] main#app { max-width: none; padding: 0; }
body[data-screen="play"] { overflow: hidden; overscroll-behavior: none; }
.stage { position: relative; height: calc(100vh - 60px); height: calc(100dvh - 60px - env(safe-area-inset-top)); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overflow: hidden; }
.tower-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.hud { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 8px; align-items: stretch; pointer-events: none; z-index: 2; }
.hud > div { background: var(--card); border: 3px solid var(--line); border-radius: 16px; padding: 4px 10px; box-shadow: 0 3px 0 var(--line); min-width: 0; }
.hud small { display: block; font-size: .78rem; font-weight: 800; color: var(--muted); line-height: 1.2; }
.hud .now { flex: 1.3; background: var(--yellow); color: var(--on-color); }
.hud .now small { color: var(--on-color); opacity: .75; }
.hud .now b { display: block; font-size: 1.45rem; font-weight: 900; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud .next { flex: 1; }
.hud .next b { display: block; font-size: 1.05rem; font-weight: 900; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud .dir { display: block; font-size: .85rem; font-weight: 800; color: var(--purple); }

.hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(86px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 20px); margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--card); border: 2px solid var(--line); text-align: center; font-weight: 800; font-size: .98rem; line-height: 1.35; pointer-events: none; z-index: 2; }
.hint:empty { display: none; }
.rope { position: absolute; left: 10px; right: 10px; bottom: calc(12px + env(safe-area-inset-bottom)); height: 64px; border-radius: 20px; border: 3px dashed var(--line); background: color-mix(in srgb, var(--card) 85%, transparent); z-index: 3; touch-action: none; padding: 4px; display: flex; align-items: center; }
.rope[hidden] { display: none; }
.rope-knob { display: inline-flex; align-items: center; height: 100%; padding: 0 16px; border-radius: 14px; border: 3px solid var(--line); background: var(--pink); color: var(--on-color); font-weight: 900; font-size: 1.1rem; box-shadow: 0 3px 0 var(--line); white-space: nowrap; will-change: transform; pointer-events: none; }
.rope-knob.held { box-shadow: 0 1px 0 var(--line); }

.pop { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 4; text-align: center; padding: 18px 22px; border-radius: 24px; border: 4px solid var(--line); background: var(--yellow); color: var(--on-color); box-shadow: 0 6px 0 var(--line); pointer-events: none; animation: popin .35s cubic-bezier(.2, 1.6, .4, 1) 1; width: max-content; max-width: 90%; }
.pop[hidden] { display: none; }
.pop b { display: block; font-size: 2.6rem; font-weight: 900; line-height: 1.1; word-break: keep-all; }
.pop small { display: block; font-size: 1.1rem; font-weight: 800; margin-top: 4px; }
.pop[data-kind="reverse"] { background: var(--blue); }
.pop[data-kind="crash"] { background: var(--danger); color: #fff; }
.pop[data-kind="crash"] b { font-size: 3.4rem; }
@keyframes popin { from { transform: translate(-50%, -50%) scale(.3); } to { transform: translate(-50%, -50%) scale(1); } }

.ov { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg) 70%, transparent); }
.ov[hidden] { display: none; }
.ov .panel { width: 100%; max-width: 420px; }
.crash-word { color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .tower-art.spin, .pop { animation: none; } }