:root{
  --bg:#0e1e42;
  --bg2:#1c2541;
  --panel:#0f1c3f;
  --panel2:#162a56;
  --tangerine:#0284c7;
  --orange:#0ea5e9;
  --orange-light:#38bdf8;
  --cream:#e0f2fe;
  --white:#f0f9ff;
  --yellow:#38bdf8;
  --pink:#7dd3fc;
  --pink-light:#bae6fd;
  --brown:#030814;
  --brown2:#0a1128;
  --muted:#79a2c0;
  --shadow:6px 6px 0 var(--brown);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* =========================================================
   GENERAL
   ========================================================= */
body{
  margin:0;
  background:var(--bg);
  color:var(--cream);
  font-family:"Courier New",monospace;
  image-rendering:pixelated;
}
button,input{font:inherit}
button{cursor:pointer}

body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:999;
  background-image:
    linear-gradient(rgba(224,242,254,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(224,242,254,.035) 1px,transparent 1px);
  background-size:24px 24px;
}


/* 1. DAFTARKAN FONT */
@font-face {
    font-family: "PixelSplitter";
    src: url("PixelSplitter.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* =========================================================
   PIXEL STARS
   ========================================================= */
.stars,
.pixel-stars{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;

    z-index:0;
}
.star {
    position: absolute; width: 4px;height: 4px;background: var(--yellow);
    box-shadow:
        4px 0 var(--yellow),
        0 4px var(--yellow);
    animation:
        starFloat 5s steps(12, end) infinite;
}
@keyframes starFloat {

    0% {
        transform:
            translate(0, 0)
            rotate(0deg);

        opacity: .4;
    }

    25% {
        transform:
            translate(20px, -25px)
            rotate(90deg);

        opacity: 1;
    }

    50% {
        transform:
            translate(-15px, -50px)
            rotate(180deg);

        opacity: .7;
    }

    75% {
        transform:
            translate(30px, -25px)
            rotate(270deg);

        opacity: 1;
    }

    100% {
        transform:
            translate(0, 0)
            rotate(360deg);

        opacity: .4;
    }
}
.star:nth-child(2n) {
    animation-delay: -1.5s;
}

.star:nth-child(3n) {
    animation-delay: -3s;
}

.star:nth-child(4n) {
    animation-delay: -4s;
}



/* =========================================================
   MUSIC
   ========================================================= */
.music {
    position: fixed;

    top: 22px;
    right: 22px;

    z-index: 99999;

    width: 60px;
    height: 60px;

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

    padding: 0;

    background: #0284c7;
    color: #f0f9ff;

    border: 4px solid #0ea5e9;
    border-radius: 0;

    box-shadow:
        5px 5px 0 #030814;

    font-family: "Courier New", monospace;
    font-size:42px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform .12s steps(2, end),
        background .12s steps(2, end);
}

.music:hover {
    transform: translate(2px, 2px);

    box-shadow:
        3px 3px 0 #030814;
}

.music:active {
    transform: translate(5px, 5px);

    box-shadow: none;
}



/* =========================================================
   PASSWORD
   ========================================================= */
.password-screen{
  position:fixed;inset:0;z-index:20000;
  display:flex;align-items:center;justify-content:center;
  background:#0b132b;
}
.password-card{
  width:min(420px,88vw);padding:30px 24px;
  background:var(--panel);
  border:6px solid var(--orange);
  box-shadow:10px 10px 0 var(--brown);
  text-align:center;
}
.pixel-heart{font-size:70px;color:var(--pink);text-shadow:4px 4px 0 var(--brown);
    animation: heartBlink 1s steps(2, end) infinite;
    transform-origin: center;
}

@keyframes heartBlink {
    0%,
    40% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .3;
        transform: scale(.9);
    }

    60%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.eyebrow{font-weight:900;letter-spacing:2px;color:var(--yellow);font-size:12px}
.password-card h2,.wrap h2,h1{
  margin:14px 0;color:var(--cream);
  text-shadow:6px 6px 0 var(--brown);
  font-size:35px;
}
.password-card h2, .invitation-content h1{font-family: "PixelSplitter", "Courier New", monospace;}
.wrap h1,h2{font-family: "PixelSplitter", "Courier New", monospace;line-height: 1.1;}
.password-text,.password-note{color:var(--muted);line-height:1.6;font-size:13px}
.date-hint{color:var(--pink-light);font-weight:900;margin:18px 0;font-size:18px}
.pin-inputs{display:flex;justify-content:center;align-items:center;gap:9px}
.pin-inputs input{
  width:45px;height:52px;text-align:center;
  color:var(--cream);background:var(--panel2);
  border:4px solid var(--yellow);outline:none;
}
.pin-divider{color:var(--yellow);font-weight:900}
.password-error{display:none;color:var(--pink-light);font-weight:900;margin-top:15px}
.password-error.show{display:block}

.music{
  position:absolute;top:18px;right:18px;
  background:var(--yellow);color:var(--brown);
  border:4px solid var(--brown);box-shadow:4px 4px 0 var(--brown);
}

/* Ubah dari overflow: hidden menjadi visible atau hilangkan baris ini */
main {
    overflow: visible; 
}
section{
    position:relative;
    overflow:hidden;

    min-height:100vh;
    display:flex;
    align-items:center;
    padding:50px 20px;
}
.wrap{
    position:relative;
    z-index:2;

    width:min(900px,92vw);
    margin:auto;
    text-align:center;
}
h1{font-size:clamp(40px,8vw,78px);line-height:.95;color: #e0f2fe;}
.pink-marquee{
    overflow:hidden;
    width:100%;
}

.track{
    display:flex;
    width:max-content;
    gap:80px;

    animation:scrollRight 10s linear infinite;
}

.track span{
    color:#38bdf8;
    font-weight:bold;
    white-space:nowrap;
}

@keyframes scrollRight{
    from{
        transform:translateX(-50%);
    }
    to{
        transform:translateX(100%);
    }
}
span{color:#38bdf8}
p{
    font-size:15px;
    line-height:1.8;
    padding-inline:6px;
}
.small{color:var(--muted);font-size:13px}

.btn,.game-btn{
  border:5px solid var(--brown);
  background:var(--yellow);
  color:var(--brown);
  font-weight:900;
  box-shadow:6px 6px 0 var(--brown);
  padding:12px 18px;
  transition:transform .1s steps(2),box-shadow .1s steps(2);
}
.btn:hover,.game-btn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--brown)}
.card,.game-frame{
  background:var(--panel);
  border:6px solid var(--brown);
  box-shadow:10px 10px 0 var(--brown);
  padding:28px;
}
/* Mengubah background kotak gede (card) khusus di section LETTER */
#letter .card,
#wishes .card{
    background:var(--brown2); /* Ganti dengan kode warna pilihanmu */
    border-color: var(--brown); /* Ganti warna garis pinggir kotak */
}
.letter{text-align:left}
.ily{font-size:16px; text-align: center ;margin-top:28px;color:var(--orange);font-weight:bold}
.signature{font-size:16px;text-align:right ;margin-top:28px;color:var(--pink);font-weight:900}

/* =========================================================
  CALENDAR
========================================================= */
.pixel-calendar{width:max-content;max-width:100%;margin:0 auto 35px;text-align:center}
.calendar-title{font-weight:900;color:var(--yellow);letter-spacing:4px;margin-bottom:12px}
.date-row{display:flex;gap:10px;justify-content:center}
.date-card{
  width:90px;padding:12px 7px;
  background:var(--panel);
  border:5px solid var(--pink);
  box-shadow:5px 5px 0 var(--brown);
}
.date-number{display:block;color:var(--cream);font-size:23px;font-weight:900}
.date-label{display:block;margin-top:7px;color:var(--yellow);font-size:10px;font-weight:900;letter-spacing:2px}


/* =========================================================
   KADO
========================================================= */
.gift-screen{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;text-align:center;
  overflow:hidden;background:#0c1d38;
  transition:opacity 1s steps(8,end),transform 1s steps(8,end);
}
.gift-screen::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(224,242,254,.045) 2px,transparent 2px),
    linear-gradient(90deg,rgba(224,242,254,.045) 2px,transparent 2px);
  background-size:32px 32px;
}
.gift-screen.opened{opacity:0;transform:scale(1.05);pointer-events:none}
.gift-container{position:relative;z-index:2;cursor:pointer;user-select:none}
.gift-box{
  position:relative;
  width:176px;
  height:126px;
  margin:0 auto 28px;
  transform-style:preserve-3d;
  image-rendering:pixelated;
  animation:giftFloat 2.5s steps(4,end) infinite;
  zoom:1.3;
}
.gift-base{
  position:absolute;left:8px;right:8px;bottom:0;height:94px;
  background:var(--tangerine);border:6px solid var(--brown);
  border-radius:0;box-shadow:8px 8px 0 var(--brown);
}
.gift-base::before{
  content:"";position:absolute;left:10px;top:10px;width:12px;height:35px;
  background:var(--orange-light);
}
.gift-lid{
  position:absolute;left:0;right:0;top:12px;height:32px;
  background:var(--orange);border:6px solid var(--brown);border-radius:0;
  z-index:3;transform-origin:50% 100%;
  transition:transform .7s steps(5,end),opacity .3s steps(3,end);
  box-shadow:6px 6px 0 var(--brown);
}
.gift-container.opened .gift-lid{transform:translateY(-55px) rotateZ(-8deg)}
.gift-ribbon-v{
  position:absolute;left:50%;top:0;bottom:0;width:22px;
  transform:translateX(-50%);background:var(--yellow);
  border-left:4px solid #0284c7;border-right:4px solid #0284c7;z-index:4;
}
.gift-ribbon-h{
  position:absolute;left:0;right:0;top:26px;height:14px;
  background:var(--yellow);border-top:4px solid #0284c7;border-bottom:4px solid #0284c7;z-index:4;
}
.bow{position:absolute;top:-20px;left:50%;width:72px;height:38px;transform:translateX(-50%);z-index:5}
.bow::before,.bow::after{
  content:"";position:absolute;top:0;width:40px;height:30px;
  background:var(--yellow);border:5px solid var(--brown);border-radius:0;
}
.bow::before{right:30px;transform:rotate(20deg)}
.bow::after{left:30px;transform:rotate(-20deg)}
.gift-container.opened .bow{animation:bowOpen .75s steps(5,end) forwards}
@keyframes bowOpen{
  0%{transform:translateX(-50%) scale(1)}
  60%{transform:translateX(-50%) scale(1.12) rotate(-8deg)}
  100%{transform:translateX(-50%) scale(.85) rotate(-14deg) translateY(-10px);opacity:.25}
}
.gift-glow-inside{
  position:absolute;left:50%;top:38px;width:90px;height:70px;
  transform:translateX(-50%) scale(.3);
  background:var(--cream);opacity:0;z-index:1;
  transition:opacity .45s steps(4,end),transform .8s steps(5,end);
}
.gift-container.opened .gift-glow-inside{opacity: 0;transform: translateX(-50%) scale(.3);}
.gift-subtitle{margin:0;color:var(--pink-light);font-weight:900;letter-spacing:2px;font-size: 17px;}
.tap-text{margin-top:55px!important;color:var(--yellow)!important;font-weight:900!important;letter-spacing:2px;animation:blink 1.3s steps(2,end) infinite}
@keyframes blink{50%{opacity:.25}}
@keyframes giftFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.hero-heart{font-size:40px;color:var(--pink);margin:20px}



