/* ======================================
   IG 排版风格 — 五子棋游戏页面
   Join / Admin 保持原样
   ====================================== */

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

:root{
  --bg:#000;
  --bg-card:#121212;
  --bg-surface:#1a1a1a;
  --text:#f5f5f5;
  --text-dim:#8e8e8e;
  --text-muted:#555;
  --border:#262626;
  --accent:#e94560;
  --accent-hover:#ff6b81;
  --success:#3bc96a;
  --warning:#e8b341;
  --board-bg:#d4a84b;
  --board-line:#8b6914;
  --top-h:3rem;
  --form-h:3.25rem;
  --safe-bottom:env(safe-area-inset-bottom,0rem);
  --safe-top:env(safe-area-inset-top,0rem);
}

html{font-size:16px}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  height:100dvh;overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ========== App Shell ========== */
#app{
  height:100dvh;display:flex;flex-direction:column;
  max-width:40rem;margin:0 auto;
}

/* ========== Buttons ========== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.5rem .875rem;
  border:.0625rem solid var(--border);border-radius:.75rem;
  font-size:.9375rem;cursor:pointer;
  background:transparent;color:var(--text);
  white-space:nowrap;transition:all .12s;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{opacity:.7}
.btn-accent{
  background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;
}
.btn-accent:active{background:var(--accent-hover)}
.btn-outline{border-color:var(--border);color:var(--text-dim)}
.btn-sm{padding:.35rem .65rem;font-size:.8125rem;border-radius:.5rem}
.btn-block{width:100%}
.btn-icon{
  background:none;border:none;color:var(--text-dim);
  font-size:1.25rem;padding:.2rem;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;border-radius:50%;
  -webkit-tap-highlight-color:transparent;
}
.btn-icon:active{background:var(--bg-surface)}


/* =============================================
   JOIN PAGE (原封保留)
   ============================================= */
.join-page{
  display:flex;align-items:center;justify-content:center;
  height:100dvh;padding:1.5rem;
}
.join-container{width:100%;max-width:24rem}
.join-card{
  background:var(--bg-card);border:.0625rem solid var(--border);
  border-radius:1.25rem;padding:2.5rem 1.5rem 1.5rem;
}
.join-title{font-size:1.75rem;text-align:center;margin-bottom:.2rem;font-weight:700}
.join-subtitle{text-align:center;color:var(--text-dim);margin-bottom:1.5rem;font-size:.9375rem}
.join-rejoin{text-align:center}
.join-rejoin p{margin-bottom:1rem;color:var(--text-dim);font-size:.875rem}
.join-rejoin .btn{margin:0 .25rem}
.join-form .form-group{margin-bottom:1rem}
.join-form label{display:block;margin-bottom:.3rem;color:var(--text-dim);font-size:.875rem}
.join-form input{
  width:100%;padding:.875rem .875rem;
  border:.0625rem solid var(--border);border-radius:.875rem;
  background:var(--bg-surface);color:var(--text);
  font-size:1.0625rem;outline:none;transition:border-color .15s;
}
.join-form input:focus{border-color:var(--text-muted)}
.join-form .btn-submit{
  width:100%;margin-top:.5rem;
  padding:.875rem;border:none;border-radius:.875rem;
  background:var(--accent);color:#fff;
  font-size:1.0625rem;font-weight:700;
  cursor:pointer;transition:background .15s;
  -webkit-tap-highlight-color:transparent;
}
.join-form .btn-submit:active{background:var(--accent-hover)}
.join-error{color:var(--accent);font-size:.875rem;margin-bottom:.5rem;min-height:1.2em}


/* =============================================
   GAME — TOP BAR  (IG Stories 头部)
   ============================================= */
.top-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1rem;
  height:var(--top-h);flex-shrink:0;
  background:var(--bg);
  border-bottom:.0625rem solid var(--border);
}
.top-bar .room-code{font-weight:700;font-size:1rem;color:var(--text)}
.top-bar-right{display:flex;align-items:center;gap:.5rem}
.game-status{font-size:.6875rem;padding:.15rem .5rem;border-radius:1rem;font-weight:600;background:var(--bg-surface);color:var(--text-dim);text-transform:uppercase;letter-spacing:.03em}
.game-status.playing{color:var(--success)}
.game-status.finished{color:var(--accent)}


/* =============================================
   GAME — SCROLLABLE CONTENT (IG Feed)
   ============================================= */
.scroll-content{
  flex:1;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:.75rem .75rem 0;
  display:flex;flex-direction:column;align-items:center;
  gap:.75rem;
}


/* =============================================
   GAME — BOARD CARD (IG 帖子卡片)
   ============================================= */
