/* ===== AlphaBet — retro arcade / pixel slot-machine theme ===== */

@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ps2p-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ps2p-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #141b3f;
  --bg2: #182252;
  --panel: #1b2557;
  --panel-border: #2c3a80;
  --text: #f1e2b3;
  --cream: #f1e2b3;
  --muted: #8b93c4;
  --orange: #e8641f;
  --orange-dark: #a83c10;
  --gold: #f2c14e;
  --green: #3ec46d;
  --red: #ff4f5e;
  --accent: #f2c14e;
  --pixel: 'Press Start 2P', 'SF Mono', ui-monospace, monospace;
  --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  margin: 0;
  line-height: 1.55;
}


a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 880px; margin: 0 auto; padding: 24px 16px 90px; position: relative; z-index: 1; }

.topnav {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border-bottom: 4px solid var(--orange);
  background: var(--bg2);
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.topnav .brand {
  color: var(--gold);
  font-family: var(--pixel);
  font-size: 0.7rem;
  text-shadow: 2px 2px 0 var(--orange-dark);
  white-space: nowrap;
}
.topnav .brand:hover { text-decoration: none; }
.nav-links { display: flex; gap: 12px; flex: 1; flex-wrap: wrap; align-items: center; }
.nav-links a { color: var(--cream); font-size: 0.85rem; white-space: nowrap; }
.nav-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.balance { color: var(--gold); font-family: var(--pixel); font-size: 0.7rem; }
.logout { color: var(--muted); }

h1 { font-family: var(--pixel); font-size: 1.05rem; margin: 12px 0 14px; line-height: 1.7; text-shadow: 2px 2px 0 rgba(0,0,0,0.5); }
h2 { font-family: var(--pixel); font-size: 0.75rem; margin: 32px 0 12px; color: var(--gold); }
h3 { font-family: var(--pixel); font-size: 0.65rem; margin: 18px 0 10px; }
.muted { color: var(--muted); }
.error { color: var(--red); }
.small { font-size: 0.8rem; }

.auth-box { max-width: 430px; margin: 40px auto; position: relative; z-index: 1; }

.form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--muted); }
.form input, input, select, textarea {
  background: var(--bg2);
  border: 3px solid var(--panel-border);
  color: var(--cream);
  padding: 10px 12px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.95rem;
}
input:focus, select:focus { outline: none; border-color: var(--gold); }

button, .btn {
  background: var(--orange);
  color: var(--cream);
  border: none;
  border-bottom: 4px solid var(--orange-dark);
  padding: 12px 18px;
  border-radius: 2px;
  font-family: var(--pixel);
  font-size: 0.62rem;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45);
}
button:hover, .btn:hover { filter: brightness(1.12); text-decoration: none; }
button:active, .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45); }
.btn { display: inline-block; color: var(--cream); }

