/* ===========================================================
   GameHub 玩家端 App — design tokens + 元件
   顏色/圓角/陰影只改 :root 的 --app-*（RULES §7）
   =========================================================== */
:root{
  --app-brand:#6d5efc;      --app-brand-ink:#4f3fe0;   --app-brand-soft:#eeecff;
  --app-brand-2:#a855f7;
  --app-line:#06c755;       --app-line-ink:#05a948;

  --app-bg:#f3f2fa;
  --app-surface:#ffffff;
  --app-surface-2:#f8f7fd;
  --app-border:rgba(30,20,80,.09);
  --app-border-strong:rgba(30,20,80,.18);

  --app-heading:#1b1640;
  --app-text:#2a2550;
  --app-muted:#6b6790;
  --app-faint:#a19dc0;

  --app-ok:#16a34a;    --app-ok-bg:#dcfce7;
  --app-warn:#d97706;  --app-warn-bg:#fef3c7;
  --app-danger:#dc2626;--app-danger-bg:#fee2e2;

  --app-radius:18px;
  --app-radius-sm:12px;
  --app-shadow:0 2px 14px rgba(40,25,120,.07);
  --app-shadow-lg:0 12px 36px rgba(40,25,120,.16);

  --app-font:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans TC','PingFang TC',system-ui,sans-serif;
  --app-tabbar-h:64px;
  color-scheme: light;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  background:var(--app-bg); color:var(--app-text); font-family:var(--app-font);
  font-size:16px; line-height:1.5; min-height:100vh; min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--app-brand-ink); text-decoration:none; }
button{ font-family:inherit; }

/* ── 版面 ── */
.app{ max-width:560px; margin:0 auto; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
.app.has-tabbar{ padding-bottom:calc(var(--app-tabbar-h) + env(safe-area-inset-bottom) + 12px); }
.app-top{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;
  background:rgba(243,242,250,.86); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px);
}
.app-top h1{ font-size:20px; font-weight:800; color:var(--app-heading); margin:0; flex:1; letter-spacing:.2px; }
.app-top .back{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--app-surface); box-shadow:var(--app-shadow); color:var(--app-heading); font-size:18px; }
.app-main{ flex:1; padding:4px 16px 16px; }

/* ── Hero（登入/大廳頂部） ── */
.hero{
  background:linear-gradient(135deg,var(--app-brand),var(--app-brand-2)); color:#fff;
  border-radius:var(--app-radius); padding:20px; box-shadow:var(--app-shadow-lg); position:relative; overflow:hidden;
}
.hero::after{ content:''; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.12); }
.hero .hello{ display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
.hero .hello b{ font-size:19px; display:block; }
.hero .hello small{ opacity:.85; }

/* ── 卡片 / 區塊 ── */
.section-title{ font-size:13px; font-weight:700; color:var(--app-muted); letter-spacing:.6px; margin:22px 4px 10px; display:flex; justify-content:space-between; align-items:center; }
.card{ background:var(--app-surface); border-radius:var(--app-radius); box-shadow:var(--app-shadow); padding:16px; }
.card + .card{ margin-top:12px; }
.muted{ color:var(--app-muted); }
.small{ font-size:13px; }
.center{ text-align:center; }

/* ── 按鈕 ── */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  border:0; border-radius:14px; padding:14px 16px; font-size:16px; font-weight:700; cursor:pointer;
  background:var(--app-brand); color:#fff; transition:transform .08s, filter .15s; text-decoration:none;
}
.btn:active{ transform:scale(.98); }
.btn[disabled]{ opacity:.5; pointer-events:none; }
.btn-line{ background:var(--app-line); }
.btn-line:hover{ background:var(--app-line-ink); }
.btn-ghost{ background:var(--app-brand-soft); color:var(--app-brand-ink); }
.btn-plain{ background:var(--app-surface); color:var(--app-text); box-shadow:var(--app-shadow); }
.btn-danger{ background:var(--app-danger-bg); color:var(--app-danger); }
.btn-sm{ padding:9px 12px; font-size:14px; border-radius:11px; width:auto; }
.btn-row{ display:flex; gap:10px; }
.btn-row > .btn{ flex:1; }

/* ── 表單 ── */
.field{ display:block; margin-bottom:14px; }
.field > span{ display:block; font-size:13px; font-weight:700; color:var(--app-muted); margin:0 2px 6px; }
.input{
  width:100%; border:1.5px solid var(--app-border-strong); border-radius:14px; padding:13px 14px;
  font-size:17px; background:var(--app-surface); color:var(--app-heading); outline:none; font-family:inherit;
}
.input:focus{ border-color:var(--app-brand); box-shadow:0 0 0 4px var(--app-brand-soft); }
.input.code{ text-align:center; font-size:26px; font-weight:800; letter-spacing:8px; text-transform:uppercase; }
.alert{ border-radius:12px; padding:11px 14px; font-size:14px; margin-bottom:14px; }
.alert-error{ background:var(--app-danger-bg); color:var(--app-danger); }
.alert-ok{ background:var(--app-ok-bg); color:var(--app-ok); }
.alert-warn{ background:var(--app-warn-bg); color:var(--app-warn); }

/* ── 加入房間區塊 ── */
.join-box{ display:flex; gap:10px; }
.join-box .input{ flex:1; }
.join-box .scan{ width:56px; flex:none; border-radius:14px; border:0; background:var(--app-brand-soft); color:var(--app-brand-ink); font-size:24px; cursor:pointer; }

