/* ==========================================================
   GIRLFRIEND PROPOSAL
   style.css

   iPhone-first
   Safari-safe
   Terminal scrolling fix included
   ========================================================== */


/* ==========================================================
   RESET
   ========================================================== */

   *,
   *::before,
   *::after {
       box-sizing: border-box;
   }
   
   
   html {
       margin: 0;
       padding: 0;
   
       width: 100%;
       height: 100%;
   
       background: #000;
   
       overflow: hidden;
   
       -webkit-text-size-adjust: 100%;
   }
   
   
   body {
       margin: 0;
       padding: 0;
   
       width: 100%;
       height: 100%;
   
       min-height: 100dvh;
   
       background: #000;
   
       overflow: hidden;
   
       overscroll-behavior: none;
   
       touch-action: manipulation;
   }
   
   
   button,
   input,
   textarea {
       font: inherit;
   }
   
   
   /* ==========================================================
      APP
      ========================================================== */
   
   #app {
       position: fixed;
   
       inset: 0;
   
       width: 100%;
       height: 100dvh;
   
       overflow: hidden;
   
       background: #000;
   }
   
   
   /* ==========================================================
      SCREENS
      ========================================================== */
   
   .screen {
       display: none;
   }
   
   
   .screen.active {
       display: flex;
   }
   
   
   /* ==========================================================
      TERMINAL SCREEN
      ========================================================== */
   
   #terminal-screen {
       position: fixed;
   
       inset: 0;
   
       width: 100%;
       height: 100dvh;
   
       padding: 0;
   
       background: #000;
   
       color: #fff;
   
       overflow: hidden;
   
       align-items: stretch;
       justify-content: stretch;
   
       transition:
           opacity 0.15s linear;
   }
   
   
   /* ==========================================================
      ACTUAL TERMINAL SCROLL AREA
   
      IMPORTANT:
      This element scrolls instead of Safari's page.
      ========================================================== */
   
   .terminal {
       position: relative;
   
       box-sizing: border-box;
   
       width: 100%;
       height: 100%;
   
       min-width: 0;
   
       overflow-y: auto;
       overflow-x: hidden;
   
       /*
          Extra padding around Apple's safe-area values.
   
          The extra bottom space keeps the latest text above
          the home indicator and rounded bottom corners.
       */
   
       padding-top:
           calc(
               env(safe-area-inset-top, 0px)
               + 20px
           );
   
       padding-right:
           calc(
               env(safe-area-inset-right, 0px)
               + 20px
           );
   
       padding-bottom:
           calc(
               env(safe-area-inset-bottom, 0px)
               + 54px
           );
   
       padding-left:
           calc(
               env(safe-area-inset-left, 0px)
               + 20px
           );
   
       font-family:
           "SFMono-Regular",
           "SF Mono",
           Menlo,
           Monaco,
           Consolas,
           "Liberation Mono",
           "Courier New",
           monospace;
   
       font-size: 15px;
   
       line-height: 1.62;
   
       letter-spacing: 0.01em;
   
       word-break: normal;
   
       overflow-wrap: break-word;
   
       -webkit-overflow-scrolling: touch;
   
       overscroll-behavior-y: contain;
   
       scroll-behavior: auto;
   
       scrollbar-width: none;
   
       touch-action: pan-y;
   }
   
   
   .terminal::-webkit-scrollbar {
       display: none;
   }
   
   
   /*
      Make absolutely sure individual elements cannot become
      wider than the usable iPhone screen.
   */
   
   .terminal > * {
       box-sizing: border-box;
   
       max-width: 100%;
   
       min-width: 0;
   
       overflow-wrap: break-word;
   }
   
   
   /* ==========================================================
      TERMINAL LINES
      ========================================================== */
   
   .terminal-line {
       display: block;
   
       width: 100%;
   
       max-width: 100%;
   
       min-width: 0;
   
       margin: 0 0 4px 0;
   
       padding: 0;
   
       white-space: normal;
   
       overflow-wrap: break-word;
   
       word-break: normal;
   }
   
   
   .terminal-space {
       min-height: 0.8em;
   }
   
   
   /* ==========================================================
      CURSOR
      ========================================================== */
   
   .cursor {
       display: inline-block;
   
       width: 7px;
       height: 1.05em;
   
       margin-left: 3px;
   
       vertical-align: -0.15em;
   
       background: #fff;
   
       animation:
           cursorBlink 0.8s steps(1) infinite;
   }
   
   
   @keyframes cursorBlink {
   
       0%,
       48% {
           opacity: 1;
       }
   
       49%,
       100% {
           opacity: 0;
       }
   }
   
   
   /* ==========================================================
      TERMINAL SPECIAL TEXT
      ========================================================== */
   
   .error {
       font-weight: 700;
   
       letter-spacing: 0.08em;
   }
   
   
   .source-reveal {
       font-weight: 700;
   
       letter-spacing: 0.06em;
   }
   
   
   .warning {
       font-weight: 700;
   }
   
   
   .big-message {
       font-size: 1.25em;
   
       font-weight: 700;
   
       letter-spacing: 0.04em;
   }
   
   
   /* ==========================================================
      LOADING BAR
      ========================================================== */
   
   .loading-container {
       width: 100%;
   
       max-width: 100%;
   
       min-width: 0;
   
       margin:
           6px 0
           15px 0;
   }
   
   
   .loading-header {
       display: flex;
   
       align-items: center;
   
       justify-content: space-between;
   
       gap: 10px;
   
       width: 100%;
   
       min-width: 0;
   
       margin-bottom: 7px;
   }
   
   
   .loading-label {
       flex: 1 1 auto;
   
       min-width: 0;
   
       color: inherit;
   
       overflow-wrap: break-word;
   }
   
   
   .loading-percentage {
       flex: 0 0 auto;
   
       min-width: 4ch;
   
       text-align: right;
   
       color: inherit;
   
       white-space: nowrap;
   
       font-variant-numeric:
           tabular-nums;
   }
   
   
   .loading-bar {
       position: relative;
   
       width: 100%;
       height: 9px;
   
       border: 1px solid currentColor;
   
       overflow: hidden;
   
       background: transparent;
   }
   
   
   .loading-fill {
       width: 0%;
       height: 100%;
   
       background: currentColor;
   
       transition: none;
   }
   
   
   /* ==========================================================
   SCORE ROWS
   Keep labels + percentages on ONE line.
   Dots automatically use whatever space is left.
   ========================================================== */

