/* 轮盘赌 —— 样式 */
:root{
  --bg:#0f172a;
  --panel:#1e293b;
  --text:#f1f5f9;
  --muted:#94a3b8;
  --accent:#be185d;
  --wheel:#065f46;
  --chip:#fbbf24;
  --key-bg:#334155;
  --red:#dc2626;
  --black:#0f172a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
  line-height:1.5;
}
a { color:var(--accent); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
a:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }

.skip-link {
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus { position:static; width:auto; height:auto; padding:1rem; background:#000; color:#fff; }

.site-header { background:var(--panel); border-bottom:1px solid #334155; padding:0.75rem 0; }
.header-inner { max-width:1000px; margin:0 auto; padding:0 1rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.brand { color:var(--text); text-decoration:none; font-weight:800; font-size:1.25rem; letter-spacing:0.05em; }
.main-nav { margin-left:auto; }
.nav-list { display:flex; gap:0.75rem; list-style:none; margin:0; padding:0; }
.nav-link { color:var(--muted); text-decoration:none; padding:0.4rem 0.75rem; border-radius:6px; }
.nav-link:hover, .nav-link:focus-visible { background:#334155; color:var(--text); }

.container { max-width:1000px; margin:0 auto; padding:0 1rem; }

.hero { padding:2.5rem 0; background:linear-gradient(180deg,#0f172a,#0b1021); }
.hero-grid { display:flex; flex-direction:column; gap:2rem; align-items:center; text-align:center; }
@media (min-width:768px){ .hero-grid{ flex-direction:row; text-align:left; align-items:center; } }
.eyebrow { color:var(--accent); font-size:0.9rem; text-transform:uppercase; letter-spacing:0.1em; margin:0 0 0.5rem; display:flex; align-items:center; justify-content:center; gap:0.5rem; }
@media (min-width:768px){ .eyebrow{ justify-content:flex-start; } }
.hero h1 { font-size:clamp(2rem,5vw,3rem); margin:0 0 1rem; line-height:1.1; }
.hero-lede { color:var(--muted); font-size:1.05rem; max-width:62ch; margin:0 0 1.5rem; }
.hero-actions { display:flex; gap:0.75rem; flex-wrap:wrap; justify-content:center; }
@media (min-width:768px){ .hero-actions{ justify-content:flex-start; } }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.4rem;
  padding:0.6rem 1.2rem; border:1px solid transparent; border-radius:8px; font-weight:700;
  font-size:1rem; cursor:pointer; text-decoration:none; transition:transform .1s, background .2s;
}
.btn:active { transform:scale(0.97); }
.btn:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover { background:#f472b6; }
.btn-secondary { background:transparent; color:var(--text); border:1px solid #475569; }
.btn-secondary:hover { background:#334155; }
.btn-outline { background:transparent; color:var(--text); border:1px solid #475569; padding:0.45rem 1rem; font-size:0.95rem; }
.btn-outline:hover { background:#334155; }

.section { padding:2rem 0; }
.game-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.75rem; margin-bottom:1.25rem; }
.game-header h2 { margin:0; font-size:1.5rem; }
.game-controls { display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; }
.bet-wrap { display:flex; align-items:center; gap:0.4rem; font-size:0.95rem; color:var(--muted); }
.bet-input { width:70px; padding:0.35rem 0.5rem; border:1px solid #475569; border-radius:6px; background:var(--key-bg); color:var(--text); text-align:center; }
.bet-input:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

.roulette-wrap { display:flex; flex-direction:column; align-items:center; gap:1rem; margin:1rem 0; }
.board {
  position:relative;
  width:min(340px, 90vw);
  height:min(340px, 90vw);
  margin:0 auto;
}
.wheel {
  width:100%; height:100%;
  border-radius:50%;
  border:8px solid #334155;
  background:conic-gradient(from 0deg, #fbbf24 0deg 9.7deg, #dc2626 9.7deg 19.5deg, #000000 19.5deg 29.2deg, #dc2626 29.2deg 39deg, #000000 39deg 48.7deg, #dc2626 48.7deg 58.5deg, #000000 58.5deg 68.2deg, #dc2626 68.2deg 78deg, #000000 78deg 87.7deg, #dc2626 87.7deg 97.5deg, #000000 97.5deg 107.2deg, #dc2626 107.2deg 117deg, #000000 117deg 126.7deg, #dc2626 126.7deg 136.5deg, #000000 136.5deg 146.2deg, #dc2626 146.2deg 156deg, #000000 156deg 165.7deg, #dc2626 165.7deg 175.5deg, #000000 175.5deg 185.2deg, #dc2626 185.2deg 195deg, #000000 195deg 204.7deg, #dc2626 204.7deg 214.5deg, #000000 214.5deg 224.2deg, #dc2626 224.2deg 234deg, #000000 234deg 243.7deg, #dc2626 243.7deg 253.5deg, #000000 253.5deg 263.2deg, #dc2626 263.2deg 273deg, #000000 273deg 282.7deg, #dc2626 282.7deg 292.5deg, #000000 292.5deg 302.2deg, #dc2626 302.2deg 312deg, #000000 312deg 321.7deg, #dc2626 321.7deg 331.5deg, #000000 331.5deg 341.2deg, #dc2626 341.2deg 351deg, #000000 351deg 360deg);
  transition: transform 4s cubic-bezier(0.1, 0, 0.2, 1);
  display:flex; align-items:center; justify-content:center;
}
.wheel.spinning { transition: none; }
.wheel.center { transition: transform 1s cubic-bezier(0.1, 0, 0.2, 1); }
.wheel-center {
  width:70px; height:70px; border-radius:50%; background:#fbbf24;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.5rem; color:#000;
  z-index:2; position:relative;
}
.pointer {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:12px solid transparent; border-right:12px solid transparent; border-bottom:24px solid var(--accent);
  z-index:3;
}
.result {
  position:absolute; bottom:-50px; left:50%; transform:translateX(-50%);
  font-weight:900; font-size:2rem; color:var(--text); text-shadow:0 2px 8px rgba(0,0,0,0.5);
}

.bets { display:flex; flex-wrap:wrap; gap:0.5rem; justify-content:center; max-width:600px; margin:0 auto; }
.bet-group { display:flex; gap:0.4rem; flex-wrap:wrap; }
.bet-btn {
  padding:0.45rem 0.9rem; border:1px solid #475569; border-radius:8px; background:var(--key-bg); color:var(--text);
  font-size:0.95rem; cursor:pointer;
}
.bet-btn:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.bet-btn.active { background:var(--accent); color:#000; border-color:var(--accent); }
.bet-btn.red.active { background:var(--red); color:#fff; }
.bet-btn.black.active { background:var(--black); color:#fff; }
.num-input { width:55px; padding:0.35rem 0.5rem; border:1px solid #475569; border-radius:6px; background:var(--key-bg); color:var(--text); text-align:center; font-size:0.95rem; }
.num-input:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.spin-btn { min-width:140px; padding:0.75rem 1.5rem; font-size:1.1rem; margin-top:0.5rem; }

.game-status {
  margin-top:1rem; padding:0.75rem 1rem; background:var(--panel); border-radius:8px;
  border:1px solid #334155; font-size:0.95rem; color:var(--muted);
}
.game-status strong { color:var(--text); }
#message { margin-top:0.5rem; min-height:1.3rem; color:var(--accent); font-weight:700; }

#how-to-play { margin-top:1.5rem; }
#how-to-play h3 { margin-top:0; font-size:1.1rem; color:var(--accent); }
#how-to-play ul { color:var(--muted); padding-left:1.2rem; }
#how-to-play li { margin:0.35rem 0; }

.preview-chip, .preview-ball { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:2rem; margin:0.5rem 0; }
.preview-chip { background:var(--chip); color:#000; box-shadow:0 0 16px rgba(251,191,36,0.4); }
.preview-ball { background:#ffffff; color:#000; box-shadow:0 0 16px rgba(255,255,255,0.4); }

.site-footer { margin-top:3rem; padding:1.5rem 0; border-top:1px solid #334155; color:var(--muted); font-size:0.9rem; text-align:center; }
.site-footer a { color:var(--accent); }

@media (prefers-reduced-motion: reduce){
  * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .wheel { transition: none !important; }
}