/* 도깨비 씨름판 (public/js/secret.js) — 세공방의 「도깨비 문」 칸, 판 안 머리 두루마리 */
.sr-lamp { display: inline-block; width: 10px; height: 13px; margin: 0 5px; vertical-align: -1px; border-radius: 45% 45% 40% 40%;
  background: radial-gradient(circle at 45% 45%, #ffd2a0 0, #e0442a 45%, #6a0c08 100%); box-shadow: 0 0 8px rgba(255,110,60,0.7); position: relative; }
.sr-lamp::before, .sr-lamp::after { content: ''; position: absolute; left: 1px; right: 1px; height: 2px; background: #1a1210; }
.sr-lamp::before { top: -1px; } .sr-lamp::after { bottom: -1px; }

.sr-cube { margin: 2px 0 10px; padding: 6px 8px 4px; border: 1px solid #6d5636; border-left: 4px solid #9a2418;
  background: linear-gradient(90deg, rgba(154,36,24,0.12), rgba(154,36,24,0) 60%); color: var(--ink); }
.sr-cube.can { box-shadow: inset 0 0 0 1px rgba(201,162,79,0.6); background: linear-gradient(90deg, rgba(201,162,79,0.22), rgba(154,36,24,0.05)); }
.sr-cube header { display: flex; align-items: center; gap: 4px; font-family: var(--title); font-size: 15px; color: #6a1a10; }
.sr-cube header .w-hanja { font-size: 12px; opacity: 0.7; }
.sr-diff { margin-left: auto; font-family: var(--body, serif); font-size: 11px; padding: 1px 6px; border: 1px solid var(--c); color: var(--c); border-radius: 2px; background: rgba(255,250,235,0.4); }
.sr-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 5px 0 2px; }
.sr-in { display: inline-flex; align-items: center; gap: 4px; }
.sr-in img { width: 22px; height: 34px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }
.sr-in:last-of-type img { width: 28px; height: 28px; }
.sr-in b { font-size: 12px; font-variant-numeric: tabular-nums; } .sr-in.short b { color: #a0281c; }
.sr-in small { font-size: 11px; color: #5a4a36; }
.sr-row em { font-style: normal; color: #6d5636; }
.sr-out { font-family: var(--title); font-size: 14px; color: #8e2a1a; display: inline-flex; flex-direction: column; line-height: 1.1; }
.sr-out small { font-family: var(--body, serif); font-size: 10px; color: #5a4a36; }
.sr-row button { margin-left: auto; padding: 4px 12px; font-family: var(--title); font-size: 14px; letter-spacing: 1px; background: linear-gradient(#a82a1a, #5a0e08); border: 1px solid #e0a850; color: #ffe8c0; cursor: pointer; }
.sr-row button:disabled { filter: grayscale(0.8) brightness(0.8); cursor: default; }
.sr-doors { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.sr-door { font-size: 11px; padding: 1px 6px; border-left: 3px solid var(--c); background: rgba(40,20,10,0.08); }

#sr-hud { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 330px; z-index: 6; pointer-events: none; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6)); --c: #c43a3a; }
.sr-paper { padding: 5px 12px 4px; background: url("../ui/tex_hanji.png") center / 300px, #e3d3b0; color: var(--ink); border-left: 3px solid var(--c); border-right: 3px solid var(--c); }
.sr-t { text-align: center; font-family: var(--title); font-size: 15px; color: #6a1a10; letter-spacing: 1px; }
.sr-r { display: flex; align-items: center; gap: 6px; margin: 3px 0; font-size: 12px; }
.sr-r > span:last-child { width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.sr-l { font-family: var(--title); color: var(--red, #8e2a22); width: 14px; }
.sr-bar { flex: 1; height: 8px; background: rgba(60,40,20,0.25); border: 1px solid rgba(60,40,20,0.5); }
.sr-bar i { display: block; height: 100%; background: linear-gradient(#b8402a, #6a140c); transition: width 0.4s; }
.sr-rope { flex: 1; height: 8px; position: relative; background: repeating-linear-gradient(115deg, #3a2a18 0 3px, #2a1e10 3px 6px); border-radius: 4px; }
.sr-rope i { display: block; height: 100%; border-radius: 4px; background: repeating-linear-gradient(115deg, #c8a868 0 3px, #9a7c40 3px 6px); }
.sr-rope b { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: radial-gradient(#fff4c0, #ff7a2a 55%, rgba(255,60,20,0)); box-shadow: 0 0 10px #ff6a2a; animation: sr-spark 0.25s infinite alternate; }
@keyframes sr-spark { from { transform: scale(0.8); } to { transform: scale(1.25); } }
.sr-st { text-align: center; font-size: 12px; color: #4a3a2a; min-height: 15px; }
#sr-hud.urgent .sr-st, #sr-hud.urgent #sr-time { color: #a0201a; font-weight: 700; }
body.phone #sr-hud { top: auto; bottom: 262px; width: 210px; }   /* 휴대폰: 위쪽은 체력·기력 구슬과 허리띠가 차지한다 → 말하기 칸 바로 위 */
body.phone .sr-st { display: none; }
body.phone .sr-r { margin: 1px 0; font-size: 11px; }
body.phone .sr-paper { padding: 3px 8px 2px; }
body.phone .sr-t { font-size: 13px; }

/* 울돌목 원혼 물길 (같은 틀, 밤바다 빛): 뱃초롱은 푸른 넋불, 가장자리는 검푸른 물빛 */
.sr-cube.ud { border-left-color: #2a5a74; background: linear-gradient(90deg, rgba(42,90,116,0.14), rgba(42,90,116,0) 60%); }
.sr-cube.ud.can { background: linear-gradient(90deg, rgba(120,170,200,0.24), rgba(42,90,116,0.05)); }
.sr-cube.ud header { color: #1e3a4e; }
.sr-cube.ud .sr-lamp, #sr-hud.ud .sr-lamp { background: radial-gradient(circle at 45% 45%, #f0fbff 0, #8cc4e8 45%, #1a3a52 100%); box-shadow: 0 0 8px rgba(140,200,255,0.75); }
.sr-cube.ud .sr-out { color: #1e4a66; }
.sr-cube.ud .sr-row button { background: linear-gradient(#2e6a8a, #0e2a3c); border-color: #a8cce0; color: #e8f6ff; }
#sr-hud.ud .sr-t { color: #1e3a4e; }
#sr-hud.ud .sr-bar i { background: linear-gradient(#3a7a9a, #12344a); }
#sr-hud .sr-mast .sr-bar i { background: linear-gradient(#c8d8e8, #5a7a96); }
#sr-hud.ud .sr-l { color: #1e4a66; }