:root {
    --navy: #000A66;
    --blue: #003594;
    --blue-deep: #001a4d;
    --red: #E22036;
    --ink: #142033;
    --muted: #5c6b82;
    --line: rgba(0, 32, 91, 0.12);
    --paper: rgba(255, 255, 255, 0.94);
    --green: #157a45;
    --green-bg: #e7f6ee;
    --amber: #8a5a00;
    --amber-bg: #fff4d6;
    --shadow: 0 18px 50px rgba(0, 32, 91, 0.14);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-anchor: none; }
body {
    min-height: 100vh;
    color: var(--ink);
    font-family: "PKO Bank Sans", "Segoe UI", Arial, sans-serif;
    background-color: #d9e8f8;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.95) 0 2px, transparent 3px),
        radial-gradient(circle at 78% 12%, rgba(255, 255, 255, 0.8) 0 2px, transparent 3px),
        radial-gradient(circle at 70% 78%, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px),
        linear-gradient(160deg, rgba(255, 255, 255, 0.55), rgba(190, 216, 245, 0.2)),
        var(--bg-portrait);
    background-size: auto, auto, auto, cover, cover;
    background-position: center;
    background-attachment: fixed;
}
body.view-screen {
    background-image:
        radial-gradient(circle at 18% 30%, rgba(255, 255, 255, 0.9) 0 2px, transparent 3px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.05)),
        var(--bg-landscape);
    background-size: auto, cover, cover;
}
body.view-phone:not(.host-shell):not(.admin-shell) {
    display: flex;
    flex-direction: column;
    background-color: #b6d6ff;
    background-image: var(--mobile-footer);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    background-attachment: scroll;
}
.mobile-header { display: block; width: 100%; height: auto; }
button, input { font-family: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }

.brand-pko, .brand-cx { position: relative; }
.brand-img { display: none; width: auto; }
.brand-fallback { display: block; }
.has-logo .brand-img { display: block; }
.has-logo .brand-fallback { display: none; }
.brand-pko .brand-img { height: 54px; }
.brand-cx .brand-img { height: 92px; }
.brand-cx.lg .brand-img { height: 180px; }

.pko-fallback { display: flex; align-items: center; gap: 10px; color: var(--navy); }
.pko-mark {
    width: 46px; height: 46px; border-radius: 14px;
    background: #fff; color: var(--navy);
    display: grid; place-items: center; font-weight: 700; letter-spacing: -0.04em;
    position: relative;
}
.pko-mark::after {
    content: "";
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--red);
    position: absolute; top: 6px; right: 6px;
}
.pko-name { font-weight: 600; font-size: 15px; line-height: 1.1; max-width: 70px; }
.cx-fallback { color: var(--navy); }
.cx-row { display: flex; align-items: flex-start; gap: 6px; }
.cx-word {
    font-size: 92px; line-height: 0.8; font-weight: 500; letter-spacing: -0.06em;
    color: transparent; -webkit-text-stroke: 2.5px var(--navy);
}
.brand-cx.lg .cx-word { font-size: 168px; -webkit-text-stroke-width: 4px; }
.cx-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--red); margin-top: 18px; }
.brand-cx.lg .cx-dot { width: 36px; height: 36px; margin-top: 28px; }
.cx-live { font-size: 42px; font-weight: 700; letter-spacing: -0.04em; margin-top: -6px; }
.brand-cx.lg .cx-live { font-size: 72px; }

