@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Press+Start+2P&display=swap');

:root {
    --primary-color: #2c3e50; /* Deep Slate Blue */
    --secondary-color: #3498db; /* Bright Blue */
    --accent-color: #e67e22; /* Carrot Orange */
    --background-color: #ecf0f1; /* Light Silver */
    --card-background-color: #ffffff; /* White */
    --border-color: #dfe6e9; /* Light Grey Blue */
    --text-color: #34495e; /* Wet Asphalt */
    --text-light-color: #7f8c8d; /* Medium Grey */
    --success-color: #2ecc71; /* Emerald Green */
    --danger-color: #e74c3c; /* Alizarin Crimson */
    --warning-color: #f39c12; /* Orange */
    --neutral-color: #95a5a6; /* Concrete Grey */

    /* --- FONT FAMILIES --- */
    --font-family-main: 'Roboto', sans-serif;
    --font-family-pixel: 'Press Start 2P', cursive;

    /* --- PIXEL STYLE THEME --- */
    --pixel-shadow: 3px 3px 0px 0px var(--primary-color);
    --pixel-shadow-hover: 5px 5px 0px 0px var(--primary-color);
    --border-radius-pixel: 4px;
    --border-pixel: 2px solid var(--primary-color);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family-main);
    background-image: url('beijing.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--text-color);
    line-height: 1.6;
    font-size: 16px;
    padding-top: 20px;
    padding-bottom: 50px;
}

#cover-page {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('2.jpg');
    background-size: cover; background-position: center; background-repeat: no-repeat;
    display: flex; justify-content: center; align-items: center; text-align: center;
    z-index: 2000;
    transition: opacity 0.5s ease-out, visibility 0.5s;
    color: white; padding: 20px;
}
#cover-page.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.cover-content { position: relative; background: none; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; width: 80vw; max-width: 800px; aspect-ratio: 16 / 9; }
#start-game-btn { position: fixed; right: 40px; bottom: 40px; z-index: 2001; background-color: var(--accent-color); color: white; padding: 24px 50px; font-size: 1rem; font-family: var(--font-family-pixel); }
#start-game-btn:hover { background-color: #d35400; }

#game-container.hidden { display: none; }
#game-container { max-width: 1200px; margin: 0 auto; padding: 20px; background-color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 12px; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); }

header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); gap: 20px; }
#header-main { flex-grow: 1; }
header h1 { font-family: var(--font-family-pixel); color: var(--primary-color); font-size: 1.8rem; margin-bottom: 15px; text-align: left; }
header p { color: var(--text-light-color); font-size: 0.9rem; text-align: left; }

#user-area { display: flex; align-items: center; gap: 10px; padding-top: 10px; flex-shrink: 0; }
.user-welcome { font-family: var(--font-family-pixel); font-size: 0.7rem; margin-right: 10px; white-space: nowrap; }
.user-area-btn { padding: 8px 15px; font-size: 0.7rem; background-color: var(--primary-color); color: white; }

#main-game-content.hidden { display: none; }

#status-bar { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 15px 20px; 
    background-color: var(--background-color); 
    border-radius: var(--border-radius-pixel); 
    margin-bottom: 25px; 
    border: var(--border-pixel); 
    box-shadow: var(--pixel-shadow);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 900;
}
#status-bar div { font-family: var(--font-family-pixel); font-size: 0.8rem; font-weight: 500; display: flex; align-items: center; }
#round-info::before { content: '📅'; margin-right: 10px; font-size: 1.5em; }
#cash-info::before { content: '💰'; margin-right: 10px; font-size: 1.5em; }
#round-info { color: var(--primary-color); }
#cash-info { color: var(--success-color); }

#story-notification { background-color: rgba(233, 236, 239, 0.9); padding: 15px 20px; margin-bottom: 30px; border-radius: var(--border-radius-pixel); border: 2px solid var(--secondary-color); box-shadow: 2px 2px 0 var(--secondary-color); font-size: 0.9rem; }
#story-notification strong { color: var(--primary-color); }

