.seat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 13px; font-weight: bold; color: var(--theme-color); }
.seat-stage { position: relative; width: 100%; height: 260px; margin: 8px 0 12px; background: radial-gradient(circle at 50% 40%, #f5f7fa, #e6ebf0); border-radius: 16px; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.seat-stage.lobby-seat-stage { height: 300px; margin-bottom: 14px; }
.seat-stage.game-seat-stage { height: 210px; margin: 6px 0 10px; background: radial-gradient(circle at 50% 45%, #f8fafc, #e8edf2); border: 1px solid rgba(92,102,112,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); }
.game-seat-stage .seat-table { border-width: 3px; box-shadow: inset 0 2px 7px rgba(255,255,255,0.25), 0 5px 14px rgba(0,0,0,0.18); }
.game-seat-stage .seat { box-shadow: 0 2px 7px rgba(0,0,0,0.16); }
.game-seat-stage .seat .seat-name { max-width: 86px; padding: 2px 5px; border-radius: 6px; background: rgba(255,255,255,0.88); color: #46515b; font-size: 11px; line-height: 1.2; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }


.seat-table { position: absolute; border-radius: 10px; background: linear-gradient(175deg, #ddc8a3, #c0a075); box-shadow: inset 0 3px 10px rgba(255,255,255,0.3), 0 8px 22px rgba(0,0,0,0.25); border: 4px solid #8a6234; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; user-select: none; }


.seat { position: absolute; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffffff, #e9eef3 70%, #d3dbe3); border: 2.5px solid #c3ced6; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; box-shadow: 0 3px 9px rgba(0,0,0,0.18); transition: transform 0.1s, border-color 0.1s; z-index: 2; }
.seat.small { width: 40px; height: 40px; font-size: 18px; border-width: 2px; }
.seat:hover { transform: scale(1.08); border-color: var(--theme-color); }
.seat-stage.crowded { --seat-scale: 0.82; }
.seat-stage.crowded[data-crowd="heavy"] { --seat-scale: 0.62; }
.seat-stage.crowded .seat { transform: scale(var(--seat-scale)); }
.seat-stage.crowded .seat:hover { transform: scale(calc(var(--seat-scale) + 0.06)); }


.seat.mine { border-color: #e6a817; background: #fffbf0; box-shadow: 0 0 0 3px rgba(230,168,23,0.4), 0 0 18px rgba(230,168,23,0.35); }

.seat.target { border-color: #e74c3c; background: #ffece8; box-shadow: 0 0 0 3px rgba(231,76,60,0.4), 0 0 14px rgba(231,76,60,0.3); }
.seat.target .seat-name { color: #e74c3c; }
.seat.taken { cursor: default; }
.seat.taken:hover { transform: none; }
.seat.dead { filter: grayscale(1); opacity: 0.6; }
.seat.offline { opacity: 0.5; }
.seat.pkp { border-color: #f39c12; box-shadow: 0 0 0 3px rgba(243,156,18,0.4); }


.seat .seat-name { position: absolute; font-size: 10px; font-weight: 600; white-space: nowrap; color: #5c6670; max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
.seat .seat-name.bottom { top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; }
.seat .seat-name.top { bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 2px; }
.seat .seat-name.left { right: 100%; top: 50%; transform: translateY(-50%); margin-right: 4px; }
.seat .seat-name.right { left: 100%; top: 50%; transform: translateY(-50%); margin-left: 4px; }


.seat .seat-mark { position: absolute; bottom: -6px; right: -6px; min-width: 17px; height: 17px; border-radius: 10px; background: #dfe6e9; color: #636e72; font-size: 10px; font-weight: bold; display: flex; align-items: center; justify-content: center; padding: 0 3px; border: 1px solid #fff; z-index: 3; }
.seat-empty-label { position: absolute; bottom: 4px; width: 100%; text-align: center; font-size: 10px; color: #95a5a6; }


.seat-table { cursor: default; }
.seat-table.host-can-toggle { cursor: pointer; }
.seat-table.host-can-toggle:hover { box-shadow: inset 0 3px 10px rgba(255,255,255,0.3), 0 8px 22px rgba(0,0,0,0.25), 0 0 0 3px rgba(230,168,23,0.4); }

.seat-dir { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; pointer-events: none; }
.seat-dir .dir-icon { display: flex; align-items: center; justify-content: center; color: #8a6234; opacity: 0.75; }
.seat-dir .dir-icon svg { display: block; }
.seat-dir .dir-label { font-size: 10px; color: #8a6234; font-weight: bold; }
.seat-table.host-can-toggle .seat-dir { pointer-events: none; }


.seat-dir .dir-icon.cw svg { animation: dir-rotate-cw 3s linear infinite; }
.seat-dir .dir-icon.ccw svg { animation: dir-rotate-ccw 3s linear infinite; }
@keyframes dir-rotate-cw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes dir-rotate-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }


.seat-dir-hint { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 9px; color: #e6a817; white-space: nowrap; opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.seat-table.host-can-toggle:hover .seat-dir-hint { opacity: 1; }