.gameplay-v2 {
  --gp-space-1: 8px;
  --gp-space-2: 12px;
  --gp-space-3: 16px;
  --gp-space-4: 20px;
  --gp-space-5: 24px;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.gameplay-v2,
.gameplay-v2 * {
  box-sizing: border-box;
}

.gameplay-v2__progress {
  position: fixed;
  top: var(--quiz-shell-header-offset);
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--color-border-subtle);
  z-index: 9;
}

.gameplay-v2__progress-bar {
  height: 100%;
  width: 0;
  background: var(--color-feedback-success-bg-strong, var(--zen-color-feedback-correct));
  transition: width 0.25s ease;
}

.gameplay-v2__screen {
  min-height: calc(100dvh - var(--quiz-shell-header-offset) - var(--app-content-bottom));
  height: auto;
  overflow: visible;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: 20px 12px 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.gameplay-v2__card {
  width: min(700px, 100%);
  max-width: 100%;
  min-width: 0;
  height: auto;
  background: var(--color-surface-default, var(--zen-color-card-bg));
  border: 1px solid var(--color-border-default, var(--zen-color-border-base));
  border-radius: var(--zen-radius-card);
  padding: var(--gp-space-5);
  box-sizing: border-box;
}

.gameplay-v2__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gp-space-3);
}

.gameplay-v2__quiz-name {
  margin: 0;
  color: var(--color-text-secondary, var(--zen-color-text-secondary));
  font-weight: 600;
}

.gameplay-v2__close {
  color: var(--color-text-secondary, var(--zen-color-text-secondary));
  text-decoration: none;
  font-size: 28px;
  line-height: 1;
}

.gameplay-v2__progress-label {
  margin: var(--gp-space-2) 0 0;
  color: var(--color-text-secondary, var(--zen-color-text-secondary));
  font-weight: 600;
}

.gameplay-v2__question {
  margin: var(--gp-space-2) 0 var(--gp-space-4);
  color: var(--color-text-primary, var(--zen-color-text-primary));
  font-size: 1.25rem;
}

.gameplay-v2__status {
  margin-bottom: var(--gp-space-3);
}

.gameplay-v2__status [data-report-error="true"] {
  color: var(--color-danger, var(--color-feedback-danger-bg-strong, var(--zen-color-feedback-incorrect)));
}

.gameplay-v2__meta {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--gp-space-3);
}

.gameplay-v2__report-open {
  border: 0;
  background: transparent;
  color: var(--color-text-secondary, var(--zen-color-text-secondary));
  cursor: pointer;
}

.gameplay-v2__options {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gp-space-2);
}

.gameplay-v2__option {
  display: flex;
  gap: var(--gp-space-2);
  align-items: center;
  justify-content: flex-start;
  padding: 14px;
  border: 1px solid var(--color-border-default, var(--zen-color-border-base));
  border-radius: var(--zen-radius-button);
  cursor: pointer;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-align: left;
}

.gameplay-v2__option span {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  overflow-wrap: break-word;
  word-break: break-word;
  text-align: left;
}

.gameplay-v2__option.is-disabled {
  cursor: default;
  opacity: 0.6;
}

.gameplay-v2__option.is-neutral.is-disabled {
  opacity: 0.6;
}

.gameplay-v2__option.is-correct {
  border-color: var(--color-success);
  background: var(--color-success-surface);
  color: var(--color-success);
  opacity: 1;
}

.gameplay-v2__option.is-incorrect {
  border-color: var(--color-danger);
  background: var(--color-danger-surface);
  color: var(--color-danger);
  opacity: 1;
}

.gameplay-v2__footer {
  margin-top: var(--gp-space-4);
  display: flex;
  justify-content: center;
}

.gameplay-v2__submit,
.gameplay-v2__continue {
  width: 100%;
  max-width: 100%;
  justify-content: center;
}