.phone-shell, .host-shell, .admin-shell, .dir-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: 96px;
}
body.view-phone:not(.host-shell):not(.admin-shell) .phone-shell,
body.view-phone:not(.host-shell):not(.admin-shell) .dir-shell {
    flex: 1 0 auto;
    min-height: 0;
    padding-bottom: 120px;
    background: transparent;
}
.sheet, .slogan, .topbar { position: relative; z-index: 1; }
.topbar {
    display: flex;
    justify-content: flex-end;
    padding: 18px 18px 0;
}
.topbar .pko-fallback { color: var(--navy); }
.sheet {
    overflow-anchor: none;
    width: min(680px, calc(100% - 28px));
    margin: 16px auto 28px;
    background: var(--paper);
    border-radius: 28px;
    box-shadow: var(--shadow);
    padding: 28px 22px 32px;
    position: relative;
    z-index: 1;
}
.slogan {
    margin-top: auto;
    text-align: center;
    padding: 8px 16px 22px;
    font-weight: 600;
    color: var(--navy);
}
.kicker {
    color: var(--blue);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 8px;
}
h1, h2, h3 { margin: 0 0 12px; letter-spacing: -0.03em; }
h1 { font-size: 34px; line-height: 1.05; }
h1.q-prompt, h1.q-live {
    font-size: 17px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
}
.lead { font-size: 18px; line-height: 1.45; color: var(--ink); }
.muted { color: var(--muted); }
.progress-row, .timer-row {
    display: flex; justify-content: space-between; gap: 12px;
    align-items: center; margin: 14px 0;
    font-weight: 600; color: var(--navy);
}
.track { height: 8px; background: #e4eef8; border-radius: 99px; overflow: hidden; margin-bottom: 32px; }
@media (max-width: 1023px) {
    .phone-shell .track { margin-bottom: 18px; }
    .phone-shell h1.q-live,
    .phone-shell h1.q-prompt { font-size: 19px; }
}
.track > span { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--blue)); width: 0; }
.timer-num { font-variant-numeric: tabular-nums; font-size: 22px; }
.options { display: flex; flex-direction: column; gap: 10px; }
.opt {
    text-align: left;
    border: 1.5px solid var(--line);
    background: #fff;
    border-radius: 16px;
    padding: 14px 14px 14px 12px;
    display: flex; gap: 12px; align-items: flex-start;
    font-size: 17px; line-height: 1.35; color: var(--ink);
}
.opt .letter {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: 1px 0 0;
    background: var(--navy);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0;
}
.opt .effect { display: block; margin-top: 6px; color: var(--blue); font-weight: 600; font-size: 14px; }
.opt.selected { border-color: var(--blue); background: #eef5ff; }
.opt.correct { border-color: var(--green); background: var(--green-bg); }
.opt.correct .letter { background: var(--green); }
.opt.wrong { border-color: var(--red); background: #fff1f2; }
.opt.wrong .letter { background: var(--red); }
.opt:disabled { cursor: default; }
.btn {
    border: 0; border-radius: 14px; padding: 14px 18px;
    background: var(--blue); color: #fff; font-weight: 600; font-size: 17px;
}
.btn.secondary { background: #e8eef6; color: var(--navy); }
.btn.danger { background: var(--red); }
.btn.block { width: 100%; }
.q-actions { margin-top: 16px; }
.btn:disabled { opacity: 0.55; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.field { width: 100%; font-size: 16px; padding: 14px 12px; border-radius: 12px; border: 1.5px solid var(--line); }
.note, .comment {
    background: #f4f8fc; border-radius: 14px; padding: 12px 14px; color: var(--navy);
}
.your-answer { margin-top: 16px; }
.comment { margin-top: 8px; }
.warn {
    background: var(--amber-bg); color: var(--amber);
    border-radius: 14px; padding: 12px 14px; font-weight: 600;
}
.result-label { font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.result-score { font-size: 64px; font-weight: 700; letter-spacing: -0.03em; color: var(--navy); line-height: 1; }
.prize {
    margin: 18px 0 0;
    color: var(--navy);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.35;
}
.prize .btn { margin-top: 14px; }
.prize.claimed {
    margin: 22px 0 0;
    padding: 16px;
    border-radius: 16px;
    background: var(--green-bg);
    color: var(--green);
}
.verdict { margin: 0 0 8px; font-weight: 700; font-size: 14px; }
.verdict.ok { color: var(--green); }
.verdict.bad { color: var(--red); }
.profile-title { font-size: 36px; line-height: 1.1; }
#toggle-review { margin-top: 22px; }
.review { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.review[hidden] { display: none; }
.review article { border-top: 1px solid var(--line); padding-top: 12px; }
.pill { display: inline-block; border-radius: 99px; padding: 2px 8px; font-size: 12px; font-weight: 700; }
.pill.ok { background: var(--green-bg); color: var(--green); }
.pill.bad { background: #fff1f2; color: var(--red); }
.shots { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.shots img { display: block; width: 100%; height: auto; max-width: 100%; max-height: 280px; border-radius: 12px; object-fit: contain; background: #fff; }
.screen .shots img {
    box-sizing: content-box;
    padding: 18px 20px;
    max-width: calc(100% - 40px);
}
.error { color: var(--red); font-weight: 600; }

.dir-shell .sheet { width: min(920px, calc(100% - 28px)); }
.link-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.link-card {
    display: block; text-decoration: none; color: inherit;
    border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; background: #fff;
}
.link-card strong { display: block; color: var(--navy); }
.link-card span { color: var(--muted); font-size: 14px; }

.screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.lobby-view { display: block; }
.lobby-view[hidden],
#screen-body[hidden],
.qr-float[hidden] { display: none !important; }
.qr-float {
    position: fixed;
    z-index: 5;
    right: 1.4vw;
    bottom: 2vh;
    background: #fff;
    border: 3px solid var(--navy);
    border-radius: 14px;
    padding: 8px;
}
.qr-float canvas { display: none !important; }
.qr-float img { display: block !important; width: 156px !important; height: 156px !important; }
.podium { display: flex; align-items: flex-end; gap: 14px; margin: 8px 0 18px; }
.podium-col { flex: 1; text-align: center; min-width: 0; }
.podium-name {
    min-height: 2.4em;
    margin: 0 4px 10px;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.15;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    word-break: break-word;
}
.podium-block {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border-radius: 16px 16px 0 0;
    color: #fff;
    padding: 16px 10px 14px;
    background: #8aa6d4;
    min-height: 150px;
}
.podium-col.p1 .podium-block { background: var(--blue); min-height: 210px; }
.podium-col.p2 .podium-block { background: #5f86c4; min-height: 176px; }
.podium-block.is-empty { opacity: 0.35; }
.place-label {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.02em;
    line-height: 1.1;
}
.podium-block .pts {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.podium-block .pts b { font-size: 42px; font-weight: 700; }
.podium-block .pts span { font-size: 16px; letter-spacing: 0.04em; }
.podium-block .time { font-weight: 500; font-size: 16px; line-height: 1; }
.screen .podium { margin: 6px 0 22px; }
.screen .podium-name { font-size: 28px; min-height: 2.6em; }
.screen .place-label { font-size: 22px; }
.screen .podium-block .pts b { font-size: 56px; }
.screen .podium-block .pts span { font-size: 20px; }
.screen .podium-block .time { font-size: 26px; }
.screen .podium-col {
    opacity: 0;
    animation: podium-in 0.55s ease both;
}
.screen .podium-col.p3 { animation-delay: 0.15s; }
.screen .podium-col.p2 { animation-delay: 0.75s; }
.screen .podium-col.p1 { animation-delay: 1.35s; }
.screen .podium-col.is-empty { animation-name: podium-in-empty; }
.screen .rank-stage.finale {
    min-height: 0;
    justify-content: flex-start;
}
.screen .rank-stage.finale h1 { margin: 0 0 12px; }
.screen .rank-stage.finale .rank-center { flex: 0 0 auto; }
@keyframes podium-in {
    0% { opacity: 0; transform: translateY(18px); }
    100% { opacity: 1; transform: none; }
}
@keyframes podium-in-empty {
    0% { opacity: 0; transform: translateY(18px); }
    100% { opacity: 0.45; transform: none; }
}
.confetti {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 6;
}
.confetti i {
    position: absolute;
    top: -24px;
    width: 10px;
    height: 16px;
    border-radius: 2px;
    animation-name: confetti-fall;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes confetti-fall {
    to { transform: translateY(108vh) rotate(640deg); }
}
.host-stack { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1023px) {
    body.view-phone #host-root {
        width: min(680px, calc(100% - 32px));
        margin: 12px auto 0;
        padding: 0 0 72px;
    }
    body.view-phone #host-root .host-wrap { padding: 0; }
}
.host-status { margin: 0; font-weight: 700; color: var(--navy); font-size: 18px; }
.host-hint { margin: 0; color: var(--navy); font-weight: 600; }
.host-roster h3 { margin: 0 0 8px; font-size: 16px; }
.host-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.host-chip {
    padding: 8px 12px;
    border-radius: 999px;
    border: 2px solid var(--navy);
    background: #fff;
    color: var(--navy);
    font-weight: 700;
}
.lobby-view h1 { font-size: 40px; margin-bottom: 8px; }
.lobby-lead {
    margin: 0;
    max-width: 34em;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--navy);
}
.lobby-view .qr-box {
    margin: 22px 0 4px;
    padding: 22px;
    border: 3px solid var(--navy);
    border-radius: 18px;
}
.lobby-view .join-url { margin: 14px 0 0; font-size: 28px; }
.roster { margin-top: 28px; }
.roster p { margin: 0; font-weight: 700; color: var(--navy); font-size: 20px; }
.roster-names {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}
.roster-names li {
    padding: 10px 16px;
    border-radius: 14px;
    background: #fff;
    border: 2px solid var(--navy);
    color: var(--navy);
    font-weight: 700;
    font-size: 18px;
}
.screen-brand {
    padding: 36px 32px 28px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
}
.screen-main {
    margin: 28px 28px 28px 0;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 32px;
    padding: 36px 42px;
    box-shadow: var(--shadow);
    display: flex; flex-direction: column;
    min-height: calc(100vh - 56px);
}
.screen-main h1 { font-size: 46px; }
.qr-box { background: #fff; border-radius: 20px; padding: 14px; width: max-content; }
.qr-box img, .qr-box canvas { display: block; }
.join-url { font-weight: 700; color: var(--navy); font-size: 22px; margin-top: 8px; }
.round-board .round-no {
    color: var(--blue);
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 8px;
}
.round-board h1 { margin: 0 0 10px; }
.round-board .round-count { margin: 0; font-weight: 700; font-size: 20px; color: var(--navy); }
.round-board .round-how {
    margin: 16px auto 0;
    max-width: 22em;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 600;
}
#screen-body:has(.round-board) {
    min-height: calc(100vh - 136px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.screen .round-board { width: 100%; text-align: center; }
.screen .round-board .round-no { font-size: 36px; margin-bottom: 14px; }
.screen .round-board h1 { font-size: 68px; line-height: 1.05; margin-bottom: 18px; }
.screen .round-board .round-count { font-size: 34px; }
.screen .round-board .round-how { font-size: 28px; max-width: 18em; margin-top: 28px; line-height: 1.35; }
.screen .kicker {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}
.screen .timer-row { font-size: 22px; }
.screen .timer-num { font-size: 32px; }
.screen .track { margin-bottom: 48px; }
.screen .answer-banner {
    margin-top: 8px;
    padding: 16px 20px;
    border-radius: 16px;
    background: var(--green-bg);
    color: var(--green);
    border: 1.5px solid rgba(21, 122, 69, 0.28);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.35;
}
.screen .answer-banner strong { font-weight: 700; }
.screen .opt { font-size: 24px; padding: 18px; align-items: center; }
.screen .opt .letter {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    font-size: 22px;
    padding: 2px 0 0;
}
.screen .options.grid { display: grid; grid-template-columns: 1fr 1fr; }
.rank-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.rank-table th { text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rank-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); }
.screen .rank-stage {
    min-height: calc(100vh - 150px);
    display: flex;
    flex-direction: column;
}
.screen .rank-stage h1 { margin-bottom: 0; }
.screen .rank-center {
    flex: 1;
    display: flex;
    align-items: center;
}
.screen .rank-table { font-size: 26px; }
.screen .rank-table th { font-size: 13px; padding-bottom: 14px; }
.screen .rank-table td { padding: 18px 12px; }
.rank-table tr.me td { background: #eef5ff; }
.place { font-weight: 700; color: var(--blue); }

.host-shell { background: #eef3f8; }
body.admin-shell {
    background: #eef3f8;
    background-image: none;
}
.admin-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin-bottom: 22px;
}
.admin-nav a {
    color: var(--navy);
    font-weight: 700;
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}
.admin-nav a.is-on { border-bottom-color: var(--red); }
.admin-nav form { margin-left: auto; }
.admin-nav .btn { padding: 8px 14px; font-size: 15px; }
.module-grid { display: grid; gap: 12px; }
@media (min-width: 800px) {
    .module-grid { grid-template-columns: repeat(3, 1fr); }
}
.host-wrap { display: grid; grid-template-columns: 340px 1fr; gap: 18px; padding: 18px; }
.host-card, .host-stage {
    background: #fff; border-radius: 20px; padding: 18px; box-shadow: var(--shadow);
}
.team-line { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.admin-wrap { width: min(1100px, calc(100% - 28px)); margin: 20px auto 40px; }
.admin-card { background: #fff; border-radius: 20px; padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow); }
table.plain { width: 100%; border-collapse: collapse; font-size: 14px; }
table.plain td, table.plain th { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.codes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 20px;
    justify-items: center;
}
.code-card {
    width: 100%;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: transparent;
    box-shadow: none;
    padding: 0;
}
.qr { display: flex; justify-content: center; margin-bottom: 14px; }
.qr canvas { display: none !important; }
.qr img { display: block !important; width: 160px; height: 160px; }
.code-card strong { display: block; color: var(--navy); }
.code-url { margin-top: 6px; color: var(--muted); font-size: 13px; }
.code-save { margin-top: 12px; }
.code-tools { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.zone { padding: 6px 0 14px; border-bottom: 1px solid rgba(0, 32, 91, 0.14); }
.zone-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.zone-head h2 { margin: 0; flex: 1 1 180px; font-size: 22px; }
.zone-head form { margin: 0; }
.zone-head .btn, .session-line .btn, .code-save { padding: 8px 14px; font-size: 14px; }
.badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 32, 91, 0.08);
    color: var(--navy);
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}
.zone-body { margin-top: 8px; }
.zone-body[hidden] { display: none; }
.session-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid rgba(0, 32, 91, 0.1);
}
.session-line form { margin: 0; }
.session-main { color: var(--navy); font-weight: 700; }
.session-mix { flex: 1 1 100%; margin-top: -2px; font-size: 14px; }
.panel-kicker {
    margin: 18px 0 4px;
    color: var(--blue);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.addr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 32, 91, 0.14);
    text-decoration: none;
    color: inherit;
}
.addr strong { display: block; color: var(--navy); font-size: 18px; }
.addr em { display: block; margin-top: 2px; font-style: normal; color: var(--muted); font-size: 14px; }
.addr-go { color: var(--blue); font-weight: 700; font-size: 14px; white-space: nowrap; }
@media (max-width: 700px) {
    .codes { grid-template-columns: 1fr; }
    .addr { flex-wrap: wrap; }
}
@media print {
    html, body { background: #fff !important; background-image: none !important; }
    body::before { display: none !important; }
    .topbar, .slogan, .mobile-header, .admin-nav, .no-print, .code-tools, .code-save { display: none !important; }
    .admin-wrap {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
    }
    .codes {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16mm 8mm !important;
        justify-items: center !important;
    }
    .code-card {
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        break-inside: avoid;
    }
    .qr img { width: 42mm !important; height: 42mm !important; }
}

@media (max-width: 900px) {
    .screen { grid-template-columns: 1fr; }
    .screen-main { margin: 12px; min-height: auto; }
    .screen .options.grid { grid-template-columns: 1fr; }
    .host-wrap { grid-template-columns: 1fr; }
    .screen-main h1 { font-size: 32px; }
}

@media screen and (min-width: 1024px) {
    html {
        background-color: #d5e6fb;
        background-image: var(--bg-desktop);
        background-repeat: no-repeat;
        background-position: right top;
        background-size: cover;
        background-attachment: fixed;
    }
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: #d5e6fb var(--bg-desktop) right top / cover no-repeat;
    }
    body,
    body.view-screen,
    body.admin-shell,
    body.host-shell,
    body.view-phone:not(.host-shell):not(.admin-shell) {
        display: block;
        min-height: 100%;
        overflow: visible;
        background: none;
    }
    .mobile-header { display: none; }
    .phone-shell,
    .dir-shell,
    .admin-wrap,
    #host-root,
    .screen {
        position: relative;
        z-index: 1;
        width: 50%;
        max-width: 50%;
        margin: 0 0 0 33.333%;
        min-height: 0;
        overflow: visible;
        padding: 36px 48px 80px 92px;
        background: transparent;
        box-sizing: border-box;
    }
    .sheet,
    .dir-shell .sheet,
    .admin-card,
    .screen-main,
    .host-card,
    .host-stage,
    .link-card {
        width: auto;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        background: transparent;
        box-shadow: none;
    }
    .sheet,
    .dir-shell .sheet,
    .screen-main {
        border-radius: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .admin-card {
        border-radius: 0;
        padding: 0 0 8px;
        border-bottom: 1px solid rgba(0, 32, 91, 0.14);
    }
    .link-card {
        border-radius: 0;
        border: 0;
        border-bottom: 1px solid rgba(0, 32, 91, 0.14);
        padding: 14px 0;
    }
    .module-grid { grid-template-columns: 1fr; }
    .codes { grid-template-columns: 1fr 1fr; }
    body.host-shell .topbar,
    .screen-logo,
    .screen .brand-cx { display: none; }
    .screen { display: block; min-height: 0; padding-top: 56px; }
    .screen h1.q-live { font-size: 32px; line-height: 1.2; }
    .lobby-view { display: block; }
    .screen-brand { padding: 0; }
    .screen-main { min-height: 0; }
    .host-wrap {
        grid-template-columns: 1fr;
        padding: 0;
    }
}