/* =========================================================
   MINI GAME — FINAL
========================================================= */

#game {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 70px 20px;
    background: #0b132b;
    overflow: hidden;
}

#game .wrap {
    width: min(900px, 92vw);
    margin: auto;
    text-align: center;
}

#game h2 {
    margin: 8px 0 10px;
    color: #f0f9ff;
    font-family: "PixelSplitter", "Courier New", monospace;
    font-size: clamp(28px, 6vw, 52px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 1px;
}

#game h2 .pink-text {
    color: #7dd3fc;
}

#game .game-intro {
    margin: 0 auto 22px;
    color: #e0f2fe;
    font-family: "Courier New", monospace;
    font-size: 13px;
    line-height: 1.7;
}

.game-hint{font-family: "Courier New", monospace;font-size: 12px;}

/* =========================
   CARD
========================= */

.game-frame {
    width: min(350px, 96vw);
    margin: 0 auto;
    padding: 16px;

    background: #0a1329;

    border: 5px solid #030814;

    box-shadow:
        7px 7px 0 #02050d;

    box-sizing: border-box;
}


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

.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 12px;
    padding-bottom: 10px;

    border-bottom: 3px solid #1c2541;

    font-family: "Courier New", monospace;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}

.game-level {
    color: #38bdf8;
}