.gameplay-v2__response {
  margin-top: var(--gp-space-4);
  display: grid;
  gap: var(--gp-space-3);
  justify-items: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.gameplay-v2__feedback {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 500;
}

.gameplay-v2__feedback[data-feedback-state="correct"] {
  color: var(--color-success);
}

.gameplay-v2__feedback[data-feedback-state="incorrect"] {
  color: var(--color-danger);
}

.gameplay-v2__explanation {
  margin: 0;
  color: var(--color-text-secondary, var(--zen-color-text-secondary));
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
  text-align: left;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.gameplay-v2__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gameplay-v2-modal__label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  text-align: left;
  color: #282726;
  font-size: 14px;
  line-height: 16.94px;
}

.gameplay-v2-modal__question {
  width: 380px;
  max-width: 100%;
  margin: 0 auto 22px;
  text-align: center;
  color: #232D3A;
  font-size: 20px;
  line-height: 24.2px;
  font-weight: 600;
}

.gameplay-v2-modal__textarea {
  width: 416px;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid var(--color-border-default, var(--zen-color-border-base));
  padding: 14px 18px;
  margin-bottom: 14px;
  background: var(--color-surface-default, var(--zen-color-card-bg));
  color: #232D3A;
  font-size: 15px;
  line-height: 18.15px;
  min-height: 84px;
  height: 84px;
  resize: none;
}

.gameplay-v2-modal__textarea::placeholder {
  color: #64748B;
  font-size: 15px;
  line-height: 18.15px;
  font-weight: 500;
}

.gameplay-v2-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.gameplay-v2-modal {
  width: 505px;
  max-width: calc(100vw - 32px);
  height: 411px;
  box-sizing: border-box;
  border-radius: 20px;
  padding: 26px 44px 24px;
}

[data-report-modal] .social-modal__backdrop {
  background: #282726CC;
  opacity: 0.8;
}

.gameplay-v2-modal #report-modal-title {
  margin: 0 0 16px;
  text-align: center;
  font-size: 15px;
  line-height: 18.15px;
  font-weight: 500;
  color: #64748B;
}

.gameplay-v2-modal__report-submit,
.gameplay-v2-modal__report-cancel {
  width: 320px;
  max-width: 100%;
  min-height: 47px;
  height: 47px;
  justify-content: center;
  border-radius: 10px;
  color: #FFFFFF;
  font-size: 18px;
  line-height: 21.78px;
  font-weight: 500;
  padding: 0 18px;
}

.gameplay-v2-modal__report-submit {
  background: #B04444;
  border-color: #B04444;
}

.gameplay-v2-modal__report-submit:hover,
.gameplay-v2-modal__report-submit:focus-visible {
  background: #943838;
  border-color: #943838;
}

.gameplay-v2-modal__report-cancel {
  background: #232D3A;
  border-color: #232D3A;
}

.gameplay-v2-modal__report-cancel:hover,
.gameplay-v2-modal__report-cancel:focus-visible {
  background: #1D2531;
  border-color: #1D2531;
}

.ui-btn {
  appearance: none;
  border-radius: 10px;
  border: 1px solid transparent;
  min-height: 47px;
  padding: 0 18px;
  font: inherit;
  font-size: 18px;
  line-height: 21.78px;
  font-weight: 400;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ui-btn--primary {
  background: var(--color-action-emphasis-bg, var(--zen-color-cta-bg));
  border-color: var(--color-action-emphasis-bg, var(--zen-color-cta-bg));
  color: var(--color-text-on-dark, var(--zen-color-cta-text));
}

.ui-btn--soft {
  background: var(--color-surface-subtle, var(--zen-color-button-secondary-bg));
  border-color: var(--color-border-default, var(--zen-color-border-base));
  color: var(--color-text-primary, var(--zen-color-text-primary));
}

.ui-btn--danger {
  background: var(--color-danger, var(--color-feedback-danger-bg-strong, var(--zen-color-feedback-incorrect)));
  border-color: var(--color-danger, var(--color-feedback-danger-bg-strong, var(--zen-color-feedback-incorrect)));
  color: #FFFFFF;
}

.ui-btn--danger:hover,
.ui-btn--danger:focus-visible {
  background: var(--color-danger-dark, var(--color-danger, var(--color-feedback-danger-bg-strong, var(--zen-color-feedback-incorrect))));
  border-color: var(--color-danger-dark, var(--color-danger, var(--color-feedback-danger-bg-strong, var(--zen-color-feedback-incorrect))));
}

.ui-btn--success-compact {
  background: var(--color-feedback-success-bg-strong, var(--zen-color-feedback-correct));
  border-color: var(--color-feedback-success-bg-strong, var(--zen-color-feedback-correct));
  color: var(--color-text-primary, var(--zen-color-cta-text));
}

.gameplay-v2__submit[disabled],
.gameplay-v2__submit[aria-disabled="true"] {
  background: var(--color-border, var(--color-border-default, var(--zen-color-border-base)));
  border-color: var(--color-border, var(--color-border-default, var(--zen-color-border-base)));
  color: var(--color-text-muted, var(--color-text-secondary, var(--zen-color-text-secondary)));
  opacity: 0.65;
}

.ui-btn[disabled],
.ui-btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}