/* The home page, measured on website_elements.psd (1920 wide).
   --u is one PSD pixel at the current width, so every size below is a PSD measurement.
   Colours are only the ones in banksouksawda.psd:
   #14310b #1d5010 #348019 #5ec548 #65bb52 #c7e9c0 #d1dacf #ffffff. */

@font-face {
    font-family: 'Arabic Pixel 2';
    src: url(../fonts/ArabicPixel2.woff2) format('woff2'),
        url(../fonts/ArabicPixel2.woff) format('woff');
    font-display: swap;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #14310b;
    color: #fff;
    font-family: 'Arabic Pixel 2', monospace;
}

img {
    display: block;
    image-rendering: pixelated;
}

/* Sentences: the design's 04b03 is not a web font, Tiny5 is the closest one.
   Arabic Pixel 2 stays for the capital-letter labels (nav, footer links). */
.land-text,
.land-copyright {
    font-family: 'Tiny5', 'Arabic Pixel 2', monospace;
}

a {
    color: inherit;
    text-decoration: none;
}

/* No underlines anywhere; a link only brightens on hover. */
a:hover {
    color: #fff;
}

.land-stage {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    container-type: inline-size;
}

.land-frame {
    --u: calc(100cqw / 1920);
    position: relative;
    overflow: hidden;
    background: #348019;
}

/* Side borders */
.land-frame::before,
.land-frame::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 5;
    width: calc(52 * var(--u));
    background: url(../images/claim/border-left.png) top / 100% auto repeat-y;
    image-rendering: pixelated;
}

.land-frame::before {
    left: 0;
}

.land-frame::after {
    right: 0;
    background-image: url(../images/claim/border-right.png);
}

/* Banknotes drifting down both sides, from under the header to the footer */
.land-notes {
    position: absolute;
    top: calc(325 * var(--u));
    bottom: 0;
    z-index: 1;
    width: calc(157 * var(--u));
    background: url(../images/elements/notes-left.png) 0 0 / 100% auto repeat-y;
    image-rendering: pixelated;
    pointer-events: none;
}

.land-notes-left {
    left: calc(86 * var(--u));
}

.land-notes-right {
    left: calc(1676 * var(--u));
    background-image: url(../images/elements/notes-right.png);
}

/* ---------- Header ---------- */

.land-header {
    position: relative;
    height: calc(325 * var(--u));
    background: url(../images/claim/bg-top.png) bottom / calc(16 * var(--u)) calc(136 * var(--u)) repeat-x, #14310b;
    image-rendering: pixelated;
}

.land-logo {
    position: absolute;
    left: calc(153 * var(--u));
    top: 0;
}

.land-logo img {
    width: calc(508 * var(--u));
    height: calc(160 * var(--u));
}

.land-nav {
    position: absolute;
    left: calc(765 * var(--u));
    top: calc(66 * var(--u));
    display: flex;
    gap: calc(78 * var(--u));
    font-size: calc(18.5 * var(--u));
    line-height: calc(28 * var(--u));
    color: #d1dacf;
}

/* The account icon, where the last of the design's three icons sits. */
.land-icons {
    position: absolute;
    left: calc(1721 * var(--u));
    top: calc(72 * var(--u));
}

.land-icons img {
    height: calc(22 * var(--u));
}

/* ---------- Game ---------- */

.land-hero {
    position: relative;
    height: calc(1115 * var(--u));
}

.land-hero-text {
    position: absolute;
    left: calc(274 * var(--u));
    top: calc(124 * var(--u));
    width: calc(700 * var(--u));
}

.land-hero-text h1 {
    margin: 0;
    font-family: 'Lexend', sans-serif;
    font-weight: 400;
    font-size: calc(43 * var(--u));
    line-height: calc(46 * var(--u));
}

/* The studded frame from the design. In the hero it holds the game, in the archive the video. */
.land-video {
    position: absolute;
    left: calc(1039 * var(--u));
    top: calc(80 * var(--u));
    width: calc(680 * var(--u));
    height: calc(400 * var(--u));
}

.land-video-inline {
    position: relative;
    left: auto;
    top: auto;
    margin: calc(40 * var(--u)) auto calc(56 * var(--u));
}