.game-instruction {
    color: #79a2c0;
}


/* =========================
   BOARD
   8 x 8
   tile = 36px
========================= */

.game-board {
    position: relative;

    width: 288px;
    height: 288px;

    margin: 0 auto;

    box-sizing: border-box;

    background:#1c3d5a; 
    border: 5px solid #0284c7 ;

    box-shadow:
        inset 0 0 0 3px #030814;

    overflow: hidden;

    image-rendering: pixelated;
}


/* GRID */

.game-board::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(56, 189, 248, .12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(56, 189, 248, .12) 1px,
            transparent 1px
        );

    background-size: 36px 36px;

    pointer-events: none;

    z-index: 1;
}


/* =========================
   SNAIL / PLAYER
========================= */

.player {
    position: absolute;

    width: 36px;
    height: 36px;

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

    box-sizing: border-box;

    background: #0284c7;

    border: 4px solid #030814;

    color: #030814;

    font-family: "Courier New", monospace;
    font-size: 19px;

    line-height: 1;

    z-index: 5;

    image-rendering: pixelated;

    transition:
        left .08s steps(1),
        top .08s steps(1);
}

.heart-box{
  position:absolute;
  width:36px;height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#7dd3fc;
  border:4px solid var(--brown);
  color:#0284c7;
  font-size:20px;
  z-index:4;
}
/* =========================
   PINE / GOAL
========================= */

