```css
/* =========================================================
   EYLEA 8mg - BLUR GAME
   HOME.CSS
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {
    --green-color: #00A83B;
    --green-hover: #00BD45;

    --blue-color: #009DFF;

    --dark-green: #00402F;

    --white: #FFFFFF;

    --text-dark: #00291D;

    --background: #F0F2F0;
}


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

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;

    min-height: 100vh;

    background-image: url("../assets/bg.png");

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    overflow-x: hidden;
}


/* =========================================================
   HEADER
========================================================= */

.game-header {

    position: relative;

    width: 100%;
    height: 90px;

    padding: 15px 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: transparent;
}


.header-left,
.header-right {

    display: flex;

    align-items: center;

    width: 200px;
}


.header-right {

    justify-content: flex-end;
}


.header-logo {

    display: block;

    max-width: 160px;

    max-height: 55px;

    width: auto;
    height: auto;

    object-fit: contain;
}


/* =========================================================
   EYLEA 8mg TITLE
========================================================= */

.header-title {

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    text-align: center;

    z-index: 5;
}


.header-title h1 {

    margin: 0;
    padding: 0;

    color: #FFFFFF;

    font-size: 26px;

    line-height: 1;

    font-weight: 700;

    white-space: nowrap;

    text-shadow:
        0 1px 5px rgba(0, 0, 0, 0.4);
}


.header-title h1 span {

    font-weight: 700;
}


/* =========================================================
   GAME SECTION
========================================================= */

.game-section {

    width: 100%;

    min-height: calc(100vh - 90px);

    padding: 20px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;
}


/* =========================================================
   GAME BOARD
   MORE SQUARE SHAPE
========================================================= */

.game-board {

    position: relative;

    width: 700px;

    height: 600px;

    max-width: 90vw;

    max-height: 65vh;

    overflow: hidden;

    background: #000000;

    border-radius: 5px;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.35);
}


/* =========================================================
   ORIGINAL IMAGE
========================================================= */

.full-image {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: block;

    /*
     * Fill the complete puzzle area
     * so the original image is not cropped.
     */
    object-fit: fill;
}


/* =========================================================
   BLUR GRID
========================================================= */

.blur-grid {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    grid-template-rows: repeat(2, 1fr);

    z-index: 10;
}


/* =========================================================
   BLUR TILE
========================================================= */

.blur-tile {

    position: relative;

    width: 100%;
    height: 100%;

    cursor: pointer;

    background-image: url("../assets/blur.png");

    background-repeat: no-repeat;

    background-size: 400% 200%;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
}


/* =========================================================
   TILE POSITIONS
========================================================= */

.tile-1 {
    background-position: 0% 0%;
}

.tile-2 {
    background-position: 33.3333% 0%;
}

.tile-3 {
    background-position: 66.6666% 0%;
}

.tile-4 {
    background-position: 100% 0%;
}

.tile-5 {
    background-position: 0% 100%;
}

.tile-6 {
    background-position: 33.3333% 100%;
}

.tile-7 {
    background-position: 66.6666% 100%;
}

.tile-8 {
    background-position: 100% 100%;
}


/* =========================================================
   REVEALED TILE
========================================================= */

.blur-tile.revealed {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


/* =========================================================
   RESTART BUTTON
========================================================= */

.restart-button {

    margin-top: 25px;

    min-width: 180px;

    height: 42px;

    padding: 0 22px;

    border: none !important;

    outline: none !important;

    border-radius: 5px;

    background: #00A83B !important;

    background-color: #00A83B !important;

    color: #FFFFFF !important;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    font-weight: 700;

    line-height: 42px;

    text-align: center;

    cursor: pointer;

    box-shadow: none !important;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


.restart-button:hover {

    background: #00BD45 !important;

    background-color: #00BD45 !important;

    color: #FFFFFF !important;

    transform: translateY(-2px);
}


.restart-button:active {

    background: #00A83B !important;

    background-color: #00A83B !important;

    color: #FFFFFF !important;

    transform: translateY(0);
}


.restart-button:focus {

    background: #00A83B !important;

    background-color: #00A83B !important;

    color: #FFFFFF !important;

    outline: none !important;

    box-shadow: none !important;
}


.restart-button i {

    margin-right: 7px;
}


/* =========================================================
   QUESTION MODAL
========================================================= */

.question-modal {

    display: none;

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1000;

    justify-content: center;

    align-items: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.72);

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);
}


/* =========================================================
   SHOW QUESTION MODAL
========================================================= */

.question-modal.active {

    display: flex;
}


/* =========================================================
   QUESTION MODAL CONTENT
========================================================= */

.question-modal .modal-content {

    position: relative;

    width: 700px;

    max-width: 92vw;

    min-height: 300px;

    padding: 30px;

    /*
     * No blue border
     */
    border: 2px solid rgba(255, 255, 255, 0.30);

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(65, 70, 72, 0.96),
            rgba(35, 40, 42, 0.98)
        );

    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.60);

    color: var(--white);

    overflow: visible;
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.question-modal .close-modal {

    display: none;
}


/* =========================================================
   QUESTION NUMBER
========================================================= */

.question-number {

    position: relative;

    z-index: 2;

    display: block;

    margin: 8px 12px 8px;

    padding: 2px 0;

    color: #FFFFFF;

    background: transparent;

    border: none;

    border-radius: 0;

    font-size: 15px;

    line-height: 1.3;

    font-weight: 700;

    text-align: left;

    text-transform: none;
}


/* =========================================================
   QUESTION BOX
========================================================= */

.question-box {

    position: relative;

    z-index: 2;

    width: auto;

    min-height: 70px;

    margin: 0 12px 12px;

    padding: 14px 16px;

    background: rgba(255, 255, 255, 0.13);

    border: none;

    border-radius: 10px;

    box-shadow: none;
}


/* =========================================================
   QUESTION TEXT
========================================================= */

.question-text {

    color: #FFFFFF;

    font-size: 14px;

    line-height: 1.5;

    font-weight: 400;

    text-align: left;
}


/* =========================================================
   OPTIONS CONTAINER
========================================================= */

.options {

    position: relative;

    z-index: 2;

    width: auto;

    margin: 0 12px 5px;

    padding: 0;
}


/* =========================================================
   OPTION
========================================================= */

.option {

    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 30px;

    margin: 0;

    padding: 4px 6px;

    background: transparent;

    border-radius: 4px;

    cursor: pointer;

    transition:
        background-color 0.2s ease;
}


.option:hover {

    background: rgba(255, 255, 255, 0.06);
}


/* =========================================================
   HIDE ORIGINAL RADIO
========================================================= */

.option input {

    position: absolute;

    width: 0;
    height: 0;

    opacity: 0;

    pointer-events: none;
}


/* =========================================================
   CUSTOM RADIO
========================================================= */

.custom-radio {

    position: relative;

    flex: 0 0 13px;

    width: 13px;
    height: 13px;

    margin-right: 10px;

    border: 1.5px solid #00B83D;

    border-radius: 50%;

    background: transparent;
}


/* =========================================================
   SELECTED RADIO
========================================================= */

.option input:checked + .custom-radio {

    border-color: #00B83D;
}


.option input:checked + .custom-radio::after {

    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #00B83D;

    transform: translate(-50%, -50%);
}


/* =========================================================
   OPTION TEXT
========================================================= */

.option-text {

    color: #FFFFFF;

    font-size: 13px;

    line-height: 1.4;

    font-weight: 400;

    text-align: left;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.submit-button {

    position: relative;

    z-index: 3;

    display: block;

    width: 145px;

    height: 35px;

    margin: 10px auto 0;

    padding: 0;

    border: none;

    border-radius: 5px;

    background: #00A83B;

    color: #FFFFFF;

    font-size: 11px;

    line-height: 35px;

    font-weight: 700;

    text-align: center;

    cursor: pointer;

    box-shadow: none;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


.submit-button:hover {

    background: #00BD45;

    transform: translateY(-1px);
}


.submit-button:active {

    transform: translateY(0);
}


/* =========================================================
   SUCCESS MODAL
   DISABLED
========================================================= */

.success-message {

    display: none !important;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 1024px) {

    .game-header {

        height: 80px;

        padding: 12px 25px;
    }


    .header-left,
    .header-right {

        width: 160px;
    }


    .header-logo {

        max-width: 135px;

        max-height: 48px;
    }


    .header-title h1 {

        font-size: 22px;
    }


    .game-section {

        min-height: calc(100vh - 80px);

        padding: 20px 15px;
    }


    /* =====================================================
       GAME BOARD TABLET
    ====================================================== */

    .game-board {

        width: 650px;

        height: 560px;

        max-width: 90vw;

        max-height: 65vh;
    }


    .question-modal .modal-content {

        width: 650px;

        max-width: 90vw;

        padding: 25px;
    }


    .question-number {

        font-size: 14px;
    }


    .question-text {

        font-size: 13px;
    }


    .option-text {

        font-size: 12px;
    }
}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 767px) {

    .game-header {

        height: 70px;

        padding: 10px 15px;
    }


    .header-left,
    .header-right {

        width: 105px;
    }


    .header-logo {

        max-width: 95px;

        max-height: 38px;
    }


    .header-title h1 {

        font-size: 17px;
    }


    .game-section {

        min-height: calc(100vh - 70px);

        padding: 15px 10px 25px;
    }


    /* =====================================================
       GAME BOARD MOBILE
    ====================================================== */

    .game-board {

        width: 92vw;

        height: 78vw;

        max-width: 92vw;

        max-height: none;

        border-radius: 4px;
    }


    /* =====================================================
       RESTART BUTTON MOBILE
    ====================================================== */

    .restart-button {

        min-width: 160px;

        height: 40px;

        margin-top: 18px;

        font-size: 13px;

        line-height: 40px;
    }


    /* =====================================================
       QUESTION MODAL MOBILE
    ====================================================== */

    .question-modal {

        padding: 15px;
    }


    .question-modal .modal-content {

        width: 560px;

        max-width: 94vw;

        min-height: 280px;

        padding: 18px;

        border-width: 1px;

        border-radius: 12px;
    }


    .question-number {

        margin: 7px 10px 7px;

        font-size: 13px;
    }


    .question-box {

        margin: 0 10px 10px;

        padding: 11px 13px;

        min-height: 65px;

        border-radius: 8px;
    }


    .question-text {

        font-size: 12.5px;

        line-height: 1.45;
    }


    .options {

        margin: 0 10px 5px;
    }


    .option {

        min-height: 27px;

        padding: 3px 5px;
    }


    .custom-radio {

        flex-basis: 12px;

        width: 12px;

        height: 12px;

        margin-right: 9px;
    }


    .option-text {

        font-size: 11.5px;

        line-height: 1.35;
    }


    .submit-button {

        width: 140px;

        height: 34px;

        line-height: 34px;

        font-size: 10px;

        margin-top: 8px;
    }
}


/* =========================================================
   RESPONSIVE - SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .game-header {

        padding: 8px 10px;
    }


    .header-left,
    .header-right {

        width: 85px;
    }


    .header-logo {

        max-width: 75px;

        max-height: 32px;
    }


    .header-title h1 {

        font-size: 14px;
    }


    .game-section {

        padding-left: 7px;

        padding-right: 7px;
    }


    /* =====================================================
       GAME BOARD SMALL MOBILE
    ====================================================== */

    .game-board {

        width: 92vw;

        height: 78vw;

        max-width: 92vw;

        max-height: none;
    }


    .question-modal {

        padding: 10px;
    }


    .question-modal .modal-content {

        max-width: 96vw;

        min-height: 260px;

        padding: 14px;

        border-radius: 10px;
    }


    .question-number {

        font-size: 12px;

        margin-left: 9px;

        margin-right: 9px;
    }


    .question-box {

        margin-left: 9px;

        margin-right: 9px;

        min-height: 58px;

        padding: 8px 10px;
    }


    .question-text {

        font-size: 11px;

        line-height: 1.4;
    }


    .options {

        margin-left: 9px;

        margin-right: 9px;
    }


    .option {

        min-height: 25px;
    }


    .option-text {

        font-size: 10px;
    }


    .submit-button {

        width: 135px;

        height: 32px;

        line-height: 32px;

        font-size: 9px;
    }
}
/* =========================================================
   WRONG ANSWER MODAL
========================================================= */

.wrong-modal {

    display: none;

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 2000;

    justify-content: center;
    align-items: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.72);

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);
}


/* =========================================================
   SHOW WRONG MODAL
========================================================= */

.wrong-modal.active {
    display: flex;
}


/* =========================================================
   WRONG MODAL CONTENT
========================================================= */

.wrong-modal-content {

    position: relative;

    width: 430px;

    max-width: 90vw;

    padding: 30px 30px 25px;

    border: 2px solid rgba(255, 255, 255, 0.30);

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(65, 70, 72, 0.96),
            rgba(35, 40, 42, 0.98)
        );

    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.60);

    color: #FFFFFF;

    text-align: center;
}


/* =========================================================
   WRONG ICON
========================================================= */

.wrong-icon {

    width: 52px;
    height: 52px;

    margin: 0 auto 14px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 2px solid #E53935;

    border-radius: 50%;

    color: #E53935;

    font-size: 25px;

    font-weight: 700;
}


/* =========================================================
   WRONG TITLE
========================================================= */

.wrong-title {

    margin-bottom: 10px;

    color: #FFFFFF;

    font-size: 20px;

    line-height: 1.3;

    font-weight: 700;
}


/* =========================================================
   WRONG TEXT
========================================================= */

.wrong-text {

    margin-bottom: 22px;

    color: rgba(255, 255, 255, 0.85);

    font-size: 13px;

    line-height: 1.5;

    font-weight: 400;
}


/* =========================================================
   TRY AGAIN BUTTON
========================================================= */

.try-again-button {

    display: block;

    width: 145px;

    height: 35px;

    margin: 0 auto;

    padding: 0;

    border: none;

    border-radius: 5px;

    background: #00A83B;

    color: #FFFFFF;

    font-size: 11px;

    line-height: 35px;

    font-weight: 700;

    text-align: center;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


.try-again-button:hover {

    background-color: #00BD45;

    transform: translateY(-1px);
}


.try-again-button:active {

    transform: translateY(0);
}


/* =========================================================
   WRONG MODAL MOBILE
========================================================= */

@media (max-width: 767px) {

    .wrong-modal {

        padding: 15px;
    }

    .wrong-modal-content {

        width: 400px;

        max-width: 92vw;

        padding: 25px 20px 22px;

        border-width: 1px;

        border-radius: 12px;
    }

    .wrong-icon {

        width: 45px;
        height: 45px;

        margin-bottom: 12px;

        font-size: 21px;
    }

    .wrong-title {

        font-size: 17px;

        margin-bottom: 8px;
    }

    .wrong-text {

        font-size: 12px;

        margin-bottom: 18px;
    }

    .try-again-button {

        width: 135px;

        height: 34px;

        line-height: 34px;

        font-size: 10px;
    }
}
/* =========================================================
   REFERENCES
========================================================= */

.references {
    display: none;

    position: relative;

    width: 65%;
    max-width: 560px;

    margin-top: 40px;
    margin-left: 0;
    margin-right: auto;

    padding: 0;

    color: #FFFFFF;
    font-size: 11px;
    line-height: 1.5;

    text-align: left;

    z-index: 50;
}


/* REFERENCES TITLE */

.references-title {
    margin: 0 0 3px 0;
    color: #FFFFFF;
}


/* REFERENCE TEXT */

.reference-item {
    margin: 0 0 2px 0;
    color: #FFFFFF;
}


/* LINKS */

.references a,
.references a:hover,
.references a:visited,
.references a:active {
    color: #FFFFFF !important;
    text-decoration: none !important;
}
/* =========================================================
   RESPONSIVE - PORTRAIT
   Keep desktop design unchanged
========================================================= */

@media (orientation: portrait) {

    /* =====================================================
       HEADER
    ====================================================== */

    .game-header {
        height: 80px;
        padding: 12px 20px;
    }

    .header-left,
    .header-right {
        width: 130px;
    }

    .header-logo {
        max-width: 120px;
        max-height: 45px;
    }


    /* =====================================================
       GAME SECTION
    ====================================================== */

    .game-section {
        min-height: calc(100vh - 80px);
        padding: 20px 15px 30px;

        justify-content: flex-start;
    }


    /* =====================================================
       GAME BOARD
    ====================================================== */

    .game-board {
        width: min(92vw, 700px);

        height: auto;
        aspect-ratio: 1.55 / 1;

        max-width: 92vw;
        max-height: none;

        flex-shrink: 0;

        border-radius: 5px;
    }


    /* =====================================================
       ORIGINAL IMAGE
    ====================================================== */

    .full-image {
        width: 100%;
        height: 100%;

        object-fit: fill;
    }


    /* =====================================================
       RESTART BUTTON
    ====================================================== */

    .restart-button {
        margin-top: 20px;

        min-width: 180px;
        height: 42px;

        font-size: 14px;
        line-height: 42px;
    }


    /* =====================================================
       REFERENCES
    ====================================================== */

    .references {
        width: 92vw;
        max-width: 700px;

        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;

        font-size: 10px;
        line-height: 1.45;
    }
}


/* =========================================================
   PORTRAIT TABLET
========================================================= */

@media (orientation: portrait) and (min-width: 768px) {

    .game-header {
        height: 90px;
        padding: 15px 25px;
    }

    .header-left,
    .header-right {
        width: 160px;
    }

    .header-logo {
        max-width: 140px;
        max-height: 50px;
    }

    .game-section {
        padding: 25px 20px 35px;
    }

    .game-board {
        width: min(90vw, 720px);
        aspect-ratio: 1.55 / 1;
    }

    .restart-button {
        margin-top: 22px;
    }

    .references {
        width: min(90vw, 720px);
        font-size: 11px;
        line-height: 1.5;
        margin-top: 22px;
    }
}
/* =========================================================
   APPROVAL CODE
========================================================= */

.approval-code {
    display: none;

    position: fixed;

    right: 10px;
    bottom: 7px;

    color: #F3EDED;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 1;

    writing-mode: vertical-rl;
    transform: rotate(180deg);

    white-space: nowrap;

    z-index: 9999;

    pointer-events: none;
}

/* =========================================================
   PORTRAIT MOBILE
========================================================= */

@media (orientation: portrait) and (max-width: 767px) {

    .game-header {
        height: 70px;
        padding: 10px 15px;
    }

    .header-left,
    .header-right {
        width: 105px;
    }

    .header-logo {
        max-width: 95px;
        max-height: 38px;
    }


    .game-section {
        min-height: calc(100vh - 70px);

        padding: 15px 10px 25px;

        justify-content: flex-start;
    }


    .game-board {
        width: 92vw;

        height: auto;
        aspect-ratio: 1.55 / 1;

        max-width: 92vw;
        max-height: none;
    }


    .restart-button {
        min-width: 160px;

        height: 40px;
        margin-top: 18px;

        font-size: 13px;
        line-height: 40px;
    }


    .references {
        width: 92vw;

        margin-top: 18px;

        font-size: 9px;
        line-height: 1.4;
    }
}


/* =========================================================
   SMALL PORTRAIT PHONES
========================================================= */
/* =========================================================
   PORTRAIT SPACING - تنزيل الجيم والمراجع وتوزيع المسافات
========================================================= */

@media (orientation: portrait) {

    .game-section {
        justify-content: flex-start;
        padding-top: 14vh;      /* كبّر الرقم لو عايزه ينزل أكتر */
        padding-bottom: 40px;
    }

    .restart-button {
        margin-top: 28px;
    }

    .references {
        margin-top: 140px;
        margin-bottom: 20px;
    }

    .references-title {
        margin-bottom: 8px;
    }

    .reference-item {
        margin-bottom: 8px;
    }
}

@media (orientation: portrait) and (max-width: 767px) {

    .game-section {
        padding-top: 14vh;
        padding-bottom: 30px;
    }

    .restart-button {
        margin-top: 22px;
    }

    .references {
        margin-top: 100px;
    }
}