#companies-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 25px; margin-bottom: 30px; }
.company-card { background-color: var(--card-background-color); border-radius: var(--border-radius-pixel); box-shadow: var(--pixel-shadow); border: var(--border-pixel); padding: 20px; display: flex; flex-direction: column; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
.company-card:hover { transform: translate(-4px, -4px); box-shadow: var(--pixel-shadow-hover); }

.card-header { margin-bottom: 15px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
.card-header h2 { font-family: var(--font-family-pixel); color: var(--primary-color); font-size: 1rem; margin-bottom: 5px; }
.round-name { font-size: 0.8rem; color: var(--text-light-color); background-color: #f0f0f0; padding: 3px 8px; border-radius: 3px; display: inline-block; }

.card-content-button-only { display: flex; align-items: center; justify-content: center; flex-grow: 1; min-height: 180px; }
.card-content-with-image { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; flex-grow: 1; min-height: 180px; }
.company-building-img { max-height: 120px; max-width: 90%; object-fit: contain; }

.valuation, .funding-cap { font-weight: 500; margin-bottom: 8px; font-size: 0.9rem; color: var(--accent-color); }
.funding-cap { color: var(--text-light-color); font-size: 0.8rem; }
.investment-area { margin-top: 15px; padding-top: 15px; border-top: 1px dashed var(--border-color); }
.investment-area label { display: block; margin-bottom: 5px; font-weight: 500; color: var(--primary-color); font-size: 0.9rem; }
.investment-input { width: 100%; padding: 10px; border: 2px solid var(--border-color); border-radius: var(--border-radius-pixel); font-family: monospace; font-size: 1rem; background-color: #ecf0f1; color: var(--primary-color); margin-bottom: 5px; transition: border-color 0.2s, box-shadow 0.2s; }
.investment-input:focus, .investment-input:focus-visible { outline: none; border-color: var(--accent-color); box-shadow: none; background-color: #fff; }

.investment-controls { display: flex; gap: 10px; align-items: center; margin-bottom: 5px; }
.investment-controls .investment-input { flex-grow: 1; margin-bottom: 0; }

.share-percentage { font-size: 0.8rem; color: var(--text-light-color); display: block; min-height: 1.2em; }

.intelligence-section { margin-top: 20px; padding-top: 15px; border-top: 2px dashed var(--border-color); }
/* SERP Styles */
.intelligence-as-serp { background-color: #fff; padding: 15px; border-radius: var(--border-radius-pixel); }
.serp-search-bar { width: 100%; padding: 10px 15px; border: 1px solid #dfe1e5; border-radius: 24px; margin-bottom: 20px; box-shadow: 0 1px 6px rgba(32,33,36,.28); font-size: 0.9rem; color: var(--text-color); }
.serp-result { margin-bottom: 20px; padding-left: 10px; }
.serp-result .title { font-size: 1rem; color: #1a0dab; text-decoration: none; font-weight: 500; font-family: var(--font-family-main); display: block; margin-bottom: 3px; }
.serp-result .url { font-size: 0.8rem; color: #006621; display: block; margin-bottom: 5px; font-family: var(--font-family-main); }
.serp-result .snippet { font-size: 0.85rem; color: #545454; line-height: 1.5; margin-bottom: 10px; font-family: var(--font-family-main); }
.serp-result .buy-intel-btn { font-size: 0.7rem; padding: 6px 10px; }
.serp-result.intel-positive { border-left: 4px solid var(--success-color); }
.serp-result.intel-negative { border-left: 4px solid var(--danger-color); }
.intelligence-as-serp > .serp-result:last-child { margin-bottom: 0; }

footer#game-footer { text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border-color); }

/* --- Buttons --- */
button { font-family: var(--font-family-pixel); padding: 10px 20px; border: var(--border-pixel); border-radius: var(--border-radius-pixel); cursor: pointer; font-size: 0.8rem; text-transform: uppercase; transition: transform 0.1s ease, box-shadow 0.1s ease; box-shadow: var(--pixel-shadow); }
button:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0px var(--primary-color); }
button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0px var(--primary-color); }
button:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }

#next-round-btn, #continue-btn, #play-again-btn, #details-modal-close-btn, #submit-feedback-btn, #close-follow-prompt-btn, #restart-game-yes-btn { background-color: var(--secondary-color); color: var(--card-background-color); }
#next-round-btn:hover, #continue-btn:hover, #play-again-btn:hover, #details-modal-close-btn:hover, #submit-feedback-btn:hover, #close-follow-prompt-btn:hover, #restart-game-yes-btn:hover { background-color: #2980b9; }

#restart-game-no-btn { background-color: var(--neutral-color); color: var(--card-background-color); }
#restart-game-no-btn:hover { background-color: #7f8c8d; }

.buy-intel-btn { padding: 8px 12px; background-color: var(--warning-color); color: var(--card-background-color); font-size: 0.7rem; flex-shrink: 0; }
.buy-intel-btn:hover { background-color: #e68a00; }

.confirm-invest-btn { 
    background-color: var(--accent-color); 
    color: white; 
    flex-shrink: 0;
    padding: 8px 15px;
    font-size: 0.7rem;
}
.confirm-invest-btn:hover { background-color: #d35400; }


.details-btn { background-color: var(--primary-color); color: var(--card-background-color); width: auto; padding: 12px 24px; }
.details-btn:hover { background-color: #1c2a38; }
.details-btn-A { background-color: #3498db; } .details-btn-A:hover { background-color: #2980b9; }
.details-btn-B { background-color: #e67e22; } .details-btn-B:hover { background-color: #d35400; }
.details-btn-C { background-color: #9b59b6; } .details-btn-C:hover { background-color: #8e44ad; }
.details-btn-D { background-color: #1abc9c; } .details-btn-D:hover { background-color: #16a085; }
.details-btn-E { background-color: #e91e63; } .details-btn-E:hover { background-color: #c2185b; }
button:disabled, button.hidden { background-color: #bdc3c7; color: #7f8c8d; cursor: not-allowed; box-shadow: none; transform: none; }
button.hidden { display: none !important; }

/* Modals */
.modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.modal.hidden { opacity: 0; visibility: hidden; }
.modal:not(.hidden) { opacity: 1; visibility: visible; }
.modal-content { background-color: var(--card-background-color); padding: 30px 40px; border-radius: var(--border-radius-pixel); box-shadow: var(--pixel-shadow); border: var(--border-pixel); width: 90%; max-width: 1100px; text-align: left; transform: scale(0.95); transition: transform 0.3s ease; }
.modal:not(.hidden) .modal-content { transform: scale(1); }
.modal-content h2 { font-family: var(--font-family-pixel); color: var(--primary-color); font-size: 1.5rem; margin-bottom: 20px; text-align: center; }
.modal-content p { margin-bottom: 15px; line-height: 1.8; font-size: 1rem; }
#summary-content, #final-portfolio, #details-modal-content { margin-bottom: 25px; }

/* Summary & Final Report Styles */
.summary-section { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.summary-section:last-child { border-bottom: none; padding-bottom: 0; }
.summary-section h3 { font-family: var(--font-family-pixel); color: var(--secondary-color); font-size: 1rem; margin-bottom: 15px; }
.summary-item, .portfolio-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed #dcdcdc; font-size: 0.9rem; gap: 10px; }
.summary-item:last-child, .portfolio-item:last-child { border-bottom: none; }
.summary-item strong, .portfolio-item strong { color: var(--primary-color); margin-right: auto; }
.summary-item div:last-child, .portfolio-item span:last-child { text-align: right; flex-shrink: 0; }
#final-summary { font-size: 1rem; line-height: 1.8; background-color: rgba(248, 249, 250, 0.9); padding: 15px; border-radius: var(--border-radius-pixel); border: 1px solid var(--border-color); margin-bottom: 20px; }
#final-summary strong { font-size: 1.1rem; }
.modal-content button:not(.user-area-btn) { display: block; margin: 20px auto 0; }
.profit { color: var(--success-color); font-weight: bold; }
.loss { color: var(--danger-color); font-weight: bold; }
.neutral { color: var(--neutral-color); }
.final-value { font-weight: bold; color: var(--primary-color); }

/* Auth Modals & Form Buttons */
.auth-modal { max-width: 500px; }
.form-group { margin-bottom: 15px; }
label { display: block; font-weight: 500; margin-bottom: 8px; font-family: var(--font-family-pixel); font-size: 0.7rem; color: var(--primary-color); }
input[type="text"], input[type="password"], input[type="tel"] { width: 100%; padding: 10px; border: 2px solid var(--border-color); border-radius: var(--border-radius-pixel); font-family: monospace; font-size: 1rem; background-color: #ecf0f1; }
input:focus { outline: none; border-color: var(--accent-color); background-color: #fff; }
.error-message { color: var(--danger-color); font-size: 0.8rem; min-height: 1.2em; margin-top: 5px; font-family: var(--font-family-pixel); }
.form-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.form-buttons button { margin: 0; }
.form-buttons button[type="button"] { background-color: var(--neutral-color); }
.form-buttons.centered { justify-content: center; gap: 20px; }


/* Feedback & Post-Game Modals */
.feedback-modal-content { max-width: 600px; }
#feedback-text { width: 100%; padding: 10px; font-family: var(--font-family-main); font-size: 0.9rem; border-radius: var(--border-radius-pixel); border: 2px solid var(--border-color); margin-bottom: 20px; }
.star-rating-container { display: flex; flex-direction: column; gap: 15px; margin-bottom: 15px; }
.star-rating-group { display: flex; align-items: center; gap: 15px; }
.star-rating-group label { font-weight: 500; font-size: 1rem; flex-shrink: 0; width: 100px; text-align: right; }
.star-rating-group .stars { font-size: 1.8rem; cursor: pointer; color: var(--neutral-color); }
.star-rating-group .star:hover { color: var(--warning-color); transform: scale(1.1); }
.star-rating-group .star.filled { color: var(--warning-color); }
#feedback-error { text-align: center; }
#play-limit-message { font-family: var(--font-family-pixel); font-size: 0.8rem; text-align: center; color: var(--danger-color); min-height: 1.2em; margin-top: 15px; }
.hint-message { font-size: 0.8rem; color: var(--text-light-color); text-align: center; margin-top: 10px; }

/* Leaderboard Modal */
#leaderboard-modal .modal-content { max-width: 800px; }
#leaderboard-table-container { max-height: 400px; overflow-y: auto; margin-bottom: 15px; border: var(--border-pixel); }
.leaderboard-table { width: 100%; border-collapse: collapse; }
.leaderboard-table th, .leaderboard-table td { border: 1px solid var(--border-color); padding: 10px 12px; text-align: left; }
.leaderboard-table th { font-family: var(--font-family-pixel); font-size: 0.7rem; background-color: #f0f0f0; position: sticky; top: 0; }
.leaderboard-table td:first-child, .leaderboard-table td:nth-child(4), .leaderboard-table td:nth-child(5) { text-align: right; }
.current-user-highlight td { background-color: #e8f4fd; font-weight: bold; }
.winner-highlight td { background-color: #fff9e6; color: #c98910; font-weight: bold; }
#leaderboard-message { text-align: center; font-style: italic; color: var(--text-light-color); margin-top: 15px; }
#leaderboard-submission-status { font-family: var(--font-family-pixel); font-size: 0.8rem; margin-top: 15px; text-align: center; min-height: 1.2em; }
.success-message { color: var(--success-color); }
.error-message { color: var(--danger-color); }
.info-message { color: var(--text-light-color); }

/* Company Icons */
.card-header h2[class^="company-icon-"]::before { content: ''; display: inline-block; width: 1.2em; height: 1.2em; margin-right: 10px; flex-shrink: 0; background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.company-icon-A::before { -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj48cGF0aCBmaWxsPSJjdXJyZW50Q29vbHIiIGQ9Ik03IDFINnY1aDFWM2g0VjF6bTItMWgzdjNoMXYyaC0yVjZoLTFWMnpNMyAxNGw0LTRoMnYtMkg3bC00IDR6Ii8+PC9zdmc+'); mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj48cGF0aCBmaWxsPSJjdXJyZW50Q29vbHIiIGQ9Ik03IDFINnY1aDFWM2g0VjF6bTItMWgzdjNoMXYyaC0yVjZoLTFWMnpNMyAxNGw0LTRoMnYtMkg3bC00IDR6Ii8+PC9zdmc+'); }
.company-icon-B::before { -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj48cGF0aCBmaWxsPSJjdXJyZW50Q29vbHIiIGQ9Ik04IDBDMy41OCAwIDAgMy41OCAwIDhzMy41OCA4IDggOCA4LTMuNTggOC04IDAtOC04IDB6bTAgMmMzLjMxIDAgNiAyLjY5IDYgNnMtMi42OSA2LTYgNi02LTIuNjktNi02IDIuNjktNiA2LTZ6bS0uMDEgNGMtMS4xIDAtMiAuOS0yIDJzLjkgMiAyIDIgMi0uOSAyLTItLjktMi0yLTJ6Ii8+PC9zdmc+'); mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj48cGF0aCBmaWxsPSJjdXJyZW50Q29vbHIiIGQ9Ik04IDBDMy41OCAwIDAgMy41OCAwIDhzMy41OCA4IDggOCA4LTMuNTggOC04IDAtOC04IDB6bTAgMmMzLjMxIDAgNiAyLjY5IDYgNnMtMi42OSA2LTYgNi02LTIuNjktNi02IDIuNjktNiA2LTZ6bS0uMDEgNGMtMS4xIDAtMiAuOS0yIDJzLjkgMiAyIDIgMi0uOSAyLTItLjktMi0yLTJ6Ii8+PC9zdmc+'); }
.company-icon-C::before { -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj48cGF0aCBmaWxsPSJjdXJyZW50Q29vbHIiIGQ9Ik0wIDFoMTZ2M0gwem0xIDRoMTV2OEgxem0xIDJoM3YtMUgyem0wIDJoM3YtMUgyem01LTFoNnYtNUg3eiIvPjwvc3ZnPg=='); mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj48cGF0aCBmaWxsPSJjdXJyZW50Q29vbHIiIGQ9Ik0wIDFoMTZ2M0gwem0xIDRoMTV2OEgxem0xIDJoM3YtMUgyem0wIDJoM3YtMUgyem01LTFoNnYtNUg3eiIvPjwvc3ZnPg=='); }
.company-icon-D::before { -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj48cGF0aCBmaWxsPSJjdXJyZW50Q29vbHIiIGQ9Ik0yIDVoM3YtM0gyem05IDBoM3YtM2gtM3ptLTYgN2gzdjNIMnptOSAwaDN2M2gtM3ptLTYtN2g2djZINXoiLz48L3N2Zz4='); mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj48cGF0aCBmaWxsPSJjdXJyZW50Q29vbHIiIGQ9Ik0yIDVoM3YtM0gyem05IDBoM3YtM2gtM3ptLTYgN2gzdjNIMnptOSAwaDN2M2gtM3ptLTYtN2g2djZINXoiLz48L3N2Zz4='); }
.company-icon-E::before { -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj48cGF0aCBmaWxsPSJjdXJyZW50Q29vbHIiIGQ9Ik04IDhjLTIuMiAwLTQgMS44LTQgNHM0IDQgNCA0IDEuOC00IDQtNC0xLjgtNC00LTQuWk00IDBjLTIuMiAwLTQgMS44LTQgNHMxLjggNCA0IDRoMXYtMkg0Yy0xLjEgMC0yLS45LTItMnMuOS0yIDItMiAyIC45IDIgMmgtMVYwSDQuWk0xMiAwYy0yLjIgMC00IDEuOC00IDRoMXYtMkg4QzYuOSAyIDYgMi45IDYgNHMuOSAyIDIgMiAyLS45IDItMkg5VjBoMy4iLz48L3N2Zz4='); mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj48cGF0aCBmaWxsPSJjdXJyZW50Q29vbHIiIGQ9Ik04IDhjLTIuMiAwLTQgMS44LTQgNHM0IDQgNCA0IDEuOC00IDQtNC0xLjgtNC00LTQuWk00IDBjLTIuMiAwLTQgMS44LTQgNHMxLjggNCA0IDRoMXYtMkg0Yy0xLjEgMC0yLS45LTItMnMuOS0yIDItMiAyIC45IDIgMmgtMVYwSDQuWk0xMiAwYy0yLjIgMC00IDEuOC00IDRoMXYtMkg4QzYuOSAyIDYgMi45IDYgNHMuOSAyIDIgMiAyLS45IDItMkg5VjBoMy4iLz48L3N2Zz4='); }

/* Details Modal Layout */
.details-modal-layout { display: flex; gap: 20px; align-items: flex-start; }
.details-text-content { flex: 2; }
.details-image-content { flex: 1; text-align: center; }
.modal-building-img { max-width: 100%; max-height: 250px; border-radius: var(--border-radius-pixel); border: var(--border-pixel); }
.details-text-content .summary-section { border-bottom: none; }
.details-text-content .info-item { padding: 8px 0; border-bottom: 1px dashed var(--border-color); }
.details-text-content .info-item:last-child { border-bottom: none; }