*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

:root{
  --bg:#0d0d1a;
  --bg2:#141428;
  --bg3:#1c1c3a;
  --accent:#e94560;
  --accent-h:#c73652;
  --text:#eaeaea;
  --muted:#7b849a;
  --gold:#f0c040;
  --gold-dim:rgba(240,192,64,.15);
  --red-piece:#c0392b;
  --black-piece:#1a1a2e;
  --piece-bg:#f5e6c8;
  --board-bg:#dcb96a;
  --board-line:#6b4e13;
  --r-sm:6px;
  --r-md:12px;
  --r-lg:20px;
  --shadow:0 8px 32px rgba(0,0,0,.5);
  --tr:.3s cubic-bezier(.4,0,.2,1);
  --tr-fast:.2s ease;
}

body{
  font-family:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-user-select:none;user-select:none;
}

@keyframes pageEnter{
  from{opacity:0;transform:translateY(16px) scale(.98);filter:blur(4px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes slideInLeft{from{transform:translateX(-20px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes scaleIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}

/* ===========================
   Page Enter Overlay
   =========================== */
.page-enter-overlay{
  position:fixed;inset:0;z-index:9998;
  background:var(--bg);opacity:1;
  transition:opacity .5s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.page-enter-overlay.fade-out{opacity:0}

/* ===========================
   Game Nav
   =========================== */
.game-nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px;
  background:rgba(13,13,26,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
  animation:fadeIn .4s ease both;
}
.nav-back{
  color:var(--muted);font-size:.85rem;text-decoration:none;
  padding:4px 10px;border-radius:var(--r-sm);
  transition:color var(--tr-fast),background var(--tr-fast);
}
.nav-back:hover{color:var(--text);background:rgba(255,255,255,.06)}
.nav-title{
  font-size:1rem;font-weight:800;letter-spacing:2px;
  background:linear-gradient(135deg,var(--gold),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ===========================
   Lobby
   =========================== */
.lobby{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:100vh;padding:24px;
  animation:pageEnter .6s cubic-bezier(.4,0,.2,1) both;
  padding-top:60px;
}
.lobby-card{
  background:var(--bg2);border-radius:var(--r-lg);
  padding:44px 36px;width:100%;max-width:480px;text-align:center;
  box-shadow:var(--shadow),0 0 80px rgba(233,69,96,.04);
  border:1px solid rgba(255,255,255,.06);
  position:relative;
  animation:scaleIn .5s cubic-bezier(.4,0,.2,1) .1s both;
}
.lobby-step{animation:fadeIn .35s ease,slideUp .35s cubic-bezier(.4,0,.2,1)}
.lobby-step[style*="display:none"]{animation:none}
.lobby-icon{font-size:3rem;margin-bottom:10px;animation:scaleIn .4s ease .15s both}
.lobby-title{
  font-size:1.8rem;font-weight:800;letter-spacing:3px;
  background:linear-gradient(135deg,var(--gold),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:6px;animation:slideInLeft .4s ease .2s both;
}
.lobby-desc{color:var(--muted);font-size:.88rem;margin-bottom:24px;line-height:1.5;animation:fadeIn .4s ease .25s both}

.back-btn{
  position:absolute;top:16px;left:16px;
  background:none;border:none;color:var(--muted);
  font-size:.85rem;cursor:pointer;padding:4px 8px;border-radius:var(--r-sm);
  transition:color var(--tr-fast),background var(--tr-fast);
}
.back-btn:hover{color:var(--text);background:rgba(255,255,255,.06)}

.mode-cards{display:flex;gap:14px;justify-content:center}
.mode-card{
  flex:1;max-width:200px;background:var(--bg3);
  border:2px solid transparent;border-radius:var(--r-md);
  padding:28px 16px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:border-color var(--tr),transform var(--tr),background var(--tr),box-shadow var(--tr);
  color:var(--text);position:relative;overflow:hidden;
  animation:slideUp .4s cubic-bezier(.4,0,.2,1) both;
}
.mode-card:nth-child(1){animation-delay:.2s}
.mode-card:nth-child(2){animation-delay:.3s}
.mode-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(240,192,64,.06),rgba(233,69,96,.06));
  opacity:0;transition:opacity var(--tr);
}
.mode-card:hover{
  border-color:var(--gold);transform:translateY(-4px);
  background:rgba(28,28,58,.9);
  box-shadow:0 12px 40px rgba(240,192,64,.08);
}
.mode-card:hover::after{opacity:1}
.mode-card:active{transform:translateY(-2px) scale(.98)}
.mode-emoji{font-size:2.2rem;position:relative;z-index:1}
.mode-name{font-size:1.05rem;font-weight:700;position:relative;z-index:1}
.mode-desc{font-size:.72rem;color:var(--muted);line-height:1.4;position:relative;z-index:1}

.room-code-box{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px}
.room-code{
  font-size:2rem;font-weight:800;letter-spacing:6px;
  background:var(--bg3);border:2px solid var(--gold);border-radius:var(--r-md);
  padding:12px 28px;user-select:all;animation:scaleIn .3s ease both;
}
.copy-btn{
  background:linear-gradient(135deg,var(--gold),#e6a800);color:#1a1a2e;
  border:none;border-radius:var(--r-sm);padding:8px 14px;
  font-size:.82rem;font-weight:700;cursor:pointer;
  transition:transform var(--tr-fast),box-shadow var(--tr-fast);
}
.copy-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(240,192,64,.3)}
.copy-btn:active{transform:scale(.96)}

.lobby-form{display:flex;flex-direction:column;gap:12px}
.room-input{
  background:var(--bg3);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-sm);color:var(--text);
  font-size:1rem;padding:12px 16px;outline:none;
  text-align:center;letter-spacing:3px;
  transition:border-color var(--tr),box-shadow var(--tr);
}
.room-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(240,192,64,.12)}

.lobby-btn{
  font-size:1rem;padding:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent-h));
  border:none;color:#fff;border-radius:var(--r-sm);
  font-weight:700;cursor:pointer;letter-spacing:1px;
  transition:transform var(--tr-fast),box-shadow var(--tr-fast);
}
.lobby-btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(233,69,96,.3)}
.lobby-btn:active{transform:scale(.97)}
.lobby-hint{margin-top:12px;font-size:.8rem;color:var(--accent);min-height:1.2em}

/* ===========================
   Game App
   =========================== */
.app{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:20px;width:100%;max-width:1000px;
  animation:pageEnter .6s cubic-bezier(.4,0,.2,1) both;
  padding-top:60px;
}
.header{text-align:center}
.title{
  font-size:2rem;font-weight:800;letter-spacing:4px;
  background:linear-gradient(135deg,var(--gold),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.subtitle{font-size:.82rem;color:var(--muted);letter-spacing:2px;margin-top:4px}
.main{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;justify-content:center}

/* Board Section */
.board-section{display:flex;flex-direction:column;align-items:center;gap:8px}
#board{
  display:block;
  width:630px;height:700px;
  max-width:100%;
  border-radius:var(--r-md);
  box-shadow:var(--shadow),0 0 0 3px var(--board-line);
  cursor:crosshair;
  touch-action:none;
  transition:box-shadow var(--tr);
}
#board:hover{box-shadow:var(--shadow),0 0 0 3px var(--gold),0 0 30px rgba(240,192,64,.08)}
#board.not-my-turn{cursor:not-allowed}

/* Player Bars */
.player-bar{
  width:560px;max-width:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 16px;
  background:var(--bg2);border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.06);
}
.top-bar{margin-bottom:4px}
.bottom-bar{margin-top:4px}
.player-name{font-size:.9rem;font-weight:700;letter-spacing:1px}
.player-score{font-size:.85rem;color:var(--gold);font-weight:800}
.top-bar .player-name{color:#aaa}
.bottom-bar .player-name{color:#e8c170}
.top-bar.active-turn{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04)}
.bottom-bar.active-turn{border-color:var(--gold);background:rgba(240,192,64,.06)}

/* ===========================
   Side Panel
   =========================== */
.panel{display:flex;flex-direction:column;gap:12px;width:220px;min-width:200px}

.turn-indicator{
  background:var(--bg2);border-radius:var(--r-md);padding:14px;
  display:flex;align-items:center;gap:10px;
  border:2px solid transparent;
  transition:border-color var(--tr),background var(--tr);
}
.turn-indicator.my-turn{border-color:var(--gold);background:rgba(240,192,64,.06)}
.turn-indicator.their-turn{border-color:rgba(255,255,255,.1)}

.color-dot{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  transition:background var(--tr),transform var(--tr);
}
.color-dot.red{
  background:radial-gradient(circle at 35% 35%,#e74c3c,#a93226);
  box-shadow:2px 2px 6px rgba(0,0,0,.6);
  border:2px solid #f5e6c8;
}
.color-dot.black{
  background:radial-gradient(circle at 35% 35%,#444,#111);
  box-shadow:2px 2px 6px rgba(0,0,0,.6);
  border:2px solid #f5e6c8;
}
.color-dot.none{background:rgba(255,255,255,.1)}
#turnText{font-size:.9rem;font-weight:600;transition:color var(--tr)}

.my-color-card{
  background:var(--bg2);border-radius:var(--r-md);padding:14px;
  display:flex;align-items:center;gap:12px;
  border:1px solid rgba(255,255,255,.06);
}
.my-color-label{font-size:.7rem;color:var(--muted)}
.my-color-name{font-size:1rem;font-weight:700}

.timer-card{
  background:var(--bg2);border-radius:var(--r-md);padding:14px;
  display:flex;align-items:center;justify-content:center;position:relative;
}
.timer-ring{width:80px;height:80px;transform:rotate(-90deg)}
.timer-track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:6}
.timer-bar{fill:none;stroke:var(--gold);stroke-width:6;stroke-linecap:round;stroke-dasharray:213.6;stroke-dashoffset:0;transition:stroke-dashoffset .9s linear,stroke .5s}
.timer-bar.urgent{stroke:var(--accent)}
.timer-center{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1}
.timer-num{font-size:1.5rem;font-weight:800}
.timer-unit{font-size:.65rem;color:var(--muted);margin-top:2px}

.round-info{text-align:center;font-size:.78rem;color:var(--muted);letter-spacing:1px}

.btn-group{display:flex;flex-direction:column;gap:8px}
.btn{
  padding:10px 18px;border:none;border-radius:var(--r-sm);
  font-size:.88rem;font-weight:600;cursor:pointer;
  transition:background var(--tr-fast),transform var(--tr-fast),box-shadow var(--tr-fast);
  letter-spacing:1px;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-h));color:#fff}
.btn-primary:hover{box-shadow:0 4px 16px rgba(233,69,96,.25);transform:translateY(-1px)}
.btn-secondary{background:var(--bg3);color:var(--text);border:1px solid rgba(255,255,255,.1)}
.btn-secondary:hover{background:#242450;transform:translateY(-1px)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* History */
.history-panel{
  background:var(--bg2);border-radius:var(--r-md);padding:12px;
  display:flex;flex-direction:column;max-height:240px;
}
.history-title{font-size:.72rem;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;flex-shrink:0}
.history-list{list-style:none;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:3px;padding-right:4px}
.history-list::-webkit-scrollbar{width:4px}
.history-list::-webkit-scrollbar-thumb{background:var(--muted);border-radius:2px}
.history-item{font-size:.76rem;padding:3px 8px;border-radius:4px;display:flex;align-items:center;gap:6px;color:var(--muted)}
.history-item:last-child{background:rgba(233,69,96,.15);color:var(--text)}
.history-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.history-dot.red{background:#e74c3c}
.history-dot.black{background:#555}

/* ===========================
   Modal
   =========================== */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.75);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;z-index:100;
}
.modal-overlay.show{display:flex;animation:fadeIn .3s ease}
.modal{
  background:var(--bg2);border-radius:var(--r-lg);
  padding:44px 36px;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.08);
  animation:scaleIn .35s cubic-bezier(.4,0,.2,1) both;
}
.modal-icon{font-size:3.2rem;margin-bottom:14px;animation:scaleIn .4s ease .1s both}
.modal-title{
  font-size:1.7rem;font-weight:800;
  background:linear-gradient(135deg,var(--gold),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:6px;
}
.modal-desc{color:var(--muted);font-size:.9rem;margin-bottom:24px}
.modal-btn-group{display:flex;justify-content:center;gap:10px}

/* ===========================
   Responsive
   =========================== */
@media(max-width:840px){
  #board{width:380px;height:422px}
  .player-bar{width:380px}
  .panel{width:100%;flex-direction:row;flex-wrap:wrap}
  .turn-indicator,.my-color-card{flex:1;min-width:140px}
  .timer-card{min-width:100px}
  .history-panel{width:100%;max-height:160px}
  .btn-group{flex-direction:row;flex-wrap:wrap}
  .btn-group .btn{flex:1;min-width:100px}
}
@media(max-width:480px){
  .app{padding:12px;padding-top:54px}
  #board{width:calc(100vw - 24px);height:calc((100vw - 24px) * 700 / 630)}
  .player-bar{width:calc(100vw - 24px)}
  .title{font-size:1.3rem}
  .main{gap:12px}
  .panel{width:100%;flex-direction:row;flex-wrap:wrap;gap:8px}
  .turn-indicator,.my-color-card{flex:1;min-width:0;padding:10px}
  .timer-card{min-width:80px;padding:10px}
  .timer-ring{width:60px;height:60px}
  .timer-num{font-size:1.2rem}
  .round-info{width:100%;font-size:.72rem}
  .btn-group{flex-direction:row;flex-wrap:wrap;gap:6px}
  .btn-group .btn{flex:1;min-width:0;padding:8px 6px;font-size:.78rem}
  .history-panel{width:100%;max-height:120px;padding:8px}
  .lobby-card{padding:28px 20px}
  .lobby-title{font-size:1.5rem}
  .mode-card{padding:20px 12px}
  .modal{padding:32px 24px}
  .modal-title{font-size:1.3rem}
}