* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: #f7f0df; background: #09242c; font-family: Arial, Helvetica, sans-serif; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.show-shell { position: relative; width: 100%; height: 100%; overflow: hidden; background-color: #0d3038; }
.show-shell:before, .show-shell:after { position: absolute; z-index: 0; width: 22em; height: 22em; border-radius: 50%; content: ""; opacity: .16; pointer-events: none; }
.show-shell:before { left: -10em; top: 18%; background: #ef6d5a; }
.show-shell:after { display: none; }

.show-header { position: relative; z-index: 5; width: 100%; height: 6.1em; min-height: 6.1em; overflow: hidden; border-radius: 1em; color: #102b33; background: #f3ead8; box-shadow: 0 .45em 1.4em rgba(0,0,0,.26); }
.brand { position: absolute; left: .85em; top: .62em; height: 2.5em; padding: 0; border: 0; color: #102b33; background: transparent; font-weight: bold; letter-spacing: -.05em; white-space: nowrap; cursor: pointer; }
.brand-fact, .brand-fiction { display: inline-block; padding: .16em .3em; border-radius: .22em; font-size: 1.42em; line-height: 1; }
.brand-fact { color: #fff8e8; background: #167b79; }
.brand-fiction { color: #fff8e8; background: #e55d51; }
.brand-or { display: inline-block; margin: 0 .15em; color: #b07922; font: italic 1em Georgia, serif; }
.tagline { position: absolute; left: 1.55em; bottom: .75em; margin: 0; color: #617179; font-size: .69em; font-weight: bold; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.header-stats { position: absolute; right: .8em; bottom: .45em; height: 2.2em; white-space: nowrap; }
.header-stats > span { display: inline-block; margin-left: .5em; padding: .64em .8em; border-radius: .55em; vertical-align: middle; font-size: .8em; font-weight: bold; }
.network-status { color: #e7f6ef; background: #23515a; }
.network-status.offline { color: #381f1a; background: #e9a878; }
.round-label { color: #243940; background: #e3d6bd; }
.timer-value { min-width: 3.3em; color: #fff8e8; background: #bb3f43; text-align: center; }

.game-stage { position: absolute; z-index: 2; left: 0; right: 0; top: 0; bottom: 0; }
.content-pane { position: absolute; z-index: 2; left: calc(100vh + .9em); right: .8em; top: .7em; bottom: .7em; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; overflow: hidden; }
.art-card, .statement-card { overflow: hidden; box-shadow: 0 .7em 1.7em rgba(0,0,0,.27); }
.art-card { position: absolute; left: 0; top: 0; width: 100vh; height: 100vh; border: .35em solid #f3ead8; border-radius: 1em; background: #153e46; }
.art-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity .24s ease; }
.phase-label { position: absolute; left: 1em; bottom: .82em; padding: .48em .72em; border-radius: 2em; color: #14333a; background: #f3ead8; font-size: .72em; font-weight: bold; letter-spacing: .12em; text-transform: uppercase; }
.statement-card { position: relative; width: 100%; min-height: 0; margin-top: .8em; padding: 1.45em 1.55em 1.2em; border: .12em solid rgba(255,255,255,.15); border-radius: 1.15em; background: #143c47; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; -webkit-flex: 1 1 auto; flex: 1 1 auto; transition: opacity .24s ease; }
.statement-card.statement-changing, .art-card img.statement-changing { opacity: 0; pointer-events: none; }
.eyebrow { margin: 0 0 .75em; color: #e7bd5a; font-size: .75em; font-weight: bold; letter-spacing: .18em; text-transform: uppercase; }
.statement-card h1 { max-height: 4.2em; margin: 0; overflow: hidden; color: #fff8e8; font-size: 2.4em; line-height: 1.08; letter-spacing: -.035em; }
.attract-panel { max-width: 34em; margin-top: 1.35em; }
.attract-panel p { max-width: 31em; margin: 0 0 1.15em; color: #d8e6df; font-size: .94em; font-weight: bold; line-height: 1.42; }
.attract-start-button { min-height: 3.7em; padding: .75em 1.35em; border: .12em solid rgba(255,255,255,.28); border-radius: .65em; color: #fff8e8; background: #d7504c; font-size: .88em; font-weight: bold; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.attract-start-button:hover, .attract-start-button:focus { border-color: #fff8e8; outline: none; }
.question-panel { position: relative; margin-top: 1.65em; }
.vote-status { margin: 0 0 .55em; color: #d8e6df; font-size: .92em; font-weight: bold; }
.vote-track { height: .62em; overflow: hidden; border-radius: .6em; background: #09272f; }
.vote-fill { display: block; width: 0; height: 100%; background: #e8b64b; transition: width .35s ease; }
.viewer-vote-controls { position: relative; margin-top: .7em; padding: 0 2.2em; text-align: center; white-space: nowrap; }
.viewer-vote-button { display: inline-block; width: 43%; min-height: 3.7em; padding: .55em .7em; border: .12em solid rgba(255,255,255,.22); border-radius: .62em; color: #fff8e8; vertical-align: middle; cursor: pointer; }
.viewer-vote-button strong, .viewer-vote-button span { display: block; }
.viewer-vote-button strong { font-size: 1.05em; letter-spacing: .12em; }
.viewer-vote-button span { margin-top: .2em; font-size: .52em; font-weight: bold; opacity: .8; }
.viewer-vote-button.true-button { background: #167b79; }
.viewer-vote-button.false-button { background: #d7504c; }
.viewer-vote-button:hover, .viewer-vote-button:focus { border-color: #fff8e8; outline: none; }
.viewer-vote-button:disabled { cursor: default; opacity: .42; }
.viewer-vote-button.selected { border-color: #e7bd5a; opacity: 1; }
.viewer-vote-or { display: inline-block; width: 10%; color: #e7bd5a; font: italic .9em Georgia, serif; vertical-align: middle; }

.reveal-panel { position: relative; margin-top: 1.25em; }
.verdict-badge { display: inline-block; margin-bottom: .5em; padding: .3em .78em; border-radius: .38em; color: #fff8e8; background: #167b79; font-size: 1.14em; font-weight: bold; letter-spacing: .16em; }
.verdict-badge.fiction { background: #d7504c; }
.explanation { max-height: 4.3em; margin: 0 0 .48em; overflow: hidden; color: #edf4ec; font-size: 1.02em; line-height: 1.35; }
.source-link { color: #e7bd5a; font-size: .7em; font-weight: bold; text-decoration: none; }
.source-link:hover, .source-link:focus { text-decoration: underline; }

.finished-panel { position: relative; margin-top: 1.4em; text-align: center; }
.finished-kicker { margin: 0 0 .5em; color: #e7bd5a; font-size: .8em; font-weight: bold; letter-spacing: .24em; }
.finished-panel h2 { margin: 0 0 .4em; color: #fff8e8; font-size: 2.35em; line-height: 1; }
.finished-panel p:last-child { margin: 0 auto; max-width: 26em; color: #d8e6df; font-size: 1em; line-height: 1.4; }
.error-panel { position: relative; margin-top: 1.4em; padding: 1.2em; border-radius: .7em; color: #3d201c; background: #f0ad7a; text-align: center; }
.error-panel strong, .error-panel span { display: block; }
.error-panel span { margin-top: .4em; font-size: .78em; }

.players-strip { position: relative; z-index: 3; width: 100%; height: auto; min-height: 5.1em; margin-top: .8em; padding: .65em .17em .17em 6.75em; overflow: hidden; border-radius: .95em; background: #082a32; box-shadow: 0 .45em 1.3em rgba(0,0,0,.25); -webkit-flex: 0 0 auto; flex: 0 0 auto; }
.players-heading { position: absolute; left: .65em; top: .65em; width: 5.45em; height: 3.8em; padding: .72em .6em; border-radius: .62em; color: #153c45; background: #e7bd5a; text-align: center; text-transform: uppercase; }
.players-heading span { display: block; font-size: .6em; font-weight: bold; letter-spacing: .14em; }
.players-heading strong { display: block; font-size: 1.65em; line-height: 1.05; }
.participant-list { position: static; display: -webkit-flex; display: flex; min-height: 3.8em; margin: 0; padding: 0; overflow: visible; list-style: none; white-space: normal; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.participant-item, .empty-player { display: inline-block; width: calc(33.333% - .48em); min-width: 116px; height: 3.8em; margin: 0 .48em .48em 0; padding: .58em .65em; overflow: hidden; border-radius: .62em; vertical-align: top; background: #174651; -webkit-flex: 0 0 calc(33.333% - .48em); flex: 0 0 calc(33.333% - .48em); }
.participant-item { position: relative; }
.participant-item.correct { background: #17685f; }
.participant-item.wrong { background: #74413f; }
.participant-item.disconnected { opacity: .45; }
.participant-main { display: block; padding-right: 5em; overflow: hidden; color: #fff8e8; font-size: .8em; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; }
.participant-meta { display: block; margin-top: .42em; overflow: hidden; color: #b9d1cf; font-size: .58em; font-weight: bold; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.participant-score { position: absolute; right: .75em; top: .72em; width: 4.2em; overflow: hidden; color: #e7bd5a; font-size: .72em; font-weight: bold; text-align: right; white-space: nowrap; }
.empty-player { width: auto; min-width: 0; padding-top: 1.2em; color: #a9c2c0; font-size: .72em; -webkit-flex-basis: auto; flex-basis: auto; }

.join-panel { position: absolute; z-index: 8; right: .8em; top: .8em; width: 166px; height: 220px; -webkit-transform: scale(.82); transform: scale(.82); -webkit-transform-origin: top right; transform-origin: top right; }
.show-qr-button { display: none; position: absolute; z-index: 9; right: 1.25em; top: 1.65em; min-width: 4.2em; padding: .7em .75em; border: 0; border-radius: .6em; color: #fff8e8; background: #167b79; font-size: .72em; font-weight: bold; text-transform: uppercase; cursor: pointer; }
.show-qr-button:disabled { opacity: .45; cursor: default; }
.rcRoomQrCodeLink,
.rcRoomQrCodeLink * { box-sizing: content-box; }
.rcRoomQrCodeLink { display: block; width: 150px; overflow: hidden; margin-left: auto; margin-right: auto; border: solid 8px #fff; border-radius: 14px; color: #fff; background-color: #fff; box-shadow: 0 0 32px #000; text-align: center; transition: opacity 1s ease; text-decoration: none; transform-origin: center; transform: scale(1); animation: pop-in 500ms ease-in-out forwards; }
.rcTechLabel { margin: 0 0 8px 0; padding: 4px; border-radius: 6px 6px 0 0; color: #fff; background-color: #000; font-family: monospace; font-size: 13px; font-weight: bold; letter-spacing: .2em; }
.rcRoomQrCode { width: 150px; height: 150px; overflow: hidden; }
.rcRoomQrCode img, .rcRoomQrCode canvas { display: block; width: 150px !important; height: 150px !important; }
.rcRoomId { overflow: hidden; margin: 8px 0 0 0; padding: 4px; border-radius: 0 0 6px 6px; color: #fff; background-color: #000; font-family: monospace; font-size: 16px; letter-spacing: .25em; text-overflow: clip; white-space: nowrap; }

.qr-modal { position: fixed; z-index: 60; left: 0; right: 0; top: 0; bottom: 0; }
.qr-modal-backdrop { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(3,21,26,.9); }
.qr-modal-card { position: absolute; left: 50%; top: 50%; width: 292px; min-height: 386px; margin-left: -146px; padding: 24px 18px 18px; overflow: hidden; border-radius: 24px; color: #fff8e8; background: #143c47; box-shadow: 0 22px 70px rgba(0,0,0,.58); text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.qr-modal-close { position: absolute; right: 10px; top: 10px; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; color: #143c47; background: #e7bd5a; font: bold 28px/42px Arial, sans-serif; cursor: pointer; }
.qr-modal-kicker { margin: 2px 44px 5px; color: #e7bd5a; font-size: 10px; font-weight: bold; letter-spacing: .18em; }
.qr-modal-card h2 { margin: 0 45px; font-size: 27px; }
.qr-modal-copy { max-width: 230px; margin: 8px auto 0; color: #c8d9d4; font-size: 12px; line-height: 1.3; }
.modal-qr-stage { width: 186px; height: 260px; margin: 14px auto 0; }
.modal-qr-stage > .rcRoomQrCodeLink { animation: none; -webkit-transform: scale(1.12); transform: scale(1.12); -webkit-transform-origin: top center; transform-origin: top center; }

.portrait-layout .content-pane { left: .8em; right: .8em; top: calc(100vw + .7em); bottom: .55em; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-justify-content: flex-start; justify-content: flex-start; }
.portrait-layout .show-header { width: 100%; height: 6.1em; min-height: 6.1em; }
.portrait-layout .tagline { display: none; }
.portrait-layout .header-stats { left: 1.4em; right: auto; top: 3.75em; height: 1.8em; }
.portrait-layout .header-stats > span { margin: 0 .25em 0 0; padding: .34em .55em; font-size: .58em; }
.portrait-layout .brand { top: .72em; }
.portrait-layout .show-qr-button { display: block; right: 1.35em; top: 1.2em; min-width: 0; min-height: 2.4em; padding: .55em .2em .4em; border-radius: 0; border-bottom: .1em solid #167b79; color: #167b79; background: transparent; font-size: .64em; line-height: 1; text-decoration: none; }
.portrait-layout .show-qr-button:hover, .portrait-layout .show-qr-button:focus { color: #a9433d; outline: .14em solid #167b79; outline-offset: .18em; }
.portrait-layout .join-panel { display: none; }
.portrait-layout .game-stage { left: 0; right: 0; top: 0; bottom: 0; }
.portrait-layout .art-card { left: 0; top: 0; width: 100vw; height: 100vw; border: .35em solid #f3ead8; border-radius: 1em; }
.portrait-layout .statement-card { width: 100%; min-height: 0; margin: .8em 0 0; padding: 1.25em 1.25em 1em; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
.portrait-layout .statement-card h1 { max-height: 3.55em; padding-bottom: .08em; font-size: 2.05em; line-height: 1.1; }
.portrait-layout .question-panel, .portrait-layout .reveal-panel { position: relative; left: auto; right: auto; bottom: auto; margin-top: 1.15em; }
.portrait-layout .viewer-vote-controls { padding: 0; }
.portrait-layout .viewer-vote-button { min-height: 4.7em; }
.portrait-layout .explanation { max-height: 5.45em; font-size: .94em; }
.portrait-layout .finished-panel, .portrait-layout .error-panel { position: relative; left: auto; right: auto; top: auto; margin: 1.15em 0 0; }
.portrait-layout .players-strip { width: 100%; height: auto; min-height: 4.6em; margin: .7em 0 0; padding: .45em 0 0 5.1em; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
.portrait-layout.no-players .players-strip { min-height: 3.7em; padding-top: .4em; }
.portrait-layout .players-heading { left: .45em; top: .45em; width: 4.2em; height: 3.7em; padding: .6em .35em; }
.portrait-layout .participant-list { min-height: 3.7em; }
.portrait-layout .participant-item, .portrait-layout .empty-player { width: 10em; height: 3.7em; }
.portrait-layout.no-players .players-heading { top: .4em; height: 2.9em; padding: .45em .35em; }
.portrait-layout.no-players .participant-list { min-height: 2.9em; }
.portrait-layout.no-players .empty-player { height: 2.9em; margin-bottom: .4em; padding-top: .75em; }

.portrait-layout.short-portrait .show-header { height: 54px; min-height: 54px; }
.portrait-layout.short-portrait .brand { left: 10px; top: 6px; }
.portrait-layout.short-portrait .brand-fact, .portrait-layout.short-portrait .brand-fiction { font-size: 15px; }
.portrait-layout.short-portrait .brand-or { font-size: 10px; }
.portrait-layout.short-portrait .header-stats { left: 10px; top: 31px; height: 16px; }
.portrait-layout.short-portrait .header-stats > span { margin-right: 4px; padding: 3px 6px; font-size: 9px; line-height: 1; }
.portrait-layout.short-portrait .show-qr-button { right: 10px; top: 9px; min-height: 0; padding: 4px 0 3px; font-size: 10px; }
.portrait-layout.short-portrait .statement-card { margin-top: .45em; padding: .8em .95em .7em; }
.portrait-layout.short-portrait .statement-card h1 { max-height: 3.15em; font-size: 17px; }
.portrait-layout.short-portrait .eyebrow { margin-bottom: .45em; font-size: 10px; }
.portrait-layout.short-portrait .attract-panel { margin-top: .5em; }
.portrait-layout.short-portrait .attract-panel p { margin-bottom: .55em; font-size: 10px; line-height: 1.25; }
.portrait-layout.short-portrait .attract-start-button { min-height: 34px; padding: 7px 11px; font-size: 10px; }
.portrait-layout.short-portrait .question-panel, .portrait-layout.short-portrait .reveal-panel { margin-top: .65em; }
.portrait-layout.short-portrait .vote-status { margin-bottom: .35em; font-size: 11px; }
.portrait-layout.short-portrait .vote-track { height: .45em; }
.portrait-layout.short-portrait .viewer-vote-controls { margin-top: .45em; }
.portrait-layout.short-portrait .viewer-vote-button { min-height: 3.75em; padding: .35em .55em; }
.portrait-layout.short-portrait .viewer-vote-button strong { font-size: 13px; }
.portrait-layout.short-portrait .viewer-vote-button span { font-size: 9px; }
.portrait-layout.short-portrait .explanation { max-height: 4.2em; font-size: 11px; line-height: 1.2; }
.portrait-layout.short-portrait .source-link { font-size: 10px; }
.portrait-layout.short-portrait .verdict-badge { margin-bottom: .35em; font-size: 11px; }
.portrait-layout.short-portrait .players-strip { display: block; }
.portrait-layout.short-portrait .players-heading { padding: .65em .55em; }
.portrait-layout.short-portrait .participant-list { top: .3em; bottom: .3em; }
.portrait-layout.short-portrait .participant-item { height: 2.9em; padding: .4em .55em; }
.portrait-layout.short-portrait .participant-main { font-size: 10px; }
.portrait-layout.short-portrait .participant-meta { font-size: 8px; }
.portrait-layout.short-portrait .finished-kicker { font-size: 8px; }
.portrait-layout.short-portrait .finished-panel p:last-child { font-size: 11px; }
.portrait-layout.short-portrait .phase-label { bottom: .55em; font-size: 9px; }

.lean-paint .show-shell:before, .lean-paint .show-shell:after { display: none; }
.lean-paint .show-header, .lean-paint .art-card, .lean-paint .statement-card, .lean-paint .players-strip, .lean-paint .rcRoomQrCodeLink, .lean-paint .qr-modal-card { box-shadow: none; }
.lean-paint .vote-fill, .lean-paint .statement-card, .lean-paint .art-card img { transition: none; }

@keyframes pop-in { 0% { transform: scale(.5); } 66% { transform: scale(1.1); } 100% { transform: scale(1); } }

@media (max-width: 1500px), (max-height: 850px) {
    .join-panel { -webkit-transform: scale(.72); transform: scale(.72); }
}
@media (max-width: 1000px), (max-height: 600px) {
    .join-panel { -webkit-transform: scale(.65); transform: scale(.65); }
    .tagline { display: none; }
    .header-stats { left: .9em; right: auto; }
    .landscape-layout .players-strip { height: auto; min-height: 56px; padding: 8px 3px 3px 76px; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
    .landscape-layout .players-heading { left: 8px; top: 8px; width: 60px; height: 40px; padding: 7px 6px; border-radius: 7px; }
    .landscape-layout .players-heading span { font-size: 8px; }
    .landscape-layout .players-heading strong { font-size: 18px; }
    .landscape-layout .participant-list { min-height: 40px; }
    .landscape-layout .participant-item, .landscape-layout .empty-player { height: 40px; padding: 6px 8px; }
    .landscape-layout .participant-item { width: 124px; min-width: 124px; }
    .landscape-layout .participant-main { padding-right: 40px; font-size: 11px; }
    .landscape-layout .participant-score { right: 8px; top: 6px; width: 34px; font-size: 10px; }
    .landscape-layout .participant-meta { margin-top: 5px; font-size: 8px; }
    .landscape-layout .empty-player { width: auto; min-width: 0; padding-top: 13px; font-size: 10px; }
}
@media (max-width: 500px) and (orientation: portrait) {
    .portrait-layout .content-pane { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .portrait-layout .show-header { height: 64px; min-height: 64px; border-radius: 14px; }
    .portrait-layout .brand { left: 14px; top: 9px; height: auto; }
    .portrait-layout .brand-fact, .portrait-layout .brand-fiction { font-size: 16px; }
    .portrait-layout .brand-or { font-size: 10px; }
    .portrait-layout .header-stats { left: 14px; right: auto; top: 39px; bottom: auto; height: 16px; }
    .portrait-layout .header-stats > span { margin: 0 5px 0 0; padding: 3px 7px; border-radius: 6px; font-size: 9px; line-height: 1; }
    .portrait-layout .show-qr-button { right: 14px; top: 13px; min-height: 0; padding: 5px 0 4px; font-size: 10px; }
    .portrait-layout .statement-card h1 { max-height: none; padding-bottom: 2px; overflow: visible; font-size: 20px; line-height: 1.1; }
    .portrait-layout.short-portrait .statement-card h1 { max-height: none; padding-bottom: 2px; overflow: visible; font-size: 17px; line-height: 1.12; }
    .portrait-layout .attract-panel p { font-size: 12px; }
    .portrait-layout .attract-start-button { min-height: 42px; font-size: 11px; }
    .portrait-layout.short-portrait .attract-panel p { font-size: 10px; }
    .portrait-layout.short-portrait .attract-start-button { min-height: 34px; font-size: 10px; }
    .portrait-layout .eyebrow { font-size: 10px; }
    .portrait-layout .vote-status { font-size: 11px; }
    .portrait-layout .viewer-vote-button strong { font-size: 14px; }
    .portrait-layout .viewer-vote-button span { font-size: 9px; }
    .portrait-layout .explanation, .portrait-layout.short-portrait .explanation { max-height: none; font-size: 13px; line-height: 1.28; }
    .portrait-layout .source-link { font-size: 10px; }
    .portrait-layout .players-strip { height: auto; min-height: 49px; -webkit-flex: 0 0 auto; flex: 0 0 auto; }
    .portrait-layout .participant-item { width: 118px; min-width: 118px; }
    .portrait-layout .participant-item { padding: 5px 8px 7px; }
    .portrait-layout .participant-main { padding-right: 40px; font-size: 11px; line-height: 1.15; }
    .portrait-layout .participant-score { right: 8px; top: 5px; width: 34px; font-size: 11px; line-height: 1.15; }
    .portrait-layout .participant-meta { margin-top: 3px; font-size: 9px; line-height: 1.15; }
    .portrait-layout .empty-player { font-size: 10px; }
    .portrait-layout .finished-kicker { font-size: 9px; }
    .portrait-layout .finished-panel p:last-child { font-size: 12px; }
    .portrait-layout .phase-label { font-size: 9px; }
}