.land-screen {
    position: absolute;
    left: calc(20 * var(--u));
    top: calc(20 * var(--u));
    width: calc(640 * var(--u));
    height: calc(360 * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: #14310b;
}

.land-play {
    width: calc(374 * var(--u));
    height: calc(119 * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../images/claim/send.png) center / 100% 100% no-repeat;
    image-rendering: pixelated;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: calc(58 * var(--u));
}

.land-play:hover {
    color: #c7e9c0;
}

.land-video-frame {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.land-emblem {
    position: absolute;
    left: calc(349 * var(--u));
    top: calc(534 * var(--u));
    width: calc(396 * var(--u));
    height: calc(234 * var(--u));
}

/* The banker behind the table, with the fez cups and the coin */
.land-scene {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(539 * var(--u));
    height: calc(576 * var(--u));
    background: url(../images/claim/bg-bottom.png) 0 calc(273 * var(--u)) / calc(16 * var(--u)) calc(136 * var(--u)) repeat-x,
        linear-gradient(180deg, transparent calc(340 * var(--u)), #14310b calc(340 * var(--u)));
    image-rendering: pixelated;
}

.land-scene img {
    position: absolute;
}

.land-banker {
    left: calc(50% - 182 * var(--u));
    top: 0;
    width: calc(364 * var(--u));
    height: calc(576 * var(--u));
}

.land-table {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: calc(111 * var(--u));
    background: url(../images/elements/table.png) center top / auto calc(191 * var(--u)) repeat-x;
}

.land-cup {
    top: calc(396 * var(--u));
    z-index: 2;
    width: calc(156 * var(--u));
    height: calc(144 * var(--u));
}

.land-cup-left {
    left: calc(50% - 340 * var(--u));
}

.land-cup-right {
    left: calc(50% + 185 * var(--u));
}

.land-coin {
    left: calc(50% - 34 * var(--u));
    top: calc(470 * var(--u));
    z-index: 3;
    width: calc(68 * var(--u));
    height: calc(72 * var(--u));
}

/* ---------- About and Archive ---------- */

.land-section {
    padding: calc(110 * var(--u)) 0 calc(120 * var(--u));
}

.land-plate {
    width: calc(680 * var(--u));
    height: calc(151 * var(--u));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../images/elements/plate.png) center / 100% 100% no-repeat;
    image-rendering: pixelated;
    font-family: 'Lexend', sans-serif;
    font-weight: 400;
    font-size: calc(60 * var(--u));
}

.land-text {
    width: calc(1210 * var(--u));
    max-width: 100%;
    margin: calc(56 * var(--u)) auto 0;
    font-size: calc(28 * var(--u));
    line-height: calc(40 * var(--u));
    text-align: center;
    color: #d1dacf;
}

.land-text p {
    margin: 0 0 calc(28 * var(--u));
}

.land-text p:last-child {
    margin-bottom: 0;
}

.land-when {
    color: #fff;
}

/* ---------- Footer ---------- */

.land-footer {
    position: relative;
    z-index: 2;
    height: calc(660 * var(--u));
    background: url(../images/claim/bg-bottom.png) 0 0 / calc(16 * var(--u)) calc(136 * var(--u)) repeat-x,
        linear-gradient(180deg, #348019 calc(68 * var(--u)), #14310b calc(68 * var(--u)));
    image-rendering: pixelated;
    font-size: calc(18.5 * var(--u));
    line-height: calc(24 * var(--u));
    color: #d1dacf;
}

.land-footer > * {
    position: absolute;
    margin: 0;
}

.land-building {
    left: calc(165 * var(--u));
    bottom: 0;
    width: calc(736 * var(--u));
    height: calc(494 * var(--u));
}

.land-links {
    left: calc(960 * var(--u));
    top: calc(280 * var(--u));
    padding: 0;
    list-style: none;
}

.land-links li {
    height: calc(48 * var(--u));
}

.land-follow {
    left: calc(1459 * var(--u));
    top: calc(283 * var(--u));
}

.land-follow img {
    height: calc(22 * var(--u));
}

.land-copyright {
    left: calc(1460 * var(--u));
    top: calc(602 * var(--u));
    font-size: calc(20 * var(--u));
}

/* ---------- Phones: same pieces, stacked and enlarged ---------- */

@media (max-width: 700px) {
    .land-frame {
        --u: calc(100cqw / 860);
    }

    .land-frame::before,
    .land-frame::after {
        width: calc(30 * var(--u));
    }

    .land-notes {
        display: none;
    }

    .land-header {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(30 * var(--u));
        padding: 0 calc(50 * var(--u)) calc(170 * var(--u));
    }

    .land-logo,
    .land-nav,
    .land-icons {
        position: static;
    }

    .land-nav {
        justify-content: center;
        gap: calc(60 * var(--u));
        font-size: calc(30 * var(--u));
        line-height: calc(40 * var(--u));
    }

    .land-icons img {
        height: calc(34 * var(--u));
    }

    .land-hero {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(50 * var(--u));
        padding-top: calc(50 * var(--u));
    }

    .land-hero-text,
    .land-video,
    .land-emblem,
    .land-scene {
        position: relative;
        left: auto;
        top: auto;
    }

    .land-hero-text {
        width: auto;
        padding: 0 calc(70 * var(--u));
        text-align: center;
    }

    .land-hero-text h1 {
        font-size: calc(60 * var(--u));
        line-height: calc(66 * var(--u));
    }

    .land-scene {
        width: 100%;
    }

    .land-section {
        padding: calc(90 * var(--u)) calc(50 * var(--u)) calc(110 * var(--u));
    }

    .land-plate {
        max-width: 100%;
    }

    .land-text {
        font-size: calc(34 * var(--u));
        line-height: calc(46 * var(--u));
    }

    .land-footer {
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: calc(50 * var(--u)) calc(120 * var(--u));
        padding: calc(190 * var(--u)) calc(60 * var(--u)) 0;
        font-size: calc(30 * var(--u));
        line-height: calc(36 * var(--u));
    }

    .land-footer > * {
        position: static;
    }

    .land-links li {
        height: calc(56 * var(--u));
    }

    .land-follow img {
        height: calc(34 * var(--u));
    }

    .land-copyright {
        width: 100%;
        text-align: center;
        font-size: calc(30 * var(--u));
    }

    .land-building {
        order: 1;
        width: calc(736 * var(--u));
        max-width: 100%;
        height: auto;
    }
}