.board-wrapper{
  display:flex;justify-content:center;align-items:center;
  width:100%;
}
.board-section{
  position:relative;
  width:100%;
  background:var(--bg-card);
  border:.0625rem solid var(--border);
  border-radius:1rem;
  padding:.75rem .75rem .5rem;
  display:flex;flex-direction:column;align-items:center;
  gap:.5rem;
}

#boardCanvas{
  display:block;
  border-radius:.5rem;
  cursor:pointer;
  max-width:100%;
  aspect-ratio:1/1;
  border:.0625rem solid var(--board-line);
}

.board-info{
  display:flex;justify-content:space-between;align-items:center;
  width:100%;padding:0 .25rem;
  min-height:1.5rem;
}
.board-info span{font-size:.8125rem;color:var(--text-dim)}
.board-actions{display:flex;gap:.35rem}


/* =============================================
   GAME — BOARD OVERLAY (报名遮罩)
   ============================================= */
.board-overlay{
  position:absolute;
  top:.75rem;left:.75rem;right:.75rem;
  display:none;z-index:10;border-radius:.5rem;
  align-items:center;justify-content:center;
}
.board-overlay.active{display:flex}

.overlay-bg{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.55);
  border-radius:.5rem;
  backdrop-filter:blur(.5rem);
  -webkit-backdrop-filter:blur(.5rem);
}

.overlay-inner{
  position:relative;z-index:1;
  width:90%;max-width:20rem;
  display:flex;justify-content:center;
}


/* =============================================
   GAME — VOLUNTEER CARD (IG  Action Card)
   ============================================= */
.volunteer-card{
  display:flex;flex-direction:column;align-items:center;
  gap:.625rem;padding:1.125rem 1.75rem;
  border-radius:1rem;
  background:var(--bg-surface);
  border:.0625rem solid var(--border);
  min-width:11rem;
}

