/* ========================================================= */
/* ====================== LOCAL FONTS ===================== */
/* ========================================================= */

/* Shampoos Font - Main Menu Font */
@font-face {
    font-family: 'Shampoos';
    src: url('../assets/font/Shampoos-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ========================================================= */
/* ====================== GLOBAL LAYOUT ==================== */
/* ========================================================= */

/* Global Overlay Filter */
.filter {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url('../assets/hud/filter.png') no-repeat center center;
    background-size: cover;
    pointer-events: none;
    z-index: 9999;
}

/* ========================================================= */
/* ==================== WELCOME SCREEN ===================== */
/* ========================================================= */

.welcome-screen {
    position: fixed;
    inset: 0;
    z-index: 50000;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
}

.welcome-card {
    position: relative;
    width: min(100vw, 100vh, 1200px);
    height: min(100vw, 100vh, 900px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.welcome-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

/* Hide welcome background when showing ID Card */
.welcome-panel .welcome-bg {
    display: none;
}

.welcome-content {
    position: relative;
    z-index: 2;
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 5%;
    box-sizing: border-box;
}

.welcome-text {
    font-family: 'Shampoos';
    font-size: min(3vmin, 25px);
    color: #000000;
    margin-bottom: 4vmin;
    line-height: 1.5;
}

.welcome-buttons {
    display: flex;
    gap: 4vmin;
    justify-content: center;
}

.welcome-btn {
    font-family: 'Shampoos';
    font-size: min(4vmin, 32px);
    padding: 1.5vmin 4vmin;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.welcome-yes {
    background-color: #4a7c59;
    color: white;
    box-shadow: 0 4px 0 #2a4a35;
}

.welcome-no {
    background-color: #7c4a4a;
    color: white;
    box-shadow: 0 4px 0 #4a2a2a;
}

.welcome-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.welcome-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #2a4a35;
}

.welcome-delete {
    background-color: #7c4a4a;
    color: white;
    box-shadow: 0 4px 0 #4a2a2a;
}

.welcome-delete:hover {
    background-color: #9a5a5a;
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.welcome-delete:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #4a2a2a;
}

/* Welcome Panel (returning player) */
.welcome-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3vmin;
    width: 100%;
}

/* Name Panel (first time) */
.name-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3vmin;
    width: 100%;
}

.welcome-input {
    font-family: 'Shampoos';
    font-size: min(4vmin, 32px);
    padding: 1.5vmin 2vmin;
    width: 80%;
    text-align: center;
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid #6a4a2a;
    border-radius: 12px;
    outline: none;
}

.welcome-input:focus {
    border-color: #4a7c59;
    box-shadow: 0 0 8px rgba(74, 124, 89, 0.5);
}

/* Tutorial Prompt Panel */
.tutorial-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3vmin;
    width: 100%;
}

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

.id-card-container {
    position: relative;
    width: min(100cqi, 500px);
    aspect-ratio: 16 / 11;
    container-type: inline-size;
    margin-bottom: 3vmin;
}

.id-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

.id-card-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

/* ==================== ID CARD BUTTONS ==================== */

/* ID Card specific buttons container */
.id-card-buttons {
    display: flex;
    justify-content: center;
    gap: clamp(12px, 3vmin, 32px);
    margin-top: clamp(-50px, -10vmin, -30px);
    width: 100%;
}

/* ID Card buttons styling */
.id-card-buttons .welcome-btn {
    font-family: 'Shampoos';
    font-size: clamp(14px, 6vmin, 24px);
    padding: clamp(8px, 1.5vmin, 16px) clamp(20px, 4vmin, 45px);
    border: none;
    border-radius: clamp(6px, 1vmin, 12px);
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
    min-width: clamp(100px, 18vmin, 180px);
}

.id-card-buttons .welcome-yes {
    background-color: #4a7c59;
    color: white;
    box-shadow: 0 clamp(3px, 0.6vmin, 6px) 0 #2a4a35;
}

.id-card-buttons .welcome-delete {
    background-color: #7c4a4a;
    color: white;
    box-shadow: 0 clamp(3px, 0.6vmin, 6px) 0 #4a2a2a;
}

.id-card-buttons .welcome-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.id-card-buttons .welcome-btn:active {
    transform: translateY(2px);
}

.id-card-buttons .welcome-yes:active {
    box-shadow: 0 2px 0 #2a4a35;
}

.id-card-buttons .welcome-delete:active {
    box-shadow: 0 2px 0 #4a2a2a;
}

/* ========== AVATAR SECTION ========== */
.id-card-avatar {
    position: absolute;
    top: 13cqi;
    left: 7cqi;
    width: 25cqi;
    height: 25cqi;
}

.id-card-avatar-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.id-card-edit-btn {
    position: absolute;
    bottom: 2cqi;
    right: -5cqi;
    width: 6cqi;
    height: 6cqi;
    cursor: pointer;
    transition: transform 0.2s ease;
    z-index: 3;
}

.id-card-edit-btn:hover {
    transform: scale(1.1);
}

/* ========== NAME SECTION ========== */
.id-card-name {
    position: absolute;
    top: 38cqi;
    left: 15cqi;
    font-family: 'Shampoos';
    font-size: 5cqi;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    font-weight: bold;
    white-space: nowrap;
}

/* ========== BADGES SECTION ========== */
.id-card-rank-container {
    position: absolute;
    top: 22cqi;
    left: 36cqi;
    width: 54cqi;
}

.rank-badge {
    position: absolute;
    top: -23cqi;
    left: 12cqi;
    width: 30cqi;
    object-fit: fill;
}

.rank-bar-container {
    width: 100%;
    height: 8px;
    background-color: #000000;
    border-radius: 4px;
    overflow: hidden;
}

.rank-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(-90deg, #00ff48, #45ff80);
    transition: width 0.5s ease;
}

.id-card-badges {
    position: absolute;
    top: 27cqi;
    left: 43cqi;
    display: flex;
    align-items: center;
    gap: 3cqi;
}

.id-card-legacy-badge {
    width: 18cqi;
    height: auto;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
}

.id-card-record-number {
    position: absolute;
    top: 12cqi;
    left: 9cqi;
    transform: translateX(-50%);
    font-family: 'Shampoos';
    font-size: 5cqi;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    white-space: nowrap;
    z-index: 5;
}

.id-card-streak-wrapper {
    position: relative;
    width: 18cqi;
    height: 18cqi;
    display: flex;
    justify-content: center;
    align-items: center;
}

.id-card-streak-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

.id-card-streak-number {
    position: absolute;
    font-family: 'Shampoos';
    font-size: 5cqi;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    z-index: 2;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.id-card-streak-fire {
    position: absolute;
    width: 70%;
    height: 70%;
    object-fit: contain;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.id-card-hardcore-wrapper{
    position: relative;
    top: 41cqi;
    left: 5cqi;
    width: 18cqi;
    height: 18cqi;
    display: flex;
    justify-content: center;
    align-items: center;
}

.id-card-hardcore-badge{
    width: 12cqi;
    height: auto;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
}

.id-card-hardcore-number{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Shampoos';
    font-size: 5cqi;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    white-space: nowrap;
    z-index: 5;
}

.id-card-dailyrecord-wrapper{
    position: relative;
    top: 24cqi;
    left: 18cqi;
    width: 16cqi;
    height: 16cqi;
    display: flex;
    justify-content: center;
    align-items: center;
}

.id-card-dailyrecord-badge{
    width: 12cqi;
    height: auto;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
}

.id-card-dailyrecord-number{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Shampoos';
    font-size: 5cqi;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    white-space: nowrap;
    z-index: 5;
}

/* ========================================================= */
/* ==================== AVATAR SELECTOR ==================== */
/* ========================================================= */

.avatar-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3vmin;
    width: 100%;
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3vmin;
    justify-items: center;
    align-items: center;
}

.avatar-option {
    width: 15vmin;
    height: 15vmin;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.avatar-option:hover {
    transform: scale(1.1);
    filter: brightness(1.1);
}

.avatar-option.selected {
    border-color: #ffd78c;
    box-shadow: 0 0 12px rgba(255,215,140,0.8);
    background: rgba(0,0,0,0.5);
}

/* ========================================================= */
/* ==================== BODY STYLES ======================== */
/* ========================================================= */

body {
    margin: 0;
    height: 100vh;
    background: url('../assets/hud/NuclearSticMines.png') no-repeat center center fixed;
    background-size: cover;
    font-family: "Shampoos";
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ========================================================= */
/* ===================== MAIN MENU UI ====================== */
/* ========================================================= */

.overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    padding: 2vmin;
    box-sizing: border-box;
}

/* ==================== CORNER LOGO / Version ==================== */

.cloud {
    position: fixed;
    bottom: 3vmin;
    left: 3vmin;
    width: 15vmin;
    z-index: 2;
}

.id-card-toggle-btn {
    position: fixed;
    top: 3vmin;
    left: 3vmin;
    width: 15vmin;
    z-index: 2;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.id-card-toggle-btn:hover {
    filter: brightness(1.25) drop-shadow(0 0 8px rgba(255,255,200,0.7));
    transform: scale(1.05);
}

.id-card-toggle-btn:active {
    filter: brightness(0.75);
    transform: scale(0.95);
}

.version {
    position: fixed;
    bottom: 3vmin;
    right: 3vmin;
    width: 15vmin;
    z-index: 2;
    font-size: 6vmin;
    color: white;
    opacity: 60%;
}

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

.top-bar {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2vh;
}

.logo {
    width: 45vmin;
    max-width: 400px;
    height: auto;
}

.legacy-button {
    position: absolute;
    top: 50%;
    left: -12vmin;
    width: 25vmin;
    height: 10vmin;
    background: url('../assets/hud/menu/legacy.png') no-repeat center;
    background-size: contain;
    filter: brightness(1.15) drop-shadow(0 0 8px rgba(255, 255, 0, 0.7));
    cursor: pointer;
    z-index: 10;
}

/* ==================== MODE BUTTONS ==================== */

.daily-button,
.custom-button {
    width: 75vmin;
    max-width: 400px;
    height: 18vmin;
    max-height: 140px;
    margin: 1vmin auto;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: pre-line;
    padding-left: 12vmin;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 3.5vmin;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.daily-button { background-image: url('../assets/hud/menu/daily.png'); }
.custom-button { background-image: url('../assets/hud/menu/custom.png'); }

/* ==================== BOTTOM ACTION BUTTONS ==================== */

.bottom-row {
    margin-top: 2vh;
    display: flex;
    justify-content: center;
    gap: 2vmin;
}

.diary-button,
.option-button {
    width: 25vmin;
    max-width: 210px;
    height: 12vmin;
    max-height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.diary-button { 
    background-image: url('../assets/hud/menu/diary.png'); 
    display: none;
}

.option-button { 
    background-image: url('../assets/hud/menu/options.png');
    display: block; 
}

/* ==================== GLOBAL BUTTON EFFECTS ==================== */

.legacy-button:hover,
.daily-button:hover,
.custom-button:hover,
.diary-button:hover,
.option-button:hover,
.id-card-toggle-btn:hover {
    filter: brightness(1.25) drop-shadow(0 0 8px rgba(255,255,200,0.7));
    transform: scale(1.05);
}

.legacy-button:active,
.daily-button:active,
.custom-button:active,
.diary-button:active,
.option-button:active,
.id-card-toggle-btn:active {
    filter: brightness(0.75);
    transform: scale(0.95);
}

/* ========================================================= */
/* ==================== PUNCHCARD OVERLAY ================== */
/* ========================================================= */

/* Punchcard Screen Container */
#punchcard-screen {
    position: fixed;
    inset: 0;
    z-index: 10000; /* Above everything, including filter */
    background: rgba(0, 0, 0, 0.7); /* Darkens background to highlight the card */
    display: none; /* Activated with .active via JS */
    justify-content: center;
    align-items: center;
    overflow: hidden;
    touch-action: none;
}

/* Active State for Punchcard Screen (First Definition) */
#punchcard-screen.active {
    display: flex;
}

/* Secondary Definition with Fade Effect */
#punchcard-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    
    /* Centering */
    display: flex; 
    justify-content: center;
    align-items: center;
    
    /* FADE EFFECT */
    opacity: 0;
    pointer-events: none; /* Prevents clicks when invisible */
    transition: opacity 0.7s ease, visibility 0.7s;
    visibility: hidden;
}

/* Active State with Fade Effect */
#punchcard-screen.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Re-enables clicks */
}

/* ========================================================= */
/* ====================== PUNCHCARD BASE =================== */
/* ========================================================= */

/* Punchcard Main Container */
.punchcard {
    position: relative; /* Changed to relative so parent flex centers it */
    width: 800px;
    height: 500px;
    flex-shrink: 0; /* Prevents deformation */
    
    /* This variable is controlled via JS to scale the whole card on mobile */
    transform: scale(var(--pc-scale, 1));
    transform-origin: center center;
    transition: transform 0.1s ease-out;
    container-type: inline-size;
}

/* Punchcard Background Base Image */
.pc-base {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

/* ========================================================= */
/* ======================= TITLES ========================== */
/* ========================================================= */

/* Daily and Custom Title Images */
.pc-title,
.pct-title {
    position: absolute;
    top: 20px;    /* Adjusted to be at the top of the card */
    left: 150px;
    width: 600px; /* Adjust based on your title image size */
    z-index: 5;
    display: none; 
}

/* Daily Mode Title Display */
#punchcard-screen.daily-mode .pc-title { display: block; }

/* Custom Mode Title Display */
#punchcard-screen.custom-mode .pct-title { display: block; }

/* ========================================================= */
/* ===================== DATE & SEED ======================= */
/* ========================================================= */

/* Date Note Icon */
.pc-date {
    position: absolute;
    top: 5px;
    left: -120px;
    width: 250px;
    z-index: 3;
}

/* Dynamic Date Text */
.pc-date-note {
    position: absolute;
    top: 106px;
    left: -10px; /* Adjusted to fall inside the note image */
    transform: rotate(20deg);
    font-size: 30px;
    z-index: 4;
}

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

/* Close Button Image */
.pc-close {
    position: absolute;
    top: -20px;   /* Sticks out a bit for visibility */
    right: -20px;
    width: 100px;
    cursor: pointer;
    z-index: 10;
}

/* Close Button Hover Effect */
.pc-close:hover {
    filter: brightness(1.25);
    transform: scale(1.05);
}

/* Close Button Active Effect */
.pc-close:active {
    filter: brightness(0.75);
    transform: scale(0.95);
}

/* ========================================================= */
/* =================== PUNCHCARD ELEMENTS ================== */
/* ========================================================= */

/* Common Styles for All Config Sections */
.pc-char, .pc-size, .pc-hazards, .pc-obstacles, .pc-wanted, .pc-zone {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 4;
    
    /* SIZE LOCK: Prevents the group from changing height when select appears/disappears */
    width: 140px; 
    height: 150px; 
}

/* Section Positions - Keeping original coordinates */
.pc-char      { top: 170px; left: 100px; }
.pc-size      { top: 180px; left: 260px; }
.pc-hazards   { top: 190px; left: 450px; }
.pc-obstacles { top: 200px; left: 610px; }
.pc-wanted    { bottom: 30px; left: 160px; } /* Adjusted to give space for select */
.pc-zone      { bottom: 20px; left: 510px; }

/* Section Labels */
.pc-label {
    height: 30px; /* Fixed height for label */
    margin-bottom: 5px;
    font-size: 25px;
    display: flex;
    align-items: center;
}

/* Section Icon Images */
.pc-char img, .pc-size img, .pc-hazards img,
.pc-obstacles img, .pc-wanted img, .pc-zone img {
    width: 80px;
    height: 80px; /* Fixed height for icon */
    object-fit: contain;
    margin-bottom: 5px;
}

/* ==================== SELECT DROPDOWNS ==================== */

/* Select/Dropdown Styles */
.punchcard select {
    position: absolute; /* Removed from flow so it doesn't push anything */
    bottom: 0;         /* Sticks to the bottom of its 150px container */
    font-family: 'Indie Flower', cursive;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #000;
    border-radius: 5px;
    width: 90%;        /* Prevents overflow */
}

/* Hidden Helper Class */
.hidden {
    display: none !important;
}

/* ==================== CUSTOM SELECT STYLES ==================== */

/* Custom Styled Dropdowns */
.punchcard select {
    /* Removing default browser styling */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* Font and Text */
    font-family: 'Indie Flower', bold;
    font-size: 18px;
    color: #000000;
    text-align: center;
    
    /* Background and Borders (Paper/stain style) */
    background-color: rgba(255, 227, 179, 0.6);
    background-image: url('assets/hud/menu/select_arrow.png');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px;
    
    border: 2px solid #ffffff;
    border-radius: 15px 5px 12px 4px;
    
    padding: 5px 25px 5px 10px;
    cursor: pointer;
    outline: none;
    transition: transform 0.2s ease, background-color 0.2s;
}

/* Select Dropdown Hover Effect */
.punchcard select:hover {
    background-color: rgba(255, 255, 255, 0.9);
    transform: rotate(-1deg) scale(1.02);
}

/* Select Option Styles */
.punchcard select option {
    font-family: "Indie Flower", bold;
    background-color: #d6c794;
    color: #000000;
}

/* ========================================================= */
/* ===================== START BUTTON ====================== */
/* ========================================================= */

/* Start Game Button */
.pc-start {
    position: absolute;
    bottom: 50px;
    left: 340px; /* Centered in the empty space you left */
    width: 120px;
    cursor: pointer;
    z-index: 5;
}

/* Start Button Hover Effect */
.pc-start:hover {
    filter: brightness(1.25);
    transform: scale(1.05);
}

/* Start Button Active Effect */
.pc-start:active {
    filter: brightness(0.75);
    transform: scale(0.95);
}

/* ========================================================= */
/* ===================== ANIMATIONS ======================== */
/* ========================================================= */

/* Icon Fade-In Entry Animation */
@keyframes iconFade {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Temporary Animation Class Applied via JS */
.icon-react {
    animation: iconFade 0.3s ease-out;
}

/* ========================================================= */
/* ==================== SEED LABEL TOP ===================== */
/* ========================================================= */

.pc-seed-label-top {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: rotate(-50deg);
    transform: translateX(-50%);
    font-family: 'Shampoos';
    font-size: 5cqi;
    color: #ffffffba;
    padding: 0.3vmin 2vmin;
    border-radius: 20px;
    white-space: nowrap;
    z-index: 12;
    cursor: pointer;
    pointer-events: auto;
}

/* ========================================================= */
/* ================= LEGACY BADGE SECTION ================== */
/* ========================================================= */

.legacy-badge-container {
    position: absolute;
    top: 26%;
    left: -5%;
    transform: rotate(20deg);
    z-index: 6;
}

.badge-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.badge-img {
    width: 10cqi;
    height: auto;
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.6));
}

.badge-label {
    position: absolute;
    bottom: 10%; 
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Shampoos', sans-serif;
    color: #fff;
    font-size: 3cqi;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    white-space: nowrap;
    z-index: 2;
}

/* ========================================================= */
/* ================= DAILY STREAK BADGE ==================== */
/* ========================================================= */

.daily-badge-container {
    position: absolute;
    top: 25%;
    left: -6%;
    transform: rotate(20deg);
    z-index: 6;
}

.daily-streak-wrapper {
    position: relative;
    width: 14cqi;
    height: 14cqi;
    display: flex;
    justify-content: center;
    align-items: center;
}

.daily-streak-number {
    position: absolute;
    top: 53%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Shampoos', sans-serif;
    color: #fff;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    font-size: 5cqi;
    z-index: 2;
}

.daily-fire-img {
    position: absolute;
    width: 70%;
    height: 70%;
    object-fit: contain;
    z-index: 1;
}

/* ========================================================= */
/* ================ SEED/KEYCHAIN BUTTON =================== */
/* ========================================================= */

.pc-seed-button-container {
    position: absolute;
    bottom: -1%;
    right: -3%;
    z-index: 7;
}

.pc-seed-btn {
    width: 12cqi;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s ease;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
}

.pc-keychain-button-container {
    position: absolute;
    bottom: 19%;
    right: -4%;
    z-index: 6;
}

.pc-keychain-btn {
    width: 12cqi;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s ease;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
}

.pc-seed-btn:hover {
    transform: scale(1.1);
    filter: brightness(1.1);
}
.pc-keychain-btn:hover {
    transform: scale(1.1);
    filter: brightness(1.1);
}

.pc-seed-btn:active {
    filter: brightness(0.75);
    transform: scale(0.95);
}
.pc-keychain-btn:active {
    filter: brightness(0.75);
    transform: scale(0.95);
}

/* ========================================================= */
/* ==================== CUSTOM DICE BADGE ================== */
/* ========================================================= */

.custom-dice-container {
    position: absolute;
    top: 25%;
    left: -5%;
    transform: rotate(20deg);
    display: flex;
    z-index: 6;
}

.custom-dice-btn {
    width: 12cqi;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.custom-dice-btn:hover {
    transform: scale(1.1);
    filter: brightness(1.1);
}

.custom-dice-btn:active {
    filter: brightness(0.75);
    transform: scale(0.95);
}