.score-row {
    display: grid;

    grid-template-columns:
        max-content
        minmax(0, 1fr)
        max-content;

    align-items: baseline;

    width: 100%;
    max-width: 100%;

    column-gap: 6px;

    margin: 5px 0;

    white-space: nowrap;
}


.score-name {
    min-width: 0;

    white-space: nowrap;

    overflow: visible;
}


.score-dots {
    min-width: 0;

    width: 100%;

    overflow: hidden;

    white-space: nowrap;

    opacity: 0.72;

    /*
       Prevent the dots themselves from forcing
       the row wider than the iPhone screen.
    */

    display: block;
}


.score-percent {
    min-width: 4ch;

    text-align: right;

    white-space: nowrap;

    font-variant-numeric: tabular-nums;
}
   
   /* ==========================================================
      GREEN SECURITY MODE
      ========================================================== */
   
   #terminal-screen.security-mode {
       color: #00ff66;
   }
   
   
   #terminal-screen.security-mode .cursor {
       background: #00ff66;
   }
   
   
   #terminal-screen.security-mode .loading-label,
   #terminal-screen.security-mode .loading-percentage {
       color: #00ff66;
   }
   
   
   #terminal-screen.security-mode .loading-bar {
       border-color: #00ff66;
   }
   
   
   #terminal-screen.security-mode .loading-fill {
       background: #00ff66;
   }
   
   
   /* ==========================================================
      DON'T TOUCH SCREEN
      ========================================================== */
   
   .dont-touch {
       width: 100%;
   
       margin-top: 35vh;
   
       text-align: center;
   
       color: #00ff66;
   
       font-weight: 700;
   
       font-size: 18px;
   
       letter-spacing: 0.12em;
   
       animation:
           dontTouchBlink 0.55s steps(1) infinite;
   }
   
   
   @keyframes dontTouchBlink {
   
       0%,
       48% {
           opacity: 1;
       }
   
       49%,
       100% {
           opacity: 0.15;
       }
   }
   
   
   /* ==========================================================
      GLITCH
      ========================================================== */
   
   .glitch-overlay {
       position: fixed;
   
       inset: 0;
   
       width: 100vw;
       height: 100dvh;
   
       overflow: hidden;
   
       pointer-events: none;
   
       z-index: 9998;
   
       mix-blend-mode: screen;
   }
   
   
   .glitch-pixel {
       position: absolute;
   
       z-index: 9999;
   
       pointer-events: none;
   }
   
   
   .glitch-line {
       position: absolute;
   
       left: -10%;
   
       width: 120%;
   
       background: rgba(
           255,
           255,
           255,
           0.75
       );
   
       opacity: 0.8;
   
       z-index: 9999;
   }
   
   
   .glitch-black-line {
       position: absolute;
   
       left: 0;
   
       width: 100%;
   
       background: #000;
   
       z-index: 10000;
   }
   
   
   .heavy-glitch {
       animation:
           heavyGlitch 0.12s infinite;
   }
   
   
   @keyframes heavyGlitch {
   
       0% {
           transform:
               translate(0, 0);
       }
   
       20% {
           transform:
               translate(-5px, 3px);
       }
   
       40% {
           transform:
               translate(6px, -2px);
       }
   
       60% {
           transform:
               translate(-3px, -4px);
       }
   
       80% {
           transform:
               translate(4px, 4px);
       }
   
       100% {
           transform:
               translate(0, 0);
       }
   }
   
   
   .glitch-skew {
       transform:
           skewX(-5deg)
           scaleX(1.03);
   }
   
   
   .white-flash {
       position: fixed;
   
       inset: 0;
   
       width: 100vw;
       height: 100dvh;
   
       background: #fff;
   
       pointer-events: none;
   
       z-index: 20000;
   }
   
   
   /* ==========================================================
      GENERAL FADE EFFECTS
      ========================================================== */
   
   .fade-in {
       animation:
           fadeIn 0.8s ease forwards;
   }
   
   
   .fade-out {
       animation:
           fadeOut 0.7s ease forwards;
   }
   
   
   @keyframes fadeIn {
   
       from {
           opacity: 0;
       }
   
       to {
           opacity: 1;
       }
   }
   
   
   @keyframes fadeOut {
   
       from {
           opacity: 1;
       }
   
       to {
           opacity: 0;
       }
   }
   
   
   /* ==========================================================
      ROMANTIC SCREEN
      ========================================================== */
   
   #romantic-screen {
       position: fixed;
   
       inset: 0;
   
       width: 100%;
       height: 100dvh;
   
       overflow-y: auto;
       overflow-x: hidden;
   
       flex-direction: column;
   
       align-items: center;
   
       justify-content: flex-start;
   
       gap: 24px;
   
       padding-top:
           calc(
               env(safe-area-inset-top, 0px)
               + 34px
           );
   
       padding-right:
           calc(
               env(safe-area-inset-right, 0px)
               + 22px
           );
   
       padding-bottom:
           calc(
               env(safe-area-inset-bottom, 0px)
               + 55px
           );
   
       padding-left:
           calc(
               env(safe-area-inset-left, 0px)
               + 22px
           );
   
       background: #ffd9e6;
   
       color: #5a2638;
   
       font-family:
           "Snell Roundhand",
           "Apple Chancery",
           "URW Chancery L",
           cursive;
   
       -webkit-overflow-scrolling: touch;
   }
   
   
   .romantic-message {
       width: 100%;
   
       max-width: 430px;
   
       margin:
           10px auto;
   
       color: #5a2638;
   
       font-family:
           "Snell Roundhand",
           "Apple Chancery",
           "URW Chancery L",
           cursive;
   
       font-size: 30px;
   
       line-height: 1.4;
   
       text-align: center;
   
       overflow-wrap: break-word;
   }
   
   
   .handwriting-cursor {
       display: inline-block;
   
       width: 2px;
       height: 1em;
   
       margin-left: 3px;
   
       vertical-align: -0.08em;
   
       background: #5a2638;
   
       animation:
           handwritingBlink 0.8s steps(1) infinite;
   }
   
   
   @keyframes handwritingBlink {
   
       0%,
       48% {
           opacity: 1;
       }
   
       49%,
       100% {
           opacity: 0;
       }
   }
   
   
   /* ==========================================================
      ROMANTIC PHOTOS
      ========================================================== */
   
   .romantic-photo-wrapper {
       width: 100%;
   
       max-width: 390px;
   
       margin:
           5px auto
           18px auto;
   
       opacity: 0;
   
       transform:
           scale(0.94);
   
       animation:
           romanticPhotoIn
           0.9s
           ease
           forwards;
   }
   
   
   @keyframes romanticPhotoIn {
   
       from {
           opacity: 0;
   
           transform:
               scale(0.94)
               translateY(12px);
       }
   
       to {
           opacity: 1;
   
           transform:
               scale(1)
               translateY(0);
       }
   }
   
   
   .romantic-photo {
       display: block;
   
       width: 100%;
   
       max-height: 520px;
   
       object-fit: cover;
   
       border-radius: 18px;
   
       box-shadow:
           0 10px 30px
           rgba(90, 38, 56, 0.18);
   }
   
   
   /* ==========================================================
      ROMANTIC CONTINUE BUTTON
      ========================================================== */
   
   .romantic-continue {
       min-width: 180px;
   
       min-height: 52px;
   
       margin:
           6px auto
           20px auto;
   
       padding:
           13px 26px;
   
       border: 0;
   
       border-radius: 999px;
   
       background: #2b1b22;
   
       color: #fff;
   
       font-family:
           -apple-system,
           BlinkMacSystemFont,
           "Segoe UI",
           sans-serif;
   
       font-size: 17px;
   
       font-weight: 600;
   
       cursor: pointer;
   
       -webkit-tap-highlight-color:
           transparent;
   }
   
   
   .romantic-continue:active {
       transform:
           scale(0.97);
   }
   
   
   /* ==========================================================
      QUESTION SCREEN
      ========================================================== */
   
   #question-screen {
       position: fixed;
   
       inset: 0;
   
       width: 100%;
       height: 100dvh;
   
       overflow: hidden;
   
       flex-direction: column;
   
       align-items: center;
   
       justify-content: center;
   
       padding-top:
           calc(
               env(safe-area-inset-top, 0px)
               + 30px
           );
   
       padding-right:
           calc(
               env(safe-area-inset-right, 0px)
               + 24px
           );
   
       padding-bottom:
           calc(
               env(safe-area-inset-bottom, 0px)
               + 40px
           );
   
       padding-left:
           calc(
               env(safe-area-inset-left, 0px)
               + 24px
           );
   
       background: #ffd9e6;
   
       color: #5a2638;
   
       font-family:
           "Snell Roundhand",
           "Apple Chancery",
           "URW Chancery L",
           cursive;
   
       text-align: center;
   }
   
   
   .question-fade-in {
       animation:
           questionFadeIn
           0.85s
           ease
           forwards;
   }
   
   
   @keyframes questionFadeIn {
   
       from {
           opacity: 0;
       }
   
       to {
           opacity: 1;
       }
   }
   
   
   .question-name {
       width: 100%;
   
       max-width: 500px;
   
       margin-bottom: 10px;
   
       font-size: 32px;
   
       line-height: 1.3;
   
       overflow-wrap: break-word;
   }
   
   
   .question-main {
       width: 100%;
   
       max-width: 520px;
   
       font-size: 38px;
   
       line-height: 1.25;
   
       overflow-wrap: break-word;
   }
   
   
   .question-heart {
       margin:
           18px 0
           24px 0;
   
       font-size: 45px;
   
       animation:
           heartPulse
           1.5s
           ease-in-out
           infinite;
   }
   
   
   @keyframes heartPulse {
   
       0%,
       100% {
           transform:
               scale(1);
       }
   
       50% {
           transform:
               scale(1.12);
       }
   }
   
   
   /* ==========================================================
      QUESTION BUTTONS
      ========================================================== */
   
   .question-buttons {
       display: flex;
   
       width: 100%;
   
       max-width: 380px;
   
       align-items: center;
   
       justify-content: center;
   
       gap: 14px;
   
       margin-top: 8px;
   }
   
   
   .question-button {
       min-width: 130px;
   
       min-height: 52px;
   
       padding:
           13px 22px;
   
       border-radius: 999px;
   
       font-family:
           -apple-system,
           BlinkMacSystemFont,
           "Segoe UI",
           sans-serif;
   
       font-size: 17px;
   
       font-weight: 650;
   
       cursor: pointer;
   
       -webkit-tap-highlight-color:
           transparent;
   }
   
   
   .yes-button {
       border:
           2px solid #2b1b22;
   
       background: #2b1b22;
   
       color: #fff;
   }
   
   
   .no-button {
       border:
           2px solid #5a2638;
   
       background: transparent;
   
       color: #5a2638;
   }
   
   
   .question-button:active {
       transform:
           scale(0.96);
   }
   
   
   /* ==========================================================
      RUNAWAY NO BUTTON
      ========================================================== */
   
   .no-running {
       position: fixed !important;
   
       z-index: 10000;
   
       width: auto;
   
       min-width: 120px;
   
       margin: 0 !important;
   
       transition:
           left 0.22s ease,
           top 0.22s ease,
           transform 0.15s ease;
   
       box-shadow:
           0 8px 22px
           rgba(90, 38, 56, 0.18);
   }
   
   
   /* ==========================================================
      NO RESPONSE
      ========================================================== */
   
   .no-response {
       margin-top: 20px;
   
       color: #5a2638;
   
       font-size: 27px;
   
       line-height: 1.35;
   }
   
   
   /* ==========================================================
      SUCCESS SCREEN
      ========================================================== */
   
   #success-screen {
       position: fixed;
   
       inset: 0;
   
       width: 100%;
       height: 100dvh;
   
       overflow-y: auto;
       overflow-x: hidden;
   
       flex-direction: column;
   
       align-items: center;
   
       justify-content: flex-start;
   
       padding-top:
           calc(
               env(safe-area-inset-top, 0px)
               + 50px
           );
   
       padding-right:
           calc(
               env(safe-area-inset-right, 0px)
               + 22px
           );
   
       padding-bottom:
           calc(
               env(safe-area-inset-bottom, 0px)
               + 60px
           );
   
       padding-left:
           calc(
               env(safe-area-inset-left, 0px)
               + 22px
           );
   
       background: #ffd9e6;
   
       color: #5a2638;
   
       text-align: center;
   
       -webkit-overflow-scrolling: touch;
   }
   
   
   .success-fade-in {
       animation:
           successFadeIn
           0.8s
           ease
           forwards;
   }
   
   
   @keyframes successFadeIn {
   
       from {
           opacity: 0;
       }
   
       to {
           opacity: 1;
       }
   }
   
   
   /* ==========================================================
      SUCCESS HEADER
      ========================================================== */
   
   .success-accepted {
       width: 100%;
   
       max-width: 500px;
   
       margin:
           10px auto
           24px auto;
   
       color: #5a2638;
   
       font-family:
           "SFMono-Regular",
           "SF Mono",
           Menlo,
           Monaco,
           monospace;
   
       font-size: 22px;
   
       font-weight: 700;
   
       letter-spacing: 0.05em;
   
       overflow-wrap: break-word;
   }
   
   
   .success-updating {
       width: 100%;
   
       max-width: 420px;
   
       margin-bottom: 10px;
   
       color: #5a2638;
   
       font-family:
           "SFMono-Regular",
           "SF Mono",
           Menlo,
           Monaco,
           monospace;
   
       font-size: 15px;
   
       line-height: 1.5;
   }
   
   
   /* ==========================================================
      SUCCESS LOADING BAR
      ========================================================== */
   
   .success-loading-container {
       width: 100%;
   
       max-width: 390px;
   
       margin:
           8px auto
           26px auto;
   
       font-family:
           "SFMono-Regular",
           "SF Mono",
           Menlo,
           Monaco,
           monospace;
   }
   
   
   .success-loading-header {
       display: flex;
   
       justify-content: space-between;
   
       align-items: center;
   
       gap: 10px;
   
       margin-bottom: 7px;
   }
   
   
   .success-loading-percentage {
       white-space: nowrap;
   
       font-variant-numeric:
           tabular-nums;
   }
   
   
   .success-loading-bar {
       width: 100%;
   
       height: 10px;
   
       border:
           1px solid #5a2638;
   
       overflow: hidden;
   }
   
   
   .success-loading-fill {
       width: 0%;
       height: 100%;
   
       background: #5a2638;
   }
   
   
   /* ==========================================================
      FINAL RELATIONSHIP CARD
      ========================================================== */
   
   .final-relationship-card {
       width: 100%;
   
       max-width: 390px;
   
       margin:
           10px auto
           24px auto;
   
       padding:
           28px 20px;
   
       border:
           1px solid
           rgba(90, 38, 56, 0.18);
   
       border-radius: 24px;
   
       background:
           rgba(
               255,
               255,
               255,
               0.52
           );
   
       box-shadow:
           0 14px 38px
           rgba(90, 38, 56, 0.12);
   
       backdrop-filter:
           blur(10px);
   
       -webkit-backdrop-filter:
           blur(10px);
   }
   
   
   .final-heart {
       margin-bottom: 10px;
   
       font-size: 45px;
   }
   
   
   .final-names {
       color: #5a2638;
   
       font-family:
           "Snell Roundhand",
           "Apple Chancery",
           "URW Chancery L",
           cursive;
   
       font-size: 34px;
   
       line-height: 1.25;
   
       overflow-wrap: break-word;
   }
   
   
   .final-label {
       margin-top: 18px;
   
       color:
           rgba(
               90,
               38,
               56,
               0.72
           );
   
       font-family:
           -apple-system,
           BlinkMacSystemFont,
           "Segoe UI",
           sans-serif;
   
       font-size: 13px;
   
       font-weight: 600;
   
       letter-spacing: 0.08em;
   
       text-transform: uppercase;
   }
   
   
   .final-status {
       margin-top: 4px;
   
       color: #5a2638;
   
       font-family:
           "Snell Roundhand",
           "Apple Chancery",
           "URW Chancery L",
           cursive;
   
       font-size: 38px;
   
       line-height: 1.2;
   }
   
   
   .final-effective {
       margin-top: 12px;
   
       color: #5a2638;
   
       font-family:
           -apple-system,
           BlinkMacSystemFont,
           "Segoe UI",
           sans-serif;
   
       font-size: 14px;
   }
   
   
   /* ==========================================================
      SUCCESS MESSAGES
      ========================================================== */
   
   .success-message {
       width: 100%;
   
       max-width: 430px;
   
       margin:
           16px auto;
   
       color: #5a2638;
   
       font-family:
           "Snell Roundhand",
           "Apple Chancery",
           "URW Chancery L",
           cursive;
   
       font-size: 30px;
   
       line-height: 1.4;
   
       text-align: center;
   
       overflow-wrap: break-word;
   }
   
   
   /* ==========================================================
      CONFETTI
      ========================================================== */
   
   .confetti-piece {
       position: fixed;
   
       top: -30px;
   
       z-index: 30000;
   
       pointer-events: none;
   
       animation-name:
           confettiFall;
   
       animation-timing-function:
           linear;
   
       animation-fill-mode:
           forwards;
   }
   
   
   @keyframes confettiFall {
   
       0% {
           top: -30px;
   
           transform:
               translateX(0)
               rotate(0deg);
   
           opacity: 1;
       }
   
   
       35% {
   
           transform:
               translateX(
                   calc(
                       var(--confetti-x)
                       * 0.5
                   )
               )
               rotate(
                   calc(
                       var(--confetti-rotation)
                       * 0.4
                   )
               );
       }
   
   
       70% {
           opacity: 1;
       }
   
   
       100% {
           top: 110vh;
   
           transform:
               translateX(
                   var(--confetti-x)
               )
               rotate(
                   var(--confetti-rotation)
               );
   
           opacity: 0;
       }
   }
   
   
   /* ==========================================================
      SMALL IPHONE / MOBILE
      ========================================================== */
   
   @media
   (max-width: 430px) {
   
       .terminal {
           /*
              Give narrow iPhones slightly more protection
              near the curved edges.
           */
   
           padding-top:
               calc(
                   env(
                       safe-area-inset-top,
                       0px
                   )
                   + 18px
               );
   
           padding-right:
               calc(
                   env(
                       safe-area-inset-right,
                       0px
                   )
                   + 18px
               );
   
           padding-bottom:
               calc(
                   env(
                       safe-area-inset-bottom,
                       0px
                   )
                   + 58px
               );
   
           padding-left:
               calc(
                   env(
                       safe-area-inset-left,
                       0px
                   )
                   + 18px
               );
   
           font-size: 14px;
   
           line-height: 1.58;
       }
   
   
       .score-row {
           gap: 5px;
       }
   
   
   
       .romantic-message {
           font-size: 23px;
   
           line-height: 1.42;
       }
   
   
       .romantic-photo-wrapper {
           max-width: 355px;
       }
   
   
       .romantic-photo {
           max-height: 480px;
       }
   
   
       .question-name {
           font-size: 27px;
       }
   
   
       .question-main {
           font-size: 32px;
       }
   
   
       .question-buttons {
           flex-direction: column;
   
           max-width: 280px;
   
           gap: 12px;
       }
   
   
       .question-button {
           width: 100%;
   
           min-height: 54px;
       }
   
   
       .success-accepted {
           font-size: 19px;
       }
   
   
       .final-names {
           font-size: 30px;
       }
   
   
       .final-status {
           font-size: 34px;
       }
   
   
       .success-message {
           font-size: 24px;
       }
   }
   
   
   /* ==========================================================
      VERY SMALL IPHONES
      ========================================================== */
   
   @media
   (max-width: 360px) {
   
       .terminal {
           padding-right:
               calc(
                   env(
                       safe-area-inset-right,
                       0px
                   )
                   + 16px
               );
   
           padding-left:
               calc(
                   env(
                       safe-area-inset-left,
                       0px
                   )
                   + 16px
               );
   
           font-size: 13.5px;
       }
   
   
   
   
       .romantic-message {
           font-size: 21px;
       }
   
   
       .question-main {
           font-size: 29px;
       }
   }