* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.4 system-ui, -apple-system, sans-serif; background: #1e1f24; color: #e8e8ea; }
header { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background: #16171b; }
.logo { color: inherit; text-decoration: none; font-weight: 700; font-size: 18px; }
.me input { background: #2a2c33; border: 1px solid #3a3d46; color: inherit; padding: 5px 8px; border-radius: 6px; width: 140px; }
main { max-width: 1100px; margin: 0 auto; padding: 20px; }
button { font: inherit; cursor: pointer; border: 0; border-radius: 8px; padding: 10px 16px; background: #3a3d46; color: inherit; }
button:hover:not(:disabled) { filter: brightness(1.2); }
button:disabled { opacity: .4; cursor: default; }
button.primary { background: #5b8c3a; font-weight: 600; }
input.code { font: inherit; text-transform: uppercase; width: 90px; padding: 10px; border-radius: 8px; border: 1px solid #3a3d46; background: #2a2c33; color: inherit; }
.muted { color: #8b8e98; }
.card { background: #26282e; border-radius: 12px; padding: 16px; }

/* Home */
.home { text-align: center; padding-top: 60px; }
.home h1 { font-size: 36px; margin-bottom: 4px; }
.home .row { display: flex; gap: 10px; justify-content: center; margin-top: 24px; }
.home ol { text-align: left; display: inline-block; margin-top: 40px; color: #b8bbc4; }

/* Lobby */
.lobby h2 { display: flex; gap: 12px; align-items: center; }
.teams { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.team h3 { margin: 0 0 10px; }
.seat { display: flex; width: 100%; justify-content: space-between; margin-top: 8px; text-align: left; background: #31343c; }
.seat.empty { border: 2px dashed #4a4d57; background: transparent; }
.seat.mine { outline: 2px solid #7fb24f; }
.actions { display: flex; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.chips button { padding: 6px 12px; }
.chips button.chosen { background: #4aa3ff; }
input.num { font: inherit; width: 64px; padding: 6px 8px; border-radius: 8px; border: 1px solid #3a3d46; background: #2a2c33; color: inherit; }
.people { margin-top: 20px; }
.people span { display: inline-block; margin: 4px 6px 0 0; padding: 4px 10px; background: #31343c; border-radius: 99px; }
.people span.off { opacity: .4; }

/* Game */
.game { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.board-wrap { width: min(92vw, 560px); }
.bar { display: flex; justify-content: space-between; padding: 8px 4px; }
.bar { align-items: center; gap: 10px; }
.bar.active { color: #9fd36b; font-weight: 600; }
.clock { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; background: #31343c; color: #8b8e98; padding: 2px 12px; border-radius: 6px; min-width: 90px; text-align: right; }
.clock.run { background: #e8e8ea; color: #111; }
.clock.low { color: #f25555; }
#board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); aspect-ratio: 1; border-radius: 6px; overflow: hidden; user-select: none; }
.sq { position: relative; display: flex; align-items: center; justify-content: center; font-size: min(10vw, 56px); line-height: 1; }
.sq.l { background: #eed8b5; } .sq.d { background: #b58863; }
.sq.last { box-shadow: inset 0 0 0 100px rgba(205, 210, 60, .45); }
.sq.check { box-shadow: inset 0 0 0 100px rgba(230, 40, 40, .6); }
.sq.hl { box-shadow: inset 0 0 0 4px #4aa3ff; cursor: pointer; }
.sq.sel { box-shadow: inset 0 0 0 100px rgba(74, 163, 255, .55); }
.sq.target { cursor: pointer; }
.sq.target::after { content: ''; position: absolute; width: 30%; height: 30%; border-radius: 50%; background: rgba(0, 0, 0, .25); }
.sq.pickable { cursor: pointer; }
.pw { color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 1px #000; }
.pb { color: #111; text-shadow: 0 0 1px #fff, 0 0 1px #fff; }
.coord { position: absolute; font-size: 10px; left: 2px; bottom: 1px; color: rgba(0,0,0,.5); }

aside { width: min(92vw, 380px); display: flex; flex-direction: column; gap: 12px; }
.status { font-size: 18px; font-weight: 600; }
.status.you { color: #9fd36b; }
.timer { font-variant-numeric: tabular-nums; }
.picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.picker button { font-size: 32px; padding: 6px 0; line-height: 1.1; }
.picker button small { display: block; font-size: 11px; color: #aaa; }
.picker button.chosen { background: #4aa3ff; opacity: 1; }
.moves { max-height: 260px; overflow: auto; font-variant-numeric: tabular-nums; }
.moves table, .stats table { width: 100%; border-collapse: collapse; }
td, th { padding: 3px 6px; text-align: left; }
th { color: #8b8e98; font-weight: 500; font-size: 12px; }
tr:nth-child(even) td { background: #2c2e35; }
.result { font-size: 22px; font-weight: 700; }
.offer { outline: 2px solid #e0c14f; }
aside .actions button { flex: 1; }
.stats { width: 100%; }
.good { color: #9fd36b; } .ok { color: #e0c14f; } .bad { color: #f08a4b; } .awful { color: #f25555; }

#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #c0392b; padding: 10px 18px; border-radius: 8px; opacity: 0; transition: opacity .2s; pointer-events: none; }
#toast.show { opacity: 1; }
@media (max-width: 640px) { .teams { grid-template-columns: 1fr; } }