/* =========================================================
   サイト共通デザイン（theme.css）
   各ページの <style> の後に読み込んで、見た目だけを上書きする
   ========================================================= */

:root {
    --red: #e3350d;
    --red-dark: #b8290a;
    --blue: #2a75bb;
    --blue-dark: #1f5a91;
    --yellow: #ffcb05;
    --ink: #1f2933;
    --sub: #5f6b7a;
    --line: #e3e7ee;
    --bg: #f2f4f8;
    --card: #ffffff;
    --radius: 16px;
    --shadow: 0 4px 18px rgba(31, 41, 51, 0.08);
}

/* ---------- 全体 ---------- */
html {
    background-color: #fdf6ec !important;
}
body {
    background: transparent !important;
}
/* 背景の飾り（画面に固定。英字と星のうすい模様＋やわらかい色のにじみ） */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%231f2933' stroke-opacity='.055' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 52 L32 20 L44 52 M25 40 H39'/%3E%3Cpath d='M150 30 l5 11 12 2 -9 8 2 12 -10 -6 -10 6 2 -12 -9 -8 12 -2z'/%3E%3Ccircle cx='182' cy='150' r='11'/%3E%3Cpath d='M70 150 v-26 h11 a7 7 0 0 1 0 13 h-11 h12 a7 7 0 0 1 0 13 h-12'/%3E%3Cpath d='M118 102 l4 4 m0 -4 l-4 4'/%3E%3Cpath d='M30 190 q10 -12 20 0 t20 0'/%3E%3Cpath d='M128 196 h18 l-18 22 h18' transform='translate(0 -10)'/%3E%3Ccircle cx='95' cy='45' r='3' fill='%231f2933' fill-opacity='.06' stroke='none'/%3E%3Ccircle cx='200' cy='90' r='3' fill='%231f2933' fill-opacity='.07' stroke='none'/%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(circle at 8% 12%, rgba(227, 53, 13, 0.16) 0, rgba(227, 53, 13, 0) 34%),
        radial-gradient(circle at 92% 18%, rgba(255, 203, 5, 0.26) 0, rgba(255, 203, 5, 0) 36%),
        radial-gradient(circle at 85% 88%, rgba(42, 117, 187, 0.18) 0, rgba(42, 117, 187, 0) 40%),
        radial-gradient(circle at 12% 85%, rgba(47, 168, 79, 0.13) 0, rgba(47, 168, 79, 0) 36%),
        linear-gradient(180deg, #fff6e8 0%, #f3f6fc 55%, #eaf2fb 100%);
    background-size: 220px 220px, auto, auto, auto, auto, auto;
}

body {
    font-family: "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif !important;
    color: var(--ink);
    margin: 0 !important;
    padding: 0 0 40px !important;
}

/* ---------- 上部のタイトルバー ---------- */
#page-header,
#site-header,
#header {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 24px !important;
    padding: 18px 16px 16px !important;
    background: linear-gradient(135deg, var(--red) 0%, #f0602f 100%) !important;
    border-bottom: 6px solid var(--ink) !important;
    color: #fff;
    text-align: center;
    position: relative;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

/* 図鑑っぽいランプ飾り */
#page-header::before,
#site-header::before,
#header::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #bfe9ff 0%, #4fb3ff 45%, #1c6fb8 100%);
    border: 4px solid #fff;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}

#page-header h1,
#site-header h1,
#header h1 {
    margin: 0 !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em;
    color: #fff;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}

#site-header h2,
#site-header .subtitle {
    margin: 6px 0 0 !important;
    font-size: 15px !important;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9) !important;
}

.home-link {
    display: inline-block;
    transition: transform 0.15s, opacity 0.15s;
}

.home-link:hover {
    opacity: 1 !important;
    transform: scale(1.02);
}

/* ---------- 3列レイアウト（練習・図鑑モード） ---------- */
#layout {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 20px !important;
}

#sidebar,
#chart-column,
#content {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    box-sizing: border-box;
}

#sidebar {
    width: 230px !important;
    padding: 18px !important;
    border-right: none !important;
}

#sidebar h3 {
    margin: 0 0 12px;
    font-size: 17px;
}

#chart-column {
    width: 290px !important;
    margin-top: 0 !important;
    padding: 16px 20px !important;
    text-align: center;
}

#stats-chart {
    margin: 0 auto;
}

#content {
    padding: 24px 28px !important;
}

/* 検索欄 */
#search-box,
#answer-input {
    box-sizing: border-box;
    border: 2px solid var(--line) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    font-size: 16px !important;
    background: #fafbfd;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}

#search-box:focus,
#answer-input:focus {
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 4px rgba(42, 117, 187, 0.15);
    background: #fff;
}

#search-results {
    max-height: 420px;
    overflow-y: auto;
}

#search-results li {
    border-radius: 8px;
    padding: 7px 10px !important;
    margin-bottom: 2px;
}

#search-results li:hover {
    background-color: #eaf3fc !important;
    color: var(--blue-dark);
}

/* ---------- ポケモン表示 ---------- */
#poke-img {
    width: 180px !important;
    height: 180px !important;
    object-fit: contain;
    padding: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 60%, #ffffff 0%, #eaf3fc 55%, #d4e6f7 100%);
    border: 4px solid #fff;
    box-shadow: 0 0 0 2px var(--line), var(--shadow);
    image-rendering: pixelated;
}

#poke-name {
    display: inline-block;
    margin: 14px 0 6px;
    font-size: 28px;
    text-transform: capitalize;
    border-bottom: 4px solid var(--yellow);
    line-height: 1.2;
}

#desc {
    font-size: 19px !important;
    line-height: 1.65 !important;
    max-width: 560px !important;
}

#desc-ja {
    max-width: 560px !important;
    color: var(--sub) !important;
    font-size: 15px;
    padding: 10px 14px;
    background: #f6f8fb;
    border-left: 4px solid var(--line);
    border-radius: 0 8px 8px 0;
}

/* 穴あき部分 */
.blank {
    display: inline-block;
    padding: 0 10px;
    margin: 0 2px;
    color: var(--blue-dark);
    background: #fff5c2;
    border-radius: 6px;
    border-bottom: 2px solid var(--yellow);
    font-weight: 700;
    letter-spacing: 0.05em;
}

#answer {
    color: var(--blue-dark) !important;
}

#judge:not(:empty) {
    font-size: 18px;
}