/* карточки-«автоматы» */
.cards { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.card {
  display: block;
  background: var(--panel);
  border: 3px solid var(--panel-border);
  border-radius: 4px;
  padding: 16px 18px;
  color: var(--text);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.4);
}
.card:hover { border-color: var(--orange); text-decoration: none; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.exp-id { color: var(--muted); font-family: var(--pixel); font-size: 0.55rem; }
.card-title { font-weight: bold; margin-bottom: 12px; }
.card-footer { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; color: var(--muted); font-size: 0.88rem; }
.mine { color: var(--green); }

.tag {
  font-family: var(--pixel);
  font-size: 0.5rem;
  padding: 5px 10px 4px;
  border-radius: 2px;
  border: 2px solid var(--panel-border);
  text-transform: uppercase;
}
.tag--open { color: var(--green); border-color: var(--green); }
.tag--closed { color: var(--muted); }

.exp-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.exp-header h1 { margin: 0; }
.exp-title { color: var(--muted); margin-top: 6px; }

.option-row { margin: 14px 0; }
.option-row--mine { background: rgba(242, 193, 78, 0.09); border-radius: 2px; padding: 6px 8px; margin-left: -8px; margin-right: -8px; }
.option-row--winner .option-label { color: var(--gold); }
.option-label { display: flex; justify-content: space-between; font-size: 0.95rem; margin-bottom: 4px; }
.coeff { color: var(--gold); font-family: var(--pixel); font-size: 0.6rem; }
.coeff--empty { opacity: 0.4; }
.bar-line { display: flex; align-items: center; gap: 10px; }
.bar { color: var(--gold); letter-spacing: 1px; font-size: 1.05rem; text-shadow: 2px 2px 0 rgba(0,0,0,0.4); }
.bar-meta { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }

.bank-line { margin: 18px 0; font-size: 1rem; }
.hint { color: var(--muted); font-size: 0.85rem; margin: 10px 0 18px; }

.result { font-weight: bold; padding: 12px 16px; border-radius: 2px; border: 3px solid; box-shadow: 4px 4px 0 rgba(0,0,0,0.4); }
.result--win { background: rgba(62, 196, 109, 0.12); color: var(--green); border-color: var(--green); }
.result--lose { background: rgba(255, 79, 94, 0.12); color: var(--red); border-color: var(--red); }

.bet-form { display: flex; flex-direction: column; gap: 14px; max-width: 440px; }
.bet-options { display: flex; flex-direction: column; gap: 8px; }
.bet-option {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border: 3px solid var(--panel-border); border-radius: 2px;
  cursor: pointer; background: var(--bg2);
}
.bet-option:has(input:checked) { border-color: var(--gold); box-shadow: 3px 3px 0 rgba(0,0,0,0.4); }
.bet-amount { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 0.9rem; }

.table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.table th, .table td { text-align: left; padding: 9px 10px; border-bottom: 2px solid var(--panel-border); font-size: 0.9rem; }
.table th { color: var(--muted); font-family: var(--pixel); font-size: 0.5rem; text-transform: uppercase; font-weight: normal; }
.row--me { background: rgba(242, 193, 78, 0.07); }
.profit-pos { color: var(--green); }
.profit-neg { color: var(--red); }

.referral-box { background: var(--panel); border: 3px solid var(--panel-border); border-radius: 4px; padding: 14px; margin: 14px 0; box-shadow: 4px 4px 0 rgba(0,0,0,0.4); overflow-x: auto; }
.plain-list { padding-left: 18px; color: var(--muted); }

.admin-section { margin-bottom: 36px; }
.admin-section-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.inline-form { display: flex; gap: 8px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.option-input { display: flex; gap: 8px; margin-bottom: 8px; }
.option-input input:first-child { max-width: 64px; text-align: center; }
.back { color: var(--muted); font-size: 0.85rem; }

/* flash-сообщения */
.flash {
  background: rgba(62, 196, 109, 0.1);
  border: 3px solid var(--green);
  color: var(--green);
  padding: 12px 14px;
  border-radius: 2px;
  margin-bottom: 16px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
}
.flash--error {
  background: rgba(255, 79, 94, 0.1);
  border-color: var(--red);
  color: var(--red);
}

/* фильтр активные/прошедшие */
.tabs { display: flex; gap: 8px; margin: 16px 0 6px; flex-wrap: wrap; }
.tab {
  padding: 8px 12px 7px;
  border: 2px solid var(--panel-border);
  border-radius: 2px;
  color: var(--muted);
  font-family: var(--pixel);
  font-size: 0.52rem;
  text-transform: uppercase;
}
.tab:hover { text-decoration: none; border-color: var(--gold); }
.tab--on { color: var(--gold); border-color: var(--gold); background: rgba(242, 193, 78, 0.08); }

/* открытые ставки */
.bettors { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bettor {
  font-size: 0.78rem;
  color: var(--muted);
  border: 2px solid var(--panel-border);
  border-radius: 2px;
  padding: 2px 10px;
  background: var(--bg2);
}
.bettor--me { color: var(--gold); border-color: var(--gold); }

/* дедлайн и объяснение коэффициентов */
.deadline { color: var(--muted); font-size: 0.9rem; }
.coeff-help {
  margin: 8px 0 20px;
  border: 3px dashed var(--panel-border);
  border-radius: 2px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--muted);
}
.coeff-help summary { cursor: pointer; color: var(--cream); }
.coeff-help p { margin: 10px 0 0; }

/* панель автора */
.close-panel {
  margin-top: 32px;
  border: 3px solid var(--panel-border);
  border-radius: 4px;
  padding: 14px 18px;
  background: var(--panel);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.4);
}
.close-panel h3 { margin: 0 0 10px; color: var(--muted); }

/* ачивки */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 12px; }
.ach {
  display: flex; gap: 12px; align-items: center;
  background: var(--panel);
  border: 3px solid var(--panel-border);
  border-radius: 4px;
  padding: 12px 14px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
}
.ach-emoji { font-size: 1.6rem; }
.ach--locked { opacity: 0.35; filter: grayscale(1); box-shadow: none; }
.badge { cursor: help; }

/* welcome */
.welcome { max-width: 580px; margin: 30px auto; }
.welcome-title { font-size: 1.4rem; color: var(--gold); text-shadow: 3px 3px 0 var(--orange-dark); }
.welcome-sub { color: var(--muted); }
.rules { margin: 24px 0; display: flex; flex-direction: column; gap: 10px; }
.rule {
  border-left: 4px solid var(--orange);
  padding: 6px 14px;
  color: var(--text);
  font-size: 0.92rem;
  background: rgba(232, 100, 31, 0.06);
}
.rule-num { color: var(--orange); margin-right: 8px; font-family: var(--pixel); font-size: 0.6rem; }
.welcome-capital { font-size: 1.05rem; }
.btn-big { font-size: 0.72rem; margin-top: 6px; }
.welcome-ps { margin-top: 28px; }

