/* ============================================================
   皮克敏專區（/pikmin，2026-10-05）
   左：我的代碼、報名、我的任務　右：統計、全部隊伍、待命房主、候補
   ============================================================ */
.pk-page { padding: var(--space-lg) 0 var(--space-3xl); --pk: #5fbf4b; --pk-soft: rgba(95, 191, 75, 0.13); --pk-pink: #ff8fc2; --pk-bad: #e0556a; }
[data-theme="light"] .pk-page { --pk: #2f8a2a; --pk-soft: rgba(47, 138, 42, 0.1); --pk-bad: #c43a52; }
.pk-page .container { max-width: 1240px; }
.pk-muted { color: var(--color-text-muted); font-size: 0.78rem; }
.pk-hint { font-size: 0.78rem; color: var(--color-text-secondary); line-height: 1.65; }
.pk-hint-warn { color: var(--color-accent); }

/* ── 沒登入／沒綁 Discord：只有中間的提示 ── */
.pk-gate-page { min-height: calc(100vh - var(--navbar-height) - 120px); display: flex; align-items: center; }
.pk-gate { max-width: 420px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 16px; }
.pk-gate-icon { width: 96px; height: 96px; border-radius: 28px; }
.pk-gate-icon svg { width: 68px; height: 68px; }
.pk-gate h1 { font-size: 1.6rem; }
.pk-gate p { font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.7; }
.pk-gate .pk-btn-primary { flex: none; padding: 8px 28px; }

/* ── 標題 ── */
.pk-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.pk-hero-icon { flex: none; width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center;
    background: radial-gradient(circle at 30% 25%, rgba(255, 143, 194, 0.35), transparent 60%), var(--pk-soft); border: 1px solid rgba(95, 191, 75, 0.35); }
.pk-hero-icon svg { width: 46px; height: 46px; }
.pk-hero h1 { font-size: 1.8rem; line-height: 1.2; }
.pk-hero p { margin-top: 4px; max-width: 780px; font-size: 0.86rem; color: var(--color-text-secondary); line-height: 1.7; }

/* ── 分頁 ── */
.pk-tabs { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.pk-tabs::-webkit-scrollbar { display: none; }
.pk-tab { flex: none; display: flex; flex-direction: column; gap: 1px; padding: 9px 16px; border-radius: 12px; min-width: 128px;
    background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-secondary); transition: border-color var(--transition-fast); }
.pk-tab b { font-size: 0.88rem; color: var(--color-text); }
.pk-tab { flex-direction: row; align-items: baseline; gap: 6px; min-width: 0; }
.pk-tab small { font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.pk-tab:hover { border-color: var(--pk); }
.pk-tab.is-active { border-color: var(--pk); background: var(--pk-soft); box-shadow: inset 0 -3px 0 var(--pk); }

/* ── 卡片、表單、按鈕 ── */
.pk-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.pk-card h2 { font-size: 1rem; }
.pk-card h3 { font-size: 0.92rem; display: flex; align-items: center; gap: 8px; }
.pk-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pk-form { display: flex; flex-direction: column; gap: 10px; }
.pk-field { display: flex; flex-direction: column; gap: 5px; font-size: 0.76rem; color: var(--color-text-secondary); }
.pk-input { width: 100%; min-height: 38px; padding: 7px 10px; border-radius: 9px; background: var(--color-bg); border: 1px solid var(--color-border);
    color: var(--color-text); font-family: var(--font-primary); font-size: 0.88rem; }
.pk-input:focus { outline: none; border-color: var(--pk); box-shadow: 0 0 0 3px var(--pk-soft); }
.pk-input.is-bad { border-color: var(--pk-bad); }
.pk-input-xs { width: auto; min-height: 26px; padding: 1px 4px; font-size: 0.8rem; display: inline-block; }
.pk-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; }
.pk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--color-border); background: var(--color-surface-elevated); color: var(--color-text); font: inherit; font-size: 0.84rem; font-weight: 500; white-space: nowrap; }
.pk-btn:hover:not(:disabled) { border-color: var(--pk); }
.pk-btn:disabled { opacity: 0.5; cursor: wait; }
.pk-btn-primary { background: var(--pk); border-color: var(--pk); color: #fff; font-weight: 700; flex: 1 1 auto; }
.pk-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.pk-btn-ghost { background: transparent; }
.pk-btn-sm { min-height: 30px; padding: 3px 10px; font-size: 0.76rem; border-radius: 8px; }
.pk-btn.is-on { background: var(--pk-soft); border-color: var(--pk); color: var(--pk); font-weight: 700; }
.pk-danger { color: var(--pk-bad); }
.pk-link { background: none; border: 0; padding: 0; color: var(--pk); font: inherit; font-size: 0.8rem; cursor: pointer; align-self: flex-start; }
.pk-link:hover { text-decoration: underline; }
.pk-link.pk-danger { color: var(--pk-bad); }
.pk-chip { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 600;
    background: var(--color-surface-elevated); color: var(--color-text-secondary); border: 1px solid var(--color-border); white-space: nowrap; }
.pk-chip-ok { color: var(--pk); background: var(--pk-soft); border-color: transparent; }

.pk-code { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 8px; cursor: pointer; border: 1px dashed rgba(95, 191, 75, 0.55);
    background: var(--pk-soft); color: var(--color-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.84rem; letter-spacing: 0.04em; }
.pk-code svg { width: 13px; height: 13px; color: var(--pk); }
.pk-code:hover { border-style: solid; }
.pk-code.is-copied { border-color: var(--pk); }
.pk-code.is-copied::after { content: '✓'; color: var(--pk); font-weight: 700; }

.pk-av { flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center;
    background: linear-gradient(135deg, #3b6e33, #2b4f55); color: #fff; font-size: 0.78rem; font-weight: 700; }
.pk-av img { width: 100%; height: 100%; object-fit: cover; }
.pk-av-lg { width: 44px; height: 44px; font-size: 1rem; }

/* ── 版面 ── */
.pk-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; align-items: start; }
.pk-side { display: flex; flex-direction: column; gap: 12px; }
.pk-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.pk-login { flex-direction: row; align-items: center; gap: 14px; }
.pk-login > svg, .pk-empty > svg { width: 34px; height: 34px; color: var(--pk); flex: none; }
.pk-login > div { flex: 1; }
.pk-login p { font-size: 0.82rem; color: var(--color-text-secondary); }
.pk-login .pk-btn-primary { flex: none; }
.pk-empty { align-items: center; text-align: center; padding: 36px 16px; color: var(--color-text-secondary); font-size: 0.86rem; }

.pk-push { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.pk-push .pk-btn-primary { flex: none; align-self: flex-start; }
.pk-task:target, .pk-push:target { animation: pk-flash 1.6s ease 2; }
@keyframes pk-flash { 50% { box-shadow: 0 0 0 4px var(--pk); } }
.pk-profile.is-needed { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.pk-profile-view { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }

/* 報名方式 */
.pk-modes { display: flex; flex-direction: column; gap: 6px; }
.pk-mode { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--color-border); cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast); }
.pk-mode:hover { border-color: rgba(95, 191, 75, 0.5); }
.pk-mode:has(input:checked) { border-color: var(--pk); background: var(--pk-soft); }
.pk-mode input { margin-top: 3px; accent-color: var(--pk); }
.pk-mode > span { display: flex; flex-direction: column; gap: 2px; }
.pk-mode b { font-size: 0.88rem; }
.pk-mode small { font-size: 0.76rem; color: var(--color-text-secondary); line-height: 1.55; }

/* 我的任務 */
.pk-task { border-color: rgba(95, 191, 75, 0.45); }
.pk-waiting { border-color: var(--color-accent); }
.pk-steps { margin: 0; padding-left: 18px; font-size: 0.78rem; color: var(--color-text-secondary); line-height: 1.7; }
.pk-roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pk-roster li { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: var(--color-bg); }
.pk-roster-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pk-roster-name { font-size: 0.86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-roster-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pk-host { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: var(--color-bg); }
.pk-host > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pk-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; counter-reset: pk; }
.pk-checklist li { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; padding: 6px 0; counter-increment: pk; }
.pk-checklist li::before { content: counter(pk); flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    font-size: 0.72rem; font-weight: 700; border: 1px solid var(--color-border); color: var(--color-text-secondary); }
.pk-checklist li.is-done::before { content: '✓'; background: var(--pk); border-color: var(--pk); color: #fff; }
.pk-checklist li span { flex: 1; }
.pk-mates { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pk-mates .pk-muted { margin-right: 4px; }
.pk-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--color-text-secondary); cursor: pointer; }
.pk-switch input { accent-color: var(--pk); width: 15px; height: 15px; }

/* ── 統計、提示 ── */
.pk-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.pk-stats > div { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.pk-stats b { font-size: 1.4rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pk-stats span { font-size: 0.72rem; color: var(--color-text-muted); }
.pk-stats .is-warn b { color: var(--color-accent); }
.pk-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px;
    background: var(--color-accent-soft); border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent); font-size: 0.8rem; line-height: 1.6; }

/* ── 隊伍 ── */
.pk-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.pk-room { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.pk-room.is-mine { border-color: var(--pk); box-shadow: 0 0 0 2px var(--pk-soft); }
.pk-room.is-started { background: linear-gradient(180deg, var(--pk-soft), transparent 60%), var(--color-surface); }
.pk-room-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }
.pk-room-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pk-room-title b { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-room-members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pk-room-members li { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; min-height: 30px; }
.pk-room-members li.is-me .pk-room-name { color: var(--pk); font-weight: 700; }
.pk-room-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-slot { justify-content: center; border: 1px dashed var(--color-border); border-radius: 15px; color: var(--color-text-faint); font-size: 0.72rem !important; }
.pk-slot-held { border-style: solid; background: var(--color-bg); color: var(--color-text-muted); }
.pk-reserve { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.78rem; color: var(--color-text-secondary); }
.pk-dots { display: inline-flex; gap: 3px; flex: none; }
.pk-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-border); }
.pk-dots i.on { background: var(--pk); }
.pk-legend { font-size: 0.72rem; color: var(--color-text-muted); display: flex; align-items: center; gap: 8px; }
.pk-people { display: flex; flex-wrap: wrap; gap: 8px; }
.pk-person { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--color-bg); font-size: 0.8rem; }
.pk-person .pk-av { width: 24px; height: 24px; font-size: 0.68rem; }
.pk-wait { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); }

