* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background-color: #071e29; color: #f8f0dc; font-family: Arial, Helvetica, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }

.app-shell { display: -webkit-flex; display: flex; width: 100%; height: 100vh; min-height: 420px; overflow: hidden; background: linear-gradient(145deg, #102c3a, #071e29); }
.image-stage { position: relative; -webkit-flex: 0 0 100vh; flex: 0 0 100vh; width: 100vh; height: 100%; padding: 16px; background-color: transparent; }
.image-frame { position: relative; width: 100%; height: 100%; overflow: hidden; border: 4px solid #fff5d9; border-radius: 22px; background-color: #173c48; }
.image-frame img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; opacity: 1; transform-origin: 50% 50%; }
.image-frame #mysteryImage { transition: opacity 260ms ease; }
.image-frame #mysteryImage.is-changing { opacity: .08; }
.image-frame .transition-image { z-index: 2; opacity: 0; transition: none; }
.image-frame .transition-image.zoom-from-1-to-2 { opacity: 1; transform: scale(1.75); }
.image-frame .transition-image.zoom-from-1-to-3 { opacity: 1; transform: scale(3); }
.image-frame .transition-image.zoom-from-1-to-4 { opacity: 1; transform: scale(4.5); }
.image-frame .transition-image.zoom-from-1-to-5 { opacity: 1; transform: scale(6.25); }
.image-frame .transition-image.zoom-from-2-to-3 { opacity: 1; transform: scale(1.7143); }
.image-frame .transition-image.zoom-from-2-to-4 { opacity: 1; transform: scale(2.5714); }
.image-frame .transition-image.zoom-from-2-to-5 { opacity: 1; transform: scale(3.5714); }
.image-frame .transition-image.zoom-from-3-to-4 { opacity: 1; transform: scale(1.5); }
.image-frame .transition-image.zoom-from-3-to-5 { opacity: 1; transform: scale(2.0833); }
.image-frame .transition-image.zoom-from-4-to-5 { opacity: 1; transform: scale(1.3889); }
.image-frame .transition-image.is-zooming { opacity: 1; transform: scale(1); transition: transform 1050ms ease-in-out; }
.image-status { position: absolute; top: 32px; left: 32px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 9px 12px; border: 2px solid #0a5360; border-radius: 999px; background-color: #fff5d9; color: #0b3540; box-shadow: 0 5px 16px rgba(0,0,0,.28); }
.image-status span { margin-right: 10px; font-size: 14px; font-weight: bold; letter-spacing: .08em; text-transform: uppercase; }
.image-status strong { padding-left: 10px; border-left: 1px solid #98a99c; color: #d84550; font-size: 16px; }
.join-panel { position: absolute; z-index: 8; right: 32px; top: 32px; width: 166px; height: 220px; -webkit-transform: scale(.82); transform: scale(.82); -webkit-transform-origin: top right; transform-origin: top right; }
.join-panel > p { margin: 34px 0 0; color: #0b3540; font-size: 13px; text-align: center; }

.content-stage { display: -webkit-flex; display: flex; -webkit-flex: 1; flex: 1; -webkit-flex-direction: column; flex-direction: column; min-width: 0; height: 100%; padding: 16px 18px; overflow: hidden; }
.show-header { -webkit-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; min-height: 76px; padding: 10px 14px; border: 2px solid #28515d; border-radius: 18px; background-color: #0e3945; box-shadow: 0 7px 20px rgba(0,0,0,.22); }
.brand { -webkit-flex: 0 0 auto; flex: 0 0 auto; margin: 0 14px 0 0; padding: 0; border: 0; background: transparent; color: #fff5d9; font-weight: 900; letter-spacing: -.04em; line-height: .88; text-align: left; }
.brand span { display: block; font-size: 25px; }
.brand b { display: inline-block; margin-top: 3px; padding: 3px 8px; border-radius: 7px; background-color: #ef665d; color: #fff; font-size: 24px; letter-spacing: .04em; }
.header-copy { -webkit-flex: 1; flex: 1; min-width: 0; }
.header-copy p { margin: 0 0 4px; color: #f2c14e; font-size: 12px; font-weight: bold; letter-spacing: .13em; text-transform: uppercase; }
.header-copy h1 { overflow: hidden; margin: 0; color: #fff5d9; font-size: 18px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.header-timer { -webkit-flex: 0 0 70px; flex: 0 0 70px; margin-left: 12px; text-align: center; }
.header-timer span { display: block; color: #91c6c9; font-size: 11px; font-weight: bold; text-transform: uppercase; }
.header-timer strong { display: block; color: #f2c14e; font-size: 30px; line-height: 1; }
.show-qr-button { display: none; border: 0; background-color: #0a303a; color: #f2c14e; font-size: 14px; font-weight: bold; letter-spacing: .04em; text-align: center; text-transform: uppercase; }

.play-card { position: relative; -webkit-flex: 1; flex: 1; min-height: 0; margin-top: 12px; padding: 16px 18px; overflow: hidden; border: 2px solid #28515d; border-radius: 18px; background-color: #123f4a; box-shadow: 0 7px 20px rgba(0,0,0,.22); }
.question-heading { display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 10px; }
.category-chip { display: inline-block; padding: 5px 9px; border-radius: 999px; background-color: #f2c14e; color: #092b35; font-size: 11px; font-weight: bold; letter-spacing: .1em; text-transform: uppercase; }
.question-kicker { margin: 7px 0 0; color: #92c9ca; font-size: 13px; font-weight: bold; letter-spacing: .1em; text-transform: uppercase; }
.solved-pill { display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; margin-left: 10px; padding: 6px 10px; border-radius: 10px; background-color: #082c35; }
.solved-pill strong { color: #f2c14e; font-size: 22px; }
.solved-pill span { margin-left: 5px; color: #b5d6d3; font-size: 11px; font-weight: bold; text-transform: uppercase; }
.lobby-panel { max-width: 680px; padding-top: 3%; }
.lobby-panel h2, .finished-panel h2 { margin: 0 0 12px; color: #fff5d9; font-size: 38px; line-height: 1.06; }
.lobby-panel p, .finished-panel p { max-width: 620px; margin: 0 0 18px; color: #c8dfdc; font-size: 17px; line-height: 1.42; }
.lobby-panel small { display: block; margin-top: 10px; color: #a7c9c7; font-size: 13px; }
.primary-button { min-height: 50px; padding: 10px 20px; border: 0; border-radius: 12px; background-color: #ef665d; color: #fff; box-shadow: 0 5px 0 #a9333b; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.primary-button:active { transform: translateY(3px); box-shadow: 0 2px 0 #a9333b; }
.question-panel h2 { margin: 0; color: #fff5d9; font-size: 25px; }
.guess-rule { margin: 4px 0 10px; color: #a9cecb; font-size: 13px; line-height: 1.35; }
.answer-grid { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: -5px; }
.answer-button { position: relative; -webkit-flex: 0 0 calc(50% - 10px); flex: 0 0 calc(50% - 10px); width: calc(50% - 10px); min-height: 49px; margin: 5px; padding: 7px 11px 7px 42px; overflow: hidden; border: 2px solid #36707a; border-radius: 12px; background-color: #0b303a; color: #fff5d9; font-size: 15px; font-weight: bold; line-height: 1.16; text-align: left; }
.answer-button:hover, .answer-button:focus { border-color: #f2c14e; background-color: #154c57; outline: none; }
.answer-button:disabled { cursor: default; opacity: .58; }
.answer-button .answer-number { position: absolute; top: 50%; left: 9px; width: 25px; height: 25px; margin-top: -13px; padding-top: 4px; border-radius: 50%; background-color: #1d6470; color: #fff; text-align: center; }
.answer-button.is-wrong { border-color: #9c4750; color: #d7a6aa; }
.answer-button.is-wrong .answer-number { background-color: #9c4750; }
.answer-button.is-correct { border-color: #53c6a8; background-color: #155347; color: #fff; opacity: 1; }
.answer-button.is-correct .answer-number { background-color: #42ad90; }
.answer-button.is-selected { border-color: #f2c14e; background-color: #5a4a1c; opacity: 1; }
.local-feedback { min-height: 19px; margin: 9px 0 0; color: #f2c14e; font-size: 13px; font-weight: bold; }
.reveal-panel { padding: 4% 3% 0; text-align: center; }
.reveal-panel > p:first-child { margin: 0 0 5px; color: #f2c14e; font-size: 14px; font-weight: bold; letter-spacing: .14em; text-transform: uppercase; }
.reveal-panel h2 { margin: 0 0 12px; color: #fff5d9; font-size: 46px; line-height: 1.05; }
.reveal-panel #revealFact { max-width: 720px; margin: 0 auto; color: #c8dfdc; font-size: 18px; line-height: 1.45; }
.finished-panel { padding-top: 3%; }

.lower-rail { -webkit-flex: 0 0 210px; flex: 0 0 210px; display: -webkit-flex; display: flex; min-height: 0; margin-top: 12px; }
.score-card { min-width: 0; padding: 12px 14px; border: 2px solid #28515d; border-radius: 18px; background-color: #0e3945; box-shadow: 0 7px 20px rgba(0,0,0,.22); }
.score-card { -webkit-flex: 1; flex: 1; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; overflow: hidden; }
.rail-heading { -webkit-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 8px; }
.rail-heading span { display: block; color: #f2c14e; font-size: 10px; font-weight: bold; letter-spacing: .12em; text-transform: uppercase; }
.rail-heading h2 { margin: 1px 0 0; color: #fff5d9; font-size: 17px; }
.rail-heading > strong { color: #9fc9c7; font-size: 12px; }
.network-dot { width: 12px; height: 12px; border-radius: 50%; background-color: #a33b44; }
.network-dot.is-online { background-color: #4fc7a6; box-shadow: 0 0 10px #4fc7a6; }
.score-list { -webkit-flex: 1; flex: 1; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: flex-start; align-content: flex-start; min-height: 0; margin: -4px; padding: 0; overflow-x: hidden; overflow-y: auto; list-style: none; }
.score-list li { position: relative; -webkit-flex: 1 1 150px; flex: 1 1 150px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; min-width: 145px; max-width: 240px; height: 64px; margin: 4px; padding: 7px 9px 7px 39px; border-radius: 11px; background-color: #173f49; }
.score-rank { position: absolute; top: 50%; left: 11px; width: 22px; margin-top: -12px; color: #f2c14e; font-size: 20px; font-weight: bold; line-height: 24px; text-align: center; }
.score-name { display: block; width: 100%; max-height: 2.3em; overflow: hidden; color: #fff; font-size: 14px; font-weight: bold; line-height: 1.15; white-space: normal; word-wrap: break-word; }
.score-points { display: block; margin-top: 3px; color: #f2c14e; font-size: 13px; line-height: 1; white-space: nowrap; }
.empty-score { margin: 24px 0 0; color: #8db6b5; font-size: 14px; }
.rcRoomQrCodeLink, .rcRoomQrCodeLink * { box-sizing: content-box; }
.rcRoomQrCodeLink { display: block; width: 150px; overflow: hidden; margin: 0 auto; border: 8px solid #fff; border-radius: 14px; background-color: #fff; color: #fff; box-shadow: 0 0 32px #000; text-align: center; text-decoration: none; }
.rcTechLabel { margin: 0 0 8px; padding: 4px; border-radius: 6px 6px 0 0; background-color: #000; color: #fff; font-family: monospace; font-size: 13px; font-weight: bold; letter-spacing: .2em; }
.rcRoomQrCode { display: block; 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; padding: 4px; border-radius: 0 0 6px 6px; background-color: #000; color: #fff; font-family: monospace; font-size: 16px; letter-spacing: .2em; white-space: nowrap; }
.qr-modal { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; left: 0; }
.qr-modal-backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(2,15,21,.86); }
.qr-modal-card { position: absolute; top: 50%; left: 50%; width: 330px; max-width: 90%; padding: 24px; border: 3px solid #f2c14e; border-radius: 20px; background-color: #fff5d9; color: #0b3540; text-align: center; transform: translate(-50%, -50%); }
.qr-modal-card h2 { margin: 4px 0 5px; font-size: 30px; }
.qr-modal-card > p { margin: 0 0 14px; }
.qr-modal-close { position: absolute; top: 7px; right: 10px; border: 0; background: transparent; color: #0b3540; font-size: 30px; }
.qr-modal-panel { width: 186px; height: 260px; margin: 14px auto 0; }
.qr-modal-panel > .rcRoomQrCodeLink { -webkit-transform: scale(1.12); transform: scale(1.12); -webkit-transform-origin: top center; transform-origin: top center; }

.lean-paint .app-shell, .lean-paint body { background: #071e29; }
.lean-paint .show-header, .lean-paint .play-card, .lean-paint .score-card, .lean-paint .image-status, .lean-paint .qr-modal-card, .lean-paint .rcRoomQrCodeLink { box-shadow: none; }
.lean-paint .image-frame img { transition: none; }
.lean-paint .image-frame .transition-image { display: none; }
.lean-paint .network-dot.is-online { box-shadow: none; }

@media (max-width: 1220px), (max-height: 680px) {
    .content-stage { padding-top: 10px; padding-bottom: 10px; }
    .show-header { min-height: 66px; padding-top: 7px; padding-bottom: 7px; }
    .brand span, .brand b { font-size: 20px; }
    .play-card { margin-top: 8px; padding: 11px 13px; }
    .lower-rail { -webkit-flex-basis: 140px; flex-basis: 140px; margin-top: 8px; }
    .score-card { padding: 9px 11px; }
    .score-list li { height: 57px; }
    .answer-button { min-height: 43px; font-size: 13px; }
    .guess-rule { margin-bottom: 5px; }
    .lobby-panel { padding-top: 1%; }
    .lobby-panel h2, .finished-panel h2 { margin-bottom: 7px; font-size: 30px; }
    .lobby-panel p, .finished-panel p { margin-bottom: 10px; font-size: 14px; line-height: 1.3; }
    .lobby-panel small { margin-top: 7px; }
    .primary-button { min-height: 42px; padding-top: 7px; padding-bottom: 7px; }
    .score-card .rail-heading > strong { display: none; }
    .score-card .score-list li { -webkit-flex-basis: 145px; flex-basis: 145px; min-width: 130px; max-width: none; padding-left: 35px; }
    .score-card .score-rank { left: 8px; }
    .score-card .score-name { font-size: 12px; }
    .score-card .score-points { margin-top: 2px; font-size: 12px; }
    .join-panel { -webkit-transform: scale(.65); transform: scale(.65); }
}

@media (orientation: portrait) {
    html, body { height: auto; min-height: 100%; }
    body { overflow-x: hidden; overflow-y: auto; }
    .app-shell { display: block; height: auto; min-height: 100%; overflow: visible; }
    .image-stage { width: 100vw; height: 100vw; padding: 10px; }
    .image-frame { border-width: 3px; border-radius: 18px; }
    .image-status { top: 22px; left: 22px; padding: 7px 10px; }
    .image-status span { font-size: 12px; }
    .image-status strong { font-size: 14px; }
    .content-stage { display: block; width: 100%; height: auto; padding: 0 10px 12px; overflow: visible; }
    .show-header { min-height: 72px; margin-top: 0; border-radius: 15px; }
    .brand { margin-right: 9px; }
    .brand span, .brand b { font-size: 18px; }
    .header-copy p { font-size: 10px; }
    .header-copy h1 { font-size: 14px; }
    .header-timer { -webkit-flex-basis: 48px; flex-basis: 48px; margin-left: 5px; }
    .header-timer span { font-size: 9px; }
    .header-timer strong { font-size: 24px; }
    .show-qr-button { display: block; width: calc(100% + 28px); margin: 8px -14px -12px; padding: 7px 8px; border-top: 1px solid #28515d; }
    .play-card { min-height: 430px; overflow: visible; border-radius: 15px; }
    .lobby-panel { padding: 14px 2px 20px; }
    .lobby-panel h2, .finished-panel h2 { font-size: 31px; }
    .lobby-panel p, .finished-panel p { font-size: 16px; }
    .answer-button { min-height: 58px; padding-top: 9px; padding-bottom: 9px; font-size: 15px; }
    .reveal-panel { padding: 24px 2px; }
    .reveal-panel h2 { font-size: 36px; }
    .reveal-panel #revealFact { font-size: 17px; }
    .lower-rail { display: block; min-height: 0; margin-top: 10px; }
    .join-panel { display: none; }
    .score-card { min-height: 130px; }
    .score-list { overflow-y: visible; }
}

@media (orientation: portrait) and (max-width: 390px) {
    .image-stage { padding: 7px; }
    .content-stage { padding-left: 7px; padding-right: 7px; }
    .show-header { padding-left: 9px; padding-right: 8px; }
    .header-copy { display: none; }
    .brand { -webkit-flex: 1; flex: 1; }
    .play-card { padding-left: 10px; padding-right: 10px; }
    .answer-button { margin: 4px; -webkit-flex-basis: calc(50% - 8px); flex-basis: calc(50% - 8px); width: calc(50% - 8px); padding-left: 38px; font-size: 14px; }
    .answer-grid { margin: -4px; }
    .question-panel h2 { font-size: 22px; }
}

@media (orientation: portrait) and (max-width: 600px) {
    html, body { height: 100%; min-height: 100%; overflow: hidden; }
    .app-shell { height: 100vh; min-height: 0; overflow: hidden; }
    .image-stage { margin: 0 auto; padding: 7px; }
    .content-stage { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; width: 100%; height: 65vh; padding: 0 7px 7px; overflow: hidden; }
    .show-header { min-height: 56px; padding: 5px 9px; }
    .brand { margin-right: 7px; }
    .brand span, .brand b { font-size: 16px; }
    .header-copy p { display: none; }
    .header-copy h1 { font-size: 13px; }
    .header-timer { -webkit-flex-basis: 44px; flex-basis: 44px; }
    .header-timer strong { font-size: 22px; }
    .show-qr-button { width: calc(100% + 16px); margin: 4px -8px -5px; padding: 4px 8px 5px; font-size: 11px; line-height: 14px; }
    .play-card { -webkit-flex: 0 0 auto; flex: 0 0 auto; min-height: 0; margin-top: 5px; padding: 7px 10px; overflow: hidden; }
    .question-heading { margin-bottom: 3px; }
    .question-kicker { display: none; }
    .lobby-panel { padding: 6px 2px 8px; }
    .question-panel h2 { font-size: 21px; line-height: 1.15; }
    .guess-rule { margin: 2px 0 4px; font-size: 11px; line-height: 1.25; }
    .answer-grid { margin: -3px; }
    .answer-button { -webkit-flex-basis: calc(50% - 6px); flex-basis: calc(50% - 6px); width: calc(50% - 6px); min-height: 46px; margin: 3px; padding: 5px 7px 5px 38px; font-size: 12px; }
    .answer-button .answer-number { left: 7px; width: 24px; height: 24px; margin-top: -12px; padding-top: 4px; }
    .local-feedback { min-height: 15px; margin-top: 4px; font-size: 11px; }
    .lower-rail { -webkit-flex: 0 0 auto; flex: 0 0 auto; display: block; min-height: 0; margin-top: 5px; }
    .score-card { min-height: 0; padding: 5px 8px; }
    .rail-heading { margin-bottom: 2px; }
    .rail-heading span { display: none; }
    .rail-heading h2 { font-size: 14px; }
    .score-list { -webkit-flex-wrap: nowrap; flex-wrap: nowrap; margin: -3px; overflow-x: auto; overflow-y: hidden; }
    .score-list li { -webkit-flex: 1 0 calc(50% - 6px); flex: 1 0 calc(50% - 6px); min-width: calc(50% - 6px); max-width: none; height: 39px; margin: 3px; padding: 3px 7px 3px 31px; }
    .score-rank { left: 6px; width: 19px; margin-top: -10px; font-size: 16px; line-height: 20px; }
    .score-name { max-height: 1.15em; font-size: 11px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
    .score-points { margin-top: 1px; font-size: 10px; }
}

@media (orientation: portrait) and (max-width: 600px) and (max-height: 760px) {
    .show-header { min-height: 52px; }
    .lobby-panel { padding-top: 2px; padding-bottom: 0; }
    .lobby-panel small { display: none; }
    .answer-button { min-height: 40px; padding-top: 3px; padding-bottom: 3px; }
    .lower-rail { margin-top: 3px; }
    .score-card { padding-top: 3px; padding-bottom: 3px; }
    .score-list li { height: 35px; }
    .show-qr-button { margin-top: 3px; margin-bottom: -3px; padding-top: 3px; padding-bottom: 3px; line-height: 14px; }
}

@media (orientation: landscape) and (max-height: 600px) {
    .image-stage { padding: 8px; }
    .content-stage { padding: 7px 8px; }
    .show-header { min-height: 58px; padding: 5px 10px; }
    .brand { margin-right: 10px; }
    .brand span, .brand b { font-size: 18px; }
    .header-copy h1 { font-size: 15px; }
    .header-timer strong { font-size: 26px; }
    .header-copy p { display: none; }
    .play-card { margin-top: 6px; padding: 7px 10px; }
    .question-heading { margin-bottom: 3px; }
    .question-kicker { display: none; }
    .question-panel h2 { font-size: 21px; line-height: 1.15; }
    .guess-rule { margin: 2px 0 4px; font-size: 11px; line-height: 1.25; }
    .answer-grid { margin: -3px; }
    .answer-button { -webkit-flex-basis: calc(50% - 6px); flex-basis: calc(50% - 6px); width: calc(50% - 6px); min-height: 38px; margin: 3px; padding: 4px 8px 4px 38px; font-size: 12px; }
    .answer-button .answer-number { left: 7px; width: 24px; height: 24px; margin-top: -12px; padding-top: 4px; }
    .local-feedback { min-height: 15px; margin-top: 4px; font-size: 11px; }
    .lower-rail { -webkit-flex-basis: 132px; flex-basis: 132px; margin-top: 6px; }
    .score-card { padding: 6px 9px; }
    .rail-heading { margin-bottom: 3px; }
    .rail-heading h2 { font-size: 15px; }
    .score-list { margin: -3px; }
    .score-list li { height: 37px; margin: 3px; padding: 3px 7px 3px 32px; }
    .score-rank { left: 7px; width: 19px; margin-top: -10px; font-size: 16px; line-height: 20px; }
    .score-name { max-height: 1.15em; overflow: hidden; font-size: 11px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
    .score-points { margin-top: 1px; font-size: 10px; }
}