#combo:not(:empty),
#best:not(:empty) {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: #e7f6ec;
    color: #1f7a3d !important;
    font-weight: 700;
}

#best:not(:empty) {
    background: #fff5c2;
    color: #8a6a00 !important;
    margin-left: 6px;
}

/* ---------- ボタン ---------- */
button {
    font-family: inherit;
    font-size: 16px !important;
    font-weight: 700;
    padding: 10px 20px !important;
    margin: 4px !important;
    border-radius: 999px !important;
    border: 2px solid var(--line) !important;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s, background 0.15s;
    box-shadow: 0 2px 0 var(--line);
}

button:hover {
    background: #f6f8fb;
    transform: translateY(-1px);
}

button:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* 答え合わせ・再挑戦は目立たせる */
#check-answer-btn,
#retry-btn {
    background: var(--blue) !important;
    border-color: var(--blue) !important;
    color: #fff !important;
    box-shadow: 0 3px 0 var(--blue-dark) !important;
}

#check-answer-btn:hover,
#retry-btn:hover {
    background: var(--blue-dark) !important;
}

.tweet-button {
    background: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* ---------- 実践モード ---------- */
#main {
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

#question-box {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 32px 22px;
}

#question-box #poke-img {
    margin: 0 auto 10px !important;
}

#question-box #desc-ja {
    margin: 0 auto 22px !important;
    text-align: left;
}

#question-box #desc {
    margin: 16px auto !important;
}

#gameover-box {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin: 0 auto !important;
    max-width: 860px !important;
    box-sizing: border-box;
}

#fail-poke-img {
    background: #f6f8fb;
    border-radius: 16px !important;
    image-rendering: pixelated;
}

#achievement-popup {
    border-radius: 12px !important;
}

/* ---------- 実績一覧 ---------- */
#progress-box {
    max-width: 960px !important;
}

.progress-item {
    border: none !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow);
    padding: 14px 16px !important;
}

.progress-item p:first-child {
    font-weight: 700;
    font-size: 15px !important;
}

.progress-bar {
    height: 12px !important;
    background: #edf0f5 !important;
}

.progress-fill {
    background: linear-gradient(90deg, var(--yellow), #ff9f1c) !important;
    border-radius: 10px;
}

.achievement {
    border-radius: 14px !important;
    box-shadow: var(--shadow);
}

.achievement.unlocked {
    background: linear-gradient(90deg, #fff8d1, #ffffff) !important;
    border-left-color: var(--yellow) !important;
}

/* ---------- ホーム ---------- */
.mode-grid {
    display: grid;
    grid-template-columns: repeat(2, 240px);
    gap: 18px;
    justify-content: center;
    margin: 40px auto 0;
}

.mode-button {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 240px !important;
    height: 150px;
    margin: 0 !important;
    padding: 16px !important;
    border-radius: 20px !important;
    border: none !important;
    background: var(--card) !important;
    box-shadow: var(--shadow) !important;
    font-size: 20px !important;
    transition: transform 0.15s, box-shadow 0.15s;
}

.mode-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(31, 41, 51, 0.14) !important;
}

.mode-button .icon {
    font-size: 40px;
    line-height: 1;
}

.mode-button .note {
    font-size: 13px;
    font-weight: 500;
    color: var(--sub);
}

.mode-button.practice { border-top: 6px solid var(--blue) !important; }
.mode-button.dex      { border-top: 6px solid var(--red) !important; }
.mode-button.battle   { border-top: 6px solid #2fa84f !important; }
.mode-button.trophy   { border-top: 6px solid var(--yellow) !important; }

/* ---------- 狭い画面 ---------- */
@media (max-width: 900px) {
    #layout {
        flex-direction: column;
    }
    #sidebar,
    #chart-column,
    #content {
        width: 100% !important;
    }
    .mode-grid {
        grid-template-columns: 240px;
    }
    #page-header::before,
    #site-header::before,
    #header::before {
        display: none;
    }
}

/* 実績一覧の「ホームへ戻る」を中央に */
#back-btn {
    display: block !important;
    margin: 30px auto !important;
}

/* ホームのドット絵アイコン */
img.icon {
    width: 64px;
    height: 64px;
    image-rendering: pixelated;
    transition: transform 0.15s;
}

.mode-button:hover img.icon {
    transform: scale(1.12) rotate(-4deg);
}

/* メダル獲得のポップアップ */
#medal-toast-box {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
}

.medal-toast {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 260px;
    padding: 12px 16px;
    border-radius: 14px;
    background: #fff;
    border-left: 8px solid #cd7f32;
    box-shadow: 0 8px 24px rgba(31, 41, 51, 0.2);
    font-size: 14px;
    line-height: 1.5;
    animation: medal-in 0.35s ease-out;
    transition: opacity 0.5s, transform 0.5s;
}

.medal-toast.silver { border-left-color: #a8b0bb; }
.medal-toast.gold   { border-left-color: #e6b800; }
.medal-toast.ach    { border-left-color: #2a75bb; }

.medal-toast.hide {
    opacity: 0;
    transform: translateX(30px);
}

.medal-toast-icon {
    font-size: 32px;
}

.medal-toast {
    max-width: 380px;
}

.medal-toast small {
    display: block;
    margin-top: 4px;
    color: #5f6b7a;
    font-size: 12px;
    line-height: 1.5;
}

@keyframes medal-in {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to   { opacity: 1; transform: none; }
}

/* タイトルバー右端の獲得メダル数 */
#medal-badge {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    cursor: default;
    user-select: none;
}

#medal-badge span {
    padding: 0 3px;
}

/* 画面の幅が足りないときは、タイトルと重ならないようにタイトルの下へ移す */
@media (max-width: 1280px) {
    #medal-badge {
        position: static;
        transform: none;
        display: inline-flex;
        margin-top: 8px;
        font-size: 13px;
    }
}

/* 全メダルの進捗率（ヘッダーのバッジ内） */
#medal-badge .badge-progress {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
}
#medal-badge .badge-bar {
    display: inline-block;
    width: 60px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
    padding: 0;
}
#medal-badge .badge-bar span {
    display: block;
    height: 100%;
    padding: 0;
    background: #ffd54a;
}

/* アフィリエイト広告の枠（ads.js） */
.ad-box {
    position: relative;
    max-width: 728px;
    margin: 28px auto 20px;
    padding: 18px 12px 12px;
    border: 1px dashed #d0d0d0;
    border-radius: 12px;
    background: #fafafa;
    text-align: center;
}
.ad-box .ad-label {
    position: absolute;
    top: 4px;
    left: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #999;
    letter-spacing: 0.05em;
}
.ad-box img { max-width: 100%; height: auto; }