.game-goal {
    position: absolute;

    width: 36px;
    height: 36px;

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

    box-sizing: border-box;

    background: #0ea5e9;

    border: 4px solid #030814;

    color: #030814;

    font-size: 19px;

    line-height: 1;

    z-index: 3;

    image-rendering: pixelated;

    animation:
        goalPulse 1s steps(2, end) infinite;
}

@keyframes goalPulse {

    50% {
        transform: scale(.88);
    }
}


/* =========================
   ROCKS
========================= */

.rock {
    position: absolute;

    width: 36px;
    height: 36px;

    box-sizing: border-box;

    background: #0f223d;

    border: 4px solid #02050d;

    box-shadow:
        inset 4px 4px 0 #1e3a8a;

    z-index: 4;

    image-rendering: pixelated;

    transition:
        left .08s steps(1),
        top .08s steps(1);
}

.rock::before {
    content: "";

    position: absolute;

    left: 5px;
    top: 5px;

    width: 8px;
    height: 8px;

    background: #38bdf8;
}

.rock.pushed {
    background: #1e3a8a;

    box-shadow:
        inset 4px 4px 0 #0284c7;
}


/* =========================
   STATUS
========================= */

.game-status {
    min-height: 22px;

    margin-top: 14px;

    color: #38bdf8;

    font-family: "Courier New", monospace;

    font-size: 11px;

    font-weight: 900;

    line-height: 1.5;

    letter-spacing: 1px;
}

.game-status.win {
    color: #7dd3fc;

    animation:
        gameWinBlink .5s steps(2, end) infinite;
}

@keyframes gameWinBlink {

    50% {
        opacity: .45;
    }
}


/* =========================
   CONTROL BUTTONS
========================= */

.game-controls {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 5px;

    margin-top: 14px;
}

.game-controls-row {
    display: flex;
    gap: 5px;
}

.move-btn {
    width: 40px;
    height: 34px;

    padding: 0;

    background: #0284c7;

    border: 4px solid #030814;

    box-shadow:
        4px 4px 0 #02050d;

    color: #e0f2fe;

    font-family: "Courier New", monospace;

    font-size: 14px;
    font-weight: 900;

    cursor: pointer;

    border-radius: 0;

    transition:
        transform .08s steps(1),
        box-shadow .08s steps(1),
        background .08s steps(1);
}

.move-btn:hover {
    background: #38bdf8;
}

.move-btn:active,
.move-btn.pressed {
    transform: translate(4px, 4px);

    box-shadow: none;

    background: #38bdf8;

    color: #030814;
}


/* =========================
   ACTIONS
========================= */

