:root { color-scheme: light; font-family: 'PingFang TC','Microsoft JhengHei',system-ui,sans-serif; --ink:#24483d; --muted:#68796d; }
* { box-sizing:border-box; }
body { margin:0; min-height:100dvh; background:radial-gradient(ellipse at 0% 100%,#e1e9de,transparent 62%),radial-gradient(ellipse at 100% 0%,#e8e7d5,transparent 60%),#f3f3e9; color:var(--ink); }
.lobby { max-width:1080px; margin:0 auto; padding:38px 40px 30px; }
.topline { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:22px; border-bottom:1px solid #cdd5c9; }
.brand { font:500 17px 'Songti TC',serif; letter-spacing:.16em; color:var(--ink); }
.private-badge { display:flex; align-items:center; gap:8px; padding:6px 11px; border:1px solid #c7d0c1; border-radius:20px; color:#61765d; font-size:10px; letter-spacing:.1em; }
.private-badge i { width:5px; height:5px; border-radius:50%; background:#cbb278; box-shadow:0 0 9px #d8c79144; }
header { position:relative; margin:44px 0 32px; }
.eyebrow { margin:0 0 15px; font-size:10px; color:#68796d; letter-spacing:.2em; }
h1 { font:400 clamp(32px,4vw,45px)/1.45 'Songti TC','Noto Serif TC',serif; letter-spacing:.1em; margin:0; color:var(--ink); }
.intro { margin:17px 0 0; color:var(--muted); font-size:13px; line-height:1.9; letter-spacing:.03em; }
.modes { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.mode { position:relative; display:block; overflow:hidden; padding:27px 32px; border:1px solid #ced5cd; border-radius:18px; color:var(--ink); text-decoration:none; background:linear-gradient(135deg,#f3f5f0,#f0f5ef); box-shadow:inset 0 1px 0 #ffffffb3,0 10px 30px #446b4612; transition:transform .2s,border-color .2s; }
.mode:hover { transform:translateY(-4px); border-color:#96ac93; }
.mode:focus-visible { outline:2px solid #426d58; outline-offset:5px; }
.zhangzhou { background:linear-gradient(135deg,#f2eee2,#f1efe2); border-color:#d1cfc2; }
.mode-art { display:flex; justify-content:center; align-items:center; gap:6px; height:109px; margin:7px 0 25px; }
.tile { display:block; width:54px; height:74px; position:relative; border-radius:4px; background:linear-gradient(180deg,#76ad24,#397706); box-shadow:0 2px 0 #71a52c,0 5px 0 #3f7b09,0 6px 1px #1b4504,0 13px 18px #00170a70; transform:rotate(-9deg); }
.tile .tile-face { display:block; width:calc(100% - 3px); height:calc(100% - 4px); border:1px solid #aab6a8; border-radius:4px; background-color:#fff; background-size:96% 96%; box-shadow:inset 0 2px 1px #fff,inset 1px 0 1px #fff,inset -1px -2px 2px #61705b28; }
.tile:nth-child(2) { transform:translateY(-12px); }
.tile:last-child { transform:rotate(9deg); }
.gold-tile { outline:1px solid #c4a51e; outline-offset:0; }
.gold-tile .tile-face { background-color:#ffea48; border-color:#c1a322; box-shadow:inset 0 2px 1px #fffbb1,inset -1px -2px 2px #98710a33; }
.gold-tile b { position:absolute; top:2px; left:2px; border:1px solid #d2ab39; border-radius:2px; padding:0 1px; background:#fff49a; color:#80510b; font-size:8px; line-height:11px; }
.mode-kicker { font-size:10px; color:#68796d; margin:0 0 9px; letter-spacing:.18em; }
.zhangzhou .mode-kicker { color:#806f49; }
h2 { font:400 26px/1.4 'Songti TC',serif; letter-spacing:.1em; margin:0 0 10px; color:var(--ink); }
.mode>p:not(.mode-kicker) { margin:0 0 23px; font-size:12px; line-height:1.9; color:var(--muted); }
.start { display:flex; justify-content:space-between; align-items:center; padding-top:16px; border-top:1px solid #d2dacf; color:var(--ink); font-size:12px; letter-spacing:.08em; }
.start>span { font-size:24px; font-weight:300; }
footer { display:flex; justify-content:space-between; gap:12px; margin-top:27px; color:#6d7b6d; font-size:10px; letter-spacing:.04em; }
@media (max-width:600px) {
  .lobby { padding:25px 22px; }
  .topline { padding-bottom:18px; }
  .brand { font-size:15px; }
  header { margin:34px 0 27px; }
  h1 { font-size:33px; }
  .modes { grid-template-columns:1fr; gap:18px; }
  .mode { padding:25px 22px; }
  .mode-art { float:right; width:130px; height:80px; margin:16px 0 0 8px; gap:4px; }
  .tile { width:34px; height:47px; border-radius:4px; }
  .tile .tile-face { border-radius:4px; }
  h2 { font-size:24px; }
  .mode>p:not(.mode-kicker) { font-size:11px; }
  .start { clear:both; }
}
@media (prefers-reduced-motion:reduce) { .mode { transition:none; } }