/* 볼링 게임 (2026-10-06) — act/bowling.php 전용 */
#bw-wrap { width: 100%; max-width: 460px; margin: 0 auto 6px; box-sizing: border-box; }

#bw-hudbar {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
    margin: 0 0 8px; padding: 0;
}
#bw-hudbar > div {
    text-align: center; padding: 7px 3px; border-radius: 11px;
    background: linear-gradient(180deg, #16263a, #101d2e);
    border: 1px solid rgba(255, 255, 255, .09);
}
#bw-hudbar small { display: block; font-size: 10px; letter-spacing: .06em; color: #93b2cc; font-weight: 700; }
#bw-hudbar strong { display: block; margin-top: 2px; font-size: 18px; font-weight: 900; color: #f8fafc; font-variant-numeric: tabular-nums; }
#bw-hudbar > div:nth-child(1) strong { color: #fde68a; }

#bw-stage {
    position: relative; border-radius: 18px; overflow: hidden;
    background: #0d1b2a; box-shadow: 0 14px 36px rgba(10, 25, 45, .3);
    border: 1px solid rgba(255, 255, 255, .08);
}
#bw-canvas {
    display: block; width: 100%; aspect-ratio: 400 / 560;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent; cursor: pointer;
}
#bw-sound {
    position: absolute; z-index: 6; top: 9px; right: 9px;
    width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(8, 20, 34, .72); color: #e2e8f0; font-size: 15px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
#bw-sound.off { opacity: .55; }

#bw-hint {
    position: absolute; z-index: 4; left: 50%; top: 10px; transform: translateX(-50%);
    max-width: calc(100% - 24px); padding: 7px 13px; border-radius: 20px; box-sizing: border-box;
    background: rgba(8, 20, 34, .8); border: 1px solid rgba(255, 255, 255, .12);
    color: #dbeafe; font-size: 12.5px; font-weight: 700; text-align: center; line-height: 1.4; max-width: calc(100% - 64px);
    pointer-events: none; word-break: keep-all;
}
#bw-action {
    position: absolute; z-index: 5; left: 50%; bottom: 14px; transform: translateX(-50%);
    min-width: 168px; padding: 12px 24px; border: 0; border-radius: 26px; cursor: pointer;
    background: linear-gradient(135deg, #fbbf24, #f97316); color: #2b1600;
    font-size: 15px; font-weight: 900; box-shadow: 0 8px 20px rgba(249, 115, 22, .32);
}
#bw-action:active { transform: translateX(-50%) translateY(1px); }

