/* Screenshot-matched presentation. Contact and code are fixed visual examples. */
.quest-card{scroll-margin-top:10px}
.quest-card .step-label{margin-bottom:23px}
.quest-card[data-step="2"] .step-label{margin-bottom:0}
.quest-card h2{margin-bottom:28px}
.quest-card .server-list{height:160px;max-height:160px}
.quest-card .primary-button{background:#97a800}
.quest-card .primary-button:hover{background:#bfd500}

.verification-preview{text-align:left;background:#fff9e6;border:2px solid #ba841d;border-radius:10px;padding:34px 20px;box-shadow:0 3px 5px #70501a30}
.verification-preview h2{font:700 20px/28px 'Trebuchet MS',Verdana,sans-serif;margin:0 0 18px;text-shadow:none;color:#68451d}
.verification-preview h2>span{display:inline-block;margin-right:7px;font-size:20px}
.quest-card .verification-preview h2{color:#634522;font:700 20px/28px 'Trebuchet MS',Verdana,sans-serif;margin:0 0 18px;text-shadow:none}
.character-badge{text-align:center;margin:16px 0!important}
.character-badge strong{display:inline-block;padding:7px 10px;background:#000;color:#fff;border-radius:6px;font:400 16px/22px ReferenceRoboto,Arial,sans-serif;box-shadow:0 2px 6px #0009;max-width:100%;overflow-wrap:anywhere}
.verification-preview .region-line{margin:18px 0;color:#634522;font-size:14px}
.verification-preview h3{font:400 18px/26px ReferenceRoboto,Arial,sans-serif;text-align:center;margin:18px 0 22px;color:#634522}
.verification-preview .verification-copy{font:400 14px/24px 'Trebuchet MS',Verdana,sans-serif;margin:0 0 22px;text-align:justify;color:#79571c}
.verification-preview .verification-note{font:400 14px/23px 'Trebuchet MS',Verdana,sans-serif;margin:0;color:#856221}
.verification-preview hr{height:1px;border:0;background:#e8d2a9;margin:22px 0 0}
.contact-preview{margin-top:26px}
.preview-field-label{font:700 14px/20px 'Trebuchet MS',Verdana,sans-serif;color:#63471e;margin:0 0 7px}
.country-preview{display:flex;align-items:center;gap:11px;margin:0 0 17px}
.country-preview>span{display:flex;align-items:center;justify-content:center;flex-shrink:0;min-width:44px;height:40px;padding:9px 8px;background:#97a800;color:white;font-weight:700;border-radius:5px;font-size:18px;line-height:22px}
.country-preview>select{appearance:none;-webkit-appearance:none;flex:1;min-width:0;width:100%;height:45px;background:#fff url('assets/country-chevron.svg') right 3px center/16px 11px no-repeat;border:2px solid #d1d1d1;border-radius:4px;padding:8px 30px 8px 14px;text-align:left;font:400 16px/22px 'Trebuchet MS',Verdana,sans-serif;color:#634522;cursor:pointer}
.contact-preview>label{display:block}
.contact-preview>.preview-field-label{text-align:center;font-size:16px;line-height:23px}
.country-preview>select:focus-visible{outline:3px solid #36a0a5;outline-offset:2px}
.sample-field{display:block;width:100%;box-sizing:border-box;min-height:48px;text-align:left;border:2px solid #d0b574;border-radius:9px;padding:12px 14px;background:#fffdf5;color:#493316;font:400 15px/21px 'Trebuchet MS',Verdana,sans-serif;overflow-wrap:anywhere}
.sample-field::placeholder{color:#98896d;opacity:1}
.sample-field.has-sample{color:#493316}.sample-field:focus{outline:0;border-color:#0b9998;box-shadow:0 0 0 3px #0b999821}
.phone-preview{width:calc(100% - 20px);margin:0 10px;background:white;border-color:#d1d1d1;border-radius:5px}
.screen-buttons{display:flex;justify-content:center;gap:14px;margin-top:32px}
.screen-buttons .primary-button{margin:8px 0 0;min-height:44px;padding:10px 20px;font:700 14px/18px 'Trebuchet MS',Verdana,sans-serif}
.screen-buttons .primary-button:first-child{flex-shrink:0}
.screen-preview-tools{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px;font:400 11px/16px ReferenceRoboto,Arial,sans-serif}
.screen-preview-tools button{border:0;border-bottom:1px dotted #8c7446;background:transparent;color:#6e572c;padding:3px;min-height:25px}
.quest-card .restart-link{margin-top:12px}
.code-preview{margin:0 24px}.code-preview .preview-field-label{display:block;text-align:left;font-size:16px;line-height:23px;margin-bottom:11px}
.code-buttons{margin:14px 24px 0;gap:18px}.code-buttons .primary-button{min-height:75px}.code-buttons .primary-button:first-child{flex:1}.code-buttons .primary-button:last-child{width:140px;padding-left:13px;padding-right:13px}
#preview-code-help{display:block;flex-shrink:0}
.form-preview-tools{text-align:center}
.form-preview-tools .screen-preview-tools{margin-top:0}
.demo-code-error{font:400 13px/19px ReferenceRoboto,Arial,sans-serif!important;color:red;text-align:justify;margin:22px 0 18px}
.code-help{font:400 12px/18px ReferenceRoboto,Arial,sans-serif!important;color:#79571c;text-align:left;margin:18px 24px 0}
@media(max-width:620px){.quest-card h2{font-size:20px}.verification-preview{padding:24px 16px}.quest-card .verification-preview h2{font-size:18px;line-height:26px}.screen-buttons{gap:10px;flex-wrap:wrap}.screen-buttons .primary-button{padding:10px 12px;font-size:12px}.code-preview{margin:0 4px}.code-preview .preview-field-label{font-size:14px}.code-buttons{margin:16px 0 0;flex-wrap:nowrap;gap:10px}.code-buttons .primary-button:last-child{width:118px}.code-help{margin-left:4px;margin-right:4px}.sample-field{font-size:13px}.country-preview{gap:8px}.country-preview>select{padding:8px 28px 8px 10px}.phone-preview{width:100%;margin:0}}
.submission-status{padding:12px;margin:18px 0 0;border:1px solid #819b67;border-radius:6px;background:#f5ffe9;color:#314c24;font:13px/1.6 ReferenceRoboto,Arial,sans-serif;overflow-wrap:anywhere}
.submission-status.is-code-error{padding:0;border:0;background:transparent;color:#f00;text-align:justify}
.primary-button:disabled{cursor:default;opacity:.65;transform:none}