@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap");
/* RevUpBrain 게임 페이지 공통 틀: 상단 메뉴, 하단 푸터, 게임별 주제 배경
   클래스 이름은 rub- 로 시작해서 각 게임의 스타일과 겹치지 않게 합니다. */

html {
    position: relative;
    min-height: 100%;
}

/* 고정 메뉴와 하단 푸터 자리를 비워 둠 (높이는 js/game-shell.js가 실제 값으로 맞춤) */
body.rub-game {
    box-sizing: border-box !important;
    padding-top: calc(var(--rub-header-h, 76px) + 20px) !important;
    margin-bottom: 70px !important;
    min-height: calc(100vh - 70px) !important;
}

/* 게임별 주제 배경 (화면에 고정된 반복 무늬) */
body.rub-game::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: #e6f7ff;
    background-repeat: repeat;
    background-size: 200px 200px;
    pointer-events: none;
}

.rub-bg-bibleVerseMemory::before { background-image: url("../images/bg/bibleVerseMemory.svg"); }
.rub-bg-bibleVerseBlank::before { background-image: url("../images/bg/bibleVerseBlank.svg"); }
.rub-bg-biblePeople::before { background-image: url("../images/bg/biblePeople.svg"); }
.rub-bg-bibleGuess::before { background-image: url("../images/bg/bibleGuess.svg"); }
.rub-bg-bibleOrder::before { background-image: url("../images/bg/bibleOrder.svg"); }
.rub-bg-bibleNumbers::before { background-image: url("../images/bg/bibleNumbers.svg"); }
.rub-bg-bibleFamily::before { background-image: url("../images/bg/bibleFamily.svg"); }
.rub-bg-bibleSnake::before { background-image: url("../images/bg/bibleSnake.svg"); }
.rub-bg-bibleTower::before { background-image: url("../images/bg/bibleTower.svg"); }
.rub-bg-bibleSlice::before { background-image: url("../images/bg/bibleSlice.svg"); }
.rub-bg-bibleDove::before { background-image: url("../images/bg/bibleDove.svg"); }
.rub-bg-wildValley::before { background-image: url("../images/bg/wildValley.svg"); }
.rub-bg-wildFarm::before { background-image: url("../images/bg/wildValley.svg"); }
.rub-bg-largerNumber::before { background-image: url("../images/bg/largerNumber.svg"); }
.rub-bg-mathMaze::before { background-image: url("../images/bg/mathMaze.svg"); }
.rub-bg-math::before { background-image: url("../images/bg/math.svg"); }
.rub-bg-sudoku::before { background-image: url("../images/bg/sudoku.svg"); }
.rub-bg-multiplicationFruit::before { background-image: url("../images/bg/multiplicationFruit.svg"); }
.rub-bg-wordPuzzle::before { background-image: url("../images/bg/wordPuzzle.svg"); }
.rub-bg-wordSearch::before { background-image: url("../images/bg/wordSearch.svg"); }
.rub-bg-etymology::before { background-image: url("../images/bg/etymology.svg"); }
.rub-bg-mineFind::before { background-image: url("../images/bg/mineFind.svg"); }
.rub-bg-blockPuzzle::before { background-image: url("../images/bg/blockPuzzle.svg"); }
.rub-bg-gravityBall::before { background-image: url("../images/bg/gravityBall.svg"); }
.rub-bg-fallacy::before { background-image: url("../images/bg/fallacy.svg"); }
.rub-bg-scenario::before { background-image: url("../images/bg/scenario.svg"); }
.rub-bg-neuralNetwork::before { background-image: url("../images/bg/neuralNetwork.svg"); }
.rub-bg-QRcodeGen::before { background-image: url("../images/bg/QRcodeGen.svg"); }
.rub-bg-couplematcher::before { background-image: url("../images/bg/couplematcher.svg"); }
.rub-bg-lottieViewer::before { background-image: url("../images/bg/lottieViewer.svg"); }
.rub-bg-customWordSearch::before { background-image: url("../images/bg/customWordSearch.svg"); }
.rub-bg-abcBalloons::before { background-image: url("../images/bg/abcBalloons.svg"); }
.rub-bg-natureDance::before { background-image: url("../images/bg/natureDance.svg"); }