.bw-panel {
    position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; padding: 26px 22px; box-sizing: border-box;
    background: linear-gradient(160deg, rgba(10, 24, 40, .95), rgba(14, 35, 56, .97));
}
.bw-panel .t { font-size: 27px; font-weight: 900; color: #fff; letter-spacing: -.03em; }
.bw-panel .d { margin: 10px 0 16px; font-size: 13.5px; line-height: 1.75; color: #cbd5e1; word-break: keep-all; }
.bw-panel .d b { color: #fde68a; }
.bw-panel button {
    min-width: 190px; padding: 13px 26px; border: 0; border-radius: 26px; cursor: pointer;
    background: linear-gradient(135deg, #fbbf24, #f97316); color: #2b1600; font-size: 15.5px; font-weight: 900;
    box-shadow: 0 8px 20px rgba(249, 115, 22, .32);
}
#bw-rscore { font-size: 46px; font-weight: 900; color: #fde68a; line-height: 1; }
#bw-rtier { margin-top: 6px; font-size: 19px; font-weight: 900; color: #fff; }
#bw-rstat { margin: 4px 0 14px; font-size: 12px; color: #93b2cc; font-weight: 700; }

/* 전광판 */
#bw-board {
    display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px;
    margin: 9px 0 0; padding: 0;
}
.bw-fr {
    border: 1px solid #d8dee6; border-radius: 6px; overflow: hidden; background: #fff;
    display: flex; flex-direction: column; min-width: 0;
}
.bw-fr.on { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, .22); }
.bw-fr > b { font-size: 9px; color: #94a3b8; background: #f1f5f9; font-weight: 700; line-height: 1.6; }
.bw-mk { display: flex; border-top: 1px solid #e2e8f0; min-height: 17px; }
.bw-mk i {
    flex: 1; font-style: normal; font-size: 11px; font-weight: 800; color: #0f172a;
    border-left: 1px solid #e2e8f0; line-height: 17px; min-width: 0;
}
.bw-mk i:first-child { border-left: 0; }
.bw-fr > u {
    text-decoration: none; font-size: 12px; font-weight: 900; color: #1e293b;
    border-top: 1px solid #e2e8f0; line-height: 1.6; font-variant-numeric: tabular-nums;
}

#bw-meta {
    display: flex; justify-content: space-between; margin: 8px 2px 0;
    font-size: 11.5px; color: #64748b; font-weight: 700;
}

/* 규칙 안내 — 전역 .answer_shadow 가 가운데 정렬·큰 글씨라 여기서 눌러 준다 */
.bw-guide { text-align: left; line-height: 1.7; margin-top: 16px; }
.bw-guide h3 { margin: 0 0 7px; font-size: 1rem; font-weight: 900; }
.bw-guide p { margin: 0 0 8px; font-size: .9rem; }
.bw-guide ul { margin: 4px 0 9px 18px; padding: 0; font-size: .9rem; }
.bw-guide li { margin: 3px 0; }
.bw-guide small { display: block; font-size: .8rem; color: #64748b; }
.bw-guide b { color: #b45309; }

@media (max-width: 420px) {
    #bw-hudbar strong { font-size: 16px; }
    .bw-panel .t { font-size: 23px; }
    .bw-panel .d { font-size: 12.5px; }
    #bw-rscore { font-size: 40px; }
    .bw-mk i { font-size: 10px; }
    .bw-fr > u { font-size: 11px; }
    #bw-hint { font-size: 11.5px; }
}

/* 2026-10: maple / charcoal / brass club interior. */
#bw-wrap{max-width:500px;margin:22px auto 10px;padding:18px;background:#131c21;color:#eee9dc;border:1px solid #3c4547;border-radius:20px;box-shadow:0 20px 55px #0c151c38;text-align:center}
#bw-wrap *{box-sizing:border-box}#bw-wrap button{font-family:inherit;touch-action:manipulation;cursor:pointer}#bw-wrap button:focus-visible{outline:3px solid #f0c681;outline-offset:3px}#bw-wrap [hidden]{display:none!important}
.bw-masthead{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:0 2px 17px;gap:10px}.bw-masthead span{font-size:9px;letter-spacing:2px;color:#a2adb0}.bw-masthead h2{font-size:19px;margin:5px 0 0;font-weight:700;letter-spacing:-.5px;color:#f3eee1}.bw-masthead h2 b{margin-left:6px;color:#ddbd86;font-family:monospace}.bw-masthead .bw-live{font-size:8px;letter-spacing:1px;border:1px solid #586055;padding:7px;border-radius:4px;color:#b8c7b1}
#bw-hudbar{gap:1px;margin:0 0 12px;padding:9px 0;background:linear-gradient(180deg,#243039,#1b262c);border:1px solid #3c484d;border-radius:10px}#bw-hudbar>div{padding:2px 3px;border:0;border-right:1px solid #39474e;background:none;border-radius:0}#bw-hudbar>div:last-child{border:0}#bw-hudbar small{color:#a2b2b9;font-weight:500}#bw-hudbar strong{margin-top:3px;font-size:21px;line-height:1.2;font-weight:700;color:#f4f4e8}#bw-hudbar>div:first-child strong{color:#efca89}
#bw-stage{border-radius:10px;background:#11171c;box-shadow:inset 0 0 0 1px #536161;isolation:isolate}
#bw-sound,#bw-pause-btn{position:absolute;z-index:10;top:10px;height:34px;border-radius:6px;border:1px solid #ffffff26;background:#121c24d9;color:#e6e4d9;font-size:10px;padding:0 9px;cursor:pointer}#bw-sound{right:10px;width:auto}#bw-pause-btn{left:10px;width:34px;font-size:14px}#bw-sound.off{color:#9fadb2;opacity:1}
#bw-hint{left:12px;right:12px;top:auto;bottom:76px;transform:none;max-width:100%;padding:7px 9px;border-radius:6px;background:#131e25e6;border:1px solid #ffffff18;color:#e4e5db;font-size:11px;font-weight:500;line-height:1.5}
#bw-action,.bw-panel button{border:1px solid #f5d496;border-radius:7px;background:linear-gradient(180deg,#edcd94,#be9255);color:#252018;box-shadow:0 5px 18px #0005,inset 0 1px #fff5;font-weight:800}#bw-action{bottom:19px;min-width:180px;padding:13px 25px;font-size:14px}
.bw-panel{padding:26px 20px;background:linear-gradient(180deg,#10171d1f,#10171df0 36%,#10171df2 70%,#10171d50)}.bw-overline{font-size:10px;letter-spacing:2.5px;color:#d3b47d;margin-bottom:14px}.bw-panel .t{font-size:35px;line-height:1.3;font-weight:800;color:#f9f4e9;letter-spacing:-1.5px}.bw-panel .d{margin:15px 0 23px;font-size:13px;line-height:1.85;color:#b8c1c3}.bw-panel .d b{color:#eed19d}#bw-rscore{font-size:54px;color:#e9c78b}#bw-rtier{margin-top:12px;font-size:21px}#bw-rstat{margin:3px 0 20px;color:#a8b8bd}
.bw-equipment{padding:15px 0;border-bottom:1px solid #334047;text-align:left}.bw-equipment>span{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.6px;color:#ccb489}.bw-equipment small{font-size:10px;letter-spacing:0;color:#9aa9af}.bw-equipment>div{display:flex;gap:7px;margin-top:9px}.bw-equipment button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:7px 4px;border:1px solid #3a464c;background:#202c32;border-radius:7px;color:#b3c0c5;font-size:11px}.bw-equipment button[aria-pressed=true]{border-color:#c6a66e;color:#f0d9b1;background:#30302c}.bw-equipment i{display:block;width:20px;height:20px;border-radius:50%;box-shadow:inset -3px -4px 5px #0009,0 2px 3px #0006}.bw-blue{background:radial-gradient(circle at 30% 25%,#b9d3e8,#2e6996 30%,#101b39 75%)}.bw-red{background:radial-gradient(circle at 30% 25%,#e7b1a7,#a72947 35%,#310819 75%)}.bw-black{background:radial-gradient(circle at 30% 25%,#c6c6b5,#4e5b5b 35%,#0c161b 75%)}
.bw-board-label{display:flex;justify-content:space-between;margin:15px 0 8px;font-size:9px;letter-spacing:1px;color:#c0aa83}.bw-board-label span{letter-spacing:0;color:#9dabb0;font-size:10px}#bw-board{grid-template-columns:repeat(10,minmax(0,1fr));margin:0}.bw-fr{border-color:#3b4b50;border-radius:4px;background:#0e191f}.bw-fr.on{border-color:#d9b578;box-shadow:0 0 0 1px #d9b57840}.bw-fr>b{color:#98abae;background:#26353d;font-weight:600}.bw-mk,.bw-mk i,.bw-fr>u{border-color:#33464d}.bw-mk i{font-weight:600;color:#f3dfb7}.bw-fr>u{font-weight:700;color:#e1e8de}#bw-meta{gap:8px;margin:9px 0 0;font-size:10px;color:#92a4ad}
.quiz_doc.bw-description,.answer_shadow.bw-guide{font-size:14px!important;text-align:left!important;line-height:1.8!important}.bw-description{max-width:700px;margin:16px auto}.bw-guide p,.bw-guide ul{font-size:14px}.bw-guide b{color:#89622d}
#bw-wrap>#bw-hint{position:static;transform:none;margin:8px 0 0;max-width:100%;font-size:11px;padding:7px 8px;min-height:31px}
@media(max-width:420px){#bw-wrap{padding:10px;border-radius:15px}.bw-masthead{padding:3px 2px 12px}.bw-masthead h2{font-size:17px}#bw-hudbar{padding:7px 0}#bw-hudbar strong{font-size:18px}.bw-panel .t{font-size:29px}.bw-panel .d{font-size:12px;margin:12px 0 18px}#bw-hint{font-size:10px;bottom:70px}#bw-action{bottom:15px;min-width:165px;padding:12px 20px}.bw-equipment{padding:12px 0}}
@media(max-height:500px) and (orientation:landscape){#bw-wrap{max-width:450px}#bw-stage{max-width:250px;margin:0 auto}.bw-panel .t{font-size:24px}.bw-panel .d{font-size:11px;margin:10px 0}.bw-overline{font-size:8px;margin-bottom:6px}.bw-panel button{min-width:160px;font-size:13px;padding:10px}.bw-panel{padding:12px}#bw-hint{font-size:9px;padding:5px;bottom:60px}#bw-action{font-size:12px;min-width:150px;padding:10px;bottom:13px}}