:root {
  color-scheme: light;
  --ink: #18232d;
  --muted: #697783;
  --line: #dbe2e5;
  --paper: #f3f5f3;
  --card: #ffffff;
  --green: #2d795e;
  --green-dark: #1d5c45;
  --green-soft: #e5f2ea;
  --amber: #f3c66b;
  --navy: #15232c;
  --danger: #b94c3c;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.app-shell { min-height: 100vh; }
.topbar { height: 64px; padding: 0 clamp(16px, 4vw, 52px); display: flex; align-items: center; justify-content: space-between; background: var(--navy); color: #fff; }
.brand { display: flex; gap: 10px; align-items: center; text-decoration: none; font-weight: 750; letter-spacing: -.02em; }
.brand-mark { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px 10px 10px 3px; background: var(--amber); color: var(--navy); font-weight: 900; }
.brand-sub { margin-left: 8px; color: #b5c2c7; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.connection { display: flex; gap: 7px; align-items: center; color: #c0cbcf; font-size: 12px; }
.connection-dot { width: 8px; height: 8px; border-radius: 50%; background: #e4b44e; }
.connection.online .connection-dot { background: #78ce98; }
.content { width: min(1100px, 100%); margin: 0 auto; padding: 30px 20px 70px; }
.content.screen { width: 100%; max-width: none; min-height: calc(100vh - 64px); padding: 25px 32px 40px; background: var(--navy); color: white; }
.eyebrow { color: var(--green); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 800; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(27px, 4vw, 42px); line-height: 1.05; letter-spacing: -.04em; }
h2 { margin-bottom: 7px; font-size: 21px; letter-spacing: -.025em; }
h3 { margin-bottom: 8px; font-size: 16px; }
.lede { max-width: 640px; color: var(--muted); line-height: 1.55; }
.page-head { margin-bottom: 22px; }
.subtle { color: var(--muted); font-size: 13px; line-height: 1.5; }
.tiny { color: var(--muted); font-size: 11px; }
.card { border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 20px; box-shadow: 0 4px 16px #18232d08; }
.card + .card { margin-top: 14px; }
.hero-card { margin: 18px 0 22px; padding: clamp(20px, 4vw, 32px); background: var(--green-soft); border: 1px solid #d2e8d8; border-radius: 20px; }
.hero-card p { max-width: 590px; color: #52645a; line-height: 1.55; }
.nav-tabs { display: flex; gap: 7px; padding: 5px; margin: 22px 0 18px; border: 1px solid var(--line); border-radius: 13px; background: #e8edeb; }
.tab { flex: 1; min-width: 0; border: 0; border-radius: 9px; padding: 10px 12px; background: transparent; color: #52615f; font-weight: 700; }
.tab.active { background: white; color: var(--green-dark); box-shadow: 0 1px 4px #16251d17; }
.grid-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 750; }
.field .hint { color: var(--muted); font-size: 11px; line-height: 1.4; }
input, textarea, select { width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid #cbd5d5; border-radius: 9px; background: #fff; color: var(--ink); outline: none; }
textarea { min-height: 77px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--green); box-shadow: 0 0 0 3px #2d795e1b; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; border: 1px solid transparent; border-radius: 10px; padding: 9px 15px; background: var(--green); color: white; font-weight: 750; text-decoration: none; }
.btn:hover { background: var(--green-dark); }
.btn.secondary { border-color: var(--line); background: white; color: var(--ink); }
.btn.secondary:hover { border-color: #aabbb4; background: #f8faf8; }
.btn.dark { background: var(--navy); }
.btn.warn { background: #f7e9c6; color: #5b4212; }
.btn:disabled { opacity: .48; cursor: not-allowed; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 25px; padding: 4px 9px; border-radius: 999px; background: #edf1ef; color: #53605e; font-size: 11px; font-weight: 750; }
.badge.good { background: var(--green-soft); color: var(--green-dark); }
.badge.amber { background: #fbf1d8; color: #735219; }
.stat { padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: #fafcfb; }
.stat strong { display: block; font-size: 24px; letter-spacing: -.04em; }
.stat span { color: var(--muted); font-size: 11px; }
.progress { height: 9px; margin: 12px 0 8px; overflow: hidden; border-radius: 9px; background: #e7ece9; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--green); transition: width .25s ease; }
.roster { display: grid; gap: 8px; }
.roster-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 9px; background: #f6f8f6; font-size: 13px; }
.roster-row select { width: auto; min-width: 150px; min-height: 35px; padding: 6px 8px; font-size: 12px; }
.empty { padding: 20px; border: 1px dashed #c9d5d0; border-radius: 12px; color: var(--muted); text-align: center; font-size: 13px; }
.bingo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.bingo-cell { display: flex; flex-direction: column; justify-content: space-between; min-height: 122px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: white; text-align: left; color: var(--ink); }
.bingo-cell:hover { border-color: #89b7a0; transform: translateY(-1px); }
.bingo-cell.done { border-color: #9bc7a8; background: var(--green-soft); }
.bingo-cell .cell-number { color: #8b9793; font-size: 10px; font-weight: 800; }
.bingo-cell .cell-text { font-size: 11px; line-height: 1.38; }
.bingo-cell .cell-person { margin-top: 8px; color: var(--green-dark); font-size: 10px; font-weight: 750; }
.board { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 7px; }
.board-column { display: grid; grid-template-rows: auto repeat(5, 67px); gap: 7px; min-width: 120px; }
.board-category { display: grid; place-items: center; min-height: 54px; padding: 7px; border-radius: 10px; background: #243a42; color: #e7efec; text-align: center; font-size: 12px; font-weight: 800; }
.board-cell { border: 1px solid #d4e4dc; border-radius: 10px; background: #f4fbf6; color: var(--green-dark); font-size: 20px; font-weight: 850; }
.board-cell.used { border-color: #607478; background: #31474e; color: #9aabaa; }
.board-cell.selected { border-color: var(--amber); background: #f3c66b; color: var(--navy); }
.board-cell.host:hover { background: #e6f3e9; }
.board-wrap { overflow-x: auto; }
.question-panel { margin-top: 15px; padding: 22px; border: 1px solid #334c53; border-radius: 14px; background: #1c3038; }
.question-panel h2 { margin: 8px 0 14px; font-size: clamp(22px, 3vw, 34px); line-height: 1.18; }
.question-panel .question-category { color: #a9c0b6; font-size: 12px; font-weight: 700; }
.answer-form { display: flex; gap: 9px; margin-top: 14px; }
.answer-form input { flex: 1; }
.team-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.team-card { padding: 12px; border: 1px solid #354b51; border-radius: 11px; background: #1a3038; }
.team-card strong { display: block; font-size: 12px; }
.team-card .score { margin-top: 5px; color: var(--amber); font-size: 21px; font-weight: 850; }
.team-card .member-line { margin-top: 6px; color: #b9c7c8; font-size: 10px; line-height: 1.45; }
.host-section { margin-top: 14px; }
.host-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.host-answer { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.host-answer:last-child { border-bottom: 0; }
.host-answer .answer-text { color: #38474f; overflow-wrap: anywhere; }
.question-editor { display: grid; gap: 10px; margin-top: 14px; padding: 14px; border-radius: 11px; background: #f3f6f4; }
.host-columns { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 15px; align-items: start; }
.host-links { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; }
.host-links a { color: var(--green-dark); font-weight: 750; }
.screen-head { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 17px; }
.screen-head .eyebrow { color: #87b79e; }
.screen h1 { color: white; }
.screen-question { display: grid; min-height: min(47vh, 430px); place-items: center; padding: 35px; text-align: center; }
.screen-question p { max-width: 1050px; margin: 0; font-size: clamp(30px, 5vw, 68px); line-height: 1.14; font-weight: 760; letter-spacing: -.035em; }
.screen .board { grid-template-columns: repeat(6, minmax(140px, 1fr)); gap: 10px; }
.screen .board-column { grid-template-rows: auto repeat(5, 72px); }
.screen .board-category { background: #233b42; font-size: 14px; }
.screen .board-cell { background: #f4fbf6; }
.screen .board-cell.used { background: #30454c; }
.screen .team-list { margin-top: 18px; }
.screen .team-card { background: #1c3038; }
.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px; background: #101b22a8; }
.modal { width: min(440px, 100%); padding: 20px; border-radius: 17px; background: white; box-shadow: 0 18px 60px #0003; }
.modal h3 { font-size: 19px; }
.toast { position: fixed; z-index: 20; right: 18px; bottom: 18px; max-width: min(400px, calc(100% - 36px)); padding: 12px 15px; border-radius: 11px; background: var(--navy); color: white; font-size: 13px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: #823c34; }
.footnote { margin-top: 17px; color: var(--muted); font-size: 11px; line-height: 1.5; }

@media (max-width: 760px) {
  .content { padding: 22px 14px 45px; }
  .topbar { height: 57px; padding: 0 15px; }
  .grid-two, .grid-three, .form-grid, .host-columns { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .team-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bingo-cell { min-height: 111px; padding: 8px; }
  .bingo-cell .cell-text { font-size: 10px; }
  .nav-tabs { position: sticky; top: 0; z-index: 3; }
  .tab { padding: 10px 5px; font-size: 12px; }
  .answer-form { flex-direction: column; }
  .screen-question { min-height: 50vh; }
  .content.screen { padding: 18px 14px 28px; }
  .screen-head { align-items: start; flex-direction: column; }
}

@media (max-width: 430px) {
  .bingo-grid { gap: 6px; }
  .bingo-cell { min-height: 100px; border-radius: 9px; }
  .bingo-cell .cell-text { font-size: 9px; }
  .host-answer { grid-template-columns: 1fr auto; }
  .host-answer .answer-text { grid-column: 1 / -1; }
}

/* Карточный домик — тёплый бордо, ink black, champagne and card-table details. */
:root {
  color-scheme: light;
  --ink: #261719;
  --muted: #796568;
  --line: #e6d5c9;
  --paper: #f5eee7;
  --card: #fffaf4;
  --green: #7b1624;
  --green-dark: #4d1018;
  --green-soft: #f3e6df;
  --amber: #d6ad73;
  --navy: #170c0e;
  --danger: #9f2934;
}
body { background: radial-gradient(ellipse at 50% -15%, #fff9f1 0, #f5eee7 58%, #efe3da 100%); }
.topbar { background: linear-gradient(100deg, #170c0e, #3d1018 52%, #170c0e); border-bottom: 1px solid #bd8755; }
.brand-mark { border-radius: 50%; background: #d6ad73; color: #651520; font-size: 20px; box-shadow: 0 0 0 1px #f0d5ad; }
.brand-sub { display: block; margin: 2px 0 0; letter-spacing: .19em; color: #d7b985; }
.connection { color: #ddcabe; }
.content { max-width: 1160px; }
.page-head { position: relative; }
.eyebrow { color: #8f2430; letter-spacing: .2em; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; }
h1 { letter-spacing: .015em; }
.card { border-color: #e5d1c0; border-radius: 5px 18px 5px 18px; box-shadow: 0 12px 30px #381a1b0d; }
.card::before { color: #a52a36; }
.hero-card { background: linear-gradient(130deg, #4a1019, #781d2a 60%, #3c1018); color: #fff4e8; border: 1px solid #d2a268; border-radius: 5px 24px 5px 24px; box-shadow: 0 18px 38px #42151d25; }
.hero-card h2 { color: #f5d8ae; font-size: 26px; }
.hero-card p, .hero-card .tiny { color: #f0dbd0; }
.hero-card .stat { background: #fffaf4; color: var(--ink); }
.nav-tabs { overflow-x: auto; background: #eadbd1; border-color: #d4bca9; border-radius: 5px 14px 5px 14px; }
.tab { flex: 0 0 auto; color: #63474b; }
.tab.active { color: #701925; background: #fffaf4; }
input:focus, textarea:focus, select:focus { border-color: #a36d42; box-shadow: 0 0 0 3px #d6ad7333; }
.btn { background: linear-gradient(135deg, #8a1d2b, #57121c); border-color: #a9704f; border-radius: 5px 12px 5px 12px; box-shadow: 0 3px 8px #49131a1a; }
.btn:hover { background: #4d1018; }
.btn.secondary { border-color: #ddc8b7; background: #fffaf4; color: #56131d; }
.btn.warn { background: #e7c892; color: #3c1b18; }
.badge { background: #f0e3d8; color: #60474a; }
.badge.good { background: #e6eee5; color: #355738; }
.badge.amber { background: #f5e7ca; color: #694815; }
.progress > span { background: linear-gradient(90deg, #8e1c2a, #d6ad73); }
.roster-row, .stat { background: #fbf4ed; }
.board-category { background: linear-gradient(145deg, #55131d, #210d11); color: #f4d9ae; border: 1px solid #b28250; border-radius: 4px 12px 4px 12px; }
.board-cell { border-color: #d6b58a; border-radius: 4px 12px 4px 12px; background: linear-gradient(145deg, #fffaf4, #f2e5d9); color: #681722; }
.board-cell.used { border-color: #75545a; background: #342025; color: #c6a994; }
.board-cell.selected { background: #dfbd83; border-color: #fff0c9; color: #2b1115; }
.question-panel { background: linear-gradient(135deg, #321017, #180d10); border-color: #b78250; border-radius: 5px 18px 5px 18px; }
.team-card { border-color: #79554c; background: #2b171b; }
.team-card .score { color: #e5c18b; }
.host-links a { color: #741c27; }
.content.screen { position: relative; overflow: hidden; background: radial-gradient(ellipse at 52% 0%, #4c1720 0%, #210e12 54%, #100a0b 100%); }
.content.screen::before, .content.screen::after { position: fixed; z-index: 0; color: #d6ad73; opacity: .12; font-size: 28vw; line-height: 1; pointer-events: none; }
.content.screen::before { content: "♠"; top: -9vw; left: -7vw; }
.content.screen::after { content: "♦"; right: -6vw; bottom: -12vw; }
.content.screen > * { position: relative; z-index: 1; }
.screen-head { border-bottom: 1px solid #9a684b; padding-bottom: 14px; }
.screen-head .eyebrow { color: #e2c18f; }
.screen h1 { color: #f8e7cf; text-shadow: 0 3px 25px #e0b77b3b; }
.screen .board-category { background: linear-gradient(145deg, #67202a, #291015); }
.screen .board-cell { background: linear-gradient(145deg, #fff9ef, #ead8c3); color: #64151f; }
.screen .board-cell.used { background: #3b272c; color: #bd9f91; }
.screen .team-card { background: #29151a; }
.vote-qr { display: flex; align-items: center; gap: 24px; width: min(780px, 100%); margin: 16px auto 4px; padding: 18px 22px; border: 1px solid #bd8d58; border-radius: 5px 18px 5px 18px; background: linear-gradient(115deg, #fff8eb, #ead2b4); color: #2a1317; box-shadow: 0 12px 40px #0004; }
.vote-qr img { width: 142px; height: 142px; padding: 7px; border-radius: 4px; background: white; }
.vote-qr .eyebrow { color: #8b1f2d; }
.vote-qr h2 { margin: 5px 0; color: #4d1018; font-size: 27px; }
.vote-qr p { margin: 0 0 7px; }
.vote-qr a { color: #6f1723; font-size: 12px; overflow-wrap: anywhere; }
.vote-form { margin-top: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 5px 14px 5px 14px; background: #fff7ef; }
.vote-form h3 { color: #761b27; }
@media (max-width: 760px) {
  .vote-qr { gap: 14px; padding: 14px; }
  .vote-qr img { width: 112px; height: 112px; }
  .vote-qr h2 { font-size: 22px; }
  .content.screen::before, .content.screen::after { font-size: 50vw; }
}