/* --- 상단 메뉴 (index.html과 같은 모양) --- */
.rub-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding: 12px 30px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 4px solid #ffd84d;
    box-shadow: 0 4px 20px rgba(40, 90, 160, 0.15);
    font-family: 'Fredoka', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    box-sizing: border-box;
    text-align: left;
}

.rub-header .rub-logo {
    font-size: 2.2em;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.3;
    text-decoration: none;
}

.rub-header .rub-logo span:nth-child(6n+1) { color: #ff5c7a; }
.rub-header .rub-logo span:nth-child(6n+2) { color: #ff9a3d; }
.rub-header .rub-logo span:nth-child(6n+3) { color: #f5b800; }
.rub-header .rub-logo span:nth-child(6n+4) { color: #2fbf71; }
.rub-header .rub-logo span:nth-child(6n+5) { color: #3b8bff; }
.rub-header .rub-logo span:nth-child(6n+6) { color: #9b6bff; }

.rub-header .rub-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rub-header .rub-nav a {
    display: inline-block;
    font-size: 1.05rem;
    font-weight: 600;
    color: #2f3357;
    padding: 8px 16px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.rub-header .rub-nav a:hover {
    background: #ffd84d;
    color: #2f3357;
}

.rub-header .rub-nav a.active {
    background: #2f3357;
    color: #fff;
}

.rub-header a:focus-visible,
.rub-footer a:focus-visible {
    outline: 4px solid #2f3357;
    outline-offset: 3px;
}

/* --- 하단 푸터 --- */
.rub-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-top: 4px solid #2fbf71;
    color: #2f3357;
    font-family: 'Fredoka', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
}

.rub-footer .rub-footer-brand {
    font-size: 1.2em;
    font-weight: 700;
}

.rub-footer a {
    color: #2f3357;
    font-weight: 600;
    text-decoration: underline;
}

/* 휴대폰: 메뉴를 한 줄 가로 스크롤로 줄여 게임 화면을 넓게 씀 */
@media (max-width: 860px) {
    .rub-header { padding: 8px 14px; }
    .rub-header .rub-logo { font-size: 1.6em; }
    .rub-header .rub-nav {
        width: 100%;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .rub-header .rub-nav::-webkit-scrollbar { display: none; }
    .rub-header .rub-nav a { font-size: 0.95rem; padding: 5px 12px; }
    .rub-footer { padding: 0 16px; }
}

/* --- 배경 무늬 위에 바로 놓인 제목과 조작 영역을 흰 카드로 감싸 읽기 쉽게 --- */
.rub-title-pill {
    display: inline-block;
    background: rgba(255, 255, 255, 0.92);
    padding: 6px 28px !important;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(40, 90, 160, 0.15);
    font-family: 'Fredoka', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.rub-title-card {
    background: rgba(255, 255, 255, 0.92);
    padding: 16px 28px;
    border-radius: 24px;
    box-shadow: 0 6px 18px rgba(40, 90, 160, 0.15);
}

.rub-title-card h1 {
    font-family: 'Fredoka', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.rub-panel {
    background: rgba(255, 255, 255, 0.92);
    padding: 14px 20px;
    border-radius: 22px;
    box-shadow: 0 8px 22px rgba(40, 90, 160, 0.15);
    box-sizing: border-box;
}

/* 성경 번역본 저작권 표시 */
.rub-credit {
    max-width: 640px;
    margin: 16px auto 0;
    padding: 6px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.85);
    color: #5a6080;
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: center;
}

/* =====================================================================
   프리미엄 디자인 층 (모든 게임 공통)
   - 게임마다 주제 색(--rub-h, 색상환 각도)으로 부드러운 그라디언트 배경
   - 무늬는 아주 은은하게, 큰 흰 판은 '카드'(js/game-shell.js가 .rub-card를 붙임)
   - 버튼은 원래 색은 지키면서 그라디언트·광택·부드러운 그림자로
   ===================================================================== */
body.rub-game { --rub-h: 220; }
.rub-bg-bibleVerseMemory { --rub-h: 40; }
.rub-bg-bibleVerseBlank  { --rub-h: 30; }
.rub-bg-biblePeople      { --rub-h: 150; }
.rub-bg-bibleGuess       { --rub-h: 330; }
.rub-bg-bibleOrder       { --rub-h: 28; }
.rub-bg-bibleNumbers     { --rub-h: 265; }
.rub-bg-bibleFamily      { --rub-h: 140; }
.rub-bg-bibleSnake       { --rub-h: 120; }
.rub-bg-bibleTower       { --rub-h: 28; }
.rub-bg-bibleSlice       { --rub-h: 350; }
.rub-bg-bibleDove        { --rub-h: 205; }
.rub-bg-wildValley       { --rub-h: 110; }
.rub-bg-wildFarm         { --rub-h: 85; }
.rub-bg-largerNumber     { --rub-h: 45; }
.rub-bg-mathMaze         { --rub-h: 170; }
.rub-bg-math             { --rub-h: 350; }
.rub-bg-sudoku           { --rub-h: 215; }
.rub-bg-multiplicationFruit { --rub-h: 10; }
.rub-bg-wordPuzzle       { --rub-h: 320; }
.rub-bg-wordSearch       { --rub-h: 200; }
.rub-bg-etymology        { --rub-h: 140; }
.rub-bg-mineFind         { --rub-h: 95; }
.rub-bg-blockPuzzle      { --rub-h: 25; }
.rub-bg-gravityBall      { --rub-h: 250; }
.rub-bg-fallacy          { --rub-h: 35; }
.rub-bg-scenario         { --rub-h: 160; }
.rub-bg-neuralNetwork    { --rub-h: 275; }
.rub-bg-QRcodeGen        { --rub-h: 225; }
.rub-bg-couplematcher    { --rub-h: 335; }
.rub-bg-lottieViewer     { --rub-h: 200; }
.rub-bg-customWordSearch { --rub-h: 285; }
.rub-bg-imageToSvg       { --rub-h: 190; }
.rub-bg-backgroundRemover { --rub-h: 262; }
.rub-bg-imageUpscaler { --rub-h: 200; }
.rub-bg-speechToText { --rub-h: 340; }
.rub-bg-imageToText { --rub-h: 160; }
.rub-bg-textToSpeech { --rub-h: 30; }
.rub-bg-abcBalloons      { --rub-h: 200; }
.rub-bg-natureDance      { --rub-h: 140; }

/* 배경: 주제 색의 부드러운 빛 번짐 세 개 + 아주 은은한 무늬 */
body.rub-game {
    background:
        radial-gradient(1100px 700px at 8% -8%, hsl(var(--rub-h) 95% 90% / 0.95), transparent 62%),
        radial-gradient(900px 650px at 105% 12%, hsl(calc(var(--rub-h) + 45) 90% 91% / 0.9), transparent 60%),
        radial-gradient(1100px 800px at 45% 115%, hsl(calc(var(--rub-h) - 35) 85% 92% / 0.9), transparent 62%),
        linear-gradient(180deg, hsl(var(--rub-h) 60% 98%), hsl(var(--rub-h) 45% 96%)) !important;
    background-attachment: fixed !important;
    font-family: 'Nunito', 'Fredoka', 'Segoe UI', sans-serif;
    color: #23264a;
}
body.rub-game::before {
    background-color: transparent;
    opacity: 0.14;
    background-size: 240px 240px;
}

/* 제목 */
body.rub-game h1, body.rub-game h2, body.rub-game h3 {
    font-family: 'Fredoka', 'Nunito', sans-serif;
    letter-spacing: 0.2px;
}
body.rub-game h1 { color: #1e2350; font-weight: 700; }
.rub-title-pill {
    background: rgba(255, 255, 255, 0.82) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 14px 34px -14px hsl(var(--rub-h) 55% 30% / 0.38) !important;
    color: #1e2350 !important;
}

/* 카드: 반투명 흰 유리 + 주제 색 윗줄 + 겹 그림자 */
body.rub-game .rub-card {
    background: rgba(255, 255, 255, 0.86) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    backdrop-filter: blur(16px) saturate(1.15);
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: 28px !important;
    box-shadow:
        inset 0 4px 0 hsl(var(--rub-h) 85% 62%),
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 30px 60px -24px hsl(var(--rub-h) 55% 28% / 0.32),
        0 10px 24px -14px rgba(20, 30, 70, 0.2) !important;
}
body.rub-game .rub-panel { border-radius: 24px; }

/* 입력 칸 */
body.rub-game input[type="text"], body.rub-game input[type="number"], body.rub-game input[type="email"],
body.rub-game input:not([type]), body.rub-game textarea, body.rub-game select {
    border: 1.5px solid #dde2f0;
    border-radius: 12px;
    background-color: #fbfcff;
    font-family: 'Nunito', sans-serif;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.rub-game input:focus, body.rub-game textarea:focus, body.rub-game select:focus {
    outline: none;
    border-color: hsl(var(--rub-h) 75% 55%);
    box-shadow: 0 0 0 4px hsl(var(--rub-h) 85% 60% / 0.18);
}

/* 버튼: 원래 색 계열을 지키며 그라디언트·광택·부드러운 그림자 (게임 조각은 제외) */
body.rub-game button:is([class*="bg-blue-"], [class*="bg-sky-"], [class*="bg-indigo-"]) { --b1: #6aa3ff; --b2: #3d6cf2; --bs: 61 108 242; }
body.rub-game button:is([class*="bg-green-"], [class*="bg-emerald-"], [class*="bg-teal-"], [class*="bg-lime-"]) { --b1: #4fd99a; --b2: #16a865; --bs: 22 168 101; }
body.rub-game button:is([class*="bg-red-"], [class*="bg-rose-"], [class*="bg-pink-"]) { --b1: #ff7d93; --b2: #e63e62; --bs: 230 62 98; }
body.rub-game button:is([class*="bg-yellow-"], [class*="bg-amber-"], [class*="bg-orange-"]) { --b1: #ffc94d; --b2: #f29a12; --bs: 242 154 18; }
body.rub-game button:is([class*="bg-purple-"], [class*="bg-violet-"], [class*="bg-fuchsia-"]) { --b1: #b18cff; --b2: #7c4ef0; --bs: 124 78 240; }
body.rub-game button:is([class*="bg-gray-"], [class*="bg-slate-"]) { --b1: #a3abc4; --b2: #6b7494; --bs: 107 116 148; }

body.rub-game button.rub-colored,
body.rub-game .rub-btn {
    background-image: linear-gradient(180deg, var(--b1, #6aa3ff), var(--b2, #3d6cf2)) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 14px !important;
    font-family: 'Fredoka', 'Nunito', sans-serif;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.08), 0 8px 18px -8px rgb(var(--bs, 61 108 242) / 0.65) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
body.rub-game button.rub-colored:hover:not(:disabled),
body.rub-game .rub-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.05) saturate(1.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(0, 0, 0, 0.08), 0 14px 24px -10px rgb(var(--bs, 61 108 242) / 0.7) !important;
}
body.rub-game button:active:not(:disabled) { transform: translateY(1px); }
body.rub-game button:disabled { cursor: not-allowed; }

/* 성경 게임의 '젤리 버튼'도 같은 느낌으로 */
body.rub-game :is(.rock-button, .ui-rock-button) {
    background: linear-gradient(180deg, color-mix(in srgb, var(--rock-color, #7b8fd6) 70%, white), var(--rock-color, #7b8fd6)) !important;
    border: 0 !important;
    font-family: 'Fredoka', 'Nunito', sans-serif;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(0, 0, 0, 0.1), 0 8px 16px -8px var(--rock-shadow, #5164a8) !important;
}
body.rub-game :is(.rock-button, .ui-rock-button):hover:not(:disabled) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 0 rgba(0, 0, 0, 0.1), 0 14px 22px -10px var(--rock-shadow, #5164a8) !important;
}

/* 하단 푸터·저작권 줄도 유리 느낌으로 */
.rub-footer { background: rgba(255, 255, 255, 0.78); box-shadow: 0 -10px 30px -18px hsl(var(--rub-h, 220) 50% 30% / 0.3); }
.rub-credit { background: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* 상단 메뉴·하단 푸터: 굵은 색 줄 대신 얇은 무지개 빛 줄과 유리 느낌 */
.rub-header {
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 0;
    box-shadow: 0 10px 30px -18px rgba(30, 40, 90, 0.35);
}
.rub-header::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, #ff5c7a, #ff9a3d, #ffd84d, #2fbf71, #3b8bff, #9b6bff);
    opacity: 0.85;
}
.rub-footer { border-top: 0; }
.rub-footer::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, #ff5c7a, #ff9a3d, #ffd84d, #2fbf71, #3b8bff, #9b6bff);
    opacity: 0.6;
}
.rub-header .rub-nav a { transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.rub-header .rub-nav a.active { box-shadow: 0 6px 16px -8px rgba(47, 51, 87, 0.7); }

/* =====================================================================
   게임별 고급 스킨 (body의 rub-bg-게임이름 으로 범위를 정함)
   ===================================================================== */

/* --- 스도쿠: 둥근 판, 부드러운 칸, 3×3 굵은 선은 진한 남색 --- */
.rub-bg-sudoku #sudoku-board {
    border: 0 !important;
    border-radius: 18px !important;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 3px #2c3f86, 0 22px 44px -18px rgba(30, 50, 140, 0.5) !important;
}
.rub-bg-sudoku #sudoku-board > .cell {
    font-family: 'Fredoka', 'Nunito', sans-serif;
    font-weight: 600;
    color: #5b3fd6;
    border-color: #e4e9f6;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.rub-bg-sudoku #sudoku-board > .cell:hover { background-color: #eef3ff; }
.rub-bg-sudoku #sudoku-board > .cell.given { background: #f3f6ff; color: #1e2a5a; font-weight: 700; }
.rub-bg-sudoku #sudoku-board > .cell.selected { background: linear-gradient(180deg, #e2eaff, #c9d8ff); box-shadow: inset 0 0 0 2px #4b6cf2; }
.rub-bg-sudoku #sudoku-board > .cell.conflict { background: #ffe8ee; color: #e63e62; }
.rub-bg-sudoku #sudoku-board > .cell:nth-child(3n) { border-right: 2px solid #2c3f86; }
.rub-bg-sudoku #sudoku-board > .cell:nth-child(9n) { border-right: 1px solid #e4e9f6; }
.rub-bg-sudoku #sudoku-board > .cell:nth-child(n+19):nth-child(-n+27),
.rub-bg-sudoku #sudoku-board > .cell:nth-child(n+46):nth-child(-n+54) { border-bottom: 2px solid #2c3f86; }
.rub-bg-sudoku #sudoku-board > .cell:nth-child(n+73):nth-child(-n+81) { border-bottom: 1px solid #e4e9f6; }
.rub-bg-sudoku #number-pad {
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 22px 44px -16px rgba(30, 50, 140, 0.45) !important;
}
.rub-bg-sudoku .pad-button {
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #f6f8ff, #e3e9fb) !important;
    color: #2c3f86 !important;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    box-shadow: inset 0 1px 0 #fff, 0 4px 10px -6px rgba(30, 50, 140, 0.5) !important;
}
.rub-bg-sudoku .pad-button:hover { background: linear-gradient(180deg, #6aa3ff, #3d6cf2) !important; color: #fff !important; }

/* --- 단어 찾기: 칸은 하얀 타일, 고르면 파랑, 찾으면 초록 --- */
.rub-bg-wordSearch #wordsearch-grid {
    background-color: #e3e9f7 !important;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 0 0 2px #cdd7ef, 0 18px 36px -18px rgba(30, 60, 140, 0.45);
}
.rub-bg-wordSearch .grid-cell {
    font-family: 'Fredoka', 'Nunito', sans-serif;
    font-weight: 600;
    color: #2a3366;
    border-color: #edf1fa !important;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.rub-bg-wordSearch .grid-cell.selected { background: linear-gradient(180deg, #dce8ff, #c4d6ff) !important; color: #1d3fbf; }
.rub-bg-wordSearch .grid-cell.found { background: linear-gradient(180deg, #def8ea, #c3efd8) !important; color: #138a52; }
.rub-bg-wordSearch #word-list li {
    padding: 3px 10px;
    margin: 3px 0;
    border-radius: 999px;
    background: #f2f5ff;
    color: #2a3366;
    font-weight: 600;
}
.rub-bg-wordSearch #word-list li.found-word { background: #ddf6e9; color: #138a52; }

/* --- 단어 퍼즐: 둥근 판, 빈칸은 은은한 회청색, 채우면 흰색 타일, 단어 카드 --- */
.rub-bg-wordPuzzle #puzzle-grid {
    border: 0 !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #fbfcff, #f1f4fc) !important;
    box-shadow: 0 0 0 2px #e1e6f4, 0 20px 40px -18px rgba(60, 40, 140, 0.4) !important;
}
.rub-bg-wordPuzzle .letter-box {
    border: 1px solid #d5dcef !important;
    border-radius: 7px !important;
    background-color: #e8edf8 !important;
    font-family: 'Fredoka', 'Nunito', sans-serif !important;
    color: #2a2f66 !important;
    box-shadow: inset 0 1px 2px rgba(30, 40, 90, 0.08);
}
.rub-bg-wordPuzzle .letter-box.filled {
    background: linear-gradient(180deg, #ffffff, #f2f0ff) !important;
    border-color: #a99cf2 !important;
    color: #4b2fbf !important;
    box-shadow: 0 2px 6px -2px rgba(90, 60, 200, 0.35);
}
.rub-bg-wordPuzzle .word-bank-container {
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 18px 36px -18px rgba(60, 40, 140, 0.4) !important;
}
.rub-bg-wordPuzzle .word-block {
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #ffffff, #eef1fb) !important;
    color: #2a2f66 !important;
    font-family: 'Fredoka', 'Nunito', sans-serif;
    letter-spacing: 0.5px;
    box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #dde3f3, 0 6px 14px -8px rgba(60, 40, 140, 0.45) !important;
}
.rub-bg-wordPuzzle .word-block:hover { transform: translateY(-2px); }
.rub-bg-wordPuzzle .word-block.tap-selected {
    background: linear-gradient(180deg, #ffe58a, #ffcc3d) !important;
    box-shadow: 0 0 0 3px rgba(255, 204, 61, 0.45), 0 10px 18px -8px rgba(240, 160, 0, 0.6) !important;
}
.rub-bg-wordPuzzle #definition-box {
    border: 0 !important;
    border-radius: 14px !important;
    background: #f4f2ff !important;
    color: #3a3470 !important;
    box-shadow: inset 0 0 0 1px #e3ddff !important;
}

/* --- 지뢰 찾기: 잔디밭 판 (둥근 액자, 윤기 나는 잔디 칸, 열린 칸은 모래색) --- */
.rub-bg-mineFind #game-board {
    background: linear-gradient(160deg, #4f9c3d, #3a7a2c) !important;
    border: 0 !important;
    border-radius: 22px !important;
    padding: 10px !important;
    gap: 3px !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.7), 0 26px 50px -20px rgba(40, 90, 30, 0.6) !important;
}
.rub-bg-mineFind .cell {
    border-radius: 7px;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.14);
}
.rub-bg-mineFind .cell.revealed {
    background: linear-gradient(180deg, #fff9e8, #f4e4bd);
    box-shadow: inset 0 2px 4px rgba(120, 80, 20, 0.18);
}

/* --- 목표 숫자: 윤기 나는 숫자 타일, 고르면 금색 --- */
.rub-bg-math .number-button {
    background: linear-gradient(180deg, #6aa3ff, #3d6cf2) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 0 rgba(0, 0, 0, 0.12), 0 10px 20px -10px rgba(61, 108, 242, 0.7) !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.rub-bg-math .number-button.selected { background: linear-gradient(180deg, #ffd56b, #f29a12) !important; }
.rub-bg-math .op-button {
    background: linear-gradient(180deg, #ffd56b, #f5a400) !important;
    border: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -3px 0 rgba(0, 0, 0, 0.12), 0 10px 20px -10px rgba(242, 154, 18, 0.75) !important;
}
.rub-bg-math .op-button.selected { background: linear-gradient(180deg, #b18cff, #7c4ef0) !important; }
.rub-bg-math .tn-card { border-top: 0 !important; }
.rub-bg-math .tn-target {
    border: 0 !important;
    background: linear-gradient(180deg, #ffffff, #eef2ff) !important;
    box-shadow: 0 0 0 3px #c7d2fe, 0 14px 28px -12px rgba(79, 70, 229, 0.5);
}

/* --- 블록 퍼즐: 판은 은은한 회청색 액자, 칸은 부드러운 흰 타일 --- */
.rub-bg-blockPuzzle #game-board {
    background: linear-gradient(180deg, #e9eef9, #dde4f4) !important;
    border: 0 !important;
    border-radius: 16px;
    padding: 6px;
    box-shadow: inset 0 2px 6px rgba(30, 40, 90, 0.12), 0 0 0 2px #fff, 0 16px 34px -16px rgba(30, 40, 90, 0.4);
}
.rub-bg-blockPuzzle .board-cell { border-color: #dfe5f3 !important; border-radius: 4px; }

/* --- 어원 탐험: 고르는 답을 카드처럼 --- */
.rub-bg-etymology .option-button {
    border: 1.5px solid #e3e8f5 !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #ffffff, #f7f9ff) !important;
    box-shadow: 0 6px 16px -10px rgba(30, 40, 90, 0.35) !important;
}
.rub-bg-etymology .option-button:hover:not(:disabled) {
    border-color: hsl(var(--rub-h) 60% 55%) !important;
    background: linear-gradient(180deg, #ffffff, hsl(var(--rub-h) 70% 96%)) !important;
    box-shadow: 0 12px 22px -12px hsl(var(--rub-h) 50% 30% / 0.45) !important;
}
.rub-bg-etymology .option-button.selected:not(:disabled) {
    border-color: hsl(var(--rub-h) 60% 45%) !important;
    background: hsl(var(--rub-h) 70% 93%) !important;
}

/* --- 논리 오류·짐 싸기: 고르는 줄을 카드처럼, 고르면 주제 색 --- */
.rub-bg-fallacy #choices-container > div,
.rub-bg-scenario .item-option {
    border: 1.5px solid #e3e8f5 !important;
    border-radius: 14px !important;
    background: #fff;
    box-shadow: 0 4px 12px -8px rgba(30, 40, 90, 0.3);
    transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.rub-bg-fallacy #choices-container > div:hover,
.rub-bg-scenario .item-option:hover { transform: translateY(-1px); border-color: hsl(var(--rub-h) 60% 60%) !important; }
.rub-bg-fallacy #choices-container > div:has(input:checked),
.rub-bg-scenario .item-option:has(input:checked) {
    border-color: hsl(var(--rub-h) 65% 48%) !important;
    background: hsl(var(--rub-h) 75% 95%) !important;
}
.rub-bg-fallacy input[type="radio"]:checked + label { background: transparent !important; }
.rub-bg-fallacy body, body.rub-bg-fallacy, body.rub-bg-scenario { font-family: 'Nunito', 'Fredoka', sans-serif !important; }

/* --- 도구 설명·사용법·FAQ 칸 (검색엔진과 처음 온 사람을 위해) --- */
body.rub-game { flex-wrap: wrap; }
.rub-seo {
    flex: 0 0 100%;
    width: min(100% - 28px, 1000px);
    max-width: 1000px;
    align-self: center;
    box-sizing: border-box;
    margin: 28px auto 24px;
    padding: clamp(18px, 3vw, 30px);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 20px 44px -26px hsl(var(--rub-h, 220) 50% 30% / 0.35);
    color: #2f3357;
    font-family: 'Nunito', 'Fredoka', sans-serif;
    line-height: 1.6;
    text-align: left;
}
.rub-seo h2 { margin: 0 0 8px; font-size: clamp(1.25rem, 2.6vw, 1.6rem); color: #1e2350; }
.rub-seo h3 { margin: 18px 0 8px; font-size: 1.05rem; color: #1e2350; }
.rub-seo p { margin: 0 0 6px; }
.rub-seo ol, .rub-seo ul { margin: 0; padding-left: 1.3em; }
.rub-seo li { margin: 3px 0; }
.rub-seo-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; }
.rub-seo-faq details {
    margin: 8px 0; padding: 10px 14px; border-radius: 14px;
    background: #f6f8ff; box-shadow: inset 0 0 0 1px #e3e8f5;
}
.rub-seo-faq summary { cursor: pointer; font-weight: 700; color: #1e2350; }
.rub-seo-faq details[open] summary { margin-bottom: 6px; }
.rub-seo-links { display: flex; flex-wrap: wrap; gap: 8px; }
.rub-seo-links a {
    padding: 6px 14px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 0.92rem;
    color: hsl(var(--rub-h, 220) 60% 35%); background: hsl(var(--rub-h, 220) 80% 95%);
    box-shadow: inset 0 0 0 1px hsl(var(--rub-h, 220) 60% 85%);
}
.rub-seo-links a:hover { background: hsl(var(--rub-h, 220) 80% 90%); }
@media (max-width: 640px) { .rub-seo-cols { grid-template-columns: 1fr; } }
/* Tailwind 기본 초기화가 있는 페이지에서도 목록 번호·점과 제목 굵기가 보이게 */
.rub-seo ol { list-style: decimal; }
.rub-seo ul { list-style: disc; }
.rub-seo h2, .rub-seo h3 { font-family: 'Fredoka', 'Nunito', sans-serif; font-weight: 700; }
.rub-seo h3 { font-size: 1.08rem; }
.rub-seo b { font-weight: 800; }
.rub-seo-cols h3 { margin-top: 14px; }