/* 首頁：模式選擇與對局設定。與 main.css 共用色系，但版面完全獨立（不吃 3D 棋盤那套） */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(56, 189, 248, 0.10), transparent 60%),
        #020617;
    color: #e2e8f0;
    min-height: 100vh;
}

/*
 * hidden 屬性的保險。
 *
 * [hidden] 的 display:none 來自瀏覽器預設樣式，任何作者端的 display 都會蓋掉它。
 * .mode-card 設了 display:flex，於是 JS 明明設了 element.hidden = true，
 * 卡片還是照常顯示——「組牌工具」對未授權帳號藏不起來就是這樣來的，
 * 而且不會有任何錯誤，DOM 上 hidden 也確實是 true，只有畫面不對。
 *
 * 這條放在最前面用 !important 兜底：宣告成 hidden 的東西就該看不見，
 * 之後誰再對某個元素加 display 也不會又踩到同一個坑。
 */
[hidden] { display: none !important; }

.home {
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 20px 40px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ── 頁首 ── */

.home-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.brand h1 {
    font-size: 1.9em;
    letter-spacing: 0.5px;
    color: #f1f5f9;
}

.brand-sub {
    margin-top: 4px;
    font-size: 0.9em;
    color: #64748b;
}

.ua-auth-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ua-user-name {
    font-size: 0.85em;
    color: #94a3b8;
}

/* ── 按鈕 ── */

.ghost-btn,
.primary-btn {
    font: inherit;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.ghost-btn {
    background: transparent;
    color: #cbd5e1;
    border: 1px solid #334155;
    padding: 7px 14px;
    font-size: 0.85em;
}

.ghost-btn:hover {
    background: #1e293b;
    border-color: #475569;
}

.primary-btn {
    background: #0369a1;
    color: #f0f9ff;
    border: 1px solid #0ea5e9;
    padding: 11px 30px;
    font-size: 1em;
    font-weight: 600;
}

.primary-btn:hover {
    background: #0284c7;
}

.primary-btn:disabled {
    background: #1e293b;
    border-color: #334155;
    color: #64748b;
    cursor: not-allowed;
}

/* ── 步驟區塊 ── */

.home-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.step-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05em;
    font-weight: 600;
    color: #cbd5e1;
    margin-bottom: 14px;
}

.step-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0369a1;
    color: #f0f9ff;
    font-size: 0.8em;
    font-weight: 700;
}

.mode-badge {
    margin-left: auto;
    font-size: 0.8em;
    font-weight: 500;
    color: #7dd3fc;
    background: rgba(14, 165, 233, 0.12);
    border: 1px solid rgba(14, 165, 233, 0.35);
    padding: 3px 12px;
    border-radius: 999px;
}

/* ── 模式卡 ── */

.mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}

.mode-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    text-decoration: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    padding: 18px 18px 16px;
    min-height: 156px;
    background: linear-gradient(160deg, #14213a 0%, #0f172a 100%);
    border: 1px solid #1e293b;
    border-radius: 12px;
    position: relative;
    transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}

.mode-card:hover {
    border-color: #0ea5e9;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.8);
}

.mode-card.selected {
    border-color: #0ea5e9;
    box-shadow: inset 0 0 0 1px #0ea5e9, 0 10px 24px rgba(2, 6, 23, 0.8);
}

.mode-card-alt {
    background: linear-gradient(160deg, #2a1f3d 0%, #0f172a 100%);
}

.mode-card-alt:hover {
    border-color: #a78bfa;
}

.mode-name {
    font-size: 1.15em;
    font-weight: 600;
    color: #f1f5f9;
}

.mode-desc {
    font-size: 0.82em;
    line-height: 1.6;
    color: #94a3b8;
}

.mode-tag {
    margin-top: auto;
    font-size: 0.7em;
    letter-spacing: 1px;
    color: #64748b;
    border: 1px solid #334155;
    border-radius: 4px;
    padding: 2px 8px;
}

/* ── 對局設定 ── */

.step-setup {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid #1e293b;
    border-radius: 12px;
    padding: 20px;
}

.setup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.seat-card {
    background: #0b1220;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.seat-card h3 {
    font-size: 0.95em;
    color: #7dd3fc;
    font-weight: 600;
}

.seat-card label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.78em;
    color: #94a3b8;
}

.seat-card input,
.seat-card select {
    font: inherit;
    font-size: 0.95em;
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 8px 10px;
    width: 100%;
}

.seat-card input:focus,
.seat-card select:focus {
    outline: none;
    border-color: #0ea5e9;
}

.setup-note {
    margin-top: 14px;
    font-size: 0.8em;
    line-height: 1.6;
    color: #64748b;
}

.setup-actions {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── 頁尾 ── */

.home-footer {
    text-align: center;
    font-size: 0.8em;
    color: #475569;
}

.home-footer a {
    color: #64748b;
    text-decoration: none;
}

.home-footer a:hover {
    color: #94a3b8;
    text-decoration: underline;
}

.home-footer .dot {
    margin: 0 8px;
}

@media (max-width: 560px) {
    .home { padding: 20px 14px 30px; }
    .brand h1 { font-size: 1.5em; }
    .setup-actions { flex-direction: column-reverse; align-items: stretch; }
    .setup-actions button { width: 100%; }
}

/* ═══════ 連線對戰：房間與大廳 ═══════ */

.room-entry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.room-entry-box {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
    padding: 18px;
}

.room-entry-box h3 {
    margin: 0 0 6px;
    font-size: 15px;
}

/* 隨機配對：放在兩張房間卡上面，視覺上要比它們重一點——
   這是「不必先認識對方」的那條路，多數人應該先看到它 */
.queue-box {
    margin-bottom: 14px;
    border-color: rgba(56, 189, 248, .28);
    background: rgba(56, 189, 248, .05);
}

.queue-setup {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin: 12px 0 4px;
}

.queue-setup label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.78em;
    color: #94a3b8;
}

.queue-setup input,
.queue-setup select {
    font: inherit;
    font-size: 0.95em;
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid #334155;
    border-radius: 7px;
    padding: 7px 9px;
}

/* 排隊中整組會被 disable：灰掉但仍要讀得出剛才選了什麼 */
.queue-setup input:disabled,
.queue-setup select:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.room-join-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

/* 序號要用眼睛核對、用嘴巴唸，等寬字與字距讓它好認 */
.room-join-row input {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(0, 0, 0, .28);
    color: inherit;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 16px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.room-code-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 14px 18px;
    background: rgba(59, 111, 212, .12);
    border: 1px solid rgba(59, 111, 212, .35);
    border-radius: 12px;
}

.room-code-label { font-size: 13px; opacity: .75; }

.room-code-bar code {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: .22em;
}

.room-seat-name { margin: 6px 0 2px; font-size: 15px; font-weight: 600; }
.room-seat-state { margin: 0; font-size: 13px; opacity: .75; }
.seat-card.is-ready { border-color: rgba(127, 224, 160, .55); }
.seat-card.is-empty { opacity: .55; }