/* ── 右欄兩區：本週隊伍／下週報名狀況 ── */
.pk-section { display: flex; flex-direction: column; gap: 12px; }
.pk-section + .pk-section { margin-top: 14px; padding-top: 18px; border-top: 1px solid var(--color-border); }
.pk-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.pk-section-head h2 { font-size: 1.15rem; display: flex; align-items: baseline; gap: 8px; }
.pk-section-sub { font-size: 0.78rem; color: var(--color-text-secondary); }
.pk-join { align-self: stretch; border-style: dashed; border-color: var(--pk); color: var(--pk); font-weight: 700; }
.pk-join:hover:not(:disabled) { background: var(--pk-soft); }

/* ── 好友代碼牆 ── */
.pk-codes-head { display: flex; gap: 10px; margin-bottom: 12px; }
.pk-codes-head .pk-input { max-width: 360px; }
.pk-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
/* 好友代碼卡（2026-10-05 放大）：上方彩色帶＋花朵，頭像壓在色帶上，大字代碼按鈕 */
.pk-code-card { --pc: #e8463c; --pc2: #ff8a6b; position: relative; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
    background: var(--color-surface); border: 1px solid var(--color-border); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); }
.pk-code-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--pc) 60%, transparent); box-shadow: 0 14px 34px color-mix(in srgb, var(--pc) 25%, transparent); }
/* 皮克敏七色：代碼卡與色票共用（.pk-c0 紅色寫明，避免後面的規則蓋掉各色） */
.pk-c0 { --pc: #e8463c; --pc2: #ff8a6b; } .pk-c1 { --pc: #f2c230; --pc2: #ffe17a; } .pk-c2 { --pc: #3b82d6; --pc2: #7cc0ff; } .pk-c3 { --pc: #8a4fd6; --pc2: #c49bff; }
.pk-c4 { --pc: #b9b3c9; --pc2: #ffffff; } .pk-c5 { --pc: #6b6f7d; --pc2: #a9adb9; } .pk-c6 { --pc: #e86fb0; --pc2: #ffb8dc; }
.pk-code-band { position: relative; height: 74px; background: radial-gradient(circle at 85% -20%, var(--pc2), transparent 60%), linear-gradient(135deg, var(--pc), color-mix(in srgb, var(--pc) 55%, #1d1a39)); }
.pk-code-bloom { position: absolute; right: 12px; top: 10px; width: 46px; height: 46px; color: var(--pc2); transform: rotate(12deg); filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.pk-code-me { position: absolute; left: 12px; top: 10px; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.9); color: #1d1a39; font-size: 0.72rem; font-weight: 800; }
.pk-code-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 0 16px 18px; margin-top: -36px; }
.pk-av-xl { width: 72px; height: 72px; font-size: 1.6rem; border: 4px solid var(--color-surface); box-shadow: 0 6px 16px rgba(0,0,0,.3); margin-bottom: 6px; background: linear-gradient(135deg, var(--pc), #2b4f55); }
[data-theme="light"] .pk-av-xl { border-color: #fff; }
.pk-code-name { font-size: 1.08rem; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-code-trainer { margin-top: 4px; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; background: color-mix(in srgb, var(--pc) 16%, transparent); color: var(--color-text); }
.pk-code-note { margin: 6px 0 0; font-size: 0.8rem; color: var(--color-text-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pk-code-label { margin-top: 12px; font-size: 0.66rem; letter-spacing: 0.12em; color: var(--color-text-muted); }
.pk-code-card .pk-code { margin-top: 4px; width: 100%; justify-content: center; padding: 10px 12px; font-size: 1.12rem; font-weight: 700; letter-spacing: 0.08em; border-radius: 12px;
    border: 1px dashed color-mix(in srgb, var(--pc) 70%, transparent); background: color-mix(in srgb, var(--pc) 12%, transparent); }
.pk-code-card .pk-code svg { width: 16px; height: 16px; color: var(--pc); }
.pk-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.pk-color-opt { position: relative; cursor: pointer; }
.pk-color-opt input { position: absolute; opacity: 0; }
.pk-swatch { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 0.9rem;
    background: linear-gradient(135deg, var(--pc2), var(--pc)); border: 2px solid var(--color-border); transition: transform var(--transition-fast); }
.pk-swatch-auto { background: var(--color-bg); }
.pk-color-opt:hover .pk-swatch { transform: scale(1.1); }
.pk-color-opt input:checked + .pk-swatch { border-color: var(--color-text); box-shadow: 0 0 0 3px var(--pk-soft); transform: scale(1.12); }
.pk-color-opt input:focus-visible + .pk-swatch { outline: 2px solid var(--pk); outline-offset: 2px; }
.pk-code-card.is-mine { border-color: var(--pk); box-shadow: 0 0 0 2px var(--pk-soft); }

@media (max-width: 900px) {
    .pk-layout { grid-template-columns: minmax(0, 1fr); }
    .pk-side { position: static; }
    .pk-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .pk-hero { align-items: flex-start; }
    .pk-hero-icon { width: 48px; height: 48px; border-radius: 15px; }
    .pk-hero-icon svg { width: 34px; height: 34px; }
    .pk-hero h1 { font-size: 1.45rem; }
    .pk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pk-banner { flex-direction: column; align-items: flex-start; }
}