/* ========================================
   PokemonLab ホーム画面
   HGSS風デザイン
======================================== */

:root {
    --red: #c92323;
    --red-dark: #831010;
    --green: #70ffd0;
    --green-bright: #00ff99;
    --white: #ffffff;
    --screen-bg: #101d18;
    --screen-border: #6a8a7e;
}

/* ========================================
   基本設定
======================================== */

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 24px 16px;

    display: flex;
    justify-content: center;
    align-items: center;

    background:
        radial-gradient(
            circle at top,
            #292929 0%,
            #111111 65%
        );

    color: var(--white);
    font-family: sans-serif;
}

/* ========================================
   ポケギア本体
======================================== */

.pokegear {
    width: 100%;
    max-width: 880px;

    padding: 20px;

    background:
        linear-gradient(
            145deg,
            #e02d2d 0%,
            #b71919 55%,
            #931111 100%
        );

    border: 3px solid #790b0b;
    border-radius: 26px;

    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.22),
        inset 0 -8px 12px rgba(0, 0, 0, 0.15),
        0 12px 30px rgba(0, 0, 0, 0.55);
}

/* ========================================
   ヘッダー
======================================== */

.title-bar {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 48px;
    margin-bottom: 14px;
    padding: 0 6px;

    color: var(--white);
}

.title-bar h1 {
    margin: 0;
    font-size: clamp(22px, 3.5vw, 30px);
    font-weight: bold;
    line-height: 1.3;
}

/* 電源ランプ */
.light {
    width: 18px;
    height: 18px;
    flex-shrink: 0;

    border: 2px solid #145b43;
    border-radius: 50%;

    background: #30ffad;

    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.25),
        0 0 10px rgba(0, 255, 153, 0.9),
        inset 0 2px 3px rgba(255, 255, 255, 0.55);
}

/* ========================================
   メイン画面
======================================== */

.screen {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 24px;

    height: 450px;
    padding: 26px;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.012) 0px,
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px,
            transparent 4px
        ),
        linear-gradient(
            180deg,
            #172c23 0%,
            #0c1713 100%
        );

    border: 4px solid var(--screen-border);
    border-radius: 16px;

    box-shadow:
        inset 0 0 0 4px #07110d,
        inset 0 0 18px rgba(0, 0, 0, 0.65),
        0 2px 0 rgba(255, 255, 255, 0.15);

    color: var(--green);
}

/* ========================================
   左側：ポケモン画像
======================================== */

.pokemon-left {
    display: flex;
    justify-content: center;
    align-items: center;

    min-width: 0;
}

.pokemon-image {
    width: 100%;
    min-height: 260px;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* ポケモン画像 */
.home-pokemon-sprite {
    display: block;

    width: 100%;
    max-width: 280px;
    height: 280px;

    object-fit: contain;
    image-rendering: pixelated;

    filter:
        drop-shadow(5px 7px 0 rgba(0, 0, 0, 0.3));
}

/* ========================================
   画像が存在しない場合
======================================== */

.image-preparing {
    display: none;

    width: 220px;
    height: 220px;

    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;

    background:
        radial-gradient(
            circle,
            rgba(0, 255, 153, 0.08),
            transparent 70%
        );

    border: 3px dashed #49675c;
    border-radius: 18px;

    color: var(--green-bright);
}

.question-mark {
    font-size: 80px;
    font-weight: bold;
    line-height: 1;
}

.preparing-text {
    font-size: 12px;
    letter-spacing: 0.16em;
    color: #6fa891;
}

/* ========================================
   右側：ポケモン情報
======================================== */

.pokemon-right {
    min-width: 0;
}

/* 図鑑番号 */
.pokemon-number {
    margin-bottom: 8px;

    color: #91ffca;
    font-size: 15px;
    font-weight: bold;
}

/* ポケモン名 */
.pokemon-name {
    margin: 0 0 12px;

    color: var(--green-bright);
    font-size: clamp(26px, 4vw, 38px);
    font-weight: bold;
    line-height: 1.3;

    /* 名前の表示領域を2行分確保 */
    min-height: 2.6em;

    overflow-wrap: anywhere;
}

/* タイプ・基本情報 */
.pokemon-info-group {
    margin-bottom: 18px;
}

.info-label {
    color: #8becc3;
    font-size: 13px;
    font-weight: bold;
}

.home-types {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 10px;
}

/* タイプバッジ */
.home-type-badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    min-width: 86px;
    min-height: 34px;
    padding: 6px 14px;

    border: 2px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;

    color: var(--white);
    text-align: center;
    font-size: 13px;
    font-weight: bold;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 4px 8px rgba(0, 0, 0, 0.28);
}