.game-actions {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    margin-top: 16px;
}

.game-reset,
.game-next {
    width: 115px;
    height: 38px;

    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    background: #38bdf8;

    border: 4px solid #030814;

    box-shadow:
        4px 4px 0 #02050d;

    color: #030814;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .5px;

    cursor: pointer;

    border-radius: 0;

    image-rendering: pixelated;
}

.game-reset:hover,
.game-next:hover {
    background: #7dd3fc;
}

.game-reset:active,
.game-next:active {
    transform: translate(4px, 4px);

    box-shadow: none;
}


/* =========================
   NEXT
========================= */

.game-next {
    display: none;

    background: #7dd3fc;
}

.game-next.show {
    display: inline-flex !important;

    width: 115px;
    height: 38px;
}

@keyframes nextAppear {

    0% {
        opacity: 0;
        transform: translateY(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


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

@media (max-width: 500px) {

    #game {
        padding: 60px 10px;
    }

    .game-card {
        width: min(100%, 330px);
        padding: 12px;
    }

    .game-header {
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }

    .game-board {
        width: 288px;
        height: 252px;
    }
}



/* =========================================================
   ALBUM
========================================================= */
/* Container polaroid */
.polaroids {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 30px 0;
    perspective: 1000px;
}

/* Kartu Foto Polaroid Reaktif */
.photo {
    min-height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--cream);
    color: var(--brown);
    border: 6px solid var(--brown);
    box-shadow: 7px 7px 0 var(--brown);
    font-weight: 900;
    padding: 16px;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease;
}

/* Efek Hover: Membesar, Miring, dan Bayangan Naik */
.photo:hover {
    transform: translateY(-8px) scale(1.03) rotate(2deg);
    box-shadow: 12px 14px 0 var(--brown);
    z-index: 10;
}

.photo:nth-child(even):hover {
    transform: translateY(-8px) scale(1.03) rotate(-2deg);
}

.photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    border: 3px solid var(--brown);
    transition: filter 0.3s ease;
}

.photo:hover img {
    filter: brightness(1.05);
}

