html,body{height:100%;margin:0;font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;}
body:not(.settings-page){
  background-image: url('9p1_clear.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-color:#000;
  color: #fff;
  padding:40px;
  box-sizing:border-box;
}

/* Центрированное расположение */
body.centered{
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

/* Расположение слева вверху */
body.top-left{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
}
.overlay{position: absolute;inset:0;background: rgba(0,0,0,0.446);pointer-events:none;}
.card{position: relative;display:inline-block;width:auto;min-width:520px;max-width:90vw;backdrop-filter: blur(2px);}

/* Отступы для варианта "слева вверху" */
body.top-left .card{
  margin-left:20px;
  margin-top:40px;
}

/* Контейнер для изображения лидера и карточки */
.content-wrapper{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0;
}

/* Изображение лидера */
.leader-image{
  position: relative;
  display: flex;
  align-items: flex-start;
  z-index: 1;
  opacity: 0.729;
}
.leader-image img{
  max-height: 800px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
table {width:100%;border-collapse: collapse;color: #fff;font-size:22px;letter-spacing:0.3px;}
thead th{text-align:left;padding:12px 10px;font-size:26px;font-weight:700;}
tbody td{padding:4px 8px;vertical-align:middle;border-bottom: 1px solid rgba(255,255,255,0.06);font-weight:500;}
tbody tr{height:27px;}
tbody tr td{height:27px;}
tbody tr:nth-child(odd){background:rgba(255,255,255,0.036);}
tbody tr:nth-child(even){background:rgba(255,255,255,0.018);}
.card-bg tbody tr:last-child td{border-bottom:none;}
.series-complete{background:rgba(255,255,255,0.12) !important;}
.rank{width:36px;text-align:center;font-weight:700;color:#fff;opacity:0.95;}
.namecol{width:180px;vertical-align:middle;}
.avatar{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg, rgba(255,255,255,0.0648), rgba(255,255,255,0.0162));display:inline-block;border:2px solid rgba(255,255,255,0.0486);margin-right:8px;vertical-align:middle;}
.avatar-photo{width:50px;height:50px;border-radius:50%;object-fit:cover;display:inline-block;border:2px solid rgba(255,255,255,0.0486);margin-right:8px;vertical-align:middle;}
.role-col{width:36px;text-align:center;}
.role-icon{width:36px;height:36px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-weight:bold;font-size:24px;color:white;}
.role-don{background-color:#000;}
.role-mafia{background-color:#000;}
.role-sheriff{background-color:#ffd900b4;color:#000;}
.role-civilian{background-color:transparent;}
.player-name{white-space:normal; overflow:visible; text-overflow:clip; max-width:240px;display:inline-block;vertical-align:middle;}
.num{ text-align:right; font-variant-numeric: tabular-nums; width: 60px; text-align: center; }
.num-right{ text-align:right; }
.total{width:60px;text-align:center;font-weight:800;font-size:24px;color:#fff;}
.title{font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;font-size:34px;font-weight:800;margin:0 0 8px 0;text-transform:uppercase;}
.underline{height:2px;width:100px;background: linear-gradient(90deg, rgba(0,0,0,0.0), rgba(255,255,255,0.072));margin-bottom:12px;}
.card-bg{background: rgba(0,0,0,0.5265);padding:14px;border-radius:6px;box-shadow: 0 6px 18px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.0162);}
.icons{ width:28px; text-align:center; opacity:0.95; }
.nowrap{white-space:nowrap;}
.total-all-columns{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start;}
.total-all-column{flex:1 1 340px;min-width:0;}
@media (max-width:700px){
  .card{ width:92vw; min-width:auto; margin-left:8px; } 
  thead th{ font-size:22px; } 
  .total{ font-size:22px; }
  .content-wrapper{ flex-direction: column; align-items: center; }
  .leader-image{ max-height: 200px; opacity: 0.7; }
  .leader-image img{ max-height: 200px; }
}

/* Settings page */
body.settings-page{
  background:#f7f7f7;
  color:#1f1f1f;
  min-height:100%;
  box-sizing:border-box;
  padding:40px 16px;
}
.settings-container{
  max-width:720px;
  margin:0 auto;
  background:#fff;
  padding:32px;
  box-shadow:0 2px 12px rgba(0,0,0,0.1);
  border-radius:12px;
}
.settings-title{margin:0 0 24px 0; font-size:34px; font-weight:700;}
.settings-field{margin-bottom:20px;}
.settings-field label{display:block;font-weight:600;margin-bottom:6px;}
.settings-field input[type="text"],
.settings-field input[type="number"],
.settings-field input[type="url"]{
  width:100%;
  padding:10px;
  border:1px solid #ccc;
  border-radius:6px;
  font-size:20px;
}
.settings-section{margin-bottom:24px;}
.settings-game-actions{display:flex;gap:8px;}
.game-row-inline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.game-row-inline label{margin-bottom:0;min-width:70px;}
.game-row-inline input[type="url"]{flex:1 1 320px;min-width:240px;}
.game-row-inline .settings-game-actions{flex:0 0 auto;}
.table-row-inline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.table-row-inline label{display:flex;align-items:center;margin-bottom:0;min-width:70px;}
.table-row-inline input[type="url"]{flex:1 1 320px;min-width:240px;}
.table-row-inline .settings-game-actions{flex:0 0 auto;display:flex;gap:8px;}
.settings-tabs{display:flex;gap:12px;margin-bottom:20px;border-bottom:1px solid #dcdcdc;}
.settings-tab{padding:10px 16px;text-decoration:none;color:#4d4d4d;font-weight:600;border-bottom:3px solid transparent;transition:color 0.2s,border-color 0.2s;display:inline-flex;align-items:center;gap:6px;}
.settings-tab:hover{color:#222;}
.settings-tab.active{color:#007bff;border-color:#007bff;}
.settings-checkbox{display:flex;align-items:center;gap:8px;}
.settings-checkbox label{margin:0;font-weight:500;display:flex;align-items:center;gap:8px;}
.settings-checkbox input[type="checkbox"]{margin:0;}
.settings-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}
.settings-actions .btn{
  padding:10px 18px;
  border:none;
  border-radius:6px;
  cursor:pointer;
  font-size:20px;
  color:#fff;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-save{background:#007bff;}
.btn-save:hover{background:#0056b3;}
.btn-logout{background:#6c757d;}
.btn-logout:hover{background:#565e64;}
.settings-message{padding:12px 14px;border-radius:6px;margin-bottom:16px;border:1px solid transparent;}
.settings-message.success{background:#e6f4ea;color:#1e7d33;border-color:#a7d8b8;}
.settings-message.error{background:#fcebea;color:#c53030;border-color:#f5c6cb;}
.settings-messages{margin-bottom:20px;}
/* Стили для статусов игр */
.game-status {
  text-align: center;
  line-height: 27px;
}
.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.status-win {
  background-color: #4CAF50;
}
.status-loss {
  background-color: #f44336;
}

@media (max-width:600px){
  body.settings-page{padding:24px 12px;}
  .settings-container{padding:24px;}
  .settings-actions{flex-direction:column;}
  .settings-actions .btn{width:100%;}
}