/* загадочная страница без инвайта */
.mystery { text-align: center; }
.mystery-title { font-size: 3rem; }
.mystery-line { font-size: 1.2rem; margin: 4px 0; }

/* аркадный экран логина */
.arcade { text-align: center; }
.arcade-marquee {
  display: inline-block;
  font-family: var(--pixel);
  font-size: 0.85rem;
  color: var(--cream);
  background: var(--bg2);
  border: 3px solid var(--panel-border);
  border-radius: 4px;
  padding: 12px 26px;
  margin-bottom: 14px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
}
.slot {
  background: var(--orange);
  border: 4px solid var(--orange-dark);
  border-radius: 8px;
  padding: 16px;
  display: inline-block;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5);
}
.reels { display: flex; gap: 10px; justify-content: center; }
.reel {
  background: var(--cream);
  border: 3px solid var(--orange-dark);
  border-radius: 4px;
  width: 72px; height: 84px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
}
.arcade-sub {
  font-family: var(--pixel);
  font-size: 0.6rem;
  color: var(--cream);
  background: var(--bg2);
  display: inline-block;
  padding: 8px 20px;
  border-radius: 2px;
  margin-top: 16px;
  letter-spacing: 2px;
}
.arcade-logo {
  font-family: var(--pixel);
  font-size: 1.7rem;
  color: var(--gold);
  text-shadow: 3px 3px 0 var(--orange-dark), 6px 6px 0 rgba(0, 0, 0, 0.4);
  margin: 14px 0 4px;
}
.blink { animation: blink 1.2s steps(1) infinite; font-family: var(--pixel); font-size: 0.6rem; color: var(--cream); }
@keyframes blink { 50% { opacity: 0; } }

/* футер с девизом */
.footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  text-align: center;
  padding: 10px;
  background: linear-gradient(transparent, var(--bg) 45%);
  pointer-events: none;
  z-index: 2;
}
.motto {
  color: var(--muted);
  opacity: 0.6;
  font-size: 0.72rem;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
}
.motto:hover { opacity: 1; color: var(--gold); }

/* панель итогов закрытого эксперимента */
.results-panel {
  border: 3px solid var(--gold);
  border-radius: 4px;
  background: var(--panel);
  padding: 18px 20px 20px;
  margin: 20px 0 26px;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.45);
}
.results-panel h2 { margin: 22px 0 10px; }
.results-title { margin-top: 0 !important; color: var(--cream); }
.result-cards { display: flex; gap: 14px; flex-wrap: wrap; }
.result-card {
  background: var(--bg2);
  border: 3px solid var(--panel-border);
  border-radius: 2px;
  padding: 14px 20px;
  text-align: center;
  min-width: 130px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
  flex: 1;
}
.result-label {
  font-family: var(--pixel);
  font-size: 0.5rem;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 10px;
  letter-spacing: 1px;
}
.result-value { font-family: var(--pixel); font-size: 0.95rem; color: var(--gold); line-height: 1.5; }
.bettor--win { color: var(--green); border-color: var(--green); }

/* мнения и голосование */
.opinions-section { margin-top: 34px; }
.opinion {
  background: var(--panel);
  border: 3px solid var(--panel-border);
  border-radius: 4px;
  padding: 12px 14px;
  margin: 12px 0;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4);
}
.opinion--best { border-color: var(--gold); }
.opinion-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--muted);
}
.opinion-head b { color: var(--cream); }
.opinion-text { margin: 8px 0 0; font-size: 0.95rem; }
.vote-box { display: flex; align-items: center; gap: 6px; }
.vote-form { display: inline; }
.vote-btn {
  background: var(--bg2);
  border: 2px solid var(--panel-border);
  border-bottom: 2px solid var(--panel-border);
  color: var(--muted);
  padding: 3px 9px;
  font-size: 0.75rem;
  box-shadow: none;
  font-family: var(--mono);
}
.vote-btn:hover { border-color: var(--gold); color: var(--gold); filter: none; }
.vote-btn--on { color: var(--gold); border-color: var(--gold); background: rgba(242, 193, 78, 0.12); }
.vote-score { font-family: var(--pixel); font-size: 0.7rem; color: var(--gold); min-width: 34px; text-align: center; }

input[type="range"] { accent-color: var(--gold); padding: 0; border: none; background: transparent; }
textarea { resize: vertical; min-height: 60px; }

/* дождь из эмодзи (пасхалка) */
.rain {
  position: fixed;
  top: -40px;
  z-index: 999;
  animation: fall 3s linear forwards;
  pointer-events: none;
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(360deg); }
}