.bingo-page{--light:#edf7ff;--soft:#cde8ff;--mid:#68afe8;--dark:#337ab8;--deep:#1b4f81;--ink:#183652;width:min(1360px,calc(100% - 40px));margin:28px auto 58px;color:#24364b;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif}
.bingo-theme-red{--light:#ffe7eb;--soft:#ffcbd3;--mid:#ee7181;--dark:#bf3f58;--deep:#78283b;--ink:#4a2230}.bingo-theme-orange{--light:#fff0df;--soft:#ffd9af;--mid:#f59a47;--dark:#c96122;--deep:#7b3913;--ink:#4c2a16}.bingo-theme-yellow{--light:#fff8d8;--soft:#ffe99b;--mid:#eac246;--dark:#a97d17;--deep:#674a0d;--ink:#473913}.bingo-theme-green{--light:#eafaf0;--soft:#c9efd7;--mid:#61c287;--dark:#2b895a;--deep:#175b3b;--ink:#173a2b}.bingo-theme-blue{--light:#edf7ff;--soft:#cde8ff;--mid:#68afe8;--dark:#337ab8;--deep:#1b4f81;--ink:#183652}.bingo-theme-indigo{--light:#f1f2ff;--soft:#d9ddff;--mid:#8994dc;--dark:#5662ae;--deep:#343d79;--ink:#292f55}.bingo-theme-purple{--light:#faf1ff;--soft:#ead5ff;--mid:#b07bdb;--dark:#7948aa;--deep:#4e2d77;--ink:#38224a}
.bingo-dashboard{display:grid;grid-template-columns:minmax(300px,1.25fr) minmax(560px,2.5fr) 80px;gap:10px;align-items:stretch;padding:10px 14px;margin-bottom:17px;border:1px solid #d5e1ef;border-radius:18px;background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:0 5px 18px rgba(39,79,124,.08)}
.bingo-brand{display:flex;gap:12px;align-items:center;min-width:0}.bingo-logo{width:72px;height:72px;flex:0 0 72px;display:grid;place-items:center;border-radius:50%;font-size:36px;font-weight:950;color:#fff;background:linear-gradient(145deg,var(--mid),var(--deep));box-shadow:0 4px 14px rgba(20,55,90,.15)}.bingo-kicker{font-size:9.5px;letter-spacing:.14em;color:var(--dark);font-weight:900}.bingo-brand h2{margin:2px 0;font-size:22px;color:#102b50}.bingo-brand h2 small{font-size:.5em;color:#60758c}.bingo-brand p{margin:0;font-size:11px;color:#6f8298}
.bingo-history{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.bingo-stat-card{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:8px 10px;border:1px solid #d7e2ef;border-radius:12px;background:#fff}.bingo-stat-card b{font-size:16px;color:var(--deep)}.bingo-stat-card span{font-size:10px;color:#6b7e91}.bingo-user-actions{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:11px;font-weight:850}.bingo-home{width:42px;height:42px;border-radius:11px;border:1px solid #c8d9ec;background:#fff;display:grid;place-items:center;text-decoration:none;color:var(--dark);font-size:23px}.bingo-content-ad{margin:16px 0}
.bingo-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:7px;margin-bottom:12px;border:1px solid var(--mid);border-radius:15px;background:linear-gradient(135deg,var(--soft),var(--light))}.bingo-level{border:1px solid transparent;background:transparent;border-radius:11px;padding:10px;color:var(--deep);font-weight:900;cursor:pointer}.bingo-level small{display:block;margin-top:2px;font-size:10px}.bingo-level.is-active{background:#fff;border-color:var(--dark);box-shadow:0 4px 11px rgba(30,55,75,.08)}
.bingo-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;margin-bottom:13px;padding:10px 13px;border:1px solid var(--soft);border-radius:15px;background:linear-gradient(110deg,var(--light),#fff)}.bingo-toolbar strong{font-size:16px;color:var(--deep)}.bingo-toolbar span{display:block;font-size:10.5px;color:#71859c}.bingo-mode-switch{display:flex;padding:3px;border-radius:10px;background:#fff;border:1px solid var(--soft)}.bingo-mode-switch button{border:0;background:transparent;padding:7px 10px;border-radius:8px;font-weight:850;color:#657a90;cursor:pointer}.bingo-mode-switch button.is-active{background:var(--light);color:var(--deep)}.bingo-toolbar-right{display:flex;align-items:center;gap:8px}.bingo-toolbar-right>span{padding:8px 10px;border-radius:9px;background:#fff;border:1px solid var(--soft);font-weight:900;color:var(--deep)}#newBingoBtn{border:1px solid var(--dark);background:var(--dark);color:#fff;border-radius:9px;padding:8px 12px;font-weight:850;cursor:pointer}
.bingo-workspace{display:grid;grid-template-columns:minmax(0,620px) minmax(350px,1fr);gap:14px;align-items:stretch}.bingo-board-card,.bingo-side-card{position:relative;border:1px solid var(--mid);border-radius:18px;background:linear-gradient(145deg,var(--light),#fff 55%,var(--soft));box-shadow:0 8px 24px rgba(35,62,82,.06)}.bingo-board-card{padding:14px}.bingo-side-card{padding:14px}.bingo-board-head,.bingo-tile-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;color:var(--deep)}.bingo-board-head strong,.bingo-tile-head strong{font-size:15px}.bingo-board-head span,.bingo-tile-head span{font-size:11px;font-weight:900;color:var(--dark)}
.bingo-board{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;aspect-ratio:1/1}.bingo-cell{position:relative;border:1px solid var(--mid);border-radius:13px;background:radial-gradient(circle at 30% 20%,#fff,var(--light) 60%,var(--soft));box-shadow:inset 0 1px 0 #fff,0 3px 7px rgba(30,65,100,.08);color:var(--ink);cursor:pointer;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;font-weight:900}.bingo-cell .tile-icon{font-size:clamp(24px,3.5vw,44px)}.bingo-cell .tile-word{font-size:clamp(10px,1.25vw,16px);word-break:keep-all}.bingo-cell.is-empty:after{content:"+";font-size:27px;color:var(--mid);opacity:.55}.bingo-cell.is-marked{background:linear-gradient(145deg,var(--mid),var(--dark));color:#fff;transform:translateY(-2px)}.bingo-cell.is-marked:after{content:"✓";position:absolute;right:7px;top:4px;font-size:20px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.2)}.bingo-cell.is-wrong{animation:wrongFlash .42s ease}.bingo-cell.is-line{animation:bingoLine .8s cubic-bezier(.2,.75,.25,1)}.bingo-cell.is-line:before{content:"";position:absolute;inset:-20%;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.8) 48%,transparent 66%);animation:shine .75s ease}
.bingo-message{margin-top:10px;padding:9px 12px;border:1px solid var(--soft);border-radius:10px;background:#fff;color:#61778d;font-size:11.5px;font-weight:750}.bingo-message.is-success{color:#287052;background:#eefaf4}.bingo-message.is-error{color:#a1424b;background:#fff1f2}
.bingo-question-card{padding:14px;border:1px solid var(--soft);border-radius:14px;background:#fff;margin-bottom:12px}.bingo-question-card>span{font-size:9.5px;color:var(--dark);font-weight:900;letter-spacing:.12em}.bingo-question-card h3{min-height:72px;margin:7px 0;font-size:16px;line-height:1.5;color:var(--ink)}.bingo-question-card p{min-height:18px;margin:0 0 8px;font-size:10.5px;color:#7a8c9e}.bingo-question-actions{display:flex;gap:7px}.bingo-question-actions button{flex:1;border:1px solid var(--mid);border-radius:9px;background:var(--light);color:var(--deep);padding:8px;font-weight:850;cursor:pointer}.is-hidden{display:none!important}
.bingo-tile-pool{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;max-height:310px;overflow:auto;padding:2px}.pool-tile{min-height:52px;border:1px solid var(--soft);border-radius:9px;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:10px;font-weight:850;cursor:pointer;padding:3px}.pool-tile .tile-icon{font-size:22px}.pool-tile.is-selected{outline:2px solid var(--dark);background:var(--light)}.pool-tile.is-used{opacity:.3;pointer-events:none}.bingo-help{margin-top:12px;padding:11px;border:1px solid var(--soft);border-radius:12px;background:rgba(255,255,255,.7)}.bingo-help strong{font-size:12px;color:var(--deep)}.bingo-help p{margin:6px 0 0;font-size:10px;line-height:1.55;color:#6e8297}
.bingo-celebration{position:absolute;inset:14px 14px 55px;z-index:20;display:none;align-items:center;justify-content:center;border-radius:14px;overflow:hidden;pointer-events:none;background:rgba(255,255,255,.13);backdrop-filter:blur(1px)}.bingo-celebration.is-show{display:flex}.bingo-celebration strong{position:relative;z-index:3;padding:.22em .38em;border-radius:14px;background:rgba(255,255,255,.88);color:var(--deep);font-size:clamp(40px,7vw,78px);box-shadow:0 10px 30px rgba(20,50,80,.15);animation:pop .65s ease both}.bingo-confetti{position:absolute;inset:-30% 0 0;background:radial-gradient(circle,var(--mid) 0 4px,transparent 5px) 0 0/70px 90px,radial-gradient(circle,var(--dark) 0 3px,transparent 4px) 30px 10px/90px 75px;animation:fall 1.8s linear infinite}
@keyframes wrongFlash{50%{background:#ffd8dc;border-color:#d95763;transform:translateX(3px)}}@keyframes bingoLine{45%{transform:translateY(-7px) scale(1.025)}100%{transform:none}}@keyframes shine{from{transform:translateX(-120%)}to{transform:translateX(120%)}}@keyframes pop{from{opacity:0;transform:scale(.65)}to{opacity:1;transform:scale(1)}}@keyframes fall{from{background-position:0 -180px,30px -150px}to{background-position:0 650px,30px 710px}}
html.bp-dark .bingo-dashboard,html.bp-dark .bingo-board-card,html.bp-dark .bingo-side-card,html.bp-dark .bingo-toolbar{background:#111d2c!important;border-color:#36506d!important;color:#dce8f3!important}html.bp-dark .bingo-stat-card,html.bp-dark .bingo-home,html.bp-dark .bingo-question-card,html.bp-dark .pool-tile,html.bp-dark .bingo-help,html.bp-dark .bingo-message{background:#172436!important;border-color:#36506d!important;color:#dce8f3!important}html.bp-dark .bingo-brand h2,html.bp-dark .bingo-toolbar strong,html.bp-dark .bingo-question-card h3,html.bp-dark .bingo-board-head,html.bp-dark .bingo-tile-head{color:#eef6ff!important}html.bp-dark .bingo-cell{background:linear-gradient(145deg,#17283b,#111c2a)!important;border-color:#405f7e!important;color:#eef6ff!important}html.bp-dark .bingo-levels{background:#111d2c!important;border-color:#36506d!important}html.bp-dark .bingo-level{color:#a9bbcc!important}html.bp-dark .bingo-level.is-active{background:#172436!important;color:#eef6ff!important}
@media(max-width:1050px){.bingo-dashboard{grid-template-columns:1fr}.bingo-history{grid-template-columns:repeat(4,1fr)}.bingo-user-actions{flex-direction:row;justify-content:flex-end}.bingo-workspace{grid-template-columns:minmax(0,1fr) 340px}}
@media(max-width:760px){.bingo-page{width:calc(100% - 20px)}.bingo-history{grid-template-columns:repeat(2,1fr)}.bingo-levels{grid-template-columns:1fr}.bingo-toolbar{grid-template-columns:1fr}.bingo-workspace{grid-template-columns:1fr}.bingo-board{gap:4px}.bingo-cell{border-radius:9px}.bingo-tile-pool{max-height:none}}

/* 20-question bingo: larger instruction text */
.bingo-help strong{font-size:14px!important}
.bingo-help p{font-size:12.5px!important;line-height:1.72!important}
.bingo-question-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bingo-question-meta>span{font-size:10px;color:var(--dark);font-weight:900;letter-spacing:.12em}
.bingo-question-meta>b{font-size:11px;color:var(--deep);padding:4px 7px;border-radius:8px;background:var(--light);border:1px solid var(--soft);white-space:nowrap}
html.bp-dark .bingo-question-meta>b{background:#172436!important;border-color:#36506d!important;color:#eef6ff!important}

/* 2026-08-14: dashboard/stat cards fully follow the active rainbow theme */
.bingo-dashboard{
    border-color:color-mix(in srgb,var(--mid) 45%,#d5e1ef)!important;
    background:
      radial-gradient(circle at 10% 0%,rgba(255,255,255,.94),transparent 35%),
      linear-gradient(135deg,var(--light) 0%,#fff 46%,var(--soft) 100%)!important;
    box-shadow:0 8px 24px color-mix(in srgb,var(--dark) 13%,transparent)!important;
}
.bingo-stat-card{
    border-color:color-mix(in srgb,var(--mid) 38%,#d7e2ef)!important;
    background:
      linear-gradient(155deg,rgba(255,255,255,.96) 0%,var(--light) 62%,var(--soft) 100%)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 12px color-mix(in srgb,var(--dark) 9%,transparent)!important;
}
.bingo-stat-card b{color:var(--deep)!important}
.bingo-stat-card span:first-child{color:var(--dark)!important;font-weight:850}
.bingo-stat-card span:last-child{color:color-mix(in srgb,var(--deep) 67%,#8797a8)!important}
.bingo-brand h2{color:var(--deep)!important}
.bingo-brand p{color:color-mix(in srgb,var(--deep) 58%,#8999a9)!important}
.bingo-user-actions span{color:var(--deep)!important}
.bingo-home{
    color:var(--deep)!important;
    border-color:color-mix(in srgb,var(--mid) 46%,#c8d9ec)!important;
    background:linear-gradient(145deg,#fff,var(--light))!important;
}

/* Mini 5x5 bingo logo */
.bingo-logo{
    width:72px!important;
    height:72px!important;
    flex:0 0 72px!important;
    display:grid!important;
    grid-template-columns:repeat(5,1fr)!important;
    grid-template-rows:repeat(5,1fr)!important;
    gap:2px!important;
    padding:9px!important;
    box-sizing:border-box!important;
    border-radius:18px!important;
    background:linear-gradient(145deg,var(--mid),var(--deep))!important;
    border:1px solid color-mix(in srgb,var(--deep) 70%,#fff)!important;
    box-shadow:0 6px 17px color-mix(in srgb,var(--deep) 24%,transparent),inset 0 1px 0 rgba(255,255,255,.35)!important;
}
.bingo-logo span{
    min-width:0;
    min-height:0;
    border-radius:3px;
    border:1px solid rgba(255,255,255,.62);
    background:rgba(255,255,255,.23);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.bingo-logo span.on{
    position:relative;
    background:#fff;
    border-color:#fff;
}
.bingo-logo span.on:after{
    content:"✓";
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    color:var(--dark);
    font-size:7px;
    font-weight:1000;
    line-height:1;
}
.bingo-logo span.free{
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.92);
    color:var(--dark);
    border-color:#fff;
    font-size:7px;
    line-height:1;
}

/* dark mode still uses theme hue rather than flat gray */
html.bp-dark .bingo-dashboard{
    background:
      radial-gradient(circle at 10% 0%,color-mix(in srgb,var(--mid) 16%,#111d2c),transparent 36%),
      linear-gradient(135deg,color-mix(in srgb,var(--deep) 22%,#111d2c),#111d2c 52%,color-mix(in srgb,var(--mid) 13%,#111d2c))!important;
    border-color:color-mix(in srgb,var(--mid) 35%,#36506d)!important;
}
html.bp-dark .bingo-stat-card{
    background:linear-gradient(150deg,color-mix(in srgb,var(--deep) 18%,#172436),#172436 58%,color-mix(in srgb,var(--mid) 12%,#172436))!important;
    border-color:color-mix(in srgb,var(--mid) 32%,#36506d)!important;
}
html.bp-dark .bingo-stat-card b,
html.bp-dark .bingo-stat-card span:first-child,
html.bp-dark .bingo-brand h2,
html.bp-dark .bingo-user-actions span{color:#eef6ff!important}
html.bp-dark .bingo-brand p,
html.bp-dark .bingo-stat-card span:last-child{color:#aebfd0!important}

/* BiblePang v5: Word Search-style stat icons */
.bingo-stat-card{display:grid!important;grid-template-columns:38px minmax(0,1fr)!important;align-items:center!important;gap:8px!important}
.bingo-stat-icon{width:34px;height:34px;display:grid;place-items:center;color:var(--deep)}
.bingo-stat-icon svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.bingo-stat-copy{display:flex;flex-direction:column;min-width:0}
.bingo-stat-copy>span{font-size:10px!important;color:var(--dark)!important;font-weight:850}
.bingo-stat-copy>b{font-size:14px!important;line-height:1.2}
.bingo-stat-copy>small{font-size:9px;color:color-mix(in srgb,var(--deep) 67%,#8797a8);white-space:nowrap}
.stat-play .bingo-stat-icon{color:#7164d8}.stat-best .bingo-stat-icon{color:#e7a11b}.stat-level .bingo-stat-icon{color:#27ada2}.stat-points .bingo-stat-icon{color:#ec991a}
html.bp-dark .bingo-stat-copy>span,html.bp-dark .bingo-stat-copy>b{color:#eef6ff!important}
html.bp-dark .bingo-stat-copy>small{color:#aebfd0!important}

/* v6 color image icons */

.bingo-stat-icon{width:40px!important;height:40px!important;background:transparent!important;display:grid!important;place-items:center!important}
.bingo-stat-icon img{display:block!important;width:38px!important;height:38px!important;object-fit:contain!important;max-width:none!important}
.bingo-stat-icon svg{display:none!important}

/* v7: Bingo icons — smaller, colored PNG, never black */
.bingo-stat-card{grid-template-columns:34px minmax(0,1fr)!important}
.bingo-stat-icon{width:32px!important;height:32px!important;background:transparent!important;display:grid!important;place-items:center!important}
.bingo-stat-icon img{width:30px!important;height:30px!important;display:block!important;object-fit:contain!important;filter:none!important}
.bingo-stat-icon svg{display:none!important}


/* ==========================================================
   BiblePang Bingo v8 — stable loading state
   ========================================================== */

/* 로딩 카드 하나만 통계 영역 전체 폭을 사용합니다. */
.bingo-history .bingo-stat-loading{
    grid-column:1 / -1!important;
    width:100%!important;
    min-width:0!important;
    height:64px!important;
    min-height:64px!important;
    max-height:64px!important;
    padding:4px 10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
}

/* 기존 통계 글자보다 두 단계 작게 + 절대 줄바꿈 금지 */
.bingo-history .bingo-stat-loading span,
.bingo-history .bingo-stat-loading b{
    display:block!important;
    margin:0!important;
    padding:0!important;
    font-size:7.5px!important;
    line-height:1!important;
    font-weight:650!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    color:color-mix(in srgb,var(--deep) 62%,#7d8c9b)!important;
}

/* 로딩 문구에는 일반 통계카드용 아이콘/2열 grid 규칙을 사용하지 않음 */
.bingo-history .bingo-stat-loading{
    grid-template-columns:1fr!important;
    gap:0!important;
}

/* 다크모드 */
html.bp-dark .bingo-history .bingo-stat-loading,
body.bp-dark .bingo-history .bingo-stat-loading,
html[data-theme="dark"] .bingo-history .bingo-stat-loading{
    background:color-mix(in srgb,var(--deep) 20%,#15212d)!important;
    border-color:color-mix(in srgb,var(--mid) 48%,#33485d)!important;
}
html.bp-dark .bingo-history .bingo-stat-loading span,
body.bp-dark .bingo-history .bingo-stat-loading span,
html[data-theme="dark"] .bingo-history .bingo-stat-loading span{
    color:#aebdcb!important;
}