/* ========================================
   基本情報一覧
======================================== */

.pokemon-info-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: start;
    gap: 10px;

    padding-bottom: 8px;
    border-bottom: 1px solid rgba(130, 190, 160, 0.18);
}

.info-row .info-value {
    color: #d3ffe8;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* ========================================
   下部メニュー
======================================== */

.menu {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;

    margin-top: 16px;
}

.menu-button {
    display: flex;
    justify-content: center;
    align-items: center;

    min-height: 48px;
    padding: 10px 8px;

    background:
        linear-gradient(
            180deg,
            #4d4d4d 0%,
            #262626 100%
        );

    border: 1px solid #686868;
    border-radius: 9px;

    color: var(--white);
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        0 3px 5px rgba(0, 0, 0, 0.2);

    transition:
        background 0.2s,
        transform 0.2s,
        box-shadow 0.2s;
}

.menu-button:hover {
    background:
        linear-gradient(
            180deg,
            #626262 0%,
            #383838 100%
        );

    transform: translateY(-2px);

    box-shadow:
        0 5px 10px rgba(0, 0, 0, 0.3);
}

.menu-button:active {
    transform: translateY(0);
}

.menu-button:focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 3px;
}

/* ========================================
   タブレット（768px以下）
======================================== */

@media (max-width: 768px) {

    .pokegear {
        padding: 16px;
    }

    .screen {
        gap: 16px;
        padding: 20px;
    }

    .home-pokemon-sprite {
        max-width: 220px;
        height: 220px;
    }

    .pokemon-image {
        min-height: 220px;
    }

    .pokemon-name {
        margin-bottom: 16px;
    }

    .menu {
        gap: 8px;
    }
}

/* ========================================
   スマホ（600px以下）
======================================== */

@media (max-width: 600px) {

    body {
        align-items: flex-start;
        padding: 12px 8px;
    }

    .pokegear {
        padding: 12px;
        border-radius: 20px;
    }

    .title-bar {
        min-height: 42px;
        margin-bottom: 10px;
        gap: 8px;
    }

    .title-bar h1 {
        font-size: 22px;
    }

    .light {
        width: 15px;
        height: 15px;
    }

    /* ポケモン画像と情報を縦並び */
    .screen {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;

        height: auto;
        min-height: 0;
        padding: 16px 12px;
    }

    .pokemon-image {
        min-height: 160px;
    }

    .home-pokemon-sprite {
        max-width: 170px;
        height: 170px;
    }

    .image-preparing {
        width: 150px;
        height: 150px;
        gap: 8px;
    }

    .question-mark {
        font-size: 54px;
    }

    .preparing-text {
        font-size: 9px;
    }

    .pokemon-right {
        width: 100%;
    }

    .pokemon-number {
        font-size: 12px;
    }

    .pokemon-name {
        margin-bottom: 12px;
        font-size: 26px;
    }

    .pokemon-info-group {
        margin-bottom: 14px;
    }

    .home-types {
        margin-top: 8px;
    }

    .home-type-badge {
        min-width: 72px;
        min-height: 28px;
        padding: 4px 10px;
        font-size: 11px;
    }

    .pokemon-info-list {
        gap: 8px;
    }

    .info-row {
        grid-template-columns: 65px minmax(0, 1fr);
        padding-bottom: 6px;
    }

    .info-row .info-value {
        font-size: 12px;
    }

    /* メニューを2列×2行 */
    .menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 12px;
    }

    .menu-button {
        min-height: 42px;
        padding: 8px;
        font-size: 12px;
    }
}

