* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background-color: #081d26; 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, #10333f, #081d26); }

/* ------------------------------------------------------------- play stage */

.play-stage { -webkit-flex: 0 0 46vh; flex: 0 0 46vh; width: 46vh; height: 100%; padding: 16px 8px 16px 16px; }
.stage-card { position: relative; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; width: 100%; height: 100%; padding: 14px; overflow: hidden; border: 2px solid #28515d; border-radius: 18px; background-color: #0e3945; box-shadow: 0 7px 20px rgba(0,0,0,.22); }
.stage-head { -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: 10px; }
.stage-kicker { display: block; color: #f2c14e; font-size: 11px; font-weight: bold; letter-spacing: .13em; text-transform: uppercase; }
.stage-head h2 { max-width: 15ch; margin: 2px 0 0; overflow: hidden; color: #fff5d9; font-size: 20px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.stage-score { -webkit-flex: 0 0 auto; flex: 0 0 auto; margin-left: 10px; padding: 5px 12px; border-radius: 10px; background-color: #082c35; color: #f2c14e; font-size: 22px; }

.board { -webkit-flex: 1 1 auto; flex: 1 1 auto; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; min-height: 0; }
.board-row { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; }
.tile { display: block; margin: 3px; border: 2px solid #2f5a66; border-radius: 8px; background-color: #0b2f39; color: #fff5d9; font-weight: 900; text-align: center; text-transform: uppercase; }
.tile.is-filled { border-color: #52818c; }
.tile.is-correct { border-color: #4f9d5c; background-color: #4f9d5c; color: #fff; }
.tile.is-present { border-color: #cfa93f; background-color: #cfa93f; color: #14262c; }
.tile.is-absent { border-color: #294c56; background-color: #294c56; color: #9db6bc; }
.board-row.is-invalid { -webkit-animation: shake 380ms ease; animation: shake 380ms ease; }
@-webkit-keyframes shake { 0%,100% { -webkit-transform: translateX(0); } 20% { -webkit-transform: translateX(-8px); } 40% { -webkit-transform: translateX(8px); } 60% { -webkit-transform: translateX(-5px); } 80% { -webkit-transform: translateX(5px); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }

.board-message { -webkit-flex: 0 0 auto; flex: 0 0 auto; min-height: 22px; margin: 6px 0; color: #f2c14e; font-size: 14px; font-weight: bold; text-align: center; }
.keyboard { -webkit-flex: 0 0 auto; flex: 0 0 auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.key-row { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; }
.key { margin: 2px; padding: 0; border: 0; border-radius: 6px; background-color: #2c5762; color: #fff5d9; font-weight: bold; text-align: center; text-transform: uppercase; -webkit-tap-highlight-color: rgba(0,0,0,0); -ms-touch-action: manipulation; touch-action: manipulation; }
.key:active { background-color: #3f7583; }
.key:hover { background-color: #3a6d7a; }
.key.is-correct { background-color: #4f9d5c; color: #fff; }
.key.is-present { background-color: #cfa93f; color: #14262c; }
.key.is-absent { background-color: #1a3b45; color: #6e8e97; }
.key:disabled { cursor: default; opacity: .5; }
/* Enter and delete are set apart from letter keys by shape and by color. */
.key.is-action { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; border: 2px solid #36707a; background-color: #0a303a; color: #f2c14e; }
.key.is-action svg { display: block; width: 1.15em; height: 1.15em; }
.key.is-action:hover { border-color: #f2c14e; background-color: #0d3944; }
.key.is-action:active { background-color: #123c48; }

.stage-cover { position: absolute; z-index: 4; top: 0; right: 0; bottom: 0; left: 0; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; padding: 20px; overflow-x: hidden; overflow-y: auto; background: linear-gradient(165deg, #14495a, #0b2f3a); text-align: center; }
.cover-inner { -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 100%; max-width: 358px; margin: 0 auto; padding: 24px 20px 22px; border-radius: 18px; background-color: rgba(6,32,41,.5); }
.stage-cover h3 { margin: 3px 0 8px; color: #fff5d9; font-size: 28px; letter-spacing: -.01em; line-height: 1.1; }
.cover-copy { margin: 0 0 14px; color: #a9cecb; font-size: 14px; line-height: 1.4; }
.stage-cover input { width: 100%; min-height: 50px; margin-bottom: 8px; padding: 10px 12px; border: 2px solid #4c7d82; border-radius: 12px; background-color: #fffaf0; color: #102c3a; font-size: 18px; text-align: center; }
.stage-cover .primary-button { width: 100%; }
.cover-divider { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 18px 0 14px; }
.cover-divider:before, .cover-divider:after { content: ""; -webkit-flex: 1; flex: 1; height: 1px; background-color: #2e5f6d; }
.cover-divider span { margin: 0 12px; color: #7fa8ab; font-size: 11px; font-weight: bold; letter-spacing: .2em; text-transform: uppercase; }
.cover-qr { -webkit-flex: 0 0 auto; flex: 0 0 auto; height: 236px; }
.cover-qr > p { margin: 0; color: #9fc9c7; font-size: 13px; }
.cover-scan { margin: 10px 0 0; color: #8fb6b8; font-size: 12px; line-height: 1.35; }

/* ----------------------------------------------------------- content stage */

.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 16px 16px 8px; 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: .9; text-align: left; }
.brand span { display: block; font-size: 26px; }
.brand b { display: inline-block; margin-top: 3px; padding: 3px 10px; border-radius: 7px; background-color: #4f9d5c; 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: 19px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.header-timer { -webkit-flex: 0 0 88px; flex: 0 0 88px; 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: 29px; line-height: 1; }
.network-dot { -webkit-flex: 0 0 12px; flex: 0 0 12px; width: 12px; height: 12px; margin-left: 12px; border-radius: 50%; background-color: #a33b44; }
.network-dot.is-online { background-color: #4fc7a6; box-shadow: 0 0 10px #4fc7a6; }

.play-card { position: relative; -webkit-flex: 1; flex: 1; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; min-height: 0; margin-top: 12px; padding: 14px 16px; overflow: hidden; border: 2px solid #28515d; border-radius: 18px; background-color: #123f4a; box-shadow: 0 7px 20px rgba(0,0,0,.22); }
.card-heading { -webkit-flex: 0 0 auto; flex: 0 0 auto; 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; }
.card-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, .finished-panel { -webkit-flex: 1; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; }
.lobby-panel { max-width: 760px; padding-top: 2%; }
.lobby-panel h2, .finished-panel h2 { margin: 0 0 12px; color: #fff5d9; font-size: 36px; line-height: 1.06; }
.lobby-panel p, .finished-panel p { max-width: 700px; margin: 0 0 16px; color: #c8dfdc; font-size: 17px; line-height: 1.42; }
.lobby-note { padding: 10px 12px; border-left: 4px solid #f2c14e; border-radius: 0 8px 8px 0; background-color: #0a303a; color: #fff5d9; font-size: 15px !important; line-height: 1.38 !important; }
.lobby-panel small { display: block; margin-top: 10px; color: #a7c9c7; font-size: 13px; }
.primary-button { min-height: 50px; padding: 10px 22px; 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 { -webkit-transform: translateY(3px); transform: translateY(3px); box-shadow: 0 2px 0 #a9333b; }
.primary-button:disabled { cursor: default; opacity: .55; }
.finished-panel { padding-top: 2%; }

/* -------------------------------------------------------------- race panel */

.race-panel { -webkit-flex: 1; flex: 1; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; min-height: 0; }
.reveal-banner { -webkit-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-bottom: 10px; padding: 8px 14px; border: 2px solid #f2c14e; border-radius: 14px; background-color: #0a303a; }
.reveal-banner > div { -webkit-flex: 0 0 auto; flex: 0 0 auto; margin-right: 16px; }
.reveal-banner span { display: block; color: #92c9ca; font-size: 11px; font-weight: bold; letter-spacing: .12em; text-transform: uppercase; }
.reveal-banner strong { display: block; color: #fff5d9; font-size: 30px; letter-spacing: .14em; text-transform: uppercase; }
.reveal-banner p { -webkit-flex: 1; flex: 1; min-width: 0; margin: 0; color: #f2c14e; font-size: 17px; font-weight: bold; line-height: 1.28; }

.race-grid { -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: -5px; overflow-x: hidden; overflow-y: auto; }
.race-player { -webkit-flex: 0 0 auto; flex: 0 0 auto; margin: 5px; padding: 8px 10px; border: 2px solid #205563; border-radius: 14px; background-color: #0d3743; }
.race-player.is-solved { border-color: #4f9d5c; background-color: #12463c; }
.race-player.is-out { border-color: #8a4249; }
.race-player.is-offline { opacity: .45; }
.race-top { display: -webkit-flex; display: flex; -webkit-align-items: baseline; align-items: baseline; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 6px; }
.race-name { max-width: 12ch; overflow: hidden; color: #fff5d9; font-size: 14px; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; }
.race-state { margin-left: 8px; color: #92c9ca; font-size: 11px; font-weight: bold; text-transform: uppercase; white-space: nowrap; }
.race-player.is-solved .race-state { color: #7fdc8e; }
.race-player.is-out .race-state { color: #e2929a; }
.mini-board { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
.mini-row { display: -webkit-flex; display: flex; }
.mini-tile { display: block; margin: 1px; border-radius: 3px; background-color: #17414d; }
.mini-tile.is-pending { background-color: #205563; }
.mini-tile.is-correct { background-color: #4f9d5c; }
.mini-tile.is-present { background-color: #cfa93f; }
.mini-tile.is-absent { background-color: #294c56; }

/* -------------------------------------------------------------- lower rail */

.lower-rail { -webkit-flex: 0 0 200px; flex: 0 0 200px; display: -webkit-flex; display: flex; min-height: 0; margin-top: 12px; }
.score-card { -webkit-flex: 1; flex: 1; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; min-width: 0; padding: 12px 14px; overflow: hidden; border: 2px solid #28515d; border-radius: 18px; background-color: #0e3945; box-shadow: 0 7px 20px rgba(0,0,0,.22); }
.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; }
.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 160px; flex: 1 1 160px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; min-width: 155px; max-width: 250px; height: 62px; margin: 4px; padding: 6px 9px 6px 40px; border-radius: 11px; background-color: #173f49; }
.score-list li.is-leader { background-color: #1d5546; }
.score-list li.is-offline { opacity: .5; }
.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%; overflow: hidden; color: #fff; font-size: 14px; font-weight: bold; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.score-detail { display: block; margin-top: 3px; color: #9fc9c7; font-size: 11px; font-weight: bold; text-transform: uppercase; }
.score-points { position: absolute; top: 50%; right: 10px; margin-top: -13px; color: #f2c14e; font-size: 22px; font-weight: bold; }
.empty-score { -webkit-flex: 1; flex: 1; margin: 0; color: #7fa8ab; font-size: 14px; }
.rail-buttons { -webkit-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-top: 8px; }
.rail-button { min-height: 38px; margin-right: 8px; padding: 6px 14px; border: 2px solid #36707a; border-radius: 10px; background-color: #0a303a; color: #f2c14e; font-size: 13px; font-weight: bold; letter-spacing: .04em; text-transform: uppercase; }
.rail-button:hover { border-color: #f2c14e; }
.rail-button:disabled { cursor: default; opacity: .5; }

/* ------------------------------------------------------------------ modals */

.modal { position: fixed; z-index: 40; top: 0; right: 0; bottom: 0; left: 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.modal-backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(4,18,24,.82); }
.modal-card { position: relative; width: 92%; max-width: 420px; padding: 24px; border: 2px solid #28515d; border-radius: 20px; background-color: #0e3945; box-shadow: 0 16px 44px rgba(0,0,0,.5); text-align: center; }
.modal-card h2 { margin: 4px 0 10px; color: #fff5d9; font-size: 26px; }
.modal-card p { margin: 0 0 12px; color: #c1dbd8; font-size: 15px; line-height: 1.4; }
.modal-card .card-kicker { margin: 0; }
.modal-close { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background-color: #173f49; color: #fff5d9; font-size: 24px; line-height: 34px; }
.modal-qr { min-height: 210px; margin-top: 10px; }
.modal-card .primary-button { width: 100%; margin-top: 12px; }
.modal-divider { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 16px 0 12px; }
.modal-divider:before, .modal-divider:after { content: ""; -webkit-flex: 1; flex: 1; height: 1px; background-color: #2e5f6d; }
.modal-divider span { margin: 0 12px; color: #7fa8ab; font-size: 11px; font-weight: bold; letter-spacing: .2em; text-transform: uppercase; }
.modal-card .secondary-button { width: 100%; min-height: 50px; padding: 8px 14px; border: 2px solid #4f9d5c; border-radius: 12px; background-color: #0d3743; color: #8fdf9c; font-weight: bold; letter-spacing: .05em; text-transform: uppercase; }
.modal-card .secondary-button:active { background-color: #124c3f; }
.modal-message { min-height: 20px; margin: 10px 0 0 !important; color: #7fdc8e !important; font-size: 13px !important; font-weight: bold; }

/* ------------------------------------------------------------- join qr panel */

.rcRoomQrCodeLink, .rcRoomQrCodeLink * { box-sizing: content-box; }
.rcRoomQrCodeLink { display: block; width: 150px; margin-left: auto; margin-right: auto; border: solid 8px #fff; border-radius: 8px; color: #fff; background-color: #fff; box-shadow: 0 0 0 1px #fff; text-align: center; transition: opacity 1s ease; text-decoration: none; -webkit-transform-origin: top center; transform-origin: top center; }
.rcTechLabel { margin: 0 0 8px 0; padding: 4px; border-radius: 8px 8px 0 0; background-color: #000; color: #fff; font-family: monospace; font-size: 13px; font-weight: bold; letter-spacing: 0.2em; }
.rcRoomQrCode { width: 150px; height: 150px; overflow: hidden; }
.rcRoomQrCode img, .rcRoomQrCode canvas { display: block; width: 150px !important; height: 150px !important; }
.rcRoomId { margin: 8px 0 0 0; padding: 4px; overflow: hidden; white-space: nowrap; border-radius: 0 0 8px 8px; background-color: #000; color: #fff; font-family: monospace; font-size: 16px; letter-spacing: 0.25em; }
.cover-qr .rcRoomQrCodeLink { -webkit-transform: scale(1); transform: scale(1); }

/* --------------------------------------------------------------- responsive */

@media (max-height: 860px) {
    .lower-rail { -webkit-flex-basis: 178px; flex-basis: 178px; }
    .lobby-panel h2, .finished-panel h2 { font-size: 30px; }
    .lobby-panel p, .finished-panel p { font-size: 15px; }
}

@media (max-height: 620px) {
    .lower-rail { -webkit-flex-basis: 156px; flex-basis: 156px; }
    .rail-heading { margin-bottom: 5px; }
    .rail-heading h2 { font-size: 15px; }
    .score-list li { height: 46px; min-width: 140px; padding: 4px 8px 4px 32px; }
    .score-rank { left: 8px; font-size: 16px; }
    .score-name { font-size: 13px; }
    .score-detail { margin-top: 2px; font-size: 10px; }
    .score-points { font-size: 17px; }
    .rail-buttons { margin-top: 6px; }
    .rail-button { min-height: 30px; padding: 4px 10px; font-size: 12px; }
    .show-header { min-height: 60px; }
    .brand span { font-size: 20px; }
    .brand b { font-size: 19px; }
    .header-timer strong { font-size: 24px; }
    .lobby-panel h2, .finished-panel h2 { margin-bottom: 8px; font-size: 23px; }
    .lobby-panel p, .finished-panel p { margin-bottom: 8px; font-size: 13px; line-height: 1.35; }
    .lobby-note { padding: 7px 9px; font-size: 12px !important; }
    .lobby-panel small { display: none; }
    .primary-button { min-height: 42px; padding: 8px 16px; font-size: 14px; }
    .card-heading { margin-bottom: 6px; }
    .reveal-banner strong { font-size: 24px; }
}

@media (max-height: 860px) {
    .cover-qr { height: 200px; }
    .cover-qr .rcRoomQrCodeLink { -webkit-transform: scale(.85); transform: scale(.85); }
}

@media (max-height: 620px), (max-width: 620px) {
    .cover-inner { padding: 16px 14px 14px; }
    .stage-cover h3 { margin-bottom: 10px; font-size: 21px; }
    .cover-copy { display: none; }
    .stage-cover input { min-height: 44px; margin-bottom: 8px; font-size: 16px; }
    .cover-divider { margin: 12px 0 10px; }
    .cover-qr { height: 156px; }
    .cover-qr .rcRoomQrCodeLink { -webkit-transform: scale(.64); transform: scale(.64); }
    .cover-scan { margin-top: 8px; font-size: 11px; }
}

@media (orientation: portrait) {
    .app-shell { -webkit-flex-direction: column; flex-direction: column; }
    .play-stage { -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 100%; padding: 12px 12px 6px; }
    .content-stage { padding: 6px 12px 12px; }
    .lower-rail { -webkit-flex-basis: 190px; flex-basis: 190px; }
    .header-copy h1 { font-size: 16px; }
}

@media (max-width: 620px) {
    .lower-rail { -webkit-flex-basis: 150px; flex-basis: 150px; }
    .score-list li { height: 46px; min-width: 140px; padding: 4px 8px 4px 32px; }
    .score-rank { left: 8px; font-size: 16px; }
    .score-name { font-size: 13px; }
    .score-detail { margin-top: 2px; font-size: 10px; }
    .score-points { font-size: 17px; }
    .lobby-panel h2, .finished-panel h2 { margin-bottom: 6px; font-size: 22px; }
    .lobby-panel > p, .lobby-panel small { display: none; }
    .play-card { padding: 10px 12px; }
    .card-heading { margin-bottom: 4px; }
    .card-kicker { margin-top: 4px; }
    .primary-button { min-height: 42px; padding: 8px 16px; font-size: 14px; }
}

/* ------------------------------------------------------------------- phone */

/*
 * On a phone the viewer is a player's own device rather than a shared screen.
 * The page scrolls, the header leads, the board and keyboard take the room they
 * need at touch size, and the QR moves behind a button.
 */
@media (max-width: 620px) {
    html, body { height: auto; }
    body { overflow-x: hidden; overflow-y: auto; }
    .app-shell { height: auto !important; min-height: 100vh; padding-bottom: 8px; background: linear-gradient(180deg, #10333f, #081d26); }
    .content-stage { display: contents; }
    .show-header { -webkit-order: 1; order: 1; min-height: 54px; margin: 10px 10px 0; padding: 8px 12px; }
    .play-stage { -webkit-order: 2; order: 2; width: 100% !important; height: auto !important; padding: 10px 10px 0; }
    .play-card { -webkit-order: 3; order: 3; -webkit-flex: 0 0 auto; flex: 0 0 auto; min-height: 0; margin: 10px 10px 0; overflow: visible; }
    .lower-rail { -webkit-order: 4; order: 4; -webkit-flex: 0 0 auto; flex: 0 0 auto; height: auto; margin: 10px 10px 0; }

    .brand { margin-right: 10px; }
    .brand span { font-size: 17px; }
    .brand b { margin-top: 2px; padding: 2px 7px; font-size: 16px; }
    .header-copy p { display: none; }
    .header-copy h1 { font-size: 15px; }
    .header-timer { -webkit-flex-basis: 72px; flex-basis: 72px; margin-left: 8px; }
    .header-timer strong { font-size: 22px; }
    .network-dot { margin-left: 8px; }

    .stage-card { height: auto; padding: 12px 10px; }
    .stage-card.is-joining .stage-head,
    .stage-card.is-joining .board,
    .stage-card.is-joining .board-message,
    .stage-card.is-joining .keyboard { display: none; }
    .stage-cover { position: static; padding: 4px 2px; background: transparent; }
    .cover-inner { max-width: 100%; padding: 18px 16px; }
    .cover-qr, .cover-scan, .cover-divider { display: none; }
    .board { -webkit-flex: 0 0 auto; flex: 0 0 auto; }
    .board-message { margin: 8px 0; }

    .play-card { padding: 12px; }
    .race-panel { -webkit-flex: 0 0 auto; flex: 0 0 auto; }
    .race-grid { -webkit-flex: 0 0 auto; flex: 0 0 auto; overflow: visible; }
    .reveal-banner { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
    .reveal-banner > div { margin-bottom: 4px; }
    .reveal-banner strong { font-size: 26px; }
    .reveal-banner p { -webkit-flex-basis: 100%; flex-basis: 100%; font-size: 15px; }
    .score-card { height: auto; }
    .score-list { -webkit-flex: 0 0 auto; flex: 0 0 auto; overflow: visible; }
    .score-list li { -webkit-flex: 1 1 100%; flex: 1 1 100%; max-width: none; height: 52px; }
    .empty-score { -webkit-flex: 0 0 auto; flex: 0 0 auto; }
    .modal-card { max-width: 320px; padding: 20px; }
}

/* --------------------------------------------------------------- lean paint */

.lean-paint body, body.lean-paint { background: #081d26; }
.lean-paint .app-shell { background: #10333f; }
.lean-paint .stage-card, .lean-paint .show-header, .lean-paint .play-card, .lean-paint .score-card, .lean-paint .modal-card { box-shadow: none; }
.lean-paint .network-dot.is-online { box-shadow: none; }
.lean-paint .board-row.is-invalid { -webkit-animation: none; animation: none; }
.lean-paint .primary-button { box-shadow: none; }
.lean-paint .modal-backdrop { background-color: #041218; }