/* ── 房間列表 ── */
.room-list{ display:flex; flex-direction:column; gap:10px; }
.room-item{
  display:flex; align-items:center; gap:14px; background:var(--app-surface); border-radius:var(--app-radius);
  box-shadow:var(--app-shadow); padding:14px; cursor:pointer; color:inherit; transition:transform .08s;
}
.room-item:active{ transform:scale(.985); }
.room-item .ico{ width:52px; height:52px; border-radius:15px; display:grid; place-items:center; font-size:28px; background:var(--app-brand-soft); flex:none; }
.room-item .meta{ flex:1; min-width:0; }
.room-item .meta b{ display:block; color:var(--app-heading); font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.room-item .meta small{ color:var(--app-muted); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.room-item .go{ color:var(--app-faint); font-size:22px; }
.room-item.ended{ opacity:.6; }
.room-item.ended .ico{ background:#eee; filter:grayscale(1); }
.pill{ display:inline-block; font-size:11px; font-weight:800; padding:2px 8px; border-radius:99px; vertical-align:middle; }
.pill-live{ background:var(--app-ok-bg); color:var(--app-ok); }
.pill-end{ background:#ececf3; color:var(--app-muted); }
.pill-line{ background:#e3f9ec; color:var(--app-line-ink); }
.pill-guest{ background:var(--app-warn-bg); color:var(--app-warn); }

.empty{ text-align:center; padding:34px 16px; color:var(--app-muted); }
.empty .big{ font-size:46px; display:block; margin-bottom:6px; }

/* ── 頭像 ── */
.avatar{ border-radius:50%; object-fit:cover; flex:none; display:inline-block; vertical-align:middle; background:#ddd; }
.avatar-text{ display:inline-grid; place-items:center; color:#fff; font-weight:800; }
.hero .avatar{ box-shadow:0 0 0 3px rgba(255,255,255,.45); }

/* ── 底部 Tab Bar ── */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--app-border); padding-bottom:env(safe-area-inset-bottom);
}
.tabbar-inner{ max-width:560px; margin:0 auto; display:flex; height:var(--app-tabbar-h); }
.tabbar a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--app-faint); font-size:11px; font-weight:700; }
.tabbar a .i{ font-size:23px; line-height:1; filter:grayscale(1); opacity:.7; }
.tabbar a.on{ color:var(--app-brand-ink); }
.tabbar a.on .i{ filter:none; opacity:1; }
.tabbar a.join .i{
  width:50px; height:50px; margin-top:-22px; border-radius:50%; display:grid; place-items:center; filter:none; opacity:1;
  background:linear-gradient(135deg,var(--app-brand),var(--app-brand-2)); color:#fff; font-size:26px; box-shadow:0 6px 18px rgba(109,94,252,.45);
}

/* ── Modal / Sheet ── */
.sheet-bg{ position:fixed; inset:0; background:rgba(20,12,60,.45); z-index:50; display:none; align-items:flex-end; justify-content:center; }
.sheet-bg.show{ display:flex; animation:fade .15s; }
.sheet{ background:var(--app-surface); width:100%; max-width:560px; border-radius:24px 24px 0 0; padding:22px 18px calc(18px + env(safe-area-inset-bottom)); animation:up .2s ease-out; }
.sheet h3{ margin:0 0 6px; color:var(--app-heading); }
@keyframes up{ from{ transform:translateY(40px); opacity:.4; } to{ transform:none; opacity:1; } }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }

/* ── 掃描器 ── */
.scanner{ position:fixed; inset:0; background:#000; z-index:60; display:none; flex-direction:column; }
.scanner.show{ display:flex; }
.scanner video{ flex:1; width:100%; object-fit:cover; }
.scanner .frame{ position:absolute; left:50%; top:45%; width:240px; height:240px; transform:translate(-50%,-50%); border:3px solid rgba(255,255,255,.85); border-radius:24px; box-shadow:0 0 0 2000px rgba(0,0,0,.45); }
.scanner .bar{ position:absolute; left:0; right:0; bottom:0; padding:20px 16px calc(20px + env(safe-area-inset-bottom)); text-align:center; color:#fff; }

/* ── 遊戲頁內的浮動「回大廳」 ── */
.gh-home-fab{
  position:fixed; left:10px; top:calc(env(safe-area-inset-top) + 10px); z-index:2147483000;
  height:34px; padding:0 12px 0 10px; border-radius:99px; display:flex; align-items:center; gap:5px;
  background:rgba(20,12,60,.55); color:#fff !important; font:700 13px/1 var(--app-font); text-decoration:none !important;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.gh-home-fab:active{ transform:scale(.95); }

/* ── 狀態頁（已關閉 / 等待中） ── */
.status-page{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:70vh; padding:24px; }
.status-page .big{ font-size:64px; margin-bottom:8px; }
.status-page h2{ color:var(--app-heading); margin:0 0 6px; }
.status-page p{ color:var(--app-muted); margin:0 0 22px; }
.status-page .btn{ max-width:320px; }
.status-page .btn + .btn{ margin-top:10px; }

.divider{ display:flex; align-items:center; gap:12px; color:var(--app-faint); font-size:13px; margin:18px 0; }
.divider::before,.divider::after{ content:''; flex:1; height:1px; background:var(--app-border-strong); }

.list-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--app-border); }
.list-row:last-child{ border-bottom:0; }
.list-row .grow{ flex:1; min-width:0; }

.toast{ position:fixed; left:50%; bottom:calc(var(--app-tabbar-h) + 24px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:rgba(27,22,64,.92); color:#fff; padding:11px 18px; border-radius:99px; font-size:14px; font-weight:600; z-index:70; display:none; max-width:90vw; text-align:center; }
.toast.show{ display:block; animation:fade .15s; }