/* 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-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"); }

/* --- 상단 메뉴 (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;
}