/* ========================================
   極小スマホ（360px以下）
======================================== */

@media (max-width: 360px) {

    .title-bar h1 {
        font-size: 19px;
    }

    .home-pokemon-sprite {
        max-width: 140px;
        height: 140px;
    }

    .pokemon-image {
        min-height: 140px;
    }

    .pokemon-name {
        font-size: 23px;
    }

    .menu-button {
        font-size: 11px;
    }
}
/* ========================================
   ホーム画面：文字サイズ調整
======================================== */

/* 図鑑番号 */
.pokemon-number {
    font-size: 18px;
}

/* タイプ・分類などの項目名 */
.info-label {
    font-size: 16px;
}

/* 分類・高さ・重さの値 */
.info-row .info-value {
    font-size: 17px;
}

/* タイプバッジ */
.home-type-badge {
    font-size: 15px;
    min-height: 38px;
    min-width: 90px;
}

/* 情報の行間 */
.pokemon-info-list {
    gap: 12px;
}

.info-row {
    padding-bottom: 10px;
}
/* ========================================
   ホーム画面：メニュー中央配置
======================================== */

.menu {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.menu-button {
    width: 160px;
    max-width: 100%;
}
@media (max-width: 600px) {

    .pokemon-number {
        font-size: 15px;
    }

    .info-label {
        font-size: 13px;
    }

    .info-row .info-value {
        font-size: 14px;
    }

    .home-type-badge {
        font-size: 12px;
        min-height: 30px;
        min-width: 76px;
    }

    .pokemon-info-list {
        gap: 8px;
    }

    .info-row {
        padding-bottom: 6px;
    }

    .menu {
        gap: 8px;
    }

    .menu-button {
        flex: 1;
        width: auto;
        min-width: 0;
    }
}
@media (max-width: 600px) {

    /* 本体 */
    .pokegear {
        width: 100%;
        max-width: 100%;
    }

    /* メイン画面 */
    .screen {
        height: auto;
        min-height: 0;

        grid-template-columns: minmax(0, 1fr);
        gap: 8px;

        padding: 14px 12px;
    }

    /* ポケモン画像をコンパクトに */
    .pokemon-image {
        min-height: 0;
    }

    .home-pokemon-sprite {
        width: 150px;
        max-width: 100%;
        height: 150px;
    }

    .image-preparing {
        width: 150px;
        height: 150px;
    }

    /* ポケモン情報 */
    .pokemon-right {
        width: 100%;
        min-width: 0;
    }

    .pokemon-number {
        margin-bottom: 4px;
        font-size: 14px;
    }

    /* PC用の名前2行分確保を解除 */
    .pokemon-name {
        min-height: 0;
        margin: 0 0 12px;

        font-size: 24px;
        line-height: 1.35;

        overflow-wrap: anywhere;
    }

    /* タイプ */
    .pokemon-info-group {
        margin-bottom: 12px;
    }

    .home-types {
        gap: 6px;
        margin-top: 6px;
    }

    .home-type-badge {
        min-width: 72px;
        min-height: 30px;
        padding: 4px 10px;
        font-size: 12px;
    }

    /* 分類・高さ・重さ */
    .pokemon-info-list {
        gap: 6px;
    }

    .info-row {
        grid-template-columns: 70px minmax(0, 1fr);
        gap: 8px;
        padding-bottom: 6px;
    }

    .info-label {
        font-size: 13px;
        white-space: nowrap;
    }

    .info-row .info-value {
        min-width: 0;
        font-size: 13px;
        line-height: 1.5;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    /* 下部メニュー */
    .menu {
        display: flex;
        justify-content: center;
        gap: 8px;
    }

    .menu-button {
        flex: 1;
        width: auto;
        min-width: 0;
        min-height: 42px;
        font-size: 12px;
    }
}