.puzzle-page{
    width:min(1360px,calc(100% - 40px));
    max-width:1360px;
    margin:28px auto 58px;
    padding:0;
    color:#24364b;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;
}
.puzzle-topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:16px}
.puzzle-kicker{font-size:11px;letter-spacing:.16em;font-weight:900;color:#155eef}
.puzzle-title-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.puzzle-title-line h2{margin:4px 0;font-size:29px;color:#0b2348;font-weight:900}
.puzzle-title-line h2 small{font-size:.55em;color:#6b7f96;font-weight:750}
.puzzle-topbar p{margin:0;color:#71839b;font-size:13px}
.puzzle-mode-badge{display:inline-flex;padding:5px 10px;border:1px solid #b5cbed;border-radius:999px;background:#eaf2ff;color:#155eef;font-size:11px;font-weight:850}
.puzzle-user-actions{display:flex;align-items:center;gap:8px}
.puzzle-login-user{font-size:12px;font-weight:750;color:#71839b;white-space:nowrap}
.puzzle-action-icon{width:35px;height:35px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;text-decoration:none!important;font-size:21px;font-weight:900}
.puzzle-home{background:#eaf2ff;color:#155eef;border:1px solid #b5cbed}

.puzzle-history{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
.puzzle-stat-card{background:linear-gradient(135deg,#fff,#f3f8ff);border:1px solid #bfd0e4;border-radius:14px;padding:13px 15px;box-shadow:0 5px 18px rgba(32,73,120,.06)}
.puzzle-stat-title{display:block;font-size:12px;font-weight:850;color:#526b86;margin-bottom:6px}
.puzzle-stat-pair{display:flex;flex-direction:column;gap:3px}
.puzzle-stat-pair span{font-size:12px;color:#405a75;line-height:1.45}
.puzzle-stat-pair i{font-style:normal;display:inline-block;min-width:42px;color:#8a9aae;font-size:10.5px}
.puzzle-stat-card.points .puzzle-stat-pair span{color:#155eef;font-weight:750}
.puzzle-content-ad{margin:18px 0 20px}

.puzzle-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:6px;background:#eaf1f8;border:1px solid #c8d6e8;border-radius:14px;margin-bottom:13px}
.puzzle-level{border:1px solid transparent;border-radius:10px;background:transparent;color:#61758c;padding:10px 12px;font-size:14px;font-weight:900;cursor:pointer}
.puzzle-level small{display:block;margin-top:2px;font-size:10px;font-weight:650;color:#8d9caf}
.puzzle-level.is-active{background:#fff;color:#155eef;border-color:#bfd2eb;box-shadow:0 3px 12px rgba(34,79,130,.10)}

.puzzle-shell{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:14px;align-items:start}
.puzzle-game-column,.puzzle-side-panel>div{border:1px solid #b9cde5;border-radius:16px;background:linear-gradient(135deg,#f9fcff,#eef5ff 65%,#f8fbff);box-shadow:0 7px 22px rgba(35,76,122,.06)}
.puzzle-game-column{padding:16px}
.puzzle-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.puzzle-toolbar>div:first-child{display:flex;align-items:center;gap:10px}
.puzzle-toolbar strong{font-size:16px;color:#263f5b}
.puzzle-toolbar span{font-size:11px;color:#71859c}
.puzzle-toolbar-actions{display:flex;gap:7px}

.puzzle-primary-btn,.puzzle-secondary-btn{min-height:38px;border-radius:10px;padding:0 14px;font-size:12px;font-weight:850;cursor:pointer}
.puzzle-primary-btn{background:#155eef;border:1px solid #0b4bd4;color:#fff}
.puzzle-secondary-btn{background:#f1f5fa;border:1px solid #b9c9db;color:#506780}

.puzzle-board{width:100%;aspect-ratio:1/1;display:grid;gap:4px;padding:7px;border:1px solid #afc4dd;border-radius:15px;background:#dbe9f9}
.puzzle-cell{position:relative;min-width:0;border-radius:7px;overflow:hidden}
.puzzle-cell.is-block{
    border:1px solid #0f4fb7;
    background:
      radial-gradient(circle at 28% 22%,rgba(255,255,255,.45) 0 3%,transparent 4%),
      linear-gradient(145deg,#0b2d72,#0b5bd3 48%,#061d50);
    box-shadow:inset 0 0 9px rgba(90,166,255,.35),0 1px 3px rgba(5,34,82,.18);
    animation:blockShimmer 3.8s ease-in-out infinite alternate;
}
@keyframes blockShimmer{
    from{filter:brightness(.87) saturate(1.05)}
    to{filter:brightness(1.13) saturate(1.25)}
}
.puzzle-cell.is-answer{
    border:1px solid #b7c9df;
    background:#fff;
    cursor:pointer;
    color:#19395f;
    transition:.12s ease;
}
.puzzle-cell.is-answer:hover{border-color:#6b9cd4;background:#f4f8ff}
.puzzle-cell.is-selected{outline:3px solid rgba(21,94,239,.22);border-color:#155eef!important;background:#eef5ff!important}
.puzzle-cell.is-wrong-cell{background:#fff0f0!important;border-color:#d69299!important}
.puzzle-cell.is-correct-cell{background:#eef8f2!important;border-color:#9fcdb3!important}
.puzzle-number{position:absolute;left:4px;top:2px;font-size:8px;font-weight:900;color:#9aa8b9;opacity:.75;pointer-events:none}
.puzzle-letter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(11px,1.65vw,20px);font-weight:900;color:#17365f}

.puzzle-message{min-height:30px;margin-top:10px;padding:7px 10px;border-radius:9px;color:#71839a;font-size:12px;font-weight:700}
.puzzle-message.is-success{background:#edf8f2;border:1px solid #b5dbc5;color:#39735a}
.puzzle-message.is-error{background:#fff0f0;border:1px solid #e0b9bd;color:#98565b}
.puzzle-message.is-warn{background:#fff8e8;border:1px solid #ead4a2;color:#84682d}

.puzzle-side-panel{display:grid;gap:12px}
.puzzle-keyboard-card,.puzzle-clues-card{padding:13px}
.puzzle-side-title{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.puzzle-side-title strong{font-size:14px;color:#29445f}
.puzzle-side-title span{font-size:10px;color:#8091a5}
.hangul-section{margin-bottom:11px}
.hangul-section>b{display:block;margin-bottom:5px;font-size:10px;color:#69809a}
.hangul-keyboard{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.hangul-keyboard button,.hangul-control-row button{min-height:34px;border:1px solid #b8cbe1;border-radius:8px;background:#fff;color:#264b75;font-size:14px;font-weight:850;cursor:pointer}
.hangul-keyboard button:hover{background:#eaf2ff;border-color:#8cafe0;color:#155eef}
.hangul-control-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.compose-preview{margin-top:8px;padding:7px 8px;border-radius:8px;background:#f4f8fd;color:#71869d;font-size:10px}

.puzzle-clues{margin:0;padding:0;list-style:none;display:grid;gap:5px;max-height:220px;overflow:auto}
.puzzle-clues li{margin:0}
.puzzle-clues button{width:100%;display:grid;grid-template-columns:24px 1fr;gap:7px;text-align:left;border:1px solid #d0ddea;border-radius:8px;background:#fff;padding:7px 8px;color:#506982;cursor:pointer}
.puzzle-clues button:hover{background:#f3f8ff;border-color:#a7c1e2}
.puzzle-clues b{color:#155eef;font-size:11px}
.puzzle-clues span{font-size:10.5px;line-height:1.45}

.puzzle-celebration{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;background:rgba(3,16,45,.86);overflow:hidden}
.puzzle-celebration.is-active{display:flex}
.celebration-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(13,1fr);grid-auto-rows:1fr;gap:4px;padding:6px}
.celebration-grid span{
    background:linear-gradient(145deg,#06255f,#0a5ee9,#061d4d);
    border:1px solid #2778e5;
    border-radius:7px;
    opacity:.16;
    animation:celebrateCell var(--dur,.4s) ease-in-out infinite alternate;
    animation-delay:var(--delay,0s);
    box-shadow:inset 0 0 10px rgba(96,176,255,.55),0 0 9px rgba(14,99,235,.24)
}
@keyframes celebrateCell{
    0%{opacity:.12;transform:scale(.82) rotate(-1deg);filter:brightness(.65)}
    100%{opacity:1;transform:scale(1.04) rotate(1deg);filter:brightness(1.6)}
}
.celebration-text{position:relative;z-index:2;font-size:clamp(46px,9vw,116px);font-weight:1000;letter-spacing:.05em;color:#fff;text-shadow:0 0 18px #1d75ff,0 0 42px #124eac;animation:celebrateText .42s ease-in-out infinite alternate}
@keyframes celebrateText{from{transform:scale(.9) rotate(-1deg)}to{transform:scale(1.07) rotate(1deg)}}

.puzzle-modal{position:fixed;inset:0;z-index:100000;background:rgba(8,22,43,.56);display:flex;align-items:center;justify-content:center;padding:20px}
.puzzle-modal.is-hidden{display:none}
.puzzle-modal-card{width:min(420px,100%);border:1px solid #bad0ea;border-radius:20px;background:#fff;padding:25px;text-align:center;box-shadow:0 22px 60px rgba(18,48,82,.24)}
.puzzle-modal-kicker{font-size:10px;letter-spacing:.13em;font-weight:900;color:#155eef}
.puzzle-modal-card h3{margin:7px 0;font-size:24px;color:#17365f}
.puzzle-modal-card p{margin:0 0 17px;color:#71839a;font-size:13px}
.puzzle-modal-card>div{display:flex;justify-content:center;gap:7px}

/* Dark Mode */
html.bp-dark .puzzle-page{color:#dce6f2}
html.bp-dark .puzzle-title-line h2{color:#f1f5fc}
html.bp-dark .puzzle-title-line h2 small,
html.bp-dark .puzzle-topbar p,
html.bp-dark .puzzle-login-user{color:#97a6b9}
html.bp-dark .puzzle-stat-card,
html.bp-dark .puzzle-game-column,
html.bp-dark .puzzle-side-panel>div{background:#151f2e;border-color:#36506d;box-shadow:none}
html.bp-dark .puzzle-stat-title{color:#afbed0}
html.bp-dark .puzzle-stat-pair span{color:#d5e1ed}
html.bp-dark .puzzle-stat-pair i{color:#8195aa}
html.bp-dark .puzzle-stat-card.points .puzzle-stat-pair span{color:#9fc0ff}
html.bp-dark .puzzle-levels{background:#111d2c;border-color:#31465f}
html.bp-dark .puzzle-level{color:#a7b8ca}
html.bp-dark .puzzle-level.is-active{background:#1b3048;color:#9fc0ff;border-color:#42658d;box-shadow:none}
html.bp-dark .puzzle-toolbar strong,
html.bp-dark .puzzle-side-title strong{color:#e2ebf5}
html.bp-dark .puzzle-cell.is-answer{background:#101a28;border-color:#405570;color:#e6eef8}
html.bp-dark .puzzle-cell.is-selected{background:#172b46!important;border-color:#6299de!important}
html.bp-dark .puzzle-letter{color:#ecf3fb}
html.bp-dark .hangul-keyboard button,
html.bp-dark .hangul-control-row button,
html.bp-dark .puzzle-clues button{background:#111c2a;border-color:#36506d;color:#d6e2ef}
html.bp-dark .hangul-keyboard button:hover,
html.bp-dark .puzzle-clues button:hover{background:#192f48;border-color:#5689bd}
html.bp-dark .compose-preview{background:#101a27;color:#93a6ba}
html.bp-dark .puzzle-modal-card{background:#142033;border-color:#3b5877}
html.bp-dark .puzzle-modal-card h3{color:#eef5fc}
html.bp-dark .puzzle-modal-card p{color:#9eafc1}

@media(max-width:779px){
    .puzzle-shell{grid-template-columns:1fr}
    .puzzle-side-panel{grid-template-columns:1fr 1fr}
    .puzzle-keyboard-card{grid-column:1/-1}
}
@media(max-width:720px){
    .puzzle-page{width:calc(100% - 24px);max-width:none;margin-top:16px}
    .puzzle-topbar{align-items:flex-start}
    .puzzle-topbar p{display:none}
    .puzzle-history{grid-template-columns:1fr}
    .puzzle-levels{grid-template-columns:1fr}
    .puzzle-shell{display:block}
    .puzzle-side-panel{display:grid;grid-template-columns:1fr;margin-top:12px}
    .puzzle-board{gap:2px;padding:4px}
    .puzzle-cell{border-radius:5px}
    .puzzle-number{font-size:6px;left:2px;top:1px}
    .puzzle-letter{font-size:clamp(10px,3.8vw,16px)}
    .hangul-keyboard{grid-template-columns:repeat(5,1fr)}
}


/* =========================================================
   v2 dense-layout override
   ========================================================= */
.puzzle-shell{
    grid-template-columns:minmax(0,760px) 360px!important;
    gap:18px!important;
    align-items:start!important;
}
.puzzle-left-column{
    min-width:0;
}
.puzzle-game-column{
    padding:14px!important;
}
.puzzle-board{
    width:min(100%,620px)!important;
    margin:0 auto!important;
    aspect-ratio:1/1!important;
}
.puzzle-side-panel{
    display:block!important;
}
.puzzle-keyboard-card{
    padding:17px!important;
    position:sticky;
    top:84px;
}
.puzzle-side-title strong{
    font-size:16px!important;
}
.puzzle-side-title span{
    font-size:11px!important;
    line-height:1.5;
}
.hangul-section{
    margin-bottom:16px!important;
}
.hangul-section>b{
    font-size:12px!important;
    margin-bottom:8px!important;
}
.hangul-keyboard{
    grid-template-columns:repeat(5,1fr)!important;
    gap:7px!important;
}
.hangul-keyboard button{
    min-height:46px!important;
    border-radius:10px!important;
    font-size:18px!important;
}
.hangul-control-row{
    gap:8px!important;
    margin-top:12px!important;
}
.hangul-control-row button{
    min-height:44px!important;
    font-size:13px!important;
}
.compose-preview{
    min-height:38px;
    display:flex;
    align-items:center;
    margin-top:11px!important;
    padding:8px 10px!important;
    font-size:11px!important;
}
.puzzle-clues-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:13px;
}
.puzzle-clues-card{
    padding:13px!important;
    border:1px solid #b9cde5;
    border-radius:14px;
    background:linear-gradient(135deg,#f9fcff,#eef5ff 65%,#f8fbff);
    box-shadow:0 5px 16px rgba(35,76,122,.045);
}
.puzzle-clues{
    max-height:270px!important;
}
.puzzle-clues button{
    grid-template-columns:24px 1fr!important;
    padding:8px 9px!important;
}
.puzzle-clues span{
    font-size:11px!important;
}
html.bp-dark .puzzle-clues-card{
    background:#151f2e!important;
    border-color:#36506d!important;
    box-shadow:none!important;
}

@media(max-width:1050px){
    .puzzle-shell{
        grid-template-columns:minmax(0,1fr) 330px!important;
    }
    .puzzle-board{
        width:min(100%,560px)!important;
    }
}
@media(max-width:779px){
    .puzzle-shell{
        display:block!important;
    }
    .puzzle-side-panel{
        margin-top:14px!important;
    }
    .puzzle-keyboard-card{
        position:static!important;
    }
    .puzzle-board{
        width:min(100%,600px)!important;
    }
}
@media(max-width:720px){
    .puzzle-clues-row{
        grid-template-columns:1fr!important;
    }
    .hangul-keyboard button{
        min-height:42px!important;
        font-size:17px!important;
    }
}


/* =========================================================
   v3 레이아웃
   초급: 퍼즐 50 / 자판 50
   중급: 퍼즐 54 / 자판 46
   고급: 퍼즐 58 / 자판 42
   ========================================================= */

.puzzle-page{
    --puzzle-left:50%;
    --puzzle-right:50%;
    --board-size:520px;
    --key-font:18px;
    --key-height:43px;
    --number-font:18px;
    --clue-font:10.5px;
}

.puzzle-page.level-beginner{
    --puzzle-left:50%;
    --puzzle-right:50%;
    --board-size:520px;
    --key-font:18px;
    --key-height:43px;
    --number-font:18px;
    --clue-font:10.5px;
}

.puzzle-page.level-intermediate{
    --puzzle-left:54%;
    --puzzle-right:46%;
    --board-size:555px;
    --key-font:16px;
    --key-height:39px;
    --number-font:16px;
    --clue-font:10px;
}

.puzzle-page.level-advanced{
    --puzzle-left:58%;
    --puzzle-right:42%;
    --board-size:590px;
    --key-font:14px;
    --key-height:35px;
    --number-font:14px;
    --clue-font:9.5px;
}

/* 퍼즐 + 자판 한 줄 */
.puzzle-shell{
    display:grid!important;
    grid-template-columns:
        minmax(0,var(--puzzle-left))
        minmax(0,var(--puzzle-right))!important;
    gap:12px!important;
    align-items:start!important;
}

.puzzle-left-column{
    min-width:0!important;
}

.puzzle-game-column{
    padding:10px!important;
}

/* 퍼즐판은 해당 영역 안에서 최대한 크게 */
.puzzle-board{
    width:min(100%,var(--board-size))!important;
    max-width:100%!important;
    margin:0 auto!important;
    aspect-ratio:1/1!important;
    gap:3px!important;
    padding:5px!important;
}

/* 번호는 자판 글자와 같은 크기 */
.puzzle-number{
    left:3px!important;
    top:2px!important;
    font-size:var(--number-font)!important;
    line-height:1!important;
    font-weight:900!important;
    opacity:.20!important;
    color:#17365f!important;
    z-index:1!important;
}

.puzzle-letter{
    z-index:2!important;
}

/* 자판 영역은 퍼즐 높이와 비슷하게 */
.puzzle-side-panel{
    display:block!important;
    min-width:0!important;
}

.puzzle-keyboard-card{
    position:static!important;
    padding:12px!important;
    min-height:0!important;
}

.puzzle-side-title{
    margin-bottom:8px!important;
}

.puzzle-side-title strong{
    font-size:14px!important;
}

.puzzle-side-title span{
    font-size:10px!important;
    line-height:1.35!important;
}

.hangul-section{
    margin-bottom:8px!important;
}

.hangul-section>b{
    margin-bottom:5px!important;
    font-size:10.5px!important;
}

.hangul-keyboard{
    grid-template-columns:repeat(5,1fr)!important;
    gap:5px!important;
}

.hangul-keyboard button{
    min-height:var(--key-height)!important;
    height:var(--key-height)!important;
    padding:0!important;
    font-size:var(--key-font)!important;
    border-radius:8px!important;
}

.hangul-control-row{
    gap:5px!important;
    margin-top:7px!important;
}

.hangul-control-row button{
    min-height:36px!important;
    height:36px!important;
    font-size:11px!important;
}

.compose-preview{
    min-height:32px!important;
    margin-top:7px!important;
    padding:6px 8px!important;
    font-size:9.5px!important;
}

/* 가로/세로 열쇠: index 전체 폭의 50% + 50% */
.puzzle-clues-row{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px!important;
    margin-top:10px!important;
}

.puzzle-clues-card{
    min-width:0!important;
    padding:9px 10px!important;
}

.puzzle-clues-card .puzzle-side-title{
    margin-bottom:5px!important;
}

.puzzle-clues-card .puzzle-side-title strong{
    font-size:12px!important;
}

/*
 * 열쇠를 세로로 길게 만들지 않고 박스 안에서 여러 열로 배치.
 * 페이지 자체 스크롤 없이 퍼즐과 열쇠를 한 화면에 최대한 함께 보이게 함.
 */
.puzzle-clues{
    max-height:none!important;
    overflow:visible!important;
    display:block!important;
    column-count:2!important;
    column-gap:8px!important;
}

.puzzle-page.level-advanced .puzzle-clues{
    column-count:3!important;
}

.puzzle-clues li{
    break-inside:avoid!important;
    margin:0 0 3px!important;
}

.puzzle-clues button{
    display:grid!important;
    grid-template-columns:19px 1fr!important;
    gap:4px!important;
    padding:4px 5px!important;
    border-radius:6px!important;
}

.puzzle-clues b{
    font-size:var(--clue-font)!important;
}

.puzzle-clues span{
    font-size:var(--clue-font)!important;
    line-height:1.25!important;
}

/* 상단 요소도 조금 더 압축 */
.puzzle-levels{
    margin-bottom:8px!important;
}
.puzzle-toolbar{
    margin-bottom:8px!important;
}
.puzzle-toolbar strong{
    font-size:14px!important;
}
.puzzle-toolbar-actions .puzzle-primary-btn,
.puzzle-toolbar-actions .puzzle-secondary-btn{
    min-height:34px!important;
    height:34px!important;
    padding:0 11px!important;
    font-size:11px!important;
}
.puzzle-message{
    min-height:24px!important;
    margin-top:5px!important;
    padding:4px 7px!important;
    font-size:10.5px!important;
}

/* 다크모드 번호 */
html.bp-dark .puzzle-number{
    color:#d8e6f7!important;
    opacity:.22!important;
}

@media(max-width:779px){
    .puzzle-shell{
        grid-template-columns:1fr!important;
    }
    .puzzle-board{
        width:min(100%,560px)!important;
    }
    .puzzle-clues-row{
        grid-template-columns:1fr 1fr!important;
    }
}

@media(max-width:720px){
    .puzzle-clues-row{
        grid-template-columns:1fr!important;
    }
    .puzzle-clues{
        column-count:1!important;
    }
    .puzzle-page.level-advanced .puzzle-clues{
        column-count:1!important;
    }
}


/* =========================================================
   v4: clue placement + reveal answer
   ========================================================= */

/* 각 열쇠는 자신의 위 콘텐츠와 같은 50% 컬럼 안에 배치 */
.puzzle-left-column,
.puzzle-side-panel{
    display:flex!important;
    flex-direction:column!important;
    min-width:0!important;
}

.puzzle-clues-card--across,
.puzzle-clues-card--down{
    width:100%!important;
    margin-top:10px!important;
    box-sizing:border-box!important;
}

/* 기존 full-width clue-row는 v4에서 사용하지 않음 */
.puzzle-clues-row{
    display:none!important;
}

/* A/B 모두 동일 높이 감각 */
.puzzle-clues-card--across .puzzle-clues,
.puzzle-clues-card--down .puzzle-clues{
    max-height:250px!important;
    overflow:auto!important;
    column-count:2!important;
    column-gap:8px!important;
}

.puzzle-page.level-advanced .puzzle-clues-card--across .puzzle-clues,
.puzzle-page.level-advanced .puzzle-clues-card--down .puzzle-clues{
    column-count:2!important;
}

/* 정답 보기 버튼 */
.puzzle-reveal-btn{
    min-height:34px;
    height:34px;
    padding:0 11px;
    border:1px solid #9fb7d7;
    border-radius:10px;
    background:#eef4fb;
    color:#3f5f83;
    font-size:11px;
    font-weight:850;
    cursor:pointer;
}
.puzzle-reveal-btn:hover:not(:disabled){
    background:#e2edf9;
    border-color:#7fa3d0;
    color:#2367c4;
}
.puzzle-reveal-btn:disabled{
    cursor:default;
    opacity:.72;
}

/* 공개된 정답 셀 */
.puzzle-cell.is-revealed-cell{
    background:#eaf2ff!important;
    border-color:#79a4dc!important;
}
.puzzle-cell.is-revealed-cell .puzzle-letter{
    color:#155eef!important;
}
.puzzle-message.is-revealed{
    background:#eef5ff;
    border:1px solid #bad0ee;
    color:#456b99;
}

/* 우측 B 열쇠가 키보드 바로 아래 정렬되도록 */
.puzzle-side-panel .puzzle-keyboard-card{
    flex:0 0 auto!important;
}
.puzzle-side-panel .puzzle-clues-card--down{
    flex:1 1 auto!important;
}

/* dark */
html.bp-dark .puzzle-reveal-btn{
    background:#16263a;
    color:#a9c7eb;
    border-color:#405d7e;
}
html.bp-dark .puzzle-cell.is-revealed-cell{
    background:#173154!important;
    border-color:#4f7fb8!important;
}
html.bp-dark .puzzle-cell.is-revealed-cell .puzzle-letter{
    color:#a9ceff!important;
}
html.bp-dark .puzzle-message.is-revealed{
    background:#152944;
    border-color:#3f618c;
    color:#a8c5e9;
}

@media(max-width:779px){
    .puzzle-left-column,
    .puzzle-side-panel{
        display:flex!important;
    }
    .puzzle-clues-card--across .puzzle-clues,
    .puzzle-clues-card--down .puzzle-clues{
        max-height:none!important;
        overflow:visible!important;
    }
}

@media(max-width:720px){
    .puzzle-clues-card--across .puzzle-clues,
    .puzzle-clues-card--down .puzzle-clues{
        column-count:1!important;
    }
}


/* =========================================================
   v5: 정식 크로스워드 규칙 + 새 레이아웃
   ========================================================= */
.puzzle-workspace{
    width:100%;
}

.puzzle-top-workspace{
    display:grid;
    grid-template-columns:minmax(0,56%) minmax(0,44%);
    gap:12px;
    align-items:stretch;
}

.puzzle-game-column{
    padding:10px!important;
}

.puzzle-board{
    width:min(100%,590px)!important;
    margin:0 auto!important;
}

/* 오른쪽: 가로/세로 열쇠 위아래 */
.puzzle-clues-stack{
    min-width:0;
    display:grid;
    grid-template-rows:1fr 1fr;
    gap:10px;
}

.puzzle-clues-card{
    min-width:0;
    padding:10px!important;
    border:1px solid #b9cde5;
    border-radius:14px;
    background:linear-gradient(135deg,#f9fcff,#eef5ff 65%,#f8fbff);
    box-shadow:0 5px 16px rgba(35,76,122,.045);
}

.puzzle-clues{
    max-height:260px!important;
    overflow:auto!important;
    column-count:1!important;
}

.puzzle-clues button{
    padding:6px 7px!important;
    grid-template-columns:22px 1fr!important;
    transition:.12s ease;
}

.puzzle-clues button.is-active{
    border-color:#79a6df!important;
    background:#eaf2ff!important;
    box-shadow:0 0 0 2px rgba(21,94,239,.08);
}

.puzzle-clues button.is-active b,
.puzzle-clues button.is-active span{
    color:#155eef!important;
}

/* 현재 선택된 열쇠에 속하는 퍼즐 셀 */
.puzzle-cell.is-word-active:not(.is-selected){
    background:#f4f8ff!important;
    border-color:#8fb0db!important;
}

/* 자판은 아래에서 index 가로폭 100% */
.puzzle-keyboard-card--full{
    width:100%;
    box-sizing:border-box;
    margin-top:10px;
    padding:12px 14px!important;
    border:1px solid #b9cde5;
    border-radius:14px;
    background:linear-gradient(135deg,#f9fcff,#eef5ff 65%,#f8fbff);
    box-shadow:0 5px 16px rgba(35,76,122,.045);
}

.puzzle-keyboard-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:8px;
}

.puzzle-keyboard-heading .puzzle-side-title{
    margin:0!important;
}

.puzzle-keyboard-heading .compose-preview{
    width:auto!important;
    min-width:210px;
    margin:0!important;
}

.puzzle-keyboard-wide{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.puzzle-keyboard-wide .hangul-section{
    margin:0!important;
}

.puzzle-keyboard-wide .hangul-keyboard{
    gap:5px!important;
}

/* 자음 19개: 넓은 키보드 느낌 */
.puzzle-keyboard-wide .consonants{
    grid-template-columns:repeat(10,1fr)!important;
}

/* 모음 21개 */
.puzzle-keyboard-wide .vowels{
    grid-template-columns:repeat(11,1fr)!important;
}

.puzzle-keyboard-wide .hangul-keyboard button{
    min-height:40px!important;
    height:40px!important;
    font-size:16px!important;
}

.puzzle-keyboard-card--full .hangul-control-row{
    width:100%;
    margin-top:8px!important;
    grid-template-columns:1fr 1fr!important;
}

.puzzle-keyboard-card--full .hangul-control-row button{
    min-height:38px!important;
    height:38px!important;
}

/* 유효한 퍼즐은 억지로 80%를 채우지 않음 */
.puzzle-cell.is-block{
    opacity:1;
}

/* Dark mode */
html.bp-dark .puzzle-clues-card,
html.bp-dark .puzzle-keyboard-card--full{
    background:#151f2e!important;
    border-color:#36506d!important;
    box-shadow:none!important;
}
html.bp-dark .puzzle-clues button.is-active{
    background:#18304e!important;
    border-color:#527cac!important;
}
html.bp-dark .puzzle-clues button.is-active b,
html.bp-dark .puzzle-clues button.is-active span{
    color:#a8cdff!important;
}
html.bp-dark .puzzle-cell.is-word-active:not(.is-selected){
    background:#152b45!important;
    border-color:#4d709b!important;
}

@media(max-width:779px){
    .puzzle-top-workspace{
        grid-template-columns:1fr;
    }
    .puzzle-clues-stack{
        grid-template-columns:1fr 1fr;
        grid-template-rows:auto;
    }
    .puzzle-keyboard-wide{
        grid-template-columns:1fr;
    }
}

@media(max-width:720px){
    .puzzle-clues-stack{
        grid-template-columns:1fr;
    }
    .puzzle-keyboard-heading{
        align-items:flex-start;
        flex-direction:column;
    }
    .puzzle-keyboard-heading .compose-preview{
        min-width:0;
        width:100%!important;
    }
    .puzzle-keyboard-wide .consonants,
    .puzzle-keyboard-wide .vowels{
        grid-template-columns:repeat(5,1fr)!important;
    }
}



/* ===== v6 ===== */
.puzzle-top-workspace{
 grid-template-columns:minmax(0,40%) minmax(0,60%)!important;
 gap:12px!important;
 align-items:stretch!important;
}
.puzzle-game-column{min-width:0!important;padding:9px!important}
.puzzle-board{
 width:100%!important;max-width:none!important;margin:0!important;
 aspect-ratio:1/1!important;gap:3px!important;padding:5px!important;
}
.puzzle-page.level-beginner .puzzle-letter{font-size:clamp(14px,1.55vw,20px)!important}
.puzzle-page.level-intermediate .puzzle-letter{font-size:clamp(12px,1.30vw,17px)!important}
.puzzle-page.level-advanced .puzzle-letter{font-size:clamp(10px,1.05vw,14px)!important}
.puzzle-page .puzzle-number{font-size:12px!important}

.puzzle-clues-stack{
 display:grid!important;grid-template-rows:1fr 1fr!important;
 gap:10px!important;min-height:0!important;
}
.puzzle-clues-card{min-height:0!important;overflow:hidden!important;padding:11px 12px!important}
.puzzle-clues-card .puzzle-side-title strong{font-size:16px!important}
.puzzle-clues-card .puzzle-side-title span{font-size:11px!important}
.puzzle-clues{
 column-count:1!important;max-height:205px!important;
 overflow-y:auto!important;overflow-x:hidden!important;
 padding-right:5px!important;scrollbar-width:thin;
}
.puzzle-clues li{margin-bottom:5px!important}
.puzzle-clues button{padding:7px 8px!important;grid-template-columns:25px 1fr!important}
.puzzle-clues b,.puzzle-clues span{font-size:12.5px!important}
.puzzle-clues span{line-height:1.4!important}

.puzzle-page.theme-blue{--b1:#061d50;--b2:#0b5bd3;--b3:#0a2f79;--bb:#0f4fb7;--bg:rgba(90,166,255,.38)}
.puzzle-page.theme-purple{--b1:#25054f;--b2:#6c20c9;--b3:#3b0a78;--bb:#6330a9;--bg:rgba(177,101,255,.40)}
.puzzle-page.theme-green{--b1:#062f24;--b2:#0a7e56;--b3:#07513b;--bb:#177253;--bg:rgba(79,216,166,.36)}
.puzzle-page.theme-orange{--b1:#572100;--b2:#c85b06;--b3:#853300;--bb:#b6530e;--bg:rgba(255,160,66,.40)}
.puzzle-page.theme-black{--b1:#030303;--b2:#252525;--b3:#0b0b0b;--bb:#383838;--bg:rgba(255,255,255,.16)}
.puzzle-cell.is-block{
 border-color:var(--bb,#0f4fb7)!important;
 background:
  radial-gradient(circle at 28% 22%,rgba(255,255,255,.48) 0 3%,transparent 4%),
  linear-gradient(145deg,var(--b1,#061d50),var(--b2,#0b5bd3) 48%,var(--b3,#0a2f79))!important;
 box-shadow:inset 0 0 10px var(--bg,rgba(90,166,255,.35)),0 1px 3px rgba(5,34,82,.18)!important;
}

.puzzle-keyboard-card--full{margin-top:8px!important;padding:9px 11px!important}
.puzzle-keyboard-heading{margin-bottom:5px!important}
.puzzle-keyboard-heading .puzzle-side-title strong{font-size:14px!important}
.puzzle-keyboard-heading .puzzle-side-title span{font-size:10px!important}
.puzzle-keyboard-wide{grid-template-columns:1fr 1fr!important;gap:10px!important}
.puzzle-keyboard-wide .hangul-keyboard{
 display:grid!important;grid-template-columns:repeat(10,1fr)!important;gap:4px!important;
}
.puzzle-keyboard-wide .vowels{grid-template-columns:repeat(7,1fr)!important}
.puzzle-keyboard-wide .hangul-keyboard button{
 min-height:34px!important;height:34px!important;font-size:15px!important;
 padding:0!important;border-radius:7px!important;
}
.puzzle-keyboard-card--full .hangul-control-row{margin-top:5px!important}
.puzzle-keyboard-card--full .hangul-control-row button{min-height:32px!important;height:32px!important}

.mobile-puzzle-input{
 position:fixed;left:-9999px;bottom:0;width:1px;height:1px;opacity:.01;
}
.mobile-next-cell-btn{display:none}
html.bp-dark .puzzle-clues{scrollbar-color:#465c75 #162130}

@media(max-width:720px){
 .puzzle-top-workspace{grid-template-columns:1fr!important}
 .puzzle-board{width:min(100%,420px)!important;margin:0 auto!important}
 .puzzle-clues-stack{grid-template-columns:1fr!important;grid-template-rows:auto auto!important}
 .puzzle-clues{max-height:190px!important}
 .puzzle-keyboard-card--full{display:none!important}
 .mobile-next-cell-btn{
  display:block;position:fixed;right:14px;bottom:14px;z-index:9990;
  min-width:92px;min-height:44px;padding:0 16px;
  border:1px solid #0b4bd4;border-radius:13px;background:#155eef;color:#fff;
  font-size:13px;font-weight:900;box-shadow:0 7px 20px rgba(18,67,150,.28);
 }
}


/* =========================================================
   v7 FIXED BOARD + MATCHED CLUE HEIGHT
   ========================================================= */
.puzzle-top-workspace{
    display:grid!important;
    grid-template-columns:minmax(0,40fr) minmax(0,60fr)!important;
    gap:12px!important;
    align-items:start!important;
}

.puzzle-game-column{
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    align-self:start!important;
    box-sizing:border-box!important;
}

.puzzle-board{
    width:100%!important;
    max-width:100%!important;
    aspect-ratio:1 / 1!important;
    height:auto!important;
    margin:0!important;
    box-sizing:border-box!important;
    flex:none!important;
}

/* Different puzzle contents must never change board dimensions. */
.puzzle-page.level-beginner .puzzle-board,
.puzzle-page.level-intermediate .puzzle-board,
.puzzle-page.level-advanced .puzzle-board{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
}

/* Right side gets the exact pixel height of .puzzle-game-column from JS. */
.puzzle-clues-stack{
    min-width:0!important;
    min-height:0!important;
    display:grid!important;
    grid-template-rows:minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px!important;
    overflow:hidden!important;
    align-self:start!important;
}

.puzzle-clues-card{
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
}

.puzzle-clues-card .puzzle-side-title{
    flex:0 0 auto!important;
    margin-bottom:7px!important;
}

.puzzle-clues{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    padding-right:6px!important;
}

.puzzle-clues::-webkit-scrollbar{
    width:10px;
}
.puzzle-clues::-webkit-scrollbar-track{
    background:rgba(120,145,175,.10);
    border-radius:8px;
}
.puzzle-clues::-webkit-scrollbar-thumb{
    background:#9bb4d1;
    border-radius:8px;
    border:2px solid transparent;
    background-clip:padding-box;
}

/* larger clue text as requested */
.puzzle-clues-card .puzzle-side-title strong{
    font-size:17px!important;
}
.puzzle-clues b{
    font-size:13px!important;
}
.puzzle-clues span{
    font-size:13px!important;
    line-height:1.42!important;
}

/* message area must not create a large empty block */
.puzzle-message{
    min-height:22px!important;
    height:auto!important;
    margin-bottom:0!important;
}

/* mobile does not force matched desktop height */
@media(max-width:720px){
    .puzzle-clues-stack{
        height:auto!important;
        overflow:visible!important;
    }
    .puzzle-clues-card{
        max-height:240px!important;
    }
    .puzzle-clues{
        max-height:190px!important;
    }
}


/* =========================================================
   v8 fixed 40% board / vertical clue scroll / loading overlay
   ========================================================= */
.puzzle-top-workspace{
    grid-template-columns:minmax(0,40fr) minmax(0,60fr)!important;
    align-items:start!important;
}

.puzzle-game-column{
    min-height:0!important;
    height:auto!important;
    align-self:start!important;
}

.puzzle-board-stage{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
}

.puzzle-board-stage .puzzle-board{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    margin:0!important;
    grid-auto-rows:minmax(0,1fr)!important;
    box-sizing:border-box!important;
}

/* 초급/중급/고급 모두 외곽 크기는 동일 */
.puzzle-page.level-beginner .puzzle-board-stage,
.puzzle-page.level-intermediate .puzzle-board-stage,
.puzzle-page.level-advanced .puzzle-board-stage{
    width:100%!important;
    aspect-ratio:1/1!important;
}

/* loading */
.puzzle-loading{
    position:absolute;
    inset:0;
    z-index:30;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;
    border-radius:15px;
    background:rgba(246,250,255,.91);
    backdrop-filter:blur(2px);
}
.puzzle-loading.is-hidden{display:none!important}
.puzzle-loading-spinner{
    width:200px;
    height:200px;
    border-radius:50%;
    border:13px solid rgba(21,94,239,.13);
    border-top-color:#155eef;
    border-right-color:#6ea4f5;
    box-sizing:border-box;
    animation:puzzleLoadingSpin .78s linear infinite;
    box-shadow:0 8px 30px rgba(21,94,239,.10);
}
.puzzle-loading strong{
    color:#315d94;
    font-size:14px;
    font-weight:900;
}
@keyframes puzzleLoadingSpin{
    to{transform:rotate(360deg)}
}

/* clue boxes: ONLY vertical scrolling */
.puzzle-clues-stack{
    overflow:hidden!important;
    min-height:0!important;
    grid-template-rows:minmax(0,1fr) minmax(0,1fr)!important;
}
.puzzle-clues-card{
    min-height:0!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
}
.puzzle-clues{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    column-count:1!important;
    columns:auto!important;
    white-space:normal!important;
    padding-right:7px!important;
    scrollbar-gutter:stable;
    overscroll-behavior:contain;
}
.puzzle-clues li,
.puzzle-clues button{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
}
.puzzle-clues button{
    white-space:normal!important;
}
.puzzle-clues span{
    overflow-wrap:anywhere;
    word-break:keep-all;
}
.puzzle-clues::-webkit-scrollbar{width:10px;height:0}
.puzzle-clues::-webkit-scrollbar-track{
    background:rgba(107,132,162,.10);
    border-radius:10px;
}
.puzzle-clues::-webkit-scrollbar-thumb{
    background:#91aac8;
    border-radius:10px;
    border:2px solid transparent;
    background-clip:padding-box;
}

html.bp-dark .puzzle-loading{
    background:rgba(15,25,39,.93);
}
html.bp-dark .puzzle-loading-spinner{
    border-color:rgba(111,164,245,.13);
    border-top-color:#70a8ff;
    border-right-color:#b1d0ff;
}
html.bp-dark .puzzle-loading strong{color:#b9d4f8}

@media(max-width:720px){
    .puzzle-loading-spinner{
        width:130px;
        height:130px;
        border-width:10px;
    }
}


/* =========================================================
   v9: clue scroll must be VERTICAL ONLY
   ========================================================= */
.puzzle-clues-card{
    overflow:hidden!important;
}
.puzzle-clues{
    display:block!important;
    columns:unset!important;
    column-count:1!important;
    column-width:auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    max-height:none!important;
    overflow-y:scroll!important;
    overflow-x:hidden!important;
    white-space:normal!important;
    writing-mode:horizontal-tb!important;
    box-sizing:border-box!important;
    touch-action:pan-y!important;
}
.puzzle-clues li{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    break-inside:auto!important;
    page-break-inside:auto!important;
}
.puzzle-clues button{
    display:grid!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    grid-template-columns:26px minmax(0,1fr)!important;
    box-sizing:border-box!important;
}
.puzzle-clues span{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
    word-break:keep-all!important;
}
.puzzle-clues::-webkit-scrollbar{
    width:11px!important;
    height:0!important;
}


/* =========================================================
   v10 ABSOLUTE VERTICAL-ONLY CLUE SCROLL
   ========================================================= */
.puzzle-top-workspace,
.puzzle-clues-stack,
.puzzle-clues-card,
.puzzle-clues-card .puzzle-side-title,
.puzzle-clues{
    min-width:0!important;
    max-width:100%!important;
    overflow-x:hidden!important;
}

.puzzle-clues-stack{
    width:100%!important;
    box-sizing:border-box!important;
}

.puzzle-clues-card{
    width:100%!important;
    box-sizing:border-box!important;
}

/*
 * OL 자체를 다단/가로 흐름에서 완전히 분리.
 * flex column + overflow-y scroll만 사용.
 */
ol.puzzle-clues{
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    gap:5px!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0 7px 0 0!important;

    columns:initial!important;
    column-count:initial!important;
    column-width:initial!important;
    column-gap:initial!important;

    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-gutter:stable!important;
    overscroll-behavior-y:contain!important;
    overscroll-behavior-x:none!important;
    touch-action:pan-y!important;
}

ol.puzzle-clues > li{
    display:block!important;
    flex:0 0 auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
}

ol.puzzle-clues > li > button{
    display:grid!important;
    grid-template-columns:28px minmax(0,1fr)!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
}

ol.puzzle-clues > li > button > span{
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
}

ol.puzzle-clues::-webkit-scrollbar{
    width:12px!important;
    height:0!important;
}
ol.puzzle-clues::-webkit-scrollbar:horizontal{
    display:none!important;
    height:0!important;
}

/* Prevent any accidental horizontal scrollbar on right 60% column */
.puzzle-clues-stack *{
    box-sizing:border-box!important;
}


/* v12 word-pool diagnostic */
.puzzle-rebuild-link{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    margin-left:7px;
    padding:0 10px;
    border:1px solid #c88c93;
    border-radius:8px;
    background:#fff;
    color:#9a4f57!important;
    font-weight:900;
    text-decoration:none!important;
}
.puzzle-rebuild-link:hover{
    background:#fff7f7;
}
html.bp-dark .puzzle-rebuild-link{
    background:#26303d;
    border-color:#81565c;
    color:#f0b1b7!important;
}


/* clean runtime: vertical clue scrolling only */
.puzzle-clues-stack,
.puzzle-clues-card,
ol.puzzle-clues{
    overflow-x:hidden!important;
    min-width:0!important;
}
ol.puzzle-clues{
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    column-count:initial!important;
    columns:initial!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    max-width:100%!important;
    touch-action:pan-y!important;
}
ol.puzzle-clues>li,
ol.puzzle-clues>li>button{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
}
ol.puzzle-clues>li>button>span{
    min-width:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
}

/* 실제 PC/모바일 키보드 입력을 받는 숨은 input */
.mobile-puzzle-input{
    position:fixed!important;
    left:-10000px!important;
    top:auto!important;
    bottom:0!important;
    width:2px!important;
    height:2px!important;
    opacity:.01!important;
    pointer-events:none!important;
}


/* Dense70 + physical keyboard IME preview */
.desktop-typing-preview{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:40px;
    margin:8px 0 6px;
    padding:7px 12px;
    border:1px solid #c3d6ec;
    border-radius:10px;
    background:#f7fbff;
}
.desktop-typing-preview__label{
    flex:0 0 auto;
    padding-right:10px;
    border-right:1px solid #d9e5f0;
    color:#6d87a2;
    font-size:11px;
    font-weight:900;
}
.desktop-typing-preview strong{
    color:#0e56c9;
    font-size:15px;
    font-weight:900;
}
.desktop-typing-preview.is-typing{
    background:#eef6ff;
    border-color:#8db6ee;
}
.desktop-typing-preview.is-typing strong{
    color:#075ee8;
    font-size:19px;
}
.puzzle-cell.is-selected{
    outline:3px solid rgba(21,94,239,.32)!important;
    outline-offset:-3px!important;
}
@media(max-width:720px){
    .desktop-typing-preview{display:none!important;}
}
html.bp-dark .desktop-typing-preview{
    background:#172334;
    border-color:#42566e;
}
html.bp-dark .desktop-typing-preview strong{
    color:#93bcff;
}


/* =========================================================
   word-pool cleanup / physical keyboard / in-board celebration
   ========================================================= */

.desktop-typing-preview{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:36px;
    margin:7px 0 6px;
    padding:6px 11px;
    border:1px solid #c7d8ea;
    border-radius:9px;
    background:#f8fbff;
}
.desktop-typing-preview__label{
    flex:0 0 auto;
    font-size:10px;
    font-weight:900;
    color:#7089a5;
}
.desktop-typing-preview strong{
    min-width:0;
    font-size:12px;
    font-weight:800;
    color:#466687;
}

.puzzle-cell{
    position:relative!important;
}

.cell-inline-ime{
    position:absolute;
    inset:0;
    z-index:8;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(238,246,255,.94);
    color:#075ee8;
    font-size:clamp(16px,2vw,24px);
    font-weight:950;
    line-height:1;
    border-radius:inherit;
    pointer-events:none;
}
.cell-inline-ime.is-visible{
    display:flex;
}

.puzzle-cell.is-selected{
    outline:3px solid rgba(21,94,239,.34)!important;
    outline-offset:-3px!important;
}

/* Celebration happens ONLY inside the puzzle board */
#puzzleBoard.is-celebrating{
    position:relative;
    overflow:hidden;
}
#puzzleBoard.is-celebrating::after{
    content:"정답입니다!";
    position:absolute;
    left:50%;
    top:50%;
    z-index:40;
    transform:translate(-50%,-50%) scale(.92);
    padding:10px 18px;
    border-radius:999px;
    background:rgba(255,255,255,.94);
    color:#0b56c5;
    border:1px solid #9fc0ef;
    box-shadow:0 10px 28px rgba(12,67,150,.18);
    font-size:18px;
    font-weight:950;
    animation:boardCongrats .65s ease-out both;
    pointer-events:none;
}
.puzzle-cell.celebration-flash{
    animation:cellCelebrationFlash .65s ease-in-out both!important;
}
@keyframes cellCelebrationFlash{
    0%{transform:scale(1);filter:brightness(1)}
    35%{transform:scale(.92) rotate(-2deg);filter:brightness(1.45)}
    70%{transform:scale(1.06) rotate(2deg);filter:brightness(1.18)}
    100%{transform:scale(1);filter:brightness(1)}
}
@keyframes boardCongrats{
    from{opacity:0;transform:translate(-50%,-50%) scale(.75)}
    to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

/* disable old fullscreen celebration overlay if markup remains */
#puzzleCelebration,
.puzzle-celebration{
    display:none!important;
}

@media(max-width:720px){
    .desktop-typing-preview{
        display:none!important;
    }
}

html.bp-dark .desktop-typing-preview{
    background:#172334;
    border-color:#41566e;
}
html.bp-dark .desktop-typing-preview strong{
    color:#b2c8e2;
}
html.bp-dark .cell-inline-ime{
    background:rgba(28,43,61,.96);
    color:#8eb9ff;
}


/* ===== FINAL FIX: keyboard + in-board celebration ===== */
#puzzleCelebration,
.puzzle-celebration{
    display:none!important;
}
#puzzleBoard{
    position:relative!important;
    overflow:hidden!important;
}
#puzzleBoard.is-celebrating::after{
    content:"정답입니다!";
    position:absolute;
    left:50%;
    top:50%;
    z-index:50;
    transform:translate(-50%,-50%);
    padding:10px 18px;
    border-radius:999px;
    background:rgba(255,255,255,.94);
    color:#0b56c5;
    border:1px solid #9fc0ef;
    box-shadow:0 10px 28px rgba(12,67,150,.20);
    font-size:18px;
    font-weight:950;
    pointer-events:none;
}
.puzzle-cell.celebration-flash{
    animation:bpCellDance .62s ease-in-out both!important;
}
@keyframes bpCellDance{
    0%{transform:scale(1);filter:brightness(1)}
    35%{transform:scale(.91) rotate(-2deg);filter:brightness(1.48)}
    70%{transform:scale(1.06) rotate(2deg);filter:brightness(1.16)}
    100%{transform:scale(1);filter:brightness(1)}
}
.cell-inline-ime{
    position:absolute;
    inset:0;
    z-index:12;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(240,247,255,.96);
    color:#075ee8;
    font-weight:950;
    font-size:clamp(16px,2vw,24px);
    pointer-events:none;
}
.cell-inline-ime.is-visible{display:flex;}


/* =========================================================
   2026-08-12: keyboard heading + 10-inch tablet landscape
   ========================================================= */

/* "셀 또는 열쇠를 선택한 뒤 입력하세요." - one step larger */
.puzzle-keyboard-card--full .puzzle-keyboard-heading .puzzle-side-title span{
    font-size:12px!important;
    line-height:1.5!important;
}

/* "선택한 셀: 1행 1열 · 리" - right edge of keyboard heading */
.puzzle-keyboard-card--full .puzzle-keyboard-heading{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;
    width:100%!important;
}

.puzzle-keyboard-card--full .puzzle-keyboard-heading .puzzle-side-title{
    flex:0 1 auto!important;
    min-width:0!important;
}

.puzzle-keyboard-card--full .puzzle-keyboard-heading .compose-preview{
    flex:0 0 auto!important;
    min-width:250px!important;
    width:auto!important;
    margin:0 4px 0 auto!important;
    padding:8px 10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    text-align:right!important;
    font-size:12px!important;
    line-height:1.35!important;
    white-space:nowrap!important;
}

/*
 * 10-inch tablet / small laptop landscape:
 * Keep the same desktop 40:60 puzzle+clues layout instead of stacking.
 * Leave 120px rails on both sides for advertising.
 */
@media (min-width:780px) and (max-width:1579px){
    .puzzle-page{
        width:calc(100% - 272px)!important;
        max-width:1360px!important;
        min-width:0!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }

    .puzzle-top-workspace{
        display:grid!important;
        grid-template-columns:minmax(0,40fr) minmax(0,60fr)!important;
        gap:10px!important;
        align-items:start!important;
    }

    .puzzle-clues-stack{
        display:grid!important;
        grid-template-columns:1fr!important;
        grid-template-rows:minmax(0,1fr) minmax(0,1fr)!important;
    }

    .puzzle-keyboard-wide{
        grid-template-columns:1fr 1fr!important;
    }

    .puzzle-keyboard-card--full{
        display:block!important;
    }

    .puzzle-levels{
        grid-template-columns:repeat(3,1fr)!important;
    }
}

/* Tablet portrait / phones keep the existing mobile behavior. */
@media (max-width:779px){
    .puzzle-page{
        width:calc(100% - 24px)!important;
        max-width:none!important;
    }
}

@media (max-width:720px){
    .puzzle-keyboard-card--full .puzzle-keyboard-heading{
        align-items:flex-start!important;
        flex-direction:column!important;
    }
    .puzzle-keyboard-card--full .puzzle-keyboard-heading .compose-preview{
        min-width:0!important;
        width:100%!important;
        margin:0!important;
        justify-content:flex-start!important;
        text-align:left!important;
        white-space:normal!important;
    }
}


/* =========================================================
   BiblePang Search V1
   /search/ 전용
   기존 성경퍼즐 UI/색상/광고 레이아웃을 계승하면서
   본문은 [퍼즐판][찾은 단어][세로 진행률] 3단 구조로 사용
   ========================================================= */

.wordsearch-page{
    --ws-accent:#155eef;
    --ws-border:#b9cde5;
    --ws-soft:#eef5ff;
    --ws-text:#24364b;
}

.wordsearch-workspace{
    width:100%;
}

.wordsearch-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
    padding:10px 12px;
    border:1px solid var(--ws-border);
    border-radius:14px;
    background:linear-gradient(135deg,#f9fcff,#eef5ff 65%,#f8fbff);
    box-shadow:0 5px 16px rgba(35,76,122,.045);
}

.wordsearch-toolbar__level{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}
.wordsearch-toolbar__level strong{
    font-size:15px;
    color:#263f5b;
}
.wordsearch-toolbar__level span{
    font-size:11px;
    color:#71859c;
}

.wordsearch-main-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 270px 92px;
    gap:12px;
    align-items:stretch;
}

.wordsearch-board-column,
.wordsearch-found-panel,
.wordsearch-progress-panel{
    min-width:0;
    border:1px solid var(--ws-border);
    border-radius:16px;
    background:linear-gradient(135deg,#f9fcff,#eef5ff 65%,#f8fbff);
    box-shadow:0 7px 22px rgba(35,76,122,.06);
    box-sizing:border-box;
}

.wordsearch-board-column{
    padding:10px;
}

.wordsearch-board-stage{
    position:relative;
    width:min(100%,650px);
    aspect-ratio:1/1;
    margin:0 auto;
}

.wordsearch-board{
    position:absolute;
    inset:0;
    display:grid;
    gap:4px;
    padding:7px;
    border:1px solid #afc4dd;
    border-radius:15px;
    background:#dbe9f9;
    user-select:none;
    -webkit-user-select:none;
    touch-action:none;
    box-sizing:border-box;
}

.wordsearch-cell{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:0;
    border:1px solid #b7c9df;
    border-radius:7px;
    background:#fff;
    color:#17365f;
    font-weight:900;
    font-size:clamp(13px,1.65vw,22px);
    cursor:pointer;
    transition:transform .09s ease, background .12s ease, border-color .12s ease;
    box-sizing:border-box;
}
.wordsearch-cell:hover{
    border-color:#6b9cd4;
    background:#f4f8ff;
}
.wordsearch-cell.is-selecting{
    background:#e5efff;
    border-color:#5790dc;
    transform:scale(.97);
}
.wordsearch-cell.is-found{
    background:#eaf8ef;
    border-color:#79bc94;
    color:#23734a;
}
.wordsearch-cell.is-wrong{
    animation:wsWrong .32s ease;
}
@keyframes wsWrong{
    0%,100%{transform:translateX(0)}
    30%{transform:translateX(-3px)}
    70%{transform:translateX(3px)}
}

.wordsearch-found-panel{
    display:flex;
    flex-direction:column;
    padding:13px;
    overflow:hidden;
}

.wordsearch-side-title{
    flex-direction:row!important;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}
.wordsearch-side-title>div{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.wordsearch-side-title>b{
    flex:0 0 auto;
    padding:4px 8px;
    border-radius:999px;
    background:#eaf2ff;
    color:#155eef;
    font-size:11px;
}

.wordsearch-found-summary{
    display:grid;
    grid-template-columns:1fr auto;
    gap:5px 8px;
    margin-bottom:9px;
    padding:8px 9px;
    border:1px solid #cfdded;
    border-radius:9px;
    background:#fff;
}
.wordsearch-found-summary span{
    color:#71859c;
    font-size:10.5px;
}
.wordsearch-found-summary strong{
    color:#29445f;
    font-size:11px;
}

.wordsearch-found-list{
    flex:1 1 auto;
    min-height:0;
    margin:0;
    padding:0 4px 0 0;
    list-style:none;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:6px;
    scrollbar-width:thin;
}
.wordsearch-found-list li{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:7px 9px;
    border:1px solid #d0ddea;
    border-radius:8px;
    background:#fff;
    color:#506982;
    font-size:11px;
    font-weight:800;
}
.wordsearch-found-list li small{
    color:#8da0b5;
    font-size:9px;
    font-weight:700;
}
.wordsearch-found-list li.is-found{
    background:#eef8f2;
    border-color:#a8d2ba;
    color:#39735a;
}
.wordsearch-found-list li.is-empty{
    justify-content:center;
    min-height:50px;
    color:#91a0b0;
    font-weight:650;
}

.wordsearch-progress-panel{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:13px 9px;
}

.wordsearch-progress-title{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    margin-bottom:10px;
}
.wordsearch-progress-title strong{
    font-size:13px;
    color:#29445f;
}
.wordsearch-progress-title span{
    color:#155eef;
    font-size:18px;
    font-weight:950;
}

.wordsearch-progress-meter{
    position:relative;
    flex:1 1 auto;
    width:100%;
    min-height:320px;
    display:flex;
    align-items:stretch;
    justify-content:center;
}

.wordsearch-progress-track{
    position:relative;
    width:28px;
    height:100%;
    min-height:320px;
    overflow:hidden;
    border:1px solid #a9bfd9;
    border-radius:999px;
    background:#e8f0f8;
    box-shadow:inset 0 2px 7px rgba(44,82,126,.10);
}

.wordsearch-progress-fill{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:0;
    border-radius:999px;
    background:linear-gradient(0deg,#155eef,#5d98f0);
    box-shadow:0 0 16px rgba(21,94,239,.22);
    transition:height .38s cubic-bezier(.2,.75,.25,1);
}

.wordsearch-progress-scale{
    position:absolute;
    inset:0;
    pointer-events:none;
    color:#7e92a9;
    font-size:8px;
    font-weight:800;
}
.wordsearch-progress-scale span{
    position:absolute;
    right:0;
    transform:translateY(50%);
}
.wordsearch-progress-scale .is-100{top:-5px;transform:none}
.wordsearch-progress-scale .is-75{top:25%}
.wordsearch-progress-scale .is-50{top:50%}
.wordsearch-progress-scale .is-25{top:75%}
.wordsearch-progress-scale .is-0{bottom:-2px;transform:none}

.wordsearch-progress-footer{
    width:100%;
    margin-top:10px;
    padding-top:9px;
    border-top:1px solid #d6e2ee;
    text-align:center;
}
.wordsearch-progress-footer span{
    display:block;
    color:#7e91a7;
    font-size:9px;
}
.wordsearch-progress-footer strong{
    display:block;
    margin-top:2px;
    color:#155eef;
    font-size:13px;
}

html.bp-dark .wordsearch-toolbar,
html.bp-dark .wordsearch-board-column,
html.bp-dark .wordsearch-found-panel,
html.bp-dark .wordsearch-progress-panel{
    background:#151f2e;
    border-color:#36506d;
    box-shadow:none;
}
html.bp-dark .wordsearch-cell{
    background:#101a28;
    border-color:#405570;
    color:#e6eef8;
}
html.bp-dark .wordsearch-cell.is-selecting{
    background:#173154;
    border-color:#4f7fb8;
}
html.bp-dark .wordsearch-cell.is-found{
    background:#17382b;
    border-color:#438365;
    color:#aee1c3;
}
html.bp-dark .wordsearch-found-summary,
html.bp-dark .wordsearch-found-list li{
    background:#111c2a;
    border-color:#36506d;
}
html.bp-dark .wordsearch-found-list li{
    color:#d6e2ef;
}
html.bp-dark .wordsearch-found-list li.is-found{
    background:#17382b;
    color:#b9e5ca;
}
html.bp-dark .wordsearch-progress-track{
    background:#111c2a;
    border-color:#405570;
}

@media(max-width:779px){
    .wordsearch-main-layout{
        grid-template-columns:minmax(0,1fr) 230px 78px;
        gap:9px;
    }
    .wordsearch-board-stage{
        width:100%;
    }
}

@media(max-width:720px){
    .wordsearch-toolbar{
        align-items:flex-start;
        flex-direction:column;
    }
    .wordsearch-main-layout{
        grid-template-columns:minmax(0,1fr) 105px 62px;
        gap:6px;
    }
    .wordsearch-board-column{padding:6px}
    .wordsearch-found-panel{padding:7px}
    .wordsearch-progress-panel{padding:8px 4px}
    .wordsearch-found-summary{display:none}
    .wordsearch-side-title span{display:none}
    .wordsearch-found-list li{
        padding:5px 6px;
        font-size:9px;
    }
    .wordsearch-found-list li small{display:none}
    .wordsearch-progress-track{
        width:20px;
        min-height:220px;
    }
    .wordsearch-progress-meter{
        min-height:220px;
    }
    .wordsearch-progress-scale{display:none}
    .wordsearch-cell{
        border-radius:5px;
        font-size:clamp(11px,4vw,17px);
    }
}


/* =========================================================
   Search V2 — 어린이 친화 밝은 그라데이션 UI
   빨강/검정 계열은 사용하지 않음
   ========================================================= */

.wordsearch-board{
    gap:5px!important;
    padding:9px!important;
    border:1px solid #b5d3ec!important;
    background:
        radial-gradient(circle at 20% 10%,rgba(255,255,255,.92),transparent 25%),
        linear-gradient(135deg,#dff4ff,#eef8ff 45%,#e9fff6)!important;
    box-shadow:
        inset 0 0 24px rgba(117,184,232,.13),
        0 8px 22px rgba(61,116,164,.08);
}

.wordsearch-cell{
    border-radius:10px!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.88),
        0 2px 5px rgba(72,112,150,.08);
    text-shadow:0 1px 0 rgba(255,255,255,.55);
    transition:
        transform .10s ease,
        filter .12s ease,
        box-shadow .12s ease,
        background .18s ease!important;
}

.wordsearch-cell:hover{
    filter:brightness(1.035) saturate(1.06);
    transform:translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 4px 10px rgba(70,120,165,.13);
}

.wordsearch-cell.is-selecting{
    outline:3px solid rgba(64,135,225,.16);
    filter:brightness(1.03) saturate(1.1);
}

.wordsearch-cell.is-found{
    background:linear-gradient(145deg,#dff8ea,#bfeccc)!important;
    border-color:#8bc8a2!important;
    color:#236344!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 3px 8px rgba(84,161,113,.14)!important;
}

/* 찾은 단어 카드 */
.wordsearch-found-panel{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 92% 5%,rgba(255,255,255,.95),transparent 26%),
        linear-gradient(145deg,var(--ws-found-a,#e8fff5),var(--ws-found-b,#f2edff))!important;
    border-color:#bcd8e8!important;
}
.wordsearch-found-panel::before{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    right:-45px;
    bottom:-45px;
    border-radius:50%;
    background:rgba(125,183,238,.10);
    pointer-events:none;
}
.wordsearch-found-panel::after{
    content:"";
    position:absolute;
    width:72px;
    height:72px;
    left:-28px;
    top:58px;
    border-radius:50%;
    background:rgba(132,220,185,.10);
    pointer-events:none;
}

.wordsearch-side-title,
.wordsearch-found-summary,
.wordsearch-found-list{
    position:relative;
    z-index:1;
}

.wordsearch-side-title>b{
    border:1px solid rgba(74,140,214,.18);
    background:rgba(255,255,255,.76)!important;
    color:#356aa9!important;
    box-shadow:0 2px 7px rgba(74,111,157,.07);
}

.wordsearch-found-summary{
    background:rgba(255,255,255,.72)!important;
    border-color:rgba(140,174,207,.34)!important;
    backdrop-filter:blur(3px);
}

.wordsearch-found-list li{
    background:rgba(255,255,255,.78)!important;
    border-color:rgba(137,171,206,.36)!important;
    box-shadow:0 2px 6px rgba(58,99,139,.05);
}
.wordsearch-found-list li.is-found{
    background:linear-gradient(145deg,#ecfbf2,#d8f4e3)!important;
    border-color:#a7d7b9!important;
    color:#357252!important;
}

/* 진행률 카드 */
.wordsearch-progress-panel{
    background:
        radial-gradient(circle at 50% 0,rgba(255,255,255,.96),transparent 34%),
        linear-gradient(180deg,#f0f9ff,#edf8ff 45%,#effcf7)!important;
    border-color:#bfd9eb!important;
}

.wordsearch-progress-track{
    width:30px!important;
    border:2px solid rgba(103,154,203,.26)!important;
    background:
        linear-gradient(180deg,rgba(255,255,255,.9),rgba(224,240,249,.84))!important;
    box-shadow:
        inset 0 4px 10px rgba(69,112,150,.08),
        0 3px 8px rgba(72,118,158,.06)!important;
}

.wordsearch-progress-fill{
    transition:height .45s cubic-bezier(.2,.75,.25,1),
               background .35s ease!important;
}

.wordsearch-progress-title span,
.wordsearch-progress-footer strong{
    color:#3e7fbd!important;
}

@media(max-width:720px){
    .wordsearch-board{
        gap:3px!important;
        padding:5px!important;
    }
    .wordsearch-cell{
        border-radius:7px!important;
    }
}


/* =========================================================
   Search V3 — 전체 퍼즐판 단일 그라데이션 + 단어 완성 Flip
   ========================================================= */

.wordsearch-board{
    --ws-board-a:#8fd8ff;
    --ws-board-b:#c7f4ff;
    --ws-board-c:#bff0d7;
    --ws-board-text:#17365f;
    --ws-found-1:#bdebd0;
    --ws-found-2:#cddcff;

    background:
        radial-gradient(circle at 18% 16%,rgba(255,255,255,.65),transparent 28%),
        linear-gradient(135deg,var(--ws-board-a),var(--ws-board-b) 52%,var(--ws-board-c))!important;
    padding:9px!important;
    gap:5px!important;
    border:1px solid rgba(93,145,190,.34)!important;
    box-shadow:
        inset 0 0 26px rgba(255,255,255,.22),
        0 8px 24px rgba(61,116,164,.10)!important;
}

/*
 * 셀마다 다른 색을 쓰지 않는다.
 * 모든 셀은 같은 반투명 표면을 사용하고,
 * 뒤의 하나의 큰 퍼즐판 그라데이션이 그대로 비쳐 보이게 한다.
 */
.wordsearch-cell{
    background:rgba(255,255,255,.18)!important;
    color:var(--ws-board-text)!important;
    border:1px solid rgba(255,255,255,.42)!important;
    text-shadow:none!important;
    font-weight:950!important;
    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.38),
        0 1px 3px rgba(68,105,137,.06)!important;
}

.wordsearch-cell:hover{
    background:rgba(255,255,255,.28)!important;
    filter:none!important;
}

.wordsearch-cell.is-selecting{
    background:rgba(255,255,255,.42)!important;
    outline:3px solid rgba(61,120,202,.13)!important;
}

/* 단어를 찾았을 때 최종 고정 색 */
.wordsearch-cell.is-found{
    background:linear-gradient(145deg,var(--ws-found-1),var(--ws-found-2))!important;
    color:#204f43!important;
    border-color:rgba(76,151,121,.34)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.58),
        0 3px 8px rgba(65,135,106,.12)!important;
}

/* 단어 전체를 맞추었을 때 셀들이 차례로 뒤집힘 */
.wordsearch-cell.is-flipping{
    animation:wsCellFlip .46s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes wsCellFlip{
    0%{
        transform:rotateY(0deg) scale(1);
        filter:brightness(1);
    }
    48%{
        transform:rotateY(90deg) scale(.92);
        filter:brightness(1.12);
    }
    52%{
        transform:rotateY(90deg) scale(.92);
    }
    100%{
        transform:rotateY(0deg) scale(1);
        filter:brightness(1);
    }
}

/* 찾은 단어 목록: 아래에서 위로 쌓임 */
.wordsearch-found-list{
    display:flex!important;
    flex-direction:column-reverse!important;
    justify-content:flex-start;
    gap:7px!important;
    padding:4px!important;
}

/* 초기 안내는 바닥에 잔잔하게 */
.wordsearch-found-list li.is-empty{
    min-height:54px;
    border:1px dashed rgba(115,157,194,.38)!important;
    background:rgba(255,255,255,.46)!important;
    color:#7f95a8!important;
    box-shadow:none!important;
}

/* 찾은 단어마다 서로 다른 밝은 카드색 — JS가 custom property 설정 */
.wordsearch-found-list li.is-found{
    --ws-word-a:#e7f8ef;
    --ws-word-b:#dbeeff;
    background:linear-gradient(135deg,var(--ws-word-a),var(--ws-word-b))!important;
    border-color:rgba(112,158,190,.32)!important;
    color:#294f5f!important;
    font-weight:950!important;
    font-size:12px!important;
    letter-spacing:.01em;
    box-shadow:
        0 3px 9px rgba(74,112,145,.08),
        inset 0 1px 0 rgba(255,255,255,.72)!important;
    animation:wsWordRise .28s ease both;
}
@keyframes wsWordRise{
    from{opacity:0;transform:translateY(10px) scale(.98)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

.wordsearch-found-list li.is-found span{
    font-weight:950;
    color:#23495a;
}
.wordsearch-found-list li.is-found small{
    font-weight:850;
    color:#5b7e8d;
}

/* 진행률 막대도 한 문제마다 JS에서 전체 팔레트에 맞춰 랜덤 */
.wordsearch-progress-track{
    overflow:hidden;
}
.wordsearch-progress-fill{
    background:linear-gradient(
        0deg,
        var(--ws-progress-a,#68c6ff),
        var(--ws-progress-b,#74d9ca) 56%,
        var(--ws-progress-c,#a2e88a)
    )!important;
    box-shadow:0 0 18px rgba(91,183,221,.25)!important;
}

/* 진한 테마에서도 글자가 흐려지지 않도록 */
.wordsearch-board.is-deep .wordsearch-cell{
    color:#f8fcff!important;
    text-shadow:0 1px 1px rgba(42,87,120,.18)!important;
    border-color:rgba(255,255,255,.34)!important;
}
.wordsearch-board.is-deep .wordsearch-cell.is-found{
    color:#214e42!important;
    text-shadow:none!important;
}

@media(max-width:720px){
    .wordsearch-cell{
        font-weight:950!important;
    }
}


/* =========================================================
   Search V4 — 클릭 선택 / 진한 같은 계열 / 카드 1회전
   ========================================================= */

/*
 * 선택된 셀은 별도의 파랑으로 덮지 않고,
 * 현재 퍼즐판 색상을 그대로 더 진하게 보이게 한다.
 */
.wordsearch-cell.is-selecting:not(.is-found){
    background:rgba(70,126,190,.28)!important;
    border-color:rgba(58,109,176,.58)!important;
    filter:saturate(1.22) brightness(.88)!important;
    transform:scale(.96);
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.14),
        0 2px 7px rgba(57,105,153,.13)!important;
}

/* 보라 계열 */
.wordsearch-board[data-palette="violet-sky"] .wordsearch-cell.is-selecting:not(.is-found){
    background:rgba(95,83,184,.30)!important;
    border-color:rgba(92,76,176,.58)!important;
}

/* 민트 계열 */
.wordsearch-board[data-palette="mint-lagoon"] .wordsearch-cell.is-selecting:not(.is-found){
    background:rgba(38,143,117,.27)!important;
    border-color:rgba(38,132,108,.54)!important;
}

/* 골드/하늘 계열 */
.wordsearch-board[data-palette="soft-gold-sky"] .wordsearch-cell.is-selecting:not(.is-found){
    background:rgba(196,157,63,.25)!important;
    border-color:rgba(174,135,44,.48)!important;
}

/* 딥 오션 */
.wordsearch-board[data-palette="deep-ocean"] .wordsearch-cell.is-selecting:not(.is-found){
    background:rgba(26,91,145,.36)!important;
    border-color:rgba(210,239,255,.42)!important;
    color:#ffffff!important;
}

/*
 * 정답 단어 전체 회전.
 * 위/아래 가장자리를 축으로 카드가 한 바퀴 도는 모션.
 */
.wordsearch-cell.is-correct-flip{
    transform-style:preserve-3d;
    backface-visibility:visible;
    animation:wsCorrectCardTurn .62s cubic-bezier(.2,.7,.2,1) both!important;
}
@keyframes wsCorrectCardTurn{
    0%{
        transform:perspective(500px) rotateX(0deg) scale(1);
        filter:brightness(1);
    }
    25%{
        transform:perspective(500px) rotateX(90deg) scale(.96);
        filter:brightness(1.10);
    }
    50%{
        transform:perspective(500px) rotateX(180deg) scale(.94);
        filter:brightness(1.14);
    }
    75%{
        transform:perspective(500px) rotateX(270deg) scale(.96);
        filter:brightness(1.08);
    }
    100%{
        transform:perspective(500px) rotateX(360deg) scale(1);
        filter:brightness(1);
    }
}

/* 오답은 잠깐 진해졌다가 원래 색으로 */
.wordsearch-cell.is-wrong{
    animation:wsWrongSoft .42s ease both!important;
}
@keyframes wsWrongSoft{
    0%{transform:translateX(0);filter:brightness(.88) saturate(1.18)}
    25%{transform:translateX(-3px);filter:brightness(.82) saturate(1.22)}
    55%{transform:translateX(3px);filter:brightness(.86) saturate(1.18)}
    100%{transform:translateX(0);filter:brightness(1) saturate(1)}
}


/* V5 stats use the same three-card grammar as BiblePang games. */
#wordsearchStats:empty{display:none}
#wordsearchStats .puzzle-stat-card.points{
    background:linear-gradient(135deg,#f2f8ff,#eefbf7)!important;
}

/* selected cell returns to board color immediately when toggled off */
.wordsearch-cell:not(.is-selecting):not(.is-found){
    transition:background .14s ease,border-color .14s ease,transform .10s ease!important;
}


/* =========================================================
   V8 — Dark mode completeness
   Fixes the three light areas:
   1) Word-search points statistics card
   2) Found-words panel
   3) Vertical progress panel / meter
   ========================================================= */

html.dark .puzzle-stat-card,
html[data-theme="dark"] .puzzle-stat-card,
body.dark .puzzle-stat-card,
body[data-theme="dark"] .puzzle-stat-card{
    background:linear-gradient(145deg,#142235,#17273a)!important;
    border-color:#36506d!important;
    color:#eaf4ff!important;
}

html.dark #wordsearchStats .puzzle-stat-card.points,
html[data-theme="dark"] #wordsearchStats .puzzle-stat-card.points,
body.dark #wordsearchStats .puzzle-stat-card.points,
body[data-theme="dark"] #wordsearchStats .puzzle-stat-card.points{
    background:linear-gradient(145deg,#15263a,#172d35)!important;
    border-color:#3b596c!important;
    color:#eef8ff!important;
}

html.dark #wordsearchStats .puzzle-stat-title,
html[data-theme="dark"] #wordsearchStats .puzzle-stat-title,
body.dark #wordsearchStats .puzzle-stat-title,
body[data-theme="dark"] #wordsearchStats .puzzle-stat-title{
    color:#dcecff!important;
}

html.dark #wordsearchStats .puzzle-stat-pair,
html[data-theme="dark"] #wordsearchStats .puzzle-stat-pair,
body.dark #wordsearchStats .puzzle-stat-pair,
body[data-theme="dark"] #wordsearchStats .puzzle-stat-pair{
    color:#c8dbef!important;
}

html.dark #wordsearchStats .puzzle-stat-pair i,
html[data-theme="dark"] #wordsearchStats .puzzle-stat-pair i,
body.dark #wordsearchStats .puzzle-stat-pair i,
body[data-theme="dark"] #wordsearchStats .puzzle-stat-pair i{
    color:#91b7dc!important;
}

/* Found words: remove the cream/white surface in dark mode */
html.dark .found-panel,
html.dark .found-words-panel,
html.dark .found-box,
html.dark #foundPanel,
html.dark #foundWords,
html[data-theme="dark"] .found-panel,
html[data-theme="dark"] .found-words-panel,
html[data-theme="dark"] .found-box,
html[data-theme="dark"] #foundPanel,
html[data-theme="dark"] #foundWords,
body.dark .found-panel,
body.dark .found-words-panel,
body.dark .found-box,
body.dark #foundPanel,
body.dark #foundWords,
body[data-theme="dark"] .found-panel,
body[data-theme="dark"] .found-words-panel,
body[data-theme="dark"] .found-box,
body[data-theme="dark"] #foundPanel,
body[data-theme="dark"] #foundWords{
    background:linear-gradient(180deg,#17283a 0%,#152638 55%,#182b32 100%)!important;
    border-color:#36536d!important;
    color:#eaf4ff!important;
}

html.dark .found-panel *,
html.dark .found-words-panel *,
html[data-theme="dark"] .found-panel *,
html[data-theme="dark"] .found-words-panel *,
body.dark .found-panel *,
body.dark .found-words-panel *,
body[data-theme="dark"] .found-panel *,
body[data-theme="dark"] .found-words-panel *{
    color:inherit;
}

/* Internal found-word summary rows */
html.dark .found-summary,
html.dark .found-count-row,
html.dark .word-type-counts,
html[data-theme="dark"] .found-summary,
html[data-theme="dark"] .found-count-row,
html[data-theme="dark"] .word-type-counts,
body.dark .found-summary,
body.dark .found-count-row,
body.dark .word-type-counts,
body[data-theme="dark"] .found-summary,
body[data-theme="dark"] .found-count-row,
body[data-theme="dark"] .word-type-counts{
    background:#122235!important;
    border-color:#324d68!important;
    color:#dcecff!important;
}

/* Progress outer card */
html.dark .progress-panel,
html.dark .progress-box,
html.dark #progressPanel,
html[data-theme="dark"] .progress-panel,
html[data-theme="dark"] .progress-box,
html[data-theme="dark"] #progressPanel,
body.dark .progress-panel,
body.dark .progress-box,
body.dark #progressPanel,
body[data-theme="dark"] .progress-panel,
body[data-theme="dark"] .progress-box,
body[data-theme="dark"] #progressPanel{
    background:linear-gradient(180deg,#16273a,#132338)!important;
    border-color:#36536d!important;
    color:#edf6ff!important;
}

/* Progress track itself: dark translucent track, while JS gradient fill remains visible */
html.dark .progress-track,
html.dark .vertical-progress-track,
html.dark .progress-meter,
html[data-theme="dark"] .progress-track,
html[data-theme="dark"] .vertical-progress-track,
html[data-theme="dark"] .progress-meter,
body.dark .progress-track,
body.dark .vertical-progress-track,
body.dark .progress-meter,
body[data-theme="dark"] .progress-track,
body[data-theme="dark"] .vertical-progress-track,
body[data-theme="dark"] .progress-meter{
    background:rgba(7,18,31,.68)!important;
    border-color:#3a5773!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)!important;
}

html.dark .progress-panel .progress-label,
html.dark .progress-panel .progress-percent,
html.dark .progress-panel .progress-tick,
html[data-theme="dark"] .progress-panel .progress-label,
html[data-theme="dark"] .progress-panel .progress-percent,
html[data-theme="dark"] .progress-panel .progress-tick,
body.dark .progress-panel .progress-label,
body.dark .progress-panel .progress-percent,
body.dark .progress-panel .progress-tick,
body[data-theme="dark"] .progress-panel .progress-label,
body[data-theme="dark"] .progress-panel .progress-percent,
body[data-theme="dark"] .progress-panel .progress-tick{
    color:#dcecff!important;
}

/*
 * Browser/theme implementation fallback:
 * BiblePang may toggle .dark-mode rather than .dark/data-theme.
 */
.dark-mode .puzzle-stat-card,
.dark-mode #wordsearchStats .puzzle-stat-card.points{
    background:linear-gradient(145deg,#142235,#172b35)!important;
    border-color:#36536d!important;
    color:#eef8ff!important;
}
.dark-mode .found-panel,
.dark-mode .found-words-panel,
.dark-mode .found-box,
.dark-mode #foundPanel,
.dark-mode #foundWords{
    background:linear-gradient(180deg,#17283a,#152638 55%,#182b32)!important;
    border-color:#36536d!important;
    color:#eaf4ff!important;
}
.dark-mode .progress-panel,
.dark-mode .progress-box,
.dark-mode #progressPanel{
    background:linear-gradient(180deg,#16273a,#132338)!important;
    border-color:#36536d!important;
    color:#edf6ff!important;
}


/* =========================================================
   V9 — FINAL dark-mode overrides
   BiblePang actually toggles html.bp-dark.
   These rules deliberately come LAST so the bright V2/V3 inline-style
   variables and !important declarations cannot override dark mode.
   ========================================================= */

/* Top statistics cards, including the points card */
html.bp-dark #wordsearchStats .puzzle-stat-card,
html.bp-dark #wordsearchStats .puzzle-stat-card.points{
    background:linear-gradient(145deg,#142235,#182b3d)!important;
    border-color:#35516d!important;
    color:#edf6ff!important;
}
html.bp-dark #wordsearchStats .puzzle-stat-title{
    color:#e6f1fc!important;
}
html.bp-dark #wordsearchStats .puzzle-stat-pair{
    color:#c8d9ea!important;
}
html.bp-dark #wordsearchStats .puzzle-stat-pair i{
    color:#88acd1!important;
}

/* Found words panel — override JS custom properties as well */
html.bp-dark .wordsearch-found-panel{
    --ws-found-a:#16283a!important;
    --ws-found-b:#172d33!important;
    --ws-found-accent:#6ca8cf!important;
    background:
        radial-gradient(circle at 92% 5%,rgba(80,122,156,.10),transparent 27%),
        linear-gradient(145deg,#16283a,#172a38 58%,#172e33)!important;
    border-color:#35516d!important;
    color:#e7f2fc!important;
    box-shadow:0 7px 22px rgba(0,0,0,.12)!important;
}
html.bp-dark .wordsearch-found-panel::before,
html.bp-dark .wordsearch-found-panel::after{
    opacity:.24!important;
}
html.bp-dark .wordsearch-side-title strong{
    color:#e9f4ff!important;
}
html.bp-dark .wordsearch-side-title span{
    color:#91aac1!important;
}
html.bp-dark .wordsearch-side-title>b{
    background:#122237!important;
    border-color:#35516d!important;
    color:#9ec8ee!important;
}
html.bp-dark .wordsearch-found-summary{
    background:#111f30!important;
    border-color:#304c67!important;
}
html.bp-dark .wordsearch-found-summary span{
    color:#8fa8bf!important;
}
html.bp-dark .wordsearch-found-summary strong{
    color:#dcebf8!important;
}
html.bp-dark .wordsearch-found-list li.is-empty{
    background:#111f30!important;
    border-color:#304c67!important;
    color:#8fa8bf!important;
}
html.bp-dark .wordsearch-found-list li.is-found,
html.bp-dark .wordsearch-found-list li.is-revealed-word{
    background:linear-gradient(135deg,#183247,#1a3940)!important;
    border-color:#3a5d70!important;
    color:#e3f1fa!important;
}
html.bp-dark .wordsearch-found-list li.is-found span,
html.bp-dark .wordsearch-found-list li.is-revealed-word span{
    color:#eef8ff!important;
}
html.bp-dark .wordsearch-found-list li.is-found small,
html.bp-dark .wordsearch-found-list li.is-revealed-word small{
    color:#9fc2d3!important;
}

/* Progress card + meter */
html.bp-dark .wordsearch-progress-panel{
    background:
        radial-gradient(circle at 50% 0,rgba(79,122,158,.10),transparent 35%),
        linear-gradient(180deg,#16283a,#132438 58%,#172b34)!important;
    border-color:#35516d!important;
    color:#edf6ff!important;
}
html.bp-dark .wordsearch-progress-title strong{
    color:#e7f2fc!important;
}
html.bp-dark .wordsearch-progress-title span,
html.bp-dark .wordsearch-progress-footer strong{
    color:#82b9e7!important;
}
html.bp-dark .wordsearch-progress-footer{
    border-top-color:#304a62!important;
}
html.bp-dark .wordsearch-progress-footer span{
    color:#91a8bd!important;
}
html.bp-dark .wordsearch-progress-track{
    background:linear-gradient(180deg,#0f1d2d,#12253a)!important;
    border-color:#3a5873!important;
    box-shadow:
        inset 0 4px 10px rgba(0,0,0,.22),
        0 3px 8px rgba(0,0,0,.10)!important;
}
html.bp-dark .wordsearch-progress-scale{
    color:#8fa8be!important;
}

/* Revealed answers: visually different from legitimately found answers */
.wordsearch-cell.is-revealed{
    background:linear-gradient(145deg,#d7e8ff,#c9ddff)!important;
    color:#285184!important;
    border-color:#8fb2df!important;
    font-weight:950!important;
}
html.bp-dark .wordsearch-cell.is-revealed{
    background:linear-gradient(145deg,#243f61,#294f70)!important;
    color:#edf7ff!important;
    border-color:#4f779d!important;
}

/* Locked/revealed state controls */
#revealWordsearchBtn:disabled,
#resetWordsearchBtn:disabled{
    opacity:.58;
    cursor:not-allowed;
}
html.bp-dark #revealWordsearchBtn:disabled,
html.bp-dark #resetWordsearchBtn:disabled{
    color:#8fa8bd!important;
}


/* =========================================================
   V11 — Full-board clear celebration
   Every cell spins ONCE in place, pachinko-style, while sparkling.
   ========================================================= */

.wordsearch-cell.is-board-celebrating{
    position:relative;
    z-index:2;
    transform-style:preserve-3d;
    backface-visibility:visible;
    animation:
        wsBoardPachinkoTurn 760ms cubic-bezier(.22,.66,.24,1)
        var(--ws-celebrate-delay,0ms) 1 both!important;
    will-change:transform,filter,box-shadow;
}

@keyframes wsBoardPachinkoTurn{
    0%{
        transform:perspective(520px) rotateX(0deg) rotateY(0deg) scale(1);
        filter:brightness(1) saturate(1);
    }
    18%{
        transform:perspective(520px) rotateX(82deg) rotateY(8deg) scale(.96);
        filter:brightness(1.16) saturate(1.16);
    }
    42%{
        transform:perspective(520px) rotateX(178deg) rotateY(-5deg) scale(.94);
        filter:brightness(1.34) saturate(1.20);
    }
    66%{
        transform:perspective(520px) rotateX(278deg) rotateY(6deg) scale(.97);
        filter:brightness(1.18) saturate(1.14);
    }
    100%{
        transform:perspective(520px) rotateX(360deg) rotateY(0deg) scale(1);
        filter:brightness(1) saturate(1);
    }
}

/* Individual sparkle flash during each cell's single rotation. */
.wordsearch-cell.is-board-sparkle{
    box-shadow:
        0 0 0 2px rgba(255,255,255,.48),
        0 0 13px rgba(137,213,255,.82),
        0 0 25px rgba(173,241,216,.54),
        inset 0 0 12px rgba(255,255,255,.56)!important;
}

.wordsearch-cell.is-board-sparkle::after{
    content:"";
    position:absolute;
    width:9px;
    height:9px;
    top:10%;
    right:12%;
    pointer-events:none;
    background:
        linear-gradient(90deg,transparent 42%,rgba(255,255,255,.98) 43% 57%,transparent 58%),
        linear-gradient(0deg,transparent 42%,rgba(255,255,255,.98) 43% 57%,transparent 58%);
    filter:drop-shadow(0 0 5px rgba(255,255,255,.9));
    animation:wsSparklePop 360ms ease-out 1 both;
}

@keyframes wsSparklePop{
    0%{
        opacity:0;
        transform:scale(.18) rotate(0deg);
    }
    34%{
        opacity:1;
        transform:scale(1.38) rotate(45deg);
    }
    72%{
        opacity:.82;
        transform:scale(.82) rotate(82deg);
    }
    100%{
        opacity:0;
        transform:scale(.2) rotate(110deg);
    }
}

/* Dark mode sparkle stays bright without turning the cell white. */
html.bp-dark .wordsearch-cell.is-board-sparkle{
    box-shadow:
        0 0 0 2px rgba(188,225,255,.30),
        0 0 14px rgba(91,177,238,.72),
        0 0 26px rgba(90,208,177,.42),
        inset 0 0 12px rgba(209,237,255,.22)!important;
}

@media (prefers-reduced-motion: reduce){
    .wordsearch-cell.is-board-celebrating{
        animation-duration:260ms!important;
    }
}


/* ===== BiblePang game timer V1 ===== */
.game-live-timer{
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}
.game-live-timer span{
    font-size:11px;
    font-weight:800;
    letter-spacing:.04em;
    opacity:.72;
}
.game-live-timer strong{
    min-width:82px;
    padding:6px 10px;
    border-radius:10px;
    border:1px solid rgba(83,135,190,.30);
    background:rgba(232,244,255,.78);
    color:#24568c;
    text-align:center;
    font-size:14px;
    font-weight:950;
    line-height:1;
}
.wordsearch-toolbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    align-items:center!important;
}
.wordsearch-toolbar .puzzle-toolbar-actions{justify-self:end;}
.game-live-timer--wordsearch{justify-self:center;}
.puzzle-side-title--with-timer{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px;
}
.game-live-timer--crossword{margin-left:auto;}
html.bp-dark .game-live-timer strong{
    background:#13263a!important;
    border-color:#35536f!important;
    color:#a9d6ff!important;
}
html.bp-dark .game-live-timer span{color:#a8bfd4!important;}

.puzzle-stat-card.best-time .puzzle-stat-pair{
    gap:4px;
}
.puzzle-stat-card.best-time .puzzle-stat-pair span{
    white-space:nowrap;
}
@media(max-width:720px){
    .wordsearch-toolbar{
        grid-template-columns:1fr auto!important;
    }
    .game-live-timer--wordsearch{
        grid-column:1/-1;
        grid-row:2;
        justify-self:center;
        margin-top:8px;
    }
    .puzzle-side-title--with-timer{
        align-items:flex-start!important;
    }
    .game-live-timer{
        gap:5px;
    }
    .game-live-timer strong{
        min-width:72px;
        font-size:12px;
        padding:5px 7px;
    }
}


/* =========================================================
   2026-08-13 — 상단 통계 카드 4개 한 줄 배치
   퍼즐 도전 / 퍼즐 성공 / 나의 최고기록 / 포인트
   또는 단어찾기 4개 통계 카드를 index 전체 폭 안에 균등 배치
   ========================================================= */

.puzzle-history{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
    align-items:stretch!important;
}

.puzzle-history .puzzle-stat-card{
    min-width:0!important;
    width:100%!important;
    box-sizing:border-box!important;
    padding:12px 13px!important;
}

.puzzle-history .puzzle-stat-title{
    font-size:11.5px!important;
    line-height:1.25!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.puzzle-history .puzzle-stat-pair span{
    font-size:11.5px!important;
    line-height:1.4!important;
}

.puzzle-history .puzzle-stat-pair i{
    min-width:37px!important;
    font-size:10px!important;
}

/* 중간 폭에서는 2×2, 모바일에서는 1열 */
@media(max-width:779px){
    .puzzle-history{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
}

@media(max-width:560px){
    .puzzle-history{
        grid-template-columns:1fr!important;
    }
}


/* =========================================================
   BiblePang Word Search Theme V1
   7-color unified theme + full dark-mode audit/fix
   ========================================================= */
.wordsearch-page{
    --search-light:#edf7ff;--search-soft:#cde8ff;--search-mid:#68afe8;
    --search-dark:#337ab8;--search-deep:#1b4f81;--search-ink:#183652;
}
.search-theme-red{--search-light:#ffe7eb;--search-soft:#ffcbd3;--search-mid:#ee7181;--search-dark:#bf3f58;--search-deep:#78283b;--search-ink:#4a2230}
.search-theme-orange{--search-light:#fff0df;--search-soft:#ffd9af;--search-mid:#f59a47;--search-dark:#c96122;--search-deep:#7b3913;--search-ink:#4c2a16}
.search-theme-yellow{--search-light:#fff8d8;--search-soft:#ffe99b;--search-mid:#eac246;--search-dark:#a97d17;--search-deep:#674a0d;--search-ink:#473913}
.search-theme-green{--search-light:#eafaf0;--search-soft:#c9efd7;--search-mid:#61c287;--search-dark:#2b895a;--search-deep:#175b3b;--search-ink:#173a2b}
.search-theme-blue{--search-light:#edf7ff;--search-soft:#cde8ff;--search-mid:#68afe8;--search-dark:#337ab8;--search-deep:#1b4f81;--search-ink:#183652}
.search-theme-indigo{--search-light:#f1f2ff;--search-soft:#d9ddff;--search-mid:#8994dc;--search-dark:#5662ae;--search-deep:#343d79;--search-ink:#292f55}
.search-theme-purple{--search-light:#faf1ff;--search-soft:#ead5ff;--search-mid:#b07bdb;--search-dark:#7948aa;--search-deep:#4e2d77;--search-ink:#38224a}

/* dashboard */
.search-dashboard{
    display:grid;
    grid-template-columns:minmax(300px,1.22fr) minmax(0,3.2fr) 88px;
    gap:9px;align-items:stretch;
    padding:9px 11px;margin-bottom:17px;
    border:1px solid var(--search-mid);border-radius:18px;
    background:radial-gradient(circle at 3% 12%,var(--search-soft) 0,transparent 25%),
               linear-gradient(110deg,var(--search-light),#fff 48%,var(--search-light));
    box-shadow:0 7px 20px rgba(35,62,82,.07);
}
.search-brand{display:flex;align-items:center;gap:10px;min-width:0}
.search-game-logo{width:70px;height:70px;flex:0 0 70px;border-radius:18px;overflow:hidden;border:1px solid var(--search-mid);background:var(--search-soft)}
.search-game-logo svg{width:100%;height:100%;display:block}
.search-brand-copy .puzzle-kicker{color:var(--search-dark)!important}
.search-brand-copy h2{margin:2px 0!important;font-size:23px!important;color:var(--search-ink)!important}
.search-brand-copy h2 small{font-size:.52em;color:var(--search-dark)!important}
.search-brand-copy p{margin:0;color:var(--search-dark)!important;font-size:10.5px!important;white-space:nowrap}
.search-user-actions{display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:7px!important}
.search-user-actions .puzzle-login-user{font-size:10.5px!important;color:var(--search-deep)!important;font-weight:850}
.search-user-actions .puzzle-home{width:39px!important;height:39px!important;padding:0!important;background:linear-gradient(145deg,#fff,var(--search-light))!important;color:var(--search-deep)!important;border:1px solid var(--search-mid)!important}
.search-user-actions .puzzle-home svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* four statistics with icons */
.search-dashboard .puzzle-history{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important;margin:0!important;min-width:0}
.search-dashboard .puzzle-stat-card{
    display:grid!important;grid-template-columns:33px minmax(0,1fr)!important;gap:6px!important;align-items:center!important;
    min-width:0;padding:7px 8px!important;border:1px solid var(--search-soft)!important;border-radius:12px!important;
    background:linear-gradient(145deg,#fff,var(--search-light))!important;box-shadow:none!important
}
.search-stat-icon{width:31px;height:31px;display:flex;align-items:center;justify-content:center;color:var(--search-dark)}
.search-stat-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.stat-play .search-stat-icon{color:#7164d8}.stat-level .search-stat-icon{color:#27ada2}.best-time .search-stat-icon{color:#e7a11b}.stat-points .search-stat-icon{color:#ec991a}
.search-stat-copy{min-width:0}
.search-dashboard .puzzle-stat-title{font-size:9.5px!important;color:var(--search-deep)!important;margin:0 0 2px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-dashboard .puzzle-stat-pair{display:flex!important;flex-direction:column!important;gap:1px!important}
.search-dashboard .puzzle-stat-pair span{font-size:9.5px!important;line-height:1.25!important;color:var(--search-ink)!important;white-space:nowrap}
.search-dashboard .puzzle-stat-pair i{display:inline-block!important;min-width:27px!important;font-size:8px!important;color:var(--search-dark)!important;font-style:normal!important;font-weight:850!important}
.search-dashboard .best-time .puzzle-stat-pair span{font-size:8.6px!important}

/* selected page theme into controls/panels */
.wordsearch-page .puzzle-levels{
    border-color:var(--search-mid)!important;
    background:linear-gradient(135deg,var(--search-soft),var(--search-light))!important
}
.wordsearch-page .puzzle-level{color:var(--search-deep)!important}
.wordsearch-page .puzzle-level.is-active{
    background:linear-gradient(145deg,#fff,var(--search-light))!important;
    border-color:var(--search-dark)!important;color:var(--search-deep)!important;box-shadow:0 4px 10px rgba(30,60,80,.08)!important
}
.wordsearch-page .wordsearch-toolbar,
.wordsearch-page .wordsearch-board-column,
.wordsearch-page .wordsearch-found-panel,
.wordsearch-page .wordsearch-progress-panel{
    border-color:var(--search-mid)!important;
    background:radial-gradient(circle at 5% 4%,var(--search-soft) 0,transparent 29%),
               linear-gradient(145deg,var(--search-light),#fff 52%,var(--search-soft))!important;
    box-shadow:0 7px 20px rgba(35,62,82,.07)!important
}
.wordsearch-page .wordsearch-toolbar__level strong,
.wordsearch-page .puzzle-side-title strong,
.wordsearch-page .wordsearch-progress-title strong{color:var(--search-deep)!important}
.wordsearch-page .wordsearch-toolbar__level span,
.wordsearch-page .puzzle-side-title span{color:var(--search-dark)!important}

/* Board = one coherent gradient in current theme */
.wordsearch-page .wordsearch-board{
    border-color:var(--search-dark)!important;
    background:linear-gradient(135deg,var(--search-light),var(--search-soft) 48%,var(--search-mid))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 5px 15px rgba(30,55,75,.08)!important
}
.wordsearch-page .wordsearch-cell{
    border-color:var(--search-mid)!important;
    background:linear-gradient(145deg,#fff,var(--search-light))!important;
    color:var(--search-ink)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95)
}
.wordsearch-page .wordsearch-cell:hover{
    background:var(--search-soft)!important;border-color:var(--search-dark)!important
}
.wordsearch-page .wordsearch-cell.is-selecting{
    background:linear-gradient(145deg,var(--search-soft),var(--search-mid))!important;
    border-color:var(--search-dark)!important;color:var(--search-deep)!important
}
.wordsearch-page .wordsearch-cell.is-found{
    background:linear-gradient(145deg,var(--search-mid),var(--search-dark))!important;
    border-color:var(--search-deep)!important;color:#fff!important
}

/* Found list + progress follow same selected theme */
.wordsearch-page .wordsearch-found-summary{
    background:rgba(255,255,255,.78)!important;border-color:var(--search-soft)!important
}
.wordsearch-page .wordsearch-side-title>b{
    background:var(--search-light)!important;color:var(--search-deep)!important
}
.wordsearch-page .wordsearch-found-list{
    scrollbar-width:thin;scrollbar-color:var(--search-mid) transparent
}
.wordsearch-page .wordsearch-found-list::-webkit-scrollbar{width:9px}
.wordsearch-page .wordsearch-found-list::-webkit-scrollbar-track{background:transparent}
.wordsearch-page .wordsearch-found-list::-webkit-scrollbar-thumb{background:var(--search-mid);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
.wordsearch-page .wordsearch-found-list::-webkit-scrollbar-thumb:hover{background:var(--search-dark);background-clip:padding-box}
.wordsearch-page .wordsearch-found-list li.is-empty{background:rgba(255,255,255,.72)!important;border-color:var(--search-soft)!important;color:var(--search-dark)!important}
.wordsearch-page .wordsearch-found-list li.is-found{
    background:linear-gradient(135deg,var(--search-soft),var(--search-light))!important;
    border-color:var(--search-mid)!important;color:var(--search-deep)!important
}
.wordsearch-page .wordsearch-progress-title span,
.wordsearch-page .wordsearch-progress-footer strong{color:var(--search-dark)!important}
.wordsearch-page .wordsearch-progress-track{
    border-color:var(--search-mid)!important;background:var(--search-light)!important
}
.wordsearch-page .wordsearch-progress-fill{
    background:linear-gradient(0deg,var(--search-deep),var(--search-dark),var(--search-mid))!important;
    box-shadow:0 0 16px rgba(40,75,110,.18)!important
}

/* action buttons stay calm blue, independent from random theme */
.wordsearch-page .puzzle-secondary-btn,
.wordsearch-page .puzzle-reveal-btn{
    background:linear-gradient(145deg,#fff,#eef6ff)!important;border-color:#b7d0e9!important;color:#356b9f!important
}
.wordsearch-page .puzzle-primary-btn{
    background:linear-gradient(180deg,#65a9e5,#4288c9)!important;border-color:#3479ba!important;color:#fff!important
}

/* =========================================================
   DARK MODE AUDIT — BiblePang uses html.bp-dark.
   Explicitly cover every visible object that can remain light.
   ========================================================= */
html.bp-dark .search-dashboard{
    background:linear-gradient(145deg,#172332,#111b28 58%,#162436)!important;
    border-color:#36516d!important;box-shadow:none!important
}
html.bp-dark .search-game-logo{border-color:#42617e!important;background:#1a2a3d!important}
html.bp-dark .search-brand-copy h2,
html.bp-dark .search-user-actions .puzzle-login-user{color:#eef5fc!important}
html.bp-dark .search-brand-copy h2 small,
html.bp-dark .search-brand-copy p,
html.bp-dark .search-brand-copy .puzzle-kicker{color:#9eb5ca!important}
html.bp-dark .search-user-actions .puzzle-home{
    background:#17283b!important;border-color:#405d7c!important;color:#8fc1ff!important
}
html.bp-dark .search-dashboard .puzzle-stat-card{
    background:linear-gradient(145deg,#172638,#132233)!important;border-color:#36516d!important;color:#eef6ff!important
}
html.bp-dark .search-dashboard .puzzle-stat-title{color:#e8f1fb!important}
html.bp-dark .search-dashboard .puzzle-stat-pair span{color:#d6e3ef!important}
html.bp-dark .search-dashboard .puzzle-stat-pair i{color:#91afca!important}

html.bp-dark .wordsearch-page .puzzle-levels{
    background:#111d2c!important;border-color:#31485f!important
}
html.bp-dark .wordsearch-page .puzzle-level{color:#a7b8ca!important}
html.bp-dark .wordsearch-page .puzzle-level.is-active{
    background:#1a3048!important;color:#a9ceff!important;border-color:#47709a!important;box-shadow:none!important
}

html.bp-dark .wordsearch-page .wordsearch-toolbar,
html.bp-dark .wordsearch-page .wordsearch-board-column,
html.bp-dark .wordsearch-page .wordsearch-found-panel,
html.bp-dark .wordsearch-page .wordsearch-progress-panel{
    background:linear-gradient(145deg,#151f2e,#111c2a)!important;
    border-color:#36506d!important;box-shadow:none!important
}
html.bp-dark .wordsearch-page .wordsearch-toolbar__level strong,
html.bp-dark .wordsearch-page .puzzle-side-title strong,
html.bp-dark .wordsearch-page .wordsearch-progress-title strong{color:#e8f1fb!important}
html.bp-dark .wordsearch-page .wordsearch-toolbar__level span,
html.bp-dark .wordsearch-page .puzzle-side-title span{color:#95a9bd!important}

html.bp-dark .wordsearch-page .wordsearch-board{
    background:linear-gradient(135deg,#16263a,#1a3047,#203c55)!important;
    border-color:#42617f!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important
}
html.bp-dark .wordsearch-page .wordsearch-cell{
    background:linear-gradient(145deg,#111c2a,#142235)!important;
    border-color:#3a5470!important;color:#e8f1fb!important;box-shadow:none!important
}
html.bp-dark .wordsearch-page .wordsearch-cell:hover{
    background:#1a3048!important;border-color:#5a85b2!important
}
html.bp-dark .wordsearch-page .wordsearch-cell.is-selecting{
    background:#203f60!important;border-color:#6496c9!important;color:#fff!important
}
html.bp-dark .wordsearch-page .wordsearch-cell.is-found{
    background:linear-gradient(145deg,#1c5060,#276c62)!important;
    border-color:#4c8c81!important;color:#f2fbff!important
}
html.bp-dark .wordsearch-page .wordsearch-cell.is-revealed{
    background:linear-gradient(145deg,#263f61,#294f70)!important;border-color:#557da3!important;color:#edf7ff!important
}

html.bp-dark .wordsearch-page .wordsearch-found-summary{
    background:#101c2a!important;border-color:#304a65!important
}
html.bp-dark .wordsearch-page .wordsearch-found-summary span{color:#91a9bf!important}
html.bp-dark .wordsearch-page .wordsearch-found-summary strong{color:#e0edf8!important}
html.bp-dark .wordsearch-page .wordsearch-side-title>b{
    background:#1a3048!important;color:#a9ceff!important
}
html.bp-dark .wordsearch-page .wordsearch-found-list li,
html.bp-dark .wordsearch-page .wordsearch-found-list li.is-empty{
    background:#101c2a!important;border-color:#304a65!important;color:#a2b5c8!important
}
html.bp-dark .wordsearch-page .wordsearch-found-list li.is-found,
html.bp-dark .wordsearch-page .wordsearch-found-list li.is-revealed-word{
    background:linear-gradient(135deg,#183247,#1c4140)!important;
    border-color:#3c6670!important;color:#eef8ff!important
}
html.bp-dark .wordsearch-page .wordsearch-found-list li small{color:#8ba4bb!important}

html.bp-dark .wordsearch-page .wordsearch-progress-title span,
html.bp-dark .wordsearch-page .wordsearch-progress-footer strong{color:#8fc1ef!important}
html.bp-dark .wordsearch-page .wordsearch-progress-footer{
    border-top-color:#304a62!important;color:#9bb0c3!important
}
html.bp-dark .wordsearch-page .wordsearch-progress-footer span,
html.bp-dark .wordsearch-page .wordsearch-progress-scale{color:#91a8bd!important}
html.bp-dark .wordsearch-page .wordsearch-progress-track{
    background:linear-gradient(180deg,#0f1c2b,#12253a)!important;border-color:#3a5873!important
}

html.bp-dark .wordsearch-page .game-live-timer strong{
    background:#13263a!important;border-color:#35536f!important;color:#a9d6ff!important
}
html.bp-dark .wordsearch-page .game-live-timer span{color:#a8bfd4!important}
html.bp-dark .wordsearch-page .puzzle-message{color:#9fb0c2!important}
html.bp-dark .wordsearch-page .puzzle-message.is-success{background:#17382b!important;border-color:#3f775e!important;color:#b9e5ca!important}
html.bp-dark .wordsearch-page .puzzle-message.is-error{background:#3a2027!important;border-color:#74434e!important;color:#f0b9c1!important}
html.bp-dark .wordsearch-page .puzzle-message.is-warn{background:#3b321c!important;border-color:#715f30!important;color:#e9d18d!important}

html.bp-dark .wordsearch-page .puzzle-secondary-btn,
html.bp-dark .wordsearch-page .puzzle-reveal-btn{
    background:#17283b!important;border-color:#405f7e!important;color:#b8d7f4!important
}
html.bp-dark .wordsearch-page .puzzle-primary-btn{
    background:linear-gradient(180deg,#356fa7,#285b8d)!important;border-color:#497da9!important;color:#fff!important
}
html.bp-dark .puzzle-modal-card{
    background:#142033!important;border-color:#3b5877!important;color:#dbe7f2!important
}
html.bp-dark .puzzle-modal-card h3{color:#eef5fc!important}
html.bp-dark .puzzle-modal-card p{color:#9eafc1!important}
html.bp-dark .puzzle-modal-kicker{color:#8fc1ff!important}
html.bp-dark .puzzle-content-ad{
    background:#121d2b!important;border-color:#31465f!important;color:#a7b8ca!important
}
html.bp-dark .puzzle-loading{
    background:rgba(15,27,42,.88)!important;color:#dce9f6!important
}

/* Dark scrollbars */
html.bp-dark .wordsearch-page .wordsearch-found-list{
    scrollbar-color:#4b6b8b transparent!important
}
html.bp-dark .wordsearch-page .wordsearch-found-list::-webkit-scrollbar-thumb{
    background:#4b6b8b!important;background-clip:padding-box!important
}

/* responsive */
@media(max-width:1080px){
    .search-dashboard{grid-template-columns:1fr}
    .search-user-actions{flex-direction:row!important;justify-content:flex-end!important}
}
@media(max-width:760px){
    .search-dashboard .puzzle-history{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:500px){
    .search-dashboard .puzzle-history{grid-template-columns:1fr!important}
}

/* BiblePang v5: Word Search stats typography */
.search-dashboard .puzzle-stat-title{font-size:11px!important;line-height:1.25!important}
.search-dashboard .puzzle-stat-pair span{font-size:10.8px!important;line-height:1.35!important}
.search-dashboard .puzzle-stat-pair i{font-size:9px!important;min-width:30px!important}
.search-dashboard .best-time .puzzle-stat-pair span{font-size:10px!important}
.search-stat-icon{width:34px!important;height:34px!important}
.search-stat-icon svg{width:30px!important;height:30px!important}

/* v7: Word Search stat text one step up */
.search-dashboard .puzzle-stat-title{font-size:12px!important;line-height:1.28!important}
.search-dashboard .puzzle-stat-pair span{font-size:11.8px!important;line-height:1.4!important}
.search-dashboard .puzzle-stat-pair i{font-size:10px!important;min-width:32px!important}
.search-dashboard .best-time .puzzle-stat-pair span{font-size:11px!important}


/* =========================================================
   BiblePang Word Search v22
   1) 영문 제목은 둘째 줄에서 (Bible Word Search) 한 줄 표시
   2) 포인트 카드도 현재 7색 search theme을 그대로 사용
   ========================================================= */

/* Korean title first line / English title second line */
.search-brand-copy .puzzle-title-line{
    display:block!important;
}
.search-brand-copy .puzzle-title-line h2{
    display:block!important;
    line-height:1.08!important;
}
.search-brand-copy .puzzle-title-line h2 small{
    display:block!important;
    width:max-content!important;
    max-width:100%!important;
    margin-top:2px!important;
    white-space:nowrap!important;
    line-height:1.18!important;
    color:var(--search-dark)!important;
}

/* Remove the old fixed blue/green points-card appearance.
   All four stat cards now belong to the active Word Search palette. */
#wordsearchStats .puzzle-stat-card.points,
.search-dashboard #wordsearchStats .puzzle-stat-card.points,
.search-dashboard .puzzle-stat-card.stat-points{
    background:
        radial-gradient(circle at 88% 12%,
            color-mix(in srgb,var(--search-mid) 15%,transparent) 0%,
            transparent 34%),
        linear-gradient(145deg,
            #fff 0%,
            var(--search-light) 60%,
            color-mix(in srgb,var(--search-soft) 72%,#fff) 100%)!important;
    border-color:var(--search-mid)!important;
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--search-mid) 8%,transparent)!important;
}
.search-dashboard .stat-points .search-stat-icon{
    color:var(--search-dark)!important;
}
.search-dashboard .stat-points .puzzle-stat-title{
    color:var(--search-deep)!important;
}
.search-dashboard .stat-points .puzzle-stat-pair span{
    color:var(--search-ink)!important;
    font-weight:800!important;
}
.search-dashboard .stat-points .puzzle-stat-pair i{
    color:var(--search-dark)!important;
}

/* Dark mode: keep same selected theme identity, only darken the surface. */
html.bp-dark #wordsearchStats .puzzle-stat-card.points,
html.bp-dark .search-dashboard .puzzle-stat-card.stat-points,
body.bp-dark #wordsearchStats .puzzle-stat-card.points,
html[data-theme="dark"] #wordsearchStats .puzzle-stat-card.points{
    background:
        radial-gradient(circle at 88% 12%,
            color-mix(in srgb,var(--search-mid) 13%,transparent) 0%,
            transparent 34%),
        linear-gradient(145deg,
            color-mix(in srgb,var(--search-deep) 24%,#132132) 0%,
            color-mix(in srgb,var(--search-dark) 16%,#172638) 100%)!important;
    border-color:color-mix(in srgb,var(--search-mid) 44%,#36516d)!important;
}
html.bp-dark .search-dashboard .stat-points .search-stat-icon,
body.bp-dark .search-dashboard .stat-points .search-stat-icon{
    color:var(--search-mid)!important;
}
html.bp-dark .search-dashboard .stat-points .puzzle-stat-title,
body.bp-dark .search-dashboard .stat-points .puzzle-stat-title{
    color:#eef6ff!important;
}
html.bp-dark .search-dashboard .stat-points .puzzle-stat-pair span,
body.bp-dark .search-dashboard .stat-points .puzzle-stat-pair span{
    color:#dce8f3!important;
}
html.bp-dark .search-dashboard .stat-points .puzzle-stat-pair i,
body.bp-dark .search-dashboard .stat-points .puzzle-stat-pair i{
    color:color-mix(in srgb,var(--search-mid) 62%,#b8c9da)!important;
}

/* Very narrow screens may scale rather than split the English subtitle. */
@media(max-width:420px){
    .search-brand-copy .puzzle-title-line h2 small{
        font-size:.48em!important;
    }
}


/* =========================================================
   2026-08-18 layout refinement — image 4
   퍼즐판 영역은 줄이고 '찾은 단어' 영역은 넓혀 1360px 화면 균형 조정
   ========================================================= */
@media (min-width:1081px){
  .wordsearch-page .wordsearch-main-layout{
    grid-template-columns:minmax(650px,780px) minmax(360px,1fr) 92px!important;
    gap:12px!important;
  }
  .wordsearch-page .wordsearch-board-column{
    width:100%!important;
    max-width:780px!important;
  }
  .wordsearch-page .wordsearch-board-stage{
    width:min(100%,620px)!important;
    max-width:620px!important;
  }
  .wordsearch-page .wordsearch-found-panel{
    min-width:360px!important;
    padding:17px 18px!important;
  }
  .wordsearch-page .wordsearch-side-title strong{
    font-size:17px!important;
    line-height:1.25!important;
  }
  .wordsearch-page .wordsearch-side-title span{
    font-size:12px!important;
    line-height:1.45!important;
  }
  .wordsearch-page .wordsearch-side-title>b{
    font-size:12px!important;
    padding:5px 10px!important;
  }
  .wordsearch-page .wordsearch-found-summary{
    gap:7px 10px!important;
    padding:10px 11px!important;
  }
  .wordsearch-page .wordsearch-found-summary span{
    font-size:12px!important;
  }
  .wordsearch-page .wordsearch-found-summary strong{
    font-size:13px!important;
  }
  .wordsearch-page .wordsearch-found-list li{
    padding:9px 10px!important;
    font-size:13px!important;
    line-height:1.35!important;
  }
  .wordsearch-page .wordsearch-found-list li small{
    font-size:10.5px!important;
  }
  .wordsearch-page .wordsearch-cell{
    font-size:clamp(15px,1.45vw,22px)!important;
  }
}