/* Modal Popup Lightbox saat foto diklik */
.photo-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(3, 8, 20, 0.85);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.photo-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.photo-modal-content {
    background: var(--cream);
    padding: 20px;
    border: 6px solid var(--brown);
    box-shadow: 12px 12px 0 var(--brown);
    max-width: 90vw;
    max-height: 85vh;
    text-align: center;
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.photo-modal.active .photo-modal-content {
    transform: scale(1);
}

.photo-modal img {
    max-width: 100%;
    max-height: 60vh;
    border: 4px solid var(--brown);
    object-fit: contain;
}

.photo-modal caption {
    display: block;
    margin-top: 12px;
    color: var(--brown);
    font-weight: 900;
    font-size: 16px;
}
.pixel-icon{font-size:40px;color:var(--tangerine)}
.promise{display:flex;gap:16px;text-align:left;padding:18px 0;border-bottom:3px dashed #1c3d5a}
.promise:last-child{border-bottom:0}
.promise .icon{color:var(--pink);font-size:25px;font-weight:900}
.promise b{color:var(--yellow);font: size 20px;font-family: "PixelSplitter", "Courier New", monospace; }
.pixel-cake{font-size:38px;color:var(--pink);letter-spacing:12px}

.footer{margin-top:70px;color:var(--yellow);font-weight:900;font-size:10px;letter-spacing:2px}

.fade{opacity:0;transform:translateY(18px);transition:opacity .6s steps(5),transform .6s steps(5)}
.fade.visible{opacity:1;transform:none}

/* =========================
   PIXEL BIRTHDAY CAKE
========================= */

.pixel-cake {
    position: relative;

    width: 180px;
    height: 170px;

    margin: 45px auto 0;

    image-rendering: pixelated;
}


/* FLAME */

.pixel-flame {
    position: absolute;

    left: 50%;
    top: 0;

    transform: translateX(-50%);

    width: 14px;
    height: 18px;

    color: #38bdf8;

    font-size: 17px;
    line-height: 18px;

    text-align: center;

    z-index: 10;

    animation:
        pixelFlame .7s steps(2) infinite;
}


/* CANDLE */

.pixel-candle {
    position: absolute;

    left: 50%;
    top: 21px;

    transform: translateX(-50%);

    width: 14px;
    height: 40px;

    background:
        repeating-linear-gradient(
            0deg,
            #0ea5e9 0 7px,
            #38bdf8 7px 14px
        );

    border:
        3px solid #030814;

    box-sizing: border-box;

    z-index: 8;
}


/* CANDLE WICK */

.pixel-candle span {
    position: absolute;

    left: 50%;
    top: -7px;

    width: 4px;
    height: 7px;

    transform: translateX(-50%);

    background: #030814;
}


/* CREAM */

.pixel-cream {
    position: absolute;

    left: 50%;
    top: 58px;

    transform: translateX(-50%);

    width: 116px;
    height: 16px;

    background: #e0f2fe;

    border:
        4px solid #030814;

    z-index: 7;
}


/* CREAM PIXEL DRIPS */

.pixel-cream::before {
    content: "";

    position: absolute;

    left: 12px;
    bottom: -10px;

    width: 12px;
    height: 10px;

    background: #e0f2fe;

    border-left: 4px solid #030814;
    border-right: 4px solid #030814;
    border-bottom: 4px solid #030814;
}

.pixel-cream::after {
    content: "";

    position: absolute;

    right: 15px;
    bottom: -7px;

    width: 10px;
    height: 7px;

    background: #e0f2fe;

    border-left: 4px solid #030814;
    border-right: 4px solid #030814;
    border-bottom: 4px solid #030814;
}


/* CAKE BODY */

.pixel-cake-body {
    position: absolute;

    left: 50%;
    top: 73px;

    transform: translateX(-50%);

    width: 124px;
    height: 57px;

    background: #0284c7;

    border:
        4px solid #030814;

    box-sizing: border-box;

    z-index: 5;
}


/* CAKE HIGHLIGHT */

.cake-highlight {
    position: absolute;

    left: 10px;
    top: 10px;

    width: 16px;
    height: 27px;

    background: #38bdf8;
}


/* CAKE SHADOW */

.cake-shadow {
    position: absolute;

    right: 8px;
    bottom: 8px;

    width: 18px;
    height: 20px;

    background: #0369a1;
}


/* LITTLE PIXEL DECORATIONS */

.pixel-cake-body::before {
    content: "•  •  •";

    position: absolute;

    left: 24px;
    top: 18px;

    color: #38bdf8;

    font-family:
        "Courier New",
        monospace;

    font-size: 14px;

    font-weight: 900;

    letter-spacing: 5px;
}


/* PLATE */

.pixel-plate {
    position: absolute;

    left: 50%;
    bottom: 17px;

    transform: translateX(-50%);

    width: 154px;
    height: 13px;

    background: #38bdf8;

    border:
        4px solid #030814;

    box-sizing: border-box;

    z-index: 3;
}


/* PIXEL SHADOW UNDER PLATE */

.pixel-plate::after {
    content: "";

    position: absolute;

    left: 8px;
    right: -8px;
    bottom: -8px;

    height: 5px;

    background: #030814;
}


/* FLAME ANIMATION */

@keyframes pixelFlame {

    0%,
    100% {
        transform:
            translateX(-50%)
            translateY(0);
    }

    50% {
        transform:
            translateX(-50%)
            translateY(-3px);
    }

}

.game-over {
    margin-bottom: 25px;

    font-family: "PixelSplitter", "Courier New", monospace;
    font-size: clamp(34px, 8vw, 64px);
    font-weight: 900;

    letter-spacing: 6px;

    color: #38bdf8;

    text-shadow:
        5px 5px 0 #030814;

    animation:
        gameOverBlink 1.5s steps(2, end) infinite;
}

@keyframes gameOverBlink {
    0%, 70% {
        opacity: 1;
    }

    71%, 100% {
        opacity: .45;
    }
}


/* INVITATION */
.invitation-screen{
    position:fixed;
    inset:0;
    z-index:20000;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:#0b132b;
}

.invitation-content{
    position:relative;
    z-index:2;
}

.invitation-photo{
    width:350px;
    height:300px;
    margin:0 auto 5px;
    animation:invitationFloat 3s steps(6,end) infinite;
}

.invitation-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

@keyframes invitationFloat{
    0%,100%{transform:translateY(0) rotate(-2deg)}
    50%{transform:translateY(-10px) rotate(2deg)}
}

.invitation-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    margin-top:30px;
}

.no-btn{
    padding:12px 24px;
    border:4px solid var(--brown);
    background:var(--cream);
    color:var(--brown);
    font-family:inherit;
    font-weight:900;
    cursor:pointer;
}


/* =========================================================
   DESKTOP LARGE (1025px+)
========================================================= */
@media (min-width:1025px){

    .wrap{
        width:min(900px,92vw);
    }

    #letter .card{
        width:100%;
        padding:16px;
        margin:auto;
    }


}

