/* --- ART GRID STYLES --- */ .art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } .art-thumb { background: var(--bg-main); border: 1px solid var(--card-border); padding: 6px; cursor: pointer; transition: all 0.2s ease; } .art-thumb:hover { border-color: var(--accent-pink); transform: translateY(-2px); box-shadow: 2px 2px 0px var(--accent-pink); } .art-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; } .thumb-title { font-size: 0.75rem; margin-top: 5px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--accent-cyan); } /* --- RETRO WINDOW MODAL --- */ .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); z-index: 9999; justify-content: center; align-items: center; padding: 15px; } .modal-overlay.active { display: flex; } .retro-window { background: var(--card-bg); border: 2px solid var(--accent-cyan); box-shadow: 6px 6px 0px var(--accent-cyan); max-width: 750px; width: 100%; overflow: hidden; } .window-header { background: var(--accent-cyan); color: #000; padding: 4px 8px; font-weight: bold; font-size: 0.85rem; display: flex; justify-content: space-between; align-items: center; } .window-close-btn { background: #ff5555; color: #fff; border: 1px solid #000; font-family: inherit; font-size: 0.75rem; padding: 1px 6px; cursor: pointer; font-weight: bold; } .window-close-btn:hover { background: #ff7777; } .window-body { padding: 15px; display: flex; gap: 15px; } @media (max-width: 600px) { .window-body { flex-direction: column; } } .image-wrapper { flex: 1; background: #000; border: 1px solid var(--card-border); display: flex; align-items: center; justify-content: center; } .image-wrapper img { max-width: 100%; max-height: 60vh; object-fit: contain; } .modal-info { width: 240px; display: flex; flex-direction: column; } @media (max-width: 600px) { .modal-info { width: 100%; } }