/* X でシェアするボタン（share.js） */
.share-x {
    display: inline-block;
    margin: 8px 0 12px;
    padding: 8px 18px;
    border-radius: 999px;
    background: #111;
    color: #fff !important;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}
.share-x:hover { background: #333; }
#share-ach { float: right; margin-top: 0; }
.ad-box table { margin: 0 auto; background: #fff; text-align: left; }

/* =========================================================
   ブックマーク
   ========================================================= */
.mode-button.bookmark { border-top: 6px solid #8e5bd6 !important; grid-column: 1 / -1; justify-self: center; }

.bm-btn {
    display: block;
    margin: 8px 0 4px;
    padding: 6px 14px !important;
    font-size: 14px !important;
    border-radius: 999px !important;
    border: 2px solid var(--yellow) !important;
    background: #fff !important;
    color: var(--ink) !important;
    cursor: pointer;
}
.bm-btn:hover { background: #fff8d1 !important; }
.bm-btn.on { background: var(--yellow) !important; font-weight: bold; }
#fail-left .bm-btn { margin: 8px auto 0; }

#bm-toast {
    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translate(-50%, 20px);
    background: rgba(31, 41, 51, 0.92);
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 9999;
}
#bm-toast.show { opacity: 1; transform: translate(-50%, 0); }

.bm-mode-note {
    max-width: 900px;
    margin: 10px auto;
    padding: 8px 14px;
    background: #fff8d1;
    border: 1px solid var(--yellow);
    border-radius: 12px;
    text-align: center;
    font-size: 14px;
}

#bm-page { max-width: 1000px; margin: 20px auto; padding: 0 16px; }
#bm-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
#bm-total { font-weight: bold; font-size: 18px; }
#bm-filter, #bm-sort { padding: 6px 8px; font-size: 14px; border-radius: 8px; border: 1px solid var(--line); }
#bm-practice:disabled { opacity: 0.4; cursor: default; }
#bm-empty {
    text-align: center;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 30px 20px;
    line-height: 1.9;
}
#bm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
.bm-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px 10px 10px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.bm-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(31, 41, 51, 0.14); }
.bm-card img { width: 96px; height: 96px; image-rendering: pixelated; object-fit: contain; }
.bm-no { font-size: 12px; color: var(--sub); }
.bm-jp { font-weight: bold; font-size: 16px; margin-top: 2px; }
.bm-en { font-size: 13px; color: var(--sub); margin-bottom: 6px; }
.bm-del {
    font-size: 12px !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--sub) !important;
    border: 1px solid var(--line) !important;
}
.bm-del:hover { color: var(--red) !important; border-color: var(--red) !important; }

/* 苦手なポケモン */
#wrong-section { margin-top: 40px; }
.bm-sec-title { text-align: center; margin: 0 0 4px; font-size: 22px; }
.bm-sec-note { text-align: center; color: var(--sub); font-size: 14px; margin: 0 0 14px; }
#wrong-toolbar { display: flex; gap: 16px; justify-content: center; align-items: center; margin-bottom: 14px; }
#wrong-total { font-weight: bold; font-size: 18px; }
#wrong-practice:disabled { opacity: 0.4; cursor: default; }
#wrong-empty { text-align: center; color: var(--sub); }
.bm-grid-like { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.bm-card.wrong { border-top: 4px solid var(--red); }
.bm-miss { font-size: 12px; color: var(--red); font-weight: bold; }

/* 英語の読み上げ */
.speak-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 10px; }
.speak-btn {
    padding: 6px 14px !important;
    font-size: 14px !important;
    border-radius: 999px !important;
    border: 2px solid var(--blue) !important;
    background: #fff !important;
    color: var(--blue-dark) !important;
    cursor: pointer;
}
.speak-btn:hover { background: #eaf2fb !important; }
.speak-btn.playing { background: var(--blue) !important; color: #fff !important; }
.speak-rate { font-size: 13px; color: var(--sub); }
.speak-rate select { font-size: 13px; padding: 2px 4px; border-radius: 6px; border: 1px solid var(--line); }
.key-hint { font-size: 12px; color: var(--sub); margin-top: 6px; }

/* お問い合わせ */
#contact {
    max-width: 560px;
    margin: 40px auto 0;
    padding: 22px 24px;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: left;
}
#contact h2 { margin: 0 0 6px; font-size: 20px; text-align: center; }
.contact-note { font-size: 13px; color: var(--sub); margin: 0 0 14px; line-height: 1.7; }
#contact-form label { display: block; font-size: 14px; font-weight: bold; margin-bottom: 12px; }
#contact-form input, #contact-form select, #contact-form textarea {
    display: block; width: 100%; box-sizing: border-box; margin-top: 4px;
    padding: 8px 10px; font-size: 15px; font-weight: normal;
    border: 1px solid var(--line); border-radius: 10px; font-family: inherit;
}
#contact-form .hp { position: absolute; left: -9999px; }
#contact-send { display: block; margin: 6px auto 0; }
#contact-result { text-align: center; font-size: 14px; min-height: 1em; }
#contact-result.ok { color: #2fa84f; font-weight: bold; }
#contact-result.ng { color: var(--red); font-weight: bold; }
.contact-x { text-align: center; font-size: 14px; font-weight: bold; margin: 0 0 10px; }
.contact-x a { color: var(--blue-dark); }

/* =========================================================
   練習・実践モード：答えの入力欄まで1画面に収める
   ========================================================= */
.quiz-head { display: flex; align-items: center; gap: 16px; }
.quiz-head #poke-img { width: 120px !important; height: 120px !important; padding: 6px; flex: none; }
.quiz-head #poke-name { margin: 0 !important; }
.quiz-head + #desc, #content > #desc { margin-top: 10px !important; }
.quiz-head #poke-name { order: 1; }
.quiz-head .bm-btn { order: 2; margin: 0 !important; }
.answer-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 4px; }
.answer-row #answer-input { flex: 1 1 220px; margin: 0 !important; font-size: 18px; }
.answer-row #check-answer-btn { margin: 0 !important; }
#question-box #poke-img { width: 130px !important; height: 130px !important; padding: 6px; }
#question-box .answer-row { justify-content: center; margin: 10px auto; }
#question-box .answer-row #answer-input { flex: 0 1 300px; }