/* =========================================================
   LAPTOP / SMALL DESKTOP (769px - 1024px)
========================================================= */
@media (min-width:769px) and (max-width:1024px){

    section{
        padding:50px 24px;
    }

    .wrap{
        width:92%;
    }

    .card,
    #letter .card,
    #wishes .card{
        width:95%;
        margin:auto;
    }

    .game-board{
        width:288px;
        height:288px;
    }

}

/* =========================================================
   TABLET / IPAD (481px - 768px)
========================================================= */
@media (min-width:481px) and (max-width:768px){

    body{
        padding:8px;
    }

    section{
        padding:45px 18px;
    }

    .wrap{
        width:95%;
    }

    .card,
    #letter .card,
    #wishes .card{
        width:95%;
        padding:18px;
        margin:auto;
    }

    .date-card{
        width:78px;
    }

    .date-number{
        font-size:20px;
    }

    .polaroids{
    width:min(500px,100%);
    margin:30px auto;
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
}

.photo{
    width:100%;
    margin:0 auto;
}

    /* HERO tetap besar */
    #hero h1{
        font-size:68px;
    }

    h2{
        font-size:34px;
        line-height: 1.35;
    }

    p{
        font-size:15px;
        line-height:1.7;
    }

    /* GAME */
    .game-frame{
        width:min(370px,100%);
        padding:18px;
    }

    .game-board{
        width:288px;
        height:288px;
        margin:auto;
    }

}

/* =========================================================
   MOBILE (361px - 480px)
========================================================= */
@media (min-width:361px) and (max-width:480px){

    body{
        padding:0;
    }

    section{
        padding:40px 14px;
    }

    .wrap{
        width:100%;
    }

    .card,
    #letter .card,
    #wishes .card{
        width:100%;
        padding:16px;
    }

    /* HERO */
    #hero h1{
        font-size:58px;
    }

    h2{
        font-size:30px;
        line-height: 1.35;
    }

    /* tulisan paragraph biar gak mepet */
    p{
        font-size:15px;
        line-height:1.8;
        padding-inline:6px;
    }

    #letter .card p{
        font-size:15px;
        line-height:1.8;
    }

    /* Calendar */

    .date-row{
        gap:8px;
    }

    .date-card{
        width:72px;
    }

    /* Memories */

.polaroids{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
}

.photo{
    width:100%;
}

    /* GAME */

    .game-frame{
        width:100%;
        padding:14px;
        overflow:visible;
    }

    .game-board{
        width:288px;
        height:288px;
        margin:auto;
    }

    .game-controls{
        margin-top:16px;
    }

}

/* =========================================================
   SMALL MOBILE (<=360px)
========================================================= */
@media (max-width:360px){

    section{
        padding:35px 12px;
    }

    #hero h1{
        font-size:50px;
    }

    h2{
        font-size:22px;
        line-height: 1.35;
    }

    p{
        font-size:14px;
        line-height:1.8;
        padding-inline:4px;
    }

    .card,
    #letter .card,
    #wishes .card{
        padding:14px;
    }

    .date-card{
        width:66px;
    }

    .date-number{
        font-size:17px;
    }

    /* GAME */

    .game-frame{
        width:100%;
        padding:10px;
        overflow:visible;
    }

    .game-board{
        width:288px;
        height:288px;
        transform:scale(.92);
        transform-origin:center top;
        margin:auto;
    }

    .polaroids{
    grid-template-columns:1fr;
    gap:18px;
}
.game-over{
    font-size: 2rem;
    letter-spacing: 3px;
    margin-bottom: 18px;
}
}