.lss-activity-shell-wrap,
.lss-activity-shell-wrap * {
box-sizing: border-box;
}
.lss-activity-shell-wrap {
width: 100%;
max-width: 100%;
color: #fff;
font-family: inherit;
}
.lss-activity-shell__launcher,
.lss-activity-shell__action {
min-height: 44px;
border: 2px solid #fff;
border-radius: 8px;
background: #082c86;
color: #fff;
font-family: inherit;
font-size: 15px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
}
.lss-activity-shell__launcher {
padding: 10px 18px;
}
.lss-activity-shell__launcher:hover,
.lss-activity-shell__launcher:focus-visible,
.lss-activity-shell__action:hover,
.lss-activity-shell__action:focus-visible {
background: #0258bb;
color: #fff;
}
.lss-activity-shell-dialog {
width: min(1180px, calc(100% - 32px));
max-width: 1180px;
max-height: calc(100vh - 32px);
max-height: calc(100dvh - 32px);
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 8px;
background: #082c86;
color: #fff;
overflow: auto;
}
.lss-activity-shell-dialog::backdrop {
background: rgba(3, 18, 53, 0.72);
}
.lss-activity-shell-inline {
display: block;
width: 100%;
max-width: 1180px;
margin: 0 auto;
}
.lss-activity-shell {
width: 100%;
max-width: 100%;
min-width: 0;
background: linear-gradient(135deg, #082c86 0%, #0258bb 100%);
border: 1px solid rgba(255, 255, 255, 0.85);
border-radius: 8px;
overflow: hidden;
}
.lss-activity-shell__brandbar,
.lss-activity-shell__header,
.lss-activity-shell__progress,
.lss-activity-shell__footer {
padding-right: 24px;
padding-left: 24px;
}
.lss-activity-shell__brandbar {
display: flex;
min-height: 62px;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-top: 10px;
padding-bottom: 10px;
background: rgba(4, 31, 102, 0.72);
border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}
.lss-activity-shell__brand,
.lss-activity-shell__tools,
.lss-activity-shell__footer-end {
display: flex;
align-items: center;
gap: 10px;
}
.lss-activity-shell__brand {
min-width: 0;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
}
.lss-activity-shell__logo-image {
display: block;
width: auto;
max-width: 150px;
height: 36px;
object-fit: contain;
}
.lss-activity-shell__logo-fallback {
display: grid;
width: 40px;
height: 36px;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 6px;
font-size: 12px;
font-weight: 800;
}
.lss-activity-shell__icon-button {
display: grid;
width: 44px;
height: 44px;
padding: 0;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.75);
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: #fff;
font: inherit;
font-size: 22px;
cursor: pointer;
}
.lss-activity-shell__icon-button:hover,
.lss-activity-shell__icon-button:focus-visible {
background: rgba(255, 255, 255, 0.25);
}
.lss-activity-shell__info-toggle {
display: inline-flex;
min-height: 38px;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 12px;
border: 1px solid #a6e3b6;
border-radius: 8px;
background: #21864b;
color: #fff;
font: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.lss-activity-shell__info-toggle:hover,
.lss-activity-shell__info-toggle:focus-visible {
background: #176b3a;
}
.lss-activity-shell__info-toggle[aria-expanded="false"] { background: #176b3a; }
.lss-activity-shell__info-icon {
position: relative;
display: inline-block;
width: 22px;
height: 22px;
flex: 0 0 22px;
border-radius: 50%;
background: #fff;
color: #21864b;
}
.lss-activity-shell__info-icon::before,
.lss-activity-shell__info-icon::after {
position: absolute;
left: 50%;
width: 3px;
border-radius: 2px;
background: currentColor;
content: "";
transform: translateX(-50%);
}
.lss-activity-shell__info-icon::before {
top: 4px;
height: 3px;
}
.lss-activity-shell__info-icon::after {
top: 9px;
height: 9px;
}
.is-mode-selection .lss-activity-shell__info-toggle { display: none; }
.lss-activity-shell.is-info-hidden .lss-activity-shell__info { display: none !important; }
.lss-activity-shell.is-info-hidden .lss-activity-shell__layout { grid-template-columns: minmax(0, 1fr) !important; }
.lss-activity-shell__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-top: 24px;
padding-bottom: 18px;
}
.lss-activity-shell__heading {
min-width: 0;
}
.lss-activity-shell__heading h2 {
margin: 0;
color: #fff;
font-size: 32px;
font-weight: 800;
line-height: 1.15;
letter-spacing: 0;
}
.lss-activity-shell__heading p {
margin: 8px 0 0;
color: rgba(255, 255, 255, 0.9);
font-size: 16px;
}
.lss-activity-shell__difficulty {
flex: 0 0 auto;
padding: 8px 12px;
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 8px;
background: rgba(255, 255, 255, 0.12);
font-size: 14px;
font-weight: 700;
}
.lss-activity-shell__progress {
padding-bottom: 20px;
}
.lss-activity-shell__progress-copy {
display: flex;
justify-content: space-between;
gap: 12px;
margin-bottom: 7px;
font-size: 13px;
}
.lss-activity-shell__progress-track {
height: 10px;
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 8px;
background: rgba(255, 255, 255, 0.22);
overflow: hidden;
}
.lss-activity-shell__progress-track span {
display: block;
height: 100%;
border-radius: inherit;
background: #fff;
transition: width 180ms ease-out;
}
.lss-activity-shell__layout {
display: grid;
grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
gap: 18px;
padding: 0 24px 24px;
}
.lss-activity-shell__info,
.lss-activity-shell__stage {
min-width: 0;
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 8px;
}
.lss-activity-shell__info {
align-self: start;
background: rgba(4, 31, 102, 0.48);
overflow: hidden;
}
.lss-activity-shell__info-section {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.lss-activity-shell__info-section:last-child {
border-bottom: 0;
}
.lss-activity-shell__info-section summary {
padding: 14px 16px;
font-weight: 700;
cursor: pointer;
}
.lss-activity-shell__info-section div {
padding: 0 16px 14px;
font-size: 14px;
line-height: 1.55;
}
.lss-activity-shell__info-section p {
margin: 0 0 8px;
}
.lss-activity-shell__info-section p:last-child {
margin-bottom: 0;
}
.lss-activity-shell__stage {
min-height: 360px;
padding: 24px;
background: #fff;
color: #12213d;
overflow-wrap: anywhere;
}
.lss-activity-shell__notice {
padding: 14px;
border-left: 4px solid #ff6d00;
background: #f4f7fb;
color: #12213d;
}
.lss-activity-shell__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding-top: 16px;
padding-bottom: 16px;
background: rgba(4, 31, 102, 0.72);
border-top: 1px solid rgba(255, 255, 255, 0.24);
}
.lss-activity-shell__action {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 16px;
}
.lss-activity-shell__action--primary {
background: #0258bb;
}
@media (max-width: 767px), (max-height: 500px) and (hover: none) and (pointer: coarse) {
.lss-activity-shell-dialog {
position: fixed;
inset: 0;
width: 100%;
max-width: none;
height: 100vh;
height: 100dvh;
height: var(--lss-mobile-viewport-height, 100dvh);
max-height: none;
margin: 0;
border: 0;
border-radius: 0;
overflow: hidden;
}
html.lss-mobile-activity-open,
body.lss-mobile-activity-open {
width: 100%;
overflow: hidden !important;
overscroll-behavior: none;
}
body.lss-mobile-activity-open {
position: fixed;
left: 0;
right: 0;
}
dialog.lss-mobile-fullscreen,
.lss-task-dialog.lss-mobile-fullscreen {
box-sizing: border-box !important;
position: fixed !important;
inset: 0 !important;
width: 100% !important;
max-width: none !important;
height: 100vh !important;
height: 100dvh !important;
height: var(--lss-mobile-viewport-height, 100dvh) !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
}
.lss-activity-shell-dialog .lss-activity-shell {
display: grid;
grid-template-rows: auto auto auto minmax(0, 1fr) auto;
height: 100%;
border: 0;
border-radius: 0;
}
.lss-activity-shell-dialog .lss-activity-shell__layout {
align-content: start;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.lss-activity-shell-dialog .lss-activity-shell__brandbar {
padding-top: max(10px, env(safe-area-inset-top));
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
}
.lss-activity-shell-dialog .lss-activity-shell__footer {
padding-bottom: max(16px, env(safe-area-inset-bottom));
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
}
.lss-activity-shell-dialog .lss-activity-shell__header,
.lss-activity-shell-dialog .lss-activity-shell__progress {
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
}
.lss-activity-shell-dialog .lss-activity-shell__layout {
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
}
.lss-game-dialog.lss-mobile-fullscreen .lss-game-shell,
.lss-finance-dialog.lss-mobile-fullscreen .lss-finance-dialog__panel {
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
height: 100%;
min-height: 0;
border-radius: 0;
}
.lss-game-dialog.lss-mobile-fullscreen .lss-game-brandbar,
.lss-finance-dialog.lss-mobile-fullscreen .lss-finance-dialog__brandbar,
.lss-smart-modal.lss-mobile-fullscreen > .lss-smart-modal__brandbar {
box-sizing: content-box;
padding-top: env(safe-area-inset-top) !important;
padding-left: max(12px, env(safe-area-inset-left)) !important;
padding-right: max(12px, env(safe-area-inset-right)) !important;
}
.lss-game-dialog.lss-mobile-fullscreen .lss-game-titlebar,
.lss-finance-dialog.lss-mobile-fullscreen .lss-finance-dialog__titlebar,
.lss-smart-modal.lss-mobile-fullscreen .lss-smart-modal__title {
padding-left: max(15px, env(safe-area-inset-left));
padding-right: max(15px, env(safe-area-inset-right));
}
.lss-game-dialog.lss-mobile-fullscreen .lss-game-layout,
.lss-finance-dialog.lss-mobile-fullscreen .lss-finance-dialog__layout {
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.lss-game-dialog.lss-mobile-fullscreen .lss-game-shell {
grid-template-rows: auto auto minmax(0, 1fr);
}
.lss-game-dialog.lss-mobile-fullscreen .lss-game-layout {
align-content: start;
}
.lss-finance-dialog.lss-mobile-fullscreen .lss-finance-dialog__layout {
align-content: start;
}
.lss-smart-modal.lss-mobile-fullscreen {
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
background: #fff;
}
.lss-smart-modal.lss-mobile-fullscreen .lss-smart-modal__body {
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.lss-case-library__dialog.lss-mobile-fullscreen .lss-case-library__dialog-scroll {
box-sizing: border-box;
height: 100%;
padding-top: max(52px, calc(20px + env(safe-area-inset-top)));
padding-bottom: max(18px, env(safe-area-inset-bottom));
padding-left: max(8px, env(safe-area-inset-left));
padding-right: max(8px, env(safe-area-inset-right));
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
[data-lss-task-modal].lss-mobile-fullscreen-host {
padding: 0 !important;
overflow: hidden !important;
}
.lss-task-dialog.lss-mobile-fullscreen {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
background: #fff;
}
.lss-task-dialog.lss-mobile-fullscreen > header {
padding-top: max(14px, env(safe-area-inset-top));
padding-left: max(14px, env(safe-area-inset-left));
padding-right: max(14px, env(safe-area-inset-right));
}
.lss-task-dialog.lss-mobile-fullscreen .lss-task-embed {
max-height: none;
min-height: 0;
padding-bottom: max(14px, env(safe-area-inset-bottom));
padding-left: max(14px, env(safe-area-inset-left));
padding-right: max(14px, env(safe-area-inset-right));
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.lss-activity-shell__brandbar,
.lss-activity-shell__header,
.lss-activity-shell__progress,
.lss-activity-shell__footer {
padding-right: 16px;
padding-left: 16px;
}
.lss-activity-shell__heading h2 {
font-size: 24px;
}
.lss-activity-shell__layout {
grid-template-columns: minmax(0, 1fr);
padding: 0 16px 18px;
}
.lss-activity-shell__stage {
min-height: 280px;
padding: 18px;
}
}
@media (max-width: 480px) {
.lss-activity-shell__brandbar {
min-height: 56px;
}
.lss-activity-shell__brand-label {
display: none;
}
.lss-activity-shell__header {
align-items: flex-start;
padding-top: 18px;
}
.lss-activity-shell__difficulty {
padding: 6px 8px;
font-size: 12px;
}
.lss-activity-shell__stage {
padding: 14px;
}
.lss-activity-shell__footer {
align-items: stretch;
flex-direction: column;
}
.lss-activity-shell__footer > div,
.lss-activity-shell__footer-end,
.lss-activity-shell__action {
width: 100%;
}
.lss-activity-shell__footer-end {
align-items: stretch;
flex-direction: column;
}
}
@media (prefers-reduced-motion: reduce) {
.lss-activity-shell__progress-track span {
transition: none;
}
}