.vc-empty{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.vc-seated{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}
.vc-prompt{font-size:.8125rem;color:var(--text-muted)}
.vc-btn{
  padding:.625rem 2.25rem;border-radius:.75rem;
  font-size:1rem;font-weight:600;border:none;cursor:pointer;
  transition:all .12s;
  background:var(--accent);color:#fff;
  -webkit-tap-highlight-color:transparent;
}
.vc-btn:active{opacity:.8}
.vc-btn.leave-btn{
  background:var(--bg-card);color:var(--text-dim);
  border:.0625rem solid var(--border);font-size:.8125rem;padding:.5rem 1.5rem
}
.vc-info{display:flex;align-items:center;gap:.5rem}
.vc-stone{font-size:1.25rem;line-height:1}
.vc-name{font-size:.9375rem;font-weight:700;color:var(--text)}
.vc-status{
  display:flex;align-items:center;gap:.25rem;
  font-size:.75rem;padding:.125rem .5rem;border-radius:1rem;
  background:rgba(255,255,255,.08);color:var(--text-muted)
}
.vc-status .p-dot{display:inline-block;width:.375rem;height:.375rem;border-radius:50%}
.vc-status .p-dot.online{background:var(--success)}
.vc-status .p-dot.away{background:var(--warning)}
.vc-status .p-dot.offline{background:#555}


/* =============================================
   GAME — PEOPLE ROW (IG 观众列表)
   ============================================= */
.people-row{
  width:100%;
  background:var(--bg-card);
  border:.0625rem solid var(--border);
  border-radius:1rem;
  padding:.625rem .875rem;
  flex-shrink:0;
}
.people-line{
  display:flex;align-items:center;flex-wrap:nowrap;
  gap:.35rem;overflow:hidden;
  font-size:.8125rem;color:var(--text-dim);
  min-height:1.5em;
}
.people-line .num{color:var(--text);font-weight:600}
.people-line .dot-sep{color:var(--text-muted);margin:0 .125rem}
.people-line .name-tag{display:inline;color:var(--text);white-space:nowrap}
.people-line .more-btn{
  background:none;border:none;
  color:var(--accent);font-size:.8125rem;
  cursor:pointer;padding:0 .125rem;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.people-line .more-btn:active{opacity:.7}
.people-expanded{
  display:none;
  font-size:.8125rem;color:var(--text-dim);
  margin-top:.375rem;padding-top:.375rem;
  border-top:.0625rem solid var(--border);
  line-height:1.8;
}
.people-expanded.open{display:block}


/* =============================================
   GAME — CHAT (IG 评论区)
   ============================================= */
.chat-msgs{
  width:100%;
  background:var(--bg-card);
  border:.0625rem solid var(--border);
  border-radius:1rem;
  flex:1;min-height:0;
  display:flex;flex-direction:column;
}
.chat-header{
  padding:.5rem .875rem;
  font-size:.8125rem;font-weight:600;color:var(--text-dim);
  border-bottom:.0625rem solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.chat-header .msg-count{font-weight:400;font-size:.6875rem;color:var(--text-muted)}
.chat-msgs-inner{
  flex:1;overflow-y:auto;
  padding:.5rem .875rem;
  -webkit-overflow-scrolling:touch;
}
.chat-msg{margin-bottom:.25rem;line-height:1.45;word-break:break-word}
.chat-nick{font-size:.8125rem;color:var(--accent);font-weight:600;margin-right:.25rem}
.chat-text{font-size:.875rem;color:var(--text)}
.chat-msg .chat-time{font-size:.625rem;color:var(--text-muted);margin-left:.25rem}
.chat-empty{color:var(--text-muted);font-size:.8125rem;text-align:center;padding:.75rem 0}


/* =============================================
   GAME — BOTTOM CHAT FORM (IG 评论输入条)
   ============================================= */
.chat-form{
  flex-shrink:0;
  display:flex;gap:.5rem;
  padding:.55rem .875rem;
  padding-bottom:calc(.55rem + var(--safe-bottom));
  background:var(--bg);
  border-top:.0625rem solid var(--border);
  height:var(--form-h);
}
.chat-form input{
  flex:1;padding:.5rem .875rem;
  border:.0625rem solid var(--border);border-radius:1.25rem;
  background:var(--bg-surface);color:var(--text);
  font-size:.875rem;outline:none;
}
.chat-form input:focus{border-color:var(--text-muted);background:var(--bg-card)}
.chat-form .btn-accent{
  border-radius:1.25rem;padding:.5rem 1.125rem;
  font-size:.8125rem;
}


/* =============================================
   GAME — BOTTOM SHEET (IG 风格)
   ============================================= */
.sheet-overlay{
  display:none;
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.5);
  z-index:200;
}
.sheet-overlay.open{display:block}
.sheet{
  position:fixed;left:0;right:0;bottom:0;
  background:var(--bg-card);
  border-radius:1.25rem 1.25rem 0 0;
  z-index:201;
  transform:translateY(100%);
  transition:transform .25s cubic-bezier(.32,.72,0,1);
  padding:0 0 var(--safe-bottom);
  max-width:40rem;margin:0 auto;
}
.sheet.open{transform:translateY(0)}
.sheet .sheet-handle{display:flex;justify-content:center;padding:.625rem 0 0}
.sheet .sheet-handle::after{content:'';display:block;width:2.5rem;height:.25rem;background:var(--text-muted);border-radius:.125rem}
.sheet-title{text-align:center;font-size:.9375rem;font-weight:600;padding:.625rem 1rem;color:var(--text-dim);border-bottom:.0625rem solid var(--border)}
.sheet-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1rem;
  font-size:.9375rem;color:var(--text);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .1s;
}
.sheet-item:active{background:var(--bg-surface)}
.sheet-item .sheet-item-label{display:flex;align-items:center;gap:.625rem}
.sheet-item .sheet-item-label .ico{font-size:1.125rem}
.sheet-item .sheet-item-right{color:var(--text-dim);font-size:.8125rem}
.sheet-item.danger{color:var(--accent)}


/* =============================================
   GAME — TOAST
   ============================================= */
.toast{
  position:fixed;bottom:calc(var(--form-h) + .75rem);left:50%;transform:translateX(-50%);
  background:var(--bg-card);color:var(--text);
  padding:.5rem 1rem;border-radius:.625rem;
  font-size:.8125rem;
  border:.0625rem solid var(--border);
  z-index:300;
  opacity:0;transition:opacity .2s;
  pointer-events:none;
}
.toast.show{opacity:1}


/* =============================================
   GAME — MODAL (IG 风格)
   ============================================= */
.modal-overlay{
  display:none;
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.6);
  z-index:250;
  align-items:center;justify-content:center;
  padding:1.5rem;
}
.modal-overlay.open{display:flex}
.modal-dialog{
  background:var(--bg-card);
  border:.0625rem solid var(--border);
  border-radius:1.25rem;
  padding:1.5rem 1.25rem 1.25rem;
  width:100%;max-width:18rem;
  text-align:center;
}
.modal-title{font-size:1rem;font-weight:700;margin-bottom:.35rem}
.modal-body{font-size:.8125rem;color:var(--text-dim);margin-bottom:1.25rem;line-height:1.4}
.modal-actions{display:flex;gap:.5rem}
.modal-btn{
  flex:1;padding:.625rem;border-radius:.75rem;
  border:none;font-size:.8125rem;font-weight:600;cursor:pointer;
  transition:all .12s;-webkit-tap-highlight-color:transparent;
}
.modal-btn.primary{background:var(--accent);color:#fff}
.modal-btn.primary:active{background:var(--accent-hover)}
.modal-btn.secondary{background:var(--bg-surface);color:var(--text)}
.modal-btn.secondary:active{opacity:.8}


/* =============================================
   GAME — CRAZY COUNTDOWN (跑马灯)
   ============================================= */
.crazy-overlay{
  display:none;
  position:fixed;left:0;top:0;width:100vw;height:100vh;
  z-index:9999;
  background:#000;
  overflow:hidden;
}
.crazy-overlay.open{display:block}

.cd-stage{
  position:absolute;top:0;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}

.cd-scroll-text{
  position:absolute;
  font-size:clamp(3rem,18vw,10rem);
  font-weight:900;
  white-space:nowrap;
  color:#ff00ff;
  text-shadow:
    .06em .06em 0 #00ffff,
    -.06em -.06em 0 #ffff00,
    .08em -.08em 0 #ff6600,
    -.08em .08em 0 #00ff00,
    0 0 30px #ff00ff,
    0 0 60px #ff6600;
  background:linear-gradient(135deg,#ff00ff,#ffff00,#00ffff,#ff6600,#00ff00);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:crazy-scroll 6s ease-in-out forwards;
}

.cd-number{
  position:absolute;
  bottom:15%;left:50%;transform:translateX(-50%);
  font-size:clamp(4rem,25vw,12rem);
  font-weight:900;
  color:#fff;
  text-shadow:
    0 0 20px #ff00ff,
    0 0 40px #ff6600,
    0 0 80px #ffff00;
  z-index:10;
  pointer-events:none;
}

@keyframes crazy-scroll{
  0%   { transform:translate(-100vw,0); opacity:0 }
  5%   { opacity:1 }
  35%  { transform:translate(0,0) }
  45%  { transform:translate(100vw,0); opacity:1 }
  48%  { opacity:0 }
  52%  { transform:translate(100vw,-100vh); opacity:0 }
  55%  { opacity:1 }
  78%  { transform:translate(0,0) }
  92%  { transform:translate(0,100vh) }
  97%  { opacity:0 }
  100% { transform:translate(0,100vh); opacity:0 }
}


/* =============================================
   ADMIN PAGES (原封保留)
   ============================================= */
.admin-body{padding:1rem}
.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:.0625rem solid var(--border)}
.admin-header h1{font-size:1.3rem}
.admin-nav{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.admin-nav a{padding:.4rem .8rem;border:.0625rem solid var(--border);border-radius:.375rem;font-size:.85rem;color:var(--text-dim);transition:all .2s}
.admin-nav a:hover,.admin-nav a.active{border-color:var(--accent);color:var(--accent)}
.admin-table{width:100%;border-collapse:collapse;font-size:.85rem}
.admin-table th,.admin-table td{padding:.5rem .75rem;border-bottom:.0625rem solid var(--border);text-align:left}
.admin-table th{color:var(--text-dim);font-weight:600;font-size:.8rem}
.admin-table tr:hover td{background:rgba(255,255,255,.02)}
.admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.375rem,1fr));gap:1rem;margin-bottom:1.5rem}
.stat-card{background:var(--bg-card);border:.0625rem solid var(--border);border-radius:.5rem;padding:1rem;text-align:center}
.stat-card .stat-value{font-size:1.8rem;font-weight:700;color:var(--accent)}
.stat-card .stat-label{font-size:.8rem;color:var(--text-dim);margin-top:.25rem}
.admin-login{max-width:22.5rem;margin:4rem auto}
.admin-login .card{background:var(--bg-card);border:.0625rem solid var(--border);border-radius:.75rem;padding:2rem}
.admin-login h1{text-align:center;margin-bottom:1.5rem;font-size:1.3rem}
.admin-login .form-group{margin-bottom:1rem}
.admin-login label{display:block;margin-bottom:.3rem;font-size:.85rem;color:var(--text-dim)}
.admin-login input{width:100%;padding:.6rem .8rem;border:.0625rem solid var(--border);border-radius:.375rem;background:var(--bg);color:var(--text);font-size:1rem;outline:none}
.admin-login input:focus{border-color:var(--accent)}
.admin-error{color:var(--accent);font-size:.85rem;margin-bottom:.5rem}
.pagination{display:flex;justify-content:center;gap:.5rem;margin-top:1rem}


/* =============================================
   SCROLLBAR
   ============================================= */
::-webkit-scrollbar{width:.1875rem}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:.125rem}