/*
 * 허브 화면 — 모바일 세로 먼저, 그다음 넓은 화면.
 *
 * 색은 게임(밤하늘 배경)과 이어지게 어두운 남색 바탕에 밝은 카드다.
 * 카드마다 색(hue)이 달라서 아직 글을 잘 못 읽는 아이도 색과 그림으로 찾는다.
 * 글자 크기·버튼 크기는 일곱 살 손가락 기준 — 카드 하나가 손가락 두 개보다 크다.
 */

:root {
    --bg: #131f38;
    --bg-2: #1b2a4a;
    --text: #eaf1ff;
    --muted: #9fb2d6;
    --card-radius: 22px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background: radial-gradient(120% 80% at 50% 0%, var(--bg-2) 0%, var(--bg) 60%);
    background-attachment: fixed;
    color: var(--text);
    font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* 노치가 있는 폰에서 내용이 가리지 않게. */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ── 머리말 ───────────────────────────────────────────── */

.top {
    text-align: center;
    padding: 28px 20px 8px;
}

.brand {
    margin: 0;
    font-size: 14px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--muted);
}

.title {
    margin: 6px 0 0;
    font-size: clamp(30px, 9vw, 46px);
    line-height: 1.15;
    font-weight: 800;
    /* 이름만 무지개로 — 아이가 "우리 집 게임 세상"이라고 느끼게. */
    background: linear-gradient(100deg, #ffd166, #7ee3a8 45%, #7cc6ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sub {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 15px;
}

/* ── 카드 그리드 ──────────────────────────────────────── */

main {
    flex: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 18px 16px 8px;
}

.grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* 좁은 폰은 한 줄에 하나, 넓어지면 저절로 두 줄·세 줄이 된다. */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 108px;
    padding: 18px;
    border-radius: var(--card-radius);
    text-decoration: none;
    color: #17223a;
    /* hue 는 app.js 가 게임마다 다르게 넣는다. */
    background: linear-gradient(150deg,
        hsl(var(--hue, 145) 85% 82%),
        hsl(calc(var(--hue, 145) + 24) 80% 70%));
    box-shadow: 0 10px 22px hsl(var(--hue, 145) 60% 12% / 0.45);
    transition: transform 120ms ease, box-shadow 120ms ease;
    /* 아이가 카드를 꾹 눌러도 글자가 선택되지 않게. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.card:active {
    transform: scale(0.97);
    box-shadow: 0 4px 12px hsl(var(--hue, 145) 60% 12% / 0.5);
}

.card:focus-visible {
    outline: 4px solid #ffd166;
    outline-offset: 3px;
}

.card .emoji {
    font-size: 44px;
    line-height: 1;
    flex: none;
    /* 이모지가 폰마다 크기가 달라도 자리는 같게. */
    width: 56px;
    text-align: center;
}

.card .text { min-width: 0; }

.card .name {
    display: block;
    font-size: 20px;
    font-weight: 800;
    /* 이름이 길어도 카드가 무너지지 않게 한 줄로 자른다. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card .tagline {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    color: #33405e;
}

/* 준비 중 카드 — 누를 수 없고, 색이 빠져 있어 한눈에 구분된다. */
.card.soon {
    background: #223256;
    color: #8fa3c9;
    box-shadow: none;
    border: 2px dashed #3c4f7a;
    cursor: default;
}

.card.soon .tagline { color: #7286aa; }
.card.soon:active { transform: none; }

/* ── 꼬리말 ───────────────────────────────────────────── */

.bottom {
    text-align: center;
    padding: 18px 16px 28px;
}

.admin {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid #33456e;
    color: var(--muted);
    text-decoration: none;
    font-size: 13px;
}

.admin:active { background: #223256; }

.noscript {
    margin-top: 20px;
    text-align: center;
    color: var(--muted);
}

.noscript a { color: #ffd166; }

/* 움직임을 싫어하는 설정을 존중한다. */
@media (prefers-reduced-motion: reduce) {
    .card { transition: none; }
    .card:active { transform: none; }
}