/* 文字をクリックしたときに点滅するカーソルを出さない（入力欄だけは表示） */
body { caret-color: transparent; }
input, textarea, select, [contenteditable="true"] { caret-color: auto; }
.privacy-note { font-size: 12px; color: var(--sub); line-height: 1.7; margin: 16px 0 0; }

/* ポケモンごとの豆知識（チャートの下） */
.trivia-box { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); text-align: left; }
.trivia-box h3 { margin: 0 0 8px; font-size: 15px; }
.trivia-box ul { margin: 0; padding-left: 1.2em; }
.trivia-box li { font-size: 13px; line-height: 1.7; margin-bottom: 6px; color: var(--ink); }
.trivia-src { font-size: 11px; color: var(--sub); margin: 6px 0 0; }
.trivia-src a { color: var(--blue-dark); }
.trivia-box h4 { margin: 8px 0 4px; font-size: 13px; color: var(--sub); }
.trivia-origin p:first-of-type { font-size: 13px; line-height: 1.7; margin: 0; }
.trivia-origin { margin-bottom: 6px; }
.trivia-back { margin-bottom: 6px; padding: 8px 10px; background: #fff8d1; border-radius: 10px; }
.trivia-back p:first-of-type { font-size: 13px; line-height: 1.7; margin: 0; }

/* =========================================================
   フッターと運営者情報ページ（site-footer.js / policy.html）
   ========================================================= */
#site-footer {
    max-width: 728px;
    margin: 32px auto 0;
    padding: 16px;
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: 12px;
    color: var(--sub);
    line-height: 1.7;
}
#site-footer p { margin: 4px 0; }
#site-footer a { color: var(--blue-dark); }
.policy {
    max-width: 720px;
    margin: 24px auto 0;
    padding: 20px 24px;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: left;
    line-height: 1.8;
    font-size: 15px;
}
.policy h2 { font-size: 19px; margin: 28px 0 8px; padding-bottom: 4px; border-bottom: 2px solid var(--yellow); }
.policy h3 { font-size: 16px; margin: 16px 0 4px; }
.policy a { color: var(--blue-dark); }
.policy-table { border-collapse: collapse; width: 100%; }
.policy-table th, .policy-table td { border: 1px solid var(--line); padding: 8px 10px; vertical-align: top; }
.policy-table th { background: #fafafa; white-space: nowrap; width: 8em; }
.policy-date { text-align: right; color: var(--sub); font-size: 13px; }
@media (max-width: 560px) {
    .policy { margin: 16px; padding: 16px; }
    .policy-table th { white-space: normal; width: 5.5em; }
}

/* 個別ポケモンページ（p/） */
.crumb { margin: 0; font-size: 13px; }
.crumb a { color: inherit; }
.pk-head { display: flex; gap: 16px; align-items: center; }
.pk-head img { image-rendering: pixelated; background: #f5f5f5; border-radius: 12px; }
.pk-no { margin: 0; color: var(--sub); font-size: 13px; }
.pk-jn { margin: 0; font-size: 24px; font-weight: 700; }
.pk-en { margin: 0; font-size: 16px; }
.pk-text { margin: 0; padding: 14px 16px; background: #fffbe6; border-left: 4px solid var(--yellow); border-radius: 8px; font-size: 17px; line-height: 1.7; }
.pk-speak { margin-top: 10px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 14px; }
.pk-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pk-cta a { padding: 10px 16px; border-radius: 10px; background: var(--yellow); color: var(--ink); font-weight: 700; text-decoration: none; }
.policy .src { font-size: 12px; color: var(--sub); }
.pk-stats td:nth-child(3) { width: 55%; }
.pk-stats .bar { display: block; height: 10px; border-radius: 5px; background: var(--blue); }
.pnav { display: flex; justify-content: space-between; gap: 8px; margin-top: 28px; font-size: 14px; }
.pk-search { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 16px; border: 1px solid var(--line); border-radius: 10px; }
.pk-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.pk-list a { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 13px; line-height: 1.3; }
.pk-list img { image-rendering: pixelated; flex: none; }
.pk-list small { color: var(--sub); }
.pk-share { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 24px; }
.pk-share .share-x { margin: 0; }
.pk-random { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; }
.pk-faq dt { font-weight: 700; margin-top: 12px; }
.pk-faq dd { margin: 4px 0 0; color: var(--ink); }
.pk-gen { margin-top: 20px; font-size: 14px; }
.tbl { overflow-x: auto; }
.hub-table { font-size: 14px; }
.hub-table td:nth-child(4) { font-size: 12px; color: var(--sub); }
.feat { margin-top: 20px; }
.feat h2 a { color: var(--ink); text-decoration: none; }
.hub-links { padding-left: 1.2em; line-height: 1.9; }
.hub-top { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-top a { padding: 4px 10px; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; }

/* =========================================================
   英語図鑑ページ（p/）カラフル版デザイン 2026-11-13
   ========================================================= */
.pkpage { --gc: #e3350d; --gc2: #ff8a3d; --gsoft: #fff1e8; padding-bottom: 84px !important; }
.pkpage.g1 { --gc: #e3350d; --gc2: #ff8a3d; --gsoft: #fff1e8; }
.pkpage.g2 { --gc: #c9a400; --gc2: #ffd84a; --gsoft: #fff9de; }
.pkpage.g3 { --gc: #1e9e6a; --gc2: #5fd6a0; --gsoft: #e7f8ef; }
.pkpage.g4 { --gc: #3b6fd8; --gc2: #7aa5ff; --gsoft: #eaf1ff; }
.pkpage.g5 { --gc: #30343b; --gc2: #7d8590; --gsoft: #eef0f3; }
.pkpage.g6 { --gc: #2c86c9; --gc2: #e04f8f; --gsoft: #f0f4ff; }
.pkpage.g7 { --gc: #f08a24; --gc2: #29b6c8; --gsoft: #fff4e6; }
.pkpage.g8 { --gc: #7b3fbf; --gc2: #e0408a; --gsoft: #f5ecff; }
.pkpage.g9 { --gc: #d1304b; --gc2: #8b4fd8; --gsoft: #fdecef; }

.topnav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 16px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.topnav a { color: var(--ink); text-decoration: none; font-weight: 700; }
.topnav .brand { font-size: 16px; white-space: nowrap; }
.tn-links { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tn-links a { font-size: 13px; padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.tn-links a:hover { background: var(--gsoft); }

.pkwrap { max-width: 760px; margin: 0 auto; padding: 16px; box-sizing: border-box; }
.pkwrap .card { background: #fff; border-radius: 20px; padding: 18px 20px; margin-top: 14px; box-shadow: 0 6px 24px rgba(31,41,51,.07); border-top: 5px solid var(--gc); }
.pkwrap .card h2 { margin: 0 0 12px; font-size: 19px; }
.pkwrap .card h3 { margin: 16px 0 6px; font-size: 15px; color: var(--sub); }
.pkwrap .card p { line-height: 1.8; }
.pkwrap .src { font-size: 12px; color: var(--sub); margin: 0; }

.pk-hero { display: flex; gap: 16px; align-items: center; padding: 20px; border-radius: 24px; color: #fff;
  background: linear-gradient(135deg, var(--gc) 0%, var(--gc2) 100%); box-shadow: 0 10px 30px rgba(0,0,0,.15); position: relative; overflow: hidden; }
.pk-hero::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 170px; height: 170px; border-radius: 50%;
  border: 22px solid rgba(255,255,255,.15); }
.pk-hero-img { flex: none; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.9); display: grid; place-items: center; box-shadow: inset 0 -6px 0 rgba(0,0,0,.06); }
.pk-hero-img img { image-rendering: pixelated; width: 112px; height: 112px; }
.pk-hero-txt { position: relative; z-index: 1; min-width: 0; }
.pk-badges { margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.25); color: #fff; text-decoration: none; }
.pk-hero .pk-jn { margin: 0; font-size: 24px; font-weight: 800; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.15); }
.pk-hero .pk-en { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.en-name { font-size: 30px; font-weight: 900; letter-spacing: .02em; background: #fff; color: var(--gc); padding: 2px 14px; border-radius: 12px; }
.say { width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.9); font-size: 18px; cursor: pointer; }
.say:active { transform: scale(.92); }

.pk-toc { display: flex; gap: 8px; overflow-x: auto; margin: 14px 0 0; padding-bottom: 2px; scrollbar-width: none; }
.pk-toc a { flex: none; padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; border: 2px solid var(--gsoft); }
.pk-toc a:hover { border-color: var(--gc); }
.pkwrap section[id] { scroll-margin-top: 64px; }

.pkwrap .pk-text { margin: 0; padding: 16px 18px; background: var(--gsoft); border-left: 5px solid var(--gc); border-radius: 12px; font-size: 18px; line-height: 1.75; }
.pkwrap .row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chip-btn { padding: 8px 14px; border-radius: 999px; border: 2px solid var(--gc); background: #fff; color: var(--gc); font-weight: 700; font-size: 14px; cursor: pointer; }
.chip-btn:hover { background: var(--gsoft); }
.pk-ja { font-size: 16px; }
.pk-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.cta { display: block; text-align: center; padding: 12px 10px; border-radius: 14px; color: #fff !important; font-weight: 800; text-decoration: none; box-shadow: 0 4px 0 rgba(0,0,0,.15); }
.cta:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.15); }
.cta.blue { background: #2a75bb; } .cta.green { background: #2fa84f; }

.stats { display: grid; gap: 8px; }
.stat { display: grid; grid-template-columns: 5.5em 2.6em 1fr; align-items: center; gap: 8px; font-size: 14px; }
.stat .lab { font-weight: 700; } .stat .val { text-align: right; font-weight: 800; }
.stat .track { height: 12px; background: #eef0f3; border-radius: 6px; overflow: hidden; }
.stat .bar { display: block; height: 100%; border-radius: 6px; }
.s-hp .bar { background: #ff5959; } .s-attack .bar { background: #f5ac78; } .s-defense .bar { background: #fae078; }
.s-special-attack .bar { background: #9db7f5; } .s-special-defense .bar { background: #a7db8d; } .s-speed .bar { background: #fa92b2; }
.total { text-align: right; margin: 10px 0 0; }

.pkwrap .pk-faq dt { margin-top: 14px; padding-left: 26px; position: relative; }
.pkwrap .pk-faq dt::before { content: "Q"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--gc); color: #fff; font-size: 12px; display: grid; place-items: center; }
.pkwrap .pk-faq dd { padding-left: 26px; line-height: 1.8; }
.pk-gen { text-align: center; }
.pk-gen a { color: var(--gc); font-weight: 700; }
.pkwrap .pnav { margin-top: 18px; }
.pkwrap .pnav a { color: var(--sub); }

.pk-dock { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 60; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px;
  width: min(520px, calc(100% - 24px)); padding: 6px; border-radius: 999px; background: rgba(31,41,51,.92); box-shadow: 0 8px 24px rgba(0,0,0,.25); box-sizing: border-box; }
.pk-dock a { color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; padding: 8px 10px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-dock a:last-child { text-align: right; }
.pk-dock .dock-rand { background: var(--gc); width: 40px; height: 40px; padding: 0; display: grid; place-items: center; font-size: 20px; }

.list-hero { padding: 22px 20px; border-radius: 24px; color: #fff; background: linear-gradient(135deg, #e3350d, #ff8a3d 45%, #ffcb05); box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.pkpage[class*=" g"] .list-hero { background: linear-gradient(135deg, var(--gc), var(--gc2)); }
.list-hero h1 { margin: 0; font-size: 24px; font-weight: 900; }
.list-hero p { margin: 6px 0 0; font-weight: 600; opacity: .95; }
.list-hero .hub-top { margin-top: 12px; }
.list-hero .hub-top a { background: #fff; color: var(--ink); }
.finder { position: sticky; top: 52px; z-index: 40; background: var(--bg); padding: 12px 0 6px; }
.finder .pk-search { border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 16px; width: 100%; box-sizing: border-box; background: #fff; }
.gchips { display: flex; gap: 6px; overflow-x: auto; margin-top: 8px; scrollbar-width: none; }
.gchip { flex: none; padding: 6px 12px; border-radius: 999px; border: 2px solid var(--line); background: #fff; font-weight: 700; font-size: 13px; cursor: pointer; color: var(--ink); }
.gchip.on { color: #fff; border-color: transparent; background: var(--ink); }
.gchip.g1.on{background:#e3350d}.gchip.g2.on{background:#c9a400}.gchip.g3.on{background:#1e9e6a}.gchip.g4.on{background:#3b6fd8}.gchip.g5.on{background:#30343b}.gchip.g6.on{background:#2c86c9}.gchip.g7.on{background:#f08a24}.gchip.g8.on{background:#7b3fbf}.gchip.g9.on{background:#d1304b}
.cnt { margin: 6px 2px 0; font-size: 12px; color: var(--sub); }
.pkwrap .pk-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pkwrap .pk-list li[hidden] { display: none; }
.pkwrap .pk-list a { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto auto; column-gap: 8px; padding: 8px; border: none; border-left: 5px solid #ccc; border-radius: 14px; background: #fff; box-shadow: 0 3px 12px rgba(31,41,51,.06); transition: transform .12s; }
.pkwrap .pk-list a:hover { transform: translateY(-2px); }
.pkwrap .pk-list img { grid-row: 1 / 4; image-rendering: pixelated; background: #f5f6f8; border-radius: 50%; }
.pk-list .no { font-size: 11px; color: var(--sub); }
.pk-list .jn { font-weight: 800; font-size: 14px; }
.pk-list .en { font-size: 12px; color: var(--sub); }
.pk-list li.g1 a{border-left-color:#e3350d}.pk-list li.g2 a{border-left-color:#c9a400}.pk-list li.g3 a{border-left-color:#1e9e6a}.pk-list li.g4 a{border-left-color:#3b6fd8}.pk-list li.g5 a{border-left-color:#30343b}.pk-list li.g6 a{border-left-color:#2c86c9}.pk-list li.g7 a{border-left-color:#f08a24}.pk-list li.g8 a{border-left-color:#7b3fbf}.pk-list li.g9 a{border-left-color:#d1304b}
.pkwrap .hub-table { width: 100%; }
.tname { display: flex; align-items: center; gap: 4px; font-weight: 700; color: var(--gc); }
.tname img { image-rendering: pixelated; }
.pkwrap .feat h2 a { color: var(--gc); }
.pkpage .ad-box, .pkpage #site-footer { max-width: 728px; }
@media (max-width: 560px) {
  .pk-hero { padding: 16px; gap: 12px; }
  .pk-hero-img { width: 92px; height: 92px; } .pk-hero-img img { width: 88px; height: 88px; }
  .pk-hero .pk-jn { font-size: 19px; } .en-name { font-size: 24px; }
  .topnav .brand { font-size: 14px; }
  .pkwrap .card { padding: 16px; }
}
/* p/ ページのボタンは共通ボタンの大きさを上書き */
.pkpage .chip-btn { font-size: 14px !important; padding: 8px 14px !important; margin: 0 !important; border: 2px solid var(--gc) !important; color: var(--gc); box-shadow: none; }
.pkpage .say { padding: 0 !important; margin: 0 !important; border: none !important; font-size: 18px !important; box-shadow: none; }
.pkpage .gchip { font-size: 13px !important; padding: 6px 12px !important; margin: 0 !important; border: 2px solid var(--line) !important; box-shadow: none; }
.pkpage .gchip.on { border-color: transparent !important; }
.tname { white-space: nowrap; }
.tname img { width: 32px; height: 32px; flex: none; }
.hub-table th:first-child, .hub-table td:first-child { width: 2.6em; font-size: 12px; color: var(--sub); }
@media (max-width: 560px) { .hub-table th, .hub-table td { padding: 6px !important; } }
/* グッズ検索の広告枠 */
.ad-box { position: relative; }
.goods-title { margin: 4px 0 8px; font-weight: 800; font-size: 15px; text-align: left; }
.goods { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.goods-btn { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: #fff7e0; border: 2px solid #ffd84a; color: #1f2933 !important; font-weight: 700; font-size: 14px; text-decoration: none; text-align: left; line-height: 1.3; }
.goods-btn:hover { background: #ffef9e; }
.goods-btn .gi { font-size: 22px; }
.pkwrap .ad-box { margin: 14px 0 0; max-width: none; border-radius: 20px; }
.goods + .goods-title, .goods ~ .goods-title { margin-top: 14px; }
.ad-box .goods-btn { font-size: 13px; }

/* =========================================================
   スマホで使いやすく（2026-11-13）
   ========================================================= */
.bm-btn { white-space: nowrap; }
#gameover-box .tweet-button { margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 640px) {
    #page-header h1, #site-header h1, #header h1 { font-size: 19px !important; line-height: 1.35; }
    #site-header h2, #site-header .subtitle { font-size: 13px !important; }
    #question-box { padding: 16px 14px 14px; border-radius: 16px; }
    #question-box #poke-img { width: 108px !important; height: 108px !important; }
    #question-box #desc { font-size: 17px !important; line-height: 1.6; }
    input, select, textarea { font-size: 16px !important; }    /* iPhoneで入力時に勝手に拡大されないように */
    button, .cta, a.btn { min-height: 44px; }                  /* 指で押しやすい大きさ */
    .answer-row #answer-input, #question-box .answer-row #answer-input { flex: 1 1 0 !important; min-width: 0; }
    .answer-row { flex-wrap: nowrap !important; }
    .quiz-head { gap: 10px; }
    .quiz-head { flex-wrap: wrap; }
    .quiz-head #poke-img { width: 96px !important; height: 96px !important; }
    .quiz-head #poke-name { flex: 1 1 0; min-width: 0; font-size: 20px; }
    .quiz-head .bm-btn { flex: 1 0 100%; }
    /* 練習モード・図鑑：問題を一番上に、検索とチャートはその下に */
    #layout #content { order: -1; }
    #layout #chart-column { order: 1; }
    #layout #sidebar { order: 2; }
    #layout { padding-left: 12px !important; padding-right: 12px !important; gap: 14px; }
}

/* ===== 図鑑文の英単語テーブル（p/*.html） ===== */
.vt{width:100%;border-collapse:collapse;font-size:15px}
.vt th,.vt td{padding:8px 6px;border-bottom:1px solid #e5e7eb;text-align:left;vertical-align:top}
.vt th{font-size:12px;color:#6b7280;font-weight:700}
.vt .w{font-weight:800;white-space:nowrap}
.vt .lv{font-size:11px;padding:1px 6px;border-radius:99px;background:#eef2ff;color:#4338ca;white-space:nowrap}
.vt .lv.h{background:#fee2e2;color:#b91c1c}
.gram{background:#f8fafc;border-left:4px solid #6366f1;padding:10px 12px;border-radius:8px;margin:12px 0 0;line-height:1.8}
.gram b{color:#4338ca}
@media (max-width:520px){.vt{font-size:14px}.vt th:nth-child(3),.vt td:nth-child(3){display:none}}


/* =========================================================
   レイアウト調整（2026-11-14）
   ========================================================= */
/* ---------- ホーム：モードを3列×2段に並べる ---------- */
.mode-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 780px;
    gap: 18px;
    padding: 0 16px;
    margin: 32px auto 0 !important;
}
.mode-button { width: auto !important; height: 160px; }
.mode-button.bookmark { grid-column: auto !important; justify-self: stretch !important; }
.mode-button.list { border-top: 6px solid #e0408a !important; }

/* 広告のチップ（ads.js が入れる） */
.chip-ad-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 780px;
    margin: 22px auto 0;
    padding: 0 16px;
    box-sizing: border-box;
}
.chip-ad-row .a8px { position: absolute; width: 1px; height: 1px; }
.chip-ad {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid #ffd84a;
    box-shadow: 0 2px 8px rgba(31, 41, 51, 0.06);
    color: var(--ink) !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.12s, background 0.12s;
}
.chip-ad:hover { background: #fff8d1; transform: translateY(-1px); }
.chip-ad .pr {
    margin-left: 4px;
    font-size: 9px;
    font-weight: 700;
    padding: 0 4px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
}

/* 特集ページの案内 */
.home-feat {
    max-width: 748px;
    margin: 28px auto 0;
    padding: 18px 20px 20px;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    box-sizing: border-box;
}
.home-feat h2 { margin: 0 0 12px; font-size: 18px; text-align: center; }
.home-feat .hub-top {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: none !important;
    margin: 0 !important;
}
.home-feat .hub-top a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fffbea;
    border: 2px solid #ffe58a;
    font-size: 14px;
    line-height: 1.35;
    transition: transform 0.12s, border-color 0.12s;
}
.home-feat .hub-top a { text-align: left; }
.home-feat .hub-top a:hover { transform: translateY(-2px); border-color: var(--yellow); }
.home-feat .hub-top a .fi { font-size: 20px; flex: none; }
#contact { max-width: 748px; box-sizing: border-box; }

/* ---------- 練習・図鑑モード：左の2列を上にくっつけて、画面に追従させる ---------- */
#layout { align-items: flex-start !important; }
/* 広い画面：左に「検索＋チャート」を縦に積み、右に問題を大きく置く2列 */
@media (min-width: 901px) {
    #layout {
        display: grid !important;
        grid-template-columns: 300px minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        max-width: 1060px;
    }
    #sidebar { grid-column: 1; grid-row: 1; width: auto !important; }
    #chart-column { grid-column: 1; grid-row: 2; width: auto !important; }
    #content { grid-column: 2; grid-row: 1 / 3; }
    #search-results { max-height: 260px; }
}
#content { min-width: 0; }

/* ---------- 実績一覧：セクションの見出しを見やすく ---------- */
#progress-box { margin-left: auto !important; margin-right: auto !important; }

/* ---------- 狭い画面 ---------- */
@media (max-width: 760px) {
    .mode-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
    .home-feat .hub-top { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .chip-ad-row { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
    .chip-ad-row::-webkit-scrollbar { display: none; }
    .chip-ad { flex: none; white-space: nowrap; }
    .mode-grid { padding: 0 12px; margin-top: 20px !important; }
    .mode-button { height: 132px; padding: 10px !important; font-size: 17px !important; gap: 4px; }
    .mode-button img.icon { width: 48px; height: 48px; }
    .mode-button .note { font-size: 11px; line-height: 1.4; }
    .home-feat { margin: 22px 12px 0; padding: 16px 12px; }
    .home-feat .hub-top a { padding: 10px; font-size: 13px; }
    #contact { margin: 28px 12px 0; padding: 18px 16px; }
}

/* =========================================================
   サイトのロゴ「ポケたん」（logo.svg）
   ========================================================= */
.site-logo {
    display: block;
    height: 52px;
    width: auto;
    margin: 0 auto;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.12));
}
#site-header .site-logo { height: 60px; }
#site-header:has(+ .mode-grid) .site-logo { height: 92px; margin-top: 4px; }
#site-header .subtitle { font-size: 14px !important; letter-spacing: 0.06em; }
.home-link .site-logo { transition: transform 0.15s; }
.home-link:hover .site-logo { transform: rotate(-2deg) scale(1.04); }
.brand-logo { display: block; height: 28px; width: auto; }
@media (max-width: 640px) {
    .site-logo { height: 40px; }
    #site-header .site-logo { height: 44px; }
    #site-header:has(+ .mode-grid) .site-logo { height: 64px; }
}


/* =========================================================
   英語版（PokeTango）の飾り 2026-11-14
   ========================================================= */
html[lang="en"] body::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='290' viewBox='0 0 260 290'%3E%3Cg fill='%231f2933' fill-opacity='.05'%3E%3Cpath transform='translate%2830 62%29 rotate%28-10%29 scale%280.0357 -0.0357%29' d='M968 677 872 766C851 760 785 756 752 756C704 756 304 756 233 756C189 756 147 761 106 767V600C158 605 189 608 233 608C304 608 672 608 727 608C705 566 636 490 562 443L687 343C777 408 872 533 923 617C933 633 956 662 968 677ZM556 541H380C386 505 388 476 388 441C388 278 363 193 252 109C210 77 173 60 138 48L279 -67C561 90 556 306 556 541Z'/%3E%3Cpath transform='translate%28150 48%29 rotate%288%29 scale%280.0357 -0.0357%29' d='M881 593 778 643C750 638 720 635 695 635H535L539 717C540 741 543 787 546 811H368C372 787 376 736 376 714L375 635H250C212 635 155 638 109 643V485C155 489 219 490 250 490H363C345 364 303 260 216 170C170 122 115 85 68 59L209 -55C394 78 485 237 521 490H716C716 381 702 207 678 152C668 127 657 115 623 115C585 115 534 121 487 130L506 -32C553 -36 613 -41 675 -41C751 -41 793 -10 815 45C857 150 870 423 874 538C874 548 878 577 881 593Z'/%3E%3Cpath transform='translate%2895 150%29 rotate%28-4%29 scale%280.0357 -0.0357%29' d='M249 776 134 653C206 602 332 492 385 434L509 561C449 625 318 729 249 776ZM101 112 204 -48C330 -28 460 24 562 84C729 182 871 321 951 463L857 634C790 493 655 338 475 234C377 177 248 132 101 112Z'/%3E%3Cpath transform='translate%28200 170%29 rotate%2810%29 scale%280.0357 -0.0357%29' d='M787 756C787 783 809 805 836 805C863 805 885 783 885 756C885 729 863 707 836 707C809 707 787 729 787 756ZM352 354 214 419C172 332 95 227 28 162L159 73C212 131 304 264 352 354ZM788 424 656 352C702 291 771 172 816 82L958 160C918 233 838 360 788 424ZM83 645V486C112 489 156 490 186 490H426L425 115C424 89 415 81 390 81C366 81 323 84 281 92L296 -57C352 -64 410 -66 470 -66C547 -66 585 -25 585 36V490H801C830 490 874 489 908 486V644L859 639C914 650 955 698 955 756C955 822 902 875 836 875C770 875 717 822 717 756C717 694 765 643 826 637H800H585V703C585 730 593 786 596 800H417C421 781 426 732 426 704V637H186C155 637 114 641 83 645Z'/%3E%3Cpath transform='translate%2820 230%29 rotate%286%29 scale%280.0357 -0.0357%29' d='M587 796 412 850C401 811 377 759 359 731C306 647 219 517 42 408L173 307C267 372 363 468 436 563H693C680 511 642 437 598 373C540 411 482 447 436 474L328 363C373 334 432 293 492 249C415 173 310 98 138 44L279 -78C427 -21 537 60 623 149C664 116 700 85 726 61L842 199C814 221 775 250 732 281C801 379 849 481 875 555C886 585 901 615 914 637L792 713C766 705 726 700 693 700H527C542 726 565 765 587 796Z'/%3E%3Cpath transform='translate%28130 255%29 rotate%28-8%29 scale%280.0357 -0.0357%29' d='M894 875 795 835C823 797 853 741 874 700L973 742C955 776 920 837 894 875ZM110 153V-20C146 -16 209 -13 247 -13H686L685 -63H861C858 -24 856 33 856 67V586C856 619 858 663 859 687L778 684L831 706C814 742 780 803 754 841L656 801C679 768 705 723 723 684H254C218 684 162 687 122 691V523C153 525 209 527 254 527H687V147H242C195 147 149 150 110 153Z'/%3E%3C/g%3E%3Cg fill='%231f2933' fill-opacity='.06'%3E%3Ccircle cx='240' cy='90' r='3'/%3E%3Ccircle cx='80' cy='110' r='3'/%3E%3Ccircle cx='230' cy='270' r='3'/%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(circle at 8% 12%, rgba(227, 53, 13, 0.16) 0, rgba(227, 53, 13, 0) 34%),
        radial-gradient(circle at 92% 18%, rgba(255, 203, 5, 0.26) 0, rgba(255, 203, 5, 0) 36%),
        radial-gradient(circle at 85% 88%, rgba(42, 117, 187, 0.18) 0, rgba(42, 117, 187, 0) 40%),
        radial-gradient(circle at 12% 85%, rgba(224, 64, 138, 0.12) 0, rgba(224, 64, 138, 0) 36%),
        linear-gradient(180deg, #fff6e8 0%, #fdf1f4 50%, #eaf2fb 100%);
    background-size: 260px 290px, auto, auto, auto, auto, auto;
}
.topnav .brand-logo-en { display: block; height: 30px; width: auto; }
.tn-x { background: #111; color: #fff !important; }
.tn-x:hover { background: #333 !important; }

/* トップのヒーロー */
.en-hero {
    position: relative;
    overflow: hidden;
    padding: 30px 22px 26px;
    border-radius: 28px;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, #e3350d 0%, #f0602f 45%, #ff9f1c 100%);
    box-shadow: 0 12px 34px rgba(227, 53, 13, 0.25);
}
.en-hero::before, .en-hero::after {
    content: ""; position: absolute; border-radius: 50%; border: 26px solid rgba(255, 255, 255, 0.12);
}
.en-hero::before { width: 220px; height: 220px; left: -80px; top: -90px; }
.en-hero::after { width: 260px; height: 260px; right: -90px; bottom: -120px; }
.en-hero > * { position: relative; z-index: 1; }
.en-hero .hero-logo { display: block; width: min(420px, 86%); height: auto; margin: 0 auto 8px; filter: drop-shadow(0 4px 0 rgba(0,0,0,.12)); }
.en-hero h1 { margin: 6px 0 4px; font-size: 24px; font-weight: 900; text-shadow: 0 2px 0 rgba(0,0,0,.15); }
.en-hero p { margin: 0; font-weight: 600; opacity: .95; }
.float-kana { display: flex; justify-content: center; gap: 10px; margin: 18px 0 4px; flex-wrap: wrap; }
.float-kana span {
    display: grid; place-items: center; min-width: 58px; height: 58px; padding: 0 8px; box-sizing: border-box; white-space: nowrap; border-radius: 16px;
    background: #fff; color: #1f2933; font-size: 30px; font-weight: 900; box-shadow: 0 5px 0 rgba(0,0,0,.15);
    animation: kana-bob 2.4s ease-in-out infinite;
}
.float-kana span:nth-child(2) { animation-delay: .2s; } .float-kana span:nth-child(3) { animation-delay: .4s; } .float-kana span:nth-child(4) { animation-delay: .6s; }
.float-kana small { display: block; font-size: 11px; color: #b45309; margin-top: -6px; }
@keyframes kana-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .float-kana span { animation: none; } }

.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 0; }
.cta-grid .cta { margin: 0; font-size: 16px; }
.cta.purple { background: #7b3fbf; } .cta.orange { background: #f08a24; }

/* 今日のポケモン */
.potd { display: flex; align-items: center; gap: 16px; }
.potd img { width: 96px; height: 96px; image-rendering: pixelated; background: #fff7ed; border-radius: 50%; flex: none; }
.potd .jp { font-size: 34px; font-weight: 900; margin: 0; line-height: 1.2; }
.potd .ro { font-size: 17px; margin: 2px 0 6px; }
.potd a.more { font-weight: 700; }
.follow-x { display: flex; align-items: center; gap: 12px; }
.follow-x .xbtn { flex: none; padding: 10px 18px; border-radius: 999px; background: #111; color: #fff !important; font-weight: 800; text-decoration: none; }
@media (max-width: 560px) {
    .en-hero h1 { font-size: 20px; }
    .float-kana span { min-width: 50px; height: 50px; font-size: 26px; }
    .potd .jp { font-size: 28px; }
    .follow-x { flex-direction: column; align-items: stretch; text-align: center; }
}